webapp: Introduce Modal component
Less duplicated code
This commit is contained in:
Thomas Basler
parent
5d63f64411
commit
6b31a4d470
52
webapp/src/components/Modal.vue
Normal file
52
webapp/src/components/Modal.vue
Normal file
@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<div class="modal" :id="modalId" tabindex="-1">
|
||||
<div class="modal-dialog" :class="[small ? '' : 'modal-lg']">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">{{ title }}</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" :aria-label="getCloseText"
|
||||
@click="close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="text-center" v-if="loading">
|
||||
<div class="spinner-border" role="status">
|
||||
<span class="visually-hidden">{{ $t('home.Loading') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<slot v-else>
|
||||
</slot>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<slot name="footer">
|
||||
</slot>
|
||||
<button type="button" class="btn btn-secondary" @click="close" data-bs-dismiss="modal">{{
|
||||
getCloseText }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
'modalId': { type: String, required: true },
|
||||
'title': { type: String, required: true },
|
||||
'closeText': { type: String, required: false, default: '' },
|
||||
'small': Boolean,
|
||||
'loading': Boolean,
|
||||
},
|
||||
computed: {
|
||||
getCloseText() {
|
||||
return this.closeText == '' ? this.$t('base.Close') : this.closeText;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
this.$emit('close');
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@ -29,7 +29,8 @@
|
||||
"Save": "Speichern",
|
||||
"Refreshing": "Aktualisieren",
|
||||
"Pull": "Zum Aktualisieren nach unten ziehen",
|
||||
"Release": "Loslassen zum Aktualisieren"
|
||||
"Release": "Loslassen zum Aktualisieren",
|
||||
"Close": "Schließen"
|
||||
},
|
||||
"localeswitcher": {
|
||||
"Dark": "Dunkel",
|
||||
@ -116,7 +117,6 @@
|
||||
"UnreadMessages": "Ungelesene Meldungen",
|
||||
"Loading": "@:base.Loading",
|
||||
"EventLog": "Ereignisanzeige",
|
||||
"Close": "Schließen",
|
||||
"InverterInfo": "Wechselrichter-Informationen",
|
||||
"LimitSettings": "Limit-Einstellungen",
|
||||
"LastLimitSetStatus": "Letzter Übertragungsstatus:",
|
||||
|
||||
@ -29,7 +29,8 @@
|
||||
"Save": "Save",
|
||||
"Refreshing": "Refreshing",
|
||||
"Pull": "Pull down to refresh",
|
||||
"Release": "Release to refresh"
|
||||
"Release": "Release to refresh",
|
||||
"Close": "Close"
|
||||
},
|
||||
"localeswitcher": {
|
||||
"Dark": "Dark",
|
||||
@ -116,7 +117,6 @@
|
||||
"UnreadMessages": "unread messages",
|
||||
"Loading": "@:base.Loading",
|
||||
"EventLog": "Event Log",
|
||||
"Close": "Close",
|
||||
"InverterInfo": "Inverter Info",
|
||||
"LimitSettings": "Limit Settings",
|
||||
"LastLimitSetStatus": "Last Limit Set Status:",
|
||||
|
||||
@ -29,7 +29,8 @@
|
||||
"Save": "Sauvegarder",
|
||||
"Refreshing": "Refreshing",
|
||||
"Pull": "Pull down to refresh",
|
||||
"Release": "Release to refresh"
|
||||
"Release": "Release to refresh",
|
||||
"Close": "Fermer"
|
||||
},
|
||||
"localeswitcher": {
|
||||
"Dark": "Sombre",
|
||||
@ -116,7 +117,6 @@
|
||||
"UnreadMessages": "messages non lus",
|
||||
"Loading": "@:base.Loading",
|
||||
"EventLog": "Journal des événements",
|
||||
"Close": "Fermer",
|
||||
"InverterInfo": "Informations sur l'onduleur",
|
||||
"LimitSettings": "Paramètres de la limite",
|
||||
"LastLimitSetStatus": "Statut de la dernière limite fixée",
|
||||
|
||||
@ -88,32 +88,21 @@
|
||||
</CardElement>
|
||||
</BasePage>
|
||||
|
||||
<div class="modal" id="factoryReset" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">{{ $t('configadmin.FactoryReset') }}</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<Modal modalId="factoryReset" small :title="$t('configadmin.FactoryReset')" :closeText="$t('configadmin.Cancel')">
|
||||
{{ $t('configadmin.ResetMsg') }}
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" @click="onFactoryResetCancel"
|
||||
data-bs-dismiss="modal">{{ $t('configadmin.Cancel') }}</button>
|
||||
<template #footer>
|
||||
<button type="button" class="btn btn-danger" @click="onFactoryResetPerform">
|
||||
{{ $t('configadmin.ResetConfirm') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import BasePage from '@/components/BasePage.vue';
|
||||
import BootstrapAlert from "@/components/BootstrapAlert.vue";
|
||||
import CardElement from '@/components/CardElement.vue';
|
||||
import Modal from '@/components/Modal.vue';
|
||||
import type { ConfigFileList } from '@/types/Config';
|
||||
import { authHeader, handleResponse } from '@/utils/authentication';
|
||||
import * as bootstrap from 'bootstrap';
|
||||
@ -129,6 +118,7 @@ export default defineComponent({
|
||||
BasePage,
|
||||
BootstrapAlert,
|
||||
CardElement,
|
||||
Modal,
|
||||
BIconArrowLeft,
|
||||
BIconCheckCircle,
|
||||
BIconExclamationCircleFill,
|
||||
|
||||
@ -124,110 +124,30 @@
|
||||
</div>
|
||||
</BasePage>
|
||||
|
||||
<div class="modal" id="eventView" tabindex="-1">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">{{ $t('home.EventLog') }}</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="text-center" v-if="eventLogLoading">
|
||||
<div class="spinner-border" role="status">
|
||||
<span class="visually-hidden">{{ $t('home.Loading') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<Modal modalId="eventView" :title="$t('home.EventLog')" :loading="eventLogLoading">
|
||||
<EventLog :eventLogList="eventLogList" />
|
||||
</Modal>
|
||||
|
||||
<EventLog v-if="!eventLogLoading" :eventLogList="eventLogList" />
|
||||
</div>
|
||||
<Modal modalId="devInfoView" :title="$t('home.InverterInfo')" :loading="devInfoLoading">
|
||||
<DevInfo :devInfoList="devInfoList" />
|
||||
</Modal>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" @click="onHideEventlog"
|
||||
data-bs-dismiss="modal">{{ $t('home.Close') }}</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal" id="devInfoView" tabindex="-1">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">{{ $t('home.InverterInfo') }}</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="text-center" v-if="devInfoLoading">
|
||||
<div class="spinner-border" role="status">
|
||||
<span class="visually-hidden">{{ $t('home.Loading') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DevInfo v-if="!devInfoLoading" :devInfoList="devInfoList" />
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" @click="onHideDevInfo"
|
||||
data-bs-dismiss="modal">{{ $t('home.Close') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal" id="gridProfileView" tabindex="-1">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">{{ $t('home.GridProfile') }}</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="text-center" v-if="gridProfileLoading">
|
||||
<div class="spinner-border" role="status">
|
||||
<span class="visually-hidden">{{ $t('home.Loading') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<GridProfile v-if="!gridProfileLoading" :gridProfileList="gridProfileList" :gridProfileRawList="gridProfileRawList" />
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" @click="onHideGridProfile"
|
||||
data-bs-dismiss="modal">{{ $t('home.Close') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal" id="limitSettingView" ref="limitSettingView" tabindex="-1">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<form @submit="onSubmitLimit">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">{{ $t('home.LimitSettings') }}</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<Modal modalId="gridProfileView" :title="$t('home.GridProfile')" :loading="gridProfileLoading">
|
||||
<GridProfile :gridProfileList="gridProfileList" :gridProfileRawList="gridProfileRawList" />
|
||||
</Modal>
|
||||
|
||||
<Modal modalId="limitSettingView" :title="$t('home.LimitSettings')" :loading="limitSettingLoading">
|
||||
<BootstrapAlert v-model="showAlertLimit" :variant="alertTypeLimit">
|
||||
{{ alertMessageLimit }}
|
||||
</BootstrapAlert>
|
||||
<div class="text-center" v-if="limitSettingLoading">
|
||||
<div class="spinner-border" role="status">
|
||||
<span class="visually-hidden">{{ $t('home.Loading') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template v-if="!limitSettingLoading">
|
||||
|
||||
<div class="row mb-3">
|
||||
<label for="inputCurrentLimit" class="col-sm-3 col-form-label">{{ $t('home.CurrentLimit') }} </label>
|
||||
<label for="inputCurrentLimit" class="col-sm-3 col-form-label">{{ $t('home.CurrentLimit') }}
|
||||
</label>
|
||||
<div class="col-sm-4">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" id="inputCurrentLimit"
|
||||
aria-describedby="currentLimitType" v-model="currentLimitRelative"
|
||||
disabled />
|
||||
<input type="text" class="form-control" id="inputCurrentLimit" aria-describedby="currentLimitType"
|
||||
v-model="currentLimitRelative" disabled />
|
||||
<span class="input-group-text" id="currentLimitType">%</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -235,8 +155,7 @@
|
||||
<div class="col-sm-4" v-if="currentLimitList.max_power > 0">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" id="inputCurrentLimitAbsolute"
|
||||
aria-describedby="currentLimitTypeAbsolute" v-model="currentLimitAbsolute"
|
||||
disabled />
|
||||
aria-describedby="currentLimitTypeAbsolute" v-model="currentLimitAbsolute" disabled />
|
||||
<span class="input-group-text" id="currentLimitTypeAbsolute">W</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -259,60 +178,44 @@
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<label for="inputTargetLimit" class="col-sm-3 col-form-label">{{ $t('home.SetLimit') }}</label>
|
||||
<label for="inputTargetLimit" class="col-sm-3 col-form-label">{{ $t('home.SetLimit')
|
||||
}}</label>
|
||||
<div class="col-sm-9">
|
||||
<div class="input-group">
|
||||
<input type="number" name="inputTargetLimit" class="form-control"
|
||||
id="inputTargetLimit" :min="targetLimitMin" :max="targetLimitMax"
|
||||
v-model="targetLimitList.limit_value">
|
||||
<button class="btn btn-primary dropdown-toggle" type="button"
|
||||
data-bs-toggle="dropdown" aria-expanded="false">{{ targetLimitTypeText
|
||||
<input type="number" name="inputTargetLimit" class="form-control" id="inputTargetLimit"
|
||||
:min="targetLimitMin" :max="targetLimitMax" v-model="targetLimitList.limit_value">
|
||||
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown"
|
||||
aria-expanded="false">{{ targetLimitTypeText
|
||||
}}</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end">
|
||||
<li><a class="dropdown-item" @click="onSelectType(1)" href="#">{{ $t('home.Relative') }}</a></li>
|
||||
<li><a class="dropdown-item" @click="onSelectType(0)" href="#">{{ $t('home.Absolute') }}</a></li>
|
||||
<li><a class="dropdown-item" @click="onSelectType(1)" href="#">{{
|
||||
$t('home.Relative') }}</a></li>
|
||||
<li><a class="dropdown-item" @click="onSelectType(0)" href="#">{{
|
||||
$t('home.Absolute') }}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div v-if="targetLimitType == 0" class="alert alert-secondary mt-3" role="alert" v-html="$t('home.LimitHint')"></div>
|
||||
<div v-if="targetLimitType == 0" class="alert alert-secondary mt-3" role="alert"
|
||||
v-html="$t('home.LimitHint')"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<button type="button" class="btn btn-danger" @click="onSetLimitSettings(true)">{{
|
||||
$t('home.SetPersistent') }}</button>
|
||||
|
||||
<button type="button" class="btn btn-danger" @click="onSetLimitSettings(false)">{{
|
||||
$t('home.SetNonPersistent') }}</button>
|
||||
</template>
|
||||
</Modal>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button type="submit" class="btn btn-danger" @click="onSetLimitSettings(true)">{{ $t('home.SetPersistent') }}</button>
|
||||
|
||||
<button type="submit" class="btn btn-danger" @click="onSetLimitSettings(false)">{{ $t('home.SetNonPersistent') }}</button>
|
||||
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ $t('home.Close') }}</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal" id="powerSettingView" ref="powerSettingView" tabindex="-1">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">{{ $t('home.PowerSettings') }}</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
|
||||
<Modal modalId="powerSettingView" :title="$t('home.PowerSettings')" :loading="powerSettingLoading">
|
||||
<BootstrapAlert v-model="showAlertPower" :variant="alertTypePower">
|
||||
{{ alertMessagePower }}
|
||||
</BootstrapAlert>
|
||||
<div class="text-center" v-if="powerSettingLoading">
|
||||
<div class="spinner-border" role="status">
|
||||
<span class="visually-hidden">{{ $t('home.Loading') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template v-if="!powerSettingLoading">
|
||||
<div class="row mb-3 align-items-center">
|
||||
<label for="inputLastPowerSet" class="col col-form-label">{{ $t('home.LastPowerSetStatus') }}</label>
|
||||
<label for="inputLastPowerSet" class="col col-form-label">{{ $t('home.LastPowerSetStatus')
|
||||
}}</label>
|
||||
<div class="col">
|
||||
<span class="badge" :class="{
|
||||
'text-bg-danger': successCommandPower == 'Failure',
|
||||
@ -336,17 +239,7 @@
|
||||
<BIconArrowCounterclockwise class="fs-4" /> {{ $t('home.Restart') }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ $t('home.Close') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
@ -358,6 +251,7 @@ import GridProfile from '@/components/GridProfile.vue';
|
||||
import HintView from '@/components/HintView.vue';
|
||||
import InverterChannelInfo from "@/components/InverterChannelInfo.vue";
|
||||
import InverterTotalInfo from '@/components/InverterTotalInfo.vue';
|
||||
import Modal from '@/components/Modal.vue';
|
||||
import type { DevInfoStatus } from '@/types/DevInfoStatus';
|
||||
import type { EventlogItems } from '@/types/EventlogStatus';
|
||||
import type { GridProfileStatus } from '@/types/GridProfileStatus';
|
||||
@ -392,6 +286,7 @@ export default defineComponent({
|
||||
HintView,
|
||||
InverterChannelInfo,
|
||||
InverterTotalInfo,
|
||||
Modal,
|
||||
BIconArrowCounterclockwise,
|
||||
BIconCheckCircleFill,
|
||||
BIconCpu,
|
||||
@ -435,7 +330,6 @@ export default defineComponent({
|
||||
targetLimitMax: 100,
|
||||
targetLimitTypeText: this.$t('home.Relative'),
|
||||
targetLimitType: 1,
|
||||
targetLimitPersistent: false,
|
||||
|
||||
alertMessageLimit: "",
|
||||
alertTypeLimit: "info",
|
||||
@ -469,9 +363,6 @@ export default defineComponent({
|
||||
this.gridProfileView = new bootstrap.Modal('#gridProfileView');
|
||||
this.limitSettingView = new bootstrap.Modal('#limitSettingView');
|
||||
this.powerSettingView = new bootstrap.Modal('#powerSettingView');
|
||||
|
||||
(this.$refs.limitSettingView as HTMLElement).addEventListener("hide.bs.modal", this.onHideLimitSettings);
|
||||
(this.$refs.powerSettingView as HTMLElement).addEventListener("hide.bs.modal", this.onHidePowerSettings);
|
||||
},
|
||||
unmounted() {
|
||||
this.closeSocket();
|
||||
@ -509,14 +400,14 @@ export default defineComponent({
|
||||
'decimalTwoDigits');
|
||||
},
|
||||
inverterData(): Inverter[] {
|
||||
return this.liveData.inverters.slice().sort((a : Inverter, b: Inverter) => {
|
||||
return this.liveData.inverters.slice().sort((a: Inverter, b: Inverter) => {
|
||||
return a.order - b.order;
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isLoggedIn,
|
||||
getInitialData(triggerLoading : boolean = true) {
|
||||
getInitialData(triggerLoading: boolean = true) {
|
||||
if (triggerLoading) {
|
||||
this.dataLoading = true;
|
||||
}
|
||||
@ -568,7 +459,7 @@ export default defineComponent({
|
||||
self.isWebsocketConnected = true;
|
||||
};
|
||||
|
||||
this.socket.onclose = function() {
|
||||
this.socket.onclose = function () {
|
||||
console.log("Connection to websocket closed...")
|
||||
self.isWebsocketConnected = false;
|
||||
}
|
||||
@ -605,9 +496,6 @@ export default defineComponent({
|
||||
this.heartInterval && clearTimeout(this.heartInterval);
|
||||
this.isFirstFetchAfterConnect = true;
|
||||
},
|
||||
onHideEventlog() {
|
||||
this.eventLogView.hide();
|
||||
},
|
||||
onShowEventlog(serial: number) {
|
||||
this.eventLogLoading = true;
|
||||
fetch("/api/eventlog/status?inv=" + serial + "&locale=" + this.$i18n.locale, { headers: authHeader() })
|
||||
@ -619,9 +507,6 @@ export default defineComponent({
|
||||
|
||||
this.eventLogView.show();
|
||||
},
|
||||
onHideDevInfo() {
|
||||
this.devInfoView.hide();
|
||||
},
|
||||
onShowDevInfo(serial: number) {
|
||||
this.devInfoLoading = true;
|
||||
fetch("/api/devinfo/status?inv=" + serial, { headers: authHeader() })
|
||||
@ -634,9 +519,6 @@ export default defineComponent({
|
||||
|
||||
this.devInfoView.show();
|
||||
},
|
||||
onHideGridProfile() {
|
||||
this.devInfoView.hide();
|
||||
},
|
||||
onShowGridProfile(serial: number) {
|
||||
this.gridProfileLoading = true;
|
||||
fetch("/api/gridprofile/status?inv=" + serial, { headers: authHeader() })
|
||||
@ -654,10 +536,8 @@ export default defineComponent({
|
||||
|
||||
this.gridProfileView.show();
|
||||
},
|
||||
onHideLimitSettings() {
|
||||
this.showAlertLimit = false;
|
||||
},
|
||||
onShowLimitSettings(serial: number) {
|
||||
this.showAlertLimit = false;
|
||||
this.targetLimitList.serial = 0;
|
||||
this.targetLimitList.limit_value = 0;
|
||||
this.targetLimitType = 1;
|
||||
@ -674,10 +554,8 @@ export default defineComponent({
|
||||
|
||||
this.limitSettingView.show();
|
||||
},
|
||||
onSubmitLimit(e: Event) {
|
||||
e.preventDefault();
|
||||
|
||||
this.targetLimitList.limit_type = (this.targetLimitPersistent ? 256 : 0) + this.targetLimitType
|
||||
onSetLimitSettings(setPersistent: boolean) {
|
||||
this.targetLimitList.limit_type = (setPersistent ? 256 : 0) + this.targetLimitType
|
||||
const formData = new FormData();
|
||||
formData.append("data", JSON.stringify(this.targetLimitList));
|
||||
|
||||
@ -701,9 +579,6 @@ export default defineComponent({
|
||||
}
|
||||
)
|
||||
},
|
||||
onSetLimitSettings(setPersistent: boolean) {
|
||||
this.targetLimitPersistent = setPersistent;
|
||||
},
|
||||
onSelectType(type: number) {
|
||||
if (type == 1) {
|
||||
this.targetLimitTypeText = this.$t('home.Relative');
|
||||
@ -718,6 +593,8 @@ export default defineComponent({
|
||||
},
|
||||
|
||||
onShowPowerSettings(serial: number) {
|
||||
this.showAlertPower = false;
|
||||
this.powerSettingSerial = 0;
|
||||
this.powerSettingLoading = true;
|
||||
fetch("/api/power/status", { headers: authHeader() })
|
||||
.then((response) => handleResponse(response, this.$emitter, this.$router))
|
||||
@ -729,11 +606,6 @@ export default defineComponent({
|
||||
this.powerSettingView.show();
|
||||
},
|
||||
|
||||
onHidePowerSettings() {
|
||||
this.powerSettingSerial = 0;
|
||||
this.showAlertPower = false;
|
||||
},
|
||||
|
||||
onSetPowerSettings(turnOn: boolean, restart = false) {
|
||||
let data = {};
|
||||
if (restart) {
|
||||
|
||||
@ -71,55 +71,44 @@
|
||||
</CardElement>
|
||||
</BasePage>
|
||||
|
||||
<div class="modal" id="inverterEdit" tabindex="-1">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">{{ $t('inverteradmin.EditInverter') }}</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form>
|
||||
<Modal modalId="inverterEdit" :title="$t('inverteradmin.EditInverter')" :closeText="$t('inverteradmin.Cancel')">
|
||||
<nav>
|
||||
<div class="nav nav-tabs" id="nav-tab" role="tablist">
|
||||
<button class="nav-link active" id="nav-general-tab" data-bs-toggle="tab" data-bs-target="#nav-general"
|
||||
type="button" role="tab" aria-controls="nav-general" aria-selected="true">{{
|
||||
$t('inverteradmin.General')
|
||||
}}</button>
|
||||
<button class="nav-link" id="nav-string-tab" data-bs-toggle="tab" data-bs-target="#nav-string"
|
||||
type="button" role="tab" aria-controls="nav-string">{{ $t('inverteradmin.String') }}</button>
|
||||
<button class="nav-link" id="nav-string-tab" data-bs-toggle="tab" data-bs-target="#nav-string" type="button"
|
||||
role="tab" aria-controls="nav-string">{{ $t('inverteradmin.String') }}</button>
|
||||
<button class="nav-link" id="nav-advanced-tab" data-bs-toggle="tab" data-bs-target="#nav-advanced"
|
||||
type="button" role="tab" aria-controls="nav-advanced">{{ $t('inverteradmin.Advanced') }}</button>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="tab-content" id="nav-tabContent">
|
||||
<div class="tab-pane fade show active" id="nav-general" role="tabpanel" aria-labelledby="nav-general-tab" tabindex="0">
|
||||
<div class="tab-pane fade show active" id="nav-general" role="tabpanel" aria-labelledby="nav-general-tab"
|
||||
tabindex="0">
|
||||
<div class="mb-3">
|
||||
<label for="inverter-serial" class="col-form-label">
|
||||
{{ $t('inverteradmin.InverterSerial') }}
|
||||
</label>
|
||||
<input v-model="selectedInverterData.serial" type="number" id="inverter-serial"
|
||||
class="form-control" />
|
||||
<input v-model="selectedInverterData.serial" type="number" id="inverter-serial" class="form-control" />
|
||||
<label for="inverter-name" class="col-form-label">{{ $t('inverteradmin.InverterName') }}
|
||||
<BIconInfoCircle v-tooltip :title="$t('inverteradmin.InverterNameHint')" />
|
||||
</label>
|
||||
<input v-model="selectedInverterData.name" type="text" id="inverter-name"
|
||||
class="form-control" maxlength="31" />
|
||||
<input v-model="selectedInverterData.name" type="text" id="inverter-name" class="form-control"
|
||||
maxlength="31" />
|
||||
|
||||
<CardElement :text="$t('inverteradmin.InverterStatus')" addSpace>
|
||||
<InputElement :label="$t('inverteradmin.PollEnable')"
|
||||
v-model="selectedInverterData.poll_enable"
|
||||
<InputElement :label="$t('inverteradmin.PollEnable')" v-model="selectedInverterData.poll_enable"
|
||||
type="checkbox" wide />
|
||||
<InputElement :label="$t('inverteradmin.PollEnableNight')"
|
||||
v-model="selectedInverterData.poll_enable_night"
|
||||
type="checkbox" wide/>
|
||||
v-model="selectedInverterData.poll_enable_night" type="checkbox" wide />
|
||||
<InputElement :label="$t('inverteradmin.CommandEnable')"
|
||||
v-model="selectedInverterData.command_enable"
|
||||
type="checkbox" wide/>
|
||||
v-model="selectedInverterData.command_enable" type="checkbox" wide />
|
||||
<InputElement :label="$t('inverteradmin.CommandEnableNight')"
|
||||
v-model="selectedInverterData.command_enable_night"
|
||||
type="checkbox" wide/>
|
||||
<div class="alert alert-secondary mt-3" role="alert" v-html="$t('inverteradmin.StatusHint')"></div>
|
||||
v-model="selectedInverterData.command_enable_night" type="checkbox" wide />
|
||||
<div class="alert alert-secondary mt-3" role="alert" v-html="$t('inverteradmin.StatusHint')">
|
||||
</div>
|
||||
</CardElement>
|
||||
</div>
|
||||
</div>
|
||||
@ -134,8 +123,8 @@
|
||||
</label>
|
||||
<div class="d-flex mb-2">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" :id="`inverter-name_${index}`"
|
||||
maxlength="31" v-model="ch.name" />
|
||||
<input type="text" class="form-control" :id="`inverter-name_${index}`" maxlength="31"
|
||||
v-model="ch.name" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -148,8 +137,8 @@
|
||||
</label>
|
||||
<div class="d-flex mb-2">
|
||||
<div class="input-group">
|
||||
<input type="number" class="form-control" :id="`inverter-max_${index}`"
|
||||
min="0" v-model="ch.max_power"
|
||||
<input type="number" class="form-control" :id="`inverter-max_${index}`" min="0"
|
||||
v-model="ch.max_power"
|
||||
:aria-describedby="`inverter-maxDescription_${index} inverter-customizer`" />
|
||||
<span class="input-group-text"
|
||||
:id="`inverter-maxDescription_${index}`">W<sub>p</sub><sup>*</sup></span>
|
||||
@ -163,11 +152,10 @@
|
||||
</label>
|
||||
<div class="d-flex mb-2">
|
||||
<div class="input-group">
|
||||
<input type="number" class="form-control" :id="`inverter-ytoffset_${index}`"
|
||||
min="0" v-model="ch.yield_total_offset"
|
||||
<input type="number" class="form-control" :id="`inverter-ytoffset_${index}`" min="0"
|
||||
v-model="ch.yield_total_offset"
|
||||
:aria-describedby="`inverter-ytoffsetDescription_${index} inverter-customizer`" />
|
||||
<span class="input-group-text"
|
||||
:id="`inverter-ytoffsetDescription_${index}`">kWh</span>
|
||||
<span class="input-group-text" :id="`inverter-ytoffsetDescription_${index}`">kWh</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -177,64 +165,41 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-pane fade show" id="nav-advanced" role="tabpanel" aria-labelledby="nav-advanced-tab" tabindex="0">
|
||||
<div class="tab-pane fade show" id="nav-advanced" role="tabpanel" aria-labelledby="nav-advanced-tab"
|
||||
tabindex="0">
|
||||
<InputElement :label="$t('inverteradmin.ReachableThreshold')"
|
||||
v-model="selectedInverterData.reachable_threshold"
|
||||
type="number" min="1" max="100"
|
||||
v-model="selectedInverterData.reachable_threshold" type="number" min="1" max="100"
|
||||
:tooltip="$t('inverteradmin.ReachableThresholdHint')" wide />
|
||||
|
||||
<InputElement :label="$t('inverteradmin.ZeroRuntime')"
|
||||
v-model="selectedInverterData.zero_runtime"
|
||||
type="checkbox"
|
||||
:tooltip="$t('inverteradmin.ZeroRuntimeHint')" wide/>
|
||||
<InputElement :label="$t('inverteradmin.ZeroRuntime')" v-model="selectedInverterData.zero_runtime"
|
||||
type="checkbox" :tooltip="$t('inverteradmin.ZeroRuntimeHint')" wide />
|
||||
|
||||
<InputElement :label="$t('inverteradmin.ZeroDay')"
|
||||
v-model="selectedInverterData.zero_day"
|
||||
type="checkbox"
|
||||
:tooltip="$t('inverteradmin.ZeroDayHint')" wide/>
|
||||
<InputElement :label="$t('inverteradmin.ZeroDay')" v-model="selectedInverterData.zero_day" type="checkbox"
|
||||
:tooltip="$t('inverteradmin.ZeroDayHint')" wide />
|
||||
|
||||
<InputElement :label="$t('inverteradmin.YieldDayCorrection')"
|
||||
v-model="selectedInverterData.yieldday_correction"
|
||||
type="checkbox"
|
||||
:tooltip="$t('inverteradmin.YieldDayCorrectionHint')" wide/>
|
||||
v-model="selectedInverterData.yieldday_correction" type="checkbox"
|
||||
:tooltip="$t('inverteradmin.YieldDayCorrectionHint')" wide />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" @click="onCloseModal(modal)"
|
||||
data-bs-dismiss="modal">{{ $t('inverteradmin.Cancel') }}</button>
|
||||
<template #footer>
|
||||
<button type="button" class="btn btn-primary" @click="onEditSubmit">
|
||||
{{ $t('inverteradmin.Save') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Modal>
|
||||
|
||||
<div class="modal" id="inverterDelete" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">{{ $t('inverteradmin.DeleteInverter') }}</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<Modal modalId="inverterDelete" small :title="$t('inverteradmin.DeleteInverter')"
|
||||
:closeText="$t('inverteradmin.Cancel')">
|
||||
{{ $t('inverteradmin.DeleteMsg', {
|
||||
name: selectedInverterData.name,
|
||||
serial: selectedInverterData.serial
|
||||
})
|
||||
}}
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" @click="onCloseModal(modalDelete)"
|
||||
data-bs-dismiss="modal">{{ $t('inverteradmin.Cancel') }}</button>
|
||||
<template #footer>
|
||||
<button type="button" class="btn btn-danger" @click="onDelete">
|
||||
{{ $t('inverteradmin.Delete') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
@ -242,6 +207,7 @@ import BasePage from '@/components/BasePage.vue';
|
||||
import BootstrapAlert from "@/components/BootstrapAlert.vue";
|
||||
import CardElement from '@/components/CardElement.vue';
|
||||
import InputElement from '@/components/InputElement.vue';
|
||||
import Modal from '@/components/Modal.vue';
|
||||
import Sortable from 'sortablejs';
|
||||
import { authHeader, handleResponse } from '@/utils/authentication';
|
||||
import * as bootstrap from 'bootstrap';
|
||||
@ -291,6 +257,7 @@ export default defineComponent({
|
||||
BootstrapAlert,
|
||||
CardElement,
|
||||
InputElement,
|
||||
Modal,
|
||||
BIconInfoCircle,
|
||||
BIconPencil,
|
||||
BIconTrash,
|
||||
@ -323,7 +290,7 @@ export default defineComponent({
|
||||
fetch("/api/inverter/list", { headers: authHeader() })
|
||||
.then((response) => handleResponse(response, this.$emitter, this.$router))
|
||||
.then((data) => {
|
||||
this.inverters = data.inverter.slice().sort((a : Inverter, b: Inverter) => {
|
||||
this.inverters = data.inverter.slice().sort((a: Inverter, b: Inverter) => {
|
||||
return a.order - b.order;
|
||||
});
|
||||
this.dataLoading = false;
|
||||
|
||||
@ -12,31 +12,20 @@
|
||||
</CardElement>
|
||||
</BasePage>
|
||||
|
||||
<div class="modal" id="performReboot" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">{{ $t('maintenancereboot.RebootOpenDTU') }}</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<Modal modalId="performReboot" small :title="$t('maintenancereboot.RebootOpenDTU')" :closeText="$t('maintenancereboot.Cancel')">
|
||||
{{ $t('maintenancereboot.RebootQuestion') }}
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" @click="onCloseModal(performReboot)"
|
||||
data-bs-dismiss="modal">{{ $t('maintenancereboot.Cancel') }}</button>
|
||||
<template #footer>
|
||||
<button type="button" class="btn btn-danger" @click="onReboot">
|
||||
{{ $t('maintenancereboot.Reboot') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import BasePage from '@/components/BasePage.vue';
|
||||
import BootstrapAlert from "@/components/BootstrapAlert.vue";
|
||||
import CardElement from '@/components/CardElement.vue';
|
||||
import Modal from '@/components/Modal.vue';
|
||||
import { authHeader, handleResponse, isLoggedIn } from '@/utils/authentication';
|
||||
import * as bootstrap from 'bootstrap';
|
||||
import { defineComponent } from 'vue';
|
||||
@ -46,6 +35,7 @@ export default defineComponent({
|
||||
BasePage,
|
||||
BootstrapAlert,
|
||||
CardElement,
|
||||
Modal,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user