X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;ds=sidebyside;f=src%2FApp.vue;h=a329775d789f7c9266834fb1f45ffcbef5bb3d7c;hb=ecf664d19b2a46c9d89a9a9c1128e22b7228607a;hp=fda13c31e07ef4cb7bcf5f1e50365d29f8fe4e65;hpb=049610bc9178a57732356801e20488cf669eda5e;p=github%2Fbastienwirtz%2Fhomer.git

diff --git a/src/App.vue b/src/App.vue
index fda13c3..a329775 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' : '',
     ]"
@@ -18,7 +19,10 @@
             </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>
@@ -46,10 +50,10 @@
         <SearchInput
           class="navbar-item is-inline-block-mobile"
           :hotkey="searchHotkey()"
-          @input="filterServices"
+          @input="filterServices($event)"
           @search-focus="showMenu = true"
-          @search-open="navigateToFirstService"
-          @search-cancel="filterServices"
+          @search-open="navigateToFirstService($event?.target?.value)"
+          @search-cancel="filterServices()"
         />
       </Navbar>
     </div>
@@ -61,7 +65,7 @@
           @network-status-update="offline = $event"
         />
 
-        <GetStarted v-if="loaded && !services" />
+        <GetStarted v-if="configurationNeeded" />
 
         <div v-if="!offline">
           <!-- Optional messages -->
@@ -69,8 +73,12 @@
 
           <!-- 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">
+            <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">
@@ -81,7 +89,7 @@
               </h2>
               <Service
                 v-for="(item, index) in group.items"
-                :key="index"
+                :key="`service-${groupIndex}-${index}`"
                 :item="item"
                 :proxy="config.proxy"
                 :class="['column', `is-${12 / config.columns}`]"
@@ -96,8 +104,8 @@
           >
             <div
               :class="['column', `is-${12 / config.columns}`]"
-              v-for="group in services"
-              :key="group.name"
+              v-for="(group, groupIndex) in services"
+              :key="groupIndex"
             >
               <h2 v-if="group.name" class="group-title">
                 <i v-if="group.icon" :class="['fa-fw', group.icon]"></i>
@@ -133,8 +141,8 @@
 </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";
@@ -146,7 +154,7 @@ 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",
@@ -164,6 +172,8 @@ export default {
   data: function () {
     return {
       loaded: false,
+      currentPage: null,
+      configNotFound: false,
       config: null,
       services: null,
       offline: false,
@@ -173,6 +183,11 @@ export default {
       showMenu: false,
     };
   },
+  computed: {
+    configurationNeeded: function () {
+      return (this.loaded && !this.services) || this.configNotFound;
+    },
+  },
   created: async function () {
     this.buildDashboard();
     window.onhashchange = this.buildDashboard;
@@ -185,18 +200,17 @@ export default {
       }
     },
     buildDashboard: async function () {
-      const defaults = jsyaml.load(defaultConfig);
+      const defaults = parse(defaultConfig);
       let config;
       try {
         config = await this.getConfig();
-        const path =
-          window.location.hash.substring(1) != ""
-            ? window.location.hash.substring(1)
-            : null;
+        this.currentPage = window.location.hash.substring(1) || "default";
 
-        if (path) {
-          let pathConfig = await this.getConfig(`assets/${path}.yml`); // the slash (/) is included in the pathname
-          config = Object.assign(config, pathConfig);
+        if (this.currentPage !== "default") {
+          let pageConfig = await this.getConfig(
+            `assets/${this.currentPage}.yml`
+          );
+          config = Object.assign(config, pageConfig);
         }
       } catch (error) {
         console.log(error);
@@ -218,10 +232,9 @@ export default {
     },
     getConfig: function (path = "assets/config.yml") {
       return fetch(path).then((response) => {
-        if (response.redirected) {
-          // This allows to work with authentication proxies.
-          window.location.href = response.url;
-          return;
+        if (response.status == 404 || response.redirected) {
+          this.configNotFound = true;
+          return {};
         }
 
         if (!response.ok) {
@@ -232,7 +245,7 @@ export default {
         return response
           .text()
           .then((body) => {
-            return jsyaml.load(body);
+            return parse(body, {merge: true});
           })
           .then(function (config) {
             if (config.externalConfig) {
@@ -243,10 +256,12 @@ export default {
       });
     },
     matchesFilter: function (item) {
+      const needle = this.filter?.toLowerCase();
       return (
-        item.name.toLowerCase().includes(this.filter) ||
-        (item.subtitle && item.subtitle.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) {
@@ -258,6 +273,7 @@ export default {
       }
     },
     filterServices: function (filter) {
+      console.log(filter);
       this.filter = filter;
 
       if (!filter) {
@@ -267,9 +283,11 @@ export default {
 
       const searchResultItems = [];
       for (const group of this.config.services) {
-        for (const item of group.items) {
-          if (this.matchesFilter(item)) {
-            searchResultItems.push(item);
+        if (group.items !== null) {
+          for (const item of group.items) {
+            if (this.matchesFilter(item)) {
+              searchResultItems.push(item);
+            }
           }
         }
       }