mirror of
https://github.com/donaldzou/WGDashboard.git
synced 2024-11-22 07:10:09 +01:00
Almost done...
This commit is contained in:
Donald Zou
parent
02c2221970
commit
a80a2866de
@ -3,9 +3,10 @@ import { ref } from 'vue'
|
||||
import { onClickOutside } from '@vueuse/core'
|
||||
import "animate.css"
|
||||
import PeerSettingsDropdown from "@/components/configurationComponents/peerSettingsDropdown.vue";
|
||||
import LocaleText from "@/components/text/localeText.vue";
|
||||
export default {
|
||||
name: "peer",
|
||||
components: {PeerSettingsDropdown},
|
||||
components: {LocaleText, PeerSettingsDropdown},
|
||||
props: {
|
||||
Peer: Object
|
||||
},
|
||||
@ -57,7 +58,7 @@ export default {
|
||||
<div v-else class="border-0 card-header bg-transparent text-warning fw-bold"
|
||||
style="font-size: 0.8rem">
|
||||
<i class="bi-lock-fill me-2"></i>
|
||||
Access Restricted
|
||||
<LocaleText t="Access Restricted"></LocaleText>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body pt-1" style="font-size: 0.9rem">
|
||||
@ -65,12 +66,16 @@ export default {
|
||||
{{Peer.name ? Peer.name : 'Untitled Peer'}}
|
||||
</h6>
|
||||
<div class="mb-2">
|
||||
<small class="text-muted">Public Key</small>
|
||||
<small class="text-muted">
|
||||
<LocaleText t="Public Key"></LocaleText>
|
||||
</small>
|
||||
<p class="mb-0"><samp>{{Peer.id}}</samp></p>
|
||||
</div>
|
||||
<div class="d-flex align-items-end">
|
||||
<div>
|
||||
<small class="text-muted">Allowed IP</small>
|
||||
<small class="text-muted">
|
||||
<LocaleText t="Allowed IPs"></LocaleText>
|
||||
</small>
|
||||
<p class="mb-0"><samp>{{Peer.allowed_ip}}</samp></p>
|
||||
</div>
|
||||
<div class="ms-auto px-2 rounded-3 subMenuBtn"
|
||||
|
||||
@ -3,6 +3,7 @@ import ScheduleDropdown from "@/components/configurationComponents/peerScheduleJ
|
||||
import SchedulePeerJob from "@/components/configurationComponents/peerScheduleJobsComponents/schedulePeerJob.vue";
|
||||
import {WireguardConfigurationsStore} from "@/stores/WireguardConfigurationsStore.js";
|
||||
import {v4} from "uuid";
|
||||
import LocaleText from "@/components/text/localeText.vue";
|
||||
export default {
|
||||
name: "peerJobs",
|
||||
setup(){
|
||||
@ -13,6 +14,7 @@ export default {
|
||||
selectedPeer: Object
|
||||
},
|
||||
components:{
|
||||
LocaleText,
|
||||
SchedulePeerJob,
|
||||
ScheduleDropdown,
|
||||
},
|
||||
@ -50,8 +52,8 @@ export default {
|
||||
<div class="m-auto modal-dialog-centered dashboardModal">
|
||||
<div class="card rounded-3 shadow" style="width: 700px">
|
||||
<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">Schedule Jobs
|
||||
<strong></strong>
|
||||
<h4 class="mb-0 fw-normal">
|
||||
<LocaleText t="Schedule Jobs"></LocaleText>
|
||||
</h4>
|
||||
<button type="button" class="btn-close ms-auto" @click="this.$emit('close')"></button>
|
||||
</div>
|
||||
@ -60,7 +62,8 @@ export default {
|
||||
<button class="btn bg-primary-subtle border-1 border-primary-subtle text-primary-emphasis rounded-3 shadow"
|
||||
|
||||
@click="this.addJob()">
|
||||
<i class="bi bi-plus-lg me-2"></i> Job
|
||||
<i class="bi bi-plus-lg me-2"></i>
|
||||
<LocaleText t="Job"></LocaleText>
|
||||
</button>
|
||||
</div>
|
||||
<TransitionGroup name="schedulePeerJobTransition" tag="div" class="position-relative">
|
||||
@ -76,7 +79,9 @@ export default {
|
||||
style="height: 153px"
|
||||
v-if="this.selectedPeer.jobs.length === 0">
|
||||
<div class="card-body text-muted text-center d-flex">
|
||||
<h6 class="m-auto">This peer does not have any job yet.</h6>
|
||||
<h6 class="m-auto">
|
||||
<LocaleText t="This peer does not have any job yet."></LocaleText>
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
</TransitionGroup>
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
import SchedulePeerJob from "@/components/configurationComponents/peerScheduleJobsComponents/schedulePeerJob.vue";
|
||||
import {WireguardConfigurationsStore} from "@/stores/WireguardConfigurationsStore.js";
|
||||
import {v4} from "uuid";
|
||||
import LocaleText from "@/components/text/localeText.vue";
|
||||
|
||||
export default {
|
||||
name: "peerJobsAllModal",
|
||||
@ -9,7 +10,7 @@ export default {
|
||||
const store = WireguardConfigurationsStore();
|
||||
return {store}
|
||||
},
|
||||
components: {SchedulePeerJob},
|
||||
components: {LocaleText, SchedulePeerJob},
|
||||
props: {
|
||||
configurationPeers: Array[Object]
|
||||
},
|
||||
@ -32,7 +33,8 @@ export default {
|
||||
<div class="m-auto modal-dialog-centered dashboardModal">
|
||||
<div class="card rounded-3 shadow" style="width: 700px">
|
||||
<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">All Active Jobs
|
||||
<h4 class="mb-0 fw-normal">
|
||||
<LocaleText t="All Active Jobs"></LocaleText>
|
||||
</h4>
|
||||
<button type="button" class="btn-close ms-auto" @click="this.$emit('close')"></button>
|
||||
</div>
|
||||
@ -71,7 +73,9 @@ export default {
|
||||
style="height: 153px"
|
||||
v-else>
|
||||
<div class="card-body text-muted text-center d-flex">
|
||||
<h6 class="m-auto">No active job at the moment.</h6>
|
||||
<span class="m-auto">
|
||||
<LocaleText t="No active job at the moment."></LocaleText>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,8 +1,10 @@
|
||||
<script>
|
||||
import dayjs from "dayjs";
|
||||
import {fetchGet} from "@/utilities/fetch.js";
|
||||
import LocaleText from "@/components/text/localeText.vue";
|
||||
export default {
|
||||
name: "peerJobsLogsModal",
|
||||
components: {LocaleText},
|
||||
props: {
|
||||
configurationInfo: Object
|
||||
},
|
||||
@ -51,44 +53,56 @@ export default {
|
||||
<div class="m-auto mt-0 modal-dialog-centered dashboardModal" style="width: 100%">
|
||||
<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-0">
|
||||
<h4 class="mb-0">Jobs Logs</h4>
|
||||
<h4 class="mb-0">
|
||||
<LocaleText t="Jobs Logs"></LocaleText>
|
||||
</h4>
|
||||
<button type="button" class="btn-close ms-auto" @click="this.$emit('close')"></button>
|
||||
</div>
|
||||
<div class="card-body px-4 pb-4 pt-2">
|
||||
<div v-if="!this.dataLoading">
|
||||
<p>Updated at: {{this.logFetchTime}}</p>
|
||||
<p>
|
||||
<LocaleText t="Updated at"></LocaleText>
|
||||
: {{this.logFetchTime}}</p>
|
||||
<div class="mb-2 d-flex gap-3">
|
||||
<button @click="this.fetchLog()"
|
||||
class="btn btn-sm rounded-3 shadow-sm
|
||||
text-info-emphasis bg-info-subtle border-1 border-info-subtle me-1">
|
||||
<i class="bi bi-arrow-clockwise me-2"></i>
|
||||
Refresh
|
||||
<LocaleText t="Refresh"></LocaleText>
|
||||
</button>
|
||||
<div class="d-flex gap-3 align-items-center">
|
||||
<span class="text-muted">Filter</span>
|
||||
<span class="text-muted">
|
||||
<LocaleText t="Filter"></LocaleText>
|
||||
</span>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" v-model="this.showSuccessJob"
|
||||
id="jobLogsShowSuccessCheck">
|
||||
<label class="form-check-label" for="jobLogsShowSuccessCheck">
|
||||
<span class="badge text-success-emphasis bg-success-subtle">Success</span>
|
||||
<span class="badge text-success-emphasis bg-success-subtle">
|
||||
<LocaleText t="Success"></LocaleText>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" v-model="this.showFailedJob"
|
||||
id="jobLogsShowFailedCheck">
|
||||
<label class="form-check-label" for="jobLogsShowFailedCheck">
|
||||
<span class="badge text-danger-emphasis bg-danger-subtle">Failed</span>
|
||||
<span class="badge text-danger-emphasis bg-danger-subtle">
|
||||
<LocaleText t="Failed"></LocaleText>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex gap-3 align-items-center ms-auto">
|
||||
<span class="text-muted">Display</span>
|
||||
<span class="text-muted">
|
||||
<LocaleText t="Display"></LocaleText>
|
||||
</span>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox"
|
||||
v-model="showJobID"
|
||||
id="jobLogsShowJobIDCheck">
|
||||
<label class="form-check-label" for="jobLogsShowJobIDCheck">
|
||||
Job ID
|
||||
<LocaleText t="Job ID"></LocaleText>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
@ -96,7 +110,7 @@ export default {
|
||||
v-model="showLogID"
|
||||
id="jobLogsShowLogIDCheck">
|
||||
<label class="form-check-label" for="jobLogsShowLogIDCheck">
|
||||
Log ID
|
||||
<LocaleText t="Log ID"></LocaleText>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@ -106,11 +120,21 @@ export default {
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Date</th>
|
||||
<th scope="col" v-if="showLogID">Log ID</th>
|
||||
<th scope="col" v-if="showJobID">Job ID</th>
|
||||
<th scope="col">Status</th>
|
||||
<th scope="col">Message</th>
|
||||
<th scope="col">
|
||||
<LocaleText t="Date"></LocaleText>
|
||||
</th>
|
||||
<th scope="col" v-if="showLogID">
|
||||
<LocaleText t="Log ID"></LocaleText>
|
||||
</th>
|
||||
<th scope="col" v-if="showJobID">
|
||||
<LocaleText t="Job ID"></LocaleText>
|
||||
</th>
|
||||
<th scope="col">
|
||||
<LocaleText t="Status"></LocaleText>
|
||||
</th>
|
||||
<th scope="col">
|
||||
<LocaleText t="Message"></LocaleText>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
<script>
|
||||
import QRCode from "qrcode";
|
||||
import LocaleText from "@/components/text/localeText.vue";
|
||||
export default {
|
||||
name: "peerQRCode",
|
||||
components: {LocaleText},
|
||||
props: {
|
||||
peerConfigData: String
|
||||
},
|
||||
@ -19,7 +21,9 @@ export default {
|
||||
<div class="m-auto modal-dialog-centered dashboardModal justify-content-center">
|
||||
<div class="card rounded-3 shadow">
|
||||
<div class="card-header bg-transparent d-flex align-items-center gap-2 border-0 p-4 pb-0">
|
||||
<h4 class="mb-0">QR Code</h4>
|
||||
<h4 class="mb-0">
|
||||
<LocaleText t="QR Code"></LocaleText>
|
||||
</h4>
|
||||
<button type="button" class="btn-close ms-auto" @click="this.$emit('close')"></button>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
@ -5,10 +5,11 @@ import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.
|
||||
import {fetchPost} from "@/utilities/fetch.js";
|
||||
import VueDatePicker from "@vuepic/vue-datepicker";
|
||||
import dayjs from "dayjs";
|
||||
import LocaleText from "@/components/text/localeText.vue";
|
||||
|
||||
export default {
|
||||
name: "schedulePeerJob",
|
||||
components: {VueDatePicker, ScheduleDropdown},
|
||||
components: {LocaleText, VueDatePicker, ScheduleDropdown},
|
||||
props: {
|
||||
dropdowns: Array[Object],
|
||||
pjob: Object,
|
||||
@ -110,15 +111,19 @@ export default {
|
||||
<div class="card shadow-sm rounded-3 mb-2" :class="{'border-warning-subtle': this.newJob}">
|
||||
<div class="card-header bg-transparent text-muted border-0">
|
||||
<small class="d-flex" v-if="!this.newJob">
|
||||
<strong class="me-auto">Job ID</strong>
|
||||
<strong class="me-auto">
|
||||
<LocaleText t="Job ID"></LocaleText>
|
||||
</strong>
|
||||
<samp>{{this.job.JobID}}</samp>
|
||||
</small>
|
||||
<small v-else><span class="badge text-bg-warning">Unsaved Job</span></small>
|
||||
<small v-else><span class="badge text-bg-warning">
|
||||
<LocaleText t="Unsaved Job"></LocaleText>
|
||||
</span></small>
|
||||
</div>
|
||||
<div class="card-body pt-1" style="font-family: var(--bs-font-monospace)">
|
||||
<div class="d-flex gap-2 align-items-center mb-2">
|
||||
<samp>
|
||||
if
|
||||
<LocaleText t="if"></LocaleText>
|
||||
</samp>
|
||||
<ScheduleDropdown
|
||||
:edit="edit"
|
||||
@ -127,7 +132,7 @@ export default {
|
||||
@update="(value) => {this.job.Field = value}"
|
||||
></ScheduleDropdown>
|
||||
<samp>
|
||||
is
|
||||
<LocaleText t="is"></LocaleText>
|
||||
</samp>
|
||||
<ScheduleDropdown
|
||||
:edit="edit"
|
||||
@ -149,12 +154,6 @@ export default {
|
||||
:dark="this.store.Configuration.Server.dashboard_theme === 'dark'"
|
||||
/>
|
||||
|
||||
<!-- <input class="form-control form-control-sm form-control-dark rounded-3 flex-grow-1"-->
|
||||
<!-- :disabled="!edit"-->
|
||||
<!-- type="datetime-local"-->
|
||||
<!-- v-if="this.job.Field === 'date'"-->
|
||||
<!-- v-model="this.job.Value"-->
|
||||
<!-- style="width: auto">-->
|
||||
<input class="form-control form-control-sm form-control-dark rounded-3 flex-grow-1"
|
||||
:disabled="!edit"
|
||||
v-else
|
||||
@ -165,7 +164,7 @@ export default {
|
||||
</samp>
|
||||
</div>
|
||||
<div class="px-5 d-flex gap-2 align-items-center">
|
||||
<samp>then</samp>
|
||||
<samp><LocaleText t="then"></LocaleText></samp>
|
||||
<ScheduleDropdown
|
||||
:edit="edit"
|
||||
:options="this.dropdowns.Action"
|
||||
@ -178,18 +177,18 @@ export default {
|
||||
<div class="ms-auto d-flex gap-3" v-if="!this.edit">
|
||||
<a role="button"
|
||||
class="ms-auto text-decoration-none"
|
||||
@click="this.edit = true">[E] Edit</a>
|
||||
@click="this.edit = true">[E] <LocaleText t="Edit"></LocaleText></a>
|
||||
<a role="button"
|
||||
@click="this.delete()"
|
||||
class=" text-danger text-decoration-none">[D] Delete</a>
|
||||
class=" text-danger text-decoration-none">[D] <LocaleText t="Delete"></LocaleText></a>
|
||||
</div>
|
||||
<div class="ms-auto d-flex gap-3" v-else>
|
||||
<a role="button"
|
||||
class="text-secondary text-decoration-none"
|
||||
@click="this.reset()">[C] Cancel</a>
|
||||
@click="this.reset()">[C] <LocaleText t="Cancel"></LocaleText></a>
|
||||
<a role="button"
|
||||
class="text-primary ms-auto text-decoration-none"
|
||||
@click="this.save()">[S] Save</a>
|
||||
@click="this.save()">[S] <LocaleText t="Save"></LocaleText></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -23,7 +23,7 @@ export default {
|
||||
sort: {
|
||||
status: GetLocale("Status"),
|
||||
name: GetLocale("Name"),
|
||||
allowed_ip: GetLocale("Allowed IP"),
|
||||
allowed_ip: GetLocale("Allowed IPs"),
|
||||
restricted: GetLocale("Restricted")
|
||||
},
|
||||
interval: {
|
||||
|
||||
@ -1,9 +1,11 @@
|
||||
<script>
|
||||
import {fetchPost} from "@/utilities/fetch.js";
|
||||
import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.js";
|
||||
import LocaleText from "@/components/text/localeText.vue";
|
||||
|
||||
export default {
|
||||
name: "peerSettings",
|
||||
components: {LocaleText},
|
||||
props: {
|
||||
selectedPeer: Object
|
||||
},
|
||||
@ -73,18 +75,24 @@ export default {
|
||||
<div class="m-auto modal-dialog-centered dashboardModal">
|
||||
<div class="card rounded-3 shadow flex-grow-1">
|
||||
<div class="card-header bg-transparent d-flex align-items-center gap-2 border-0 p-4 pb-2">
|
||||
<h4 class="mb-0">Peer Settings</h4>
|
||||
<h4 class="mb-0">
|
||||
<LocaleText t="Peer Settings"></LocaleText>
|
||||
</h4>
|
||||
<button type="button" class="btn-close ms-auto" @click="this.$emit('close')"></button>
|
||||
</div>
|
||||
<div class="card-body px-4 pb-4" v-if="this.data">
|
||||
<div class="d-flex flex-column gap-2 mb-4">
|
||||
<div class="d-flex align-items-center">
|
||||
<small class="text-muted">Public Key</small>
|
||||
<small class="text-muted">
|
||||
<LocaleText t="Public Key"></LocaleText>
|
||||
</small>
|
||||
<small class="ms-auto"><samp>{{this.data.id}}</samp></small>
|
||||
</div>
|
||||
<div>
|
||||
<label for="peer_name_textbox" class="form-label">
|
||||
<small class="text-muted">Name</small>
|
||||
<small class="text-muted">
|
||||
<LocaleText t="Name"></LocaleText>
|
||||
</small>
|
||||
</label>
|
||||
<input type="text" class="form-control form-control-sm rounded-3"
|
||||
:disabled="this.saving"
|
||||
@ -94,7 +102,10 @@ export default {
|
||||
<div>
|
||||
<div class="d-flex position-relative">
|
||||
<label for="peer_private_key_textbox" class="form-label">
|
||||
<small class="text-muted">Private Key <code>(Required for QR Code and Download)</code></small>
|
||||
<small class="text-muted"><LocaleText t="Private Key"></LocaleText>
|
||||
<code>
|
||||
<LocaleText t="(Required for QR Code and Download)"></LocaleText>
|
||||
</code></small>
|
||||
</label>
|
||||
<a role="button" class="ms-auto text-decoration-none toggleShowKey"
|
||||
@click="this.showKey = !this.showKey"
|
||||
@ -110,7 +121,11 @@ export default {
|
||||
</div>
|
||||
<div>
|
||||
<label for="peer_allowed_ip_textbox" class="form-label">
|
||||
<small class="text-muted">Allowed IPs <code>(Required)</code></small>
|
||||
<small class="text-muted">
|
||||
<LocaleText t="Allowed IPs"></LocaleText>
|
||||
<code>
|
||||
<LocaleText t="(Required)"></LocaleText>
|
||||
</code></small>
|
||||
</label>
|
||||
<input type="text" class="form-control form-control-sm rounded-3"
|
||||
:disabled="this.saving"
|
||||
@ -120,7 +135,11 @@ export default {
|
||||
|
||||
<div>
|
||||
<label for="peer_endpoint_allowed_ips" class="form-label">
|
||||
<small class="text-muted">Endpoint Allowed IPs <code>(Required)</code></small>
|
||||
<small class="text-muted">
|
||||
<LocaleText t="Endpoint Allowed IPs"></LocaleText>
|
||||
<code>
|
||||
<LocaleText t="(Required)"></LocaleText>
|
||||
</code></small>
|
||||
</label>
|
||||
<input type="text" class="form-control form-control-sm rounded-3"
|
||||
:disabled="this.saving"
|
||||
@ -129,7 +148,9 @@ export default {
|
||||
</div>
|
||||
<div>
|
||||
<label for="peer_DNS_textbox" class="form-label">
|
||||
<small class="text-muted">DNS</small>
|
||||
<small class="text-muted">
|
||||
<LocaleText t="DNS"></LocaleText>
|
||||
</small>
|
||||
</label>
|
||||
<input type="text" class="form-control form-control-sm rounded-3"
|
||||
:disabled="this.saving"
|
||||
@ -141,7 +162,7 @@ export default {
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button rounded-3 collapsed" type="button"
|
||||
data-bs-toggle="collapse" data-bs-target="#peerSettingsAccordionOptional">
|
||||
Optional Settings
|
||||
<LocaleText t="Optional Settings"></LocaleText>
|
||||
</button>
|
||||
</h2>
|
||||
<div id="peerSettingsAccordionOptional" class="accordion-collapse collapse"
|
||||
@ -149,7 +170,8 @@ export default {
|
||||
<div class="accordion-body d-flex flex-column gap-2 mb-2">
|
||||
<div>
|
||||
<label for="peer_preshared_key_textbox" class="form-label">
|
||||
<small class="text-muted">Pre-Shared Key</small>
|
||||
<small class="text-muted">
|
||||
<LocaleText t="Pre-Shared Key"></LocaleText></small>
|
||||
</label>
|
||||
<input type="text" class="form-control form-control-sm rounded-3"
|
||||
:disabled="this.saving"
|
||||
@ -157,7 +179,9 @@ export default {
|
||||
id="peer_preshared_key_textbox">
|
||||
</div>
|
||||
<div>
|
||||
<label for="peer_mtu" class="form-label"><small class="text-muted">MTU</small></label>
|
||||
<label for="peer_mtu" class="form-label"><small class="text-muted">
|
||||
<LocaleText t="MTU"></LocaleText>
|
||||
</small></label>
|
||||
<input type="number" class="form-control form-control-sm rounded-3"
|
||||
:disabled="this.saving"
|
||||
v-model="this.data.mtu"
|
||||
@ -165,7 +189,9 @@ export default {
|
||||
</div>
|
||||
<div>
|
||||
<label for="peer_keep_alive" class="form-label">
|
||||
<small class="text-muted">Persistent Keepalive</small>
|
||||
<small class="text-muted">
|
||||
<LocaleText t="Persistent Keepalive"></LocaleText>
|
||||
</small>
|
||||
</label>
|
||||
<input type="number" class="form-control form-control-sm rounded-3"
|
||||
:disabled="this.saving"
|
||||
@ -178,25 +204,27 @@ export default {
|
||||
</div>
|
||||
<hr>
|
||||
<div class="d-flex gap-2 align-items-center">
|
||||
<strong>Reset Data Usage</strong>
|
||||
<strong>
|
||||
<LocaleText t="Reset Data Usage"></LocaleText>
|
||||
</strong>
|
||||
<div class="d-flex gap-2 ms-auto">
|
||||
<button class="btn bg-primary-subtle text-primary-emphasis rounded-3 flex-grow-1 shadow-sm"
|
||||
@click="this.resetPeerData('total')"
|
||||
>
|
||||
<i class="bi bi-arrow-down-up me-2"></i>
|
||||
Total
|
||||
<LocaleText t="Total"></LocaleText>
|
||||
</button>
|
||||
<button class="btn bg-primary-subtle text-primary-emphasis rounded-3 flex-grow-1 shadow-sm"
|
||||
@click="this.resetPeerData('receive')"
|
||||
>
|
||||
<i class="bi bi-arrow-down me-2"></i>
|
||||
Received
|
||||
<LocaleText t="Received"></LocaleText>
|
||||
</button>
|
||||
<button class="btn bg-primary-subtle text-primary-emphasis rounded-3 flex-grow-1 shadow-sm"
|
||||
@click="this.resetPeerData('sent')"
|
||||
>
|
||||
<i class="bi bi-arrow-up me-2"></i>
|
||||
Sent
|
||||
<LocaleText t="Sent"></LocaleText>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -206,14 +234,16 @@ export default {
|
||||
<button class="btn btn-secondary rounded-3 shadow"
|
||||
@click="this.reset()"
|
||||
:disabled="!this.dataChanged || this.saving">
|
||||
Revert <i class="bi bi-arrow-clockwise ms-2"></i>
|
||||
<LocaleText t="Revert"></LocaleText>
|
||||
<i class="bi bi-arrow-clockwise ms-2"></i>
|
||||
</button>
|
||||
|
||||
<button class="ms-auto btn btn-dark btn-brand rounded-3 px-3 py-2 shadow"
|
||||
:disabled="!this.dataChanged || this.saving"
|
||||
@click="this.savePeer()"
|
||||
>
|
||||
Save Peer<i class="bi bi-save-fill ms-2"></i></button>
|
||||
<LocaleText t="Save Peer"></LocaleText>
|
||||
<i class="bi bi-save-fill ms-2"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,9 +1,11 @@
|
||||
<script>
|
||||
import {fetchGet, fetchPost} from "@/utilities/fetch.js";
|
||||
import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.js";
|
||||
import LocaleText from "@/components/text/localeText.vue";
|
||||
|
||||
export default {
|
||||
name: "peerSettingsDropdown",
|
||||
components: {LocaleText},
|
||||
setup(){
|
||||
const dashboardStore = DashboardConfigurationStore()
|
||||
return {dashboardStore}
|
||||
@ -88,9 +90,8 @@ export default {
|
||||
<template v-if="!this.Peer.private_key">
|
||||
<li>
|
||||
<small class="w-100 dropdown-item text-muted"
|
||||
style="white-space: break-spaces; font-size: 0.7rem"
|
||||
>Download & QR Code is not available due to no <code>private key</code>
|
||||
set for this peer
|
||||
style="white-space: break-spaces; font-size: 0.7rem">
|
||||
<LocaleText t="Download & QR Code is not available due to no private key set for this peer"></LocaleText>
|
||||
</small>
|
||||
</li>
|
||||
|
||||
@ -114,7 +115,7 @@ export default {
|
||||
<a class="dropdown-item d-flex" role="button"
|
||||
@click="this.$emit('setting')"
|
||||
>
|
||||
<i class="me-auto bi bi-pen"></i> Edit
|
||||
<i class="me-auto bi bi-pen"></i> <LocaleText t="Peer Settings"></LocaleText>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
|
||||
@ -4,6 +4,7 @@ import {fetchPost} from "@/utilities/fetch.js";
|
||||
import dayjs from "dayjs";
|
||||
import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.js";
|
||||
import VueDatePicker from '@vuepic/vue-datepicker';
|
||||
import LocaleText from "@/components/text/localeText.vue";
|
||||
|
||||
|
||||
export default {
|
||||
@ -12,6 +13,7 @@ export default {
|
||||
peer: Object
|
||||
},
|
||||
components: {
|
||||
LocaleText,
|
||||
VueDatePicker
|
||||
},
|
||||
data(){
|
||||
@ -49,11 +51,9 @@ export default {
|
||||
if (res.status){
|
||||
this.peer.ShareLink = res.data;
|
||||
this.dataCopy = res.data.at(0);
|
||||
this.store.newMessage("Server", "Share link created successfully", "success")
|
||||
}else{
|
||||
this.store.newMessage("Server",
|
||||
"Share link failed to create. Reason: " + res.message, "danger")
|
||||
|
||||
}
|
||||
this.loading = false;
|
||||
})
|
||||
@ -108,13 +108,15 @@ export default {
|
||||
<div class="m-auto modal-dialog-centered dashboardModal" style="width: 500px">
|
||||
<div class="card rounded-3 shadow flex-grow-1">
|
||||
<div class="card-header bg-transparent d-flex align-items-center gap-2 border-0 p-4">
|
||||
<h4 class="mb-0">Share Peer</h4>
|
||||
<h4 class="mb-0">
|
||||
<LocaleText t="Share Peer"></LocaleText>
|
||||
</h4>
|
||||
<button type="button" class="btn-close ms-auto" @click="this.$emit('close')"></button>
|
||||
</div>
|
||||
<div class="card-body px-4 pb-4" v-if="this.peer.ShareLink">
|
||||
<div v-if="!this.dataCopy">
|
||||
<h6 class="mb-3 text-muted">
|
||||
Currently the peer is not sharing
|
||||
<LocaleText t="Currently the peer is not sharing"></LocaleText>
|
||||
</h6>
|
||||
<button
|
||||
@click="this.startSharing()"
|
||||
@ -123,7 +125,8 @@ export default {
|
||||
<span :class="{'animate__animated animate__flash animate__infinite animate__slower': this.loading}">
|
||||
<i class="bi bi-send-fill me-2" ></i>
|
||||
</span>
|
||||
{{this.loading ? "Sharing...":"Start Sharing"}}
|
||||
<LocaleText t="Sharing..." v-if="this.loading"></LocaleText>
|
||||
<LocaleText t="Start Sharing" v-else></LocaleText>
|
||||
</button>
|
||||
</div>
|
||||
<div v-else>
|
||||
@ -137,7 +140,7 @@ export default {
|
||||
<div class="d-flex flex-column gap-2 mb-3">
|
||||
<small>
|
||||
<i class="bi bi-calendar me-2"></i>
|
||||
Expire Date
|
||||
<LocaleText t="Expire At"></LocaleText>
|
||||
</small>
|
||||
<VueDatePicker
|
||||
:is24="true"
|
||||
@ -157,7 +160,8 @@ export default {
|
||||
<span :class="{'animate__animated animate__flash animate__infinite animate__slower': this.loading}">
|
||||
<i class="bi bi-send-slash-fill me-2" ></i>
|
||||
</span>
|
||||
{{this.loading ? "Stop Sharing...":"Stop Sharing"}}
|
||||
<LocaleText t="Stop Sharing..." v-if="this.loading"></LocaleText>
|
||||
<LocaleText t="Stop Sharing" v-else></LocaleText>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import {defineStore} from "pinia";
|
||||
import {fetchGet} from "@/utilities/fetch.js";
|
||||
import isCidr from "is-cidr";
|
||||
import {GetLocale} from "@/utilities/locale.js";
|
||||
|
||||
export const WireguardConfigurationsStore = defineStore('WireguardConfigurationsStore', {
|
||||
state: () => ({
|
||||
@ -11,54 +12,54 @@ export const WireguardConfigurationsStore = defineStore('WireguardConfigurations
|
||||
dropdowns: {
|
||||
Field: [
|
||||
{
|
||||
display: "Total Received",
|
||||
display: GetLocale("Total Received"),
|
||||
value: "total_receive",
|
||||
unit: "GB",
|
||||
type: 'number'
|
||||
},
|
||||
{
|
||||
display: "Total Sent",
|
||||
display: GetLocale("Total Sent"),
|
||||
value: "total_sent",
|
||||
unit: "GB",
|
||||
type: 'number'
|
||||
},
|
||||
{
|
||||
display: "Total Data",
|
||||
display: GetLocale("Total Usage"),
|
||||
value: "total_data",
|
||||
unit: "GB",
|
||||
type: 'number'
|
||||
},
|
||||
{
|
||||
display: "Date",
|
||||
display: GetLocale("Date"),
|
||||
value: "date",
|
||||
type: 'date'
|
||||
}
|
||||
],
|
||||
Operator: [
|
||||
// {
|
||||
// display: "equal",
|
||||
// value: "eq"
|
||||
// },
|
||||
// {
|
||||
// display: "not equal",
|
||||
// value: "neq"
|
||||
// },
|
||||
{
|
||||
display: "equal",
|
||||
value: "eq"
|
||||
},
|
||||
{
|
||||
display: "not equal",
|
||||
value: "neq"
|
||||
},
|
||||
{
|
||||
display: "larger than",
|
||||
display: GetLocale("larger than"),
|
||||
value: "lgt"
|
||||
},
|
||||
{
|
||||
display: "less than",
|
||||
value: "lst"
|
||||
},
|
||||
// {
|
||||
// display: "less than",
|
||||
// value: "lst"
|
||||
// },
|
||||
],
|
||||
Action: [
|
||||
{
|
||||
display: "Restrict Peer",
|
||||
display: GetLocale("Restrict Peer"),
|
||||
value: "restrict"
|
||||
},
|
||||
{
|
||||
display: "Delete Peer",
|
||||
display: GetLocale("Delete Peer"),
|
||||
value: "delete"
|
||||
}
|
||||
]
|
||||
|
||||
@ -66,18 +66,69 @@
|
||||
"Real Time Received Data Usage": "实时接收数据量",
|
||||
"Real Time Sent Data Usage": "实时发送数据量",
|
||||
"Peer": "端点",
|
||||
"Peer Settings": "端点设定",
|
||||
"Download All": "全部下载",
|
||||
"Search Peers\\.\\.\\.": "搜索端点...",
|
||||
"Display": "显示设置",
|
||||
"Sort By": "排列方式",
|
||||
"Refresh Interval": "刷新间隔",
|
||||
"Name": "名字",
|
||||
"Allowed IP": "允许 IP 地址",
|
||||
"Allowed IPs": "允许的 IP 地址",
|
||||
"Restricted": "已限制端点",
|
||||
"(.*) Seconds": "$1 秒",
|
||||
"(.*) Minutes": "$1 分钟",
|
||||
"Configuration Settings": "配置设定",
|
||||
"Peer Jobs": "端点任务",
|
||||
"Active Jobs": "未运行任务",
|
||||
"Logs": "日志"
|
||||
"All Active Jobs": "所有未运行任务",
|
||||
"Logs": "日志",
|
||||
"Private Key": "秘钥",
|
||||
"\\(Required for QR Code and Download\\)": "（二维码以及下载功能需要填写秘钥）",
|
||||
"\\(Required\\)": "（必填项）",
|
||||
"Endpoint Allowed IPs": "终结点允许的 IP 地址",
|
||||
"DNS": "域名系统（DNS）",
|
||||
"Optional Settings": "可选设定",
|
||||
"Pre-Shared Key": "共享秘钥",
|
||||
"MTU": "最大传输单元",
|
||||
"Persistent Keepalive": "持久保持活动",
|
||||
"Reset Data Usage": "重置数据用量",
|
||||
"Total": "总数据",
|
||||
"Sent": "发送数据",
|
||||
"Received": "接收数据",
|
||||
"Revert": "撤销更改",
|
||||
"Save Peer": "保存端点",
|
||||
"QR Code": "二维码",
|
||||
"Schedule Jobs": "计划任务",
|
||||
"Job": "任务",
|
||||
"Job ID": "任务 ID",
|
||||
"Unsaved Job": "未保存任务",
|
||||
"This peer does not have any job yet\\.": "此端点还没有任何任务",
|
||||
"if": "如果",
|
||||
"is": "是",
|
||||
"then": "那就",
|
||||
"larger than": "大于",
|
||||
"Date": "日期",
|
||||
"Restrict Peer": "限制端点",
|
||||
"Delete Peer": "删除端点",
|
||||
"Edit": "编辑",
|
||||
"Delete": "删除",
|
||||
"Cancel": "取消",
|
||||
"Save": "保存",
|
||||
"No active job at the moment\\.": "没有未运行的任务",
|
||||
"Jobs Logs": "任务日志",
|
||||
"Updated at": "更新于",
|
||||
"Refresh": "刷新",
|
||||
"Filter": "筛选",
|
||||
"Success": "成功",
|
||||
"Failed": "失败",
|
||||
"Log ID": "任务 ID",
|
||||
"Message": "消息",
|
||||
"Share Peer": "分享端点",
|
||||
"Currently the peer is not sharing": "此端点未被共享",
|
||||
"Sharing\\.\\.\\.": "分享中...",
|
||||
"Start Sharing": "开始分享",
|
||||
"Stop Sharing\\.\\.\\.": "停止分享中...",
|
||||
"Stop Sharing": "停止分享",
|
||||
"Access Restricted": "已限制访问",
|
||||
"Download \\& QR Code is not available due to no private key set for this peer": "下载以及二维码功能不可用，需要填写此端点的秘钥"
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user