diff --git a/README.md b/README.md
index 32177b17d6e60f85f554bb596c8395898e636685..617eea8a822510d84547ffcb0282dc0e81d0c2a4 100644
--- a/README.md
+++ b/README.md
@@ -1,26 +1,19 @@
-# Frontend
-
-## Software
-
-### Admintool:
+# Admintool
+### Software:
* ```ubuntu /14.04.1```
* ```nginx /1.4.6```
-### Website:
-* undef.
-
-# Admintool
### Dependecies:
* ```jQuery /2.2.2```
* ```bootstrap /3.3.6```
* ```amivaccess /1.0```
-# Structure
+### File Structure:
* admin (Admintool)
* lib (Libraries)
* bootstrap
* jquery
- * amiv (amivaccess)
+ * amiv (amivcore)
* cust (custom files)
* main.js (our js file)
* main.css (our css file)
@@ -33,42 +26,112 @@
* main.tool
* users.tool
* ...
-* public (Website)
-
-
+* public (Website)
-### Library ```tools```:
-The JS library ```tools``` is the backbone of the single tools. It enables the tool itself to take actions, such as store data, spawn alert boxes, load new tools and more.
+## Library ```tools```:
+The JS library ```tools``` is the backbone of the single tools. It enables the tool itself to take actions, such as store data, customize the menu, spawn alert boxes, load new tools and more.
-#### log(msg, type, timeout)
-######Displays an alert box to the user.
+### log(msg, type, timeout)
+###### Displays an alert box to the user.
* ```msg /text,HTML``` The message or html to be displayed in the alert box
* ```type /('s', 'i', 'w', 'e')``` Specifies the type of message. Displays different colors for each type.
* s: success
* i: information
* w: warning
* e: error
-* ```timeout (optional)/int``` Number of milliseconds that the message will be displayed. If not specified the default time is 5s, or 5000ms.
+* ```timeout /int (optional)``` Number of milliseconds that the message will be displayed. If not specified the default time is 5s, or 5000ms.
+
##### Example:
* ``` tools.log('User updated!', 's'); ``` Creates a green alert box with the message specified that will disappear after 5000ms.
* ``` tools.log('Error!', 'e', 10000); ``` Creates a gred alert box with the message specified that will disappear after 10s.
-#### tools.getTool(tool)
-###### Loads the specified tool. If no tool is specified the tool in the navigaton bar (hashtag) will be choesn.
-* ```tool (optional)/text``` Specifies the tool.
+### modal(data)
+###### Spwans a BS modal.
+* ```data /js object``` Object containning the infos
+ * ```head /text, HTML (optional)``` Sets the modal title.
+ * ```body /text, HTML (optional)``` Sets the modal body.
+ * ```button /text, HTML (optional)``` Confirm button text.
+ * ```success /function (optional)``` Function called on confirm button press.
+ * ```cancel /function (optional)``` Function called on cancel or modal is closed.
+
+##### Example:
+```javascript
+tools.modal();
+//Creates an empty modal.
+
+tools.modal({
+ head: 'Download Flash Player!!',
+ body: 'Your browser needs this super important plugin',
+ button: 'DOWNLOAD!',
+ success: function(){
+ some.nasty.virus();
+ },
+ cancel: function(){
+ console.log('No Virus for you -.-');
+ }
+});
+// Makes a modal to download stuff
+```
+### getTool(tool)
+###### Loads the specified tool. If no tool is specified the tool in the navigaton bar (hashtag) will be chosen.
+* ```tool /text (optional)``` Specifies the tool.
+
##### Example:
* ``` tools.getTool('home'); ``` Will get the /res/tools/```home```.tool and loads it into the site.
+### ui
+###### The ```ui``` element allows you to access ui components (menu) and take actions (login, logout, toggleSideMenu).
+
#### toggleSideMenu()
-###### Toggles the sidebar
##### Example:
-* ```tools.toggleSideMenu();``` Toggles the sidebar
+* ```tools.ui.toggleSideMenu();``` Toggles the sidebar.
+
+#### menu(object)
+###### Allows a tool to access the top menu and have custom links and callbacks.
+* ```object /js object``` Menu structured element from which the menu is generated.
+ * ```link /link (optional)``` HTTP link or hash. If left empty the link is disabled.
+ * ```callback /function (optional)``` The function that is called if the link is pressed.
-#### mem.local & mem.session
-######The mem element can store data for the tools, used for multiple cases. There are 2 tyoes of storage: ```local``` hast no expiration and ```session``` is stored until you close the window or tab. Every tool has separated storage, so you don't need to worry about conflicting with other tools. The subfunctions are the same, a so only ```session``` wil be demonstraded here. local works identically.
+##### Example:
+```javascript
+tools.ui.menu({
+ 'Foo':{}
+});
+// Creates a single link element named 'Foo' without a href or callback
+
+tools.ui.menu({
+ 'Foo':{
+ link:'google.com'
+ }
+});
+// Creates a link named 'Foo' without a callback, but is linked to google.com
+
+tools.ui.menu({
+ 'Foo':{
+ callback: function (){
+ console.log('I was pressed!!');
+ }
+ }
+});
+// Creates a link 'Foo' and calles the function once the link is called
+
+tools.ui.menu({
+ 'Foo':{
+ link: '#trololo',
+ callback: function (){
+ console.log('I was pressed!!');
+ }
+ }
+});
+// Creates a link 'Foo' and calles the function once the link is called and the user gets redirected to #trololo.
+```
+
+
+### mem.local & mem.session
+###### The mem element can store data for the tools, used for multiple cases. There are 2 tyoes of storage: ```local``` hast no expiration and ```session``` is stored until you close the window or tab. Every tool has separated storage, so you don't need to worry about conflicting with other tools. The subfunctions are the same, a so only ```session``` wil be demonstraded here. local works identically.
#### set(name, value)
-######Sets and stores a value. If the value already exists it will be overwritten!
+###### Sets and stores a value. If the value already exists it will be overwritten!
* ```name /text``` Name of the 'variable'.
* ```value /any``` The data to be stored. Can be any valid JS data, object, etc.
diff --git a/admin/index.html b/admin/index.html
index 087c68feb8ff81788c096abb683e8c18c452ba6d..c98b5a9528af06d04e1bbf7b2b9433ec7935f380 100644
--- a/admin/index.html
+++ b/admin/index.html
@@ -1,11 +1,12 @@
<!DOCTYPE html>
<html lang="en">
+
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Admintool</title>
-
+
<link rel="apple-touch-icon" sizes="57x57" href="res/favicon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="res/favicon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="res/favicon/apple-icon-72x72.png">
@@ -23,39 +24,56 @@
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="res/favicon/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
-
+
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="lib/cust/main.css" rel="stylesheet">
</head>
+
<body>
<!-- Login Overlay-->
<div class="loginPanel smooth">
<div class="col-sm-4"></div>
- <div class="col-sm-4 well">
- <img width="70%" src="res/logo/main.svg" style="margin-left: 15%;">
- <div class="input-group">
- <input type="text" class="form-control" id="loginUsername" name="user" placeholder="user">
- <span class="input-group-addon">@student.ethz.ch</span>
+ <div class="col-sm-4 well">
+ <img class="login-logo" src="res/logo/main.svg" style="margin-left: 15%;" alt="AMIV Logo">
+ <div class="input-group">
+ <input type="text" class="form-control" id="loginUsername" name="user" placeholder="user">
+ <span class="input-group-addon">@student.ethz.ch</span>
+ </div>
+ <br>
+ <input type="password" class="form-control" id="loginPassword" name="password" placeholder="password">
+ <br>
+ <button type="submit" class="btn btn-default loginAction">Submit</button>
+ </div>
+ <div class="col-sm-4"></div>
+ </div>
+
+ <!-- Modal -->
+ <div class="modal fade modalCont" tabindex="-1" role="dialog">
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
+ <h4 class="modal-title"></h4>
+ </div>
+ <div class="modal-body"></div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-primary">Save changes</button>
</div>
- <br>
- <input type="password" class="form-control" id="loginPassword" name="password" placeholder="password">
- <br>
- <button type="submit" class="btn btn-default loginAction">Submit</button>
</div>
- <div class="col-sm-4"></div>
</div>
</div>
-
+
<!-- Log Container -->
<div class="alertCont"></div>
-
+
<!-- Main Container -->
<div class="wrapper-main smooth">
-
+
<!-- Sidebar Container -->
<div class="wrapper-sidebar smooth">
<div class="container-fluid">
- <a href="#home"><img width="100%" src="res/logo/main.svg"></a>
+ <a href="#home"><img class="sidebar-logo" src="res/logo/main.svg" alt="AMIV Logo"></a>
<ul class="nav nav-pills nav-stacked nav-sidebar" role="navigation">
<li>
<div class="input-group">
@@ -74,51 +92,49 @@
</ul>
</div>
</div>
-
+
<!-- Top Navbar -->
- <div class="navbar-main">
- <nav class="navbar navbar-default">
- <div class="container-fluid">
- <div class="navbar-header">
- <button type="button" class="navbar-toggle collapsed toggleSidebarBtn" aria-expanded="false">
+ <nav class="navbar navbar-default navbar-main">
+ <div class="container-fluid">
+ <div class="navbar-header">
+ <button type="button" class="navbar-toggle collapsed toggleSidebarBtn" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
- </button>
- <img height="40px" style="margin: 5px;" src="res/logo/wheel.svg" id="wheel-logo" class="smooth">
- <a class="navbar-brand" href="#home">AdminTroll</a>
- </div>
-
- <div class="navbar-default">
- <ul class="nav navbar-nav navbar-right">
- <li class="dropdown">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
- <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
- <span class="caret"></span>
- </a>
- <ul class="dropdown-menu">
- <li><a href="#settings"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span> Settings</a></li>
- <li role="separator" class="divider"></li>
- <li><a href="#" class="logoutAction"><span class="glyphicon glyphicon-off" aria-hidden="true"></span> Logout</a></li>
- </ul>
- </li>
- </ul>
- </div>
+ </button>
+ <img height="40" style="margin: 5px;" src="res/logo/wheel.svg" id="wheel-logo" class="smooth" alt="Loading Wheel">
</div>
- </nav>
- </div>
-
- <!-- Main Content / Tool -->
- <div class="wrapper-content" id="main-content">
+
+ <ul class="nav navbar-nav navbar-left cust-menu">
+ </ul>
+
+ <ul class="nav navbar-nav navbar-right">
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+ <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li><a href="#settings"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span> Settings</a></li>
+ <li role="separator" class="divider"></li>
+ <li><a href="#" class="logoutAction"><span class="glyphicon glyphicon-off" aria-hidden="true"></span> Logout</a></li>
+ </ul>
+ </li>
+ </ul>
</div>
+ </nav>
+
+ <!-- Main Content / Tool -->
+ <div class="wrapper-content" id="main-content">
</div>
</div>
- <script src="lib/jquery/jquery-2.2.2.min.js"></script>
- <script src="lib/bootstrap/js/bootstrap.min.js"></script>
- <script src="lib/amiv/amivcore.js"></script>
- <script src="lib/cust/main.js"></script>
-
+ <script src="lib/jquery/jquery-2.2.2.min.js"></script>
+ <script src="lib/bootstrap/js/bootstrap.min.js"></script>
+ <script src="lib/amiv/amivcore.js"></script>
+ <script src="lib/cust/main.js"></script>
+
</body>
-</html>
\ No newline at end of file
+
+</html>
diff --git a/admin/lib/cust/main.css b/admin/lib/cust/main.css
index 023087487ee5bc06e4d696d15101bbfb9e2c0e6c..46eed464137f7895d0e7768bcb736f91e4d41462 100644
--- a/admin/lib/cust/main.css
+++ b/admin/lib/cust/main.css
@@ -1,15 +1,16 @@
/*
IMPORTS
*/
-@font-face{
- font-family: DINPro;
- font-weight: normal;
- src: url(../../res/fonts/DINPro-Light.ttf);
+
+@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);
+@font-face {
+ font-family: DINPro;
+ font-weight: bold;
+ src: url(../../res/fonts/DINPro-Bold.ttf);
}
/*
@@ -17,18 +18,16 @@
*/
* {
- margin: 0;
- padding: 0;
+ margin: 0;
+ padding: 0;
}
-
html, body {
- width: 100%;
- height: 100%;
+ width: 100%;
+ height: 100%;
}
-
body {
- font-family: DINPro;
- overflow: hidden;
+ font-family: DINPro;
+ overflow: hidden;
}
/*
@@ -36,10 +35,10 @@ body {
*/
.smooth {
- -webkit-transition: all 0.5s ease;
- -moz-transition: all 0.5s ease;
- -o-transition: all 0.5s ease;
- transition: all 0.5s ease;
+ -webkit-transition: all 0.5s ease;
+ -moz-transition: all 0.5s ease;
+ -o-transition: all 0.5s ease;
+ transition: all 0.5s ease;
}
/*
@@ -47,20 +46,23 @@ body {
*/
.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;
+ 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%;
}
/*
@@ -68,74 +70,77 @@ body {
*/
.wrapper-main {
- height: 100%;
- width: 100%;
- top: 0;
- left: 0;
+ height: 100%;
+ width: 100%;
+ top: 0;
+ left: 0;
}
-.wrapper-main.toggled{
- padding-left: 250px;
+.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);
+ 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;
+ width: 250px;
}
-
.nav-sidebar .navbar ul {
- float: none;
- display: block;
+ float: none;
+ display: block;
}
.wrapper-sidebar .navbar li {
- float: none;
- display: block;
-}
-
-.navbar-main ul li {
- float: left;
+ 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-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-sidebar ul li a { color: inherit; }
-.wrapper-sidebar ul li a:hover,
-.wrapper-sidebar ul li a:focus {
- color: #000;
+.wrapper-content {
+ margin-top: -20px;
+ height: calc(100vh - 51px);
+ background: #eee;
+ width: 100%;
+ overflow: auto;
}
-.wrapper-content {
- margin-top: -20px;
- height: calc(100vh - 51px);
- background: #eee;
- width: 100%;
- //overflow: scroll;
+/*
+ MAIN NAVBAR
+*/
+
+.navbar-main .cust-menu>li {
+ float: left;
}
/*
@@ -143,9 +148,9 @@ body {
*/
.alertCont {
- position: fixed;
- z-index: 10000;
- left: 50%;
- top: 10px;
- transform: translateX(-50%);
-}
\ No newline at end of file
+ position: fixed;
+ z-index: 10000;
+ left: 50%;
+ top: 10px;
+ transform: translateX(-50%);
+}
diff --git a/admin/lib/cust/main.js b/admin/lib/cust/main.js
index c5cd4962ab8d21284b5472d87cca40d0ba427db0..ab4af9ad890d40e936f93794d54dc6d358a76efa 100644
--- a/admin/lib/cust/main.js
+++ b/admin/lib/cust/main.js
@@ -2,98 +2,132 @@
// Library for all tool actions
var tools = {
-
- //Log Function & Utility Vars
- 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">×</span></button>'+msg+'</div>');
- setTimeout(function(){
- $('#alertBox'+tools.alertNum).alert('close');
- }, timeout);
- console.log(msg);
- },
-
- // 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() {
- $.ajax({
- url: 'tools/' + tools.curTool + '.tool',
- dataType: 'html',
- error: function() {
- tools.log('Tool not found', 'e');
- }
- }).done(function(data){
- $('#main-content').html(data);
- tools.ui.resizeTool();
- $('#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(){
- console.log('Resizing');
- $('tools-full-height').height( $(window).height() - $('.navbar-main').height() );
- }
- },
-
- // 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);
- },
- }
- }
+
+ //Log Function & Utility Vars
+ 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">×</span></button>' + msg + '</div>');
+ setTimeout(function() {
+ $('#alertBox' + tools.alertNum).alert('close');
+ }, timeout);
+ console.log(msg);
+ },
+
+ // Modal function
+ modalStatus: 0,
+ modal: function(attr) {
+ attr = attr || {};
+ $('.modalCont .modal-title').html(attr.head);
+ $('.modalCont .modal-body').html(attr.body);
+ $('.modalCont .modal-footer .btn-primary').html(attr.button).click(function() {
+ $('.modalCont').off('hide.bs.modal').modal('hide');
+ if (typeof(attr.success) == 'function')
+ attr.success();
+ });
+ if (typeof(attr.cancel) == 'function')
+ $('.modalCont').modal('show').on('hide.bs.modal', attr.cancel);
+ },
+
+ // 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);
+ tools.ui.resizeTool();
+ $('#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() {
+ $('tools-full-height').height($(window).height() - $('.navbar-main').height());
+ },
+ menuId: 0,
+ menu: function(attr) {
+ var custMenu = $('.cust-menu');
+ custMenu.html('');
+ tools.ui.menuId++;
+ for (var cur in attr) {
+ 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).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);
+ },
+ }
+ }
}
/*
@@ -103,36 +137,33 @@ var tools = {
//Binding tool change whenever the hash is changed
window.onhashchange = tools.getTool;
-
// 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');
- });
+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');
+ });
}
-
+
// 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();
- }
+$('.loginPanel').keypress(function(e) {
+ if (e.which == 13) {
+ e.preventDefault();
+ loginFunc();
+ }
})
-window.onresize = tools.ui.resizeTools;
-
-amivcore.on('ready', function(){
- tools.getTool();
+amivcore.on('ready', function() {
+ tools.getTool();
+});
+amivcore.on('login', function() {
+ tools.ui.login();
});
-amivcore.on('login', function(){
- tools.ui.login();
+amivcore.on('logout', function() {
+ tools.ui.logout();
});
-amivcore.on('logout', function(){
- tools.ui.logout();
-});
\ No newline at end of file
diff --git a/admin/tools/events.tool b/admin/tools/events.tool
index fff256ec9c4324ebe6ae957da532223a04e28056..cd7b69e3584c316259df3f0fce39d49af3eecbea 100644
--- a/admin/tools/events.tool
+++ b/admin/tools/events.tool
@@ -17,13 +17,13 @@
<!-- modal for details of events-->
<div class="modal fade" id="detail-modal" role="dialog">
- <div class="modal-dialog">
- <div class="modal-content">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal">×</button>
- <h4 id="event-modal-title" class="modal-title"></h4>
- </div>
- <div class="modal-body">
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal">×</button>
+ <h4 id="event-modal-title" class="modal-title"></h4>
+ </div>
+ <div class="modal-body">
<table class="table table-hover" id="event-details-table">
<thead>
<tr>
@@ -34,124 +34,122 @@
<tbody name="table-body">
</tbody>
</table>
- </div>
- <div class="modal-footer">
- <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
- </div>
- </div>
- </div>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+ </div>
+ </div>
+ </div>
</div>
<!-- modal for creating new events-->
+
<div class="modal show" id="new-event-modal" role="dialog">
- <div class="modal-dialog">
- <div class="modal-content">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal">×</button>
- <h4 class="modal-title">Create new Event</h4>
- </div>
- <div class="modal-body">
- <div class="form-group">
- <label for="title_de">Title</label>
- <input type="text" class="form-control" name="title_de"></input>
- </div>
- <div class="form-group">
- <label for="description_de">Description</label>
- <textarea type="text" class="form-control" rows="3" name="description_de"></textarea>
- </div>
- <div class="form-group">
- <label for="catchphrase_de">Catchphrase</label>
- <input type="text" class="form-control" name="catchphrase_de"></input>
- </div>
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal">×</button>
+ <h4 class="modal-title">Create new Event</h4>
+ </div>
+ <div class="modal-body">
+ <div class="form-group">
+ <label for="title_de">Title</label>
+ <input type="text" class="form-control" id="title_de"></input>
+ </div>
+ <div class="form-group">
+ <label for="description_de">Description</label>
+ <textarea type="text" class="form-control" rows="3" id="description_de"></textarea>
+ </div>
+ <div class="form-group">
+ <label for="catchphrase_de">Catchphrase</label>
+ <input type="text" class="form-control" id="catchphrase_de"></input>
+ </div>
- <div class="form-group">
- <label for="time_start">Start Time</label>
- <input type="datetime" class="form-control" name="time_start"></input>
- </div>
- <div class="form-group">
- <label for="time_end">End Time</label>
- <input type="datetime" class="form-control" name="time_end"></input>
- </div>
+ <div class="form-group">
+ <label for="time_start">Start Time</label>
+ <input type="datetime" class="form-control" id="time_start"></input>
+ </div>
+ <div class="form-group">
+ <label for="time_end">End Time</label>
+ <input type="datetime" class="form-control" id="time_end"></input>
+ </div>
+
+ <label class="checkbox-inline">
+ <input type="checkbox" id="signup-required" value="">No Signup
+ </label>
+ <label class="checkbox-inline">
+ <input type="checkbox" id="no-signup-limit" value="">No Signup Limit
+ </label>
+
+ <div class="form-group">
+ <label for="spots">Spots</label>
+ <input type="number" class="form-control" id="spots"></input>
+ </div>
+
+ <label class="checkbox-inline">
+ <input type="checkbox" id="allow_email_signup" value="">Only amiv Members
+ </label>
+
+ <div class="form-group">
+ <label for="time_register_start">Start of Registration</label>
+ <input type="datetime" class="form-control" id="time_register_start"></input>
+ </div>
+ <div class="form-group">
+ <label for="time_register_end">End of Registration</label>
+ <input type="datetime" class="form-control" id="time_register_end"></input>
+ </div>
+
+ <div class="form-group">
+ <label for="location">Location</label>
+ <input type="text" class="form-control" id="location"></input>
+ </div>
+
+ <div class="form-group">
+ <label for="price">Price</label>
+ <input type="text" class="form-control" id="price"></input>
+ </div>
+ <div>
<label class="checkbox-inline">
- <input type="checkbox" name="signup-required" value="">No Signup
+ <input type="checkbox" id="show_website" value="">Show on Webstite (requires banner image and title)
</label>
+ </div>
+ <div>
<label class="checkbox-inline">
- <input type="checkbox" name="no-signup-limit" value="">No Signup Limit
+ <input type="checkbox" id="show_infoscreen" value="">Show ond Infoscreen (requires infoscreen image)
</label>
-
- <div class="form-group">
- <label for="spots">Spots</label>
- <input type="number" class="form-control" name="spots"></input>
- </div>
-
+ </div>
+ <div>
<label class="checkbox-inline">
- <input type="checkbox" name="allow_email_signup" value="">Only amiv Members
+ <input type="checkbox" id="show announce" value="">Show in Announce (requires stuff)
</label>
+ </div>
- <div class="form-group">
- <label for="time_register_start">Start of Registration</label>
- <input type="datetime" class="form-control" name="time_register_start"></input>
- </div>
- <div class="form-group">
- <label for="time_register_end">End of Registration</label>
- <input type="datetime" class="form-control" name="time_register_end"></input>
- </div>
+ <button type="button" class"btn" data-toggle="collapse" data-target="#english-collapse">show english fields</button>
+ <div id="english-collapse" class="collapse">
<div class="form-group">
- <label for="location">Location</label>
- <input type="text" class="form-control" name="location"></input>
+ <label for="title_en">Title english</label>
+ <input type="text" class="form-control" id="title_en"></input>
</div>
-
<div class="form-group">
- <label for="price">Price</label>
- <input type="text" class="form-control" name="price"></input>
+ <label for="description_en">Description english</label>
+ <textarea type="text" class="form-control" rows="3" id="description_en"></textarea>
</div>
-
- <div>
- <label class="checkbox-inline">
- <input type="checkbox" id="show_website" value="">Show on Webstite (requires banner image and title)
- </label>
- </div>
- <div>
- <label class="checkbox-inline">
- <input type="checkbox" id="show_infoscreen" value="">Show ond Infoscreen (requires infoscreen image)
- </label>
- </div>
- <div>
- <label class="checkbox-inline">
- <input type="checkbox" id="show announce" value="">Show in Announce (requires stuff)
- </label>
- </div>
-
- <button class="btn btn-info" data-toggle="collapse" data-target="#english-collapse">show english fields</button>
-
- <div id="english-collapse" class="collapse">
- <div class=form-group>
- <label for="title_en">Title english</label>
- <input type="text" class="form-control" id="title_en"></input>
- </div>
- <div class="form-group">
- <label for="description_en">Description english</label>
- <textarea type="text" class="form-control" rows="3" id="description_en"></textarea>
- </div>
- <div class="form-group">
- <label for="catchphrase_en">Catchphrase english</label>
- <input type="text" class="form-control" id="catchphrase_en"></input>
- </div>
+ <div class="form-group">
+ <label for="catchphrase_en">Catchphrase english</label>
+ <input type="text" class="form-control" id="catchphrase_en"></input>
</div>
-
-
</div>
- <div class="modal-footer">
- <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" onclick="submitNewEvent()">Submit</button>
- </div>
- </div>
- </div>
+ </div>
+ </div>
+ </div>
</div>
-
<style>
.users-table-wrapper {
position: relative;
@@ -174,43 +172,48 @@
var showInTable = ['title_de', 'time_start', 'show_website', 'spots'];
//var tableTitles = ['Title', 'Date', 'on website', 'spots'];
-amivcore.events.GET({data:{'max_results':'50'}}, function(ret){
+amivcore.events.GET({
+ data: {
+ 'max_results': '50'
+ }
+}, function(ret) {
console.log(ret);
- if(!ret || ret['_items'].length == 0){
+ if (!ret || ret['_items'].length == 0) {
tools.log('No Data', 'w');
return;
}
- /*tableTitles.forEach(function(i){
- $('.events-table thead tr').append('<th>'+ i +'</th>');
- });*/
-
- for(var n in ret['_items']){
+ // tableTitles.forEach(function(i) {
+ // $('.events-table thead tr').append('<th>' + i + '</th>');
+ // });
+ for (var n in ret['_items']) {
var tmp = '';
- showInTable.forEach(function(i){
- tmp += '<td>'+ ret['_items'][n][i] +'</td>';
+ showInTable.forEach(function(i) {
+ tmp += '<td>' + ret['_items'][n][i] + '</td>';
});
- $('#events-table tbody').append('<tr name="'+ret['_items'][n]['id']+'"">'+tmp+'</tr>');
+ $('#events-table tbody').append('<tr name="' + ret['_items'][n]['id'] + '"">' + tmp + '</tr>');
}
//show modal on click of the table
$('#events-table tbody tr').click(function(event) {
var id = $(this).attr('name')
- var clickedEvent = $.grep(ret['_items'], function(e){return e.id == id;})[0];
+ var clickedEvent = $.grep(ret['_items'], function(e) {
+ return e.id == id;
+ })[0];
console.log(clickedEvent);
$('#detail-modal .modal-title').text(clickedEvent['title_de']);
$('#detail-modal').modal('show');
- for(var field in clickedEvent){
- var temp = '<td>'+field+'</td><td>'+clickedEvent[field]+'</td>';
- $('#event-details-table tbody').append('<tr>'+temp+'</tr>');
+ for (var field in clickedEvent) {
+ var temp = '<td>' + field + '</td><td>' + clickedEvent[field] + '</td>';
+ $('#event-details-table tbody').append('<tr>' + temp + '</tr>');
}
//var clicked = $.grep(_items, function(e){ return e.id == ; })[];
});
});
-$('#detail-modal').on("hidden.bs.modal", function (e) {
- $(e.target).removeData("bs.modal").find(".modal-content tbody").empty();
+$('#detail-modal').on("hidden.bs.modal", function(e) {
+ $(e.target).removeData("bs.modal").find(".modal-content tbody").empty();
});
function submitNewEvent(){
@@ -219,11 +222,9 @@ function submitNewEvent(){
amivcore.events.POST({data:{"allow_email_signup":true, 'title_de':'fuck this shit'}})
}
-$(document).ready(function(){
-// $('#time_start').datetimepicker({
+$(document).ready(function() {
+ // $('#time_start').datetimepicker({
// locale: 'de'
//});
});
-
-
</script>
diff --git a/admin/tools/users.tool b/admin/tools/users.tool
index 95f0bb891bb8d42d6763e8cdf7dc43188ce7b69d..43ad79511ba68e22db04f5d27e0ea74addefd30c 100644
--- a/admin/tools/users.tool
+++ b/admin/tools/users.tool
@@ -1,48 +1,60 @@
<div class="users-table-wrapper">
- <div class="tools-full-height">
- <table class="table table-hover users-table">
- <thead>
- <tr>
- </tr>
- </thead>
- <tbody>
- </tbody>
- </table>
- </div>
+ <table class="table table-hover users-table">
+ <thead>
+ <tr>
+ </tr>
+ </thead>
+ <tbody>
+ </tbody>
+ </table>
</div>
<style>
.users-table-wrapper {
- position: relative;
- }
- .users-table-wrapper>div {
+ width: 100%;
+ height: 100%;
overflow: auto;
}
-
- .users-sidebar {
- background: #fff;
- }
</style>
<script type="text/javascript">
- var showInTable = ['firstname', 'lastname', 'email', 'membership'];
- amivcore.users.GET({data:{'max_results':'50'}}, function(ret){
+ tools.ui.menu({
+ 'Add User': {
+ callback: function() {
+ console.log('noice');
+ }
+ }
+ });
+
+ function showDetails() {
+ console.log($(this).attr('data-id'));
+ }
+
+ var showInTable = ['firstname', 'lastname', 'email', 'membership'],
+ curData = null;
+ amivcore.users.GET({
+ data: {
+ 'max_results': '50'
+ }
+ }, function(ret) {
- if(!ret || ret['_items'].length == 0){
+ if (!ret || ret['_items'].length == 0) {
tools.log('No Data', 'w');
return;
}
- showInTable.forEach(function(i){
- $('.users-table thead tr').append('<th>'+ i +'</th>');
+ curData = ret['_items'];
+
+ showInTable.forEach(function(i) {
+ $('.users-table thead tr').append('<th>' + i + '</th>');
});
- for(var n in ret['_items']){
+ for (var n in ret['_items']) {
var tmp = '';
- showInTable.forEach(function(i){
- tmp += '<td>'+ ret['_items'][n][i] +'</td>';
+ showInTable.forEach(function(i) {
+ tmp += '<td>' + ret['_items'][n][i] + '</td>';
});
- $('.users-table tbody').append('<tr>'+tmp+'</tr>');
- //$('.users-table tbody').append('<tr><td>'+ret['_items'][n].firstname+'</td></tr>');
- }
- });
+ $('.users-table tbody').append('<tr data-id="' + ret['_items'][n]['id'] + '">' + tmp + '</tr>');
+ }
+ $('.users-table tbody tr').click(showDetails);
+ });
</script>
diff --git a/index.html b/index.html
index 36d43005573d66b13b5e973ab0903a5d1760e10a..99f25c819d573347da1d4a59d73ddab15a836cda 100644
--- a/index.html
+++ b/index.html
@@ -35,4 +35,4 @@
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
-</html>
+</html>
\ No newline at end of file
diff --git a/public/css/cards.css b/public/css/cards.css
index 0a03de033223a679660331aee4daa81067a73322..b09fe4253ab2e3808a8050937168bbfaf98f3bd1 100644
--- a/public/css/cards.css
+++ b/public/css/cards.css
@@ -36,6 +36,8 @@
padding-bottom: 16px;
width: 100%;
background: rgba(100%, 100%, 100%, 0.5);
+ text-transform: uppercase;
+ font-weight: 300;
}
.card .card-content {
padding: 16px;
diff --git a/public/index.html b/public/index.html
index 3fd1b4612abd1a13ba47dec775370cc16f213372..ee48ca8d7df9c7922ce68a4b26fe8e3f59aac33f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -44,7 +44,7 @@
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
- <img src="file:///Volumes/Macintosh%20HD/Users/oli/Documents/ETH/amivwebsitefrontend/public/res/AMIV_Logo_150_50.svg" alt="AMIV" height="80%">
+ <img src="res/AMIV_Logo_150_50.svg" alt="AMIV" height="80%">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
@@ -59,9 +59,6 @@
<li>
<a href="#">Studium</a>
</li>
- <li>
- <a href="#">Events</a>
- </li>
<li>
<a href="#">Jobbörse</a>
</li>
@@ -97,6 +94,7 @@
.append('<div class="grid-item col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">' + item + '</div>')
.masonry('reloadItems').masonry();
}
+
$(document).ready(function() {
$('.grid-item, .grid-sizer').addClass('col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2');
$('.grid').masonry({
@@ -107,37 +105,72 @@
getEvents(function(ret) {
ret['_items'].forEach(function(item) {
console.log(item.title_de);
- addElement('<p>' + JSON.stringify(item) + '</p>');
+ if ( item.img_banner == null){
+ item.img_banner = item.img_infoscreen;
+ }
+ var datenum = new Date(item.time_start);
+
+ /*Minuten immer Zweistellig*/
+ var minutes = datenum.getMinutes();
+ if (minutes < 10){
+ minutes = "0" + minutes;
+ }
+ var month = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
+
+ addElement('<div class="card"><div class="card-image"><img class="img-responsive" src="'+item.img_banner+'"><date><div class="month">'+month[datenum.getMonth()]+'</div><div class="day">'+datenum.getDate()+'</div><div class="starttime">'+datenum.getHours()+':'+minutes+'</div><date-overlay></date-overlay></date><span class="card-title">'+item.title_de+' @ '+item.location+'</span></div><div class="card-content">'+item.description_de+'</div><div class="card-action"><a href="#" target="new_blank">Zum Event</a><a href="#" target="new_blank">Anmeldung</a><a href="#" target="new_blank">Im Kalender speichern</a></div></div>');
});
});
});
</script>
+<!--
+ <script>
+ $(function() {
+ var container = document.createElement('div');
+ container.id = "card";
+
+ $('grid').append(container);
+
+ /*Date*/
+ $(".month").append("October");
+ $(".day").append("42");
+ $(".starttime").append("18:00 - 20:00");
+
+ /*Visible Content*/
+ $(".card-title").html("Jarcakebakery @ FoodLab"); //Title and Location
+ $(".card-content").append("<p>This is the best event like ever! You can bake some jarcakes and eat the afterwards all by yourself.</p>"); //content
+ $(".card-action").append(); //Links
+ $(".img-responsive").attr("src", "http://cdn0.wideopencountry.com/wp-content/uploads/2015/07/JamCheesecakesInAJarTall-793x526.png"); //image
+
+ $('#card').append(html);
+ });
+ </script>
+-->
+
+<!--
<div class="col-xs-12 col-md-4 col-lg-3">
- <div class="card">
- <div class="card-image">
- <img class="img-responsive" src="http://cdn0.wideopencountry.com/wp-content/uploads/2015/07/JamCheesecakesInAJarTall-793x526.png">
- <date>
- <div class="month">October</div>
- <div class="day">29</div>
- <div class="starttime">18:00</div>
- <date-overlay></date-overlay>
- </date>
- <span class="card-title">Jarcakebakery @ FoodLab</span>
-
- </div>
+ <div class="card card-1">
+ <div class="card-image">
+ <img class="img-responsive">
+ <date>
+ <div class="month"></div>
+ <div class="day"></div>
+ <div class="starttime"></div>
+ <date-overlay></date-overlay>
+ </date>
+ <span class="card-title"></span>
+ </div>
+
+ <div class="card-content"></div>
- <div class="card-content">
- <p>This is the best event like ever! You can bake some jarcakes and eat the afterwards all by yourself. </p>
- </div>
-
- <div class="card-action">
- <a href="#" target="new_blank">Zum Event</a>
- <a href="#" target="new_blank">Anmeldung</a>
- <a href="#" target="new_blank">Im Kalender speichern</a>
- </div>
- </div>
- </div>
+ <div class="card-action">
+ <a href="#" target="new_blank">Zum Event</a>
+ <a href="#" target="new_blank">Anmeldung</a>
+ <a href="#" target="new_blank">Im Kalender speichern</a>
+ </div>
+ </div>
+ </div>
+-->
</body>
</html>