Refactor to Websocket Based on Node-Red (#12)

* remove mui from components

* remove mui from components

* remove mui from components

* remove mui from components

* remove mui from components

* new temp card

* improve temperature component

* improve temperature component

* rolladen svg

* remove mui from components

* refactor

* improve shutters svg

* websocket

* test data

* add new type for event

* continue refactoring

* setDatepoint.tcl

* refactor

* simplify event

* refactoring

* only print datapoints which are not empty

* optimistic update

* Thermostat Card

* refactor

* refactor

* refactor

* refactor

* refactoring

* update readme

* update readme

* update readme

---------

Co-authored-by: Tristan Teufel <[email protected]>

.eslintrc.json

@@ -6,12 +6,18 @@
     {
       "files": ["*.ts", "*.tsx"],
       "extends": ["plugin:@nx/typescript"],
-      "rules": {}
+      "rules": {
+        "@typescript-eslint/no-extra-semi": "error",
+        "no-extra-semi": "off"
+      }
     },
     {
       "files": ["*.js", "*.jsx"],
       "extends": ["plugin:@nx/javascript"],
-      "rules": {}
+      "rules": {
+        "@typescript-eslint/no-extra-semi": "error",
+        "no-extra-semi": "off"
+      }
     }
   ],
   "extends": ["plugin:@nx/react"]

.gitignore

@@ -39,4 +39,7 @@ testem.log
 .DS_Store
 Thumbs.db
 
-.nx/cache
+.nx/cache
+.nx/workspace-data
+vite.config.*.timestamp*
+vitest.config.*.timestamp*

.prettierignore

@@ -1,4 +1,5 @@
 # Add files here to ignore them from prettier formatting
 /dist
 /coverage
-/.nx/cache
+/.nx/cache
+/.nx/workspace-data

README.md

@@ -7,74 +7,60 @@ It aims to solve challenges in bridging the gap between the old and the new.
 
 Our aim is to craft a cutting edge, simple, yet fast, responsive Web UI as an add-on to your CCU3.
 
