-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
175 lines (163 loc) · 7.5 KB
/
index.html
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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<!DOCTYPE html>
<html>
<head>
<title>Sandusky Bay</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div align = 'center'>
<h1>Sandusky Bay Data</h1>
<h2><div align='center'>
<button class="refresh-button">Refresh Page</button>
</div></h2>
</div>
<div align = 'center'>
<img src="MapWithInset.png" alt="Sandusky Bay Monitoring map" width="700" height="400">
<br>
<form>
<label for="year-menu">Choose a Year:</label>
<select id="year-menu" name="year-menu">
<option value="">--Select a year--</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
</select>
<label for="data-menu">Choose a data category:</label>
<select id="data-menu" name="data-menu" disabled>
<option value="">--Select a data category--</option>
</select>
</form>
<script>
// Get references to the year and data menus
var yearMenu = document.getElementById("year-menu");
var dataMenu = document.getElementById("data-menu");
// Define the initial option for the data menu
var initialDataOption = document.createElement("option");
initialDataOption.value = "";
initialDataOption.textContent = "--Select a data category--";
dataMenu.appendChild(initialDataOption);
// Define the options for each year
var yearOptions = {
"2016": [
{ text: "Select a data category", value: "" },
{ text: "Chlorophyll", value: "2016_Chlorophyll.html" },
{ text: "Toxins", value: "2016_Toxins.html" },
{ text: "Nutrients", value: "2016_Nutrients.html" },
{ text: "Environmental", value: "2016_Environmental.html" }
],
"2017": [
{ text: "Select a data category", value: "" },
{ text: "Chlorophyll", value: "2017_Chlorophyll.html" },
{ text: "Toxins", value: "2017_Toxins.html" },
{ text: "Nutrients", value: "2017_Nutrients.html" },
{ text: "Environmental", value: "2017_Environmental.html" },
{ text: "PAR", value: "2017_Light.html" }
],
"2018": [
{ text: "Select a data category", value: "" },
{ text: "Chlorophyll", value: "2018_Chlorophyll.html" },
{ text: "Toxins", value: "2018_Toxins.html" },
{ text: "Nutrients", value: "2018_Nutrients.html" },
{ text: "Environmental", value: "2018_Environmental.html" },
{ text: "TSS", value: "2018_TSS.html" }
],
"2019": [
{ text: "Select a data category", value: "" },
{ text: "Chlorophyll", value: "2019_Chlorophyll.html" },
{ text: "Toxins", value: "2019_Toxins.html" },
{ text: "Nutrients", value: "2019_Nutrients.html" },
{ text: "Environmental", value: "2019_Environmental.html" },
{ text: "Fluoroprobe", value: "2019_Fluoroprobe.html" }
],
"2020": [
{ text: "Select a data category", value: "" },
{ text: "Chlorophyll", value: "2020_Chlorophyll.html" },
{ text: "Toxins", value: "2020_Toxins.html" },
{ text: "Nutrients", value: "2020_Nutrients.html" },
{ text: "Environmental", value: "2020_Environmental.html" },
{ text: "Fluoroprobe", value: "2019_Fluoroprobe.html" },
{ text: "PAR", value: "2020_Light.html" }
],
"2021": [
{ text: "Select a data category", value: "" },
{ text: "Chlorophyll", value: "2021_Chlorophyll.html" },
//{ text: "Toxins", value: "2021_Toxins.html" },
{ text: "Nutrients", value: "2021_Nutrients.html" },
{ text: "Environmental", value: "2021_Environmental.html" },
{ text: "Fluoroprobe", value: "2021_Fluoroprobe.html" },
{ text: "PAR", value: "2021_Light.html" },
{ text: "TSS", value: "2021_TSS.html" }
],
"2022": [
{ text: "Select a data category", value: "" },
{ text: "Chlorophyll", value: "2022_Chlorophyll.html" },
{ text: "Toxins", value: "2022_Toxins.html" },
{ text: "Nutrients", value: "2022_Nutrients.html" },
{ text: "Environmental", value: "2022_Environmental.html" },
{ text: "Fluoroprobe", value: "2022_Fluoroprobe.html" },
{ text: "PAR", value: "2022_Light.html" },
{ text: "TSS", value: "2022_TSS.html" }
],
"2023": [
{ text: "Select a data category", value: "" },
{ text: "Chlorophyll", value: "2023_Chlorophyll.html" },
{ text: "Toxins", value: "2023_Toxins.html" },
{ text: "Nutrients", value: "2023_Nutrients.html" },
{ text: "Environmental", value: "2023_Environmental.html" },
{ text: "Fluoroprobe", value: "2023_Fluoroprobe.html" },
{ text: "PAR", value: "2023_Light.html" },
{ text: "TSS", value: "2023_TSS.html" }
]
};
// Update the data menu options when the year menu changes
yearMenu.addEventListener("change", function () {
// Clear the existing options in the data menu
dataMenu.innerHTML = "";
// Get the selected year
var selectedYear = yearMenu.value;
if (selectedYear !== "") {
// Add the options for the selected year to the data menu
yearOptions[selectedYear].forEach(function (option) {
var optionElement = document.createElement("option");
optionElement.value = option.value;
optionElement.textContent = option.text;
dataMenu.appendChild(optionElement);
});
// Enable the data menu
dataMenu.disabled = false;
} else {
// Disable the data menu
dataMenu.disabled = true;
}
});
// Update the page when the data menu changes
dataMenu.addEventListener("change", function () {
// Get the selected data file
var selectedData = dataMenu.value;
if (selectedData !== "") {
// Redirect to the selected data file
window.location.href = selectedData;
}
});
// Get references to the refresh button
var refreshButton = document.querySelector('.refresh-button');
// Define the function to refresh the page
const refreshPage = () => {
location.reload();
};
// Add event listener to the refresh button
refreshButton.addEventListener('click', refreshPage);
// Get references to the back button
var backButton = document.querySelector('.back-button');
// Define the function to navigate back to the index page
const goBackToIndex = () => {
window.location.href = "index.html"; // Replace "index.html" with the actual name of your index page
};
// Add event listener to the back button
backButton.addEventListener('click', goBackToIndex);
</script>