Dashboard for 4 streams

static/css/dashboard.css

@@ -0,0 +1,2 @@
+.dashboard{min-height:100vh;min-width:100%}.dashboard--elem{position:relative;border:1px dashed gainsboro;width:50%;float:left;height:50vh;background-image:url('../img/dragdrop.png');background-repeat:no-repeat;background-position:center center;background-size:100px 100px}.dashboard--elem.small{display:none}.dashboard--elem.small--panel{display:none}.dashboard--elem.fullscreen{display:block !important;height:100vh !important;width:100% !important}.dashboard--elem--panel{z-index:999;position:absolute;left:15px;top:15px;background-color:black;border-radius:15px;color:white;text-align:center;padding:10px}.dashboard--elem--panel span{cursor:pointer;margin-left:10px}.dashboard--elem--panel span:first-child{margin-left:0}
+/*# sourceMappingURL=dashboard.css.map */

static/css/dashboard.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["dashboard.less"],"names":[],"mappings":"AAEA,WACI,iBACA,cAAA,CACA,iBACI,kBACA,4BACA,UACA,WACA,YACA,4CACA,4BACA,kCACA,2BAAA,CAEA,uBACI,YAAA,CACA,8BACI,YAAA,CAIR,4BACI,yBACA,wBACA,qBAAA,CAGJ,wBACI,YACA,kBACA,UACA,SACA,uBACA,mBACA,YACA,kBACA,YAAA,CATJ,6BAcQ,eACA,gBAAA,CAJA,yCACI,aAAA,CAAA","file":"to.css"}

static/css/dashboard.less

@@ -0,0 +1,49 @@
+//autoprefixer: true, sourceMap: true, compress: true
+
+.dashboard {
+    min-height: 100vh;
+    min-width: 100%;
+    &--elem{
+        position: relative;
+        border: 1px dashed gainsboro;
+        width: 50%;
+        float: left;
+        height: 50vh;
+        background-image: url('../img/dragdrop.png');
+        background-repeat: no-repeat;
+        background-position: center center;
+        background-size: 100px 100px;
+        
+        &.small {
+            display: none;
+            &--panel{
+                display: none;
+            }
+        }
+        
+        &.fullscreen {
+            display: block!important;
+            height: 100vh!important;
+            width: 100%!important;
+        }
+        
+        &--panel{
+            z-index: 999;
+            position: absolute;
+            left: 15px;
+            top: 15px;
+            background-color: black;
+            border-radius: 15px;
+            color:white;
+            text-align: center;
+            padding: 10px;
+            span{
+                &:first-child{
+                    margin-left: 0px;
+                }
+                cursor: pointer;
+                margin-left: 10px;
+            }
+        }
+    }
+}

static/dashboard.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="cache-control" content="no-cache">
+    <meta http-equiv="pragma" content="no-cache">
+    <meta http-equiv="expires" content="0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <script src="bower_components/jquery/dist/jquery.min.js"></script>
+    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
+
+    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="css/dashboard.css">
+    <script src="js/dashboard.js"></script>
+</head>
+<body>
+    <div class="dashboard">
+        <div ondragover="return false" ondragenter="return false" class="dashboard--elem"></div>
+        <div ondragover="return false" ondragenter="return false" class="dashboard--elem"></div>
+        <div ondragover="return false" ondragenter="return false" class="dashboard--elem"></div>
+        <div ondragover="return false" ondragenter="return false" class="dashboard--elem"></div>
+    </div>
+</body>
+</html>

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;
+  });
+
+});