New theming system

.prettierignore

@@ -0,0 +1 @@
+**

components/Item.vue

@@ -1,33 +1,14 @@
 <template>
-  <section
-    class="w-full h-full bg-white rounded-lg flex justify-center"
-    :style="{
-      'background-color': value === 'ON' ? activeColor : cellColor,
-      'border-color': borderColor,
-      'border-width': borderWidth,
-    }"
-  >
-    <div
-      v-hammer:tap="handleClick"
-      class="h-full w-full flex flex-col justify-center font-sans text-white text-center"
-    >
+  <section class="w-full h-full bg-white rounded-lg flex justify-center smartdashboard-box"
+    :class="{ 'smartdashboard-box-active': value === 'ON' }">
+    <div v-hammer:tap="handleClick" class="h-full w-full flex flex-col justify-center font-sans text-white text-center">
       <div class="leading-none">
         <div class="text-2xl md:text-4xl xl:text-5xl">{{ label }}</div>
         <div class="text-4xl md:text-6xl xl:text-8xl font-bold">
-          <animated-number
-            v-if="type === 'Number' || type === 'Dimmer'"
-            :value="value"
-            :duration="300"
-            :format-value="formatValue"
-          />
-          <section
-            v-else-if="type === 'Color'"
-            class="w-full flex flex-row justify-center p-4"
-          >
-            <figure
-              class="w-40 h-40 rounded-full"
-              :style="{ 'background-color': rgbColor }"
-            />
+          <animated-number v-if="type === 'Number' || type === 'Dimmer'" :value="value" :duration="300"
+            :format-value="formatValue" />
+          <section v-else-if="type === 'Color'" class="w-full flex flex-row justify-center p-4">
+            <figure class="w-40 h-40 rounded-full" :style="{ 'background-color': rgbColor }" />
           </section>
           <p v-else>{{ value.toString() + (suffix || '') }}</p>
         </div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "smartdashboard",
-  "version": "1.1.1",
+  "version": "2.0.0",
   "private": true,
   "scripts": {
     "dev": "nuxt-ts",

pages/config.vue

@@ -1,14 +1,6 @@
 <template>
   <main
-    class="
-      bg-black
-      h-screen
-      text-center
-      p-8
-      md:p-32 md:pr-64 md:pl-64
-      text-white
-      space-y-4
-    "
+    class="bg-black h-screen text-center p-8 md:p-32 md:pr-64 md:pl-64 text-white space-y-4"
   >
     <input
       v-model="baseURL"
@@ -20,7 +12,12 @@
       class="bg-gray-800 h-8 w-full rounded-md pl-2"
       placeholder="Enter path to config file. Ex. livingroom.json"
     />
-    <button @click="submitConfigPath" class="w-full bg-blue-700 rounded-md h-8">
+    <input
+      v-model="themePath"
+      class="bg-gray-800 h-8 w-full rounded-md pl-2"
+      placeholder="Enter path to stylesheeit. Ex. themes/dark.css"
+    />
+    <button class="w-full bg-blue-700 rounded-md h-8" @click="submitConfigPath">
       Save
     </button>
   </main>
@@ -34,19 +31,22 @@ export default Vue.extend({
     return {
       baseURL: '',
       configPath: '',
+      themePath: '',
     }
   },
+  mounted() {
+    this.baseURL = localStorage.getItem('baseURL') || ''
+    this.configPath = localStorage.getItem('configPath') || ''
+    this.themePath = localStorage.getItem('themePath') || ''
+  },
   methods: {
-    submitConfigPath: function () {
+    submitConfigPath() {
       localStorage.setItem('baseURL', this.baseURL)
       localStorage.setItem('configPath', this.configPath)
+      localStorage.setItem('themePath', this.themePath)
 
       this.$router.push('/')
     },
   },
-  mounted: function () {
-    this.baseURL = localStorage.getItem('baseURL') || ''
-    this.configPath = localStorage.getItem('configPath') || ''
-  },
 })
 </script>

pages/index.vue

@@ -1,15 +1,14 @@
 <template>
   <main>
+    <link rel="stylesheet" :href="stylesheetUrl" />
     <Slider v-if="$store.state.sliderOverlayShown" />
     <Colorpicker v-if="$store.state.colorpickerOverlayShown" />
     <div
       v-hammer:swipe.left="nextPage"
       v-hammer:pan="swipeUp"
-      class="grid auto-rows-fr gap-6 h-screen p-4 bg-cover"
+      class="grid auto-rows-fr gap-6 h-screen p-4 bg-cover smartdashboard-bg"
       :style="{
         'grid-template-columns': `repeat(${pageConfig.columns}, minmax(0, 1fr))`,
-        'background-color': pageConfig.background_color,
-        'background-image': `url(${pageConfig.background_image})`,
       }"
     >
       <Item
@@ -38,12 +37,6 @@ const emptyConfig: DashboardConfig = {
       name: 'test',
       refresh: 2,
       columns: 3,
-      background_color: '#000',
-      background_image: '',
-      box_color: '#fff',
-      active_color: '#fff',
-      border_color: '#fff',
-      border_width: '0.1rem',
       items: [],
     },
   ],
