From 2320683966b02022c53a93d7bf0cb27fc5395782 Mon Sep 17 00:00:00 2001
From: Claus Hagen <cshagen@hagens.ch>
Date: Mon, 13 Jan 2025 11:56:20 +0100
Subject: [PATCH] fix layout

---
 .../components/chargePointList/CPVehicle.vue  | 25 ++++--
 .../source/src/components/shared/WBWidget.vue | 12 +--
 .../colors/source/src/views/StatusPage.vue    | 81 +++++++++++++++++++
 3 files changed, 105 insertions(+), 13 deletions(-)

diff --git a/packages/modules/display_themes/colors/source/src/components/chargePointList/CPVehicle.vue b/packages/modules/display_themes/colors/source/src/components/chargePointList/CPVehicle.vue
index bcbcfaa17e..628174b685 100644
--- a/packages/modules/display_themes/colors/source/src/components/chargePointList/CPVehicle.vue
+++ b/packages/modules/display_themes/colors/source/src/components/chargePointList/CPVehicle.vue
@@ -1,6 +1,6 @@
 <template>
-	<div class="subgrid justify-content-left">
-		<div class="titleline grid-col-12 d-flex justify-content-left mb-3">
+	<div class="vehicleinfo justify-content-left">
+		<div class="titleline  mb-3">
 			<DisplayButton @click="openSettings('#chSettings')">
 				<div
 					class="carname d-flex justify-content-left align-items-center px-2"
@@ -42,6 +42,7 @@
 			/>
 		</div>
 		<!-- Car info -->
+		 <div class="infoline">
 		<InfoItem
 			v-if="chargepoint.isSocConfigured"
 			heading="Ladestand:"
@@ -50,7 +51,7 @@
 			<BatterySymbol :soc="soc" class="me-2" />
 			<DisplayButton v-if="chargepoint.isSocManual" @click="editSoc = !editSoc">
 				<i
-					class="fa-solid fa-sm fas fa-edit py-0 px-4 mt-3"
+					class="fa-solid fa-sm fas fa-edit py-0 px-3 mt-3"
 					:style="{ color: 'var(--color-fg)' }"
 				/>
 			</DisplayButton>
@@ -74,7 +75,8 @@
 			/>
 			{{ props.chargepoint.timedCharging ? 'Ja' : 'Nein' }}
 		</InfoItem>
-
+</div>
+<div class="infoline">
 		<!-- ET Information -->
 		<InfoItem
 			v-if="etData.active"
@@ -107,7 +109,7 @@
 		>
 			<span :style="currentPriceStyle">{{ currentPrice }} ct </span>
 		</InfoItem>
-
+</div>
 		<!-- Chargemode buttons -->
 		<RadioBarInput
 			:id="'chargemode-' + chargepoint.name"
