From 8b233e89c5418d3dcc192a76ac395042526a10ec Mon Sep 17 00:00:00 2001
From: Andreas Kristiansen <6977712+AndreasK79@users.noreply.github.com>
Date: Sun, 12 Jan 2025 15:27:07 +0100
Subject: [PATCH] [Advanced Logbook] Added flag and clickable callsign in map
 popup

---
 application/controllers/Logbookadvanced.php | 14 ++++++++++++++
 assets/css/general.css                      | 15 +++++++++++++++
 assets/js/leaflet/leaflet.css               |  3 ---
 assets/js/sections/logbookadvanced_map.js   |  3 +--
 4 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/application/controllers/Logbookadvanced.php b/application/controllers/Logbookadvanced.php
index c955f89b2..b209f5040 100644
--- a/application/controllers/Logbookadvanced.php
+++ b/application/controllers/Logbookadvanced.php
@@ -456,8 +456,13 @@ class Logbookadvanced extends CI_Controller {
 		if(!$this->load->is_loaded('Qra')) {
 			$this->load->library('Qra');
 		}
+
 		$this->load->model('logbook_model');
 
+		if(!$this->load->is_loaded('DxccFlag')) {
+			$this->load->library('DxccFlag');
+		}
+
 		$data['distance'] = $this->qra->distance($locator1, $locator2, $measurement_base, $qso['COL_ANT_PATH']) . $var_dist;
 		$data['bearing'] = $this->qra->get_bearing($locator1, $locator2, $qso['COL_ANT_PATH']) . "&#186;";
 		$latlng1 = $this->qra->qra2latlong($locator1);
@@ -480,6 +485,8 @@ class Logbookadvanced extends CI_Controller {
 		$data['satname'] = $qso['COL_SAT_NAME'];
 		$data['orbit'] = $qso['orbit'];
 		$data['confirmed'] = ($this->logbook_model->qso_is_confirmed($qso)==true) ? true : false;
+		$data['dxccFlag'] = $this->dxccflag->get($qso['COL_DXCC']);
+		$data['id'] = $qso['COL_PRIMARY_KEY'];
 
 		return $data;
 	}
@@ -488,8 +495,13 @@ class Logbookadvanced extends CI_Controller {
 		if(!$this->load->is_loaded('Qra')) {
 			$this->load->library('Qra');
 		}
+
 		$this->load->model('logbook_model');
 
+		if(!$this->load->is_loaded('DxccFlag')) {
+			$this->load->library('DxccFlag');
+		}
+
 		$latlng1 = $this->qra->qra2latlong($mygrid);
 		$latlng2[0] = $lat;
 		$latlng2[1] = $long;
@@ -509,6 +521,8 @@ class Logbookadvanced extends CI_Controller {
 		$data['satname'] = $qso['COL_SAT_NAME'];
 		$data['orbit'] = $qso['orbit'];
 		$data['confirmed'] = ($this->logbook_model->qso_is_confirmed($qso)==true) ? true : false;
+		$data['dxccFlag'] = $this->dxccflag->get($qso['COL_DXCC']);
+		$data['id'] = $qso['COL_PRIMARY_KEY'];
 
 		return $data;
 	}
diff --git a/assets/css/general.css b/assets/css/general.css
index 92f05cfe2..364faee4e 100644
--- a/assets/css/general.css
+++ b/assets/css/general.css
@@ -1191,4 +1191,19 @@ svg text.month { fill: #AAA; }
 }
 .glanceyear-legend-4 {
 	background-color: #277672;	
+}
+
+.leaflet-popup-content {
+    font-family: "Twemoji Country Flags", sans-serif;
+	min-width: 260px; /* Minimum width to ensure readability */
+}
+
+.big-flag {
+	float: left;
+    font-size: 3em;
+    line-height: 1;
+	white-space: no-wrap;
+	display: flex;
+    align-items: center; /* Vertically aligns the flag and callsign */
+    gap: 0.5em; /* Adds space between the flag and callsign */
 }
\ No newline at end of file
diff --git a/assets/js/leaflet/leaflet.css b/assets/js/leaflet/leaflet.css
index 9ade8dc49..c561aa598 100644
--- a/assets/js/leaflet/leaflet.css
+++ b/assets/js/leaflet/leaflet.css
@@ -261,9 +261,6 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	background: #ddd;
 	outline-offset: 1px;
 	}
-.leaflet-container a {
-	color: #0078A8;
-	}
 .leaflet-zoom-box {
 	border: 2px dotted #38f;
 	background: rgba(255,255,255,0.5);
diff --git a/assets/js/sections/logbookadvanced_map.js b/assets/js/sections/logbookadvanced_map.js
index 94a67f1fa..b123cc754 100644
--- a/assets/js/sections/logbookadvanced_map.js
+++ b/assets/js/sections/logbookadvanced_map.js
@@ -422,8 +422,7 @@ function createContentMessage(qso) {
 function createContentMessageDx(qso) {
 	var table = '<table><tbody>' +
 	'<tr>' +
-	'<td>Callsign</td>' +
-	'<td>' + qso.callsign.replaceAll('0', 'Ø') + '</td>' +
+	'<td colspan=2><div class="big-flag"><div class="flag">' + qso.dxccFlag + '</div><a id="edit_qso" href="javascript:displayQso('+qso.id+')">'+qso.callsign.replaceAll('0', 'Ø')+'</a></div></td>' +
 	'</tr>' +
 	'<tr>' +
 	'<td>Date/Time</td>' +