Add Loadpoint Settings Modal (MinSoC, Phases) (evcc-io#4121)

ChrisDaHub · Aug 17, 2022 · 9e3111d · 9e3111d
1 parent 5e0c67c
commit 9e3111d
Show file tree

Hide file tree

Showing 18 changed files with 654 additions and 148 deletions.
diff --git a/assets/css/app.css b/assets/css/app.css
@@ -265,10 +265,8 @@ small {
 	opacity: 1;
 }
 
-@media (--dark-mode) {
-	.btn-close {
-		filter: invert(1);
-	}
+.dark .btn-close {
+	filter: invert(1);
 }
 
 .dropdown-menu {
@@ -285,8 +283,11 @@ small {
 	color: var(--bs-white);
 }
 
-@media (--dark-mode) {
-	.dropdown-menu {
-		box-shadow: 0 0 8px var(--evcc-background);
-	}
+.dark .dropdown-menu {
+	box-shadow: 0 0 8px var(--evcc-background);
+}
+.dark .form-select {
+	background-color: var(--evcc-box);
+	color: var(--evcc-default-text);
+	background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>");
 }
diff --git a/assets/js/components/Loadpoint.vue b/assets/js/components/Loadpoint.vue
@@ -1,16 +1,24 @@
 <template>
 	<div class="loadpoint pt-4 pb-2 px-3 px-sm-4 mx-2 mx-sm-0">
 		<div class="d-block d-sm-flex justify-content-between align-items-center mb-3">
-			<h3 class="mb-3 me-2 text-truncate">
-				{{ title || $t("main.loadpoint.fallbackName") }}
-			</h3>
+			<div class="d-flex justify-content-between align-items-center mb-3">
+				<h3 class="me-2 mb-0 text-truncate">
+					{{ title || $t("main.loadpoint.fallbackName") }}
+				</h3>
+				<LoadpointSettingsButton :id="id" class="d-block d-sm-none" />
+			</div>
 			<div class="mb-3 d-flex align-items-center">
-				<Mode class="w-100 w-sm-auto" :mode="mode" @updated="setTargetMode" />
-				<button v-if="$hiddenFeatures" class="btn btn-link text-gray p-0 flex-shrink-0">
-					<shopicon-filled-options size="s"></shopicon-filled-options>
-				</button>
+				<Mode class="flex-grow-1" :mode="mode" @updated="setTargetMode" />
+				<LoadpointSettingsButton :id="id" class="d-none d-sm-block ms-2" />
 			</div>
 		</div>
+		<LoadpointSettingsModal
+			v-bind="settingsModal"
+			@maxcurrent-updated="setMaxCurrent"
+			@mincurrent-updated="setMinCurrent"
+			@phasesconfigured-updated="setPhasesConfigured"
+			@minsoc-updated="setMinSoC"
+		/>
 
 		<div
 			v-if="remoteDisabled"
@@ -86,18 +94,27 @@
 
 <script>
 import "@h2d2/shopicons/es/regular/lightning";
-import "@h2d2/shopicons/es/filled/options";
+import "@h2d2/shopicons/es/regular/adjust";
 import api from "../api";
 import Mode from "./Mode.vue";
 import Vehicle from "./Vehicle.vue";
 import Phases from "./Phases.vue";
 import LabelAndValue from "./LabelAndValue.vue";
 import formatter from "../mixins/formatter";
 import collector from "../mixins/collector";
+import LoadpointSettingsButton from "./LoadpointSettingsButton.vue";
+import LoadpointSettingsModal from "./LoadpointSettingsModal.vue";
 
 export default {
 	name: "Loadpoint",
-	components: { Mode, Vehicle, Phases, LabelAndValue },
+	components: {
+		Mode,
+		Vehicle,
+		Phases,
+		LabelAndValue,
+		LoadpointSettingsButton,
+		LoadpointSettingsModal,
+	},
 	mixins: [formatter, collector],
 	props: {
 		id: Number,
@@ -138,6 +155,7 @@ export default {
 
 		// other information
 		phases: Number,
+		phasesConfigured: Number,
 		minCurrent: Number,
 		maxCurrent: Number,
 		phasesActive: Number,
@@ -165,6 +183,9 @@ export default {
 		phasesProps: function () {
 			return this.collectProps(Phases);
 		},
+		settingsModal: function () {
+			return this.collectProps(LoadpointSettingsModal);
+		},
 		vehicle: function () {
 			return this.collectProps(Vehicle);
 		},
@@ -216,6 +237,18 @@ export default {
 		setTargetSoC: function (soc) {
 			api.post(this.apiPath("targetsoc") + "/" + soc);
 		},
+		setMaxCurrent: function (maxCurrent) {
+			api.post(this.apiPath("maxcurrent") + "/" + maxCurrent);
+		},
+		setMinCurrent: function (minCurrent) {
+			api.post(this.apiPath("mincurrent") + "/" + minCurrent);
+		},
+		setPhasesConfigured: function (phases) {
+			api.post(this.apiPath("phases") + "/" + phases);
+		},
+		setMinSoC: function (soc) {
+			api.post(this.apiPath("minsoc") + "/" + soc);
+		},
 		setTargetTime: function (date) {
 			api.post(`${this.apiPath("targetcharge")}/${this.targetSoC}/${date.toISOString()}`);
 		},

diff --git a/assets/js/components/LoadpointSettingsButton.vue b/assets/js/components/LoadpointSettingsButton.vue
@@ -0,0 +1,21 @@
+<template>
+	<button
+		type="button"
+		data-bs-toggle="modal"
+		:data-bs-target="`#loadpointSettingsModal_${id}`"
+		class="btn btn-sm btn-outline-secondary position-relative border-0 p-2 evcc-gray"
+	>
+		<shopicon-regular-adjust size="s"></shopicon-regular-adjust>
+	</button>
+</template>
+
+<script>
+import "@h2d2/shopicons/es/regular/adjust";
+
+export default {
+	name: "LoadpointSettingsButton",
+	props: {
+		id: [String, Number],
+	},
+};
+</script>