Skip to content
Snippets Groups Projects
Commit 41de9235 authored by Vojtěch Novotný's avatar Vojtěch Novotný
Browse files

update scriptu pro fyzicke zarizeni, index.html update

parent a76af538
No related branches found
No related tags found
1 merge request!4stabilni verze semestralni prace, 3 cviceni, domaci ukol 1
Hide whitespace changes
Inline Side-by-side
semestralni_prace/index.html
+ 1
− 1
View file @ 41de9235
...@@ -135,7 +135,7 @@ ...@@ -135,7 +135,7 @@
<h1 class="mb-4 text-center">Monitoring Temperature & Humidity</h1> <h1 class="mb-4 text-center">Monitoring Temperature & Humidity</h1>
<hr> <hr>
</hr> </hr>
<button id="toggle-phone-view" class="btn btn-primary mb-4">Toggle Phone View</button> <button id="toggle-phone-view" class="btn btn-primary mb-4">Toggle Simple View</button>
<div class="row" id="sensor-data"></div> <div class="row" id="sensor-data"></div>
</div> </div>
<script src="script.js"></script> <script src="script.js"></script>
......
semestralni_prace/main.html
+ 51
− 12
View file @ 41de9235
...@@ -8,8 +8,8 @@ ...@@ -8,8 +8,8 @@
<style> <style>
body { body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
background-color: #f0f0f0; background-color: #4b4b4b;
color: #333; color: #c6c6c6;
margin: 0; margin: 0;
padding: 20px; padding: 20px;
text-align: center; text-align: center;
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
} }
#status { #status {
color: #666; color: #212121;
font-size: 14px; font-size: 14px;
margin: 10px 0; margin: 10px 0;
} }
...@@ -34,7 +34,6 @@ ...@@ -34,7 +34,6 @@
</head> </head>
<body> <body>
<h1>Temperature & Humidity Monitor</h1>
<div id="sensor-data"> <div id="sensor-data">
Loading data... Loading data...
</div> </div>
...@@ -81,12 +80,52 @@ ...@@ -81,12 +80,52 @@
// Loop through each room and display data // Loop through each room and display data
for (var room in data) { for (var room in data) {
if (data.hasOwnProperty(room)) { if (data.hasOwnProperty(room)) {
html += '<div class="data">' + if (room == 'room1') {
'<strong>' + room + '</strong><br>' + html += '<div class="data" style="display: inline-block; width: 35%; vertical-align: top; margin: 5px; padding: 5px; background-color: #3a3a3a; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);">' +
'Temperature: ' + data[room].temperature + ' °C<br>' + '<strong><span style="padding: 5px; border-radius: 5px;">' + 'Koupelna' + '</span></strong><br>' +
'Humidity: ' + data[room].humidity + ' %<br>' + '<strong><span style="font-size: 50px; display: block; margin: 10px 0;">' + data[room].temperature + ' °C</span></strong>' +
'Last updated: ' + formatDate(data[room].timestamp) + '<strong><span style="font-size: 50px; display: block; margin: 10px 0;">' + data[room].humidity + ' %</span></strong>' +
'</div><hr>'; '<span style="font-size: 10px; color: grey;">' + 'Last updated: ' + formatDate(data[room].timestamp) + '</span>' +
'</div>';
}
else if (room == 'room2') {
html += '<div class="data" style="display: inline-block; width: 35%; vertical-align: top; margin: 5px; padding: 5px; background-color: #3a3a3a; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);">' +
'<strong><span style="padding: 5px; border-radius: 5px;">' + 'Obyvaci pokoj' + '</span></strong><br>' +
'<strong><span style="font-size: 50px; display: block; margin: 10px 0;">' + data[room].temperature + ' °C</span></strong>' +
'<strong><span style="font-size: 50px; display: block; margin: 10px 0;">' + data[room].humidity + ' %</span></strong>' +
'<span style="font-size: 10px; color: grey;">' + 'Last updated: ' + formatDate(data[room].timestamp) + '</span>' +
'</div>';
}
else if (room == 'room3') {
html += '<div class="data" style="display: inline-block; width: 35%; vertical-align: top; margin: 5px; padding: 5px; background-color: #3a3a3a; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);">' +
'<strong><span style="padding: 5px; border-radius: 5px;">' + 'Loznice' + '</span></strong><br>' +
'<strong><span style="font-size: 50px; display: block; margin: 10px 0;">' + data[room].temperature + ' °C</span></strong>' +
'<strong><span style="font-size: 50px; display: block; margin: 10px 0;">' + data[room].humidity + ' %</span></strong>' +
'<span style="font-size: 10px; color: grey;">' + 'Last updated: ' + formatDate(data[room].timestamp) + '</span>' +
'</div>';
}
else if (room == 'room4') {
html += '<div class="data" style="display: inline-block; width: 35%; vertical-align: top; margin: 5px; padding: 5px; background-color: #3a3a3a; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);">' +
'<strong><span style="padding: 5px; border-radius: 5px;">' + 'room4' + '</span></strong><br>' +
'<strong><span style="font-size: 50px; display: block; margin: 10px 0;">' + data[room].temperature + ' °C</span></strong>' +
'<strong><span style="font-size: 50px; display: block; margin: 10px 0;">' + data[room].humidity + ' %</span></strong>' +
'<span style="font-size: 10px; color: grey;">' + 'Last updated: ' + formatDate(data[room].timestamp) + '</span>' +
'</div>';
}
else {
html += '<div class="data" style="display: inline-block; width: 35%; vertical-align: top; margin: 5px; padding: 5px; background-color: #3a3a3a; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);">' +
'<strong><span style="padding: 5px; border-radius: 5px;">' + room + '</span></strong><br>' +
'<strong><span style="font-size: 50px; display: block; margin: 10px 0;">' + data[room].temperature + ' °C</span></strong>' +
'<strong><span style="font-size: 50px; display: block; margin: 10px 0;">' + data[room].humidity + ' %</span></strong>' +
'<span style="font-size: 10px; color: grey;">' + 'Last updated: ' + formatDate(data[room].timestamp) + '</span>' +
'</div>';
}
//html += '<div class="data" style="display: inline-block; width: 45%; vertical-align: top; margin: 10px;">' +
// '<strong>' + room + '</strong><br>' +
// '<strong><span style="font-size: 50px;">' + data[room].temperature + ' °C</span></strong><br>' +
// '<strong><span style="font-size: 50px;">' + data[room].humidity + ' %</span><strong><br>' +
// '<span style="font-size: 10px; color: grey;">' + 'Last updated: ' + formatDate(data[room].timestamp) + '</span>' +
// '</div>';*
} }
} }
...@@ -95,8 +134,8 @@ ...@@ -95,8 +134,8 @@
} else { } else {
sensorData.innerHTML = html; sensorData.innerHTML = html;
} }
sensorData.innerHTML += '<hr>';
statusElement.innerHTML = "Last updated: " + new Date().toLocaleTimeString(); statusElement.innerHTML = "Last updated page: " + new Date().toLocaleTimeString();
} catch (e) { } catch (e) {
statusElement.innerHTML = "Error parsing data: " + e.message; statusElement.innerHTML = "Error parsing data: " + e.message;
} }
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment