From 706bb170557781e4adb493814eaca99c8d58274e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Romaszkin?= <microm3@st.amu.edu.pl>
Date: Fri, 12 Jun 2020 22:03:21 +0200
Subject: [PATCH] Create navbar and sidebar for view page

---
 .../src/app/_services/send-data.service.ts    |  2 +-
 frontend/src/app/app.module.ts                | 11 +++++++++--
 .../app/front-page/front-page.component.ts    |  4 +++-
 .../app/main-view/main-view.component.html    | 14 +++++++++++++-
 .../app/main-view/main-view.component.scss    |  6 ++++++
 .../src/app/main-view/main-view.component.ts  | 19 ++++++++++++++++---
 .../src/app/main-view/main-view.module.ts     | 15 ++++++++++++++-
 7 files changed, 62 insertions(+), 9 deletions(-)

diff --git a/frontend/src/app/_services/send-data.service.ts b/frontend/src/app/_services/send-data.service.ts
index 4fb3c99..cc0e3a9 100644
--- a/frontend/src/app/_services/send-data.service.ts
+++ b/frontend/src/app/_services/send-data.service.ts
@@ -14,7 +14,7 @@ export class SendDataService {
     formData.append('file', file, file.name);
 
     return this.http.post<File>(
-      'http://127.0.0.1:8000/prototype/form',
+      'http://127.0.0.1:8000/prototype/form/',
       formData,
       requestOptions
     );
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index be780e7..5940ec5 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -2,10 +2,16 @@ 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 { NbEvaIconsModule } from '@nebular/eva-icons';
+import {
+  NbThemeModule,
+  NbSidebarModule,
+  NbSidebarService,
+} from '@nebular/theme';
 
 import { FrontPageModule } from './front-page/front-page.module';
 import { SharedDataService } from './_services/shared-data.service';
@@ -18,10 +24,11 @@ import { SharedDataService } from './_services/shared-data.service';
     AppRoutingModule,
     HttpClientModule,
     NbThemeModule.forRoot(),
+    NbSidebarModule.forRoot(),
     NbEvaIconsModule,
     FrontPageModule,
   ],
   bootstrap: [AppComponent],
-  providers: [SharedDataService],
+  providers: [SharedDataService, NbSidebarService],
 })
 export class AppModule {}
diff --git a/frontend/src/app/front-page/front-page.component.ts b/frontend/src/app/front-page/front-page.component.ts
index 694d670..af34387 100644
--- a/frontend/src/app/front-page/front-page.component.ts
+++ b/frontend/src/app/front-page/front-page.component.ts
@@ -37,7 +37,9 @@ export class FrontPageComponent {
   }
 
   sendFile(event: any): void {
-    this.sharedDataService.setData('Dupa');
+    this.sendDataService.postFile(this.file).subscribe((res: any) => {
+      this.sharedDataService.setData(res);
+    });
     this.router.navigate(['/view']);
   }
 }
diff --git a/frontend/src/app/main-view/main-view.component.html b/frontend/src/app/main-view/main-view.component.html
index 8b13789..abbd442 100644
--- a/frontend/src/app/main-view/main-view.component.html
+++ b/frontend/src/app/main-view/main-view.component.html
@@ -1 +1,13 @@
-
+<nb-layout>
+  <nb-layout-header>
+    <div class="actions-container">
+      <nb-actions>
+        <nb-action icon="menu" (click)="toggleSidebar()"></nb-action>
+      </nb-actions>
+      <nb-actions>
+        <nb-action icon="power" title="Wyloguj">Wyloguj</nb-action>
+      </nb-actions>
+    </div>
+  </nb-layout-header>
+  <nb-sidebar tag="main"></nb-sidebar>
+</nb-layout>
diff --git a/frontend/src/app/main-view/main-view.component.scss b/frontend/src/app/main-view/main-view.component.scss
index e69de29..1b28b4b 100644
--- a/frontend/src/app/main-view/main-view.component.scss
+++ b/frontend/src/app/main-view/main-view.component.scss
@@ -0,0 +1,6 @@
+.actions-container {
+  width: 100%;
+  display: flex;
+  flex-flow: row;
+  justify-content: space-between;
+}
diff --git a/frontend/src/app/main-view/main-view.component.ts b/frontend/src/app/main-view/main-view.component.ts
index c5c0047..29750fb 100644
--- a/frontend/src/app/main-view/main-view.component.ts
+++ b/frontend/src/app/main-view/main-view.component.ts
@@ -1,6 +1,9 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { SharedDataService } from '../_services/shared-data.service';
 
+import { NbSidebarService } from '@nebular/theme';
+import { Subscription } from 'rxjs';
+
 @Component({
   selector: 'app-main-view',
   templateUrl: './main-view.component.html',
@@ -8,14 +11,24 @@ import { SharedDataService } from '../_services/shared-data.service';
 })
 export class MainViewComponent implements OnInit, OnDestroy {
   public data: any;
+  private dataSub: Subscription;
 
-  constructor(private sharedDataService: SharedDataService) {}
+  constructor(
+    private sharedDataService: SharedDataService,
+    private sidebarService: NbSidebarService
+  ) {}
 
   ngOnInit(): void {
-    this.sharedDataService.getData().subscribe((res) => {
+    this.dataSub = this.sharedDataService.getData().subscribe((res) => {
       this.data = res;
     });
   }
 
-  ngOnDestroy(): void {}
+  ngOnDestroy(): void {
+    this.dataSub.unsubscribe();
+  }
+
+  toggleSidebar() {
+    this.sidebarService.toggle(true, 'main');
+  }
 }
diff --git a/frontend/src/app/main-view/main-view.module.ts b/frontend/src/app/main-view/main-view.module.ts
index 91e910a..7e02f97 100644
--- a/frontend/src/app/main-view/main-view.module.ts
+++ b/frontend/src/app/main-view/main-view.module.ts
@@ -1,10 +1,23 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+
 import { MainViewComponent } from './main-view.component';
 import { MainViewRoutingModule } from './main-view-routing.module';
 
+import {
+  NbLayoutModule,
+  NbActionsModule,
+  NbSidebarModule,
+} from '@nebular/theme';
+
 @NgModule({
   declarations: [MainViewComponent],
-  imports: [CommonModule, MainViewRoutingModule],
+  imports: [
+    CommonModule,
+    MainViewRoutingModule,
+    NbLayoutModule,
+    NbActionsModule,
+    NbSidebarModule,
+  ],
 })
 export class MainViewModule {}