new: [website] search bar in config page

pull/654/head
David Cruciani 2024-02-09 09:20:19 +01:00
parent 42996e8b85
commit caf3c6f3c1
No known key found for this signature in database
GPG Key ID: 8690CDE1E3994B9B
1 changed files with 26 additions and 4 deletions

View File

@ -6,17 +6,24 @@
{% block content %} {% block content %}
<div id="top"> <h1>Modules Config</h1> </div> <div id="top"> <h1>Modules Config</h1> </div>
<small>[[modules_config.length]] modules found</small>
<hr> <hr>
<div style="width:50%; transform: translate(50%, 0);">
<div>
<input type="search" @input="onInput" id="search_modules" placeholder="Search modules" autofocus class="form-control" style="border-radius: 5px;" />
</div>
</div>
<br> <br>
<div class="row"> <div class="row" style="margin-bottom: 100px;">
<div class="col" style="flex: 0 0 50%"> <div class="col" style="flex: 0 0 50%">
<div class="list-group"> <div class="list-group">
<div v-for="module in modules_config" style="display:flex; "> <div v-for="module in modules_config" style="display:flex; ">
<input v-if="module.is_active || module.is_active == null" type="checkbox" style="margin-right: 5px;" checked @click="change_status(module)"> <input v-if="module.is_active || module.is_active == null" type="checkbox" style="margin-right: 5px;" checked @click="change_status(module)">
<input v-else type="checkbox" style="margin-right: 5px;" @click="change_status(module)"> <input v-else type="checkbox" style="margin-right: 5px;" @click="change_status(module)">
<a class="list-group-item list-group-item-action" style="border-radius: 10px;" @click="display_config(module)"> <a class="list-group-item list-group-item-action" style="border-radius: 10px;" :title="module.description" @click="display_config(module)">
[[module.name]] [[module.name]]
<i v-if="!module.config.length" style="color: brown;">No config</i> <i v-if="!module.config.length" style="color: brown;">No config</i>
</a> </a>
@ -60,11 +67,13 @@
setup() { setup() {
const modules_config = ref({}) const modules_config = ref({})
const current_config = ref({}) const current_config = ref({})
let loc_modules = {}
async function query_modules(){ async function query_modules(){
let res = await fetch("/modules_config_data") let res = await fetch("/modules_config_data")
let loc = await res.json() let loc = await res.json()
modules_config.value = loc modules_config.value = loc
loc_modules = modules_config.value
} }
query_modules() query_modules()
@ -136,6 +145,18 @@
} }
function onInput(e){
modules_config.value = []
if(e.target.value){
modules_config.value = loc_modules.filter((module) => {
return module.name.toLowerCase().includes(e.target.value.toLowerCase())
})
}else{
modules_config.value = loc_modules
}
}
return { return {
message_list, message_list,
modules_config, modules_config,
@ -144,7 +165,8 @@
close_panel, close_panel,
change_config, change_config,
change_status, change_status,
check_request_on_query check_request_on_query,
onInput
} }
} }
}).mount('.container') }).mount('.container')