Available-classroom/index.html at main · swas02/Available-classroom · GitHub

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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Classroom Availability Search</title>
    <script src="./room-ava/csv-to-json.js"></script>
    <script src="./room-ava/setCurrent.js" defer></script>
    <script src="./room-ava/search.js"></script>
    <script type="importmap">
      {
        "imports": {
          "three": "https://cdn.jsdelivr.net/npm/three/build/three.module.js",
          "three/addons/": "https://cdn.jsdelivr.net/npm/three/examples/jsm/"
        }
      }
    </script>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="left">
        <div id="tooltip"></div>
        <canvas id="threeJScanvas"></canvas>
      </div>
      <div class="right">
        <h1>Classroom Availability Search</h1>
        <center>
          <label for="day">Select Day:</label>
          <select id="day">
            <option value="Monday">Monday</option>
            <option value="Tuesday">Tuesday</option>
            <option value="Wednesday">Wednesday</option>
            <option value="Thursday">Thursday</option>
            <option value="Friday">Friday</option>
          </select>

          <label for="timeRange">Select Time Range:</label>
          <select id="timeRange">
            <option value="08:00-08:55">08:00-08:55</option>
            <option value="09:00-09:55">09:00-09:55</option>
            <option value="10:00-10:55">10:00-10:55</option>
            <option value="11:00-11:55">11:00-11:55</option>
            <option value="12:00-12:55">12:00-12:55</option>
            <option value="13:00-13:55">13:00-13:55</option>
            <option value="14:00-14:55">14:00-14:55</option>
            <option value="15:00-15:55">15:00-15:55</option>
            <option value="16:00-16:55">16:00-16:55</option>
            <option value="17:00-17:55">17:00-17:55</option>
            <option value="18:00-18:55">18:00-18:55</option>
          </select>

          <button
            id="search"
            onclick="handleSearch(window.classroomData)"
            disabled
          >
            Search
          </button>
        </center>
        <!-- Card Container -->
        <div class="container" id="cardsContainer"></div>
      </div>
    </div>
    <script>
      const exampleCsvUrl =
        "https://docs.google.com/spreadsheets/d/e/2PACX-1vTvByF_Y0AkNBqMHwmKluZ0nZIKJH92MY32r2FA-mcZVwl_fkMGYBscJRI6NFWxcoah5tQYujBhgc0F/pub?gid=0&single=true&output=csv";

      // Fetch the CSV and parse it into JSON
      getParsedDataFromUrl(exampleCsvUrl)
        .then((parsedData) => {
          if (parsedData) {
            window.classroomData = parsedData;
            document.querySelector("#search").removeAttribute("disabled");
          } else {
            alert("Failed to load or parse the data.");
          }
        })
        .catch((error) => {
          // Handle the error: provide more user-friendly feedback
          console.error("Error:", error); // Log the error in the console for debugging
          alert(
            `Something went wrong while fetching or parsing the data. Please try again later.\nError details: ${error.message}`
          );
        });

    </script>
    <script type="module" src="app.js" defer></script>
  </body>
</html>