idk

README.md

@@ -6,9 +6,52 @@
 
 `npm run build` frontend static build
 
-`NODE_PORT=xxxx node /path/to/node.js` otherwise won't work; it listens on 127.0.0.80
-
-
 -----
 
 # config.yaml
+
+```---
+# Homepage configuration
+# See https://fontawesome.com/icons for icons options
+
+title: "Forbidden Fruit dashboard"
+subtitle: "TANGIE"
+icon: "fas fa-cannabis"
+# icon: "fas fa-skull-crossbones" # Optional icon
+
+header: true
+footer: false
+
+[...]
+
+# Services
+# First level array represent a group.
+# Leave only a "items" key if not using group (group name, icon & tagstyle are optional, section separation will not be displayed).
+services:
+  - name: "Applications"
+    icon: "fas fa-cloud"
+    items:
+      - name: "Unifi Controller"
+        subtitle: "192.168.10.11"
+        icon: "fas fa-server"
+        url: "https://unifi-controller.lan"
+        target: "_blank" # optionnal html a tag target attribute
+		
+  - name: "Network"
+    icon: "fas fa-network-wired"
+    items:
+      - name: "Unifi Gateway"
+        icon: "fas fa-ethernet"
+        subtitle: "192.168.10.1"
+        url: "http://unifi-gateway.lan"
+        target: "_blank"
+
+external:
+  - name: "System"
+    icon: "fas fa-heartbeat"
+    items:
+      - name: "System Status"
+        icon: "fas fa-joint"
+        subtitle: ""
+        url: "/api/sysStatus"
+		```

package.json

@@ -13,7 +13,8 @@
     "core-js": "^3.6.4",
     "js-yaml": "^3.14.0",
     "lodash.merge": "^4.6.2",
-    "register-service-worker": "^1.7.1"
+    "register-service-worker": "^1.7.1",
+    "vue": "^2.6.11"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.4.1",

public/config.yml

@@ -2,34 +2,33 @@
 # Homepage configuration
 # See https://fontawesome.com/icons for icons options
 
-title: "Forbidden Fruit dashboard"
+title: "Snakes dashboard"
 subtitle: "TANGIE"
 icon: "fas fa-cannabis"
-# icon: "fas fa-skull-crossbones" # Optional icon
 
 header: true
 footer: false
-#footer: '<p>Created with <span class="has-text-danger">❤️</span> with <a href="https://bulma.io/">bulma</a>, <a href="https://vuejs.org/">vuejs</a> & <a href="https://fontawesome.com/">font awesome</a> // Fork me on <a href="https://github.com/bastienwirtz/homer"><i class="fab fa-github-alt"></i></a></p>' # set false if you want to hide it.
 columns: "4"
 # Optionnal theme customization
 theme: default
 colors:
   light:
-    highlight-primary: "#3367d6"
+    highlight-primary: "#f18409"
-    highlight-secondary: "#4285f4"
+    highlight-secondary: "#3a2a2f"
-    highlight-hover: "#5a95f5"
+    highlight-hover: "#f18409"
-    background: "#f5f5f5"
+    background: "#F3E7E2"
-    card-background: "#ffffff"
+    card-background: "#E7D0C5"
     text: "#363636"
     text-header: "#ffffff"
     text-title: "#303030"
     text-subtitle: "#424242"
     card-shadow: rgba(0, 0, 0, 0.1)
     link-hover: "#363636"
+    link-color: "#571962"
   dark:
-    highlight-primary: "#3367d6"
+    highlight-primary: "#571962"
-    highlight-secondary: "#4285f4"
+    highlight-secondary: "#3a2a2f"
-    highlight-hover: "#5a95f5"
+    highlight-hover: "#571962"
     background: "#131313"
     card-background: "#2b2b2b"
     text: "#eaeaea"
@@ -38,24 +37,21 @@ colors:
     text-subtitle: "#f5f5f5"
     card-shadow: rgba(0, 0, 0, 0.4)
     link-hover: "#ffdd57"
+    link-color: "#f18409"
 
 # Optional message
 #message:
   #url: https://b4bz.io
   # style: "is-dark" # See https://bulma.io/documentation/components/message/#colors for styling options.
   #title: "👋 Demo !"
-  #content: "This is a dummy homepage demo. <br /> Find more information on <a href='https://github.com/bastienwirtz/homer'>github.com/bastienwirtz/homer</a>"
+  #content: "This is a dummy homepage demo."
 
 # Optional navbar
 # links: [] # Allows for navbar (dark mode, layout, and search) without any links
-#links:
+links:
-# - name: "Contribute"
+- name: "Pages"
-#   icon: "fab fa-github"
+  icon: "fas fa-list"
-#   url: "https://github.com/bastienwirtz/homer"
+  url: "/pages"
-#   target: "_blank" # optionnal html a tag target attribute
-# - name: "Wiki"
-#   icon: "fas fa-book"
-#   url: "https://www.wikipedia.org/"
 
 # Services
 # First level array represent a group.
@@ -65,94 +61,60 @@ services:
     icon: "fas fa-cloud"
     items:
       - name: "Unifi Controller"
-        subtitle: "192.168.10.11"
+        subtitle: "controller.snakes.wtf"
-        icon: "fas fa-server"
+        icon: "fas fa-wifi"
-        url: "https://unifi-controller.lan"
+        url: "https://controller.snakes.wtf"
         target: "_blank" # optionnal html a tag target attribute
-      - name: "Pihole"
-        icon: "fab fa-raspberry-pi"
-        subtitle: "192.168.10.12"
-        url: "http://pihole.lan/admin"
-        target: "_blank"
       - name: "TvHeadEnd"
         icon: "fas fa-tv"
-        subtitle: "192.168.10.13"
+        subtitle: "tv.snakes.wtf"
-        url: "http://tvheadend.lan"
+        url: "https://tv.snakes.wtf"
+        target: "_blank"
+      - name: "Blog"
+        icon: "fas fa-blog"
+        subtitle: "blog.snakes.wtf"
+        url: "https://blog.snakes.wtf"
+        target: "_blank"
+      - name: "Proxmox VE"
+        icon: "fas fa-server"
+        subtitle: "pve.snakes.wtf"
+        url: "https://pve.snakes.wtf:8006"
+        target: "_blank"
+      - name: "Snakes' Stream"
+        icon: "fas fa-play"
+        subtitle: "stream.snakes.wtf"
+        url: "https://stream.snakes.wtf"
         target: "_blank"
       - name: "SnakesHub"
         icon: "fab fa-git"
-        subtitle: "dev.jagernet.ga"
+        subtitle: "dev.snakes.wtf"
-        url: "https://dev.jagernet.ga"
+        url: "https://dev.snakes.wtf"
         target: "_blank"
   - name: "Network"
     icon: "fas fa-network-wired"
     items:
-      - name: "Unifi Gateway"
+      - name: "OPNsense"
-        icon: "fas fa-ethernet"
+        icon: "fas fa-server"
         subtitle: "192.168.10.1"
-        url: "http://unifi-gateway.lan"
+        url: "https://192.168.10.1"
         target: "_blank"
-      - name: "Bedroom Switch"
+      - name: "Dlink DGS-1100-08"
         icon: "fas fa-ethernet"
         subtitle: "192.168.10.2"
         url: "http://192.168.10.2"
         target: "_blank"
-      - name: "Main Switch"
-        icon: "fas fa-ethernet"
-        subtitle: "192.168.10.3"
-        url: "http://192.168.10.3"
-        target: "_blank"
-        #      - name: " FWR8102"
-        #        icon: "fas fa-ethernet"
-        #        subtitle: "192.168.10.5"
-        #        url: "http://192.168.10.5"
-        #        target: "_blank"
-      - name: "FRITZ!Box Fon 5140"
-        icon: "fas fa-ethernet"
-        subtitle: "192.168.10.6"
-        url: "http://192.168.10.6"
-        target: "_blank"
-      - name: " Turn on PC"
-          icon: "fas fa-ethernet"
-          subtitle: "192.168.10.15"
-          url: "/api/powerOnPc"
-          target: "_blank"
 external:
   - name: "System"
     icon: "fas fa-heartbeat"
     items:
