Youssof explained a dropdown
This commit is contained in:
parent
48d28615fe
commit
d04c1bd2c5
|
|
@ -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>
|
||||
<?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>
|
||||
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue