From e67764ee427df56d72a8217e8f72c3cc5db63805 Mon Sep 17 00:00:00 2001 From: Sietse Jonker Date: Wed, 3 Apr 2024 10:42:40 +0200 Subject: [PATCH 1/2] Fix variable name capitalization in main.js and clean up CSS styles in dashboard-styles.css --- web/newWebsite/main.js | 2 +- web/newWebsite/styles/dashboard-styles.css | 323 +++++++-------------- 2 files changed, 104 insertions(+), 221 deletions(-) diff --git a/web/newWebsite/main.js b/web/newWebsite/main.js index c5e1486..020df7b 100644 --- a/web/newWebsite/main.js +++ b/web/newWebsite/main.js @@ -54,7 +54,7 @@ async function handleIncomingData(data) { await nodeAdressHandler(data.node, Object.keys(data).filter(key => key !== 'node')); - let nodeName = nodeDict[data.node].name; + let nodeName = nodeDict[data.node].Name; let temperature = data.Temp; let humidity = data.Humi; let CO2 = data.eCO2; diff --git a/web/newWebsite/styles/dashboard-styles.css b/web/newWebsite/styles/dashboard-styles.css index 571fc94..709025e 100644 --- a/web/newWebsite/styles/dashboard-styles.css +++ b/web/newWebsite/styles/dashboard-styles.css @@ -1,201 +1,18 @@ * { box-sizing: border-box; font-family: "Roboto", sans-serif; - - -} - -/* -.editNodeInformation{ - margin-bottom: 60%; - display: flex; - justify-content: left; -} */ - -.nav-button { - background-color: #333; - color: #fff; - border: none; - cursor: pointer; - font-size: 17px; -} - -#editNode{ - display: flex; - justify-content: center; - /* align-items: center; */ - /* flex-direction: column; */ - /* border-radius: 5%; */ - /* border: 20px solid orange; */ } - - #editNode { - margin-top: 1%; - width: 98vw; - height: 20vh; + + body { + padding-top: 5vw; display: flex; - justify-content: center; - /* flex-direction: column; Keep as column - /* justify-content: ; */ - align-items: center; - - background-color: #333; - color: #fff; - padding: 10px; - border-radius: 50px; - border: 2px solid #333; - clear: both; - margin-bottom: 10px; - position: relative; - float: top; -} - -body { - display: flex; - justify-content: center; + flex-direction: column; + background-color: #afafaf; margin: 0; - margin-top: 8vh; - flex-direction: column; - background-color: #bfbfbf; - align-items: center; - -} - -.gaugeGroup { - width: 98vw; - height: auto; - display: flex; - flex-direction: column; /* Keep as column */ - justify-content: flex-start; - background-color: #9f9f9f; - color: #fff; - padding: 10px; - border-radius: 50px; - border: 2px solid #CC2936; - clear: both; - margin-bottom: 10px; - position: relative; -} - -.groupTitle { - width: 100%; - text-align: center; - font-size: 24px; -} - -.Node { - display: flex; - justify-content: space-around; - align-items: center; - width: 100%; - height: 100%; -} - -.Sensorvalues { - display: flex; - flex-direction: column; - align-items: center; - justify-content: space-around; - flex-wrap: wrap; - width: 15%; - height: 110%; - background-color: #ddd; - color: #333; - padding: 10px; - margin: 10px; - border-radius: 10px; - text-align: center; - position: relative; - padding-top: 3vh; /* Increase bottom padding */ -} - -.gaugeContainer { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - width: 100%; - height: 80%; /* Increase the height from 70% to 80% */ - position: relative; - overflow: visible; - height: 5vh; - margin-bottom: 1vh; - -} - -.gaugeImage { - width: 100%; - height: auto; - max-height: 140%; - object-fit: contain; - position: absolute; /* Make the image position absolute */ - top: 0; - left: 0; - z-index: 1; /* Make the image display below the needle */ - bottom: 0; -} - -.gaugeValue, .gaugeText { - width: 100%; - text-align: center; - font-size: 24px; - z-index: 2; -} - -.gaugeText { - width: 100%; - text-align: center; - font-size: 1.4vw; - z-index: 2; - position: absolute; - top: -1.4vw; /* Adjust this value to move the text further down */ - -} - -.arrowimg { - width: 3vh; - height: auto; - max-height: 100%; - object-fit: contain; - position: absolute; - top: 0.5vw; - right: 1.2vw; - z-index: 2; -} - -.valueContainer { - display: flex; - justify-content: center; - margin-top: 10px; -} - -#valueText { - font-size: 20px; -} - -.needle { - position: absolute; - bottom: -10%; /* Lower the needle to the bottom */ - left: 50%; - width: 2px; - height: 100%; - background-color: black; - transform-origin: bottom; - z-index: 3; /* Make the needle display above the image */ - transition: transform 0.1s ease-out; - -} - -.contentContainer { - display: flex; - flex-direction: row; /* Layout children side by side */ - width: 100%; - height: 100%; -} - -.navbar { - background-color: #bfbfbf; - border-bottom: 2px solid #CC2936; + } + + .navbar { + background-color: #333; height: 60px; display: flex; align-items: center; @@ -204,43 +21,109 @@ body { top: 0; /* Position it at the very top */ width: 100%; /* Make it span the full width of the page */ z-index: 1000; /* Make sure it's above all other elements */ -} - -.navbar-nav { + } + + .navbar-nav { list-style: none; display: flex; align-items: center; justify-content: center; /* Center the links horizontally */ height: 100%; width: 100%; /* Make it span the full width of the navbar */ -} - -.nav-item { + } + + .nav-item { margin-right: 20px; -} - -.nav-link { + } + + .nav-link { color: #fff; text-decoration: none; font-size: 18px; -} - -.plotly-container { - width: 100%; - float: bottom; - padding: 1vw; - align-items: center; - justify-content: center; + } + + .container { display: flex; -} - -.js-plotly-plot { - width: 90%; + flex-direction: row; + align-items: center; + align-self: center; + border: 3px solid #ccc; + border-radius: 10px; + margin: 20px; + padding: 20px; + width: 95%; + box-sizing: border-box; + } + + .data-types { + flex: 1; + display: flex; + flex-direction: column; + align-items: flex-start; + margin-right: 60px; + margin-bottom: 10px; + font-size: 0.8em; + padding: 8px; + border-radius: 5px; + background-color: #f0f0f0; + } + + .filters { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + margin-bottom: 10px; + } + + .date-filter { + flex: 1; + text-align: center; + margin-right: 60px; + font-size: 1.2em; /* Increase font size for a bigger appearance */ + padding: 8px; + border-radius: 5px; /* Add border radius for a rounded look */ + background-color: #f0f0f0; /* Light background color for contrast */ + } + + .node-filter { + flex: 1; + margin: auto; + text-align: center; + margin-right: 60px; + align-content: center; + font-size: 1.2em; /* Increase font size for a bigger appearance */ + padding: 8px; + border-radius: 5px; /* Add border radius for a rounded look */ + background-color: #f0f0f0; /* Light background color for contrast */ + } + + .filter-button { + width: 10%; + background-color: #007bff; + color: white; + padding: 10px; + border: none; + border-radius: 5px; + cursor: pointer; + } + + .js-plotly-plot { + width: 100%; height: 100%; -} - -.disabled { - opacity: 0; - height: 0; - -} \ No newline at end of file + align-self: center center; + } + /* Additional styling as needed */ + + .graphBody { + display: flex; + padding: 10px; + border: 3px solid #ccc; + border-radius: 10px; + justify-content: center; + width: 95%; + height: 100%; + align-content: center; + align-self: center; + } + \ No newline at end of file From a2e77e6f3d019f68b77d9f14bb436647cee41ab4 Mon Sep 17 00:00:00 2001 From: Sietse Jonker Date: Wed, 3 Apr 2024 10:43:32 +0200 Subject: [PATCH 2/2] Fix variable name in main.js --- web/newWebsite/main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/newWebsite/main.js b/web/newWebsite/main.js index 020df7b..c5e1486 100644 --- a/web/newWebsite/main.js +++ b/web/newWebsite/main.js @@ -54,7 +54,7 @@ async function handleIncomingData(data) { await nodeAdressHandler(data.node, Object.keys(data).filter(key => key !== 'node')); - let nodeName = nodeDict[data.node].Name; + let nodeName = nodeDict[data.node].name; let temperature = data.Temp; let humidity = data.Humi; let CO2 = data.eCO2;