Rearragne components, add front page

2020-04-22 22:35:23 +02:00 · 2020-04-22 22:35:23 +02:00 · 39432acd3e
commit 39432acd3e
parent 5e9d0cd87a
13 changed files with 285 additions and 70 deletions
--- a/frontend/src/app/app-routing.module.ts
+++ b/frontend/src/app/app-routing.module.ts
@ -1,11 +1,16 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
+import { UploadComponent } from './upload/upload.component';

-
-const routes: Routes = [];
+const routes: Routes = [
+  {
+    path: '',
+    component: UploadComponent,
+  },
+];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {}
--- a/frontend/src/app/app.component.html
+++ b/frontend/src/app/app.component.html
@ -1,8 +1 @@
-<nb-layout>
-  <nb-layout-header>NKADF</nb-layout-header>
-  <nb-layout-column></nb-layout-column>
-  <nb-layout-column>
-    <app-open-file-button></app-open-file-button>
-  </nb-layout-column>
-  <nb-layout-column></nb-layout-column>
-</nb-layout>
+<router-outlet></router-outlet>
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@ -4,19 +4,19 @@ import { NgModule } from '@angular/core';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { NbThemeModule, NbLayoutModule } from '@nebular/theme';
-import { NbEvaIconsModule } from '@nebular/eva-icons';
 import { UploadModule } from './upload/upload.module';

+import { NbThemeModule } from '@nebular/theme';
+import { NbEvaIconsModule } from '@nebular/eva-icons';
+
@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
-    BrowserAnimationsModule,
-    NbThemeModule.forRoot({ name: 'default' }),
-    NbLayoutModule,
+    NbThemeModule.forRoot(),
    NbEvaIconsModule,
+    BrowserAnimationsModule,
    UploadModule,
  ],
  providers: [],
--- a/frontend/src/app/upload/drag-and-drop/drag-and-drop.component.html
+++ b/frontend/src/app/upload/drag-and-drop/drag-and-drop.component.html
@ -1,5 +1 @@
-<nb-card>
-  <nb-card-body>
-    Aby skorzystać z aplikacji dodaj plik
-  </nb-card-body>
-</nb-card>
+<div></div>
--- a/frontend/src/app/upload/open-file-button/open-file-button.component.html
+++ b/frontend/src/app/upload/open-file-button/open-file-button.component.html
@ -1,4 +1,4 @@
-<nb-card>
+<!-- <nb-card>
  <nb-card-body>
    <p>Aby skorzystać z aplikacji dodaj plik</p>
    <p>{{ fileName }}</p>
@ -13,7 +13,10 @@
      </button>
    </div>
  </nb-card-body>
-</nb-card>
+</nb-card> -->

 <!-- This is some kind of magic -->
