-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.js
111 lines (92 loc) · 4.12 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
var body = document.getElementById("body");
var gui = document.getElementById("gui");
var grid = document.getElementById("grid");
var gridItem = document.querySelectorAll(".grid-item");
var largeGridItem = document.querySelectorAll(".large-grid-item");
var shadeCheck = document.getElementById("shadeCheck");
var stopBtn = document.getElementById("stopBtn");
var startBtn = document.getElementById("startBtn");
var prevBtn = document.getElementById("prevBtn");
var nextBtn = document.getElementById("nextBtn");
var csvBtn = document.getElementById("csvBtn");
var modalContent = document.getElementById("modalContent");
var modal = document.getElementById("modal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
var welcomePage = document.getElementById("welcomePage")
var statusBar = document.getElementById('statusBar')
//Data description Slider
shadeCheck.addEventListener("change", function(e){
if (shadeCheck.checked){
body.style.setProperty('background-color',"rgb(255,255,255)");
gui.style.setProperty('background-color',"rgb(236,236,236)");
modalContent.style.setProperty("background-color", "rgb(236,236,236)");
modalContent.style.setProperty("color", "black");
Array.from(gridItem).forEach((f)=> {
f.style.setProperty('color', "black");}); }
if (!shadeCheck.checked) {
body.style.setProperty('background-color',"rgb(54, 57, 63)");
gui.style.setProperty('background-color',"rgb(47, 49, 54)");
modalContent.style.setProperty("background-color", "rgb(54, 57, 63)");
modalContent.style.setProperty("color", "white");
Array.from(gridItem).forEach((f)=> {
f.style.setProperty('color', "white");
}); }
});
//Data description Slider
//Darkmode and Lightmode switching
shadeCheck.addEventListener("change", function(e){
if (shadeCheck.checked){//lightmode
body.style.setProperty('background-color',"rgb(255,255,255)");
gui.style.setProperty('background-color',"rgb(255,255,255)");
prevBtn.classList.remove("arrowDark");
prevBtn.classList.add("arrowLight");
nextBtn.classList.remove("arrowDark");
nextBtn.classList.add("arrowLight");
welcomePage.style.setProperty('color', "black");
Array.from(gridItem).forEach((f)=> {
f.style.setProperty('color', "black");}); }
if (!shadeCheck.checked){
body.style.setProperty('background-color',"rgb(54, 57, 63)");
prevBtn.classList.remove("arrowLight");
prevBtn.classList.add("arrowDark");
nextBtn.classList.remove("arrowLight");
nextBtn.classList.add("arrowDark");
welcomePage.style.setProperty('color', "white");
gui.style.setProperty('background-color',"rgb(47, 49, 54)");
Array.from(gridItem).forEach((f)=> {
f.style.setProperty('color', "white");
}); }
});
//Darkmode and Lightmode switching
Array.from(gridItem).forEach((gridItem)=> {
gridItem.style.display = "none" //no grid items should be showing when car is not connected
});
//Pop-up for grid items with live data update
gridItem.forEach((gridItem,i)=> {
gridItem.addEventListener("click", function(){
if (!descCheck.checked){//shows desc
largeGridItem[0].firstChild.nextSibling.style.opacity = "0";
largeGridItem[0].firstChild.style.opacity = "0";
largeGridItem[0].firstChild.nextSibling.nextSibling.style.opacity = "1";
indexOfLargeGridItem = i //for large display when gridItem is clicked, we send index of gridItem to view it on largeGridItem
}
if (descCheck.checked){//shows data with units
largeGridItem[0].firstChild.nextSibling.style.opacity = "1";
largeGridItem[0].firstChild.style.opacity = "1";
largeGridItem[0].firstChild.nextSibling.nextSibling.style.opacity = "0";
largeGridItem[0].firstChild.nextSibling.textContent = gridItem.firstChild.nextSibling.textContent;
indexOfLargeGridItem = i //for large display when gridItem is clicked, we send index of gridItem to view it on largeGridItem
}
modal.style.display = "block";
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
});
});
//Pop-up for grid items with live data update