robeaux 0.2.0 → 0.3.0

data/less/views/robots.less

@@ -0,0 +1,132 @@
+body {
+  background: @body-background-color;
+  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color: @body-text-color;
+}
+
+.container-wrap {
+  margin-bottom: 30px;
+}
+
+.container, .robot, .widgets, .connections, .themes {
+  width: @gridsystem-width;
+  padding:0;
+  .container();
+}
+
+.row {
+  background: #fff;
+  padding: 15px 0;
+  margin-top: 10px;
+  .clearfix();
+}
+
+.robot-details {
+  .column(12);
+}
+
+.robot {
+
+  h2 {
+    .column(12);
+    text-align: center;
+    margin-bottom: 15px;
+  }
+
+  .input, .results {
+    .column(6);
+  }
+}
+
+.robot-detail {
+  .widgets {
+    .new-widget-instance {
+      height: 100vh;
+      width: 100%;
+    }
+
+    .active-widgets {
+
+      .add-widget {
+        .column(3);
+      }
+
+      button {
+        font-size: 2em;
+      }
+
+      widget {
+        .column(9);
+      }
+    }
+
+    .panel {
+      margin: 10% auto;
+      width: 600px;
+
+      .type {
+        .column(5);
+      }
+
+      .attrs {
+        .column(7);
+
+        label {
+          .column(4);
+        }
+
+        input {
+          .column(8);
+        }
+      }
+    }
+  }
+
+  .robot-devices {
+    .column(6);
+  }
+
+  .robot-connection {
+    .column(6);
+  }
+}
+
+.commands, .device-commands {
+  .param {
+    .row(6);
+    height: 40px;
+
+    input[type='text'] {
+      .column(2,6);
+    }
+
+    select {
+      .column(1.5,6);
+    }
+
+    .close {
+      .column(0.5,6);
+      line-height: 34px;
+      &:hover {
+        color: #f00;
+        cursor: pointer;
+      }
+    }
+  }
+
+  .input>select, &>select {
+    width: 100%;
+    .container-block();
+    margin-bottom: 15px;
+  }
+
+  button {
+    width: 70%;
+    margin-top: 15px;
+    .container-block();
+  }
+
+  table {
+    width: 100%;
+  }
+}

data/less/views/themes.less

@@ -0,0 +1,31 @@
+.themes {
+  .sidebar {
+    .column(4);
+  }
+
+  .new-theme {
+    .row(4);
+
+    input {
+      .column(3,4);
+    }
+
+    button {
+      .column(1,4);
+    }
+  }
+
+  .editor {
+    .column(8);
+
+    textarea {
+      width: 100%;
+      height: 250px;
+    }
+  }
+
+  .footer {
+    .clearfix();
+    .column(12);
+  }
+}

data/less/views/widgets.less

@@ -0,0 +1,50 @@
+.widgets {
+  .sidebar {
+    .column(3);
+  }
+
+  .new-widget {
+    .row(3);
+
+    input {
+      .column(2, 3);
+    }
+
+    button {
+      .column(1, 3);
+    }
+  }
+
+  .new-attr {
+    .row(9);
+
+    input {
+      .column(5, 9);
+    }
+
+    button {
+      .column(3, 9);
+    }
+  }
+
+  .editor {
+    .column(9);
+  }
+
+  .attrs {
+    .column(9, 9);
+  }
+
+  .field {
+    .column(4.5, 9);
+
+    textarea {
+      width: 100%;
+      min-height: 250px;
+    }
+  }
+
+  .footer {
+    .column(12);
+  }
+}

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "robeaux",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "An AngularJS interface for the CPPP-IO API spec",
   "homepage": "http://cylonjs.com",
   "bugs": "https://github.com/hybridgroup/robeaux/issues",
@@ -11,8 +11,11 @@
   },
   "license": "Apache 2.0",
   "devDependencies": {
+    "grunt": "^0.4.5",
+    "grunt-contrib-less": "^0.12.0",
+    "grunt-contrib-watch": "^0.6.1",
     "karma": "~0.12.16",
-    "karma-phantomjs-launcher": "~0.1",
-    "karma-jasmine": "~0.1.5"
+    "karma-jasmine": "~0.1.5",
+    "karma-phantomjs-launcher": "~0.1"
   }
 }

data/partials/device.html

@@ -1,67 +1,76 @@
-<div class="device-detail">
-  <header>
-    <h2>Commands</h2>
-    <h2>Events</h2>
-  </header>
-
-  <div class="device-commands" ng-controller="DeviceCommandsCtrl">
-    <select ng-model="command" ng-options="cmd for cmd in device.commands">
-    </select>
-
-    <div class="params">
-      <div class="param" ng-repeat="param in device.params">
-        <input placeholder='name' type="text" ng-model="param.name" ng-focus="addParam($last)">
-        <input placeholder='value' type="text" ng-model="param.value" ng-focus="addParam($last)">
-        <select ng-options="type for type in types" ng-model="param.type"></select>
-        <span class="close" ng-click="removeParam($index)">X</span>
-      </div>
+<section class="device-detail">
+  <div class="row">
+    <div class="device-header">
+      <h2>Commands</h2>
+      <h2>Events</h2>
     </div>
+  </div>
 
-    <button ng-click="submit()" ng-disabled="isDisabled()">run</button>
+  <div class="row row-device">
+    <div class="container">
+      <div class="device-commands" ng-controller="DeviceCommandsCtrl">
+        <select ng-model="command" ng-options="cmd for cmd in device.commands">
+        </select>
 
-    <table class="results">
-      <thead>
-        <th>Results</th>
-      </thead>
+        <div class="params">
+          <div class="param" ng-repeat="param in device.params">
+            <input placeholder='name' type="text" ng-model="param.name" ng-focus="addParam($last)">
+            <input placeholder='value' type="text" ng-model="param.value" ng-focus="addParam($last)">
+            <select ng-options="type for type in types" ng-model="param.type"></select>
+            <span class="close" ng-click="removeParam($index)">&#x2716;</span>
+          </div>
+        </div>
 
-      <tbody>
-        <tr class="result" ng-repeat="entry in device.results">
-          <td>{{entry.result}}</td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
+        <button class="btn btn-run" ng-click="submit()" ng-disabled="isDisabled()">run</button>
 
-  <div class="device-events" ng-controller="DeviceEventsCtrl">
-    <div class="input">
-      <input type=text" ng-model="eventName" placeholder="event name">
-      <button ng-click="listen()">listen</button>
-    </div>
+        <table class="results">
+          <thead>
+            <tr>
+              <th>Results</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr class="result" ng-repeat="entry in device.results">
+              <td>{{entry.result}}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div class="device-events" ng-controller="DeviceEventsCtrl">
+        <div class="input">
+          <input type="text" ng-model="eventName" placeholder="event name">
+          <button class="btn btn-robot" ng-click="listen()">listen</button>
+        </div>
 
-    <table class="listeners">
-      <thead>
-        <th colspan="2">Listeners</th>
-      </thead>
+        <div class="listeners-div">
+          <table class="listeners">
+            <thead>
+              <th colspan="2">Listeners</th>
+            </thead>
 
-      <tbody>
-        <tr class="listener" ng-repeat="(name, listeners) in device.listeners">
-          <td>{{name}}</td>
-          <td class="remove" ng-click="remove(name)">remove</td>
-        </tr>
-      </tbody>
-    </table>
+            <tbody>
+              <tr class="listener" ng-repeat="(name, listeners) in device.listeners">
+                <td>{{name}}</td>
+                <td class="remove" ng-click="remove(name)">remove</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
 
-    <table class="events">
-      <thead>
-        <th colspan="2">Events</th>
-      </thead>
+        <table class="events">
+          <thead>
+            <th colspan="2">Events</th>
+          </thead>
 
-      <tbody>
-        <tr class="event" ng-repeat="event in device.events">
-          <td>{{event.name}}</td>
-          <td>{{event.data}}</td>
-        </tr>
-      </tbody>
-    </table>
+          <tbody>
+            <tr class="event" ng-repeat="event in device.events">
+              <td>{{event.name}}</td>
+              <td>{{event.data}}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
   </div>
-</div>
+</section>

data/partials/index.html

@@ -1,11 +1,17 @@
 <div class="robots">
-  <div class="robot" ng-repeat="robot in robots" ng-click="details(robot.name)">
-    <span class="icon">robot</span>
-    <span class="name">{{robot.name}}</span>
+  <div class="row" ng-repeat="robot in robots" ng-click="details(robot.name)">
+    <div class="robot">
+      <div class="robot-details">
 
-    <div class="details">
-      <span><strong>Connections:</strong> {{robot.connections.length}}</span>
-      <span><strong>Devices:</strong> {{robot.devices.length}}</span>
+        <span class="btn btn-robot btn-big">robot</span>
+        <span class="name">{{robot.name}}</span>
+
+        <div class="details">
+          <span class="bullet-connections"><strong>Connections</strong> {{robot.connections.length}}</span>
+          <span class="bullet-devices"><strong>Devices</strong> {{robot.devices.length}}</span>
+        </div>
+        
+      </div>
     </div>
   </div>
 </div>

