From b95236c1708b0cf65b0fb115173386ace52272be Mon Sep 17 00:00:00 2001
From: Thomas Basler <thomas@familie-basler.net>
Date: Fri, 1 Sep 2023 00:20:56 +0200
Subject: [PATCH] Feature: webapp: Move inverter settings into different tabs

---
 webapp/src/locales/de.json             |   2 +
 webapp/src/locales/en.json             |   2 +
 webapp/src/locales/fr.json             |   2 +
 webapp/src/views/InverterAdminView.vue | 156 ++++++++++++++-----------
 4 files changed, 92 insertions(+), 70 deletions(-)

diff --git a/webapp/src/locales/de.json b/webapp/src/locales/de.json
index 8ea7bd3..849415f 100644
--- a/webapp/src/locales/de.json
+++ b/webapp/src/locales/de.json
@@ -450,6 +450,8 @@
         "SaveOrder": "Reihenfolge speichern",
         "DeleteInverter": "Wechselrichter löschen",
         "EditInverter": "Wechselrichter bearbeiten",
+        "General": "Allgemein",
+        "String": "String",
         "InverterSerial": "Wechselrichter Seriennummer:",
         "InverterName": "Wechselrichter Name:",
         "InverterNameHint": "Hier kann ein eigener Namen für den Wechselrichter angeben werden.",
diff --git a/webapp/src/locales/en.json b/webapp/src/locales/en.json
index 1edb88d..6a5c856 100644
--- a/webapp/src/locales/en.json
+++ b/webapp/src/locales/en.json
@@ -450,6 +450,8 @@
         "SaveOrder": "Save order",
         "DeleteInverter": "Delete inverter",
         "EditInverter": "Edit inverter",
+        "General": "General",
+        "String": "String",
         "InverterSerial": "Inverter Serial:",
         "InverterName": "Inverter Name:",
         "InverterNameHint": "Here you can specify a custom name for your inverter.",
diff --git a/webapp/src/locales/fr.json b/webapp/src/locales/fr.json
index 8c763b9..348de61 100644
--- a/webapp/src/locales/fr.json
+++ b/webapp/src/locales/fr.json
@@ -450,6 +450,8 @@
         "SaveOrder": "Save order",
         "DeleteInverter": "Supprimer l'onduleur",
         "EditInverter": "Modifier l'onduleur",
+        "General": "Général",
+        "String": "Ligne",
         "InverterSerial": "Numéro de série de l'onduleur",
         "InverterName": "Nom de l'onduleur :",
         "InverterNameHint": "Ici, vous pouvez spécifier un nom personnalisé pour votre onduleur.",
diff --git a/webapp/src/views/InverterAdminView.vue b/webapp/src/views/InverterAdminView.vue
index 3660a49..1c94b70 100644
--- a/webapp/src/views/InverterAdminView.vue
+++ b/webapp/src/views/InverterAdminView.vue
@@ -80,85 +80,101 @@
                 </div>
                 <div class="modal-body">
                     <form>
-                        <div class="mb-3">
-                            <label for="inverter-serial" class="col-form-label">
-                                {{ $t('inverteradmin.InverterSerial') }}
-                            </label>
-                            <input v-model="selectedInverterData.serial" type="number" id="inverter-serial"
-                                class="form-control" />
-                            <label for="inverter-name" class="col-form-label">{{ $t('inverteradmin.InverterName') }}
-                                <BIconInfoCircle v-tooltip :title="$t('inverteradmin.InverterNameHint')" />
-                            </label>
-                            <input v-model="selectedInverterData.name" type="text" id="inverter-name"
-                                class="form-control" maxlength="31" />
-
-                            <CardElement :text="$t('inverteradmin.InverterStatus')" addSpace>
-                                <InputElement :label="$t('inverteradmin.PollEnable')"
-                                    v-model="selectedInverterData.poll_enable"
-                                    type="checkbox" wide />
-                                <InputElement :label="$t('inverteradmin.PollEnableNight')"
-                                    v-model="selectedInverterData.poll_enable_night"
-                                    type="checkbox" wide/>
-                                <InputElement :label="$t('inverteradmin.CommandEnable')"
-                                    v-model="selectedInverterData.command_enable"
-                                    type="checkbox" wide/>
-                                <InputElement :label="$t('inverteradmin.CommandEnableNight')"
-                                    v-model="selectedInverterData.command_enable_night"
-                                    type="checkbox" wide/>
-                                <div class="alert alert-secondary mt-3" role="alert" v-html="$t('inverteradmin.StatusHint')"></div>
-                            </CardElement>
-                        </div>
-
-                        <div v-for="(ch, index) in selectedInverterData.channel" :key="`${index}`">
-                            <div class="row g-2">
-                                <div class="col-md">
-                                    <label :for="`inverter-name_${index}`" class="col-form-label">
-                                        {{ $t('inverteradmin.StringName', { num: index + 1 }) }}
-                                        <BIconInfoCircle v-tooltip :title="$t('inverteradmin.StringNameHint')" />
+                        <nav>
+                            <div class="nav nav-tabs" id="nav-tab" role="tablist">
+                                <button class="nav-link active" id="nav-general-tab" data-bs-toggle="tab" data-bs-target="#nav-general"
+                                    type="button" role="tab" aria-controls="nav-general" aria-selected="true">{{
+                                        $t('inverteradmin.General')
+                                    }}</button>
+                                <button class="nav-link" id="nav-string-tab" data-bs-toggle="tab" data-bs-target="#nav-string"
+                                    type="button" role="tab" aria-controls="nav-string">{{ $t('inverteradmin.String') }}</button>
+                            </div>
+                        </nav>
+                        <div class="tab-content" id="nav-tabContent">
+                            <div class="tab-pane fade show active" id="nav-general" role="tabpanel" aria-labelledby="nav-general-tab" tabindex="0">
+                                <div class="mb-3">
+                                    <label for="inverter-serial" class="col-form-label">
+                                        {{ $t('inverteradmin.InverterSerial') }}
                                     </label>
-                                    <div class="d-flex mb-2">
-                                        <div class="input-group">
-                                            <input type="text" class="form-control" :id="`inverter-name_${index}`"
-                                                maxlength="31" v-model="ch.name" />
-                                        </div>
-                                    </div>
+                                    <input v-model="selectedInverterData.serial" type="number" id="inverter-serial"
+                                        class="form-control" />
+                                    <label for="inverter-name" class="col-form-label">{{ $t('inverteradmin.InverterName') }}
+                                        <BIconInfoCircle v-tooltip :title="$t('inverteradmin.InverterNameHint')" />
+                                    </label>
+                                    <input v-model="selectedInverterData.name" type="text" id="inverter-name"
+                                        class="form-control" maxlength="31" />
+
+                                    <CardElement :text="$t('inverteradmin.InverterStatus')" addSpace>
+                                        <InputElement :label="$t('inverteradmin.PollEnable')"
+                                            v-model="selectedInverterData.poll_enable"
+                                            type="checkbox" wide />
+                                        <InputElement :label="$t('inverteradmin.PollEnableNight')"
+                                            v-model="selectedInverterData.poll_enable_night"
+                                            type="checkbox" wide/>
+                                        <InputElement :label="$t('inverteradmin.CommandEnable')"
+                                            v-model="selectedInverterData.command_enable"
+                                            type="checkbox" wide/>
+                                        <InputElement :label="$t('inverteradmin.CommandEnableNight')"
+                                            v-model="selectedInverterData.command_enable_night"
+                                            type="checkbox" wide/>
+                                        <div class="alert alert-secondary mt-3" role="alert" v-html="$t('inverteradmin.StatusHint')"></div>
+                                    </CardElement>
                                 </div>
                             </div>
-                            <div class="row g-2">
-                                <div class="col">
-                                    <label :for="`inverter-max_${index}`" class="col-form-label">
-                                        {{ $t('inverteradmin.StringMaxPower', { num: index + 1 }) }}
-                                        <BIconInfoCircle v-tooltip :title="$t('inverteradmin.StringMaxPowerHint')" />
-                                    </label>
-                                    <div class="d-flex mb-2">
-                                        <div class="input-group">
-                                            <input type="number" class="form-control" :id="`inverter-max_${index}`"
-                                                min="0" v-model="ch.max_power"
-                                                :aria-describedby="`inverter-maxDescription_${index} inverter-customizer`" />
-                                            <span class="input-group-text"
-                                                :id="`inverter-maxDescription_${index}`">W<sub>p</sub><sup>*</sup></span>
+
+                            <div class="tab-pane fade show" id="nav-string" role="tabpanel" aria-labelledby="nav-string-tab" tabindex="0">
+                                <div v-for="(ch, index) in selectedInverterData.channel" :key="`${index}`">
+                                    <div class="row g-2">
+                                        <div class="col-md">
+                                            <label :for="`inverter-name_${index}`" class="col-form-label">
+                                                {{ $t('inverteradmin.StringName', { num: index + 1 }) }}
+                                                <BIconInfoCircle v-tooltip :title="$t('inverteradmin.StringNameHint')" />
+                                            </label>
+                                            <div class="d-flex mb-2">
+                                                <div class="input-group">
+                                                    <input type="text" class="form-control" :id="`inverter-name_${index}`"
+                                                        maxlength="31" v-model="ch.name" />
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="row g-2">
+                                        <div class="col">
+                                            <label :for="`inverter-max_${index}`" class="col-form-label">
+                                                {{ $t('inverteradmin.StringMaxPower', { num: index + 1 }) }}
+                                                <BIconInfoCircle v-tooltip :title="$t('inverteradmin.StringMaxPowerHint')" />
+                                            </label>
+                                            <div class="d-flex mb-2">
+                                                <div class="input-group">
+                                                    <input type="number" class="form-control" :id="`inverter-max_${index}`"
+                                                        min="0" v-model="ch.max_power"
+                                                        :aria-describedby="`inverter-maxDescription_${index} inverter-customizer`" />
+                                                    <span class="input-group-text"
+                                                        :id="`inverter-maxDescription_${index}`">W<sub>p</sub><sup>*</sup></span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="col">
+                                            <label :for="`inverter-ytoffset_${index}`" class="col-form-label">
+                                                {{ $t('inverteradmin.StringYtOffset', { num: index + 1 }) }}
+                                                <BIconInfoCircle v-tooltip :title="$t('inverteradmin.StringYtOffsetHint')" />
+                                            </label>
+                                            <div class="d-flex mb-2">
+                                                <div class="input-group">
+                                                    <input type="number" class="form-control" :id="`inverter-ytoffset_${index}`"
+                                                        min="0" v-model="ch.yield_total_offset"
+                                                        :aria-describedby="`inverter-ytoffsetDescription_${index} inverter-customizer`" />
+                                                    <span class="input-group-text"
+                                                        :id="`inverter-ytoffsetDescription_${index}`">kWh</span>
+                                                </div>
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
-                                <div class="col">
-                                    <label :for="`inverter-ytoffset_${index}`" class="col-form-label">
-                                        {{ $t('inverteradmin.StringYtOffset', { num: index + 1 }) }}
-                                        <BIconInfoCircle v-tooltip :title="$t('inverteradmin.StringYtOffsetHint')" />
-                                    </label>
-                                    <div class="d-flex mb-2">
-                                        <div class="input-group">
-                                            <input type="number" class="form-control" :id="`inverter-ytoffset_${index}`"
-                                                min="0" v-model="ch.yield_total_offset"
-                                                :aria-describedby="`inverter-ytoffsetDescription_${index} inverter-customizer`" />
-                                            <span class="input-group-text"
-                                                :id="`inverter-ytoffsetDescription_${index}`">kWh</span>
-                                        </div>
-                                    </div>
+                                <div :id="`inverter-customizer`" class="form-text" v-html="$t('inverteradmin.InverterHint')">
                                 </div>
                             </div>
                         </div>
-                        <div :id="`inverter-customizer`" class="form-text" v-html="$t('inverteradmin.InverterHint')">
-                        </div>
                     </form>
 
                 </div>