add live updates

zitap/helpers.py

@@ -79,7 +79,7 @@ def slots2grid( event : Event, participants : list[Participant]) -> dict :
                 'offset': n*slots_per_day + j,
                 'date': date.date,
                 'time': current_time,
-                'class': f'color_{len(ps)}',
+                'color': len(ps),
                 'is_full_hour': current_time.hour != last_hour,
                 'is_half_hour': current_time.minute // 30 != last_half_hour,
             })
@@ -108,10 +108,5 @@ def slots2grid( event : Event, participants : list[Participant]) -> dict :
         'is_full_hour': True,
     })
 
-    # create a color for each slot from white to dark green
-    for i in range(max_occupancy+1):
-        data['colors'].append({
-            'color': f"hsl(120, 100%, {100 - 70 * i / max_occupancy}%)",
-            'name': f'color_{i}'
-        })
+    data['colors'] = max_occupancy
     return data

zitap/static/zitap/css/event.css

@@ -40,6 +40,7 @@
   flex-grow: 1;
   border-left: 1px solid #0000007d;
   border-right: 1px solid #0000007d;
+  background-color: hsl(120, 100%, calc(100% - 70% * var(--color-index) / var(--color-count)));
 }
 .occupancy-grid .slot.half-hour::after {
   content: " ";

zitap/static/zitap/js/live-updates.js

@@ -0,0 +1,33 @@
+window.addEventListener("load", function()
+{
+  const slotPicker = document.getElementsByClassName("slot-picker")[0]
+  const inputs = slotPicker.getElementsByTagName("input")
+
+  const occupancyGrid = document.getElementsByClassName("occupancy-grid")[0]
+  const gridSlots = occupancyGrid.getElementsByClassName("slot")
+  
+  const endpoint = `${window.location.href}/slots`
+  setTimeout(updateSlots, 1000)
+
+  function updateSlots()
+  {
+    setTimeout(updateSlots, 5000)
+    fetch(endpoint).then(response => response.json()).then(data => {
+      let maxParticipants = 0
+      for(let i=0; i<gridSlots.length; i++)
+      {
+        const slot = document.getElementById(`grid_slot_${i}`)
+        let participants = []
+        for(let participant in data)
+        {
+          if(data[participant][i] == '1')
+            participants.push(participant)
+        }
+        slot.style.setProperty("--color-index", participants.length)
+        slot.title = `${slot.title.split('\n')[0]}\n${participants.join(", ")}`
+        maxParticipants = Math.max(participants.length, maxParticipants)
+      }
+      occupancyGrid.style.setProperty("--color-count", maxParticipants)
+    })
+  }
+})

zitap/static/zitap/js/mouse-drag.js

@@ -1,4 +1,4 @@
-window.onload = function()
+window.addEventListener("load", function()
 {
   let dragStart = null
   let currentTargetChecked = null
@@ -94,5 +94,5 @@ window.onload = function()
     }
     
   }
-}
+})
 

zitap/templates/zitap/event.html

@@ -7,24 +7,17 @@
 {% block head %}
     <link rel="stylesheet" href="{% static 'zitap/css/event.css' %}">
     <link rel="stylesheet" href="{% static 'zitap/css/slot-picker.css' %}">
-    <style type="text/css">
-        {% for color in grid.colors %}
-            .occupancy-grid .slot.{{ color.name }} {
-                background-color: {{ color.color }};
-            }
-        {% endfor %}
-    </style>
 {% endblock %}
 
 {% block content %}
 <h1>{{ event.name }}</h1>
 
-<div class="occupancy-grid">
+<div class="occupancy-grid" style="--color-count:{{ grid.colors }}">
     {% for day in grid.days %}
     <div class="slot-column">
         <div class="day">{{ day.date|date:"M d" }}</div>
         {% for slot in day.slots %}
-        <div class="slot {{ slot.class }}{% if slot.is_full_hour %} full-hour{% elif slot.is_half_hour %} half-hour{% endif %}" id="grid_slot_{{ slot.offset }}" title="{{ slot.tooltip }}">
+        <div class="slot{% if slot.is_full_hour %} full-hour{% elif slot.is_half_hour %} half-hour{% endif %}" id="grid_slot_{{ slot.offset }}" title="{{ slot.tooltip }}" style="--color-index:{{ slot.color }}">
             {% if slot.is_full_hour %}<div class="time-label">{{ slot.time|date:"H:i" }}</div>{% endif %}
         </div>
         {% endfor %}
@@ -45,7 +38,7 @@
         {% trans "Logout" %}
     </button>
     <script type="text/javascript" src="{% static 'zitap/js/mouse-drag.js' %}"></script>
-{% else %}
+    {% else %}
     <form action="{% url 'login' url=event.url %}" method="post">
         {% csrf_token %}
         <table>
@@ -53,5 +46,6 @@
         </table>
         <input type="submit" value="Login to Update Slots">
     </form>
-{% endif %}
+    {% endif %}
+    <script type="text/javascript" src="{% static 'zitap/js/live-updates.js' %}"></script>
 {% endblock %}

zitap/views.py

@@ -144,6 +144,7 @@ def slots_api(request, url):
         participants = event.participant_set.all()
         for participant in participants:
             data[participant.user.username] = slots2string(participant, slot_count)
+            data[participant.user.username] = ''.join([random.choice(('0', '1')) for _ in range(slot_count)])
         
         return JsonResponse(data)