patrick/OpenDTU-old
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

webapp: Added turnon/turnoff dialogue

Browse Source
This commit is contained in:
Thomas Basler 2022-10-04 19:38:35 +02:00
parent 3816320f1e
commit f6a416bf8f
1 changed files with 122 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
webapp/src/components/HomeView.vue
View File

@ -52,6 +52,14 @@
</button>
</div>
<div class="btn-group me-2" role="group">
<button type="button" class="btn btn-sm btn-danger"
@click="onShowPowerSettings(inverter.serial)" title="Turn Inverter on/off">
<BIconPower style="font-size:24px;" />
</button>
</div>
<div class="btn-group me-2" role="group">
<button type="button" class="btn btn-sm btn-info"
@click="onShowDevInfo(inverter.serial)" title="Show Inverter Info">
@ -230,6 +238,59 @@
</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">Power Settings</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<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">Loading...</span>
</div>
</div>
<template v-if="!powerSettingLoading">
<div class="row mb-3 align-items-center">
<label for="inputLastPowerSet" class="col col-form-label">Last Power Set
Status:</label>
<div class="col">
<span class="badge" :class="{
'bg-danger': successCommandPower == 'Failure',
'bg-warning': successCommandPower == 'Pending',
'bg-success': successCommandPower == 'Ok',
'bg-secondary': successCommandPower == 'Unknown',
}">
{{ successCommandPower }}
</span>
</div>
</div>
<div class="d-grid gap-2 col-6 mx-auto">
<button type="button" class="btn btn-success" @click="onSetPowerSettings(true)">
<BIconToggleOn class="fs-4" />&nbsp;Turn On
</button>
<button type="button" class="btn btn-danger" @click="onSetPowerSettings(false)">
<BIconToggleOff class="fs-4" />&nbsp;Turn Off
</button>
</div>
</template>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</template>
@ -288,6 +349,14 @@ export default defineComponent({
alertMessageLimit: "",
alertTypeLimit: "info",
showAlertLimit: false,
powerSettingView: {} as bootstrap.Modal,
powerSettingSerial: 0,
powerSettingLoading: true,
alertMessagePower: "",
alertTypePower: "info",
showAlertPower: false,
successCommandPower: "",
};
},
created() {
@ -299,8 +368,10 @@ export default defineComponent({
this.eventLogView = new bootstrap.Modal('#eventView');
this.devInfoView = new bootstrap.Modal('#devInfoView');
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();
@ -479,6 +550,57 @@ export default defineComponent({
}
this.targetLimitType = type;
},
onShowPowerSettings(serial: number) {
this.powerSettingLoading = true;
fetch("/api/power/status")
.then((response) => response.json())
.then((data) => {
this.successCommandPower = data[serial].power_set_status;
this.powerSettingSerial = serial;
this.powerSettingLoading = false;
});
this.powerSettingView.show();
},
onHidePowerSettings() {
this.powerSettingSerial = 0;
this.showAlertPower = false;
},
onSetPowerSettings(turnOn: boolean) {
const data = {
serial: this.powerSettingSerial,
power: turnOn,
};
const formData = new FormData();
formData.append("data", JSON.stringify(data));
console.log(data);
fetch("/api/power/config", {
method: "POST",
body: formData,
})
.then(function (response) {
if (response.status != 200) {
throw response.status;
} else {
return response.json();
}
})
.then(
(response) => {
if (response.type == "success") {
this.powerSettingView.hide();
} else {
this.alertMessagePower = response.message;
this.alertTypePower = response.type;
this.showAlertPower = true;
}
}
)
},
},
});
</script>