* Sat Jul 27 2024 Brian Read <brianr@koozali.org> 11.0.0-11.sme

- Add in flag icon indication of locale [SME: 12706]

clog

@@ -1,2 +1,2 @@
-* Fri Jul 26 2024 Brian Read <brianr@koozali.org> 11.0.0-10.sme
-- fix navigation2.conf to more correctly translate menus [SME: 12714]
+* Sat Jul 27 2024 Brian Read <brianr@koozali.org> 11.0.0-11.sme
+- Add in flag icon indication of locale [SME: 12706]

root/etc/e-smith/templates/usr/share/smanager/themes/default/public/css/sme_core.css/50body

@@ -230,6 +230,14 @@ hr.sme-copyrightbar {
     font-size: 10px; 
 }
 
+#flag-icon {
+    font-size: 20px;
+    float: right;
+    margin-top: 0.67em;
+    margin-right: 1%;
+}
+
+
 /*These style definitions were found int he old css file (manager.css)
 but don't seem to ever be referenced in the code.  They're here
 for reference.

root/etc/e-smith/templates/usr/share/smanager/themes/default/public/js/flag-by-locale.js

@@ -0,0 +1,27 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const flagContainer = document.getElementById('flag-container');
+
+  // Function to get the browser's locale
+  function getBrowserLocale() {
+    return navigator.language || navigator.userLanguage;
+  }
+
+  // Function to map locale to country code
+  function getCountryCodeFromLocale(locale) {
+    const localeParts = locale.split('-');
+    return localeParts.length > 1 ? localeParts[1] : localeParts[0];
+  }
+
+  // Function to create and display the flag icon
+  function displayFlagIcon(countryCode) {
+    const flagIcon = document.createElement('span');
+    flagIcon.className = `flag-icon flag-icon-${countryCode.toLowerCase()}`;
+    flagIcon.id = 'flag-icon';
+    flagContainer.appendChild(flagIcon);
+  }
+
+  // Main logic
+  const locale = getBrowserLocale();
+  const countryCode = getCountryCodeFromLocale(locale);
+  displayFlagIcon(countryCode);
+});

root/usr/share/smanager/themes/default/public/js/flag-by-locale.js

@@ -0,0 +1,63 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const flagContainer = document.getElementById('flag-container');
+
+  // Function to get the browser's locale
+  function getBrowserLocale() {
+    return navigator.language || navigator.userLanguage;
+  }
+
+  // Function to map locale to country code
+  function getCountryCodeFromLocale(locale) {
+    const localeParts = locale.split('-');
+    return localeParts.length > 1 ? localeParts[1] : localeParts[0];
+  }
+
+  // Function to fetch country names from a CDN
+  async function fetchCountryNames() {
+    const response = await fetch('https://restcountries.com/v3.1/all');
+    const countries = await response.json();
+    const countryNames = {};
+    for (const country of countries) {
+      const code = country.cca2.toLowerCase(); // Country code (ISO 3166-1 alpha-2)
+      const name = country.name.common; // Common name of the country
+      countryNames[code] = name;
+    }
+    return countryNames;
+  }
+
+  // Function to create and display the flag icon
+  function displayFlagIcon(countryCode, countryName) {
+    const flagIcon = document.createElement('span');
+    flagIcon.className = `flag-icon flag-icon-${countryCode.toLowerCase()}`;
+    flagIcon.id = 'flag-icon';
+    flagIcon.title = countryName; // Set the title for the tooltip
+
+    // If you want a custom tooltip instead (uncomment the lines below):
+    /*
+    const tooltip = document.createElement('span');
+    tooltip.className = 'tooltip';
+    tooltip.innerText = countryName;
+    flagIcon.appendChild(tooltip);
+
+    flagIcon.addEventListener('mouseenter', () => {
+      tooltip.style.display = 'block';
+    });
+
+    flagIcon.addEventListener('mouseleave', () => {
+      tooltip.style.display = 'none';
+    });
+    */
+
+    flagContainer.appendChild(flagIcon);
+  }
+
+  // Main logic
+  (async () => {
+    const locale = getBrowserLocale();
+    const countryCode = getCountryCodeFromLocale(locale);
+    const countryNames = await fetchCountryNames(); // Fetch country names
+
+    const countryName = countryNames[countryCode.toLowerCase()] || 'Unknown Country'; // Get the country name
+    displayFlagIcon(countryCode, countryName); // Display the flag with country name
+  })();
+});

