Login page + CS-549

dhlab-basel · Feb 16, 2021 · 0d15742 · 0d15742
1 parent 2844915
commit 0d15742
Show file tree

Hide file tree

Showing 10 changed files with 118 additions and 17 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,8 +1,16 @@
-<mat-toolbar>
-  <button mat-raised-button color="primary" routerLink="search">Search</button>
-  <button mat-raised-button color="primary" routerLink="home">Photo Wall</button>
-  <button mat-raised-button color="primary" routerLink="simplesearch">Simple Search</button>
-  <a mat-raised-button color="primary" *ngIf="knoraService.loggedin" (click)="logout()">Log out</a>
+<mat-toolbar *ngIf="knoraService.loggedin">
+  <div class="but">
+    <button mat-raised-button routerLink="home">Photo Wall</button>
+  </div>
+  <div class="but">
+    <button mat-raised-button routerLink="search">Search</button>
+  </div>
+  <div class="but">
+    <button mat-raised-button routerLink="simplesearch">Simple Search</button>
+  </div>
+  <div class="but">
+    <button mat-raised-button  (click)="logout()">Log out</button>
+  </div>
 
 </mat-toolbar>
 <router-outlet>

diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -11,7 +11,12 @@
   border-bottom-style: solid;
   height: 65px;
 }
