From d606e3e33a35d9eb8489060db7456b658face6f8 Mon Sep 17 00:00:00 2001
From: Jan <jan.weber@avatic.de>
Date: Sun, 4 Jan 2026 19:30:34 +0100
Subject: [PATCH] Add modal for node details with map view and country flag
 rendering, enhance table interactions with row-click handling

---
 .../src/components/layout/config/Nodes.vue    | 69 ++++++++++++++++++-
 1 file changed, 67 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/components/layout/config/Nodes.vue b/src/frontend/src/components/layout/config/Nodes.vue
index b308524..e9dedd0 100644
--- a/src/frontend/src/components/layout/config/Nodes.vue
+++ b/src/frontend/src/components/layout/config/Nodes.vue
@@ -1,8 +1,26 @@
 <template>
   <div class="nodes-container">
+
+    <modal :state="showModal">
+      <div class="node-modal-container">
+        <div class="node-header">
+          <h3 class="sub-header"> {{ node.name }}
+          </h3>
+          <icon-button icon="x" @click="showModal = false"></icon-button>
+        </div>
+        <div class="node-body">
+          <div class="node-address"><flag :iso="node.country.iso_code" />{{ node.address }}</div>
+          <div class="supplier-map" v-if="node.location">
+            <open-street-map-embed :coordinates="node.location" :zoom="5" width="100%" height="300px"
+                                   custom-filter="grayscale(0.8) sepia(0.5) hue-rotate(180deg) saturate(0.5) brightness(1.0)"></open-street-map-embed>
+          </div>
+        </div>
+      </div>
+    </modal>
+
     <table-view ref="tableViewRef" :data-source="fetch" :columns="nodeColumns" :page="pagination.page"
                 :page-size="pageSize" :page-count="pagination.pageCount"
-                :total-count="pagination.totalCount"></table-view>
+                :total-count="pagination.totalCount" @row-click="showDetails" :mouse-over="true"></table-view>
 
   </div>
 
@@ -12,6 +30,12 @@
 import TableView from "@/components/UI/TableView.vue";
 import {mapStores} from "pinia";
 import {useNodeStore} from "@/store/node.js";
+import Modal from "@/components/UI/Modal.vue";
+import ErrorModal from "@/components/layout/error/ErrorModal.vue";
+import TabContainer from "@/components/UI/TabContainer.vue";
+import IconButton from "@/components/UI/IconButton.vue";
+import OpenStreetMapEmbed from "@/components/UI/OpenStreetMapEmbed.vue";
+import Flag from "@/components/UI/Flag.vue";
 
 export default {
   name: "Nodes",
@@ -28,7 +52,7 @@ export default {
       }
     }
   },
-  components: {TableView},
+  components: {Flag, OpenStreetMapEmbed, IconButton, TabContainer, ErrorModal, Modal, TableView},
   computed: {
     ...mapStores(useNodeStore),
   },
@@ -40,10 +64,16 @@ export default {
       await this.nodeStore.setQuery(query);
       this.pagination = this.nodeStore.pagination;
       return this.nodeStore.nodes;
+    },
+    showDetails(node) {
+      this.node = node;
+      this.showModal = true;
     }
   },
   data() {
     return {
+      showModal: false,
+      node: null,
       nodeColumns: [
         {
           key: 'external_mapping_id',
@@ -95,4 +125,39 @@ export default {
   padding: 2.4rem;
 }
 
+
+.node-modal-container {
+  height: 40rem;
+  width: 60rem;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden; /* Verhindert Overflow */
+}
+
+.node-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-shrink: 0; /* Header soll nicht schrumpfen */
+  padding-bottom: 1.6rem; /* Optional: etwas Abstand */
+}
+
+.node-body {
+  flex: 1; /* Nimmt den restlichen Platz ein */
+  min-height: 0; /* Wichtig für Flexbox-Scrolling */
+  overflow: hidden; /* Container selbst soll nicht scrollen */
+  display: flex;
+  flex-direction: column;
+  gap: 1.6rem;
+}
+
+.node-address {
+  display: flex;
+  gap: 0.8rem;
+
+  color: #6b7280;
+  font-size: 1.4rem;
+  line-height: 1.4;
+}
+
 </style>
\ No newline at end of file