Update directory structure in WebHostLib

WebHostLib/static/assets/generate.js

@@ -0,0 +1,9 @@
+window.addEventListener('load', () => {
+    document.getElementById('upload-button').addEventListener('click', () => {
+        document.getElementById('file-input').click();
+    });
+
+    document.getElementById('file-input').addEventListener('change', () => {
+        document.getElementById('upload-form').submit();
+    });
+});

WebHostLib/static/assets/jquery.scrollsync.js

@@ -0,0 +1,114 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('jquery')) :
+      typeof define === 'function' && define.amd ? define(['exports', 'jquery'], factory) :
+          (factory((global.$ = global.$ || {}, global.$.fn = global.$.fn || {}), global.$));
+}(this, (function (exports, $) {
+  'use strict';
+
+  $ = $ && $.hasOwnProperty('default') ? $['default'] : $;
+
+// 参考了（reference）：
+// debouncing function from John Hann
+// http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
+  function debounce(func, threshold) {
+    var timeout;
+    return function debounced() {
+      var obj = this, args = arguments;
+
+      function delayed() {
+        // 让调用smartresize的对象执行
+        func.apply(obj, args);
+        /*
+        timeout = null;：这个语句只是单纯将timeout指向null，
+        而timeout指向的定时器还存在，
+        要想清除定时器（让setTimeout调用的函数不执行）要用clearTimeout(timeout)。
+        eg：
+        var timeout = setTimeout(function(){
+          alert('timeout = null');// 执行
+        },1000);
+        timeout = null;
+        var timeout = setTimeout(function(){
+          alert('clearTimeout(timeout)');// 不执行
+        },1000);
+        clearTimeout(timeout);
+        var timeout = setTimeout(function(){
+          clearTimeout(timeout);
+          alert('clearTimeout(timeout)');// 执行（已经开始执行匿名函数了）
+        },1000);
+        */
+        timeout = null;
+      }
+
+      // 如果有timeout正在倒计时，则清除当前timeout
+      timeout && clearTimeout(timeout);
+      timeout = setTimeout(delayed, threshold || 100);
+    };
+  }
+
+  function smartscroll(fn, threshold) {
+    return fn ? this.bind('scroll', debounce(fn, threshold)) : this.trigger('smartscroll');
+  }
+
+//jquery-smartscroll
+  $.fn.smartscroll = smartscroll;
+
+  function scrollsync(options) {
+    var defaluts = {
+      x_sync: true,
+      y_sync: true,
+      use_smartscroll: false,
+      smartscroll_delay: 10,
+    };
+
+    // 使用jQuery.extend 覆盖插件默认参数
+    var options = $.extend({}, defaluts, options);
+    console.log(options);
+
+    var scroll_type = options.use_smartscroll ? 'smartscroll' : 'scroll';
+    var $containers = this;
+
+    // 滚动后设置scrolling的值，调用set同步滚动条
+    var scrolling = {};
+    Object.defineProperty(scrolling, 'top', {
+      set: function (val) {
+        $containers.each(function () {
+          $(this).scrollTop(val);
+        });
+      }
+    });
+    Object.defineProperty(scrolling, 'left', {
+      set: function (val) {
+        $containers.each(function () {
+          $(this).scrollLeft(val);
+        });
+      }
+    });
+
+    $containers.on({
+      mouseover: function () {
+        if (scroll_type == 'smartscroll') {
+          $(this).smartscroll(function () {
+            options.x_sync && (scrolling.top = $(this).scrollTop());
+            options.y_sync && (scrolling.left = $(this).scrollLeft());
+          }, options.smartscroll_delay);
+          return;
+        }
+        $(this).bind('scroll', function () {
+          options.x_sync && (scrolling.top = $(this).scrollTop());
+          options.y_sync && (scrolling.left = $(this).scrollLeft());
+        });
+      },
+      mouseout: function () {
+        $(this).unbind('scroll');
+      }
+    });
+
+
+    return this;
+  }
+
+  exports.scrollsync = scrollsync;
+
+  Object.defineProperty(exports, '__esModule', {value: true});
+
+})));

WebHostLib/static/assets/layout.js

@@ -0,0 +1,20 @@
+window.addEventListener('load', () => {
+    const cookieNoticeShown = localStorage.getItem('cookieNotice');
+    if (cookieNoticeShown) { return; }
+
+    const cookieNotice = document.createElement('div');
+    cookieNotice.innerText = "This website uses cookies to store information about the games you play.";
+    cookieNotice.style.position = "fixed";
+    cookieNotice.style.bottom = "0";
+    cookieNotice.style.left = "0";
+    cookieNotice.style.width = "100%";
+    cookieNotice.style.lineHeight = "40px";
+    cookieNotice.style.backgroundColor = "#c7cda5";
+    cookieNotice.style.textAlign = "center";
+    cookieNotice.style.cursor = "pointer";
+    document.body.appendChild(cookieNotice);
+    cookieNotice.addEventListener('click', () => {
+        localStorage.setItem('cookieNotice', "1");
+        document.body.removeChild(cookieNotice);
+    });
+});

