Commit 789dc029 authored by CupCakeArmy's avatar CupCakeArmy
Browse files

Fixes n Stuff

parent a9488d3a
# AMIV-Frontend
###### New Admintools & Website for AMIV;
# Frontend
# Software
## Software
### Admintool:
* ```ubuntu /14.04.1```
......@@ -12,18 +11,16 @@
# Admintool
### Dependecies:
* ```jQuery /2.2.2 (Public)```
* ```bootstrap /3.3.6 (Public)```
* ```amivcore /1.0 (Private)```
* ```tools /1.0 (Private)```
* ```jQuery /2.2.2```
* ```bootstrap /3.3.6```
* ```amivaccess /1.0```
# Structure
* admin (Admintool)
* lib (Libraries)
* bootstrap
* jquery
* amiv
* amivcore (JS Library for API)
* amiv (amivaccess)
* cust (custom files)
* main.js (our js file)
* main.css (our css file)
......@@ -37,12 +34,13 @@
* users.tool
* ...
* public (Website)
## Library ```tools```:
### 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.
### log(msg, type, timeout)
#### 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.
......@@ -51,46 +49,41 @@ The JS library ```tools``` is the backbone of the single tools. It enables the t
* 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.
#### Example:
##### 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)
#### 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.
##### Example:
* ``` tools.getTool('home'); ``` Will get the /res/tools/```home```.tool and loads it into the site.
### ui.toggleSideMenu()
#### toggleSideMenu()
###### Toggles the sidebar
#### Example:
* ```tools.ui.toggleSideMenu();```
##### Example:
* ```tools.toggleSideMenu();``` Toggles the sidebar
### mem.local & mem.session
######The mem element can store data for the tools, used for multiple cases. There are 2 types 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.
#### 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)
#### set(name, value)
######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.
#### Example:
##### Example:
* ```tools.mem.session.set('currentUser', 'Sir Anon');``` Stores 'Sir Anon' in 'currentUser'.
* ```tools.mem.session.set('someData', {'car':'tesla'});``` Stores the object in 'someData'.
### get(name)
#### get(name)
###### Returnes the assosiated value. If there is no data it will return ```null```.
* ```name /text``` Name of the 'variable'.
#### Example:
##### Example:
* ```tools.mem.session.get('currentUser'); > 'Sir Anon'``` Retrieves 'currentUser'.
* ```tools.mem.session.set('someData'); > {'car':'tesla'}``` Retrieves 'someData'.
* ```tools.mem.session.set('nopeFoo'); > null``` No data stored unter 'nopeFoo', so returns ```null```.
## Library ```amivcore```:
###### This library serves as medium from the tools to the API, handling all the authentication, requests, etc. Whenever you need to speak with the API it's raccomendet you use ```amivcore```. This is for consistency and usability. Since most of the functions of ```amivcore``` are asyncronous requests, they will need callbackback functions in order to return data.
# Website
\ No newline at end of file
......@@ -27,7 +27,6 @@
<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">
......@@ -67,11 +66,11 @@
</div>
</li>
<li role="separator" class="divider"></li>
<li><a href="#users"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> Users</a></li>
<li><a href="#users"><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> Users</a></li>
<li><a href="#events"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> Events</a></li>
<li><a href="#groups"><span class="glyphicon glyphicon-group" aria-hidden="true"></span> Groups</a></li>
<li><a href="#annouce"><span class="glyphicon glyphicon-bullhorn" aria-hidden="true"></span> Announce</a></li>
<li><a href="#beerncoffee"><span class="glyphicon glyphicon-beer" aria-hidden="true"></span> Beer & Coffee</a></li>
<li><a href="#groups"><span class="glyphicon glyphicon-blackboard" aria-hidden="true"></span> Groups</a></li>
<li><a href="#annouce"><span class="glyphicon glyphicon-bullhorn" aria-hidden="true"></span> Annouce</a></li>
<li><a href="#beerncoffee"><span class="glyphicon glyphicon-cutlery" aria-hidden="true"></span> Beer & Coffee</a></li>
</ul>
</div>
</div>
......@@ -87,7 +86,7 @@
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img height="40px" style="margin: 5px;padding-left: 10px" src="res/logo/wheel.svg" id="wheel-logo" class="smooth">
<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>
......@@ -108,6 +107,7 @@
</div>
</div>
</nav>
</div>
<!-- Main Content / Tool -->
<div class="wrapper-content" id="main-content">
......
......@@ -131,7 +131,7 @@
"@screen-sm-max": "(@screen-md-min - 1)",
"@screen-md-max": "(@screen-lg-min - 1)",
"@grid-columns": "12",
"@grid-gutter-width": "30px",
"@grid-gutter-width": "0px",
"@grid-float-breakpoint": "@screen-sm-min",
"@grid-float-breakpoint-max": "(@grid-float-breakpoint - 1)",
"@container-tablet": "(720px + @grid-gutter-width)",
......@@ -431,5 +431,5 @@
"scrollspy.js",
"transition.js"
],
"customizerUrl": "http://getbootstrap.com/customize/?id=ec382bedd22dac880c02605347d2d9dd"
"customizerUrl": "http://getbootstrap.com/customize/?id=c1db1eaee25ef56ae1b65e73a08fa8d8"
}
\ No newline at end of file
......@@ -5,8 +5,8 @@
*/
/*!
* Generated using the Bootstrap Customizer (http://getbootstrap.com/customize/?id=ec382bedd22dac880c02605347d2d9dd)
* Config saved to config.json and https://gist.github.com/ec382bedd22dac880c02605347d2d9dd
* Generated using the Bootstrap Customizer (http://getbootstrap.com/customize/?id=c1db1eaee25ef56ae1b65e73a08fa8d8)
* Config saved to config.json and https://gist.github.com/c1db1eaee25ef56ae1b65e73a08fa8d8
*/
/*!
* Bootstrap v3.3.6 (http://getbootstrap.com)
......
......@@ -5,8 +5,8 @@
*/
/*!
* Generated using the Bootstrap Customizer (http://getbootstrap.com/customize/?id=ec382bedd22dac880c02605347d2d9dd)
* Config saved to config.json and https://gist.github.com/ec382bedd22dac880c02605347d2d9dd
* Generated using the Bootstrap Customizer (http://getbootstrap.com/customize/?id=c1db1eaee25ef56ae1b65e73a08fa8d8)
* Config saved to config.json and https://gist.github.com/c1db1eaee25ef56ae1b65e73a08fa8d8
*//*!
* Bootstrap v3.3.6 (http://getbootstrap.com)
* Copyright 2011-2015 Twitter, Inc.
......
......@@ -5,8 +5,8 @@
*/
/*!
* Generated using the Bootstrap Customizer (http://getbootstrap.com/customize/?id=ec382bedd22dac880c02605347d2d9dd)
* Config saved to config.json and https://gist.github.com/ec382bedd22dac880c02605347d2d9dd
* Generated using the Bootstrap Customizer (http://getbootstrap.com/customize/?id=c1db1eaee25ef56ae1b65e73a08fa8d8)
* Config saved to config.json and https://gist.github.com/c1db1eaee25ef56ae1b65e73a08fa8d8
*/
/*!
* Bootstrap v3.3.6 (http://getbootstrap.com)
......@@ -1591,39 +1591,39 @@ pre code {
.container {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
padding-left: 0px;
padding-right: 0px;
}
@media (min-width: 768px) {
.container {
width: 750px;
width: 720px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
width: 940px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
width: 1140px;
}
}
.container-fluid {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
padding-left: 0px;
padding-right: 0px;
}
.row {
margin-left: -15px;
margin-right: -15px;
margin-left: 0px;
margin-right: 0px;
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
padding-left: 0px;
padding-right: 0px;
}
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
float: left;
......@@ -2983,8 +2983,8 @@ select[multiple].input-lg {
min-height: 27px;
}
.form-horizontal .form-group {
margin-left: -15px;
margin-right: -15px;
margin-left: 0px;
margin-right: 0px;
}
@media (min-width: 768px) {
.form-horizontal .control-label {
......@@ -2994,7 +2994,7 @@ select[multiple].input-lg {
}
}
.form-horizontal .has-feedback .form-control-feedback {
right: 15px;
right: 0px;
}
@media (min-width: 768px) {
.form-horizontal .form-group-lg .control-label {
......@@ -4190,8 +4190,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
}
.navbar-collapse {
overflow-x: visible;
padding-right: 15px;
padding-left: 15px;
padding-right: 0px;
padding-left: 0px;
border-top: 1px solid transparent;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
......@@ -4237,8 +4237,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
.container-fluid > .navbar-header,
.container > .navbar-collapse,
.container-fluid > .navbar-collapse {
margin-right: -15px;
margin-left: -15px;
margin-right: 0px;
margin-left: 0px;
}
@media (min-width: 768px) {
.container > .navbar-header,
......@@ -4282,7 +4282,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
}
.navbar-brand {
float: left;
padding: 15px 15px;
padding: 15px 0px;
font-size: 18px;
line-height: 20px;
height: 50px;
......@@ -4297,13 +4297,13 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
@media (min-width: 768px) {
.navbar > .container .navbar-brand,
.navbar > .container-fluid .navbar-brand {
margin-left: -15px;
margin-left: 0px;
}
}
.navbar-toggle {
position: relative;
float: right;
margin-right: 15px;
margin-right: 0px;
padding: 9px 10px;
margin-top: 8px;
margin-bottom: 8px;
......@@ -4330,7 +4330,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
}
}
.navbar-nav {
margin: 7.5px -15px;
margin: 7.5px 0px;
}
.navbar-nav > li > a {
padding-top: 10px;
......@@ -4374,9 +4374,9 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
}
}
.navbar-form {
margin-left: -15px;
margin-right: -15px;
padding: 10px 15px;
margin-left: 0px;
margin-right: 0px;
padding: 10px 0px;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
......@@ -4485,8 +4485,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
@media (min-width: 768px) {
.navbar-text {
float: left;
margin-left: 15px;
margin-right: 15px;
margin-left: 0px;
margin-right: 0px;
}
}
@media (min-width: 768px) {
......@@ -4495,7 +4495,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
}
.navbar-right {
float: right !important;
margin-right: -15px;
margin-right: 0px;
}
.navbar-right ~ .navbar-right {
margin-right: 0;
......@@ -4986,8 +4986,8 @@ a.badge:focus {
.container .jumbotron,
.container-fluid .jumbotron {
border-radius: 6px;
padding-left: 15px;
padding-right: 15px;
padding-left: 0px;
padding-right: 0px;
}
.jumbotron .container {
max-width: 100%;
......
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -5,8 +5,8 @@
*/
/*!
* Generated using the Bootstrap Customizer (http://getbootstrap.com/customize/?id=ec382bedd22dac880c02605347d2d9dd)
* Config saved to config.json and https://gist.github.com/ec382bedd22dac880c02605347d2d9dd
* Generated using the Bootstrap Customizer (http://getbootstrap.com/customize/?id=c1db1eaee25ef56ae1b65e73a08fa8d8)
* Config saved to config.json and https://gist.github.com/c1db1eaee25ef56ae1b65e73a08fa8d8
*/
if (typeof jQuery === 'undefined') {
throw new Error('Bootstrap\'s JavaScript requires jQuery')
......
This diff is collapsed.
......@@ -135,7 +135,7 @@ body {
height: calc(100vh - 51px);
background: #eee;
width: 100%;
overflow: scroll;
//overflow: scroll;
}
/*
......
......@@ -43,6 +43,7 @@ var tools = {
}
}).done(function(data){
$('#main-content').html(data);
tools.ui.resizeTool();
$('#main-content').fadeIn(250,function() {
$('#wheel-logo').css('transform', 'rotate(0deg)');
});
......@@ -62,6 +63,10 @@ var tools = {
logout: function(){
$('.loginPanel').css({'top':'0%'});
},
resizeTool: function(){
console.log('Resizing');
$('tools-full-height').height( $(window).height() - $('.navbar-main').height() );
}
},
// Memory to store stuff
......@@ -112,10 +117,7 @@ function loginFunc(){
// Binding the buttons
$('.toggleSidebarBtn').click(tools.ui.toggleSideMenu);
$('.loginAction').click(loginFunc);
$('.logoutAction').click(function(){
console.log('log out call');
amivcore.logout();
});
$('.logoutAction').click(amivcore.logout);
$('.loginPanel').keypress(function(e){
if(e.which == 13){
e.preventDefault();
......@@ -123,6 +125,8 @@ $('.loginPanel').keypress(function(e){
}
})
window.onresize = tools.ui.resizeTools;
amivcore.on('ready', function(){
tools.getTool();
});
......
<div class="users">
<div class="row">
<div class="col-xs-10 col-md-11">
<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>
</div>
</div>
<div class="col-xs-2 col-md-1">
<div class="users-sidebar tools-full-height">
<div class="row">
<div class="col-sm-12">Test</div>
<div class="col-sm-12">A</div>
<div class="col-sm-12">B</div>
</div>
</div>
</div>
</div>
<style>
.users {
width: 100%;
height: 100%;
}
.users-table-wrapper {
position: relative;
}
.users-table-wrapper>div {
overflow: auto;
}
.users-sidebar {
background: #fff;
}
</style>
<script type="text/javascript">
amivcore.users.GET({}, function(ret){
console.log(ret);
$('.users').html(JSON.stringify(ret));
var showInTable = ['firstname', 'lastname', 'email', 'membership'];
amivcore.users.GET({data:{'max_results':'50'}}, function(ret){
if(!ret || ret['_items'].length == 0){
tools.log('No Data', 'w');
return;
}
showInTable.forEach(function(i){
$('.users-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>';
});
$('.users-table tbody').append('<tr>'+tmp+'</tr>');
//$('.users-table tbody').append('<tr><td>'+ret['_items'][n].firstname+'</td></tr>');
}
});
</script>
\ No newline at end of file
......@@ -24,8 +24,8 @@
<h1>AMIV</h1>
</div>
<div class="row text-center">
<div class="col-sm-6"><a href="/admin/"><button type="button" class="btn btn-default">Admin-Tools</button></a></div>
<div class="col-sm-6"><a href="/public/"><button type="button" class="btn btn-primary">Website</button></a></div>
<div class="col-sm-6"><a href="admin/"><button type="button" class="btn btn-default">Admin-Tools</button></a></div>
<div class="col-sm-6"><a href="public/"><button type="button" class="btn btn-primary">Website</button></a></div>
</div>
<div class="col-sm-3"></div>
</div>
......@@ -35,4 +35,4 @@
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
\ No newline at end of file
</html>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment