Adds title for pages

assets/App.vue

@@ -14,7 +14,7 @@
       <ul class="menu-list is-hidden-mobile" :class="{ 'is-active': showNav }">
         <li v-for="item in containers">
           <router-link
-            :to="{ name: 'container', params: { id: item.Id } }"
+            :to="{ name: 'container', params: { id: item.Id, name: item.Names[0] } }"
             active-class="is-active"
             class="tooltip is-tooltip-right is-tooltip-info"
             :data-tooltip="item.Names[0]"
@@ -25,6 +25,7 @@
       </ul>
     </aside>
     <div class="column is-offset-2"><router-view></router-view></div>
+    <vue-headful :title="title" />
   </div>
 </template>
 
@@ -33,12 +34,14 @@ export default {
   name: "App",
   data() {
     return {
+      title: "Dozzle",
       containers: [],
       showNav: false
     };
   },
   async created() {
     this.containers = await (await fetch(`${BASE_PATH}/api/containers.json`)).json();
+    this.title = `${this.containers.length} containers - Dozzle`;
   }
 };
 </script>

assets/main.js

@@ -1,10 +1,12 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
+import vueHeadful from "vue-headful";
 import App from "./App.vue";
 import Container from "./pages/Container.vue";
 import Index from "./pages/Index.vue";
 
 Vue.use(VueRouter);
+Vue.component("vue-headful", vueHeadful);
 
 const routes = [
   {

assets/pages/Container.vue

@@ -6,6 +6,7 @@
       </li>
     </ul>
     <scrollbar-notification :messages="messages"></scrollbar-notification>
+    <vue-headful :title="title" />
   </div>
 </template>
 
@@ -29,14 +30,15 @@ const parseMessage = data => {
 };
 
 export default {
-  props: ["id"],
+  props: ["id", "name"],
   name: "Container",
   components: {
     ScrollbarNotification
   },
   data() {
     return {
-      messages: []
+      messages: [],
+      title: ""
     };
   },
   created() {
@@ -61,14 +63,15 @@ export default {
         this.messages = [];
       }
       const protocol = SSL_ENABLED ? "wss" : "ws";
-      ws = new WebSocket(`${protocol}://${window.location.host}${BASE_PATH}/api/logs?id=${this.id}`);
+      ws = new WebSocket(`${protocol}://${window.location.host}${BASE_PATH}/api/logs?id=${id}`);
       ws.onopen = e => console.log("Connection opened.");
       ws.onclose = e => console.log("Connection closed.");
       ws.onerror = e => console.error("Connection error: " + e.data);
       ws.onmessage = e => {
         const message = parseMessage(e.data);
         this.messages.push(message);
       };
+      this.title = `${this.name} - Dozzle`;
     }
   }
 };

package.json

@@ -26,6 +26,7 @@
   "bulma-tooltip": "^2.0.2",
   "date-fns": "^2.0.0-alpha.25",
   "vue": "^2.5.17",
+  "vue-headful": "^2.0.1",
   "vue-router": "^3.0.2"
  },
  "devDependencies": {