Mirrors/WGDashboard
1
0
Fork 0
mirror of https://github.com/donaldzou/WGDashboard.git synced 2025-08-28 07:51:13 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Job logs api are done, still need to build the UI to view logs

Browse Source
This commit is contained in:
Donald Zou
2024-07-27 18:51:43 -04:00
parent 48dc8033f5
commit b65828416f
8 changed files with 189 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -12,9 +12,24 @@ const store = DashboardConfigurationStore();
</nav>
<Suspense>
<RouterView v-slot="{ Component }">
<Transition name="fade" mode="out-in">
<Transition name="fade2" mode="out-in">
<Component :is="Component"></Component>
</Transition>
</RouterView>
</Suspense>
</template>
</template>
<style scoped>
.app-enter-active,
.app-leave-active {
transition: all 0.3s ease-in-out;
/*position: absolute;*/
/*padding-top: 50px*/
}
.app-enter-from,
.app-leave-to {
transform: translateX(-30px);
opacity: 0;
}
</style>

18
src/static/app/src/components/configurationComponents/peer.vue
View File

@@ -34,9 +34,8 @@ export default {
</script>
<template>
<div class="card shadow-sm rounded-3"
:class="{'border-warning': Peer.restricted}"
>
<div class="card shadow-sm rounded-3 peerCard bg-transparent"
:class="{'border-warning': Peer.restricted}">
<div>
<div v-if="!Peer.restricted" class="card-header bg-transparent d-flex align-items-center gap-2 border-0">
<div class="dot ms-0" :class="{active: Peer.status === 'running'}"></div>
@@ -77,8 +76,7 @@ export default {
<div class="ms-auto px-2 rounded-3 subMenuBtn"
:class="{active: this.subMenuOpened}"
>
<a role="button" class="text-body"
<a role="button" class="text-body"
@click="this.subMenuOpened = true">
<h5 class="mb-0"><i class="bi bi-three-dots"></i></h5>
</a>
@@ -101,7 +99,7 @@ export default {
<style scoped>
.slide-fade-leave-active, .slide-fade-enter-active {
.slide-fade-leave-active, .slide-fade-enter-active{
transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
}
@@ -114,4 +112,12 @@ export default {
.subMenuBtn.active{
background-color: #ffffff20;
}
.peerCard{
transition: box-shadow 0.1s cubic-bezier(1, 0.5, 0.8, 1);
}
.peerCard:hover{
box-shadow: var(--bs-box-shadow) !important;
}
</style>

7
src/static/app/src/components/configurationComponents/peerJobs.vue
View File

@@ -88,7 +88,8 @@ export default {
}))
)
}
}
},
}
</script>
@@ -113,11 +114,11 @@ export default {
<TransitionGroup name="schedulePeerJobTransition" tag="div" class="position-relative">
<SchedulePeerJob
@refresh="(j) => job = j"
@refresh="(j) => this.selectedPeer.jobs[index] = j"
@delete="this.deleteJob(job)"
:dropdowns="this.dropdowns"
:key="job.JobID"
:pjob="job" v-for="(job) in this.selectedPeer.jobs">
:pjob="job" v-for="(job, index) in this.selectedPeer.jobs">
</SchedulePeerJob>
<div class="card" key="none" v-if="this.selectedPeer.jobs.length === 0">

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

@@ -173,6 +173,19 @@ export default {
}, (res) => {
this.configurationInfo = res.data.configurationInfo;
this.configurationPeers = res.data.configurationPeers;
// let modals = [this.peerSetting, this.peerScheduleJobs, this.peerQRCode]
// modals.forEach(x => {
//
// if (x.modalOpen && this.configurationPeers.find(p => p.id === x.selectedPeer.id)){
// x.selectedPeer = this.configurationPeers.find(p => p.id === x.selectedPeer.id)
// console.log(this.configurationPeers.find(p => p.id === x.selectedPeer.id))
// }else{
// x.modalOpen = false
// }
// })
this.configurationPeers.forEach(x => {
x.restricted = false;
})

8
src/static/app/src/components/configurationComponents/peerScheduleJobsComponents/schedulePeerJob.vue
View File

@@ -33,8 +33,9 @@ export default {
deep: true,
immediate: true,
handler(newValue){
console.log(newValue)
this.job = JSON.parse(JSON.stringify(newValue))
if (!this.edit){
this.job = JSON.parse(JSON.stringify(newValue))
}
}
}
},
@@ -47,7 +48,8 @@ export default {
if (res.status){
this.edit = false;
this.store.newMessage("Server", "Job Saved!", "success")
this.$emit("refresh", this.data)
console.log(res.data)
this.$emit("refresh", res.data[0])
this.newJob = false;
}else{
this.store.newMessage("Server", res.message, "danger")

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

@@ -12,7 +12,7 @@ export default {
return {store, wireguardConfigurationStore}
},
props: {
searchString: String,
configuration: Object
},
data(){
@@ -28,10 +28,24 @@ export default {
'10000': '10 Seconds',
'30000': '30 Seconds',
'60000': '1 Minutes'
}
},
searchString: "",
searchStringTimeout: undefined
}
},
methods: {
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)
}
},
updateSort(sort){
fetchPost("/api/updateDashboardConfigurationItem", {
section: "Server",
@@ -68,25 +82,34 @@ export default {
</script>
<template>
<div>
<div class="d-flex gap-2 mb-3 z-3">
<div class="mb-3">
<div class="d-flex gap-2 z-3">
<RouterLink
to="create"
class="text-decoration-none btn btn-primary rounded-3 btn-sm">
<i class="bi bi-plus-lg me-2"></i>Peers
class="text-decoration-none btn text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle shadow-sm">
<i class="bi bi-plus-lg me-2"></i>Peer
</RouterLink>
<!-- <RouterLink-->
<!-- to="jobs"-->
<!-- class="text-decoration-none btn btn-primary rounded-3 btn-sm">-->
<!-- <i class="bi bi-app-indicator me-2"></i>Jobs-->
<!-- </RouterLink>-->
<button class="btn btn-sm btn-primary rounded-3" @click="this.downloadAllPeer()">
<!-- <RouterLink-->
<!-- to="jobs"-->
<!-- class="text-decoration-none btn btn-primary rounded-3 btn-sm">-->
<!-- <i class="bi bi-app-indicator me-2"></i>Jobs-->
<!-- </RouterLink>-->
<button class="btn text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle shadow-sm"
@click="this.downloadAllPeer()">
<i class="bi bi-download me-2"></i> Download All
</button>
<div class="dropdown ms-auto">
<button class="btn btn-secondary btn-sm dropdown-toggle rounded-3" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<div class="d-flex align-items-center ms-auto">
<!-- <label class="d-flex me-2 text-muted" for="searchPeers"><i class="bi bi-search me-1"></i></label>-->
<input class="form-control rounded-3 bg-secondary-subtle border-1 border-secondary-subtle shadow-sm"
placeholder="Search..."
id="searchPeers"
@keyup="this.debounce()"
v-model="this.searchString">
</div>
<div class="dropdown">
<button class="btn dropdown-toggle text-secondary-emphasis bg-secondary-subtle rounded-3 border-1 border-secondary-subtle shadow-sm"
type="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-filter-circle me-2"></i>
Sort
</button>
@@ -101,7 +124,8 @@ export default {
</ul>
</div>
<div class="dropdown">
<button class="btn btn-secondary btn-sm dropdown-toggle rounded-3" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<button class="btn dropdown-toggle text-secondary-emphasis bg-secondary-subtle rounded-3 border-1 border-secondary-subtle shadow-sm"
type="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-arrow-repeat me-2"></i>Refresh Interval
</button>
<ul class="dropdown-menu shadow mt-2 rounded-3">
@@ -113,24 +137,7 @@ export default {
</a></li>
</ul>
</div>
<!-- <button class="btn btn-outline-secondary btn-sm rounded-3" type="button"-->
<!-- @click="this.store.Peers.Selecting = !this.store.Peers.Selecting"-->
<!-- >-->
<!-- <i class="bi bi-app-indicator me-2"></i>-->
<!-- Select-->
<!-- </button>-->
<div class="d-flex align-items-center">
<!-- <label class="d-flex me-2 text-muted" for="searchPeers"><i class="bi bi-search me-1"></i></label>-->
<input class="form-control form-control-sm rounded-3"
placeholder="Search..."
id="searchPeers"
v-model="this.wireguardConfigurationStore.searchString">
</div>
</div>
</div>
</template>

10
src/static/css/dashboard.css
View File

@@ -1097,17 +1097,17 @@ pre.index-alert {
.list-move, /* apply transition to moving elements */
.list-enter-active,
.list-leave-active {
transition: all 0.4s cubic-bezier(0.82, 0.58, 0.17, 0.9);
transition: all 0.5s ease-in-out;
}
.list-leave-active{
position: absolute;
}
/*.list-leave-active{*/
/* position: absolute !important;*/
/*}*/
.list-enter-from,
.list-leave-to {
opacity: 0;
transform: translateY(30px);
transform: scale(1.1);
}
/* ensure leaving items are taken out of layout flow so that moving