Smikkelbakje/J1B3-Sensor-boxes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add dataTypesContainer to container and update styles

Browse Source
This commit is contained in:
sietse jonker
2024-03-30 21:25:20 +01:00
parent 642c4a24ad
commit 726d411321
3 changed files with 33 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
web/newWebsite/graph-main.js
View File

@@ -42,6 +42,7 @@ dataTypesContainer.appendChild(eco2Checkbox.checkbox);
dataTypesContainer.appendChild(eco2Checkbox.checkboxLabel); dataTypesContainer.appendChild(eco2Checkbox.checkboxLabel);
dataTypesContainer.appendChild(tvocCheckbox.checkbox); dataTypesContainer.appendChild(tvocCheckbox.checkbox);
dataTypesContainer.appendChild(tvocCheckbox.checkboxLabel); dataTypesContainer.appendChild(tvocCheckbox.checkboxLabel);
container.appendChild(dataTypesContainer);
const filterButton = document.createElement('button'); const filterButton = document.createElement('button');
filterButton.textContent = 'Filter Data'; filterButton.textContent = 'Filter Data';
@@ -63,8 +64,6 @@ filterButton.addEventListener('click', () => {
console.log(filteredData); console.log(filteredData);
}); });
container.appendChild(dataTypesContainer);
const dateFilter = document.createElement('div'); const dateFilter = document.createElement('div');
dateFilter.setAttribute('class', 'date-filter'); dateFilter.setAttribute('class', 'date-filter');

1
web/newWebsite/graphs.html
View File

@@ -29,6 +29,7 @@
<body> <body>
<div id="graph1"></div> <div id="graph1"></div>
</div>
<script src="graph-classes.js"></script> <script src="graph-classes.js"></script>
<script src="graph-main.js"></script> <script src="graph-main.js"></script>
</body> </body>

56
web/newWebsite/styles/graph-styles.css
View File

@@ -168,46 +168,46 @@ body {
} }
.container { .container {
box-sizing: border-box;
display: flex; display: flex;
justify-content: space-around; flex-wrap: wrap;
flex-direction: row;
justify-content: center;
align-items: center; align-items: center;
border: 2px solid #ccc; border: 2px solid #000000;
border-radius: 10px; border-radius: 10px;
padding: 10px; padding: 20px;
margin: 20px;
} }
.data-types { .data-types {
display: flex;
flex-direction: column; flex-direction: column;
align-self: self-center;
justify-content: space-between;
padding: 20px;
width: 30%; /* Adjust width as needed */
background-color: #f1f1f1;
}
.date-filter{
align-content: center;
flex-direction: column;
justify-content: space-between;
/* width: 30%; /* Adjust width as needed */
background-color: #f1f1f1;
} }
.date-filter,
.node-filter{ .node-filter{
margin-left: 10px; align-self: center;
} justify-content: space-between;
width: 10%; /* Adjust width as needed */
.input-field { border: none;
margin: 5px; border-radius: 4px;
padding: 5px; background-color: #f1f1f1;
border: 1px solid #ccc;
border-radius: 5px;
}
.checkbox {
margin-right: 5px;
} }
.filter-button { .filter-button {
margin: 10px; width: 100%;
padding: 5px 10px; margin-top: 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
} }
.filter-button:hover { /* Additional styling as needed */
background-color: #0056b3;
}