From bcd4852ea7964e15f4ad7d0061522da42d866d37 Mon Sep 17 00:00:00 2001 From: Danijel Anđelković Date: Tue, 19 Apr 2022 02:28:18 +0200 Subject: Dodao komponentu za prikaz dataseta sa tabelama. Promenio scrollbar i home stranicu. Zapoceo trening stranicu. --- .../carousel-vertical.component.css | 3 + .../carousel-vertical.component.html | 12 ++++ .../carousel-vertical.component.spec.ts | 25 +++++++++ .../carousel-vertical.component.ts | 65 ++++++++++++++++++++++ .../src/app/_elements/graph/graph.component.html | 2 +- .../src/app/_elements/navbar/navbar.component.html | 30 ++++------ .../notifications/notifications.component.ts | 1 + .../app/_elements/playlist/playlist.component.css | 57 +++++++++++++++++++ .../app/_elements/playlist/playlist.component.html | 19 +++++++ .../_elements/playlist/playlist.component.spec.ts | 25 +++++++++ .../app/_elements/playlist/playlist.component.ts | 49 ++++++++++++++++ .../select-item-list.component.css | 0 .../select-item-list.component.html | 1 + .../select-item-list.component.spec.ts | 25 +++++++++ .../select-item-list/select-item-list.component.ts | 15 +++++ 15 files changed, 308 insertions(+), 21 deletions(-) create mode 100644 frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.css create mode 100644 frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.html create mode 100644 frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.spec.ts create mode 100644 frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.ts create mode 100644 frontend/src/app/_elements/playlist/playlist.component.css create mode 100644 frontend/src/app/_elements/playlist/playlist.component.html create mode 100644 frontend/src/app/_elements/playlist/playlist.component.spec.ts create mode 100644 frontend/src/app/_elements/playlist/playlist.component.ts create mode 100644 frontend/src/app/_elements/select-item-list/select-item-list.component.css create mode 100644 frontend/src/app/_elements/select-item-list/select-item-list.component.html create mode 100644 frontend/src/app/_elements/select-item-list/select-item-list.component.spec.ts create mode 100644 frontend/src/app/_elements/select-item-list/select-item-list.component.ts (limited to 'frontend/src/app/_elements') diff --git a/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.css b/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.css new file mode 100644 index 00000000..3d4a2432 --- /dev/null +++ b/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.css @@ -0,0 +1,3 @@ +.carousel { + overscroll-behavior: contain; +} \ No newline at end of file diff --git a/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.html b/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.html new file mode 100644 index 00000000..f52aee12 --- /dev/null +++ b/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.html @@ -0,0 +1,12 @@ +

+ {{scroll}} +

+
+
+
+ +

{{item.name}}

