lib/cust/main.css

-/*
-	IMPORTS
-*/
-
-@font-face {
-    font-family: DINPro;
-    font-weight: normal;
-    src: url(../../res/fonts/DINPro-Light.ttf);
-}
-@font-face {
-    font-family: DINPro;
-    font-weight: bold;
-    src: url(../../res/fonts/DINPro-Bold.ttf);
-}
-
-/*
-	GENERAL SETUP
-*/
-
-* {
-    margin: 0;
-    padding: 0;
-}
-html, body {
-    width: 100%;
-    height: 100%;
-}
-body {
-    font-family: DINPro;
-    overflow: hidden;
-}
-
-/*
-	UTILITY CLASSES
-*/
-
-.smooth {
-    -webkit-transition: all 0.5s ease;
-    -moz-transition: all 0.5s ease;
-    -o-transition: all 0.5s ease;
-    transition: all 0.5s ease;
-}
-
-/*
-	LOGIN PANEL
-*/
-
-.loginPanel {
-    width: 100%;
-    height: 100%;
-    top: 0%;
-    left: 0%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: fixed;
-    z-index: 20;
-    //background: rgba(30,30,30,.9);
-    background: rgba(31, 45, 84, 1);
-}
-.loginPanel>div {
-    box-shadow: 0 0 2em #000;
-}
-.loginPanel .login-logo {
-    width: 70%;
-}
-
-/*
-	MAIN FRAMEWORK
-*/
-
-.wrapper-main {
-    height: 100%;
-    width: 100%;
-    top: 0;
-    left: 0;
-}
-.wrapper-main.toggled {
-    padding-left: 250px;
-}
-.wrapper-sidebar {
-    z-index: 10;
-    left: 250px;
-    width: 0px;
-    height: 100%;
-    margin-left: -250px;
-    overflow-y: auto;
-    position: fixed;
-    background: #222;
-    color: #fff;
-    box-shadow: 0 0 1em rgba(0, 0, 0, 0.5);
-}
-.wrapper-main.toggled .wrapper-sidebar {
-    width: 250px;
-}
-.nav-sidebar .navbar ul {
-    float: none;
-    display: block;
-}
-.wrapper-sidebar .navbar li {
-    float: none;
-    display: block;
-}
-@media(min-width:768px) {
-    .wrapper-main {
-        padding-left: 250px;
-    }
-    .wrapper-main.toggled {
-        padding-left: 0px;
-    }
-    .wrapper-sidebar {
-        width: 250px;
-    }
-    .wrapper-main.toggled .wrapper-sidebar {
-        width: 0px;
-    }
-}
-.wrapper-sidebar ul li a {
-    color: inherit;
-}
-.wrapper-sidebar ul li a:hover, .wrapper-sidebar ul li a:active, .wrapper-sidebar ul li a:focus {
-    color: #000;
-}
-.wrapper-sidebar>div {
-    padding: 1em;
-}
-.wrapper-sidebar .sidebar-logo {
-    width: 100%;
-}
-.wrapper-content {
-    margin-top: -20px;
-    //height: calc(100vh - 51px);
-    background: #eee;
-    width: 100%;
-    overflow: auto;
-}
-
-/*
-	MAIN NAVBAR
-*/
-
-.navbar-main .container-fluid>ul>li {
-    float: left;
-}
-
-/*
-	LOG BAR
-*/
-
-.alertCont {
-    position: fixed;
-    z-index: 10000;
-    left: 50%;
-    top: 10px;
-    transform: translateX(-50%);
-}

lib/cust/main.js

