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_consumable>
  54 show consumable
  55 </label>
  56
  57 <label>
  58 <input type=checkbox name=show_trays>
  59 show trays
  60 </label>
  61
  62 <ul>
  63 <li ng:repeat="printer in data">
  64 <tt>{{printer._key}}</tt>
  65 {{printer.info}}
  66
  67 <div class=message ng:repeat="m in printer.message">{{m}}</div>
  68
  69 <ul ng:show="show_consumable">
  70 <b>Consumable</b>
  71 <li ng:repeat="c in printer.consumable">
  72 {{c.name}}
  73 <tt ng:class="'p'+((c.curr * 10 + 0.0001)/ c.max).toFixed(0)">
  74 {{ ((c.curr * 100 + 0.0001)/ c.max).toFixed(1) }}%
  75 </tt>
  76 </li>
  77 </ul>
  78
  79 <ul ng:show="show_trays">
  80 <b>Trays</b>
  81 <li ng:repeat="t in printer.tray">
  82 {{t.dim_x}}*{{t.dim_y}}
  83 <tt ng:class="'p'+((t.capacity * 10 + 0.0001)/ t.max).toFixed(0)">
  84 {{t.capacity}}/{{t.max}}
  85 </tt>
  86 </li>
  87 </ul>
  88
  89 </li>
  90 </ul>
  91
  92 <input name=debug type=checkbox>
  93 <pre ng:show="debug">
  94 data={{data}}
  95 </pre>
  96
  97 </div>
  98
  99
 100 </body>
 101 </html>