Feature: webapp: Move inverter settings into different tabs

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.",

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.",

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.",

webapp/src/views/InverterAdminView.vue

@@ -80,6 +80,18 @@
                 </div>
                 <div class="modal-body">
                     <form>
+                        <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') }}
@@ -108,7 +120,9 @@
                                         <div class="alert alert-secondary mt-3" role="alert" v-html="$t('inverteradmin.StatusHint')"></div>
                                     </CardElement>
                                 </div>
+                            </div>
 
+                            <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">
@@ -159,6 +173,8 @@
                                 </div>
                                 <div :id="`inverter-customizer`" class="form-text" v-html="$t('inverteradmin.InverterHint')">
                                 </div>
+                            </div>
+                        </div>
                     </form>
 
                 </div>