Skip to content

Commit d574b6c

Browse files
author
niwla23
committed
New theming system
1 parent 84cff29 commit d574b6c

File tree

11 files changed

+140
-63
lines changed

11 files changed

+140
-63
lines changed

‎.prettierignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
**

‎components/Item.vue

Lines changed: 7 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,14 @@
11
<template>
2-
<section
3-
class="w-full h-full bg-white rounded-lg flex justify-center"
4-
:style="{
5-
'background-color': value === 'ON' ? activeColor : cellColor,
6-
'border-color': borderColor,
7-
'border-width': borderWidth,
8-
}"
9-
>
10-
<div
11-
v-hammer:tap="handleClick"
12-
class="h-full w-full flex flex-col justify-center font-sans text-white text-center"
13-
>
2+
<section class="w-full h-full bg-white rounded-lg flex justify-center smartdashboard-box"
3+
:class="{ 'smartdashboard-box-active': value === 'ON' }">
4+
<div v-hammer:tap="handleClick" class="h-full w-full flex flex-col justify-center font-sans text-white text-center">
145
<div class="leading-none">
156
<div class="text-2xl md:text-4xl xl:text-5xl">{{ label }}</div>
167
<div class="text-4xl md:text-6xl xl:text-8xl font-bold">
17-
<animated-number
18-
v-if="type === 'Number' || type === 'Dimmer'"
19-
:value="value"
20-
:duration="300"
21-
:format-value="formatValue"
22-
/>
23-
<section
24-
v-else-if="type === 'Color'"
25-
class="w-full flex flex-row justify-center p-4"
26-
>
27-
<figure
28-
class="w-40 h-40 rounded-full"
29-
:style="{ 'background-color': rgbColor }"
30-
/>
8+
<animated-number v-if="type === 'Number' || type === 'Dimmer'" :value="value" :duration="300"
9+
:format-value="formatValue" />
10+
<section v-else-if="type === 'Color'" class="w-full flex flex-row justify-center p-4">
11+
<figure class="w-40 h-40 rounded-full" :style="{ 'background-color': rgbColor }" />
3112
</section>
3213
<p v-else>{{ value.toString() + (suffix || '') }}</p>
3314
</div>

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "smartdashboard",
3-
"version": "1.1.1",
3+
"version": "2.0.0",
44
"private": true,
55
"scripts": {
66
"dev": "nuxt-ts",

‎pages/config.vue

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,6 @@
11
<template>
22
<main
3-
class="
4-
bg-black
5-
h-screen
6-
text-center
7-
p-8
8-
md:p-32 md:pr-64 md:pl-64
9-
text-white
10-
space-y-4
11-
"
3+
class="bg-black h-screen text-center p-8 md:p-32 md:pr-64 md:pl-64 text-white space-y-4"
124
>
135
<input
146
v-model="baseURL"
@@ -20,7 +12,12 @@
2012
class="bg-gray-800 h-8 w-full rounded-md pl-2"
2113
placeholder="Enter path to config file. Ex. livingroom.json"
2214
/>
23-
<button @click="submitConfigPath" class="w-full bg-blue-700 rounded-md h-8">
15+
<input
16+
v-model="themePath"
17+
class="bg-gray-800 h-8 w-full rounded-md pl-2"
18+
placeholder="Enter path to stylesheeit. Ex. themes/dark.css"
19+
/>
20+
<button class="w-full bg-blue-700 rounded-md h-8" @click="submitConfigPath">
2421
Save
2522
</button>
2623
</main>
@@ -34,19 +31,22 @@ export default Vue.extend({
3431
return {
3532
baseURL: '',
3633
configPath: '',
34+
themePath: '',
3735
}
3836
},
37+
mounted() {
38+
this.baseURL = localStorage.getItem('baseURL') || ''
39+
this.configPath = localStorage.getItem('configPath') || ''
40+
this.themePath = localStorage.getItem('themePath') || ''
41+
},
3942
methods: {
40-
submitConfigPath: function () {
43+
submitConfigPath() {
4144
localStorage.setItem('baseURL', this.baseURL)
4245
localStorage.setItem('configPath', this.configPath)
46+
localStorage.setItem('themePath', this.themePath)
4347
4448
this.$router.push('/')
4549
},
4650
},
47-
mounted: function () {
48-
this.baseURL = localStorage.getItem('baseURL') || ''
49-
this.configPath = localStorage.getItem('configPath') || ''
50-
},
5151
})
5252
</script>

‎pages/index.vue

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
<template>
22
<main>
3+
<link rel="stylesheet" :href="stylesheetUrl" />
34
<Slider v-if="$store.state.sliderOverlayShown" />
45
<Colorpicker v-if="$store.state.colorpickerOverlayShown" />
56
<div
67
v-hammer:swipe.left="nextPage"
78
v-hammer:pan="swipeUp"
8-
class="grid auto-rows-fr gap-6 h-screen p-4 bg-cover"
9+
class="grid auto-rows-fr gap-6 h-screen p-4 bg-cover smartdashboard-bg"
910
:style="{
1011
'grid-template-columns': `repeat(${pageConfig.columns}, minmax(0, 1fr))`,
11-
'background-color': pageConfig.background_color,
12-
'background-image': `url(${pageConfig.background_image})`,
1312
}"
1413
>
1514
<Item
@@ -38,12 +37,6 @@ const emptyConfig: DashboardConfig = {
3837
name: 'test',
3938
refresh: 2,
4039
columns: 3,
41-
background_color: '#000',
42-
background_image: '',
43-
box_color: '#fff',
44-
active_color: '#fff',
45-
border_color: '#fff',
46-
border_width: '0.1rem',
4740
items: [],
4841
},
4942
],
@@ -64,6 +57,7 @@ export default Vue.extend({
6457
dashboardConfig: emptyConfig,
6558
page: 0,
6659
tempColor: [100, 100, 6],
60+
stylesheetUrl: ''
6761
}
6862
},
6963
computed: {
@@ -73,6 +67,7 @@ export default Vue.extend({
7367
},
7468
mounted() {
7569
this.loadDashboardConfig()
70+
this.stylesheetUrl = localStorage.getItem('themePath')
7671
},
7772
methods: {
7873
async loadDashboardConfig() {
@@ -99,6 +94,9 @@ export default Vue.extend({
9994
this.page += 1
10095
}
10196
},
97+
// getStylesheetUrl() {
98+
// return ""
99+
// }
102100
},
103101
})
104102
</script>

‎static/configs/livingroom.json

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,6 @@
55
"refresh": 5,
66
"rows": 3,
77
"columns": 3,
8-
"background_color": "#000",
9-
"background_image": "",
10-
"box_color": "rgba(25,25,25,1)",
11-
"border_color": "rgba(255,150,25,0.9)",
12-
"active_color": "rgba(255,150,25,0.9)",
13-
"border_width": "0.1rem",
148
"items": [
159
{
1610
"label": "Produktion",

‎static/configs/theme2.json

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
{
2+
"pages": [
3+
{
4+
"name": "energy",
5+
"refresh": 5,
6+
"rows": 3,
7+
"columns": 3,
8+
"background_color": "#fff",
9+
"background_image": "",
10+
"box_color": "#007bff",
11+
"border_color": "",
12+
"active_color": "rgba(255,150,25,0.9)",
13+
"border_width": "0.1rem",
14+
"items": [
15+
{
16+
"label": "Produktion",
17+
"item_name": "E3DC_PV",
18+
"suffix": "W"
19+
},
20+
{
21+
"label": "Verbrauch",
22+
"item_name": "E3DC_Haus",
23+
"suffix": "W"
24+
},
25+
{
26+
"label": "Akkuladeleistung",
27+
"item_name": "E3DC_Battery",
28+
"suffix": "W"
29+
},
30+
{
31+
"label": "Netz",
32+
"item_name": "E3DC_Netz",
33+
"suffix": "W"
34+
},
35+
{
36+
"label": "Akkustand",
37+
"item_name": "E3DC_SOC",
38+
"suffix": "%"
39+
},
40+
{
41+
"label": "Autarkie",
42+
"item_name": "E3DC_Autarkie",
43+
"suffix": "%"
44+
},
45+
{
46+
"label": "Eigenstrom",
47+
"item_name": "E3DC_Eigen",
48+
"suffix": "%"
49+
},
50+
{
51+
"label": "Tor Zeitsteuerung",
52+
"item_name": "gate_schedule_active",
53+
"suffix": null
54+
},
55+
{
56+
"label": "Tor",
57+
"item_name": "gate",
58+
"suffix": "%"
59+
}
60+
]
61+
},
62+
{
63+
"name": "sirens",
64+
"refresh": 5,
65+
"columns": 2,
66+
"background_color": "#000",
67+
"background_image": "https://cdn.pixabay.com/photo/2016/03/23/12/53/clock-1274699_960_720.jpg",
68+
"border_color": "rgba(255,150,25,0.9)",
69+
"active_color": "rgba(255,150,25,0.9)",
70+
"border_width": "0.1rem",
71+
"box_color": "rgba(255,0,0,0.3)",
72+
"items": [
73+
{
74+
"label": "Olli Sirene",
75+
"item_name": "olli_siren"
76+
}
77+
]
78+
}
79+
]
80+
}

‎static/themes/dark.css

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
.smartdashboard-bg {
2+
background-color: rgb(29, 29, 29);
3+
gap: 2rem;
4+
padding: 2rem;
5+
}
6+
7+
.smartdashboard-box {
8+
background-color: rgb(44, 44, 44);
9+
box-shadow: 0px 0px 26px -3px rgba(0, 0, 0, 0.5);
10+
-webkit-box-shadow: 0px 0px 26px -3px rgba(0, 0, 0, 0.5);
11+
}
12+
13+
.smartdashboard-box-active {
14+
background-color: rgb(255, 166, 0);
15+
}

‎static/themes/material.css

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.smartdashboard-bg {
2+
background-color: rgb(243, 243, 243);
3+
gap: 2rem;
4+
padding: 2rem;
5+
}
6+
7+
.smartdashboard-box {
8+
background-color: rgb(83, 64, 255);
9+
}
10+
11+
.smartdashboard-box-active {
12+
background-color: rgb(255, 166, 0);
13+
}

‎tsconfig.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"allowJs": true,
1414
"sourceMap": true,
1515
"strict": false,
16+
"jsx": "preserve",
1617
"noEmit": true,
1718
"experimentalDecorators": true,
1819
"baseUrl": ".",

0 commit comments

Comments
 (0)