webapp: introduced InputElement and replace inputs with it
Thanks to @noicet
This commit is contained in:
Thomas Basler
parent
cd823ea3bc
commit
20083ecba5
112
webapp/src/components/InputElement.vue
Normal file
112
webapp/src/components/InputElement.vue
Normal file
@ -0,0 +1,112 @@
|
|||||||
|
<template>
|
||||||
|
<div class="row mb-3">
|
||||||
|
<label
|
||||||
|
:for="inputId"
|
||||||
|
:class="[ wide ? 'col-sm-4' : 'col-sm-2', isCheckbox ? 'form-check-label' : 'col-form-label' ]"
|
||||||
|
>
|
||||||
|
{{ label }}
|
||||||
|
<BIconInfoCircle v-if="tooltip !== undefined" v-tooltip :title="tooltip" />
|
||||||
|
</label>
|
||||||
|
<div :class="[ wide ? 'col-sm-8' : 'col-sm-10' ]">
|
||||||
|
<div v-if="!isTextarea"
|
||||||
|
:class="{'form-check form-switch': isCheckbox,
|
||||||
|
'input-group': postfix || prefix }"
|
||||||
|
>
|
||||||
|
<span v-if="prefix"
|
||||||
|
class="input-group-text"
|
||||||
|
:id="descriptionId"
|
||||||
|
>
|
||||||
|
{{ prefix }}
|
||||||
|
</span>
|
||||||
|
<input
|
||||||
|
v-model="model"
|
||||||
|
:class="[ isCheckbox ? 'form-check-input' : 'form-control' ]"
|
||||||
|
:id="inputId"
|
||||||
|
:placeholder="placeholder"
|
||||||
|
:type="type"
|
||||||
|
:maxlength="maxlength"
|
||||||
|
:min="min"
|
||||||
|
:max="max"
|
||||||
|
:disabled="disabled"
|
||||||
|
:aria-describedby="descriptionId"
|
||||||
|
/>
|
||||||
|
<span v-if="postfix"
|
||||||
|
class="input-group-text"
|
||||||
|
:id="descriptionId"
|
||||||
|
>
|
||||||
|
{{ postfix }}
|
||||||
|
</span>
|
||||||
|
<slot/>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<textarea
|
||||||
|
v-model="model"
|
||||||
|
class="form-control"
|
||||||
|
:id="inputId"
|
||||||
|
:maxlength="maxlength"
|
||||||
|
:rows="rows"
|
||||||
|
:disabled="disabled"
|
||||||
|
:placeholder="placeholder"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import {defineComponent} from 'vue';
|
||||||
|
import {BIconInfoCircle} from 'bootstrap-icons-vue';
|
||||||
|
export default defineComponent({
|
||||||
|
components: {
|
||||||
|
BIconInfoCircle,
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
'modelValue': [String, Number, Boolean, Date],
|
||||||
|
'label': String,
|
||||||
|
'placeholder': String,
|
||||||
|
'type': String,
|
||||||
|
'maxlength': String,
|
||||||
|
'min': String,
|
||||||
|
'max': String,
|
||||||
|
'rows': String,
|
||||||
|
'disabled': Boolean,
|
||||||
|
'postfix': String,
|
||||||
|
'prefix': String,
|
||||||
|
'wide': Boolean,
|
||||||
|
'tooltip': String,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
model: {
|
||||||
|
get(): any {
|
||||||
|
if (this.type === 'checkbox') return !!this.modelValue;
|
||||||
|
return this.modelValue;
|
||||||
|
},
|
||||||
|
set(value: any) {
|
||||||
|
this.$emit('update:modelValue', value);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
uniqueLabel() {
|
||||||
|
// normally, the label is sufficient to build a unique id
|
||||||
|
// if two inputs with the same label text on one page is required,
|
||||||
|
// use a unique placeholder even if it is a checkbox
|
||||||
|
return this.label?.replace(/[^A-Za-z0-9]/g, '') +
|
||||||
|
(this.placeholder ? this.placeholder.replace(/[^A-Za-z0-9]/g, '') : '');
|
||||||
|
},
|
||||||
|
inputId() {
|
||||||
|
return 'input' + this.uniqueLabel
|
||||||
|
},
|
||||||
|
descriptionId() {
|
||||||
|
return 'desc' + this.uniqueLabel;
|
||||||
|
},
|
||||||
|
isTextarea() {
|
||||||
|
return this.type === 'textarea';
|
||||||
|
},
|
||||||
|
isCheckbox() {
|
||||||
|
return this.type === 'checkbox';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
@ -8,31 +8,16 @@
|
|||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-header text-bg-primary">{{ $t('dtuadmin.DtuConfiguration') }}</div>
|
<div class="card-header text-bg-primary">{{ $t('dtuadmin.DtuConfiguration') }}</div>
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<div class="row mb-3">
|
|
||||||
<label for="inputDtuSerial" class="col-sm-2 col-form-label">{{ $t('dtuadmin.Serial') }}
|
|
||||||
<BIconInfoCircle v-tooltip :title="$t('dtuadmin.SerialHint')" />
|
|
||||||
</label>
|
|
||||||
<div class="col-sm-10">
|
|
||||||
<input type="number" class="form-control" id="inputDtuSerial" min="1" max="199999999999"
|
|
||||||
v-model="dtuConfigList.dtu_serial" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row mb-3">
|
<InputElement :label="$t('dtuadmin.Serial')"
|
||||||
<label for="inputPollInterval" class="col-sm-2 col-form-label">
|
v-model="dtuConfigList.dtu_serial"
|
||||||
{{ $t('dtuadmin.PollInterval') }}
|
type="number" min="1" max="199999999999"
|
||||||
</label>
|
:tooltip="$t('dtuadmin.SerialHint')"/>
|
||||||
<div class="col-sm-10">
|
|
||||||
<div class="input-group">
|
<InputElement :label="$t('dtuadmin.PollInterval')"
|
||||||
<input type="number" class="form-control" id="inputPollInterval" min="1" max="86400"
|
v-model="dtuConfigList.dtu_pollinterval"
|
||||||
v-model="dtuConfigList.dtu_pollinterval"
|
type="number" min="1" max="86400"
|
||||||
aria-describedby="pollIntervalDescription" />
|
:postfix="$t('dtuadmin.Seconds')"/>
|
||||||
<span class="input-group-text" id="pollIntervalDescription">
|
|
||||||
{{ $t('dtuadmin.Seconds') }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row mb-3">
|
<div class="row mb-3">
|
||||||
<label for="inputTimezone" class="col-sm-2 col-form-label">
|
<label for="inputTimezone" class="col-sm-2 col-form-label">
|
||||||
@ -58,6 +43,7 @@
|
|||||||
import { defineComponent } from 'vue';
|
import { defineComponent } from 'vue';
|
||||||
import BasePage from '@/components/BasePage.vue';
|
import BasePage from '@/components/BasePage.vue';
|
||||||
import BootstrapAlert from "@/components/BootstrapAlert.vue";
|
import BootstrapAlert from "@/components/BootstrapAlert.vue";
|
||||||
|
import InputElement from '@/components/InputElement.vue';
|
||||||
import { handleResponse, authHeader } from '@/utils/authentication';
|
import { handleResponse, authHeader } from '@/utils/authentication';
|
||||||
import type { DtuConfig } from "@/types/DtuConfig";
|
import type { DtuConfig } from "@/types/DtuConfig";
|
||||||
import {
|
import {
|
||||||
@ -69,6 +55,7 @@ export default defineComponent({
|
|||||||
BasePage,
|
BasePage,
|
||||||
BootstrapAlert,
|
BootstrapAlert,
|
||||||
BIconInfoCircle,
|
BIconInfoCircle,
|
||||||
|
InputElement,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|||||||
@ -8,29 +8,15 @@
|
|||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-header text-bg-primary">{{ $t('mqttadmin.MqttConfiguration') }}</div>
|
<div class="card-header text-bg-primary">{{ $t('mqttadmin.MqttConfiguration') }}</div>
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<div class="row mb-3">
|
|
||||||
<label class="col-sm-4 form-check-label" for="inputMqtt">
|
|
||||||
{{ $t('mqttadmin.EnableMqtt') }}
|
|
||||||
</label>
|
|
||||||
<div class="col-sm-8">
|
|
||||||
<div class="form-check form-switch">
|
|
||||||
<input class="form-check-input" type="checkbox" id="inputMqtt"
|
|
||||||
v-model="mqttConfigList.mqtt_enabled" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row mb-3" v-show="mqttConfigList.mqtt_enabled">
|
<InputElement :label="$t('mqttadmin.EnableMqtt')"
|
||||||
<label class="col-sm-4 form-check-label" for="inputMqttHass">
|
v-model="mqttConfigList.mqtt_enabled"
|
||||||
{{ $t('mqttadmin.EnableHass') }}
|
type="checkbox" wide/>
|
||||||
</label>
|
|
||||||
<div class="col-sm-8">
|
<InputElement v-show="mqttConfigList.mqtt_enabled"
|
||||||
<div class="form-check form-switch">
|
:label="$t('mqttadmin.EnableHass')"
|
||||||
<input class="form-check-input" type="checkbox" id="inputMqttHass"
|
v-model="mqttConfigList.mqtt_hass_enabled"
|
||||||
v-model="mqttConfigList.mqtt_hass_enabled" />
|
type="checkbox" wide/>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -39,201 +25,92 @@
|
|||||||
{{ $t('mqttadmin.MqttBrokerParameter') }}
|
{{ $t('mqttadmin.MqttBrokerParameter') }}
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<div class="row mb-3">
|
|
||||||
<label for="inputHostname" class="col-sm-2 col-form-label">
|
|
||||||
{{ $t('mqttadmin.Hostname') }}
|
|
||||||
</label>
|
|
||||||
<div class="col-sm-10">
|
|
||||||
<input type="text" class="form-control" id="inputHostname" maxlength="128"
|
|
||||||
:placeholder="$t('mqttadmin.HostnameHint')" v-model="mqttConfigList.mqtt_hostname" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row mb-3">
|
<InputElement :label="$t('mqttadmin.Hostname')"
|
||||||
<label for="inputPort" class="col-sm-2 col-form-label">
|
v-model="mqttConfigList.mqtt_hostname"
|
||||||
{{ $t('mqttadmin.Port') }}
|
type="text" maxlength="128"
|
||||||
</label>
|
:placeholder="$t('mqttadmin.HostnameHint')"/>
|
||||||
<div class="col-sm-10">
|
|
||||||
<input type="number" class="form-control" id="inputPort" min="1" max="65535"
|
|
||||||
v-model="mqttConfigList.mqtt_port" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row mb-3">
|
<InputElement :label="$t('mqttadmin.Port')"
|
||||||
<label for="inputUsername" class="col-sm-2 col-form-label">
|
v-model="mqttConfigList.mqtt_port"
|
||||||
{{ $t('mqttadmin.Username') }}
|
type="number" min="1" max="65535"/>
|
||||||
</label>
|
|
||||||
<div class="col-sm-10">
|
|
||||||
<input type="text" class="form-control" id="inputUsername" maxlength="64"
|
|
||||||
:placeholder="$t('mqttadmin.UsernameHint')" v-model="mqttConfigList.mqtt_username" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row mb-3">
|
<InputElement :label="$t('mqttadmin.Username')"
|
||||||
<label for="inputPassword" class="col-sm-2 col-form-label">
|
v-model="mqttConfigList.mqtt_username"
|
||||||
{{ $t('mqttadmin.Password') }}
|
type="text" maxlength="64"
|
||||||
</label>
|
:placeholder="$t('mqttadmin.UsernameHint')"/>
|
||||||
<div class="col-sm-10">
|
|
||||||
<input type="password" class="form-control" id="inputPassword" maxlength="64"
|
|
||||||
:placeholder="$t('mqttadmin.PasswordHint')" v-model="mqttConfigList.mqtt_password" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row mb-3">
|
<InputElement :label="$t('mqttadmin.Password')"
|
||||||
<label for="inputTopic" class="col-sm-2 col-form-label">
|
v-model="mqttConfigList.mqtt_password"
|
||||||
{{ $t('mqttadmin.BaseTopic') }}</label>
|
type="password" maxlength="64"
|
||||||
<div class="col-sm-10">
|
:placeholder="$t('mqttadmin.PasswordHint')"/>
|
||||||
<input type="text" class="form-control" id="inputTopic" maxlength="32"
|
|
||||||
:placeholder="$t('mqttadmin.BaseTopicHint')" v-model="mqttConfigList.mqtt_topic" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row mb-3">
|
<InputElement :label="$t('mqttadmin.BaseTopic')"
|
||||||
<label for="inputPublishInterval" class="col-sm-2 col-form-label">
|
v-model="mqttConfigList.mqtt_topic"
|
||||||
{{ $t('mqttadmin.PublishInterval') }}
|
type="text" maxlength="32"
|
||||||
</label>
|
:placeholder="$t('mqttadmin.BaseTopicHint')"/>
|
||||||
<div class="col-sm-10">
|
|
||||||
<div class="input-group">
|
|
||||||
<input type="number" class="form-control" id="inputPublishInterval" min="5" max="86400"
|
|
||||||
placeholder="Publish Interval in Seconds"
|
|
||||||
v-model="mqttConfigList.mqtt_publish_interval"
|
|
||||||
aria-describedby="publishIntervalDescription" />
|
|
||||||
<span class="input-group-text" id="publishIntervalDescription">
|
|
||||||
{{ $t('mqttadmin.Seconds') }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row mb-3">
|
<InputElement :label="$t('mqttadmin.PublishInterval')"
|
||||||
<label class="col-sm-2 form-check-label" for="inputRetain">
|
v-model="mqttConfigList.mqtt_publish_interval"
|
||||||
{{ $t('mqttadmin.EnableRetain') }}
|
type="number" min="5" max="86400"
|
||||||
</label>
|
:postfix="$t('mqttadmin.Seconds')"/>
|
||||||
<div class="col-sm-10">
|
|
||||||
<div class="form-check form-switch">
|
|
||||||
<input class="form-check-input" type="checkbox" id="inputRetain"
|
|
||||||
v-model="mqttConfigList.mqtt_retain" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row mb-3">
|
<InputElement :label="$t('mqttadmin.EnableRetain')"
|
||||||
<label class="col-sm-2 form-check-label" for="inputTls">
|
v-model="mqttConfigList.mqtt_retain"
|
||||||
{{ $t('mqttadmin.EnableTls') }}
|
type="checkbox"/>
|
||||||
</label>
|
|
||||||
<div class="col-sm-10">
|
|
||||||
<div class="form-check form-switch">
|
|
||||||
<input class="form-check-input" type="checkbox" id="inputTls"
|
|
||||||
v-model="mqttConfigList.mqtt_tls" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row mb-3" v-show="mqttConfigList.mqtt_tls">
|
<InputElement :label="$t('mqttadmin.EnableTls')"
|
||||||
<label for="inputCert" class="col-sm-2 col-form-label">
|
v-model="mqttConfigList.mqtt_tls"
|
||||||
{{ $t('mqttadmin.RootCa') }}
|
type="checkbox"/>
|
||||||
</label>
|
|
||||||
<div class="col-sm-10">
|
|
||||||
<textarea class="form-control" id="inputCert" maxlength="2048" rows="10"
|
|
||||||
v-model="mqttConfigList.mqtt_root_ca_cert">
|
|
||||||
</textarea>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
<InputElement v-show="mqttConfigList.mqtt_tls"
|
||||||
|
:label="$t('mqttadmin.RootCa')"
|
||||||
|
v-model="mqttConfigList.mqtt_root_ca_cert"
|
||||||
|
type="textarea" maxlength="2048" rows="10"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="card mt-5" v-show="mqttConfigList.mqtt_enabled">
|
<div class="card mt-5" v-show="mqttConfigList.mqtt_enabled">
|
||||||
<div class="card-header text-bg-primary">{{ $t('mqttadmin.LwtParameters') }}</div>
|
<div class="card-header text-bg-primary">{{ $t('mqttadmin.LwtParameters') }}</div>
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<div class="row mb-3">
|
|
||||||
<label for="inputLwtTopic" class="col-sm-2 col-form-label">
|
|
||||||
{{ $t('mqttadmin.LwtTopic') }}
|
|
||||||
</label>
|
|
||||||
<div class="col-sm-10">
|
|
||||||
<div class="input-group">
|
|
||||||
<span class="input-group-text" id="basic-addon3">
|
|
||||||
{{ mqttConfigList.mqtt_topic }}
|
|
||||||
</span>
|
|
||||||
<input type="text" class="form-control" id="inputLwtTopic" maxlength="32"
|
|
||||||
:placeholder="$t('mqttadmin.LwtTopicHint')" aria-describedby="basic-addon3"
|
|
||||||
v-model="mqttConfigList.mqtt_lwt_topic" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row mb-3">
|
<InputElement :label="$t('mqttadmin.LwtTopic')"
|
||||||
<label for="inputLwtOnline" class="col-sm-2 col-form-label">
|
v-model="mqttConfigList.mqtt_lwt_topic"
|
||||||
{{ $t('mqttadmin.LwtOnline') }}
|
type="text" maxlength="32" :prefix="mqttConfigList.mqtt_topic"
|
||||||
</label>
|
:placeholder="$t('mqttadmin.LwtTopicHint')"/>
|
||||||
<div class="col-sm-10">
|
|
||||||
<input type="text" class="form-control" id="inputLwtOnline" maxlength="20"
|
|
||||||
:placeholder="$t('mqttadmin.LwtOnlineHint')" v-model="mqttConfigList.mqtt_lwt_online" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row mb-3">
|
<InputElement :label="$t('mqttadmin.LwtOnline')"
|
||||||
<label for="inputLwtOffline" class="col-sm-2 col-form-label">
|
v-model="mqttConfigList.mqtt_lwt_online"
|
||||||
{{ $t('mqttadmin.LwtOffline') }}
|
type="text" maxlength="20"
|
||||||
</label>
|
:placeholder="$t('mqttadmin.LwtOnlineHint')"/>
|
||||||
<div class="col-sm-10">
|
|
||||||
<input type="text" class="form-control" id="inputLwtOffline" maxlength="20"
|
<InputElement :label="$t('mqttadmin.LwtOffline')"
|
||||||
:placeholder="$t('mqttadmin.LwtOfflineHint')"
|
v-model="mqttConfigList.mqtt_lwt_offline"
|
||||||
v-model="mqttConfigList.mqtt_lwt_offline" />
|
type="text" maxlength="20"
|
||||||
</div>
|
:placeholder="$t('mqttadmin.LwtOfflineHint')"/>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="card mt-5" v-show="mqttConfigList.mqtt_enabled && mqttConfigList.mqtt_hass_enabled">
|
<div class="card mt-5" v-show="mqttConfigList.mqtt_enabled && mqttConfigList.mqtt_hass_enabled">
|
||||||
<div class="card-header text-bg-primary">{{ $t('mqttadmin.HassParameters') }}</div>
|
<div class="card-header text-bg-primary">{{ $t('mqttadmin.HassParameters') }}</div>
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<div class="row mb-3">
|
|
||||||
<label for="inputHassTopic" class="col-sm-2 col-form-label">
|
|
||||||
{{ $t('mqttadmin.HassPrefixTopic') }}
|
|
||||||
</label>
|
|
||||||
<div class="col-sm-10">
|
|
||||||
<input type="text" class="form-control" id="inputHassTopic" maxlength="32"
|
|
||||||
:placeholder="$t('mqttadmin.HassPrefixTopicHint')"
|
|
||||||
v-model="mqttConfigList.mqtt_hass_topic" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row mb-3">
|
<InputElement :label="$t('mqttadmin.HassPrefixTopic')"
|
||||||
<label class="col-sm-2 form-check-label" for="inputHassRetain">
|
v-model="mqttConfigList.mqtt_hass_topic"
|
||||||
{{ $t('mqttadmin.HassRetain') }}
|
type="text" maxlength="32"
|
||||||
</label>
|
:placeholder="$t('mqttadmin.HassPrefixTopicHint')"/>
|
||||||
<div class="col-sm-10">
|
|
||||||
<div class="form-check form-switch">
|
|
||||||
<input class="form-check-input" type="checkbox" id="inputHassRetain"
|
|
||||||
v-model="mqttConfigList.mqtt_hass_retain" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row mb-3">
|
<InputElement :label="$t('mqttadmin.HassRetain')"
|
||||||
<label class="col-sm-2 form-check-label" for="inputHassExpire">
|
v-model="mqttConfigList.mqtt_hass_retain"
|
||||||
{{ $t('mqttadmin.HassExpire') }}
|
type="checkbox"/>
|
||||||
</label>
|
|
||||||
<div class="col-sm-10">
|
|
||||||
<div class="form-check form-switch">
|
|
||||||
<input class="form-check-input" type="checkbox" id="inputHassExpire"
|
|
||||||
v-model="mqttConfigList.mqtt_hass_expire" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row mb-3">
|
<InputElement :label="$t('mqttadmin.HassExpire')"
|
||||||
<label class="col-sm-2 form-check-label" for="inputIndividualPanels">
|
v-model="mqttConfigList.mqtt_hass_expire"
|
||||||
{{ $t('mqttadmin.HassIndividual') }}
|
type="checkbox"/>
|
||||||
</label>
|
|
||||||
<div class="col-sm-10">
|
|
||||||
<div class="form-check form-switch">
|
|
||||||
<input class="form-check-input" type="checkbox" id="inputIndividualPanels"
|
|
||||||
v-model="mqttConfigList.mqtt_hass_individualpanels" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
<InputElement :label="$t('mqttadmin.HassIndividual')"
|
||||||
|
v-model="mqttConfigList.mqtt_hass_individualpanels"
|
||||||
|
type="checkbox"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -246,6 +123,7 @@
|
|||||||
import { defineComponent } from 'vue';
|
import { defineComponent } from 'vue';
|
||||||
import BasePage from '@/components/BasePage.vue';
|
import BasePage from '@/components/BasePage.vue';
|
||||||
import BootstrapAlert from "@/components/BootstrapAlert.vue";
|
import BootstrapAlert from "@/components/BootstrapAlert.vue";
|
||||||
|
import InputElement from '@/components/InputElement.vue';
|
||||||
import { handleResponse, authHeader } from '@/utils/authentication';
|
import { handleResponse, authHeader } from '@/utils/authentication';
|
||||||
import type { MqttConfig } from "@/types/MqttConfig";
|
import type { MqttConfig } from "@/types/MqttConfig";
|
||||||
|
|
||||||
@ -253,6 +131,7 @@ export default defineComponent({
|
|||||||
components: {
|
components: {
|
||||||
BasePage,
|
BasePage,
|
||||||
BootstrapAlert,
|
BootstrapAlert,
|
||||||
|
InputElement,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|||||||
@ -8,50 +8,25 @@
|
|||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-header text-bg-primary">{{ $t('networkadmin.WifiConfiguration') }}</div>
|
<div class="card-header text-bg-primary">{{ $t('networkadmin.WifiConfiguration') }}</div>
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<div class="row mb-3">
|
|
||||||
<label for="inputSSID" class="col-sm-2 col-form-label">
|
|
||||||
{{ $t('networkadmin.WifiSsid') }}
|
|
||||||
</label>
|
|
||||||
<div class="col-sm-10">
|
|
||||||
<input type="text" class="form-control" id="inputSSID" maxlength="32"
|
|
||||||
v-model="networkConfigList.ssid" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row mb-3">
|
<InputElement :label="$t('networkadmin.WifiSsid')"
|
||||||
<label for="inputPassword" class="col-sm-2 col-form-label">
|
v-model="networkConfigList.ssid"
|
||||||
{{ $t('networkadmin.WifiPassword') }}
|
type="text" maxlength="32"/>
|
||||||
</label>
|
|
||||||
<div class="col-sm-10">
|
|
||||||
<input type="password" class="form-control" id="inputPassword" maxlength="64"
|
|
||||||
v-model="networkConfigList.password" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row mb-3">
|
<InputElement :label="$t('networkadmin.WifiPassword')"
|
||||||
<label for="inputHostname" class="col-sm-2 col-form-label">
|
v-model="networkConfigList.password"
|
||||||
{{ $t('networkadmin.Hostname') }}
|
type="password" maxlength="64"/>
|
||||||
</label>
|
|
||||||
<div class="col-sm-10">
|
|
||||||
<input type="text" class="form-control" id="inputHostname" maxlength="32"
|
|
||||||
v-model="networkConfigList.hostname" />
|
|
||||||
|
|
||||||
<div class="alert alert-secondary" role="alert" v-html="$t('networkadmin.HostnameHint')">
|
<InputElement :label="$t('networkadmin.Hostname')"
|
||||||
</div>
|
v-model="networkConfigList.hostname"
|
||||||
</div>
|
type="text" maxlength="32"
|
||||||
</div>
|
>
|
||||||
|
<div class="alert alert-secondary" role="alert" v-html="$t('networkadmin.HostnameHint')"></div>
|
||||||
|
</InputElement>
|
||||||
|
|
||||||
<div class="row mb-3">
|
<InputElement :label="$t('networkadmin.EnableDhcp')"
|
||||||
<label class="col-sm-2 form-check-label" for="inputDHCP">
|
v-model="networkConfigList.dhcp"
|
||||||
{{ $t('networkadmin.EnableDhcp') }}
|
type="checkbox"/>
|
||||||
</label>
|
|
||||||
<div class="col-sm-10">
|
|
||||||
<div class="form-check form-switch">
|
|
||||||
<input class="form-check-input" type="checkbox" id="inputDHCP"
|
|
||||||
v-model="networkConfigList.dhcp" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -60,53 +35,26 @@
|
|||||||
{{ $t('networkadmin.StaticIpConfiguration') }}
|
{{ $t('networkadmin.StaticIpConfiguration') }}
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<div class="row mb-3">
|
|
||||||
<label for="inputIP" class="col-sm-2 col-form-label">{{ $t('networkadmin.IpAddress') }}</label>
|
|
||||||
<div class="col-sm-10">
|
|
||||||
<input type="text" class="form-control" id="inputIP" maxlength="32"
|
|
||||||
v-model="networkConfigList.ipaddress" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row mb-3">
|
<InputElement :label="$t('networkadmin.IpAddress')"
|
||||||
<label for="inputNetmask" class="col-sm-2 col-form-label">
|
v-model="networkConfigList.ipaddress"
|
||||||
{{ $t('networkadmin.Netmask') }}
|
type="text" maxlength="32"/>
|
||||||
</label>
|
|
||||||
<div class="col-sm-10">
|
|
||||||
<input type="text" class="form-control" id="inputNetmask" maxlength="32"
|
|
||||||
v-model="networkConfigList.netmask" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row mb-3">
|
<InputElement :label="$t('networkadmin.Netmask')"
|
||||||
<label for="inputGateway" class="col-sm-2 col-form-label">
|
v-model="networkConfigList.netmask"
|
||||||
{{ $t('networkadmin.DefaultGateway') }}
|
type="text" maxlength="32"/>
|
||||||
</label>
|
|
||||||
<div class="col-sm-10">
|
|
||||||
<input type="text" class="form-control" id="inputGateway" maxlength="32"
|
|
||||||
v-model="networkConfigList.gateway" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row mb-3">
|
<InputElement :label="$t('networkadmin.DefaultGateway')"
|
||||||
<label for="inputDNS1" class="col-sm-2 col-form-label">
|
v-model="networkConfigList.gateway"
|
||||||
{{ $t('networkadmin.Dns', { num: 1 }) }}
|
type="text" maxlength="32"/>
|
||||||
</label>
|
|
||||||
<div class="col-sm-10">
|
|
||||||
<input type="text" class="form-control" id="inputDNS1" maxlength="32"
|
|
||||||
v-model="networkConfigList.dns1" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row mb-3">
|
<InputElement :label="$t('networkadmin.Dns', { num: 1 })"
|
||||||
<label for="inputDNS2" class="col-sm-2 col-form-label">
|
v-model="networkConfigList.dns1"
|
||||||
{{ $t('networkadmin.Dns', { num: 2 }) }}
|
type="text" maxlength="32"/>
|
||||||
</label>
|
|
||||||
<div class="col-sm-10">
|
<InputElement :label="$t('networkadmin.Dns', { num: 2 })"
|
||||||
<input type="text" class="form-control" id="inputDNS2" maxlength="32"
|
v-model="networkConfigList.dns2"
|
||||||
v-model="networkConfigList.dns2" />
|
type="text" maxlength="32"/>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button type="submit" class="btn btn-primary mb-3">{{ $t('networkadmin.Save') }}</button>
|
<button type="submit" class="btn btn-primary mb-3">{{ $t('networkadmin.Save') }}</button>
|
||||||
@ -118,6 +66,7 @@
|
|||||||
import { defineComponent } from 'vue';
|
import { defineComponent } from 'vue';
|
||||||
import BasePage from '@/components/BasePage.vue';
|
import BasePage from '@/components/BasePage.vue';
|
||||||
import BootstrapAlert from "@/components/BootstrapAlert.vue";
|
import BootstrapAlert from "@/components/BootstrapAlert.vue";
|
||||||
|
import InputElement from '@/components/InputElement.vue';
|
||||||
import { handleResponse, authHeader } from '@/utils/authentication';
|
import { handleResponse, authHeader } from '@/utils/authentication';
|
||||||
import type { NetworkConfig } from "@/types/NetworkkConfig";
|
import type { NetworkConfig } from "@/types/NetworkkConfig";
|
||||||
|
|
||||||
@ -125,6 +74,7 @@ export default defineComponent({
|
|||||||
components: {
|
components: {
|
||||||
BasePage,
|
BasePage,
|
||||||
BootstrapAlert,
|
BootstrapAlert,
|
||||||
|
InputElement,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|||||||
@ -8,16 +8,11 @@
|
|||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-header text-bg-primary">{{ $t('ntpadmin.NtpConfiguration') }}</div>
|
<div class="card-header text-bg-primary">{{ $t('ntpadmin.NtpConfiguration') }}</div>
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<div class="row mb-3">
|
|
||||||
<label for="inputNtpServer" class="col-sm-2 col-form-label">
|
<InputElement :label="$t('ntpadmin.TimeServer')"
|
||||||
{{ $t('ntpadmin.TimeServer') }}
|
v-model="ntpConfigList.ntp_server"
|
||||||
<BIconInfoCircle v-tooltip :title="$t('ntpadmin.TimeServerHint')" />
|
type="text" maxlength="32"
|
||||||
</label>
|
:tooltip="$t('ntpadmin.TimeServerHint')"/>
|
||||||
<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">
|
<div class="row mb-3">
|
||||||
<label for="inputTimezone" class="col-sm-2 col-form-label">{{ $t('ntpadmin.Timezone') }}</label>
|
<label for="inputTimezone" class="col-sm-2 col-form-label">{{ $t('ntpadmin.Timezone') }}</label>
|
||||||
@ -31,15 +26,9 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row mb-3">
|
<InputElement :label="$t('ntpadmin.TimezoneConfig')"
|
||||||
<label for="inputTimezoneConfig" class="col-sm-2 col-form-label">
|
v-model="ntpConfigList.ntp_timezone"
|
||||||
{{ $t('ntpadmin.TimezoneConfig') }}
|
type="text" maxlength="32" disabled/>
|
||||||
</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>
|
||||||
</div>
|
</div>
|
||||||
<button type="submit" class="btn btn-primary mb-3">{{ $t('ntpadmin.Save') }}</button>
|
<button type="submit" class="btn btn-primary mb-3">{{ $t('ntpadmin.Save') }}</button>
|
||||||
@ -48,29 +37,21 @@
|
|||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-header text-bg-primary">{{ $t('ntpadmin.ManualTimeSynchronization') }}</div>
|
<div class="card-header text-bg-primary">{{ $t('ntpadmin.ManualTimeSynchronization') }}</div>
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<div class="row mb-3">
|
|
||||||
<label for="currentMcuTime" class="col-sm-2 col-form-label">
|
<InputElement :label="$t('ntpadmin.CurrentOpenDtuTime')"
|
||||||
{{ $t('ntpadmin.CurrentOpenDtuTime') }}
|
v-model="mcuTime"
|
||||||
</label>
|
type="text" disabled/>
|
||||||
<div class="col-sm-10">
|
|
||||||
<input type="text" class="form-control" id="currentMcuTime" v-model="mcuTime" disabled />
|
<InputElement :label="$t('ntpadmin.CurrentLocalTime')"
|
||||||
</div>
|
v-model="localTime"
|
||||||
</div>
|
type="text" disabled/>
|
||||||
<div class="row mb-3">
|
|
||||||
<label for="currentLocalTime" class="col-sm-2 col-form-label">
|
|
||||||
{{ $t('ntpadmin.CurrentLocalTime') }}
|
|
||||||
</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">
|
<div class="text-center mb-3">
|
||||||
<button type="button" class="btn btn-danger" @click="setCurrentTime()">
|
<button type="button" class="btn btn-danger" @click="setCurrentTime()">
|
||||||
{{ $t('ntpadmin.SynchronizeTime') }}
|
{{ $t('ntpadmin.SynchronizeTime') }}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="alert alert-secondary" role="alert" v-html="$t('ntpadmin.SynchronizeTimeHint')"></div>
|
<div class="alert alert-secondary" role="alert" v-html="$t('ntpadmin.SynchronizeTimeHint')"></div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</BasePage>
|
</BasePage>
|
||||||
@ -80,6 +61,7 @@
|
|||||||
import { defineComponent } from 'vue';
|
import { defineComponent } from 'vue';
|
||||||
import BasePage from '@/components/BasePage.vue';
|
import BasePage from '@/components/BasePage.vue';
|
||||||
import BootstrapAlert from "@/components/BootstrapAlert.vue";
|
import BootstrapAlert from "@/components/BootstrapAlert.vue";
|
||||||
|
import InputElement from '@/components/InputElement.vue';
|
||||||
import { handleResponse, authHeader } from '@/utils/authentication';
|
import { handleResponse, authHeader } from '@/utils/authentication';
|
||||||
import type { NtpConfig } from "@/types/NtpConfig";
|
import type { NtpConfig } from "@/types/NtpConfig";
|
||||||
import {
|
import {
|
||||||
@ -91,6 +73,7 @@ export default defineComponent({
|
|||||||
BasePage,
|
BasePage,
|
||||||
BootstrapAlert,
|
BootstrapAlert,
|
||||||
BIconInfoCircle,
|
BIconInfoCircle,
|
||||||
|
InputElement,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|||||||
@ -8,45 +8,26 @@
|
|||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-header text-bg-primary">{{ $t('securityadmin.AdminPassword') }}</div>
|
<div class="card-header text-bg-primary">{{ $t('securityadmin.AdminPassword') }}</div>
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<div class="row mb-3">
|
|
||||||
<label for="inputPassword" class="col-sm-2 col-form-label">
|
|
||||||
{{ $t('securityadmin.Password') }}
|
|
||||||
</label>
|
|
||||||
<div class="col-sm-10">
|
|
||||||
<input type="password" class="form-control" id="inputPassword" maxlength="64"
|
|
||||||
placeholder="Password" v-model="securityConfigList.password" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row mb-3">
|
<InputElement :label="$t('securityadmin.Password')"
|
||||||
<label for="inputPasswordRepeat" class="col-sm-2 col-form-label">
|
v-model="securityConfigList.password"
|
||||||
{{ $t('securityadmin.RepeatPassword') }}
|
type="password" maxlength="64"/>
|
||||||
</label>
|
|
||||||
<div class="col-sm-10">
|
<InputElement :label="$t('securityadmin.RepeatPassword')"
|
||||||
<input type="password" class="form-control" id="inputPasswordRepeat" maxlength="64"
|
v-model="passwordRepeat"
|
||||||
placeholder="Password" v-model="passwordRepeat" />
|
type="password" maxlength="64"/>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="alert alert-secondary" role="alert" v-html="$t('securityadmin.PasswordHint')"></div>
|
<div class="alert alert-secondary" role="alert" v-html="$t('securityadmin.PasswordHint')"></div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="card mt-5">
|
<div class="card mt-5">
|
||||||
<div class="card-header text-bg-primary">{{ $t('securityadmin.Permissions') }}</div>
|
<div class="card-header text-bg-primary">{{ $t('securityadmin.Permissions') }}</div>
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<div class="row mb-3">
|
|
||||||
<label class="col-sm-6 form-check-label" for="inputReadonly">
|
<InputElement :label="$t('securityadmin.ReadOnly')"
|
||||||
{{ $t('securityadmin.ReadOnly') }}
|
v-model="securityConfigList.allow_readonly"
|
||||||
</label>
|
type="checkbox" wide/>
|
||||||
<div class="col-sm-6">
|
|
||||||
<div class="form-check form-switch">
|
|
||||||
<input class="form-check-input" type="checkbox" id="inputReadonly"
|
|
||||||
v-model="securityConfigList.allow_readonly" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -59,6 +40,7 @@
|
|||||||
import { defineComponent } from 'vue';
|
import { defineComponent } from 'vue';
|
||||||
import BasePage from '@/components/BasePage.vue';
|
import BasePage from '@/components/BasePage.vue';
|
||||||
import BootstrapAlert from "@/components/BootstrapAlert.vue";
|
import BootstrapAlert from "@/components/BootstrapAlert.vue";
|
||||||
|
import InputElement from '@/components/InputElement.vue';
|
||||||
import { handleResponse, authHeader } from '@/utils/authentication';
|
import { handleResponse, authHeader } from '@/utils/authentication';
|
||||||
import type { SecurityConfig } from '@/types/SecurityConfig';
|
import type { SecurityConfig } from '@/types/SecurityConfig';
|
||||||
|
|
||||||
@ -66,6 +48,7 @@ export default defineComponent({
|
|||||||
components: {
|
components: {
|
||||||
BasePage,
|
BasePage,
|
||||||
BootstrapAlert,
|
BootstrapAlert,
|
||||||
|
InputElement,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user