Colors Theme: Add limit data and priority flag to compact cp list

packages/modules/web_themes/colors/source/src/components/chargePointList/ChargePointList.vue

@@ -19,7 +19,7 @@
 			</div>
 		</swiper-slide>
 	</swiper-container>
-	<CpSimpleList2 v-if="props.compact" />
+	<CompactList v-if="props.compact" />
 </template>
 
 <script setup lang="ts">
@@ -31,7 +31,7 @@ import Swiper from 'swiper'
 import 'swiper/css'
 import 'swiper/css/pagination'
 import type { SwiperContainer } from 'swiper/element'
-import CpSimpleList2 from './cpSimpleList/CpSimpleList2.vue'
+import CompactList from './compactList/CompactList.vue'
 
 let swiper: Swiper
 let swiperEl: SwiperContainer

packages/modules/web_themes/colors/source/src/components/chargePointList/cpSimpleList/CpSimpleList2.vue → packages/modules/web_themes/colors/source/src/components/chargePointList/compactList/CompactList.vue

@@ -14,7 +14,7 @@
 			:key="index"
 			class="subgrid pb-2"
 		>
-			<CpsListItem2 :chargepoint="cp" />
+			<CompactListItem :chargepoint="cp" />
 		</div>
 	</WbWidgetFlex>
 </template>
@@ -23,7 +23,7 @@
 import { computed } from 'vue'
 import { chargePoints } from '../model'
 import WbWidgetFlex from '@/components/shared/WbWidgetFlex.vue'
