Dashboard for 4 streams

static/js/dashboard.js

@@ -0,0 +1,81 @@
+$( document ).ready(() => {
+
+  var counter = 0;
+
+  function generatePanel(i) {
+    return '<div class="dashboard--elem--panel">' +
+        '<span id="full' + i + '"><i class="glyphicon glyphicon-fullscreen"></i></span> ' +
+        '<span id="reload' + i +'"><i class="glyphicon glyphicon-repeat"></i></span>' +
+        '<span id="close' + i + '"><i class="glyphicon glyphicon-remove"></i></span> ' +
+        '</div>';
+  }
+
+  // add event listeners
+  function bindEvents(id) {
+    $( '#close' + id)[0].addEventListener('click', streamClose);
+    $( '#reload' + id)[0].addEventListener('click', streamReload);
+    $( '#full' + id)[0].addEventListener('click', streamFull);
+  }
+
+  // close frame with stream
+  function streamClose(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    $(this)[0].removeEventListener('click', streamClose);
+    let parent = $(this).parent('.dashboard--elem--panel').parent('.dashboard--elem');
+    parent.empty();
+    if(parent.hasClass('fullscreen')){
+      parent.removeClass('fullscreen');
+      $('.dashboard--elem').removeClass('hide');
+    }
+  }
+
+  // reload stream
+  function streamReload(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    let elem = $(this).parent('.dashboard--elem--panel').parent('.dashboard--elem');
+    let idStr = $(this).attr('id');
+    let id = parseInt(idStr.match(/(\d+)$/)[0]);
+    let html = elem.html();
+    elem.empty();
+    elem.html(html);
+
+    bindEvents(id);
+  }
+
+  function streamFull(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    let parent = $(this).parent('.dashboard--elem--panel').parent('.dashboard--elem');
+    if(parent.hasClass('fullscreen')){
+      parent.removeClass('fullscreen');
+      $('.dashboard--elem').removeClass('hide');
+    } else {
+      $('.dashboard--elem').addClass('hide');
+      parent.addClass('fullscreen');
+    }
+  }
+
+
+  $('.dashboard--elem').on('drop', function (e) {
+    console.log('drop');
+    e.preventDefault();
+    let target = e.target;
+    let url = e.originalEvent.dataTransfer.getData('URL');
+
+    if(!url || url.indexOf('https://gto.to/?r=') === -1){
+      return false;
+    }
+    $(target).empty();
+    let panel = generatePanel(counter);
+    $( this ).append( panel + '<iframe src="' + url + '" width="100%" height="100%" align="center">\n' +
+        '    Iframe is not supported\n' +
+        ' </iframe>' );
+
+    bindEvents(counter);
+    counter++;
+    return false;
+  });
+
+});