devshort

commit 50e585b5e80c6792717176402b974a5f3e1a890a
parent 6922cd484f0e7c750402aee4506910f7f59292d2
Author: Florian <flokX@users.noreply.github.com>
Date:   Wed, 15 Jan 2020 17:20:18 +0100

Rewrite search

Diffstat:
M
admin.php
 | 
4
++--
M
assets/main.js
 | 
24
+++++++++---------------

2 files changed, 11 insertions(+), 17 deletions(-)
diff --git a/admin.php b/admin.php
@@ -114,7 +114,7 @@ if ($config_content["settings"]["custom_links"]) {
                         <div class="card-body">
                             <h5 class="card-title">Search</h5>
                             <form>
-                                <input class="form-control" id="search-bar" type="text">
+                                <input class="form-control" type="text" v-model="search">
                             </form>
                         </div>
                     </div>
@@ -136,7 +136,7 @@ if ($config_content["settings"]["custom_links"]) {
                             <span class="sr-only">Loading...</span>
                         </div>
                     </div>
-                    <chart v-if="loaded" v-for="(stats, name) in dataObject.stats" v-bind:key="name" v-bind:name="name" v-bind:stats="stats"></chart>
+                    <chart v-for="(stats, name) in dataObject.stats" v-bind:key="name" :style="displayStyle(name)" v-bind:name="name" v-bind:stats="stats" v-else></chart>
                 </div>
             </div>
             <p class="text-center d-md-none mt-1 mb-5" id="version-2">powered by <a href="https://github.com/flokX/devShort">devShort</a></p>
diff --git a/assets/main.js b/assets/main.js
@@ -142,7 +142,8 @@ var vm = new Vue({
     el: '#app',
     data: {
         dataObject: [],
-        loaded: false
+        loaded: false,
+        search: ''
     },
     methods: {
         loadData: function (event) {
@@ -160,6 +161,13 @@ var vm = new Vue({
                     vm.dataObject = data
                 });
             this.loaded = true;
+        },
+        displayStyle: function (name) {
+            if (!name.toLowerCase().includes(this.search.toLowerCase())) {
+                return 'display: none;'
+            } else {
+                return 'display: block;'
+            }
         }
     },
     created: function () {
@@ -167,20 +175,6 @@ var vm = new Vue({
     }
 });
 
-/* Provide search functionality */
-var searchBox = document.getElementById('search-bar');
-searchBox.addEventListener('input', function (event) {
-    'use strict';
-    for (let node of chartsDiv.childNodes) {
-        let linkName = node.firstElementChild.innerHTML.toLowerCase();
-        if (linkName.includes(searchBox.value.toLowerCase())) {
-            node.style.display = 'block';
-        } else {
-            node.style.display = 'none';
-        }
-    }
-});
-
 /* Add a new shortlink */
 document.getElementById('add-form').addEventListener('submit', function (event) {
     'use strict';