Feauture/rest api connection

README.md

@@ -1,15 +1,14 @@
 # wikiplag new_webapp
 
-Please note:
+### Requires: 
+- Node.js (https://nodejs.org/en/download/ LTS Version)
+- npm (installed automatically with Node.js)
 
-In order to run the webapp, node.js is required.
+### Install and run locally via console:
 
-How to install and run the webapp locally via console:
-
-1. git clone https://github.com/WikiPlag/webapp.git
+1. git clone https://github.com/WikiplagWS17/webapp.git
 2. cd webapp
 3. npm install
 4. npm start
 
-
-Live version (with mocked text) is available here: http://wikiplag.f4.htw-berlin.de
+21-10-2017 Tested on Windows 10 with Node.js version 6.11.4

app/app.module.ts

@@ -8,6 +8,8 @@ import {InputComponent} from "./components/input.component";
 import {OutputComponent} from "./components/output.component";
 import {SafeHtmlPipe} from "./pipes/safe-html.pipe";
 
+
+
 @NgModule({
   imports: [BrowserModule, FormsModule, HttpModule, JsonpModule],
   declarations: [AppComponent, InputComponent, OutputComponent, SafeHtmlPipe],

app/components/input.component.html

@@ -2,5 +2,13 @@ <h1>Eingabe</h1>
 <div>
   <textarea class="input_textarea" [(ngModel)]="inputText" placeholder="Text hier einfügen" [ngModelOptions]="{standalone: true}"></textarea><br />
   <button [disabled]="!inputText" (click)="send()">Analysieren</button>
+  <input type='file' accept=".txt" multiple (change)='openFile($event)'>
 </div>
 
+<div >
+<input class="param1" [(ngModel)]="minimumSentenceLength" title="The minimum length (number of words) in a sentence" type='text'>
+<input class="param2" [(ngModel)]="threshold" title="Articles which have an unique n-grams to input n-grams ratio, below this threshold are filtered out" type='text' >
+<input class="param3" [(ngModel)]="maxDistanceBetweenNgrams" title="The maximum distance between two n-grams" type='text' >
+<input class="param4" [(ngModel)]="maxAverageDistance" title="The maximum average distance between a potential plagiarism segment" type='text'  >
+<input class="param5" [(ngModel)]="secondaryThreshold" title="The secondary threshold - applied after building plagiarism segments" type='text'>
+</div>

app/components/input.component.ts

@@ -1,15 +1,29 @@
 import {Component, EventEmitter, Output} from '@angular/core';
+import {PlagPositionsService} from '../services/plag-positions.service';
 
 @Component({
   selector: 'input-comp',
   templateUrl: './app/components/input.component.html',
+  providers: [PlagPositionsService],
 })
-export class InputComponent  {
+export class InputComponent{
   /**
    * Contains text entered by user
    */
   inputText:string;
 
+  minimumSentenceLength = 6
+
+  threshold = 0.85
+
+  maxDistanceBetweenNgrams = 6
+
+  maxAverageDistance = 3
+
+  secondaryThreshold = 0.80
+
+  constructor(private plagPositionsService: PlagPositionsService) {}
+
   /**
    * Used to toggle from input.component to output.component in app.component
    */
@@ -20,6 +34,30 @@ export class InputComponent  {
    * Emits event to toggle components
    */
   send() {
-       this.sendEventEmitter.emit();
+    // post these json file to server
+    var json = JSON.stringify({"text": this.inputText})
+    console.log(json)
+    this.plagPositionsService.postPlagServer(json);
+
+    // only for testing , should change it
+    setTimeout(()=>{ this.sendEventEmitter.emit()}, 10000)
+
+    //this.sendEventEmitter.emit();
   }
+
+
+  openFile(event) {
+    var input = event.target;
+    for (var index = 0; index < input.files.length; index++) {
+        var  reader = new FileReader();
+
+        reader.onload = () => {
+            var text = reader.result;
+            this.inputText = text
+        }
+        reader.readAsBinaryString(input.files[index]);
+
+    };
+  }
+
 }

app/components/output.component.ts

@@ -78,13 +78,14 @@ export class OutputComponent {
     this.tagged_input_text = "Lädt ..." // displayed while service is loading
 
     this.plagPositionsService.getPlagPositions().subscribe(plagPositions => {
+      //window.glres = plagPositions;
       console.log(plagPositions);
 
       // assigns plagPositions from json to local variable
       this.plagPositions = plagPositions;
 
       // assigns tagged_input_text from json to local variable
-      this.tagged_input_text = this.plagPositions.tagged_input_text;
+      this.tagged_input_text = this.plagPositions.tagged_input_text; //tagged_input_text;
 
       // assigns plags from json to local variable
       this.plags = this.plagPositions.plags;

app/services/plag-positions.service.ts

@@ -1,26 +1,63 @@
 import {Injectable} from "@angular/core"
-import {Http} from "@angular/http"
+import {Http, Headers, RequestOptions} from "@angular/http"
 import 'rxjs/add/operator/map'
 
 /**
  * gets mock json from file and provides it as service
  */
 @Injectable()
 export class PlagPositionsService {
+
+    //post url
+    url:string = "http://localhost:8080/wikiplag/rest/analyse"
+
+
   /**
    * constructor of PlagPositionsService
    * @param http http service
    */
   constructor(private http: Http){
     console.info("init PlagPositionsService");
+    this.headers = new Headers();
+    this.headers.append('Content-Type', 'application/json');
+    this.headers.append('Access-Control-Allow-Origin', '*');
+    this.headers.append('Accept', 'application/json');
   }
 
+
   /**
    * returns observable with plagPositions
    * @returns {Observable<R>} observable with plagPositions
    */
-  getPlagPositions(){
-    return this.http.get('../mock.json')
-      .map(res => res.json());
+getPlagPositions(){
+
+    return  this.http.get("http://localhost:8080/wikiplag/rest/test",this.headers)
+      .map(res => res.json()
+    );
   }
+
+  // server url
+  postPlagServer(jsonObject){
+    console.log(typeof(jsonObject))
+    return this.http.post(this.url,jsonObject,this.headers).map(res => res.json()).subscribe(
+     (response) => {
+            /* this function is executed every time there's a new output */
+           console.log("VALUE RECEIVED: "+response);
+           //window.glres = response;
+     },
+     (err) => {
+            /* this function is executed when there's an ERROR */
+            console.log("ERROR: "+err);
+     },
+     () => {
+            /* this function is executed when the observable ends (completes) its stream */
+            console.log("COMPLETED");
+     }
+ );
+  }
+
+  testGetRequest(){
+    return this.http.get(this.url).map(res => console.log(res));
+  }
+
 }

package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "description": "QuickStart package.json from the documentation, supplemented with testing support",
   "scripts": {
-    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
+    "start": "concurrently \"tsc -w\" \"lite-server\" ",
     "e2e": "tsc && concurrently \"http-server -s\" \"protractor protractor.config.js\" --kill-others --success first",
     "lint": "tslint ./app/**/*.ts -t verbose",
     "lite": "lite-server",
@@ -27,7 +27,10 @@
     "@angular/router": "~3.4.0",
     "angular-in-memory-web-api": "~0.2.4",
     "core-js": "^2.4.1",
+    "ng2-file-upload": "^1.3.0",
+    "ng2-pdf-viewer": "^3.0.3",
     "ng2-webstorage": "^1.5.0",
+    "pdf-text-extract": "^1.5.0",
     "rxjs": "5.0.1",
     "systemjs": "0.19.40",
     "zone.js": "^0.7.4"

styles.css

@@ -28,6 +28,52 @@ h1 {
   border: 1px solid #b4302e;
 }
 
+
+.param1 {
+  position: fixed;
+  bottom: 75%;
+  right: 20%;
+  width: 100px;
+  height: 20px;
+  border: 3px solid #73AD21;
+}
+
+.param2 {
+  position: fixed;
+  bottom: 60%;
+  right: 20%;
+  width: 100px;
+  height: 20px;
+  border: 3px solid #73AD21;
+}
+
+.param3 {
+  position: fixed;
+  bottom: 45%;
+  right: 20%;
+  width: 100px;
+  height: 20px;
+  border: 3px solid #73AD21;
+}
+
+.param4 {
+  position: fixed;
+  bottom: 30%;
+  right: 20%;
+  width: 100px;
+  height: 20px;
+  border: 3px solid #73AD21;
+}
+
+.param5 {
+  position: fixed;
+  bottom: 15%;
+  right: 20%;
+  width: 100px;
+  height: 20px;
+  border: 3px solid #73AD21;
+}
+
 button {
   background-color: #b4302e;
   border-radius: 5px;
@@ -157,6 +203,3 @@ th {
 .hint {
   text-align: center;
 }
-
-
-