Update SPOT edit page

src/edit/public/css/style.css

@@ -6,7 +6,6 @@ body {
   display: flex;
   gap: 10px;
   margin-bottom: 20px;
-
   padding: 10px;
   /* Make sure padding aligns with other elements */
 }
@@ -16,48 +15,58 @@ body {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 10px;
   border-bottom: 1px solid #ccc;
   flex-direction: column;
   margin: 5px 10px; /* Add horizontal margin to align with title */
-  border: 1px solid #ddd;
-  border-radius: 4px;
+  border: 2px solid var(--accent);
+  background-color: var(--bg-alt);
+  border-radius: 10px;
 }
 
 .match-info {
-  flex-grow: 1;
-  padding-left: 4px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.match-item-top {
   display: flex;
   align-items: center;
+  padding: 10px;
+  gap: 0;
+  width: 100%;
+  font-size: 1.5em;
 }
 
 .trash-button {
   background: none;
   border: none;
   cursor: pointer;
-  font-size: 16px;
-  color: red;
   margin-left: auto;
+  font-size: 1.2em;
+  color: var(--bg-alt);
+  background-color: #ff6666;
   display: flex;
   align-items: center;
+  height: 1.3em;
+  border-radius: 3em;
+  padding: 10px;
+  margin-right: none;
+  padding-right: none;
+}
+
+.trash-button:hover {
+  background-color: #cf5353;
+  color: #e7e7e7;
 }
 
 .filter-input {
   padding: 8px;
-  border: 1px solid #ccc;
+  border: 2px solid var(--accent-alt);
   border-radius: 4px;
+  background-color: var(--bg-alt);
   flex: 1;
 }
 
-.match-item-top {
-  display: flex;
-  align-items: center;
-  padding: 10px;
-  gap: 0;
-  width: 100%;
-  justify-content: flex-start;
-}
-
 .dropdown-button {
   padding: 2px;
   cursor: pointer;
@@ -72,8 +81,9 @@ body {
 .dropdown-content {
   width: 100%;
   padding: 10px;
-  background-color: var(--bg);
-  border-top: 1px solid #ddd;
+  background-color: var(--bg-alt);
+  border-top: 2px solid var(--accent);
+  margin-bottom: 6px;
 }
 
 .dropdown-content ul {
@@ -89,6 +99,7 @@ body {
 .header {
   font: 2em/1em "Cairo";
 }
+
 #title {
   background-color: var(--bg);
   font: 2em/1em "Cairo";

src/edit/public/js/script.js

@@ -1,6 +1,7 @@
 let oldAccessCode;
 (async () => {
   let dataset;
+  let transformers;
   console.log("Loading data...");
 
   function showFade(element) {
@@ -26,8 +27,6 @@ let oldAccessCode;
       tmps = [...tmps, ...qrcodeTmps];
     }
 
-    console.log(tmps);
-
     return tmps;
   }
 
@@ -87,7 +86,7 @@ let oldAccessCode;
     filterContainer.classList.add("filter-container");
 
     const scouterFilter = document.createElement("input");
-    scouterFilter.placeholder = "Filter by Scouter ID";
+    scouterFilter.placeholder = "Filter by Scouter Name";
     scouterFilter.classList.add("filter-input");
 
     const matchFilter = document.createElement("input");
@@ -141,13 +140,28 @@ let oldAccessCode;
         dropdownButton.classList.add("dropdown-button");
         topRow.appendChild(dropdownButton);
 
-        const matchInfo = document.createElement("span");
-        matchInfo.textContent = `Match: ${match.matchNumber}, Robot: ${match.robotNumber}, Scouter: ${match.scouterId}`;
-        matchInfo.classList.add("match-info");
-        topRow.appendChild(matchInfo);
+        // const matchInfo = document.createElement("span");
+        // matchInfo.textContent = `Match: ${match.matchNumber}, Robot: ${match.robotNumber}, Scouter: ${match.scouterId}`;
+        // matchInfo.classList.add("match-info");
+        // topRow.appendChild(matchInfo);
+
+        const matchNum = document.createElement("span");
+        matchNum.textContent = `Match: ${match.matchNumber}`;
+        matchNum.classList.add("match-info");
+        topRow.appendChild(matchNum);
+
+        const matchRobot = document.createElement("span");
+        matchRobot.textContent = `Robot: ${match.robotNumber}`;
+        matchRobot.classList.add("match-info");
+        topRow.appendChild(matchRobot);
+
+        const matchScouter = document.createElement("span");
+        matchScouter.textContent = `Scouter: ${match.scouterId}`;
+        matchScouter.classList.add("match-info");
+        topRow.appendChild(matchScouter);
 
         const trashButton = document.createElement("button");
-        trashButton.textContent = "🗑️";
+        trashButton.textContent = "X";
         trashButton.classList.add("trash-button");
         topRow.appendChild(trashButton);
 
@@ -160,12 +174,11 @@ let oldAccessCode;
         listItem.appendChild(dropdownContent);
 
         // Format and display actionQueue data
+
         if (match.actionQueue && match.actionQueue.length > 0) {
           const actionList = document.createElement("ul");
           match.actionQueue.forEach((action, index) => {
             const actionItem = document.createElement("li");
-            actionItem.textContent = `${index + 1}. ${action.id}`;
-            actionList.appendChild(actionItem);
           });
           dropdownContent.appendChild(actionList);
         } else {

src/edit/views/index.ejs

@@ -45,11 +45,11 @@
       href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;700&family=Saira:wght@300;400;700&family=Tajawal:wght@300;400;700&display=swap"
       rel="stylesheet"
     />
-    <title>Match Performances</title>
+    <title>SPOT - Edit</title>
   </head>
   <body>
     <div id="TMP-container">
-      <div id="title">Match Performances</div>
+      <div id="title">Scouter Data</div>
 
       <ul id="match-list"></ul>
     </div>