Mirrors/OpenDTU
2
0
Fork 0
mirror of https://github.com/tbnobody/OpenDTU.git synced 2025-12-15 11:19:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

webapp: Implement BasePage component for default views

Browse Source
This commit is contained in:
Thomas Basler
2022-10-18 18:25:50 +02:00
parent 93512e2e0c
commit 03066af1c4
14 changed files with 795 additions and 864 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
webapp/src/views/NtpAdminView.vue
View File

@@ -1,97 +1,85 @@
<template>
<div class="container-xxl" role="main">
<div class="page-header">
<h1>NTP Settings</h1>
</div>
<BasePage :title="'NTP Settings'" :isLoading="dataLoading || timezoneLoading">
<BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
{{ alertMessage }}
</BootstrapAlert>
<div class="text-center" v-if="dataLoading || timezoneLoading">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<template v-if="!dataLoading && !timezoneLoading">
<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>
</template>
<template v-if="!dataLoading && !timezoneLoading">
<form @submit="saveNtpConfig">
<div class="card">
<div class="card-header text-white bg-primary">Manual Time Synchronization</div>
<div class="card-header text-white bg-primary">NTP Configuration</div>
<div class="card-body">
<div class="row mb-3">
<label for="currentMcuTime" class="col-sm-2 col-form-label">Current OpenDTU Time:</label>
<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="currentMcuTime" v-model="mcuTime" disabled />
<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="currentLocalTime" class="col-sm-2 col-form-label">Current Local Time:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="currentLocalTime" v-model="localTime"
disabled />
</div>
</div>
<div class="text-center mb-3">
<button type="button" class="btn btn-danger" @click="setCurrentTime()"
title="Synchronize Time">Synchronize Time
</button>
</div>
<div class="alert alert-secondary" role="alert">
<b>Hint:</b> You can use the manual time synchronization to set the current time of OpenDTU if
no NTP server is available. But be aware, that in case of power cycle the time gets lost. Also
the time accurancy can be very bad as it is not resynchronised regularly.
</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>
</template>
</div>
<button type="submit" class="btn btn-primary mb-3">Save</button>
</form>
<div class="card">
<div class="card-header text-white bg-primary">Manual Time Synchronization</div>
<div class="card-body">
<div class="row mb-3">
<label for="currentMcuTime" class="col-sm-2 col-form-label">Current OpenDTU Time:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="currentMcuTime" v-model="mcuTime" disabled />
</div>
</div>
<div class="row mb-3">
<label for="currentLocalTime" class="col-sm-2 col-form-label">Current Local Time:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="currentLocalTime" v-model="localTime" disabled />
</div>
</div>
<div class="text-center mb-3">
<button type="button" class="btn btn-danger" @click="setCurrentTime()"
title="Synchronize Time">Synchronize Time
</button>
</div>
<div class="alert alert-secondary" role="alert">
<b>Hint:</b> You can use the manual time synchronization to set the current time of OpenDTU if
no NTP server is available. But be aware, that in case of power cycle the time gets lost. Also
the time accurancy can be very bad as it is not resynchronised regularly.
</div>
</div>
</div>
</BasePage>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import BasePage from '@/components/BasePage.vue';
import BootstrapAlert from "@/components/BootstrapAlert.vue";
import type { NtpConfig } from "@/types/NtpConfig";
export default defineComponent({
components: {
BasePage,
BootstrapAlert,
},
data() {