Merge pull request #23 from zettajs/multiple-inputs

Multiple inputs
zettajs · Oct 27, 2014 · 0383c40 · 0383c40
2 parents d69ff98 + 3f4fdf0
commit 0383c40
Show file tree

Hide file tree

Showing 22 changed files with 801 additions and 471 deletions.
diff --git a/dist/partials/device-actions.html b/dist/partials/device-actions.html
@@ -2,35 +2,41 @@
 <form class="pure-form pure-form-stacked">
   <fieldset>
     <legend># {{ action.name }}</legend>
-    <label ng-repeat-start="field in action.fields" for="{{ action.name + field.name }}" class="{{ field.type }}"></label>
 
-    <ng-switch on="field.type">
-      <div ng-switch-when="radio" ng-if="!action.renderOptionsAsButtons">
-        <!-- regular radios -->
-        <label class="pure-radio" ng-repeat="val in action.radioField.value" for="{{ action.name + field.name }}_{{ $index }}" >
-        <input id="{{ action.name + field.name }}_{{ $index }}" type="radio" name="{{ action.name + field.name }}" value="{{ val.value }}"/>
-          {{ val.value }}
-        </label>
+    <!-- Handle single button and single input -->
+    <div ng-if="action.renderOptionsAsButton || action.renderOptionsAsMultipleInputs">
 
-      </div>
+      <div ng-repeat="field in action.inputFields">
+        <div class="fields" ng-switch="field.type">
 
-      <div ng-switch-when="radio" ng-if="action.renderOptionsAsButtons">
-            <button ng-repeat="val in action.radioField.value" class="pure-button {{ action.name + '-button' }}" ng-click="val.execute()">{{ val.title || val.value}}</button>
-      </div>
+          <!-- Handle dropdowns -->
+          <select ng-switch-when="radio" ng-model="field.value" ng-options="option.value as (option.text || option.value) for option in field.options">
+            <option value="">-- choose {{field.name}} --</option>
+          </select>
 
+          <!-- Handle range -->
+          <div ng-switch-when="range">
+            <font class="min"> {{ field.min }} </font>
+            <input ng-model="field.value" id="{{ action.name + field.name }}" min="{{ field.min }}" max="{{ field.max }}" step="{{ field.step }}"  type="{{ field.type }}" name="{{ field.name }}" value="{{ field.value }}" />
+            <font class="max"> {{ field.max }} </font>
+            <input ng-model="field.value" type="number" min="{{ field.min }}" max="{{ field.max }}" step="{{ field.step }}" value="{{ field.value }}" placeholder="{{ field.value }}"  />
+          </div>
 
-      <textarea ng-switch-when="textarea" name="{{ field.name }}" value="{{ field.value }}"
-              id="{{ action.name + field.name }}" ng-model="field.value" class="pure-u-1"></textarea>
+          <!-- Handle other input types -->
+          <input ng-switch-default ng-model="field.value" class="pure-u-1" id="{{ action.name + field.name }}" placeholder="{{ field.name }}" type="{{ field.type }}" name="{{ field.name }}" value="{{ field.value }}" />
+        </div>
+      </div>
 
-      <input placeholder="{{ field.name }}" type="{{ field.type }}" class="pure-u-1" name="{{ field.name }}" value="{{ field.value }}"
-              id="{{ action.name + field.name }}" step="{{field.step}}" min="{{field.min}}" max="{{field.max}}" ng-model="field.value" ng-switch-default/>
+      <button class="pure-button {{ action.name + '-button' }}" ng-disabled="!action.available" ng-click="execute()">{{ action.name }}</button>
+    </div>
 
-    </ng-switch>
-    <span ng-repeat-end></span>
 
-    <button class="pure-button {{ action.name + '-button' }}" ng-disabled="!action.available" ng-click="execute()" ng-if="!action.renderOptionsAsButtons">{{ action.name }}</button>
-  </fieldset>
+    <!-- Handle double radio inputs as two buttons -->
+    <div ng-if="action.renderOptionsAsRadioButtons">
+      <button ng-repeat="val in action.radioField.value" class="pure-button {{ action.name + '-button' }}" ng-click="val.execute()">{{ val.title || val.value}}</button>
+    </div>
 
