Add functions and search page

src/app/app.component.html

@@ -1,6 +1,20 @@
 <!--The content below is only a placeholder and can be replaced.-->
 
-<div class="main-container">
+<div class="main-container {{ (results.length > 0 ? 'top' : '') }}">
+
+  <div *ngIf="displayOverlay" class="overlay">
+
+    <div class="overlay-content">
+
+      <div class="center-container">
+
+        <mat-spinner></mat-spinner>
+
+      </div>
+
+    </div>
+
+  </div>
 
   <div class="center-container">
 
@@ -8,12 +22,27 @@
 
     <div class="search-bar">
 
-      <input placeholder="Your Sport Recherche" type="text"/>
+      <form (submit)="search()">
 
-      <div class="search-button">
+        <input placeholder="Your Sport Recherche" #input (change)="searchInput = input.value"
+               type="text"/>
 
-        <i class="material-icons">search</i>
+        <div class="search-button">
 
+          <button type="submit">
+            <i class="material-icons">search</i>
+          </button>
+
+        </div>
+
+      </form>
+
+    </div>
+
+    <div *ngIf="results.length > 0">
+
+      <div *ngFor="let result of results">
+        {{ result.url }} ({{ result.tfidf }})
       </div>
 
     </div>

src/app/app.component.less

@@ -8,6 +8,33 @@
   display: flex;
   justify-content: center;
 
+  .overlay {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+
+    .overlay-content {
+      width: 100%;
+      height: 100%;
+      position: relative;
+      align-items: center;
+      display: flex;
+      justify-content: center;
+
+      .center-container {
+        width: initial;
+        max-width: initial;
+        min-width: initial;
+        padding: 0;
+      }
+
+    }
+
+  }
+
   .center-container {
     margin: auto;
     width: 100%;
@@ -41,29 +68,50 @@
       background: rgba(255, 255, 255, 1);
       height: 52px;
 
-      input[type=text] {
-        vertical-align: top;
-        width: calc(100% - 30px);
-        height: 28px;
-        border: none;
-      }
+      form {
+        display: flex;
+        width: 100%;
 
-      input[type=text]:focus {
-        outline: none;
-      }
-
-      .search-button {
-        border-left: 1px solid @border-color;
-        padding: 0 10px;
-        cursor: pointer;
-
-        .material-icons {
-          font-size: 30px;
-          color: @text-color;
+        input[type=text] {
+          vertical-align: top;
+          width: calc(100% - 30px);
+          height: 28px;
+          border: none;
         }
 
+        input[type=text]:focus {
+          outline: none;
+        }
+
+        .search-button {
+          border-left: 1px solid @border-color;
+          padding: 0 10px;
+
+          button {
+            background-color: transparent;
+            border: none;
+            cursor: pointer;
+
+            .material-icons {
+              font-size: 30px;
+              color: @text-color;
+            }
+
+          }
+
+        }
       }
     }
   }
 
 }
+
+.main-container.top {
+  align-items: initial;
+
+  .center-container {
+    margin: 0 auto;
+    padding: 0 0.8em;
+  }
+
+}

src/app/app.component.ts

@@ -1,10 +1,38 @@
 import { Component } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { environment } from '../environments/environment';
 
-@Component({
+@Component( {
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.less']
-})
+  styleUrls: [ './app.component.less' ]
+} )
 export class AppComponent {
-  title = 'PQ-Man';
+
+  public searchInput = '';
+  public displayOverlay = false;
+  public results: Array<{ url: string, tfidf: string }> = [];
+
+  constructor( private http: HttpClient ) {
+  }
+
+  public search(): void {
+    if ( this.searchInput.length > 0 ) {
+      this.displayOverlay = true;
+
+      this.http.get( environment.baseUrl + this.searchInput ).subscribe( ( data: [{ url: string, tfidf: string }] ) => {
+        this.results = data;
+        this.results.sort( ( f, s ) => {
+          if ( parseFloat( f.tfidf ) > parseFloat( s.tfidf ) ) {
+            return -1;
+          } else if ( parseFloat( f.tfidf ) < parseFloat( s.tfidf ) ) {
+            return 1;
+          }
+          return 0;
+        } );
+        this.displayOverlay = false;
+      } );
+    }
+  }
+
 }

src/app/app.module.ts

@@ -3,16 +3,30 @@ import { NgModule } from '@angular/core';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { FormsModule } from '@angular/forms';
+import { FullscreenOverlayContainer, OverlayContainer, OverlayModule } from '@angular/cdk/overlay';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { HttpClientModule } from '@angular/common/http';
 
-@NgModule({
+
+@NgModule( {
   declarations: [
-    AppComponent
+    AppComponent,
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    FormsModule,
+    OverlayModule,
+    MatProgressSpinnerModule,
+    HttpClientModule,
+    BrowserAnimationsModule,
   ],
-  providers: [],
-  bootstrap: [AppComponent]
-})
-export class AppModule { }
+  providers: [
+    { provide: OverlayContainer, useClass: FullscreenOverlayContainer }
+  ],
+  bootstrap: [ AppComponent ]
+} )
+export class AppModule {
+}

src/environments/environment.prod.ts

@@ -1,3 +1,4 @@
 export const environment = {
-  production: true
+  production: true,
+  baseUrl: 'http://142.4.212.26:8080/search?s=',
 };

src/environments/environment.ts

@@ -3,7 +3,8 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false
+  production: false,
+  baseUrl: 'http://142.4.212.26:8080/search?s=',
 };
 
 /*

src/index.html

@@ -10,6 +10,7 @@
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css?family=Russo+One&display=swap" rel="stylesheet">
 
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
 </head>
 <body>
   <app-root></app-root>

src/main.ts

@@ -1,3 +1,4 @@
+import 'hammerjs';
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 

src/styles.less

@@ -1,5 +1,8 @@
 /* You can add global styles to this file, and also import other style files */
 
+@import '~@angular/cdk/overlay-prebuilt.css';
+@import '~@angular/material/prebuilt-themes/indigo-pink.css';
+
 html {
   height: 100%;
   width: 100%;
@@ -12,3 +15,15 @@ body {
   width: 100%;
   margin: 0;
 }
+
+app-root {
+  z-index: 0;
+}
+
+.nlp-overlay {
+  background-color: rgba( 0, 0, 0, 0.5 );
+  z-index: 1;
+}
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }