132 lines
5.9 KiB
HTML
132 lines
5.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>Health Status</title>
|
|
<meta charset="utf-8">
|
|
<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>
|
|
|
|
<body>
|
|
<div class="container mt-5 mb-5">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<h2 class="fw-bold">Health Status</h2>
|
|
<p>At a glance view of the status of the drone.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-4">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<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>
|
|
</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>
|
|
<tr>
|
|
<th scope="col">Drone</th>
|
|
<th scope="col">Mu1</th>
|
|
<th scope="col">Mu2</th>
|
|
<th scope="col">Mu3</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">IP Address</th>
|
|
<td>1</td>
|
|
<td>2</td>
|
|
<td>3</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">Docker Container</th>
|
|
<td>Container1</td>
|
|
<td>Container2</td>
|
|
<td>Container3</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<script src="health.js"></script>
|
|
</body>
|
|
|
|
</html> |