diff --git a/packages/modules/web_themes/colors/source/src/assets/css/style.css b/packages/modules/web_themes/colors/source/src/assets/css/style.css index 832aaaa97c..7a3041d3f4 100644 --- a/packages/modules/web_themes/colors/source/src/assets/css/style.css +++ b/packages/modules/web_themes/colors/source/src/assets/css/style.css @@ -201,18 +201,12 @@ body>.container-fluid { --color-ctr7: #c19a6b; --color-ctr8: #987654; --color-ctr9: #f4a460; - /* consumers use a petrol color scheme */ - --color-consumers: #009696; - --color-consumer1: #009696; - --color-consumer2: #00b4cc; - --color-consumer3: #008c9e; - --color-consumer4: #00dffc; - --color-consumer5: #00ffff; - + --color-consumers: #f16913; --font-normal: 1.4rem; --font-large: 1.6rem; --font-medium: 1.2rem; --font-small: 1rem; + --font-smallbadge: 0.8rem; --font-verysmall: 0.7rem; --font-extralarge: 1.7rem; --font-settings: 16px; @@ -257,7 +251,7 @@ body>.container-fluid { .theme-dark { --color-bg: #333333; --color-export: #b2df8a; - --color-axis: #666666; + --color-axis: #999999; --color-grid: black; --color-menu: #999999; --color-frame: #666666; diff --git a/packages/modules/web_themes/colors/source/src/assets/js/model.ts b/packages/modules/web_themes/colors/source/src/assets/js/model.ts index dd46f2a388..341658e67b 100644 --- a/packages/modules/web_themes/colors/source/src/assets/js/model.ts +++ b/packages/modules/web_themes/colors/source/src/assets/js/model.ts @@ -344,14 +344,6 @@ export const sourceSummary: { [key: string]: PowerItem } = reactive({ pv: createPowerItem('pv', PowerItemType.pvSummary), batOut: createPowerItem('batOut', PowerItemType.batterySummary), }) -/* export const usageSummary: { [key: string]: PowerItem } = reactive({ - evuOut: createPowerItem('evuOut', PowerItemType.counter), - charging: createPowerItem('charging', PowerItemType.chargeSummary), - devices: createPowerItem('devices', PowerItemType.deviceSummary), - counters: createPowerItem('counters', PowerItemType.counterSummary), - batIn: createPowerItem('batIn', PowerItemType.batterySummary), - house: createPowerItem('house', PowerItemType.house), -}) */ export const globalData = reactive(new GlobalData()) export const etPriceList = ref('') export const energyMeterNeedsRedraw = ref(false) diff --git a/packages/modules/web_themes/colors/source/src/components/NavigationBar.vue b/packages/modules/web_themes/colors/source/src/components/NavigationBar.vue index 3ce17540ea..39faa02fe1 100755 --- a/packages/modules/web_themes/colors/source/src/components/NavigationBar.vue +++ b/packages/modules/web_themes/colors/source/src/components/NavigationBar.vue @@ -44,36 +44,17 @@ > -
- -
- openWB - -
-
+ @@ -81,6 +62,11 @@
+ + + + + diff --git a/packages/modules/web_themes/colors/source/src/components/consumerList/ConsumerList.vue b/packages/modules/web_themes/colors/source/src/components/consumerList/ConsumerList.vue index 80280c11dd..4b00971593 100644 --- a/packages/modules/web_themes/colors/source/src/components/consumerList/ConsumerList.vue +++ b/packages/modules/web_themes/colors/source/src/components/consumerList/ConsumerList.vue @@ -5,6 +5,9 @@ Verbraucher diff --git a/packages/modules/web_themes/colors/source/src/components/powerGraph/PgXAxis.vue b/packages/modules/web_themes/colors/source/src/components/powerGraph/PgXAxis.vue index 45d020c037..ca4cf8ece7 100755 --- a/packages/modules/web_themes/colors/source/src/components/powerGraph/PgXAxis.vue +++ b/packages/modules/web_themes/colors/source/src/components/powerGraph/PgXAxis.vue @@ -109,7 +109,6 @@ const drawAxis1 = computed(() => { axis .selectAll('.tick > text') - //.attr('color', 'var(--color-axis)') .attr('fill', (d, i) => i >= 0 || graphData.graphMode == 'month' || graphData.graphMode == 'year' ? 'var(--color-axis)' diff --git a/packages/modules/web_themes/colors/source/src/components/powerGraph/PowerGraph.vue b/packages/modules/web_themes/colors/source/src/components/powerGraph/PowerGraph.vue index 2df44092d2..51ef2f8f47 100755 --- a/packages/modules/web_themes/colors/source/src/components/powerGraph/PowerGraph.vue +++ b/packages/modules/web_themes/colors/source/src/components/powerGraph/PowerGraph.vue @@ -2,6 +2,11 @@ - +
+ {{ graphData.errors[0] }} + ({{ graphData.errors.length - 1 }} weitere Fehlermeldungen) + +
diff --git a/packages/modules/web_themes/colors/source/src/components/powerGraph/model.ts b/packages/modules/web_themes/colors/source/src/components/powerGraph/model.ts index 09281bbf6a..fa6c42486a 100755 --- a/packages/modules/web_themes/colors/source/src/components/powerGraph/model.ts +++ b/packages/modules/web_themes/colors/source/src/components/powerGraph/model.ts @@ -62,6 +62,7 @@ export interface RawDayGraphDataItem { export class GraphData { data: GraphDataItem[] = [] private _graphMode = '' + errors: string[] = [] waitForData = true get graphMode() { @@ -112,7 +113,6 @@ export function setGraphData(d: GraphDataItem[]) { } else { graphData.data = d graphData.waitForData = false - console.log('graph data set') } } // LIVE GRAPH diff --git a/packages/modules/web_themes/colors/source/src/components/powerGraph/processDayGraphData.ts b/packages/modules/web_themes/colors/source/src/components/powerGraph/processDayGraphData.ts index c64e88fb4d..9fe46a10ed 100755 --- a/packages/modules/web_themes/colors/source/src/components/powerGraph/processDayGraphData.ts +++ b/packages/modules/web_themes/colors/source/src/components/powerGraph/processDayGraphData.ts @@ -15,7 +15,7 @@ import { addCounter, Counter, counters } from '../counterList/model' import { chargePoints } from '../chargePointList/model' import { addConsumer, consumers } from '../consumerList/model' import { PowerItemType, type PowerItem } from '@/assets/js/types' -import { add } from '../mqttViewer/model' + // methods: let gridCounters: string[] = [] // Process incoming day graph data @@ -24,7 +24,9 @@ export function processDayGraphMessages(topic: string, message: string) { entries: inputTable, names: itemNames2, totals: energyValues, + message: errorTextBlock, } = JSON.parse(message) + graphData.errors = errorTextBlock.split('\n') itemNames.value = new Map(Object.entries(itemNames2)) resetHistoricData() gridCounters = [] diff --git a/packages/modules/web_themes/colors/source/src/components/powerMeter/PowerMeter.vue b/packages/modules/web_themes/colors/source/src/components/powerMeter/PowerMeter.vue index 9fc48370e2..6bf2955b73 100755 --- a/packages/modules/web_themes/colors/source/src/components/powerMeter/PowerMeter.vue +++ b/packages/modules/web_themes/colors/source/src/components/powerMeter/PowerMeter.vue @@ -66,72 +66,40 @@ :config="globalConfig" /> - + - - + schemes[valuesToDisplay.value.length - 1]) function labelCoordinates(item: number) { return labelPositions[scheme.value[item]] } +// deliver the name, value and color to be used for the labels that show Soc and electricity price. This returns an array of 4 objects without labelCoordinates, which are added in the HTML part already +const cornerLabels = computed(() => { + let result = [] + // first label - Soc of topvehicles[0] if existing, otherwise empty + result.push({ + text: topVehicles.value[0] + ? ` ${trimName(vehicles[topVehicles.value[0]]?.name ?? '')}: ${Math.round(vehicles[topVehicles.value[0]]?.soc ?? 0)}%` + : '', + color: 'var(--color-charging)', + }) + + // second label - Soc of topvehicles[1] if existing, otherwise empty + result.push({ + text: topVehicles.value[1] + ? ` ${trimName(vehicles[topVehicles.value[1]]?.name ?? '')}: ${Math.round(vehicles[topVehicles.value[1]]?.soc ?? 0)}%` + : '', + color: 'var(--color-charging)', + }) + // third label - Soc of the batteries if existing, otherwise Soc of topvehicles[2] if existing, otherwise empty + result.push({ + text: + batteries.value.size > 0 + ? ` Speicher: ${globalData.batterySoc}%` + : topVehicles.value[2] + ? ` ${trimName(vehicles[topVehicles.value[2]]?.name ?? '')}: ${Math.round(vehicles[topVehicles.value[2]]?.soc ?? 0)}%` + : '', + color: + batteries.value.size > 0 + ? 'var(--color-battery)' + : 'var(--color-charging)', + }) + // fourth label - Current electricity prices if configured, otherwise Soc of topvehicles[2] if batteries are existing, topvehicles[3], if no batteries are existing, otherwise empty + result.push({ + text: etData.active + ? etData.etCurrentPriceString + : batteries.value.size > 0 + ? topVehicles.value[2] + ? ` ${trimName(vehicles[topVehicles.value[2]]?.name ?? '')}: ${Math.round(vehicles[topVehicles.value[2]]?.soc ?? 0)}%` + : '' + : topVehicles.value[3] + ? ` ${trimName(vehicles[topVehicles.value[3]]?.name ?? '')}: ${Math.round(vehicles[topVehicles.value[3]]?.soc ?? 0)}%` + : '', + color: 'var(--color-charging)', + }) + + return result +}) // methods function trimName(name: string) { diff --git a/packages/modules/web_themes/colors/source/src/components/shared/WbBadge.vue b/packages/modules/web_themes/colors/source/src/components/shared/WbBadge.vue index 190e532c93..9159abf115 100644 --- a/packages/modules/web_themes/colors/source/src/components/shared/WbBadge.vue +++ b/packages/modules/web_themes/colors/source/src/components/shared/WbBadge.vue @@ -10,12 +10,14 @@ import { computed } from 'vue' const props = defineProps<{ color?: string bgcolor?: string + small?: boolean }>() const WbBadgestyle = computed(() => { let result = { color: props.color ?? 'var(--color-bg)', 'background-color': props.bgcolor ?? 'var(--color-menu)', + 'font-size': props.small ? 'var(--font-smallbadge)' : 'var(--font-small)', } return result }) @@ -23,7 +25,6 @@ const WbBadgestyle = computed(() => {