+  </fieldset>
 </form>
 
 <!--

diff --git a/dist/partials/muted_characteristic.html b/dist/partials/muted_characteristic.html
@@ -0,0 +1,20 @@
+<div class="pure-u-1-6 pure-u-md-1-12"></div>
+    <h2 class="name pure-u-5-6 pure-u-md-11-12">Muted<span>:group</span></h2>
+    <section class="devices pure-u-1">
+    <div ng-class="{ open: !!characteristic.muteOpen, closed: !characteristic.muteOpen }" class="device row action pure-g animate-size closed" ng-repeat="characteristic in muted">
+        <div class="switches pure-u-1-6 pure-u-md-1-12">
+          <b class="mute"ng-click="unmute(characteristic)">eye</b>&nbsp;<b class="pin" ng-click="pin(characteristic)">pushpin</b>
+        </div>
+        <div class="name pure-u-5-6 pure-u-md-1-4">
+          <a class="server-name" ng-click="loadServer(characteristic.device.server)">{{ characteristic.device.server.name }} &gt; </a>
+          <br/>
+          <a ng-click="resolve(characteristic.device.href)" class="device-name">
+            {{ characteristic.device.properties.name || characteristic.device.properties.type }}</a>
+          <span class="stream-name"> {{ characteristic.name }}</span>
+        </div>
+        <div class="vis pure-u-5-6 pure-u-md-5-12">
+          -
+        </div>
+        <div class="value before-md pure-u-md-1-4">&nbsp;-</div>
+      </div>
+    </section>
diff --git a/dist/partials/overview-action.html b/dist/partials/overview-action.html
@@ -1,21 +1,97 @@
-<div class="action-content" ng-if="action.renderOptionsAsButtons">
-  <div class="vis pure-u-1 pure-u-md-5-8"></div>
-  <div class="value pure-u-1 pure-u-md-1-4">
-    <form ng-repeat="val in action.radioField.value" class="pure-form overview-action-form">
+
+<!-- Handle single button -->
+<div ng-if="action.renderOptionsAsButton">
+
+  <form class="pure-form action-content">
+    <div class="name pure-u-1-2 pure-u-md-1-4">
+      # {{ action.name }}
+    </div>
+
+    <div class="vis pure-u-1 pure-u-md-5-12" ng-repeat="field in action.inputFields" ng-if="field.type!='hidden'">
+
+          <!-- Handle dropdowns -->
+          <select ng-if="field.type=='radio'" ng-options="option.value as (option.text || option.value) for option in field.options">
+            <option value="">-- choose {{field.name}} --</option>
+          </select>
+
+          <!-- Handle range -->
+          <div ng-if="field.type=='range'">
+            {{ field.min }}
+            <input ng-model="field.value" id="{{ action.name + field.name }}" min="{{ field.min }}" max="{{ field.max }}" step="{{ field.step }}"  type="{{ field.type }}" name="{{ field.name }}" value="{{ field.value }}" />
+            {{ field.max }}
+            <input ng-model="field.value" type="number" min="{{ field.min }}" max="{{ field.max }}" step="{{ field.step }}" value="{{ field.value }}" placeholder="{{ field.value }}"  />
+          </div>
+
+          <!-- Handle other input types -->
+          <input ng-if="field.type!='range'&&field.type!='radio'" class="pure-u-1" id="{{ action.name + field.name }}" placeholder="{{ field.name }}" ng-type="{{ field.type }}" name="{{ field.name }}" value="{{ field.value }}" />
+    </div>
+    <div class="vis before-md pure-u-1 pure-u-md-5-12" ng-if="action.inputFields.length<2"></div>
+    <div class="value pure-u-1-2 pure-u-md-1-3" ng-if="action.inputFields.length<2">
+      <button class="pure-button {{ action.name + '-button' }}" ng-disabled="!action.available" ng-click="execute()">{{ action.name }}</button>
+    </div>
+    <div class="value pure-u-1 pure-u-md-1-3" ng-if="action.inputFields.length>=2">
+      <button class="pure-button {{ action.name + '-button' }}" ng-disabled="!action.available" ng-click="execute()">{{ action.name }}</button>
+    </div>
+</form>
+</div>
+<!-- Handle double radio inputs as two buttons -->
+<div ng-if="action.renderOptionsAsRadioButtons">
+  <div class="name pure-u-1-2 pure-u-md-1-4">
+    # {{ action.name }}
+  </div>
+
+  <div class="vis before-md pure-u-1 pure-u-md-5-12"></div>
+  <div class="value pure-u-1-2 pure-u-md-1-3">
+    <form ng-repeat="val in action.radioField.value" class="pure-form">
       <button class="pure-button {{ action.name + '-button' }}" ng-click="val.execute()">{{ val.title || val.value}}</button>
     </form>
   </div>
-
 </div>
 
-<form class="pure-form action-content" ng-if="!action.renderOptionsAsButtons">
-  <div class="vis pure-u-1 pure-u-md-5-8">
-    <div class="fields">
-          <input ng-repeat="field in action.fields" placeholder="{{ field.name }}" step="{{field.step}}" min="{{field.min}}" max="{{field.max}}" type="{{ field.type }}" class="pure-u-1" name="{{ field.name }}" value="{{ field.value }}"
-            id="{{ action.name + field.name }}" ng-model="field.value"/>
+
+<!-- Handle multiple inputs -->
+<div ng-if="action.renderOptionsAsMultipleInputs">
+  <form class="pure-form action-content">
+
+    <div class="name pure-u-1-4">
+      # {{ action.name }}
     </div>
-  </div>
-  <div class="value pure-u-1 pure-u-md-1-4" ng-if="!action.renderOptionsAsButtons">
-    <button class="pure-button {{ action.name + '-button' }}" ng-disabled="!action.available" ng-click="execute()">{{ action.name }}</button>
-  </div>
-</form>
+    <div class="vis before-md pure-u-1 pure-u-md-5-12"></div>
+    <div class="value before-md pure-u-1 pure-u-md-1-3">
+      <button class="pure-button {{ action.name + '-button' }}" ng-disabled="!action.available" ng-click="execute()">{{ action.name }}</button>
+    </div>
+
+
+
+    <div ng-repeat="field in action.inputFields">
+      <div class="name pure-u-1-4">
+        <label ng-if="!field.isHidden" for="{{field.name}}">{{field.name}}</label>
+      </div>
+
+      <div class="vis pure-u-1 pure-u-md-5-12">
+        <div class="fields" ng-switch="field.type">
+
+          <!-- Handle dropdowns -->
+          <select ng-switch-when="radio" ng-model="field.value" ng-options="option.value as (option.text || option.value) for option in field.options">
+            <option value="">-- choose {{field.name}} --</option>
+          </select>
+
+          <!-- Handle range -->
+          <div ng-switch-when="range">
+            {{ field.min }} 
+            <input ng-model="field.value" id="{{ action.name + field.name }}" min="{{ field.min }}" max="{{ field.max }}" step="{{ field.step }}"  type="{{ field.type }}" name="{{ field.name }}" value="{{ field.value }}" />
+            {{ field.max }}
+            <input ng-model="field.value" type="number" min="{{ field.min }}" max="{{ field.max }}" step="{{ field.step }}" value="{{ field.value }}" placeholder="{{ field.value }}"  />
+          </div>
+
+          <!-- Handle other input types -->
+          <input ng-switch-default ng-model="field.value" class="pure-u-1" id="{{ action.name + field.name }}" placeholder="{{ field.name }}" type="{{ field.type }}" name="{{ field.name }}" value="{{ field.value }}" />
+
+        </div>
+      </div>
+    </div>
+    <div class="value hide-md pure-u-1 pure-u-md-1-3">
+      <button class="pure-button {{ action.name + '-button' }}" ng-disabled="!action.available" ng-click="execute()">{{ action.name }}</button>
+    </div>
+  </form>
+</div>
diff --git a/dist/partials/overview.html b/dist/partials/overview.html
@@ -11,45 +11,19 @@ <h1>{{ filter || 'root' }}
       </h1>
     </section>
   </header>
-  <div class="pinned device-group pure-g " ng-show="pinned.length">
-    <div class="pure-u-1-6 pure-u-md-1-12"></div>
-    <h2 class="name pure-u-5-6 pure-u-md-11-12">Pinned<span>:group</span></h2>
-    <section class="devices pure-u-1">
+
+  <div class="server-loading pure-u-1" ng-if="loading"><b>stop</b><b>stop</b><b>stop</b></div>
 
