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 <ul>
  78 <li ng:repeat="printer in data">
  79 <a href="http://{{printer._key}}" target="{{printer._key}}"><tt>{{printer._key}}</tt></a>
  80
  81 {{printer.hostname}}
  82
  83 <tt ng:show="show_pages">{{printer.pages}}</tt>
  84
  85 <span ng:show="show_info">{{printer.info}}</span>
  86
  87 <div class=message ng:show="show_message" ng:repeat="m in printer.message">{{m}}</div>
  88
  89 <ul ng:show="show_consumable">
  90 <b>Consumable</b>
  91 <li ng:repeat="c in printer.consumable">
  92 {{c.name}}
  93 <tt ng:class="'p'+((c.curr * 10 + 0.0001)/ c.max).toFixed(0)">
  94 {{ ((c.curr * 100 + 0.0001)/ c.max).toFixed(1) }}%
  95 </tt>
  96 </li>
  97 </ul>
  98
  99 <ul ng:show="show_trays">
 100 <b>Trays</b>
 101 <li ng:repeat="t in printer.tray">
 102 {{t.dim_x}}*{{t.dim_y}}
 103 <tt ng:class="'p'+((t.capacity * 10 + 0.0001)/ t.max).toFixed(0)">
 104 {{t.capacity}}/{{t.max}}
 105 </tt>
 106 </li>
 107 </ul>
 108
 109 </li>
 110 </ul>
 111
 112 <input name=debug type=checkbox>
 113 <pre ng:show="debug">
 114 data={{data}}
 115 </pre>
 116
 117 </div>
 118
 119
 120 </body>
 121 </html>