Merge branch 'pr346' into dev
This commit is contained in:
Thomas Basler
commit
2937809def
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<BasePage :title="'Inverter Settings'" :isLoading="dataLoading">
|
||||
<BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
|
||||
{{ alertMessage }}
|
||||
<BootstrapAlert v-model="alert.show" dismissible :variant="alert.type">
|
||||
{{ alert.message }}
|
||||
</BootstrapAlert>
|
||||
|
||||
<div class="card">
|
||||
@ -10,12 +10,12 @@
|
||||
<form class="form-inline" v-on:submit.prevent="onSubmit">
|
||||
<div class="form-group">
|
||||
<label>Serial</label>
|
||||
<input v-model="inverterData.serial" type="number" class="form-control ml-sm-2 mr-sm-4 my-2"
|
||||
<input v-model="newInverterData.serial" type="number" class="form-control ml-sm-2 mr-sm-4 my-2"
|
||||
required />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Name</label>
|
||||
<input v-model="inverterData.name" type="text" class="form-control ml-sm-2 mr-sm-4 my-2"
|
||||
<input v-model="newInverterData.name" type="text" class="form-control ml-sm-2 mr-sm-4 my-2"
|
||||
maxlength="31" required />
|
||||
</div>
|
||||
<div class="ml-auto text-right">
|
||||
@ -44,22 +44,15 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="inverter in sortedInverters" v-bind:key="inverter.id">
|
||||
|
||||
<td>
|
||||
{{ inverter.serial }}
|
||||
</td>
|
||||
<td>
|
||||
{{ inverter.name }}
|
||||
</td>
|
||||
<td>
|
||||
{{ inverter.type }}
|
||||
</td>
|
||||
<td>{{ inverter.serial }}</td>
|
||||
<td>{{ inverter.name }}</td>
|
||||
<td>{{ inverter.type }}</td>
|
||||
<td>
|
||||
<a href="#" class="icon text-danger" title="Delete inverter">
|
||||
<BIconTrash v-on:click="onDeleteModal(inverter)" />
|
||||
<BIconTrash v-on:click="onOpenModal(modalDelete, inverter)" />
|
||||
</a>
|
||||
<a href="#" class="icon" title="Edit inverter">
|
||||
<BIconPencil v-on:click="onEdit(inverter)" />
|
||||
<BIconPencil v-on:click="onOpenModal(modal, inverter)" />
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
@ -78,39 +71,36 @@
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<label for="inverter-serial" class="col-form-label">Serial:</label>
|
||||
<input v-model="editInverterData.serial" type="number" id="inverter-serial"
|
||||
class="form-control" />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<input v-model="selectedInverterData.serial" type="number" id="inverter-serial"
|
||||
class="form-control" />
|
||||
<label for="inverter-name" class="col-form-label">Name:</label>
|
||||
<input v-model="editInverterData.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" />
|
||||
</div>
|
||||
|
||||
<div class="mb-3" v-for="(max, index) in editInverterData.max_power" :key="`${index}`">
|
||||
<label :for="`inverter-max_${index}`" class="col-form-label">Max power string {{ index +
|
||||
1
|
||||
}}:</label>
|
||||
<div class="input-group">
|
||||
<input type="number" class="form-control" :id="`inverter-max_${index}`" min="0"
|
||||
v-model="editInverterData.max_power[index]"
|
||||
:aria-describedby="`inverter-maxDescription_${index} inverter-maxHelpText_${index}`" />
|
||||
<span class="input-group-text" :id="`inverter-maxDescription_${index}`">W</span>
|
||||
<div v-for="(max, index) in selectedInverterData.max_power" :key="`${index}`">
|
||||
<label :for="`inverter-max_${index}`" class="col-form-label">Max power string {{ index +1 }}:</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="selectedInverterData.max_power[index]"
|
||||
:aria-describedby="`inverter-maxDescription_${index} inverter-customizer`" />
|
||||
<span class="input-group-text" :id="`inverter-maxDescription_${index}`">W<sup>*</sup></span>
|
||||
</div>
|
||||
</div>
|
||||
<div :id="`inverter-maxHelpText_${index}`" class="form-text">This value is used to
|
||||
calculate the Irradiation.</div>
|
||||
</div>
|
||||
<div :id="`inverter-customizer`" class="form-text">*) Input the kWp of the channel to
|
||||
calculate irradiation.</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" @click="onCancel"
|
||||
<button type="button" class="btn btn-secondary" @click="onCloseModal(modal)"
|
||||
data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="button" class="btn btn-primary" @click="onEditSubmit(editId)">Save
|
||||
<button type="button" class="btn btn-primary" @click="onEditSubmit()">Save
|
||||
changes</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -125,13 +115,13 @@
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
Are you sure you want to delete the inverter "{{ deleteInverterData.name }}" with serial number
|
||||
{{ deleteInverterData.serial }}?
|
||||
Are you sure you want to delete the inverter "{{ selectedInverterData.name }}" with serial number
|
||||
{{ selectedInverterData.serial }}?
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" @click="onDeleteCancel"
|
||||
<button type="button" class="btn btn-secondary" @click="onCloseModal(modalDelete)"
|
||||
data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="button" class="btn btn-danger" @click="onDelete(deleteId.toString())">Delete</button>
|
||||
<button type="button" class="btn btn-danger" @click="onDelete">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -153,10 +143,16 @@ declare interface Inverter {
|
||||
id: string,
|
||||
serial: number,
|
||||
name: string,
|
||||
type: string
|
||||
type: string,
|
||||
max_power: number[]
|
||||
}
|
||||
|
||||
declare interface AlertResponse {
|
||||
message: string,
|
||||
type: string,
|
||||
show: boolean
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
BasePage,
|
||||
@ -168,16 +164,11 @@ export default defineComponent({
|
||||
return {
|
||||
modal: {} as bootstrap.Modal,
|
||||
modalDelete: {} as bootstrap.Modal,
|
||||
deleteId: -1,
|
||||
editId: "-1",
|
||||
inverterData: {} as Inverter,
|
||||
editInverterData: {} as Inverter,
|
||||
deleteInverterData: {} as Inverter,
|
||||
newInverterData: {} as Inverter,
|
||||
selectedInverterData: {} as Inverter,
|
||||
inverters: [] as Inverter[],
|
||||
dataLoading: true,
|
||||
alertMessage: "",
|
||||
alertType: "info",
|
||||
showAlert: false,
|
||||
alert: {} as AlertResponse
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
@ -204,108 +195,42 @@ export default defineComponent({
|
||||
this.dataLoading = false;
|
||||
});
|
||||
},
|
||||
callInverterApiEndpoint: function (endpoint: string, jsonData: string) {
|
||||
const formData = new FormData();
|
||||
formData.append("data", jsonData);
|
||||
|
||||
fetch("/api/inverter/" + endpoint, {
|
||||
method: "POST",
|
||||
headers: authHeader(),
|
||||
body: formData,
|
||||
})
|
||||
.then((response) => handleResponse(response, this.$emitter))
|
||||
.then((data) => {
|
||||
this.getInverters();
|
||||
this.alert = data;
|
||||
this.alert.show = true;
|
||||
});
|
||||
},
|
||||
onSubmit() {
|
||||
const formData = new FormData();
|
||||
formData.append("data", JSON.stringify(this.inverterData));
|
||||
|
||||
fetch("/api/inverter/add", {
|
||||
method: "POST",
|
||||
headers: authHeader(),
|
||||
body: formData,
|
||||
})
|
||||
.then((response) => handleResponse(response, this.$emitter))
|
||||
.then(
|
||||
(response) => {
|
||||
this.alertMessage = response.message;
|
||||
this.alertType = response.type;
|
||||
this.showAlert = true;
|
||||
}
|
||||
)
|
||||
.then(() => { this.getInverters() });
|
||||
|
||||
this.inverterData.serial = 0;
|
||||
this.inverterData.name = "";
|
||||
this.callInverterApiEndpoint("add", JSON.stringify(this.newInverterData));
|
||||
this.newInverterData = {} as Inverter;
|
||||
},
|
||||
onDeleteModal(inverter: Inverter) {
|
||||
this.modalDelete.show();
|
||||
this.deleteInverterData.serial = inverter.serial;
|
||||
this.deleteInverterData.name = inverter.name;
|
||||
this.deleteInverterData.type = inverter.type;
|
||||
this.deleteId = +inverter.id;
|
||||
onDelete() {
|
||||
this.callInverterApiEndpoint("del", JSON.stringify({ id: this.selectedInverterData.id }));
|
||||
this.onCloseModal(this.modalDelete);
|
||||
},
|
||||
onDeleteCancel() {
|
||||
this.deleteId = -1;
|
||||
this.deleteInverterData.serial = 0;
|
||||
this.deleteInverterData.name = "";
|
||||
this.deleteInverterData.max_power = [];
|
||||
this.modalDelete.hide();
|
||||
onEditSubmit() {
|
||||
this.callInverterApiEndpoint("edit", JSON.stringify(this.selectedInverterData));
|
||||
this.onCloseModal(this.modal);
|
||||
},
|
||||
onDelete(id: string) {
|
||||
const formData = new FormData();
|
||||
formData.append("data", JSON.stringify({ id: id }));
|
||||
|
||||
fetch("/api/inverter/del", {
|
||||
method: "POST",
|
||||
headers: authHeader(),
|
||||
body: formData,
|
||||
})
|
||||
.then((response) => handleResponse(response, this.$emitter))
|
||||
.then(
|
||||
(response) => {
|
||||
this.alertMessage = response.message;
|
||||
this.alertType = response.type;
|
||||
this.showAlert = true;
|
||||
}
|
||||
)
|
||||
.then(() => { this.getInverters() });
|
||||
this.deleteId = -1;
|
||||
this.deleteInverterData.serial = 0;
|
||||
this.deleteInverterData.name = "";
|
||||
this.deleteInverterData.max_power = [];
|
||||
this.modalDelete.hide();
|
||||
},
|
||||
onEdit(inverter: Inverter) {
|
||||
this.modal.show();
|
||||
this.editId = inverter.id;
|
||||
this.editInverterData.serial = inverter.serial;
|
||||
this.editInverterData.name = inverter.name;
|
||||
this.editInverterData.type = inverter.type;
|
||||
this.editInverterData.max_power = inverter.max_power;
|
||||
},
|
||||
onCancel() {
|
||||
this.editId = "-1";
|
||||
this.editInverterData.serial = 0;
|
||||
this.editInverterData.name = "";
|
||||
this.editInverterData.max_power = [];
|
||||
this.modal.hide();
|
||||
},
|
||||
onEditSubmit(id: string) {
|
||||
const formData = new FormData();
|
||||
this.editInverterData.id = id;
|
||||
formData.append("data", JSON.stringify(this.editInverterData));
|
||||
|
||||
fetch("/api/inverter/edit", {
|
||||
method: "POST",
|
||||
headers: authHeader(),
|
||||
body: formData,
|
||||
})
|
||||
.then((response) => handleResponse(response, this.$emitter))
|
||||
.then(
|
||||
(response) => {
|
||||
this.alertMessage = response.message;
|
||||
this.alertType = response.type;
|
||||
this.showAlert = true;
|
||||
}
|
||||
)
|
||||
.then(() => { this.getInverters() });
|
||||
|
||||
this.editId = "-1";
|
||||
this.editInverterData.serial = 0;
|
||||
this.editInverterData.name = "";
|
||||
this.editInverterData.type = "";
|
||||
this.editInverterData.max_power = [];
|
||||
this.modal.hide();
|
||||
onOpenModal(modal: bootstrap.Modal, inverter: Inverter) {
|
||||
// deep copy inverter object for editing/deleting
|
||||
this.selectedInverterData = JSON.parse(JSON.stringify(inverter)) as Inverter;
|
||||
modal.show();
|
||||
},
|
||||
onCloseModal(modal: bootstrap.Modal) {
|
||||
modal.hide();
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user