github.com/UtilitechAS.amsreader-firmware
1
0
Fork 0
mirror of https://github.com/UtilitechAS/amsreader-firmware.git synced 2026-01-13 15:37:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

Modifications to dark mode

Browse Source
This commit is contained in:
Gunnar Skjold 2023-12-25 19:25:43 +01:00
parent 9ff6cf355f
commit f68a3a321a
18 changed files with 108 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lib/SvelteUi/app/dist/index.css vendored
View File

File diff suppressed because one or more lines are too long

22
lib/SvelteUi/app/dist/index.js vendored
View File

File diff suppressed because one or more lines are too long

33
lib/SvelteUi/app/src/app.postcss
View File

@ -2,13 +2,17 @@
@tailwind components;
@tailwind utilities;
.hdr {
@apply bg-violet-600 p-1 rounded-md mx-2 dark:bg-violet-900
}
.gh-logo {
width: 2rem;
height: 2rem;
}
.cnt {
@apply m-2 p-2 rounded dark:bg-gray-800 bg-white dark:text-white shadow-lg dark:shadow-xl dark:shadow-gray-900 dark:drop-shadow-md;
@apply m-2 p-2 rounded dark:bg-gray-800 bg-white dark:text-white shadow-lg dark:shadow-gray-900 dark:drop-shadow-md;
min-height: 268px;
}
@ -45,33 +49,42 @@
}
.bd-green {
@apply my-auto bg-green-500 text-green-100 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded
@apply my-auto dark:bg-green-600 bg-green-500 text-green-100 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded
}
.bd-yellow {
@apply my-auto bg-yellow-500 text-yellow-100 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded
@apply my-auto dark:bg-yellow-600 bg-yellow-500 text-yellow-100 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded
}
.bd-red {
@apply my-auto bg-red-500 text-red-100 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded
@apply my-auto dark:bg-red-600 bg-red-500 text-red-100 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded
}
.bd-blue {
@apply my-auto bg-blue-500 text-blue-100 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded
@apply my-auto dark:bg-blue-600 bg-blue-500 text-blue-100 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded
}
.bd-gray {
@apply my-auto bg-gray-500 text-gray-100 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded
@apply my-auto dark:bg-gray-600 bg-gray-500 text-gray-100 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded
}
.bd-on {
@apply my-auto bg-green-500 text-green-100 text-xs font-semibold mr-1 px-1 py-0.5 rounded
@apply my-auto dark:bg-green-600 bg-green-500 text-green-100 text-xs font-semibold mr-1 px-1 py-0.5 rounded
}
.bd-off {
@apply my-auto bg-gray-500 text-gray-100 text-xs font-semibold mr-1 px-1 py-0.5 rounded
@apply my-auto dark:bg-gray-600 bg-gray-500 text-gray-100 text-xs font-semibold mr-1 px-1 py-0.5 rounded
}
.btn-pri {
@apply py-2 px-4 rounded bg-blue-500 text-white mr-3
@apply py-2 px-4 rounded dark:bg-blue-600 bg-blue-500 text-white mr-3
}
.btn-red {
@apply py-2 px-4 rounded dark:bg-red-600 bg-red-500 text-white ml-2
}
.btn-yellow {
@apply py-2 px-4 rounded dark:bg-yellow-600 bg-yellow-500 text-white ml-2
}
.btn-pri-sm {
@apply text-xs py-1 px-2 rounded bg-blue-500 text-white mr-3
@apply text-xs py-1 px-2 rounded dark:bg-blue-600 bg-blue-500 text-white mr-3
}
.btn-yellow-sm {
@apply text-xs py-1 px-2 rounded dark:bg-yellow-600 bg-yellow-500 text-white mr-3
}
.pl-root {

2
lib/SvelteUi/app/src/lib/AmpPlot.svelte
View File

@ -18,7 +18,7 @@
label: fmtnum(v) + 'A',
title: v.toFixed(1) + ' A',
value: isNaN(v) ? 0 : v,
color: ampcol(v ? (v)/(max)*100 : 0)
color: ampcol(v ? (v)/(max)*100 : 0, document.documentElement.classList.contains('dark'))
};
};

6
lib/SvelteUi/app/src/lib/ConfigurationPanel.svelte
View File

@ -825,12 +825,12 @@
{/if}
</div>
</div>
<div class="grid grid-cols-3">
<div class="grid grid-cols-3 mt-3">
<div>
<button type="button" on:click={factoryReset} class="py-2 px-4 rounded bg-red-500 text-white ml-2">Factory reset</button>
<button type="button" on:click={factoryReset} class="btn-red">Factory reset</button>
</div>
<div class="text-center">
<button type="button" on:click={askReboot} class="py-2 px-4 rounded bg-yellow-500 text-white">Reboot</button>
<button type="button" on:click={askReboot} class="btn-yellow">Reboot</button>
</div>
<div class="text-right">
<button type="submit" class="btn-pri">Save</button>

6
lib/SvelteUi/app/src/lib/DayPlot.svelte
View File

