add more theming data attributes and support dimensions

niwla23 · Jun 25, 2022 · 3ff183b · 3ff183b
1 parent ddb345e
commit 3ff183b
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 20 deletions.
diff --git a/components/Item.vue b/components/Item.vue
@@ -1,11 +1,11 @@
 <template>
   <section class="w-full h-full bg-white rounded-lg flex justify-center smartdashboard-box"
-    :class="{ 'smartdashboard-box-active': value === 'ON' }">
+    :class="{ 'smartdashboard-box-active': value === 'ON' }" :data-item-name="itemName" :data-item-state="value">
     <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"
+          <animated-number v-if="/^Number|^Dimmer/.test(type)" :value="value.split(' ')[0].trim()" :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 }" />
@@ -27,13 +27,10 @@ export default Vue.extend({
     AnimatedNumber,
   },
   props: {
-    cellColor: { type: String, required: true },
-    activeColor: { type: String, required: true },
-    borderColor: { type: String, required: true },
-    borderWidth: { type: String, required: true },
     itemName: { type: String, required: true },
     label: { type: String, required: true },
     suffix: { type: String, required: true },
+    digits: { type: Number, default: 0 },
     refresh: { type: Number, default: 5 },
   },
 
@@ -85,7 +82,7 @@ export default Vue.extend({
     },
 
     formatValue(value: number) {
-      return `${value.toFixed(0)}${this.suffix || ''}`
+      return `${value.toFixed(this.digits)}${this.suffix || ''}`
     },
 
     async handleClick(event) {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "smartdashboard",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "private": true,
   "scripts": {
     "dev": "nuxt-ts",

diff --git a/pages/index.vue b/pages/index.vue
@@ -8,7 +8,7 @@
         'grid-template-columns': `repeat(${pageConfig.columns}, minmax(0, 1fr))`,
       }" :data-page-name="pageConfig.name">
       <Item v-for="item in pageConfig.items" :key="item.item_name" :item-name="item.item_name" :label="item.label"
-        :suffix="item.suffix" :refresh="pageConfig.refresh" />
+        :suffix="item.suffix" :refresh="pageConfig.refresh" :digits="item.digits" />
     </div>
   </main>
 </template>

diff --git a/static/configs/theme2.json b/static/configs/theme2.json
@@ -5,12 +5,6 @@
             "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",
@@ -40,12 +34,13 @@
                 {
                     "label": "Autarkie",
                     "item_name": "E3DC_Autarkie",
-                    "suffix": "%"
+                    "suffix": null
                 },
                 {
-                    "label": "Eigenstrom",
-                    "item_name": "E3DC_Eigen",
-                    "suffix": "%"
+                    "label": "Terrasse unten Temperatur",
+                    "item_name": "esp_terrasse_unten_temperature",
+                    "suffix": "° C",
+                    "digits": 1
                 },
                 {
                     "label": "Tor Zeitsteuerung",
@@ -73,8 +68,19 @@
                 {
                     "label": "Olli Sirene",
                     "item_name": "olli_siren"
+                },
+                {
+                    "label": "Papa Sirene",
+                    "item_name": "papa_siren"
+                },
+                {
+                    "label": "Alwin Sirene",
+                    "item_name": "alwin_siren"
                 }
+
+
             ]
         }
     ]
 }
+
diff --git a/static/themes/dark.css b/static/themes/dark.css
@@ -20,4 +20,9 @@
 
 .smartdashboard-box-active {
   background-color: rgb(255, 166, 0);
-}
+}
+
+
+[data-item-name="yourviloetitemhere"] {
+  background-color: blueviolet;
+}
diff --git a/types/config.ts b/types/config.ts
@@ -3,6 +3,7 @@ export interface Item {
   label: string
   item_name: string
   suffix: string | null
+  digits: number | null
 }
 
 export interface Page {