Merge remote-tracking branch 'tbnobody/OpenDTU/master'

README.md

@@ -163,6 +163,7 @@ This can be achieved by editing the 'platformio.ini' file and add/change one or
   * clean the sources:  `platformio run -e generic -t clean`
   * erase flash: `platformio run -e generic -t erase`
 ### using the pre-compiled .bin files
+The pre-compiled files can be found on the [github page](https://github.com/tbnobody/OpenDTU) in the tab "Actions" and the sub menu "OpenDTU Build". Just choose the latest build from the master branch (blue font). You need to be logged in with your github account to download the files.
 Use a ESP32 flash tool of your choice and flash the .bin files to the right addresses:
 
 | Address  | File                   |
@@ -172,7 +173,8 @@ Use a ESP32 flash tool of your choice and flash the .bin files to the right addr
 | 0xe000   | boot_app0.bin          |
 | 0x10000  | opendtu-*.bin          |
 
-Make sure too uncheck the DoNotChgBin option. Otherwise you will maybe get errors like "invalid header"
+Make sure too uncheck the DoNotChgBin option. Otherwise you will maybe get errors like "invalid header".
+For further upgraded you can just use the web interface and upload the opendtu-*.bin file.
 
 ## First configuration
 * After the initial flashing of the microcontroller, an Access Point called "OpenDTU-*" is opened. The default password is "openDTU42".

docs/MQTT_Topics.md

@@ -39,7 +39,7 @@ serial will be replaced with the serial number of the inverter.
 | [serial]/0/temperature                  | R     | Temperature of inverter in degree celsius            | Degree Celsius (°C)        |
 | [serial]/0/voltage                      | R     | AC voltage in volt                                   | Volt (V)                   |
 | [serial]/0/yieldday                     | R     | Energy converted to AC per day in watt hours         | Watt hours (Wh)            |
-| [serial]/0/yieldtotal                   | R     | Energy converted to AC since reset watt hours        | Watt hours (Wh)            |
+| [serial]/0/yieldtotal                   | R     | Energy converted to AC since reset watt hours        | Watt hours (kWh)           |
 
 ### DC input channel topics
 
@@ -52,7 +52,7 @@ serial will be replaced with the serial number of the inverter.
 | [serial]/[1-4]/power                    | R     | DC power of specific input in watt                   | Watt (W)                   |
 | [serial]/[1-4]/voltage                  | R     | DC voltage of specific input in volt                 | Volt (V)                   |
 | [serial]/[1-4]/yieldday                 | R     | Energy converted to AC per day on specific input     | Watt hours (Wh)            |
-| [serial]/[1-4]/yieldtotal               | R     | Energy converted to AC since reset on specific input | Watt hours (Wh)            |
+| [serial]/[1-4]/yieldtotal               | R     | Energy converted to AC since reset on specific input | Watt hours (kWh)           |
 
 ### Inverter limit specific topics
 
@@ -69,4 +69,4 @@ cmd topics are used to set values. Status topics are updated from values set in
 | [serial]/cmd/limit_nonpersistent_relative | W     | Set the inverter limit as a percentage of total production capability. The  value will reset to the last persistent value at night without power. The updated value will show up in the web GUI and limit_relative topic immediatly. | %                          |
 | [serial]/cmd/limit_nonpersistent_absolute | W     | Set the inverter limit as a absolute value. The  value will reset to the last persistent value at night without power. The updated value will show up in the web GUI and limit_relative topic after around 4 minutes. | Watt (W)                   |
 | [serial]/cmd/power                        | W      | Turn the inverter on (1) or off (0)                 | 0 or 1                     |
-| [serial]/cmd/restart                      | W      | Restarts the inverters (also resets YieldDay)       | 1                          |
+| [serial]/cmd/restart                      | W      | Restarts the inverters (also resets YieldDay)       | 1                          |

webapp/.eslintrc.cjs

@@ -0,0 +1,14 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+  root: true,
+  'extends': [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-typescript'
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest'
+  }
+}

webapp/.gitignore

@@ -1,21 +1,26 @@
-.DS_Store
-node_modules
-/dist
-
-
-# local env files
-.env.local
-.env.*.local
-
-# Log files
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
 
 # Editor directories and files
+.vscode/*
+!.vscode/extensions.json
 .idea
-.vscode
 *.suo
 *.ntvs*
 *.njsproj

webapp/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+}

webapp/README.md

@@ -1,24 +1,25 @@
 # opendtu
 
-## Project setup
-```
+## Project Setup
+
+```sh
 yarn install
 ```
 
-### Compiles and hot-reloads for development
-```
-yarn serve
-```
+### Compile and Hot-Reload for Development
 
-### Compiles and minifies for production
+```sh
+yarn dev
 ```
+
+### Type-Check, Compile and Minify for Production
+
+```sh
 yarn build
 ```
 
-### Lints and fixes files
-```
-yarn lint
-```
+### Lint with [ESLint](https://eslint.org/)
 
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+```sh
+yarn lint
+```

webapp/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

webapp/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>OpenDTU</title>
+  </head>
+  <body>
+    <noscript>
+        <strong>We're sorry but OpenDTU doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

webapp/package.json

@@ -3,57 +3,36 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "dev": "vite",
+    "build": "run-p type-check build-only",
+    "preview": "vite preview --port 4173",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --noEmit",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
   },
   "dependencies": {
     "@popperjs/core": "^2.11.6",
     "bootstrap": "^5.2.2",
     "bootstrap-icons-vue": "^1.8.1",
-    "core-js": "^3.25.5",
     "spark-md5": "^3.0.2",
-    "vue": "^3.2.40",
-    "vue-class-component": "^8.0.0-0",
+    "vue": "^3.2.41",
     "vue-router": "^4.1.5"
   },
   "devDependencies": {
-    "@babel/core": "^7.19.3",
-    "@babel/eslint-parser": "^7.19.1",
+    "@rushstack/eslint-patch": "^1.2.0",
     "@types/bootstrap": "^5.2.5",
-    "@types/node": "^18.8.3",
+    "@types/node": "^18.11.0",
     "@types/spark-md5": "^3.0.2",
-    "@typescript-eslint/parser": "^5.38.1",
-    "@vue/cli-plugin-babel": "~5.0.8",
-    "@vue/cli-plugin-eslint": "~5.0.8",
-    "@vue/cli-plugin-router": "^5.0.6",
-    "@vue/cli-plugin-typescript": "^5.0.8",
-    "@vue/cli-service": "~5.0.8",
+    "@vitejs/plugin-vue": "^3.1.2",
     "@vue/eslint-config-typescript": "^11.0.2",
+    "@vue/tsconfig": "^0.1.3",
     "eslint": "^8.25.0",
     "eslint-plugin-vue": "^9.6.0",
+    "npm-run-all": "^4.1.5",
     "typescript": "^4.8.4",
-    "vue-cli-plugin-compression": "~2.0.0"
-  },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/vue3-essential",
-      "eslint:recommended",
-      "@vue/typescript/recommended"
-    ],
-    "parserOptions": {
-      "ecmaVersion": 2021
-    },
-    "rules": {}
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead",
-    "not ie 11"
-  ]
+    "vite": "^3.1.8",
+    "vite-plugin-compression": "^0.5.1",
+    "vite-plugin-css-injected-by-js": "^2.1.0",
+    "vue-tsc": "^1.0.8"
+  }
 }

webapp/src/App.vue

@@ -5,7 +5,7 @@
     </main>
 </template>
 
-<script>
+<script lang="ts">
 import NavBar from "./components/NavBar.vue";
 
 export default {

webapp/src/components/BasePage.vue

@@ -0,0 +1,30 @@
+<template>
+    <div :class="{'container-xxl': !isWideScreen,
+    'container-fluid': isWideScreen}" role="main">
+        <div class="page-header">
+            <h1>{{ title }}</h1>
+        </div>
+
+        <div class="text-center" v-if="isLoading">
+            <div class="spinner-border" role="status">
+                <span class="visually-hidden">Loading...</span>
+            </div>
+        </div>
+
+        <template v-if="!isLoading">
+            <slot />
+        </template>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+    props: {
+        title: { type: String, required: true },
+        isLoading: { type: Boolean, required: false, default: false },
+        isWideScreen: { type: Boolean, required: false, default: false },
+    },
+});
+</script>

webapp/src/components/partials/BootstrapAlert.vue → webapp/src/components/BootstrapAlert.vue

@@ -6,11 +6,11 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
 import { computed, defineComponent, onBeforeUnmount, ref, watch } from "vue";
 import Alert from "bootstrap/js/dist/alert";
 
-export const toInteger = (value, defaultValue = NaN) => {
+export const toInteger = (value: number, defaultValue = NaN) => {
     return Number.isInteger(value) ? value : defaultValue;
 };
 
@@ -26,18 +26,18 @@ export default defineComponent({
     },
     emits: ["dismissed", "dismiss-count-down", "update:modelValue"],
     setup(props, { emit }) {
-        const element = undefined;
-        let instance = undefined;
+        const element = ref<HTMLElement>();
+        const instance = ref<Alert>();
         const classes = computed(() => ({
             [`alert-${props.variant}`]: props.variant,
             show: props.modelValue,
             "alert-dismissible": props.dismissible,
             fade: props.modelValue,
         }));
 
-        let _countDownTimeout = 0;
+        let _countDownTimeout: number | undefined = 0;
 
-        const parseCountDown = (value) => {
+        const parseCountDown = (value: boolean | number) => {
             if (typeof value === "boolean") {
                 return 0;
             }
@@ -57,8 +57,8 @@ export default defineComponent({
 
         onBeforeUnmount(() => {
             clearCountDownInterval();
-            instance?.dispose();
-            instance = undefined;
+            instance.value?.dispose();
+            instance.value = undefined;
         });
 
         const parsedModelValue = computed(() => {
@@ -76,8 +76,8 @@ export default defineComponent({
 
         const handleShowAndModelChanged = () => {
             countDown.value = parseCountDown(props.modelValue);
-            if ((parsedModelValue.value || props.show) && !instance)
-                instance = new Alert(element);
+            if ((parsedModelValue.value || props.show) && !instance.value)
+                instance.value = new Alert(element.value as HTMLElement);
         };
 
         const dismissClicked = () => {