ui rework

ui/index.html

@@ -21,21 +21,16 @@
 
 <div id="app">
 <header>
-    <div id="logo">
-        <img src="favicon.ico" />
-        <span>Direktil Local Server</span>
-    </div>
-    <div class="utils">
+    <span id="logo"><img src="favicon.ico" /> Direktil Local Server</span>
+    <span class="utils">
         <span id="login-hdr" v-if="session.token">
             Logged in
             <button class="link" @click="copyText(session.token)">&#x1F5D0;</button>
         </span>
-
         <span>server <code>{{ serverVersion || '-----' }}</code></span>
         <span>ui     <code>{{ uiHash || '-----' }}</code></span>
-
         <span :class="publicState ? 'green' : 'red'">&#x1F5F2;</span>
-    </div>
+    </span>
 </header>
 
 <div class="error" v-if="error">
@@ -44,11 +39,13 @@
     <div class="message">{{ error.message }}</div>
 </div>
 
-<template v-if="!publicState">
-    <p>Not connected.</p>
-</template>
+<div class="toasts"><div v-for="t in toasts" :class="'toast '+t.kind" @click="dismissToast(t.id)">{{ t.message }}</div></div>
 
-<template v-else-if="publicState.Store.New">
+<main class="content" v-if="!publicState">
+    <p>Not connected.</p>
+</main>
+
+<main class="content" v-else-if="publicState.Store.New">
     <p>Store is new.</p>
     <p>Option 1: initialize a new store</p>
     <form @submit="unlockStore">
@@ -62,17 +59,17 @@
         <input type="file" ref="storeUpload" />
         <input type="submit" value="upload" />
     </form>
-</template>
+</main>
 
-<template v-else-if="!publicState.Store.Open">
+<main class="content" v-else-if="!publicState.Store.Open">
     <p>Store is not open.</p>
     <form @submit="unlockStore">
         <input type="password" name="passphrase" v-model="forms.store.pass1" required placeholder="Passphrase" />
         <input type="submit" value="unlock" :disabled="!forms.store.pass1" />
     </form>
-</template>
+</main>
 
-<template v-else-if="!state">
+<main class="content" v-else-if="!state">
     <p v-if="!session.token">Not logged in.</p>
     <p v-else>Invalid token</p>
 
@@ -80,13 +77,20 @@
         <input type="password" v-model="forms.store.pass1" required placeholder="Passphrase" />
         <input type="submit" value="log in"/>
     </form>
-</template>
+</main>
 
 <template v-else>
-  <div style="float:right;"><input type="search" 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>
-
-  <h2 v-if="view">{{view.title}}</h2>
+  <nav class="sidebar">
+    <input type="search" placeholder="Filter" v-model="viewFilter"/>
+    <p class="nav-section">Admin</p>
+    <p class="view-links"><button type="button" v-for="v in adminViews" @click="view = v" :class="{selected: isActive(v)}">{{v.title}}</button></p>
+    <p class="nav-section" v-if="clusterViews.length">Clusters</p>
+    <p class="view-links" v-if="clusterViews.length"><button type="button" v-for="v in clusterViews" @click="view = v" :class="{selected: isActive(v)}">{{v.title}}</button></p>
+    <p class="nav-section" v-if="hostViews.length">Hosts</p>
+    <p class="view-links" v-if="hostViews.length"><button type="button" v-for="v in hostViews" @click="view = v" :class="{selected: isActive(v)}">{{v.title}}</button></p>
+  </nav>
+  <main class="content">
+  <h2 v-if="view">{{ view.type == 'cluster' ? 'Cluster ' : view.type == 'host' ? 'Host ' : '' }}{{view.title}}</h2>
 
   <div v-if="view.type == 'cluster'" id="clusters">
     <Cluster :cluster="viewObj" :token="session.token" :state="state" />
@@ -147,6 +151,7 @@
   </form>
 </template>
   </div>
+  </main>
 </template>
 </div>
 </body>