-    <div ng-repeat="characteristic in pinned" class="device row pure-g animate-size {{characteristic.type}}"
-      ng-class="{ open: !!characteristic.pinOpen, closed: !characteristic.pinOpen, action: !characteristic.type, stream: !!characteristic.type, disabled: (!characteristic.type && !characteristic.available) }" >
-        <div class="switches pure-u-1-6 pure-u-md-1-12">
-          <b class="mute" ng-click="mute(characteristic)">eye</b>&nbsp;<b class="pin" ng-click="unpin(characteristic)">pushpin</b>
-        </div>
-        <div class="name pure-u-1-2 pure-u-md-1-4">
-          <a class="server-name" ng-click="loadServer(characteristic.device.server)">{{ characteristic.device.server.name }} &gt; </a>
-          <br/>
-          <a ng-click="resolve(characteristic.device.href)" class="device-name">
-            {{ characteristic.device.properties.name || characteristic.device.properties.type }}</a>
-          <span class="stream-name"> {{ characteristic.name }}</span>
-        </div>
-        <div class="value hide-md pure-u-1-3">{{ characteristic.current }}</div>
-        <div class="pure-u-1-6 hide-md"></div>
-        <div class="vis pure-u-5-6 pure-u-md-5-12" ng-if="characteristic.type">
-          <div class="sparkline" ng-if="characteristic.type === 'numerical'">
-            <sparkline height="16" stream="characteristic.data" id="{{ characteristic.name }}"></sparkline>
-          </div>
-          <div class="dnastrip" ng-if="characteristic.type === 'categorical'">
-            <z-dna-strip width="100" height="16" stream="characteristic"></z-dna-strip>
-          </div>
-        </div>
-        <div class="value before-md pure-u-md-1-4" ng-if="characteristic.type">&nbsp;{{ characteristic.current }}</div>
-        <div class="pure-u-5-6 pure-u-md-2-3"  ng-if="!characteristic.type">
-          <zetta-overview-action class="row action" value="characteristic" />
-        </div>
-
-      </div>
-    </section>
+  <!-- Pinned Group -->
+  <div class="pinned device-group pure-g " ng-show="pinned.length">
+
+    <ng-include src="'partials/pinned_characteristic.html'" class="pure-u-1"></ng-include>
   </div>
-  <div class="server-loading pure-u-1" ng-if="loading"><b>stop</b><b>stop</b><b>stop</b></div>
+
+  <!-- Servers -->
   <div class="server device-group pure-g" ng-repeat="server in servers" ng-show="server.available && server.devices.length">
     <a name="{{ server.name + server.type | idSafe }}" id="{{ server.name + server.type | idSafe }}"></a>
-    
+
     <h2 class="name pure-u-5-6 pure-u-md-11-12">
       <span ng-if="filter">
         :devices
@@ -58,6 +32,7 @@ <h2 class="name pure-u-5-6 pure-u-md-11-12">
         <a ng-click="loadServer(server)">{{ server.name }}</a> : {{ server.type }}
       </span>
     </h2>
+
     <section class="devices pure-u-1">
       <section class="device pure-u-1" ng-repeat="device in server.devices">
         <div class="row main pure-g">
@@ -66,64 +41,52 @@ <h2 class="name pure-u-5-6 pure-u-md-11-12">
             <a ng-click="resolve(device.href)">{{ device.properties.name || device.properties.type }}</a>
           </div>
         </div>
+        <!-- Stream -->
         <div ng-repeat="stream in device.streams" class="row stream pure-g animate-size closed {{stream.type}}" ng-show="!stream.muted" id="{{ stream.id }}" ng-class="{ open: !!stream.open, closed: !stream.open }">
           <div class="switches pure-u-1-6 pure-u-md-1-12">
             <div ng-class="{ pinned: stream.pinned }">
               <b class="mute" ng-click="mute(stream)">eye</b>&nbsp;<b class="pin" ng-click="pin(stream)">pushpin</b>
             </div>
           </div>
