Mirrors/WGDashboard
1
0
Fork 0
mirror of https://github.com/donaldzou/WGDashboard.git synced 2025-10-03 07:46:18 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Added a box-shadow

Browse Source
This commit is contained in:
Donald Zou
2025-08-15 18:28:28 +08:00
parent 663c134e60
commit 145c3d8f96
8 changed files with 73 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/static/app/src/App.vue
View File

@@ -19,29 +19,31 @@ const route = useRoute()
</script>
<template>
<div style="z-index: 9999; height: 5px" class="position-absolute loadingBar top-0 start-0"></div>
<nav class="navbar bg-dark sticky-top" data-bs-theme="dark" v-if="!route.meta.hideTopNav">
<div class="container-fluid d-flex text-body align-items-center">
<RouterLink to="/" class="navbar-brand mb-0 h1">
<img src="/img/Logo-2-Rounded-512x512.png" alt="WGDashboard Logo" style="width: 32px">
</RouterLink>
<a role="button" class="navbarBtn text-body"
@click="store.ShowNavBar = !store.ShowNavBar"
style="line-height: 0; font-size: 2rem">
<Transition name="fade2" mode="out-in">
<i class="bi bi-list" v-if="!store.ShowNavBar"></i>
<i class="bi bi-x-lg" v-else></i>
<div class="h-100">
<div style="z-index: 9999; height: 5px" class="position-absolute loadingBar top-0 start-0"></div>
<nav class="navbar bg-dark sticky-top" data-bs-theme="dark" v-if="!route.meta.hideTopNav">
<div class="container-fluid d-flex text-body align-items-center">
<RouterLink to="/" class="navbar-brand mb-0 h1">
<img src="/img/Logo-2-Rounded-512x512.png" alt="WGDashboard Logo" style="width: 32px">
</RouterLink>
<a role="button" class="navbarBtn text-body"
@click="store.ShowNavBar = !store.ShowNavBar"
style="line-height: 0; font-size: 2rem">
<Transition name="fade2" mode="out-in">
<i class="bi bi-list" v-if="!store.ShowNavBar"></i>
<i class="bi bi-x-lg" v-else></i>
</Transition>
</a>
</div>
</nav>
<Suspense>
<RouterView v-slot="{ Component }">
<Transition name="app" mode="out-in" type="transition" appear>
<Component :is="Component"></Component>
</Transition>
</a>
</div>
</nav>
<Suspense>
<RouterView v-slot="{ Component }">
<Transition name="app" mode="out-in" type="transition" appear>
<Component :is="Component"></Component>
</Transition>
</RouterView>
</Suspense>
</RouterView>
</Suspense>
</div>
</template>
<style scoped>

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

@@ -215,7 +215,6 @@ watch(() => route.query.id, (newValue) => {
<h1 class="mb-0 display-4"><samp>{{configurationInfo.Name}}</samp></h1>
</div>
</div>
<div class="ms-sm-auto d-flex gap-2 flex-column">
<div class="card rounded-3 bg-transparent ">
<div class="card-body py-2 d-flex align-items-center">
@@ -238,7 +237,6 @@ watch(() => route.query.id, (newValue) => {
@change="toggleConfiguration()"
v-model="configurationInfo.Status">
</div>
</div>
</div>
<div class="d-flex gap-2">

26
src/static/app/src/components/configurationList.vue
View File

@@ -28,27 +28,7 @@ export default {
searchKey: ""
}
},
async mounted() {
// if (!window.localStorage.getItem('ConfigurationListSort')){
// window.localStorage.setItem('ConfigurationListSort', JSON.stringify(this.currentSort))
// }else{
// this.currentSort = JSON.parse(window.localStorage.getItem('ConfigurationListSort'))
// }
//
// if (!window.localStorage.getItem('ConfigurationListDisplay')){
// window.localStorage.setItem('ConfigurationListDisplay', this.currentDisplay)
// }else{
// this.currentDisplay = window.localStorage.getItem('ConfigurationListDisplay')
// }
await this.wireguardConfigurationsStore.getConfigurations();
this.configurationLoaded = true;
this.wireguardConfigurationsStore.ConfigurationListInterval = setInterval(() => {
this.wireguardConfigurationsStore.getConfigurations()
}, 10000)
},
beforeUnmount() {
clearInterval(this.wireguardConfigurationsStore.ConfigurationListInterval)
},
@@ -102,7 +82,7 @@ export default {
</div>
<Transition name="fade">
<div class="text-body filter mb-3 d-flex gap-2 flex-column flex-md-row" v-if="this.configurationLoaded">
<div class="text-body filter mb-3 d-flex gap-2 flex-column flex-md-row" v-if="this.wireguardConfigurationsStore.ConfigurationLoaded">
<div class="d-flex align-items-center gap-3 align-items-center mb-3 mb-md-0">
<small class="text-muted">
<LocaleText t="Sort By"></LocaleText>
@@ -152,14 +132,14 @@ export default {
<TransitionGroup name="fade">
<p class="text-muted col-12"
key="noConfiguration"
v-if="this.configurationLoaded && this.wireguardConfigurationsStore.Configurations.length === 0">
v-if="this.wireguardConfigurationsStore.ConfigurationLoaded && this.wireguardConfigurationsStore.Configurations.length === 0">
<LocaleText t="You don't have any WireGuard configurations yet. Please check the configuration folder or change it in Settings. By default the folder is /etc/wireguard."></LocaleText>
</p>
<ConfigurationCard
:display="this.wireguardConfigurationsStore.CurrentDisplay"
v-for="(c, index) in configurations"
:delay="index*0.03 + 's'"
v-else-if="this.configurationLoaded"
v-else-if="this.wireguardConfigurationsStore.ConfigurationLoaded"
:key="c.Name" :c="c"></ConfigurationCard>
</TransitionGroup>
</div>

10
src/static/app/src/components/navbar.vue
View File

@@ -33,8 +33,9 @@ export default {
return undefined
}
},
mounted() {
fetchGet("/api/getDashboardUpdate", {}, (res) => {
async mounted() {
await this.wireguardConfigurationsStore.getConfigurations();
await fetchGet("/api/getDashboardUpdate", {}, (res) => {
if (res.status){
if (res.data){
this.updateAvailable = true
@@ -46,12 +47,15 @@ export default {
console.log(`Failed to get update: ${res.message}`)
}
})
this.wireguardConfigurationsStore.ConfigurationListInterval = setInterval(() => {
this.wireguardConfigurationsStore.getConfigurations()
}, 10000)
}
}
</script>
<template>
<div class="col-md-3 col-lg-2 d-md-block p-2 navbar-container"
<div class="col-md-3 col-lg-2 d-md-block p-2 navbar-container bg-transparent"
:class="{active: this.dashboardConfigurationStore.ShowNavBar}"
:data-bs-theme="dashboardConfigurationStore.Configuration.Server.dashboard_theme"
>

37
src/static/app/src/components/protocolBadge.vue
View File

@@ -1,21 +1,44 @@
<script setup>
import LocaleText from "@/components/text/localeText.vue";
import {onMounted, ref} from "vue";
const props = defineProps({
protocol: String,
mini: false
})
const blur = ref(undefined)
onMounted(() => {
setTimeout(() => {
blur.value = !props.mini
}, 500)
})
</script>
<template>
<span class="badge wireguardBg rounded-3 shadow" v-if="protocol === 'wg'">
WireGuard <LocaleText t="Configuration" v-if="!mini"></LocaleText>
</span>
<span class="badge amneziawgBg rounded-3 shadow" v-else-if="protocol === 'awg'">
AmneziaWG <LocaleText t="Configuration" v-if="!mini"></LocaleText>
</span>
<div class="position-relative">
<span class="badge wireguardBg rounded-3 shadow z-1"
:class="{blur: blur === true}"
v-if="protocol === 'wg'">
WireGuard <LocaleText t="Configuration" v-if="!mini"></LocaleText>
</span>
<span class="badge amneziawgBg rounded-3 shadow"
:class="{blur: blur === true}"
v-else-if="protocol === 'awg'">
AmneziaWG <LocaleText t="Configuration" v-if="!mini"></LocaleText>
</span>
</div>
</template>
<style scoped>
.wireguardBg.blur{
box-shadow: rgba(255, 56, 56, 1) 3rem 1rem 8rem 10px !important;
transition: box-shadow 1s ease-in-out;
}
.amneziawgBg.blur{
box-shadow: rgb(227, 142, 65) 3rem 1rem 8rem 10px !important;
transition: box-shadow 1s ease-in-out;
}
</style>

7
src/static/app/src/stores/WireguardConfigurationsStore.js
View File

@@ -6,6 +6,7 @@ import {GetLocale} from "@/utilities/locale.js";
export const WireguardConfigurationsStore = defineStore('WireguardConfigurationsStore', {
state: () => ({
Configurations: [],
ConfigurationLoaded: false,
searchString: "",
ConfigurationListInterval: undefined,
SortOptions: {
@@ -92,8 +93,10 @@ export const WireguardConfigurationsStore = defineStore('WireguardConfigurations
actions: {
async getConfigurations(){
await fetchGet("/api/getWireguardConfigurations", {}, (res) => {
if (res.status) this.Configurations = res.data
// this.Configurations = []
if (res.status) {
this.Configurations = res.data
}
this.ConfigurationLoaded = true
});
},

4
src/static/app/src/views/configuration.vue
View File

@@ -5,11 +5,11 @@ export default {
</script>
<template>
<div class="mt-md-5 mt-3 text-body">
<div class="mt-md-5 mt-3 text-body position-relative">
<RouterView v-slot="{ Component, route }">
<Transition name="fade2" mode="out-in">
<Suspense>
<Component :is="Component" :key="route.path"></Component>
<Component :is="Component" :key="route.path" class="z-1"></Component>
</Suspense>
</Transition>
</RouterView>

2
src/static/app/src/views/index.vue
View File

@@ -22,7 +22,7 @@ export default {
<div class="container-fluid flex-grow-1 main" :data-bs-theme="this.dashboardConfigurationStore.Configuration.Server.dashboard_theme">
<div class="row h-100">
<Navbar></Navbar>
<main class="col-md-9 col-lg-10 overflow-y-scroll mb-0 pt-2">
<main class="col-md-9 col-lg-10 overflow-y-scroll mb-0 pt-2 position-relative">
<Suspense>
<RouterView v-slot="{Component}">
<Transition name="fade2" mode="out-in" appear>