|
| 1 | +<template> |
| 2 | + <BasePage :title="$t('modbusadmin.ModbusSettings')" :isLoading="dataLoading"> |
| 3 | + <BootstrapAlert v-model="showAlert" dismissible :variant="alertType"> |
| 4 | + {{ alertMessage }} |
| 5 | + </BootstrapAlert> |
| 6 | + |
| 7 | + <form @submit="saveModbusConfig"> |
| 8 | + <CardElement :text="$t('modbusadmin.ModbusConfiguration')" textVariant="text-bg-primary"> |
| 9 | + <InputElement :label="$t('modbusadmin.EnableModbusTCP')" |
| 10 | + v-model="modbusConfigList.modbus_tcp_enabled" |
| 11 | + type="checkbox" wide/> |
| 12 | + |
| 13 | + </CardElement> |
| 14 | + |
| 15 | + <FormFooter @reload="getModbusConfig"/> |
| 16 | + </form> |
| 17 | + </BasePage> |
| 18 | +</template> |
| 19 | + |
| 20 | +<script lang="ts"> |
| 21 | +import BasePage from '@/components/BasePage.vue'; |
| 22 | +import BootstrapAlert from "@/components/BootstrapAlert.vue"; |
| 23 | +import CardElement from '@/components/CardElement.vue'; |
| 24 | +import FormFooter from '@/components/FormFooter.vue'; |
| 25 | +import InputElement from '@/components/InputElement.vue'; |
| 26 | +import type { ModbusConfig } from "@/types/ModbusConfig"; |
| 27 | +import { authHeader, handleResponse } from '@/utils/authentication'; |
| 28 | +import { defineComponent } from 'vue'; |
| 29 | +
|
| 30 | +export default defineComponent({ |
| 31 | + components: { |
| 32 | + BasePage, |
| 33 | + BootstrapAlert, |
| 34 | + CardElement, |
| 35 | + FormFooter, |
| 36 | + InputElement, |
| 37 | + }, |
| 38 | + data() { |
| 39 | + return { |
| 40 | + dataLoading: true, |
| 41 | + modbusConfigList: {} as ModbusConfig, |
| 42 | + alertMessage: "", |
| 43 | + alertType: "info", |
| 44 | + showAlert: false, |
| 45 | + qosTypeList: [ |
| 46 | + { key: 0, value: 'QOS0' }, |
| 47 | + { key: 1, value: 'QOS1' }, |
| 48 | + { key: 2, value: 'QOS2' }, |
| 49 | + ], |
| 50 | + }; |
| 51 | + }, |
| 52 | + created() { |
| 53 | + this.getModbusConfig(); |
| 54 | + }, |
| 55 | + methods: { |
| 56 | + getModbusConfig() { |
| 57 | + this.dataLoading = true; |
| 58 | + fetch("/api/modbus/config", { headers: authHeader() }) |
| 59 | + .then((response) => handleResponse(response, this.$emitter, this.$router)) |
| 60 | + .then((data) => { |
| 61 | + this.modbusConfigList = data; |
| 62 | + this.dataLoading = false; |
| 63 | + }); |
| 64 | + }, |
| 65 | + saveModbusConfig(e: Event) { |
| 66 | + e.preventDefault(); |
| 67 | +
|
| 68 | + const formData = new FormData(); |
| 69 | + formData.append("data", JSON.stringify(this.modbusConfigList)); |
| 70 | +
|
| 71 | + fetch("/api/modbus/config", { |
| 72 | + method: "POST", |
| 73 | + headers: authHeader(), |
| 74 | + body: formData, |
| 75 | + }) |
| 76 | + .then((response) => handleResponse(response, this.$emitter, this.$router)) |
| 77 | + .then( |
| 78 | + (response) => { |
| 79 | + this.alertMessage = this.$t('apiresponse.' + response.code, response.param); |
| 80 | + this.alertType = response.type; |
| 81 | + this.showAlert = true; |
| 82 | + } |
| 83 | + ); |
| 84 | + }, |
| 85 | + }, |
| 86 | +}); |
| 87 | +</script> |
0 commit comments