Massive rewrite: update front-page, add lazy-loading for view module, new file structure, create store for pushed data between views

frontend/package.json

@@ -28,7 +28,7 @@
     "zone.js": "~0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.901.0",
+    "@angular-devkit/build-angular": "^0.901.8",
     "@angular/cli": "~9.1.0",
     "@angular/compiler-cli": "~9.1.0",
     "@angular/language-service": "~9.1.0",
@@ -40,14 +40,15 @@
     "codelyzer": "^5.1.2",
     "jasmine-core": "~3.5.0",
     "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~4.4.1",
+    "karma": "^5.0.9",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage-istanbul-reporter": "~2.1.0",
     "karma-jasmine": "~3.0.1",
     "karma-jasmine-html-reporter": "^1.4.2",
-    "protractor": "~5.4.3",
+    "protractor": "^7.0.0",
     "ts-node": "~8.3.0",
     "tslint": "~6.1.0",
+    "tslint-config-prettier": "^1.18.0",
     "typescript": "~3.8.3"
   }
 }

frontend/src/app/_interfaces/discussion.ts

@@ -0,0 +1,8 @@
+import { Post } from './post';
+
+export interface Discussion {
+  title: string;
+  id: string;
+  first_post: string;
+  posts: Array<Post>;
+}

frontend/src/app/_interfaces/forumdata.ts

@@ -0,0 +1,7 @@
+import { Discussion } from './discussion';
+
+export interface ForumData {
+  id: string;
+  name: string;
+  discussion: Array<Discussion>;
+}

frontend/src/app/_interfaces/post.ts

@@ -0,0 +1,7 @@
+export interface Post {
+  author: string;
+  id: string;
+  message: string;
+  parent: string;
+  children?: Post[] | null;
+}

frontend/src/app/_services/send-data.service.ts

@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+@Injectable()
+export class SendDataService {
+  constructor(private http: HttpClient) {}
+
+  postFile(file: File): Observable<File> {
+    const formData: FormData = new FormData();
+    const requestOptions = {
+      responseType: 'text' as 'json',
+    };
+    formData.append('file', file, file.name);
+
+    return this.http.post<File>(
+      'http://127.0.0.1:8000/prototype/form',
+      formData,
+      requestOptions
+    );
+  }
+}

frontend/src/app/_services/shared-data.service.ts

@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { ForumData } from '../_interfaces/forumdata';
+
+@Injectable()
+export class SharedDataService {
+  private dataBS: BehaviorSubject<ForumData | any> = new BehaviorSubject({});
+
+  constructor() {}
+
+  public setData(value: any): void {
+    this.dataBS.next(value);
+  }
+
+  public getData() {
+    return new Observable((fn) => this.dataBS.subscribe(fn));
+  }
+}

frontend/src/app/app-routing.module.ts

@@ -1,17 +1,16 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
-
-import { UploadComponent } from './upload/upload.component';
-import { ViewDataComponent } from './view/view-data/view-data.component';
+import { FrontPageComponent } from './front-page/front-page.component';
 
 const routes: Routes = [
   {
     path: '',
-    component: UploadComponent,
+    component: FrontPageComponent,
   },
   {
     path: 'view',
-    component: ViewDataComponent,
+    loadChildren: () =>
+      import('./main-view/main-view.module').then((m) => m.MainViewModule),
   },
 ];
 

frontend/src/app/app.component.html

@@ -1 +0,0 @@
-<router-outlet></router-outlet>

frontend/src/app/app.component.ts

@@ -2,9 +2,6 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+  template: '<router-outlet></router-outlet>',
 })
-export class AppComponent {
-  title = 'nkadf';
-}
+export class AppComponent {}

frontend/src/app/app.module.ts

@@ -1,28 +1,27 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-
+import { HttpClientModule } from '@angular/common/http';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { NbThemeModule } from '@nebular/theme';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-
-import { UploadModule } from './upload/upload.module';
-import { ViewModule } from './view/view.module';
-
-import { NbThemeModule } from '@nebular/theme';
 import { NbEvaIconsModule } from '@nebular/eva-icons';
 
