From d04c1bd2c5f63e407acd77ce0d202e6013e36132 Mon Sep 17 00:00:00 2001
From: Alice Sedgwick <alice.sedgwick@spirirobotics.com>
Date: Mon, 18 Nov 2024 15:51:17 -0500
Subject: [PATCH] Youssof explained a dropdown

---
 ui/general/assets/icons/drone-icon.svg |  2 +-
 ui/general/health.html                 | 69 ++------------------------
 ui/general/health.js                   | 42 +++-------------
 3 files changed, 13 insertions(+), 100 deletions(-)

diff --git a/ui/general/assets/icons/drone-icon.svg b/ui/general/assets/icons/drone-icon.svg
index 6ab5781..5f510a9 100644
--- a/ui/general/assets/icons/drone-icon.svg
+++ b/ui/general/assets/icons/drone-icon.svg
@@ -1 +1 @@
-<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 122.88 59.81" style="enable-background:new 0 0 122.88 59.81" xml:space="preserve"><style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd;}</style><g><path class="st0" d="M20.72,8.03V4.92L3.79,6.54C0.53,6.9-0.14,5.78,0.02,4.59C0.43,1.64,2,2.33,4.25,2.45l16.46,0.83V1.16 c0-0.64,0.52-1.16,1.16-1.16h0.98c0.64,0,1.16,0.52,1.16,1.16v2.11L40.52,1.8c2.25-0.12,3.82-0.81,4.23,2.15 c0.16,1.18-0.51,2.31-3.77,1.94L24.03,4.92v3.11h1.23c0.88,0,1.6,0.72,1.6,1.6v5.77h69.15V9.68c0-0.9,0.74-1.65,1.65-1.65h1.17 V4.92L81.9,6.54c-3.27,0.37-3.93-0.76-3.77-1.94c0.41-2.96,1.98-2.26,4.23-2.15l16.46,0.83V1.16c0-0.64,0.52-1.16,1.16-1.16h0.98 c0.64,0,1.16,0.52,1.16,1.16v2.11l16.49-1.47c2.25-0.12,3.82-0.81,4.23,2.15c0.16,1.18-0.51,2.31-3.77,1.94l-16.95-0.97v3.11h1.23 c0.88,0,1.6,0.72,1.6,1.6v5.77h13.85c1.67,0,3.04,1.37,3.04,3.04l0,0c0,1.67-1.37,3.04-3.04,3.04H93.85 c-2.32,3.29-8.94,4.56-18.66,4.38c3.32,3.1,6.52,6.6,9.54,10.77c4.01,5.39,7.38,11.07,9.26,17.38c0.65,7.28-6.69,6.05-9.07,4.63 c-3.49-0.44-3.48-6.04-3.76-11.22c-0.25-4.57-0.74-8.99-4.24-12.35c-1.73-1.66-4.14-3.08-7.39-4.2c-0.77,0.74-1.7,1.41-2.77,2.02 c-5,2.83-9.66,3.61-13.55-2.49c-2.27,0.67-4.22,1.69-5.87,3.03c-6.69,5.4-6.44,12.92-6.78,21.15c-0.82,5.72-13.35,8.46-12.33-0.91 c0.2-1.86,1.05-3.54,2.23-5.13c4.62-8.98,9.98-16.78,16.59-22.55c-8.48,0.18-15.05-1.06-18.7-4.5H3.13c-1.67,0-3.04-1.37-3.04-3.04 l0,0c0-1.67,1.37-3.04,3.04-3.04H17.9V9.68c0-0.9,0.74-1.65,1.65-1.65H20.72L20.72,8.03z M58.44,23.91h5.06 c0.75,0,1.36,0.61,1.36,1.36l0,0c0,0.75-0.61,1.36-1.36,1.36h-5.06c-0.74,0-1.36-0.61-1.36-1.36l0,0 C57.09,24.52,57.7,23.91,58.44,23.91L58.44,23.91z"/></g></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="40" width="40" viewBox="0 0 122.88 59.81" style="enable-background:new 0 0 122.88 59.81" xml:space="preserve"><style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd;}</style><g><path class="st0" d="M20.72,8.03V4.92L3.79,6.54C0.53,6.9-0.14,5.78,0.02,4.59C0.43,1.64,2,2.33,4.25,2.45l16.46,0.83V1.16 c0-0.64,0.52-1.16,1.16-1.16h0.98c0.64,0,1.16,0.52,1.16,1.16v2.11L40.52,1.8c2.25-0.12,3.82-0.81,4.23,2.15 c0.16,1.18-0.51,2.31-3.77,1.94L24.03,4.92v3.11h1.23c0.88,0,1.6,0.72,1.6,1.6v5.77h69.15V9.68c0-0.9,0.74-1.65,1.65-1.65h1.17 V4.92L81.9,6.54c-3.27,0.37-3.93-0.76-3.77-1.94c0.41-2.96,1.98-2.26,4.23-2.15l16.46,0.83V1.16c0-0.64,0.52-1.16,1.16-1.16h0.98 c0.64,0,1.16,0.52,1.16,1.16v2.11l16.49-1.47c2.25-0.12,3.82-0.81,4.23,2.15c0.16,1.18-0.51,2.31-3.77,1.94l-16.95-0.97v3.11h1.23 c0.88,0,1.6,0.72,1.6,1.6v5.77h13.85c1.67,0,3.04,1.37,3.04,3.04l0,0c0,1.67-1.37,3.04-3.04,3.04H93.85 c-2.32,3.29-8.94,4.56-18.66,4.38c3.32,3.1,6.52,6.6,9.54,10.77c4.01,5.39,7.38,11.07,9.26,17.38c0.65,7.28-6.69,6.05-9.07,4.63 c-3.49-0.44-3.48-6.04-3.76-11.22c-0.25-4.57-0.74-8.99-4.24-12.35c-1.73-1.66-4.14-3.08-7.39-4.2c-0.77,0.74-1.7,1.41-2.77,2.02 c-5,2.83-9.66,3.61-13.55-2.49c-2.27,0.67-4.22,1.69-5.87,3.03c-6.69,5.4-6.44,12.92-6.78,21.15c-0.82,5.72-13.35,8.46-12.33-0.91 c0.2-1.86,1.05-3.54,2.23-5.13c4.62-8.98,9.98-16.78,16.59-22.55c-8.48,0.18-15.05-1.06-18.7-4.5H3.13c-1.67,0-3.04-1.37-3.04-3.04 l0,0c0-1.67,1.37-3.04,3.04-3.04H17.9V9.68c0-0.9,0.74-1.65,1.65-1.65H20.72L20.72,8.03z M58.44,23.91h5.06 c0.75,0,1.36,0.61,1.36,1.36l0,0c0,0.75-0.61,1.36-1.36,1.36h-5.06c-0.74,0-1.36-0.61-1.36-1.36l0,0 C57.09,24.52,57.7,23.91,58.44,23.91L58.44,23.91z"/></g></svg>
\ No newline at end of file
diff --git a/ui/general/health.html b/ui/general/health.html
index e6656f8..94f52c9 100644
--- a/ui/general/health.html
+++ b/ui/general/health.html
@@ -7,9 +7,6 @@
     <link href="../base1/bootstrap.min.css" type="text/css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
     <script src="../base1/cockpit.js"></script>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
