chlub/sensors
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

migrate repository again

Browse Source
This commit is contained in:
chlub
2025-11-17 22:06:13 +01:00
commit 50c0f46207
9 changed files with 573 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
web/index.html.jinja Normal file
View File

@@ -0,0 +1,118 @@
<!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">
<div class="navbar">
<div class="topbranding">{{ topbranding }}</div>
<div class="navbar-inner">
<b><a href="index.html">Home</a></b><br>
<i class="bi bi-arrow-down-square-fill">&nbsp;</i>Rooms<br>
<!--{%- for item in rooms %}
&emsp;<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="content">
<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="main-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>&nbsp;
<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>

24
web/room_template.html Normal file
View File

@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" /> <!--It is necessary to use the UTF-8 encoding with plotly graphics to get e.g. negative signs to render correctly -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<h1>Here's a Plotly graph!</h1>
{{ fig }}
<p>And here's some text after the graph.</p>
</body>
</html>

91
web/styles.css Normal file
View File

@@ -0,0 +1,91 @@
*{
font-family: sans-serif;
}
a{
text-decoration: none;
}
.main{
display: flex;
flex-direction: row;
}
.navbar{
flex: 1 10vw;
white-space: nowrap;
}
.topbranding, .navbar-inner, .topline{
font-weight: bold;
border: solid 0.2em;
padding-left: 0.5em;
padding-right: 0.5em;
padding-bottom: 0.25em;
padding-top: 0.25em;
}
.navbar-inner{
font-weight: normal;
}
.content{
flex: 1 60vw;
}
.topline{
display: flex;
}
.section{
flex: 1;
}
.logout{
text-align: right;
}
.main-content{
padding-left: 1em;
}
.rooms-table{
background-color: lightgray;
padding: 0.5em 1.5em;
width: min-content;
}
.rooms-table table{
width: 50vw;
background-color: inherit;
text-align: center;
border-color: darkgray;
border-collapse: collapse;
border-left: 10px;
}
.rooms-table tr{
padding-left: 1em;
}
.rooms-table td{
padding-bottom: 0.2em;
padding-top: 0.2em;
}
thead{
border-bottom: 0.25em darkgray solid;
}
tbody tr{
border-bottom: 0.1em darkgray solid;
}
.missing-data{
background-color: gray;
}
.late-data{
background-color: orange;
}
.room-table-elem, .searchbar{
font-weight: bold;
text-align: left;
}
.rooms-table input{
width: 90%;
}