Colors theme: bug fixes

packages/modules/web_themes/colors/source/src/assets/js/themeConfig.ts

@@ -36,7 +36,6 @@ export class Config {
 	private _showPrices = false
 	private _showInverters = false
 	private _alternativeEnergy = false
-	private _sslPrefs: boolean = false
 	private _debug: boolean = false
 	private _lowerPriceBound = 0
 	private _upperPriceBound = 0
@@ -188,16 +187,6 @@ export class Config {
 	setShowClock(mode: string) {
 		this._showClock = mode
 	}
-	get sslPrefs() {
-		return this._sslPrefs
-	}
-	set sslPrefs(on: boolean) {
-		this._sslPrefs = on
-		savePrefs()
-	}
-	setSslPrefs(on: boolean) {
-		this._sslPrefs = on
-	}
 	get debug() {
 		return this._debug
 	}
@@ -379,30 +368,13 @@ export function switchTheme(mode: string) {
 	doc.classed('theme-blue', mode == 'blue')
 	savePrefs()
 }
-/* export function toggleGrid() {
-	globalConfig.showGrid = !globalConfig.showGrid
-	savePrefs()
-} */
-/* export function toggleFixArcs() {
-	// globalConfig.etPrice = globalConfig.etPrice + 10
-	globalConfig.showRelativeArcs = !globalConfig.showRelativeArcs
-	savePrefs()
-} */
 export function resetArcs() {
 	globalConfig.maxPower =
 		registry.getPower('evuIn') +
 		registry.getPower('pv') +
 		registry.getPower('batOut')
 	savePrefs()
 }
-/* export function switchDecimalPlaces() {
-	if (globalConfig.decimalPlaces < 4) {
-		globalConfig.decimalPlaces = globalConfig.decimalPlaces + 1
-	} else {
-		globalConfig.decimalPlaces = 0
-	}
-	savePrefs()
-} */
 export function switchSmarthomeColors(setting: string) {
 	const doc = select('html')
 	doc.classed('shcolors-normal', setting == 'normal')
@@ -456,7 +428,6 @@ interface Preferences {
 	altEngy?: boolean
 	lowerP?: number
 	upperP?: number
-	sslPrefs?: boolean
 	pmLabels?: boolean
 	debug?: boolean
 }
@@ -470,12 +441,7 @@ function writeCookie() {
 		.filter((ctr) => ctr.showInGraph)
 		.map((ctr) => ctr.id.toString())
 	prefs.showLG = globalConfig.graphPreference == 'live'
-	//prefs.displayM = globalConfig.displayMode
 	prefs.stackO = globalConfig.usageStackOrder
-	//prefs.showGr = globalConfig.showGrid
-	//prefs.decimalP = globalConfig.decimalPlaces
-	//prefs.smartHomeC = globalConfig.smartHomeColors
-	//prefs.relPM = globalConfig.showRelativeArcs
 	prefs.maxPow = globalConfig.maxPower
 	prefs.showQA = globalConfig.showQuickAccess
 	prefs.simpleCP = globalConfig.simpleCpList
@@ -485,23 +451,13 @@ function writeCookie() {
 	prefs.fluidD = globalConfig.fluidDisplay
 	prefs.clock = globalConfig.showClock
 	prefs.showButtonBar = globalConfig.showButtonBar
-	//prefs.showCounters = globalConfig.showCounters
-	//prefs.showVehicles = globalConfig.showVehicles
-	//prefs.showStandardV = globalConfig.showStandardVehicle
-	//prefs.showPrices = globalConfig.showPrices
-	//prefs.showInv = globalConfig.showInverters
-	//prefs.altEngy = globalConfig.alternativeEnergy
 	prefs.lowerP = globalConfig.lowerPriceBound
 	prefs.upperP = globalConfig.upperPriceBound
-	prefs.sslPrefs = globalConfig.sslPrefs
 	prefs.pmLabels = globalConfig.showPmLabels
 	prefs.debug = globalConfig.debug
 
 	document.cookie =
-		'openWBColorTheme=' +
-		JSON.stringify(prefs) +
-		';max-age=16000000;' +
-		(globalConfig.sslPrefs ? 'SameSite=None;Secure' : 'SameSite=Strict')
+		'openWBColorTheme=' + JSON.stringify(prefs) + ';max-age=16000000;'
 }
 
 function readCookie() {
@@ -511,12 +467,6 @@ function readCookie() {
 	)
 	if (myCookie.length > 0) {
 		const prefs = JSON.parse(myCookie[0].split('=')[1]) as Preferences
-		/* if (prefs.decimalP !== undefined) {
-			globalConfig.setDecimalPlaces(+prefs.decimalP)
-		} */
-		/* if (prefs.smartHomeC !== undefined) {
-			globalConfig.setSmartHomeColors(prefs.smartHomeC)
-		} */
 		if (prefs.hideSH !== undefined) {
 			prefs.hideSH.forEach((i) => {
 				if (shDevices.get(i) == undefined) {
@@ -525,27 +475,18 @@ function readCookie() {
 				shDevices.get(i)!.setShowInGraph(false)
 			})
 		}
-		/* if (prefs.showCtr !== undefined) {
+		if (prefs.showCtr !== undefined) {
 			globalConfig.countersToShow = prefs.showCtr.map((i) => +i)
-		} */
+		}
 		if (prefs.showLG !== undefined) {
 			globalConfig.setGraphPreference(prefs.showLG ? 'live' : 'today')
 		}
 		if (prefs.maxPow !== undefined) {
 			globalConfig.setMaxPower(+prefs.maxPow)
 		}
-		/* if (prefs.relPM !== undefined) {
-			globalConfig.setShowRelativeArcs(prefs.relPM)
-		} */
-		/* if (prefs.displayM !== undefined) {
-			globalConfig.setDisplayMode(prefs.displayM)
-		} */
 		if (prefs.stackO !== undefined) {
 			globalConfig.setUsageStackOrder(prefs.stackO)
 		}
-		/* if (prefs.showGr !== undefined) {
-			globalConfig.setShowGrid(prefs.showGr)
-		} */
 		if (prefs.showQA !== undefined) {
 			globalConfig.setShowQuickAccess(prefs.showQA)
 		}
@@ -570,33 +511,12 @@ function readCookie() {
 		if (prefs.showButtonBar !== undefined) {
 			globalConfig.setShowButtonBar(prefs.showButtonBar)
 		}
-		/* if (prefs.showCounters !== undefined) {
-			globalConfig.setShowCounters(prefs.showCounters)
-		} */
-		/* if (prefs.showVehicles !== undefined) {
-			globalConfig.setShowVehicles(prefs.showVehicles)
-		} */
-		//if (prefs.showStandardV !== undefined) {
-		//	globalConfig.setShowStandardVehicle(prefs.showStandardV)
-		//}
-		/* if (prefs.showPrices !== undefined) {
-			globalConfig.setShowPrices(prefs.showPrices)
-		} */
-		/* if (prefs.showInv !== undefined) {
-			globalConfig.setShowInverters(prefs.showInv)
-		} */
-		/* if (prefs.altEngy !== undefined) {
-			globalConfig.setAlternativeEnergy(prefs.altEngy)
-		} */
 		if (prefs.lowerP !== undefined) {
 			globalConfig.setLowerPriceBound(prefs.lowerP)
 		}
 		if (prefs.upperP !== undefined) {
 			globalConfig.setUpperPriceBound(prefs.upperP)
 		}
-		if (prefs.sslPrefs !== undefined) {
-			globalConfig.setSslPrefs(prefs.sslPrefs)
-		}
 		if (prefs.pmLabels !== undefined) {
 			globalConfig.setShowPmLabels(prefs.pmLabels)
 		}

packages/modules/web_themes/colors/source/src/components/chargePointList/cpConfig/ConfigEco.vue

@@ -21,7 +21,11 @@
 		</ConfigItem>
 
 		<!-- Number of phases -->
-		<ConfigItem title="Anzahl Phasen" icon="fa-plug" :fullwidth="true">
+		<ConfigItem
+			title="Anzahl Phasen bei Überschuss"
+			icon="fa-plug"
+			:fullwidth="true"
+		>
 			<RadioInput2
 				v-model="cp.ecoTargetPhases"
 				:options="[

packages/modules/web_themes/colors/source/src/components/chargePointList/cpConfig/PriceCalculator.vue

@@ -85,7 +85,7 @@ import InfoItem from '@/components/shared/InfoItem.vue'
 import ConfigItem2 from '@/components/shared/ConfigItem2.vue'
 import RangeInput from '@/components/shared/RangeInput.vue'
 import DateRangeInput from '@/components/shared/DateRangeInput.vue'
-import { chargePoints, evTemplates, chargeTemplates } from '../model'
+import { chargePoints, evTemplates } from '../model'
 import { etData } from '@/components/priceChart/model'
 import { globalData } from '@/assets/js/model'
 const props = defineProps<{
@@ -98,7 +98,7 @@ const currentSoc = ref(cp.value.soc)
 var targetSoc = ref(currentSoc.value < 80 ? 80 : 100)
 const bufferMinutes = ref(30)
 const evTemplate = computed(() => evTemplates[cp.value.evTemplate])
-const chargeTemplate = computed(() => chargeTemplates[cp.value.evTemplate])
+//const chargeTemplate = computed(() => chargeTemplates[cp.value.evTemplate])
 
 const price = computed({
 	get() {
@@ -113,10 +113,9 @@ const chargeDuration = computed(() => {
 	if (evTemplate.value != null) {
 		const batteryCapacity = evTemplate.value.battery_capacity ?? 0 //in Wh
 		const charge_efficiency = evTemplate.value.efficiency ?? 90
-		const phases = Math.min(
-			evTemplate.value.max_phases,
-			chargeTemplate.value.chargemode.eco_charging.phases_to_use,
-		)
+		const phases = evTemplate.value.max_phases // Math.min( //,
+		//chargeTemplate.value.chargemode.eco_charging.phases_to_use,
+		//	)
 		const chargingPower =
 			((evTemplate.value.max_current_multi_phases *
 				phases *

packages/modules/web_themes/colors/source/src/components/chargePointList/model.ts

@@ -30,7 +30,7 @@ export class ChargePoint implements PowerItem {
 	private _hasPriority = false
 	currentPlan = ''
 	averageConsumption = 0
-	vehicleName = ''
+	private _vehicleName = ''
 	rangeCharged = 0
 	rangeUnit = ''
 	counter = 0
@@ -92,6 +92,12 @@ export class ChargePoint implements PowerItem {
 	constructor(index: number) {
 		this.id = index
 	}
+	get vehicleName() {
+		return vehicles[this.connectedVehicle]?.name ?? ''
+	}
+	set vehicleName(name: string) {
+		this._vehicleName = name
+	}
 	get isLocked() {
 		return this._isLocked
 	}

packages/modules/web_themes/colors/source/src/components/priceChart/PriceChart.vue

@@ -38,6 +38,8 @@ import {
 	axisLeft,
 	timeFormat,
 	line,
+	type Selection,
+	type BaseType,
 	type AxisContainerElement,
 } from 'd3'
 import { globalConfig } from '@/assets/js/themeConfig'
@@ -184,16 +186,18 @@ const draw = computed(() => {
 				: 'var(--color-charging)',
 		)
 	// X Axis
-	const xAxis = select<AxisContainerElement, number>(
-		'g#xaxis-' + props.id,
-	).call(xAxisGenerator.value)
+	const xAxis = select<AxisContainerElement, number>('g#xaxis-' + props.id)
+	xAxis.selectAll('*').remove()
+	xAxis.call(xAxisGenerator.value)
 	xAxis
 		.selectAll('.tick')
 		.attr('font-size', axisfontsize)
 		.attr('color', 'var(--color-bg)')
 	xAxis
 		.selectAll('.tick line')
 		.attr('stroke', 'var(--color-bg)')
+		//.attr('stroke', 'red')
+
 		.attr('stroke-width', (d) =>
 			(d as Date).getMinutes() == 0
 				? (d as Date).getHours() % 6 == 0
@@ -203,9 +207,9 @@ const draw = computed(() => {
 		)
 	xAxis.select('.domain').attr('stroke', 'var(--color-bg')
 	// Y Axis
-	const yAxis = select<AxisContainerElement, number>(
-		'g#yaxis-' + props.id,
-	).call(yAxisGenerator.value)
+	const yAxis = select<AxisContainerElement, number>('g#yaxis-' + props.id)
+	yAxis.selectAll('*').remove()
+	yAxis.call(yAxisGenerator.value)
 	yAxis
 		.selectAll('.tick')
 		.attr('font-size', axisfontsize)
@@ -216,13 +220,11 @@ const draw = computed(() => {
 		.attr('stroke-width', (d) => ((d as number) % 5 == 0 ? '2' : '0.5'))
 	yAxis.select('.domain').attr('stroke', 'var(--color-bg)')
 	// Tooltips
-	const ttips = select('g#tooltips')
-		.selectAll('ttip')
-		.data(plotdata.value)
-		.enter()
-		.append('g')
-		.attr('class', 'ttarea')
+	const ttips: Selection<SVGGElement, [Date, number], BaseType, unknown> =
+		select('g#tooltips').selectAll('ttip')
 
+	ttips.selectAll('*').remove()
+	ttips.data(plotdata.value).enter().append('g').attr('class', 'ttarea')
 	ttips
 		.append('rect')
 		.attr('x', (d) => xScale.value(d[0]))

packages/modules/web_themes/colors/source/src/components/shared/DateInput.vue

@@ -132,7 +132,10 @@ const days = computed(() => {
 			maxDaysPerMonth = 30
 			break
 		case 1:
-			if (year.value % 4  == 0 && year.value % 100 != 0 || year.value % 400 == 0) {
+			if (
+				(year.value % 4 == 0 && year.value % 100 != 0) ||
+				year.value % 400 == 0
+			) {
 				maxDaysPerMonth = 29
 			} else {
 				maxDaysPerMonth = 28

packages/modules/web_themes/colors/source/src/views/ColorsTheme.vue

@@ -292,23 +292,14 @@ onMounted(() => {
 	init()
 	window.addEventListener('resize', updateDimensions)
 	window.addEventListener('focus', haveFocus)
-	//window.addEventListener('blur',lostFocus)
 	msgInit()
 })
 
 function haveFocus() {
 	if (document.hasFocus()) {
-		console.log('I have focus')
 		initGraph(true) // reload only
 	}
-	//msgInit()
 }
-/* function lostFocus() {
-	if (!document.hasFocus()) {
-		console.log('I lost focus')
-	}
-//	msgStop()
-} */
 </script>
 
 <style scoped>