public/app/monitor/printers.html

   1 <!DOCTYPE HTML>
   2 <html xmlns:ng="http://angularjs.org">
   3 <head>
   4 <meta charset="utf-8">
   5 <script src="angular.js" ng:autobind></script>
   6
   7 <script>
   8 Printers.$inject = ['$xhr'];
   9
  10 function Printers(xhr){
  11         this.xhr = xhr;
  12         var self = this;
  13         this.xhr("JSON"
  14                 , "/json/monitor/printers?callback=JSON_CALLBACK"
  15                 , function(code, response){
  16                         console.log('xhr JSON', code, response);
  17                         self.data = response;
  18                 }
  19         );
  20
  21 }
  22
  23 </script>
  24
  25 <title>Printer overview</title>
  26
  27 <style>
  28 .message {
  29         font-size: 80%;
  30         font-family: monospace;
  31         background: #ffe;
  32 }
  33
  34 .p0 { color: #800 }
  35 .p1 { color: #810 }
  36 .p2 { color: #820 }
  37 .p3 { color: #840 }
  38 .p4 { color: #860 }
  39 .p5 { color: #880 }
  40 .p6 { color: #680 }
  41 .p7 { color: #480 }
  42 .p8 { color: #280 }
  43 .p9 { color: #180 }
  44 .p10{ color: #080 }
  45 </style>
  46
  47 </head>
  48 <body>
  49
  50 <div ng:controller="Printers">
  51
  52 <label><input type=checkbox name=hostname checked>hostname</label>
  53 <label><input type=checkbox name=model>model</label>
  54 <label><input type=checkbox name=serial>serial</label>
  55 <label><input type=checkbox name=message checked>message</label>
  56 <label><input type=checkbox name=consumable>consumable</label>
  57 <label><input type=checkbox name=trays>trays</label>
  58 <label><input type=checkbox name=pages checked>pages</label>
  59 <label><input type=checkbox name=info>info</label>
  60
  61 <input type=text name=search>
  62
  63 <table>
  64 <tr ng:repeat="printer in data.$filter(search)">
  65 <td><a href="http://{{printer._key}}" target="{{printer._key}}"><tt>{{printer._key}}</tt></a></td>
  66
  67 <td ng:show="hostname">{{printer.hostname}}</td>
  68 <td ng:show="model">{{printer.model}}</td>
  69 <td ng:show="serial">{{printer.serial}}</td>
  70
  71 <td><div class=message ng:show="message" ng:repeat="m in printer.message">{{m}}</div></td>
  72
  73 <td ng:show="consumable">
  74 <span ng:repeat="c in printer.consumable" ng:class="'p'+((c.curr * 10 + 0.0001)/ c.max).toFixed(0)" title="{{c.name}}">
  75         {{ ((c.curr * 100 + 0.0001)/ c.max).toFixed(1) }}%
  76 </span>
  77 </td>
  78
  79 <td ng:show="trays">
  80         <span ng:repeat="t in printer.tray" ng:class="'p'+((t.capacity * 10 + 0.0001)/ t.max).toFixed(0)" title="{{t.name}} {{t.dim_x}}*{{t.dim_y}}">
  81         {{t.capacity}}/{{t.max}}
  82         </span>
  83 </td>
  84
  85 <td ng:show="pages" align="right">{{printer.pages}}</td>
  86
  87 <td ng:show="info">{{printer.info}}</td>
  88
  89 </table>
  90
  91 <input name=debug type=checkbox>
  92 <pre ng:show="debug">
  93 data={{data}}
  94 </pre>
  95
  96 </div>
  97
  98
  99 </body>
 100 </html>