openWB · benderl · Oct 10, 2023 · Oct 7, 2023 · Oct 7, 2023 · Oct 8, 2023
diff --git a/packages/modules/web_themes/colors/__init__.py b/packages/modules/web_themes/colors/__init__.py
diff --git a/packages/modules/web_themes/colors/config.py b/packages/modules/web_themes/colors/config.py
@@ -0,0 +1,23 @@
+from helpermodules.auto_str import auto_str
+
+from modules.common.abstract_device import DeviceDescriptor
+
+
+@auto_str
+class ColorsWebThemeConfiguration:
+    def __init__(self) -> None:
+        pass
+
+
+@auto_str
+class ColorsWebTheme:
+    def __init__(self,
+                 name: str = "Colors",
+                 type: str = "colors",
+                 configuration: ColorsWebThemeConfiguration = None) -> None:
+        self.name = name
+        self.type = type
+        self.configuration = configuration or ColorsWebThemeConfiguration()
+
+
+theme_descriptor = DeviceDescriptor(configuration_factory=ColorsWebTheme)
diff --git a/packages/modules/web_themes/colors/source/.eslintrc b/packages/modules/web_themes/colors/source/.eslintrc
@@ -0,0 +1,24 @@
+{
+  "root": true,
+	"parser": "vue-eslint-parser",
+  "parserOptions": {
+    "parser": "@typescript-eslint/parser",
+    "sourceType": "module"
+  },
+  "plugins": [
+    "@typescript-eslint"
+  ],
+	"extends": [
+		"eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:vue/vue3-recommended",
+		"prettier"
+  ],
+  "rules": {
+    // override/add rules settings here, such as:
+    // 'vue/no-unused-vars': 'error'
+		"no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": "error"
+  }
+}
diff --git a/packages/modules/web_themes/colors/source/.gitignore b/packages/modules/web_themes/colors/source/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/packages/modules/web_themes/colors/source/.prettierignore b/packages/modules/web_themes/colors/source/.prettierignore
@@ -0,0 +1,2 @@
+**/*.css
+src/assets/fonts
diff --git a/packages/modules/web_themes/colors/source/.prettierrc.json b/packages/modules/web_themes/colors/source/.prettierrc.json
@@ -0,0 +1,10 @@
+{
+  "trailingComma": "all",
+  "tabWidth": 2,
+	"useTabs": true, 
+  "semi": false,
+  "singleQuote": true,
+	"quoteProps":"as-needed",
+	"bracketSpacing": true,
+  "printWidth" : 80
+}
diff --git a/packages/modules/web_themes/colors/source/README.md b/packages/modules/web_themes/colors/source/README.md
@@ -0,0 +1,61 @@
+# wbcolortheme2
+Ein Theme für die openWB2 (http://openwb.de)
+
+Alpha version, basierend auf der Alpha der openwb2.
+
+![dark background](colors1.png)
+![white background](colors2.png)
+![responsive view](colors3.png)
+
+Das theme ist noch nicht in die openwb2 integriert. (Die openWB-Konfiguration ist aber integriert.) Es läuft standalone auf dem gleichen Rechner wie die openwb2 selbst. Entweder direkt auf dem Raspberry Pi oder in einem Docker Container:
+
+## Installation auf Raspi mit openwb2 (node.js notwendig):
+
+Code auschecken, dann ```cd wbcolortheme2```
+
+Installieren:
+```
+npm install
+```
+
+Webserver mit theme starten:
+```
+npm run dev
+```
+
+Zugriff im Browser:
+```
+http://<address of openWB>:3000
+``` 
+
+## Docker-Installation (zusammen mit openwb2)
+
+Die Dateien aus dem "docker-scripts"-Verzeichnis in einen Ordner kopieren.
+
+In diesem Ordner den Container bauen:
+``` 
+docker build -t openwb2 . 
+```
+
+In einer shell den Container starten:
+``` 
+docker run --name openwb2 -p 7080:80 -p 1883:1883 -p 9001:9001 -p 3000:3000 -p 1886:1886 -it openwb2 
+```
+
+In einer zweiten shell das colors-theme starten:
+``` 
+docker exec -ti openwb2 sh -c "cd /home/openwb/wbcolortheme2;npm run serve" 
+```
+
+Im Browser kann nun das Standard-Theme und das colors-theme zugegriffen werden:
+
+openwb2 frontend (mit standard-theme und Konfiguration):
+``` 
+http://localhost:7080 
+```
+
+colors-Theme:
+``` 
+http://localhost:3000 
+```
+
diff --git a/packages/modules/web_themes/colors/source/env.d.ts b/packages/modules/web_themes/colors/source/env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/packages/modules/web_themes/colors/source/index.html b/packages/modules/web_themes/colors/source/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en" class="theme-gray shcolors-normal">
+	<head>
+		<meta charset="UTF-8" />
+		<link rel="icon" href="/favicon.ico" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>WBColortheme 2</title>
+	</head>
+	<body>
+		<div id="app"></div>
+		<script type="module" src="/src/main.ts"></script>
+	</body>
+</html>
diff --git a/packages/modules/web_themes/colors/source/package.json b/packages/modules/web_themes/colors/source/package.json
@@ -0,0 +1,46 @@
+{
+  "name": "wbcolortheme21",
+  "version": "0.0.0",
+  "license": "MIT",
+  "scripts": {
+    "dev": "vite --host",
+    "build": "vue-tsc --noEmit && vite build --base=/openWB/web/themes/colors --outDir=../web --emptyOutDir",
+    "preview": "vite preview --port 5050 --host",
+    "typecheck": "vue-tsc --noEmit",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "prettier-format": "prettier 'src/' --write"
+  },
+  "dependencies": {
+    "@popperjs/core": "^2.11.8",
+    "bootstrap": "^5.3.0",
+    "d3": "^7.8.5",
+    "mqtt": "^5.1.0",
+    "process": "^0.11.10",
+    "swiper": "^10.1.0",
+    "vue": "^3.3.4"
+  },
+  "devDependencies": {
+    "@babel/types": "^7.22.5",
+    "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
+    "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
+    "@rushstack/eslint-patch": "^1.3.2",
+    "@types/bootstrap": "^5.2.6",
+    "@types/d3": "^7.1.0",
+    "@types/node": "^20.3.1",
+    "@typescript-eslint/eslint-plugin": "^6.7.4",
+    "@typescript-eslint/parser": "^6.7.4",
+    "@vitejs/plugin-vue": "^4.4.0",
+    "@vue/eslint-config-prettier": "^8.0.0",
+    "@vue/eslint-config-typescript": "^12.0.0",
+    "@vue/tsconfig": "^0.4.0",
+    "esbuild": "^0.19.4",
+    "eslint": "^8.43.0",
+    "eslint-plugin-vue": "^9.14.1",
+    "prettier": "^3.0.1",
+    "rollup": "3.x",
+    "rollup-plugin-polyfill-node": "^0.12.0",
+    "typescript": "^5.1.3",
+    "vite": "^4.4.11",
+    "vue-tsc": "^1.8.0"
+  }
+}
diff --git a/packages/modules/web_themes/colors/source/prettierrc.json b/packages/modules/web_themes/colors/source/prettierrc.json
@@ -0,0 +1,7 @@
+{
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true,
+  "printWidth" : 80
+}
diff --git a/packages/modules/web_themes/colors/source/public/favicon.ico b/packages/modules/web_themes/colors/source/public/favicon.ico
diff --git a/packages/modules/web_themes/colors/source/src/App.vue b/packages/modules/web_themes/colors/source/src/App.vue
@@ -0,0 +1,25 @@
+/* * App.vue * colors theme for openwb 2.0 * Copyright (c) 2022 Claus Hagen */
+
+<template>
+	<div id="app" class="m-0 p-0">
+		<NavigationBar />
+		<div class="container-lg p-0">
+			<div class="row p-0 m-0">
+				<div class="col-12 p-0 m-0">
+					<ColorsTheme />
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import ColorsTheme from './views/ColorsTheme.vue'
+import NavigationBar from './components/NavigationBar.vue'
+</script>
+
+<style>
+@import './assets/css/style.css';
+@import './assets/fonts/fontawesome-free-6.0.0-web/css/fontawesome.min.css';
+@import './assets/fonts/fontawesome-free-6.0.0-web/css/solid.min.css';
+</style>