mirror of
https://github.com/louislam/uptime-kuma.git
synced 2025-08-21 11:35:15 +08:00
Autofix on save
This commit is contained in:
Adam Stachowicz
@@ -1,36 +1,33 @@
|
||||
<template>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-5 col-xl-4">
|
||||
<div v-if="! $root.isMobile">
|
||||
<router-link to="/add" class="btn btn-primary"><font-awesome-icon icon="plus" /> Add New Monitor</router-link>
|
||||
<router-link to="/add" class="btn btn-primary">
|
||||
<font-awesome-icon icon="plus" /> Add New Monitor
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<div class="shadow-box list mb-4" v-if="showList">
|
||||
|
||||
<div class="text-center mt-3" v-if="Object.keys($root.monitorList).length === 0">
|
||||
No Monitors, please <router-link to="/add">add one</router-link>.
|
||||
<div v-if="showList" class="shadow-box list mb-4">
|
||||
<div v-if="Object.keys($root.monitorList).length === 0" class="text-center mt-3">
|
||||
No Monitors, please <router-link to="/add">
|
||||
add one
|
||||
</router-link>.
|
||||
</div>
|
||||
|
||||
<router-link :to="monitorURL(item.id)" class="item" :class="{ 'disabled': ! item.active }" v-for="(item, index) in sortedMonitorList" @click="$root.cancelActiveList" :key="index">
|
||||
|
||||
<router-link v-for="(item, index) in sortedMonitorList" :key="index" :to="monitorURL(item.id)" class="item" :class="{ 'disabled': ! item.active }" @click="$root.cancelActiveList">
|
||||
<div class="row">
|
||||
<div class="col-6 col-md-8 small-padding">
|
||||
|
||||
<div class="col-6 col-md-8 small-padding">
|
||||
<div class="info">
|
||||
<Uptime :monitor="item" type="24" :pill="true" />
|
||||
{{ item.name }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col-6 col-md-4">
|
||||
<div class="col-6 col-md-4">
|
||||
<HeartbeatBar size="small" :monitor-id="item.id" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</router-link>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-7 col-xl-8">
|
||||
@@ -38,7 +35,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -49,12 +45,10 @@ import Uptime from "../components/Uptime.vue";
|
||||
export default {
|
||||
components: {
|
||||
Uptime,
|
||||
HeartbeatBar
|
||||
HeartbeatBar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
return {}
|
||||
},
|
||||
computed: {
|
||||
sortedMonitorList() {
|
||||
@@ -94,8 +88,8 @@ export default {
|
||||
methods: {
|
||||
monitorURL(id) {
|
||||
return "/dashboard/" + id;
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,15 +1,16 @@
|
||||
<template>
|
||||
|
||||
<div v-if="$route.name === 'DashboardHome'">
|
||||
<h1 class="mb-3">Quick Stats</h1>
|
||||
<h1 class="mb-3">
|
||||
Quick Stats
|
||||
</h1>
|
||||
|
||||
<div class="shadow-box big-padding text-center">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="col">
|
||||
<h3>Up</h3>
|
||||
<span class="num">{{ stats.up }}</span>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="col">
|
||||
<h3>Down</h3>
|
||||
<span class="num text-danger">{{ stats.down }}</span>
|
||||
</div>
|
||||
@@ -22,16 +23,16 @@
|
||||
<span class="num text-secondary">{{ stats.pause }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" v-if="false">
|
||||
<div v-if="false" class="row">
|
||||
<div class="col-3">
|
||||
<h3>Uptime</h3>
|
||||
<p>(24-hour)</p>
|
||||
<span class="num"></span>
|
||||
<span class="num" />
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<h3>Uptime</h3>
|
||||
<p>(30-day)</p>
|
||||
<span class="num"></span>
|
||||
<span class="num" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -39,32 +40,35 @@
|
||||
<div class="shadow-box" style="margin-top: 25px;">
|
||||
<table class="table table-borderless table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Status</th>
|
||||
<th>DateTime</th>
|
||||
<th>Message</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Status</th>
|
||||
<th>DateTime</th>
|
||||
<th>Message</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(beat, index) in displayedRecords" :key="index">
|
||||
<td>{{ beat.name }}</td>
|
||||
<td><Status :status="beat.status" /></td>
|
||||
<td><Datetime :value="beat.time" /></td>
|
||||
<td>{{ beat.msg }}</td>
|
||||
</tr>
|
||||
<tr v-for="(beat, index) in displayedRecords" :key="index">
|
||||
<td>{{ beat.name }}</td>
|
||||
<td><Status :status="beat.status" /></td>
|
||||
<td><Datetime :value="beat.time" /></td>
|
||||
<td>{{ beat.msg }}</td>
|
||||
</tr>
|
||||
|
||||
<tr v-if="importantHeartBeatList.length === 0">
|
||||
<td colspan="4">No important events</td>
|
||||
</tr>
|
||||
<tr v-if="importantHeartBeatList.length === 0">
|
||||
<td colspan="4">
|
||||
No important events
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="d-flex justify-content-center kuma_pagination">
|
||||
<pagination
|
||||
v-model="page"
|
||||
:records=importantHeartBeatList.length
|
||||
:per-page="perPage" />
|
||||
:records="importantHeartBeatList.length"
|
||||
:per-page="perPage"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -111,7 +115,7 @@ export default {
|
||||
} else if (beat.status === 0) {
|
||||
result.down++;
|
||||
} else if (beat.status === 2) {
|
||||
result.up++;
|
||||
result.up++;
|
||||
} else {
|
||||
result.unknown++;
|
||||
}
|
||||
@@ -127,7 +131,7 @@ export default {
|
||||
let result = [];
|
||||
|
||||
for (let monitorID in this.$root.importantHeartbeatList) {
|
||||
let list = this.$root.importantHeartbeatList[monitorID]
|
||||
let list = this.$root.importantHeartbeatList[monitorID]
|
||||
result = result.concat(list);
|
||||
}
|
||||
|
||||
@@ -142,11 +146,11 @@ export default {
|
||||
result.sort((a, b) => {
|
||||
if (a.time > b.time) {
|
||||
return -1;
|
||||
} else if (a.time < b.time) {
|
||||
} if (a.time < b.time) {
|
||||
return 1;
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
|
||||
return 0;
|
||||
});
|
||||
|
||||
this.heartBeatList = result;
|
||||
@@ -159,7 +163,7 @@ export default {
|
||||
const endIndex = startIndex + this.perPage;
|
||||
return this.heartBeatList.slice(startIndex, endIndex);
|
||||
},
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,20 +1,28 @@
|
||||
<template>
|
||||
<h1> {{ monitor.name }}</h1>
|
||||
<p class="url">
|
||||
<a :href="monitor.url" target="_blank" v-if="monitor.type === 'http' || monitor.type === 'keyword' ">{{ monitor.url }}</a>
|
||||
<a v-if="monitor.type === 'http' || monitor.type === 'keyword' " :href="monitor.url" target="_blank">{{ monitor.url }}</a>
|
||||
<span v-if="monitor.type === 'port'">TCP Ping {{ monitor.hostname }}:{{ monitor.port }}</span>
|
||||
<span v-if="monitor.type === 'ping'">Ping: {{ monitor.hostname }}</span>
|
||||
<span v-if="monitor.type === 'keyword'">
|
||||
<br />
|
||||
<br>
|
||||
<span>Keyword:</span> <span style="color: black">{{ monitor.keyword }}</span>
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<div class="functions">
|
||||
<button class="btn btn-light" @click="pauseDialog" v-if="monitor.active"><font-awesome-icon icon="pause" /> Pause</button>
|
||||
<button class="btn btn-primary" @click="resumeMonitor" v-if="! monitor.active"><font-awesome-icon icon="pause" /> Resume</button>
|
||||
<router-link :to=" '/edit/' + monitor.id " class="btn btn-secondary"><font-awesome-icon icon="edit" /> Edit</router-link>
|
||||
<button class="btn btn-danger" @click="deleteDialog"><font-awesome-icon icon="trash" /> Delete</button>
|
||||
<button v-if="monitor.active" class="btn btn-light" @click="pauseDialog">
|
||||
<font-awesome-icon icon="pause" /> Pause
|
||||
</button>
|
||||
<button v-if="! monitor.active" class="btn btn-primary" @click="resumeMonitor">
|
||||
<font-awesome-icon icon="pause" /> Resume
|
||||
</button>
|
||||
<router-link :to=" '/edit/' + monitor.id " class="btn btn-secondary">
|
||||
<font-awesome-icon icon="edit" /> Edit
|
||||
</router-link>
|
||||
<button class="btn btn-danger" @click="deleteDialog">
|
||||
<font-awesome-icon icon="trash" /> Delete
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="shadow-box">
|
||||
@@ -52,40 +60,50 @@
|
||||
<span class="num"><Uptime :monitor="monitor" type="720" /></span>
|
||||
</div>
|
||||
|
||||
<div class="col" v-if="certInfo">
|
||||
<div v-if="certInfo" class="col">
|
||||
<h4>CertExp.</h4>
|
||||
<p>(<Datetime :value="certInfo.validTo" date-only />)</p>
|
||||
<span class="num" >
|
||||
<a href="#" @click.prevent="toggleCertInfoBox = !toggleCertInfoBox">{{certInfo.daysRemaining}} days</a>
|
||||
<span class="num">
|
||||
<a href="#" @click.prevent="toggleCertInfoBox = !toggleCertInfoBox">{{ certInfo.daysRemaining }} days</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="shadow-box big-padding text-center" v-if="showCertInfoBox">
|
||||
<div v-if="showCertInfoBox" class="shadow-box big-padding text-center">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h4>Certificate Info</h4>
|
||||
<table class="text-start">
|
||||
<tbody>
|
||||
<tr class="my-3">
|
||||
<td class="px-3">Valid: </td>
|
||||
<td class="px-3">
|
||||
Valid:
|
||||
</td>
|
||||
<td>{{ certInfo.valid }}</td>
|
||||
</tr>
|
||||
<tr class="my-3">
|
||||
<td class="px-3">Valid To: </td>
|
||||
<td class="px-3">
|
||||
Valid To:
|
||||
</td>
|
||||
<td><Datetime :value="certInfo.validTo" /></td>
|
||||
</tr>
|
||||
<tr class="my-3">
|
||||
<td class="px-3">Days Remaining: </td>
|
||||
<td class="px-3">
|
||||
Days Remaining:
|
||||
</td>
|
||||
<td>{{ certInfo.daysRemaining }}</td>
|
||||
</tr>
|
||||
<tr class="my-3">
|
||||
<td class="px-3">Issuer: </td>
|
||||
<td class="px-3">
|
||||
Issuer:
|
||||
</td>
|
||||
<td>{{ certInfo.issuer }}</td>
|
||||
</tr>
|
||||
<tr class="my-3">
|
||||
<td class="px-3">Fingerprint: </td>
|
||||
<td class="px-3">
|
||||
Fingerprint:
|
||||
</td>
|
||||
<td>{{ certInfo.fingerprint }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@@ -111,7 +129,9 @@
|
||||
</tr>
|
||||
|
||||
<tr v-if="importantHeartBeatList.length === 0">
|
||||
<td colspan="3">No important events</td>
|
||||
<td colspan="3">
|
||||
No important events
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -119,8 +139,9 @@
|
||||
<div class="d-flex justify-content-center kuma_pagination">
|
||||
<pagination
|
||||
v-model="page"
|
||||
:records=importantHeartBeatList.length
|
||||
:per-page="perPage" />
|
||||
:records="importantHeartBeatList.length"
|
||||
:per-page="perPage"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -128,13 +149,13 @@
|
||||
Are you sure want to pause?
|
||||
</Confirm>
|
||||
|
||||
<Confirm ref="confirmDelete" btnStyle="btn-danger" @yes="deleteMonitor">
|
||||
<Confirm ref="confirmDelete" btn-style="btn-danger" @yes="deleteMonitor">
|
||||
Are you sure want to delete this monitor?
|
||||
</Confirm>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useToast } from 'vue-toastification'
|
||||
import { useToast } from "vue-toastification"
|
||||
const toast = useToast()
|
||||
import Confirm from "../components/Confirm.vue";
|
||||
import HeartbeatBar from "../components/HeartbeatBar.vue";
|
||||
@@ -153,9 +174,6 @@ export default {
|
||||
Confirm,
|
||||
Status,
|
||||
Pagination,
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -170,9 +188,9 @@ export default {
|
||||
pingTitle() {
|
||||
if (this.monitor.type === "http") {
|
||||
return "Response"
|
||||
} else {
|
||||
return "Ping"
|
||||
}
|
||||
|
||||
return "Ping"
|
||||
},
|
||||
|
||||
monitor() {
|
||||
@@ -183,50 +201,52 @@ export default {
|
||||
lastHeartBeat() {
|
||||
if (this.monitor.id in this.$root.lastHeartbeatList && this.$root.lastHeartbeatList[this.monitor.id]) {
|
||||
return this.$root.lastHeartbeatList[this.monitor.id]
|
||||
} else {
|
||||
return { status: -1 }
|
||||
}
|
||||
|
||||
return {
|
||||
status: -1,
|
||||
}
|
||||
},
|
||||
|
||||
ping() {
|
||||
if (this.lastHeartBeat.ping || this.lastHeartBeat.ping === 0) {
|
||||
return this.lastHeartBeat.ping;
|
||||
} else {
|
||||
return "N/A"
|
||||
}
|
||||
|
||||
return "N/A"
|
||||
},
|
||||
|
||||
avgPing() {
|
||||
if (this.$root.avgPingList[this.monitor.id] || this.$root.avgPingList[this.monitor.id] === 0) {
|
||||
return this.$root.avgPingList[this.monitor.id];
|
||||
} else {
|
||||
return "N/A"
|
||||
}
|
||||
|
||||
return "N/A"
|
||||
},
|
||||
|
||||
importantHeartBeatList() {
|
||||
if (this.$root.importantHeartbeatList[this.monitor.id]) {
|
||||
this.heartBeatList = this.$root.importantHeartbeatList[this.monitor.id];
|
||||
return this.$root.importantHeartbeatList[this.monitor.id]
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
|
||||
return [];
|
||||
},
|
||||
|
||||
status() {
|
||||
if (this.$root.statusList[this.monitor.id]) {
|
||||
return this.$root.statusList[this.monitor.id]
|
||||
} else {
|
||||
return { }
|
||||
}
|
||||
|
||||
return { }
|
||||
},
|
||||
|
||||
certInfo() {
|
||||
if (this.$root.certInfoList[this.monitor.id]) {
|
||||
return this.$root.certInfoList[this.monitor.id]
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
|
||||
return null
|
||||
},
|
||||
|
||||
showCertInfoBox() {
|
||||
@@ -238,6 +258,9 @@ export default {
|
||||
const endIndex = startIndex + this.perPage;
|
||||
return this.heartBeatList.slice(startIndex, endIndex);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
testNotification() {
|
||||
@@ -274,9 +297,9 @@ export default {
|
||||
toast.error(res.msg);
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,85 +1,102 @@
|
||||
<template>
|
||||
<h1 class="mb-3">{{ pageName }}</h1>
|
||||
<h1 class="mb-3">
|
||||
{{ pageName }}
|
||||
</h1>
|
||||
<form @submit.prevent="submit">
|
||||
|
||||
<div class="shadow-box">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h2>General</h2>
|
||||
<div class="shadow-box">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h2>General</h2>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="type" class="form-label">Monitor Type</label>
|
||||
<select class="form-select" aria-label="Default select example" id="type" v-model="monitor.type">
|
||||
<option value="http">HTTP(s)</option>
|
||||
<option value="port">TCP Port</option>
|
||||
<option value="ping">Ping</option>
|
||||
<option value="keyword">HTTP(s) - Keyword</option>
|
||||
<select id="type" v-model="monitor.type" class="form-select" aria-label="Default select example">
|
||||
<option value="http">
|
||||
HTTP(s)
|
||||
</option>
|
||||
<option value="port">
|
||||
TCP Port
|
||||
</option>
|
||||
<option value="ping">
|
||||
Ping
|
||||
</option>
|
||||
<option value="keyword">
|
||||
HTTP(s) - Keyword
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="name" class="form-label">Friendly Name</label>
|
||||
<input type="text" class="form-control" id="name" v-model="monitor.name" required>
|
||||
<input id="name" v-model="monitor.name" type="text" class="form-control" required>
|
||||
</div>
|
||||
|
||||
<div class="mb-3" v-if="monitor.type === 'http' || monitor.type === 'keyword' ">
|
||||
<div v-if="monitor.type === 'http' || monitor.type === 'keyword' " class="mb-3">
|
||||
<label for="url" class="form-label">URL</label>
|
||||
<input type="url" class="form-control" id="url" v-model="monitor.url" pattern="https?://.+" required>
|
||||
<input id="url" v-model="monitor.url" type="url" class="form-control" pattern="https?://.+" required>
|
||||
</div>
|
||||
|
||||
<div class="mb-3" v-if="monitor.type === 'keyword' ">
|
||||
<div v-if="monitor.type === 'keyword' " class="mb-3">
|
||||
<label for="keyword" class="form-label">Keyword</label>
|
||||
<input type="text" class="form-control" id="keyword" v-model="monitor.keyword" required>
|
||||
<div class="form-text">Search keyword in plain html or JSON response and it is case-sensitive</div>
|
||||
<input id="keyword" v-model="monitor.keyword" type="text" class="form-control" required>
|
||||
<div class="form-text">
|
||||
Search keyword in plain html or JSON response and it is case-sensitive
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3" v-if="monitor.type === 'port' || monitor.type === 'ping' ">
|
||||
<div v-if="monitor.type === 'port' || monitor.type === 'ping' " class="mb-3">
|
||||
<label for="hostname" class="form-label">Hostname</label>
|
||||
<input type="text" class="form-control" id="hostname" v-model="monitor.hostname" required>
|
||||
<input id="hostname" v-model="monitor.hostname" type="text" class="form-control" required>
|
||||
</div>
|
||||
|
||||
<div class="mb-3" v-if="monitor.type === 'port' ">
|
||||
<div v-if="monitor.type === 'port' " class="mb-3">
|
||||
<label for="port" class="form-label">Port</label>
|
||||
<input type="number" class="form-control" id="port" v-model="monitor.port" required min="0" max="65535" step="1">
|
||||
<input id="port" v-model="monitor.port" type="number" class="form-control" required min="0" max="65535" step="1">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="interval" class="form-label">Heartbeat Interval (Every {{ monitor.interval }} seconds)</label>
|
||||
<input type="number" class="form-control" id="interval" v-model="monitor.interval" required min="20" step="1">
|
||||
<input id="interval" v-model="monitor.interval" type="number" class="form-control" required min="20" step="1">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="maxRetries" class="form-label">Retries</label>
|
||||
<input type="number" class="form-control" id="maxRetries" v-model="monitor.maxretries" required min="0" step="1">
|
||||
<div class="form-text">Maximum retries before the service is marked as down and a notification is sent</div>
|
||||
<input id="maxRetries" v-model="monitor.maxretries" type="number" class="form-control" required min="0" step="1">
|
||||
<div class="form-text">
|
||||
Maximum retries before the service is marked as down and a notification is sent
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button class="btn btn-primary" type="submit" :disabled="processing">Save</button>
|
||||
<button class="btn btn-primary" type="submit" :disabled="processing">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
|
||||
<div class="mt-3" v-if="$root.isMobile"></div>
|
||||
|
||||
<h2>Notifications</h2>
|
||||
<p v-if="$root.notificationList.length === 0">Not available, please setup.</p>
|
||||
|
||||
<div class="form-check form-switch mb-3" :key="notification.id" v-for="notification in $root.notificationList">
|
||||
<input class="form-check-input" type="checkbox" :id=" 'notification' + notification.id" v-model="monitor.notificationIDList[notification.id]">
|
||||
|
||||
<label class="form-check-label" :for=" 'notification' + notification.id">
|
||||
{{ notification.name }}
|
||||
<a href="#" @click="$refs.notificationDialog.show(notification.id)">Edit</a>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-primary me-2" @click="$refs.notificationDialog.show()" type="button">Setup Notification</button>
|
||||
<div class="col-md-6">
|
||||
<div v-if="$root.isMobile" class="mt-3" />
|
||||
|
||||
<h2>Notifications</h2>
|
||||
<p v-if="$root.notificationList.length === 0">
|
||||
Not available, please setup.
|
||||
</p>
|
||||
|
||||
<div v-for="notification in $root.notificationList" :key="notification.id" class="form-check form-switch mb-3">
|
||||
<input :id=" 'notification' + notification.id" v-model="monitor.notificationIDList[notification.id]" class="form-check-input" type="checkbox">
|
||||
|
||||
<label class="form-check-label" :for=" 'notification' + notification.id">
|
||||
{{ notification.name }}
|
||||
<a href="#" @click="$refs.notificationDialog.show(notification.id)">Edit</a>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-primary me-2" type="button" @click="$refs.notificationDialog.show()">
|
||||
Setup Notification
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<NotificationDialog ref="notificationDialog" />
|
||||
@@ -87,15 +104,12 @@
|
||||
|
||||
<script>
|
||||
import NotificationDialog from "../components/NotificationDialog.vue";
|
||||
import { useToast } from 'vue-toastification'
|
||||
import { useToast } from "vue-toastification"
|
||||
const toast = useToast()
|
||||
|
||||
export default {
|
||||
components: {
|
||||
NotificationDialog
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
NotificationDialog,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -114,7 +128,15 @@ export default {
|
||||
},
|
||||
isEdit() {
|
||||
return this.$route.path.startsWith("/edit");
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
"$route.fullPath" () {
|
||||
this.init();
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
@@ -161,12 +183,7 @@ export default {
|
||||
this.$root.toastRes(res)
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$route.fullPath' () {
|
||||
this.init();
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,22 +1,29 @@
|
||||
<template>
|
||||
<h1 class="mb-3">Settings</h1>
|
||||
<h1 class="mb-3">
|
||||
Settings
|
||||
</h1>
|
||||
|
||||
<div class="shadow-box">
|
||||
<div class="row">
|
||||
|
||||
<div class="col-md-6">
|
||||
<h2>General</h2>
|
||||
<form class="mb-3" @submit.prevent="saveGeneral">
|
||||
<div class="mb-3">
|
||||
<label for="timezone" class="form-label">Timezone</label>
|
||||
<select class="form-select" id="timezone" v-model="$root.userTimezone">
|
||||
<option value="auto">Auto: {{ guessTimezone }}</option>
|
||||
<option v-for="(timezone, index) in timezoneList" :value="timezone.value" :key="index">{{ timezone.name }}</option>
|
||||
<select id="timezone" v-model="$root.userTimezone" class="form-select">
|
||||
<option value="auto">
|
||||
Auto: {{ guessTimezone }}
|
||||
</option>
|
||||
<option v-for="(timezone, index) in timezoneList" :key="index" :value="timezone.value">
|
||||
{{ timezone.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button class="btn btn-primary" type="submit">Save</button>
|
||||
<button class="btn btn-primary" type="submit">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -24,51 +31,58 @@
|
||||
<form class="mb-3" @submit.prevent="savePassword">
|
||||
<div class="mb-3">
|
||||
<label for="current-password" class="form-label">Current Password</label>
|
||||
<input type="password" class="form-control" id="current-password" required v-model="password.currentPassword">
|
||||
<input id="current-password" v-model="password.currentPassword" type="password" class="form-control" required>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="new-password" class="form-label">New Password</label>
|
||||
<input type="password" class="form-control" id="new-password" required v-model="password.newPassword">
|
||||
<input id="new-password" v-model="password.newPassword" type="password" class="form-control" required>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="repeat-new-password" class="form-label">Repeat New Password</label>
|
||||
<input type="password" class="form-control" :class="{ 'is-invalid' : invalidPassword }" id="repeat-new-password" required v-model="password.repeatNewPassword">
|
||||
<input id="repeat-new-password" v-model="password.repeatNewPassword" type="password" class="form-control" :class="{ 'is-invalid' : invalidPassword }" required>
|
||||
<div class="invalid-feedback">
|
||||
The repeat password does not match.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button class="btn btn-primary" type="submit">Update Password</button>
|
||||
<button class="btn btn-primary" type="submit">
|
||||
Update Password
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div>
|
||||
<button class="btn btn-danger" @click="$root.logout">Logout</button>
|
||||
<button class="btn btn-danger" @click="$root.logout">
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
|
||||
<div class="mt-3" v-if="$root.isMobile"></div>
|
||||
<div v-if="$root.isMobile" class="mt-3" />
|
||||
|
||||
<h2>Notifications</h2>
|
||||
<p v-if="$root.notificationList.length === 0">Not available, please setup.</p>
|
||||
<p v-else>Please assign a notification to monitor(s) to get it to work.</p>
|
||||
<p v-if="$root.notificationList.length === 0">
|
||||
Not available, please setup.
|
||||
</p>
|
||||
<p v-else>
|
||||
Please assign a notification to monitor(s) to get it to work.
|
||||
</p>
|
||||
|
||||
<ul class="list-group mb-3" style="border-radius: 1rem;">
|
||||
<li class="list-group-item" v-for="(notification, index) in $root.notificationList" :key="index">
|
||||
{{ notification.name }}<br />
|
||||
<li v-for="(notification, index) in $root.notificationList" :key="index" class="list-group-item">
|
||||
{{ notification.name }}<br>
|
||||
<a href="#" @click="$refs.notificationDialog.show(notification.id)">Edit</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<button class="btn btn-primary me-2" @click="$refs.notificationDialog.show()" type="button">Setup Notification</button>
|
||||
<button class="btn btn-primary me-2" type="button" @click="$refs.notificationDialog.show()">
|
||||
Setup Notification
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -77,18 +91,18 @@
|
||||
|
||||
<script>
|
||||
import dayjs from "dayjs";
|
||||
import utc from 'dayjs/plugin/utc'
|
||||
import timezone from 'dayjs/plugin/timezone'
|
||||
import utc from "dayjs/plugin/utc"
|
||||
import timezone from "dayjs/plugin/timezone"
|
||||
import NotificationDialog from "../components/NotificationDialog.vue";
|
||||
dayjs.extend(utc)
|
||||
dayjs.extend(timezone)
|
||||
import {timezoneList} from "../util-frontend";
|
||||
import { useToast } from 'vue-toastification'
|
||||
import { timezoneList } from "../util-frontend";
|
||||
import { useToast } from "vue-toastification"
|
||||
const toast = useToast()
|
||||
|
||||
export default {
|
||||
components: {
|
||||
NotificationDialog
|
||||
NotificationDialog,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -100,9 +114,14 @@ export default {
|
||||
currentPassword: "",
|
||||
newPassword: "",
|
||||
repeatNewPassword: "",
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
"password.repeatNewPassword"() {
|
||||
this.invalidPassword = false;
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
@@ -130,11 +149,6 @@ export default {
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
"password.repeatNewPassword"() {
|
||||
this.invalidPassword = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -2,38 +2,42 @@
|
||||
<div class="form-container">
|
||||
<div class="form">
|
||||
<form @submit.prevent="submit">
|
||||
|
||||
<div>
|
||||
<object width="64" height="64" data="/icon.svg"></object>
|
||||
<div style="font-size: 28px; font-weight: bold; margin-top: 5px;">Uptime Kuma</div>
|
||||
<object width="64" height="64" data="/icon.svg" />
|
||||
<div style="font-size: 28px; font-weight: bold; margin-top: 5px;">
|
||||
Uptime Kuma
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="mt-3">Create your admin account</p>
|
||||
<p class="mt-3">
|
||||
Create your admin account
|
||||
</p>
|
||||
|
||||
<div class="form-floating">
|
||||
<input type="text" class="form-control" id="floatingInput" placeholder="Username" v-model="username" required>
|
||||
<input id="floatingInput" v-model="username" type="text" class="form-control" placeholder="Username" required>
|
||||
<label for="floatingInput">Username</label>
|
||||
</div>
|
||||
|
||||
<div class="form-floating mt-3">
|
||||
<input type="password" class="form-control" id="floatingPassword" placeholder="Password" v-model="password" required>
|
||||
<input id="floatingPassword" v-model="password" type="password" class="form-control" placeholder="Password" required>
|
||||
<label for="floatingPassword">Password</label>
|
||||
</div>
|
||||
|
||||
<div class="form-floating mt-3">
|
||||
<input type="password" class="form-control" id="repeat" placeholder="Repeat Password" v-model="repeatPassword" required>
|
||||
<input id="repeat" v-model="repeatPassword" type="password" class="form-control" placeholder="Repeat Password" required>
|
||||
<label for="repeat">Repeat Password</label>
|
||||
</div>
|
||||
|
||||
<button class="w-100 btn btn-primary mt-3" type="submit" :disabled="processing">Create</button>
|
||||
|
||||
<button class="w-100 btn btn-primary mt-3" type="submit" :disabled="processing">
|
||||
Create
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useToast } from 'vue-toastification'
|
||||
import { useToast } from "vue-toastification"
|
||||
const toast = useToast()
|
||||
|
||||
export default {
|
||||
@@ -70,8 +74,8 @@ export default {
|
||||
this.$router.push("/")
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user