diff options
Diffstat (limited to 'frontend/src/app/_pages')
8 files changed, 185 insertions, 61 deletions
diff --git a/frontend/src/app/_pages/experiment/experiment.component.css b/frontend/src/app/_pages/experiment/experiment.component.css index 34e412ef..2fde8e7f 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.css +++ b/frontend/src/app/_pages/experiment/experiment.component.css @@ -1,37 +1,49 @@ -ul{ +ul { list-style: none; } -.navmenu{ - position: absolute; - background-color: var(--ns-bg-dark-50); - height: 90%; - width: 250px; + +.holder { + display: flex; + flex-direction: row; + align-items: stretch; } -.navmenuwrapper{ - position: relative; - top:40%; - transform: translateY(-50%); + +.sidenav { + width: 250px; + background-color: var(--ns-bg-dark-50); } +@media only screen and (max-width: 400px) { + .sidenav { + width: 100%; + background-color: var(--ns-bg-dark-100); + } + .holder { + flex-direction: column; + } +} -mat-stepper{ +mat-stepper { background-color: transparent; } -::ng-deep .mat-step-header .mat-step-icon .mat-step-content{ - background-color: white; - color:var(--ns-primary); - } -::ng-deep .mat-step-header .mat-step-icon{ - color:white; -} -::ng-deep .mat-step-header .mat-step-icon-state-done{ - background: var(--ns-primary); - color:var(--ns-primary) +.label { + color: white; } -::ng-deep .mat-step-header .mat-step-icon-state-done .label{ - color:var(--ns-primary) + +.steps-container { + position: relative; + display: flex; + flex-direction: column; + width: 100%; + overflow-y: auto; } -.label{ - color: white; + +.step-content { + position: relative; + width: 100%; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; }
\ No newline at end of file diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html index e0746d4a..c988a50a 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.html +++ b/frontend/src/app/_pages/experiment/experiment.component.html @@ -1,37 +1,35 @@ -<app-folder></app-folder> -<div class="wrapper"> - - <nav class="navmenu"> - <div class="navmenuwrapper text-offwhite"> - <mat-stepper orientation="vertical" (selectionChange)="test($event)"> +<div class="container-fluid p-0 text-offwhite holder" style="height: calc(100vh - 64px);"> + <div class="d-flex flex-colum align-items-center sidenav"> + <mat-stepper orientation="vertical" (selectionChange)="changePage($event)"> <mat-step> - <ng-template matStepLabel><span class="label">Izvor podataka</span></ng-template> - <ng-template matStepContent> - <p>Izaberite vas izvor podataka</p> - </ng-template> + <!--editable="false"--> + <ng-template matStepLabel><span class="label">Izvor podataka</span></ng-template> + <ng-template matStepContent> + <p>Izaberite vas izvor podataka</p> + </ng-template> </mat-step> <mat-step> - <ng-template matStepLabel> <span class="label">Odabir kolona</span></ng-template> - <ng-template matStepContent> - <p>Pripremite podatke i izaberite izlazne kolone</p> - </ng-template> + <ng-template matStepLabel> <span class="label">Odabir kolona</span></ng-template> + <ng-template matStepContent> + <p>Pripremite podatke i izaberite izlazne kolone</p> + </ng-template> </mat-step> - <mat-step > - <ng-template matStepLabel><span class="label">Treniranje</span></ng-template> - <p>Odaberite parametre i trenirajte model</p> + <mat-step> + <ng-template matStepLabel><span class="label">Treniranje</span></ng-template> + <p>Odaberite parametre i trenirajte model</p> </mat-step> - </mat-stepper> + </mat-stepper> + </div> + <div #stepsContainer class="steps-container"> + <div #steps id="step_1" class="step-content"> + <app-folder (okPressed)="goToPage(1)"></app-folder> + </div> + <div #steps id="step_2" class="step-content"> + <div class="text-offwhite" style="height: 100px;width: 100px;background-color: red;top:50%;left: 50%;position: absolute;">Insert odabir kolona</div> + </div> + <div #steps id="step_3" class="step-content"> + + <app-form-model></app-form-model> </div> - - - - </nav> - - - - - -</div> - - - + </div> +</div>
\ No newline at end of file diff --git a/frontend/src/app/_pages/experiment/experiment.component.ts b/frontend/src/app/_pages/experiment/experiment.component.ts index f06a7c48..ad0f1df2 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.ts +++ b/frontend/src/app/_pages/experiment/experiment.component.ts @@ -1,19 +1,89 @@ -import { Component, OnInit } from '@angular/core'; +import { AfterViewInit, Component, ElementRef, ViewChild, ViewChildren } from '@angular/core'; import { StepperSelectionEvent } from '@angular/cdk/stepper'; +import { MatStepper } from '@angular/material/stepper'; +import Shared from 'src/app/Shared'; + @Component({ selector: 'app-experiment', templateUrl: './experiment.component.html', styleUrls: ['./experiment.component.css'] }) -export class ExperimentComponent implements OnInit { +export class ExperimentComponent implements AfterViewInit { + + @ViewChild(MatStepper) stepper!: MatStepper; + @ViewChild('stepsContainer') stepsContainer!: ElementRef; + @ViewChildren('steps') steps!: ElementRef[]; + + event: number = 0; constructor() { } - ngOnInit(): void { + stepHeight = this.calcStepHeight(); + + calcStepHeight() { + return window.innerHeight - 64; + } + + ngAfterViewInit(): void { + window.addEventListener('resize', () => { + this.updatePageHeight(); + }) + this.updatePageHeight(); + + setInterval(() => { + this.updatePageIfScrolled(); + }, 100); + + this.stepsContainer.nativeElement.addEventListener('scroll', (event: Event) => { + Shared.emitBGScrollEvent(this.stepsContainer.nativeElement.scrollTop); + }); + } + + updatePageIfScrolled() { + if (this.scrolling) return; + const currentPage = Math.round(this.stepsContainer.nativeElement.scrollTop / this.stepHeight) + this.stepper.selectedIndex = currentPage; + } + + updatePageHeight() { + this.stepHeight = this.calcStepHeight(); + const stepHeight = `${this.stepHeight}px`; + this.stepsContainer.nativeElement.style.minHeight = stepHeight; + this.steps.forEach(step => { + step.nativeElement.style.minHeight = stepHeight; + }) + } + + changePage(event: StepperSelectionEvent) { + this.updatePage(<number>event.selectedIndex) } - test(event:StepperSelectionEvent){ - console.log(event); + goToPage(pageNum: number) { + this.stepper.selectedIndex = pageNum; + this.updatePage(pageNum); } + scrollTimeout: any; + + updatePage(pageNum: number) { + this.scrolling = true; + this.event = pageNum; + let scrollAmount = 0; + this.steps.forEach((step, index) => { + if (index == pageNum) { + scrollAmount = step.nativeElement.offsetTop; + } + }) + clearTimeout(this.scrollTimeout); + this.scrollTimeout = setTimeout(() => { + this.scrolling = false; + }, 800); + this.stepsContainer.nativeElement.scroll({ + top: scrollAmount, + behavior: 'smooth' //auto, smooth, initial, inherit + }); + } + + scrolling: boolean = false; + } diff --git a/frontend/src/app/_pages/home/home.component.html b/frontend/src/app/_pages/home/home.component.html index f73e7571..e682d8dd 100644 --- a/frontend/src/app/_pages/home/home.component.html +++ b/frontend/src/app/_pages/home/home.component.html @@ -16,4 +16,5 @@ </div> + </div>
\ No newline at end of file diff --git a/frontend/src/app/_pages/test/test.component.css b/frontend/src/app/_pages/test/test.component.css new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/frontend/src/app/_pages/test/test.component.css diff --git a/frontend/src/app/_pages/test/test.component.html b/frontend/src/app/_pages/test/test.component.html new file mode 100644 index 00000000..625739f8 --- /dev/null +++ b/frontend/src/app/_pages/test/test.component.html @@ -0,0 +1,3 @@ +<app-pie-chart></app-pie-chart> +<app-doughnut-chart></app-doughnut-chart> +<app-barchart></app-barchart>
\ No newline at end of file diff --git a/frontend/src/app/_pages/test/test.component.spec.ts b/frontend/src/app/_pages/test/test.component.spec.ts new file mode 100644 index 00000000..e0f9bcc9 --- /dev/null +++ b/frontend/src/app/_pages/test/test.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TestComponent } from './test.component'; + +describe('TestComponent', () => { + let component: TestComponent; + let fixture: ComponentFixture<TestComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ TestComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(TestComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_pages/test/test.component.ts b/frontend/src/app/_pages/test/test.component.ts new file mode 100644 index 00000000..b3c0d8cf --- /dev/null +++ b/frontend/src/app/_pages/test/test.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-test', + templateUrl: './test.component.html', + styleUrls: ['./test.component.css'] +}) +export class TestComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} |