+ +
+
+
\ No newline at end of file diff --git a/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.spec.ts b/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.spec.ts new file mode 100644 index 00000000..0c736e90 --- /dev/null +++ b/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CarouselVerticalComponent } from './carousel-vertical.component'; + +describe('CarouselVerticalComponent', () => { + let component: CarouselVerticalComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ CarouselVerticalComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(CarouselVerticalComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.ts b/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.ts new file mode 100644 index 00000000..d8849ea6 --- /dev/null +++ b/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.ts @@ -0,0 +1,65 @@ +import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core'; + +@Component({ + selector: 'app-carousel-vertical', + templateUrl: './carousel-vertical.component.html', + styleUrls: ['./carousel-vertical.component.css'] +}) +export class CarouselVerticalComponent implements OnInit, AfterViewInit { + + @ViewChild('wrapper') wrapper!: ElementRef; + + @Input() items!: any[]; + + itemsToShow: any[] = []; + + @Input() type: string = "Object"; + + scroll = 0; + height = 9; //rem + + currentIndex = 0; + + @Input() shownElements: number = 5; + + constructor() { + } + + ngOnInit(): void { + this.itemsToShow = [...this.items.slice(0, this.shownElements)]; + console.log('0', this.itemsToShow); + } + + ngAfterViewInit(): void { + const container = this.wrapper.nativeElement + + container.addEventListener('scroll', (event: Event) => { + this.scroll = (container.scrollTop / (container.scrollHeight - container.clientHeight)); + if (this.scroll == 1.0) { + //console.log('removed', this.itemsToShow.splice(0, 1)[0].name); + const itemToAdd = this.items[(this.currentIndex + this.shownElements) % (this.items.length - 1)]; + this.itemsToShow.push(itemToAdd); + //console.log('added', itemToAdd.name); + this.currentIndex = (this.currentIndex + 1); + container.scrollTop = (container.scrollHeight - container.clientHeight) / 2; + } + }); + } + + clickItem(index: number) { + } + + calcVisibility(i: number) { + //return ((Math.sin((((i) / this.shownElements) - this.scroll) * Math.PI) + 1) / 2) + const iPercent = (i + 1 - this.scroll) / this.shownElements; + return iPercent; + } + + calcStyle(i: number) { + const a = this.calcVisibility(i) + const v = (Math.sin(a * Math.PI) + 1) / 2; + return `transform: translateY(${v * 100}%) scale(${v}) perspective(${v * 200}em) rotateX(${(1 - a) * 180 - 90}deg); + opacity: ${v}; + height: ${this.height}rem;`; + } +} diff --git a/frontend/src/app/_elements/graph/graph.component.html b/frontend/src/app/_elements/graph/graph.component.html index 1c21fb6c..92e9df38 100644 --- a/frontend/src/app/_elements/graph/graph.component.html +++ b/frontend/src/app/_elements/graph/graph.component.html @@ -1,3 +1,3 @@
- +
\ No newline at end of file diff --git a/frontend/src/app/_elements/navbar/navbar.component.html b/frontend/src/app/_elements/navbar/navbar.component.html index 7d0c4cd8..41105405 100644 --- a/frontend/src/app/_elements/navbar/navbar.component.html +++ b/frontend/src/app/_elements/navbar/navbar.component.html @@ -2,32 +2,24 @@
- +
- -
- -
diff --git a/frontend/src/app/_elements/notifications/notifications.component.ts b/frontend/src/app/_elements/notifications/notifications.component.ts index 9b460240..d64530b9 100644 --- a/frontend/src/app/_elements/notifications/notifications.component.ts +++ b/frontend/src/app/_elements/notifications/notifications.component.ts @@ -25,6 +25,7 @@ export class NotificationsComponent implements OnInit { const existingNotification = this.notifications.find(x => x.id === mId) const progress = ((currentEpoch + 1) / totalEpochs); console.log("Ukupno epoha", totalEpochs, "Trenutna epoha:", currentEpoch); + console.log("stat:", stat); if (!existingNotification) this.notifications.push(new Notification(`Treniranje modela: ${mName}`, mId, progress, true)); else { diff --git a/frontend/src/app/_elements/playlist/playlist.component.css b/frontend/src/app/_elements/playlist/playlist.component.css new file mode 100644 index 00000000..7ce320d9 --- /dev/null +++ b/frontend/src/app/_elements/playlist/playlist.component.css @@ -0,0 +1,57 @@ +.ns-wrapper { + width: 100%; + max-width: 800px; + max-height: 600px; + height: 100%; + transform-style: preserve-3d; + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; +} + +.ns-cards { + position: relative; + width: 300%; + height: 36rem; + margin-bottom: 20px; +} + +.ns-card { + position: absolute; + width: 60%; + height: 100%; + left: 0; + right: 0; + margin: auto; + transition: transform 0.4s ease; + cursor: pointer; +} + +input[type=radio] { + display: none; +} + +#item-1:checked~.ns-cards #view-item-3, +#item-2:checked~.ns-cards #view-item-1, +#item-3:checked~.ns-cards #view-item-2 { + transform: translatex(-40%) scale(0.8); + opacity: 0.4; + z-index: 0; +} + +#item-1:checked~.ns-cards #view-item-2, +#item-2:checked~.ns-cards #view-item-3, +#item-3:checked~.ns-cards #view-item-1 { + transform: translatex(40%) scale(0.8); + opacity: 0.4; + z-index: 0; +} + +#item-1:checked~.ns-cards #view-item-1, +#item-2:checked~.ns-cards #view-item-2, +#item-3:checked~.ns-cards #view-item-3 { + transform: translatex(0) scale(1); + opacity: 1; + z-index: 1; +} \ No newline at end of file diff --git a/frontend/src/app/_elements/playlist/playlist.component.html b/frontend/src/app/_elements/playlist/playlist.component.html new file mode 100644 index 00000000..fdb426ed --- /dev/null +++ b/frontend/src/app/_elements/playlist/playlist.component.html @@ -0,0 +1,19 @@ +
+ + + +
+ + + +
+
+ +
+
\ No newline at end of file diff --git a/frontend/src/app/_elements/playlist/playlist.component.spec.ts b/frontend/src/app/_elements/playlist/playlist.component.spec.ts new file mode 100644 index 00000000..0afe8041 --- /dev/null +++ b/frontend/src/app/_elements/playlist/playlist.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PlaylistComponent } from './playlist.component'; + +describe('PlaylistComponent', () => { + let component: PlaylistComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ PlaylistComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(PlaylistComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_elements/playlist/playlist.component.ts b/frontend/src/app/_elements/playlist/playlist.component.ts new file mode 100644 index 00000000..74527b39 --- /dev/null +++ b/frontend/src/app/_elements/playlist/playlist.component.ts @@ -0,0 +1,49 @@ +import { Component, Input, OnInit } from '@angular/core'; +import Dataset from 'src/app/_data/Dataset'; +import { TableData } from 'src/app/_elements/datatable/datatable.component'; +import { CsvParseService } from 'src/app/_services/csv-parse.service'; +import { DatasetsService } from 'src/app/_services/datasets.service'; + +@Component({ + selector: 'app-playlist', + templateUrl: './playlist.component.html', + styleUrls: ['./playlist.component.css'] +}) +export class PlaylistComponent implements OnInit { + + selectedId: string = "0"; + + @Input() datasets!: Dataset[]; + + tableDatas?: TableData[]; + + constructor(private datasetService: DatasetsService, private csv: CsvParseService) { + + } + + getIndex(str: string) { + return parseInt(str); + } + + ngOnInit(): void { + this.tableDatas = []; + + this.datasets.forEach((dataset, index) => { + if (index < 3) { + this.datasetService.getDatasetFile(dataset.fileId).subscribe((file: string | undefined) => { + if (file) { + const tableData = new TableData(); + tableData.hasInput = true; + tableData.loaded = true; + tableData.numRows = dataset.rowCount; + tableData.numCols = dataset.columnInfo.length; + tableData.data = this.csv.csvToArray(file, (dataset.delimiter == "razmak") ? " " : (dataset.delimiter == "") ? "," : dataset.delimiter); + this.tableDatas!.push(tableData); + } + }); + } + }); + + console.log(this.tableDatas); + } +} diff --git a/frontend/src/app/_elements/select-item-list/select-item-list.component.css b/frontend/src/app/_elements/select-item-list/select-item-list.component.css new file mode 100644 index 00000000..e69de29b diff --git a/frontend/src/app/_elements/select-item-list/select-item-list.component.html b/frontend/src/app/_elements/select-item-list/select-item-list.component.html new file mode 100644 index 00000000..b92b7adb --- /dev/null +++ b/frontend/src/app/_elements/select-item-list/select-item-list.component.html @@ -0,0 +1 @@ +

select-item-list works!

diff --git a/frontend/src/app/_elements/select-item-list/select-item-list.component.spec.ts b/frontend/src/app/_elements/select-item-list/select-item-list.component.spec.ts new file mode 100644 index 00000000..0abc7ab5 --- /dev/null +++ b/frontend/src/app/_elements/select-item-list/select-item-list.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SelectItemListComponent } from './select-item-list.component'; + +describe('SelectItemListComponent', () => { + let component: SelectItemListComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ SelectItemListComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(SelectItemListComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_elements/select-item-list/select-item-list.component.ts b/frontend/src/app/_elements/select-item-list/select-item-list.component.ts new file mode 100644 index 00000000..f6aae7a0 --- /dev/null +++ b/frontend/src/app/_elements/select-item-list/select-item-list.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-select-item-list', + templateUrl: './select-item-list.component.html', + styleUrls: ['./select-item-list.component.css'] +}) +export class SelectItemListComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} -- cgit v1.2.3