-<input id="input-for-file" type="file" (change)="fetchFile($event)" />
+<button nbButton status="primary" (click)="openFileDialog($event)">
+  Wybierz plik
+</button>
+<input id="input-for-file" type="file" (change)="fetchAndEmitFile($event)" />
--- a/frontend/src/app/upload/open-file-button/open-file-button.component.ts
+++ b/frontend/src/app/upload/open-file-button/open-file-button.component.ts
@ -1,19 +1,14 @@
-import { Component, OnInit } from '@angular/core';
-import { SendDataService } from '../send-data.service';
-
+import { Component, OnInit, Output, EventEmitter } from '@angular/core';
@Component({
  selector: 'app-open-file-button',
  templateUrl: './open-file-button.component.html',
  styleUrls: ['./open-file-button.component.scss'],
 })
 export class OpenFileButtonComponent implements OnInit {
-  private file: File;
-  public fileName: string;
+  constructor() {}

-  constructor(private sendService: SendDataService) {
-    this.file = {} as File;
-    this.fileName = '';
-  }
+  @Output()
+  selectedFile: EventEmitter<File> = new EventEmitter<File>();

  ngOnInit(): void {}

@ -26,15 +21,7 @@ export class OpenFileButtonComponent implements OnInit {
    element.click();
  }

-  fetchFile(event: any) {
-    this.file = event.target.files[0];
-    this.fileName = this.file.name;
-  }
-
-  sendFile(event: any) {
-    event.preventDefault();
-    this.sendService.postFile(this.file).subscribe((res) => {
-      console.log(res);
-    });
+  fetchAndEmitFile(event: any) {
+    this.selectedFile.emit(event.target.files[0]);
  }
 }
--- a/frontend/src/app/upload/upload.component.html
+++ b/frontend/src/app/upload/upload.component.html
@ -0,0 +1,64 @@
+<nb-layout>
+  <nb-layout-header></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" nbButton>Jak wyeksportować pliki XML?</button>
+      </div>
+
+      <div>
+        <p class="h6">Załaduj plik aby rozpocząć</p>
+        <app-open-file-button
+          (selectedFile)="parseFile($event)"
+        ></app-open-file-button>
+        <button nbButton status="success" (click)="sendFile($event)">
+          Wyślij!
+        </button>
+      </div>
+    </section>
+
+    <div class="properties">
+      <section 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>
+      </section>
+
+      <section 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>
+      </section>
+
+      <section 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>
+      </section>
+    </div>
+
+    <!-- <app-open-file-button
+      (selectedFile)="parseFile($event)"
+    ></app-open-file-button>
+    <button nbButton status="success" (click)="sendFile($event)">
+      Wyślij!
+    </button> -->
+  </nb-layout-column>
+</nb-layout>
--- a/frontend/src/app/upload/upload.component.scss
+++ b/frontend/src/app/upload/upload.component.scss
@ -0,0 +1,48 @@
+.upload-card {
+  &__header {
+    max-width: 30rem;
+  }
+}
+
+.column {
+  display: flex;
+  flex-flow: column nowrap;
+  max-width: 80rem;
+  margin: 0 auto;
+  &__header {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-around;
+    h1 {
+      width: 30rem;
+    }
+  }
+}
+
+.properties {
+  margin: 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;
+  }
+}
+
+.nb-theme-default nb-layout .layout {
+  background-image: url("../../assets/wave.svg");
+}
--- a/frontend/src/app/upload/upload.component.ts
+++ b/frontend/src/app/upload/upload.component.ts
@ -0,0 +1,32 @@
+import { Component, OnInit } from '@angular/core';
+
+import { OpenFileButtonComponent } from './open-file-button/open-file-button.component';
+
+import { SendDataService } from './send-data.service';
+
+@Component({
+  selector: 'app-upload',
+  templateUrl: './upload.component.html',
+  styleUrls: ['./upload.component.scss'],
+})
+export class UploadComponent implements OnInit {
+  public fileName: string;
+  private file: File;
+
+  constructor(private sendService: SendDataService) {
+    this.file = {} as File;
+    this.fileName = '';
+  }
+
+  ngOnInit(): void {}
+
+  parseFile(event: any) {
+    this.file = event;
+  }
+
+  sendFile(event: any) {
+    this.sendService.postFile(this.file).subscribe((response: any) => {
+      console.log(response);
+    });
+  }
+}
--- a/frontend/src/app/upload/upload.module.ts
+++ b/frontend/src/app/upload/upload.module.ts
@ -2,24 +2,34 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { HttpClientModule } from '@angular/common/http';

-import { NbThemeModule, NbButtonModule, NbCardModule } from '@nebular/theme';
-import { NbEvaIconsModule } from '@nebular/eva-icons';
+import {
+  NbButtonModule,
+  NbCardModule,
+  NbLayoutModule,
+  NbIconModule,
+} 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],
+  declarations: [
+    DragAndDropComponent,
+    OpenFileButtonComponent,
+    UploadComponent,
+  ],
  imports: [
    CommonModule,
    HttpClientModule,
-    NbThemeModule,
-    NbEvaIconsModule,
+    NbLayoutModule,
    NbButtonModule,
    NbCardModule,
+    NbIconModule,
  ],
-  exports: [DragAndDropComponent, OpenFileButtonComponent],
+  exports: [UploadComponent],
  providers: [SendDataService],
 })
 export class UploadModule {}