-          <div class="name pure-u-5-12 pure-u-md-1-4">
-            : {{ stream.name }}
-          </div>
-          <div class="value hide-md pure-u-5-12">{{ stream.current }}</div>
-          <div class="pure-u-1-6 hide-md"></div>
-          <div class="vis pure-u-5-6 pure-u-md-5-12">
-              <div class="sparkline pure-u-1" ng-if="stream.type === 'numerical'">
-                <sparkline height="16" stream="stream.data" id="{{ stream.name }}"></sparkline>
-              </div>
-              <div class="dnastrip pure-u-1" ng-if="stream.type === 'categorical'">
-                <z-dna-strip width="100" height="16" stream="stream"></z-dna-strip>
-              </div>
+          <div class="pure-u-5-6 pure-u-md-11-12 pure-g">
+            <div class="name pure-u-1-2 pure-u-md-1-4">
+              : {{ stream.name }}
+            </div>
+            <div class="value hide-md pure-u-1-2">{{ stream.current }}</div>
+            <div class="pure-u-1-6 hide-md"></div>
+            <div class="vis pure-u-1 pure-u-md-5-12">
+                <div class="sparkline pure-u-1" ng-if="stream.type === 'numerical'">
+                  <sparkline height="16" stream="stream.data" id="{{ stream.name }}"></sparkline>
+                </div>
+                <div class="dnastrip pure-u-1" ng-if="stream.type === 'categorical'">
+                  <z-dna-strip width="100" height="16" stream="stream"></z-dna-strip>
+                </div>
+            </div>
+            <div class="value before-md pure-u-md-1-4">&nbsp;{{ stream.current }}</div>
           </div>
-          <div class="value before-md pure-u-md-1-4">&nbsp;{{ stream.current }}</div>
         </div>
+        <!-- Action -->
         <div class="row action animate-size closed" ng-repeat="action in device.actions" ng-show="!action.muted" id="{{ action.id }}" ng-class="{ open: !!action.open, closed: !action.open }">
           <div class="pure-g action-content">
             <div class="switches pure-u-1-6 pure-u-md-1-12">
               <div ng-class="{ pinned: action.pinned }">
                 <b class="mute" ng-click="mute(action)">eye</b>&nbsp;<b class="pin" ng-click="pin(action)">pushpin</b>
               </div>
             </div>
-            <div class="name before-md pure-u-5-6 pure-u-md-1-4">
-              # {{ action.name }}
-            </div>
-            <zetta-overview-action value="action" class="pure-u-md-2-3 pure-u-5-6 pure-g" />
+
+            <zetta-overview-action value="action" class="pure-u-5-6 pure-u-md-11-12 pure-g"/>
+
           </div>
         </div>
       </section>
     </section>
   </div>
+
+  <!-- Muted Group -->
+
   <div class="muted device-group pure-g" ng-show="muted.length">
-    <div class="pure-u-1-6 pure-u-md-1-12"></div>
-    <h2 class="name pure-u-5-6 pure-u-md-11-12">Muted<span>:group</span></h2>
-    <section class="devices pure-u-1">
-    <div ng-class="{ open: !!characteristic.muteOpen, closed: !characteristic.muteOpen }" class="device row action pure-g animate-size closed" ng-repeat="characteristic in muted">
-        <div class="switches pure-u-1-6 pure-u-md-1-12">
-          <b class="mute"ng-click="unmute(characteristic)">eye</b>&nbsp;<b class="pin" ng-click="pin(characteristic)">pushpin</b>
-        </div>
-        <div class="name pure-u-5-6 pure-u-md-1-4">
-          <a class="server-name" ng-click="loadServer(characteristic.device.server)">{{ characteristic.device.server.name }} &gt; </a>
-          <br/>
-          <a ng-click="resolve(characteristic.device.href)" class="device-name">
-            {{ characteristic.device.properties.name || characteristic.device.properties.type }}</a>
-          <span class="stream-name"> {{ characteristic.name }}</span>
-        </div>
-        <div class="vis pure-u-5-6 pure-u-md-5-12">
-          -
-        </div>
-        <div class="value before-md pure-u-md-1-4">&nbsp;-</div>
-      </div>
-    </section>
+    <ng-include src="'partials/muted_characteristic.html'" class="pure-u-1"></ng-include>
   </div>
+
 </section>
 <ng-include src="'partials/footer.html'"></ng-include>