web client: refactor using AngularJS and Bootstrapv0.6.0

15 files changed, 193 insertions, 0 deletions

diff --git a/web/directive/audio.html b/web/directive/audio.html
new file mode 100644
index 0000000..33c883a
--- /dev/null
+++ b/web/directive/audio.html
@@ -0,0 +1,6 @@
+<!--
+    Copyright (c) 2012-2015 Kaarle Ritvanen
+    See LICENSE file for license details
+-->
+
+<button class="btn btn-default" ng-click="play()" ng-if="value">Play</button>
diff --git a/web/directive/basic-input.html b/web/directive/basic-input.html
new file mode 100644
index 0000000..485f3bb
--- /dev/null
+++ b/web/directive/basic-input.html
@@ -0,0 +1,16 @@
+<!--
+    Copyright (c) 2012-2015 Kaarle Ritvanen
+    See LICENSE file for license details
+-->
+
+<label for="{{ name }}" class="control-label" ng-if="field.label">
+  {{ field.label }}
+</label>
+<div ng-if="!field.editable">
+  {{ value }}
+  <aconf-del-button></aconf-del-button>
+</div>
+<div ng-if="field.editable">
+  <aconf-error></aconf-error>
+  <aconf-input><ng-transclude></ng-transclude></aconf-input>
+</div>
diff --git a/web/directive/checkboxes.html b/web/directive/checkboxes.html
new file mode 100644
index 0000000..a2f3124
--- /dev/null
+++ b/web/directive/checkboxes.html
@@ -0,0 +1,21 @@
+<!--
+    Copyright (c) 2012-2015 Kaarle Ritvanen
+    See LICENSE file for license details
+-->
+
+<ng-form name="form">
+  <div class="form-group"
+       ng-repeat="choice in choices"
+       ng-class="{'has-success': form[choice.value].$dirty}">
+    <div class="checkbox">
+      <label>
+	<aconf-set-checkbox choice="choice"></aconf-set-checkbox>
+	<div ng-if="!choice.ref">{{ choice["ui-value"] }}</div>
+	<a ng-if="choice.ref"
+	   class="btn"
+	   ng-class="{'btn-default': form[choice.value].$pristine, 'btn-success': form[choice.value].$dirty}"
+	   href="#/config{{ choice.ref }}">{{ choice["ui-value"] }}</a>
+      </label>
+    </div>
+  </div>
+</ng-form>
diff --git a/web/directive/collection.html b/web/directive/collection.html
new file mode 100644
index 0000000..e47fd10
--- /dev/null
+++ b/web/directive/collection.html
@@ -0,0 +1,10 @@
+<!--
+    Copyright (c) 2012-2015 Kaarle Ritvanen
+    See LICENSE file for license details
+-->
+
+<aconf-del-button></aconf-del-button>
+<ng-include src="'layout/' + layout + '.html'"></ng-include>
+<button class="btn btn-success"
+	ng-if="insert"
+	ng-click="insert()">Insert</button>
diff --git a/web/directive/date.html b/web/directive/date.html
new file mode 100644
index 0000000..10d5717
--- /dev/null
+++ b/web/directive/date.html
@@ -0,0 +1,16 @@
+<!--
+    Copyright (c) 2012-2015 Kaarle Ritvanen
+    See LICENSE file for license details
+-->
+
+<div class="input-group">
+  <input type="date"
+	 class="form-control aconf-sync"
+	 name="{{ name }}"
+	 ng-model="value"
+	 datepicker-popup
+	 is-open="opened">
+  <span class="input-group-btn">
+    <button class="btn btn-default" ng-click="open($event)">...</button>
+  </span>
+</div>
diff --git a/web/directive/del-button.html b/web/directive/del-button.html
new file mode 100644
index 0000000..762b9d5
--- /dev/null
+++ b/web/directive/del-button.html
@@ -0,0 +1,6 @@
+<!--
+    Copyright (c) 2012-2015 Kaarle Ritvanen
+    See LICENSE file for license details
+-->
+
+<button class="btn btn-danger" ng-click="delete()" ng-if="delete">Delete</button>
diff --git a/web/directive/error.html b/web/directive/error.html
new file mode 100644
index 0000000..922b4a8
--- /dev/null
+++ b/web/directive/error.html
@@ -0,0 +1,6 @@
+<!--
+    Copyright (c) 2012-2015 Kaarle Ritvanen
+    See LICENSE file for license details
+-->
+
+<div class="alert alert-danger" ng-if="error">{{ error }}</div>
diff --git a/web/directive/fields.html b/web/directive/fields.html
new file mode 100644
index 0000000..79155c1
--- /dev/null
+++ b/web/directive/fields.html
@@ -0,0 +1,28 @@
+<!--
+    Copyright (c) 2012-2015 Kaarle Ritvanen
+    See LICENSE file for license details
+-->
+
+<aconf-inline>
+  <aconf-header></aconf-header>
+
+  <aconf-model ng-if="node.meta.type == 'model'">
+    <p>
+      <button class="btn btn-default"
+	      ng-if="node.meta.type == 'model'"
+	      ng-repeat="action in node.meta.actions"
+	      ng-click="invoke(action.name)">{{ action["ui-name"] }}</button>
+      <aconf-del-button></aconf-del-button>
+    </p>
+
+    <ng-form name="form" ng-model="fields">
+      <aconf-widget ng-repeat="field in fields"
+		    ng-if="isRelevant(field)"
+		    field="{name: field.name, label: field['ui-name'], editable: field.editable, meta: field}"
+		    form-field="form[field.name]">
+      </aconf-widget>
+    </ng-form>
+  </aconf-model>
+
+  <aconf-collection ng-if="node.meta.type != 'model'"></aconf-collection>
+</aconf-inline>
diff --git a/web/directive/input.html b/web/directive/input.html
new file mode 100644
index 0000000..5f3542d
--- /dev/null
+++ b/web/directive/input.html
@@ -0,0 +1,10 @@
+<!--
+    Copyright (c) 2012-2015 Kaarle Ritvanen
+    See LICENSE file for license details
+-->
+
+<ng-transclude ng-if="!field.removable"></ng-transclude>
+<fieldset class="form-inline" ng-if="field.removable">
+  <ng-transclude></ng-transclude>
+  <aconf-del-button></aconf-del-button>
+</fieldset>
diff --git a/web/directive/link.html b/web/directive/link.html
new file mode 100644
index 0000000..ab5a0f3
--- /dev/null
+++ b/web/directive/link.html
@@ -0,0 +1,8 @@
+<!--
+    Copyright (c) 2012-2015 Kaarle Ritvanen
+    See LICENSE file for license details
+-->
+
+<a class="btn"
+   ng-class="{'btn-default': !status(), 'btn-danger': status() == 'invalid', 'btn-success': status() == 'changed'}"
+   href="#/config{{ path }}">{{ label }}</a>
diff --git a/web/directive/menu.html b/web/directive/menu.html
new file mode 100644
index 0000000..ab63cb7
--- /dev/null
+++ b/web/directive/menu.html
@@ -0,0 +1,8 @@
+<!--
+    Copyright (c) 2012-2015 Kaarle Ritvanen
+    See LICENSE file for license details
+-->
+
+<li ng-class="item.class" ng-repeat="item in aconfMenu">
+  <a href="#/config{{ item.path }}">{{ item.label }}</a>
+</li>
diff --git a/web/directive/select.html b/web/directive/select.html
new file mode 100644
index 0000000..4557e8f
--- /dev/null
+++ b/web/directive/select.html
@@ -0,0 +1,10 @@
+<!--
+    Copyright (c) 2012-2015 Kaarle Ritvanen
+    See LICENSE file for license details
+-->
+
+<select class="form-control aconf-sync"
+	name="{{ name }}"
+	ng-model="value"
+	ng-options="ch.value as ch['ui-value'] for ch in choices">
+</select>
diff --git a/web/directive/set-checkbox.html b/web/directive/set-checkbox.html
new file mode 100644
index 0000000..1bbce03
--- /dev/null
+++ b/web/directive/set-checkbox.html
@@ -0,0 +1,6 @@
+<!--
+    Copyright (c) 2012-2015 Kaarle Ritvanen
+    See LICENSE file for license details
+-->
+
+<input type="checkbox" class="aconf-sync" name="{{ name }}" ng-model="value">
diff --git a/web/directive/tabular-layout.html b/web/directive/tabular-layout.html
new file mode 100644
index 0000000..e503526
--- /dev/null
+++ b/web/directive/tabular-layout.html
@@ -0,0 +1,32 @@
+<!--
+    Copyright (c) 2012-2015 Kaarle Ritvanen
+    See LICENSE file for license details
+-->
+
+<table class="table">
+  <thead>
+    <tr><td></td><td ng-repeat="column in columns">{{ column }}</td></tr>
+  </thead>
+  <tbody ui-sortable="sortable" ng-model="fields">
+    <tr ng-repeat="field in fields"
+	aconf-field="field"
+	class="aconf-node aconf-model-fields">
+      <td>{{ node.meta['ui-name'] }}</td>
+      <td ng-repeat="column in columns">
+	<ng-form name="form" ng-model="columns">
+	  <aconf-widget field="{name: column.name, editable: column.editable, meta: column}"
+			form-field="form[column.name]">
+	  </aconf-widget>
+	</ng-form>
+      </td>
+      <td ng-if="columns.length < fields.length">
+	<aconf-link path="value" label="Details" status="status"></aconf-link>
+      </td>
+      <td ng-repeat="action in node.meta.actions">
+	<button class="btn btn-default"
+		ng-click="invoke(action.name)">{{ action["ui-name"] }}</button>
+      </td>
+      <td><aconf-del-button></aconf-del-button></td>
+    </tr>
+  </tbody>
+</table>
diff --git a/web/directive/widget.html b/web/directive/widget.html
new file mode 100644
index 0000000..d4cae19
--- /dev/null
+++ b/web/directive/widget.html
@@ -0,0 +1,10 @@
+<!--
+    Copyright (c) 2012-2015 Kaarle Ritvanen
+    See LICENSE file for license details
+-->
+
+<div class="form-group"
+     ng-class="{'has-error': formField.$invalid, 'has-success': formField.$valid && formField.$dirty}"
+     aconf-field="field">
+  <ng-include src="'widget/' + field.meta.widget + '.html'"></ng-include>
+</div>