-import CpsListItem2 from './CpsListItem2.vue'
+import CompactListItem from './CompactListItem.vue'
 import WbBadge from '@/components/shared/WbBadge.vue'
 import { etData } from '@/components/priceChart/model'
 const chargepointsToDisplay = computed(() => {

packages/modules/web_themes/colors/source/src/components/chargePointList/cpSimpleList/CpsListItem2.vue → packages/modules/web_themes/colors/source/src/components/chargePointList/compactList/CompactListItem.vue

@@ -2,6 +2,10 @@
 	<WbSubwidget :titlecolor="chargepoint.color" :fullwidth="true" :small="true">
 		<template #title>
 			<div class="d-flex align-items-center">
+				<span
+					v-if="chargepoint.hasPriority"
+					class="me-2 fa-solid fa-xs fa-star"
+				/>
 				<span class="cpname">{{ chargepoint.name }} </span>
 				<span class="badge rounded-pill statusbadge mx-2" :style="statusColor">
 					<i :class="statusIcon" class="me-1" />
@@ -77,6 +81,7 @@
 							</span>
 						</span>
 					</span>
+					<span>{{ chargeLimitsString }}</span>
 				</div>
 			</InfoItem>
 			<InfoItem heading="Geladen:" :small="true" class="grid-right grid-col-4">
@@ -128,7 +133,7 @@
 
 <script setup lang="ts">
 import { ref, computed } from 'vue'
-import { chargePoints, type ChargePoint } from '../model'
+import { chargePoints, type ChargeLimit, type ChargePoint } from '../model'
 import { chargemodes, globalConfig } from '@/assets/js/themeConfig'
 import { formatWatt, formatWattH } from '@/assets/js/helpers'
 import ChargeConfigPanel from '../cpConfig/ChargeConfigPanel.vue'
@@ -235,6 +240,36 @@ const statusString = computed(() => {
 		return 'Frei'
 	}
 })
+
+function limitString(limit: ChargeLimit) {
+	switch (limit.selected) {
+		case 'none':
+			return ''
+		case 'soc':
+			return `Limit: ${limit.soc} %`
+		case 'amount':
+			return 'Limit: ' + formatWattH(limit.amount)
+	}
+}
+
+const chargeLimitsString = computed(() => {
+	let chargeTemplate = props.chargepoint.chargeTemplate
+	if (chargeTemplate != undefined) {
+		const chargeMode = chargeTemplate.chargemode.selected
+		switch (chargeMode) {
+			case 'pv_charging':
+				return limitString(chargeTemplate.chargemode.pv_charging.limit)
+			case 'eco_charging':
+				return limitString(chargeTemplate.chargemode.eco_charging.limit)
+			case 'instant_charging':
+				return limitString(chargeTemplate.chargemode.instant_charging.limit)
+			default:
+				return ''
+		}
+	} else {
+		return ''
+	}
+})
 </script>
 
 <style scoped>

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

@@ -1,7 +1,10 @@
 <template>
 	<div class="pt-2 d-flex flex-column">
 		<div class="heading ms-1">Eco-Laden:</div>
-		<PriceSelector v-if="etData.active" :chargepoint="cp as ChargePoint" />
+		<PriceSelector
+			v-if="etData.active && etData.etPriceList.size > 0"
+			:chargepoint="cp as ChargePoint"
+		/>
 		<!-- Minimal current -->
 		<ConfigItem
 			v-if="etData.active"

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

@@ -133,13 +133,19 @@ const props = defineProps<{
 defineEmits(['closeConfig'])
 //state
 const cp = props.chargepoint
-const vehicle = vehicles[cp.connectedVehicle]
+
 const templateId = computed({
 	get() {
-		return vehicle.chargeTemplateId
+		if (vehicles[cp.connectedVehicle]) {
+			return vehicles[cp.connectedVehicle].chargeTemplateId
+		} else {
+			return 0
+		}
 	},
 	set(value: number) {
-		vehicle.chargeTemplateId = value
+		if (vehicles[cp.connectedVehicle]) {
+			vehicles[cp.connectedVehicle].chargeTemplateId = value
+		}
 		cp.chargeTemplate = chargeTemplates[value]
 	},
 })

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

@@ -14,10 +14,10 @@
 				>{{ currentSoc }}%
 			</InfoItem>
 			<InfoItem class="infoitem" heading="Batterie-Kapazität"
-				>{{ (evTemplate.battery_capacity ?? 0) / 1000 }} kWh
+				>{{ (evTemplate?.battery_capacity ?? 0) / 1000 }} kWh
 			</InfoItem>
 			<InfoItem class="infoitem" heading="Ladestrom">
-				{{ evTemplate.max_current_multi_phases ?? 0 }} A
+				{{ evTemplate?.max_current_multi_phases ?? 0 }} A
 			</InfoItem>
 			<ConfigItem2
 				title="Ziel-SoC"
@@ -94,11 +94,11 @@ const props = defineProps<{
 }>()
 const emit = defineEmits(['update:modelValue', 'deletePlan'])
 const cp = computed(() => chargePoints[props.cpId])
-const currentSoc = ref(cp.value.soc)
+const currentSoc = ref(cp.value?.soc ?? 0)
 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 evTemplate = computed(() => evTemplates[cp.value?.evTemplate])
+//const chargeTemplate = computed(() => chargeTemplates[cp.value?.evTemplate])
 
 const price = computed({
 	get() {

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

@@ -173,7 +173,7 @@ export class ChargePoint implements PowerItem {
 			this.chargeTemplate?.chargemode.instant_charging.limit.selected ?? 'none'
 		)
 	}
-	set instantChargeLimitMode(mode: string) {
+	set instantChargeLimitMode(mode: 'none' | 'soc' | 'amount') {
 		if (this.chargeTemplate) {
 			this.chargeTemplate.chargemode.instant_charging.limit.selected = mode
 			updateChargeTemplate(this.id)
@@ -266,7 +266,7 @@ export class ChargePoint implements PowerItem {
 	get pvChargeLimitMode() {
 		return this.chargeTemplate?.chargemode.pv_charging.limit.selected ?? 'none'
 	}
-	set pvChargeLimitMode(mode: string) {
+	set pvChargeLimitMode(mode: 'none' | 'soc' | 'amount') {
 		if (this.chargeTemplate) {
 			this.chargeTemplate.chargemode.pv_charging.limit.selected = mode
 			updateChargeTemplate(this.id)
@@ -320,7 +320,7 @@ export class ChargePoint implements PowerItem {
 	get ecoChargeLimitMode() {
 		return this.chargeTemplate?.chargemode.eco_charging.limit.selected ?? 'none'
 	}
-	set ecoChargeLimitMode(mode: string) {
+	set ecoChargeLimitMode(mode: 'none' | 'soc' | 'amount') {
 		if (this.chargeTemplate) {
 			this.chargeTemplate.chargemode.eco_charging.limit.selected = mode
 			updateChargeTemplate(this.id)
@@ -477,6 +477,12 @@ export interface ChargeSchedule {
 		weekly: [boolean, boolean, boolean, boolean, boolean, boolean, boolean]
 	}
 }
+export interface ChargeLimit {
+	selected: 'none' | 'soc' | 'amount'
+	amount: number
+	soc: number
+}
+
 export interface ChargeTemplate {
 	id: number
 	name: string
@@ -491,23 +497,15 @@ export interface ChargeTemplate {
 		eco_charging: {
 			current: number
 			dc_current: number
-			limit: {
-				selected: string
-				soc: number
-				amount: number
-			}
+			limit: ChargeLimit
 			max_price: number
 			phases_to_use: number
 		}
 		pv_charging: {
 			dc_min_current: number
 			dc_min_soc_current: number
 			feed_in_limit: boolean
-			limit: {
-				selected: string
-				amount: number
-				soc: number
-			}
+			limit: ChargeLimit
 			min_current: number
 			min_soc_current: number
 			min_soc: number
@@ -520,11 +518,7 @@ export interface ChargeTemplate {
 		instant_charging: {
 			current: number
 			dc_current: number
-			limit: {
-				selected: string
-				soc: number
-				amount: number
-			}
+			limit: ChargeLimit
 			phases_to_use: number
 		}
 	}
@@ -584,15 +578,18 @@ export function resetChargePoints() {
 export const topVehicles = computed(() => {
 	let result: number[] = []
 	const connectedVehicles = Object.values(chargePoints)
-		.filter((cp) => vehicles[cp.connectedVehicle] && vehicles[cp.connectedVehicle].isSocConfigured)
+		.filter(
+			(cp) =>
+				vehicles[cp.connectedVehicle] &&
+				vehicles[cp.connectedVehicle].isSocConfigured,
+		)
 		.map((cp) => cp.connectedVehicle)
-	console.log('connected vehicles', connectedVehicles)
-	const otherVehicles = Object.values(vehicles)
-		.filter((v) => v.visible && v.isSocConfigured && !connectedVehicles.includes(v.id)) // only show vehicles with configured soc and that are visible
-	console.log('other vehicles', otherVehicles)
+	const otherVehicles = Object.values(vehicles).filter(
+		(v) => v.visible && v.isSocConfigured && !connectedVehicles.includes(v.id),
+	) // only show vehicles with configured soc and that are visible
 	result = connectedVehicles.concat(otherVehicles.map((v) => v.id)).slice(0, 2)
 	if (result.length == 0) {
-		result = [-1,-1]
+		result = [-1, -1]
 	} else if (result.length == 1) {
 		result.push(-1)
 	}

packages/modules/web_themes/colors/source/src/components/powerGraph/PgToolTipItem.vue

@@ -136,7 +136,9 @@ function height() {
 		Object.entries(props.entry).filter(
 			([k, v]) =>
 				k != 'selfUsage' && !k.startsWith('soc') && v != null && v > 0,
-		).length * 20 + 2
+		).length *
+			20 +
+		2
 	)
 }
 function pvs() {

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

@@ -56,10 +56,13 @@ const height = 250
 const margin = { top: 0, bottom: 15, left: 20, right: 5 }
 const axisfontsize = 12
 const plotdata = computed(() => {
+	const now = new Date()
 	let valueArray: [Date, number][] = []
 	if (etData.etPriceList.size > 0) {
 		etData.etPriceList.forEach((value, date) => {
-			valueArray.push([date, value])
+			if (date >= now) {
+				valueArray.push([date, value])
+			}
 		})
 	}
 	return valueArray
@@ -164,6 +167,10 @@ const draw = computed(() => {
 	if (needsUpdate.value == true) {
 		dummy = !dummy
 	}
+	if (plotdata.value.length == 0) {
+		// console.error('No data for price chart')
+		return 'PriceChart.vue'
+	}
 	const svg = select('g#' + 'pricechart-' + props.id)
 	svg.selectAll('*').remove()
 	const bargroups = svg
@@ -252,8 +259,8 @@ const draw = computed(() => {
 		)
 	tt.append('rect')
 		.attr('rx', 5)
-		.attr('width', '60')
-		.attr('height', '30')
+		.attr('width', 60)
+		.attr('height', 30)
 		.attr('fill', 'var(--color-menu)')
 	const texts = tt
 		.append('text')

packages/modules/web_themes/colors/source/src/components/priceChart/processMessages.ts

@@ -18,13 +18,13 @@ export function processEtProviderMessages(topic: string, message: string) {
 		}
 	} else if (topic == 'openWB/optional/ep/get/prices') {
 		const plist = JSON.parse(message)
-		etData.etPriceList = new Map<Date, number>()
+		const newlist = new Map<Date, number>()
 		Object.keys(plist).forEach((datestring) => {
-			etData.etPriceList.set(
-				new Date(+datestring * 1000),
-				plist[datestring] * 100000,
-			)
+			newlist.set(new Date(+datestring * 1000), plist[datestring] * 100000)
 		})
+		if (newlist.size > 0) {
+			etData.etPriceList = newlist
+		}
 	} else {
 		// console.warn('Ignored ET Provider message: ' + topic)
 	}