wiwi

public/config.yml

@@ -109,7 +109,7 @@ external:
     items:
       #- name: ""
       #  icon: ""
-      #  subtitle: ""
+      #  subtitle: " http://192.168.44.5:3000 "
       - url: "/api/sysStatus"
   - name: "TV Status"
     icon: "fas fa-tv"

src/App.vue

@@ -28,9 +28,9 @@
         :links="config.links"
         @navbar:toggle="showMenu = !showMenu"
       >
+        <Clock />
         <DarkMode @updated="isDark = $event" />
-
+        <!-- <SettingToggle
-        <SettingToggle
           @updated="vlayout = $event"
           name="vlayout"
           icon="fa-list"
@@ -43,7 +43,7 @@
           @search:focus="showMenu = true"
           @search:open="navigateToFirstService"
           @search:cancel="filterServices"
-        />
+        /> -->
       </Navbar>
     </div>
 
@@ -60,7 +60,9 @@
           <!-- Horizontal layout -->
           <div v-if="!vlayout || filter" class="columns is-multiline">
             <template v-for="group in services">
-              <h2 v-if="group.name" class="column is-full group-title">
+              <h2 v-if="group.name"
+                :key="group.name" 
+                class="column is-full group-title">
                 <i v-if="group.icon" :class="group.icon"></i>
                 {{ group.name }}
               </h2>
@@ -72,7 +74,7 @@
               />
             </template>
             <template v-for="group in external">
-              <h2 v-if="group.name" class="column is-full group-title">
+              <h2 v-if="group.name" v-bind:key="group.name" class="column is-full group-title">
                 <i v-if="group.icon" :class="group.icon"></i>
                 {{ group.name }}
               </h2>
@@ -146,10 +148,11 @@ import ConnectivityChecker from "./components/ConnectivityChecker.vue";
 import Service from "./components/Service.vue";
 import External from "./components/External.vue";
 import Message from "./components/Message.vue";
-import SearchInput from "./components/SearchInput.vue";
+// import SearchInput from "./components/SearchInput.vue";
-import SettingToggle from "./components/SettingToggle.vue";
+// import SettingToggle from "./components/SettingToggle.vue";
 import DarkMode from "./components/DarkMode.vue";
 import DynamicTheme from "./components/DynamicTheme.vue";
+import Clock from "./components/Clock.vue";
 
 import defaultConfig from "./assets/defaults.yml";
 
@@ -161,10 +164,11 @@ export default {
     Service,
     External,
     Message,
-    SearchInput,
+    // SearchInput,
-    SettingToggle,
+    // SettingToggle,
     DarkMode,
     DynamicTheme,
+    Clock,
   },
   data: function () {
     return {
@@ -175,7 +179,7 @@ export default {
       filter: "",
       vlayout: true,
       isDark: null,
-      showMenu: false,
+      showMenu: true,
     };
   },
   created: async function () {

src/components/Clock.vue

@@ -0,0 +1,37 @@
+<template>
+  <a  aria-label="clock" class="navbar-item is-inline-block-mobile">
+    <i class="fas fa-clock"></i>
+    {{clock}}
+  </a>
+</template>
+
+<script>
+export default {
+  name: "Clock",
+  data: function () {
+    return {
+      clock: '',
+      time: 0
+    };
+  },
+  created: function () {
+    //let today = new Date();
+    //this.clock =`${today.toLocaleString("it-IT",{timeZone: "Europe/Rome"}).split(",")[1].trim()} Rome\t${today.toLocaleString("it-IT", {timeZone: "UTC"}).split(",")[1].trim()} UTC\t${today.toLocaleString("it-IT",{timeZone:"America/Chicago"}).split(",")[1].trim()} CT\t${today.toLocaleString("it-IT", {timeZone: "America/Los_Angeles"}).split(",")[1].trim()} PT`;
+    // this.time = setTimeout(this.updateClock,1000);
+    this.updateClock()
+  },
+  methods: {
+    updateClock: function () {
+    let today = new Date();
+    this.clock =`${today.toLocaleString("it-IT", {timeZone: "UTC"}).split(",")[1].trim()} UTC ${today.toLocaleString("it-IT",{timeZone:"America/Chicago"}).split(",")[1].trim()} CT ${today.toLocaleString("it-IT", {timeZone: "America/Los_Angeles"}).split(",")[1].trim()} PT`;
+    this.time = setTimeout(this.updateClock,1000);
+    },
+    cancelAutoUpdate: function () {
+      clearTimeout(this.time);
+    }
+  },
+    beforeDestroy() {
+    this.cancelAutoUpdate();
+  },
+};
+</script>

src/components/Navbar.vue

@@ -2,25 +2,25 @@
   <div v-cloak v-if="links" class="container-fluid">
     <nav class="navbar" role="navigation" aria-label="main navigation">
       <div class="container">
-        <div class="navbar-brand">
+        <!-- <div class="navbar-brand">
           <a
             role="button"
             aria-label="menu"
             aria-expanded="false"
             class="navbar-burger"
             :class="{ 'is-active': showMenu }"
-            v-on:click="$emit('navbar-toggle')"
+            @click="$emit('navbar-toggle')"
           >
             <span aria-hidden="true"></span>
             <span aria-hidden="true"></span>
             <span aria-hidden="true"></span>
           </a>
-        </div>
+        </div> -->
         <div class="navbar-menu" :class="{ 'is-active': showMenu }">
           <div class="navbar-start">
             <!--  -->
             <a
-              class="navbar-item"
+              class="navbar-item is-inline-block-mobile"
               rel="noreferrer"
               v-for="link in links"
               :key="link.url"
@@ -29,15 +29,16 @@
             >
               <i
                 v-if="link.icon"
-                style="margin-right: 6px;"
+                style="margin-right: 2px;"
                 :class="link.icon"
               ></i>
               {{ link.name }}
             </a>
             <!--  -->
+            <slot></slot>
           </div>
           <div class="navbar-end">
-            <slot></slot>
+            <!-- <slot></slot> -->
           </div>
         </div>
       </div>
@@ -51,13 +52,13 @@ export default {
   props: {
     open: {
       type: Boolean,
-      default: false,
+      default: true,
     },
     links: Array,
   },
   computed: {
     showMenu: function () {
-      return this.open && this.isSmallScreen();
+      return this.open;// && this.isSmallScreen();
     },
   },
   methods: {