WebHostLib/static/assets/tracker.js

@@ -0,0 +1,67 @@
+const adjustTableHeight = () => {
+    const tablesContainer = document.getElementById('tables-container');
+    const upperDistance = tablesContainer.getBoundingClientRect().top;
+
+    const containerHeight = window.innerHeight - upperDistance;
+    tablesContainer.style.maxHeight = `calc(${containerHeight}px - 1rem)`;
+
+    const tableWrappers = document.getElementsByClassName('table-wrapper');
+    for(let i=0; i < tableWrappers.length; i++){
+        const maxHeight = (window.innerHeight - upperDistance) / 2;
+        tableWrappers[i].style.maxHeight = `calc(${maxHeight}px - 1rem)`;
+    }
+};
+
+window.addEventListener('load', () => {
+    const tables = $(".table").DataTable({
+        paging: false,
+        info: false,
+        dom: "t",
+
+        // DO NOT use the scrollX or scrollY options. They cause DataTables to split the thead from
+        // the tbody and render two separate tables.
+    });
+
+    document.getElementById('search').addEventListener('keyup', (event) => {
+        tables.search(event.target.value);
+        console.info(tables.search());
+        tables.draw();
+    });
+
+    const update = () => {
+        const target = $("<div></div>");
+        const tracker = document.getElementById('tracker-wrapper').getAttribute('data-tracker');
+        target.load("/tracker/" + tracker, function (response, status) {
+            if (status === "success") {
+                target.find(".table").each(function (i, new_table) {
+                    const new_trs = $(new_table).find("tbody>tr");
+                    const old_table = tables.eq(i);
+                    const topscroll = $(old_table.settings()[0].nScrollBody).scrollTop();
+                    const leftscroll = $(old_table.settings()[0].nScrollBody).scrollLeft();
+                    old_table.clear();
+                    old_table.rows.add(new_trs).draw();
+                    $(old_table.settings()[0].nScrollBody).scrollTop(topscroll);
+                    $(old_table.settings()[0].nScrollBody).scrollLeft(leftscroll);
+                });
+                $("#multi-stream-link").replaceWith(target.find("#multi-stream-link"));
+            } else {
+                console.log("Failed to connect to Server, in order to update Table Data.");
+                console.log(response);
+            }
+        })
+    }
+
+    setInterval(update, 30000);
+
+    window.addEventListener('resize', () => {
+        adjustTableHeight();
+        tables.draw()
+    });
+
+    $(".table-wrapper").scrollsync({
+        y_sync: true,
+        x_sync: true
+    });
+
+    adjustTableHeight();
+});

WebHostLib/static/assets/tutorial.js

@@ -0,0 +1,17 @@
+window.addEventListener('load', () => {
+    new Promise((resolve, reject) => {
+        let ajax = new XMLHttpRequest();
+        ajax.onreadystatechange = () => {
+            if (ajax.readyState !== 4) { return; }
+            if (ajax.status !== 200) { reject('Unable to retrieve tutorial markdown file.') }
+            resolve(ajax.responseText);
+        };
+        ajax.open('GET', 'static/tutorial.md', true);
+        ajax.send();
+    }).then((response) => {
+        let markdown = new showdown.Converter();
+        document.getElementById('tutorial-wrapper').innerHTML = markdown.makeHtml(response);
+    }).catch((error) => {
+        console.log(error);
+    });
+});

WebHostLib/static/assets/uploads.js

@@ -0,0 +1,17 @@
+window.addEventListener('load', () => {
+    document.getElementById('upload-button').addEventListener('click', () => {
+        document.getElementById('file-input').click();
+    });
+
+    document.getElementById('file-input').addEventListener('change', () => {
+        document.getElementById('upload-form').submit();
+    });
+
+    $("#uploads-table").DataTable({
+        "paging": false,
+        "ordering": true,
+        "order": [[ 3, "desc" ]],
+        "info": false,
+        "dom": "t",
+    });
+});

WebHostLib/static/assets/view_seed.js

@@ -0,0 +1,6 @@
+window.addEventListener('load', () => {
+    const timeElement = document.getElementById('creation-time');
+    const creationTime = timeElement.getAttribute('data-creation-time');
+    const creationDate = new Date(creationTime);
+    timeElement.innerText = creationDate.toLocaleString();
+});