From 1419035250cf61da8e4cdcaa65244df2daa432b0 Mon Sep 17 00:00:00 2001
From: DJ2LS <dj2ls@proton.me>
Date: Tue, 30 Apr 2024 21:10:50 +0200
Subject: [PATCH] first swr attempt

---
 .../src/components/dynamic_components.vue     | 18 ++++--
 .../grid/grid_active_broadcasts_vert.vue      |  2 +-
 .../src/components/grid/grid_swr_meter.vue    | 61 +++++++++++++++++++
 3 files changed, 74 insertions(+), 7 deletions(-)
 create mode 100644 freedata_gui/src/components/grid/grid_swr_meter.vue

diff --git a/freedata_gui/src/components/dynamic_components.vue b/freedata_gui/src/components/dynamic_components.vue
index e55a4a5c..d6c97fe1 100644
--- a/freedata_gui/src/components/dynamic_components.vue
+++ b/freedata_gui/src/components/dynamic_components.vue
@@ -33,6 +33,7 @@ import grid_beacon from "./grid/grid_beacon.vue";
 import grid_mycall_small from "./grid/grid_mycall small.vue";
 import grid_scatter from "./grid/grid_scatter.vue";
 import grid_stats_chart from "./grid/grid_stats_chart.vue";
+import grid_swr_meter from "./grid/grid_swr_meter.vue";
 
 let count = ref(0);
 let grid = null; // DO NOT use ref(null) as proxies GS will break all logic when comparing structures... see https://github.com/gridstack/gridstack.js/issues/2115
@@ -155,6 +156,7 @@ new gridWidget(
     "Rig",
     6,
   ),
+
   new gridWidget(
     dbfs_meter,
     { x: 20, y: 0, w: 4, h: 8 },
@@ -256,7 +258,16 @@ new gridWidget(
     "Stats",
     20,
   ),
-  //Next new widget ID should be 21
+  new gridWidget(
+    grid_swr_meter,
+    { x: 16, y: 0, w: 4, h: 8 },
+    "SWR",
+    true,
+    true,
+    "Rig",
+    21,
+  ),
+  //Next new widget ID should be 22
 ];
 
 
@@ -278,11 +289,6 @@ function set_radio_parameter_rflevel(){
 }
 
 
-
-
-
-
-
 function savePreset()
 {
   settingsStore.local.grid_preset=settingsStore.local.grid_layout;
diff --git a/freedata_gui/src/components/grid/grid_active_broadcasts_vert.vue b/freedata_gui/src/components/grid/grid_active_broadcasts_vert.vue
index e04333c8..5953c0c8 100644
--- a/freedata_gui/src/components/grid/grid_active_broadcasts_vert.vue
+++ b/freedata_gui/src/components/grid/grid_active_broadcasts_vert.vue
@@ -121,7 +121,7 @@ window.addEventListener(
                 role="switch"
                 id="flexSwitchAFK"
                 v-model="state.away_from_key"
-                @click="setAwayFromKey()"
+                @change="setAwayFromKey()"
               />
               <label class="form-check-label" for="flexSwitchAFK"
                 >Away From Key</label
diff --git a/freedata_gui/src/components/grid/grid_swr_meter.vue b/freedata_gui/src/components/grid/grid_swr_meter.vue
new file mode 100644
index 00000000..c8bf4330
--- /dev/null
+++ b/freedata_gui/src/components/grid/grid_swr_meter.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { setActivePinia } from "pinia";
+import pinia from "../../store/index";
+setActivePinia(pinia);
+
+import { useStateStore } from "../../store/stateStore.js";
+const state = useStateStore(pinia);
+</script>
+<template>
+  <div class="progress mb-0 rounded-0 rounded-top" style="height: 22px">
+    <div
+      class="progress-bar progress-bar-striped bg-primary force-gpu"
+      id="swr_level"
+      role="progressbar"
+      :style="{ width: state.swr + '%' }"
+      aria-valuenow="{{state.swr}}"
+      aria-valuemin="0"
+      aria-valuemax="5"
+    ></div>
+    <p
+      class="justify-content-center d-flex position-absolute w-100"
+      id="swr_level_value"
+    >
+      SWR 1:{{ state.swr }}
+    </p>
+  </div>
+  <div class="progress mb-0 rounded-0 rounded-bottom" style="height: 8px">
+    <div
+      class="progress-bar progress-bar-striped bg-warning"
+      role="progressbar"
+      style="width: 1%"
+      aria-valuenow="1"
+      aria-valuemin="0"
+      aria-valuemax="100"
+    ></div>
+    <div
+      class="progress-bar bg-success"
+      role="progressbar"
+      style="width: 89%"
+      aria-valuenow="50"
+      aria-valuemin="0"
+      aria-valuemax="100"
+    ></div>
+    <div
+      class="progress-bar progress-bar-striped bg-warning"
+      role="progressbar"
+      style="width: 20%"
+      aria-valuenow="20"
+      aria-valuemin="0"
+      aria-valuemax="100"
+    ></div>
+    <div
+      class="progress-bar progress-bar-striped bg-danger"
+      role="progressbar"
+      style="width: 29%"
+      aria-valuenow="29"
+      aria-valuemin="0"
+      aria-valuemax="100"
+    ></div>
+  </div>
+</template>