@ -9,6 +9,8 @@
let max;
let min;
let dark = document.documentElement.classList.contains('dark');
$: {
let i = 0;
let yTicks = [];
@ -34,7 +36,7 @@
label2: exp.toFixed(1),
title2: exp.toFixed(2) + ' kWh',
value2: exp*10,
color: '#7c3aed',
color: dark ? '#5c2da5' : '#7c3aed',
color2: '#37829E'
});
min = Math.max(min, exp*10);
@ -57,7 +59,7 @@
label2: exp.toFixed(1),
title2: exp.toFixed(2) + ' kWh',
value2: exp*10,
color: '#7c3aed',
color: dark ? '#5c2da5' : '#7c3aed',
color2: '#37829E'
});
min = Math.max(min, exp*10);

2
lib/SvelteUi/app/src/lib/Header.svelte
View File

@ -41,7 +41,7 @@
});
</script>
<nav class="bg-violet-600 p-1 rounded-md mx-2">
<nav class="hdr">
<div class="flex flex-wrap space-x-4 text-sm text-gray-300">
<div class="flex text-lg text-gray-100 p-2">
<Link to="/">AMS reader <span>{sysinfo.version}</span></Link>

37
lib/SvelteUi/app/src/lib/Helpers.js
View File

@ -4,20 +4,35 @@ export function bcol(num) {
return num === 1 ? 'green' : num === 2 ? 'yellow' : num === 3 ? 'red' : 'gray';
}
export function voltcol(volt) {
if(volt > 218 && volt < 242) return '#32d900';
if(volt > 212 && volt < 248) return '#b1d900';
if(volt > 208 && volt < 252) return '#ffb800';
return '#d90000';
export function voltcol(volt, dark) {
if(dark) {
if(volt > 218 && volt < 242) return '#32c000';
if(volt > 212 && volt < 248) return '#b1c000';
if(volt > 208 && volt < 252) return '#ffa000';
return '#d90000';
} else {
if(volt > 218 && volt < 242) return '#32d900';
if(volt > 212 && volt < 248) return '#b1d900';
if(volt > 208 && volt < 252) return '#ffb800';
return '#d90000';
}
};
export function ampcol(pct) {
export function ampcol(pct, dark) {
let col;
if(pct > 90) col = '#d90000';
else if(pct > 85) col = '#e32100';
else if(pct > 80) col = '#ffb800';
else if(pct > 75) col = '#dcd800';
else col = '#32d900';
if(dark) {
if(pct > 90) col = '#d90000';
else if(pct > 85) col = '#e31000';
else if(pct > 80) col = '#ffa900';
else if(pct > 75) col = '#dcc300';
else col = '#32c500';
} else {
if(pct > 90) col = '#d90000';
else if(pct > 85) col = '#e32100';
else if(pct > 80) col = '#ffb800';
else if(pct > 75) col = '#dcd800';
else col = '#32d900';
}
return col;
};

2
lib/SvelteUi/app/src/lib/Mask.svelte
View File

@ -5,7 +5,7 @@
{#if active}
<div class="z-50" aria-modal="true">
<div class="fixed inset-0 bg-gray-500 dark:bg-gray-900 bg-opacity-50 flex items-center justify-center">
<div class="fixed inset-0 bg-gray-500 dark:bg-gray-900 bg-opacity-50 dark:bg-opacity-80 flex items-center justify-center">
{#if message}
<div class="bg-white dark:bg-gray-600 m-2 p-3 rounded-md shadow-lg pb-4 text-gray-700 dark:text-white w-96">{message}</div>
{/if}

6
lib/SvelteUi/app/src/lib/MonthPlot.svelte
View File

@ -9,6 +9,8 @@
let max;
let min;
let dark = document.documentElement.classList.contains('dark');
$: {
let i = 0;
let yTicks = [];
@ -37,7 +39,7 @@
label2: exp.toFixed(exp < 10 ? 1 : 0),
title2: exp.toFixed(2) + ' kWh',
value2: exp,
color: '#7c3aed',
color: dark ? '#5c2da5' : '#7c3aed',
color2: '#37829E'
});
min = Math.max(min, exp);
@ -59,7 +61,7 @@
label2: exp.toFixed(exp < 10 ? 1 : 0),
title2: exp.toFixed(2) + ' kWh',
value2: exp,
color: '#7c3aed',
color: dark ? '#5c2da5' : '#7c3aed',
color2: '#37829E'
});
min = Math.max(min, exp);

2
lib/SvelteUi/app/src/lib/PowerGauge.svelte
View File

@ -16,7 +16,7 @@
</script>
<div class="pl-root">
<PowerGaugeSvg pct={pct} color={colorFn(pct)}/>
<PowerGaugeSvg pct={pct} color={colorFn(pct, document.documentElement.classList.contains('dark'))}/>
<span class="pl-ov">
<span class="pl-lab">{label}</span>
<br/>

4
lib/SvelteUi/app/src/lib/PricePlot.svelte
View File

@ -9,6 +9,8 @@
let max;
let min;
let dark = document.documentElement.classList.contains('dark');
$: {
let currency = json.currency;
let hour = new Date().getUTCHours();
@ -81,7 +83,7 @@
label2: disp < 0 ? disp.toFixed(d) : '',
title2: disp < 0 ? disp.toFixed(2) + ' ' + currency : '',
value2: val < 0 ? Math.abs(val) : 0,
color: '#7c3aed'
color: dark ? '#5c2da5' : '#7c3aed'
});
}
let range = Math.max(max, Math.abs(min));

