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 e31a4ba..88846a2 100644
--- a/web/newWebsite/index.html
+++ b/web/newWebsite/index.html
@@ -22,16 +22,25 @@
Graphs
-
- Settings
-
Questions
+
+ Change node names ⌄
+
+
+
Status updating
+
+
+
+
Change Information
+
+
+
diff --git a/web/newWebsite/main.js b/web/newWebsite/main.js
index c5e1486..72d3a01 100644
--- a/web/newWebsite/main.js
+++ b/web/newWebsite/main.js
@@ -141,4 +141,4 @@ function toggleGraph(nodeId) {
} else {
console.error('No element found with id: liveGraph' + nodeId);
}
-}
\ No newline at end of file
+}
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 c0fbab1..6c1a36c 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;
}
/*
@@ -12,226 +10,223 @@
justify-content: left;
} */
-#editNode{
- display: flex;
- justify-content: center;
- /* align-items: center; */
- /* flex-direction: column; */
- /* border-radius: 5%; */
- /* border: 20px solid orange; */
- }
+.nav-button {
+ background-color: #333;
+ color: #fff;
+ border: none;
+ cursor: pointer;
+ font-size: 17px;
+}
- /* #editNode {
- width: 98vw;
- height: 20vh;
- display: flex;
- justify-content: center;
- /* flex-direction: column; Keep as column
- /* justify-content: ;
- align-items: center;
+#editNode {
+ margin-top: 1%;
+ width: 98vw;
+ height: 20vh;
+ 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;
-} */
+ 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;
- flex-direction: column;
- background-color: #bfbfbf;
- 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: #9f9f9f;
- color: #fff;
- padding: 10px;
- border-radius: 50px;
- border: 2px solid #CC2936;
- clear: both;
- margin-bottom: 10px;
- position: relative;
+ margin-top: 2vh;
+ 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: 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;
+ 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: #bfbfbf;
- border-bottom: 2px solid #CC2936;
- 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;
-
-}
\ No newline at end of file
+ opacity: 0;
+ height: 0;
+}
diff --git a/web/newWebsite/text.html b/web/newWebsite/text.html
index e3d1ae5..1783df8 100644
--- a/web/newWebsite/text.html
+++ b/web/newWebsite/text.html
@@ -8,8 +8,6 @@
-
-
Settings
diff --git a/web/newWebsite/text.js b/web/newWebsite/text.js
index 63e3853..214feac 100644
--- a/web/newWebsite/text.js
+++ b/web/newWebsite/text.js
@@ -17,26 +17,30 @@ function settings() {
updateNode.style.display = "block";
locationInput.value = "";
nameInput.value = "";
-
- fetch(apiGetAllNode)
- .then(response => {
- if (!response.ok) {
- document.getElementById('text').innerHTML = "Error: Network response was not ok";
- throw new Error('Network response was not ok');
- }
- document.getElementById('text').innerHTML = "Fetching data";
- return response.json();
- })
- .then(data => {
- document.getElementById('text').innerHTML = "Data fetched";
- handleData(data);
- })
+ getInfoNode();
} else {
updateNode.style.display = "none";
}
}
+
+function getInfoNode() {
+ fetch(apiGetAllNode)
+ .then(response => {
+ if (!response.ok) {
+ document.getElementById('text').innerHTML = "Error: Network response was not ok";
+ throw new Error('Network response was not ok');
+ }
+ document.getElementById('text').innerHTML = "Fetching data";
+ return response.json();
+ })
+ .then(data => {
+ document.getElementById('text').innerHTML = "Data fetched";
+ handleData(data);
+ })
+}
+
function handleData(JSONdata) {
var i, L = select.options.length - 1;
for (i = L; i >= 0; i--) {
@@ -71,6 +75,7 @@ function changeText() {
var text = document.getElementById('text');
text.innerHTML = "Changes made"
+ getInfoNode();
}
function updateNodeInfo(node, newNodeName, newNodeLocation) {