webapp: Nicer cmt frequency input

tbnobody · Apr 15, 2023 · 1e7b16a · 1e7b16a
1 parent 50ce7f0
commit 1e7b16a
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 5 deletions.
diff --git a/webapp/src/locales/de.json b/webapp/src/locales/de.json
@@ -329,6 +329,7 @@
         "CmtPaLevelHint": "Verwendet für HMS/HMT-Wechselrichter. Stellen Sie sicher, dass Ihre Stromversorgung stabil genug ist, bevor Sie die Sendeleistung erhöhen.",
         "CmtFrequency": "CMT2300A Frequenz:",
         "CmtFrequencyHint": "Stelle sicher, dass du nur Frequenzen verwendet werden welche im entsprechenden Land erlaubt sind!",
+        "CmtFrequencyWarning": "Die ausgewählte Frequenz befindet außerhalb des in der EU zugelassenen Bereiches. Vergewissere dich, dass mit dieser Auswahl keine lokalen Regularien verletzt werden.",
         "khz": "kHz",
         "Save": "Speichern",
         "Min": "Minimum ({db} dBm)",

diff --git a/webapp/src/locales/en.json b/webapp/src/locales/en.json
@@ -329,6 +329,7 @@
         "CmtPaLevelHint": "Used for HMS/HMT-Inverters. Make sure your power supply is stable enough before increasing the transmit power.",
         "CmtFrequency": "CMT2300A Frequency:",
         "CmtFrequencyHint": "Make sure to only use frequencies that are allowed in the respective country!",
+        "CmtFrequencyWarning": "The selected frequency is outside the range allowed in the EU. Make sure that this selection does not violate any local regulations.",
         "khz": "kHz",
         "Save": "Save",
         "Min": "Minimum ({db} dBm)",

diff --git a/webapp/src/locales/fr.json b/webapp/src/locales/fr.json
@@ -329,6 +329,7 @@
         "CmtPaLevelHint": "Used for HMS/HMT-Inverters. Assurez-vous que votre alimentation est suffisamment stable avant d'augmenter la puissance d'émission.",
         "CmtFrequency": "CMT2300A Frequency:",
         "CmtFrequencyHint": "Stelle sicher, dass du nur Frequenzen verwendet werden welche im entsprechenden Land erlaubt sind!",
+        "CmtFrequencyWarning": "The selected frequency is outside the range allowed in the EU. Make sure that this selection does not violate any local regulations.",
         "khz": "kHz",
         "Save": "Sauvegarder",
         "Min": "Minimum ({db} dBm)",

diff --git a/webapp/src/views/DtuAdminView.vue b/webapp/src/views/DtuAdminView.vue
@@ -44,12 +44,24 @@
                     </div>
                 </div>
 
-                <InputElement :label="$t('dtuadmin.CmtFrequency')"
+                <div class="row mb-3" v-if="dtuConfigList.cmt_enabled">
+                    <label for="cmtFrequency" class="col-sm-2 col-form-label">
+                        {{ $t('dtuadmin.CmtFrequency') }}
+                        <BIconInfoCircle v-tooltip :title="$t('dtuadmin.CmtFrequencyHint')" />
+                    </label>
+                    <div class="col-sm-10">
+                        <div class="input-group mb-3">
+                            <input type="range" class="form-control form-range"
                                 v-model="dtuConfigList.cmt_frequency"
-                                type="number" min="860250" max="923500"
-                                :postfix="$t('dtuadmin.khz')"
-                                :tooltip="$t('dtuadmin.CmtFrequencyHint')"
-                                v-if="dtuConfigList.cmt_enabled"/>
+                                min="860250" max="923500" step="250"
+                                id="cmtFrequency" aria-describedby="basic-addon2"
+                                style="height: unset;" />
+                            <span class="input-group-text" id="basic-addon2">{{ cmtFrequencyText }}</span>
+                        </div>
+                        <div class="alert alert-danger" role="alert" v-html="$t('dtuadmin.CmtFrequencyWarning')" v-if="cmtIsOutOfEu"></div>
+                    </div>
+                </div>
+
             </CardElement>
             <button type="submit" class="btn btn-primary mb-3">{{ $t('dtuadmin.Save') }}</button>
         </form>
@@ -98,6 +110,14 @@ export default defineComponent({
     created() {
         this.getDtuConfig();
     },
+    computed: {
+        cmtFrequencyText() {
+            return this.$n(this.dtuConfigList.cmt_frequency / 1000, "decimalTwoDigits") + " MHz";
+        },
+        cmtIsOutOfEu() {
+            return this.dtuConfigList.cmt_frequency < 863000 || this.dtuConfigList.cmt_frequency > 870000;
+        }
+    },
     methods: {
         getDtuConfig() {
             this.dataLoading = true;