Mirrors/OpenDTU
2
0
Fork 0
mirror of https://github.com/tbnobody/OpenDTU.git synced 2025-12-16 23:31:04 +01:00
Code Issues Packages Projects Releases Wiki Activity

webapp: Use volar formatter

Browse Source
This commit is contained in:
Thomas Basler
2022-06-21 20:32:43 +02:00
parent cd35261570
commit 5100c44c23
24 changed files with 1759 additions and 2077 deletions
Download Patch File Download Diff File Expand all files Collapse all files

230
webapp/src/components/NtpAdminView.vue
View File

@@ -1,69 +1,47 @@
<template>
<div class="container" role="main">
<div class="page-header">
<h1>NTP Settings</h1>
</div>
<BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
{{ this.alertMessage }}
</BootstrapAlert>
<form @submit="saveNtpConfig">
<div class="card">
<div class="card-header text-white bg-primary">NTP Configuration</div>
<div class="card-body">
<div class="row mb-3">
<label for="inputNtpServer" class="col-sm-2 col-form-label"
>Time Server:</label
>
<div class="col-sm-10">
<input
type="text"
class="form-control"
id="inputNtpServer"
maxlength="32"
placeholder="Time Server"
v-model="ntpConfigList.ntp_server"
/>
</div>
</div>
<div class="row mb-3">
<label for="inputTimezone" class="col-sm-2 col-form-label"
>Timezone:</label
>
<div class="col-sm-10">
<select class="form-select" v-model="timezoneSelect">
<option
v-for="(config, name) in timezoneList"
:key="name + '---' + config"
:value="name + '---' + config"
>
{{ name }}
</option>
</select>
</div>
</div>
<div class="row mb-3">
<label for="inputTimezoneConfig" class="col-sm-2 col-form-label"
>Timezone Config:</label
>
<div class="col-sm-10">
<input
type="text"
class="form-control"
id="inputTimezoneConfig"
maxlength="32"
placeholder="Timezone"
v-model="ntpConfigList.ntp_timezone"
disabled
/>
</div>
</div>
<div class="container" role="main">
<div class="page-header">
<h1>NTP Settings</h1>
</div>
</div>
<button type="submit" class="btn btn-primary mb-3">Save</button>
</form>
</div>
<BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
{{ this.alertMessage }}
</BootstrapAlert>
<form @submit="saveNtpConfig">
<div class="card">
<div class="card-header text-white bg-primary">NTP Configuration</div>
<div class="card-body">
<div class="row mb-3">
<label for="inputNtpServer" class="col-sm-2 col-form-label">Time Server:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputNtpServer" maxlength="32"
placeholder="Time Server" v-model="ntpConfigList.ntp_server" />
</div>
</div>
<div class="row mb-3">
<label for="inputTimezone" class="col-sm-2 col-form-label">Timezone:</label>
<div class="col-sm-10">
<select class="form-select" v-model="timezoneSelect">
<option v-for="(config, name) in timezoneList" :key="name + '---' + config"
:value="name + '---' + config">
{{ name }}
</option>
</select>
</div>
</div>
<div class="row mb-3">
<label for="inputTimezoneConfig" class="col-sm-2 col-form-label">Timezone Config:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputTimezoneConfig" maxlength="32"
placeholder="Timezone" v-model="ntpConfigList.ntp_timezone" disabled />
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary mb-3">Save</button>
</form>
</div>
</template>
<script>
@@ -71,73 +49,73 @@ import { defineComponent } from 'vue';
import BootstrapAlert from "@/components/partials/BootstrapAlert.vue";
export default defineComponent({
components: {
BootstrapAlert,
},
data() {
return {
ntpConfigList: [],
timezoneList: {},
timezoneSelect: "",
alertMessage: "",
alertType: "info",
showAlert: false,
};
},
watch: {
timezoneSelect: function (newValue) {
this.ntpConfigList.ntp_timezone = newValue.split("---")[1];
this.ntpConfigList.ntp_timezone_descr = newValue.split("---")[0];
components: {
BootstrapAlert,
},
},
created() {
this.getTimezoneList();
this.getNtpConfig();
},
methods: {
getTimezoneList() {
fetch("/zones.json")
.then((response) => response.json())
.then((data) => (this.timezoneList = data));
data() {
return {
ntpConfigList: [],
timezoneList: {},
timezoneSelect: "",
alertMessage: "",
alertType: "info",
showAlert: false,
};
},
getNtpConfig() {
fetch("/api/ntp/config")
.then((response) => response.json())
.then(
function (data) {
this.ntpConfigList = data;
this.timezoneSelect =
this.ntpConfigList.ntp_timezone_descr +
"---" +
this.ntpConfigList.ntp_timezone;
}.bind(this)
);
watch: {
timezoneSelect: function (newValue) {
this.ntpConfigList.ntp_timezone = newValue.split("---")[1];
this.ntpConfigList.ntp_timezone_descr = newValue.split("---")[0];
},
},
saveNtpConfig(e) {
e.preventDefault();
created() {
this.getTimezoneList();
this.getNtpConfig();
},
methods: {
getTimezoneList() {
fetch("/zones.json")
.then((response) => response.json())
.then((data) => (this.timezoneList = data));
},
getNtpConfig() {
fetch("/api/ntp/config")
.then((response) => response.json())
.then(
function (data) {
this.ntpConfigList = data;
this.timezoneSelect =
this.ntpConfigList.ntp_timezone_descr +
"---" +
this.ntpConfigList.ntp_timezone;
}.bind(this)
);
},
saveNtpConfig(e) {
e.preventDefault();
const formData = new FormData();
formData.append("data", JSON.stringify(this.ntpConfigList));
const formData = new FormData();
formData.append("data", JSON.stringify(this.ntpConfigList));
fetch("/api/ntp/config", {
method: "POST",
body: formData,
})
.then(function (response) {
if (response.status != 200) {
throw response.status;
} else {
return response.json();
}
})
.then(
function (response) {
this.alertMessage = response.message;
this.alertType = response.type;
this.showAlert = true;
}.bind(this)
);
fetch("/api/ntp/config", {
method: "POST",
body: formData,
})
.then(function (response) {
if (response.status != 200) {
throw response.status;
} else {
return response.json();
}
})
.then(
function (response) {
this.alertMessage = response.message;
this.alertType = response.type;
this.showAlert = true;
}.bind(this)
);
},
},
},
});
</script>