Revize f3d8e7de

Re #7656: Integrace frontendu a backendu

- propojení fe a be jedním post voláním
- vytvoření service na fe, která volá be
- na be je odeslán objekt dotazu v jsonu
- opraveny testy na be

README.md

@@ -1 +1 @@
 # Indexace a fulltextové vyhledávání v historických obrazových dokumentech - ANONYMOUS
 
 ## Frontend - Angular
-### Suštění lokálně
+### Spuštění lokálně
 - naistalovat a nastavit lokální prostředí [návod zde](https://angular.io/guide/setup-local).
 - přesunout se do složky ./fe/fulltextsearch
 - spustit příkaz `ng serve -o`
@@ -10 +10 @@
 
 ### Spuštění v dockeru
 - nainstalovat docker [návod zde](https://docs.docker.com/docker-for-windows/install/)
+- nastartovat docker `docker-machine start`
 - přesunout se do složky ./fe/fulltextsearch
 - spustit příkaz pro vytvoření docker image `docker build -t dockerangular .`
 - spustit příkaz pro nastartování kontejneru `docker run -p4200:80 dockerangular`

be/fulltextsearch/src/main/java/cz/zcu/kiv/aswi/fulltextsearch/IndexController.java

@@ -1 +1 @@
 package cz.zcu.kiv.aswi.fulltextsearch;
 
+import cz.zcu.kiv.aswi.fulltextsearch.model.Query;
+import cz.zcu.kiv.aswi.fulltextsearch.model.QueryResponse;
+import org.springframework.web.bind.annotation.CrossOrigin;
 import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestBody;
 import org.springframework.web.bind.annotation.RestController;
 
+@CrossOrigin(origins = "*", allowedHeaders = "*")
 @RestController
 public class IndexController {
 
     @PostMapping("/")
-    public String index() {
-        return "index";
+    public QueryResponse index(@RequestBody Query query) {
+        return new QueryResponse("Hello, here is spring\n" +
+                "Query was: " + query.getQuery() + "\n" +
+                "Query sent: " + query.getDate().toString());
     }
 
 }

be/fulltextsearch/src/main/java/cz/zcu/kiv/aswi/fulltextsearch/model/Query.java

@@ +1 @@
+package cz.zcu.kiv.aswi.fulltextsearch.model;
+
+import com.fasterxml.jackson.annotation.JsonClassDescription;
+
+import java.util.Date;
+
+@JsonClassDescription("query")
+public class Query {
+
+    private String query;
+    private Date date;
+
+    public Query(String query, Date date) {
+        this.query = query;
+        this.date = date;
+    }
+
+    public String getQuery() {
+        return query;
+    }
+
+    public void setQuery(String query) {
+        this.query = query;
+    }
+
+    public Date getDate() {
+        return date;
+    }
+
+    public void setDate(Date date) {
+        this.date = date;
+    }
+}

be/fulltextsearch/src/main/java/cz/zcu/kiv/aswi/fulltextsearch/model/QueryResponse.java

@@ +1 @@
+package cz.zcu.kiv.aswi.fulltextsearch.model;
+
+public class QueryResponse {
+
+    private String response;
+
+    public QueryResponse(String response) {
+        this.response = response;
+    }
+
+    public String getResponse() {
+        return response;
+    }
+
+    public void setResponse(String response) {
+        this.response = response;
+    }
+}

be/fulltextsearch/src/test/java/cz/zcu/kiv/aswi/fulltextsearch/IndexControllerTest.java

@@ -1 +1 @@
 package cz.zcu.kiv.aswi.fulltextsearch;
 
+import cz.zcu.kiv.aswi.fulltextsearch.model.Query;
+import org.apache.coyote.Request;
 import org.junit.jupiter.api.Test;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.boot.test.context.SpringBootTest;
@@ -13 +15 @@
 
 import java.net.URI;
 import java.net.URISyntaxException;
+import java.util.Date;
 
 import static org.junit.jupiter.api.Assertions.assertEquals;
 
@@ -35 +38 @@
         HttpHeaders headers = new HttpHeaders();
         headers.setContentType(MediaType.APPLICATION_JSON);
 
-        String string = "";
-        HttpEntity<String> request = new HttpEntity<>(string, headers);
+        Date date = new Date();
+        Query testQuery = new Query("Test query", date);
+        HttpEntity<Query> request = new HttpEntity<>(testQuery, headers);
+
 
         ResponseEntity<String> result = restTemplate.postForEntity(uri, request, String.class);
 
         assertEquals(200, result.getStatusCodeValue());
-        assertEquals("index", result.getBody());
+        assertEquals("{\"response\":\"Hello, here is spring\\nQuery was: Test query\\nQuery sent: "+date.toString()+"\"}", result.getBody());
     }
 
 
-}
+}