-
+.mat-button {
+  color: rgba(241, 231, 256, 0.4);
+}
+.but {
+  padding: 0 10px;
+}
 footer {
   margin-left: 10px;
   margin-right: 10px;

diff --git a/src/app/components/photo-page/photo-page.component.ts b/src/app/components/photo-page/photo-page.component.ts
@@ -220,7 +220,6 @@ export class PhotoPageComponent implements OnInit {
             const physcop = this.helpers.getLinkedStillImage(onephoto, prop);
             imageBaseURL = physcop[0].iiifBaseUrl;
             imageFileName = physcop[0].filename;
-
             //
             // get turkish name and firstname of anchor person
             //
@@ -249,7 +248,7 @@ export class PhotoPageComponent implements OnInit {
             let firstName : string = '';
             let index = 0;
             let miny = 99999;
-            let maxy = -99999
+            let maxy = -99999;
             for (let person of peopleOnPicValues) {
               relValue = this.helpers.getStringValue(person, relationshipProp);
               roiValue = this.helpers.getStringValue(person, roiProp);
@@ -273,7 +272,6 @@ export class PhotoPageComponent implements OnInit {
               p.x = xcnt[p.y];
               xcnt[p.y]++;
             }
-            console.log(peopleOnPic);
             /*
             for (const peopleOnPicLinkValue of peopleOnPicLinkValues) {
               const gaga = peopleOnPicLinkValue[0].linkedResource;
@@ -322,7 +320,7 @@ export class PhotoPageComponent implements OnInit {
              fileName = this.helpers.getLinkedTextValueAsString(onephoto, physProp, fileNameProp)[0];
               */
             this.showProgbar = false;
-            return new PhotoPageData(
+            const toReturn = new PhotoPageData(
               photoIri,
               label,
               imageBaseURL,
@@ -332,6 +330,8 @@ export class PhotoPageComponent implements OnInit {
               fileName[0],
               anchorPersons,
               peopleOnPic);
+            console.log(toReturn);
+            return toReturn;
           })[0];
         }
       );

diff --git a/src/app/components/search-page/search-page.component.html b/src/app/components/search-page/search-page.component.html
@@ -121,9 +121,11 @@
         </mat-form-field>
 
       </div>
-
+      <div class="warning" *ngIf="resWarning && !selectedResourceType">
+        <p>Please choose a resource type first</p>
+      </div>
       <div class="search-buttons">
-        <button mat-raised-button color="primary" (click)="createGravfieldQuery(gravField.value)">Search</button>
+        <button mat-raised-button color="primary" (click)="searchClicked(gravField.value);">Search</button>
         <button mat-button (click)="gravField.value = ''; deleteAllProps(); createFormQuery()">Clear</button>
       </div>
 

diff --git a/src/app/components/search-page/search-page.component.scss b/src/app/components/search-page/search-page.component.scss
@@ -4,6 +4,7 @@
   flex-direction: column;
   align-items: center;
   height: 100%;
+  overflow: auto;
 
   mat-card {
     padding: 0;
@@ -78,6 +79,9 @@
   }
 }
 
+.warning {
+  color: red;
+}
 
 mat-form-field {
   margin: 0 0.5rem;

diff --git a/src/app/components/search-page/search-page.component.ts b/src/app/components/search-page/search-page.component.ts
@@ -70,7 +70,7 @@ export class SearchPageComponent implements OnInit, OnDestroy {
   lists: { [index: string]: Array<PouListNode> } = {};
   minDate: Date;
   maxDate: Date;
-
+  resWarning = false;
 
   searchResults: Array<SearchResult>;
   columnsToDisplay: Array<string> = ['0', '1', '2'];
@@ -93,7 +93,7 @@ export class SearchPageComponent implements OnInit, OnDestroy {
       this.router.navigateByUrl('/login');
     }
     this.getOnto();
-    this.loadFromStorage();
+    // this.loadFromStorage();
   }
 
   loadFromStorage() {
@@ -425,8 +425,15 @@ export class SearchPageComponent implements OnInit, OnDestroy {
     console.log(querystring);
     this.fire(querystring);
   }
-
+  searchClicked(enteredString: string) {
+    if (!this.selectedResourceType) {
+      this.resWarning = true;
+    } else {
+      this.createGravfieldQuery(enteredString);
+    }
+  }
   fire(querystring) {
+    this.resWarning = false;
     this.showProgbar = true;
     this.knoraService.gravsearchQueryByStringCount(querystring).subscribe(
       (no: number) => {

diff --git a/src/app/components/simple-search/simple-search.component.scss b/src/app/components/simple-search/simple-search.component.scss
@@ -4,6 +4,7 @@
   flex-direction: column;
   align-items: center;
   height: 100%;
+  overflow: auto;
 
   mat-card {
     padding: 0;

diff --git a/src/app/login-page/login-page.component.html b/src/app/login-page/login-page.component.html
@@ -1 +1,21 @@
-<button mat-icon-button matTooltip="Log out" (click)="openLoginDialog()"><mat-icon >account_box</mat-icon></button>
+<div class="wrapper">
+  <h1 class="title">Welcome to the Portraits of Unbelonging repository!</h1>
+  <img class="img" src="{{baseUrl}}/{{images[0]}}/full/{{calcImageWidth()}},/0/default.jpg"/>
+  <mat-card>
+    <mat-card-header>
+      <mat-card-title>Log In</mat-card-title>
+    </mat-card-header>
+    <mat-card-content>
+      <mat-form-field>
+        <input #email matInput required placeholder="User">
+      </mat-form-field>
+      <mat-form-field>
+        <input #password matInput required type="password" placeholder="Password">
+      </mat-form-field>
+      <button mat-raised-button color="primary" (click)="fire(email.value, password.value);">Log In</button>
+    </mat-card-content>
+  </mat-card>
+  <img class="img" src="{{baseUrl}}/{{images[1]}}/full/{{calcImageWidth()}},/0/default.jpg"/>
+
+</div>
+
diff --git a/src/app/login-page/login-page.component.scss b/src/app/login-page/login-page.component.scss
@@ -0,0 +1,41 @@
+.wrapper {
+  background-color: rgba(241, 231, 256, 0.4);
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  justify-content: space-between;
+  height: 100%;
+  overflow: auto;}
+.mat-card {
+  width: 30%;
+  height: 30%;
+  padding: 0;
+  margin: 3rem 0 2rem;
+
+
+  mat-card-header {
+    padding: 16px 0 0 16px;
+    color: white;
+    background-color: rgb(97, 63, 176);
+  }
+
+  mat-card-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    padding: 16px;
+      mat-form-field {
+        flex-grow: 1;
+        margin: 0 0.5rem;
+    }
+    button {width: 20%;}
+    }
+  }
+
+.title {
+  width: 100%;
+  text-align: center;
+}
+img {
+  padding: 0 1% 0 1%;
+}
diff --git a/src/app/login-page/login-page.component.ts b/src/app/login-page/login-page.component.ts
@@ -10,13 +10,26 @@ import {Router} from '@angular/router';
   styleUrls: ['./login-page.component.scss']
 })
 export class LoginPageComponent implements OnInit {
-
+  images: string[] = ['BPwNmMl8WMR-EMNXi7mIxj1.jp2', 'KoFbGwVW4eg-GS2ZxciAt3u.jp2'];
+  baseUrl: string = 'https://iiif.pou.test.dasch.swiss:443/0827';
   constructor(public dialog: MatDialog,
               public knoraService: KnoraService,
               private router: Router) { }
 
   ngOnInit() {
   }
+  calcImageWidth(): number {
+   return Math.floor(window.innerWidth / 4.5);
+  }
+  fire(email: string, password: string){
+    this.knoraService.login(email, password).subscribe(data => {
+      if (!data.success) {
+        return; // TODO
+      } else {
+        this.router.navigateByUrl('/home');
+      }
+    });
+  }
   private openLoginDialog(): void {
     const loginConfig = new MatDialogConfig();
     loginConfig.autoFocus = true;