website/downtime.shtml at master · sc0v/website · 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
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
<!doctype html>
<html class="no-js" lang="en">
    <head>
        <title>Events - Carnegie Mellon Spring Carnival</title>
        <!--#include virtual="html/head.html" -->
        <style>
          .closed_class {
            background-color: #ff6b6b;
            color: white;
            padding: 15px;
            border-radius: 5px;
            text-align: center;
            min-height: 150px;
            display: flex;
            flex-direction: column;
            justify-content: center;
          }

          .open_class {
            background-color: #51cf66;
            color: white;
            padding: 15px;
            border-radius: 5px;
            text-align: center;
            min-height: 150px;
            display: flex;
            flex-direction: column;
            justify-content: center;
          }

          .hours-notice {
            color: black;
            padding: 10px;
            text-align: center;
            margin-bottom: 20px;
            border-radius: 5px;
            font-weight: bold;
          }

          #parent {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            grid-template-rows: auto;
            grid-column-gap: 20px;
            grid-row-gap: 20px;
          }
        </style>
      </head>
    <body>
      <!--#include virtual="html/google-tag-manager.html" -->
        <div id="all">
            <header class="row header home">
              <!--#include virtual="html/header.html" -->
            </header>
            <!--#include virtual="html/navigation.html" -->
            <article class="main">
                <!-- draw the boxes -->
                <div class="row">
                  <h1>
                    <center><b>Booth Status</b></center>
                  </h1>
                </div>
                <center><div class="large-8 large-centered">
                  <p>Booths are open every day of Carnival, but organizations can take a few hours
                      of downtime each day where their booth is closed. Here is the current status
                      of whether each booth is open or closed!
                  </p>
                </div></center>
                <div id="midway-notice"></div>
                <div class="container" id="container">
                    <div class="row">
                      <div id="parent"></div>
                    </div>
                  </div>
            </article>
            <br class="largespacer"/>
            <!--#include virtual="html/footer.html" -->
    </body>
</html>
<!--#include virtual="html/script.html" -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>$("#nav-schedule").addClass("active");</script>
<script>$("#nav-booth-status").addClass("active");</script>

<script>
  const midwayHours = {
    4: { open: 15, close: 23 }, //thursday 3pm-11pm
    5: { open: 11, close: 22 }, //friday 11am-10pm
    6: { open: 11, close: 23 } //saturday 11am-11pm
  };


  const boothNames = {
    "SSA/HKSA/FSA/KASA" : "Monster's Inc",
    "Society of Women Engineers" : "Pitch Perfect",
    "KGB/PRISM" : "Sharknado",
    "MENASA/Spirit" : "Aladdin",
    "American Society of Civil Engineers" : "The Lego Movie",
    "Sustainable Earth/Theme Park Engineering Group" : "Jurassic Park",

    "Alpha Chi Omega" : "Inside Out",
    "Fringe" : "Muppet's Movie",
    "Delta Delta Delta" : "Jaws",
    "Alpha Phi" : "Barbie",
    "Chinese Students Association" : "Mulan",
    "Taiwanese Students Association" : "La La Land",
    "Alpha Phi Omega" : "Concessions",
    "Student Dormitory Council" : "Wall-E",

    "Delta Gamma" : "Charlie and the Chocolate Factory",
    "Phi Delta Theta" : "Men in Black",
    "Asian Student Association" : "Howl's Moving Castle",
    "Sigma Phi Epsilon" : "Indiana Jones",
    "Kappa Alpha Theta" : "Interstellar",
    "Kappa Kappa Gamma" : "Toy Story",
    "Alpha Epsilon Pi" : "The Simpson's Movie/Universe",
  };

  function isMidwayOpen() {
    const now = new Date();
    const day = now.getDay();
    const hours = now.getHours();
    if (midwayHours[day]) {
      const { open, close } = midwayHours[day];
      return hours >= open && hours < close;
    }
    return false;
  }


  function fetchDowntimeData() {
    $.ajax({
      url: 'https://binder.springcarnival.org/downtime.json',
      method: 'GET',
      dataType: 'json',
      success: function(data) {
        updateBoxes(data);
      },
      error: function(xhr, status, error) {
        console.error('Error fetching downtime data:', error);
      }
    });
  }

  function updateBoxes(data) {
    const parent = $('#parent');
    parent.empty();
    const midwayOpen = isMidwayOpen();

    $('#midway-notice').html(!midwayOpen ? '<div class="hours-notice">MIDWAY IS CURRENTLY CLOSED</div>' : '');

    Object.keys(data).sort().forEach(org => {
      const boothName = boothNames[org];
      if (!boothName) {
        return;
      }
      const isOpen = data[org] && midwayOpen;
      const statusText = isOpen ? "OPEN" : "CLOSED";
      const boxClass = isOpen ? "open_class" : "closed_class";

      const boxContent = `
        <div class="${boxClass}">
          <div style="font-size: 1.8em; font-weight: 800;">${boothName}</div><br>
          ${boothName !== org ? `<div style="font-weight: 600;">By ${org}</div><br>` : ''}
          <div>${statusText}</div>
        </div>
      `;
      parent.append(boxContent);
    });
  }
  fetchDowntimeData();
  setInterval(fetchDowntimeData, 30000);
</script>