Merge pull request #2620 from Brett-S-OWB/energy-price

Koala - Energy price buttons - whole cent plus fine adjustment buttons

Author: benderl

packages/modules/web_themes/koala/source/src/components/ChargePointEcoSettings.vue

@@ -69,36 +69,72 @@
     class="q-mt-md"
   />
   <div v-if="etConfigured">
-    <div class="text-subtitle2 q-mt-sm q-mr-sm">
+    <div class="text-subtitle2 q-my-sm">
       Preisgrenze für strompreisbasiertes Laden
     </div>
-    <div class="row items-center justify-center q-ma-none q-pa-none no-wrap">
-      <!-- <q-btn-group class="col"> -->
+    <div class="row items-center justify-center q-mb-xs q-gutter-x-xs">
       <q-btn
         v-if="maxPrice.value"
-        icon="remove"
+        class="col-auto"
+        label="-1,00"
         color="grey"
         size="sm"
-        class="col q-mr-sm"
-        @click="maxPrice.value = maxPrice.value - 0.01"
+        dense
+        @click="maxPrice.value = maxPrice.value - 1"
       />
       <q-btn
         v-if="maxPrice.value"
-        icon="add"
+        class="col-auto"
+        label="-0,10"
         color="grey"
         size="sm"
-        class="col"
-        @click="maxPrice.value = maxPrice.value + 0.01"
+        dense
+        @click="maxPrice.value = maxPrice.value - 0.1"
       />
-      <!-- </q-btn-group> -->
-      <div class="col-5 text-right">
+      <q-btn
+        v-if="maxPrice.value"
+        class="col-auto"
+        label="-0,01"
+        color="grey"
+        size="sm"
+        dense
+        @click="maxPrice.value = maxPrice.value - 0.01"
+      />
+      <div class="col-auto q-mx-sm">
         {{
           maxPrice.value?.toLocaleString(undefined, {
             minimumFractionDigits: 2,
             maximumFractionDigits: 2,
           }) + ' ct/kWh'
         }}
       </div>
+      <q-btn
+        v-if="maxPrice.value"
+        class="col-auto"
+        label="+0,01"
+        color="grey"
+        size="sm"
+        dense
+        @click="maxPrice.value = maxPrice.value + 0.01"
+      />
+      <q-btn
+        v-if="maxPrice.value"
+        class="col-auto"
+        label="+0,10"
+        color="grey"
+        size="sm"
+        dense
+        @click="maxPrice.value = maxPrice.value + 0.1"
+      />
+      <q-btn
+        v-if="maxPrice.value"
+        class="col-auto"
+        label="+1,00"
+        color="grey"
+        size="sm"
+        dense
+        @click="maxPrice.value = maxPrice.value + 1"
+      />
     </div>
     <q-field filled class="q-mt-sm">
       <ElectricityTariffChart