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 { MaterialModule } from './shared/material/material.module';
import { AuthService } from './services/auth/auth.service'; import { AuthService } from './services/auth/auth.service';
import { FigurecardComponent } from './figurecard/figurecard.component';
@NgModule({ @NgModule({
declarations: [ declarations: [
AppComponent, AppComponent,
@ -143,7 +147,7 @@ import { AuthService } from './services/auth/auth.service';
ProgressBarComponent, ProgressBarComponent,
DynamicFieldCheckBoxComponent, DynamicFieldCheckBoxComponent,
BreadcrumbComponent, DmpDetailedComponent, ProjectDetailedComponent, BreadcrumbComponent, DmpDetailedComponent, ProjectDetailedComponent,
FigurecardComponent
], ],
imports: [ imports: [
BrowserModule, 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> <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>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> <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"> <div class="container">
<!-- <app-navbar title="Table List"></app-navbar> -->
<div class="row"> <div class="row page-title">
<div class="col-md-12"> <div class="col-md-8 col-md-offset-2">
<div class="card"> <div class="row">
<div class="card-header"> <div class="col-md-4 page-title">
<i class="material-icons">assignment</i> <div class="card card-raised">
</div> <h6>Projects</h6>
<div class="card-content"> <div class="icon">
<h4 class="card-title">Simple Table</h4> <i class="material-icons">list</i>
<div class="table-responsive"> </div>
<table class="table"> <h3 class="card-title">52</h3>
<thead class="text-primary"> <p class="card-description text-center">
<tr> This is good if your company size is between 2 and 10 Persons.
<th>First Name</th> </p>
<th>Country</th> <button md-raised-button class="btn btn-rose btn-round">OPEN PROJECTS</button>
<th>City</th> </div>
<th>Salary</th> </div>
</tr> <div class="col-md-4 page-title">
</thead> <div class="card card-raised">
<tbody> <h6>DMPs</h6>
<tr> <div class="icon">
<td>Dakota Rice</td> <i class="material-icons">mode_edit</i>
<td>Niger</td> </div>
<td>Oud-Turnhout</td> <h3 class="card-title">33</h3>
<td class="text-primary">$36,738</td> <p class="card-description text-center">
</tr> This is good if your company size is between 2 and 10 Persons.
<tr> </p>
<td>Minerva Hooper</td> <button md-raised-button class="btn btn-rose btn-round">OPEN DMPs</button>
<td>Curaçao</td> </div>
<td>Sinaai-Waas</td> </div>
<td class="text-primary">$23,789</td> <div class="col-md-4 page-title">
</tr> <div class="card card-raised">
<tr> <h6>Datasets</h6>
<td>Sage Rodriguez</td> <div class="icon">
<td>Netherlands</td> <i class="material-icons">subject</i>
<td>Baileux</td> </div>
<td class="text-primary">$56,142</td> <h3 class="card-title">3</h3>
</tr> <p class="card-description text-center">
<tr> This is good if your company size is between 2 and 10 Persons.
<td>Philip Chaney</td> </p>
<td>Korea, South</td> <button md-raised-button class="btn btn-rose btn-round">OPEN DATASETS</button>
<td>Overland Park</td> </div>
<td class="text-primary">$38,735</td> </div>
</tr> </div>
<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 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>
</div> </div>
<div class="row">
<div class="col-md-12">
<div class="card"> <div class="container">
<div class="card-header"> <!-- <app-navbar title="Table List"></app-navbar> -->
<i class="material-icons">assignment</i> <div class="row">
</div> <div class="col-mat-12">
<div class="card-content"> <div class="card-dataset">
<h4 class="card-title">Striped Table</h4> <div class="card-header">
<div class="table-responsive"> <i class="material-icons">assignment</i>
<table class="table table-striped"> <a style = "cursor:pointer;"><i class="material-icons">add_circle</i></a>
<thead> </div>
<tr> <div class="card-content">
<th>#</th> <h4 class="card-title">Active Datasets</h4>
<th></th> <div class="table-responsive">
<th>Product Name</th> <table class="table">
<th>Type</th> <thead class="text-primary">
<th>Quantity</th> <tr>
<th class="text-right">Price</th> <th>First Name</th>
<th class="text-right">Amount</th> <th>Country</th>
</tr> <th>City</th>
</thead> <th>Salary</th>
<tbody> </tr>
<tr> </thead>
<td>1</td> <tbody>
<td><md-checkbox></md-checkbox></td> <tr>
<td>Moleskine Agenda</td> <td>Dakota Rice</td>
<td>Oud-Office</td> <td>Niger</td>
<td>25</td> <td>Oud-Turnhout</td>
<td class="text-right">€ 49</td> <td class="text-primary">$36,738</td>
<td class="text-right">€ 1,225</td> </tr>
</tr> <tr>
<tr> <td>Minerva Hooper</td>
<td>2</td> <td>Curaçao</td>
<td><md-checkbox></md-checkbox></td> <td>Sinaai-Waas</td>
<td>Stabilo Pen</td> <td class="text-primary">$23,789</td>
<td>Office</td> </tr>
<td>35</td> <tr>
<td class="text-right">€ 10</td> <td>Sage Rodriguez</td>
<td class="text-right">€ 300</td> <td>Netherlands</td>
</tr> <td>Baileux</td>
<tr> <td class="text-primary">$56,142</td>
<td>3</td> </tr>
<td><md-checkbox></md-checkbox></td> <tr>
<td>A4 Paper Pack</td> <td>Philip Chaney</td>
<td>Office</td> <td>Korea, South</td>
<td>50</td> <td>Overland Park</td>
<td class="text-right">€ 599.00</td> <td class="text-primary">$38,735</td>
<td class="text-right">€ 109</td> </tr>
</tr> <tr>
<tr> <td>Doris Greene</td>
<td>4</td> <td>Malawi</td>
<td><md-checkbox></md-checkbox></td> <td>Feldkirchen in Kärnten</td>
<td>Apple iPad</td> <td class="text-primary">$63,542</td>
<td>Meeting</td> </tr>
<td>20</td> <tr>
<td class="text-right">€ 10.99</td> <td>Mason Porter</td>
<td class="text-right">€ 4,999</td> <td>Chile</td>
</tr> <td>Gloucester</td>
<tr> <td class="text-primary">$78,615</td>
<td>5</td> </tr>
<td><md-checkbox></md-checkbox></td> </tbody>
<td>Apple iPhone</td> </table>
<td>Communication</td> </div>
<td>10</td> </div>
<td class="text-right">€ 499.00</td> </div>
<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> </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 { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router'; import { Router, ActivatedRoute } from '@angular/router';
import { ServerService } from '../../app/services/server.service'; import { ServerService } from '../../app/services/server.service';
import { RestBase } from '../../app/services/rest-base';
@Component({ @Component({
selector: 'homepage', selector: 'homepage',
@ -12,7 +13,7 @@ export class HomepageComponent implements OnInit{
private userInfo: any; 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 => { 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, MatProgressSpinnerModule,
DateAdapter, DateAdapter,
MatTooltipModule, MatTooltipModule,
MatCheckboxModule,
MatTabsModule MatTabsModule
} from '@angular/material'; } from '@angular/material';
import { CdkTableModule } from '@angular/cdk/table'; import { CdkTableModule } from '@angular/cdk/table';
@ -54,6 +55,7 @@ import { SnackBarNotificationComponent } from '../components/notificaiton/snack-
MatProgressBarModule, MatProgressBarModule,
MatProgressSpinnerModule, MatProgressSpinnerModule,
MatTooltipModule, MatTooltipModule,
MatCheckboxModule,
MatTabsModule 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"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head> </head>
<body> <body>

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

@ -71,4 +71,33 @@ body {
.cursor-link{ .cursor-link{
cursor: pointer; 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;
}
}