@@ -223,9 +225,14 @@ const currentPriceStyle = computed(() => {
 </script>
 <style scoped>
 .titleline {
+	display:flex;
 	justify-content: left;
 }
-
+.infoline {
+	display:flex;
+	justify-content: space-between;
+	flex-direction: row;
+}
 .chargemodes {
 	grid-column: 1 / 13;
 	justify-self: center;
@@ -248,10 +255,14 @@ const currentPriceStyle = computed(() => {
 	font-size: 20pt;
 }
 .fa-edit {
-	font-size: 10pt;
+	font-size: 8pt;
 }
 .socEditor {
 	border: 1px solid var(--color-menu);
 	justify-self: stretch;
 }
+.vehicleinfo {
+	display:flex;
+	flex-direction: column;
+}
 </style>
diff --git a/packages/modules/display_themes/colors/source/src/components/shared/WBWidget.vue b/packages/modules/display_themes/colors/source/src/components/shared/WBWidget.vue
index 30b055afde..38dab427d9 100755
--- a/packages/modules/display_themes/colors/source/src/components/shared/WBWidget.vue
+++ b/packages/modules/display_themes/colors/source/src/components/shared/WBWidget.vue
@@ -19,7 +19,7 @@
 			<div class="wb-subwidget mx-2">
 				<slot />
 			</div>
-			<div v-if="$slots.footer != undefined" class="subgrid">
+			<div v-if="$slots.footer != undefined">
 				<hr class="grid-col-12" />
 				<div class="wb-subwidget mx-2">
 					<slot name="footer" />
@@ -39,16 +39,16 @@
 	align-self: stretch;
 	width: 100%;
 	border-radius: 30px;
-	display: grid;
+	/* display: grid;
 	grid-template-columns: repeat(12, auto);
-	gap: 0.2em;
-	justify-content: stretch;
+	gap: 0.2em; */
+	
 }
 
 .wb-subwidget {
 	border: 0px solid var(--color-subframe);
 	padding: var(--padding-widget);
-	grid-column: span 12;
+	/*grid-column: span 12;*/
 }
 
 .header {
@@ -71,7 +71,7 @@
 }
 
 .cont {
-	display: grid;
+	
 	align-self: stretch;
 	height: 100%;
 }
diff --git a/packages/modules/display_themes/colors/source/src/views/StatusPage.vue b/packages/modules/display_themes/colors/source/src/views/StatusPage.vue
index 586ef062fd..6740a6d13f 100644
--- a/packages/modules/display_themes/colors/source/src/views/StatusPage.vue
+++ b/packages/modules/display_themes/colors/source/src/views/StatusPage.vue
@@ -12,10 +12,61 @@
 		<span class="header">Entwicklungszweig:</span
 		><span>{{ globalData.devBranch }}</span>
 	</div>
+
+	<!-- <div v-if="!restart && !shutdown" class="controlbuttons d-flex justify-content-between p-5">
+		<button class="btn controlbutton" :style="{'background-color': 'var(--color-battery)'}" @click="reload()">
+			<i class="fa-solid fa-rotate-left"/>
+			Display neu laden
+		</button>
+		<button class="btn controlbutton" :style="{'background-color': 'var(--color-evu)'}" @click="restart = true">
+			<i class="fa-solid fa-power-off"/>
+			openWB neu starten
+		</button>
+		<button class="btn controlbutton" :style="{'background-color': 'var(--color-evu)'}" @click="shutdown = true">
+			<i class="fa-solid fa-power-off"/>
+			openWB abschalten
+		</button>
+	</div> -->
+	<!-- <div v-if="restart"
+			class="confirmationBox rounded m-5 p-5 d-flex flex-column align-items-center "
+		>
+			<span class="confirmTitle">Neustart</span>
+			<span class="confirmQuestion">Die openWB jetzt neu starten?</span>
+			<div class="d-flex justify-content-between mt-3">
+				<button class="btn cancelButton mx-3 px-3" @click="restart=false">Abbrechen</button>
+				<button class="btn confirmButton mx-3 px-3" @click="restartWB()">Neustart</button>
+			</div>
+			
+		</div> -->
+		<!-- <div v-if="shutdown"
+			class="confirmationBox rounded m-5 p-5 d-flex flex-column align-items-center "
+		>
+			<span class="confirmTitle">Abschalten</span>
+			<span class="confirmQuestion">Die openWB jetzt abschalten?</span>
+			<div class="d-flex justify-content-between mt-3">
+				<button class="btn cancelButton mx-3 px-3" @click="shutdown=false">Abbrechen</button>
+				<button class="btn confirmButton mx-3 px-3" @click="shutdownWB()">Abschalten</button>
+			</div>
+			
+		</div> -->
 </template>
 
 <script setup lang="ts">
 import { globalData } from '@/assets/js/model'
+/* import { sendCommand } from '@/assets/js/sendMessages'
+import { ref } from 'vue'
+let restart = ref(false)
+let shutdown = ref(false)
+
+function shutdownWB() {
+	sendCommand({})
+}
+function restartWB() {
+	sendCommand({})
+}
+function reload() {
+	location.reload()
+} */
 </script>
 
 <style scoped>
@@ -29,4 +80,34 @@ import { globalData } from '@/assets/js/model'
 .header {
 	color: var(--color-fg);
 }
+.controlbuttons {
+	font-size: var(--font-settings);
+	
+}
+.controlbutton {
+	background-color: var(--color-menu);
+	color: var(--color-fg);
+	font-size: var(--font-settings);
+}
+.confirmationBox {
+	border: 3px solid var(--color-evu);
+	justify-self: stretch;
+	font-size: var(--font-settings);
+	background-color: var(--color-fg);
+	color: var(--color-evu);
+
+}
+.confirmTitle {
+	font-weight: bold;
+	}
+.cancelButton {
+	font-size: var(--font-settings);
+	background-color: var(--color-battery);
+}
+.confirmButton {
+	font-size: var(--font-settings);
+	background-color: var(--color-evu);
+	color: var(--color-fg);
+}
+
 </style>