* Tue Jun 24 2025 Brian Read <brianr@koozali.org> 11.0.0-95.sme

- Add clock ticker to datetime panel [SME: 13054]
- Add Test Server button for ntp server [SME: 13048]
- Add checking that date is fully valid [SME: 13055]

root/usr/share/smanager/themes/default/public/css/datetime.css

@@ -7,7 +7,7 @@
 .datetime-label-col {
   background: #e8f3e2; /* light green */
   padding: 1em 0em 0em 0em;
-  min-width: 192px;
+  min-width: 30%;
   display: flex;
   align-items: flex-start;
   justify-content: flex-end;
@@ -16,7 +16,7 @@
 }
 
 .datetime-label {
-  display: block;
+	display:inline-flex;
 }
 
 .datetime-fields-col {
@@ -26,4 +26,26 @@
   border: 1px solid #ccc;
   border-left: none;
   border-radius: 0 4px 4px 0;
-}
+}
+
+.datetime-clock {
+	min-width: 20em;
+	display:inline-flex;
+	border:0px;
+	padding:5px;
+}
+
+.datetime-clock-label {
+	background-color:#e8f3e2;
+	display:inline-flex;
+	width:30%;
+	font-weight:bold;
+	text-align:right;
+	
+	
+}
+
+.ntp-test-result { font-weight: bold; }
+.ntp-test-success { color: green; }
+.ntp-test-error   { color: red; }
+.ntp-test-wait    { color: #333; }

root/usr/share/smanager/themes/default/public/js/datetime.js

@@ -15,4 +15,87 @@ document.addEventListener('DOMContentLoaded', function() {
 
   select.addEventListener('change', toggleSections);
   toggleSections(); // Set initial state
+});
+
+document.addEventListener('DOMContentLoaded', function() {
+  // Parse the initial server time from the input value
+  const clockElement = document.getElementById('real-time-clock');
+  if (!clockElement) return;
+
+  // Get the initial server time from the input's value
+  let serverTime = new Date(clockElement.value.replace(' ', 'T'));
+
+  function updateDateTime() {
+    // Format the date/time string as desired
+    const daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+    const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+
+    const dayOfWeek = daysOfWeek[serverTime.getDay()];
+    const month = months[serverTime.getMonth()];
+    const day = serverTime.getDate();
+    const year = serverTime.getFullYear();
+
+    let hours = serverTime.getHours();
+    const ampm = hours >= 12 ? 'PM' : 'AM';
+    hours = hours % 12 || 12;
+
+    const minutes = serverTime.getMinutes().toString().padStart(2, '0');
+    const seconds = serverTime.getSeconds().toString().padStart(2, '0');
+
+    const dateTimeString = `${dayOfWeek}, ${month} ${day}, ${year} ${hours}:${minutes}:${seconds} ${ampm}`;
+    clockElement.value = dateTimeString;
+
+    // Advance serverTime by one second
+    serverTime.setSeconds(serverTime.getSeconds() + 1);
+  }
+
+  updateDateTime();
+  setInterval(updateDateTime, 1000);
+});
+
+document.addEventListener('DOMContentLoaded', function() {
+  const btn = document.getElementById('test-ntp-btn');
+  const input = document.getElementById('ntpserver');
+  const result = document.getElementById('ntp-test-result');
+
+  btn.addEventListener('click', function() {
+    const server = input.value.trim();
+    result.className = 'ntp-test-result'; // reset
+
+    if (!server) {
+      result.textContent = "Please enter a server address.";
+      result.classList.add('ntp-test-error');
+      return;
+    }
+    result.textContent = "Testing...";
+    result.classList.add('ntp-test-wait');
+
+    fetch('/smanager/datetimet', {
+      method: 'POST',
+      headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify({ ntpserver: server })
+    })
+    .then(response => {
+      if (!response.ok) {
+        // HTTP error, e.g., 404, 500
+        throw new Error(`HTTP error: ${response.status} ${response.statusText}`);
+      }
+      return response.json();
+    })
+    .then(data => {
+      result.className = 'ntp-test-result'; // reset
+      if (data.success) {
+        result.textContent = `Server time: ${data.time}`;
+        result.classList.add('ntp-test-success');
+      } else {
+        result.textContent = `Error: ${data.error}`;
+        result.classList.add('ntp-test-error');
+      }
+    })
+    .catch(error => {
+      // Network error or thrown HTTP error
+      result.className = 'ntp-test-result ntp-test-error';
+      result.textContent = `Request failed: ${error.message}`;
+    });
+  });
 });

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

@@ -27,7 +27,15 @@
 		<h1><%= $title %></h1><br>
 		%= $modul
 		<% my $btn = l('SAVE'); %>
-		<p>
+		<br /><br />
+		<span>
+			%= label_for 'real-time-clock' => $c->l('dat_The_time_is_currently'), class => 'datetime-clock-label'
+		</span><span class=data2>
+<!--
+			<div id="real-time-clock"></div>
+-->
+			%= text_field 'clock', id => 'real-time-clock', readonly => 'readonly', class => 'datetime-clock' , value => $dat_data->{currentdatetime}
+		</span>
 		% if ($dat_data->{ntpstatus} eq 'disabled') {
 			<div class='datetime-set-ntp'>
 				%=l 'dat_NTP_ENABLE_DESC'
@@ -68,7 +76,9 @@
 						<div class=datetime-fields-col>
 							% my $server_check = '^([a-zA-Z0-9][a-zA-Z0-9\.\-]{0,253}[a-zA-Z0-9]|(\d{1,3}\.){3}\d{1,3})$';
 							% param 'ntpserver' => $dat_data->{ntpserver} unless param 'ntpserver';
-							%= text_field ntpserver => placeholder => 'e.g. smeserver.pool.ntp.org',id => 'ntpserver', pattern => $server_check, title => 'Enter a valid hostname or IPv4 address',required => 'required'
+							%= text_field ntpserver => placeholder => 'e.g. smeserver.pool.ntp.org', id => 'ntpserver', pattern => $server_check, title => 'Enter a valid hostname or IPv4 address', required => 'required'
+							<button type="button" id="test-ntp-btn" class="btn btn-primary ml-2">Test Server</button>
+							<span id="ntp-test-result" class="ntp-test-result ml-2"></span>
 						</div>
 					</div>
 				</div>