root/usr/share/smanager/themes/default/templates/layouts/default.html.ep

@@ -31,7 +31,9 @@
 	%= javascript '/js/vfs_fonts.js'
 	%= javascript '/js/buttons.html5.min.js'
 	%= javascript '/js/buttons.print.min.js'
+	%= javascript '/js/flag-by-locale.js'
 
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.5.0/css/flag-icon.min.css">
 	%= stylesheet '/css/sme-jquery-overrides.css'
 
 </head>

root/usr/share/smanager/themes/default/templates/partials/_header.html.ep

@@ -1,27 +1,30 @@
 <div id="header2" class="hd2">
     <div id="h2l1"> 
-	<div id="h2e11">
-	    <a target='_blank' href="http://www.koozali.org"><img src="images/smeserver_logo.jpg" height="40" alt="SME Server"></a>
-	</div>
-<!--        <div id="h2e12"><h5><a href="initial">Server Manager</a>
-            <a href="/server-manager" target='_blank'>&nbsp &nbsp (Prev SM)</a></h5> -->           
-        <div id="h2e12" style="float:right;"><br><a href="/server-manager" target='_blank'><button style="background-color:#98d36e;font-weight:bold;color:#063;">Legacy SM</button></a></div>
+		<div id="h2e11">
+			<a target='_blank' href="http://www.koozali.org"><img src="images/smeserver_logo.jpg" height="40" alt="SME Server"></a>
+		</div>     
+        <div id="h2e12" style="float:right;">
+			<br><a href="/server-manager" target='_blank'><button style="background-color:#98d36e;font-weight:bold;color:#063;">Legacy SM</button></a>
+        </div>
+		<div id="flag-container">
+			<!-- The flag icon will be inserted here -->
+		</div>
     </div>
-
     <div id="h2l2" class="infobar"> 
-	<div id="h2e21">
-        <b>
-        <%= session 'SystemName' %>@<%= session 'DomainName' %></b> 
+		<div id="h2e21">
+			<b>
+			<%= session 'SystemName' %>@<%= session 'DomainName' %></b> 
+			</div>
+				<div id="h2e22">
+				  <a target="_parent" href="manual">&nbsp;&nbsp;<b> ? </b>&nbsp;&nbsp;</a>&nbsp;
+			</div>
+			<div id="h2e23">
+		%    if ( not defined $c->session->{username} ) {
+				  <a target="_parent" href="login"><b>Login</b></a>&nbsp;
+		%    } else {
+				  <a target="_parent" href="logout"><b><%= $c->session->{username} %> Logout</b></a>&nbsp;
+		%    }
+			</div>
+		</div>
 	</div>
-        <div id="h2e22">
-          <a target="_parent" href="manual">&nbsp;&nbsp;<b> ? </b>&nbsp;&nbsp;</a>&nbsp;
-	</div>
-	<div id="h2e23">
-%    if ( not defined $c->session->{username} ) {
-          <a target="_parent" href="login"><b>Login</b></a>&nbsp;
-%    } else {
-          <a target="_parent" href="logout"><b><%= $c->session->{username} %> Logout</b></a>&nbsp;
-%    }
-	</div>
-    </div>
 </div>

smeserver-manager.spec

@@ -2,7 +2,7 @@ Summary: Sme server  navigation module : manager 2
 %define name smeserver-manager
 Name: %{name}
 %define version 11.0.0
-%define release 10
+%define release 11
 Version: %{version}
 Release: %{release}%{?dist}
 License: GPL
@@ -108,6 +108,9 @@ true
 %defattr(-,root,root)
 
 %changelog
+* Sat Jul 27 2024 Brian Read <brianr@koozali.org> 11.0.0-11.sme
+- Add in flag icon indication of locale [SME: 12706]
+
 * Fri Jul 26 2024 Brian Read <brianr@koozali.org> 11.0.0-10.sme
 - fix navigation2.conf to more correctly translate menus [SME: 12714]