tobimai/waterlevel-software
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Initial commit with action
Some checks failed
Test compiling project / test (push) Failing after 33s
Details

Browse Source
This commit is contained in:
Tobias Maier
2023-10-02 15:30:30 +02:00
commit bbe5bfdcee
15 changed files with 888 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
data/chota.css Normal file
View File

File diff suppressed because one or more lines are too long

60
data/data_export.html Normal file
View File

@@ -0,0 +1,60 @@
<!DOCTYPE html>”
<head>
<link rel="stylesheet" href="/chota.css">
<script>
if (window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.body.classList.add('dark');
}
</script>
</head>
<body>
<div class="container">
<nav class="nav" style="margin-bottom: 50px;">
<div class="nav-left">
<a class="brand" href="#">Watermeter</a>
<div class="tabs">
<a href="/">Status</a>
<a href="/settings">Settings</a>
<a class="active" href="/export">Data export</a>
</div>
</div>
<div class="nav-right">
<a class="button outline">Button</a>
</div>
</nav>
<div class="card">
<header>
<h4>JSON</h4>
</header>
Hello json
</div>
<div class="card">
<header>
<h4>MQTT</h4>
</header>
Hello mqtt
</div>
<div class="card">
<header>
<h4>Email alert</h4>
</header>
Hello json
</div>
</div>
</body>
<style>
.card {
margin-bottom: 10px;
}
</style>

0
data/logic.js Normal file
View File

79
data/settings.html Normal file
View File

@@ -0,0 +1,79 @@
<!DOCTYPE html>”
<head>
<link rel="stylesheet" href="/chota.css">
<script>
if (window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.body.classList.add('dark');
}
</script>
</head>
<body>
<div class="container">
<nav class="nav" style="margin-bottom: 50px;">
<div class="nav-left">
<a class="brand" href="#">Watermeter</a>
<div class="tabs">
<a href="/">Status</a>
<a class="active" href="/settings">Settings</a>
<a href="/export">Data export</a>
</div>
</div>
<div class="nav-right">
<a class="button outline">Button</a>
</div>
</nav>
<fieldset id="form-settings">
<legend>Settings</legend>
<p>
<label for="input__text">Sensor max height (e.g. 4m)</label>
<input id="input__text" type="number" placeholder="Text Input">
</p>
<p>
<label for="input__password">Water max height</label>
<input id="input__password" type="number">
</p>
<p>
<label for="input__webaddress">Water min height</label>
<input id="input__webaddress" type="number">
</p>
<p>
<label for="input__emailaddress">Email Address</label>
<input id="input__emailaddress" type="number">
</p>
<p>
<button class="button primary" style="width: 100%;">Submit</button>
</p>
</fieldset>
<form action="/update_wifi_credentials" method="post">
<fieldset id="form-settings">
<legend>WiFi Settings</legend>
<p>
<label for="ssid">SSID</label>
<input id="ssid" name="ssid" type="text">
</p>
<p>
<label for="wifi_password">Password</label>
<input id="wifi_password" name="wifi_password" type="password">
</p>
<p>
<button class="button primary" style="width: 100%;">Submit</button>
</p>
</fieldset>
</form>
</div>
</body>

178
data/status.html Normal file
View File

@@ -0,0 +1,178 @@
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="/chota.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</head>
<body>
<div class="container">
<nav class="nav" style="margin-bottom: 50px;">
<div class="nav-left">
<a class="brand" href="#">Watermeter</a>
<div class="tabs">
<a class="active" href="/">Status</a>
<a href="/settings">Settings</a>
<a href="/export">Data export</a>
</div>
</div>
<div class="nav-right">
<a class="button outline">Button</a>
</div>
</nav>
<div class="row">
<div class="col-12 col-3-lg">
<!--Sensor card-->
<div class="card">
<header>
<h4>Sensor information</h4>
</header>
<table class="tg">
<thead></thead>
<tbody>
<tr>
<td>Voltage: </td>
<td>12.12V</td>
</tr>
<tr>
<td>Current: </td>
<td>10 mA</td>
</tr>
</tbody>
</table>
</div>
<!--ESP Infor card-->
<div class="card">
<header>
<h4>ESP information</h4>
</header>
<table class="tg">
<thead></thead>
<tbody>
<tr>
<td>Uptime: </td>
<td>132d</td>
</tr>
<tr>
<td>FW version: </td>
<td>0.2</td>
</tr>
<tr>
<td>Time/Date: </td>
<td>1.1.202022</td>
</tr>
</tbody>
</table>
</div>
<!--WIFI card-->
<div class="card">
<header>
<h4>Connection Info</h4>
</header>
<table class="tg">
<thead></thead>
<tbody>
<tr>
<td>Type: </td>
<td>WiFi</td>
</tr>
<tr>
<td>IP: </td>
<td>127.0.0.1</td>
</tr>
<tr>
<td>RSSI: </td>
<td>good</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-12 col-7-lg">
<canvas id="myChart" style="width:100%;max-width:700px"></canvas>
</div>
<div class="col-12 col-2-lg">
<div class="outer-wrapper">
<div class="column-wrapper">
<div class="column"></div>
</div>
<div class="percentage">25%</div>
<div class="value">2500 / 10000</div>
</div>
</div>
</div>
</div>
</body>
<style>
.outer-wrapper {
display: inline-block;
margin: 5px 15px;
padding: 25px 15px;
background: #eee;
min-width: 50px;
}
.column-wrapper {
height: 400px;
width: 20px;
background: #CFD8DC;
transform: rotate(180deg);
margin: 0 auto;
}
.column {
width: 20px;
height: 25%;
background: #1900ff;
}
.percentage,
.value {
margin-top: 10px;
padding: 5px 10px;
color: #FFF;
background: #263238;
position: relative;
border-radius: 4px;
text-align: center;
}
.value {
background: #7986CB;
}
.card {
margin-bottom: 10px;
}
</style>
<script>
var xValues = [1,60,70,80,90,100,110,120,130,140,150];
var yValues = [7,8,8,9,9,9,10,11,14,14,15];
new Chart("myChart", {
type: "line",
data: {
labels: xValues,
datasets: [{
backgroundColor: "rgba(0,0,0,1.0)",
borderColor: "rgba(0,0,0,0.1)",
data: yValues
}]
},
options:{}
});
</script>