From 8c9ccda61ae8b0e4c9b7563b8beb46c4167a741d Mon Sep 17 00:00:00 2001 From: Sietse Jonker Date: Wed, 3 Apr 2024 11:28:37 +0200 Subject: [PATCH] Refactor navigation links in HTML files --- web/newWebsite/graph-main.js | 4 +- web/newWebsite/graphs.html | 6 +- web/newWebsite/index.html | 3 - web/newWebsite/questions-dashboard.html | 3 - web/newWebsite/settings.html | 35 --- web/newWebsite/styles/dashboard-styles.css | 322 ++++++++++----------- 6 files changed, 158 insertions(+), 215 deletions(-) delete mode 100644 web/newWebsite/settings.html diff --git a/web/newWebsite/graph-main.js b/web/newWebsite/graph-main.js index 6caadde..5ed8f02 100644 --- a/web/newWebsite/graph-main.js +++ b/web/newWebsite/graph-main.js @@ -25,10 +25,10 @@ function createCheckBox(id, label) { return response.json(); }) .then(data => { - handleData(data); + nodeInputs(data); }) -function handleData(JSONdata) { +function nodeInputs(JSONdata) { select = document.getElementById('node-input'); console.log(JSONdata); diff --git a/web/newWebsite/graphs.html b/web/newWebsite/graphs.html index d4b62cc..6396326 100644 --- a/web/newWebsite/graphs.html +++ b/web/newWebsite/graphs.html @@ -2,6 +2,7 @@ + @@ -20,16 +21,15 @@
  • Graphs
    • -
  • - Settings -
  • Questions +
    • + \ No newline at end of file diff --git a/web/newWebsite/index.html b/web/newWebsite/index.html index f2b5b42..88846a2 100644 --- a/web/newWebsite/index.html +++ b/web/newWebsite/index.html @@ -22,9 +22,6 @@
  • Graphs
    • -
  • - Settings -
  • Questions
    • diff --git a/web/newWebsite/questions-dashboard.html b/web/newWebsite/questions-dashboard.html index 5ce5f66..418f4e3 100644 --- a/web/newWebsite/questions-dashboard.html +++ b/web/newWebsite/questions-dashboard.html @@ -20,9 +20,6 @@
  • Graphs
    • -
  • - Settings -
  • Questions diff --git a/web/newWebsite/settings.html b/web/newWebsite/settings.html deleted file mode 100644 index 383842a..0000000 --- a/web/newWebsite/settings.html +++ /dev/null @@ -1,35 +0,0 @@ - - - - - - - - Gauges - - - - - - - - - - - - - \ No newline at end of file diff --git a/web/newWebsite/styles/dashboard-styles.css b/web/newWebsite/styles/dashboard-styles.css index eeab2b1..85f5292 100644 --- a/web/newWebsite/styles/dashboard-styles.css +++ b/web/newWebsite/styles/dashboard-styles.css @@ -1,8 +1,6 @@ * { - box-sizing: border-box; - font-family: "Roboto", sans-serif; - - + box-sizing: border-box; + font-family: "Roboto", sans-serif; } /* @@ -13,235 +11,221 @@ } */ .nav-button { - background-color: #333; - color: #fff; - border: none; - cursor: pointer; - font-size: 17px; + 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; - display: flex; - justify-content: center; - /* flex-direction: column; Keep as column +#editNode { + margin-top: 1%; + width: 98vw; + height: 20vh; + display: flex; + justify-content: center; + /* flex-direction: column; Keep as column /* justify-content: ; */ - align-items: center; + 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; + 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; - margin: 0; - margin-top: 8vh; - background-color: #f0f0f0; - flex-direction: column; - background-color: #afafaf; - align-items: center; - + display: flex; + justify-content: center; + margin: 0; + margin-top: 8vh; + background-color: #f0f0f0; + flex-direction: column; + background-color: #afafaf; + align-items: center; } .gaugeGroup { - width: 98vw; - height: auto; - display: flex; - flex-direction: column; /* Keep as column */ - justify-content: flex-start; - background-color: #333; - color: #fff; - padding: 10px; - border-radius: 50px; - border: 2px solid #333; - clear: both; - margin-bottom: 10px; - position: relative; + width: 98vw; + height: auto; + display: flex; + flex-direction: column; /* Keep as column */ + justify-content: flex-start; + background-color: #333; + color: #fff; + padding: 10px; + border-radius: 50px; + border: 2px solid #333; + clear: both; + margin-bottom: 10px; + position: relative; } .groupTitle { - width: 100%; - text-align: center; - font-size: 24px; + width: 100%; + text-align: center; + font-size: 24px; } .Node { - display: flex; - justify-content: space-around; - align-items: center; - width: 100%; - height: 100%; + 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 */ - + 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; - + 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: 120%; - 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; + width: 100%; + height: auto; + max-height: 120%; + 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; +.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 */ - + 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; + 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; + display: flex; + justify-content: center; + margin-top: 10px; } #valueText { - font-size: 20px; + 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; - + 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%; + display: flex; + flex-direction: row; /* Layout children side by side */ + width: 100%; + height: 100%; } .navbar { - background-color: #333; - height: 60px; - display: flex; - align-items: center; - padding: 0 20px; - position: fixed; /* Fix the navbar at the top of the page */ - 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 */ + background-color: #333; + height: 60px; + display: flex; + align-items: center; + padding: 0 20px; + position: fixed; /* Fix the navbar at the top of the page */ + 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 { - 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 */ + 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 { - margin-right: 20px; + margin-right: 20px; } .nav-link { - color: #fff; - text-decoration: none; - font-size: 18px; + color: #fff; + text-decoration: none; + font-size: 18px; } .plotly-container { - width: 100%; - float: bottom; - padding: 1vw; - align-items: center; - justify-content: center; - display: flex; + width: 100%; + float: bottom; + padding: 1vw; + align-items: center; + justify-content: center; + display: flex; } .js-plotly-plot { - width: 90%; - height: 100%; + width: 90%; + height: 100%; } .disabled { - opacity: 0; - height: 0; - + opacity: 0; + height: 0; }