-    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.min.js"></script>
     <script src="../base1/jquery-3.7.1.min.js"></script>
 </head>
 
@@ -30,76 +27,20 @@
                     <img src="assets/icons/drone-icon.svg" width="50px" height="50px" class="me-2"/><span>Select a Drone for Inspection</span>   
                 </div>
                 <div class="card-body">
-                    <div class="dropdown">
-                        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                            Choose a Drone
-                        </button>
-                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-                            <a class="dropdown-item" href="#">Drone1</a>
-                            <a class="dropdown-item" href="#">Drone2</a>
-                            <a class="dropdown-item" href="#">Drone3</a>
-                        </div>
-                    </div>
-                    <div class="dropdown show">
-                        <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                          Dropdown link
-                        </a>
-                      
-                        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
-                          <a class="dropdown-item" href="#">Action</a>
-                          <a class="dropdown-item" href="#">Another action</a>
-                          <a class="dropdown-item" href="#">Something else here</a>
-                        </div>
-                    </div>
-                    <div class="dropdown">
-                        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
-                            Dropdown button
-                        </button>
-                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
-                            <li><a class="dropdown-item" href="#">Action</a></li>
-                            <li><a class="dropdown-item" href="#">Another action</a></li>
-                            <li><a class="dropdown-item" href="#">Something else here</a></li>
-                        </ul>
-                    </div>
+
                     <div class="col-md-2">
                         <img src="assets/icons/drone-icon.svg" class="me-2"/>
                         <label for="composeFile" class="form-label"><b>Drone Select</b></label>                    