-1. Most web-based homematic solutions are outdated and mired in antiquated commonJS code, entangled in the callback chaos.
-2. I dont want to setup another server like [Mediola](https://www.mediola.com/ccu3) or [Home-Assistant](https://www.home-assistant.io/) to have a state of the Art UI.
-3. Keep the CCU3 alive and bridge the gap from the old to the new.
-
 # Technology Stack
 
 This project is built with a robust set of technologies to ensure high performance and maintainability:
 
 - [React](https://reactjs.org/): A JavaScript library for building user interfaces.
 - [TypeScript](https://www.typescriptlang.org/): A strongly typed superset of JavaScript that adds static types.
-- [Material-UI](https://mui.com/): A popular React UI framework for faster and easier web development.
-- [React-Query](https://react-query.tanstack.com/): A data fetching library for React, used to fetch, cache and update data in your React and React Native applications.
+- [Emotion](https://emotion.sh/docs/introduction): A library designed for writing CSS styles with JavaScript.
+- [Websocket](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API): Websocket makes it possible to open a two-way interactive communication session between the user's browser and a server.
 
 # Prerequisites
 
 For this add-on to function properly, it is necessary to have rooms configured in your CCU3. Rooms should have channels assigned with appropriate names. This is because the add-on queries the rooms, their channels, and in turn, the datapoints of those channels. Without this setup, the add-on will not work.
 
-# Efficiency
-
-The App uses the same JSON-RPC interface as the CCU3.
-
-To optimize performance we've tailored [RegaScripts](/src/rega) to fetch data in the exact structure required by our App.
-
-In addition, we are utilizing [React-Query](https://react-query.tanstack.com/), adhering to their best practices to ensure our data requests are as efficient as possible.
-
-# Authentication
+For Communication with the ccu3 over Websocket this Addon requires [RedMatic](https://github.com/rdmtc/RedMatic)
 
-The App provides the same authentication mechanism as the CCU3. 
-After logging in, the App obtains a random session id from the CCU3, it will be saved to localStorage and used for subsequent requests. 
-To prevent users from inadvertently logging each other out, it is necessary to use distinct user accounts.
+# Installation
 
-# Install
-
-To install this add-on: 
-- download the latest tar.gz file from the releases page. 
-- Install it as a plugin on your CCU3 on the settings page under additional software.
-- After reboot, the Add-on will be available at `http://ccu3ip/addons/mui`.
+To install this add-on:
+1. Install [RedMatic Node-Red](https://github.com/rdmtc/RedMatic/releases/latest).
+2. Import the [node-red-flow.json](node-red-flow.json) file into Node-Red.
+3. Download the latest `tar.gz` file from the [releases page](https://github.com/rdmtc/RedMatic/releases).
+4. Install it as a plugin on your CCU3 via the settings page under "Additional Software".
+5. After a reboot, the add-on will be available at `http://ccu3ip/addons/mui`.
 
 # Adding the PWA to Your Home Screen
 
-Progressive Web Apps can be installed on your device like native apps. Here's how you can add our PWA to your home screen:
+Progressive Web Apps (PWAs) can be installed on your device like native apps. Follow these steps to add our PWA to your home screen:
 
 ### On Android:
-1. Open the PWA in your browser (Chrome, Firefox, etc.).
-2. Tap on the browser's menu (usually three dots in the top right corner).
-3. Tap on "Add to Home screen".
+1. Open the PWA in your browser (e.g., Chrome, Firefox).
+2. Tap the browser's menu (usually three dots in the top right corner).
+3. Select "Add to Home screen".
 
 ### On iOS:
 1. Open the PWA in Safari.
-2. Tap the Share button (the box with an arrow pointing upwards).
-3. Scroll down and tap "Add to Home Screen".
+2. Tap the Share button (the box with an upward arrow).
+3. Scroll down and select "Add to Home Screen".
 
 After these steps, the PWA will appear as an icon on your home screen, and you can use it just like a native app.
 
-### Use WakeLock to pervent Screen from Standby
+### Use WakeLock to Prevent Screen from Standby
 
-I want to display this App on Tablet in our Kitchen, to pervent Standby from the PWA, i use WakeLock API.
+To display this app on a tablet in our kitchen and prevent it from going into standby, we use the WakeLock API.
 
-WakeLock API is still experimental on Chrome.
+The WakeLock API is still experimental in Chrome. To use it, you need to configure the following settings on your mobile device (tablet):
 
-To use WakeLock API in Chrome two things need to be configured on your mobile device (tablet):
+1. Open Chrome and go to `chrome://flags`.
+2. Search for and enable `Experimental Web Platform features`.
+3. Set your CCU3 IP as a secure origin:
+   - Search for and enable `#unsafely-treat-insecure-origin-as-secure`.
+   - Add the origin of your CCU3, e.g., `http://192.168.178.26` (replace with your IP).
+4. Save and relaunch Chrome.
 
-1. go to `chrome://flags`
-2. Search & Enable `Experimal Web Platform features`.
-3. Set your CCU3 IP as Secure origin:
-4. Search & Enable `#unsafely-treat-insecure-origin-as-secure`
-5. Add origin of your ccu3 .e.g. http://192.168.178.26 (thats mine)
-6. Save and Relaunch Chrome.
+After these steps, the WakeLock API should be enabled, preventing your screen from going into standby while using the PWA.
 
 # Development and Build
 
@@ -95,31 +81,28 @@ Please visit our [issues page](https://github.com/firsttris/ccu-addon-mui/issues
 
 # Homematic API Summary
 
-I have collected an API Summary, where you have an quick overview of all methods for the homematic API
+I have collected an API Summary, where you have an quick overview of all methods for the different homematic API's
 
 [API Summary](/docs/api/README.md)
 
 # Device Support
 
 This project currently supports the following devices:
 
-[Switch](src/app/controls/SwitchControl.tsx)   
-![Screenshot](docs/controls/switch.png)
-
-[Thermostat](src/app/controls/ThermostatControl.tsx)   
-![Screenshot](docs/controls/thermostat.png)
+- [Switch](src/controls/SwitchControl.tsx)  
+  ![Screenshot](docs/controls/switch.png)
 
-[Blinds](/src/app/BlindsControl.tsx)   
-![Screenshot](docs/controls/blinds.png)
+- [Thermostat](src/controls/ThermostatControl.tsx)  
+  ![Screenshot](docs/controls/thermostat.png)
 
-[Door Operator](src/app/controls/DoorControl.tsx)    
-![Screenshot](docs/controls/door-operator.png)
+- [Blinds](src/controls/BlindsControl.tsx)  
+  ![Screenshot](docs/controls/blinds.png)
 
-[Floor Heating](src/app/controls/FloorControl.tsx)    
-![Screenshot](docs/controls/floor-heating.png)
+- [Door Operator](src/controls/DoorControl.tsx)  
+  ![Screenshot](docs/controls/door-operator.png)
 
-[Rain Detection Control](src/app/controls/RainDetectionControl.tsx)    
-![Screenshot](docs/controls/rain.png)
+- [Floor Heating](src/controls/FloorControl.tsx)  
+  ![Screenshot](docs/controls/floor-heating.png)
 
 
 We welcome pull requests to add support for new devices. Your contributions are appreciated!
@@ -128,12 +111,6 @@ We welcome pull requests to add support for new devices. Your contributions are
 
 The current user interface represents a responsive version of the rooms view of the CCU3.
 
-## Login View
-
-This is the root view. If you don't have a session ID, you'll always be redirected to this view.
-
-![Screenshot](/docs/Login.png)
-
 ## Rooms View
 
 Once you obtain a session ID, you'll be automatically redirected to the rooms view. Here you see all rooms configured in the ccu3, and you can select the room in which you want to see or modify channels.
@@ -145,5 +122,4 @@ Once you obtain a session ID, you'll be automatically redirected to the rooms vi
 This is the channels view.    
 Here you can see and change the state of the channels associated with the selected room.
 
-![Screenshot](/docs/ListOfDevices1.png)    
-![Screenshot](/docs/ListOfDevices2.png)
+!todo screens from tablet