Mirrors/WGDashboard
1
0
Fork 0
mirror of https://github.com/donaldzou/WGDashboard.git synced 2025-06-28 09:16:55 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

New search bar design

Browse Source
This commit is contained in:
Donald Zou 2024-12-01 01:07:27 +08:00
parent db6e820d1d
commit 7fda58e5c8
2 changed files with 90 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
src/static/app/src/components/configurationComponents/peerList.vue
View File

@ -35,6 +35,7 @@ import dayjs from "dayjs";
import {defineAsyncComponent, ref} from "vue"; import {defineAsyncComponent, ref} from "vue";
import LocaleText from "@/components/text/localeText.vue"; import LocaleText from "@/components/text/localeText.vue";
import PeerRow from "@/components/configurationComponents/peerRow.vue"; import PeerRow from "@/components/configurationComponents/peerRow.vue";
import {GetLocale} from "@/utilities/locale.js";
export default { export default {
name: "peerList", name: "peerList",
components: { components: {
@ -148,7 +149,9 @@ export default {
}, },
deleteConfiguration: { deleteConfiguration: {
modalOpen: false modalOpen: false
} },
searchStringTimeout: undefined,
searchString: "",
} }
}, },
mounted() { mounted() {
@ -194,6 +197,18 @@ export default {
this.configurationToggling = false; this.configurationToggling = false;
}) })
}, },
debounce(){
if (!this.searchStringTimeout){
this.searchStringTimeout = setTimeout(() => {
this.wireguardConfigurationStore.searchString = this.searchString;
}, 300)
}else{
clearTimeout(this.searchStringTimeout)
this.searchStringTimeout = setTimeout(() => {
this.wireguardConfigurationStore.searchString = this.searchString;
}, 300)
}
},
getPeers(id = this.$route.params.id){ getPeers(id = this.$route.params.id){
fetchGet("/api/getWireguardConfigurationInfo", fetchGet("/api/getWireguardConfigurationInfo",
{ {
@ -372,6 +387,9 @@ export default {
} }
} }
}, },
searchBarPlaceholder(){
return GetLocale("Search Peers...")
},
searchPeers(){ searchPeers(){
const fuse = new Fuse(this.configurationPeers, { const fuse = new Fuse(this.configurationPeers, {
keys: ["name", "id", "allowed_ip"] keys: ["name", "id", "allowed_ip"]
@ -426,7 +444,7 @@ export default {
</div> </div>
</div> </div>
<div class="ms-sm-auto d-flex gap-2 flex-column"> <div class="ms-sm-auto d-flex gap-2 flex-column">
<div class="card rounded-3 bg-transparent shadow-sm"> <div class="card rounded-3 bg-transparent ">
<div class="card-body py-2 d-flex align-items-center"> <div class="card-body py-2 d-flex align-items-center">
<small class="text-muted"> <small class="text-muted">
<LocaleText t="Status"></LocaleText> <LocaleText t="Status"></LocaleText>
@ -454,28 +472,23 @@ export default {
<div class="d-flex gap-2"> <div class="d-flex gap-2">
<RouterLink <RouterLink
to="create" to="create"
class="titleBtn py-2 text-decoration-none btn text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle shadow-sm"> class="titleBtn py-2 text-decoration-none btn text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle ">
<i class="bi bi-plus-lg me-2"></i> <i class="bi bi-plus-lg me-2"></i>
<LocaleText t="Peer"></LocaleText> <LocaleText t="Peer"></LocaleText>
</RouterLink> </RouterLink>
<button class="titleBtn py-2 text-decoration-none btn text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle shadow-sm" <button class="titleBtn py-2 text-decoration-none btn text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle "
@click="editConfiguration.modalOpen = true" @click="editConfiguration.modalOpen = true"
type="button" aria-expanded="false"> type="button" aria-expanded="false">
<i class="bi bi-gear-fill me-2"></i> <i class="bi bi-gear-fill me-2"></i>
<LocaleText t="Configuration Settings"></LocaleText> <LocaleText t="Configuration Settings"></LocaleText>
</button> </button>
<!-- <button-->
<!-- class="titleBtn btn text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle shadow-sm py-2">-->
<!-- <i class="bi bi-download me-2"></i>-->
<!-- <LocaleText t="Download All"></LocaleText>-->
<!-- </button>-->
</div> </div>
</div> </div>
</div> </div>
<hr> <hr>
<div class="row mt-3 gy-2 gx-2 mb-2"> <div class="row mt-3 gy-2 gx-2 mb-2">
<div class="col-12 col-lg-3"> <div class="col-12 col-lg-3">
<div class="card rounded-3 bg-transparent shadow-sm h-100"> <div class="card rounded-3 bg-transparent h-100">
<div class="card-body py-2 d-flex flex-column justify-content-center"> <div class="card-body py-2 d-flex flex-column justify-content-center">
<p class="mb-0 text-muted"><small> <p class="mb-0 text-muted"><small>
<LocaleText t="Address"></LocaleText> <LocaleText t="Address"></LocaleText>
@ -485,7 +498,7 @@ export default {
</div> </div>
</div> </div>
<div class="col-12 col-lg-3"> <div class="col-12 col-lg-3">
<div class="card rounded-3 bg-transparent shadow-sm h-100"> <div class="card rounded-3 bg-transparent h-100">
<div class="card-body py-2 d-flex flex-column justify-content-center"> <div class="card-body py-2 d-flex flex-column justify-content-center">
<p class="mb-0 text-muted"><small> <p class="mb-0 text-muted"><small>
<LocaleText t="Listen Port"></LocaleText> <LocaleText t="Listen Port"></LocaleText>
@ -495,7 +508,7 @@ export default {
</div> </div>
</div> </div>
<div style="word-break: break-all" class="col-12 col-lg-6"> <div style="word-break: break-all" class="col-12 col-lg-6">
<div class="card rounded-3 bg-transparent shadow-sm h-100"> <div class="card rounded-3 bg-transparent h-100">
<div class="card-body py-2 d-flex flex-column justify-content-center"> <div class="card-body py-2 d-flex flex-column justify-content-center">
<p class="mb-0 text-muted"><small> <p class="mb-0 text-muted"><small>
<LocaleText t="Public Key"></LocaleText> <LocaleText t="Public Key"></LocaleText>
@ -507,7 +520,7 @@ export default {
</div> </div>
<div class="row gx-2 gy-2 mb-2"> <div class="row gx-2 gy-2 mb-2">
<div class="col-12 col-lg-3"> <div class="col-12 col-lg-3">
<div class="card rounded-3 bg-transparent shadow-sm h-100"> <div class="card rounded-3 bg-transparent h-100">
<div class="card-body d-flex"> <div class="card-body d-flex">
<div> <div>
<p class="mb-0 text-muted"><small> <p class="mb-0 text-muted"><small>
@ -522,7 +535,7 @@ export default {
</div> </div>
</div> </div>
<div class="col-12 col-lg-3"> <div class="col-12 col-lg-3">
<div class="card rounded-3 bg-transparent shadow-sm h-100"> <div class="card rounded-3 bg-transparent h-100">
<div class="card-body d-flex"> <div class="card-body d-flex">
<div> <div>
<p class="mb-0 text-muted"><small> <p class="mb-0 text-muted"><small>
@ -535,7 +548,7 @@ export default {
</div> </div>
</div> </div>
<div class="col-12 col-lg-3"> <div class="col-12 col-lg-3">
<div class="card rounded-3 bg-transparent shadow-sm h-100"> <div class="card rounded-3 bg-transparent h-100">
<div class="card-body d-flex"> <div class="card-body d-flex">
<div> <div>
<p class="mb-0 text-muted"><small> <p class="mb-0 text-muted"><small>
@ -548,7 +561,7 @@ export default {
</div> </div>
</div> </div>
<div class="col-12 col-lg-3"> <div class="col-12 col-lg-3">
<div class="card rounded-3 bg-transparent shadow-sm h-100"> <div class="card rounded-3 bg-transparent h-100">
<div class="card-body d-flex"> <div class="card-body d-flex">
<div> <div>
<p class="mb-0 text-muted"><small> <p class="mb-0 text-muted"><small>
@ -563,7 +576,7 @@ export default {
</div> </div>
<div class="row gx-2 gy-2 mb-3"> <div class="row gx-2 gy-2 mb-3">
<div class="col-12 col-lg-6"> <div class="col-12 col-lg-6">
<div class="card rounded-3 bg-transparent shadow-sm" style="height: 270px"> <div class="card rounded-3 bg-transparent " style="height: 270px">
<div class="card-header bg-transparent border-0"> <div class="card-header bg-transparent border-0">
<small class="text-muted"> <small class="text-muted">
<LocaleText t="Peers Data Usage"></LocaleText> <LocaleText t="Peers Data Usage"></LocaleText>
@ -577,7 +590,7 @@ export default {
</div> </div>
</div> </div>
<div class="col-sm col-lg-3"> <div class="col-sm col-lg-3">
<div class="card rounded-3 bg-transparent shadow-sm" style="height: 270px"> <div class="card rounded-3 bg-transparent " style="height: 270px">
<div class="card-header bg-transparent border-0"><small class="text-muted"> <div class="card-header bg-transparent border-0"><small class="text-muted">
<LocaleText t="Real Time Received Data Usage"></LocaleText> <LocaleText t="Real Time Received Data Usage"></LocaleText>
</small></div> </small></div>
@ -591,7 +604,7 @@ export default {
</div> </div>
</div> </div>
<div class="col-sm col-lg-3"> <div class="col-sm col-lg-3">
<div class="card rounded-3 bg-transparent shadow-sm" style="height: 270px"> <div class="card rounded-3 bg-transparent " style="height: 270px">
<div class="card-header bg-transparent border-0"><small class="text-muted"> <div class="card-header bg-transparent border-0"><small class="text-muted">
<LocaleText t="Real Time Sent Data Usage"></LocaleText> <LocaleText t="Real Time Sent Data Usage"></LocaleText>
</small></div> </small></div>
@ -606,7 +619,7 @@ export default {
</div> </div>
</div> </div>
<hr> <hr>
<div class="mb-3"> <div style="margin-bottom: 80px">
<PeerSearch <PeerSearch
@jobsAll="this.peerScheduleJobsAll.modalOpen = true" @jobsAll="this.peerScheduleJobsAll.modalOpen = true"
@jobLogs="this.peerScheduleJobsLogs.modalOpen = true" @jobLogs="this.peerScheduleJobsLogs.modalOpen = true"
@ -629,8 +642,31 @@ export default {
></Peer> ></Peer>
</div> </div>
</TransitionGroup> </TransitionGroup>
</div> </div>
<div class="fixed-bottom w-100 bottom-0 z-2 animate__animated animate__slideInUp" style="z-index: 1; animation-delay: 0.5s">
<div class="container-fluid">
<div class="row g-0">
<div class="col-md-3 col-lg-2"></div>
<div class="col-md-9 col-lg-10 d-flex justify-content-center py-2">
<div class="rounded-3 p-2 border shadow searchPeersContainer">
<div class="d-flex gap-3 align-items-center ps-2">
<h6 class="mb-0 ms-auto">
<label for="searchPeers">
<i class="bi bi-search"></i>
</label>
</h6>
<input class="form-control rounded-3 bg-secondary-subtle border-1 border-secondary-subtle "
:placeholder="searchBarPlaceholder"
id="searchPeers"
@keyup="this.debounce()"
v-model="this.searchString">
</div>
</div>
</div>
</div>
</div>
</div>
<Transition name="zoom"> <Transition name="zoom">
<PeerSettings v-if="this.peerSetting.modalOpen" <PeerSettings v-if="this.peerSetting.modalOpen"
key="settings" key="settings"
@ -733,4 +769,15 @@ th, td{
flex-basis: 100%; flex-basis: 100%;
} }
} }
.searchPeersContainer{
width: 100%;
backdrop-filter: blur(10px);
}
@media screen and (min-width: 768px){
.searchPeersContainer{
width: 400px;
}
}
</style> </style>

44
src/static/app/src/components/configurationComponents/peerSearch.vue
View File

@ -89,30 +89,30 @@ export default {
</script> </script>
<template> <template>
<div class="d-flex flex-column gap-2 mb-3"> <div class="d-flex flex-column gap-2 my-4">
<div class="d-flex gap-3 align-items-center"> <!-- <div class="d-flex gap-3 align-items-center">-->
<h6 class="mb-0 ms-auto"> <!-- <h6 class="mb-0 ms-auto">-->
<label for="searchPeers"> <!-- <label for="searchPeers">-->
<i class="bi bi-search"></i> <!-- <i class="bi bi-search"></i>-->
</label> <!-- </label>-->
</h6> <!-- </h6>-->
<input class="form-control form-control-sm rounded-3 bg-secondary-subtle border-1 border-secondary-subtle shadow-sm" <!-- <input class="form-control form-control-sm rounded-3 bg-secondary-subtle border-1 border-secondary-subtle "-->
:placeholder="searchBarPlaceholder" <!-- :placeholder="searchBarPlaceholder"-->
id="searchPeers" <!-- id="searchPeers"-->
@keyup="this.debounce()" <!-- @keyup="this.debounce()"-->
v-model="this.searchString"> <!-- v-model="this.searchString">-->
</div> <!-- </div>-->
<div class="d-flex gap-2 z-3 peerSearchContainer"> <div class="d-flex gap-2 peerSearchContainer">
<div class="dropdown"> <div class="dropdown">
<button <button
data-bs-toggle="dropdown" data-bs-toggle="dropdown"
class="btn w-100 btn-sm text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle shadow-sm position-relative"> class="btn w-100 btn-sm text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle position-relative">
<i class="bi bi-sort-up me-2"></i> <i class="bi bi-sort-up me-2"></i>
<LocaleText t="Sort By"></LocaleText> <LocaleText t="Sort By"></LocaleText>
<span class="badge text-bg-primary ms-2">{{this.sort[store.Configuration.Server.dashboard_sort]}}</span> <span class="badge text-bg-primary ms-2">{{this.sort[store.Configuration.Server.dashboard_sort]}}</span>
</button> </button>
<ul class="dropdown-menu rounded-3 shadow"> <ul class="dropdown-menu rounded-3 ">
<li v-for="(value, key) in this.sort" > <li v-for="(value, key) in this.sort" >
<button class="dropdown-item d-flex align-items-center" @click="this.updateSort(key)"> <button class="dropdown-item d-flex align-items-center" @click="this.updateSort(key)">
<small> <small>
@ -129,12 +129,12 @@ export default {
<div class="dropdown"> <div class="dropdown">
<button <button
data-bs-toggle="dropdown" data-bs-toggle="dropdown"
class="btn btn-sm w-100 text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle shadow-sm position-relative"> class="btn btn-sm w-100 text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle position-relative">
<i class="bi bi-arrow-repeat me-2"></i> <i class="bi bi-arrow-repeat me-2"></i>
<LocaleText t="Refresh Interval"></LocaleText> <LocaleText t="Refresh Interval"></LocaleText>
<span class="badge text-bg-primary ms-2">{{this.interval[store.Configuration.Server.dashboard_refresh_interval]}}</span> <span class="badge text-bg-primary ms-2">{{this.interval[store.Configuration.Server.dashboard_refresh_interval]}}</span>
</button> </button>
<ul class="dropdown-menu rounded-3 shadow"> <ul class="dropdown-menu rounded-3 ">
<li v-for="(value, key) in this.interval" > <li v-for="(value, key) in this.interval" >
<button class="dropdown-item d-flex align-items-center" @click="this.updateRefreshInterval(key)"> <button class="dropdown-item d-flex align-items-center" @click="this.updateRefreshInterval(key)">
<small> <small>
@ -149,17 +149,17 @@ export default {
</ul> </ul>
</div> </div>
<button class="btn btn-sm text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle shadow-sm ms-lg-auto" <button class="btn btn-sm text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle ms-lg-auto"
@click="this.downloadAllPeer()"> @click="this.downloadAllPeer()">
<i class="bi bi-download me-2"></i> <i class="bi bi-download me-2"></i>
<LocaleText t="Download All"></LocaleText> <LocaleText t="Download All"></LocaleText>
</button> </button>
<button class="btn btn-sm text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle shadow-sm" <button class="btn btn-sm text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle "
@click="this.$emit('selectPeers')"> @click="this.$emit('selectPeers')">
<i class="bi bi-check2-all me-2"></i> <i class="bi bi-check2-all me-2"></i>
<LocaleText t="Select Peers"></LocaleText> <LocaleText t="Select Peers"></LocaleText>
</button> </button>
<button class="btn btn-sm text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle shadow-sm" <button class="btn btn-sm text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle "
@click="this.$emit('jobsAll')" @click="this.$emit('jobsAll')"
type="button" aria-expanded="false"> type="button" aria-expanded="false">
<i class="bi bi-person-walking me-2"></i> <i class="bi bi-person-walking me-2"></i>
@ -206,7 +206,7 @@ export default {
} }
button{ .peerSearchContainer > button, .peerSearchContainer .dropdown > button{
text-align: left; text-align: left;
display: flex; display: flex;
align-items: center; align-items: center;