Get prototype working

1 files changed, 209 insertions, 220 deletions

diff --git a/static/fullnarp.js b/static/fullnarp.js
index 8b7d36d..3d60592 100644
--- a/static/fullnarp.js
+++ b/static/fullnarp.js
@@ -1,4 +1,9 @@
 let ws; // WebSocket instance
+let allrooms   = ['1','2','3']
+let allminutes = ['00','05','10','15','20','25','30','35','40','45','50','55']
+let allhours   = ['10','11','12','13','14','15','16','17','18','19','20','21','22','23','00','01','02'];
+let alldays    = ['1','2','3','4'];
+let raw_votes;
 
 function toggle_grid(whichDay) {
   var vclasses= [['in-list'], ['in-calendar', 'onlyday1'], ['in-calendar', 'onlyday2'], ['in-calendar', 'onlyday3'],
@@ -8,6 +13,128 @@ function toggle_grid(whichDay) {
   document.body.classList.add(...vclasses[whichDay]);
 }
 
+function render_lectures(data) {
+  for (item of data) {
+    /* Take copy of hidden event template div and select them, if they're in
+       list of previous prereferences */
+    var t = document.getElementById('template').cloneNode(true);
+    var event_id = item.event_id.toString();
+
+    t.classList.add('event', 'duration_' + item.duration, 'lang_' + (item.language || 'en'));
+    t.setAttribute('event_id', event_id);
+    t.setAttribute('id', 'event_' + event_id);
+    t.setAttribute('fullnarp-duration', item.duration);
+    t.setAttribute('draggable', 'true');
+
+    /* Sort textual info into event div */
+    t.querySelector('.title').textContent = item.title;
+    t.querySelector('.speakers').textContent = item.speaker_names;
+    t.querySelector('.abstract').append(item.abstract);
+
+    /* Store speakers and their availabilities */
+    window.event_speakers[event_id] = item.speakers;
+    for (speaker of item.speakers) {
+      var have_avails = false;
+      for (avail of speaker.availabilities) {
+        if (avail.id ) {
+          have_avails = true;
+          break;
+        }
+      }
+      if (!have_avails)
+        t.classList.add('has_unavailable_speaker');
+    }
+
+    /* Make the event drag&droppable */
+    t.ondragstart = function( event, ui ) {
+      event.stopPropagation();
+
+      event.dataTransfer.setData('text/plain', this.id );
+      event.dataTransfer.dropEffect = 'move';
+      event.dataTransfer.effectAllowed = 'move';
+      event.target.classList.add('is-dragged');
+    }
+
+    /* While dragging make source element small enough to allow
+       dropping below its original area */
+    t.ondrag = function( event, ui ) {
+      event.stopPropagation();
+      event.target.classList.add('is-dragged');
+
+      /* When drag starts in list view, switch to calendar view */
+      if( document.body.classList.contains('in-list') ) {
+        toggle_grid(5);
+        document.body.classList.add('was-list');
+      }
+      if( document.body.classList.contains('in-drag') )
+        return;
+
+      document.body.classList.add('in-drag');
+        /* mark all possible drop points regarding to availability */
+        for (hour of allhours)
+          for (minute of allminutes)
+            for (day of alldays)
+              document.querySelectorAll('.grid.day_'+day+'.time_'+hour+minute).forEach(elem => elem.classList.toggle('possible', check_avail(event.target, day, hour+minute)));
+
+    }
+
+    t.ondragend = function( event, ui ) {
+      event.stopPropagation();
+
+      /* We removed in-list and the drop did not succeed. Go back to list view */
+      if (document.body.classList.contains('was-list'))
+        toggle_grid(0);
+
+      document.querySelectorAll('.over').forEach(elem => elem.classList.remove('over'));
+      document.querySelectorAll('.is-dragged').forEach(elem => elem.classList.remove('id-dragged'));
+      document.querySelectorAll('.possible').forEach(elem => elem.classList.remove('possible'));
+      document.body.classList.remove('in-drag', 'was-list');
+    }
+
+    /* start_time: 2014-12-29T21:15:00+01:00" */
+    var start_time = new Date(item.start_time);
+
+    var day  = start_time.getDate()-26;
+    var hour = start_time.getHours();
+    var mins = start_time.getMinutes();
+
+    /* After midnight: sort into yesterday */
+    if( hour < 9 )
+      day--;
+
+    /* Fix up room for 38c3 */
+    room = (item.room_id || 'room_unknown').toString().replace('471','room1').replace('472','room2').replace('473','room3');
+
+    /* Apply attributes to sort events into calendar */
+    t.classList.add(room, 'day_' + day, 'time_' + (hour<10?'0':'') + hour + (mins<10?'0':'') + mins);
+    t.setAttribute('fullnarp-day', day);
+    t.setAttribute('fullnarp-time', (hour<10?'0':'') + hour + (mins<10?'0':'') + mins );
+    t.setAttribute('fullnarp-room', room.replace('room',''));
+
+    mark_avail(t);
+
+    t.onclick = function(event) {
+      _this = this;
+      document.body.classList.remove('in-drag');
+      if (document.body.classList.contains('correlate')) {
+        document.querySelectorAll('.selected').forEach(elem => elem.classList.remove('selected'));
+        document.querySelectorAll('.event').forEach(elem => mark_correlation(elem, _this));
+      }
+      _this.classList.toggle('selected');
+      document.querySelectorAll('.info').forEach(elem => elem.classList.add('hidden'));
+      event.stopPropagation();
+    }
+
+    /* Put new event into DOM tree. Track defaults to 'Other' */
+    var track = item.track_id.toString();
+    t.classList.add('track_' + track );
+    var d = document.getElementById(track);
+    if (!d)
+      d = document.getElementById('Other');
+    d.append(t);
+  }
+}
+
 function distribute_votes() {
   document.querySelectorAll('.event').forEach( function(element) {
     var eid = element.getAttribute('event_id');
@@ -37,8 +164,8 @@ function distribute_votes() {
 }
 
 function corr_for_eventids(id1, id2) {
-  var d = 0, c = 0, cd = 0, l = window.raw_votes.length;
-  for (item of window.raw_votes) {
+  var d = 0, c = 0, cd = 0, l = raw_votes.length;
+  for (item of raw_votes) {
     var x = 0;
     if( item.indexOf(id1) > -1 ) { ++d; x++;}
     if( item.indexOf(id2) > -1 ) { ++c; cd+=x; }
@@ -52,42 +179,42 @@ function corr_for_eventids(id1, id2) {
 }
 
 function show_all_correlates(el) {
-    /* First identify the room to see what other rooms to consider
-       correlates always grow from the top slot to the right,
-       unless there's an overlapping event to the left that starts earlier
-    */
-    var event_room = el.getAttribute('fullnarp-room');
-    var event_day = el.getAttribute('fullnarp-day');
-    var event_time = el.getAttribute('fullnarp-time');
-
-    if (!event_time) return;
-
-    var event_start;
-    try { event_start = time_to_mins(event_time); } catch(e) { return; }
-    var event_duration = el.getAttribute('fullnarp-duration') / 60;
-
-    /* Only test events to the right, if they start at the exact same time */
-    document.querySelectorAll('.event.day_'+event_day).forEach( function(check_el, index) {
-        var check_room = check_el.getAttribute('fullnarp-room');
-        if (event_room == check_room) return;
-
-        var check_time = check_el.getAttribute('fullnarp-time');
-        if (!check_time) return;
-        var check_start = time_to_mins(check_time);
-        var check_duration = check_el.getAttribute('fullnarp-duration') / 60;
-        var dist = check_el.getAttribute('fullnarp-room') - event_room;
-        var overlap = check_start < event_start + event_duration && event_start < check_start + check_duration;
-
-        if (!overlap) return;
-        if (event_start == check_start && dist <= 0) return;
-        if (event_start < check_start) return;
-
-        var corr = corr_for_eventids(el.getAttribute('event_id'), check_el.getAttribute('event_id'));
-        var dir = dist > 0 ? 'r' : 'l';
-        var div = document.createElement('div');
-        div.classList.add('corrweb', dir.repeat(Math.abs(dist)), 'day_' + event_day, 'room' + event_room, 'time_' + event_time, 'corr_d_' + corr);
-        document.body.appendChild(div);
-    })
+  /* First identify the room to see what other rooms to consider
+     correlates always grow from the top slot to the right,
+     unless there's an overlapping event to the left that starts earlier
+  */
+  var event_room = el.getAttribute('fullnarp-room');
+  var event_day = el.getAttribute('fullnarp-day');
+  var event_time = el.getAttribute('fullnarp-time');
+
+  if (!event_time) return;
+
+  var event_start;
+  try { event_start = time_to_mins(event_time); } catch(e) { return; }
+  var event_duration = el.getAttribute('fullnarp-duration') / 60;
+
+  /* Only test events to the right, if they start at the exact same time */
+  document.querySelectorAll('.event.day_'+event_day).forEach( function(check_el, index) {
+    var check_room = check_el.getAttribute('fullnarp-room');
+    if (event_room == check_room) return;
+
+    var check_time = check_el.getAttribute('fullnarp-time');
+    if (!check_time) return;
+    var check_start = time_to_mins(check_time);
+    var check_duration = check_el.getAttribute('fullnarp-duration') / 60;
+    var dist = check_el.getAttribute('fullnarp-room') - event_room;
+    var overlap = check_start < event_start + event_duration && event_start < check_start + check_duration;
+
+    if (!overlap) return;
+    if (event_start == check_start && dist <= 0) return;
+    if (event_start < check_start) return;
+
+    var corr = corr_for_eventids(el.getAttribute('event_id'), check_el.getAttribute('event_id'));
+    var dir = dist > 0 ? 'r' : 'l';
+    var div = document.createElement('div');
+    div.classList.add('corrweb', dir.repeat(Math.abs(dist)), 'day_' + event_day, 'room' + event_room, 'time_' + event_time, 'corr_d_' + corr);
+    document.body.appendChild(div);
+    });
 }
 
 function display_correlation() {
@@ -104,8 +231,8 @@ function display_correlation() {
 function mark_correlation(dest, comp) {
   var id1 = dest.getAttribute('event_id');
   var id2 = comp.getAttribute('event_id');
-  var d = 0, c = 0, cd = 0, l = window.raw_votes.length;
-  for (vote of window.raw_votes) {
+  var d = 0, c = 0, cd = 0, l =raw_votes.length;
+  for (vote of raw_votes) {
     var x = 0;
     if( vote.indexOf(id1) > -1 ) { ++d; x++;}
     if( vote.indexOf(id2) > -1 ) { ++c; cd+=x; }
@@ -208,8 +335,9 @@ function remove_event(event_id) {
   el.classList.add('pending');
   if (ws && ws.readyState === WebSocket.OPEN) {
     var message = {
+      action: "remove_event",
       lastupdate: window.lastupdate,
-      removeevent: event_id
+      event_id: event_id
     }
     ws.send(JSON.stringify(message));
     console.log('Sent:', message);
@@ -233,8 +361,9 @@ function set_all_attributes(event_id, day, room, time, from_server) {
        el.classList.add('pending');
        if (ws && ws.readyState === WebSocket.OPEN) {
             var message = {
+                action: "set_event",
                 lastupdate: window.lastupdate,
-                setevent: event_id,
+                event_id: event_id,
                 day: el.getAttribute('fullnarp-day'),
                 room: el.getAttribute('fullnarp-room'),
                 time: el.getAttribute('fullnarp-time')
@@ -264,26 +393,51 @@ function signalFullnarpConnect(state) {
     document.body.classList.add(state);
 }
 
-function getFullnarpData(lastupdate) {
+function getFullnarpData() {
     signalFullnarpConnect('fullnarp-connecting');
-    ws = new WebSocket('wss://erdgeist.org/38C3/halfnarp/fullnarp-ws');
+    ws = new WebSocket('wss://content.events.ccc.de/fullnarp/ws/');
 
     ws.onopen = () => {
         console.log('Connected to WebSocket server');
-        //stateElement.textContent = 'Connected';
+        var message = {
+            action: raw_votes ? "reconnect" : "bootstrap"
+        };
+        ws.send(JSON.stringify(message));
+        console.log('Sent:', message);
     };
 
     ws.onmessage = (event) => {
         signalFullnarpConnect('fullnarp-connected');
         const data = JSON.parse(event.data);
         console.log('Received:', data);
-        for (const [eventid, event_new] of Object.entries(data.data)) {
-            if (document.getElementById(eventid))
-                set_all_attributes(eventid, 'day_'+event_new['day'], 'room'+event_new['room'], 'time_'+event_new['time'], true )
+
+        switch (data.property) {
+
+          case 'pretalx':
+            render_lectures(data.data);
+            break;
+
+          case 'halfnarp':
+            for (eventidlist of data.data)
+              for (eventid of eventidlist)
+                window.votes[eventid] = 1 + (window.votes[eventid] || 0 );
+            raw_votes = data.data;
+            distribute_votes();
+            break;
+
+          case 'fullnarp':
+            for (const [eventid, event_new] of Object.entries(data.data)) {
+                if (document.getElementById(eventid))
+                    set_all_attributes(eventid, 'day_'+event_new['day'], 'room'+event_new['room'], 'time_'+event_new['time'], true )
+            }
+            window.lastupdate = data.current_version;
+            current_version_string = ('00000'+data.current_version).slice(-5);
+            document.querySelector('.version').innerHTML = '<a href="https://content.events.ccc.de/fullnarp/versions/fullnarp_'+current_version_string+'.json">Version: '+data.current_version+'</a>';
+            break;
+
+          default:
+            console.log(`Unknown property: ${data['property']}.`);
         }
-        window.lastupdate = data.current_version;
-        current_version_string = ('00000'+data.current_version).slice(-5);
-        document.querySelector('.version').innerHTML = '<a href="https://erdgeist.org/38C3/halfnarp/versions/fullnarp_'+current_version_string+'.json">Version: '+data.current_version+'</a>';
     };
 
     ws.onerror = (error) => {
@@ -302,11 +456,6 @@ function getFullnarpData(lastupdate) {
 function do_the_fullnarp() {
   var halfnarpAPI     = 'talks_38C3.json';
   var fullnarpAPI     = 'votes_38c3.json';
-  var allrooms        = ['1','2','3']
-  var allminutes      = ['00','05','10','15','20','25','30','35','40','45','50','55']
-  var allhours        = ['10','11','12','13','14','15','16','17','18','19','20','21','22','23','00','01','02'];
-  var alldays         = ['1','2','3','4'];
-  var voted           = 0;
   window.event_speakers = {};
   window.votes          = {};
 
@@ -383,8 +532,8 @@ function do_the_fullnarp() {
     elem.classList.add('guide', 'time_' + hour + '00');
     document.body.append(elem);
 
-    for (minute of allminutes) {
-      for (room of allrooms) {
+    for (minute of allminutes)
+      for (room of allrooms)
         for (day of alldays) {
           elem = document.createElement('div');
           elem.classList.add('grid', 'time_' + hour + minute, 'day_' + day, 'room' + room );
@@ -408,170 +557,10 @@ function do_the_fullnarp() {
             return false;
           }
         }
-      }
-    }
   }
 
-  /* Fetch list of votes to display */
-  fetch(`${fullnarpAPI}?format=json`)
-    .then(response => {
-      if (!response.ok) {
-        throw new Error(`HTTP error when fetching fullnarp data! status: ${response.status}`);
-      }
-      return response.json();
-    }).then(data => {
-      window.raw_votes = data;
-      for (eventidlist of data)
-        for (eventid of eventidlist)
-          window.votes[eventid] = 1 + (window.votes[eventid] || 0 );
-      if( ++voted == 2 ) {
-        window.lastupdate = 0;
-        distribute_votes();
-        getFullnarpData(0);
-      }
-    }).catch(error => {
-      console.error('Fetch error:', error);
-    });
-
-
-  /* Fetch list of lectures to display */
-  fetch(`${halfnarpAPI}?format=json`)
-    .then(response => {
-      if (!response.ok) {
-        throw new Error(`HTTP error when fetching halfnarp data! status: ${response.status}`);
-      }
-      return response.json();
-    }).then(data => {
-      for (item of data) {
-        /* Take copy of hidden event template div and select them, if they're in
-           list of previous prereferences */
-        var t = document.getElementById('template').cloneNode(true);
-        var event_id = item.event_id.toString();
-        t.classList.add('event', 'duration_' + item.duration, 'lang_' + (item.language || 'en'));
-        t.setAttribute('event_id', event_id);
-        t.setAttribute('id', 'event_' + event_id)
-        t.setAttribute( 'fullnarp-duration', item.duration);
-
-        /* Sort textual info into event div */
-        t.querySelector('.title').textContent = item.title;
-        t.querySelector('.speakers').textContent = item.speaker_names;
-        t.querySelector('.abstract').append(item.abstract);
-
-        /* Store speakers and their availabilities */
-        window.event_speakers[event_id] = item.speakers;
-        for (speaker of item.speakers) {
-            var have_avails = false;
-            if (!speaker.availabilities)
-              console.log("Foo");
-            for (avail of speaker.availabilities) {
-                if (avail.id ) {
-                    have_avails = true;
-                    break;
-                }
-            }
-            if (!have_avails)
-              t.classList.add('has_unavailable_speaker');
-        }
-
-        t.setAttribute('draggable', 'true');
-
-        /* Make the event drag&droppable */
-        t.ondragstart = function( event, ui ) {
-          event.stopPropagation();
-
-          event.dataTransfer.setData('text/plain', this.id );
-          event.dataTransfer.dropEffect = 'move';
-          event.dataTransfer.effectAllowed = 'move';
-          event.target.classList.add('is-dragged');
-        }
-
-        /* While dragging make source element small enough to allow
-           dropping below its original area */
-        t.ondrag = function( event, ui ) {
-          event.stopPropagation();
-          event.target.classList.add('is-dragged');
-
-          /* When drag starts in list view, switch to calendar view */
-          if( document.body.classList.contains('in-list') ) {
-            toggle_grid(5);
-            document.body.classList.add('was-list');
-          }
-          if( document.body.classList.contains('in-drag') )
-            return;
-
-          document.body.classList.add('in-drag');
-          /* mark all possible drop points regarding to availability */
-          for (hour of allhours)
-            for (minute of allminutes)
-              for (day of alldays)
-                document.querySelectorAll('.grid.day_'+day+'.time_'+hour+minute).forEach(elem => elem.classList.toggle('possible', check_avail(event.target, day, hour+minute)));
-
-        }
-
-        t.ondragend = function( event, ui ) {
-          event.stopPropagation();
-
-          /* We removed in-list and the drop did not succeed. Go back to list view */
-          if (document.body.classList.contains('was-list'))
-            toggle_grid(0);
-
-          document.querySelectorAll('.over').forEach(elem => elem.classList.remove('over'));
-          document.querySelectorAll('.is-dragged').forEach(elem => elem.classList.remove('id-dragged'));
-          document.querySelectorAll('.possible').forEach(elem => elem.classList.remove('possible'));
-          document.body.classList.remove('in-drag', 'was-list');
-        }
-
-        /* start_time: 2014-12-29T21:15:00+01:00" */
-        var start_time = new Date(item.start_time);
-
-        var day  = start_time.getDate()-26;
-        var hour = start_time.getHours();
-        var mins = start_time.getMinutes();
-
-        /* After midnight: sort into yesterday */
-        if( hour < 9 )
-            day--;
-
-        /* Fix up room for 38c3 */
-        room = (item.room_id || 'room_unknown').toString().replace('471','room1').replace('472','room2').replace('473','room3');
-
-        /* Apply attributes to sort events into calendar */
-        t.classList.add(room, 'day_' + day, 'time_' + (hour<10?'0':'') + hour + (mins<10?'0':'') + mins);
-        t.setAttribute('fullnarp-day', day);
-        t.setAttribute('fullnarp-time', (hour<10?'0':'') + hour + (mins<10?'0':'') + mins );
-        t.setAttribute('fullnarp-room', room.replace('room',''));
-
-        mark_avail(t);
-
-        t.onclick = function(event) {
-          _this = this;
-          document.body.classList.remove('in-drag');
-          if (document.body.classList.contains('correlate')) {
-            document.querySelectorAll('.selected').forEach(elem => elem.classList.remove('selected'));
-            document.querySelectorAll('.event').forEach(elem => mark_correlation(elem, _this));
-          }
-          _this.classList.toggle('selected');
-          document.querySelectorAll('.info').forEach(elem => elem.classList.add('hidden'));
-          event.stopPropagation();
-        }
-
-        /* Put new event into DOM tree. Track defaults to 'Other' */
-        var track = item.track_id.toString();
-        t.classList.add('track_' + track );
-        var d = document.getElementById(track);
-        if (!d)
-          d = document.querySelector('#Other');
-        d.append(t);
-    };
-
-    if( ++voted == 2 ) {
-      window.lastupdate = 0;
-      distribute_votes();
-      getFullnarpData(0);
-    }
-  }).catch(error => {
-    console.error('Fetch error:', error);
-  });
+  window.lastupdate = 0;
+  getFullnarpData();
 
   document.onkeypress = function(e) {
     document.body.classList.remove('in-drag');