-      - name: "System Status"
+      #- name: ""
-        icon: "fas fa-joint"
+      #  icon: ""
-        subtitle: ""
+      #  subtitle: " http://192.168.44.5:3000 "
-        url: "/api/sysStatus"
+      - url: "/api/sysStatus"
-      - name: "Icanhazip"
-        icon: "fas fa-joint"
-        subtitle: ""
-        url: "/api/internetCheck"
-      - name: "VPN"
-        icon: "fas fa-joint"
-        subtitle: ""
-        url: "/api/vpnCheck"
-      - name: "VPN"
-        icon: "fas fa-joint"
-        subtitle: ""
-        url: "/api/lancianoCheck"
   - name: "TV Status"
-    icon: "fas fa-heartbeat"
+    icon: "fas fa-tv"
     items:
-      - name: "Tv Hat Frequency"
+      # - name: ""
-        icon: "fas fa-broadcast-tower"
+      #   icon: "fas fa-broadcast-tower"
-        subtitle: ""
+      #   subtitle: ""
-        url: "/api/dvbStatus?t=1"
+      - url: "/api/dvbtuner"
-      - name: "Tv Hat Channel"
-        icon: "fas fa-tv"
-        subtitle: ""
-        url: "/api/dvbChannel?t=1"
-      - name: "USB tuner Frequency"
-        icon: "fas fa-broadcast-tower"
-        subtitle: ""
-        url: "/api/dvbStatus?t=0"
-      - name: "USB Tv Channel"
-        icon: "fas fa-tv"
-        subtitle: ""
-        url: "/api/dvbChannel?t=0"

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>
@@ -71,15 +73,14 @@
                 :class="['column', `is-${12 / config.columns}`]"
               />
             </template>
-            <template v-for="group in external">
+            <template v-for="group in wsdata">
-              <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>
               <External
-                v-for="item in group.items"
+                v-bind:item="group.data"
-                :key="item.name"
+                :key="group.id"
-                v-bind:item="item"
                 :class="['column', `is-${12 / config.columns}`]"
               />
             </template>
@@ -105,7 +106,7 @@
                 :key="item.url"
               />
             </div>
-            <div
+            <!-- <div
               :class="['column', `is-${12 / config.columns}`]"
               v-for="group in external"
               :key="group.name"
@@ -119,7 +120,7 @@
                 v-bind:item="item"
                 :key="item.url"
               />
-            </div>
+            </div> -->
           </div>
         </div>
       </div>