6
lib/SvelteUi/app/src/lib/RealtimePlot.svelte
View File

@ -1,6 +1,8 @@
<script>
import { dataStore, realtimeStore } from './DataStores.js';
let dark = document.documentElement.classList.contains('dark');
let realtime;
realtimeStore.subscribe(update => {
realtime = update;
@ -136,8 +138,8 @@
<!-- Line -->
<polyline
opacity="0.9"
fill="#7c3aed"
stroke="#7c3aed"
fill={dark ? '#5c2da5' : '#7c3aed'}
stroke={dark ? '#5c2da5' : '#7c3aed'}
stroke-width="1"
points={points}/>
</svg>

2
lib/SvelteUi/app/src/lib/StatusPage.svelte
View File

@ -116,7 +116,7 @@
<Link to="/consent">
<span class="btn-pri-sm">Update consents</span>
</Link>
<button on:click={askReboot} class="text-xs py-1 px-2 rounded bg-yellow-500 text-white mr-3 float-right">Reboot</button>
<button on:click={askReboot} class="btn-yellow-sm float-right">Reboot</button>
</div>
</div>
{#if sysinfo.meter}

4
lib/SvelteUi/app/src/lib/TariffPeakChart.svelte
View File

@ -3,6 +3,8 @@
import BarChart from './BarChart.svelte';
import { tariffStore, getTariff } from './DataStores';
let dark = document.documentElement.classList.contains('dark');
let config = {};
let max = 0;
let min = 0;
@ -30,7 +32,7 @@
points.push({
label: peak.v.toFixed(2),
value: peak.v,
color: '#7c3aed'
color: dark ? '#5c2da5' : '#7c3aed'
});
xTicks.push({
label: peak.d > 0 ? zeropad(peak.d) + "." + monthnames[new Date().getMonth()] : "-"

4
lib/SvelteUi/app/src/lib/TemperaturePlot.svelte
View File

@ -3,6 +3,8 @@
export let json;
let dark = document.documentElement.classList.contains('dark');
let config = {};
let max = 0;
let min = 0;
@ -24,7 +26,7 @@
points.push({
label: val.toFixed(1),
value: val,
color: '#7c3aed'
color: dark ? '#5c2da5' : '#7c3aed'
});
min = Math.min(min, val);
max = Math.max(max, val);

2
lib/SvelteUi/app/src/lib/VoltPlot.svelte
View File

@ -14,7 +14,7 @@
label: fmtnum(v) + 'V',
title: v.toFixed(1) + ' V',
value: isNaN(v) ? 0 : v,
color: voltcol(v ? v : 0)
color: voltcol(v ? v : 0, document.documentElement.classList.contains('dark'))
};
};

33
lib/SvelteUi/app/vite.config.js
View File

@ -17,22 +17,23 @@ export default defineConfig({
plugins: [svelte()],
server: {
proxy: {
"/data.json": "http://192.168.233.172",
"/energyprice.json": "http://192.168.233.172",
"/dayplot.json": "http://192.168.233.172",
"/monthplot.json": "http://192.168.233.172",
"/temperature.json": "http://192.168.233.172",
"/sysinfo.json": "http://192.168.233.172",
"/configuration.json": "http://192.168.233.172",
"/tariff.json": "http://192.168.233.172",
"/priceconfig.json": "http://192.168.233.172",
"/save": "http://192.168.233.172",
"/reboot": "http://192.168.233.172",
"/configfile": "http://192.168.233.172",
"/upgrade": "http://192.168.233.172",
"/mqtt-ca": "http://192.168.233.172",
"/mqtt-cert": "http://192.168.233.172",
"/mqtt-key": "http://192.168.233.172",
"/data.json": "http://192.168.233.187",
"/energyprice.json": "http://192.168.233.187",
"/dayplot.json": "http://192.168.233.187",
"/monthplot.json": "http://192.168.233.187",
"/temperature.json": "http://192.168.233.187",
"/sysinfo.json": "http://192.168.233.187",
"/configuration.json": "http://192.168.233.187",
"/tariff.json": "http://192.168.233.187",
"/realtime.json": "http://192.168.233.187",
"/priceconfig.json": "http://192.168.233.187",
"/save": "http://192.168.233.187",
"/reboot": "http://192.168.233.187",
"/configfile": "http://192.168.233.187",
"/upgrade": "http://192.168.233.187",
"/mqtt-ca": "http://192.168.233.187",
"/mqtt-cert": "http://192.168.233.187",
"/mqtt-key": "http://192.168.233.187",
}
}
})