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

mostly working templating for landing page

Browse Source
This commit is contained in:
chlub
2025-11-24 22:53:13 +01:00
parent 50c0f46207
commit 144d8aa844
11 changed files with 299 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
web/base.html.jinja Normal file
View File

@@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=\, initial-scale=1.0">
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css')}}">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
<script src="{{ url_for('static', filename='scripts.js') }}"></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">&nbsp;</i>Rooms<br>
<hr>
<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"> {{ userinfo.name }}</div>
<div class="logout section"> <a href="logout">
Logout <i class="bi bi-power"></i>
</a></div>
</div>
{% block content %}
{% endblock content %}
</div>
</div>
</body>
</html>

10
web/index.html.jinja
View File

@@ -26,12 +26,12 @@
}
}
</script>
<title>{{ Pagetitle }}</title>
<title>{{ pagetitle }}</title>
</head>
<body>
<div class="main">
<div class="main-flex">
<div class="navbar">
<div class="topbranding">{{ topbranding }}</div>
<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">&nbsp;</i>Rooms<br>
@@ -44,7 +44,7 @@
<a href="users.html">User Management</a>
</div>
</div>
<div class="content">
<div class="right-flex">
<div class="topline">
<div class="user section"> {{ user }}</div>
@@ -52,7 +52,7 @@
Logout <i class="bi bi-power"></i>
</a></div>
</div>
<div class="main-content">
<div class="content">
<p> {{ user_greeting }}</p>
<p> {{ ladning_information }}</p>
<div class="rooms-table">

43
web/landing.html.jinja Normal file
View File

@@ -0,0 +1,43 @@
{% extends "base.html.jinja" %}
{% block content %}
<div class="content">
<p> {{ user_greeting_before }}{{userinfo.name}}{{user_greeting_after}}</p>
<p> {{ landing_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">
{% for room in roominfo %}
<tr>
<td><a href="./room/{{ room.shortcode }}">{{ room.name }}</a>
{%- for sensorinfo in room.roomdata %}
{% if sensorinfo.state == 0 %}
<td class="data-valid">
{% elif sensorinfo.state == 1 %}
<td class="data-late">
{% else %}
<td class="data-missing">
{% endif %}
{{ sensorinfo.reading }}
</td>
{%- endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
{% endblock content %}

91
web/styles.css
View File

@@ -1,91 +0,0 @@
*{
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%;
}