diff options
Diffstat (limited to 'src')
32 files changed, 530 insertions, 31 deletions
diff --git a/src/app/api.service.ts b/src/app/api.service.ts index 5b45ad3..9756bd4 100644 --- a/src/app/api.service.ts +++ b/src/app/api.service.ts | |||
@@ -1,20 +1,110 @@ | |||
1 | import { HttpClient, HttpHeaders } from '@angular/common/http'; | ||
1 | import { Injectable } from '@angular/core'; | 2 | import { Injectable } from '@angular/core'; |
2 | import { Observable, of } from 'rxjs'; | 3 | import { Observable, of } from 'rxjs'; |
3 | import { RestAPI } from './rest-api'; | 4 | import { RestAPI } from './rest-api'; |
5 | import { IdentityAPI } from './identity-api'; | ||
6 | import { catchError, map, tap } from 'rxjs/operators'; | ||
7 | import { MessagesService } from './messages.service'; | ||
4 | 8 | ||
5 | @Injectable({ | 9 | @Injectable({ |
6 | providedIn: 'root' | 10 | providedIn: 'root' |
7 | }) | 11 | }) |
8 | export class ApiService { | 12 | export class ApiService { |
9 | apis: RestAPI[] = [ | 13 | apis: RestAPI[] = [ |
10 | {name: 'Rest API 1', desc: 'Lorem ipsum dolor sit amet consectetur adipiscing elit sed, diam dictum inceptos nostra mus enim id scelerisque, nam congue ligula penatibus dui arcu cubilia. Placerat dapibus felis euismod ligula pellentesque facilisi magna eu curae ridiculus arcu venenatis, ad justo auctor mollis faucibus viverra odio netus lectus risus vitae. Quisque morbi dapibus mollis ut cursus leo nascetur vitae aliquet venenatis per sociosqu, vivamus pulvinar risus nunc libero feugiat auctor gravida commodo proin.', link: 'rest_api1'}, | 14 | {name: 'Identity API', desc: 'This is the identity API', link: 'identity'}, |
11 | {name: 'Rest API 2', desc: 'Lorem ipsum dolor sit amet consectetur adipiscing elit sed, diam dictum inceptos nostra mus enim id scelerisque, nam congue ligula penatibus dui arcu cubilia. Placerat dapibus felis euismod ligula pellentesque facilisi magna eu curae ridiculus arcu venenatis, ad justo auctor mollis faucibus viverra odio netus lectus risus vitae. Quisque morbi dapibus mollis ut cursus leo nascetur vitae aliquet venenatis per sociosqu, vivamus pulvinar risus nunc libero feugiat auctor gravida commodo proin.', link: 'rest_api2'}, | 15 | {name: 'Rest API 2', desc: 'Lorem ipsum dolor sit amet consectetur adipiscing elit sed, diam dictum inceptos nostra mus enim id scelerisque, nam congue ligula penatibus dui arcu cubilia. Placerat dapibus felis euismod ligula pellentesque facilisi magna eu curae ridiculus arcu venenatis, ad justo auctor mollis faucibus viverra odio netus lectus risus vitae. Quisque morbi dapibus mollis ut cursus leo nascetur vitae aliquet venenatis per sociosqu, vivamus pulvinar risus nunc libero feugiat auctor gravida commodo proin.', link: 'rest_api2'}, |
12 | {name: 'Rest API 3', desc: 'Lorem ipsum dolor sit amet consectetur adipiscing elit sed, diam dictum inceptos nostra mus enim id scelerisque, nam congue ligula penatibus dui arcu cubilia. Placerat dapibus felis euismod ligula pellentesque facilisi magna eu curae ridiculus arcu venenatis, ad justo auctor mollis faucibus viverra odio netus lectus risus vitae. Quisque morbi dapibus mollis ut cursus leo nascetur vitae aliquet venenatis per sociosqu, vivamus pulvinar risus nunc libero feugiat auctor gravida commodo proin.', link: 'rest_api3'} | 16 | {name: 'Rest API 3', desc: 'Lorem ipsum dolor sit amet consectetur adipiscing elit sed, diam dictum inceptos nostra mus enim id scelerisque, nam congue ligula penatibus dui arcu cubilia. Placerat dapibus felis euismod ligula pellentesque facilisi magna eu curae ridiculus arcu venenatis, ad justo auctor mollis faucibus viverra odio netus lectus risus vitae. Quisque morbi dapibus mollis ut cursus leo nascetur vitae aliquet venenatis per sociosqu, vivamus pulvinar risus nunc libero feugiat auctor gravida commodo proin.', link: 'rest_api3'} |
13 | ]; | 17 | ]; |
14 | 18 | ||
15 | constructor() { } | 19 | private identityURL = 'http://localhost:7776/identity'; // URL to GNUnet identity web api |
20 | |||
21 | constructor(private http: HttpClient, | ||
22 | private messages:MessagesService) { } | ||
16 | 23 | ||
17 | getAPIs(): Observable<RestAPI[]> { | 24 | getAPIs(): Observable<RestAPI[]> { |
18 | return of(this.apis); | 25 | return of(this.apis); |
19 | } | 26 | } |
27 | |||
28 | getIdentities (): Observable<IdentityAPI[]>{ | ||
29 | return this.http.get<IdentityAPI[]>(this.identityURL) | ||
30 | .pipe( | ||
31 | tap(json => this.handleJSON(json)), | ||
32 | catchError(this.handleError('getIdentities', [])) | ||
33 | ); | ||
34 | } | ||
35 | |||
36 | createIdentity (json: any): Observable<any>{ | ||
37 | this.messages.dismissError(); | ||
38 | const options = {headers: {'Content-Type': 'application/json'}}; | ||
39 | return this.http.post(this.identityURL, json, options) | ||
40 | .pipe( | ||
41 | tap(json => this.handleJSON(json)), | ||
42 | catchError(this.handleError('createIdentity', [])) | ||
43 | ); | ||
44 | } | ||
45 | |||
46 | deleteIdentity (id: string): Observable<any>{ | ||
47 | this.messages.dismissError(); | ||
48 | return this.http.delete(this.identityURL+'/'+id) | ||
49 | .pipe( | ||
50 | tap(json => this.handleJSON(json)), | ||
51 | catchError(this.handleError('deleteIdentity', [])) | ||
52 | ); | ||
53 | } | ||
54 | |||
55 | |||
56 | changeIdentity (id: string, json: any): Observable<any>{ | ||
57 | this.messages.dismissError(); | ||
58 | const options = {headers: {'Content-Type': 'application/json'}}; | ||
59 | return this.http.put(this.identityURL+'/'+id, json, options) | ||
60 | .pipe( | ||
61 | tap(json => this.handleJSON(json)), | ||
62 | catchError(this.handleError('changeIdentity', [])) | ||
63 | ); | ||
64 | } | ||
65 | /** | ||
66 | * Handle Http operation that failed. | ||
67 | * Let the app continue. | ||
68 | * @param operation - name of the operation that failed | ||
69 | * @param result - optional value to return as the observable result | ||
70 | */ | ||
71 | private handleError<T> (operation = 'operation', result?: T) { | ||
72 | return (error: any): Observable<T> => { | ||
73 | |||
74 | //console.error(error); // log to console instead | ||
75 | |||
76 | if((operation == 'createIdentity') && (error.status == '409')) | ||
77 | { | ||
78 | this.messages.pushError('Cannot create identity. Identity already exists.'); | ||
79 | } | ||
80 | if((operation == 'changeIdentity') && (error.status == '404')) | ||
81 | { | ||
82 | this.messages.pushError('Cannot rename identity. Identity not found.'); | ||
83 | } | ||
84 | if((operation == 'changeIdentity') && (error.status == '409')) | ||
85 | { | ||
86 | this.messages.pushError('Cannot rename identity. Identity with this name already exists.'); | ||
87 | } | ||
88 | if((operation == 'deleteIdentity') && (error.status == '404')) | ||
89 | { | ||
90 | this.messages.pushError('Cannot delete identity. Identity not found.'); | ||
91 | } | ||
92 | |||
93 | if((error.statusText == 'Unknown Error')) | ||
94 | { | ||
95 | this.messages.pushError('Unknown Error. Is the server running?'); | ||
96 | } | ||
97 | |||
98 | return of(result as T); | ||
99 | }; | ||
100 | } | ||
101 | |||
102 | private handleJSON (json: any) { | ||
103 | if(json != null) | ||
104 | { | ||
105 | if(json.error != null){ | ||
106 | this.messages.pushError(json.error); | ||
107 | } | ||
108 | } | ||
109 | } | ||
20 | } | 110 | } |
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 498467d..5d38c0f 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts | |||
@@ -3,11 +3,13 @@ import { RouterModule, Routes } from '@angular/router'; | |||
3 | 3 | ||
4 | import { RestApisComponent } from './rest-apis/rest-apis.component'; | 4 | import { RestApisComponent } from './rest-apis/rest-apis.component'; |
5 | import { MainPageComponent } from './main-page/main-page.component'; | 5 | import { MainPageComponent } from './main-page/main-page.component'; |
6 | import { IdentityPageComponent } from './identity-page/identity-page.component'; | ||
6 | 7 | ||
7 | 8 | ||
8 | const routes: Routes = [ | 9 | const routes: Routes = [ |
9 | { path: '', component: MainPageComponent }, | 10 | { path: '', component: MainPageComponent }, |
10 | { path: 'apis', component: RestApisComponent } | 11 | { path: 'apis', component: RestApisComponent }, |
12 | { path: 'identity', component: IdentityPageComponent } | ||
11 | ]; | 13 | ]; |
12 | 14 | ||
13 | @NgModule({ | 15 | @NgModule({ |
diff --git a/src/app/app.component.html b/src/app/app.component.html index 70136f0..c13abbe 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html | |||
@@ -9,10 +9,10 @@ | |||
9 | <nav> | 9 | <nav> |
10 | <ul class="o-list o-list--inline o-list--gutter-x4"> | 10 | <ul class="o-list o-list--inline o-list--gutter-x4"> |
11 | <li class="o-list__item"> | 11 | <li class="o-list__item"> |
12 | <a routerLink="/" class="c-link">Item</a> | 12 | <a routerLink="/" class="c-link">Main Page</a> |
13 | </li> | 13 | </li> |
14 | <li class="o-list__item"> | 14 | <li class="o-list__item"> |
15 | <a routerLink="apis" class="c-link">Item1</a> | 15 | <a routerLink="identity" class="c-link">Identity</a> |
16 | </li> | 16 | </li> |
17 | </ul> | 17 | </ul> |
18 | </nav> | 18 | </nav> |
@@ -21,7 +21,8 @@ | |||
21 | </div> | 21 | </div> |
22 | </header> | 22 | </header> |
23 | 23 | ||
24 | <main class="u-pv-x5"> | 24 | <main class="u-pv-x3 o-container"> |
25 | <error-message></error-message> | ||
25 | <router-outlet></router-outlet> | 26 | <router-outlet></router-outlet> |
26 | </main> | 27 | </main> |
27 | 28 | ||
diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 293f9af..c1b600d 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts | |||
@@ -1,24 +1,34 @@ | |||
1 | import { BrowserModule } from '@angular/platform-browser'; | 1 | import { BrowserModule } from '@angular/platform-browser'; |
2 | import { NgModule } from '@angular/core'; | 2 | import { NgModule } from '@angular/core'; |
3 | import { FormsModule } from '@angular/forms'; | 3 | import { FormsModule } from '@angular/forms'; |
4 | import { HttpClientModule } from '@angular/common/http'; | ||
4 | 5 | ||
5 | import { AppComponent } from './app.component'; | 6 | import { AppComponent } from './app.component'; |
6 | import { HeroesComponent } from './heroes/heroes.component'; | 7 | import { HeroesComponent } from './heroes/heroes.component'; |
7 | import { RestApisComponent } from './rest-apis/rest-apis.component'; | 8 | import { RestApisComponent } from './rest-apis/rest-apis.component'; |
8 | import { AppRoutingModule } from './/app-routing.module'; | 9 | import { AppRoutingModule } from './app-routing.module'; |
9 | import { MainPageComponent } from './main-page/main-page.component'; | 10 | import { MainPageComponent } from './main-page/main-page.component'; |
11 | import { IdentityPageComponent } from './identity-page/identity-page.component'; | ||
12 | import { CreateIdentityComponent } from './create-identity/create-identity.component'; | ||
13 | import { MyFilterPipe } from './filter.pipe'; | ||
14 | import { ErrorMessageComponent } from './error-message/error-message.component'; | ||
10 | 15 | ||
11 | @NgModule({ | 16 | @NgModule({ |
12 | declarations: [ | 17 | declarations: [ |
13 | AppComponent, | 18 | AppComponent, |
14 | HeroesComponent, | 19 | HeroesComponent, |
15 | RestApisComponent, | 20 | RestApisComponent, |
16 | MainPageComponent | 21 | MainPageComponent, |
22 | IdentityPageComponent, | ||
23 | CreateIdentityComponent, | ||
24 | MyFilterPipe, | ||
25 | ErrorMessageComponent | ||
17 | ], | 26 | ], |
18 | imports: [ | 27 | imports: [ |
19 | BrowserModule, | 28 | BrowserModule, |
20 | FormsModule, | 29 | FormsModule, |
21 | AppRoutingModule | 30 | AppRoutingModule, |
31 | HttpClientModule | ||
22 | ], | 32 | ], |
23 | providers: [], | 33 | providers: [], |
24 | bootstrap: [AppComponent] | 34 | bootstrap: [AppComponent] |
diff --git a/src/app/create-identity/create-identity.component.html b/src/app/create-identity/create-identity.component.html new file mode 100644 index 0000000..328e447 --- /dev/null +++ b/src/app/create-identity/create-identity.component.html | |||
@@ -0,0 +1,8 @@ | |||
1 | <div class="c-card c-card--no-padding u-p-x3"> | ||
2 | <div class="o-type-20 u-pb-x1" >Create new identity</div> | ||
3 | <div class="u-ph-x2"> | ||
4 | <input [(ngModel)]="this.input_text" type="text" class="c-input" placeholder="Identity Name"/> | ||
5 | <span class="u-ph-x3"><a class="c-button" (click)="onClick()">Create</a></span> | ||
6 | <span *ngIf="!is_free">Loading... Please wait.</span> | ||
7 | </div> | ||
8 | </div> | ||
diff --git a/src/app/create-identity/create-identity.component.spec.ts b/src/app/create-identity/create-identity.component.spec.ts new file mode 100644 index 0000000..cc43e69 --- /dev/null +++ b/src/app/create-identity/create-identity.component.spec.ts | |||
@@ -0,0 +1,25 @@ | |||
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; | ||
2 | |||
3 | import { CreateIdentityComponent } from './create-identity.component'; | ||
4 | |||
5 | describe('CreateIdentityComponent', () => { | ||
6 | let component: CreateIdentityComponent; | ||
7 | let fixture: ComponentFixture<CreateIdentityComponent>; | ||
8 | |||
9 | beforeEach(async(() => { | ||
10 | TestBed.configureTestingModule({ | ||
11 | declarations: [ CreateIdentityComponent ] | ||
12 | }) | ||
13 | .compileComponents(); | ||
14 | })); | ||
15 | |||
16 | beforeEach(() => { | ||
17 | fixture = TestBed.createComponent(CreateIdentityComponent); | ||
18 | component = fixture.componentInstance; | ||
19 | fixture.detectChanges(); | ||
20 | }); | ||
21 | |||
22 | it('should create', () => { | ||
23 | expect(component).toBeTruthy(); | ||
24 | }); | ||
25 | }); | ||
diff --git a/src/app/create-identity/create-identity.component.ts b/src/app/create-identity/create-identity.component.ts new file mode 100644 index 0000000..2ba7fce --- /dev/null +++ b/src/app/create-identity/create-identity.component.ts | |||
@@ -0,0 +1,35 @@ | |||
1 | import { Component, OnInit } from '@angular/core'; | ||
2 | |||
3 | import { ApiService } from '../api.service'; | ||
4 | import { IdentityPageComponent } from '../identity-page/identity-page.component'; | ||
5 | |||
6 | @Component({ | ||
7 | selector: 'create-identity-component', | ||
8 | templateUrl: './create-identity.component.html' | ||
9 | }) | ||
10 | export class CreateIdentityComponent implements OnInit { | ||
11 | |||
12 | private input_text: string = ''; | ||
13 | private json: any = {'name':''}; | ||
14 | private is_free:boolean = true; | ||
15 | |||
16 | constructor(private apiService: ApiService, | ||
17 | private identity: IdentityPageComponent) { } | ||
18 | |||
19 | ngOnInit() { | ||
20 | } | ||
21 | |||
22 | onClick() { | ||
23 | if (this.input_text != "" && this.is_free){ | ||
24 | this.is_free = false; | ||
25 | this.json.name = this.input_text; | ||
26 | this.apiService.createIdentity(this.json).subscribe(test => { | ||
27 | this.identity.getAPIs(); | ||
28 | this.is_free = true; | ||
29 | }); | ||
30 | } else { | ||
31 | alert("No input"); | ||
32 | } | ||
33 | } | ||
34 | |||
35 | } | ||
diff --git a/src/app/error-message/error-message.component.html b/src/app/error-message/error-message.component.html new file mode 100644 index 0000000..fc7cc10 --- /dev/null +++ b/src/app/error-message/error-message.component.html | |||
@@ -0,0 +1,7 @@ | |||
1 | |||
2 | <div *ngIf="messages.getError()" class="c-error u-mb-x2"> | ||
3 | <div class="o-media"> | ||
4 | <span class="o-media__fixed u-text-left">Error: {{messages.getError()}}</span> | ||
5 | <a class="o-media__fluid u-text-right c-link" (click)="dismissError()">X</a> | ||
6 | </div> | ||
7 | </div> | ||
diff --git a/src/app/error-message/error-message.component.spec.ts b/src/app/error-message/error-message.component.spec.ts new file mode 100644 index 0000000..d90c1d5 --- /dev/null +++ b/src/app/error-message/error-message.component.spec.ts | |||
@@ -0,0 +1,25 @@ | |||
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; | ||
2 | |||
3 | import { ErrorMessageComponent } from './error-message.component'; | ||
4 | |||
5 | describe('ErrorMessageComponent', () => { | ||
6 | let component: ErrorMessageComponent; | ||
7 | let fixture: ComponentFixture<ErrorMessageComponent>; | ||
8 | |||
9 | beforeEach(async(() => { | ||
10 | TestBed.configureTestingModule({ | ||
11 | declarations: [ ErrorMessageComponent ] | ||
12 | }) | ||
13 | .compileComponents(); | ||
14 | })); | ||
15 | |||
16 | beforeEach(() => { | ||
17 | fixture = TestBed.createComponent(ErrorMessageComponent); | ||
18 | component = fixture.componentInstance; | ||
19 | fixture.detectChanges(); | ||
20 | }); | ||
21 | |||
22 | it('should create', () => { | ||
23 | expect(component).toBeTruthy(); | ||
24 | }); | ||
25 | }); | ||
diff --git a/src/app/error-message/error-message.component.ts b/src/app/error-message/error-message.component.ts new file mode 100644 index 0000000..eabf12d --- /dev/null +++ b/src/app/error-message/error-message.component.ts | |||
@@ -0,0 +1,19 @@ | |||
1 | import { Component, OnInit } from '@angular/core'; | ||
2 | import { MessagesService } from '../messages.service'; | ||
3 | |||
4 | @Component({ | ||
5 | selector: 'error-message', | ||
6 | templateUrl: './error-message.component.html' | ||
7 | }) | ||
8 | export class ErrorMessageComponent implements OnInit { | ||
9 | |||
10 | constructor(public messages: MessagesService) { } | ||
11 | |||
12 | ngOnInit() { | ||
13 | } | ||
14 | |||
15 | dismissError(){ | ||
16 | this.messages.dismissError(); | ||
17 | } | ||
18 | |||
19 | } | ||
diff --git a/src/app/filter.pipe.ts b/src/app/filter.pipe.ts new file mode 100644 index 0000000..06e5fe4 --- /dev/null +++ b/src/app/filter.pipe.ts | |||
@@ -0,0 +1,16 @@ | |||
1 | import { Pipe, PipeTransform } from '@angular/core'; | ||
2 | |||
3 | @Pipe({ | ||
4 | name: 'filter', | ||
5 | pure: false | ||
6 | }) | ||
7 | export class MyFilterPipe implements PipeTransform { | ||
8 | transform(items: any[], filter: Object): any { | ||
9 | if (!items || !filter) { | ||
10 | return items; | ||
11 | } | ||
12 | // filter items array, items which match and return true will be | ||
13 | // kept, false will be filtered out | ||
14 | return items.filter(item => item.indexOf(filter) !== -1); | ||
15 | } | ||
16 | } | ||
diff --git a/src/app/identity-api.ts b/src/app/identity-api.ts new file mode 100644 index 0000000..f15d41a --- /dev/null +++ b/src/app/identity-api.ts | |||
@@ -0,0 +1,5 @@ | |||
1 | export class IdentityAPI{ | ||
2 | id: string; | ||
3 | name: string; | ||
4 | type: string; | ||
5 | } | ||
diff --git a/src/app/identity-page/identity-page.component.html b/src/app/identity-page/identity-page.component.html new file mode 100644 index 0000000..edcac69 --- /dev/null +++ b/src/app/identity-page/identity-page.component.html | |||
@@ -0,0 +1,45 @@ | |||
1 | |||
2 | <div class="o-grid u-pb-x3"> | ||
3 | <div class="o-grid__col u-1/2"> | ||
4 | <create-identity-component></create-identity-component> | ||
5 | </div> | ||
6 | <div class="o-grid__col u-1/2"> | ||
7 | <div class="c-card c-card--no-padding u-p-x3"> | ||
8 | <div class="o-type-20 u-pb-x1" >Search</div> | ||
9 | <div class="u-ph-x2"> | ||
10 | <input #myInput class="c-input" placeholder="Search" [(ngModel)]="name" (input)="filterItem(myInput.value)"/> | ||
11 | </div> | ||
12 | </div> | ||
13 | </div> | ||
14 | </div> | ||
15 | |||
16 | <div class="c-card" *ngIf="this.rename"> | ||
17 | <div class="o-type-20 u-pb-x1" >Search</div> | ||
18 | <div class="u-color-grey">ID: <span>{{changeIdentity.id}}</span></div> | ||
19 | <div> | ||
20 | <span class="u-m-x2">Name: <input class="c-input" placeholder="Change Name" [(ngModel)]="changeIdentity.name"/></span> | ||
21 | <a class="c-button u-m-x2" (click)="onRename(changeIdentity)">Rename now</a> | ||
22 | <a class="c-button c-button--outline u-m-x2" (click)="onRenameCancel()">Cancel</a> | ||
23 | </div> | ||
24 | </div> | ||
25 | |||
26 | <div class="o-grid c-card u-mt-x3"> | ||
27 | <table class="o-grid__col u-2/2 c-table"> | ||
28 | <tr> | ||
29 | <th>Type</th> | ||
30 | <th>Name</th> | ||
31 | <th>ID</th> | ||
32 | <th>Rename</th> | ||
33 | <th>Delete</th> | ||
34 | </tr> | ||
35 | <tr *ngFor="let identity of filteredItems"> | ||
36 | <td class="u-text-center"><span class="fa fa-user o-type-20" *ngIf="identity.type == 'ego'"></span></td> | ||
37 | <td> | ||
38 | <span class="">{{identity.name}}</span> | ||
39 | </td> | ||
40 | <td>{{identity.id}}</td> | ||
41 | <td><a class="c-button" (click)="onClickRename(identity)">Rename</a></td> | ||
42 | <td><a class="c-button" (click)="onClickDelete(identity.id)">Delete</a></td> | ||
43 | </tr> | ||
44 | </table> | ||
45 | </div> | ||
diff --git a/src/app/identity-page/identity-page.component.spec.ts b/src/app/identity-page/identity-page.component.spec.ts new file mode 100644 index 0000000..5212965 --- /dev/null +++ b/src/app/identity-page/identity-page.component.spec.ts | |||
@@ -0,0 +1,25 @@ | |||
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; | ||
2 | |||
3 | import { IdentityPageComponent } from './identity-page.component'; | ||
4 | |||
5 | describe('IdentityPageComponent', () => { | ||
6 | let component: IdentityPageComponent; | ||
7 | let fixture: ComponentFixture<IdentityPageComponent>; | ||
8 | |||
9 | beforeEach(async(() => { | ||
10 | TestBed.configureTestingModule({ | ||
11 | declarations: [ IdentityPageComponent ] | ||
12 | }) | ||
13 | .compileComponents(); | ||
14 | })); | ||
15 | |||
16 | beforeEach(() => { | ||
17 | fixture = TestBed.createComponent(IdentityPageComponent); | ||
18 | component = fixture.componentInstance; | ||
19 | fixture.detectChanges(); | ||
20 | }); | ||
21 | |||
22 | it('should create', () => { | ||
23 | expect(component).toBeTruthy(); | ||
24 | }); | ||
25 | }); | ||
diff --git a/src/app/identity-page/identity-page.component.ts b/src/app/identity-page/identity-page.component.ts new file mode 100644 index 0000000..296fe4c --- /dev/null +++ b/src/app/identity-page/identity-page.component.ts | |||
@@ -0,0 +1,72 @@ | |||
1 | import { Component, OnInit } from '@angular/core'; | ||
2 | import { Pipe } from "@angular/core"; | ||
3 | import { ApiService } from '../api.service'; | ||
4 | import { IdentityAPI } from '../identity-api'; | ||
5 | |||
6 | @Component({ | ||
7 | selector: 'app-identity-page', | ||
8 | templateUrl: './identity-page.component.html' | ||
9 | }) | ||
10 | export class IdentityPageComponent implements OnInit { | ||
11 | |||
12 | identities: IdentityAPI[]; | ||
13 | filteredItems: IdentityAPI[]; | ||
14 | rename: boolean = false; | ||
15 | changeIdentity: IdentityAPI; | ||
16 | json: any; | ||
17 | |||
18 | constructor(private apiService: ApiService) { } | ||
19 | |||
20 | getAPIs(): void { | ||
21 | this.apiService.getIdentities().subscribe(data => { | ||
22 | this.identities = data; | ||
23 | this.assignCopy(); | ||
24 | }); | ||
25 | } | ||
26 | |||
27 | ngOnInit() { | ||
28 | this.getAPIs(); | ||
29 | } | ||
30 | |||
31 | assignCopy(){ | ||
32 | this.filteredItems = Object.assign([], this.identities); | ||
33 | } | ||
34 | |||
35 | filterItem(value : string){ | ||
36 | this.onRenameCancel(); | ||
37 | if(!value) this.assignCopy(); //when nothing has typed | ||
38 | this.filteredItems = Object.assign([], this.identities).filter( | ||
39 | item => { | ||
40 | return ((item.name.indexOf(value) > -1) || | ||
41 | (item.id.indexOf(value) > -1) || | ||
42 | (item.type.indexOf(value) > -1 )) | ||
43 | }); | ||
44 | } | ||
45 | |||
46 | onClickRename(identity: IdentityAPI){ | ||
47 | this.rename = true; | ||
48 | this.changeIdentity = Object.assign({},identity); | ||
49 | } | ||
50 | |||
51 | onRename(identity: IdentityAPI){ | ||
52 | this.rename = false; | ||
53 | this.filteredItems = []; | ||
54 | this.json = {'newname':identity.name}; | ||
55 | this.apiService.changeIdentity(identity.id,this.json).subscribe(data => { | ||
56 | this.getAPIs(); | ||
57 | }); | ||
58 | } | ||
59 | |||
60 | onRenameCancel(){ | ||
61 | this.rename = false; | ||
62 | } | ||
63 | |||
64 | onClickDelete(id: string){ | ||
65 | this.onRenameCancel(); | ||
66 | this.filteredItems = []; | ||
67 | this.apiService.deleteIdentity(id).subscribe(data => { | ||
68 | this.getAPIs(); | ||
69 | }); | ||
70 | } | ||
71 | |||
72 | } | ||
diff --git a/src/app/main-page/main-page.component.html b/src/app/main-page/main-page.component.html index 659a5d4..e7cd074 100644 --- a/src/app/main-page/main-page.component.html +++ b/src/app/main-page/main-page.component.html | |||
@@ -1,17 +1,11 @@ | |||
1 | <div class="o-container"> | 1 | <div class="c-card"> |
2 | <div class="c-card"> | 2 | <h1 class="u-text-center u-pb-x3 o-type-35"> |
3 | <div class="o-container"> | 3 | GNUnet Web User Interface |
4 | <h1 class="u-text-center u-pb-x3 o-type-35"> | 4 | </h1> |
5 | GNUnet Web User Interface | 5 | <p> |
6 | </h1> | 6 | Lorem ipsum dolor sit amet consectetur adipiscing elit sed, diam dictum inceptos nostra mus enim id scelerisque, nam congue ligula penatibus dui arcu cubilia. Placerat dapibus felis euismod ligula pellentesque facilisi magna eu curae ridiculus arcu venenatis, ad justo auctor mollis faucibus viverra odio netus lectus risus vitae. Quisque morbi dapibus mollis ut cursus leo nascetur vitae aliquet venenatis per sociosqu, vivamus pulvinar risus nunc libero feugiat auctor gravida commodo proin. |
7 | <p> | ||
8 | Lorem ipsum dolor sit amet consectetur adipiscing elit sed, diam dictum inceptos nostra mus enim id scelerisque, nam congue ligula penatibus dui arcu cubilia. Placerat dapibus felis euismod ligula pellentesque facilisi magna eu curae ridiculus arcu venenatis, ad justo auctor mollis faucibus viverra odio netus lectus risus vitae. Quisque morbi dapibus mollis ut cursus leo nascetur vitae aliquet venenatis per sociosqu, vivamus pulvinar risus nunc libero feugiat auctor gravida commodo proin. | ||
9 | 7 | ||
10 | Luctus magnis mi odio cursus ut pharetra pretium congue mattis, sagittis taciti iaculis mollis gravida fringilla facilisi faucibus, tincidunt consequat eu fusce arcu potenti proin sapien. Taciti sem placerat fringilla a fusce pretium nunc praesent habitant, sociosqu maecenas conubia mollis aliquam aliquet curae ad, mauris arcu urna pellentesque laoreet inceptos suscipit nullam. Curabitur molestie class gravida donec nisl cum urna integer, sodales etiam placerat vivamus scelerisque sollicitudin. | 8 | Luctus magnis mi odio cursus ut pharetra pretium congue mattis, sagittis taciti iaculis mollis gravida fringilla facilisi faucibus, tincidunt consequat eu fusce arcu potenti proin sapien. Taciti sem placerat fringilla a fusce pretium nunc praesent habitant, sociosqu maecenas conubia mollis aliquam aliquet curae ad, mauris arcu urna pellentesque laoreet inceptos suscipit nullam. Curabitur molestie class gravida donec nisl cum urna integer, sodales etiam placerat vivamus scelerisque sollicitudin. |
11 | </p> | 9 | </p> |
12 | </div> | ||
13 | </div> | ||
14 | </div> | ||
15 | <div class="u-text-center"> | ||
16 | <app-rest-apis></app-rest-apis> | ||
17 | </div> | 10 | </div> |
11 | <app-rest-apis class="u-text-center"></app-rest-apis> | ||
diff --git a/src/app/messages.service.spec.ts b/src/app/messages.service.spec.ts new file mode 100644 index 0000000..43d170d --- /dev/null +++ b/src/app/messages.service.spec.ts | |||
@@ -0,0 +1,15 @@ | |||
1 | import { TestBed, inject } from '@angular/core/testing'; | ||
2 | |||
3 | import { MessagesService } from './messages.service'; | ||
4 | |||
5 | describe('MessagesService', () => { | ||
6 | beforeEach(() => { | ||
7 | TestBed.configureTestingModule({ | ||
8 | providers: [MessagesService] | ||
9 | }); | ||
10 | }); | ||
11 | |||
12 | it('should be created', inject([MessagesService], (service: MessagesService) => { | ||
13 | expect(service).toBeTruthy(); | ||
14 | })); | ||
15 | }); | ||
diff --git a/src/app/messages.service.ts b/src/app/messages.service.ts new file mode 100644 index 0000000..6d18405 --- /dev/null +++ b/src/app/messages.service.ts | |||
@@ -0,0 +1,23 @@ | |||
1 | import { Injectable } from '@angular/core'; | ||
2 | |||
3 | @Injectable({ | ||
4 | providedIn: 'root' | ||
5 | }) | ||
6 | export class MessagesService { | ||
7 | |||
8 | private error:string; | ||
9 | |||
10 | constructor() { } | ||
11 | |||
12 | getError() :string{ | ||
13 | return this.error; | ||
14 | } | ||
15 | |||
16 | pushError(errorText:string){ | ||
17 | this.error = errorText; | ||
18 | } | ||
19 | |||
20 | dismissError(){ | ||
21 | this.error=''; | ||
22 | } | ||
23 | } | ||
diff --git a/src/app/rest-apis/rest-apis.component.html b/src/app/rest-apis/rest-apis.component.html index 4a15a85..6081599 100644 --- a/src/app/rest-apis/rest-apis.component.html +++ b/src/app/rest-apis/rest-apis.component.html | |||
@@ -1,6 +1,5 @@ | |||
1 | <div class="o-container o-container--size-small"> | 1 | <div class="o-grid u-pt-x2 "> |
2 | <div class="o-grid" > | 2 | <div class="o-grid__col u-1/4" *ngFor="let api of apis"> |
3 | <div class="o-grid__col u-1/3 u-p-x2" *ngFor="let api of apis"> | ||
4 | <div class="c-card"> | 3 | <div class="c-card"> |
5 | <h1 class="o-type-28">{{api.name}}</h1> | 4 | <h1 class="o-type-28">{{api.name}}</h1> |
6 | <br> | 5 | <br> |
@@ -8,4 +7,3 @@ | |||
8 | </div> | 7 | </div> |
9 | </div> | 8 | </div> |
10 | </div> | 9 | </div> |
11 | </div> | ||
diff --git a/src/app/rest-apis/rest-apis.component.ts b/src/app/rest-apis/rest-apis.component.ts index f9cd3cf..1660174 100644 --- a/src/app/rest-apis/rest-apis.component.ts +++ b/src/app/rest-apis/rest-apis.component.ts | |||
@@ -1,7 +1,6 @@ | |||
1 | import { Component, OnInit } from '@angular/core'; | 1 | import { Component, OnInit } from '@angular/core'; |
2 | import { RestAPI } from '../rest-api'; | 2 | import { RestAPI } from '../rest-api'; |
3 | import { ApiService } from '../api.service'; | 3 | import { ApiService } from '../api.service'; |
4 | |||
5 | @Component({ | 4 | @Component({ |
6 | selector: 'app-rest-apis', | 5 | selector: 'app-rest-apis', |
7 | templateUrl: './rest-apis.component.html' | 6 | templateUrl: './rest-apis.component.html' |
diff --git a/src/index.html b/src/index.html index 82d9839..63da4dd 100644 --- a/src/index.html +++ b/src/index.html | |||
@@ -4,6 +4,7 @@ | |||
4 | <meta charset="utf-8"> | 4 | <meta charset="utf-8"> |
5 | <title>GnunetWebui</title> | 5 | <title>GnunetWebui</title> |
6 | <base href="/"> | 6 | <base href="/"> |
7 | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> | ||
7 | <link href="https://fonts.googleapis.com/css?family=Archivo:400,400i,500,500i,600,600i,700,700i" rel="stylesheet"> | 8 | <link href="https://fonts.googleapis.com/css?family=Archivo:400,400i,500,500i,600,600i,700,700i" rel="stylesheet"> |
8 | <meta name="viewport" content="width=device-width, initial-scale=1"> | 9 | <meta name="viewport" content="width=device-width, initial-scale=1"> |
9 | <link rel="icon" type="image/x-icon" href="favicon.ico"> | 10 | <link rel="icon" type="image/x-icon" href="favicon.ico"> |
diff --git a/src/scss/components/_button.scss b/src/scss/components/_button.scss index 5bd66d9..a16d5e4 100644 --- a/src/scss/components/_button.scss +++ b/src/scss/components/_button.scss | |||
@@ -33,6 +33,17 @@ $button-outline-color-hover: darken( $color-blue, 10% ); | |||
33 | background-color: $button-outline-bgcolor; | 33 | background-color: $button-outline-bgcolor; |
34 | } | 34 | } |
35 | 35 | ||
36 | .c-button--disabled { | ||
37 | padding: $button-outline-padding; | ||
38 | color: $color-grey; | ||
39 | border: 1px solid $color-grey; | ||
40 | background-color: $button-outline-bgcolor; | ||
41 | } | ||
42 | |||
43 | .c-button--disabled:hover { | ||
44 | background-color: $button-outline-bgcolor; | ||
45 | } | ||
46 | |||
36 | .c-button--outline:hover { | 47 | .c-button--outline:hover { |
37 | color: #1893E0; | 48 | color: #1893E0; |
38 | border-color: $button-outline-color-hover; | 49 | border-color: $button-outline-color-hover; |
diff --git a/src/scss/components/_card.scss b/src/scss/components/_card.scss index 2370918..43480d1 100644 --- a/src/scss/components/_card.scss +++ b/src/scss/components/_card.scss | |||
@@ -5,4 +5,8 @@ | |||
5 | box-shadow: 0 1px 2px 0 rgba(28,45,157,0.28); | 5 | box-shadow: 0 1px 2px 0 rgba(28,45,157,0.28); |
6 | } | 6 | } |
7 | 7 | ||
8 | .c-card--no-padding { | ||
9 | padding: 0; | ||
10 | } | ||
11 | |||
8 | .c-card--light { background: rgba($color-white, 0.5)} | 12 | .c-card--light { background: rgba($color-white, 0.5)} |
diff --git a/src/scss/components/_error.scss b/src/scss/components/_error.scss new file mode 100644 index 0000000..eaf6e51 --- /dev/null +++ b/src/scss/components/_error.scss | |||
@@ -0,0 +1,9 @@ | |||
1 | $error-bgcolor: #f79191; | ||
2 | $error-color: #9e0c0c; | ||
3 | |||
4 | .c-error { | ||
5 | padding: $baseline-x3; | ||
6 | color: $error-color; | ||
7 | background-color: $error-bgcolor; | ||
8 | border-radius: 2px; | ||
9 | } | ||
diff --git a/src/scss/components/_input.scss b/src/scss/components/_input.scss new file mode 100644 index 0000000..e2d7338 --- /dev/null +++ b/src/scss/components/_input.scss | |||
@@ -0,0 +1,29 @@ | |||
1 | $input-padding : $baseline-x2 $baseline-x2; | ||
2 | $button-bgcolor : $color-blue; | ||
3 | $button-bgcolor-hover : darken($color-blue, 10%); | ||
4 | $button-color : $color-white; | ||
5 | $input-bgcolor : darken($color-white, 5%); | ||
6 | $button-radius : 3px; | ||
7 | |||
8 | $button-outline-padding : ( $baseline-x2 - 2 )( $baseline-x3 - 2 ); | ||
9 | $button-outline-bgcolor: transparent; | ||
10 | $button-outline-color: $color-blue; | ||
11 | $button-outline-color-hover: darken( $color-blue, 10% ); | ||
12 | |||
13 | .c-input { | ||
14 | padding: $input-padding; | ||
15 | display: inline-block; | ||
16 | font: inherit; | ||
17 | white-space: nowrap; | ||
18 | vertical-align: middle; | ||
19 | text-decoration: none; | ||
20 | background-color: $color-grey-light; | ||
21 | color: $color-black; | ||
22 | border-style: none; | ||
23 | border-color: grey; | ||
24 | border-radius: $button-radius; | ||
25 | } | ||
26 | |||
27 | .c-input:focus { | ||
28 | box-shadow: 0 0 2px 2px $button-bgcolor-hover; | ||
29 | } | ||
diff --git a/src/scss/components/_link.scss b/src/scss/components/_link.scss index ec9fa4e..a51e9ed 100644 --- a/src/scss/components/_link.scss +++ b/src/scss/components/_link.scss | |||
@@ -2,6 +2,7 @@ | |||
2 | text-decoration: none; | 2 | text-decoration: none; |
3 | color: $color-white; | 3 | color: $color-white; |
4 | font-weight: bold; | 4 | font-weight: bold; |
5 | cursor: pointer; | ||
5 | } | 6 | } |
6 | 7 | ||
7 | .c-link:hover { | 8 | .c-link:hover { |
diff --git a/src/scss/components/_table.scss b/src/scss/components/_table.scss new file mode 100644 index 0000000..ce5e3fb --- /dev/null +++ b/src/scss/components/_table.scss | |||
@@ -0,0 +1,20 @@ | |||
1 | .c-table { | ||
2 | border-collapse: collapse; | ||
3 | } | ||
4 | |||
5 | .c-table td, th { | ||
6 | border: 1px solid #ddd; | ||
7 | padding: $baseline; | ||
8 | } | ||
9 | |||
10 | .c-table tr:nth-child(even){background-color: $color-grey-light;} | ||
11 | |||
12 | .c-table tr:hover {background-color: #ddd;} | ||
13 | |||
14 | .c-table th { | ||
15 | padding-top: 12px; | ||
16 | padding-bottom: 12px; | ||
17 | text-align: left; | ||
18 | background-color: $color-purple; | ||
19 | color: white; | ||
20 | } | ||
diff --git a/src/scss/components/_user.scss b/src/scss/components/_user.scss new file mode 100644 index 0000000..c7a2fb7 --- /dev/null +++ b/src/scss/components/_user.scss | |||
@@ -0,0 +1,6 @@ | |||
1 | .c-user { | ||
2 | padding: $baseline-x2; | ||
3 | background: rgba($color-white, 0.8); | ||
4 | border-radius: 2px; | ||
5 | box-shadow: 0 1px 2px 0 rgba(28,45,157,0.28); | ||
6 | } | ||
diff --git a/src/scss/objects/_container.scss b/src/scss/objects/_container.scss index 24d02c4..37e634d 100644 --- a/src/scss/objects/_container.scss +++ b/src/scss/objects/_container.scss | |||
@@ -41,7 +41,7 @@ $iota-objs-container-gutter-extra: ( | |||
41 | * Type: String / Map | 41 | * Type: String / Map |
42 | */ | 42 | */ |
43 | 43 | ||
44 | $iota-objs-container-size-default: 1000px; | 44 | $iota-objs-container-size-default: 1600px; |
45 | 45 | ||
46 | 46 | ||
47 | /** | 47 | /** |
diff --git a/src/scss/settings/_core.scss b/src/scss/settings/_core.scss index 3959f7d..f034f1a 100644 --- a/src/scss/settings/_core.scss +++ b/src/scss/settings/_core.scss | |||
@@ -7,7 +7,7 @@ | |||
7 | * Type: Unitless Number / List | 7 | * Type: Unitless Number / List |
8 | */ | 8 | */ |
9 | 9 | ||
10 | $iota-global-columns: 2, 3, 6, 12; | 10 | $iota-global-columns: 2, 3, 4, 6, 12; |
11 | 11 | ||
12 | 12 | ||
13 | /** | 13 | /** |
diff --git a/src/scss/settings/_spacing.scss b/src/scss/settings/_spacing.scss index 76a173d..bd14ac4 100644 --- a/src/scss/settings/_spacing.scss +++ b/src/scss/settings/_spacing.scss | |||
@@ -1,6 +1,7 @@ | |||
1 | $spacing-default: $baseline; | 1 | $spacing-default: $baseline; |
2 | 2 | ||
3 | $spacing-extra: ( | 3 | $spacing-extra: ( |
4 | -x1 : $baseline, | ||
4 | -x2 : $baseline-x2, | 5 | -x2 : $baseline-x2, |
5 | -x3 : $baseline-x3, | 6 | -x3 : $baseline-x3, |
6 | -x4 : $baseline-x4, | 7 | -x4 : $baseline-x4, |
diff --git a/src/styles.scss b/src/styles.scss index f533660..7026523 100644 --- a/src/styles.scss +++ b/src/styles.scss | |||
@@ -24,6 +24,9 @@ | |||
24 | @import 'scss/components/button'; | 24 | @import 'scss/components/button'; |
25 | @import 'scss/components/card'; | 25 | @import 'scss/components/card'; |
26 | @import 'scss/components/link'; | 26 | @import 'scss/components/link'; |
27 | @import 'scss/components/input'; | ||
28 | @import 'scss/components/table'; | ||
29 | @import 'scss/components/error'; | ||
27 | 30 | ||
28 | //@import 'scss/utilities/align-items'; | 31 | //@import 'scss/utilities/align-items'; |
29 | //@import 'scss/utilities/align'; | 32 | //@import 'scss/utilities/align'; |