From 9db2f58f6b6b70bb07ec5c38cf1a04a85fb39feb Mon Sep 17 00:00:00 2001
From: DJ2LS <dj2ls@proton.me>
Date: Thu, 2 May 2024 11:55:34 +0200
Subject: [PATCH] added station info

---
 freedata_gui/src/components/chat.vue          |   4 +-
 .../src/components/main_left_navbar.vue       |  13 ++
 freedata_gui/src/components/main_modals.vue   | 174 +++++++++++++++++-
 freedata_gui/src/components/settings_exp.vue  |   1 +
 freedata_gui/src/components/settings_web.vue  |   1 +
 freedata_gui/src/js/api.js                    |   3 +
 freedata_server/message_system_db_station.py  |  28 +++
 freedata_server/server.py                     |  21 ++-
 8 files changed, 234 insertions(+), 11 deletions(-)

diff --git a/freedata_gui/src/components/chat.vue b/freedata_gui/src/components/chat.vue
index 4f8588cb..e6ed0b97 100644
--- a/freedata_gui/src/components/chat.vue
+++ b/freedata_gui/src/components/chat.vue
@@ -145,7 +145,7 @@ async function getStationInfoByCallsign() {
   <div
     class="modal fade"
     ref="modalEle"
-    id="stationInfoModal"
+    id="dxStationInfoModal"
     tabindex="-1"
     aria-hidden="true"
   >
@@ -200,7 +200,7 @@ async function getStationInfoByCallsign() {
         <nav class="navbar sticky-top z-0 bg-body-tertiary border-bottom p-1">
           <button
             class="btn btn-sm btn-outline-secondary ms-2 border-0"
-            data-bs-target="#stationInfoModal"
+            data-bs-target="#dxStationInfoModal"
             data-bs-toggle="modal"
             @click="getStationInfoByCallsign()"
           >
diff --git a/freedata_gui/src/components/main_left_navbar.vue b/freedata_gui/src/components/main_left_navbar.vue
index 483c0396..8d60566f 100644
--- a/freedata_gui/src/components/main_left_navbar.vue
+++ b/freedata_gui/src/components/main_left_navbar.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import main_modem_healthcheck from "./main_modem_healthcheck.vue";
+
 import { getOverallHealth } from "../js/eventHandler.js";
 import { getFreedataMessages } from "../js/api";
 import { getRemote } from "../store/settingsStore.js";
@@ -101,4 +102,16 @@ function toggleTextVisibility() {
       <span class="ms-2" v-if="isTextVisible">Settings</span>
     </a>
   </div>
+
+ <button
+    class="btn btn-outline-secondary border-0 left-bottom-btn position-fixed bottom-0 mb-3 rounded-3 ms-1"
+    data-bs-html="false"
+    data-bs-toggle="modal"
+    data-bs-target="#stationInfoModal"
+    title="Set station info"
+  >
+    <i class="bi bi-person-circle h3"></i>
+    <span class="ms-2" v-if="isTextVisible">Station</span>
+  </button>
+
 </template>
diff --git a/freedata_gui/src/components/main_modals.vue b/freedata_gui/src/components/main_modals.vue
index 99f9f849..2abae639 100644
--- a/freedata_gui/src/components/main_modals.vue
+++ b/freedata_gui/src/components/main_modals.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 // @ts-nocheck
 // reason for no check is, that we have some mixing of typescript and chart js which seems to be not to be fixed that easy
+import { ref, onMounted } from 'vue';
+
 import { setActivePinia } from "pinia";
 import pinia from "../store/index";
 setActivePinia(pinia);
@@ -8,8 +10,13 @@ setActivePinia(pinia);
 import { useChatStore } from "../store/chatStore.js";
 const chat = useChatStore(pinia);
 
+import { useStateStore } from "../store/stateStore.js";
+const state = useStateStore(pinia);
+
+import { settingsStore } from "../store/settingsStore.js";
+
 import { settingsStore as settings, onChange } from "../store/settingsStore.js";
-import { sendModemTestFrame } from "../js/api";
+import { sendModemTestFrame, setStationInfo, getStationInfo } from "../js/api";
 import main_startup_check from "./main_startup_check.vue";
 import { newMessage, deleteCallsignFromDB } from "../js/messagesHandler.ts";
 
@@ -110,6 +117,78 @@ const transmissionSpeedChartDataMessageInfo = computed(() => ({
     },
   ],
 }));
+
+
+
+
+
+
+const stationInfoData = ref({
+  name: '',
+  city: '',
+  age: '',
+  radio: '',
+  antenna: '',
+  email: '',
+  website: '',
+  socialMedia: {
+    facebook: '',
+    'twitter-x': '', // Use twitter-x to correspond to the Twitter X icon
+    mastodon: '',
+    instagram: '',
+    linkedin: '',
+    youtube: '',
+    tiktok: ''
+  },
+  comments: ''
+});
+
+// Function to handle updates and save changes
+function updateStationInfo() {
+  console.log('Updating station info:', stationInfoData.value);
+  let mycall = settingsStore.remote.STATION.mycall;
+  let myssid = settingsStore.remote.STATION.myssid;
+  let fullCall = `${mycall}-${myssid}`;
+  setStationInfo(fullCall, stationInfoData.value)
+}
+
+
+// Fixme: this is a dirty hack. Can we make this more VueJS like?
+onMounted(() => {
+  const modalElement = document.getElementById('stationInfoModal');
+  modalElement.addEventListener('show.bs.modal', fetchStationInfo);
+});
+
+async function fetchStationInfo(){
+    let mycall = settingsStore.remote.STATION.mycall;
+      let myssid = settingsStore.remote.STATION.myssid;
+      let fullCall = `${mycall}-${myssid}`;
+let result = await getStationInfo(fullCall);
+let info = result.info;
+    stationInfoData.value = {
+      name: info.name || '',
+      city: info.city || '',
+      age: info.age || '',
+      radio: info.radio || '',
+      antenna: info.antenna || '',
+      email: info.email || '',
+      website: info.website || '',
+      socialMedia: {
+        facebook: info.socialMedia.facebook || '',
+        'twitter-x': info.socialMedia['twitter-x'] || '',
+        mastodon: info.socialMedia.mastodon || '',
+        instagram: info.socialMedia.instagram || '',
+        linkedin: info.socialMedia.linkedin || '',
+        youtube: info.socialMedia.youtube || '',
+        tiktok: info.socialMedia.tiktok || ''
+      },
+      comments: info.comments || ''
+    };
+
+}
+
+
+
 </script>
 
 <template>
@@ -1234,6 +1313,8 @@ const transmissionSpeedChartDataMessageInfo = computed(() => ({
     </div>
   </div>
 
+
+
   <!-- AUDIO MODAL -->
   <div
     class="modal fade"
@@ -1306,4 +1387,95 @@ const transmissionSpeedChartDataMessageInfo = computed(() => ({
       </div>
     </div>
   </div>
+
+  <!-- STATION INFO MODAL -->
+<div class="modal fade" id="stationInfoModal" tabindex="-1" aria-labelledby="stationInfoModal" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-scrollable">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h1 class="modal-title fs-5 ">
+            {{ settingsStore.remote.STATION.mycall }}
+                -
+            {{settingsStore.remote.STATION.myssid }}
+        </h1>
+
+        <span class="badge text-bg-secondary ms-3">{{settingsStore.remote.STATION.mygrid }}</span>
+
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+
+      <div class="alert alert-primary" role="alert">
+  <strong> Please note:</strong> This is a preview to show you the direction, FreeDATA is going somewhen. For now you can save only your personal data, so we can optimize and improve the database.  In future this data can be requested by a remote station.
+</div>
+
+
+        <!-- Name -->
+          <div class="input-group mb-1">
+            <span class="input-group-text"><i class="bi bi-person-fill"></i></span>
+            <input type="text" class="form-control" placeholder="Name" v-model="stationInfoData.name" >
+          </div>
+
+          <!-- City -->
+          <div class="input-group mb-1">
+            <span class="input-group-text"><i class="bi bi-geo-alt-fill"></i></span>
+            <input type="text" class="form-control" placeholder="City" v-model="stationInfoData.city" >
+          </div>
+
+            <!-- Age -->
+          <div class="input-group mb-3">
+            <span class="input-group-text"><i class="bi bi-person-fill"></i></span>
+            <input type="text" class="form-control" placeholder="Age" v-model="stationInfoData.age" >
+          </div>
+
+          <!-- Radio -->
+          <div class="input-group mb-1">
+            <span class="input-group-text"><i class="bi bi-broadcast-pin"></i></span>
+            <input type="text" class="form-control" placeholder="Radio" v-model="stationInfoData.radio" >
+          </div>
+
+          <!-- Antenna -->
+          <div class="input-group mb-3">
+            <span class="input-group-text"><i class="bi bi-cone-striped"></i></span>
+            <input type="text" class="form-control" placeholder="Antenna" v-model="stationInfoData.antenna" >
+          </div>
+
+          <!-- Website -->
+          <div class="input-group mb-1">
+            <span class="input-group-text"><i class="bi bi-globe"></i></span>
+            <input type="url" class="form-control" placeholder="Website" v-model="stationInfoData.website" >
+          </div>
+
+          <!-- Email -->
+          <div class="input-group mb-3">
+            <span class="input-group-text"><i class="bi bi-envelope-fill"></i></span>
+            <input type="email" class="form-control" placeholder="Email" v-model="stationInfoData.email" >
+          </div>
+
+          <!-- Social Media Inputs -->
+          <div class="mb-3">
+            <div v-for="(url, platform) in stationInfoData.socialMedia">
+              <div class="input-group mb-1" :key="platform">
+                <span class="input-group-text"><i :class="`bi bi-${platform}`"></i></span>
+                <input type="url" class="form-control" :placeholder="`${platform.charAt(0).toUpperCase() + platform.slice(1)} URL`" v-model="stationInfoData.socialMedia[platform]" >
+              </div>
+            </div>
+          </div>
+
+          <!-- Comments -->
+          <div class="mb-3">
+            <label class="input-group-text" for="comments"><i class="bi bi-textarea-resize"></i> Comments</label>
+            <textarea class="form-control" rows="3" v-model="stationInfoData.comments" ></textarea>
+          </div>
+
+      </div>
+      <div class="modal-footer">
+
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-primary" @click="updateStationInfo">Save changes</button>
+      </div>
+    </div>
+  </div>
+</div>
+
 </template>
diff --git a/freedata_gui/src/components/settings_exp.vue b/freedata_gui/src/components/settings_exp.vue
index dec7e60f..b6756bec 100644
--- a/freedata_gui/src/components/settings_exp.vue
+++ b/freedata_gui/src/components/settings_exp.vue
@@ -19,6 +19,7 @@ import { settingsStore as settings } from "../store/settingsStore.js";
           id="enableMeshSwitch"
           @change="setConfig"
           v-model="settings.remote.MESH.enable_protocol"
+          disabled
         />
         <label class="form-check-label" for="enableMeshSwitch"
           >experimental! REALLY!</label
diff --git a/freedata_gui/src/components/settings_web.vue b/freedata_gui/src/components/settings_web.vue
index 7960d102..7dfb7c07 100644
--- a/freedata_gui/src/components/settings_web.vue
+++ b/freedata_gui/src/components/settings_web.vue
@@ -34,6 +34,7 @@ import { settingsStore as settings, onChange } from "../store/settingsStore.js";
           id="ExplorerStatsSwitch"
           @change="onChange"
           v-model="settings.remote.STATION.enable_stats"
+          disabled
         />
         <label class="form-check-label" for="ExplorerStatsSwitch"
           >Publish stats</label
diff --git a/freedata_gui/src/js/api.js b/freedata_gui/src/js/api.js
index 45fbfc2f..678ce821 100644
--- a/freedata_gui/src/js/api.js
+++ b/freedata_gui/src/js/api.js
@@ -204,3 +204,6 @@ export async function getBeaconDataByCallsign(callsign) {
 export async function getStationInfo(callsign) {
   return await apiGet(`/freedata/station/${callsign}`);
 }
+export async function setStationInfo(callsign, info) {
+  return await apiPost(`/freedata/station/${callsign}`, info);
+}
diff --git a/freedata_server/message_system_db_station.py b/freedata_server/message_system_db_station.py
index 5dff7029..7cd39427 100644
--- a/freedata_server/message_system_db_station.py
+++ b/freedata_server/message_system_db_station.py
@@ -32,3 +32,31 @@ class DatabaseManagerStations(DatabaseManager):
 
         finally:
             session.remove()
+
+    def update_station(self, callsign, new_info):
+        """
+        Updates the information of a station identified by its callsign.
+
+        Args:
+            callsign (str): The callsign of the station to update.
+            new_info (str): The new information to store in the 'info' column.
+
+        Returns:
+            bool: True if the update was successful, False otherwise.
+        """
+        session = self.get_thread_scoped_session()
+        try:
+            station = session.query(Station).filter_by(callsign=callsign).first()
+            if station:
+                station.info = new_info
+                session.commit()
+                return True
+            else:
+                self.log(f"No station found with callsign {callsign}", isWarning=True)
+                return False
+        except SQLAlchemyError as e:
+            session.rollback()
+            self.log(f"Failed to update station {callsign} with error: {e}", isError=True)
+            return False
+        finally:
+            session.remove()
diff --git a/freedata_server/server.py b/freedata_server/server.py
index bb76b830..14611e55 100644
--- a/freedata_server/server.py
+++ b/freedata_server/server.py
@@ -272,11 +272,11 @@ def get_post_freedata_message():
     if request.method in ['GET']:
         result = DatabaseManagerMessages(app.event_manager).get_all_messages_json()
         return api_response(result)
-    if request.method in ['POST']:
+    elif request.method in ['POST']:
         enqueue_tx_command(command_message_send.SendMessageCommand, request.json)
         return api_response(request.json)
-
-    api_abort('Error executing command...', 500)
+    else:
+        api_abort('Error executing command...', 500)
 
 @app.route('/freedata/messages/<string:message_id>', methods=['GET', 'POST', 'PATCH', 'DELETE'])
 def handle_freedata_message(message_id):
@@ -317,11 +317,16 @@ def get_beacons_by_callsign(callsign):
     beacons = DatabaseManagerBeacon(app.event_manager).get_beacons_by_callsign(callsign)
     return api_response(beacons)
 
-@app.route('/freedata/station/<string:callsign>', methods=['GET'])
-def get_station_info_by_callsign(callsign):
-    station = DatabaseManagerStations(app.event_manager).get_station(callsign)
-    print(station)
-    return api_response(station)
+@app.route('/freedata/station/<string:callsign>', methods=['GET', 'POST'])
+def get_set_station_info_by_callsign(callsign):
+    if request.method in ['GET']:
+        station = DatabaseManagerStations(app.event_manager).get_station(callsign)
+        return api_response(station)
+    elif request.method in ['POST']:
+        result = DatabaseManagerStations(app.event_manager).update_station(callsign, new_info=request.json)
+        return api_response(result)
+    else:
+        api_abort('Error using endpoint...', 500)
 
 # Event websocket
 @sock.route('/events')