X-Git-Url: http://git.onelab.eu/?a=blobdiff_plain;f=planetstack%2Fcore%2Fxoslib%2Ftemplates%2FxosAdmin.html;h=cca9ba7c296d40754949ef49b5d0fe2a550eb52b;hb=753a13edfd39603fbdc59747c4d7c2b59a2d06b9;hp=0ba63ec2db586852866409ced03a6c2ccfe9808d;hpb=31e340af19e689e4550759a1228de179370a652a;p=plstackapi.git

diff --git a/planetstack/core/xoslib/templates/xosAdmin.html b/planetstack/core/xoslib/templates/xosAdmin.html
index 0ba63ec..cca9ba7 100644
--- a/planetstack/core/xoslib/templates/xosAdmin.html
+++ b/planetstack/core/xoslib/templates/xosAdmin.html
@@ -1,615 +1,309 @@
-<!-- Deployment -->
+<!-- Error and Success templates -->
 
-<script type="text/template" id="xosAdmin-deployment-list-template">
-  <h3><%= title %></h3>
-  <table class="test-table">
-  <thead><tr>
-     <th>id</th>
-     <th>name</th>
-     <th>backend</th>
-     <th>admin_tenant</th>
-     <th># sites</th>
-  </tr></thead>
-  <tbody></tbody>
+<script type="text/template" id="xos-error-response">
+  <h5>Error</h5>
+  <table>
+  <tr><td>error:</td><td><%= error %></td></tr>
+  <tr><td>check:</td><td><%= specific_error %></td></tr>
   </table>
-</script>
-
-
-<script type="text/template" id="xosAdmin-deployment-listitem-template">
-  <td class="objectLink"><%= id %></td>
-  <td class="objectLink"><%= name %></td>
-  <td><%= backend_type %></td>
-  <td><%= admin_tenant %></td>
-  <td><%= sites.length %></td>
-</script>
-
-<script type="text/template" id="xosAdmin-deployment-detail-template">
-  <h3>Detail View: Deployment</h3>
-  <form>
-  <table>
-  <tr><td>Name:</td><td><input type="text" name="name" value="<%= name %>"></td></tr>
-  <tr><td>Backend:</td><td><input type="text" name="backend_type" value="<%= backend_type %>"></td></tr>
-  <tr><td>Admin Tenant:</td><td><input type="text" name="admin_tenant" value="<%= admin_tenant %>"></td></tr>
-  <tr><td colspan=2><button class="btn js-submit">Save</button></td></tr>
-  </table>
-  </form>
-</script>
-
-<!-- Image -->
-
-<script type="text/template" id="xosAdmin-image-list-template">
-  <h3><%= title %></h3>
-  <table class="test-table">
-  <thead><tr>
-     <th>id</th>
-     <th>name</th>
-     <th>disk_format</th>
-     <th>container_format</th>
-     <th>path</th>
-  </tr></thead>
-  <tbody></tbody>
+  <h5>Details:</h5>
+      <table>
+      <tbody>
+      <% _.each(reasons, function(element, index) { %>
+          <tr><td><%= index %></td><td><%= element %></td></tr>
+      <% }); %>
+      </tbody>
+      </table>
+</script>
+
+<script type="text/template" id="xos-error-rawresponse">
+  <h5>Error</h5>
+  <pre>The server returned:
+"<%= responseText %>"</pre>
+</script>
+
+<script type="text/template" id="xos-error-template">
+  <button id="close-error-box">Close Error Message</button>
+  <h3>An error has occurred.</h3>
+  <table class="test-error-table">
+  <tr><td>Code:</td><td><%= status %></td></tr>
+  <tr><td>Message:</td><td><%= statusText %></td></tr>
   </table>
 </script>
 
-<script type="text/template" id="xosAdmin-image-listitem-template">
-  <td class="objectLink"><%= id %></td>
-  <td class="objectLink"><%= name %></td>
-  <td><%= disk_format %></td>
-  <td><%= container_format %></td>
-  <td><%= path %></td>
-</script>
-
-<script type="text/template" id="xosAdmin-image-detail-template">
-  <h3>Detail View: Image</h3>
-  <form>
-  <table>
-  <tr><td>Name:</td><td><input type="text" name="name" value="<%= name %>"></td></tr>
-  <tr><td>Disk Format:</td><td><input type="text" name="backend_type" value="<%= disk_format %>"></td></tr>
-  <tr><td>Container Format:</td><td><input type="text" name="admin_tenant" value="<%= container_format %>"></td></tr>
-  <tr><td colspan=2><button class="btn js-submit">Save</button></td></tr>
-  </table>
-  </form>
-</script>
-
-<!-- NetworkTemplate -->
-
-<script type="text/template" id="xosAdmin-networkTemplate-list-template">
-  <h3><%= title %></h3>
-  <table class="test-table">
-  <thead><tr>
-     <th>id</th>
-     <th>name</th>
-     <th>description</th>
-     <th>visibility</th>
-     <th>translation</th>
-     <th>sharedNetworkName</th>
-     <th>sharedNetworkId</th>
-  </tr></thead>
-  <tbody></tbody>
+<script type="text/template" id="xos-success-template">
+  <button id="close-success-box">Close Success Message</button>
+  <h3>Success!</h3>
+  <table class="test-success-table">
+  <tr><td>Code:</td><td><%= status %></td></tr>
+  <tr><td>Message:</td><td><%= statusText %></td></tr>
   </table>
 </script>
 
-
-<script type="text/template" id="xosAdmin-networkTemplate-listitem-template">
-  <td class="objectLink"><%= id %></td>
-  <td class="objectLink"><%= name %></td>
-  <td><%= description %></td>
-  <td><%= visibility %></td>
-  <td><%= translation %></td>
-  <td><%= sharedNetworkName %></td>
-  <td><%= sharedNetworkId %></td>
+<script type="text/template" id="xos-navbutton-old">
+  <button class="btn btn-default btn-xosnav" onclick="<%= router %>.navigate('<%= routeUrl %>', {trigger: true})"><%= name %></button><br>
 </script>
 
-<script type="text/template" id="xosAdmin-networkTemplate-detail-template">
-  <h3>Detail View: NetworkTemplate</h3>
-  <form>
-  <table>
-  <tr><td>Name:</td><td><input type="text" name="name" value="<%= name %>"></td></tr>
-  <tr><td>description:</td><td><input type="text" name="description" value="<%= description %>"></td></tr>
-  <tr><td>Visibility:</td><td><input type="text" name="visibility" value="<%= visibility %>"></td></tr>
-  <tr><td>Translation:</td><td><input type="text" name="translation" value="<%= translation %>"></td></tr>
-  <tr><td>Shared Network Name:</td><td><input type="text" name="sharedNetworkName" value="<%= sharedNetworkName %>"></td></tr>
-  <tr><td>Shared Network Id:</td><td><input type="text" name="sharedNetworkId" value="<%= sharedNetworkId %>"></td></tr>
-  <tr><td colspan=2><button class="btn js-submit">Save</button></td></tr>
-  </table>
-  </form>
+<script type="text/template" id="xos-status-template">
+  <div class="xos-status xos-<%= statusclass %>"><%= what %>: <%= statusText %> (<%= status %>)</div>
 </script>
 
-<!-- Network -->
-
-<script type="text/template" id="xosAdmin-network-list-template">
-  <h3><%= title %></h3>
-  <table class="test-table">
-  <thead><tr>
-     <th>id</th>
-     <th>name</th>
-     <th>template</th>
-     <th>ports</th>
-     <th>labels</th>
-     <th>owner</th>
-  </tr></thead>
-  <tbody></tbody>
-  </table>
+<script type="text/template" id="xos-tabs-template">
+  <ul class="xos-nav-list">
+  <% _.each(tabs, function(tab) { %>
+      <li class="xos-nav-item" id="xos-nav-<%= tab["region"] %>"><%= tab["name"] %></li>
+  <% }); %>
+  </ul>
 </script>
 
-<script type="text/template" id="xosAdmin-network-listitem-template">
-  <td class="objectLink"><%= id %></td>
-  <td class="objectLink"><%= name %></td>
-  <td><%= idToName(template,"networkTemplates","name") %></td>
-  <td><%= ports %></td>
-  <td><%= labels %></td>
-  <td><%= idToName(owner,"slices","name") %></td>
-</script>
-
-<script type="text/template" id="xosAdmin-network-detail-template">
-  <h3>Detail View: Network</h3>
-  <form>
-  <table>
-  <tr><td>Name:</td><td><input type="text" name="name" value="<%= name %>"></td></tr>
-  <tr><td>Template:</td><td><%= idToSelect("template",template,"networkTemplates","name") %></td></tr>
-  <tr><td>Ports:</td><td><input type="text" name="ports" value="<%= ports %>"></td></tr>
-  <tr><td>Labels:</td><td><input type="text" name="labels" value="<%= labels %>"></td></tr>
-  <tr><td>Owner:</td><td><%= idToSelect("owner",owner,"slices","name") %></td></tr>
-  <tr><td colspan=2><button class="btn js-submit">Save</button></td></tr>
-  </table>
-  </form>
+<script type="text/template" id="xos-title-list">
+  <h3><img src="/static/img/brokencircle.gif" height=16 width=16 id="xos-list-title-spinner"> <%= title %></h3>
 </script>
 
-<!-- NetworkSliver -->
-
-<script type="text/template" id="xosAdmin-networkSliver-list-template">
+<script type="text/template" id="xos-title-detail">
   <h3><%= title %></h3>
-  <table class="test-table">
-  <thead><tr>
-     <th>id</th>
-     <th>network</th>
-     <th>sliver</th>
-     <th>ip</th>
-     <th>port_id</th>
-  </tr></thead>
-  <tbody></tbody>
-  </table>
 </script>
 
-<script type="text/template" id="xosAdmin-networkSliver-listitem-template">
-  <td class="objectLink"><%= id %></td>
-  <td><%= idToName(network,"networks","name") %></td>
-  <td><%= idToName(sliver,"slivers","name") %></td>
-  <td><%= ip %></td>
-  <td><%= port_id %></td>
+<script type="text/template" id="xos-navbutton">
+  <li>
+      <a href="<%= routeUrl %>">
+          <i class="<%= iconClass %>"></i>
+          <%= name %>
+      </a>
+  </li>
 </script>
 
-<script type="text/template" id="xosAdmin-networkSliver-detail-template">
-  <h3>Detail View: Network</h3>
-  <form>
-  <table>
-  <tr><td>Network:</td><td><input type="text" name="network" value="<%= network %>"></td></tr>
-  <tr><td>Sliver:</td><td><input type="text" name="sliver" value="<%= sliver %>"></td></tr>
-  <tr><td>Ip:</td><td><input type="text" name="ip" value="<%= ip %>"></td></tr>
-  <tr><td>Port_id:</td><td><input type="text" name="port_id" value="<%= port_id %>"></td></tr>
-  <tr><td colspan=2><button class="btn js-submit">Save</button></td></tr>
-  </table>
-  </form>
+<script type="text/template" id="xos-inline-detail-buttons-template">
+    <tr>
+       <td colspan=2><button class="btn js-submit btn-xos-detail btn-xos-save-leave">Save</button>
+           <button class="btn js-submit btn-xos-detail btn-xos-save-continue">Save and Continue Editing</button>
+           <button class="btn js-submit btn-xos-detail btn-xos-save-another">Save and Add Another</button>
+           <button class="btn js-submit btn-xos-detail btn-xos-delete">Delete</button>
+       </td>
+    </tr>
 </script>
 
-<!-- NetworkDeployment -->
-
-<script type="text/template" id="xosAdmin-networkDeployment-list-template">
-  <h3><%= title %></h3>
-  <table class="test-table">
-  <thead><tr>
-     <th>id</th>
-     <th>network</th>
-     <th>deployment</th>
-     <th>net_id</th>
-  </tr></thead>
-  <tbody></tbody>
-  </table>
+<script type="text/template" id="xos-backend-status-icon-template">
+    <% if (! ("enacted" in arguments) ) { %>
+        <!-- enacted is undefined; this must be a new object -->
+    <% } else if ((enacted) && (enacted >= updated)) { %>
+        <span style="min-width:16px;"><img src="/static/admin/img/icon_success.gif"></span>
+    <% } else { %>
+        <% if ((backend_status == "Provisioning in progress") || (!backend_status)) { %>
+            <span style="min-width:16px;" title="<%= _.escape(backend_status) %>"><img src="/static/admin/img/icon_clock.gif"></span>
+        <% } else { %>
+            <span style="min-width:16px;" title="<%= _.escape(backend_status) %>"><img src="/static/admin/img/icon_error.gif"></span>
+        <% } %>
+    <% } %>
 </script>
 
-<script type="text/template" id="xosAdmin-networkDeployment-listitem-template">
-  <td class="objectLink"><%= id %></td>
-  <td><%= idToName(network,"networks","name") %></td>
-  <td><%= idToName(deployment,"deployments","name") %></td>
-  <td><%= net_id %></td>
+<script type="text/template" id="xos-backend-status-text-template">
+    <%= xosBackendStatusIconTemplate.apply(this,arguments) %>
+    <% if (model.enacted === undefined) { %>
+        <!-- enacted is undefined; this must be a new object -->
+    <% } else if ((enacted) && (enacted >= updated)) { %>
+        Successfully enacted
+    <% } else { %>
+        <%= _.escape(backend_status) %>
+    <% } %>
 </script>
 
-<script type="text/template" id="xosAdmin-networkDeployment-detail-template">
-  <h3>Detail View: Network</h3>
-  <form>
-  <table>
-  <tr><td>Network:</td><td><input type="text" name="network" value="<%= network %>"></td></tr>
-  <tr><td>Sliver:</td><td><input type="text" name="deployment" value="<%= deployment %>"></td></tr>
-  <tr><td>Ip:</td><td><input type="text" name="net_id" value="<%= net_id %>"></td></tr>
-  <tr><td colspan=2><button class="btn js-submit">Save</button></td></tr>
-  </table>
-  </form>
+<script type="text/template" id="xos-list-header-template">
+    <button class="btn js-submit btn-xos-list btn-xos-add">Add</button>
+    <button class="btn js-submit btn-xos-list btn-xos-refresh">Refresh</button>
 </script>
 
-<!-- Node -->
-
-<script type="text/template" id="xosAdmin-node-list-template">
-  <h3><%= title %></h3>
-  <table class="test-table">
-  <thead><tr>
-     <th>id</th>
-     <th>name</th>
-     <th>site</th>
-     <th>deployment</th>
-  </tr></thead>
-  <tbody></tbody>
-  </table>
+<script type="text/template" id="xos-list-footer-template">
+    <% if (addChildHash) { %>
+        <a href="<%= addChildHash %>">Add...</a>
+    <% } %>
 </script>
 
-
-<script type="text/template" id="xosAdmin-node-listitem-template">
-  <td class="objectLink"><%= id %></td>
-  <td class="objectLink"><%= name %></td>
-  <td><%= idToName(site,"sites","name") %></td>
-  <td><%= idToName(deployment,"deployments","name") %></td>
+<script type="text/template" id="xos-delete-button-template">
+    <a href="#delete<%= firstCharUpper(modelName) %>/<%= id %>">delete</a>
 </script>
 
-<script type="text/template" id="xosAdmin-node-detail-template">
-  <h3>Detail View: Node</h3>
-  <form>
-  <table>
-  <tr><td>Name:</td><td><input type="text" name="name" value="<%= name %>"></td></tr>
-  <tr><td>Site:</td><td><%= idToSelect("site",site,"sites","name") %></td></tr>
-  <tr><td>Deployment:</td><td><%= idToSelect("deployment",deployment,"deployments","name") %></td></tr>
-  <tr><td colspan=2><button class="btn js-submit">Save</button></td></tr>
-  </table>
-  </form>
+<script type="text/template" id="xos-detail-link-template">
+    <a href="#<%= collectionName %>/<%= id %>"><%= text %></a>
 </script>
 
-<!-- SliceRole -->
-
-<script type="text/template" id="xosAdmin-sliceRole-list-template">
-  <h3><%= title %></h3>
-  <table class="test-table">
-  <thead><tr>
-     <th>id</th>
-     <th>role</th>
-  </tr></thead>
-  <tbody></tbody>
-  </table>
-</script>
-
-
-<script type="text/template" id="xosAdmin-sliceRole-listitem-template">
-  <td class="objectLink"><%= id %></td>
-  <td><%= role %></td>
-</script>
-
-<script type="text/template" id="xosAdmin-sliceRole-detail-template">
-  <h3>Detail View: Service</h3>
-  <form>
+<script type="text/template" id="xos-add-template">
+  <h3 class="xos-detail-title">Add Object: <%= modelName %></h3>
+  <form>
   <table>
-  <tr><td>Role:</td><td><input type="text" name="role" value="<%= role %>"></td></tr>
-  <tr><td colspan=2><button class="btn js-submit">Save</button></td></tr>
+  <% args = arguments; %>
+  <% _.each(addFields, function(fieldName) { %>
+     <tr><td><%= fieldNameToHumanReadable(fieldName) %>:</td>
+        <% readOnly = $.inArray(fieldName, model.readOnlyFields)>=0 ? " readonly" : "";  %>
+        <% if (fieldName in foreignFields) { %>
+            <td><%= idToSelect(fieldName, model.attributes[fieldName], foreignFields[fieldName], "humanReadableName", readOnly) %></td>
+        <% } else if (inputType[fieldName] == "checkbox") { %>
+            <td><input type="checkbox" name="<%= fieldName %>" <% if (model.attributes[fieldName]) print("checked"); %><%= readOnly %>></td>
+        <% } else if (fieldName=="backend_status") { %>
+            <td><%= xosBackendStatusTextTemplate.apply(this, args) %></td>
+        <% } else { %>
+            <td><input type="text" name="<%= fieldName %>" value="<%= model.attributes[fieldName] %>"<%= readOnly %>></td>
+        <% } %>
+     </tr>
+  <% }); %>
+  <%= xosInlineDetailButtonsTemplate() %>
   </table>
   </form>
 </script>
 
-<!-- Service -->
-
-<script type="text/template" id="xosAdmin-service-list-template">
-  <h3><%= title %></h3>
-  <table class="test-table">
-  <thead><tr>
-     <th>id</th>
-     <th>name</th>
-     <th>description</th>
-     <th>enabled</th>
-     <th>versionNumber</th>
-     <th>published</th>
-  </tr></thead>
-  <tbody></tbody>
-  </table>
-</script>
-
-
-<script type="text/template" id="xosAdmin-service-listitem-template">
-  <td class="objectLink"><%= id %></td>
-  <td class="objectLink"><%= name %></td>
-  <td><%= description %></td>
-  <td><%= enabled %></td>
-  <td><%= versionNumber %></td>
-  <td><%= published %></td>
-</script>
-
-<script type="text/template" id="xosAdmin-service-detail-template">
-  <h3>Detail View: Service</h3>
-  <form>
-  <table>
-  <tr><td>Name:</td><td><input type="text" name="name" value="<%= name %>"></td></tr>
-  <tr><td>description:</td><td><input type="text" name="description" value="<%= description %>"></td></tr>
-  <tr><td>Version Number:</td><td><input type="text" name="versionNumber" value="<%= versionNumber %>"></td></tr>
-  <tr><td colspan=2><button class="btn js-submit">Save</button></td></tr>
+<script type="text/template" id="xos-detail-template">
+  <h3 class="xos-detail-title">Edit Object: <%= modelName %></h3>
+  <form>
+  <table class="xos-detail-table">
+  <% args = arguments; %>
+  <% _.each(detailFields, function(fieldName) { %>
+     <tr><td class="xos-label-cell"><%= fieldName in fieldDisplayNames ? fieldDisplayNames[fieldName] : fieldNameToHumanReadable(fieldName) %>:</td>
+        <% readOnly = $.inArray(fieldName, model.readOnlyFields)>=0 ? " readonly" : "";  %>
+        <% if (fieldName in choices) { %>
+            <td><%= choicesToSelect(fieldName, model.attributes[fieldName], choices[fieldName]) %></td>
+        <% } else if (fieldName in foreignFields) { %>
+            <td><%= idToSelect(fieldName, model.attributes[fieldName], foreignFields[fieldName], "humanReadableName", readOnly) %></td>
+        <% } else if (inputType[fieldName] == "spinner") { %>
+            <!-- note: I never finished working on this spinner stuff! -->
+            <td><%= xosSpinnerTemplate({id: "spinner_" + fieldName, fieldName: fieldName, value: model.attributes[fieldName]}) %></td>
+        <% } else if (inputType[fieldName] == "checkbox") { %>
+            <td><input type="checkbox" name="<%= fieldName %>" <% if (model.attributes[fieldName]) print("checked"); %><%= readOnly %>></td>
+        <% } else if (inputType[fieldName] == "picker") { %>
+            <% lookupFunc = makeIdToName(model.m2mFields[fieldName], "humanReadableName"); %>
+            <td><%= xosPickerTemplate({pickedItems: model.attributes[fieldName], unpickedItems: model.getChoices(fieldName,true), id: "picker_" + fieldName, fieldName: fieldName, detailView: detailView, lookupFunc: lookupFunc}) %></td>
+        <% } else if (fieldName=="backend_status") { %>
+            <td><%= xosBackendStatusTextTemplate.apply(this, args) %></td>
+        <% } else { %>
+            <td><input type="text" name="<%= fieldName %>" value="<%= model.attributes[fieldName] %>"<%= readOnly %>></td>
+        <% } %>
+        <td  class="xos-help-cell"><%= helpText[fieldName] %></td>
+     </tr>
+  <% }); %>
+  <%= xosInlineDetailButtonsTemplate() %>
   </table>
   </form>
 </script>
 
-<!-- Site -->
-
-<script type="text/template" id="xosAdmin-site-list-template">
-  <h3><%= title %></h3>
+<script type="text/template" id="xos-list-template">
+  <h3 class="xos-list-title"><%= title %></h3>
+  <%= xosListHeaderTemplate() %>
   <table class="test-table">
-  <thead><tr>
-     <th>id</th>
-     <th>name</th>
-     <th>url</th>
-     <th>enabled</th>
-     <th>login_base</th>
-     <th>is_public</th>
-     <th>abbreviated_name</th>
+  <thead>
+  <tr>
+  <% _.each(listFields, function(fieldName) { %>
+      <th><%= fieldNameToHumanReadable(fieldName) %></th>
+  <% }); %>
+  <th>delete</th>
   </tr></thead>
   <tbody></tbody>
   </table>
+  <%= xosListFooterTemplate({addChildHash: addChildHash}) %>
+</script>
+
+<script type="text/template" id="xos-listitem-template">
+  <% _.each(listFields, function(fieldName) { %>
+      <% if ($.inArray(fieldName, model.detailLinkFields)>=0) { %>
+          <td><%= xosDetailLinkTemplate({collectionName: collectionName, id: id, text: model.attributes[fieldName]}) %></td>
+      <% } else if (fieldName in foreignFields) { %>
+          <td><%= idToName(model.attributes[fieldName], foreignFields[fieldName], "humanReadableName") %></td>
+      <% } else { %>
+      <td><%= model.attributes[fieldName] %></td>
+      <% } %>
+  <% }); %>
+  <td><%= xosDeleteButtonTemplate({modelName: modelName, id: id}) %></td>
+</script>
+
+<script type="text/template" id="xos-savebuttons-template">
+  <div class="box save-box">
+    <button class="btn btn-high btn-info btn-xos-contentButtonPanel btn-xos-save-leave">Save</button>
+    <button class="btn btn-high btn-xos-contentButtonPanel btn-xos-save-continue">Save and continue editing</button>
+    <button class="btn btn-high btn-xos-contentButtonPanel btn-xos-save-another">Save and add another</button>
+    <button class="btn btn-danger btn-xos-contentButtonPanel btn-xos-delete">Delete</button>
+  </div>
+</script>
+
+<script type="text/template" id="xos-listbuttons-template">
+  <div class="box save-box">
+    <button class="btn btn-high btn-primary btn-xos-contentButtonPanel btn-xos-refresh">Refresh</button>
+    <button class="btn btn-high btn-success btn-xos-contentButtonPanel btn-xos-add">Add</button>
+  </div>
+</script>
+
+<script type="text/template" id="xos-datatable-spinner-template">
+    <!-- arguments: value, id, collectionName, fieldName -->
+    <%= value %> <img style="cursor: pointer;" src="/static/img/plus_circle.png" onclick='<%= app.varName %>.adjustCollectionField("<%= collectionName %>", <%= id %>, "<%= fieldName %>", 1)'>
+                 <img style="cursor: pointer;" src="/static/img/minus_circle.png" onclick='<%= app.varName %>.adjustCollectionField("<%= collectionName %>", <%= id %>, "<%= fieldName %>", -1)'>
+</script>
+
+<script type="text/template" id="xos-datatable-spinner-template-old">
+    <!-- arguments: value, id, collectionName, fieldName -->
+    <%= value %> <a href="javascript:undefined" onclick='<%= app.varName %>.adjustCollectionField("<%= collectionName %>", <%= id %>, "<%= fieldName %>", 1)'> more </a>
+                 <a href="javascript:undefined" onclick='<%= app.varName %>.adjustCollectionField("<%= collectionName %>", <%= id %>, "<%= fieldName %>", -1)'> less </a>
+</script>
+
+<script type="text/template" id="xos-spinner-template">
+    <!-- arguments: fieldName, id, value -->
+    <input name="<%= fieldName %>" class="xos-spinner" id="<%= id %>">
+    <% detailView.viewInitializers.push( function() { init_spinner("#" + id, value); } ); %>
+</script>
+
+<script type="text/template" id="xos-picker-template">
+    <!-- arguments: unpickedItems, pickedItems, fieldName, id -->
+    <div id="<%= id %>">
+    <div class="picker_row">
+    <div class="picker_column">
+    <div>Available</div>
+    <select name="pickerfrom" class="select-picker-from" multiple size="5">
+        <% _.each(unpickedItems, function(item) { %>
+           <option value="<%= item %>"><%= lookupFunc? lookupFunc(item) : item %></option>
+        <% });%>
+    </select>
+    </div>
+    <div class="picker_column">
+    <br>
+    <div class="btn btn-success btn-picker-add">Add &raquo;</div><br><br>
+    <div class="btn btn-success btn-picker-remove">&laquo; Remove</div>
+    </div>
+    <div class="picker_column">
+    <div>Selected</div>
+    <select name=<%= fieldName %> class="select-picker-to syphonall" multiple size="5">
+        <% _.each(pickedItems, function(item) { %>
+           <option value="<%= item %>"><%= lookupFunc ? lookupFunc(item) : item %></option>
+        <% }); %>
+    </select>
+    </div>
+    <div class="picker_column">
+    <br>
+    <div class="btn btn-success btn-picker-up">Up</div><br><br>
+    <div class="btn btn-success btn-picker-down">Down</div>
+    </div>
+    </div>
+    </div>
+    <% detailView.viewInitializers.push( function() { init_picker("#" + id); } ); %>
+</script>
+
+<script type="text/template" id="xos-sliceselector-option">
+   <%= name %>
+</script>
+
+<script type="text/template" id="xos-sliceselector-select">
+    <% if (caption) { %>
+    <table class="xos-detail-table"><tr><td class="xos-label-cell"><%= caption %>: </td><td><select></select></td></tr></table>
+    <% } else { %>
+    <select></select>
+    <% } %>
+</script>
+
+<script>
+xosInlineDetailButtonsTemplate = _.template($("#xos-inline-detail-buttons-template").html());
+xosListHeaderTemplate = _.template($("#xos-list-header-template").html());
+xosListFooterTemplate = _.template($("#xos-list-footer-template").html());
+xosDeleteButtonTemplate = _.template($("#xos-delete-button-template").html());
+xosDetailLinkTemplate = _.template($("#xos-detail-link-template").html());
+xosBackendStatusIconTemplate = _.template($("#xos-backend-status-icon-template").html());
+xosBackendStatusTextTemplate = _.template($("#xos-backend-status-text-template").html());
+xosPickerTemplate = _.template($("#xos-picker-template").html());
+xosSpinnerTemplate = _.template($("#xos-spinner-template").html());
+xosDataTableSpinnerTemplate = _.template($("#xos-datatable-spinner-template").html());
 </script>
 