@@ -146,10 +147,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 +163,11 @@ export default {
     Service,
     External,
     Message,
-    SearchInput,
+    // SearchInput,
-    SettingToggle,
+    // SettingToggle,
     DarkMode,
     DynamicTheme,
+    Clock,
   },
   data: function () {
     return {
@@ -175,7 +178,12 @@ export default {
       filter: "",
       vlayout: true,
       isDark: null,
-      showMenu: false,
+      showMenu: true,
+      wsconnection: null,
+      wsapi: null,
+      dvbtuner: null,
+      sysstat: null,
+      wsdata:[],
     };
   },
   created: async function () {
@@ -185,8 +193,24 @@ export default {
     this.services = this.config.services;
     this.external = this.config.external;
     document.title = `${this.config.title} | ${this.config.subtitle}`;
+    // ws section
+    let that = this;
+    this.wsconnection = new WebSocket("wss://sco.snakes.wtf/api");
+
+    this.wsconnection.onmessage = function(event) {
+      let tmp = JSON.parse(event.data);
+      that.wsdata[tmp.id] = tmp;
+      console.log("recv(onmessage)",JSON.parse(event.data)) //recv
+    }
+    // this.wsconnection.onopen = function(event) {}
+    //that.sendMessage("helo");
+    // }
+
   },
   methods: {
+    sendMessage: function(message) {
+      this.wsconnection.send(message);
+    },
     getConfig: function (path = "config.yml") {
       return fetch(path).then((response) => {
         if (!response.ok) {
@@ -240,6 +264,7 @@ export default {
           }
         }
       }
+      //TODO filter external  
 
       this.services = [
         {

src/assets/app.scss

@@ -143,7 +143,7 @@ body {
 
       a {
         color: var(--text-header);
-        padding: 8px 12px;
+        padding: 6px 6px;
         &:hover,
         &:focus {
           color: var(--text-header);
@@ -221,6 +221,7 @@ body {
     transition: cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
 
     a {
+      color: var(--link-color);
       outline: none;
     }
   }
@@ -331,7 +332,7 @@ body {
       line-height: 1rem;
       vertical-align: middle;
       cursor: pointer;
-      color: #3273dc;
+      color: #f18409;
     }
   }
 }

src/components/Clock.vue

@@ -0,0 +1,37 @@
+<template>
+  <a  aria-label="clock" class="navbar-item is-inline-block-mobile" style="font-family:monospace; font-size:0.9em;">
+    <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/External.vue

@@ -1,18 +1,18 @@
 <template>
   <div>
-    <div class="card">
+    <div v-for="diocane in item" :key="diocane.id" class="card">
       <a href="#" :target="item.target" rel="noreferrer">
         <div class="card-content">
           <div class="media">
             <!-- <div class="card-content  "> -->
-            <div v-if="item.icon" class="media-left">
+            <div v-if="diocane.icon" class="media-left">
               <figure class="image is-48x48">
-                <i style="font-size: 35px;" :class="item.icon"></i>
+                <i style="font-size: 35px" :class="diocane.icon"></i>
               </figure>
             </div>
             <div class="media-content">
-              <p class="title is-5">{{ item.name }}</p>
+              <p class="title is-5">{{ diocane.id }}</p>
-              <p class="subtitle is-6">{{ response.data }}</p>
+              <p class="subtitle is-6">{{ diocane.data }}</p>
             </div>
           </div>
         </div>
@@ -30,22 +30,35 @@ export default {
   data: function () {
     return {
       response: null,
+      timer: "",
     };
   },
-  mounted: async function () {
+  mounted: function () {
-    let response = await fetch(this.item.url, {
+    // this.fetchList();
-      headers: {
+    // this.timer = setInterval(this.fetchList, 10000);
-        "Content-Type": "application/json",
-      },
-    });
-    if (!response.ok) {
-      throw Error(response.statusText);
-    }
-    this.response = await response.json();
-    if (this.response.stderr !== "") {
-      console.error(this.response.stderr);
-    }
   },
+  methods: {
+    fetchList: async function () {
+      let response = await fetch(this.item.url, {
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+      if (!response.ok) {
+        throw Error(response.statusText);
+      }
+      this.response = await response.json();
+      if (this.response.stderr !== "") {
+        //console.error(this.response.stderr);
+      }
+    },
+    // cancelAutoUpdate: function () {
+      // clearInterval(this.timer);
+    // }
+  },
+  // 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: {

src/components/SearchInput.vue

@@ -6,8 +6,8 @@
       ref="search"
       :value="value"
       @input="$emit('input', $event.target.value.toLowerCase())"
-      @keyup.enter.exact="$emit('search:open')"
+      @keyup.enter.exact="$emit('search-open')"
-      @keyup.alt.enter="$emit('search:open', '_blank')"
+      @keyup.alt.enter="$emit('search-open', '_blank')"
     />
   </div>
 </template>
@@ -20,7 +20,7 @@ export default {
     this._keyListener = function (event) {
       if (event.key === "/") {
         event.preventDefault();
-        this.$emit("search:focus");
+        this.$emit("search-focus");
         this.$nextTick(() => {
           this.$refs.search.focus();
         });
@@ -28,7 +28,7 @@ export default {
       if (event.key === "Escape") {
         this.$refs.search.value = "";
         this.$refs.search.blur();
-        this.$emit("search:cancel");
+        this.$emit("search-cancel");
       }
     };
     document.addEventListener("keydown", this._keyListener.bind(this));

vue.config.js

@@ -14,7 +14,7 @@ module.exports = {
     appleMobileWebAppCapable: "yes",
     name: "Forbidden Fruit Dashboard",
     short_name: "FFruit",
-    theme_color: "#3367D6",
+    theme_color: "#571962",
     icons: [
       {
         src: "./assets/icons/android-chrome-192x192.png",