data/partials/robot.html

@@ -1,74 +1,127 @@
 <div class="robot-detail">
-  <div class="robot" ng-class="{'with-commands': (robot.commands.length > 0)}">
-    <span class="icon">robot</span>
-    <span class="name">{{robot.name}}</span>
 
-    <div class="details">
-      <span><strong>Connections:</strong> {{robot.connections.length}}</span>
-      <span><strong>Devices:</strong> {{robot.devices.length}}</span>
-    </div>
+  <!-- begin robot section -->
+  <div class="row">
+    <div class="robot" ng-class="{'with-commands': (robot.commands.length > 0)}">
+      <div class="robot-details">
+        <span class="btn btn-robot btn-big">robot</span>
+        <span class="name">{{robot.name}}</span>
+
+        <div class="details">
+          <span class="bullet-connections"><strong>Connections</strong> {{robot.connections.length}}</span>
+          <span class="bullet-devices"><strong>Devices</strong> {{robot.devices.length}}</span>
+        </div>
+      </div>
+
+      <div class="commands" ng-if="(robot.commands.length > 0)" ng-controller="RobotCommandsCtrl">
+        <h2>Commands</h2>
+        <div class="input">
+          <select ng-model="command" ng-options="cmd for cmd in robot.commands">
+          </select>
 
-    <div class="commands" ng-if="(robot.commands.length > 0)" ng-controller="RobotCommandsCtrl">
-      <h2>Commands</h2>
-      <div class="input">
-        <select ng-model="command" ng-options="cmd for cmd in robot.commands">
-        </select>
-
-        <div class="params">
-          <div class="param" ng-repeat="param in robot.params">
-            <input placeholder='name' type="text" ng-model="param.name" ng-focus="addParam($last)">
-            <input placeholder='value' type="text" ng-model="param.value" ng-focus="addParam($last)">
-            <select ng-options="type for type in types" ng-model="param.type"></select>
-            <span class="close" ng-click="removeParam($index)">X</span>
+          <div class="params">
+            <div class="param" ng-repeat="param in robot.params">
+              <input placeholder='name' type="text" ng-model="param.name" ng-focus="addParam($last)">
+              <input placeholder='value' type="text" ng-model="param.value" ng-focus="addParam($last)">
+              <select ng-options="type for type in types" ng-model="param.type"></select>
+              <span class="close" ng-click="removeParam($index)">&#x2716;</span>
+            </div>
           </div>
+
+          <button class="btn btn-run" ng-click="submit()" ng-disabled="isDisabled()">run</button>
         </div>
 
-        <button ng-click="submit()" ng-disabled="isDisabled()">run</button>
-      </div>
+        <div class="results">
+          <table>
+            <thead>
+              <th>Results</th>
+            </thead>
 
-      <div class="results">
-        <table>
-          <thead>
-            <th>Results</th>
-          </thead>
-
-          <tbody>
-            <tr class="result" ng-repeat="entry in robot.results">
-              <td>{{entry.result}}</td>
-            </tr>
-          </tbody>
-        </table>
+            <tbody>
+              <tr class="result" ng-repeat="entry in robot.results">
+                <td>{{entry.result}}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
       </div>
     </div>
   </div>
+  <!-- end robot section -->
 
-  <div ng-show="device" ng-include="'/partials/device.html'">
-  </div>
+  <!-- begin widgets -->
+  <div class="row">
+    <div class="widgets" ng-controller="WidgetsCtrl">
+      <div class="new-widget-instance" ng-show="newWidget">
+        <div class="panel">
+          <div class="panel-header">
+            <span class="close" ng-click="newWidget = null"> &#x2716; </span>
+            <h2>New Widget Instance</h2>
+          </div>
 
-  <section>
-    <div class="robot-devices">
-      <div class="device"
-          ng-class="{selected: selected(device)}"
-          ng-repeat="device in robot.devices"
-          ng-click="select(device)">
-        <span class="icon">device</span>
-        <span class="name">{{device.name}}</span>
+          <div class="panel-body">
+            <div class="type">
+              <h3>Widget Type:</h3>
+              <select ng-model="newWidget.base" ng-options="w.name for w in widgets.list"></select>
+            </div>
 