@@ -64,6 +57,7 @@ export default Vue.extend({
       dashboardConfig: emptyConfig,
       page: 0,
       tempColor: [100, 100, 6],
+      stylesheetUrl: ''
     }
   },
   computed: {
@@ -73,6 +67,7 @@ export default Vue.extend({
   },
   mounted() {
     this.loadDashboardConfig()
+    this.stylesheetUrl = localStorage.getItem('themePath')
   },
   methods: {
     async loadDashboardConfig() {
@@ -99,6 +94,9 @@ export default Vue.extend({
         this.page += 1
       }
     },
+    // getStylesheetUrl() {
+    //   return ""
+    // }
   },
 })
 </script>

static/configs/livingroom.json

@@ -5,12 +5,6 @@
             "refresh": 5,
             "rows": 3,
             "columns": 3,
-            "background_color": "#000",
-            "background_image": "",
-            "box_color": "rgba(25,25,25,1)",
-            "border_color": "rgba(255,150,25,0.9)",
-            "active_color": "rgba(255,150,25,0.9)",
-            "border_width": "0.1rem",
             "items": [
                 {
                     "label": "Produktion",

static/configs/theme2.json

@@ -0,0 +1,80 @@
+{
+    "pages": [
+        {
+            "name": "energy",
+            "refresh": 5,
+            "rows": 3,
+            "columns": 3,
+            "background_color": "#fff",
+            "background_image": "",
+            "box_color": "#007bff",
+            "border_color": "",
+            "active_color": "rgba(255,150,25,0.9)",
+            "border_width": "0.1rem",
+            "items": [
+                {
+                    "label": "Produktion",
+                    "item_name": "E3DC_PV",
+                    "suffix": "W"
+                },
+                {
+                    "label": "Verbrauch",
+                    "item_name": "E3DC_Haus",
+                    "suffix": "W"
+                },
+                {
+                    "label": "Akkuladeleistung",
+                    "item_name": "E3DC_Battery",
+                    "suffix": "W"
+                },
+                {
+                    "label": "Netz",
+                    "item_name": "E3DC_Netz",
+                    "suffix": "W"
+                },
+                {
+                    "label": "Akkustand",
+                    "item_name": "E3DC_SOC",
+                    "suffix": "%"
+                },
+                {
+                    "label": "Autarkie",
+                    "item_name": "E3DC_Autarkie",
+                    "suffix": "%"
+                },
+                {
+                    "label": "Eigenstrom",
+                    "item_name": "E3DC_Eigen",
+                    "suffix": "%"
+                },
+                {
+                    "label": "Tor Zeitsteuerung",
+                    "item_name": "gate_schedule_active",
+                    "suffix": null
+                },
+                {
+                    "label": "Tor",
+                    "item_name": "gate",
+                    "suffix": "%"
+                }
+            ]
+        },
+        {
+            "name": "sirens",
+            "refresh": 5,
+            "columns": 2,
+            "background_color": "#000",
+            "background_image": "https://cdn.pixabay.com/photo/2016/03/23/12/53/clock-1274699_960_720.jpg",
+            "border_color": "rgba(255,150,25,0.9)",
+            "active_color": "rgba(255,150,25,0.9)",
+            "border_width": "0.1rem",
+            "box_color": "rgba(255,0,0,0.3)",
+            "items": [
+                {
+                    "label": "Olli Sirene",
+                    "item_name": "olli_siren"
+                }
+            ]
+        }
+    ]
+}

static/themes/dark.css

@@ -0,0 +1,15 @@
+.smartdashboard-bg {
+  background-color: rgb(29, 29, 29);
+  gap: 2rem;
+  padding: 2rem;
+}
+
+.smartdashboard-box {
+  background-color: rgb(44, 44, 44);
+  box-shadow: 0px 0px 26px -3px rgba(0, 0, 0, 0.5);
+  -webkit-box-shadow: 0px 0px 26px -3px rgba(0, 0, 0, 0.5);
+}
+
+.smartdashboard-box-active {
+  background-color: rgb(255, 166, 0);
+}

static/themes/material.css

@@ -0,0 +1,13 @@
+.smartdashboard-bg {
+  background-color: rgb(243, 243, 243);
+  gap: 2rem;
+  padding: 2rem;
+}
+
+.smartdashboard-box {
+  background-color: rgb(83, 64, 255);
+}
+
+.smartdashboard-box-active {
+  background-color: rgb(255, 166, 0);
+}

tsconfig.json

@@ -13,6 +13,7 @@
     "allowJs": true,
     "sourceMap": true,
     "strict": false,
+    "jsx": "preserve",
     "noEmit": true,
     "experimentalDecorators": true,
     "baseUrl": ".",

types/config.ts

@@ -9,12 +9,6 @@ export interface Page {
   name: string
   refresh: number
   columns: number
-  background_color: string
-  background_image: string
-  box_color: string
-  active_color: string
-  border_color: string
-  border_width: string
   items: Item[]
 }