-<script type="text/template" id="xosAdmin-site-listitem-template">
-  <td class="objectLink"><%= id %></td>
-  <td class="objectLink"><%= name %></td>
-  <td><%= site_url %></td>
-  <td><%= enabled %></td>
-  <td><%= login_base %></td>
-  <td><%= is_public %></td>
-  <td><%= abbreviated_name %></td>
-</script>
-
-<script type="text/template" id="xosAdmin-site-detail-template">
-  <h3>Detail View: Site</h3>
-  <form>
-  <table>
-  <tr><td>Name:</td><td><input type="text" name="name" value="<%= name %>"></td></tr>
-  <tr><td>url:</td><td><input type="text" name="site_url" value="<%= site_url %>"></td></tr>
-  <tr><td>login_base:</td><td><input type="text" name="login_base" value="<%= login_base %>"></td></tr>
-  <tr><td colspan=2><button class="btn js-submit">Save</button></td></tr>
-  </table>
-  </form>
-</script>
-
-<!-- Slice -->
-
-<script type="text/template" id="xosAdmin-slice-list-template">
-  <h3><%= title %></h3>
-  <table class="test-table">
-  <thead><tr>
-     <th>id</th>
-     <th>name</th>
-     <th>enabled</th>
-     <th>omf_friendly</th>
-     <th>description</th>
-     <th>slice_url</th>
-     <th>site</th>
-     <th>max_slivers</th>
-     <th>service</th>
-  </tr></thead>
-  <tbody></tbody>
-  </table>
-</script>
-
-<script type="text/template" id="xosAdmin-slice-listitem-template">
-  <td class="objectLink"><%= id %></td>
-  <td class="objectLink"><%= name %></td>
-  <td><%= enabled %></td>
-  <td><%= omf_friendly %></td>
-  <td><%= description %></td>
-  <td><%= slice_url %></td>
-  <td><%= idToName(site,"sites","name") %></td>
-  <td><%= max_slivers %></td>
-  <td><%= idToName(service,"services","name") %></td>
-</script>
-
-<script type="text/template" id="xosAdmin-slice-detail-template">
-  <h3>Detail View: Slice</h3>
-  <form>
-  <table>
-  <tr><td>Name:</td><td><input type="text" name="name" value="<%= name %>"></td></tr>
-  <tr><td>Enabled:</td><td><input type="checkbox" name="enabled" <% if (enabled) print("checked"); %>></td></tr>
-  <tr><td>Description:</td><td><input type="text" name="description" value="<%= description %>"></td></tr>
-  <tr><td>Url:</td><td><input type="text" name="slice_url" value="<%= slice_url %>"></td></tr>
-  <tr><td>Max Slivers:</td><td><input type="text" name="max_slivers" value="<%= max_slivers %>"></td></tr>
-  <tr><td colspan=2><button class="btn js-submit">Save</button></td></tr>
-  </table>
-  </form>
-</script>
-
-<!-- SliceDeployment -->
-
-<script type="text/template" id="xosAdmin-sliceDeployment-list-template">
-  <h3><%= title %></h3>
-  <table class="test-table">
-  <thead><tr>
-     <th>id</th>
-     <th>slice</th>
-     <th>deployment</th>
-     <th>tenant_id</th>
-  </tr></thead>
-  <tbody></tbody>
-  </table>
-</script>
-
-<script type="text/template" id="xosAdmin-sliceDeployment-listitem-template">
-  <td class="objectLink"><%= id %></td>
-  <td><%= idToName(slice,"slices","name") %></td>
-  <td><%= idToName(deployment,"deployments","name") %></td>
-  <td><%= tenant_id %></td>
-</script>
-
-<script type="text/template" id="xosAdmin-sliceDeployment-detail-template">
-  <h3>Detail View: Slice Deployment</h3>
-  <form>
-  <table>
-  <tr><td>Slice:</td><td><input type="text" name="slice" value="<%= slice %>"></td></tr>
-  <tr><td>Deployment:</td><td><input type="text" name="deployment" value="<%= deployment %>"></td></tr>
-  <tr><td>Tenant Id:</td><td><input type="text" name="tenant_id" value="<%= tenant_id %>"></td></tr>
-  <tr><td colspan=2><button class="btn js-submit">Save</button></td></tr>
-  </table>
-  </form>
-</script>
-
-<!-- SlicePrivilege -->
-
-<script type="text/template" id="xosAdmin-slicePrivilege-list-template">
-  <h3><%= title %></h3>
-  <table class="test-table">
-  <thead><tr>
-     <th>id</th>
-     <th>user</th>
-     <th>slice</th>
-     <th>role</th>
-  </tr></thead>
-  <tbody></tbody>
-  </table>
-</script>
-
-<script type="text/template" id="xosAdmin-slicePrivilege-listitem-template">
-  <td class="objectLink"><%= id %></td>
-  <td><%= idToName(user,"users","username") %></td>
-  <td><%= idToName(slice,"slices","name") %></td>
-  <td><%= idToName(role,"sliceRoles","role") %></td>
-</script>
-
-<script type="text/template" id="xosAdmin-slicePrivilege-detail-template">
-  <h3>Detail View: Slice Privilege</h3>
-  <form>
-  <table>
-  <tr><td>User:</td><td><input type="text" name="user" value="<%= user %>"></td></tr>
-  <tr><td>Slice:</td><td><input type="text" name="slice" value="<%= slice %>"></td></tr>
-  <tr><td>Role:</td><td><input type="text" name="role" value="<%= role %>"></td></tr>
-  <tr><td colspan=2><button class="btn js-submit">Save</button></td></tr>
-  </table>
-  </form>
-</script>
-
-<!-- Sliver -->
-
-<script type="text/template" id="xosAdmin-sliver-list-template">
-  <h3><%= title %></h3>
-  <table class="test-table">
-  <thead><tr>
-     <th>id</th>
-     <th>name</th>
-     <th>instance_id</th>
-     <th>instance_name</th>
-     <th>image</th>
-     <th>creator</th>
-     <th>slice</th>
-     <th>node</th>
-     <th>deploymentNetwork</th>
-     <th>flavor</th>
-     <th>userData</th>
-  </tr></thead>
-  <tbody></tbody>
-  </table>
-</script>
-
-
-<script type="text/template" id="xosAdmin-sliver-listitem-template">
-  <td class="objectLink"><%= id %></td>
-  <td class="objectLink"><%= name %></td>
-  <td><%= instance_id %></td>
-  <td><%= instance_name %></td>
-  <td><%= idToName(image,"images","name") %></td>
-  <td><%= idToName(creator,"users","name") %></td>
-  <td><%= idToName(slice,"slices","name") %></td>
-  <td><%= idToName(node,"nodes","name") %></td>
-  <td><%= idToName(deploymentNetwork,"deployments","name") %></td>
-  <td><%= flavor %></td>
-  <td><%= userData %></td>
-</script>
-
-<script type="text/template" id="xosAdmin-sliver-detail-template">
-  <h3>Detail View: Sliver</h3>
-  <form>
-  <table>
-  <tr><td>Name:</td><td><input type="text" name="name" value="<%= name %>"></td></tr>
-  <tr><td>instance_id:</td><td><input type="text" name="instance_id" value="<%= instance_id %>"></td></tr>
-  <tr><td>instance_name:</td><td><input type="text" name="instance_name" value="<%= instance_name %>"></td></tr>
-  <tr><td>Image:</td><td><%= idToSelect("image",image,"images","name") %></td></tr>
-  <tr><td>Creator:</td><td><%= idToSelect("creator",creator,"users","username") %></td></tr>
-  <tr><td>Slice:</td><td><%= idToSelect("deploymentNetwork",deploymentNetwork,"deployments","name") %></td></tr>
-  <tr><td colspan=2><button class="btn js-submit">Save</button></td></tr>
-  </table>
-  </form>
-</script>
-
-<!-- User -->
-
-<script type="text/template" id="xosAdmin-user-list-template">
-  <h3><%= title %></h3>
-  <table class="test-table">
-  <thead><tr>
-     <th>id</th>
-     <th>username</th>
-     <th>firstname</th>
-     <th>lastname</th>
-     <th>phone</th>
-     <th>user_url</th>
-     <th>site</th>
-  </tr></thead>
-  <tbody></tbody>
-  </table>
-</script>
-
-
-<script type="text/template" id="xosAdmin-user-listitem-template">
-  <td class="objectLink"><%= id %></td>
-  <td class="objectLink"><%= username %></td>
-  <td><%= firstname %></td>
-  <td><%= lastname %></td>
-  <td><%= phone %></td>
-  <td><%= user_url %></td>
-  <td><%= idToName(site,"sites","name") %></td>
-</script>
-
-<script type="text/template" id="xosAdmin-user-detail-template">
-  <h3>Detail View: User</h3>
-  <form>
-  <table>
-  <tr><td>User Name:</td><td><input type="text" name="username" value="<%= username %>"></td></tr>
-  <tr><td>First Name:</td><td><input type="text" name="firstname" value="<%= firstname %>"></td></tr>
-  <tr><td>Last Name:</td><td><input type="text" name="lastname" value="<%= lastname %>"></td></tr>
-  <tr><td>Phone:</td><td><input type="text" name="phone" value="<%= phone %>"></td></tr>
-  <tr><td>Url:</td><td><input type="text" name="user_url" value="<%= user_url %>"></td></tr>
-  <tr><td>Site:</td><td><%= idToSelect("site",site,"sites","name") %></td></tr>
-  <tr><td colspan=2><button class="btn js-submit">Save</button></td></tr>
-  </table>
-  </form>
-</script>
-
-<!-- UserDeployments -->
-
-<script type="text/template" id="xosAdmin-userDeployment-list-template">
-  <h3><%= title %></h3>
-  <table class="test-table">
-  <thead><tr>
-     <th>id</th>
-     <th>user</th>
-     <th>deployment</th>
-     <th>kuser_id</th>
-  </tr></thead>
-  <tbody></tbody>
-  </table>
-</script>
-
-
-<script type="text/template" id="xosAdmin-userDeployment-listitem-template">
-  <td class="objectLink"><%= id %></td>
-  <td><%= idToName(user,"users","username") %></td>
-  <td><%= idToName(deployment,"deployments","name") %></td>
-  <td><%= kuser_id %></td>
-</script>
-
-<script type="text/template" id="xosAdmin-userDeployment-detail-template">
-  <h3>Detail View: User</h3>
-  <form>
-  <table>
-  <tr><td>User:</td><td><input type="text" name="user" value="<%= user %>"></td></tr>
-  <tr><td>Deployment:</td><td><input type="text" name="deployment" value="<%= deployment %>"></td></tr>
-  <tr><td>kuser_id:</td><td><input type="text" name="kuser_id" value="<%= kuser_id %>"></td></tr>
-  <tr><td colspan=2><button class="btn js-submit">Save</button></td></tr>
-  </table>
-  </form>
-</script>