fe/fulltextsearch/e2e/src/app.e2e-spec.ts

@@ -10 +10 @@
 
   it('should display welcome message', () => {
     page.navigateTo();
-    expect(page.getTitleText()).toEqual('Hello in fulltext search frontend');
+    expect(page.getTitleText()).toEqual('Hello in Fulltext search frontend');
   });
 
   afterEach(async () => {

fe/fulltextsearch/src/app/app.component.css

@@ +1 @@
+.test {
+  width: 80%;
+  height: 80%;
+  margin: 10%;
+  border: 3px solid grey;
+  padding: 10px;
+}

fe/fulltextsearch/src/app/app.component.html

@@ -1 @@
-<h1 style="text-align: center">Hello in fulltext search frontend</h1>
-<h2>Test bootstrap</h2>
-<div class="alert alert-primary" role="alert">
-  This is a primary alert—check it out!
+<div class="test">
+  <h1 style="text-align: center">Hello in {{title}} frontend</h1>
+  <form #queryForm="ngForm" (ngSubmit)="sendQuery(queryForm.value)">
+    <span><b>Object query:</b> </span>{{ queryForm.value | json }}
+    <div class="input-group mb-3">
+      <input type="text" class="form-control" placeholder="Query" aria-describedby="basic-addon2" ngModel name="query">
+      <div class="input-group-append">
+        <button class="btn btn-outline-secondary" type="submit">Search</button>
+      </div>
+    </div>
+
+    <div class="form-group">
+      <label for="exampleFormControlTextarea1">Response:</label>
+      <textarea readonly class="form-control" id="exampleFormControlTextarea1" rows="10">{{response.response}}</textarea>
+    </div>
+  </form>
 </div>
 
 <!-- Routing -->

fe/fulltextsearch/src/app/app.component.ts

@@ -1 +1 @@
 import { Component } from '@angular/core';
+import { Query } from './model/Query';
+import { QueryService} from './services/query.service';
+import { QueryResponse } from './model/QueryResponse';
 
 @Component({
   selector: 'app-root',
@@ -7 +10 @@
 })
 export class AppComponent {
   title = 'Fulltext search';
+  response: QueryResponse = new QueryResponse();
+
+  constructor(private queryService: QueryService) { }
+
+  sendQuery(temp: Query) {
+    console.log(temp);
+    temp.date = new Date();
+    this.queryService.sendQuery(temp).subscribe( response => {
+        this.response = response;
+    });
+  }
 }

fe/fulltextsearch/src/app/app.module.ts

@@ -1 +1 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { HttpClientModule } from '@angular/common/http';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { FormsModule } from '@angular/forms';
 
 @NgModule({
   declarations: [
@@ -10 +12 @@
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    FormsModule,
+    HttpClientModule
   ],
   providers: [],
   bootstrap: [AppComponent]

fe/fulltextsearch/src/app/model/Query.ts

@@ +1 @@
+export class Query {
+  query: string;
+  date: Date;
+
+  constructor(query: string, date: Date) {
+    this.query = query;
+    this.date = date;
+  }
+}

fe/fulltextsearch/src/app/model/QueryResponse.ts

@@ +1 @@
+export class QueryResponse {
+  response: string;
+}

fe/fulltextsearch/src/app/services/query.service.spec.ts

@@ +1 @@
+import { TestBed } from '@angular/core/testing';
+
+import { QueryService } from './query.service';
+import {HttpClientModule} from '@angular/common/http';
+
+describe('QueryService', () => {
+  beforeEach(() => TestBed.configureTestingModule({
+    imports: [HttpClientModule]
+  }));
+
+  it('should be created', () => {
+    const service: QueryService = TestBed.get(QueryService);
+    expect(service).toBeTruthy();
+  });
+});

fe/fulltextsearch/src/app/services/query.service.ts

@@ +1 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import {Observable} from 'rxjs';
+import { QueryResponse } from '../model/QueryResponse';
+import {Query} from '../model/Query';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class QueryService {
+
+  backendUrl = 'http://localhost:8080/';
+
+
+  constructor( private httpClient: HttpClient) {}
+
+  sendQuery(query: Query): Observable<QueryResponse> {
+    return this.httpClient.post<QueryResponse>(this.backendUrl, query);
+  }
+}