diff options
Diffstat (limited to 'frontend/src/app')
9 files changed, 116 insertions, 68 deletions
diff --git a/frontend/src/app/_data/Predictor.ts b/frontend/src/app/_data/Predictor.ts index 77d9498b..05b993f1 100644 --- a/frontend/src/app/_data/Predictor.ts +++ b/frontend/src/app/_data/Predictor.ts @@ -1,8 +1,9 @@ -export default class Dataset { +export default class Predictor { constructor( - public name: string = 'Novi izvor podataka', + public name: string = 'Novi prediktor', public description: string = '', - public columns: string[] = [], + public inputs: string[] = [], + public output: string = '', public isPublic: boolean = false, public accessibleByLink: boolean = false, public dateCreated: Date = new Date() diff --git a/frontend/src/app/_elements/carousel/carousel.component.html b/frontend/src/app/_elements/carousel/carousel.component.html index ea522626..755899a7 100644 --- a/frontend/src/app/_elements/carousel/carousel.component.html +++ b/frontend/src/app/_elements/carousel/carousel.component.html @@ -1,12 +1,14 @@ -<div class="d-flex flex-row"> - <div class="mx-2" *ngFor="let item of items" [ngSwitch]="item.constructor.name"> - <ng-template ngSwitchCase="Dataset"> - <app-item-dataset [dataset]="item"> - </app-item-dataset> - </ng-template> - <ng-template ngSwitchCase="Predictor"> - <app-item-predictor> - </app-item-predictor> - </ng-template> +<div class="container"> + <div class="row d-flex align-items-stretch flex-row mx-5 align-items-stretch"> + <div class="col my-1" *ngFor=" let item of items" [ngSwitch]="item.constructor.name"> + <ng-template ngSwitchCase="Dataset"> + <app-item-dataset [dataset]="item"> + </app-item-dataset> + </ng-template> + <ng-template ngSwitchCase="Predictor"> + <app-item-predictor [predictor]="item"> + </app-item-predictor> + </ng-template> + </div> </div> </div>
\ No newline at end of file diff --git a/frontend/src/app/_elements/item-dataset/item-dataset.component.html b/frontend/src/app/_elements/item-dataset/item-dataset.component.html index c1dc2609..cf39a125 100644 --- a/frontend/src/app/_elements/item-dataset/item-dataset.component.html +++ b/frontend/src/app/_elements/item-dataset/item-dataset.component.html @@ -1,4 +1,4 @@ -<div class="card" style="width: 18rem;"> +<div class="card" style="min-width: 12rem;"> <div class="card-header"> {{dataset.name}} </div> diff --git a/frontend/src/app/_elements/item-predictor/item-predictor.component.html b/frontend/src/app/_elements/item-predictor/item-predictor.component.html index cbd53fc2..92d747e2 100644 --- a/frontend/src/app/_elements/item-predictor/item-predictor.component.html +++ b/frontend/src/app/_elements/item-predictor/item-predictor.component.html @@ -1 +1,24 @@ -<p>item-predictor works!</p> +<div class="card" style="min-width: 12rem;"> + <div class="card-header"> + {{predictor.name}} + </div> + <div class="card-body"> + <p class="card-text"> + {{predictor.description}} + </p> + <div class="d-flex flex-column align-items-center"> + <table class="table table-bordered table-sm"> + <thead> + <th class="text-center" *ngFor="let column of predictor.inputs">{{column}}</th> + </thead> + </table> + <mat-icon>arrow_downward</mat-icon> + <p> + {{predictor.output}} + </p> + </div> + </div> + <div class="card-footer text-center"> + <a routerLink="predict" mat-raised-button color="primary">Iskoristi</a> + </div> +</div>
\ No newline at end of file diff --git a/frontend/src/app/_elements/item-predictor/item-predictor.component.ts b/frontend/src/app/_elements/item-predictor/item-predictor.component.ts index fe65ccfd..cc782f45 100644 --- a/frontend/src/app/_elements/item-predictor/item-predictor.component.ts +++ b/frontend/src/app/_elements/item-predictor/item-predictor.component.ts @@ -1,4 +1,5 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, Input, OnInit } from '@angular/core'; +import Predictor from 'src/app/_data/Predictor'; @Component({ selector: 'app-item-predictor', @@ -7,6 +8,8 @@ import { Component, OnInit } from '@angular/core'; }) export class ItemPredictorComponent implements OnInit { + @Input() predictor: Predictor = new Predictor(); + constructor() { } ngOnInit(): void { diff --git a/frontend/src/app/_elements/navbar/navbar.component.html b/frontend/src/app/_elements/navbar/navbar.component.html index 116694b4..b9c450af 100644 --- a/frontend/src/app/_elements/navbar/navbar.component.html +++ b/frontend/src/app/_elements/navbar/navbar.component.html @@ -1,10 +1,8 @@ <header class="sticky-top p-3 bg-dark text-white"> <div class="container"> <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start"> - <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none"> - <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"> - <use xlink:href="#bootstrap"></use> - </svg> + <a routerLink="" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none"> + <img src="../../../assets/svg/logo_no_text.svg" class="bi me-2" width="64" height="40"> </a> <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0"> @@ -34,11 +32,12 @@ </ul> </div> <div *ngIf="!shared.loggedIn" class="dropdown text-end"> - <button type="button" class="btn btn-primary mx-2" data-bs-toggle="modal" + <button type="button" mat-raised-button color="primary" class="mx-2" data-bs-toggle="modal" data-bs-target="#modalForLogin"> Prijavi se </button> - <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalForRegister"> + <button type="button" mat-raised-button color="primary" data-bs-toggle="modal" + data-bs-target="#modalForRegister"> Registruj se </button> </div> diff --git a/frontend/src/app/_pages/home/home.component.html b/frontend/src/app/_pages/home/home.component.html index 7731054c..374cb324 100644 --- a/frontend/src/app/_pages/home/home.component.html +++ b/frontend/src/app/_pages/home/home.component.html @@ -1,51 +1,53 @@ -<div> - <div class="d-flex flex-column align-items-center"> - <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="d-flex flex-row justify-content-center align-items-start"> - <div class="card shadow" 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 class="d-flex flex-column align-items-center"> + <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-center 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 class="card mx-3 shadow" 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> + <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="card shadow" 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 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> - <h2 class="my-4">Pogledajte javne projekte!</h2> - <app-carousel [items]="publicDatasets"> - </app-carousel> + </div> + <h2 class="my-4">Pogledajte javne izvore podataka!</h2> + <app-carousel [items]="publicDatasets"> + </app-carousel> + <h2 class="my-4">Iskoristite već trenirane modele!</h2> + <app-carousel [items]="publicPredictors"> + </app-carousel> </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 eb9adf27..7e4471e8 100644 --- a/frontend/src/app/_pages/home/home.component.ts +++ b/frontend/src/app/_pages/home/home.component.ts @@ -12,14 +12,30 @@ import shared from 'src/app/Shared'; export class HomeComponent implements OnInit { publicDatasets: Dataset[]; + publicPredictors: Predictor[]; shared = shared; constructor() { this.publicDatasets = [ - new Dataset('Dataset1', 'Lorem ipsum dolor sir amet', ['kolona1', 'kolona2', 'kolona3']), + new Dataset('Titanik', 'Titanik', ['Kolona1', 'Kolona2', 'Ime', 'OsobaJePreživela']), new Dataset('Drugi Dataset', 'Lorem ipsum dolor sir amet', ['jabuka', 'kruska', 'jagoda']), new Dataset('Dataset III', 'Kratak opis izvora podataka', ['c1', 'c2', 'c3', 'c4', 'c5']), + new Dataset('Drugi Dataset', 'Lorem ipsum dolor sir amet', ['jabuka', 'kruska', 'jagoda']), + new Dataset('Dataset III', 'Kratak opis izvora podataka', ['c1', 'c2', 'c3', 'c4', 'c5']), + new Dataset('Drugi Dataset', 'Lorem ipsum dolor sir amet', ['jabuka', 'kruska', 'jagoda']), + new Dataset('Dataset III', 'Kratak opis izvora podataka', ['c1', 'c2', 'c3', 'c4', 'c5']), + new Dataset('Dataset III', 'Kratak opis izvora podataka', ['c1', 'c2', 'c3', 'c4', 'c5']) + ] + this.publicPredictors = [ + new Predictor('Preživeli', 'Za uneto ime osobe, predvidja da li je ta osoba preživela ili ne.', ['Ime'], 'OsobaJePreživela'), + new Predictor('Drugi model', 'Lorem ipsum dolor sir amet', ['kruska'], 'jagoda'), + new Predictor('Treći model', 'Kratak opis modela', ['c1', 'c2', 'c3'], 'c5'), + new Predictor('Drugi model', 'Lorem ipsum dolor sir amet', ['kruska'], 'jagoda'), + new Predictor('Treći model', 'Kratak opis modela', ['c1', 'c2', 'c3'], 'c5'), + new Predictor('Drugi model', 'Lorem ipsum dolor sir amet', ['kruska'], 'jagoda'), + new Predictor('Treći model', 'Kratak opis modela', ['c1', 'c2', 'c3'], 'c5'), + new Predictor('Treći model', 'Kratak opis modela', ['c1', 'c2', 'c3'], 'c5') ] } diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts index a42257df..ee43b522 100644 --- a/frontend/src/app/app-routing.module.ts +++ b/frontend/src/app/app-routing.module.ts @@ -11,6 +11,7 @@ import { BrowsePredictorsComponent } from './_pages/browse-predictors/browse-pre import { BrowseDatasetsComponent } from './_pages/browse-datasets/browse-datasets.component'; import { SettingsComponent } from './_pages/settings/settings.component'; import { ProfileComponent } from './_pages/profile/profile.component'; +import { PredictComponent } from './_pages/predict/predict.component'; const routes: Routes = [ { path: '', component: HomeComponent }, @@ -21,7 +22,8 @@ const routes: Routes = [ { path: 'settings', component: SettingsComponent, canActivate: [AuthGuardService] }, { path: 'profile', component: ProfileComponent, canActivate: [AuthGuardService] }, { path: 'browse-datasets', component: BrowseDatasetsComponent }, - { path: 'browse-predictors', component: BrowsePredictorsComponent } + { path: 'browse-predictors', component: BrowsePredictorsComponent }, + { path: 'predict', component: PredictComponent } ]; @NgModule({ |