Show info about the last connected controller at the bottom of the Connect screen

index.html

@@ -367,9 +367,9 @@
   </div>
 
   <!-- About drift and this utility -->
-  <div id="aboutdrift" style="position: fixed; bottom: 80px; left: 0; right: 0; z-index: 1030; padding: 12px 20px; display: none;">
+  <div id="aboutdrift" style="position: fixed; bottom: 70px; left: 0; right: 0; z-index: 1030; display: none;">
     <div class="container">
-      <div style="border: 2px solid #0d6efd; border-radius: 8px; color: #0d6efd; padding: 12px; background-color: white;">
+      <div class="mb-4" style="border: 2px solid #0d6efd; border-radius: 8px; color: #0d6efd; padding: 12px; background-color: white;">
         <p class="mb-2">
           <i class="fas fa-hand-point-up"></i>&nbsp;&nbsp;
           <span class="ds-i18n">This utility cannot fix stick drift.</span>
@@ -382,6 +382,11 @@
           <span class="ds-i18n">Calibrating without replacing the joysticks may help temporarily, but it may also make the problem worse, with no way to undo it.</span>
         </p>
       </div>
+
+      <div id="lastConnected" class="gap-2">
+        <span class="text-muted"><i class="fas fa-history"></i>&nbsp;&nbsp;<span class="ds-i18n">Last connected</span>:</span>
+        <span id="lastConnectedInfo"></span>
+      </div>
     </div>
   </div>
 

js/core.js

@@ -141,6 +141,7 @@ function gboot() {
 
   $("#offlinebar").show();
   $("#aboutdrift").show();
+  updateLastConnectedInfo();
   navigator.hid.addEventListener("disconnect", handleDisconnectedDevice);
 }
 
@@ -278,8 +279,6 @@ async function continue_connection({data, device}) {
 
     $('#controller-tab').tab('show');
 
-    const model = controllerInstance.getModel();
-
     const numOfSticks = controllerInstance.getNumberOfSticks();
     if(numOfSticks == 2) {
       $("#stick-item-rx").show();
@@ -291,6 +290,30 @@ async function continue_connection({data, device}) {
       throw new Error(`Invalid number of sticks: ${numOfSticks}`);
     }
 
+    const model = controllerInstance.getModel();
+
+    // Save controller info to local storage
+    const lastConnectedInfo = {
+      deviceName: deviceName,
+      timestamp: new Date().toISOString()
+    };
+
+    // Extract info from infoItems
+    if (info.infoItems && Array.isArray(info.infoItems)) {
+      for (const item of info.infoItems) {
+        if (item.key === l("Serial Number")) {
+          lastConnectedInfo.serialNumber = item.value;
+        } else if (item.key === l("Board Model")) {
+          lastConnectedInfo.boardModel = item.value;
+        } else if (item.key === l("Color")) {
+          lastConnectedInfo.color = item.value;
+        }
+      }
+    }
+
+    localStorage.setItem('lastConnectedController', JSON.stringify(lastConnectedInfo));
+    updateLastConnectedInfo();
+
     // Initialize SVG controller based on model
     await init_svg_controller(model);
 
@@ -377,6 +400,39 @@ async function disconnect() {
   $("#onlinebar").hide();
   $("#mainmenu").hide();
   $("#aboutdrift").show();
+  updateLastConnectedInfo();
+}
+
+function updateLastConnectedInfo() {
+  const $lastConnected = $("#lastConnected");
+  const $infoDiv = $("#lastConnectedInfo");
+  const lastConnectedInfo = localStorage.getItem('lastConnectedController');
+
+  if (!lastConnectedInfo) {
+    console.log("No last connected info found.", $lastConnected);
+    $lastConnected.hide();
+    return;
+  }
+
+  try {
+    const info = JSON.parse(lastConnectedInfo);
+
+    const parts = [];
+    if (info.color) parts.push(info.color);
+    if (info.boardModel) parts.push(info.boardModel);
+    if (info.deviceName) parts.push(info.deviceName);
+
+    let text = parts.join(" ");
+    if (info.serialNumber) {
+      text += ", " + l("serial number") + " " + info.serialNumber;
+    }
+
+    $infoDiv.text(text);
+    $lastConnected.show();
+  } catch (error) {
+    console.error("Error parsing last connected info:", error);
+    $lastConnected.hide();
+  }
 }
 
 // Wrapper function for HTML onclick handlers