X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=src%2FApp.vue;h=25e943f7d80082515c92a79dbee5f81ea14797e3;hb=6cfa1643b4024af3a504fcc547fcd04dbb1a0d0a;hp=a35699785df88cd9ebf2903e6118d64555c0f245;hpb=9814a037a5158d31c77fecc8bfb3b61b45d015b3;p=github%2Fbastienwirtz%2Fhomer.git

diff --git a/src/App.vue b/src/App.vue
index a356997..25e943f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,6 +4,7 @@
     v-if="config"
     :class="[
       `theme-${config.theme}`,
+      `page-${currentPage}`,
       isDark ? 'is-dark' : 'is-light',
       !config.footer ? 'no-footer' : '',
     ]"
@@ -13,10 +14,15 @@
       <section v-if="config.header" class="first-line">
         <div v-cloak class="container">
           <div class="logo">
-            <img v-if="config.logo" :src="config.logo" />
+            <a href="#">
+              <img v-if="config.logo" :src="config.logo" alt="dashboard logo" />
+            </a>
             <i v-if="config.icon" :class="config.icon"></i>
           </div>
-          <div class="dashboard-title">
+          <div
+            class="dashboard-title"
+            :class="{ 'no-logo': !config.icon || !config.logo }"
+          >
             <span class="headline">{{ config.subtitle }}</span>
             <h1>{{ config.title }}</h1>
           </div>
@@ -26,46 +32,67 @@
       <Navbar
         :open="showMenu"
         :links="config.links"
-        @navbar:toggle="showMenu = !showMenu"
+        @navbar-toggle="showMenu = !showMenu"
       >
-        <DarkMode @updated="isDark = $event" />
+        <DarkMode
+          @updated="isDark = $event"
+          :defaultValue="this.config.defaults.colorTheme"
+        />
 
         <SettingToggle
           @updated="vlayout = $event"
           name="vlayout"
           icon="fa-list"
           iconAlt="fa-columns"
+          :defaultValue="this.config.defaults.layout == 'columns'"
         />
 
         <SearchInput
           class="navbar-item is-inline-block-mobile"
-          @input="filterServices"
-          @search:focus="showMenu = true"
-          @search:open="navigateToFirstService"
-          @search:cancel="filterServices"
+          :hotkey="searchHotkey()"
+          @input="filterServices($event.target?.value)"
+          @search-focus="showMenu = true"
+          @search-open="navigateToFirstService($event?.target?.value)"
+          @search-cancel="filterServices()"
         />
       </Navbar>
     </div>
 
     <section id="main-section" class="section">
       <div v-cloak class="container">
-        <ConnectivityChecker @network:status-update="offline = $event" />
+        <ConnectivityChecker
+          v-if="config.connectivityCheck"
+          @network-status-update="offline = $event"
+        />
+
+        <GetStarted v-if="configurationNeeded" />
+
         <div v-if="!offline">
           <!-- Optional messages -->
           <Message :item="config.message" />
 
           <!-- 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">
-                <i v-if="group.icon" :class="group.icon"></i>
+            <template v-for="(group, groupIndex) in services">
+              <h2
+                v-if="group.name"
+                class="column is-full group-title"
+                :key="`header-${groupIndex}`"
+              >
+                <i v-if="group.icon" :class="['fa-fw', group.icon]"></i>
+                <div v-else-if="group.logo" class="group-logo media-left">
+                  <figure class="image is-48x48">
+                    <img :src="group.logo" :alt="`${group.name} logo`" />
+                  </figure>
+                </div>
                 {{ group.name }}
               </h2>
               <Service
-                v-for="item in group.items"
-                :key="item.url"
-                v-bind:item="item"
-                class="column is-one-third-widescreen"
+                v-for="(item, index) in group.items"
+                :key="`service-${groupIndex}-${index}`"
+                :item="item"
+                :proxy="config.proxy"
+                :class="['column', `is-${12 / config.columns}`]"
               />
             </template>
           </div>
@@ -76,18 +103,24 @@
             class="columns is-multiline layout-vertical"
           >
             <div
-              class="column is-one-third-widescreen"
-              v-for="group in services"
-              :key="group.name"
+              :class="['column', `is-${12 / config.columns}`]"
+              v-for="(group, groupIndex) in services"
+              :key="groupIndex"
             >
               <h2 v-if="group.name" class="group-title">
-                <i v-if="group.icon" :class="group.icon"></i>
+                <i v-if="group.icon" :class="['fa-fw', group.icon]"></i>
+                <div v-else-if="group.logo" class="group-logo media-left">
+                  <figure class="image is-48x48">
+                    <img :src="group.logo" :alt="`${group.name} logo`" />
+                  </figure>
+                </div>
                 {{ group.name }}
               </h2>
               <Service
-                v-for="item in group.items"
-                v-bind:item="item"
-                :key="item.url"
+                v-for="(item, index) in group.items"
+                :key="index"
+                :item="item"
+                :proxy="config.proxy"
               />
             </div>
           </div>
@@ -108,10 +141,11 @@
 </template>
 
 <script>
-const jsyaml = require("js-yaml");
-const merge = require("lodash.merge");
+import { parse } from "yaml";
+import merge from "lodash.merge";
 
 import Navbar from "./components/Navbar.vue";
+import GetStarted from "./components/GetStarted.vue";
 import ConnectivityChecker from "./components/ConnectivityChecker.vue";
 import Service from "./components/Service.vue";
 import Message from "./components/Message.vue";
@@ -120,12 +154,13 @@ import SettingToggle from "./components/SettingToggle.vue";
 import DarkMode from "./components/DarkMode.vue";
 import DynamicTheme from "./components/DynamicTheme.vue";
 
-import defaultConfig from "./assets/defaults.yml";
+import defaultConfig from "./assets/defaults.yml?raw";
 
 export default {
   name: "App",
   components: {
     Navbar,
+    GetStarted,
     ConnectivityChecker,
     Service,
     Message,
@@ -136,6 +171,9 @@ export default {
   },
   data: function () {
     return {
+      loaded: false,
+      currentPage: null,
+      configNotFound: false,
       config: null,
       services: null,
       offline: false,
@@ -145,35 +183,85 @@ export default {
       showMenu: false,
     };
   },
+  computed: {
+    configurationNeeded: function () {
+      return (this.loaded && !this.services) || this.configNotFound;
+    },
+  },
   created: async function () {
-    try {
-      const defaults = jsyaml.load(defaultConfig);
-      let config = await this.getConfig();
+    this.buildDashboard();
+    window.onhashchange = this.buildDashboard;
+    this.loaded = true;
+  },
+  methods: {
+    searchHotkey() {
+      if (this.config.hotkey && this.config.hotkey.search) {
+        return this.config.hotkey.search;
+      }
+    },
+    buildDashboard: async function () {
+      const defaults = parse(defaultConfig);
+      let config;
+      try {
+        config = await this.getConfig();
+        this.currentPage = window.location.hash.substring(1) || "default";
 
+        if (this.currentPage !== "default") {
+          let pageConfig = await this.getConfig(
+            `assets/${this.currentPage}.yml`
+          );
+          config = Object.assign(config, pageConfig);
+        }
+      } catch (error) {
+        console.log(error);
+        config = this.handleErrors("⚠️ Error loading configuration", error);
+      }
       this.config = merge(defaults, config);
-
-      console.log(this.config);
       this.services = this.config.services;
-      document.title = `${this.config.title} | ${this.config.subtitle}`;
-    } catch (error) {
-      this.offline = true;
-    }
-  },
-  methods: {
-    getConfig: function () {
-      return fetch("config.yml").then(function (response) {
-        if (response.status != 200) {
-          return;
+
+      document.title =
+        this.config.documentTitle ||
+        `${this.config.title} | ${this.config.subtitle}`;
+      if (this.config.stylesheet) {
+        let stylesheet = "";
+        for (const file of this.config.stylesheet) {
+          stylesheet += `@import "${file}";`;
+        }
+        this.createStylesheet(stylesheet);
+      }
+    },
+    getConfig: function (path = "assets/config.yml") {
+      return fetch(path).then((response) => {
+        if (response.status == 404 || response.redirected) {
+          this.configNotFound = true;
+          return {};
+        }
+
+        if (!response.ok) {
+          throw Error(`${response.statusText}: ${response.body}`);
         }
-        return response.text().then(function (body) {
-          return jsyaml.load(body);
-        });
+
+        const that = this;
+        return response
+          .text()
+          .then((body) => {
+            return parse(body);
+          })
+          .then(function (config) {
+            if (config.externalConfig) {
+              return that.getConfig(config.externalConfig);
+            }
+            return config;
+          });
       });
     },
     matchesFilter: function (item) {
+      const needle = this.filter?.toLowerCase();
       return (
-        item.name.toLowerCase().includes(this.filter) ||
-        (item.tag && item.tag.toLowerCase().includes(this.filter))
+        item.name.toLowerCase().includes(needle) ||
+        (item.subtitle && item.subtitle.toLowerCase().includes(needle)) ||
+        (item.tag && item.tag.toLowerCase().includes(needle)) ||
+        (item.keywords && item.keywords.toLowerCase().includes(needle))
       );
     },
     navigateToFirstService: function (target) {
@@ -185,6 +273,7 @@ export default {
       }
     },
     filterServices: function (filter) {
+      console.log(filter);
       this.filter = filter;
 
       if (!filter) {
@@ -209,6 +298,20 @@ export default {
         },
       ];
     },
+    handleErrors: function (title, content) {
+      return {
+        message: {
+          title: title,
+          style: "is-danger",
+          content: content,
+        },
+      };
+    },
+    createStylesheet: function (css) {
+      let style = document.createElement("style");
+      style.appendChild(document.createTextNode(css));
+      document.head.appendChild(style);
+    },
   },
 };
 </script>