[GNUnet-SVN] [gnunet-webui] 02/04: fix visuals, wip namestore page

[gnunet]

This is an automated email from the git hooks/post-receive script.

phil pushed a commit to branch master
in repository gnunet-webui.

commit 5e5192121c6241cc634f6694425941005da4ba86
Author: Phil <address@hidden>
AuthorDate: Fri Jul 27 02:14:14 2018 +0200

    fix visuals, wip namestore page
---
 src/app/api.service.ts                             | 11 +++++++-
 src/app/app.component.html                         |  7 ++---
 src/app/identity-page/identity-page.component.html |  2 +-
 src/app/identity-page/identity-page.component.ts   |  2 +-
 .../namestore-page/namestore-page.component.html   | 26 ++++++++++++++++++-
 src/app/namestore-page/namestore-page.component.ts | 30 ++++++++++++++++++----
 src/scss/base/_body.scss                           |  4 +++
 src/scss/components/_link.scss                     |  5 ++++
 src/scss/components/_triangle.scss                 |  9 +++++++
 src/scss/main.scss                                 |  1 +
 10 files changed, 83 insertions(+), 14 deletions(-)

diff --git a/src/app/api.service.ts b/src/app/api.service.ts
index 643f8a3..21a0269 100644
--- a/src/app/api.service.ts
+++ b/src/app/api.service.ts
@@ -101,13 +101,22 @@ export class ApiService {
     );
   }
 
+  getGNSRecords (): Observable<GNSRecord[]>{
+    this.messages.dismissError();
+    return this.http.get<GNSRecord[]>(this.namestoreURL)
+    .pipe(
+      tap(json => this.handleJSON(json)),
+      catchError(this.handleError('getGNSRecords', []))
+    );
+  }
+
   addGNSRecord (gns_record: GNSRecord): Observable<any>{
     this.messages.dismissError();
     const options = {headers: {'Content-Type': 'application/json'}};
     return this.http.post(this.namestoreURL, gns_record, options)
     .pipe(
       tap(json => this.handleJSON(json)),
-      catchError(this.handleError('searchNameSystem', []))
+      catchError(this.handleError('addGNSRecord', []))
     );
   }
 
diff --git a/src/app/app.component.html b/src/app/app.component.html
index a4a6a27..81e9ed7 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -10,10 +10,7 @@
         <nav>
           <ul class="o-list o-list--inline o-list--gutter-x4">
             <li class="o-list__item" *ngFor="let item of this.menu">
-              <div *ngIf="item.id === active" class="u-p-x1 u-bgcolor-primary 
u-color-contrary">
-                <a routerLink="{{item.link}}" class="c-link">{{item.name}}</a>
-              </div>
-              <div *ngIf="item.id !== active" class="u-p-x1">
+              <div [ngClass]="{'c-link--underline': item.id === active}">
                 <a routerLink="{{item.link}}" class="c-link">{{item.name}}</a>
               </div>
             </li>
@@ -40,7 +37,7 @@
               <a routerLink="/" class="c-link">Impressum</a>
             </li>
             <li class="o-list__item">
-              <a routerLink="/" class="c-link">Documentation</a>
+              <a href="https://gnunet.org/git/gnunet-rest-api.git/"; 
class="c-link">Documentation</a>
             </li>
           </ul>
         </div>
diff --git a/src/app/identity-page/identity-page.component.html 
b/src/app/identity-page/identity-page.component.html
index b0f22d8..b137591 100644
--- a/src/app/identity-page/identity-page.component.html
+++ b/src/app/identity-page/identity-page.component.html
@@ -18,7 +18,7 @@
   <div class="u-mv-x1" *ngFor="let identity of filteredItems">
     <div class="c-card c-card--no-padding u-p-x1">
       <div class="o-grid">
-        <div class="o-grid__col u-1/12"><div class="c-circle" 
[ngStyle]="{'background-color': returnHSL(identity.pubkey)}">{{identity.name | 
slice:0:1 | uppercase}}</div></div>
+        <div class="o-grid__col u-1/12"><div class="c-circle" 
[ngStyle]="{'background-color': 
returnHSL(identity.pubkey+identity.name)}">{{identity.name | slice:0:1 | 
uppercase}}</div></div>
         <div class="o-grid__col u-8/12">
           <p class="u-color-grey">Public Key: <span 
class="">{{identity.pubkey}}</span></p>
           <span class="o-type-20">{{identity.name}}</span>
diff --git a/src/app/identity-page/identity-page.component.ts 
b/src/app/identity-page/identity-page.component.ts
index 7588799..b6c2dcc 100644
--- a/src/app/identity-page/identity-page.component.ts
+++ b/src/app/identity-page/identity-page.component.ts
@@ -144,7 +144,7 @@ export class IdentityPageComponent implements OnInit {
   }
 
   returnHSL(id:string): string{
-    return "hsl(" + 360 * this.intFromHash(id) + ',' +
+    return "hsl(" + 1000* this.intFromHash(id) + ',' +
     (90 + 70 * this.intFromHash(id)) + '%,' +
     (85 + 10 * this.intFromHash(id)) + '%)';
   }
diff --git a/src/app/namestore-page/namestore-page.component.html 
b/src/app/namestore-page/namestore-page.component.html
index af573ca..21686c8 100644
--- a/src/app/namestore-page/namestore-page.component.html
+++ b/src/app/namestore-page/namestore-page.component.html
@@ -34,6 +34,30 @@
   </div>
 </div>
 
-<div>
+<div class="c-card u-mv-x2">
+  <h1 class="o-type-22 u-color-primary">Add new Namestore entry</h1>
+  <div class="o-list ">
+    <div class="o-list__item">
+      <p class="u-color-grey">Label:</p>
+      <input class="c-input" placeholder="Label" 
[(ngModel)]="gns_record.label" name="label" />
+    </div>
+    <div class="o-list__item">
+      <p class="u-color-grey">Record Type:</p>
+      <input class="c-input" placeholder="Type" [(ngModel)]="gns_record.type" 
name="type" />
+    </div>
+  </div>
   <a class="c-button" (click)="onGNSRecordAdd()" >Test GNS_record</a>
 </div>
+
+<div *ngIf="request" class="u-text-center"><div class="c-spinner"></div></div>
+
+<div *ngIf="!request" class="u-mt-x2">
+  <div class="c-card u-mv-x1" *ngFor="let record of gns_records">
+    <h1>{{record.label}}:</h1>
+    <div>
+      {{record.type}}: {{record.value}}<br>
+      expiration_time: {{record.expiration_time}} <br>
+      flag: {{record.flag}}
+    </div>
+  </div>
+</div>
diff --git a/src/app/namestore-page/namestore-page.component.ts 
b/src/app/namestore-page/namestore-page.component.ts
index d135bdc..aa809d3 100644
--- a/src/app/namestore-page/namestore-page.component.ts
+++ b/src/app/namestore-page/namestore-page.component.ts
@@ -36,13 +36,32 @@ export class NamestorePageComponent implements OnInit {
   gns_recordtype:string = 'ANY';
   private gns_response:any =[];
 
-  gns_record: GNSRecord;
+  gns_record: GNSRecord = new GNSRecord();
+  gns_records: GNSRecord[] = [];
+
+  request: boolean = false;
 
   private url: string;
 
   constructor(private apiService:ApiService) { }
 
   ngOnInit() {
+    this.getGNSRecords();
+  }
+
+  getGNSRecords(){
+    this.request = true;
+    this.apiService.getGNSRecords().subscribe(data => {
+      if(data instanceof Array)
+      {
+        this.gns_records = data;
+      }
+      else
+      {
+        this.gns_records = [];
+      }
+      this.request = false;
+    });
   }
 
   onSearch(){
@@ -57,16 +76,17 @@ export class NamestorePageComponent implements OnInit {
     });
   }
 
-  onGNSRecordAdd(){
+  onGNSRecordAdd(){/*
     this.gns_record = new GNSRecord();
-    this.gns_record.label = 'test_name';
+    this.gns_record.label = 'test_name12';
     this.gns_record.type = 'PKEY';
     this.gns_record.expiration_time = 'never';
-    this.gns_record.flag = 0;
+    this.gns_record.flag = -1;
     this.gns_record.value = 
'EY1FZ4CNHYXRB4MS1KVB7ZSS0FZ2WBCQBR3J438H6P8EP5BPBJ40';
     this.apiService.addGNSRecord(this.gns_record).subscribe(data => {
       console.log(data);
-    });
+    });*/
+    console.log(this.gns_record);
 
   }
 
diff --git a/src/scss/base/_body.scss b/src/scss/base/_body.scss
index a6fd80d..0b35cf5 100644
--- a/src/scss/base/_body.scss
+++ b/src/scss/base/_body.scss
@@ -4,3 +4,7 @@ body {
   font-weight: normal;
   height: 100%;
 }
+
+option {
+  outline: none;
+}
diff --git a/src/scss/components/_link.scss b/src/scss/components/_link.scss
index 7a85e3f..6c3a64a 100644
--- a/src/scss/components/_link.scss
+++ b/src/scss/components/_link.scss
@@ -3,6 +3,7 @@
   font-weight: bold;
   cursor: pointer;
   color: inherit;
+  outline: none;
 }
 
 .c-link:hover {
@@ -14,3 +15,7 @@
   cursor: pointer;
   color: $color-primary;
 }
+
+.c-link--underline{
+  border-bottom: 3px solid $color-primary;
+}
diff --git a/src/scss/components/_triangle.scss 
b/src/scss/components/_triangle.scss
new file mode 100644
index 0000000..1ca89e8
--- /dev/null
+++ b/src/scss/components/_triangle.scss
@@ -0,0 +1,9 @@
+
+.c-triangle {
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+
+  border-bottom: 5px solid $color-primary;
+}
diff --git a/src/scss/main.scss b/src/scss/main.scss
index 3865945..2f2234a 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -35,6 +35,7 @@
 @import 'components/circle';
 @import 'components/dropdown';
 @import 'components/modal';
address@hidden 'components/triangle';
 
 //@import 'utilities/align-items';
 @import 'utilities/align';

-- 
To stop receiving notification emails like this one, please contact
address@hidden