add recordings table

app/assets/javascripts/application.js

@@ -12,6 +12,8 @@
 //
 //= require jquery2
 //= require jquery-ui
+//= require dataTables/jquery.dataTables
+//= require dataTables/bootstrap/3/jquery.dataTables.bootstrap
 //= require bootstrap-sprockets
 //= require turbolinks
 //= require_self

app/assets/javascripts/landing.js

@@ -1,4 +1,6 @@
 (function() {
+  var recordingsTable = null;
+
   var waitForModerator = function(url) {
     $.get(url + "/wait", function(html) {
       $(".center-panel-wrapper").html(html);
@@ -72,8 +74,103 @@
       window.location.hostname +
       meetingURL.data('path');
     meetingURL.val(link);
+
+    // initialize recordings datatable
+    recordingsTable = $('#recordings').dataTable({
+      data: [],
+      rowId: 'id',
+      paging: false,
+      searching: false,
+      info: false,
+      ordering: false,
+      language: {
+        emptyTable: "Past recordings are shown here."
+      },
+      columns: [
+        { title: "Date Recorded", data: "start_time" },
+        { title: "Duration", data: "duration" },
+        { title: "Views", data: "playbacks" },
+        { title: "Actions", data: "id" }
+      ],
+      columnDefs: [
+        {
+          targets: 2,
+          render: function(data, type, row) {
+            if (type === 'display') {
+              var str = "";
+              for(let i in data) {
+                str += '<a href="'+data[i].url+'">'+data[i].type+'</a> ';
+              }
+              return str;
+            }
+            return data;
+          }
+        },
+        {
+          targets: -1,
+          render: function(data, type, row) {
+            if (type === 'display') {
+              var roomName = window.location.pathname.split('/').pop();
+              var published = row.published;
+              var eye = (published) ? 'eye' : 'eye-slash'
+              return '<button type="button" class="btn btn-default recording-update" data-id="'+data+'" data-room="'+roomName+'" data-published="'+published+'">' +
+                '<i class="fa fa-'+eye+'" aria-hidden="true"></i></button> ' +
+                '<button type="button" class="btn btn-default recording-delete" data-id="'+data+'" data-room="'+roomName+'">' +
+                '<i class="fa fa-trash-o" aria-hidden="true"></i></button>';
+            }
+            return data;
+          }
+        }
+      ]
+    });
+
+    $('#recordings').on('click', '.recording-update', function(event) {
+      var room = $(this).data('room');
+      var id = $(this).data('id');
+      var published = $(this).data('published');
+      $.ajax({
+        method: 'PATCH',
+        url: '/rooms/'+room+'/recordings/'+id,
+        data: {published: (!published).toString()}
+      }).done(function(data) {
+        $(this).prop("disabled", true);
+      });
+    });
+
+    $('#recordings').on('click', '.recording-delete', function(event) {
+      var room = $(this).data('room');
+      var id = $(this).data('id');
+      $.ajax({
+        method: 'DELETE',
+        url: '/rooms/'+room+'/recordings/'+id
+      }).done(function() {
+        $('tr[id="'+id+'"]').remove();
+      });
+    });
+
+    refreshRecordings();
   };
 
+  var refreshRecordings = function() {
+    if (!recordingsTable) {
+      return;
+    }
+    table = recordingsTable.api();
+    $.get("/rooms/"+window.location.pathname.split('/').pop()+"/recordings", function(data) {
+      var i;
+      for (i = 0; i < data.recordings.length; i++) {
+        var totalMinutes = Math.round((new Date(data.recordings[i].end_time) - new Date(data.recordings[i].start_time)) / 1000 / 60);
+        data.recordings[i].duration = totalMinutes;
+
+        data.recordings[i].start_time = new Date(data.recordings[i].start_time)
+          .toLocaleString([], {month: 'long', day: 'numeric', year: 'numeric', hour12: 'true', hour: '2-digit', minute: '2-digit'});
+      }
+      table.clear();
+      table.rows.add(data.recordings);
+      table.columns.adjust().draw();
+    });
+  }
+
   $(document).on("turbolinks:load", function() {
     init();
     if ($("body[data-controller=landing]").get(0)) {

app/assets/javascripts/shared.js

@@ -1,3 +1,9 @@
+$.ajaxSetup({
+  headers: {
+    'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
+  }
+});
+
 var meetingInstance = null;
 class Meeting {
   constructor(url, name) {

app/assets/stylesheets/application.css

@@ -11,7 +11,7 @@
  * It is generally better to create a new file per style scope.
  *
  *= require jquery-ui
- *= require dataTables/jquery.dataTables
+ *= require dataTables/bootstrap/3/jquery.dataTables.bootstrap
  *= require_tree .
  *= require_self
  */

app/assets/stylesheets/landing.scss

@@ -1,3 +1,9 @@
 // Place all the styles related to the landing controller here.
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
+
+.rooms {
+  .table-wrapper {
+    padding: 40px 50px 10px 50px;
+  }
+}