-        <div class="details">
-          <span>{{device.connection}}</span>
+            <div class="attrs" ng-if="newWidget.base.attrs.length">
+              <h3>Params:</h3>
+
+              <div class="attr-element" ng-repeat="attr in newWidget.base.attrs">
+                <label>{{attr}}</label>
+                <input type="text" ng-model="newWidget.attrs[attr]">
+              </div>
+            </div>
+          </div>
+
+          <div class="panel-footer">
+            <button class="btn btn-device" ng-click="newActiveWidget(newWidget)">Create</button>
+            <button class="btn btn-run" ng-click="newWidget = null">Close</button>
+          </div>
         </div>
       </div>
+
+      <div class="active-widgets">
+        <div class="add-widget">
+          <button class="btn btn-robot btn-big" ng-click="newWidget = { base: '', attrs: {} }"> &#x2b; </button>
+        </div>
+
+        <widget ng-repeat="widget in activeWidgets" data-name="{{widget.name}}" data-attrs="{{widget.attrs}}">
+          <span class="close" ng-click="removeWidget($index)"> &#x2716; </span>
+        </widget>
+      </div>
     </div>
+  </div>
+  <!-- end widgets -->
 
-    <div class="robot-connections">
-      <div class="connection" ng-repeat="connection in robot.connections">
-        <span class="icon">connection</span>
-        <span class="name">{{connection.name}}</span>
+  <div ng-show="device" ng-include="'/partials/device.html'"></div>
 
-        <div class="details">
-          <span ng-if="connection.port">{{connection.port}}</span>
+  <!-- begin connections -->
+  <section class="row">
+    <div class="connections">
+      <div class="robot-devices">
+        <div class="device" ng-class="{selected: selected(device)}" ng-repeat="device in robot.devices">
+          <button ng-click="select(device)" class="btn btn-device">device</button>
+          <span class="name">{{device.name}}</span>
+
+          <div class="details">
+            <span>{{device.connection}}</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="robot-connections">
+        <div class="connection" ng-repeat="connection in robot.connections">
+          <span class="btn btn-connect">connection</span>
+          <span class="name">{{connection.name}}</span>
+
+          <div class="details">
+            <span ng-if="connection.port">{{connection.port}}</span>
+          </div>
         </div>
       </div>
     </div>
   </section>
+  <!-- end connections -->
 </div>

data/partials/themes.html

@@ -1,39 +1,42 @@
-<div class="themes">
-  <div class="sidebar">
-    <h2>Themes</h2>
+<div class="row">
+  <div class="themes">
+    <div class="sidebar">
+      <h2>Themes</h2>
 
-    <div class="list">
-      <div class="theme"
-           ng-repeat="theme in themes.list | filter:{custom: true}"
-           ng-click="edit(theme)"
-           ng-class="{selected: (editing === theme)}">
-        {{theme.name}}
-        <span class="close" ng-if="theme.custom" ng-click="remove(theme.name)">X</span>
+      <div class="new-theme">
+        <input type="text" ng-model="name" placeholder="new theme name">
+        <button ng-click="add(name)" class="btn btn-device">Add</button>
+      </div>
+
+      <div class="list">
+        <div class="theme"
+             ng-repeat="theme in themes.list | filter:{custom: true}"
+             ng-click="edit(theme)"
+             ng-class="{selected: (editing === theme)}">
+          {{theme.name}}
+          <span class="close" ng-if="theme.custom" ng-click="remove(theme.name)">&#x2716;</span>
+        </div>
       </div>
-    </div>
 
-    <div class="new-theme">
-      <input type="text" ng-model="name" placeholder="new theme name">
-      <button ng-click="add(name)">add new theme</button>
     </div>
-  </div>
 
-  <div class="editor">
-    <h2>Editor</h2>
+    <div class="editor">
+      <h2>Editor</h2>
 
-    <textarea ng-disabled="!editing" ng-model="editing.css" ng-blur="themes.save()" placeholder="write your css here">
-    </textarea>
-  </div>
+      <textarea ng-disabled="!editing" ng-model="editing.css" ng-blur="themes.save()" placeholder="write your css here">
+      </textarea>
+    </div>
 
-  <div class="footer">
-    <button class="save" ng-click="themes.save()">save</button>
-    <button class="reset" ng-click="themes.reset()">reset</button>
+    <div class="footer">
+      <button class="btn btn-save" ng-click="themes.save()">save</button>
+      <button class="btn btn-reset" ng-click="themes.reset()">reset</button>
 
-    <div class="selector">
-      <span>use theme: </span>
-      <select ng-model="themes.active"
-              ng-options="theme.name for theme in themes.list">
-      </select>
+      <div class="selector">
+        <span>use theme: </span>
+        <select ng-model="themes.active"
+                ng-options="theme.name for theme in themes.list">
+        </select>
+      </div>
     </div>
   </div>
-</div>
+</div>