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 b4c10e0b1b..3754f13c2b 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 @@ -165,14 +165,15 @@ body>.container-fluid { --color-switchRed: #d12020; --color-switchGreen: #4db662; --color-switchBlue: steelblue; - --color-cp0: #6baed6; - --color-cp1: #4292c6; - --color-cp2: #2171b5; - --color-cp3: #9ecae1; - --color-cp4: #c6dbef; - --color-cp5: #deebf7; - --color-cp6: #08519c; - --color-cp7: #6baed6; + --color-cp1: #1f78b4; + --color-cp2: #6baed6; + --color-cp3: #4292c6; + --color-cp4: #2171b5; + --color-cp5: #9ecae1; + --color-cp6: #c6dbef; + --color-cp7: #deebf7; + --color-cp8: #08519c; + --color-cp9: #6baed6; --color-evu: firebrick; --color-pv: #33a02c; --color-house: #7f7f7f; @@ -189,6 +190,20 @@ body>.container-fluid { --color-pv7: #006d2c; --color-pv8: #00441b; --color-pv9: #33a02c; + /* --color-counters: #cab2d6; */ + /* --color-counters: #a00dd8; */ + --color-counters: chocolate; + + --color-ctr1: chocolate; + --color-ctr2: peru; + --color-ctr3: sienna; + --color-ctr4: sandybrown; + --color-ctr5: #bb6528; + --color-ctr6: #b5651d; + --color-ctr7: #c19a6b; + --color-ctr8: #987654; + --color-ctr9: #f4a460; + --font-normal: 1.4rem; --font-large: 1.6rem; --font-medium: 1.2rem; 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 ad24452163..36b472d5b1 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 @@ -11,6 +11,8 @@ import { reactive, ref } from 'vue' import { GlobalData } from './themeConfig' import { type PowerItem, type ItemProps, PowerItemType } from './types' import { PvSystem } from './types' +import { graphData } from '@/components/powerGraph/model' +//import { Counter } from '@/components/counterList/model' export const masterData: { [key: string]: ItemProps } = reactive({ evuIn: { name: 'Netz', color: 'var(--color-evu)', icon: '\uf275' }, @@ -27,46 +29,92 @@ export const masterData: { [key: string]: ItemProps } = reactive({ }, charging: { name: 'Laden', color: 'var(--color-charging)', icon: '\uf5e7' }, devices: { name: 'Geräte', color: 'var(--color-devices)', icon: '\uf1e6' }, + counters: { name: 'Zähler', color: 'var(--color-counters)', icon: '\uf0eb' }, batIn: { name: '> Bat', color: 'var(--color-battery)', icon: '\uf061\uf5df' }, house: { name: 'Haus', color: 'var(--color-house)', icon: '\uf015' }, - cp1: { name: 'Ladepunkt', color: 'var(--color-cp1)', icon: 'Ladepunkt' }, - cp2: { name: 'Ladepunkt', color: 'var(--color-cp2)', icon: 'Ladepunkt' }, - cp3: { name: 'Ladepunkt', color: 'var(--color-cp3)', icon: 'Ladepunkt' }, - cp4: { name: 'Ladepunkt', color: 'var(--color-cp4)', icon: 'Ladepunkt' }, - cp5: { name: 'Ladepunkt', color: 'var(--color-cp5)', icon: 'Ladepunkt' }, - cp6: { name: 'Ladepunkt', color: 'var(--color-cp6)', icon: 'Ladepunkt' }, - cp7: { name: 'Ladepunkt', color: 'var(--color-cp7)', icon: 'Ladepunkt' }, - cp8: { name: 'Ladepunkt', color: 'var(--color-cp8)', icon: 'Ladepunkt' }, - sh1: { name: 'Gerät', color: 'var(--color-sh1)', icon: 'Gerät' }, - sh2: { name: 'Gerät', color: 'var(--color-sh2)', icon: 'Gerät' }, - sh3: { name: 'Gerät', color: 'var(--color-sh3)', icon: 'Gerät' }, - sh4: { name: 'Gerät', color: 'var(--color-sh4)', icon: 'Gerät' }, - sh5: { name: 'Gerät', color: 'var(--color-sh5)', icon: 'Gerät' }, - sh6: { name: 'Gerät', color: 'var(--color-sh6)', icon: 'Gerät' }, - sh7: { name: 'Gerät', color: 'var(--color-sh7)', icon: 'Gerät' }, - sh8: { name: 'Gerät', color: 'var(--color-sh8)', icon: 'Gerät' }, - sh9: { name: 'Gerät', color: 'var(--color-sh9)', icon: 'Gerät' }, - pv1: { name: 'PV', color: 'var(--color-pv1)', icon: 'Wechselrichter' }, - pv2: { name: 'PV', color: 'var(--color-pv2)', icon: 'Wechselrichter' }, - pv3: { name: 'PV', color: 'var(--color-pv3)', icon: 'Wechselrichter' }, - pv4: { name: 'PV', color: 'var(--color-pv4)', icon: 'Wechselrichter' }, - pv5: { name: 'PV', color: 'var(--color-pv5)', icon: 'Wechselrichter' }, - pv6: { name: 'PV', color: 'var(--color-pv6)', icon: 'Wechselrichter' }, - pv7: { name: 'PV', color: 'var(--color-pv7)', icon: 'Wechselrichter' }, - pv8: { name: 'PV', color: 'var(--color-pv8)', icon: 'Wechselrichter' }, - pv9: { name: 'PV', color: 'var(--color-pv9)', icon: 'Wechselrichter' }, - bat1: { name: 'Speicher', color: 'var(--color-battery)', icon: 'Speicher' }, - bat2: { name: 'Speicher', color: 'var(--color-battery)', icon: 'Speicher' }, - bat3: { name: 'Speicher', color: 'var(--color-battery)', icon: 'Speicher' }, - bat4: { name: 'Speicher', color: 'var(--color-battery)', icon: 'Speicher' }, - bat5: { name: 'Speicher', color: 'var(--color-battery)', icon: 'Speicher' }, - bat6: { name: 'Speicher', color: 'var(--color-battery)', icon: 'Speicher' }, - bat7: { name: 'Speicher', color: 'var(--color-battery)', icon: 'Speicher' }, - bat8: { name: 'Speicher', color: 'var(--color-battery)', icon: 'Speicher' }, - bat9: { name: 'Speicher', color: 'var(--color-battery)', icon: 'Speicher' }, }) -class HistoricSummary { - private _items: { [key: string]: PowerItem } = {} +export const colormap: Map = new Map([ + [ + 'pv', + [ + 'var(--color-pv1)', + 'var(--color-pv2)', + 'var(--color-pv3)', + 'var(--color-pv4)', + 'var(--color-pv5)', + 'var(--color-pv6)', + 'var(--color-pv7)', + 'var(--color-pv8)', + 'var(--color-pv9) ', + ], + ], + [ + 'bat', + [ + 'var(--color-bat1)', + 'var(--color-bat2)', + 'var(--color-bat3)', + 'var(--color-bat4)', + 'var(--color-bat5)', + 'var(--color-bat6)', + 'var(--color-bat7)', + 'var(--color-bat8)', + 'var(--color-bat9) ', + ], + ], + [ + 'cp', + [ + 'var(--color-cp1)', + 'var(--color-cp2)', + 'var(--color-cp3)', + 'var(--color-cp4)', + 'var(--color-cp5)', + 'var(--color-cp6)', + 'var(--color-cp7)', + 'var(--color-cp8) ', + ], + ], + [ + 'counter', + [ + 'var(--color-ctr1)', + 'var(--color-ctr2)', + 'var(--color-ctr3)', + 'var(--color-ctr4)', + 'var(--color-ctr5)', + 'var(--color-ctr6)', + 'var(--color-ctr7)', + 'var(--color-ctr8)', + 'var(--color-ctr9)', + 'var(--color-ctr10) ', + ], + ], + [ + 'sh', + [ + 'var(--color-sh1)', + 'var(--color-sh2)', + 'var(--color-sh3)', + 'var(--color-sh4)', + 'var(--color-sh5)', + 'var(--color-sh6)', + 'var(--color-sh7)', + 'var(--color-sh8)', + 'var(--color-sh9) ', + ], + ], +]) + +export function getColor(category: string, index: number): string { + if (colormap.has(category)) { + const colors = colormap.get(category)! + return colors[index % colors.length] + } + return 'var(--color-charging)' +} +class ItemList { + private _items: Map = new Map() constructor() { this.addItem('evuIn') this.addItem('pv') @@ -74,19 +122,45 @@ class HistoricSummary { this.addItem('evuOut') this.addItem('charging') this.addItem('devices') + this.addItem('counters') this.addItem('batIn') this.addItem('house') } get items() { return this._items } + get usageSummary(): PowerItem[] { + return [ + this._items.get('evuOut')!, + this._items.get('charging')!, + this._items.get('devices')!, + this._items.get('counters')!, + this._items.get('batIn')!, + this._items.get('house')!, + ] + } + get sourceSummary() { + return [ + this._items.get('evuIn')!, + this._items.get('pv')!, + this._items.get('batOut')!, + ] + } keys() { - return Object.keys(this._items) + return Array.from(this._items.keys()) } values() { - return Object.values(this._items) + return Array.from(this._items.values()) } - addItem(key: string, type?: PowerItemType, useColor?: string) { + getItem(key: string): PowerItem { + return this._items.get(key)! + } + addItem( + key: string, + type?: PowerItemType, + template?: PowerItem, + useColor?: string, + ) { let itemType: PowerItemType if (type) { itemType = type @@ -110,6 +184,9 @@ class HistoricSummary { case 'devices': itemType = PowerItemType.device break + case 'counters': + itemType = PowerItemType.counter + break case 'batIn': itemType = PowerItemType.battery break @@ -120,65 +197,145 @@ class HistoricSummary { itemType = PowerItemType.counter } } - this._items[key] = useColor - ? createPowerItem(key, itemType, useColor) - : createPowerItem(key, itemType) + this._items.set( + key, + useColor + ? createPowerItem(key, itemType, useColor) + : createPowerItem(key, itemType), + ) + if (template) { + this._items.get(key)!.name = template.name + this._items.get(key)!.icon = template.icon + this._items.get(key)!.color = template.color + } } - setEnergy(cat: string, val: number) { - if (!this.keys().includes(cat)) { + duplicateItem(key: string, source: PowerItem) { + let p: PowerItem = createPowerItem(key, source.type) + p = { ...source } + this._items.set(key, p) + } + getPower(cat: string) { + return this._items.get(cat)!.power + } + setPower(cat: string, val: number) { + if (!this.items.has(cat)) { + console.error(`item ${cat} not found in item list`) + } + this._items.get(cat)!.power = val + } + getEnergy(cat: string) { + if (!this.items.has(cat)) { this.addItem(cat) } - this._items[cat].energy = val + if (graphData.usePastData) { + return this._items.get(cat)!.past.energy + } else { + return this._items.get(cat)!.now.energy + } + } + setEnergy(cat: string, val: number) { + if (!this.items.has(cat)) { + console.error(`item ${cat} not found in item list`) + } + if (graphData.usePastData) { + this._items.get(cat)!.past.energy = val + } else { + this._items.get(cat)!.now.energy = val + } } setEnergyPv(cat: string, val: number) { - if (!this.keys().includes(cat)) { + if (!this.items.has(cat)) { this.addItem(cat) } - this._items[cat].energyPv = val + if (graphData.usePastData) { + this._items.get(cat)!.past.energyPv = val + } else { + this._items.get(cat)!.now.energyPv = val + } } setEnergyBat(cat: string, val: number) { - if (!this.keys().includes(cat)) { + if (!this.items.has(cat)) { this.addItem(cat) } - this._items[cat].energyBat = val + if (graphData.usePastData) { + this._items.get(cat)!.past.energyBat = val + } else { + this._items.get(cat)!.now.energyBat = val + } } setPvPercentage(cat: string, val: number) { - if (!this.keys().includes(cat)) { - this.addItem(cat) + if (!this.items.has(cat)) { + console.error(`item ${cat} not found in item list`) + } + if (graphData.usePastData) { + this._items.get(cat)!.past.pvPercentage = val <= 100 ? val : 100 + } else { + this._items.get(cat)!.now.pvPercentage = val <= 100 ? val : 100 + } + } + calculatePvPercentage(cat: string) { + if (!this.items.has(cat)) { + console.error(`item ${cat} not found in item list`) + } + this._items.get(cat)![graphData.graphScope].pvPercentage = Math.round( + ((this.items.get(cat)![graphData.graphScope].energyPv + + this.items.get(cat)![graphData.graphScope].energyBat) / + this.items.get(cat)![graphData.graphScope].energy) * + 100, + ) + } + + calculateHouseEnergy(past = false) { + if (past) { + this._items.get('house')!.past.energy = + this._items.get('evuIn')!.past.energy + + this._items.get('pv')!.past.energy + + this._items.get('batOut')!.past.energy - + this._items.get('evuOut')!.past.energy - + this._items.get('batIn')!.past.energy - + this._items.get('charging')!.past.energy - + this._items.get('devices')!.past.energy - + this._items.get('counters')!.past.energy + } else { + this._items.get('house')!.now.energy = + this._items.get('evuIn')!.now.energy + + this._items.get('pv')!.now.energy + + this._items.get('batOut')!.now.energy - + this._items.get('evuOut')!.now.energy - + this._items.get('batIn')!.now.energy - + this._items.get('charging')!.now.energy - + this._items.get('devices')!.now.energy - + this._items.get('counters')!.now.energy } - this._items[cat].pvPercentage = val <= 100 ? val : 100 - } - calculateHouseEnergy() { - this._items.house.energy = - this._items.evuIn.energy + - this._items.pv.energy + - this._items.batOut.energy - - this._items.evuOut.energy - - this._items.batIn.energy - - this._items.charging.energy - - this._items.devices.energy } } -export let historicSummary = reactive(new HistoricSummary()) -export function resetHistoricSummary() { - historicSummary = new HistoricSummary() +export const registry = reactive(new ItemList()) +export function resetHistoricData() { + registry.values().forEach((item) => { + item.past.energy = 0 + item.past.energyPv = 0 + item.past.energyBat = 0 + item.past.pvPercentage = 0 + }) } export const sourceSummary: { [key: string]: PowerItem } = reactive({ evuIn: createPowerItem('evuIn', PowerItemType.counter), pv: createPowerItem('pv', PowerItemType.pvSummary), batOut: createPowerItem('batOut', PowerItemType.batterySummary), }) -export const usageSummary: { [key: string]: PowerItem } = reactive({ +/* 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) -function createPowerItem( + +export function createPowerItem( key: string, type: PowerItemType, useColor?: string, @@ -187,10 +344,18 @@ function createPowerItem( name: masterData[key] ? masterData[key].name : 'item', type: type, power: 0, - energy: 0, - energyPv: 0, - energyBat: 0, - pvPercentage: 0, + now: { + energy: 0, + energyPv: 0, + energyBat: 0, + pvPercentage: 0, + }, + past: { + energy: 0, + energyPv: 0, + energyBat: 0, + pvPercentage: 0, + }, color: useColor ? useColor : masterData[key] @@ -202,8 +367,10 @@ function createPowerItem( return p } export function correctHouseConsumption() { - usageSummary.house.power = - usageSummary.house.power - usageSummary.devices.power + registry.setPower( + 'house', + registry.getItem('house')!.power - registry.getItem('devices')!.power, + ) } export const currentTime = ref(new Date()) @@ -220,6 +387,7 @@ function assignPvSystemColors() { (a, b) => a.id - b.id, ) pvSystemsSorted.forEach((system, index) => { - system.color = masterData['pv' + (index + 1)].color + //system.color = masterData['pv' + (index + 1)].color + system.color = getColor('pv', index) }) } diff --git a/packages/modules/web_themes/colors/source/src/assets/js/processMessages.ts b/packages/modules/web_themes/colors/source/src/assets/js/processMessages.ts index 8ffd67d740..464d947073 100755 --- a/packages/modules/web_themes/colors/source/src/assets/js/processMessages.ts +++ b/packages/modules/web_themes/colors/source/src/assets/js/processMessages.ts @@ -1,13 +1,6 @@ import { mqttRegister, mqttSubscribe, mqttUnsubscribe } from './mqttClient' import { PvSystem, type Hierarchy } from './types' -import { - addPvSystem, - // correctHouseConsumption, - globalData, - pvSystems, - sourceSummary, - usageSummary, -} from './model' +import { addPvSystem, registry, globalData, pvSystems } from './model' import { processLiveGraphMessages } from '../../components/powerGraph/processLiveGraphData' import { processDayGraphMessages } from '../../components/powerGraph/processDayGraphData' import { processMonthGraphMessages } from '../../components/powerGraph/processMonthYearGraphData' @@ -30,7 +23,11 @@ import { processVehicleTemplateMessages, } from '@/components/chargePointList/processMessages' import { processSmarthomeMessages } from '@/components/smartHome/processMessages' -import { addCounter, counters } from '@/components/counterList/model' +import { + addCounter, + counters, + updateCounterSummary, +} from '@/components/counterList/model' import { mqttClientId } from './mqttClient' import { add } from '@/components/mqttViewer/model' @@ -98,40 +95,22 @@ function processMqttMessage(topic: string, payload: Buffer) { } } function processCounterMessages(topic: string, message: string) { - const elements = topic.split('/') - const id = +elements[2] - if (id == globalData.evuId) { - processEvuMessages(topic, message) - } else if (elements[3] == 'config') { - // console.warn('Ignored counter config message') - } - if (elements[3] == 'get' && id in counters) { - switch (elements[4]) { - case 'power': - counters[id].power = +message - break - case 'config': - break - case 'fault_str': - break - case 'fault_state': - break - case 'power_factors': - break - case 'imported': - break - case 'exported': - break - case 'frequency': - break - case 'daily_imported': - counters[id].energy_imported = +message - break - case 'daily_exported': - counters[id].energy_exported = +message - break - default: - // console.warn('Ignored COUNTER message: ' + topic) + const id = getIndex(topic) + if (id != undefined) { + if (id == globalData.evuId) { + processEvuMessages(topic, message) + } else if (!counters.has(id)) { + console.warn('Invalid counter index: ' + id) + } else if (topic.match(/^openWB\/counter\/[0-9]+\/get\/power$/i)) { + counters.get(id)!.power = +message + updateCounterSummary('power') + } else if (topic.match(/^openWB\/counter\/[0-9]+\/get\/daily_imported$/i)) { + counters.get(id)!.energy_imported = +message + counters.get(id)!.now.energy = +message + } else if (topic.match(/^openWB\/counter\/[0-9]+\/get\/daily_exported$/i)) { + counters.get(id)!.energy_exported = +message + } else { + //console.info('Ignored COUNTER msg: [' + topic + '] ' + message) } } } @@ -143,7 +122,7 @@ function processGlobalCounterMessages(topic: string, message: string) { resetBatteries() for (const element of hierarchy) { - if (element.type == 'counter') { + if (element.id == 0) { globalData.evuId = element.id // console.info('EVU counter is ' + globalData.evuId) } @@ -151,12 +130,12 @@ function processGlobalCounterMessages(topic: string, message: string) { processHierarchy(hierarchy[0]) } } else if (topic.match(/^openwb\/counter\/set\/home_consumption$/i)) { - usageSummary.house.power = +message + registry.setPower('house', +message) // correctHouseConsumption() } else if ( topic.match(/^openwb\/counter\/set\/daily_yield_home_consumption$/i) ) { - usageSummary.house.energy = +message + registry.setEnergy('house', +message) } else { // console.warn('Ignored GLOBAL COUNTER message: ' + topic) } @@ -165,7 +144,7 @@ function processHierarchy(hierarchy: Hierarchy) { switch (hierarchy.type) { case 'counter': // console.info('counter in hierachy: ' + hierarchy.id) - addCounter(hierarchy.id, hierarchy.type) + addCounter(hierarchy.id, hierarchy.type, hierarchy.id == globalData.evuId) break case 'cp': addChargePoint(hierarchy.id) @@ -191,13 +170,13 @@ function processPvMessages(topic: string, message: string) { // addPvSystem(index) } else { if (topic == 'openWB/pv/get/power') { - sourceSummary.pv.power = -message + registry.setPower('pv', -message) } else if (topic == 'openWB/pv/get/daily_exported') { - sourceSummary.pv.energy = +message + registry.setEnergy('pv', +message) } else if (topic.match(/^openWB\/pv\/[0-9]+\/get\/power$/i)) { pvSystems.value.get(index!)!.power = +message } else if (topic.match(/^openWB\/pv\/[0-9]+\/get\/daily_exported$/i)) { - pvSystems.value.get(index!)!.energy = +message + pvSystems.value.get(index!)!.now.energy = +message } else if (topic.match(/^openWB\/pv\/[0-9]+\/get\/monthly_exported$/i)) { pvSystems.value.get(index!)!.energy_month = +message } else if (topic.match(/^openWB\/pv\/[0-9]+\/get\/yearly_exported$/i)) { @@ -228,18 +207,18 @@ function processEvuMessages(topic: string, message: string) { switch (elements[4]) { case 'power': if (+message > 0) { - sourceSummary.evuIn.power = +message - usageSummary.evuOut.power = 0 + registry.setPower('evuIn', +message) + registry.setPower('evuOut', 0) } else { - sourceSummary.evuIn.power = 0 - usageSummary.evuOut.power = -message + registry.setPower('evuIn', 0) + registry.setPower('evuOut', -message) } break case 'daily_imported': - sourceSummary.evuIn.energy = +message + registry.setEnergy('evuIn', +message) break case 'daily_exported': - usageSummary.evuOut.energy = +message + registry.setEnergy('evuOut', +message) break default: } @@ -253,8 +232,9 @@ function processSystemMessages(topic: string, message: string) { switch (config.type) { case 'counter': case 'consumption_counter': - if (counters[config.id]) { - counters[config.id].name = config.name + if (counters.get(config.id)!) { + counters.get(config.id)!.name = config.name + counters.get(config.id)!.icon = config.name } break case 'inverter': diff --git a/packages/modules/web_themes/colors/source/src/assets/js/themeConfig.ts b/packages/modules/web_themes/colors/source/src/assets/js/themeConfig.ts index 786d6ec07b..145a5a8293 100644 --- a/packages/modules/web_themes/colors/source/src/assets/js/themeConfig.ts +++ b/packages/modules/web_themes/colors/source/src/assets/js/themeConfig.ts @@ -8,7 +8,7 @@ import { computed, reactive } from 'vue' import { select } from 'd3' import { ChargeMode, type ChargeModeInfo } from './types' import { addShDevice, shDevices } from '@/components/smartHome/model' -import { sourceSummary } from './model' +import { registry } from './model' import { sourceGraphIsNotInitialized, usageGraphIsNotInitialized, @@ -211,7 +211,7 @@ export class Config { savePrefs() } setSslPrefs(on: boolean) { - this.sslPrefs = on + this._sslPrefs = on } get debug() { return this._debug @@ -441,9 +441,9 @@ export function toggleFixArcs() { } export function resetArcs() { globalConfig.maxPower = - sourceSummary.evuIn.power + - sourceSummary.pv.power + - sourceSummary.batOut.power + registry.getPower('evuIn') + + registry.getPower('pv') + + registry.getPower('batOut') savePrefs() } export function switchDecimalPlaces() { @@ -478,7 +478,7 @@ export const infotext: { [key: string]: string } = { 'Ladepriorität bei PV-Produktion. Bevorzung von Fahzeugen, Speicher, oder Fahrzeugen bis zum eingestellten Mindest-Ladestand. Die Einstellung ist für alle Ladepunkte gleich.', } interface Preferences { - hideSH?: number[] + hideSH?: string[] showLG?: boolean displayM?: string stackO?: number diff --git a/packages/modules/web_themes/colors/source/src/assets/js/types.ts b/packages/modules/web_themes/colors/source/src/assets/js/types.ts index 2aed6c380a..946d695fbb 100644 --- a/packages/modules/web_themes/colors/source/src/assets/js/types.ts +++ b/packages/modules/web_themes/colors/source/src/assets/js/types.ts @@ -11,10 +11,18 @@ export class ShDevice implements PowerItem { name = '' type = PowerItemType.device power = 0 - energy = 0 - energyPv = 0 - energyBat = 0 - pvPercentage = 0 + now: EnergyData = { + energy: 0, + energyPv: 0, + energyBat: 0, + pvPercentage: 0, + } + past: EnergyData = { + energy: 0, + energyPv: 0, + energyBat: 0, + pvPercentage: 0, + } configured = true showInGraph = true color = 'white' @@ -50,6 +58,12 @@ export interface ItemProps { color: string icon: string } +export interface EnergyData { + energy: number + energyPv: number + energyBat: number + pvPercentage: number +} export enum PowerItemType { counter = 'counter', inverter = 'inverter', @@ -60,19 +74,18 @@ export enum PowerItemType { chargeSummary = 'chargeSummary', device = 'device', deviceSummary = 'deviceSummary', + counterSummary = 'counterSummary', house = 'house', } export interface PowerItem { name: string type: PowerItemType power: number - energy: number - energyPv: number - energyBat: number - pvPercentage: number color: string icon: string showInGraph: boolean + now: EnergyData + past: EnergyData } export interface ItemList { @@ -92,15 +105,23 @@ export class PvSystem implements PowerItem { type = PowerItemType.inverter color = 'var(--color-pv)' power = 0 - energy = 0 + icon = '' + showInGraph = true + now: EnergyData = { + energy: 0, + energyPv: 0, + energyBat: 0, + pvPercentage: 0, + } + past: EnergyData = { + energy: 0, + energyPv: 0, + energyBat: 0, + pvPercentage: 0, + } energy_month = 0 energy_year = 0 energy_total = 0 - energyPv = 0 - energyBat = 0 - pvPercentage = 0 - icon = '' - showInGraph = true constructor(index: number) { this.id = index } diff --git a/packages/modules/web_themes/colors/source/src/components/batteryList/BatteryList.vue b/packages/modules/web_themes/colors/source/src/components/batteryList/BatteryList.vue index d070ae4528..e9fb3e56f5 100755 --- a/packages/modules/web_themes/colors/source/src/components/batteryList/BatteryList.vue +++ b/packages/modules/web_themes/colors/source/src/components/batteryList/BatteryList.vue @@ -32,7 +32,7 @@ Hagen */ - {{ formatWattH(sourceSummary.batOut.energy) }} + {{ formatWattH(registry.getEnergy('batOut')!) }} @@ -51,7 +51,7 @@ Hagen */ import WbWidgetFlex from '../shared/WbWidgetFlex.vue' import InfoItem from '../shared/InfoItem.vue' import BatterySymbol from '../shared/BatterySymbol.vue' -import { globalData, sourceSummary, usageSummary } from '@/assets/js/model' +import { registry, globalData } from '@/assets/js/model' import { computed } from 'vue' import { formatWatt, formatWattH } from '@/assets/js/helpers' import { batteries } from './model' @@ -59,19 +59,19 @@ import BLBattery from './BLBattery.vue' import WbBadge from '../shared/WbBadge.vue' const batteryState = computed(() => { - if (sourceSummary.batOut.power > 0) { - return `Liefert (${formatWatt(sourceSummary.batOut.power)})` - } else if (usageSummary.batIn.power > 0) { - return `Lädt (${formatWatt(usageSummary.batIn.power)})` + if (registry.getPower('batOut') > 0) { + return `Liefert (${formatWatt(registry.getPower('batOut'))})` + } else if (registry.getPower('batIn') > 0) { + return `Lädt (${formatWatt(registry.getPower('batIn'))})` } else { return `Bereit:` } }) const statusbg = computed(() => { - return sourceSummary.batOut.power > 0 + return registry.getPower('batOut') > 0 ? 'var(--color-pv)' - : usageSummary.batIn.power > 0 + : registry.getPower('batIn') > 0 ? 'var(--color-battery)' : 'var(--color-menu)' }) diff --git a/packages/modules/web_themes/colors/source/src/components/batteryList/model.ts b/packages/modules/web_themes/colors/source/src/components/batteryList/model.ts index a876c5bab0..a64081238a 100755 --- a/packages/modules/web_themes/colors/source/src/components/batteryList/model.ts +++ b/packages/modules/web_themes/colors/source/src/components/batteryList/model.ts @@ -4,8 +4,12 @@ * Copyright (c) 2022 Claus Hagen */ -import { masterData } from '@/assets/js/model' -import { PowerItemType, type PowerItem } from '@/assets/js/types' +import { getColor } from '@/assets/js/model' +import { + PowerItemType, + type EnergyData, + type PowerItem, +} from '@/assets/js/types' import { reactive, ref } from 'vue' export class Battery implements PowerItem { id: number @@ -24,10 +28,18 @@ export class Battery implements PowerItem { imported = 0 power = 0 soc = 0 - energy = 0 - energyPv = 0 - energyBat = 0 - pvPercentage = 0 + now: EnergyData = { + energy: 0, + energyPv: 0, + energyBat: 0, + pvPercentage: 0, + } + past: EnergyData = { + energy: 0, + energyPv: 0, + energyBat: 0, + pvPercentage: 0, + } showInGraph = true icon = 'Speicher' constructor(index: number) { @@ -48,8 +60,8 @@ export const batterySummary = reactive(new BatterySummary()) export const batteries = ref(new Map()) export const addBattery = (index: number) => { batteries.value.set(index, new Battery(index)) - batteries.value.get(index)!.color = - masterData['bat' + batteries.value.size].color + batteries.value.get(index)!.color = getColor('bat', batteries.value.size) + //masterData['bat' + batteries.value.size].color } export function resetBatteries() { diff --git a/packages/modules/web_themes/colors/source/src/components/batteryList/processMessages.ts b/packages/modules/web_themes/colors/source/src/components/batteryList/processMessages.ts index a43bfd83de..1484458e1d 100755 --- a/packages/modules/web_themes/colors/source/src/components/batteryList/processMessages.ts +++ b/packages/modules/web_themes/colors/source/src/components/batteryList/processMessages.ts @@ -4,7 +4,7 @@ * Copyright (c) 2022 Claus Hagen */ -import { usageSummary, sourceSummary, globalData } from '@/assets/js/model' +import { registry, globalData } from '@/assets/js/model' import { batteries } from './model' export function processBatteryMessages(topic: string, message: string) { const index = getIndex(topic) @@ -17,18 +17,18 @@ export function processBatteryMessages(topic: string, message: string) { globalData.isBatteryConfigured = message == 'true' } else if (topic == 'openWB/bat/get/power') { if (+message > 0) { - usageSummary.batIn.power = +message - sourceSummary.batOut.power = 0 + registry.setPower('batIn', +message) + registry.setPower('batOut', 0) } else { - usageSummary.batIn.power = 0 - sourceSummary.batOut.power = -message + registry.setPower('batIn', 0) + registry.setPower('batOut', -message) } } else if (topic == 'openWB/bat/get/soc') { globalData.batterySoc = +message } else if (topic == 'openWB/bat/get/daily_exported') { - sourceSummary.batOut.energy = +message + registry.setEnergy('batOut', +message) } else if (topic == 'openWB/bat/get/daily_imported') { - usageSummary.batIn.energy = +message + registry.setEnergy('batIn', +message) } else if (index && batteries.value.has(index)) { if (topic.match(/^openwb\/bat\/[0-9]+\/get\/daily_exported$/i)) { batteries.value.get(index)!.dailyYieldExport = +message diff --git a/packages/modules/web_themes/colors/source/src/components/chargePointList/CPChargePoint.vue b/packages/modules/web_themes/colors/source/src/components/chargePointList/CPChargePoint.vue index 4ae1bc2696..3c572cbd9c 100644 --- a/packages/modules/web_themes/colors/source/src/components/chargePointList/CPChargePoint.vue +++ b/packages/modules/web_themes/colors/source/src/components/chargePointList/CPChargePoint.vue @@ -54,11 +54,13 @@ diff --git a/packages/modules/web_themes/colors/source/src/components/chargePointList/VehicleData.vue b/packages/modules/web_themes/colors/source/src/components/chargePointList/VehicleData.vue index dc752f4ee7..f059e7145d 100644 --- a/packages/modules/web_themes/colors/source/src/components/chargePointList/VehicleData.vue +++ b/packages/modules/web_themes/colors/source/src/components/chargePointList/VehicleData.vue @@ -114,7 +114,8 @@ /> -
+
+ - + +
{{ etData.etProvider }}
-
- +
+ { .pricefigure { justify-self: stretch; } +.subtitle { + color: var(--color-axis); + font-size: 12px; + grid-column: span 12; + justify-self: start; +} diff --git a/packages/modules/web_themes/colors/source/src/components/priceChart/PriceChart.vue b/packages/modules/web_themes/colors/source/src/components/priceChart/PriceChart.vue index 1ecbebd3f1..b8fe8d7491 100755 --- a/packages/modules/web_themes/colors/source/src/components/priceChart/PriceChart.vue +++ b/packages/modules/web_themes/colors/source/src/components/priceChart/PriceChart.vue @@ -1,9 +1,8 @@

Anbieter: {{ etData.etProvider }}

-
- +
-
+
Ladezeit: {{ charge_duration }}
+
- +