MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

dashboard

This commit is contained in:
annampak 2017-12-14 18:43:57 +02:00
parent 63fe32fbaf
commit 878db46b0e
11 changed files with 1260 additions and 277 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1064
dmp-frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
dmp-frontend/src/app/app.module.ts
View File

@ -107,6 +107,10 @@ import { SharedModule } from './shared/shared.module';
import { MaterialModule } from './shared/material/material.module';
import { AuthService } from './services/auth/auth.service';
import { FigurecardComponent } from './figurecard/figurecard.component';
@NgModule({
declarations: [
AppComponent,
@ -143,7 +147,7 @@ import { AuthService } from './services/auth/auth.service';
ProgressBarComponent,
DynamicFieldCheckBoxComponent,
BreadcrumbComponent, DmpDetailedComponent, ProjectDetailedComponent,
FigurecardComponent
],
imports: [
BrowserModule,

51
dmp-frontend/src/app/figurecard/figurecard.component.css Normal file
View File

@ -0,0 +1,51 @@
.figure-card{
display: inline-block;
position: relative;
width: 100%;
margin: 25px 0;
}
.card-content{
text-align: right;
padding: 15px 20px 13px 20px;
}
.card-header {
float: left;
text-align: center;
/*background: linear-gradient(60deg, #ffa726, #fb8c00);*/
/*box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(255, 152, 0, 0.4);*/
margin: -20px 15px 0;
border-radius: 3px;
padding: 15px;
position: relative;
}
.card-header i {
font-size: 36px;
line-height: 56px;
width: 56px;
height: 56px;
color: #fff;
}
.category{
color: #999;
}
.card-footer{
margin: 0 20px 10px;
padding-top: 10px;
border-top: 1px solid #eee;
color: #999;
font-size: 12px;
position: relative;
}
.card-footer i {
font-size: 16px;
position: relative;
top: 4px;
color: #999;
}

13
dmp-frontend/src/app/figurecard/figurecard.component.html Normal file
View File

@ -0,0 +1,13 @@
<div class="figure-card card">
<div class="card-header" [ngStyle]="{ 'background': linearColor, 'box-shadow': boxShadow }">
<i class="material-icons">{{ headerIcon }}</i>
</div>
<div class="card-content">
<p class="category">{{ category }}</p>
<h3 class="title">{{ title }}</h3>
</div>
<div class="card-footer">
<a style="cursor:pointer;"><i class="material-icons text-danger">{{ footerIcon }}</i> {{ footContent }}</a>
</div>
</div>

21
dmp-frontend/src/app/figurecard/figurecard.component.ts Normal file
View File

@ -0,0 +1,21 @@
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-figurecard',
templateUrl: './figurecard.component.html',
styleUrls: ['./figurecard.component.css']
})
export class FigurecardComponent implements OnInit {
@Input() headerIcon: string;
@Input() category: string;
@Input() title: string;
@Input() footerIcon: string;
@Input() footContent: string;
@Input() linearColor: string;
@Input() boxShadow: string;
constructor() { }
ngOnInit() {
}
}

44
dmp-frontend/src/app/homepage/homepage.component.css
View File

@ -0,0 +1,44 @@
.card{
padding: 25px 20px 20px 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.card h6, p {
color: #999;
}
.icon{
margin-top: 20px;
width: 130px;
height: 130px;
border: 1px solid #e5e5e5;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.icon i{
font-size: 55px;
color: #e91e63;
}
.card-title{
margin-top: 30px;
margin-bottom: 3px;
}
.card-description{
margin-bottom: 20px;
}
.card-dataset{
display: flex;
flex-direction: column;
padding: 20px;
position: relative;
margin-top: 40px;
}

295
dmp-frontend/src/app/homepage/homepage.component.html
View File

@ -1,156 +1,169 @@
<div class="jumbotron">
<!-- <div class="jumbotron">
<h2>Hello {{ userInfo?.name!=null ? userInfo?.name : userInfo?.email }}</h2>
<p>Welcome {{ userInfo?.created != userInfo?.lastloggedin ? "back" : "" }} to the <a href="https://en.wikipedia.org/wiki/Data_management_plan">Data Management Plans</a> composer application. </p>
<!--
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
-->
</div>
<!--</div> -->
<div class="main-panel" id="main-panel">
<div class="container">
<!-- <app-navbar title="Table List"></app-navbar> -->
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<i class="material-icons">assignment</i>
</div>
<div class="card-content">
<h4 class="card-title">Simple Table</h4>
<div class="table-responsive">
<table class="table">
<thead class="text-primary">
<tr>
<th>First Name</th>
<th>Country</th>
<th>City</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dakota Rice</td>
<td>Niger</td>
<td>Oud-Turnhout</td>
<td class="text-primary">$36,738</td>
</tr>
<tr>
<td>Minerva Hooper</td>
<td>Curaçao</td>
<td>Sinaai-Waas</td>
<td class="text-primary">$23,789</td>
</tr>
<tr>
<td>Sage Rodriguez</td>
<td>Netherlands</td>
<td>Baileux</td>
<td class="text-primary">$56,142</td>
</tr>
<tr>
<td>Philip Chaney</td>
<td>Korea, South</td>
<td>Overland Park</td>
<td class="text-primary">$38,735</td>
</tr>
<tr>
<td>Doris Greene</td>
<td>Malawi</td>
<td>Feldkirchen in Kärnten</td>
<td class="text-primary">$63,542</td>
</tr>
<tr>
<td>Mason Porter</td>
<td>Chile</td>
<td>Gloucester</td>
<td class="text-primary">$78,615</td>
</tr>
</tbody>
</table>
<div class="container">
<div class="row page-title">
<div class="col-md-8 col-md-offset-2">
<div class="row">
<div class="col-md-4 page-title">
<div class="card card-raised">
<h6>Projects</h6>
<div class="icon">
<i class="material-icons">list</i>
</div>
<h3 class="card-title">52</h3>
<p class="card-description text-center">
This is good if your company size is between 2 and 10 Persons.
</p>
<button md-raised-button class="btn btn-rose btn-round">OPEN PROJECTS</button>
</div>
</div>
<div class="col-md-4 page-title">
<div class="card card-raised">
<h6>DMPs</h6>
<div class="icon">
<i class="material-icons">mode_edit</i>
</div>
<h3 class="card-title">33</h3>
<p class="card-description text-center">
This is good if your company size is between 2 and 10 Persons.
</p>
<button md-raised-button class="btn btn-rose btn-round">OPEN DMPs</button>
</div>
</div>
<div class="col-md-4 page-title">
<div class="card card-raised">
<h6>Datasets</h6>
<div class="icon">
<i class="material-icons">subject</i>
</div>
<h3 class="card-title">3</h3>
<p class="card-description text-center">
This is good if your company size is between 2 and 10 Persons.
</p>
<button md-raised-button class="btn btn-rose btn-round">OPEN DATASETS</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<!-- <app-navbar title="Dashboard"></app-navbar> -->
<div class="row" style="margin-top: 30px">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 col-md-offset-1">
<app-figurecard
title="184"
headerIcon="list"
category="Projects"
footContent="open projects"
footerIcon="open_in_new"
linearColor="linear-gradient(60deg, #ffa726, #fb8c00)"
boxShadow="0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(255, 152, 0, 0.4)">
</app-figurecard>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<app-figurecard
title="75.521"
headerIcon="mode_edit"
category="DMPs"
footContent="open DMPs"
footerIcon="open_in_new"
linearColor="linear-gradient(60deg, #ef5350, #e53935)"
boxShadow="0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(244, 67, 54, 0.4)">
</app-figurecard>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<app-figurecard
title="+245"
headerIcon="subject"
category="Datasets"
footContent="open datasets"
footerIcon="open_in_new"
linearColor="linear-gradient(60deg, #26c6da, #00acc1)"
boxShadow="0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(0, 188, 212, 0.4)">
</app-figurecard>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<i class="material-icons">assignment</i>
</div>
<div class="card-content">
<h4 class="card-title">Striped Table</h4>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th></th>
<th>Product Name</th>
<th>Type</th>
<th>Quantity</th>
<th class="text-right">Price</th>
<th class="text-right">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><md-checkbox></md-checkbox></td>
<td>Moleskine Agenda</td>
<td>Oud-Office</td>
<td>25</td>
<td class="text-right">€ 49</td>
<td class="text-right">€ 1,225</td>
</tr>
<tr>
<td>2</td>
<td><md-checkbox></md-checkbox></td>
<td>Stabilo Pen</td>
<td>Office</td>
<td>35</td>
<td class="text-right">€ 10</td>
<td class="text-right">€ 300</td>
</tr>
<tr>
<td>3</td>
<td><md-checkbox></md-checkbox></td>
<td>A4 Paper Pack</td>
<td>Office</td>
<td>50</td>
<td class="text-right">€ 599.00</td>
<td class="text-right">€ 109</td>
</tr>
<tr>
<td>4</td>
<td><md-checkbox></md-checkbox></td>
<td>Apple iPad</td>
<td>Meeting</td>
<td>20</td>
<td class="text-right">€ 10.99</td>
<td class="text-right">€ 4,999</td>
</tr>
<tr>
<td>5</td>
<td><md-checkbox></md-checkbox></td>
<td>Apple iPhone</td>
<td>Communication</td>
<td>10</td>
<td class="text-right">€ 499.00</td>
<td class="text-right">€ 5,999</td>
</tr>
<tr>
<td colspan="5"></td>
<td style="font-weight: 500; font-size: 1.25em;" class="text-right">Total</td>
<td style="font-size: 26px" class="text-right">€12,999</td>
</tr>
</tbody>
</table>
<div class="container">
<!-- <app-navbar title="Table List"></app-navbar> -->
<div class="row">
<div class="col-mat-12">
<div class="card-dataset">
<div class="card-header">
<i class="material-icons">assignment</i>
<a style = "cursor:pointer;"><i class="material-icons">add_circle</i></a>
</div>
<div class="card-content">
<h4 class="card-title">Active Datasets</h4>
<div class="table-responsive">
<table class="table">
<thead class="text-primary">
<tr>
<th>First Name</th>
<th>Country</th>
<th>City</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dakota Rice</td>
<td>Niger</td>
<td>Oud-Turnhout</td>
<td class="text-primary">$36,738</td>
</tr>
<tr>
<td>Minerva Hooper</td>
<td>Curaçao</td>
<td>Sinaai-Waas</td>
<td class="text-primary">$23,789</td>
</tr>
<tr>
<td>Sage Rodriguez</td>
<td>Netherlands</td>
<td>Baileux</td>
<td class="text-primary">$56,142</td>
</tr>
<tr>
<td>Philip Chaney</td>
<td>Korea, South</td>
<td>Overland Park</td>
<td class="text-primary">$38,735</td>
</tr>
<tr>
<td>Doris Greene</td>
<td>Malawi</td>
<td>Feldkirchen in Kärnten</td>
<td class="text-primary">$63,542</td>
</tr>
<tr>
<td>Mason Porter</td>
<td>Chile</td>
<td>Gloucester</td>
<td class="text-primary">$78,615</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

9
dmp-frontend/src/app/homepage/homepage.component.ts
View File

@ -1,6 +1,7 @@
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { ServerService } from '../../app/services/server.service';
import { RestBase } from '../../app/services/rest-base';
@Component({
selector: 'homepage',
@ -12,7 +13,7 @@ export class HomepageComponent implements OnInit{
private userInfo: any;
constructor(private serverService: ServerService, private route: ActivatedRoute, private router: Router){
constructor(private serverService: ServerService, private route: ActivatedRoute, private router: Router, private restbase: RestBase){
}
@ -25,8 +26,12 @@ export class HomepageComponent implements OnInit{
error => {
}
);
);
}
getStatistics(){
return this.restbase.get("datasetprofile/getAll");
}
}

2
dmp-frontend/src/app/shared/material/material.module.ts
View File

@ -22,6 +22,7 @@ import {
MatProgressSpinnerModule,
DateAdapter,
MatTooltipModule,
MatCheckboxModule,
MatTabsModule
} from '@angular/material';
import { CdkTableModule } from '@angular/cdk/table';
@ -54,6 +55,7 @@ import { SnackBarNotificationComponent } from '../components/notificaiton/snack-
MatProgressBarModule,
MatProgressSpinnerModule,
MatTooltipModule,
MatCheckboxModule,
MatTabsModule
],

1
dmp-frontend/src/index.html
View File

@ -51,6 +51,7 @@
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>

31
dmp-frontend/src/styles.css
View File

@ -71,4 +71,33 @@ body {
.cursor-link{
cursor: pointer;
}
/* dashboard */
.card{
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
border-radius: 6px;
color: rgba(0,0,0, 0.87);
background: #fff;
}
.card-raised{
box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.42), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
}
@media screen and (max-width: 990px){
#sidebar, #nav-right, #nav-left-button{
display: none;
}
#menu{
display: inline;
}
#main-panel{
padding-left: 0;
-webkit-transition: all 400ms;
-moz-transition: all 400ms;
-ms-transition: all 400ms;
-o-transition: all 400ms;
transition: all 400ms;
}
}