zmiguel
/
ENEI2019-Public
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

updates

This commit is contained in:
henrydays 2018-09-01 22:52:47 +01:00
parent 966d29df38
commit fd867f0bd4
20 changed files with 991 additions and 951 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
backoffice/.angular-cli.json
View File

@ -26,6 +26,7 @@
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js",
"../node_modules/admin-lte/dist/js/app.min.js"
],
"environmentSource": "environments/environment.ts",
"environments": {

15
backoffice/src/app/app.component.html
View File

@ -1,2 +1,15 @@
<router-outlet></router-outlet>
<body class="layout-top-nav skin-green ">
<div class="wrapper">
<router-outlet></router-outlet>
</div>
<!-- ./wrapper -->
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="assets/dashboard.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="assets/demo.js"></script>
</body>

2
backoffice/src/app/app.component.spec.ts
View File

@ -2,6 +2,8 @@ import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({

10
backoffice/src/app/app.module.ts
View File

@ -17,6 +17,8 @@ import { HomeComponent } from './home/home.component';
import { Router, RouterModule } from '@angular/router';
import { appRoutes } from './routes';
import { AuthGuard } from './guards/auth.guard';
import { NavigationComponent } from './navigation/navigation.component';
import { CalendarComponent } from './calendar/calendar.component';
@NgModule({
declarations: [
@ -25,7 +27,9 @@ import { AuthGuard } from './guards/auth.guard';
LoginComponent,
DashboardComponent,
ProfileComponent,
HomeComponent
HomeComponent,
NavigationComponent,
CalendarComponent
],
imports: [
BrowserModule,
@ -33,8 +37,8 @@ import { AuthGuard } from './guards/auth.guard';
HttpClientModule,
FormsModule,
RouterModule.forRoot(appRoutes)
],
providers: [
],
providers: [
AuthService,
AuthGuard
],

0
backoffice/src/app/calendar/calendar.component.css Normal file
View File

262
backoffice/src/app/calendar/calendar.component.html Normal file
View File

@ -0,0 +1,262 @@
<app-navigation></app-navigation>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
Calendar
<small>Control panel</small>
</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
<li class="active">Calendar</li>
</ol>
</section>
<!-- Main content -->
<section class="content">
<div class="row">
<div class="col-md-3">
<div class="box box-solid">
<div class="box-header with-border">
<h4 class="box-title">Draggable Events</h4>
</div>
<div class="box-body">
<!-- the events -->
<div id="external-events">
<div class="external-event bg-green">Lunch</div>
<div class="external-event bg-yellow">Go home</div>
<div class="external-event bg-aqua">Do homework</div>
<div class="external-event bg-light-blue">Work on UI design</div>
<div class="external-event bg-red">Sleep tight</div>
<div class="checkbox">
<label for="drop-remove">
<input type="checkbox" id="drop-remove">
remove after drop
</label>
</div>
</div>
</div>
<!-- /.box-body -->
</div>
<!-- /. box -->
<div class="box box-solid">
<div class="box-header with-border">
<h3 class="box-title">Create Event</h3>
</div>
<div class="box-body">
<div class="btn-group" style="width: 100%; margin-bottom: 10px;">
<!--<button type="button" id="color-chooser-btn" class="btn btn-info btn-block dropdown-toggle" data-toggle="dropdown">Color <span class="caret"></span></button>-->
<ul class="fc-color-picker" id="color-chooser">
<li><a class="text-aqua" href="#"><i class="fa fa-square"></i></a></li>
<li><a class="text-blue" href="#"><i class="fa fa-square"></i></a></li>
<li><a class="text-light-blue" href="#"><i class="fa fa-square"></i></a></li>
<li><a class="text-teal" href="#"><i class="fa fa-square"></i></a></li>
<li><a class="text-yellow" href="#"><i class="fa fa-square"></i></a></li>
<li><a class="text-orange" href="#"><i class="fa fa-square"></i></a></li>
<li><a class="text-green" href="#"><i class="fa fa-square"></i></a></li>
<li><a class="text-lime" href="#"><i class="fa fa-square"></i></a></li>
<li><a class="text-red" href="#"><i class="fa fa-square"></i></a></li>
<li><a class="text-purple" href="#"><i class="fa fa-square"></i></a></li>
<li><a class="text-fuchsia" href="#"><i class="fa fa-square"></i></a></li>
<li><a class="text-muted" href="#"><i class="fa fa-square"></i></a></li>
<li><a class="text-navy" href="#"><i class="fa fa-square"></i></a></li>
</ul>
</div>
<!-- /btn-group -->
<div class="input-group">
<input id="new-event" type="text" class="form-control" placeholder="Event Title">
<div class="input-group-btn">
<button id="add-new-event" type="button" class="btn btn-primary btn-flat">Add</button>
</div>
<!-- /btn-group -->
</div>
<!-- /input-group -->
</div>
</div>
</div>
<!-- /.col -->
<div class="col-md-9">
<div class="box box-primary">
<div class="box-body no-padding">
<!-- THE CALENDAR -->
<div id="calendar"></div>
</div>
<!-- /.box-body -->
</div>
<!-- /. box -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<!-- fullCalendar -->
<script src="assets/moment.js"></script>
<script src="assets/fullcalendar.min.js"></script>
<!-- Page specific script -->
<script>
$(function () {
/* initialize the external events
-----------------------------------------------------------------*/
function init_events(ele) {
ele.each(function () {
// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
// it doesn't need to have a start or end
var eventObject = {
title: $.trim($(this).text()) // use the element's text as the event title
}
// store the Event Object in the DOM element so we can get to it later
$(this).data('eventObject', eventObject)
// make the event draggable using jQuery UI
$(this).draggable({
zIndex : 1070,
revert : true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
})
})
}
init_events($('#external-events div.external-event'))
/* initialize the calendar
-----------------------------------------------------------------*/
//Date for the calendar events (dummy data)
var date = new Date()
var d = date.getDate(),
m = date.getMonth(),
y = date.getFullYear()
$('#calendar').fullCalendar({
header : {
left : 'prev,next today',
center: 'title',
right : 'month,agendaWeek,agendaDay'
},
buttonText: {
today: 'today',
month: 'month',
week : 'week',
day : 'day'
},
//Random default events
events : [
{
title : 'All Day Event',
start : new Date(y, m, 1),
backgroundColor: '#f56954', //red
borderColor : '#f56954' //red
},
{
title : 'Long Event',
start : new Date(y, m, d - 5),
end : new Date(y, m, d - 2),
backgroundColor: '#f39c12', //yellow
borderColor : '#f39c12' //yellow
},
{
title : 'Meeting',
start : new Date(y, m, d, 10, 30),
allDay : false,
backgroundColor: '#0073b7', //Blue
borderColor : '#0073b7' //Blue
},
{
title : 'Lunch',
start : new Date(y, m, d, 12, 0),
end : new Date(y, m, d, 14, 0),
allDay : false,
backgroundColor: '#00c0ef', //Info (aqua)
borderColor : '#00c0ef' //Info (aqua)
},
{
title : 'Birthday Party',
start : new Date(y, m, d + 1, 19, 0),
end : new Date(y, m, d + 1, 22, 30),
allDay : false,
backgroundColor: '#00a65a', //Success (green)
borderColor : '#00a65a' //Success (green)
},
{
title : 'Click for Google',
start : new Date(y, m, 28),
end : new Date(y, m, 29),
url : 'http://google.com/',
backgroundColor: '#3c8dbc', //Primary (light-blue)
borderColor : '#3c8dbc' //Primary (light-blue)
}
],
editable : true,
droppable : true, // this allows things to be dropped onto the calendar !!!
drop : function (date, allDay) { // this function is called when something is dropped
// retrieve the dropped element's stored Event Object
var originalEventObject = $(this).data('eventObject')
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = $.extend({}, originalEventObject)
// assign it the date that was reported
copiedEventObject.start = date
copiedEventObject.allDay = allDay
copiedEventObject.backgroundColor = $(this).css('background-color')
copiedEventObject.borderColor = $(this).css('border-color')
// render the event on the calendar
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true)
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove()
}
}
})
/* ADDING EVENTS */
var currColor = '#3c8dbc' //Red by default
//Color chooser button
var colorChooser = $('#color-chooser-btn')
$('#color-chooser > li > a').click(function (e) {
e.preventDefault()
//Save color
currColor = $(this).css('color')
//Add color effect to button
$('#add-new-event').css({ 'background-color': currColor, 'border-color': currColor })
})
$('#add-new-event').click(function (e) {
e.preventDefault()
//Get value and make sure it is not null
var val = $('#new-event').val()
if (val.length == 0) {
return
}
//Create events
var event = $('<div />')
event.css({
'background-color': currColor,
'border-color' : currColor,
'color' : '#fff'
}).addClass('external-event')
event.html(val)
$('#external-events').prepend(event)
//Add draggable funtionality
init_events(event)
//Remove event from text input
$('#new-event').val('')
})
})
</script>

28
backoffice/src/app/calendar/calendar.component.spec.ts Normal file
View File

@ -0,0 +1,28 @@
/* tslint:disable:no-unused-variable */
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { CalendarComponent } from './calendar.component';
describe('CalendarComponent', () => {
let component: CalendarComponent;
let fixture: ComponentFixture<CalendarComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ CalendarComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(CalendarComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

15
backoffice/src/app/calendar/calendar.component.ts Normal file
View File

@ -0,0 +1,15 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-calendar',
templateUrl: './calendar.component.html',
styleUrls: ['./calendar.component.css']
})
export class CalendarComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}

196
backoffice/src/app/dashboard/dashboard.component.html
View File

@ -1,192 +1,7 @@
<body class="layout-top-nav skin-green ">
<div class="wrapper">
<header class="main-header">
<nav class="navbar navbar-static-top">
<div class="container">
<div class="navbar-header">
<a href="../../index2.html" class="navbar-brand"><b>ENEI </b>2019</a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
<i class="fa fa-bars"></i>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse pull-left" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#"><i class="fa fa-dashboard"></i> Dashboard <span class="sr-only">(current)</span></a></li>
<li><a href="#"><i class="fa fa-users"></i> Users</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="dashboard/#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
<!-- Navbar Right Menu -->
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<!-- Messages: style can be found in dropdown.less-->
<li class="dropdown messages-menu">
<!-- Menu toggle button -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-envelope-o"></i>
<span class="label label-success">4</span>
</a>
<ul class="dropdown-menu">
<li class="header">You have 4 messages</li>
<li>
<!-- inner menu: contains the messages -->
<ul class="menu">
<li><!-- start message -->
<a href="#">
<div class="pull-left">
<!-- User Image -->
<img src="http://localhost:5000/dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
</div>
<!-- Message title and timestamp -->
<h4>
Support Team
<small><i class="fa fa-clock-o"></i> 5 mins</small>
</h4>
<!-- The message -->
<p>Why not buy a new awesome theme?</p>
</a>
</li>
<!-- end message -->
</ul>
<!-- /.menu -->
</li>
<li class="footer"><a href="#">See All Messages</a></li>
</ul>
</li>
<!-- /.messages-menu -->
<!-- Notifications Menu -->
<li class="dropdown notifications-menu">
<!-- Menu toggle button -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-bell-o"></i>
<span class="label label-warning">10</span>
</a>
<ul class="dropdown-menu">
<li class="header">You have 10 notifications</li>
<li>
<!-- Inner Menu: contains the notifications -->
<ul class="menu">
<li><!-- start notification -->
<a href="#">
<i class="fa fa-users text-aqua"></i> 5 new members joined today
</a>
</li>
<!-- end notification -->
</ul>
</li>
<li class="footer"><a href="#">View all</a></li>
</ul>
</li>
<!-- Tasks Menu -->
<li class="dropdown tasks-menu">
<!-- Menu Toggle Button -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-flag-o"></i>
<span class="label label-danger">9</span>
</a>
<ul class="dropdown-menu">
<li class="header">You have 9 tasks</li>
<li>
<!-- Inner menu: contains the tasks -->
<ul class="menu">
<li><!-- Task item -->
<a href="#">
<!-- Task title and progress text -->
<h3>
Design some buttons
<small class="pull-right">20%</small>
</h3>
<!-- The progress bar -->
<div class="progress xs">
<!-- Change the css width attribute to simulate progress -->
<div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">20% Complete</span>
</div>
</div>
</a>
</li>
<!-- end task item -->
</ul>
</li>
<li class="footer">
<a href="#">View all tasks</a>
</li>
</ul>
</li>
<!-- User Account Menu -->
<li class="dropdown user user-menu">
<!-- Menu Toggle Button -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<!-- The user image in the navbar-->
<img src="http://localhost:5000/dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
<!-- hidden-xs hides the username on small devices so only the image appears. -->
<span class="hidden-xs">Alexander</span>
</a>
<ul class="dropdown-menu">
<!-- The user image in the menu -->
<li class="user-header">
<img src="http://localhost:5000/dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
<p>
Alexander Pierce - Web Developer
<small>Member since Nov. 2012</small>
</p>
</li>
<!-- Menu Body -->
<li class="user-body">
<div class="row">
<div class="col-xs-4 text-center">
<a href="#">Followers</a>
</div>
<div class="col-xs-4 text-center">
<a href="#">Sales</a>
</div>
<div class="col-xs-4 text-center">
<a href="#">Friends</a>
</div>
</div>
<!-- /.row -->
</li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat">Profile</a>
</div>
<div class="pull-right">
<a (click)="logout()" class="btn btn-default btn-flat">Sign out</a>
</div>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-custom-menu -->
</div>
<!-- /.container-fluid -->
</nav>
</header>
<app-navigation></app-navigation>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
@ -908,6 +723,3 @@
<!-- Add the sidebar's background. This div must be placed
immediately after the control sidebar -->
<div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->
</body>

5
backoffice/src/app/dashboard/dashboard.component.ts
View File

@ -13,9 +13,4 @@ export class DashboardComponent implements OnInit {
ngOnInit() {
}
logout() {
localStorage.removeItem('token');
this.router.navigate(['/login']);
console.log('logged out!');
}
}

35
backoffice/src/app/login/login.component.css
View File

@ -1 +1,34 @@
@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");
@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");
.form-control[_ngcontent-c1] {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
border-radius: 0;
}
.form-control-feedback {
position: absolute;
top: 0;
right: 0;
z-index: 2;
display: block;
width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
pointer-events: none;
border-radius: 0px;
}

27
backoffice/src/app/login/login.component.html
View File

@ -1,7 +1,8 @@
<body class="hold-transition login-page">
<body class="login-page">
<div class="login-box">
<div class="login-logo">
<a href="../../index2.html"><b>Admin</b>LTE</a>
<a href="../../index2.html"><b>ENEI</b> 2019</a>
</div>
<!-- /.login-logo -->
<div class="login-box-body">
@ -9,12 +10,12 @@
<form #loginForm="ngForm" (ngSubmit)="login()">
<div class="form-group has-feedback">
<input type="username" name="username" class="form-control" placeholder="Username" required [(ngModel)]="model.username">
<span class="glyphicon glyphicon-envelope form-control-feedback"></span>
<input type="username" name="username" class="form-control" placeholder="Username" required [(ngModel)]="model.username">
<span class="fa fa-user form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input type="password" class="form-control" name="password" placeholder="Password" required [(ngModel)]="model.password">
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
<span class="fa fa-lock form-control-feedback"></span>
</div>
<div class="row">
<div class="col-xs-8">
@ -48,20 +49,4 @@
<!-- /.login-box-body -->
</div>
<!-- /.login-box -->
<!-- jQuery 3 -->
<script src="../../bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="../../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- iCheck -->
<script src="../../plugins/iCheck/icheck.min.js"></script>
<script>
$(function () {
$('input').iCheck({
checkboxClass: 'icheckbox_square-blue',
radioClass: 'iradio_square-blue',
increaseArea: '20%' /* optional */
});
});
</script>
</body>

15
backoffice/src/app/login/login.component.ts
View File

@ -14,18 +14,25 @@ export class LoginComponent implements OnInit {
constructor(private authService: AuthService, private router: Router) { }
ngOnInit() {
if (this.authService.loggedIn)
{
this.router.navigate(['/dashboard']);
}
}
login() {
this.authService.login(this.model).subscribe(next => {
console.log('Logged in sucessfully');
this.authService.login(this.model).subscribe(next => {
this.router.navigate(['/dashboard']);
}, error => {
console.log('Failed to login');
}, () => {
this.router.navigate(['/dashboard']);
this.router.navigate(['/dashboard']);
});
}
loggedIn() {
return this.authService.loggedIn();
}

5
backoffice/src/app/navigation/navigation.component.css Normal file
View File

@ -0,0 +1,5 @@
.user-image
{
}

192
backoffice/src/app/navigation/navigation.component.html Normal file
View File

@ -0,0 +1,192 @@
<header class="main-header">
<nav class="navbar navbar-static-top">
<div class="container">
<div class="navbar-header">
<a href="../../index2.html" class="navbar-brand"><b>ENEI </b>2019</a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
<i class="fa fa-bars"></i>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse pull-left" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a routerLink="/dashboard" routerLinkActive="active"><i class="fa fa-dashboard"></i> Dashboard <span class="sr-only">(current)</span></a></li>
<li><a routerLink="/profile" routerLinkActive="active"><i class="fa fa-users"></i> Users</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="dashboard/#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
<!-- Navbar Right Menu -->
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<!-- Messages: style can be found in dropdown.less-->
<li class="dropdown messages-menu">
<!-- Menu toggle button -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-envelope-o"></i>
<span class="label label-success">4</span>
</a>
<ul class="dropdown-menu">
<li class="header">You have 4 messages</li>
<li>
<!-- inner menu: contains the messages -->
<ul class="menu">
<li><!-- start message -->
<a href="#">
<div class="pull-left">
<!-- User Image -->
<img src="http://localhost:5000/dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
</div>
<!-- Message title and timestamp -->
<h4>
Support Team
<small><i class="fa fa-clock-o"></i> 5 mins</small>
</h4>
<!-- The message -->
<p>Why not buy a new awesome theme?</p>
</a>
</li>
<!-- end message -->
</ul>
<!-- /.menu -->
</li>
<li class="footer"><a href="#">See All Messages</a></li>
</ul>
</li>
<!-- /.messages-menu -->
<!-- Notifications Menu -->
<li class="dropdown notifications-menu">
<!-- Menu toggle button -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-bell-o"></i>
<span class="label label-warning">10</span>
</a>
<ul class="dropdown-menu">
<li class="header">You have 10 notifications</li>
<li>
<!-- Inner Menu: contains the notifications -->
<ul class="menu">
<li><!-- start notification -->
<a href="#">
<i class="fa fa-users text-aqua"></i> 5 new members joined today
</a>
</li>
<!-- end notification -->
</ul>
</li>
<li class="footer"><a href="#">View all</a></li>
</ul>
</li>
<!-- Tasks Menu -->
<li class="dropdown tasks-menu">
<!-- Menu Toggle Button -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-flag-o"></i>
<span class="label label-danger">9</span>
</a>
<ul class="dropdown-menu">
<li class="header">You have 9 tasks</li>
<li>
<!-- Inner menu: contains the tasks -->
<ul class="menu">
<li><!-- Task item -->
<a href="#">
<!-- Task title and progress text -->
<h3>
Design some buttons
<small class="pull-right">20%</small>
</h3>
<!-- The progress bar -->
<div class="progress xs">
<!-- Change the css width attribute to simulate progress -->
<div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">20% Complete</span>
</div>
</div>
</a>
</li>
<!-- end task item -->
</ul>
</li>
<li class="footer">
<a href="#">View all tasks</a>
</li>
</ul>
</li>
<!-- User Account Menu -->
<li class="dropdown user user-menu">
<!-- Menu Toggle Button -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<!-- The user image in the navbar-->
<img src="http://localhost:5000/dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
<!-- hidden-xs hides the username on small devices so only the image appears. -->
<span class="hidden-xs">{{nome}}</span>
</a>
<ul class="dropdown-menu">
<!-- The user image in the menu -->
<li class="user-header">
<img src="http://localhost:5000/dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
<p>
Henrique Dias
<small>ISEC</small>
</p>
</li>
<!-- Menu Body -->
<li class="user-body">
<div class="row">
<div class="col-xs-4 text-center">
<a href="#">Followers</a>
</div>
<div class="col-xs-4 text-center">
<a href="#">Sales</a>
</div>
<div class="col-xs-4 text-center">
<a href="#">Friends</a>
</div>
</div>
<!-- /.row -->
</li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a (click)="profile()" class="btn btn-default btn-flat">Profile</a>
</div>
<div class="pull-right">
<a (click)="logout()" class="btn btn-default btn-flat">Sign out</a>
</div>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-custom-menu -->
</div>
<!-- /.container-fluid -->
</nav>
</header>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="assets/dashboard.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="assets/demo.js"></script>

28
backoffice/src/app/navigation/navigation.component.spec.ts Normal file
View File

@ -0,0 +1,28 @@
/* tslint:disable:no-unused-variable */
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { NavigationComponent } from './navigation.component';
describe('NavigationComponent', () => {
let component: NavigationComponent;
let fixture: ComponentFixture<NavigationComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ NavigationComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(NavigationComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

27
backoffice/src/app/navigation/navigation.component.ts Normal file
View File

@ -0,0 +1,27 @@
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from '../services/auth.service';
@Component({
selector: 'app-navigation',
templateUrl: './navigation.component.html',
styleUrls: ['./navigation.component.css']
})
export class NavigationComponent implements OnInit {
constructor(private AuthService: AuthService, private router: Router) { }
nome= 'Henrique Dias';
ngOnInit() {
}
profile() {
this.router.navigate(['/profile']);
}
logout() {
localStorage.removeItem('token');
this.router.navigate(['/login']);
console.log('logged out!');
}
}

1076
backoffice/src/app/profile/profile.component.html
View File

File diff suppressed because it is too large Load Diff

2
backoffice/src/app/routes.ts
View File

@ -4,6 +4,7 @@ import { DashboardComponent } from './dashboard/dashboard.component';
import { LoginComponent } from './login/login.component';
import { ProfileComponent } from './profile/profile.component';
import { AuthGuard } from './guards/auth.guard';
import { CalendarComponent } from './calendar/calendar.component';
export const appRoutes: Routes = [
@ -11,5 +12,6 @@ export const appRoutes: Routes = [
{ path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard]},
{ path: 'login', component: LoginComponent},
{ path: 'profile', component: ProfileComponent, canActivate: [AuthGuard]},
{ path: 'calendar', component: CalendarComponent, canActivate: [AuthGuard] },
{ path: '**', redirectTo: 'dashboard', pathMatch: 'full'}
];

1
backoffice/src/index.html
View File

@ -11,4 +11,5 @@
<body>
<app-root></app-root>
</body>
</html>