--- a/frontend/src/assets/wave.svg
+++ b/frontend/src/assets/wave.svg
@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="1920"
+   height="1090"
+   viewBox="0 0 507.99999 288.39584"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
+   sodipodi:docname="wave.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.49497475"
+     inkscape:cx="780.33701"
+     inkscape:cy="571.26377"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:snap-intersection-paths="true"
+     inkscape:window-width="1900"
+     inkscape:window-height="1024"
+     inkscape:window-x="10"
+     inkscape:window-y="1090"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-8.6041499)">
+    <path
+       style="fill:#a6c1ff;stroke:none;stroke-width:0.27366662px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
+       d="m 0.35196777,296.86315 c 0,0 71.49211123,-90.18365 135.77937223,-91.22795 64.28726,-1.0443 88.83997,60.64185 153.57412,59.31918 64.73415,-1.32267 125.57465,-67.0285 218.73339,-111.59538 l -0.8453,143.50415 z"
+       id="path4518"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="czzccc" />
+    <path
+       style="fill:#3366ff;fill-opacity:1;stroke:none;stroke-width:2.02030516"
+       d="M 5.9546961,1085.1863 C 10.843034,1076.4967 61.390179,1021.1245 96.463738,986.03746 161.79046,920.68568 215.2437,875.762 274.25059,836.6201 c 67.72363,-44.92409 116.86814,-68.16513 173.32676,-81.9684 61.52005,-15.04069 125.02765,-11.56636 188.53509,10.31426 48.08417,16.56675 86.87429,37.9577 166.44793,91.7883 98.88716,66.89598 150.44254,92.31388 215.16253,106.07974 25.9207,5.51329 82.0811,7.58077 112.2187,4.1312 58.5531,-6.70204 120.3443,-26.95481 192.5969,-63.12577 59.2149,-29.64408 109.8287,-60.14058 228.5449,-137.70585 120.2947,-78.59665 194.0735,-124.28421 259.6092,-160.7631 34.9687,-19.46452 109.1385,-57.49953 109.9384,-56.37755 0.2564,0.35968 -0.206,101.11364 -1.0277,223.89768 -0.8216,122.78404 -1.5706,243.92659 -1.6642,269.20569 l -0.1703,45.9619 H 961.05393 c -826.35379,0 -956.4947093,-0.3913 -955.0992339,-2.8719 z"
+       id="path4520"
+       inkscape:connector-curvature="0"
+       transform="matrix(0.26458333,0,0,0.26458333,0,8.6041499)" />
+  </g>
+</svg>
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@ -1,8 +1,12 @@
-@import 'themes';
+@import "themes";

-@import '~@nebular/theme/styles/globals';
+@import "~@nebular/theme/styles/globals";

@include nb-install() {
  @include nb-theme-global();
-};
+}
 /* You can add global styles to this file, and also import other style files */
+
+.nb-theme-default nb-layout .layout {
+  background-image: url("./assets/wave.svg");
+}
--- a/frontend/src/themes.scss
+++ b/frontend/src/themes.scss
@ -1,18 +1,20 @@
-@import '~@nebular/theme/styles/theming';
-@import '~@nebular/theme/styles/themes/default';
+@import "~@nebular/theme/styles/theming";
+@import "~@nebular/theme/styles/themes/default";

-$nb-themes: nb-register-theme((
-
-  // add your variables here like:
-
-  // color-primary-100: #f2f6ff,
-  // color-primary-200: #d9e4ff,
-  // color-primary-300: #a6c1ff,
-  // color-primary-400: #598bff,
-  // color-primary-500: #3366ff,
-  // color-primary-600: #274bdb,
-  // color-primary-700: #1a34b8,
-  // color-primary-800: #102694,
-  // color-primary-900: #091c7a,
-
-), default, default);
+$nb-themes: nb-register-theme(
+  (
+    // add your variables here like:
+      // color-primary-100: #f2f6ff,
+      // color-primary-200: #d9e4ff,
+      // color-primary-300: #a6c1ff,
+      // color-primary-400: #598bff,
+      // color-primary-500: #3366ff,
+      // color-primary-600: #274bdb,
+      // color-primary-700: #1a34b8,
+      // color-primary-800: #102694,
+      // color-primary-900: #091c7a,
+      layout-bg: url("./assets/wave.svg")
+  ),
+  default,
+  default
+);