154 lines
7.1 KiB
HTML
154 lines
7.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>ESP-Ventilation</title>
|
|
<link rel="stylesheet" href="style.css" type="text/css">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js" defer></script>
|
|
<script src="main.js" defer></script>
|
|
<script src="https://cdn.socket.io/socket.io-3.0.1.min.js"></script>
|
|
</head>
|
|
<body onload="checkUser(), getStartValues(), updateChart()">
|
|
<header>
|
|
<form id="pre-reg" method="get" action="/register" style="margin-top: 10px; margin-right: 10px;">
|
|
<input id="reg" type="submit" value="Register new user">
|
|
</form>
|
|
<h1>ABB Ventilation Controller</h1>
|
|
</header>
|
|
<div class="logout">
|
|
<p id="user"></p>
|
|
<form id="log_out" method="post" action="/logout">
|
|
<input id="btn_log_out" type="submit" value="Log out">
|
|
</form>
|
|
</div>
|
|
<div class="upper">
|
|
<main>
|
|
<div class="login">
|
|
<form id="login-form" method="post" action="/">
|
|
<br>
|
|
<p id="pwd-warn">Wrong username or password</p>
|
|
<p id="form-warn">All fields must be filled!</p>
|
|
<p>You must log in to change settings<br>Please give your credentials:</p>
|
|
<input type="text" name="username" id="username" placeholder="Username" required>
|
|
<br><br>
|
|
<input type="password" name="password" id="password" placeholder="Password" required>
|
|
<br><br>
|
|
<input type="submit" name="btn_login" id="btn_login" value="Login">
|
|
<br><br>
|
|
<p id="acc" style="font-weight:normal">If you don't have an account, please contact your administrator</p>
|
|
<br>
|
|
</form>
|
|
</div>
|
|
<div class="modes">
|
|
<div id="buttons">
|
|
<input type="radio" class="custom-radio" id="m_auto" name="mode" value="Automatic" checked="true">
|
|
<label for="m_auto" id="auto_label">Automatic</label><br>
|
|
</div>
|
|
<div id="buttons">
|
|
<input type="radio" class="custom-radio" id="m_man" name="mode" value="Manual">
|
|
<label for="m_man" id="man_label">Manual</label><br><br>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<div class="set_values">
|
|
<div class="field">
|
|
<div class="ofield">
|
|
<div id="pr_div">
|
|
<h3>Set pressure value</h3>
|
|
<output class="set_output" id="set_press">0 Pa</output>
|
|
<input class="slider" id="pressure" type="range" value="0" max="120" oninput="set_press.value = this.value + ' Pa'">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<div class="ofield">
|
|
<div id="sp_div">
|
|
<h3>Set fan speed</h3>
|
|
<output class="set_output" id="set_speed">0 %</output>
|
|
<input class="slider" id="speed" type="range" value="0" max="100" oninput="set_speed.value = this.value + ' %'" disabled="true">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</main>
|
|
<aside>
|
|
<p id="mon-warn">Fan is not settled in required time!</p>
|
|
<div class="get_values">
|
|
<fieldset id="monitor">
|
|
<legend style="font-size: 20px;"><b>Monitor</b></legend>
|
|
<div class="field">
|
|
<div class="ifield">
|
|
<h3>Pressure</h3>
|
|
<output class="get_output" id="get_press">0</output>
|
|
<h4>Pa</h4>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<div class="ifield">
|
|
<h3>Fan speed</h3>
|
|
<output class="get_output" id="get_speed">0</output>
|
|
<h4>%</h4>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<div class="ifield">
|
|
<h3>CO2</h3>
|
|
<output class="get_output" id="get_co">0</output>
|
|
<h4>ppm</h4>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<div class="ifield">
|
|
<h3>Temperature</h3>
|
|
<output class="get_output" id="get_temp">0</output>
|
|
<h4>℃</h4>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<div class="ifield">
|
|
<h3>Relative Humidity</h3>
|
|
<output class="get_output" id="get_rh">0</output>
|
|
<h4>%</h4>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
<br>
|
|
<div class="lower">
|
|
<div class="chart-container" id="chart-cont">
|
|
<h2>Data History</h2>
|
|
<span id="chart_warn">No data found for selected period.</span>
|
|
<div class="filter">
|
|
<label>Select period:</label><br>
|
|
<label for="start-time">Start time:</label>
|
|
<input type="datetime-local" id="start-time" name="start-time" min="" max="" value="">
|
|
<label for="end-time">End time:</label>
|
|
<input type="datetime-local" id="end-time" name="end-time" min="" max="" value="">
|
|
<button id="btn_reset">Reset</button>
|
|
</div>
|
|
<canvas id="dataChart" width="600px" height="300px"></canvas>
|
|
</div>
|
|
<div id="user-table">
|
|
<h2>User Log History</h2>
|
|
<div id="log">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>User</th>
|
|
<th>Login time</th>
|
|
<th>Logout time</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="table-output">
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |