Add start, stop, restart buttons to sksysmon.

sksysmon/res/imp/unitlist.html

Index: sksysmon/res/imp/unitlist.html
diff --git a/sksysmon/res/imp/unitlist.html b/sksysmon/res/imp/unitlist.html
index 3b8d0f0327466a6f8639d5a2c4ad04d45b16cfc7..d57ab523d7000a57f7b36e47e9c62c9f9cac684e 100644
--- a/sksysmon/res/imp/unitlist.html
+++ b/sksysmon/res/imp/unitlist.html
@@ -10,21 +10,28 @@
     none.
 
   Events:
-    none.
+    unit-updated - Sent when a units status has changed and the list should be
+       reloaded.
 -->
 <polymer-element name="unit-list-sk">
   <template>
     <style type="text/css" media="screen">
-      table {
-        font-size: 20px;
+      paper-button:hover {
+        background: #eee;
       }
     </style>
-    <table>
+    <table id=list>
       <tr><th>Service</th><th>Status</th></tr>
       <template repeat="{{u in units}}">
-        <tr><td>{{u.Name}}</td><td>{{u.SubState}}</td></tr>
+        <tr>
+          <td>{{u.Name}}</td><td>{{u.SubState}}</td>
+          <td><paper-button raised data-action="start" data-name="{{u.Name}}">Start</paper-button></td>
+          <td><paper-button raised data-action="stop" data-name="{{u.Name}}">Stop</paper-button></td>
+          <td><paper-button raised data-action="restart" data-name="{{u.Name}}">Restart</paper-button></td>
+        </tr>
       </template>
     </table>
+    <paper-toast id=toast></paper-toast>
   </template>
   <script>
     Polymer({
@@ -34,6 +41,35 @@
           reflect: false,
         }
       },
+
+      ready: function() {
+        var that=this;
+        this.$.list.addEventListener('click', function(e) {
+          // Find the paper-button element, it has the name and action
+          // to perform in its data-attributes.
+          var ele = null;
+          for (var i=0; i<e.path.length; i++) {
+            if (e.path[i].nodeName == "PAPER-BUTTON") {
+              ele = e.path[i];
+              break;
+            }
+          }
+          if (ele) {
+            var params = {
+              name: ele.dataset.name,
+              action: ele.dataset.action,
+            };
+            sk.post('/_/change?'+sk.query.fromObject(params)).then(JSON.parse).then(function(json) {
+              that.$.toast.text = ele.dataset.name + ": " + json.result;
+              that.$.toast.show();
+              that.dispatchEvent(new CustomEvent('unit-updated'));
+            }).catch(function(e) {
+              that.$.toast.text = e;
+              that.$.toast.show();
+            })
+          }
+        });
+      },
     });
   </script>
 </polymer-element>