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>
  53 <input type=checkbox name=show_message>
  54 message
  55 </label>
  56
  57 <label>
  58 <input type=checkbox name=show_consumable>
  59 consumable
  60 </label>
  61
  62 <label>
  63 <input type=checkbox name=show_trays>
  64 trays
  65 </label>
  66
  67 <label>
  68 <input type=checkbox name=show_pages>
  69 pages
  70 </label>
  71
  72 <label>
  73 <input type=checkbox name=show_info>
  74 info
  75 </label>
  76
  77 <table>
  78 <tr ng:repeat="printer in data">
  79 <td><a href="http://{{printer._key}}" target="{{printer._key}}"><tt>{{printer._key}}</tt></a></td>
  80 <td>{{printer.hostname}}</td>
  81
  82 <td><div class=message ng:show="show_message" ng:repeat="m in printer.message">{{m}}</div></td>
  83
  84 <td ng:show="show_consumable">
  85         <table>
  86         <tr ng:repeat="c in printer.consumable">
  87         <td align="right" ng:class="'p'+((c.curr * 10 + 0.0001)/ c.max).toFixed(0)">{{ ((c.curr * 100 + 0.0001)/ c.max).toFixed(1) }}%</td>
  88         <td>{{c.name}}</td>
  89         </tr>
  90         </table>
  91 </td>
  92
  93 <td ng:show="show_trays">
  94         <table>
  95         <tr ng:repeat="t in printer.tray">
  96         <td align="right" ng:class="'p'+((t.capacity * 10 + 0.0001)/ t.max).toFixed(0)">{{t.capacity}}/{{t.max}}</td>
  97         <td>{{t.name}}</td>
  98         <td>{{t.dim_x}}*{{t.dim_y}}</td>
  99         </tr>
 100         </table>
 101 </td>
 102
 103 <td ng:show="show_pages">{{printer.pages}}</td>
 104
 105 <td ng:show="show_info">{{printer.info}}</td>
 106
 107 </table>
 108
 109 <input name=debug type=checkbox>
 110 <pre ng:show="debug">
 111 data={{data}}
 112 </pre>
 113
 114 </div>
 115
 116
 117 </body>
 118 </html>