Commit a57b158b authored by Paulo's avatar Paulo
Browse files

refactor(layout): modification du layout de la page

parent 31ce970f
import { Injectable } from '@angular/core';
import { User } from 'src/app/user/model/user';
@Injectable({
providedIn: 'root'
})
export class AuthService {
constructor() { }
public login(userInfo: User){
localStorage.setItem('ACCESS_TOKEN', "access_token");
}
public isLoggedIn(){
return localStorage.getItem('ACCESS_TOKEN') !== null;
}
public logout(){
localStorage.removeItem('ACCESS_TOKEN');
}
}
......@@ -12,8 +12,9 @@ import { SettingsmartapiComponent } from './settingsmartapi/settingsmartapi.comp
import { RepositoryinfoComponent } from './repositoryinfo/repositoryinfo.component';
import { SwaggereditorComponent } from './swaggereditor/swaggereditor.component';
import { ElasticsearchComponent } from './elasticsearch/elasticsearch.component'
import { PublishapiComponent } from './publishapi/publishapi.component'
import { PublishApiComponent } from './publishapi/publishapi.component'
import { SearchComponent } from './search/search.component';
import { AccountLoginComponent } from './account/login/account.login.component';
const routes: Routes = [
......@@ -29,11 +30,15 @@ const routes: Routes = [
{path: 'settingsmartharvester', component : SettingsmartapiComponent},
{path: 'swaggerapi', component : SwaggereditorComponent},
{path: 'elasticsearch', component : ElasticsearchComponent},
{path: 'publishapi', component : PublishapiComponent},
{path: 'publishapi', component : PublishApiComponent},
{path: 'simplesearch', component : SearchComponent},
{path: 'advancedsearch', component : SearchComponent}
];
{path: 'advancedsearch', component : SearchComponent},
{path: 'auth/login',component: AccountLoginComponent},
//{ path: 'register',component: NbRegisterComponent},
//{ path: 'logout', component: NbLogoutComponent},
//{ path: 'request-password', component: NbRequestPasswordComponent},
//{ path: 'reset-password', component: NbRequestPasswordComponent}
]
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
......
<style>
:host {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 14px;
color: #333;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 8px 0;
}
p {
margin: 0;
}
.spacer {
flex: 1;
}
.toolbar {
height: 60px;
margin: -8px;
display: flex;
align-items: center;
background-color: #badcfd;
font-weight: 600;
}
.toolbar img {
margin: 0 16px;
}
.toolbar #twitter-logo:hover {
opacity: 0.8;
}
.content {
display: flex;
margin: 32px auto;
padding: 0 16px;
max-width: 960px;
flex-direction: column;
align-items: center;
}
svg.material-icons {
height: 24px;
width: auto;
}
svg.material-icons:not(:last-child) {
margin-right: 8px;
}
a,
a:visited,
a:hover {
color: #1976d2;
text-decoration: none;
}
a:hover {
color: #125699;
}
footer {
margin-top: 8px;
display: flex;
align-items: center;
line-height: 20px;
}
footer a {
display: flex;
align-items: center;
}
/* Responsive Styles */
@media screen and (max-width: 767px) {
.card-container > *:not(.circle-link) ,
.terminal {
width: 100%;
}
.card:not(.highlight-card) {
height: 16px;
margin: 8px 0;
}
.card.highlight-card span {
margin-left: 72px;
}
svg#rocket-smoke {
right: 120px;
transform: rotate(-5deg);
}
}
@media screen and (max-width: 575px) {
svg#rocket-smoke {
display: none;
visibility: hidden;
}
}
</style>
<!-- Toolbar -->
<div class="toolbar" role="banner">
<a routerLink="/" routerLinkActive="active">
<img
width="80"
alt="Angular Logo"
src="assets/images/logo.png"
/>
</a>
<button class="menu-button" mat-button [matMenuTriggerFor]="menu">Register</button>
<mat-menu #menu="matMenu">
<button mat-menu-item routerLink="/login" routerLinkActive="active">Login</button>
<mat-divider></mat-divider>
<button mat-menu-item [matMenuTriggerFor]="subMenuRepo">Describe your repository</button>
<mat-menu #subMenuRepo="matMenu">
<button mat-menu-item routerLink="/repositoryinfo" routerLinkActive="active">SDT administrative information </button>
<button mat-menu-item routerLink="/repository" routerLinkActive="active">Technical information</button>
</mat-menu>
<button mat-menu-item routerLink="/publishapi" routerLinkActive="active">Describe access to datasets</button>
<mat-divider></mat-divider>
<button mat-menu-item [matMenuTriggerFor]="subMenuSetting">Settings</button>
<mat-menu #subMenuSetting="matMenu">
<button mat-menu-item routerLink="/settingfdp" routerLinkActive="active">FDP setting</button>
<button mat-menu-item routerLink="/settingsmartharvester" routerLinkActive="active">SmartHarvester setting</button>
<button mat-menu-item routerLink="/elasticsearch" routerLinkActive="active">Elasticsearch setting</button>
</mat-menu>
</mat-menu>
<button class="menu-button" routerLink="/simplesearch" routerLinkActive="active">Search</button>
<h3 style="color:#1f77ac; margin-left: auto; margin-right: auto"> <strong>Publish your datasets in the Federated FAIR Data Space</strong></h3>
</div>
<div class="content" role="main">
<router-outlet></router-outlet>
</div>
<nb-layout>
<nb-layout-header fixed>
<nb-icon (click)="toggleSidebar()" class="sidebar-toggle" icon="menu-2-outline"></nb-icon>
<a routerLink="/" routerLinkActive="active">
<img width="80"alt="Angular Logo" src="assets/images/logo.png"/>
</a>
<nb-user style="margin-left:75%; white-space: pre;" name="Paulo Pimenta"
title="CINES"
[nbContextMenu]="items"
nbContextMenuTag="my-context-menu">
</nb-user>
<button routerLink="/auth/login" nbContextMenuPlacement="right" outline nbButton >Login</button>
</nb-layout-header>
<nb-sidebar responsive start state="compacted">
<!--Menu Items-->
<nb-menu [items]="items" autoCollapse="true"></nb-menu>
</nb-sidebar>
<nb-layout-column>
<router-outlet></router-outlet>
</nb-layout-column>
<nb-layout-footer fixed>Contact us</nb-layout-footer>
</nb-layout>
<div class="footer">TEST</div>
:host {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 14px;
color: #333;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 8px 0;
}
p {
margin: 0;
}
.spacer {
flex: 1;
}
.toolbar {
height: 60px;
margin: -8px;
display: flex;
align-items: center;
background-color: #badcfd;
font-weight: 600;
}
.toolbar img {
margin: 0 16px;
}
.toolbar #twitter-logo:hover {
opacity: 0.8;
}
.content {
display: flex;
margin: 32px auto;
padding: 0 16px;
max-width: 960px;
flex-direction: column;
align-items: center;
}
svg.material-icons {
height: 24px;
width: auto;
}
svg.material-icons:not(:last-child) {
margin-right: 8px;
}
a,
a:visited,
a:hover {
color: #1976d2;
text-decoration: none;
}
a:hover {
color: #125699;
}
footer {
margin-top: 8px;
display: flex;
align-items: center;
line-height: 20px;
}
footer a {
display: flex;
align-items: center;
}
/* Responsive Styles */
@media screen and (max-width: 767px) {
.card-container > *:not(.circle-link) ,
.terminal {
width: 100%;
}
.card:not(.highlight-card) {
height: 16px;
margin: 8px 0;
}
.card.highlight-card span {
margin-left: 72px;
}
svg#rocket-smoke {
right: 120px;
transform: rotate(-5deg);
}
}
@media screen and (max-width: 575px) {
svg#rocket-smoke {
display: none;
visibility: hidden;
}
}
.sidebar-toggle {
padding-right: 1.25rem;
text-decoration: none;
color: var(--text-hint-color);
font-size: 3.5rem;
}
.footer{
display: block;
margin-top: auto;
z-index: 99999!important;
overflow: hidden;
width: auto;
height: 100px;
}
\ No newline at end of file
import { Component } from '@angular/core';
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { NbMenuItem, NbSidebarService } from '@nebular/theme';
@Component({
selector: 'app-root',
changeDetection: ChangeDetectionStrategy.OnPush,
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
export class AppComponent {
title = 'register-front';
items: NbMenuItem[] = [
{
title: 'Home',
icon: 'home-outline',
link: '',
pathMatch:'full'
},
{
title: 'Register',
icon: 'file-text-outline',
link: '/register',
pathMatch:'full'
},
{
title: 'Login',
icon: 'person-outline',
link: '/login',
pathMatch:'full'
},
{
title: 'Search',
icon: 'search-outline',
link: '/simplesearch',
pathMatch:'full'
},
{
title: 'Describe your repository',
icon: 'cube-outline',
children: [
{
title: 'SDT information',
link: '/repositoryinfo',
pathMatch:'full',
icon: 'flash-outline',
},
{
title: 'Technical information',
link: '/repository',
pathMatch:'full',
icon: 'text-outline',
},
],
},
{
title: 'Describe access to datasets',
icon: 'clipboard-outline',
link: '/publishapi',
pathMatch:'full'
},
{
title: 'Settings',
icon: 'options-2-outline',
children: [
{
title: 'FDP settings',
link: '/settingfdp',
pathMatch:'full'
},
{
title: 'SmartHarvester settings',
link: '/settingsmartharvester',
pathMatch:'full'
},
{
title: 'Elasticsearch settings',
link: '/elasticsearch',
pathMatch:'full'
}
],
},
];
constructor(private readonly sidebarService: NbSidebarService) {
}
toggleSidebar(): boolean {
this.sidebarService.toggle(true);
return false;
}
}
......
......@@ -32,9 +32,16 @@ import { FileSaverModule } from 'ngx-filesaver';
import { SwaggereditorComponent } from './swaggereditor/swaggereditor.component';
import { AppConfiguration } from './AppConfiguration';
import { ElasticsearchComponent } from './elasticsearch/elasticsearch.component';
import { PublishapiComponent } from './publishapi/publishapi.component';
import { PublishApiComponent } from './publishapi/publishapi.component';
import { SearchComponent } from './search/search.component'
import { ParseXmlService } from './services/parse-xml.service';
import { NbMenuModule,
NbThemeModule,NbStepperModule,
NbCardModule, NbSidebarModule, NbLayoutModule,
NbButtonModule, NbIconModule, NbInputModule, NbContextMenuModule, NbUserModule } from '@nebular/theme/';
import { NbEvaIconsModule } from '@nebular/eva-icons';
import { AccountComponent } from './account/account.component';
import { AccountModule } from './account/account.module';
......@@ -53,8 +60,9 @@ import { ParseXmlService } from './services/parse-xml.service';
RepositoryinfoComponent,
SwaggereditorComponent,
ElasticsearchComponent,
PublishapiComponent,
SearchComponent
PublishApiComponent,
SearchComponent,
AccountComponent
],
imports: [
BrowserModule,
......@@ -69,8 +77,20 @@ import { ParseXmlService } from './services/parse-xml.service';
FormsModule,
ReactiveFormsModule,
HttpClientModule,
FileSaverModule
FileSaverModule,
NbStepperModule,
NbCardModule,
NbThemeModule.forRoot({ name: 'default' }),
NbLayoutModule,
NbSidebarModule.forRoot(),
NbContextMenuModule,
NbButtonModule,
NbMenuModule.forRoot(),
NbIconModule,
NbEvaIconsModule,
NbInputModule,
NbUserModule,
AccountModule
],
providers: [
AppConfiguration,
......
<p>publishapi works!</p>
<br><br>
<br><br>
<button class="next-step-button" routerLink="/datasets" routerLinkActive="active" >Next step</button>
<!--<button class="next-step-button" routerLink="/datasets" routerLinkActive="active" >Next step</button>-->
<!--Nebula example-->
<nb-card>
<nb-card-body>
<nb-stepper orientation="horizontal" disableStepNavigation>
<nb-step [label]="labelOne">
<ng-template #labelOne>First step</ng-template>
<h4>Map Schema</h4>
<p class="lorem">
Map your metadata schema with FDP schema
</p>
<button class="prev-button" nbButton disabled nbStepperNext>prev</button>
<button class="next-button" nbButton nbStepperNext>next</button>
</nb-step>
<nb-step [label]="labelTwo">
<ng-template #labelTwo>Second step</ng-template>
<h4>Missing data</h4>
<p class="lorem">
Add missing informations
</p>
<button class="prev-button" nbButton nbStepperPrevious>prev</button>
<button class="next-button" nbButton nbStepperNext>next</button>
</nb-step>
<nb-step label="Third step">
<h4>Ontology match</h4>
<p class="lorem">
Align with ontologies
</p>
<button class="prev-button" nbButton nbStepperPrevious>prev</button>
<button class="next-button" nbButton nbStepperNext>next</button>
</nb-step>
<nb-step [label]="labelFour">
<ng-template #labelFour>Fourth step</ng-template>
<h4>Done</h4>
<p class="lorem">
Your API is FAIRFIED :-)
</p>
<button class="prev-button" nbButton nbStepperPrevious>prev</button>
<button class="next-button" nbButton disabled nbStepperNext>next</button>
</nb-step>
</nb-stepper>
</nb-card-body>
</nb-card>
\ No newline at end of file
.prev-button {
margin-right: 1rem;
}
\ No newline at end of file
import { Component, OnInit } from '@angular/core';
import { ComponentFactoryResolver, OnDestroy, ViewChild } from '@angular/core';
import { Component, Input, OnInit, TemplateRef } from '@angular/core';
import { Directive, ViewContainerRef } from '@angular/core';
@Component({
......@@ -6,11 +11,12 @@ import { Component, OnInit } from '@angular/core';
templateUrl: './publishapi.component.html',
styleUrls: ['./publishapi.component.scss']
})
export class