s434776/PRI_2020-FE
2
0
Fork 0
Code Issues Pull Requests Releases Activity

Merge branch 'master' of https://git.wmi.amu.edu.pl/s434776/PRI_2020-FE

Browse Source
This commit is contained in:
kushiji 2020-06-23 14:50:35 +02:00
commit c6212fd1a3
28 changed files with 195 additions and 405 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/app/_functions/maked3hierarchy.ts Normal file
View File

@ -0,0 +1,20 @@
import { Post } from '../_interfaces/post';
/**
* Returns hierearchy-like array specified for D3 graph
*/
export default function makeHierarchy(data: Post[]) {
const tree: Post[] = [];
const childOf: any = {};
data.forEach((element) => {
const { id, parent } = element;
childOf[id] = childOf[id] || [];
element.children = childOf[id];
if (parent !== '0') {
(childOf[parent] = childOf[parent] || []).push(element);
} else {
tree.push(element);
}
});
return tree;
}

2
frontend/src/app/_interfaces/customforumdata.ts
View File

@ -4,7 +4,7 @@ export interface CustomForumData {
discussions: [
{
title: string;
id: string;
id: number;
}
];
}

1
frontend/src/app/_services/shared-data.service.ts
View File

@ -33,7 +33,6 @@ export class SharedDataService {
public addParagraph(paragraph: LabelData) {
const paragraphs = this.paragraphsBS.getValue();
console.log(paragraphs);
if (paragraphs.find((p) => p.para_id === paragraph.para_id)) {
const updatedParagraphs = paragraphs.map((element) => {
if (element.para_id === paragraph.para_id) {

41
frontend/src/app/_services/sidebar-items.service.ts Normal file
View File

@ -0,0 +1,41 @@
import { Injectable } from '@angular/core';
import { NbMenuItem } from '@nebular/theme';
import { BehaviorSubject } from 'rxjs';
/* Service for handling sidebar menu items */
@Injectable()
export class SidebarItemsService {
constructor() {}
/* Initial values */
private menuItemsBS: BehaviorSubject<NbMenuItem[]> = new BehaviorSubject<
NbMenuItem[]
>([
{
title: 'Dyskusje',
link: '/view/discussions',
},
{
title: 'Wizualizacje',
},
]);
/**
*
* @param items children to add
* @param index 0 for disucssions, 1 for visualizations
*/
public addMenuItem(items: NbMenuItem[], index: number) {
const fetchedMenuItems = this.menuItemsBS.getValue();
fetchedMenuItems[index].children = items;
this.menuItemsBS.next(fetchedMenuItems);
}
/**
* Return observable with current sidebar menu items
*/
public getMenuItems() {
return this.menuItemsBS.asObservable();
}
}

3
frontend/src/app/app.module.ts
View File

@ -16,6 +16,7 @@ import {
import { FrontPageModule } from './front-page/front-page.module';
import { SharedDataService } from './_services/shared-data.service';
import { SidebarItemsService } from './_services/sidebar-items.service';
@NgModule({
declarations: [AppComponent],
@ -31,6 +32,6 @@ import { SharedDataService } from './_services/shared-data.service';
FrontPageModule,
],
bootstrap: [AppComponent],
providers: [SharedDataService, NbSidebarService],
providers: [SharedDataService, NbSidebarService, SidebarItemsService],
})
export class AppModule {}

1
frontend/src/app/main-view/discussion-chooser/discussion-chooser.component.html
View File

@ -6,6 +6,7 @@
*ngFor="let item of data.discussions"
class="picker-container__discussion"
[accent]="getRandomColor()"
(click)="onDiscussionClick(item.id)"
>
<h3 class="picker-container__disc-title">{{ item.title }}</h3>
</nb-card>

21
frontend/src/app/main-view/discussion-chooser/discussion-chooser.component.ts
View File

@ -9,6 +9,7 @@ import { Colors } from '../../_types/color';
import { CustomForumData } from '../../_interfaces/customforumdata';
import { Subscription } from 'rxjs';
import { NbMenuItem } from '@nebular/theme';
import { Router } from '@angular/router';
// interface CustomForumData {
// id: string;
@ -32,24 +33,16 @@ export class DiscussionChooserComponent implements OnInit, OnDestroy {
colors: Colors[] = ['primary', 'danger', 'info', 'success', 'warning'];
private dataSub: Subscription;
constructor(private sharedDataService: SharedDataService) {}
constructor(
private sharedDataService: SharedDataService,
private router: Router
) {}
ngOnInit(): void {
this.dataSub = this.sharedDataService.getData().subscribe((res) => {
if (res) {
const parsedObj = JSON.parse(res as string);
this.data = parsedObj as CustomForumData;
const fetchedDiscussions = this.data.discussions.map(
(element): NbMenuItem => {
return {
title: element.title,
link: `/view/forum/${element.id}`,
};
}
);
this.sharedDataService.setDiscussions(fetchedDiscussions);
}
});
}
@ -61,4 +54,8 @@ export class DiscussionChooserComponent implements OnInit, OnDestroy {
getRandomColor(): Colors {
return this.colors[Math.floor(Math.random() * this.colors.length)];
}
onDiscussionClick(id: number) {
this.router.navigate([`/view/forum/${id}`]);
}
}

8
frontend/src/app/main-view/discussion-viewer/discussion-viewer.component.html
View File

@ -3,6 +3,14 @@
<button nbButton status="primary" class="discussion-viewer__save-button">
Zapisz zmiany
</button>
<button
nbButton
status="success"
class="discussion-viewer__back-button"
(click)="onBackButtonClick()"
>
Wróć do wyboru dyskusji
</button>
</div>
<div class="discussion-viewer__posts-container">
<nb-card *ngFor="let item of data">

11
frontend/src/app/main-view/discussion-viewer/discussion-viewer.component.ts
View File

@ -1,5 +1,5 @@
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ActivatedRoute, Router } from '@angular/router';
import { GetDiscussionService } from '../../_services/get-discussion.service';
import { PredictedPost } from '../../_interfaces/predictedposts';
import { Subscription } from 'rxjs';
@ -17,11 +17,12 @@ export class DiscussionViewerComponent implements OnInit {
constructor(
private getDiscussionService: GetDiscussionService,
private router: ActivatedRoute
private activatedRouter: ActivatedRoute,
private router: Router
) {}
ngOnInit(): void {
this.paramSub = this.router.params.subscribe((params) => {
this.paramSub = this.activatedRouter.params.subscribe((params) => {
this.id = params.id;
this.discussionSub = this.getDiscussionService
.getDiscussion(this.id)
@ -31,4 +32,8 @@ export class DiscussionViewerComponent implements OnInit {
});
});
}
onBackButtonClick() {
this.router.navigate(['/view/discussions/']);
}
}

9
frontend/src/app/main-view/main-view-routing.module.ts
View File

@ -1,5 +1,5 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule, Router } from '@angular/router';
import { Routes, RouterModule } from '@angular/router';
import { MainViewComponent } from './main-view.component';
import { DiscussionChooserComponent } from './discussion-chooser/discussion-chooser.component';
import { DiscussionViewerComponent } from './discussion-viewer/discussion-viewer.component';
@ -17,6 +17,13 @@ const routes: Routes = [
path: 'forum/:id',
component: DiscussionViewerComponent,
},
{
path: 'visualize/:id',
loadChildren: () =>
import('./visualize-forum/visualize-forum.module').then(
(m) => m.VisualizeForumModule
),
},
{
path: '',
redirectTo: 'discussions',

56
frontend/src/app/main-view/main-view.component.ts
View File

@ -1,26 +1,28 @@
import { Component, AfterContentInit } from '@angular/core';
import { Component, OnInit, AfterContentInit } from '@angular/core';
import { Router } from '@angular/router';
import { SharedDataService } from '../_services/shared-data.service';
import { NbSidebarService, NbMenuItem } from '@nebular/theme';
import { Subscription } from 'rxjs';
import { SidebarItemsService } from '../_services/sidebar-items.service';
import { CustomForumData } from '../_interfaces/customforumdata';
@Component({
selector: 'app-main-view',
templateUrl: './main-view.component.html',
styleUrls: ['./main-view.component.scss'],
})
export class MainViewComponent implements AfterContentInit {
items: NbMenuItem[] = [
{
title: 'Dyskusje',
link: '/view/discussions',
},
];
export class MainViewComponent implements OnInit, AfterContentInit {
items: NbMenuItem[];
menuItemsSub: Subscription;
dataSub: Subscription;
constructor(
private sidebarService: NbSidebarService,
private sharedDataService: SharedDataService,
private router: Router
private router: Router,
private menuItemsService: SidebarItemsService
) {}
toggleSidebar() {
@ -31,15 +33,35 @@ export class MainViewComponent implements AfterContentInit {
this.router.navigate(['/']);
}
ngAfterContentInit(): void {
this.sharedDataService.getDiscussions().subscribe((res) => {
this.items[0].children = res;
ngOnInit(): void {
this.dataSub = this.sharedDataService.getData().subscribe((result) => {
if (result) {
const parsedObj = JSON.parse(result as string) as CustomForumData;
const fetchedDiscussions = parsedObj.discussions.map(
(element): NbMenuItem => {
return {
title: element.title,
link: `/view/forum/${element.id}`,
};
}
);
const fetchedVisualizations = parsedObj.discussions.map(
(element): NbMenuItem => {
return {
title: element.title,
link: `/view/visualize/${element.id}`,
};
}
);
this.menuItemsService.addMenuItem(fetchedDiscussions, 0);
this.menuItemsService.addMenuItem(fetchedVisualizations, 1);
}
});
}
// onActivate(event: any) {
// event.discussions.subscribe((res: NbMenuItem[]) => {
// this.items[0].children = res;
// });
// }
ngAfterContentInit(): void {
this.menuItemsService.getMenuItems().subscribe((result) => {
this.items = result;
});
}
}

24
frontend/src/app/main-view/styled-paragraph/styled-paragraph.component.html
View File

@ -6,13 +6,19 @@
>
{{ message }}
</span>
<nb-select
placeholder="Wybierz etykietę"
(selectedChange)="fetchLabel($event, paragraphId)"
[selected]="loadedLabel"
>
<nb-option *ngFor="let _label of availableLabels" [value]="_label">{{
_label
}}</nb-option>
</nb-select>
<div class="discussion-viewer__select">
<label class="label">
Wybierz etykietę
</label>
<nb-select
placeholder="Wybierz etykietę"
(selectedChange)="fetchLabel($event, paragraphId)"
[selected]="loadedLabel"
>
<nb-option *ngFor="let _label of availableLabels" [value]="_label">{{
_label
}}</nb-option>
</nb-select>
</div>
</div>

4
frontend/src/app/main-view/styled-paragraph/styled-paragraph.component.scss
View File

@ -55,4 +55,8 @@
justify-content: space-between;
align-items: center;
}
&__select {
display: flex;
flex-flow: column;
}
}

16
frontend/src/app/main-view/visualize-forum/visualize-forum-routing.module.ts Normal file
View File

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

0
frontend/src/app/main-view/visualize-forum/visualize-forum.component.html Normal file
View File

0
frontend/src/app/main-view/visualize-forum/visualize-forum.component.scss Normal file
View File

13
frontend/src/app/main-view/visualize-forum/visualize-forum.component.ts Normal file
View File

@ -0,0 +1,13 @@
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'visualize-forum',
templateUrl: './visualize-forum.component.html',
styleUrls: ['./visualize-forum.component.scss'],
})
export class VisualizeForumComponent implements OnInit {
constructor(private route: ActivatedRoute) {}
ngOnInit(): void {}
}

10
frontend/src/app/main-view/visualize-forum/visualize-forum.module.ts Normal file
View File

@ -0,0 +1,10 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { VisualizeForumComponent } from './visualize-forum.component';
import { VisualizeForumRoutingModule } from './visualize-forum-routing.module';
@NgModule({
declarations: [VisualizeForumComponent],
imports: [CommonModule, VisualizeForumRoutingModule],
})
export class VisualizeForumModule {}

27
frontend/src/app/upload/open-file-button/open-file-button.component.html
View File

@ -1,27 +0,0 @@
<!-- <nb-card>
<nb-card-body>
<p>Aby skorzystać z aplikacji dodaj plik</p>
<p>{{ fileName }}</p>
<div>
<button nbButton status="primary" (click)="openFileDialog($event)">
Wybierz plik
</button>
</div>
<div>
<button nbButton status="success" (click)="sendFile($event)">
Wyślij!
</button>
</div>
</nb-card-body>
</nb-card> -->
<!-- This is some kind of magic -->
<button nbButton status="primary" (click)="openFileDialog($event)">
Wybierz plik
</button>
<input
id="input-for-file"
type="file"
(change)="fetchAndEmitFile($event)"
accept=".xml"
/>

3
frontend/src/app/upload/open-file-button/open-file-button.component.scss
View File

@ -1,3 +0,0 @@
input[type="file"] {
display: none;
}

25
frontend/src/app/upload/open-file-button/open-file-button.component.spec.ts
View File

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

27
frontend/src/app/upload/open-file-button/open-file-button.component.ts
View File

@ -1,27 +0,0 @@
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 {
constructor() {}
@Output()
selectedFile: EventEmitter<File> = new EventEmitter<File>();
ngOnInit(): void {}
openFileDialog(event: any): void {
event.preventDefault();
const element: HTMLElement = document.getElementById(
'input-for-file'
) as HTMLElement;
element.click();
}
fetchAndEmitFile(event: any) {
this.selectedFile.emit(event.target.files[0]);
}
}

16
frontend/src/app/upload/send-data.service.spec.ts
View File

@ -1,16 +0,0 @@
import { TestBed } from '@angular/core/testing';
import { SendDataService } from './send-data.service';
describe('SendDataService', () => {
let service: SendDataService;
beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(SendDataService);
});
it('should be created', () => {
expect(service).toBeTruthy();
});
});

23
frontend/src/app/upload/send-data.service.ts
View File

@ -1,23 +0,0 @@
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } 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();
formData.append('file', file, file.name);
const requestOptions = {
responseType: 'text' as 'json',
};
return this.http.post<File>(
'http://127.0.0.1:8000/prototype/form/',
formData,
requestOptions
);
}
}

115
frontend/src/app/upload/upload.component.html
View File

@ -1,115 +0,0 @@
<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"
size="large"
nbButton
(click)="scrollTo(xmltutorial)"
>
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>
<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>

64
frontend/src/app/upload/upload.component.scss
View File

@ -1,64 +0,0 @@
.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;
}
}

31
frontend/src/app/upload/upload.component.ts
View File

@ -1,31 +0,0 @@
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
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, private router: Router) {}
ngOnInit(): void {}
scrollTo(el: HTMLElement) {
el.scrollIntoView({ behavior: 'smooth' });
}
parseFile(event: any) {
this.file = event;
}
sendFile(event: any) {
this.sendService.postFile(this.file).subscribe((response: any) => {
this.router.navigate(['/view'], { state: { data: response } });
});
}
}

29
frontend/src/app/upload/upload.module.ts
View File

@ -1,29 +0,0 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import {
NbButtonModule,
NbCardModule,
NbLayoutModule,
NbIconModule,
NbStepperModule,
} from '@nebular/theme';
import { OpenFileButtonComponent } from './open-file-button/open-file-button.component';
import { UploadComponent } from './upload.component';
import { SendDataService } from './send-data.service';
@NgModule({
declarations: [OpenFileButtonComponent, UploadComponent],
imports: [
CommonModule,
HttpClientModule,
NbLayoutModule,
NbButtonModule,
NbCardModule,
NbIconModule,
NbStepperModule,
],
exports: [UploadComponent],
providers: [SendDataService],
})
export class UploadModule {}