+import { FrontPageModule } from './front-page/front-page.module';
+import { SharedDataService } from './_services/shared-data.service';
+
 @NgModule({
   declarations: [AppComponent],
   imports: [
     BrowserModule,
+    BrowserAnimationsModule,
     AppRoutingModule,
+    HttpClientModule,
     NbThemeModule.forRoot(),
     NbEvaIconsModule,
-    BrowserAnimationsModule,
-    UploadModule,
-    ViewModule,
+    FrontPageModule,
   ],
-  providers: [],
   bootstrap: [AppComponent],
+  providers: [SharedDataService],
 })
 export class AppModule {}

frontend/src/app/front-page/front-page.component.html

@@ -0,0 +1,137 @@
+<nb-layout>
+  <nb-layout-header fixed class="header">
+    <div class="header__container">
+      <div class="header__logo-container"><span>nkadf</span></div>
+      <div class="header__buttons-container">
+        <button nbButton outline status="primary">Zaloguj</button>
+        <button nbButton outline status="success">Utwórz konto</button>
+      </div>
+    </div>
+  </nb-layout-header>
+  <nb-layout-column class="column">
+    <section class="column__header">
+      <div>
+        <h1>Narzędzie do komputerowej analizy dyskusji na forum</h1>
+        <button
+          status="success"
+          size="large"
+          nbButton
+          (click)="scrollTo(xmltutorial)"
+        >
+          Jak wyeksportować pliki XML?
+        </button>
+      </div>
+      <div>
+        <p class="h6">Załaduj plik aby rozpocząć:</p>
+        <button
+          nbButton
+          status="primary"
+          (click)="openFileDialog($event)"
+          class="choose-file-button"
+        >
+          Wybierz plik
+        </button>
+        <input
+          id="input-for-file"
+          type="file"
+          (change)="fetchFile($event)"
+          accept=".xml"
+        />
+        <button nbButton status="success" (click)="sendFile($event)">
+          Wyślij!
+        </button>
+        <p *ngIf="fileName">
+          <nb-icon icon="file-add-outline"></nb-icon> {{ fileName }}
+        </p>
+      </div>
+    </section>
+
+    <section class="properties">
+      <div class="properties__element">
+        <div class="properties__icon">
+          <nb-icon icon="info-outline"></nb-icon>
+        </div>
+        <h2>Lorem Ipsum</h2>
+        <p>
+          Nasza aplikacja pozwala na szczegółowe interpretowanie odpowiedzi z
+          wątków na forach platform e-learningowych, takich jak Moodle i
+          Edumatic
+        </p>
+      </div>
+
+      <div class="properties__element">
+        <div class="properties__icon">
+          <nb-icon icon="person-outline"></nb-icon>
+        </div>
+        <h2>Lorem Ipsum</h2>
+        <p>
+          System opiera się na przetwarzaniu języka naturalnego, które umożliwia
+          coś tam
+        </p>
+      </div>
+
+      <div class="properties__element">
+        <div class="properties__icon">
+          <nb-icon icon="trending-up-outline"></nb-icon>
+        </div>
+        <h2>Lorem Ipsum</h2>
+        <p>
+          Dzięki ogromnej gamie możliwości wizualizacji danych, użytkownik może
+          zrobić coś tam
+        </p>
+      </div>
+    </section>
+    <div class="column__wave">
+      <img src="../../assets/wave.svg" />
+    </div>
+
+    <section class="column__instruction">
+      <h1 class="text-alternate" #xmltutorial>Jak wyeksportować pliki XML?</h1>
+      <nb-card class="column__instruction-card">
+        <nb-stepper orientation="vertical">
+          <nb-step label="Krok 1">
+            <h5>Krok #1</h5>
+            <p class="paragraph">
+              Proin varius accumsan semper. Praesent consequat tincidunt
+              sagittis. Curabitur egestas sem a ipsum bibendum, sit amet
+              fringilla orci efficitur. Nam bibendum lectus ut viverra
+              tristique. Fusce eu pulvinar magna, quis viverra ex. Lorem ipsum
+              dolor sit amet, consectetur adipiscing elit. Praesent metus
+              turpis, commodo vel placerat quis, lobortis in ligula.
+            </p>
+            <button nbButton disabled nbStepperNext>Poprzedni krok</button>
+            <button nbButton nbStepperNext>Następny krok</button>
+          </nb-step>
+
+          <nb-step label="Krok 2">
+            <h5>Krok #2</h5>
+            <p class="paragraph">
+              Proin varius accumsan semper. Praesent consequat tincidunt
+              sagittis. Curabitur egestas sem a ipsum bibendum, sit amet
+              fringilla orci efficitur. Nam bibendum lectus ut viverra
+              tristique. Fusce eu pulvinar magna, quis viverra ex. Lorem ipsum
+              dolor sit amet, consectetur adipiscing elit. Praesent metus
+              turpis, commodo vel placerat quis, lobortis in ligula.
+            </p>
+            <button nbButton nbStepperPrevious>Poprzedni krok</button>
+            <button nbButton nbStepperNext>Następny krok</button>
+          </nb-step>
+
+          <nb-step label="Krok 3">
+            <h5>Krok #3</h5>
+            <p class="paragraph">
+              Proin varius accumsan semper. Praesent consequat tincidunt
+              sagittis. Curabitur egestas sem a ipsum bibendum, sit amet
+              fringilla orci efficitur. Nam bibendum lectus ut viverra
+              tristique. Fusce eu pulvinar magna, quis viverra ex. Lorem ipsum
+              dolor sit amet, consectetur adipiscing elit. Praesent metus
+              turpis, commodo vel placerat quis, lobortis in ligula.
+            </p>
+            <button nbButton nbStepperPrevious>Poprzedni krok</button>
+            <button nbButton nbStepperNext disabled>Następny krok</button>
+          </nb-step>
+        </nb-stepper>
+      </nb-card>
+    </section>
+  </nb-layout-column>
+</nb-layout>

frontend/src/app/front-page/front-page.component.scss

@@ -0,0 +1,87 @@
+.header {
+  &__container {
+    display: flex;
+    width: 100%;
+    justify-content: space-around;
+    align-items: center;
+  }
+
+  &__buttons-container {
+    button {
+      margin: 0 0.25rem;
+    }
+  }
+}
+
+.upload-card {
+  &__header {
+    max-width: 30rem;
+  }
+}
+
+.column {
+  display: flex;
+  flex-flow: column nowrap;
+  padding: 0 !important;
+  margin: 0 auto;
+  &__header {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-around;
+    h1 {
+      width: 30rem;
+    }
+  }
+
+  &__wave {
+    display: flex;
+    img {
+      width: 100%;
+    }
+  }
+
+  &__instruction {
+    margin-top: -1px;
+    background-color: #3366ff;
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: center;
+  }
+
+  &__instruction-card {
+    max-width: 50%;
+    padding: 2.25rem;
+  }
+}
+
+.properties {
+  margin: 4rem 3rem 0;
+  display: flex;
+  flex-flow: row;
+  justify-content: center;
+  &__element {
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    max-width: 20rem;
+    margin: 0 2rem;
+  }
+  nb-icon {
+    font-size: 3rem;
+  }
+  h2 {
+    margin: 1rem 0;
+  }
+
+  p {
+    text-align: center;
+  }
+}
+
+input[type="file"] {
+  display: none;
+}
+
+.choose-file-button {
+  margin-right: 0.5rem;
+}

frontend/src/app/front-page/front-page.component.ts

@@ -0,0 +1,43 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { SendDataService } from '../_services/send-data.service';
+import { SharedDataService } from '../_services/shared-data.service';
+
+@Component({
+  selector: 'app-front-page',
+  templateUrl: './front-page.component.html',
+  styleUrls: ['./front-page.component.scss'],
+})
+export class FrontPageComponent {
+  private file: File;
+  public fileName: string;
+
+  constructor(
+    private sendDataService: SendDataService,
+    private sharedDataService: SharedDataService,
+    private router: Router
+  ) {}
+
+  scrollTo(el: HTMLElement) {
+    el.scrollIntoView({ behavior: 'smooth' });
+  }
+
+  openFileDialog(event: any): void {
+    event.preventDefault();
+
+    const element: HTMLElement = document.getElementById(
+      'input-for-file'
+    ) as HTMLElement;
+    element.click();
+  }
+
+  fetchFile(event: any): void {
+    this.file = event.target.files[0];
+    this.fileName = this.file.name;
+  }
+
+  sendFile(event: any): void {
+    this.sharedDataService.setData('Dupa');
+    this.router.navigate(['/view']);
+  }
+}

frontend/src/app/front-page/front-page.module.ts

@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FrontPageComponent } from './front-page.component';
+import { SendDataService } from '../_services/send-data.service';
+import {
+  NbLayoutModule,
+  NbButtonModule,
+  NbCardModule,
+  NbIconModule,
+  NbStepperModule,
+} from '@nebular/theme';
+
+@NgModule({
+  declarations: [FrontPageComponent],
+  imports: [
+    CommonModule,
+    NbLayoutModule,
+    NbButtonModule,
+    NbCardModule,
+    NbIconModule,
+    NbStepperModule,
+  ],
+  providers: [SendDataService],
+})
+export class FrontPageModule {}

frontend/src/app/main-view/main-view-routing.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule, Router } from '@angular/router';
+import { MainViewComponent } from './main-view.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: MainViewComponent,
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class MainViewRoutingModule {}

frontend/src/app/main-view/main-view.component.html

@@ -0,0 +1 @@
+

frontend/src/app/main-view/main-view.component.ts

@@ -0,0 +1,21 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { SharedDataService } from '../_services/shared-data.service';
+
+@Component({
+  selector: 'app-main-view',
+  templateUrl: './main-view.component.html',
+  styleUrls: ['./main-view.component.scss'],
+})
+export class MainViewComponent implements OnInit, OnDestroy {
+  public data: any;
+
+  constructor(private sharedDataService: SharedDataService) {}
+
+  ngOnInit(): void {
+    this.sharedDataService.getData().subscribe((res) => {
+      this.data = res;
+    });
+  }
+
+  ngOnDestroy(): void {}
+}

frontend/src/app/main-view/main-view.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MainViewComponent } from './main-view.component';
+import { MainViewRoutingModule } from './main-view-routing.module';
+
+@NgModule({
+  declarations: [MainViewComponent],
+  imports: [CommonModule, MainViewRoutingModule],
+})
+export class MainViewModule {}

frontend/src/app/upload/drag-and-drop/drag-and-drop.component.html

@@ -1 +0,0 @@
-<div></div>

frontend/src/app/upload/drag-and-drop/drag-and-drop.component.spec.ts

@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { DragAndDropComponent } from './drag-and-drop.component';
-
-describe('DragAndDropComponent', () => {
-  let component: DragAndDropComponent;
-  let fixture: ComponentFixture<DragAndDropComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ DragAndDropComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(DragAndDropComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

frontend/src/app/upload/drag-and-drop/drag-and-drop.component.ts

@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-drag-and-drop',
-  templateUrl: './drag-and-drop.component.html',
-  styleUrls: ['./drag-and-drop.component.scss']
-})
-export class DragAndDropComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}

frontend/src/app/upload/upload.component.ts

