initial commit

dkgProgram.js

@@ -0,0 +1,109 @@
+
+$(document).ready( function () {
+  $.getJSON("https://infodocks.de/api/dkg2019/beitraege", data => {
+     var showData = data.map( item => {
+       item.speakers = item.Moderator1;
+       item.speakers = item.Moderator2 ? item.speakers + "<br>" + item.Moderator2 : item.speakers
+       return(item)
+     });
+     var table = $('#program').DataTable({
+        "data" : showData,
+        "columns" : [
+          { "data": "speakers" },
+          {
+            "className":      'details-control',
+            "orderable":      false,
+            "data":           null,
+            "defaultContent": '<i class="fas fa-plus-circle text-success">'
+          },
+          { "data": "titel" },
+          {
+            "className":  'fav',
+            "orderable":  false,
+            "data":       "id",
+            "render": function(data, type, row){
+              var saved = Cookies.getJSON();
+              var faved = saved.faved ? saved.faved : new Array;
+              var favedClass = faved.includes(data) ? "fas" : "far"; 
+              return '<i prog_id='+data+' class="fa-star text-warning '+favedClass+'">';
+            }
+          }
+       ],
+     });
+     $('#program tbody').on('click', 'td.fav', function() {
+       var tr = $(this).closest('tr');
+        var row = table.row( tr );
+        var saved = Cookies.getJSON();
+        if ( saved.faved && saved.faved.includes(row.data().id)) {
+          $(this).children("i").removeClass('fas');
+          $(this).children("i").addClass('far');
+          Cookies.set('faved', saved.faved.filter( i => i != row.data().id ));
+        } else {
+          var faved;
+          if (saved.faved) {
+            faved = saved.faved;
+          } else {
+            faved = new Array();
+          }
+          $(this).children("i").addClass('fas');
+          $(this).children("i").removeClass('far');
+          faved.push(row.data().id);
+          Cookies.set('faved', faved);
+        }
+        updateSchedule(data);
+      });
+      $('#program tbody').on('click', 'td.details-control', function () {
+        var tr = $(this).closest('tr');
+        var row = table.row( tr );
+        if ( row.child.isShown() ) {
+          row.child.hide();
+          tr.removeClass('shown');
+          $(this).children("i").removeClass('fa-minus-circle');
+          $(this).children("i").addClass('fa-plus-circle');
+        }
+        else {
+          row.child( format(row.data()) ).show();
+          tr.addClass('shown');
+          $(this).children("i").removeClass('fa-plus-circle');
+          $(this).children("i").addClass('fa-minus-circle');
+        }
+      });
+      updateSchedule(data);
+    });
+    $('#tablist a').on('click', function (e) {
+      e.preventDefault()
+      $(this).tab('show')
+    });
+});
+function updateSchedule(data) {
+  $("#schedule").text("");
+  var days = Array.from(new Set(data.map(i => i.datum)));
+  days = [3,0,2,1].map(i => days[i]);
+  days.forEach( d => {
+    $("#schedule").append("<h3 class='mt-3 mb-3'>"+d+"<h3>");
+    if(Cookies.getJSON().faved){
+      var sessions = data.filter( s => s.datum === d && Cookies.getJSON().faved.includes(s.id)).sort( (a,b) => (a.uhrzeit > b.uhrzeit) ? 1 : ((b.uhrzeit > a.uhrzeit) ? -1 : 0));
+      sessions.forEach( s => {
+        $("#schedule").append("<div class='card mb-3'>"+
+                              "<div class='card-header'>"+s.uhrzeit+ " | " +s.raumkuerzel+" <span class='float-right'><i sid='"+s.id+"' class='remove-fav fas fa-star fav text-warning'></i></span></div>"+
+                              "<div class='card-body'>"+
+                              "<div><i>"+s.speakers+"</i></div>"+
+                              "<div class='mt-2'>"+s.titel+"</div>"+
+                              "</div></div>");
+      });
+    }
+  });
+  $('#schedule i.remove-fav').on('click', function () {
+      console.log("triggered");
+      console.log($(this).attr("sid"));
+      Cookies.set('faved', Cookies.getJSON().faved.filter( i => i != $(this).attr("sid")));
+      updateSchedule(data);
+      $("[prog_id='"+$(this).attr("sid")+"']").removeClass("fas").addClass("far");
+  });
+}
+function format ( d ) {
+    return "<table class='table'><tr><th>Abstract:</th><td>" +d.abstract+"</td></tr>"+
+      "<tr><th>Time:</th><td>" +d.datum+ ", "+d.uhrzeit+"</td></tr>"+
+      "<tr><th>Place:</th><td>" +d.raumkuerzel+ "<td></tr>"+
+      "</table>";
+}

index.html

@@ -0,0 +1,61 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
+    <link rel="stylesheet" type="text/css" href="vendor/fontawesome/css/all.css">
+    <title>DKG Program</title>
+    <style>
+      @media (min-width: 768px) { .container{ max-width: 768px }}
+      td.fav, td.details-control {
+        cursor: pointer;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <div class="card mb-5 mt-5">
+        <div class="card-header">
+          <ul class="nav card-header-tabs nav-tabs mt-2" id="tablist">
+            <li class="nav-item">
+              <a class="nav-link active" href="#overview" role="tab">Program</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#schedule" role="tab">My schedule</a>
+            </li>
+          </ul>
+        </div>
+        <div class="card-body">
+          <div class="tab-content mt-3">
+            <div class="tab-pane active" id="overview" role="tabpanel">
+              <table id="program" class="table" style="width:100%">
+                <thead>
+                  <tr>
+                    <th>Presenters</th>
+                    <th></th>
+                    <th>Title</th>
+                    <th></th>
+                  </tr>
+                </thead>
+              </table>
+            </div>
+            <div class="tab-pane" id="schedule" role="tabpanel">
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- Optional JavaScript -->
+    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
+    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
+    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
+    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
+    <script type="text/javascript" charset="utf8" src="dkgProgram.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
+  </body>
+</html>

vendor/fontawesome/LICENSE.txt

@@ -0,0 +1,34 @@
+Font Awesome Free License
+-------------------------
+
+Font Awesome Free is free, open source, and GPL friendly. You can use it for
+commercial projects, open source projects, or really almost whatever you want.
+Full Font Awesome Free license: https://fontawesome.com/license/free.
+
+# Icons: CC BY 4.0 License (https://creativecommons.org/licenses/by/4.0/)
+In the Font Awesome Free download, the CC BY 4.0 license applies to all icons
+packaged as SVG and JS file types.
+
+# Fonts: SIL OFL 1.1 License (https://scripts.sil.org/OFL)
+In the Font Awesome Free download, the SIL OFL license applies to all icons
+packaged as web and desktop font files.
+
+# Code: MIT License (https://opensource.org/licenses/MIT)
+In the Font Awesome Free download, the MIT license applies to all non-font and
+non-icon files.
+
+# Attribution
+Attribution is required by MIT, SIL OFL, and CC BY licenses. Downloaded Font
+Awesome Free files already contain embedded comments with sufficient
+attribution, so you shouldn't need to do anything additional when using these
+files normally.
+
+We've kept attribution comments terse, so we ask that you do not actively work
+to remove them from files, especially code. They're a great way for folks to
+learn about Font Awesome.
+
+# Brand Icons
+All brand icons are trademarks of their respective owners. The use of these
+trademarks does not indicate endorsement of the trademark holder by Font
+Awesome, nor vice versa. **Please do not use brand logos for any purpose except
+to represent the company, product, or service to which they refer.**