diff options
Diffstat (limited to 'frontend/src/app/_pages')
40 files changed, 461 insertions, 666 deletions
diff --git a/frontend/src/app/_pages/browse-datasets/browse-datasets.component.css b/frontend/src/app/_pages/archive/archive.component.css index e69de29b..e69de29b 100644 --- a/frontend/src/app/_pages/browse-datasets/browse-datasets.component.css +++ b/frontend/src/app/_pages/archive/archive.component.css diff --git a/frontend/src/app/_pages/archive/archive.component.html b/frontend/src/app/_pages/archive/archive.component.html new file mode 100644 index 00000000..fc3c4763 --- /dev/null +++ b/frontend/src/app/_pages/archive/archive.component.html @@ -0,0 +1,49 @@ +<div class="d-flex flex-column align-items-center my-5"> + <app-folder></app-folder> + + <!--<div class="my-5" style="height: fit-content;"> + <app-playlist [datasets]="publicDatasets"></app-playlist> + </div>--> + + <!--<div id="cards" class="row align-items-view align-items-stretch justify-content-center"> + <div class="card shadowed bg-light text-light col-3 m-3" style="width: 18rem;"> + <div class="card-body"> + <mat-icon width="48px" height="48px" style="font-size: 48px; margin-left: 50%; transform: translateX(-100%);">model_training + </mat-icon> + <h3 class="card-title my-2">Moji eksperimenti</h3> + <p class="card-text"> + <a class="stretched-link" routerLink="my-models">Pregledajte</a> vaše modele, menjajte ih, napravite nove modele, ili ih obrišite. + </p> + </div> + </div> + <div class="card shadowed bg-light text-light col-3 m-3" style="width: 18rem;"> + <div class="card-body"> + <mat-icon width="48px" height="48px" style="font-size: 48px; margin-left: 50%; transform: translateX(-100%);">storage</mat-icon> + <h3 class="card-title my-2">Izvori podataka</h3> + <p class="card-text"> + <a class="stretched-link" routerLink="my-datasets">Preuredite</a> vaše izvore podataka, ili dodajte novi. + </p> + </div> + </div> + <div class="card shadowed bg-light text-light col-3 m-3" style="width: 18rem;"> + <div class="card-body"> + <mat-icon width="48px" height="48px" style="font-size: 48px; margin-left: 50%; transform: translateX(-100%);">model_training + </mat-icon> + <h3 class="card-title my-2">Modeli</h3> + <p class="card-text"> + <a class="stretched-link" routerLink="my-models">Pregledajte</a> vaše modele, menjajte ih, napravite nove modele, ili ih obrišite. + </p> + </div> + </div> + <div class="card shadowed bg-light text-light col-3 m-3" style="width: 18rem;"> + <div class="card-body"> + <mat-icon width="48px" height="48px" style="font-size: 48px; margin-left: 50%; transform: translateX(-100%);">batch_prediction + </mat-icon> + <h3 class="card-title my-2">Rezultati treniranja</h3> + <p class="card-text"> + <a class="stretched-link" routerLink="my-predictors">Pregledajte</a> sve vaše trenirane modele, koristite ih da predvidite vrednosti za red ili skup podataka, ili ih obrišite. + </p> + </div> + </div> + </div>--> +</div>
\ No newline at end of file diff --git a/frontend/src/app/_pages/predict/predict.component.spec.ts b/frontend/src/app/_pages/archive/archive.component.spec.ts index 65871ecc..41fc8e77 100644 --- a/frontend/src/app/_pages/predict/predict.component.spec.ts +++ b/frontend/src/app/_pages/archive/archive.component.spec.ts @@ -1,20 +1,20 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { PredictComponent } from './predict.component'; +import { ArchiveComponent } from './archive.component'; -describe('PredictComponent', () => { - let component: PredictComponent; - let fixture: ComponentFixture<PredictComponent>; +describe('ArchiveComponent', () => { + let component: ArchiveComponent; + let fixture: ComponentFixture<ArchiveComponent>; beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ PredictComponent ] + declarations: [ ArchiveComponent ] }) .compileComponents(); }); beforeEach(() => { - fixture = TestBed.createComponent(PredictComponent); + fixture = TestBed.createComponent(ArchiveComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/frontend/src/app/_pages/archive/archive.component.ts b/frontend/src/app/_pages/archive/archive.component.ts new file mode 100644 index 00000000..47f96218 --- /dev/null +++ b/frontend/src/app/_pages/archive/archive.component.ts @@ -0,0 +1,25 @@ +import { Component, OnInit } from '@angular/core'; +import Dataset from 'src/app/_data/Dataset'; +import { DatasetsService } from 'src/app/_services/datasets.service'; + +@Component({ + selector: 'app-archive', + templateUrl: './archive.component.html', + styleUrls: ['./archive.component.css'] +}) +export class ArchiveComponent implements OnInit { + + publicDatasets: Dataset[] = []; + + constructor(private datasetsService: DatasetsService) { } + + ngOnInit(): void { + this.datasetsService.getPublicDatasets().subscribe((datasets) => { + this.publicDatasets = datasets; + this.publicDatasets.forEach((element, index) => { + this.publicDatasets[index] = (<Dataset>element); + }) + }); + } + +} diff --git a/frontend/src/app/_pages/browse-datasets/browse-datasets.component.html b/frontend/src/app/_pages/browse-datasets/browse-datasets.component.html deleted file mode 100644 index fa38a1bc..00000000 --- a/frontend/src/app/_pages/browse-datasets/browse-datasets.component.html +++ /dev/null @@ -1 +0,0 @@ -<p>browse-datasets works!</p> diff --git a/frontend/src/app/_pages/browse-datasets/browse-datasets.component.spec.ts b/frontend/src/app/_pages/browse-datasets/browse-datasets.component.spec.ts deleted file mode 100644 index fda74dbe..00000000 --- a/frontend/src/app/_pages/browse-datasets/browse-datasets.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { BrowseDatasetsComponent } from './browse-datasets.component'; - -describe('BrowseDatasetsComponent', () => { - let component: BrowseDatasetsComponent; - let fixture: ComponentFixture<BrowseDatasetsComponent>; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ BrowseDatasetsComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(BrowseDatasetsComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/frontend/src/app/_pages/browse-datasets/browse-datasets.component.ts b/frontend/src/app/_pages/browse-datasets/browse-datasets.component.ts deleted file mode 100644 index dba6c25e..00000000 --- a/frontend/src/app/_pages/browse-datasets/browse-datasets.component.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -@Component({ - selector: 'app-browse-datasets', - templateUrl: './browse-datasets.component.html', - styleUrls: ['./browse-datasets.component.css'] -}) -export class BrowseDatasetsComponent implements OnInit { - - constructor() { } - - ngOnInit(): void { - } - -} diff --git a/frontend/src/app/_pages/browse-predictors/browse-predictors.component.css b/frontend/src/app/_pages/browse-predictors/browse-predictors.component.css deleted file mode 100644 index b4ac9669..00000000 --- a/frontend/src/app/_pages/browse-predictors/browse-predictors.component.css +++ /dev/null @@ -1,7 +0,0 @@ -#container { - border-radius: 8px; -} - -#wrapper { - color: #003459; -}
\ No newline at end of file diff --git a/frontend/src/app/_pages/browse-predictors/browse-predictors.component.html b/frontend/src/app/_pages/browse-predictors/browse-predictors.component.html deleted file mode 100644 index 27e06884..00000000 --- a/frontend/src/app/_pages/browse-predictors/browse-predictors.component.html +++ /dev/null @@ -1,40 +0,0 @@ - -<div id="wrapper"> - - <div id="container" class="container p-5" style="background-color: white; min-height: 100%;"> - <div class="row mt-3 mb-2 d-flex justify-content-center"> - - <div class="col-sm-6" style="margin-bottom: 10px;"> - <p class="glyphicon glyphicon-search"></p> - <input type="text" class="form-control" placeholder="Pretraga" [(ngModel)]="term"> - - </div> - - <div class="row"> - <div class="col-sm-4" style="margin-bottom: 10px;" *ngFor="let predictor of publicPredictors | filter:term"> - <div class="card h-100"> - <div class="card-body"> - <h3 class="card-title"><b>{{predictor.name}}</b></h3> - <p class="card-text">{{predictor.description}}</p> - <a class="btn btn-primary" (click)="openPredictor(predictor._id)">Iskoristi</a> - </div> - <div class="card-footer text-muted"> - Kreirao: {{predictor.username}} <br> - Datum kreiranja: {{predictor.dateCreated |date}} - </div> - </div> - </div> - - - </div> - <div class="text-center"*ngIf="( publicPredictors != undefined && publicPredictors|filter:term).length === 0"> - <h2>Nema rezultata</h2> - </div> - </div> - - </div> - - - - -</div>
\ No newline at end of file diff --git a/frontend/src/app/_pages/browse-predictors/browse-predictors.component.spec.ts b/frontend/src/app/_pages/browse-predictors/browse-predictors.component.spec.ts deleted file mode 100644 index 6d13fedf..00000000 --- a/frontend/src/app/_pages/browse-predictors/browse-predictors.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { BrowsePredictorsComponent } from './browse-predictors.component'; - -describe('BrowsePredictorsComponent', () => { - let component: BrowsePredictorsComponent; - let fixture: ComponentFixture<BrowsePredictorsComponent>; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ BrowsePredictorsComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(BrowsePredictorsComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/frontend/src/app/_pages/browse-predictors/browse-predictors.component.ts b/frontend/src/app/_pages/browse-predictors/browse-predictors.component.ts deleted file mode 100644 index 891b3cab..00000000 --- a/frontend/src/app/_pages/browse-predictors/browse-predictors.component.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { PredictorsService } from 'src/app/_services/predictors.service'; -import Predictor from 'src/app/_data/Predictor'; -import {Router} from '@angular/router' -@Component({ - selector: 'app-browse-predictors', - templateUrl: './browse-predictors.component.html', - styleUrls: ['./browse-predictors.component.css'] -}) -export class BrowsePredictorsComponent implements OnInit { - - publicPredictors? :Predictor[]; - term: string=""; - constructor(private predictors: PredictorsService,private router:Router) { - this.predictors.getPublicPredictors().subscribe((predictors) => { - this.publicPredictors = predictors; - }); - } - - ngOnInit(): void { - } - openPredictor(id:string):void{ - this.router.navigate(['predict/'+id]); - }; - -} diff --git a/frontend/src/app/_pages/experiment/experiment.component.css b/frontend/src/app/_pages/experiment/experiment.component.css new file mode 100644 index 00000000..aca0562a --- /dev/null +++ b/frontend/src/app/_pages/experiment/experiment.component.css @@ -0,0 +1,55 @@ +ul { + list-style: none; +} + +.holder { + display: flex; + flex-direction: row; + align-items: stretch; +} + +.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 { + background-color: transparent; +} + +.label { + color: white; +} + +.steps-container { + position: relative; + display: flex; + flex-direction: column; + width: 100%; + overflow-y: auto; +} + +.step-content { + position: relative; + width: 100%; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; +} + +.step-content-inside { + width: 90%; + height: 90%; + overflow-y: auto; +}
\ 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 new file mode 100644 index 00000000..08d709b2 --- /dev/null +++ b/frontend/src/app/_pages/experiment/experiment.component.html @@ -0,0 +1,40 @@ +<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> + <!--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> + </mat-step> + <mat-step> + <ng-template matStepLabel><span class="label">Treniranje</span></ng-template> + <p>Odaberite parametre i trenirajte model</p> + </mat-step> + </mat-stepper> + </div> + <div #stepsContainer class="steps-container"> + <div #steps id="step_1" class="step-content"> + <div class="step-content-inside"> + <app-folder [type]="FolderType.Dataset" [tabsToShow]="[TabType.MyDatasets, TabType.PublicDatasets, TabType.File]" (okPressed)="goToPage(1)"></app-folder> + </div> + </div> + <div #steps id="step_2" class="step-content"> + <div class="step-content-inside"> + <app-column-table (okPressed)="goToPage(2)"></app-column-table> + </div> + </div> + <div #steps id="step_3" class="step-content"> + <div class="step-content-inside"> + <app-folder [type]="FolderType.Model" [tabsToShow]="[TabType.MyModels, TabType.PublicModels, TabType.File]" (okPressed)="goToPage(0)"></app-folder> + </div> + </div> + </div> +</div>
\ No newline at end of file diff --git a/frontend/src/app/_pages/my-datasets/my-datasets.component.spec.ts b/frontend/src/app/_pages/experiment/experiment.component.spec.ts index fc1fc3f3..fd2bbd30 100644 --- a/frontend/src/app/_pages/my-datasets/my-datasets.component.spec.ts +++ b/frontend/src/app/_pages/experiment/experiment.component.spec.ts @@ -1,20 +1,20 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { MyDatasetsComponent } from './my-datasets.component'; +import { ExperimentComponent } from './experiment.component'; -describe('MyDatasetsComponent', () => { - let component: MyDatasetsComponent; - let fixture: ComponentFixture<MyDatasetsComponent>; +describe('ExperimentComponent', () => { + let component: ExperimentComponent; + let fixture: ComponentFixture<ExperimentComponent>; beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ MyDatasetsComponent ] + declarations: [ ExperimentComponent ] }) .compileComponents(); }); beforeEach(() => { - fixture = TestBed.createComponent(MyDatasetsComponent); + fixture = TestBed.createComponent(ExperimentComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/frontend/src/app/_pages/experiment/experiment.component.ts b/frontend/src/app/_pages/experiment/experiment.component.ts new file mode 100644 index 00000000..70f941b6 --- /dev/null +++ b/frontend/src/app/_pages/experiment/experiment.component.ts @@ -0,0 +1,95 @@ +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'; +import { FolderType } from 'src/app/_data/FolderFile'; +import { TabType } from 'src/app/_elements/folder/folder.component'; + +@Component({ + selector: 'app-experiment', + templateUrl: './experiment.component.html', + styleUrls: ['./experiment.component.css'] +}) +export class ExperimentComponent implements AfterViewInit { + + @ViewChild(MatStepper) stepper!: MatStepper; + @ViewChild('stepsContainer') stepsContainer!: ElementRef; + @ViewChildren('steps') steps!: ElementRef[]; + + event: number = 0; + + constructor() { } + + 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) + } + + 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; + + FolderType = FolderType; + + TabType = TabType; + +} diff --git a/frontend/src/app/_pages/filter-datasets/filter-datasets.component.html b/frontend/src/app/_pages/filter-datasets/filter-datasets.component.html deleted file mode 100644 index 84f5ebaf..00000000 --- a/frontend/src/app/_pages/filter-datasets/filter-datasets.component.html +++ /dev/null @@ -1,38 +0,0 @@ - -<div id="wrapper"> - - <div id="container" class="container p-5" style="background-color: white; min-height: 100%;"> - <div class="row mt-3 mb-2 d-flex justify-content-center"> - - <div class="col-sm-6" style="margin-bottom: 10px;"> - <input type="text" class="form-control" placeholder="Pretraga" [(ngModel)]="term"> - </div> - - <div class="row"> - <div class="col-sm-4" style="margin-bottom: 10px;" *ngFor="let dataset of publicDatasets | filter:term"> - <div class="card h-100"> - <div class="card-body"> - <h3 class="card-title"><b>{{dataset.name}}</b></h3> - <p class="card-text">{{dataset.description}}</p> - <a class="btn btn-primary" (click)="addDataset(dataset)">Dodaj dataset</a> - </div> - <div class="card-footer text-muted"> - Kreirao: {{dataset.username}} <br> - Datum kreiranja: {{dataset.dateCreated |date}} - </div> - </div> - </div> - - - </div> - <div class="text-center"*ngIf="( publicDatasets != undefined && publicDatasets|filter:term).length === 0"> - <h2>Nema rezultata</h2> - </div> - </div> - - </div> - - - - -</div> diff --git a/frontend/src/app/_pages/filter-datasets/filter-datasets.component.spec.ts b/frontend/src/app/_pages/filter-datasets/filter-datasets.component.spec.ts deleted file mode 100644 index 6ab894fd..00000000 --- a/frontend/src/app/_pages/filter-datasets/filter-datasets.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { FilterDatasetsComponent } from './filter-datasets.component'; - -describe('FilterDatasetsComponent', () => { - let component: FilterDatasetsComponent; - let fixture: ComponentFixture<FilterDatasetsComponent>; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ FilterDatasetsComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(FilterDatasetsComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/frontend/src/app/_pages/home/home.component.css b/frontend/src/app/_pages/home/home.component.css index e69de29b..22137c24 100644 --- a/frontend/src/app/_pages/home/home.component.css +++ b/frontend/src/app/_pages/home/home.component.css @@ -0,0 +1,20 @@ +.logo { + margin: 0 !important; +} + +#title { + color: var(--offwhite); +} + +h1 { + font-size: 64px !important; + font-weight: 900 !important; + margin-top: 1rem; + margin-bottom: 2.5rem; +} + +.card { + margin: 2.5rem !important; + padding: 3rem; + width: 26rem !important; +}
\ No newline at end of file diff --git a/frontend/src/app/_pages/home/home.component.html b/frontend/src/app/_pages/home/home.component.html index 08f95a69..508382da 100644 --- a/frontend/src/app/_pages/home/home.component.html +++ b/frontend/src/app/_pages/home/home.component.html @@ -1,56 +1,32 @@ -<div class="d-flex flex-column align-items-center bg-light"> - <img src="../../../assets/svg/logo.svg" class="bi me-2" width="256" height="256" role="img"> - <div *ngIf="shared.loggedIn" class="d-flex flex-column align-items-center"> - <h2 class="my-4">Započnite sa treniranjem!</h2> - <div id="cards" class="row align-items-stretch justify-content-center"> - <div class="card shadow col-3 m-1" style="width: 18rem;"> - <div class="card-body"> - <mat-icon width="48px" height="48px" - style="font-size: 48px; margin-left: 50%; transform: translateX(-100%);">storage</mat-icon> - <h3 class="card-title my-2">Moji izvori podataka</h3> - <p class="card-text"> - <a class="stretched-link" routerLink="my-datasets">Preuredite</a> vaše izvore - podataka, ili - dodajte novi. - </p> - </div> - </div> - <div class="card shadow col-3 m-1" style="width: 18rem;"> - <div class="card-body"> - <mat-icon width="48px" height="48px" - style="font-size: 48px; margin-left: 50%; transform: translateX(-100%);">model_training - </mat-icon> - <h3 class="card-title my-2">Moji modeli</h3> - <p class="card-text"> - <a class="stretched-link" routerLink="my-models">Pregledajte</a> vaše modele, menjajte ih, - napravite nove modele, ili - ih obrišite. - </p> - </div> +<div class="d-flex flex-column align-items-center"> + <div class="logo"> + <img src="../../../assets/images/logo.png" class="bi me-2" width="256" height="256" role="img"> + </div> + + <div id="title"> + <h1>Igr<span class="highlight">ann</span>onica</h1> + </div> + + <div id="cards" class="row align-items-view align-items-stretch justify-content-center"> + <div class="card shadowed bg-light text-light col-3 m-3" style="width: 18rem;"> + <div class="card-body"> + <mat-icon width="48px" height="48px" style="font-size: 48px; margin-left: 50%; transform: translateX(-100%);">model_training</mat-icon> + <h3 class="card-title my-2">Experimentiši</h3> + <p class="card-text"> + U tri koraka <a class="stretched-link" routerLink="experiment">napravite novu neuronsku mrežu</a>. Koristite postojeće izvore podataka, modele, itd. + </p> </div> - <div class="card shadow col-3 m-1" style="width: 18rem;"> - <div class="card-body"> - <mat-icon width="48px" height="48px" - style="font-size: 48px; margin-left: 50%; transform: translateX(-100%);">batch_prediction - </mat-icon> - <h3 class="card-title my-2">Rezultati treniranja</h3> - <p class="card-text"> - <a class="stretched-link" routerLink="my-predictors">Pregledajte</a> sve vaše trenirane - modele, - koristite ih da predvidite vrednosti za red ili skup podataka, ili ih obrišite. - </p> - </div> + </div> + <div class="card shadowed bg-light text-light col-3 m-3" style="width: 18rem;"> + <div class="card-body"> + <mat-icon width="48px" height="48px" style="font-size: 48px; margin-left: 50%; transform: translateX(-100%);">storage + </mat-icon> + <h3 class="card-title my-2">Arhiva</h3> + <p class="card-text"> + <a class="stretched-link" routerLink="archive">Upravljajte</a> izvorima podataka, eksperimentima, modelima, i rezultatima treniranja. Pogledajte podatke koje su podelili drugi korisnici. + </p> </div> </div> - </div> - <h2 class="my-4">Pogledajte javne izvore podataka!</h2> - <app-carousel [items]="publicDatasets" [type]="'Dataset'"> - </app-carousel> - <h3><a routerLink="browse-datasets">Pogledaj sve javne izvore podataka...</a></h3> - <h2 class="my-4">Iskoristite već trenirane modele!</h2> - <app-carousel [items]="publicPredictors" [type]="'Predictor'"> - </app-carousel> - <h3><a routerLink="browse-predictors">Pogledaj sve javne trenirane modele...</a></h3> </div>
\ No newline at end of file diff --git a/frontend/src/app/_pages/home/home.component.ts b/frontend/src/app/_pages/home/home.component.ts index 0575c4c0..28ba2cbb 100644 --- a/frontend/src/app/_pages/home/home.component.ts +++ b/frontend/src/app/_pages/home/home.component.ts @@ -1,7 +1,6 @@ import { Component, OnInit } from '@angular/core'; import Dataset from 'src/app/_data/Dataset'; import Predictor from 'src/app/_data/Predictor'; -import { ItemDatasetComponent } from 'src/app/_elements/item-dataset/item-dataset.component'; import shared from 'src/app/Shared'; import { DatasetsService } from 'src/app/_services/datasets.service'; import { PredictorsService } from 'src/app/_services/predictors.service'; @@ -14,7 +13,6 @@ import { PredictorsService } from 'src/app/_services/predictors.service'; export class HomeComponent implements OnInit { publicDatasets: Dataset[] = []; - publicPredictors: Predictor[] = []; shared = shared; @@ -25,9 +23,6 @@ export class HomeComponent implements OnInit { this.publicDatasets[index] = (<Dataset>element); }) }); - this.predictorsService.getPublicPredictors().subscribe((predictors) => { - this.publicPredictors = predictors; - }); } ngOnInit(): void { diff --git a/frontend/src/app/_pages/my-datasets/my-datasets.component.css b/frontend/src/app/_pages/my-datasets/my-datasets.component.css deleted file mode 100644 index 57889937..00000000 --- a/frontend/src/app/_pages/my-datasets/my-datasets.component.css +++ /dev/null @@ -1,8 +0,0 @@ -#header { - background-color: #003459; - padding-top: 20px; - padding-bottom: 15px; - text-align: center; - color: white; - border-radius: 5px; -}
\ No newline at end of file diff --git a/frontend/src/app/_pages/my-datasets/my-datasets.component.html b/frontend/src/app/_pages/my-datasets/my-datasets.component.html deleted file mode 100644 index 0c83dc85..00000000 --- a/frontend/src/app/_pages/my-datasets/my-datasets.component.html +++ /dev/null @@ -1,39 +0,0 @@ -<div id="header"> - <h1>Moji setovi podataka</h1> -</div> -<div id="wrapper"> - <div id="container" class="container p-5" style="background-color: rgba(255, 255, 255, 0.8); min-height: 100%;"> - <div class="row mt-3 mb-2 d-flex justify-content-center"> - - <div class="col-sm-6" style="margin-bottom: 10px;"> - </div> - - <div class="row"> - <div class="col-sm-4" style="margin-bottom: 10px;" *ngFor="let dataset of myDatasets"> - <app-item-dataset [dataset]="dataset"></app-item-dataset> - - <div class="panel-footer row"><!-- panel-footer --> - <div class="col-xs-6 text-center"> - <div> - <div> - <button (click)="deleteThisDataset(dataset)" mat-raised-button color="warn" style="min-width: 10rem;float: right" ><mat-icon>delete</mat-icon></button> - </div> - - </div> - </div> - </div><!-- end panel-footer --> - </div> - </div> - <div class="text-center" *ngIf="this.myDatasets.length == 0" > - <h2>Nema rezultata</h2> - </div> - </div> - - - </div> - - - - - - </div> diff --git a/frontend/src/app/_pages/my-datasets/my-datasets.component.ts b/frontend/src/app/_pages/my-datasets/my-datasets.component.ts deleted file mode 100644 index 8857e371..00000000 --- a/frontend/src/app/_pages/my-datasets/my-datasets.component.ts +++ /dev/null @@ -1,63 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import {Router} from '@angular/router'; -import { DatasetsService } from 'src/app/_services/datasets.service'; -import Dataset from 'src/app/_data/Dataset'; -import { JwtHelperService } from '@auth0/angular-jwt'; -import { CookieService } from 'ngx-cookie-service'; -import shared from 'src/app/Shared'; -import { share } from 'rxjs'; - -@Component({ - selector: 'app-my-datasets', - templateUrl: './my-datasets.component.html', - styleUrls: ['./my-datasets.component.css'] -}) -export class MyDatasetsComponent implements OnInit { - myDatasets: Dataset[] = []; - - constructor(private datasetsS : DatasetsService) { - - - - } - - ngOnInit(): void { - - this.datasetsS.getMyDatasets().subscribe((response) => { - this.myDatasets = response; - }, (error) => { - if (error.error == "Dataset with...") { - shared.openDialog("Greska", "Niste dobro uneli nesto"); - } - }); - } - -/* - editModel(): void{ - this.modelsS.editModel().subscribe(m => { - this.myModel = m; - - }) - } -*/ - -deleteThisDataset(dataset: Dataset): void{ - shared.openYesNoDialog('Brisanje seta podataka','Da li ste sigurni da želite da obrišete ovaj set podataka?',() => { - this.datasetsS.deleteDataset(dataset).subscribe((response) => { - this.getAllMyDatasets(); - }, (error) =>{ - if (error.error == "Dataset with name = {name} deleted") { - shared.openDialog("Greška","Greška pri brisanju dataseta!"); - } - }); - }); -} - - getAllMyDatasets(): void{ - this.datasetsS.getMyDatasets().subscribe(m => { - this.myDatasets = m; - }); - } - - -} diff --git a/frontend/src/app/_pages/my-models/my-models.component.css b/frontend/src/app/_pages/my-models/my-models.component.css deleted file mode 100644 index 19d29595..00000000 --- a/frontend/src/app/_pages/my-models/my-models.component.css +++ /dev/null @@ -1,12 +0,0 @@ -button{ - margin-left: 5%; - margin-right: 5%; -} -#header { - background-color: #003459; - padding-top: 20px; - padding-bottom: 15px; - text-align: center; - color: white; - border-radius: 5px; -}
\ No newline at end of file diff --git a/frontend/src/app/_pages/my-predictors/my-predictors.component.css b/frontend/src/app/_pages/my-predictors/my-predictors.component.css deleted file mode 100644 index ccb9fb7b..00000000 --- a/frontend/src/app/_pages/my-predictors/my-predictors.component.css +++ /dev/null @@ -1,13 +0,0 @@ -#header { - background-color: #003459; - padding-top: 20px; - padding-bottom: 15px; - text-align: center; - color: white; - border-radius: 5px; -} - -.row{ - margin-top: 10px; - margin-bottom: 30px; -}
\ No newline at end of file diff --git a/frontend/src/app/_pages/my-predictors/my-predictors.component.html b/frontend/src/app/_pages/my-predictors/my-predictors.component.html deleted file mode 100644 index 31fa786c..00000000 --- a/frontend/src/app/_pages/my-predictors/my-predictors.component.html +++ /dev/null @@ -1,23 +0,0 @@ -<div id="header"> - <h1>Trenirani modeli</h1> -</div> -<div id="wrapper"> -<div id="container" class="container p-5" style="background-color:rgba(255, 255, 255, 0.8); min-height: 100%;"> - <div class="row mt-3 mb-2 d-flex justify-content-center"> - - <div class="col-sm-6" style="margin-bottom: 10px;"> - </div> - <div class="row"> - <div class="col-sm-4" style="margin-bottom: 10px;" *ngFor="let predictor of predictors"> - <app-item-predictor [predictor]="predictor"></app-item-predictor> - <div> - <button (click)="deleteThisPredictor(predictor)" mat-raised-button color="warn" style="min-width: 10rem;float: right" ><mat-icon>delete</mat-icon></button> - </div> - </div> - </div> -</div> -</div> -</div> - - - diff --git a/frontend/src/app/_pages/my-predictors/my-predictors.component.ts b/frontend/src/app/_pages/my-predictors/my-predictors.component.ts deleted file mode 100644 index 4dc5300d..00000000 --- a/frontend/src/app/_pages/my-predictors/my-predictors.component.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import Predictor from 'src/app/_data/Predictor'; -import { PredictorsService } from 'src/app/_services/predictors.service'; -import shared from 'src/app/Shared'; -@Component({ - selector: 'app-my-predictors', - templateUrl: './my-predictors.component.html', - styleUrls: ['./my-predictors.component.css'] -}) -export class MyPredictorsComponent implements OnInit { - predictors: Predictor[] = []; - constructor(private predictorsS : PredictorsService) { - } - ngOnInit(): void { - this.predictorsS.getMyPredictors().subscribe((response) => { - this.predictors = response; - }, (error) => { - if (error.error == "Predictor with...") { - shared.openDialog("Greska", "Greska"); - } - }); - } - - deleteThisPredictor(predictor: Predictor): void{ - shared.openYesNoDialog('Brisanje prediktora','Da li ste sigurni da želite da obrišete prediktor?',() => { - this.predictorsS.deletePredictor(predictor).subscribe((response) => { - this.getAllMyPredictors(); - }, (error) =>{ - if (error.error == "Predictor with name = {name} deleted") { - shared.openDialog("Obaveštenje", "Greška prilikom brisanja prediktora."); - } - }); - }); - } - - getAllMyPredictors(): void{ - this.predictorsS.getMyPredictors().subscribe(p => { - this.predictors = p; - }); - } - - -} diff --git a/frontend/src/app/_pages/filter-datasets/filter-datasets.component.css b/frontend/src/app/_pages/playground/playground.component.css index e69de29b..e69de29b 100644 --- a/frontend/src/app/_pages/filter-datasets/filter-datasets.component.css +++ b/frontend/src/app/_pages/playground/playground.component.css diff --git a/frontend/src/app/_pages/playground/playground.component.html b/frontend/src/app/_pages/playground/playground.component.html new file mode 100644 index 00000000..1dd7e331 --- /dev/null +++ b/frontend/src/app/_pages/playground/playground.component.html @@ -0,0 +1,18 @@ +<div class="position-fixed d-flex flex-col align-items-center justify-content-center" style="top: 50%; left: 50%; transform: translateX(-50%);"> + <div class="d-flex flex-row align-items-center justify-content-center mt-5"> + <h2 class="text-light my-2"> + Broj tačaka: + </h2> + <mat-slider class="mx-3" [(ngModel)]="backgroundFill" min="0" max="1" step="0.01" (input)="updateFillPref($event)"> + </mat-slider> + + </div> + <div class="d-flex flex-row align-items-center justify-content-center mt-5"> + <h2 class="text-light my-2"> + Animacija: </h2> + <mat-slide-toggle class="mx-3" [(ngModel)]="animateBackground" (change)="updateAnimPref()"></mat-slide-toggle> + + </div> +</div> +<div style="height: 5000px;"> +</div>
\ No newline at end of file diff --git a/frontend/src/app/_pages/my-predictors/my-predictors.component.spec.ts b/frontend/src/app/_pages/playground/playground.component.spec.ts index 37dddf6d..bf66b27e 100644 --- a/frontend/src/app/_pages/my-predictors/my-predictors.component.spec.ts +++ b/frontend/src/app/_pages/playground/playground.component.spec.ts @@ -1,20 +1,20 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { MyPredictorsComponent } from './my-predictors.component'; +import { PlaygroundComponent } from './playground.component'; -describe('MyPredictorsComponent', () => { - let component: MyPredictorsComponent; - let fixture: ComponentFixture<MyPredictorsComponent>; +describe('PlaygroundComponent', () => { + let component: PlaygroundComponent; + let fixture: ComponentFixture<PlaygroundComponent>; beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ MyPredictorsComponent ] + declarations: [ PlaygroundComponent ] }) .compileComponents(); }); beforeEach(() => { - fixture = TestBed.createComponent(MyPredictorsComponent); + fixture = TestBed.createComponent(PlaygroundComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/frontend/src/app/_pages/playground/playground.component.ts b/frontend/src/app/_pages/playground/playground.component.ts new file mode 100644 index 00000000..831132a4 --- /dev/null +++ b/frontend/src/app/_pages/playground/playground.component.ts @@ -0,0 +1,35 @@ +import { Component, OnInit } from '@angular/core'; +import { MatSliderChange } from '@angular/material/slider'; +import { CookieService } from 'ngx-cookie-service'; + +@Component({ + selector: 'app-playground', + templateUrl: './playground.component.html', + styleUrls: ['./playground.component.css'] +}) +export class PlaygroundComponent implements OnInit { + + animateBackground = true; + backgroundFill = 1.0; + + constructor(private cookie: CookieService) { } + + updateFillPref(event: MatSliderChange) { + this.backgroundFill = event.value!; + this.cookie.set('backgroundFill', "" + this.backgroundFill); + } + + updateAnimPref() { + this.cookie.set('animateBackground', "" + this.animateBackground); + } + + ngOnInit(): void { + if (this.cookie.check('animateBackground')) { + this.animateBackground = this.cookie.get('animateBackground') == 'true'; + } + if (this.cookie.check('backgroundFill')) { + this.backgroundFill = parseFloat(this.cookie.get('backgroundFill')); + } + } + +} diff --git a/frontend/src/app/_pages/predict/predict.component.css b/frontend/src/app/_pages/predict/predict.component.css deleted file mode 100644 index dab059a5..00000000 --- a/frontend/src/app/_pages/predict/predict.component.css +++ /dev/null @@ -1,3 +0,0 @@ -#wrapper { - color: #003459; -}
\ No newline at end of file diff --git a/frontend/src/app/_pages/predict/predict.component.html b/frontend/src/app/_pages/predict/predict.component.html deleted file mode 100644 index 13afa8e4..00000000 --- a/frontend/src/app/_pages/predict/predict.component.html +++ /dev/null @@ -1,73 +0,0 @@ - -<div id="wrapper"> - <br> - <div id="container" class="container p-5" style="background-color: white; min-height: 100%;"> - - <div id="header"> - <h1>Iskoristite prediktor</h1> - </div> - - <br> - - <div class="form-group row mt-3 mb-2 d-flex justify-content-left"> - <!--justify-content-center--> - <h2> Izabrani prediktor: </h2> - <div class="col-10"> - <label for="output" class="col-sm-5 col-form-label">Naziv prediktora: <b>{{predictor.name}}</b></label> - </div> - <div> - <label for="output" class="col-sm-5 col-form-label">Opis prediktora: <b>{{predictor.description}}</b></label> - </div> - - - </div> - <br> - <label for="type" class="form-check-label" ><b>Informacije o prediktoru</b></label> - <div class="col-5 mt-2"> - <label for="type" class="form-check-label" >Prediktor {{predictor.isPublic?"je":"nije"}} javni.</label> - </div> - <div class="col-5 mt-2"> - <label for="type" class="form-check-label" >Prediktor {{predictor.accessibleByLink?"je":"nije"}} dostupan za deljenje.</label> - </div> - <br> - <div class="col-2"> - <label for="dateCreated" class="col-form-label">Datum:</label> - <input type="text" class="form-control-plaintext" id="dateCreated" placeholder="--/--/--" - value="{{predictor.dateCreated | date: 'dd/MM/yyyy'}}" readonly> - </div> - - - <br> - <div > - <!--input --> - <h3>Popunite ulazne kolone:</h3> - <div id="divInputs" class="form-check mt-2"> - <div *ngIf="predictor" class="form-group row mt-3 mb-2 d-flex justify-content-left"> - <div *ngFor="let input of predictor.inputs; let i = index"> - <label for="{{input}}" class="col-sm-2 col-form-label"><b>{{input}}</b></label> - <input name="{{input}}" type="text" [(ngModel)]="inputs[i].value" > - - </div> - - </div> - </div> - - <br> - - </div> - <div> - <label for="output" class="col-sm-2 col-form-label">Izlaz: <b>{{predictor.output}}</b></label> - </div> - - <div class="form-group row mt-5 mb-3"> - <div class="col"></div> - <button class="btn btn-lg col-4" style="background-color:#003459; color:white;" - (click)="usePredictor();">Iskoristi prediktor</button> - <div class="col"></div> - - </div> - - - - </div> -</div>
\ No newline at end of file diff --git a/frontend/src/app/_pages/predict/predict.component.ts b/frontend/src/app/_pages/predict/predict.component.ts deleted file mode 100644 index 39dec0ae..00000000 --- a/frontend/src/app/_pages/predict/predict.component.ts +++ /dev/null @@ -1,45 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; -import Predictor from 'src/app/_data/Predictor'; -import { PredictorsService } from 'src/app/_services/predictors.service'; -import shared from 'src/app/Shared'; - -@Component({ - selector: 'app-predict', - templateUrl: './predict.component.html', - styleUrls: ['./predict.component.css'] -}) -export class PredictComponent implements OnInit { - - inputs : Column[] = []; - - - predictor:Predictor; - constructor(private predictS : PredictorsService, private route: ActivatedRoute) { - this.predictor = new Predictor(); - } - - ngOnInit(): void { - this.route.params.subscribe(url => { - this.predictS.getPredictor(url["id"]).subscribe(p => { - - this.predictor = p; - this.predictor.inputs.forEach((p,index)=> this.inputs[index] = new Column(p, "")); - }) - }); - } - - usePredictor(): void{ - this.predictS.usePredictor(this.predictor, this.inputs).subscribe(p => { - shared.openDialog("Obaveštenje", "Prediktor je uspešno poslat na probu."); //pisalo je "na treniranje" ?? - }) - } -} - - -export class Column { - constructor( - public name : string, - public value : (number | string)){ - } -}
\ No newline at end of file diff --git a/frontend/src/app/_pages/profile/profile.component.css b/frontend/src/app/_pages/profile/profile.component.css index 5565d105..428870da 100644 --- a/frontend/src/app/_pages/profile/profile.component.css +++ b/frontend/src/app/_pages/profile/profile.component.css @@ -1,44 +1,21 @@ -body{margin-top:20px; -background-color:#f2f6fc; -color:#69707a; +.card{ + background-color: transparent; + color:var(--offwhite) } -.img-account-profile { - height: 10rem; - border: 1px solid lightgray; -} -.rounded-circle { - border-radius: 50% !important; -} -.card .card-header { - font-weight: 500; -} -.card-header:first-child { - border-radius: 0.35rem 0.35rem 0 0; + +.card-header{ + background-color: var(--ns-primary-50); + color:var(--offwhite) } -.card-header { - padding: 1rem 1.35rem; - margin-bottom: 0; - background-color: rgba(33, 40, 50, 0.03); - border-bottom: 1px solid rgba(33, 40, 50, 0.125); +.card-body{ + background-color: var(--ns-bg-dark-50); } -.form-control, .dataTable-input { - display: block; + +mat-form-field{ width: 100%; - padding: 0.875rem 1.125rem; - font-size: 0.875rem; - font-weight: 400; - line-height: 1; - color: #69707a; - background-color: #fff; - background-clip: padding-box; - border: 1px solid #c5ccd6; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - border-radius: 0.35rem; - transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } -.selectedPicture { - border: 2px solid darkgray; +.danger-Text{ + color:var(--ns-warn) } + diff --git a/frontend/src/app/_pages/profile/profile.component.html b/frontend/src/app/_pages/profile/profile.component.html index 557d69fd..37df4f14 100644 --- a/frontend/src/app/_pages/profile/profile.component.html +++ b/frontend/src/app/_pages/profile/profile.component.html @@ -27,17 +27,21 @@ <div class="row gx-3 mb-3"> <!-- Form Group (password)--> <div class="col-md-6"> - <label class="small mb-1" for="inputPassword">Važeća lozinka</label> - <input class="form-control" id="inputPassword" name="inputPassword" type="password" [(ngModel)]="this.oldPass" placeholder="Trenutna lozinka"> - <small *ngIf="wrongPassBool" class="form-text text-danger">Neispravna lozinka.</small> - <small *ngIf="wrongOldPassBool" class="form-text text-danger">Pogrešan format.</small> + <small *ngIf="wrongPassBool" class="form-text danger-Text">Neispravna lozinka.</small> + <mat-form-field appearance="fill"> + <mat-label>Važeća lozinka</mat-label> + <input matInput id="inputPassword" name="inputPassword" type="password" placeholder="" [(ngModel)]="this.oldPass"> + </mat-form-field> + <small *ngIf="wrongOldPassBool" class="form-text danger-Text">Pogrešan format.</small> </div> <!-- Form Group (new password)--> <div class="col-md-6"> - <label class="small mb-1" for="inputNewPassword">Nova lozinka</label> - <input class="form-control" id="inputNewPassword" name="inputNewPassword" type="password" [(ngModel)]="this.newPass1" placeholder="Ukucaj novu lozinku"> - <small *ngIf="wrongNewPassBool" class="form-text text-danger">Lozinke se ne podudaraju.</small> - <small *ngIf="wrongNewPass1Bool" class="form-text text-danger">Pogrešan format.</small> + <mat-form-field appearance="fill"> + <mat-label>Nova lozinka</mat-label> + <input matInput id="inputNewPassword" name="inputNewPassword" type="password" placeholder="" [(ngModel)]="this.newPass1"> + </mat-form-field> + <small *ngIf="wrongNewPassBool" class="form-text danger-Text">Lozinke se ne podudaraju.</small> + <small *ngIf="wrongNewPass1Bool" class="form-text danger-Text">Pogrešan format.</small> </div> </div> @@ -46,15 +50,17 @@ <div class="col-md-6"> <div class="col text-center"> <!-- Save changes button--> - <button class="btn btn-primary text-center mt-4" type="button" (click)="savePasswordChanges()">Promeni lozinku</button> + <button mat-raised-button color="primary" (click)="savePasswordChanges()">Promeni lozinku</button> </div> </div> <!-- Form Group (new password again)--> <div class="col-md-6"> - <label class="small mb-1" for="inputNewPasswordAgain">Ponovo nova lozinka</label> - <input class="form-control" id="inputNewPasswordAgain" name="inputNewPasswordAgain" type="password" [(ngModel)]="this.newPass2" placeholder="Ukucaj novu lozinku"> - <small *ngIf="wrongNewPassBool" class="form-text text-danger">Lozinke se ne podudaraju.</small> - <small *ngIf="wrongNewPass2Bool" class="form-text text-danger">Pogrešan format.</small> + <mat-form-field appearance="fill"> + <mat-label>Ponovo nova lozinka</mat-label> + <input matInput id="inputNewPasswordAgain" name="inputNewPasswordAgain" placeholder="" type="password" [(ngModel)]="this.newPass2"> + </mat-form-field> + <small *ngIf="wrongNewPassBool" class="form-text danger-Text">Lozinke se ne podudaraju.</small> + <small *ngIf="wrongNewPass2Bool" class="form-text danger-Text">Pogrešan format.</small> </div> </div> </div> @@ -74,15 +80,19 @@ <div class="row gx-3 mb-3"> <!-- Form Group (username)--> <div class="col-md-6"> - <label class="small mb-1" for="inputUsername">Korisničko ime (kako će ostali korisnici videti tvoje ime)</label> - <input class="form-control" id="inputUsername" name="inputUsername" type="text" [(ngModel)]="this.username"> - <small *ngIf="wrongUsernameBool" class="form-text text-danger">Pogrešan format.</small> + <mat-form-field appearance="fill"> + <mat-label>Korisničko ime (kako će ostali korisnici videti tvoje ime)</mat-label> + <input matInput id="inputUsername" name="inputUsername" type="text" [(ngModel)]="this.username"> + </mat-form-field> + <small *ngIf="wrongUsernameBool" class="form-text danger-Text">Pogrešan format.</small> </div> <!-- Form Group (email address)--> <div class="col-md-6"> - <label class="small mb-1" for="inputEmailAddress">Email adresa</label> - <input class="form-control" id="inputEmailAddress" name="inputEmailAddress" type="email" [(ngModel)]="this.email"> - <small *ngIf="wrongEmailBool" class="form-text text-danger">Pogrešan format.</small> + <mat-form-field appearance="fill"> + <mat-label>Email adresa</mat-label> + <input matInput id="inputEmailAddress" name="inputEmailAddress" type="email" [(ngModel)]="this.email"> + </mat-form-field> + <small *ngIf="wrongEmailBool" class="form-text danger-Text">Pogrešan format.</small> </div> </div> @@ -90,15 +100,19 @@ <div class="row gx-3 mb-3"> <!-- Form Group (first name)--> <div class="col-md-6"> - <label class="small mb-1" for="inputFirstName">Ime</label> - <input class="form-control" id="inputFirstName" name="inputFirstName" type="text" [(ngModel)]="this.firstName"> - <small *ngIf="wrongFirstNameBool" class="form-text text-danger">Pogrešan format.</small> + <mat-form-field appearance="fill"> + <mat-label>Ime</mat-label> + <input matInput id="inputFirstName" name="inputFirstName" type="text" [(ngModel)]="this.firstName"> + </mat-form-field> + <small *ngIf="wrongFirstNameBool" class="form-text danger-Text">Pogrešan format.</small> </div> <!-- Form Group (last name)--> <div class="col-md-6"> - <label class="small mb-1" for="inputLastName">Prezime</label> - <input class="form-control" id="inputLastName" name="inputLastName" type="text" [(ngModel)]="this.lastName"> - <small *ngIf="wrongLastNameBool" class="form-text text-danger">Pogrešan format.</small> + <mat-form-field appearance="fill"> + <mat-label>Prezime</mat-label> + <input matInput id="inputLastName" name="inputLastName" type="text" [(ngModel)]="this.lastName"> + </mat-form-field> + <small *ngIf="wrongLastNameBool" class="form-text danger-Text">Pogrešan format.</small> </div> </div> @@ -121,7 +135,7 @@ <div class="row mt-5"> <div class="col text-center"> <!-- Save changes button--> - <button class="btn btn-primary text-center" type="button" (click)="saveInfoChanges()">Sačuvaj izmene</button> + <button mat-raised-button color="primary" (click)="saveInfoChanges()" >Sačuvaj izmene</button> </div> </div> </form> 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..94679055 --- /dev/null +++ b/frontend/src/app/_pages/test/test.component.html @@ -0,0 +1,5 @@ +<app-pie-chart></app-pie-chart> +<app-doughnut-chart></app-doughnut-chart> +<app-barchart></app-barchart> +<app-box-plot></app-box-plot> +<app-heatmap></app-heatmap>
\ No newline at end of file diff --git a/frontend/src/app/_pages/my-models/my-models.component.spec.ts b/frontend/src/app/_pages/test/test.component.spec.ts index e431d04c..e0f9bcc9 100644 --- a/frontend/src/app/_pages/my-models/my-models.component.spec.ts +++ b/frontend/src/app/_pages/test/test.component.spec.ts @@ -1,20 +1,20 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { MyModelsComponent } from './my-models.component'; +import { TestComponent } from './test.component'; -describe('MyModelsComponent', () => { - let component: MyModelsComponent; - let fixture: ComponentFixture<MyModelsComponent>; +describe('TestComponent', () => { + let component: TestComponent; + let fixture: ComponentFixture<TestComponent>; beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ MyModelsComponent ] + declarations: [ TestComponent ] }) .compileComponents(); }); beforeEach(() => { - fixture = TestBed.createComponent(MyModelsComponent); + fixture = TestBed.createComponent(TestComponent); component = fixture.componentInstance; fixture.detectChanges(); }); 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 { + } + +} |