-                        <select id="droneSelection" class="form-select mt-2"></select>
+                        <select id="droneSelection" class="form-select mt-2">
+                            <option value="L">SIODhosifdsiuf</option>
+                        </select>
                     </div>
-                    <ul class="nav nav-pills span7 pull-right" id="upper_username_hide">
-                        <li class= "dropdown" data-dropdown="dropdown">
-                          <a id="" class="dropdown-toggle" data-toggle="dropdown" href="#">
-                           <b class="caret dropdown-toggle"></b>
-                          </a>
-                          <ul class="dropdown-menu" >
-                           <li><a href="#">Action</a></li>
-                           <li><a href="#">Another action</a></li>
-                         </ul>
-                       </li>
-                     </ul> 
+    
                 </div>
             </div>
         </div>
     </div>
-    <select name="droneDropdown" id="droneDropdown" onLoad="handleSelect(this.value)" onChange="handleSelect(this.value)">
-        <option value="View All" selected>View All</option>
-        <option value="Drone1">Drone1</option>
-        <option value="Drone2">Drone2</option>
-        <option value="Drone3">Drone4</option>
-        <option value="Drone5">Drone5</option>
-    </select>
     
-     <div id="myTableContainer"></div>    
-     <div class="dropdown">
-        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
-            Choose a Drone
-        </button>
-        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
-            <li><a class="dropdown-item" href="#">Drone1</a></li>
-            <li><a class="dropdown-item" href="#">Drone2</a></li>
-            <li><a class="dropdown-item" href="#">Drone3</a></li>
-        </ul>
-    </div>
 
     <table class="table table-dark">
         <thead>
diff --git a/ui/general/health.js b/ui/general/health.js
index fd75152..a4c3115 100644
--- a/ui/general/health.js
+++ b/ui/general/health.js
@@ -1,6 +1,7 @@
 
 // Elements
 const drone = document.getElementById("drone");
+const droneDropdown = document.getElementById("droneSelection");
 
 const drones = [
     ["1", "mu1"], ["2", "mu2"], ["3", "mu3"],
@@ -10,26 +11,25 @@ const drones = [
 // Load initial settings
 document.onload = initPage();
 
-document.getElementById("save").addEventListener("click", saveSettings);
+droneDropdown.addEventListener("change", droneChange);
 
-const dropdownElement = document.getElementById('dropdownMenuButton1');
-new bootstrap.Dropdown(dropdownElement);
 // Function to initialize the page
 function initPage() {
     // TODO: Replace /home/spiri/services with some root level path
     // Search for drones files in the services directory and populate the dropdown with directory names
-    const currentDrone = getValueByKey(content, "common", "drone");
 
-    addDropDown(drone, drones, currentDrone);
+    addDropDown(droneDropdown, drones, "1");
 }
 
-function handleSelect(account) {
+function droneChange() {
+    console.log(droneDropdown.value);
+    return ;
     var drone1Table = "<table><tr><td>Drone1</td></tr></table>";
     var drone2Table = "<table><tr><td>Drone2</td></tr></table>";
     var drone3Table = "<table><tr><td>Drone3/td></tr></table>";
     var drone4Table = "<table><tr><td>Drone4</td></tr></table>";
     var drone5Table = "<table><tr><td>Drone5</td></tr></table>";
-    switch(account)
+    switch(droneDropdown.value)
     {
         case "Drone1":
         document.getElementById("myTableContainer").innerHTML = drone1Table
@@ -49,34 +49,6 @@ function handleSelect(account) {
     }
 }
 
-// Save configuration values to the configuration file
-function saveSettings() {
-
-    try {
-        cockpit.file(confLocation)
-            .read()
-            .then((content) => {
-                // WiFi & Temperature Configuration
-                content = setValueByKey(content, "[common]", "drone_channel", drone_channel.value);
-                
-                cockpit.file(confLocation, { superuser: "try" }).replace(content)
-                    .then(() => {
-                        displayDroneTable();
-                        displaySuccess("table updated successfully.");
-                    })
-                    .catch((error) => {
-                        displayFail("Failed to update table: " + error.message);
-                    });
-            })
-            .catch(error => {
-                displayFail("Failed to update table: " + error.message);
-            });
-    } catch (e) {
-        console.error("Error during update operation:", e);
-        failureReadFile(e);
-    }
-}
-
 
 // Restart drone service
 function displayDroneTable() {