@@ -1,8 +1,5 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
-
-import { OpenFileButtonComponent } from './open-file-button/open-file-button.component';
-
 import { SendDataService } from './send-data.service';
 
 @Component({

frontend/src/app/upload/upload.module.ts

@@ -1,7 +1,6 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { HttpClientModule } from '@angular/common/http';
-
 import {
   NbButtonModule,
   NbCardModule,
@@ -9,19 +8,12 @@ import {
   NbIconModule,
   NbStepperModule,
 } from '@nebular/theme';
-
-import { DragAndDropComponent } from './drag-and-drop/drag-and-drop.component';
 import { OpenFileButtonComponent } from './open-file-button/open-file-button.component';
 import { UploadComponent } from './upload.component';
-
 import { SendDataService } from './send-data.service';
 
 @NgModule({
-  declarations: [
-    DragAndDropComponent,
-    OpenFileButtonComponent,
-    UploadComponent,
-  ],
+  declarations: [OpenFileButtonComponent, UploadComponent],
   imports: [
     CommonModule,
     HttpClientModule,

frontend/tslint.json

@@ -1,11 +1,8 @@
 {
-  "extends": "tslint:recommended",
+  "extends": ["tslint:recommended", "tslint-config-prettier"],
   "rules": {
     "align": {
-      "options": [
-        "parameters",
-        "statements"
-      ]
+      "options": ["parameters", "statements"]
     },
     "array-type": false,
     "arrow-return-shorthand": true,
@@ -16,34 +13,16 @@
     "component-class-suffix": true,
     "contextual-lifecycle": true,
     "directive-class-suffix": true,
-    "directive-selector": [
-      true,
-      "attribute",
-      "app",
-      "camelCase"
-    ],
-    "component-selector": [
-      true,
-      "element",
-      "app",
-      "kebab-case"
-    ],
+    "directive-selector": [true, "attribute", "app", "camelCase"],
+    "component-selector": [true, "element", "app", "kebab-case"],
     "eofline": true,
-    "import-blacklist": [
-      true,
-      "rxjs/Rx"
-    ],
+    "import-blacklist": [true, "rxjs/Rx"],
     "import-spacing": true,
     "indent": {
-      "options": [
-        "spaces"
-      ]
+      "options": ["spaces"]
     },
     "max-classes-per-file": false,
-    "max-line-length": [
-      true,
-      140
-    ],
+    "max-line-length": [true, 140],
     "member-ordering": [
       true,
       {
@@ -55,35 +34,17 @@
         ]
       }
     ],
-    "no-console": [
-      true,
-      "debug",
-      "info",
-      "time",
-      "timeEnd",
-      "trace"
-    ],
+    "no-console": [true, "debug", "info", "time", "timeEnd", "trace"],
     "no-empty": false,
-    "no-inferrable-types": [
-      true,
-      "ignore-params"
-    ],
+    "no-inferrable-types": [true, "ignore-params"],
     "no-non-null-assertion": true,
     "no-redundant-jsdoc": true,
     "no-switch-case-fall-through": true,
     "no-var-requires": false,
-    "object-literal-key-quotes": [
-      true,
-      "as-needed"
-    ],
-    "quotemark": [
-      true,
-      "single"
-    ],
+    "object-literal-key-quotes": [true, "as-needed"],
+    "quotemark": [true, "single"],
     "semicolon": {
-      "options": [
-        "always"
-      ]
+      "options": ["always"]
     },
     "space-before-function-paren": {
       "options": {
@@ -113,11 +74,7 @@
       ]
     },
     "variable-name": {
-      "options": [
-        "ban-keywords",
-        "check-format",
-        "allow-pascal-case"
-      ]
+      "options": ["ban-keywords", "check-format", "allow-pascal-case"]
     },
     "whitespace": {
       "options": [
@@ -142,7 +99,5 @@
     "use-lifecycle-interface": true,
     "use-pipe-transform-interface": true
   },
-  "rulesDirectory": [
-    "codelyzer"
-  ]
-}
+  "rulesDirectory": ["codelyzer"]
+}