change node name functionalitijd

This commit is contained in:
Dano van den Bosch
2024-04-02 13:05:31 +02:00
parent 1743b998eb
commit b9455a56a8
5 changed files with 170 additions and 4 deletions

View File

@@ -8,7 +8,9 @@
<title>Gauges</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet">
</head>
<nav class="navbar">
@@ -22,14 +24,26 @@
<li class="nav-item">
<a href="settings.html" class="nav-link">Settings</a>
</li>
<div id="editNodeInformation">
<button id="settings" onclick="settings()">Settings</button>
</div>
<div id="editNode">
<textarea id="inputName"></textarea>
<textarea id="inputLocation"></textarea>
<select id="mySelect"></select>
<button id="button" onclick="changeText()">Change Information</button>
<p id="text">Status updating</p>
</div>
</ul>
</nav>
<body>
<script src="GaugGroup.js"></script>
<script src="main.js"></script>
<script src="text.js"></script>
<script src="liveGraph.js"></script>
</body>
</html>

View File

@@ -5,6 +5,42 @@
}
/*
.editNodeInformation{
margin-bottom: 60%;
display: flex;
justify-content: left;
} */
#editNode{
display: flex;
justify-content: center;
/* align-items: center; */
/* flex-direction: column; */
/* border-radius: 5%; */
/* border: 20px solid orange; */
}
/* #editNode {
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;
} */
body {
padding-top: 5vw;
display: flex;

27
web/newWebsite/text.html Normal file
View File

@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="settings" onclick="settings()">Settings</button>
<div id="editNode">
<p id="text">Status updating</p>
<select id="mySelect"></select>
<textarea id="inputName"></textarea>
<textarea id="inputLocation"></textarea>
<button id="button" onclick="changeText()">Change Information</button>
</div>
</body>
<header>
<script src="text.js"></script>
</header>
</html>

91
web/newWebsite/text.js Normal file
View File

@@ -0,0 +1,91 @@
apiGetAllNode = "http://145.92.8.114/getNodeInfo?macAdress=*"
nodeDataArray = {};
var updateNode = document.getElementById('editNode');
var locationInput = document.getElementById("inputLocation");
var nameInput = document.getElementById("inputName");
var select = document.getElementById('mySelect');
document.getElementById("inputName").placeholder = "Type new name here..";
document.getElementById("inputLocation").placeholder = "Type new location here..";
updateNode.style.display = "none";
function settings() {
if (updateNode.style.display === "none") {
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);
})
} else {
updateNode.style.display = "none";
}
}
function handleData(JSONdata) {
var i, L = select.options.length - 1;
for (i = L; i >= 0; i--) {
select.remove(i);
}
for (var i = 0; i < JSONdata.length; i++) {
var node = JSONdata[i].NodeID;
var name = JSONdata[i].Name;
var location = JSONdata[i].Location;
nodeDataArray[node] = { name: name, location: location };
// Create new option element
var option = document.createElement('option');
// Set the value of the option
option.value = node;
// Set the text of the option
option.text = name;
// Add the option to the select
select.add(option);
}
}
function changeText() {
var nodeName = encodeURIComponent(document.getElementById('inputName').value);
var nodeLocation = encodeURIComponent(document.getElementById('inputLocation').value);
updateNodeInfo(select.value, nodeName, nodeLocation);
var text = document.getElementById('text');
text.innerHTML = "Changes made"
}
function updateNodeInfo(node, newNodeName, newNodeLocation) {
apiUrl = "http://145.92.8.114/updateData?node=" + node + "&name=" + newNodeName + "&location=" + newNodeLocation;
fetch(apiUrl)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.catch(error => {
console.error('Error:', error);
});
}

View File

@@ -72,8 +72,6 @@ p1 {
}
.nodeData {
display: flex;
justify-content: left;