rework ui

html/ui/index.html

@@ -38,6 +38,7 @@
 <template v-if="!publicState">
     <p>Not connected.</p>
 </template>
+
 <template v-else-if="publicState.Store.New">
     <p>Store is new.</p>
     <p>Option 1: initialize a new store</p>
@@ -53,6 +54,7 @@
         <input type="submit" value="upload" />
     </form>
 </template>
+
 <template v-else-if="!publicState.Store.Open">
     <p>Store is not open.</p>
     <form @submit="unlockStore">
@@ -60,6 +62,7 @@
         <input type="submit" value="unlock" :disabled="!forms.store.pass1" />
     </form>
 </template>
+
 <template v-else-if="!state">
     <p v-if="!session.token">Not logged in.</p>
     <p v-else>Invalid token</p>
@@ -69,25 +72,22 @@
         <input type="submit" value="log in"/>
     </form>
 </template>
+
 <template v-else>
-  <div v-if="state.Clusters" id="clusters">
-    <h2>Clusters</h2>
+  <div style="float:right;"><input type="text" placeholder="Filter" v-model="viewFilter"/></div>
+  <p class="view-links"><span v-for="v in views" @click="view = v" :class="{selected: view.type==v.type && view.name==v.name}">{{v.title}}</span></p>
 
-    <div class="sheets">
-        <Cluster v-for="c in state.Clusters" :cluster="c" :token="session.token" :state="state" />
-    </div>
+  <h2 v-if="view">{{view.title}}</h2>
+
+  <div v-if="view.type == 'cluster'" id="clusters">
+    <Cluster :cluster="viewObj" :token="session.token" :state="state" />
   </div>
 
-  <div v-if="state.Hosts" id="hosts">
-    <h2>Hosts</h2>
-
-    <div class="sheets">
-        <Host v-for="h in state.Hosts" :host="h" :token="session.token" :state="state" />
-    </div>
+  <div v-if="view.type == 'host'" id="hosts">
+    <Host :host="viewObj" :token="session.token" :state="state" />
   </div>
 
-  <h2>Admin actions</h2>
-
+  <div v-if="view.type == 'actions' && view.name == 'admin'">
   <h3>Config</h3>
   <form @submit="uploadConfig">
       <input type="file" ref="configUpload" required />
@@ -131,7 +131,7 @@
       <input type="submit" value="delete instance" :disabled="!forms.hostFromTemplateDel" />
   </form>
 </template>
-
+  </div>
 </template>
 </div>