Search is automatically reset when an item is opened

2021-04-03 09:08:28 +01:00 · 2021-04-03 09:08:28 +01:00 · fb60e63252
parent dfdef736e2
commit fb60e63252
9 changed files with 84 additions and 42 deletions
--- a/public/index.html
+++ b/public/index.html
@ -1,17 +1,22 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>Alicia App | My dashboard of links and things</title>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but panel doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
-</html>
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+  <title>Server Dashboard</title>
+</head>
+
+<body>
+  <!-- Devices without JS enabled -->
+  <noscript>
+    <strong>JavaScript is required to run this app.</strong>
+  </noscript>
+
+  <!-- built files will be auto injected -->
+  <div id="app"></div>
+</body>
+
+</html>
--- a/src/components/FilterTile.vue
+++ b/src/components/FilterTile.vue
@ -17,6 +17,7 @@
      <div class="space-filler">
        <span>hello</span>
        <span>world</span>
+        <i class="fas fa-rocket" style="color: red;"></i>
      </div>
      <KeyboardShortcutInfo />
  </section>
@ -47,7 +48,7 @@ export default {
  },
  mounted() {
    window.addEventListener('keyup', (event) => {
-      const { key } = event;
+      const { key, keyCode } = event;
      if (/^[a-zA-Z]$/.test(key) && !document.activeElement.id) {
        try {
          this.input += key;
@ -56,6 +57,8 @@ export default {
        } catch (e) {
          // Do nothing
        }
+      } else if (keyCode === 27) {
+        this.clearFilterInput();
      }
    });
  },
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@ -22,13 +22,15 @@ export default {
 };
 </script>

-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">

 footer {
  padding: 0.5rem;
  text-align: center;
  color: #5e6474;
+  opacity: 0.5;
+  background: #05070e;
+  margin-top: 1rem;
 }

 footer a{
--- a/src/components/Item.vue
+++ b/src/components/Item.vue
@ -1,6 +1,6 @@
 <template>
    <el-tooltip placement="bottom" effect="dark" :content="description" :disabled="!description">
-        <a :href="url"  :class="`item ${!icon && !svg? 'short': ''}`"
+        <a :href="url"  :class="`item ${!icon? 'short': ''}`" v-on:click="$emit('itemClicked')"
            tabindex="0" target="_blank" rel="noopener noreferrer">
            <div class="tile-title" :id="`tile-${id}`">
                <span class="text">{{ title }}</span>
@ -50,6 +50,9 @@ export default {
    };
  },
  methods: {
+    itemOpened() {
+      this.$emit('itemClicked');
+    },
    isUrl(str) {
      const pattern = new RegExp(/(http|https):\/\/(\w+:{0,1}\w*)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%!\-/]))?/);
      return pattern.test(str);
--- a/src/components/ItemGroup.vue
+++ b/src/components/ItemGroup.vue
@ -22,6 +22,7 @@
        :icon="item.icon"
        :iconType="item.iconType"
        :svg="item.svg"
+        @itemClicked="$emit('itemClicked')"
      />
    </div>
  </Collapsable>
--- a/src/components/KeyboardShortcutInfo.vue
+++ b/src/components/KeyboardShortcutInfo.vue
@ -48,6 +48,7 @@ export default {
    if (!shouldHide) {
      window.setTimeout(() => { this.shouldHide = shouldHide; }, 3000);
      window.addEventListener('keyup', (ev) => {
+        // User pressed the escape key. Trigger permanent dismissal of dialog
        if (ev.keyCode === 27) this.hideWelcomeHelper();
      });
    } else { // Meh, component not needed.
--- a/src/data/conf.yml
+++ b/src/data/conf.yml
@ -44,6 +44,9 @@ sections:
    icon: networking/wireguard.png
    url: https://192.168.1.1/ui/wireguard/general
 - name: DNS Device
+  displayData:
+    collapsed: false
+    rows: 2
  items:
  - title: Pi-Hole
    description: DNS settings for ad & tracker blocking
@ -93,25 +96,6 @@ sections:
    description: Data visualised on dashboards
    icon: networking/grafana.png
    url: http://192.168.130.2:8091/
- name: Other Devices
-  items:
-  - title: Modem
-    description: ISP Router Modem Combo
-    icon: ''
-    url: http://192.168.1.5
-  - title: Wireless Access Point
-    description: View clients connected to WiFi
-    icon: ''
-    url: http://192.168.1.109/info.php
-  - title: Fing
-    description: Monitor connectivity issues, ISP quality, health checks and troubleshooting
-    provider: Fing
-    icon: ''
-    url: https://app.fing.com/
-  - title: Switch
-    description: Manage VLANs on Ubiquity Ethernet switch
-    icon: ''
-    url: "/"
 - name: External Services
  items:
  - title: DuckDNS
@ -138,6 +122,25 @@ sections:
    description: Broadband internet provider
    icon: networking/vodafone.png
    url: https://myaccount.vodafone.co.uk/
+- name: Other Devices
+  items:
+  - title: Modem
+    description: ISP Router Modem Combo
+    icon: ''
+    url: http://192.168.1.5
+  - title: Wireless Access Point
+    description: View clients connected to WiFi
+    icon: ''
+    url: http://192.168.1.109/info.php
+  - title: Fing
+    description: Monitor connectivity issues, ISP quality, health checks and troubleshooting
+    provider: Fing
+    icon: ''
+    url: https://app.fing.com/
+  - title: Switch
+    description: Manage VLANs on Ubiquity Ethernet switch
+    icon: ''
+    url: "/"
 - name: External Utilities
  displayData:
    collapsed: true
--- a/src/router.js
+++ b/src/router.js
@ -4,20 +4,35 @@ import Home from './views/Home.vue';

 Vue.use(Router);

-export default new Router({
+const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
+      meta: {
+        title: 'Home Page',
+        metaTags: [
+          {
+            name: 'description',
+            content: 'A simple static homepage for you\'re server',
+          },
+        ],
+      },
    },
    {
      path: '/about',
      name: 'about',
-      // route level code-splitting
-      // this generates a separate chunk (about.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
    },
  ],
 });
+
+const defaultTitle = 'Speed Dial';
+router.afterEach((to) => {
+  Vue.nextTick(() => {
+    document.title = to.meta.title || defaultTitle;
+  });
+});
+
+export default router;
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@ -1,7 +1,7 @@
 <template>
  <div class="home">
    <Header :pageInfo="getPageInfo(pageInfo)" />
-    <FilterTile @user-is-searchin="searching" class="filter-container" />
+    <FilterTile @user-is-searchin="searching" class="filter-container" ref="filterComp" />
    <div class="item-group-container">
      <ItemGroup
        v-for="(section, index) in sections"
@ -10,6 +10,7 @@
        :displayData="getDisplayData(section)"
        :groupId="`section-${index}`"
        :items="filterTiles(section.items)"
+         @itemClicked="finishedSearching()"
      />
    </div>
  </div>
@ -35,6 +36,9 @@ export default {
    searchTile: '',
  }),
  methods: {
+    finishedSearching() {
+      this.$refs.filterComp.clearFilterInput();
+    },
    /* Returns true if the user is currently searching */
    searching(searchTile) {
      this.searchTile = searchTile;
@ -74,6 +78,11 @@ export default {
      return defaults;
    },
  },
+  mounted() {
+    const fontAwesomeScript = document.createElement('script');
+    fontAwesomeScript.setAttribute('src', 'https://kit.fontawesome.com/def7c3ce4c.js');
+    document.head.appendChild(fontAwesomeScript);
+  },
 };
 </script>