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

webapp: Fix lint errors

Browse Source
This commit is contained in:
Thomas Basler 2024-04-12 20:34:30 +02:00
parent b58d08683e
commit de156ef10a
13 changed files with 189 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
webapp/src/components/BasePage.vue
View File

@ -48,15 +48,14 @@ export default defineComponent({
showReload: { type: Boolean, required: false, default: false }, showReload: { type: Boolean, required: false, default: false },
}, },
mounted() { mounted() {
var self = this;
console.log("init"); console.log("init");
PullToRefresh.init({ PullToRefresh.init({
mainElement: 'body', // above which element? mainElement: 'body', // above which element?
instructionsPullToRefresh: this.$t('base.Pull'), instructionsPullToRefresh: this.$t('base.Pull'),
instructionsReleaseToRefresh: this.$t('base.Release'), instructionsReleaseToRefresh: this.$t('base.Release'),
instructionsRefreshing: this.$t('base.Refreshing'), instructionsRefreshing: this.$t('base.Refreshing'),
onRefresh: function() { onRefresh: () => {
self.$emit('reload'); this.$emit('reload');
} }
}); });
}, },

4
webapp/src/components/BootstrapAlert.vue
View File

@ -52,7 +52,7 @@ export default defineComponent({
_countDownTimeout = undefined; _countDownTimeout = undefined;
}; };
var countDown = ref(); const countDown = ref();
watch(() => props.modelValue, () => { watch(() => props.modelValue, () => {
countDown.value = parseCountDown(props.modelValue); countDown.value = parseCountDown(props.modelValue);
}); });
@ -116,4 +116,4 @@ export default defineComponent({
}; };
}, },
}); });
</script> </script>

4
webapp/src/components/FirmwareInfo.vue
View File

@ -83,10 +83,10 @@ export default defineComponent({
}, },
computed: { computed: {
modelAllowVersionInfo: { modelAllowVersionInfo: {
get(): any { get(): boolean {
return !!this.allowVersionInfo; return !!this.allowVersionInfo;
}, },
set(value: any) { set(value: boolean) {
this.$emit('update:allowVersionInfo', value); this.$emit('update:allowVersionInfo', value);
}, },
}, },

4
webapp/src/components/InputElement.vue
View File

@ -83,10 +83,12 @@ export default defineComponent({
}, },
computed: { computed: {
model: { model: {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
get(): any { get(): any {
if (this.type === 'checkbox') return !!this.modelValue; if (this.type === 'checkbox') return !!this.modelValue;
return this.modelValue; return this.modelValue;
}, },
// eslint-disable-next-line @typescript-eslint/no-explicit-any
set(value: any) { set(value: any) {
this.$emit('update:modelValue', value); this.$emit('update:modelValue', value);
}, },
@ -112,4 +114,4 @@ export default defineComponent({
} }
}, },
}); });
</script> </script>

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

@ -28,9 +28,11 @@ export default defineComponent({
}, },
computed: { computed: {
model: { model: {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
get(): any { get(): any {
return this.modelValue; return this.modelValue;
}, },
// eslint-disable-next-line @typescript-eslint/no-explicit-any
set(value: any) { set(value: any) {
this.$emit('update:modelValue', value); this.$emit('update:modelValue', value);
}, },

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

@ -146,8 +146,8 @@ export default defineComponent({
}, },
isEaster() { isEaster() {
const easter = this.getEasterSunday(this.now.getFullYear()); const easter = this.getEasterSunday(this.now.getFullYear());
var easterStart = new Date(easter); const easterStart = new Date(easter);
var easterEnd = new Date(easter); const easterEnd = new Date(easter);
easterStart.setDate(easterStart.getDate() - 2); easterStart.setDate(easterStart.getDate() - 2);
easterEnd.setDate(easterEnd.getDate() + 1); easterEnd.setDate(easterEnd.getDate() + 1);
return this.now >= easterStart && this.now < easterEnd; return this.now >= easterStart && this.now < easterEnd;
@ -170,18 +170,18 @@ export default defineComponent({
this.$refs.navbarCollapse && (this.$refs.navbarCollapse as HTMLElement).classList.remove("show"); this.$refs.navbarCollapse && (this.$refs.navbarCollapse as HTMLElement).classList.remove("show");
}, },
getEasterSunday(year: number): Date { getEasterSunday(year: number): Date {
var f = Math.floor; const f = Math.floor;
var G = year % 19; const G = year % 19;
var C = f(year / 100); const C = f(year / 100);
var H = (C - f(C / 4) - f((8 * C + 13) / 25) + 19 * G + 15) % 30; const H = (C - f(C / 4) - f((8 * C + 13) / 25) + 19 * G + 15) % 30;
var I = H - f(H / 28) * (1 - f(29 / (H + 1)) * f((21 - G) / 11)); const I = H - f(H / 28) * (1 - f(29 / (H + 1)) * f((21 - G) / 11));
var J = (year + f(year / 4) + I + 2 - C + f(C / 4)) % 7; const J = (year + f(year / 4) + I + 2 - C + f(C / 4)) % 7;
var L = I - J; const L = I - J;
var month = 3 + f((L + 40) / 44); const month = 3 + f((L + 40) / 44);
var day = L + 28 - 31 * f(month / 4); const day = L + 28 - 31 * f(month / 4);
return new Date(year, month - 1, day); return new Date(year, month - 1, day);
} }
}, },
}); });
</script> </script>

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

@ -84,9 +84,11 @@ export default defineComponent({
let comCur = 999999; let comCur = 999999;
if (this.selectedPinAssignment && category in this.selectedPinAssignment) { if (this.selectedPinAssignment && category in this.selectedPinAssignment) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
comSel = (this.selectedPinAssignment as any)[category][prop]; comSel = (this.selectedPinAssignment as any)[category][prop];
} }
if (this.currentPinAssignment && category in this.currentPinAssignment) { if (this.currentPinAssignment && category in this.currentPinAssignment) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
comCur = (this.currentPinAssignment as any)[category][prop]; comCur = (this.currentPinAssignment as any)[category][prop];
} }

2
webapp/src/utils/authentication.ts
View File

@ -41,7 +41,7 @@ export function isLoggedIn(): boolean {
return (localStorage.getItem('user') != null); return (localStorage.getItem('user') != null);
} }
export function login(username: String, password: String) { export function login(username: string, password: string) {
const requestOptions = { const requestOptions = {
method: 'GET', method: 'GET',
headers: { headers: {

4
webapp/src/views/ConfigAdminView.vue
View File

@ -188,8 +188,8 @@ export default defineComponent({
fetch("/api/config/get?file=" + this.backupFileSelect, { headers: authHeader() }) fetch("/api/config/get?file=" + this.backupFileSelect, { headers: authHeader() })
.then(res => res.blob()) .then(res => res.blob())
.then(blob => { .then(blob => {
var file = window.URL.createObjectURL(blob); const file = window.URL.createObjectURL(blob);
var a = document.createElement('a'); const a = document.createElement('a');
a.href = file; a.href = file;
a.download = this.backupFileSelect; a.download = this.backupFileSelect;
document.body.appendChild(a); document.body.appendChild(a);

308
webapp/src/views/ConsoleInfoView.vue
View File

@ -1,154 +1,154 @@
<template> <template>
<BasePage :title="$t('console.Console')" :isLoading="dataLoading"> <BasePage :title="$t('console.Console')" :isLoading="dataLoading">
<CardElement :text="$t('console.VirtualDebugConsole')" textVariant="text-bg-primary"> <CardElement :text="$t('console.VirtualDebugConsole')" textVariant="text-bg-primary">
<div class="row g-3 align-items-center"> <div class="row g-3 align-items-center">
<div class="col"> <div class="col">
<div class="form-check form-switch"> <div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="autoScroll" <input class="form-check-input" type="checkbox" role="switch" id="autoScroll"
v-model="isAutoScroll"> v-model="isAutoScroll">
<label class="form-check-label" for="autoScroll"> <label class="form-check-label" for="autoScroll">
{{ $t('console.EnableAutoScroll') }} {{ $t('console.EnableAutoScroll') }}
</label> </label>
</div> </div>
</div> </div>
<div class="col text-end"> <div class="col text-end">
<div class="btn-group" role="group"> <div class="btn-group" role="group">
<button type="button" class="btn btn-primary" :onClick="clearConsole"> <button type="button" class="btn btn-primary" :onClick="clearConsole">
{{ $t('console.ClearConsole') }}</button> {{ $t('console.ClearConsole') }}</button>
<button type="button" class="btn btn-secondary" :onClick="copyConsole"> <button type="button" class="btn btn-secondary" :onClick="copyConsole">
{{ $t('console.CopyToClipboard') }}</button> {{ $t('console.CopyToClipboard') }}</button>
</div> </div>
</div> </div>
</div> </div>
<textarea id="console" class="form-control" rows="24" v-model="consoleBuffer" readonly></textarea> <textarea id="console" class="form-control" rows="24" v-model="consoleBuffer" readonly></textarea>
</CardElement> </CardElement>
</BasePage> </BasePage>
</template> </template>
<script lang="ts"> <script lang="ts">
import BasePage from '@/components/BasePage.vue'; import BasePage from '@/components/BasePage.vue';
import CardElement from '@/components/CardElement.vue'; import CardElement from '@/components/CardElement.vue';
import { authUrl } from '@/utils/authentication'; import { authUrl } from '@/utils/authentication';
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
export default defineComponent({ export default defineComponent({
components: { components: {
BasePage, BasePage,
CardElement, CardElement,
}, },
data() { data() {
return { return {
socket: {} as WebSocket, socket: {} as WebSocket,
heartInterval: 0, heartInterval: 0,
dataLoading: true, dataLoading: true,
consoleBuffer: "", consoleBuffer: "",
isAutoScroll: true, isAutoScroll: true,
endWithNewline: false, endWithNewline: false,
}; };
}, },
created() { created() {
this.initSocket(); this.initSocket();
this.dataLoading = false; this.dataLoading = false;
}, },
unmounted() { unmounted() {
this.closeSocket(); this.closeSocket();
}, },
watch: { watch: {
consoleBuffer() { consoleBuffer() {
if (this.isAutoScroll) { if (this.isAutoScroll) {
let textarea = this.$el.querySelector("#console"); const textarea = this.$el.querySelector("#console");
setTimeout(() => { setTimeout(() => {
textarea.scrollTop = textarea.scrollHeight; textarea.scrollTop = textarea.scrollHeight;
}, 0); }, 0);
} }
} }
}, },
methods: { methods: {
initSocket() { initSocket() {
console.log("Starting connection to WebSocket Server"); console.log("Starting connection to WebSocket Server");
const { protocol, host } = location; const { protocol, host } = location;
const authString = authUrl(); const authString = authUrl();
const webSocketUrl = `${protocol === "https:" ? "wss" : "ws" const webSocketUrl = `${protocol === "https:" ? "wss" : "ws"
}://${authString}${host}/console`; }://${authString}${host}/console`;
this.closeSocket(); this.closeSocket();
this.socket = new WebSocket(webSocketUrl); this.socket = new WebSocket(webSocketUrl);
this.socket.onmessage = (event) => { this.socket.onmessage = (event) => {
console.log(event); console.log(event);
let outstr = new String(event.data); let outstr = new String(event.data);
let removedNewline = false; let removedNewline = false;
if (outstr.endsWith('\n')) { if (outstr.endsWith('\n')) {
outstr = outstr.substring(0, outstr.length - 1); outstr = outstr.substring(0, outstr.length - 1);
removedNewline = true; removedNewline = true;
} }
this.consoleBuffer += (this.endWithNewline ? this.getOutDate() : '') + outstr.replaceAll("\n", "\n" + this.getOutDate()); this.consoleBuffer += (this.endWithNewline ? this.getOutDate() : '') + outstr.replaceAll("\n", "\n" + this.getOutDate());
this.endWithNewline = removedNewline; this.endWithNewline = removedNewline;
this.heartCheck(); // Reset heartbeat detection this.heartCheck(); // Reset heartbeat detection
}; };
this.socket.onopen = function (event) { this.socket.onopen = function (event) {
console.log(event); console.log(event);
console.log("Successfully connected to the echo websocket server..."); console.log("Successfully connected to the echo websocket server...");
}; };
// Listen to window events , When the window closes , Take the initiative to disconnect websocket Connect // Listen to window events , When the window closes , Take the initiative to disconnect websocket Connect
window.onbeforeunload = () => { window.onbeforeunload = () => {
this.closeSocket(); this.closeSocket();
}; };
}, },
// Send heartbeat packets regularly * 59s Send a heartbeat // Send heartbeat packets regularly * 59s Send a heartbeat
heartCheck() { heartCheck() {
this.heartInterval && clearTimeout(this.heartInterval); this.heartInterval && clearTimeout(this.heartInterval);
this.heartInterval = setInterval(() => { this.heartInterval = setInterval(() => {
if (this.socket.readyState === 1) { if (this.socket.readyState === 1) {
// Connection status // Connection status
this.socket.send("ping"); this.socket.send("ping");
} else { } else {
this.initSocket(); // Breakpoint reconnection 5 Time this.initSocket(); // Breakpoint reconnection 5 Time
} }
}, 5 * 1000); }, 5 * 1000);
}, },
/** To break off websocket Connect */ /** To break off websocket Connect */
closeSocket() { closeSocket() {
try { try {
this.socket.close(); this.socket.close();
} catch { } catch {
// continue regardless of error // continue regardless of error
} }
this.heartInterval && clearTimeout(this.heartInterval); this.heartInterval && clearTimeout(this.heartInterval);
}, },
getOutDate(): String { getOutDate(): string {
const u = new Date(); const u = new Date();
return ('0' + u.getHours()).slice(-2) + ':' + return ('0' + u.getHours()).slice(-2) + ':' +
('0' + u.getMinutes()).slice(-2) + ':' + ('0' + u.getMinutes()).slice(-2) + ':' +
('0' + u.getSeconds()).slice(-2) + '.' + ('0' + u.getSeconds()).slice(-2) + '.' +
(u.getMilliseconds() / 1000).toFixed(3).slice(2, 5) + ' > '; (u.getMilliseconds() / 1000).toFixed(3).slice(2, 5) + ' > ';
}, },
clearConsole() { clearConsole() {
this.consoleBuffer = ""; this.consoleBuffer = "";
}, },
copyConsole() { copyConsole() {
var input = document.createElement('textarea'); const input = document.createElement('textarea');
input.innerHTML = this.consoleBuffer; input.innerHTML = this.consoleBuffer;
document.body.appendChild(input); document.body.appendChild(input);
input.select(); input.select();
document.execCommand('copy'); document.execCommand('copy');
document.body.removeChild(input); document.body.removeChild(input);
} }
} }
}); });
</script> </script>
<style> <style>
#console { #console {
background-color: #0C0C0C; background-color: #0C0C0C;
color: #CCCCCC; color: #CCCCCC;
padding: 8px; padding: 8px;
font-family: courier new; font-family: courier new;
font-size: .875em; font-size: .875em;
} }
</style> </style>

12
webapp/src/views/HomeView.vue
View File

@ -5,7 +5,7 @@
<div class="row gy-3"> <div class="row gy-3">
<div class="col-sm-3 col-md-2" :style="[inverterData.length == 1 ? { 'display': 'none' } : {}]"> <div class="col-sm-3 col-md-2" :style="[inverterData.length == 1 ? { 'display': 'none' } : {}]">
<div class="nav nav-pills row-cols-sm-1" id="v-pills-tab" role="tablist" aria-orientation="vertical"> <div class="nav nav-pills row-cols-sm-1" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<button v-for="inverter in inverterData" :key="inverter.serial" class="nav-link border border-primary text-break" <button v-for="inverter in inverterData" :key="inverter.serial" class="nav-link border border-primary text-break"
:id="'v-pills-' + inverter.serial + '-tab'" data-bs-toggle="pill" :id="'v-pills-' + inverter.serial + '-tab'" data-bs-toggle="pill"
:data-bs-target="'#v-pills-' + inverter.serial" type="button" role="tab" :data-bs-target="'#v-pills-' + inverter.serial" type="button" role="tab"
aria-controls="'v-pills-' + inverter.serial" aria-selected="true"> aria-controls="'v-pills-' + inverter.serial" aria-selected="true">
@ -476,17 +476,15 @@ export default defineComponent({
} }
}; };
var self = this; this.socket.onopen = (event) => {
this.socket.onopen = function (event) {
console.log(event); console.log(event);
console.log("Successfully connected to the echo websocket server..."); console.log("Successfully connected to the echo websocket server...");
self.isWebsocketConnected = true; this.isWebsocketConnected = true;
}; };
this.socket.onclose = function () { this.socket.onclose = () => {
console.log("Connection to websocket closed...") console.log("Connection to websocket closed...")
self.isWebsocketConnected = false; this.isWebsocketConnected = false;
} }
// Listen to window events , When the window closes , Take the initiative to disconnect websocket Connect // Listen to window events , When the window closes , Take the initiative to disconnect websocket Connect

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

@ -99,7 +99,7 @@ export default defineComponent({
} }
}, },
watch: { watch: {
allowVersionInfo(allow: Boolean) { allowVersionInfo(allow: boolean) {
localStorage.setItem("allowVersionInfo", allow ? "1" : "0"); localStorage.setItem("allowVersionInfo", allow ? "1" : "0");
if (allow) { if (allow) {
this.getUpdateInfo(); this.getUpdateInfo();

1
webapp/vite.config.ts
View File

@ -12,6 +12,7 @@ import path from 'path'
// example 'vite.user.ts': export const proxy_target = '192.168.16.107' // example 'vite.user.ts': export const proxy_target = '192.168.16.107'
let proxy_target; let proxy_target;
try { try {
// eslint-disable-next-line
proxy_target = require('./vite.user.ts').proxy_target; proxy_target = require('./vite.user.ts').proxy_target;
} catch (error) { } catch (error) {
proxy_target = '192.168.20.110'; proxy_target = '192.168.20.110';