-'use strict';
-
-// Library for all tool actions
-var tools = {
-
-    //Log Function & Utility Vars
-    alertElems: [],
-    alertNum: 0,
-    alertType: {
-        's': 'alert-success',
-        'i': 'alert-info',
-        'w': 'alert-warning',
-        'e': 'alert-danger'
-    },
-    log: function(msg, type, timeout) {
-        timeout = timeout || 5000;
-        tools.alertNum++;
-        $('.alertCont').append('<div id="alertBox-' + tools.alertNum + '" class="alert ' + tools.alertType[type] + ' alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>' + msg + '</div>');
-        tools.alertElems.push(tools.alertNum);
-        setTimeout(function() {
-            $('#alertBox-' + tools.alertElems[0]).alert('close');
-            tools.alertElems.shift();
-        }, timeout);
-        console.log(msg);
-    },
-
-    // Modal function
-    modalFunc: {
-        init: 0,
-    },
-    modalClose: function() {
-        $('.modalCont').modal('hide');
-    },
-    modal: function(attr) {
-        attr = attr || {};
-        if (attr.cancel !== undefined && typeof(attr.cancel) == 'function')
-            tools.modalFunc.cancel = attr.cancel;
-        if (!tools.modalFunc.init) {
-            $('.modalCont').on('hide.bs.modal', tools.modalFunc.cancel);
-            tools.modalFunc.init = 1;
-        }
-        $('.modalCont .modal-title').html(attr.head);
-        $('.modalCont .modal-body').html(attr.body);
-        $('.modalCont .modal-footer').html('<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>');
-        var modalBtnId = 0;
-        for (var curBtn in attr.button) {
-            if (attr.button[curBtn].type === undefined || attr.button[curBtn].type == '')
-                attr.button[curBtn].type = 'primary';
-            $('.modalCont .modal-footer').append('<button type="button" class="btn btn-' + attr.button[curBtn].type + ' modal-btn-' + modalBtnId + '">' + curBtn + '</button>');
-            if (attr.button[curBtn].callback !== undefined && typeof(attr.button[curBtn].callback) == 'function')
-                $('.modal-btn-' + modalBtnId).off('click').on('click', attr.button[curBtn].callback);
-            if (attr.button[curBtn].close === true)
-                $('.modal-btn-' + modalBtnId).on('click', tools.modalClose);
-            modalBtnId++;
-        }
-        $('.modalCont').modal('show');
-    },
-
-    // Ajax loading gunction and getting the tools
-    curTool: '',
-    getTool: function(tool) {
-        //Setting home if no other tool is selected
-        if (window.location.hash == '' || window.location.hash == null)
-            window.location.hash = 'home';
-        // If tool is specfied, get it
-        var nextTool = (tool && typeof tool != 'object') ? tool : window.location.hash.slice(1);
-        if (tools.curTool == nextTool)
-            return;
-        tools.curTool = nextTool;
-        window.location.hash = tools.curTool;
-        $('#wheel-logo').css('transform', 'rotate(360deg)');
-        $('#main-content').fadeOut(100, function() {
-            // Reset Custom menu
-            tools.ui.menu();
-            $.ajax({
-                url: 'tools/' + tools.curTool + '.tool',
-                dataType: 'html',
-                error: function() {
-                    tools.log('Tool not found', 'e');
-                }
-            }).done(function(data) {
-                $('#main-content').html(data);
-                $('#main-content').fadeIn(250, function() {
-                    $('#wheel-logo').css('transform', 'rotate(0deg)');
-                });
-            });
-        });
-    },
-
-    // UI Stuff
-    ui: {
-        //Toggle the sidemenu
-        toggleSideMenu: function() {
-            $('.wrapper-main').toggleClass('toggled');
-        },
-        login: function() {
-            $('.loginPanel').css({
-                'top': '-100%'
-            });
-        },
-        logout: function() {
-            $('.loginPanel').css({
-                'top': '0%'
-            });
-        },
-        resizeTool: function() {
-            $('.wrapper-content').height($(window).height() - $('.navbar-main').height());
-        },
-        menuId: 0,
-        menu: function(attr) {
-            var custMenu = $('.cust-menu');
-            custMenu.html('');
-            for (var cur in attr) {
-                tools.ui.menuId++;
-                if (attr[cur].link == '' || attr[cur].link === undefined)
-                    attr[cur].link = 'javascript:void(0);';
-                custMenu.append('<li><a href="' + attr[cur].link + '" id="cust-menu-link-' + tools.ui.menuId + '">' + cur + '</a></li>');
-                if (typeof(attr[cur].callback) == 'function')
-                    $('#cust-menu-link-' + tools.ui.menuId).on('click', attr[cur].callback);
-            }
-
-        }
-    },
-
-    // Memory to store stuff
-    memStore: function(type, name, val) {
-        window[type].setItem(name, val);
-    },
-    memGet: function(type, name) {
-        return window[type].getItem(name);
-    },
-    mem: {
-        local: {
-            set: function(name, val) {
-                tools.memStore('localStorage', tools.curTool + name, val);
-            },
-            get: function(name) {
-                return tools.memGet('localStorage', tools.curTool + name);
-            },
-        },
-        session: {
-            set: function(name, val) {
-                tools.memStore('sessionStorage', tools.curTool + name, val);
-            },
-            get: function(name) {
-                return tools.memGet('sessionStorage', tools.curTool + name);
-            },
-        }
-    }
-}
-
-/*
-	Initialization of page
-*/
-
-//Turning off cache for ajax on dev stage
-$.ajaxSetup({
-    cache: false
-});
-
-//Binding tool change whenever the hash is changed
-window.onhashchange = tools.getTool;
-
-//Resizing Body when menu changes size and calling it on ready
-window.onresize = tools.ui.resizeTool;
-
-
-// Login function
-function loginFunc() {
-    $('.loginPanel input').attr('readonly', 1);
-    amivcore.login($('#loginUsername').val(), $('#loginPassword').val(), function(ret) {
-        if (ret !== true)
-            tools.log('Wrong Credentials', 'w');
-        $('.loginPanel input').removeAttr('readonly');
-    });
-    amivcore.login($('#loginUsername').val(), $('#loginPassword').val(), function(ret) {
-        if (ret !== true)
-            tools.log('Wrong Credentials', 'w');
-        $('.loginPanel input').removeAttr('readonly');
-    });
-}
-
-// When document loaded
-$(document).ready(function() {
-    // Resizing main wrapper-main
-    tools.ui.resizeTool();
-    
-    // Binding the buttons
-    $('.toggleSidebarBtn').click(tools.ui.toggleSideMenu);
-    $('.loginAction').click(loginFunc);
-    $('.logoutAction').click(amivcore.logout);
-    $('.loginPanel').keypress(function(e) {
-        if (e.which == 13) {
-            e.preventDefault();
-            loginFunc();
-        }
-    });
-});
-
-amivcore.on('ready', function() {
-    tools.getTool();
-});
-amivcore.on('login', function() {
-    tools.ui.login();
-});
-amivcore.on('logout', function() {
-    tools.ui.logout();
-});

