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

webapp: migrated first part form javascript to typescript

Browse Source
This commit is contained in:
Thomas Basler 2022-06-22 00:06:35 +02:00
parent 51eb2d1070
commit e6c36dd0db
24 changed files with 206 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
webapp/package.json
View File

@ -20,6 +20,8 @@
"devDependencies": {
"@babel/core": "^7.18.5",
"@babel/eslint-parser": "^7.18.2",
"@types/bootstrap": "^5.1.12",
"@types/node": "^18.0.0",
"@typescript-eslint/parser": "^5.29.0",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",

20
webapp/src/components/DtuAdminView.vue
View File

@ -4,7 +4,7 @@
<h1>DTU Settings</h1>
</div>
<BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
{{ this.alertMessage }}
{{ alertMessage }}
</BootstrapAlert>
<form @submit="saveDtuConfig">
<div class="card">
@ -47,7 +47,7 @@
</div>
</template>
<script>
<script lang="ts">
import { defineComponent } from 'vue';
import BootstrapAlert from "@/components/partials/BootstrapAlert.vue";
@ -57,7 +57,11 @@ export default defineComponent({
},
data() {
return {
dtuConfigList: [],
dtuConfigList: {
dtu_serial: 0,
dtu_pollinterval: 0,
dtu_palevel: 0
},
palevelList: [
{ key: 0, value: "Minimum (-18 dBm)" },
{ key: 1, value: "Low (-12 dBm)" },
@ -77,12 +81,12 @@ export default defineComponent({
fetch("/api/dtu/config")
.then((response) => response.json())
.then(
function (data) {
(data) => {
this.dtuConfigList = data;
}.bind(this)
}
);
},
saveDtuConfig(e) {
saveDtuConfig(e: Event) {
e.preventDefault();
const formData = new FormData();
@ -100,11 +104,11 @@ export default defineComponent({
}
})
.then(
function (response) {
(response) => {
this.alertMessage = response.message;
this.alertType = response.type;
this.showAlert = true;
}.bind(this)
}
);
},
},

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

@ -45,10 +45,17 @@
</div>
</template>
<script>
<script lang="ts">
import { defineComponent } from 'vue';
import InverterChannelInfo from "@/components/partials/InverterChannelInfo";
import bootstrap from "bootstrap/dist/js/bootstrap.js";
import InverterChannelInfo from "@/components/partials/InverterChannelInfo.vue";
import * as bootstrap from 'bootstrap';
declare interface Inverter {
serial: number,
name: string,
age_critical: boolean,
data_age: 0
}
export default defineComponent({
components: {
@ -56,10 +63,10 @@ export default defineComponent({
},
data() {
return {
socket: null,
heartInterval: null,
socket: {} as WebSocket,
heartInterval: 0,
waitForData: true,
inverterData: [],
inverterData: [] as Inverter[],
isFirstFetchAfterConnect: true,
};
},
@ -93,12 +100,12 @@ export default defineComponent({
this.socket = new WebSocket(webSocketUrl);
this.socket.onmessage = function (event) {
this.socket.onmessage = (event) => {
console.log(event);
this.inverterData = JSON.parse(event.data);
this.waitForData = false;
this.heartCheck(); // Reset heartbeat detection
}.bind(this);
};
this.socket.onopen = function (event) {
console.log(event);

56
webapp/src/components/InverterAdminView.vue
View File

@ -5,7 +5,7 @@
</div>
<BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
{{ this.alertMessage }}
{{ alertMessage }}
</BootstrapAlert>
<div class="card">
@ -92,10 +92,17 @@
</div>
</template>
<script>
<script lang="ts">
import { defineComponent } from 'vue';
import BootstrapAlert from "@/components/partials/BootstrapAlert.vue";
declare interface Inverter {
id: string,
serial: number,
name: string,
type: string
}
export default defineComponent({
components: {
BootstrapAlert,
@ -103,18 +110,9 @@ export default defineComponent({
data() {
return {
editId: "-1",
inverterData: {
id: "",
serial: "",
name: "",
},
editInverterData: {
id: "",
serial: "",
name: "",
type: "",
},
inverters: [],
inverterData: {} as Inverter,
editInverterData: {} as Inverter,
inverters: [] as Inverter[],
alertMessage: "",
alertType: "info",
showAlert: false,
@ -152,18 +150,18 @@ export default defineComponent({
}
})
.then(
function (response) {
(response) => {
this.alertMessage = response.message;
this.alertType = response.type;
this.showAlert = true;
}.bind(this)
}
)
.then(this.getInverters());
.then(() => { this.getInverters() });
this.inverterData.serial = "";
this.inverterData.serial = 0;
this.inverterData.name = "";
},
onDelete(id) {
onDelete(id: string) {
const formData = new FormData();
formData.append("data", JSON.stringify({ id: id }));
@ -179,15 +177,15 @@ export default defineComponent({
}
})
.then(
function (response) {
(response) => {
this.alertMessage = response.message;
this.alertType = response.type;
this.showAlert = true;
}.bind(this)
}
)
.then(this.getInverters());
.then(() => { this.getInverters() });
},
onEdit(inverter) {
onEdit(inverter: Inverter) {
this.editId = inverter.id;
this.editInverterData.serial = inverter.serial;
this.editInverterData.name = inverter.name;
@ -195,10 +193,10 @@ export default defineComponent({
},
onCancel() {
this.editId = "-1";
this.editInverterData.serial = "";
this.editInverterData.serial = 0;
this.editInverterData.name = "";
},
onEditSubmit(id) {
onEditSubmit(id: string) {
const formData = new FormData();
this.editInverterData.id = id;
formData.append("data", JSON.stringify(this.editInverterData));
@ -215,16 +213,16 @@ export default defineComponent({
}
})
.then(
function (response) {
(response) => {
this.alertMessage = response.message;
this.alertType = response.type;
this.showAlert = true;
}.bind(this)
}
)
.then(this.getInverters());
.then(() => { this.getInverters() });
this.editId = "-1";
this.editInverterData.serial = "";
this.editInverterData.serial = 0;
this.editInverterData.name = "";
this.editInverterData.type = "";
},

24
webapp/src/components/MqttAdminView.vue
View File

@ -4,7 +4,7 @@
<h1>MqTT Settings</h1>
</div>
<BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
{{ this.alertMessage }}
{{ alertMessage }}
</BootstrapAlert>
<form @submit="saveMqttConfig">
<div class="card">
@ -132,7 +132,7 @@
</div>
</template>
<script>
<script lang="ts">
import { defineComponent } from 'vue';
import BootstrapAlert from "@/components/partials/BootstrapAlert.vue";
@ -142,7 +142,19 @@ export default defineComponent({
},
data() {
return {
mqttConfigList: [],
mqttConfigList: {
mqtt_enabled: false,
mqtt_hostname: "",
mqtt_port: 0,
mqtt_username: "",
mqtt_password: "",
mqtt_topic: "",
mqtt_publish_interval: 0,
mqtt_retain: false,
mqtt_lwt_topic: "",
mqtt_lwt_online: "",
mqtt_lwt_offline: ""
},
alertMessage: "",
alertType: "info",
showAlert: false,
@ -157,7 +169,7 @@ export default defineComponent({
.then((response) => response.json())
.then((data) => (this.mqttConfigList = data));
},
saveMqttConfig(e) {
saveMqttConfig(e: Event) {
e.preventDefault();
const formData = new FormData();
@ -175,11 +187,11 @@ export default defineComponent({
}
})
.then(
function (response) {
(response) => {
this.alertMessage = response.message;
this.alertType = response.type;
this.showAlert = true;
}.bind(this)
}
);
},
},

13
webapp/src/components/MqttInfoView.vue
View File

@ -80,13 +80,22 @@
</div>
</template>
<script>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
data() {
return {
mqttDataList: [],
mqttDataList: {
mqtt_enabled: false,
mqtt_hostname: "",
mqtt_port: 0,
mqtt_username: "",
mqtt_topic: "",
mqtt_publish_interval: 0,
mqtt_retain: false,
mqtt_connected: false
},
};
},
created() {

6
webapp/src/components/NavBar.vue
View File

@ -69,9 +69,3 @@
</div>
</nav>
</template>
<script>
</script>
<style>
</style>

22
webapp/src/components/NetworkAdminView.vue
View File

@ -4,7 +4,7 @@
<h1>Network Settings</h1>
</div>
<BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
{{ this.alertMessage }}
{{ alertMessage }}
</BootstrapAlert>
<form @submit="saveNetworkConfig">
<div class="card">
@ -97,7 +97,7 @@
</div>
</template>
<script>
<script lang="ts">
import { defineComponent } from 'vue';
import BootstrapAlert from "@/components/partials/BootstrapAlert.vue";
@ -107,7 +107,17 @@ export default defineComponent({
},
data() {
return {
networkConfigList: [],
networkConfigList: {
ssid: "",
password: "",
hostname: "",
dhcp: false,
ipaddress: "",
netmask: "",
gateway: "",
dns1: "",
dns2: ""
},
alertMessage: "",
alertType: "info",
showAlert: false,
@ -122,7 +132,7 @@ export default defineComponent({
.then((response) => response.json())
.then((data) => (this.networkConfigList = data));
},
saveNetworkConfig(e) {
saveNetworkConfig(e: Event) {
e.preventDefault();
const formData = new FormData();
@ -140,11 +150,11 @@ export default defineComponent({
}
})
.then(
function (response) {
(response) => {
this.alertMessage = response.message;
this.alertType = response.type;
this.showAlert = true;
}.bind(this)
}
);
},
},

2
webapp/src/components/NetworkInfoView.vue
View File

@ -14,7 +14,7 @@
</div>
</template>
<script>
<script lang="ts">
import { defineComponent } from 'vue';
import WifiStationInfo from "./partials/WifiStationInfo.vue";
import WifiApInfo from "./partials/WifiApInfo.vue";

20
webapp/src/components/NtpAdminView.vue
View File

@ -4,7 +4,7 @@
<h1>NTP Settings</h1>
</div>
<BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
{{ this.alertMessage }}
{{ alertMessage }}
</BootstrapAlert>
<form @submit="saveNtpConfig">
<div class="card">
@ -44,7 +44,7 @@
</div>
</template>
<script>
<script lang="ts">
import { defineComponent } from 'vue';
import BootstrapAlert from "@/components/partials/BootstrapAlert.vue";
@ -54,7 +54,11 @@ export default defineComponent({
},
data() {
return {
ntpConfigList: [],
ntpConfigList: {
ntp_server: "",
ntp_timezone: "",
ntp_timezone_descr: ""
},
timezoneList: {},
timezoneSelect: "",
alertMessage: "",
@ -82,16 +86,16 @@ export default defineComponent({
fetch("/api/ntp/config")
.then((response) => response.json())
.then(
function (data) {
(data) => {
this.ntpConfigList = data;
this.timezoneSelect =
this.ntpConfigList.ntp_timezone_descr +
"---" +
this.ntpConfigList.ntp_timezone;
}.bind(this)
}
);
},
saveNtpConfig(e) {
saveNtpConfig(e: Event) {
e.preventDefault();
const formData = new FormData();
@ -109,11 +113,11 @@ export default defineComponent({
}
})
.then(
function (response) {
(response) => {
this.alertMessage = response.message;
this.alertType = response.type;
this.showAlert = true;
}.bind(this)
}
);
},
},

10
webapp/src/components/NtpInfoView.vue
View File

@ -56,13 +56,19 @@
</div>
</template>
<script>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
data() {
return {
ntpDataList: [],
ntpDataList: {
ntp_server: "",
ntp_timezone: "",
ntp_timezone_descr: "",
ntp_status: false,
ntp_localtime: ""
},
};
},
created() {

2
webapp/src/components/SystemInfoView.vue
View File

@ -12,7 +12,7 @@
</div>
</template>
<script>
<script lang="ts">
import { defineComponent } from 'vue';
import HardwareInfo from "@/components/partials/HardwareInfo.vue";
import FirmwareInfo from "@/components/partials/FirmwareInfo.vue";

2
webapp/src/components/partials/BootstrapAlert.vue
View File

@ -15,7 +15,7 @@ export const toInteger = (value, defaultValue = NaN) => {
};
export default defineComponent({
name: "BAlert",
name: "BootstrapAlert",
props: {
dismissLabel: { type: String, default: "Close" },
dismissible: { type: Boolean, default: false },

23
webapp/src/components/partials/FirmwareInfo.vue
View File

@ -46,13 +46,22 @@
</div>
</template>
<script>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
data() {
return {
systemDataList: [],
systemDataList: {
hostname: "",
sdkversion: "",
firmware_version: "",
git_hash: "",
resetreason_0: "",
resetreason_1: "",
cfgsavecount: 0,
uptime: 0
},
};
},
created() {
@ -60,11 +69,11 @@ export default defineComponent({
},
computed: {
timeInHours() {
return (value) => {
const days = parseInt(Math.floor(value / 3600 / 24));
const hours = parseInt(Math.floor((value - days * 3600 * 24) / 3600));
const minutes = parseInt(Math.floor((value - days * 3600 * 24 - hours * 3600) / 60));
const seconds = parseInt((value - days * 3600 * 24 - hours * 3600 + minutes * 60) % 60);
return (value: number) => {
const days = Math.floor(value / 3600 / 24);
const hours = Math.floor((value - days * 3600 * 24) / 3600);
const minutes = Math.floor((value - days * 3600 * 24 - hours * 3600) / 60);
const seconds = (value - days * 3600 * 24 - hours * 3600 + minutes * 60) % 60;
const dHours = hours > 9 ? hours : "0" + hours;
const dMins = minutes > 9 ? minutes : "0" + minutes;

12
webapp/src/components/partials/FsInfo.vue
View File

@ -3,9 +3,9 @@
<th>{{ name }}</th>
<td>
<div class="progress">
<div class="progress-bar" role="progressbar" :style="{ width: this.getPercent() + '%' }"
v-bind:aria-valuenow="this.getPercent()" aria-valuemin="0" aria-valuemax="100">
{{ this.getPercent() }}%
<div class="progress-bar" role="progressbar" :style="{ width: getPercent() + '%' }"
v-bind:aria-valuenow="getPercent()" aria-valuemin="0" aria-valuemax="100">
{{ getPercent() }}%
</div>
</div>
</td>
@ -18,14 +18,14 @@
</tr>
</template>
<script>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
props: {
name: String,
total: Number,
used: Number,
total: { type: Number, required: true },
used: { type: Number, required: true },
},
methods: {
getPercent() {

9
webapp/src/components/partials/HardwareInfo.vue
View File

@ -30,13 +30,18 @@
</div>
</template>
<script>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
data() {
return {
systemDataList: [],
systemDataList: {
chipmodel: "",
chiprevision: "",
chipcores: "",
cpufreq: ""
},
};
},
created() {

7
webapp/src/components/partials/InterfaceApInfo.vue
View File

@ -22,13 +22,16 @@
</div>
</template>
<script>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
data() {
return {
networkDataList: [],
networkDataList: {
ap_ip: "",
ap_mac: ""
},
};
},
created() {

11
webapp/src/components/partials/InterfaceStationInfo.vue
View File

@ -38,13 +38,20 @@
</div>
</template>
<script>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
data() {
return {
networkDataList: [],
networkDataList: {
sta_ip: "",
sta_netmask: "",
sta_gateway: "",
sta_dns1: "",
sta_dns2: "",
sta_mac: ""
},
};
},
created() {

4
webapp/src/components/partials/InverterChannelInfo.vue
View File

@ -24,7 +24,7 @@
</div>
</template>
<script>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
@ -33,7 +33,7 @@ export default defineComponent({
channelNumber: Number,
},
methods: {
formatNumber(num) {
formatNumber(num: string) {
return parseFloat(num).toFixed(2);
},
},

11
webapp/src/components/partials/MemoryInfo.vue
View File

@ -25,7 +25,7 @@
</div>
</template>
<script>
<script lang="ts">
import { defineComponent } from 'vue';
import FsInfo from "@/components/partials/FsInfo.vue";
@ -35,7 +35,14 @@ export default defineComponent({
},
data() {
return {
systemDataList: [],
systemDataList: {
heap_total: 0,
heap_used: 0,
littlefs_total: 0,
littlefs_used: 0,
sketch_total: 0,
sketch_used: 0
},
};
},
created() {

8
webapp/src/components/partials/WifiApInfo.vue
View File

@ -32,13 +32,17 @@
</div>
</template>
<script>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
data() {
return {
networkDataList: [],
networkDataList: {
ap_status: false,
ap_ssid: "",
ap_stationnum: 0
},
};
},
created() {

12
webapp/src/components/partials/WifiStationInfo.vue
View File

@ -23,7 +23,7 @@
</tr>
<tr>
<th>Quality</th>
<td>{{ this.getRSSIasQuality(networkDataList.sta_rssi) }} %</td>
<td>{{ getRSSIasQuality(networkDataList.sta_rssi) }} %</td>
</tr>
<tr>
<th>RSSI</th>
@ -36,13 +36,17 @@
</div>
</template>
<script>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
data() {
return {
networkDataList: [],
networkDataList: {
sta_status: false,
sta_ssid: "",
sta_rssi: 0
},
};
},
created() {
@ -54,7 +58,7 @@ export default defineComponent({
.then((response) => response.json())
.then((data) => (this.networkDataList = data));
},
getRSSIasQuality(rssi) {
getRSSIasQuality(rssi: number) {
let quality = 0;
if (rssi <= -100) {

2
webapp/src/main.ts
View File

@ -4,6 +4,6 @@ import router from './router'
import { BootstrapIconsPlugin } from 'bootstrap-icons-vue';
import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap/dist/js/bootstrap.js"
import "bootstrap"
createApp(App).use(router).use(BootstrapIconsPlugin).mount('#app')

14
webapp/yarn.lock
View File

@ -1151,7 +1151,7 @@
resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.21.tgz#5de5a2385a35309427f6011992b544514d559aa1"
integrity sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==
"@popperjs/core@^2.11.5":
"@popperjs/core@^2.11.5", "@popperjs/core@^2.9.2":
version "2.11.5"
resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.5.tgz#db5a11bf66bdab39569719555b0f76e138d7bd64"
integrity sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==
@ -1208,6 +1208,13 @@
dependencies:
"@types/node" "*"
"@types/bootstrap@^5.1.12":
version "5.1.12"
resolved "https://registry.yarnpkg.com/@types/bootstrap/-/bootstrap-5.1.12.tgz#4d704f6385fda2f1a56cc458f1f4cafab6e9f7e3"
integrity sha512-pSS5BGEgepwzdbsBGswBWFmgrnYpp7c4UfuYe1FJWwkrcjm/JVwfG4gBkOYtd92Otd3RdJK0ByBWMkBROfLEPw==
dependencies:
"@popperjs/core" "^2.9.2"
"@types/connect-history-api-fallback@^1.3.5":
version "1.3.5"
resolved "https://registry.yarnpkg.com/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.3.5.tgz#d1f7a8a09d0ed5a57aee5ae9c18ab9b803205dae"
@ -1303,6 +1310,11 @@
resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.35.tgz#635b7586086d51fb40de0a2ec9d1014a5283ba4a"
integrity sha512-vu1SrqBjbbZ3J6vwY17jBs8Sr/BKA+/a/WtjRG+whKg1iuLFOosq872EXS0eXWILdO36DHQQeku/ZcL6hz2fpg==
"@types/node@^18.0.0":
version "18.0.0"
resolved "https://registry.yarnpkg.com/@types/node/-/node-18.0.0.tgz#67c7b724e1bcdd7a8821ce0d5ee184d3b4dd525a"
integrity sha512-cHlGmko4gWLVI27cGJntjs/Sj8th9aYwplmZFwmmgYQQvL5NUsgVJG7OddLvNfLqYS31KFN0s3qlaD9qCaxACA==
"@types/normalize-package-data@^2.4.0":
version "2.4.1"
resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz#d3357479a0fdfdd5907fe67e17e0a85c906e1301"