Style day of week picker

public/css/home.css

@@ -502,6 +502,69 @@ button:hover {
   letter-spacing: 0.1em;
 }
 
+.day_custom-select {
+  position: relative;
+  font-family: Arial;
+  width: 300px;
+  height: 45px;
+}
+
+/* Hide the original select menu */
+.day_custom-select select{
+  display: none;
+}
+
+.day_select-selected {
+  background-color: var(--green);
+}
+
+/* Style the arrow inside the select element */
+.day_select-selected:after {
+  position: absolute;
+  content: "";
+  top: 17px;
+  right: 10px;
+  width: 0;
+  height: 0;
+  border: 6px solid transparent;
+  border-color: white transparent transparent transparent;
+}
+
+/* Point the arrow upwards when the select box is open */
+.day_select-selected.day_select-arrow-active:after {
+  border-color: transparent transparent white transparent;
+  top: 10px;
+}
+
+/* Style the options, including the selected option */
+.day_select-items div,.day_select-selected {
+  color: white;
+  padding: 10px 16px;
+  border: 1px solid transparent;
+  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
+  cursor: pointer;
+}
+
+/* Style options */
+.day_select-items {
+  position: absolute;
+  background-color: var(--green);
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 99;
+}
+
+/* Hide the items when the select box is closed */
+.day_select-hide {
+  display: none;
+}
+
+/* Change the background color on hover */
+.day_select-items div:hover, .same-as-selected {
+  background-color: var(--green1);
+}
+
 div.tabcontent, div.tab {
   width: 98%;
   margin: auto;

public/home.html

@@ -284,14 +284,16 @@ <h3 id="import_modal_title">Import Data</h3>
       <span class="slider round"></span>
       <p id="schedule_title" class="unselectable">Black</p>
     </label>-->
-    <select id="day-select" onchange="schedule_toggle(value);">
-      <option value="-1">Select Day</option>
-      <option value="1">Monday (Silver)</option>
-      <option value="2">Tuesday (Black)</option>
-      <option value="3">Wednesday</option>
-      <option value="4">Thursday (Silver)</option>
-      <option value="5">Friday (Black)</option>
-    </select>
+    <div class="day_custom-select" id="day_custom-select">
+      <select id="day_select">
+        <option value="-1">Select Day</option>
+        <option value="1">Monday (Silver)</option>
+        <option value="2">Tuesday (Black)</option>
+        <option value="3">Wednesday</option>
+        <option value="4">Thursday (Silver)</option>
+        <option value="5">Friday (Black)</option>
+      </select>
+    </div>
     <div id="scheduleTable"></div>
   </div>
   <div id="clock" class="tabcontent">

public/js/clock.js

@@ -20,6 +20,7 @@ const covid_schedule = true;
 let current_schedule = covid_schedule ? "covid-mt" : "regular";
 // For covid-19 schedule
 let selected_day_of_week = -1;
+let day_of_week;
 
 // For testing.
 // If this is set to a valid date/time string, that will be used instead of the
@@ -43,7 +44,6 @@ function schedulesCallback(response) {
 }
 
 function update_formattedSchedule() {
-    let day_of_week;
     if (selected_day_of_week < 0) {
         const now = date_override ? new Date(date_override) : new Date();
         day_of_week = now.getDay();

public/js/extraFunctions.js

@@ -1131,7 +1131,7 @@ let tableData_option_onclick = function() {
 
 let initialize_tableData_dropdown = function() {
   let x, i, j, selElmnt, a, b, c;
-  /* Look for any elements with the class "pdf_custom-select": */
+  /* Look for any elements with the class "tableData_custom-select": */
   x = document.getElementsByClassName("tableData_custom-select");
   for (i = 0; i < x.length; i++) {
     selElmnt = x[i].getElementsByTagName("select")[0];
@@ -1167,6 +1167,71 @@ let initialize_tableData_dropdown = function() {
   }
 }
 
+// Initialize the dropdown menu by creating divs around each option
+let initialize_dayOfWeek_dropdown = function() {
+  let i, selElmnt, a, b, c;
+  // Find the day select menu
+  selElmnt = document.getElementById("day_custom-select").getElementsByTagName("select")[0];
+  // Create a new div for the select menu and assign it a class
+  a = document.createElement("DIV");
+  a.setAttribute("class", "day_select-selected");
+  a.setAttribute("id", "day_select_div");
+  document.getElementById("day_custom-select").appendChild(a);
+  let weekdays = ["Select Day", "Monday (Silver)", "Tuesday (Black)", "Wednesday", "Thursday (Silver)", "Friday (Black)", "Select Day"];
+  // Deal with slow loading / weird edge cases
+  if (day_of_week < 0 || day_of_week === undefined) {
+    a.innerHTML = "Select Day";
+  } else {
+    a.innerHTML = weekdays[day_of_week];
+  }
+  // Create a new div to store the option list
+  b = document.createElement("DIV");
+  b.setAttribute("class", "day_select-items select-hide");
+  // Loop through each of the options and add a div for each one
+  for (i = 1; i < selElmnt.length; i++) {
+    c = document.createElement("DIV");
+    c.id = `day_select-items-${selElmnt.options[i].value}`;
+    c.innerHTML = selElmnt.options[i].innerHTML;
+    c.addEventListener("click", dayOfWeek_onclick);
+    b.appendChild(c);
+  }
+  document.getElementById("day_custom-select").appendChild(b);
+  // Close all other select boxes when one is clicked
+  a.addEventListener("click", function(e) {
+    e.stopPropagation();
+    closeAllSelect(this);
+    this.nextSibling.classList.toggle("select-hide");
+    this.classList.toggle("day_select-arrow-active");
+  });
+  // Close the select menu when you click outside of it, and flip the dropdown arrow
+  document.addEventListener("click", function() {
+    document.getElementsByClassName("day_select-items")[0].classList.add("select-hide");
+    document.getElementById("day_select_div").classList.remove("day_select-arrow-active");
+  });
+}
+
+// Toggle the schedule when an element in the dropdown is selected
+let dayOfWeek_onclick = function() {
+  let select = document.getElementById("day_select");
+  // Iterate through the select menu and look for the selected option
+  for (let i = 0; i < select.length; i++) {
+    if (select.options[i].innerHTML === this.innerHTML) {
+      // Toggle the schedule for the selected day
+      select.selectedIndex = i;
+      select.addEventListener("change", schedule_toggle(i));
+      // Change the HTML of the select menu to match the day shown
+      document.getElementById("day_select_div").innerHTML = this.innerHTML;
+      // Hide the other dropdown items when one is selected
+      document.getElementsByClassName("day_select-items")[0].classList.add("select-hide");
+      // Flip the dropdown arrow
+      document.getElementById("day_select_div").classList.remove("day_select-arrow-active");
+      // Update selected_day_of_week
+      selected_day_of_week = i;
+      break;
+    }
+  }
+}
+
 // To add a tooltip to anything, follow these 3 easy steps
 // 1. Make sure the element allows for overflow
 // 2. Make sure the element's position is clearly defined as relative or absolute or something

public/js/home.js

@@ -956,6 +956,7 @@ function responseCallback(response, includedTerms) {
         success: scheduleCallback
     });
 
+    initialize_dayOfWeek_dropdown();
     setup_tooltips();
 }