mirror of
https://github.com/donaldzou/WGDashboard.git
synced 2025-07-17 10:36:57 +00:00
Update
This commit is contained in:
Donald Zou
parent
f994e7bfa8
commit
a517f89234
@ -46,7 +46,7 @@ onMounted(() => {
|
||||
getBackup()
|
||||
})
|
||||
|
||||
const emits = defineEmits(["backup"])
|
||||
const emits = defineEmits(["backup", "close"])
|
||||
|
||||
|
||||
|
||||
@ -61,7 +61,7 @@ const emits = defineEmits(["backup"])
|
||||
<h5 class="mb-0">
|
||||
<LocaleText t="Are you sure to delete this configuration?"></LocaleText>
|
||||
</h5>
|
||||
<button type="button" class="btn-close ms-auto" @click="$emit('close')"></button>
|
||||
<button type="button" class="btn-close ms-auto" @click="emits('close')"></button>
|
||||
</div>
|
||||
<div class="card-body px-4 text-muted">
|
||||
<p class="mb-0">
|
||||
|
||||
@ -34,7 +34,7 @@ const resetForm = () => {
|
||||
dataChanged.value = false;
|
||||
Object.assign(data, JSON.parse(JSON.stringify(props.configurationInfo)))
|
||||
}
|
||||
const emit = defineEmits(["changed", "close"])
|
||||
const emit = defineEmits(["changed", "close", "backupRestore", "deleteConfiguration"])
|
||||
const saveForm = () => {
|
||||
saving.value = true
|
||||
fetchPost("/api/updateWireguardConfiguration", data, (res) => {
|
||||
@ -193,13 +193,34 @@ watch(data, () => {
|
||||
<button class="btn bg-secondary-subtle border-secondary-subtle text-secondary-emphasis rounded-3 shadow ms-auto"
|
||||
@click="resetForm()"
|
||||
:disabled="!dataChanged || saving">
|
||||
<i class="bi bi-arrow-clockwise"></i>
|
||||
<i class="bi bi-arrow-clockwise me-2"></i>
|
||||
<LocaleText t="Reset"></LocaleText>
|
||||
</button>
|
||||
<button class="btn bg-primary-subtle border-primary-subtle text-primary-emphasis rounded-3 shadow"
|
||||
:disabled="!dataChanged || saving"
|
||||
@click="saveForm()"
|
||||
>
|
||||
<i class="bi bi-save-fill"></i></button>
|
||||
<i class="bi bi-save-fill me-2"></i>
|
||||
<LocaleText t="Save"></LocaleText>
|
||||
</button>
|
||||
</div>
|
||||
<hr>
|
||||
<h5 class="mb-3">Danger Zone</h5>
|
||||
<div class="d-flex gap-2">
|
||||
<button
|
||||
@click="emit('backupRestore')"
|
||||
style="flex-basis: 100%"
|
||||
class="btn bg-warning-subtle border-warning-subtle text-warning-emphasis rounded-3 ms-auto">
|
||||
<i class="bi bi-copy me-2"></i>
|
||||
<LocaleText t="Backup & Restore"></LocaleText>
|
||||
</button>
|
||||
<button
|
||||
@click="emit('deleteConfiguration')"
|
||||
style="flex-basis: 100%"
|
||||
class="btn bg-danger-subtle border-danger-subtle text-danger-emphasis rounded-3 ms-auto">
|
||||
<i class="bi bi-trash-fill me-2"></i>
|
||||
<LocaleText t="Delete Configuration"></LocaleText>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
@ -45,11 +45,11 @@ export default {
|
||||
<i class="bi bi-arrow-down"></i><strong>
|
||||
{{(Peer.cumu_receive + Peer.total_receive).toFixed(4)}}</strong> GB
|
||||
</span>
|
||||
<span class="text-success">
|
||||
<span class="text-success">
|
||||
<i class="bi bi-arrow-up"></i><strong>
|
||||
{{(Peer.cumu_sent + Peer.total_sent).toFixed(4)}}</strong> GB
|
||||
</span>
|
||||
<span class="text-secondary" v-if="Peer.latest_handshake !== 'No Handshake'">
|
||||
<span class="text-secondary" v-if="Peer.latest_handshake !== 'No Handshake'">
|
||||
<i class="bi bi-arrows-angle-contract"></i>
|
||||
{{getLatestHandshake}} ago
|
||||
</span>
|
||||
|
||||
@ -31,7 +31,7 @@ export default {
|
||||
<div class="peerSettingContainer w-100 h-100 position-absolute top-0 start-0 overflow-y-scroll">
|
||||
<div class="container d-flex h-100 w-100">
|
||||
<div class="m-auto modal-dialog-centered dashboardModal">
|
||||
<div class="card rounded-3 shadow" style="width: 700px">
|
||||
<div class="card rounded-3 shadow" style="width: 900px">
|
||||
<div class="card-header bg-transparent d-flex align-items-center gap-2 border-0 p-4 pb-2">
|
||||
<h4 class="mb-0 fw-normal">
|
||||
<LocaleText t="All Active Jobs"></LocaleText>
|
||||
@ -39,6 +39,12 @@ export default {
|
||||
<button type="button" class="btn-close ms-auto" @click="this.$emit('close')"></button>
|
||||
</div>
|
||||
<div class="card-body px-4 pb-4 pt-2 ">
|
||||
<button class="btn bg-primary-subtle border-1 border-primary-subtle text-primary-emphasis rounded-3 shadow mb-2"
|
||||
|
||||
@click="this.$emit('allLogs')">
|
||||
<i class="bi bi-clock me-2"></i>
|
||||
<LocaleText t="Logs"></LocaleText>
|
||||
</button>
|
||||
<div class="accordion" id="peerJobsLogsModalAccordion" v-if="this.getAllJobs.length > 0">
|
||||
<div class="accordion-item" v-for="(p, index) in this.getAllJobs" :key="p.id">
|
||||
<h2 class="accordion-header">
|
||||
|
||||
@ -34,9 +34,11 @@ Chart.register(
|
||||
import dayjs from "dayjs";
|
||||
import {defineAsyncComponent, ref} from "vue";
|
||||
import LocaleText from "@/components/text/localeText.vue";
|
||||
import PeerRow from "@/components/configurationComponents/peerRow.vue";
|
||||
export default {
|
||||
name: "peerList",
|
||||
components: {
|
||||
PeerRow,
|
||||
DeleteConfiguration:
|
||||
defineAsyncComponent(() => import("@/components/configurationComponents/deleteConfiguration.vue")),
|
||||
ConfigurationBackupRestore:
|
||||
@ -264,7 +266,7 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
configurationSummary(){
|
||||
const k = {
|
||||
return {
|
||||
connectedPeers: this.configurationPeers.filter(x => x.status === "running").length,
|
||||
totalUsage: this.configurationPeers.length > 0 ?
|
||||
this.configurationPeers.filter(x => !x.restricted)
|
||||
@ -276,8 +278,6 @@ export default {
|
||||
this.configurationPeers.filter(x => !x.restricted)
|
||||
.map(x => x.total_sent + x.cumu_sent).reduce((a, b) => a + b, 0).toFixed(4) : 0
|
||||
}
|
||||
|
||||
return k
|
||||
},
|
||||
receiveData(){
|
||||
return this.historyReceiveData
|
||||
@ -416,7 +416,7 @@ export default {
|
||||
|
||||
<template>
|
||||
<div v-if="!this.loading" class="container-md">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="d-flex align-items-sm-center flex-column flex-sm-row gap-3">
|
||||
<div>
|
||||
<small CLASS="text-muted">
|
||||
<LocaleText t="CONFIGURATION"></LocaleText>
|
||||
@ -425,20 +425,20 @@ export default {
|
||||
<h1 class="mb-0 display-4"><samp>{{this.configurationInfo.Name}}</samp></h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card rounded-3 bg-transparent shadow-sm ms-auto">
|
||||
<div class="card-body py-2 d-flex align-items-center">
|
||||
<div>
|
||||
<p class="mb-0 text-muted"><small>
|
||||
<div class="ms-sm-auto d-flex gap-2 flex-column">
|
||||
<div class="card rounded-3 bg-transparent shadow-sm">
|
||||
<div class="card-body py-2 d-flex align-items-center">
|
||||
<small class="text-muted">
|
||||
<LocaleText t="Status"></LocaleText>
|
||||
</small></p>
|
||||
<div class="form-check form-switch ms-auto">
|
||||
</small>
|
||||
<div class="dot ms-2" :class="{active: this.configurationInfo.Status}"></div>
|
||||
<div class="form-check form-switch mb-0 ms-auto pe-0 me-0">
|
||||
<label class="form-check-label" style="cursor: pointer" :for="'switch' + this.configurationInfo.id">
|
||||
<LocaleText t="Turning Off..." v-if="!this.configurationInfo.Status && this.configurationToggling"></LocaleText>
|
||||
<LocaleText t="Turning On..." v-else-if="this.configurationInfo.Status && this.configurationToggling"></LocaleText>
|
||||
<LocaleText t="On" v-else-if="this.configurationInfo.Status && !this.configurationToggling"></LocaleText>
|
||||
<LocaleText t="On" v-if="this.configurationInfo.Status && !this.configurationToggling"></LocaleText>
|
||||
<LocaleText t="Off" v-else-if="!this.configurationInfo.Status && !this.configurationToggling"></LocaleText>
|
||||
<span v-if="this.configurationToggling"
|
||||
class="spinner-border spinner-border-sm ms-2" aria-hidden="true"></span>
|
||||
class="spinner-border spinner-border-sm ms-2" aria-hidden="true">
|
||||
</span>
|
||||
</label>
|
||||
<input class="form-check-input"
|
||||
style="cursor: pointer"
|
||||
@ -448,8 +448,27 @@ export default {
|
||||
v-model="this.configurationInfo.Status"
|
||||
>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="dot ms-5" :class="{active: this.configurationInfo.Status}"></div>
|
||||
</div>
|
||||
<div class="d-flex gap-2">
|
||||
<RouterLink
|
||||
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">
|
||||
<i class="bi bi-plus-lg me-2"></i>
|
||||
<LocaleText t="Peer"></LocaleText>
|
||||
</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"
|
||||
@click="editConfiguration.modalOpen = true"
|
||||
type="button" aria-expanded="false">
|
||||
<i class="bi bi-gear-fill me-2"></i>
|
||||
<LocaleText t="Configuration Settings"></LocaleText>
|
||||
</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>
|
||||
@ -586,6 +605,7 @@ export default {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="mb-3">
|
||||
<PeerSearch
|
||||
@jobsAll="this.peerScheduleJobsAll.modalOpen = true"
|
||||
@ -609,6 +629,7 @@ export default {
|
||||
></Peer>
|
||||
</div>
|
||||
</TransitionGroup>
|
||||
|
||||
</div>
|
||||
<Transition name="zoom">
|
||||
<PeerSettings v-if="this.peerSetting.modalOpen"
|
||||
@ -636,6 +657,7 @@ export default {
|
||||
<PeerJobsAllModal
|
||||
v-if="this.peerScheduleJobsAll.modalOpen"
|
||||
@refresh="this.getPeers()"
|
||||
@allLogs="peerScheduleJobsLogs.modalOpen = true"
|
||||
@close="this.peerScheduleJobsAll.modalOpen = false"
|
||||
:configurationPeers="this.configurationPeers"
|
||||
>
|
||||
@ -643,6 +665,7 @@ export default {
|
||||
</Transition>
|
||||
<Transition name="zoom">
|
||||
<PeerJobsLogsModal v-if="this.peerScheduleJobsLogs.modalOpen"
|
||||
|
||||
@close="this.peerScheduleJobsLogs.modalOpen = false"
|
||||
:configurationInfo="this.configurationInfo"
|
||||
>
|
||||
@ -658,6 +681,8 @@ export default {
|
||||
<EditConfiguration
|
||||
@close="this.editConfiguration.modalOpen = false"
|
||||
@dataChanged="(d) => this.configurationInfo = d"
|
||||
@backupRestore="this.backupRestore.modalOpen = true"
|
||||
@deleteConfiguration="this.deleteConfiguration.modalOpen = true"
|
||||
:configurationInfo="this.configurationInfo"
|
||||
v-if="this.editConfiguration.modalOpen"></EditConfiguration>
|
||||
</Transition>
|
||||
@ -699,5 +724,13 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
th, td{
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 576px) {
|
||||
.titleBtn{
|
||||
flex-basis: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,79 @@
|
||||
<script setup>
|
||||
import {computed, ref, useTemplateRef} from "vue";
|
||||
import PeerSettingsDropdown from "@/components/configurationComponents/peerSettingsDropdown.vue";
|
||||
import {onClickOutside} from "@vueuse/core";
|
||||
|
||||
const props = defineProps(['Peer'])
|
||||
const subMenuOpened = ref(false)
|
||||
const getLatestHandshake = computed(() => {
|
||||
if (props.Peer.latest_handshake.includes(",")){
|
||||
return props.Peer.latest_handshake.split(",")[0]
|
||||
}
|
||||
return props.Peer.latest_handshake;
|
||||
})
|
||||
|
||||
const target = useTemplateRef('target');
|
||||
onClickOutside(target, event => {
|
||||
subMenuOpened.value = false;
|
||||
});
|
||||
|
||||
const emit = defineEmits(['qrcode', 'configurationFile', 'setting', 'jobs', 'refresh', 'share'])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<tr>
|
||||
<td>
|
||||
<small>{{Peer.name ? Peer.name : 'Untitled Peer'}}</small>
|
||||
</td>
|
||||
<td>
|
||||
<small>{{Peer.id}}</small>
|
||||
</td>
|
||||
<td>
|
||||
<small>
|
||||
{{Peer.allowed_ip}}
|
||||
</small>
|
||||
</td>
|
||||
<td>
|
||||
<small class="text-primary">
|
||||
{{(Peer.cumu_receive + Peer.total_receive).toFixed(4)}} GB
|
||||
</small>
|
||||
</td>
|
||||
<td>
|
||||
<small class="text-success">
|
||||
{{(Peer.cumu_sent + Peer.total_sent).toFixed(4)}} GB
|
||||
</small>
|
||||
</td>
|
||||
<td>
|
||||
<small class="text-secondary" v-if="Peer.latest_handshake !== 'No Handshake'">
|
||||
<i class="bi bi-arrows-angle-contract"></i>
|
||||
{{getLatestHandshake}} ago
|
||||
</small>
|
||||
<small v-else>N/A</small>
|
||||
</td>
|
||||
<td>
|
||||
<a role="button" class="text-body"
|
||||
@click="subMenuOpened = true">
|
||||
<h5 class="mb-0"><i class="bi bi-three-dots"></i></h5>
|
||||
</a>
|
||||
<Transition name="slide-fade">
|
||||
<PeerSettingsDropdown
|
||||
@qrcode="(file) => emit('qrcode', file)"
|
||||
@configurationFile="(file) => emit('configurationFile', file)"
|
||||
@setting="emit('setting')"
|
||||
@jobs="emit('jobs')"
|
||||
@refresh="emit('refresh')"
|
||||
@share="emit('share')"
|
||||
:Peer="Peer"
|
||||
v-if="subMenuOpened"
|
||||
ref="target"
|
||||
></PeerSettingsDropdown>
|
||||
</Transition>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
td{
|
||||
background-color: transparent;
|
||||
}
|
||||
</style>
|
||||
@ -89,146 +89,81 @@ export default {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mb-3">
|
||||
<div class="d-flex gap-2 z-3 peerSearchContainer">
|
||||
<RouterLink
|
||||
to="create"
|
||||
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>
|
||||
<LocaleText t="Peer"></LocaleText>
|
||||
</RouterLink>
|
||||
<button class="btn text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle shadow-sm"
|
||||
<div class="d-flex flex-column gap-2 mb-3">
|
||||
<div class="d-flex gap-2 z-3 peerSearchContainer justify-content-end">
|
||||
<button class="btn btn-sm 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>
|
||||
<LocaleText t="Download All"></LocaleText>
|
||||
</button>
|
||||
<div class="mt-3 mt-md-0 flex-grow-1">
|
||||
|
||||
<input class="form-control rounded-3 bg-secondary-subtle border-1 border-secondary-subtle shadow-sm w-100"
|
||||
:placeholder="searchBarPlaceholder"
|
||||
id="searchPeers"
|
||||
@keyup="this.debounce()"
|
||||
v-model="this.searchString">
|
||||
<button class="btn btn-sm text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle shadow-sm"
|
||||
@click="this.$emit('selectPeers')">
|
||||
<i class="bi bi-check2-all me-2"></i>
|
||||
<LocaleText t="Select Peers"></LocaleText>
|
||||
</button>
|
||||
<div class="dropdown">
|
||||
<button
|
||||
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">
|
||||
<i class="bi bi-sort-up me-2"></i>
|
||||
<LocaleText t="Sort By"></LocaleText>
|
||||
<span class="badge text-bg-primary ms-2">{{this.sort[store.Configuration.Server.dashboard_sort]}}</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu rounded-3 shadow">
|
||||
<li v-for="(value, key) in this.sort" >
|
||||
<button class="dropdown-item d-flex align-items-center" @click="this.updateSort(key)">
|
||||
<small>
|
||||
{{ value }}
|
||||
</small>
|
||||
<small class="ms-auto">
|
||||
<i class="bi bi-check-circle-fill"
|
||||
v-if="store.Configuration.Server.dashboard_sort === key"></i>
|
||||
</small>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<button
|
||||
@click="this.showDisplaySettings = true"
|
||||
class="btn text-secondary-emphasis bg-secondary-subtle rounded-3 border-1 border-secondary-subtle shadow-sm"
|
||||
type="button" aria-expanded="false">
|
||||
<i class="bi bi-filter-circle me-2"></i>
|
||||
<LocaleText t="Display"></LocaleText>
|
||||
</button>
|
||||
<button class="btn text-secondary-emphasis bg-secondary-subtle rounded-3 border-1 border-secondary-subtle shadow-sm"
|
||||
@click="this.$emit('editConfiguration')"
|
||||
<div class="dropdown">
|
||||
<button
|
||||
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">
|
||||
<i class="bi bi-arrow-repeat me-2"></i>
|
||||
<LocaleText t="Refresh Interval"></LocaleText>
|
||||
<span class="badge text-bg-primary ms-2">{{this.interval[store.Configuration.Server.dashboard_refresh_interval]}}</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu rounded-3 shadow">
|
||||
<li v-for="(value, key) in this.interval" >
|
||||
<button class="dropdown-item d-flex align-items-center" @click="this.updateRefreshInterval(key)">
|
||||
<small>
|
||||
{{ value }}
|
||||
</small>
|
||||
<small class="ms-auto">
|
||||
<i class="bi bi-check-circle-fill"
|
||||
v-if="store.Configuration.Server.dashboard_refresh_interval === key"></i>
|
||||
</small>
|
||||
</button>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<button class="btn btn-sm text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle shadow-sm"
|
||||
@click="this.$emit('jobsAll')"
|
||||
type="button" aria-expanded="false">
|
||||
<i class="bi bi-gear-fill"></i>
|
||||
<i class="bi bi-person-walking me-2"></i>
|
||||
<LocaleText t="Active Jobs"></LocaleText>
|
||||
</button>
|
||||
<button class="btn text-secondary-emphasis bg-secondary-subtle rounded-3 border-1 border-secondary-subtle shadow-sm"
|
||||
@click="this.showMoreSettings = true"
|
||||
type="button" aria-expanded="false">
|
||||
<i class="bi bi-three-dots"></i>
|
||||
</button>
|
||||
<Transition name="zoom">
|
||||
<div
|
||||
v-if="this.showDisplaySettings"
|
||||
class="peerSettingContainer w-100 h-100 position-absolute top-0 start-0 overflow-y-scroll displayModal">
|
||||
<div class="container-md d-flex h-100 w-100">
|
||||
<div class="m-auto modal-dialog-centered dashboardModal">
|
||||
<div class="card rounded-3 shadow w-100">
|
||||
<div class="card-header bg-transparent d-flex align-items-center gap-2 border-0 p-4 pb-2">
|
||||
<h4 class="mb-0 fw-normal"><LocaleText t="Display"></LocaleText>
|
||||
</h4>
|
||||
<button type="button" class="btn-close ms-auto" @click="this.showDisplaySettings = false"></button>
|
||||
</div>
|
||||
<div class="card-body px-4 pb-4 d-flex gap-3 flex-column">
|
||||
<div>
|
||||
<p class="text-muted fw-bold mb-2"><small>
|
||||
<LocaleText t="Sort by"></LocaleText>
|
||||
</small></p>
|
||||
<div class="list-group">
|
||||
<a v-for="(value, key) in this.sort" class="list-group-item list-group-item-action d-flex"
|
||||
role="button"
|
||||
@click="this.updateSort(key)">
|
||||
<span class="me-auto">{{value}}</span>
|
||||
<i class="bi bi-check text-primary"
|
||||
v-if="store.Configuration.Server.dashboard_sort === key"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-muted fw-bold mb-2"><small>
|
||||
<LocaleText t="Refresh Interval"></LocaleText>
|
||||
</small></p>
|
||||
<div class="list-group">
|
||||
<a v-for="(value, key) in this.interval"
|
||||
class="list-group-item list-group-item-action d-flex" role="button"
|
||||
@click="this.updateRefreshInterval(key)">
|
||||
<span class="me-auto">{{value}}</span>
|
||||
<i class="bi bi-check text-primary"
|
||||
v-if="store.Configuration.Server.dashboard_refresh_interval === key"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
<Transition name="zoom">
|
||||
<div
|
||||
v-if="this.showMoreSettings"
|
||||
class="peerSettingContainer w-100 h-100 position-absolute top-0 start-0 overflow-y-scroll displayModal">
|
||||
<div class="container-md d-flex h-100 w-100">
|
||||
<div class="m-auto modal-dialog-centered dashboardModal">
|
||||
<div class="card rounded-3 shadow w-100">
|
||||
<div class="card-header bg-transparent d-flex align-items-center gap-2 border-0 p-4">
|
||||
<h4 class="mb-0">
|
||||
<LocaleText t="Other Settings"></LocaleText>
|
||||
</h4>
|
||||
<button type="button" class="btn-close ms-auto" @click="this.showMoreSettings = false"></button>
|
||||
</div>
|
||||
<div class="card-body px-4 pb-4 d-flex gap-3 flex-column pt-0">
|
||||
|
||||
<div>
|
||||
<p class="text-muted fw-bold mb-2"><small>
|
||||
<LocaleText t="Peers"></LocaleText>
|
||||
</small></p>
|
||||
<div class="list-group">
|
||||
<a class="list-group-item list-group-item-action d-flex" role="button"
|
||||
@click="this.$emit('selectPeers')">
|
||||
<LocaleText t="Select Peers"></LocaleText>
|
||||
</a>
|
||||
<a class="list-group-item list-group-item-action d-flex" role="button"
|
||||
@click="this.$emit('jobsAll')">
|
||||
<LocaleText t="Active Jobs"></LocaleText>
|
||||
</a>
|
||||
<a class="list-group-item list-group-item-action d-flex" role="button"
|
||||
@click="this.$emit('jobLogs')">
|
||||
<LocaleText t="Logs"></LocaleText>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-muted fw-bold mb-2"><small>
|
||||
<LocaleText t="Configuration"></LocaleText>
|
||||
</small></p>
|
||||
<div class="list-group">
|
||||
<a class="list-group-item list-group-item-action d-flex" role="button"
|
||||
@click="this.$emit('backupRestore')">
|
||||
<LocaleText t="Backup & Restore"></LocaleText>
|
||||
</a>
|
||||
<a class="list-group-item list-group-item-action d-flex text-danger fw-bold" role="button"
|
||||
@click="this.$emit('deleteConfiguration')">
|
||||
<LocaleText t="Delete Configuration"></LocaleText>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
<div class="d-flex gap-3 align-items-center">
|
||||
<h6 class="mb-0">
|
||||
<label for="searchPeers">
|
||||
<i class="bi bi-search"></i>
|
||||
</label>
|
||||
</h6>
|
||||
<input class="form-control form-control-sm rounded-3 bg-secondary-subtle border-1 border-secondary-subtle shadow-sm w-auto"
|
||||
:placeholder="searchBarPlaceholder"
|
||||
id="searchPeers"
|
||||
@keyup="this.debounce()"
|
||||
v-model="this.searchString">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -258,7 +193,7 @@ export default {
|
||||
width: 400px !important;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
@media screen and (max-width: 992px) {
|
||||
.peerSearchContainer{
|
||||
flex-direction: column;
|
||||
}
|
||||
@ -267,4 +202,18 @@ export default {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.peerSearchContainer > *{
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
button{
|
||||
text-align: left;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
i{
|
||||
margin-right: auto !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user