Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Multiple inputs #23

Merged
merged 5 commits into from
Oct 27, 2014
Merged

Multiple inputs #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
174f29f
Multiple inputs working on overview page
AdamMagaluk Oct 22, 2014
7e4cd06
Updates for device action
AdamMagaluk Oct 22, 2014
ca8a982
When only one input field is present handle all types
AdamMagaluk Oct 22, 2014
709a2a4
Fixed UI controls for desktop
13protons Oct 24, 2014
3f4fdf0
Homepage actions rendering well
13protons Oct 24, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 26 additions & 20 deletions dist/partials/device-actions.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

<!--
Expand Down
20 changes: 20 additions & 0 deletions dist/partials/muted_characteristic.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
106 changes: 91 additions & 15 deletions dist/partials/overview-action.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
107 changes: 35 additions & 72 deletions dist/partials/overview.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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">
Expand All @@ -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>
Loading