nginx.conf

+server {
+  listen         80 default_server;
+  listen         [::]:80 default_server;
+  server_name    _;
+  root           /var/www/;
+  index          index.html;
+
+  try_files $uri /index.html =404;
+}

package.json

+{
+  "name": "amiv-admintools",
+  "version": "0.0.1",
+  "description": "Admintools to access the AMIV API.",
+  "main": "index.js",
+  "scripts": {
+    "start": "webpack-dev-server --hot --inline",
+    "build": "webpack -p --config webpack.config.prod.js",
+    "build-dev": "webpack -p --config webpack.config.dev.js",
+    "build-staging": "webpack -p --config webpack.config.staging.js",
+    "build-local": "webpack -p --config webpack.config.local.js",
+    "lint": "eslint src/**/*.js src/*.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@gitlab.ethz.ch:amiv/amiv-admintool.git"
+  },
+  "author": "Hermann Blum et al",
+  "dependencies": {
+    "@material/drawer": "^0.30.0",
+    "@material/select": "^0.35.1",
+    "ajv": "^5.5.0",
+    "amiv-web-ui-components": "git+https://git@gitlab.ethz.ch/amiv/web-ui-components.git#360e65da63f4511db1f6ac56ce103be9254d1d9f",
+    "axios": "^0.17.1",
+    "client-oauth2": "^4.2.0",
+    "mithril": "^1.1.6",
+    "mithril-infinite": "^1.2.4",
+    "polythene-core-css": "^1.2.0",
+    "polythene-css": "^1.2.0",
+    "polythene-mithril": "1.2.0",
+    "querystring": "^0.2.0",
+    "showdown": "^1.9.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.2.3",
+    "@babel/core": "^7.2.2",
+    "@babel/plugin-proposal-object-rest-spread": "^7.2.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "@babel/preset-env": "^7.2.3",
+    "babel-eslint": "^10.0.1",
+    "babel-loader": "^8.0.4",
+    "compression-webpack-plugin": "^2.0.0",
+    "css-loader": "^2.1.0",
+    "eslint": "^5.16.0",
+    "eslint-config-airbnb-base": "^13.1.0",
+    "eslint-import-resolver-webpack": "^0.10.1",
+    "eslint-loader": "^3.0.0",
+    "eslint-plugin-import": "^2.14.0",
+    "file-loader": "^3.0.1",
+    "style-loader": "^0.23.1",
+    "webpack": "^4.28.3",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.1.14"
+  }
+}