118 lines
5.1 KiB
Django/Jinja
118 lines
5.1 KiB
Django/Jinja
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=\, initial-scale=1.0">
|
|
<link rel="stylesheet" href="styles.css">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
|
|
<script>
|
|
function tableSearch(){
|
|
var table, input, tr, td, row_content;
|
|
table = document.getElementById("tableRooms");
|
|
input = document.getElementById("tableRoomSearch").value.toUpperCase();
|
|
tr = table.getElementsByTagName("tr");
|
|
|
|
for (let i = 0; i < tr.length; i++) {
|
|
td = tr[i].getElementsByTagName("td")[0];
|
|
if(td){
|
|
row_content = td.textContent || td.innerText;
|
|
if (row_content.toUpperCase().indexOf(input) > -1) {
|
|
tr[i].style.display = "";
|
|
}
|
|
else{
|
|
tr[i].style.display ="none";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<title>{{ pagetitle }}</title>
|
|
</head>
|
|
<body>
|
|
<div class="main-flex">
|
|
<div class="navbar">
|
|
<div class="topbranding">{{ top_branding }}</div>
|
|
<div class="navbar-inner">
|
|
<b><a href="index.html">Home</a></b><br>
|
|
<i class="bi bi-arrow-down-square-fill"> </i>Rooms<br>
|
|
<!--{%- for item in rooms %}
|
|
 <a href="{{ item[0] }}">{{ item[1] }}</a>{% if not loop.last %},{% endif %}
|
|
{%- endfor %}-->
|
|
<hr>
|
|
<!--{%- if user.device_privileges % and so on}-->
|
|
<a href="device.html">Device Management</a><br>
|
|
<a href="users.html">User Management</a>
|
|
</div>
|
|
</div>
|
|
<div class="right-flex">
|
|
<div class="topline">
|
|
|
|
<div class="user section"> {{ user }}</div>
|
|
<div class="logout section"> <a href="logout">
|
|
Logout <i class="bi bi-power"></i>
|
|
</a></div>
|
|
</div>
|
|
<div class="content">
|
|
<p> {{ user_greeting }}</p>
|
|
<p> {{ ladning_information }}</p>
|
|
<div class="rooms-table">
|
|
<table>
|
|
<thead>
|
|
<tr class="table-header">
|
|
<th class="room-table-elem">Room name:</th>
|
|
<th>Temperature</th>
|
|
<th>Humidity</th>
|
|
</tr>
|
|
<tr class="searchbar">
|
|
<td colspan="255">
|
|
<i class="bi bi-search"></i>
|
|
<input type="text" id="tableRoomSearch" placeholder="Search by room name..." onkeyup="tableSearch()">
|
|
</td>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="tableRooms">
|
|
<tr>
|
|
<!--
|
|
possible actual implementation of templating here:
|
|
<td><a href="./room/{{ room.shortlink }}>{{ room.name }}</a>"
|
|
{%- for data in room_data %}
|
|
<td class="
|
|
{%- if data.valid %}
|
|
data-valid
|
|
{%- elif data.late %}
|
|
data-late
|
|
{%- elif data.missing %}
|
|
data-missing
|
|
">
|
|
data.print()
|
|
</td>
|
|
{%- endfor %}
|
|
-->
|
|
<td class="room-table-elem"><a href="./room/101">Room 1</a></td>
|
|
<td>24°</td>
|
|
<td>52%</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="room-table-elem"><a href="101">Room 2</a></td>
|
|
<td>27°</td>
|
|
<td>38%</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="room-table-elem"><a href="101">Room 3</a></td>
|
|
<td>27°</td>
|
|
<td class="missing-data"></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="room-table-elem"><a href="101">Room 4</a></td>
|
|
<td>27°</td>
|
|
<!--TODO: insert tooltip on late data-->
|
|
<td class="late-data"> 51%</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |