devshort

Unnamed repository; edit this file 'description' to name the repository.
git clone git://code.clttr.info/devshort.git
Log | Files | Refs | README | LICENSE

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

Rewrite search

Diffstat:
Madmin.php | 4++--
Massets/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';