Implemented charge windows instead of just picking random low price s…

.github/workflows/node.js.yml

@@ -23,3 +23,4 @@ jobs:
         cache: 'npm'
     - run: npm ci
     - run: npm run build
+    - run: npm run test:node

app/src/app.vue

@@ -73,9 +73,13 @@
               tile
               prominent
             >
+              <!-- Intentionally rendered as trusted app/server-provided HTML. Do not pass user-supplied content here. -->
+              <!-- eslint-disable-next-line vue/no-v-html -->
               <span v-html="error.message"></span>
             </v-alert>
             <v-alert v-model="warning.show" dismissible type="warning" tile>
+              <!-- Intentionally rendered as trusted app/server-provided HTML. Do not pass user-supplied content here. -->
+              <!-- eslint-disable-next-line vue/no-v-html -->
               <span v-html="warning.message"></span>
             </v-alert>
             <v-alert
@@ -85,6 +89,8 @@
               tile
               @input="closedInfo"
             >
+              <!-- Intentionally rendered as trusted app/server-provided HTML. Do not pass user-supplied content here. -->
+              <!-- eslint-disable-next-line vue/no-v-html -->
               <span v-html="info.message"></span>
             </v-alert>
           </v-flex>

app/src/components/edit-location.vue

@@ -49,7 +49,6 @@ import gql from "graphql-tag";
 
 import EditVehicleLocationSettings from "@app/components/edit-vehicle-location-settings.vue";
 import RemoveDialog from "@app/components/remove-dialog.vue";
-import deepmerge from "deepmerge";
 import equal from "fast-deep-equal";
 import { GQLLocation, GQLPriceList } from "@shared/sc-schema.js";
 import { UpdateLocationParams } from "@shared/sc-client.js";
@@ -129,17 +128,26 @@ export default class EditLocation extends Vue {
 
   debounceTimer?: any;
   touchedFields: any = {};
-  clearSaving: any = {};
+  saveTicketSeq = 0;
+  saveTickets: Record<string, number> = {};
   async save(field: string) {
-    delete this.clearSaving[field];
+    const fieldTicket = ++this.saveTicketSeq;
+    this.saveTickets[field] = fieldTicket;
     this.$set(this.saving, field, true);
 
     if (this.debounceTimer) {
       clearTimeout(this.debounceTimer);
     }
     this.debounceTimer = setTimeout(async () => {
       const form: any = this.$refs.form;
-      if (form.validate && form.validate()) {
+      const fieldsInRequest = Object.entries(this.saving)
+        .filter(([, value]) => value)
+        .map(([key]) => key);
+      const requestTickets: Record<string, number> = {};
+      for (const key of fieldsInRequest) {
+        requestTickets[key] = this.saveTickets[key] || 0;
+      }
+      if (!form.validate || form.validate()) {
         const update: UpdateLocationParams = {
           id: this.location.id,
         };
@@ -153,12 +161,18 @@ export default class EditLocation extends Vue {
           delete update.providerData;
         }
 
-        this.clearSaving = deepmerge(this.clearSaving, this.saving);
-
-        await this.$scClient.updateLocation(update);
-
-        for (const [key, value] of Object.entries(this.clearSaving)) {
-          if (value) {
+        try {
+          await this.$scClient.updateLocation(update);
+        } finally {
+          for (const key of fieldsInRequest) {
+            if (this.saveTickets[key] === requestTickets[key]) {
+              this.$set(this.saving, key, false);
+            }
+          }
+        }
+      } else {
+        for (const key of fieldsInRequest) {
+          if (this.saveTickets[key] === requestTickets[key]) {
             this.$set(this.saving, key, false);
           }
         }

app/src/components/edit-vehicle-location-settings.vue

@@ -1,16 +1,15 @@
 <template>
   <v-form ref="form">
     <v-row>
-      <v-col cols="12" sm="5" md="6" class="mt-2">
+      <v-col cols="12" sm="4" md="5" class="mt-2">
         <v-list-item-title>{{ name }}</v-list-item-title>
         <v-list-item-subtitle
           class="font-light overline caption secondary--text text--lighten-2"
         >
           ({{ settings.locationID }})
         </v-list-item-subtitle>
       </v-col>
-      <v-spacer />
-      <v-col cols="6" sm="3" md="3">
+      <v-col cols="6" sm="3" md="2">
         <v-text-field
           v-model="directLevel"
           :rules="[directLevelRules]"
@@ -33,7 +32,25 @@
           </template>
         </v-text-field>
       </v-col>
-      <v-col cols="6" sm="4" md="3">
+      <v-col cols="6" sm="3" md="2">
+        <v-select
+          v-model="splitCharge"
+          :items="splitChargeList"
+          label="Split charge window"
+          placeholder=" "
+          :loading="saving.splitCharge"
+        >
+          <template #append-outer>
+            <v-tooltip bottom max-width="18rem">
+              <template #activator="{ on }">
+                <v-icon v-on="on">mdi-help-circle-outline</v-icon>
+              </template>
+              Control if charging is allowed to split into multiple windows.
+            </v-tooltip>
+          </template>
+        </v-select>
+      </v-col>
+      <v-col cols="12" sm="4" md="3">
         <v-combobox
           v-model="goal"
           :items="goalCBList"
@@ -62,7 +79,6 @@
             v-model="focus"
             active-class="selected-charge"
             color="primary"
-            label="hej"
             mandatory
           >
             <v-btn small>Low Cost</v-btn>
@@ -77,9 +93,8 @@
 
 <script lang="ts">
 import { Component, Vue, Prop } from "vue-property-decorator";
-import deepmerge from "deepmerge";
 import { GQLVehicle, GQLVehicleLocationSetting } from "@shared/sc-schema.js";
-import { SmartChargeGoal } from "@shared/sc-types.js";
+import { SmartChargeGoal, SplitCharge } from "@shared/sc-types.js";
 import { UpdateVehicleParams } from "@shared/sc-client.js";
 
 @Component({})
@@ -90,18 +105,25 @@ export default class EditVehicle extends Vue {
 
   saving!: { [key: string]: boolean };
   goalCBList!: { text: string; value: string }[];
+  splitChargeList!: { text: string; value: string }[];
   data() {
     return {
       saving: {
         directLevel: false,
         goal: false,
+        splitCharge: false,
       },
       goalCBList: [
         { text: "Low cost", value: SmartChargeGoal.Low },
         { text: "Balanced", value: SmartChargeGoal.Balanced },
         { text: "Full charge", value: SmartChargeGoal.Full },
         { text: "Custom", value: "%" },
       ],
+      splitChargeList: [
+        { text: "Never", value: SplitCharge.Never },
+        { text: "Auto", value: SplitCharge.Auto },
+        { text: "Always", value: SplitCharge.Always },
+      ],
     };
   }
 
@@ -153,19 +175,36 @@ export default class EditVehicle extends Vue {
     this.save("goal");
   }
 
+  get splitCharge(): string {
+    return this.settings.splitCharge || SplitCharge.Auto;
+  }
+  set splitCharge(value: string) {
+    this.settings.splitCharge = value;
+    this.save("splitCharge");
+  }
+
   debounceTimer?: any;
   touchedFields: any = {};
-  clearSaving: any = {};
+  saveTicketSeq = 0;
+  saveTickets: Record<string, number> = {};
   async save(field: string) {
-    delete this.clearSaving[field];
+    const fieldTicket = ++this.saveTicketSeq;
+    this.saveTickets[field] = fieldTicket;
     this.$set(this.saving, field, true);
 
     if (this.debounceTimer) {
       clearTimeout(this.debounceTimer);
     }
     this.debounceTimer = setTimeout(async () => {
       const form: any = this.$refs.form;
-      if (form.validate && form.validate()) {
+      const fieldsInRequest = Object.entries(this.saving)
+        .filter(([, value]) => value)
+        .map(([key]) => key);
+      const requestTickets: Record<string, number> = {};
+      for (const key of fieldsInRequest) {
+        requestTickets[key] = this.saveTickets[key] || 0;
+      }
+      if (!form.validate || form.validate()) {
         const goal = this.settings.goal as any;
         const update: UpdateVehicleParams = {
           id: this.vehicle.id,
@@ -174,16 +213,23 @@ export default class EditVehicle extends Vue {
               locationID: this.settings.locationID,
               directLevel: this.settings.directLevel,
               goal: goal.value || goal,
+              splitCharge: this.settings.splitCharge || SplitCharge.Auto,
             } as GQLVehicleLocationSetting,
           ],
         };
 
-        this.clearSaving = deepmerge(this.clearSaving, this.saving);
-
-        await this.$scClient.updateVehicle(update);
-
-        for (const [key, value] of Object.entries(this.clearSaving)) {
-          if (value) {
+        try {
+          await this.$scClient.updateVehicle(update);
+        } finally {
+          for (const key of fieldsInRequest) {
+            if (this.saveTickets[key] === requestTickets[key]) {
+              this.$set(this.saving, key, false);
+            }
+          }
+        }
+      } else {
+        for (const key of fieldsInRequest) {
+          if (this.saveTickets[key] === requestTickets[key]) {
             this.$set(this.saving, key, false);
           }
         }

app/src/components/edit-vehicle.vue

@@ -52,7 +52,7 @@
 
       <EditVehicleLocationSettings
         v-for="l in locationSettings()"
-        :key="l.settings.location"
+        :key="l.settings.locationID"
         :name="l.name"
         :settings="l.settings"
         :vehicle="vehicle"
@@ -94,7 +94,6 @@
 import { Component, Vue, Prop } from "vue-property-decorator";
 import EditVehicleLocationSettings from "@app/components/edit-vehicle-location-settings.vue";
 import RemoveDialog from "@app/components/remove-dialog.vue";
-import deepmerge from "deepmerge";
 import equal from "fast-deep-equal";
 import {
   GQLVehicle,
@@ -141,18 +140,24 @@ export default class EditVehicle extends Vue {
     return true;
   }
 
+  getOrCreateLocationSettings(locationID: string): GQLVehicleLocationSetting {
+    if (!this.vehicle.locationSettings) {
+      this.$set(this.vehicle, "locationSettings", []);
+    }
+    const existing = this.vehicle.locationSettings.find((f) => f.locationID === locationID);
+    if (existing) return existing;
+    const created = DefaultVehicleLocationSettings(locationID);
+    this.vehicle.locationSettings.push(created);
+    return created;
+  }
+
   locationSettings(): any[] {
     return (
       (this.locations &&
         this.locations
           .filter((l) => l.ownerID === this.vehicle.ownerID)
           .map((l) => {
-            const settings: GQLVehicleLocationSetting =
-              (this.vehicle.locationSettings &&
-                this.vehicle.locationSettings.find(
-                  (f) => f.locationID === l.id
-                )) ||
-              DefaultVehicleLocationSettings(l.id);
+            const settings = this.getOrCreateLocationSettings(l.id);
             return {
               name: l.name,
               settings,
@@ -216,17 +221,26 @@ export default class EditVehicle extends Vue {
 
   debounceTimer?: any;
   touchedFields: any = {};
-  clearSaving: any = {};
+  saveTicketSeq = 0;
+  saveTickets: Record<string, number> = {};
   async save(field: string) {
-    delete this.clearSaving[field];
+    const fieldTicket = ++this.saveTicketSeq;
+    this.saveTickets[field] = fieldTicket;
     this.$set(this.saving, field, true);
 
     if (this.debounceTimer) {
       clearTimeout(this.debounceTimer);
     }
     this.debounceTimer = setTimeout(async () => {
       const form: any = this.$refs.form;
-      if (form.validate && form.validate()) {
+      const fieldsInRequest = Object.entries(this.saving)
+        .filter(([, value]) => value)
+        .map(([key]) => key);
+      const requestTickets: Record<string, number> = {};
+      for (const key of fieldsInRequest) {
+        requestTickets[key] = this.saveTickets[key] || 0;
+      }
+      if (!form.validate || form.validate()) {
         const update: UpdateVehicleParams = {
           id: this.vehicle.id,
           providerData: {},
@@ -251,12 +265,18 @@ export default class EditVehicle extends Vue {
           delete update.providerData;
         }
 
-        this.clearSaving = deepmerge(this.clearSaving, this.saving);
-
-        await this.$scClient.updateVehicle(update);
-
-        for (const [key, value] of Object.entries(this.clearSaving)) {
-          if (value) {
+        try {
+          await this.$scClient.updateVehicle(update);
+        } finally {
+          for (const key of fieldsInRequest) {
+            if (this.saveTickets[key] === requestTickets[key]) {
+              this.$set(this.saving, key, false);
+            }
+          }
+        }
+      } else {
+        for (const key of fieldsInRequest) {
+          if (this.saveTickets[key] === requestTickets[key]) {
             this.$set(this.saving, key, false);
           }
         }