diff options
Diffstat (limited to 'frontend/src/app/_pages')
49 files changed, 1520 insertions, 542 deletions
diff --git a/frontend/src/app/_pages/add-model/add-model.component.css b/frontend/src/app/_pages/add-model/add-model.component.css index e69de29b..6d961287 100644 --- a/frontend/src/app/_pages/add-model/add-model.component.css +++ b/frontend/src/app/_pages/add-model/add-model.component.css @@ -0,0 +1,35 @@ +#header { + background-color: #003459; + padding-top: 30px; + padding-bottom: 20px; +} +#header h1 { + font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; + text-align: center; + color: white; +} + +#container { + border-radius: 8px; +} + +#wrapper { + color: #003459; +} + +.btnType1 { + background-color: #003459; + color: white; +} +.btnType2 { + background-color: white; + color: #003459; + border-color: #003459; +} +.selectedDatasetClass { + /*border-color: 2px solid #003459;*/ + background-color: lightblue; +} +ul li:hover { + background-color: lightblue; +}
\ No newline at end of file diff --git a/frontend/src/app/_pages/add-model/add-model.component.html b/frontend/src/app/_pages/add-model/add-model.component.html index bc292bb9..7e944a19 100644 --- a/frontend/src/app/_pages/add-model/add-model.component.html +++ b/frontend/src/app/_pages/add-model/add-model.component.html @@ -1,189 +1,361 @@ -<div class="container p-3" style="background-color: rgb(249, 251, 253); min-height: 100%;"> - - <h2 class="my-4 text-primary"> Nov model: </h2> - <div class="form-group row align-items-center"> - <label for="name" class="col-sm-2 col-form-label col-form-label-lg">Naziv</label> - <div class="col-sm-7"> - <input type="text" class="form-control form-control-lg" name="name" placeholder="Naziv..." - [(ngModel)]="newModel.name"> - </div> +<div id="header"> + <h1>Napravite svoj model veštačke neuronske mreže</h1> +</div> - <div class="col-sm-3"> - <input type="text" class="form-control-plaintext text-center" id="dateCreated" placeholder="--/--/--" - value="{{newModel.dateCreated | date: 'dd/MM/yyyy'}}" readonly> +<div id="wrapper"> + <div id="container" class="container p-5" style="background-color: white; min-height: 100%;"> + <div class="form-group row mt-3 mb-2 d-flex justify-content-center"> + <!--justify-content-center--> + <h2 class="col-2"> Nov model: </h2> + <div class="col-3"> + <label for="name" class="col-form-label">Naziv modela:</label> + <input type="text" class="form-control" name="name" placeholder="Naziv..." [(ngModel)]="newModel.name"> + </div> + <div class="col-5"> + <label for="desc" class="col-sm-2 col-form-label">Opis:</label> + <div> + <textarea class="form-control" name="desc" rows="3" [(ngModel)]="newModel.description"></textarea> + </div> + </div> + <div class="col-2"> + <label for="dateCreated" class="col-form-label">Datum:</label> + <input type="text" class="form-control-plaintext" id="dateCreated" placeholder="--/--/--" + value="{{newModel.dateCreated | date: 'dd/MM/yyyy'}}" readonly> + </div> </div> - </div> - <div class="form-group row my-2"> - <label for="desc" class="col-sm-2 col-form-label">Opis</label> - <div class="col-sm-10"> - <textarea class="form-control" name="desc" rows="3" [(ngModel)]="newModel.description"></textarea> - </div> - </div> + <div class="py-3 pr-5 justify-content-center"> - <!--<div class="form-group row"> - <label for="value" class="col-4">Vrednost</label> - <div class="input-group"> - <input type="number" min="0" class="form-control" name="value" placeholder="Vrednost..." - [(ngModel)]="newModel.value"> - <div class="input-group-prepend"> - <span class="input-group-text">#</span> - </div> - <input type="number" min="1" class="form-control" name="count" placeholder="Br." [(ngModel)]="newModel.count"> - <input type="text" class="form-control" name="sum" placeholder="Suma" - value="=({{newModel.value * newModel.count}})" readonly> + <div class="col-12 d-flex my-5"> + <h2 class="">Izvor podataka:</h2> + <div class="col-1"> + </div> + <button type="button" id="btnMyDataset" class="btn" (click)="viewMyDatasetsForm()" + [ngClass]="{'btnType1': showMyDatasets, 'btnType2': !showMyDatasets}"> + Izaberite dataset iz kolekcije + </button> + <h3 class="mt-3 mx-3">ili</h3> + <button type="button" id="btnNewDataset" class="btn" (click)="viewNewDatasetForm()" + [ngClass]="{'btnType1': !showMyDatasets, 'btnType2': showMyDatasets}"> + Dodajte novi dataset + </button> + </div> + + <div class="px-5"> + <div *ngIf="showMyDatasets" class="overflow-auto" style="max-height: 500px;"> + <ul class="list-group"> + <li class="list-group-item p-3" *ngFor="let dataset of myDatasets" + [ngClass]="{'selectedDatasetClass': this.selectedDataset == dataset}"> + <app-item-dataset name="usersDataset" [dataset]="dataset" + (click)="selectThisDataset(dataset)"></app-item-dataset> + </li> + </ul> + </div> + </div> + + <app-dataset-load *ngIf="!showMyDatasets" id="dataset" + (loaded)="datasetLoaded = true; selectedDataset = datasetLoadComponent?.dataset; datasetFile = datasetLoadComponent?.csvRecords; datasetHasHeader = datasetLoadComponent?.hasHeader"> + </app-dataset-load> + <app-datatable [data]="datasetFile" [hasHeader]="datasetHasHeader"></app-datatable> </div> - </div>--> - <div class="my-4"> - <label for="dataset">Izvor podataka:</label> - <app-dataset-load id="dataset"></app-dataset-load> - </div> + <!-- ULAZNE/IZLAZNE KOLONE --> + <div *ngIf="selectedDataset"> + <div class="row"> + <div class="col d-flex justify-content-center"> + <h3>Izaberite ulazne kolone:</h3> + <div id="divInputs" class="form-check mt-2"> + <br> + <div *ngFor="let item of selectedDataset.header; let i = index"> + <input class="form-check-input" type="checkbox" value="{{item}}" id="cb_{{item}}" + name="cbsNew" checked [disabled]="this.selectedOutputColumnVal == item"> + <label class="form-check-label" for="cb_{{item}}"> + {{item}} + </label> + </div> + </div> + </div> + <div class="col d-flex justify-content-left"> + <h3>Izaberite izlaznu kolonu:</h3> + <div id="divOutputs" class="form-check mt-2"> + <br> + <div *ngFor="let item of selectedDataset.header; let i = index"> + <input class="form-check-input" type="radio" value="{{item}}" id="rb_{{item}}" name="rbsNew" + (change)="this.selectedOutputColumnVal = item"> + <label class="form-check-label" for="rb_{{item}}"> + {{item}} + </label> + </div> + </div> + </div> - <div class="form-group row my-2"> - <div class="col-sm-2 col-form-label"> - <label for="type" class="form-check-label">Podela test skupa: - <input class="mx-3 form-check-input" type="checkbox" [checked]="newModel.randomTestSet" - (change)="newModel.randomTestSet = !newModel.randomTestSet"> - </label> + <div class="my-2" *ngIf="datasetFile"> + <h2>Popunjavanje nedostajućih vrednosti:</h2> + <div class="form-check"> + <input type="radio" [(ngModel)]="newModel.nullValues" [value]="NullValueOptions.DeleteRows" + class="form-check-input" value="deleteRows" name="fillMissing" id="delRows" checked + data-bs-toggle="collapse" data-bs-target="#fillMissingCustom.show"> + <label for="delRows" class="form-check-label">Obriši sve + redove sa nedostajućim vrednostima</label><br> + <input type="radio" [(ngModel)]="newModel.nullValues" [value]="NullValueOptions.DeleteColumns" + class="form-check-input" value="deleteCols" name="fillMissing" id="delCols" + data-bs-toggle="collapse" data-bs-target="#fillMissingCustom.show"> + <label for="delCols" class="form-check-label">Obriši sve + kolone sa nedostajućim vrednostima</label><br> + <input type="radio" [(ngModel)]="newModel.nullValues" [value]="NullValueOptions.Replace" + class="form-check-input" name="fillMissing" id="replace" data-bs-toggle="collapse" + data-bs-target="#fillMissingCustom:not(.show)"> + <label for="replace" class="form-check-label">Izabraću + vrednosti koje će da zamene nedostajuće vrednosti za svaku kolonu...</label><br><br> + <div class="collapse" id="fillMissingCustom"> + <div> + <label for="columnReplacers" class="form-label">Unesite zamenu za svaku kolonu:</label> + <div id="columnReplacers"> + <div *ngFor="let column of selectedDataset.header; let i = index" class="my-3"> + <div class="input-group row" *ngIf="getInputById('cb_'+column).checked"> + <span class="input-group-text col-2 text-center"> + {{column}} + </span> + <input type="text" class="form-control col-2"> + <select [id]="'replaceOptions'+i" class="form-control col-2" + *ngIf="isNumber(datasetFile[1][i])"> + <option + *ngFor="let option of Object.keys(ReplaceWith); let optionName of Object.values(ReplaceWith)" + [value]="option"> + {{ optionName }} + </option> + </select> + <select [id]="'replaceOptions'+i" class="form-control col-2" + *ngIf="!isNumber(datasetFile[1][i])"> + <option *ngFor="let option of arrayColumn(datasetFile, i)" + [value]="option"> + {{ option }} + </option> + </select> + <label class="form-control col-2" [for]="'delCol_'+column">Izbriši kolonu + <input type="radio" [id]="'delCol_'+column" + [name]="'delOp_'+column"></label> + <label class="form-control col-2" [for]="'delRows_'+column">Izbriši redove + <input type="radio" [id]="'delRows_'+column" [name]="'delOp_'+column" + checked></label> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> </div> - <div> - <input type="range" min="0.1" max="0.9" step="0.1" class="form-control" name="randomTestSetDistribution" - [disabled]="!newModel.randomTestSet" [(ngModel)]="newModel.randomTestSetDistribution"> - </div> - </div> - <h3> Parametri treniranja </h3> - - <div class="form-group row my-2"> - <label for="type" class="col-sm-2 col-form-label">Tip mreže: </label> - <div class="col-sm-10"> - <select id=typeOptions class="form-control" name="type" [(ngModel)]="newModel.type"> - <option *ngFor="let option of Object.keys(ANNType); let optionName of Object.values(ANNType)" - [value]="option"> - {{ optionName }} - </option> - </select> - </div> - </div> - <div class="form-group row my-2"> - <label for="encoding" class="col-sm-2 col-form-label">Enkoding: </label> - <div class="col-sm-10"> - <select id=encodingOptions class="form-control" name="encoding" [(ngModel)]="newModel.encoding"> - <option *ngFor="let option of Object.keys(Encoding); let optionName of Object.values(Encoding)" - [value]="option"> - {{ optionName }} - </option> - </select> - </div> - </div> - <div class="form-group row my-2"> - <label for="optimizer" class="col-sm-2 col-form-label">Optimizacija: </label> - <div class="col-sm-10"> - <select id=optimizerOptions class="form-control" name="optimizer" [(ngModel)]="newModel.optimizer"> - <option *ngFor="let option of Object.keys(Optimizer); let optionName of Object.values(Optimizer)" - [value]="option"> - {{ optionName }} - </option> - </select> - </div> - </div> + <h2 class="mt-5 mb-4">Parametri treniranja:</h2> - <div class="form-group row my-2"> - <label for="lossFunction" class="col-sm-2 col-form-label">Funkcija obrade gubitka: </label> - <div class="col-sm-10"> - <select id=lossFunctionOptions class="form-control" name="lossFunction" [(ngModel)]="newModel.lossFunction"> - <option *ngFor="let option of Object.keys(LossFunction); let optionName of Object.values(LossFunction)" - [value]="option"> - {{ optionName }} - </option> - </select> - </div> - </div> + <div> + <div class="row p-2"> + <div class="col-1"> + </div> + <div class="col-3"> + <label for="type" class="col-form-label">Tip mreže: </label> + </div> + <div class="col-2"> + <select id=typeOptions class="form-control" name="type" [(ngModel)]="newModel.type"> + <option *ngFor="let option of Object.keys(ANNType); let optionName of Object.values(ANNType)" + [value]="option"> + {{ optionName }} + </option> + </select> + </div> + <div class="col-1"> + </div> + <div class="col-3"> + <label for="hiddenLayers" class="col-form-label">Broj skrivenih slojeva: </label> + </div> + <div class="col-1"> + <input type="number" min="1" class="form-control" name="hiddenLayers" + [(ngModel)]="newModel.hiddenLayers"> + </div> + </div> - <div class="form-group row my-2"> - <label for="inputNeurons" class="col-sm-2 col-form-label">Broj ulaznih neurona: </label> - <div class="col-sm-10"> - <input type="number" min="1" class="form-control" name="inputNeurons" [(ngModel)]="newModel.inputNeurons"> - </div> - </div> + <div class="row p-2"> + <div class="col-1"> + </div> + <div class="col-3"> + <label for="encoding" class="col-form-label">Enkoding: </label> + </div> + <div class="col-2"> + <select id=encodingOptions class="form-control" name="encoding" [(ngModel)]="newModel.encoding"> + <option *ngFor="let option of Object.keys(Encoding); let optionName of Object.values(Encoding)" + [value]="option"> + {{ optionName }} + </option> + </select> + </div> + <div class="col-1"> + </div> + <div class="col-3"> + <label for="hiddenLayerNeurons" class="col-form-label">Broj neurona skrivenih slojeva: </label> + </div> + <div class="col-1"> + <input type="number" min="1" class="form-control" name="hiddenLayerNeurons" + [(ngModel)]="newModel.hiddenLayerNeurons"> + </div> + </div> - <div class="form-group row my-2"> - <label for="inputLayerActivationFunction" class="col-sm-2 col-form-label">Funkcija aktivacije ulaznog sloja: - </label> - <div class="col-sm-10"> - <select id=inputLayerActivationFunctionOptions class="form-control" name="inputLayerActivationFunction" - [(ngModel)]="newModel.inputLayerActivationFunction"> - <option - *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)" - [value]="option"> - {{ optionName }} - </option> - </select> - </div> - </div> + <div class="row p-2"> + <div class="col-1"> + </div> + <div class="col-3"> + <label for="optimizer" class="col-form-label">Optimizacija: </label> + </div> + <div class="col-2"> + <select id=optimizerOptions class="form-control" name="optimizer" [(ngModel)]="newModel.optimizer"> + <option + *ngFor="let option of Object.keys(Optimizer); let optionName of Object.values(Optimizer)" + [value]="option"> + {{ optionName }} + </option> + </select> + </div> + <div class="col-1"> + </div> + <div class="col-3"> + <label for="batchSize" class="col-form-label">Broj uzorka po iteraciji: </label> + </div> + <div class="col-1"> + <input type="number" min="1" class="form-control" name="batchSize" [(ngModel)]="newModel.batchSize"> + </div> + </div> - <div class="form-group row my-2"> - <label for="hiddenLayerNeurons" class="col-sm-2 col-form-label">Broj neurona skrivenih slojeva: </label> - <div class="col-sm-10"> - <input type="number" min="1" class="form-control" name="hiddenLayerNeurons" - [(ngModel)]="newModel.hiddenLayerNeurons"> - </div> - </div> + <div class="row p-2"> + <div class="col-1"> + </div> + <div class="col-3"> + <label for="lossFunction" class="col-form-label">Funkcija obrade gubitka: </label> + </div> + <div class="col-2"> + <select id=lossFunctionOptions class="form-control" name="lossFunction" + [(ngModel)]="newModel.lossFunction"> + <option + *ngFor="let option of Object.keys(LossFunction); let optionName of Object.values(LossFunction)" + [value]="option"> + {{ optionName }} + </option> + </select> + </div> + <div class="col-1"> + </div> + <div class="col-3 mt-2"> + <label for="type" class="form-check-label">Nasumičan redosled podataka?</label> + <input class="mx-3 form-check-input" type="checkbox" [(ngModel)]="newModel.randomOrder" + type="checkbox" value="" checked> + </div> + <div class="col-1"> + </div> + </div> - <div class="form-group row my-2"> - <label for="hiddenLayerActivationFunction" class="col-sm-2 col-form-label">Funkcija aktivacije skrivenih - slojeva: - </label> - <div class="col-sm-10"> - <select id=hiddenLayerActivationFunctionOptions class="form-control" name="hiddenLayerActivationFunction" - [(ngModel)]="newModel.hiddenLayerActivationFunction"> - <option - *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)" - [value]="option"> - {{ optionName }} - </option> - </select> - </div> - </div> + <div class="row p-2"> + <div class="col-1"> + </div> + <div class="col-3"> + <label for="inputLayerActivationFunction" class="col-form-label">Funkcija aktivacije ulaznog + sloja:</label> + </div> + <div class="col-2"> + <select id=inputLayerActivationFunctionOptions class="form-control" + name="inputLayerActivationFunction" [(ngModel)]="newModel.inputLayerActivationFunction"> + <option + *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)" + [value]="option"> + {{ optionName }} + </option> + </select> + </div> + <div class="col-1"> + </div> + <div class="col-5"> + <label for="splitYesNo" class="form-check-label">Podela test skupa: + <input id="splitYesNo" class="form-check-input" type="checkbox" + [checked]="newModel.randomTestSet" + (change)="newModel.randomTestSet = !newModel.randomTestSet"> + </label> + </div> + <div class="col"> + </div> + </div> - <div class="form-group row my-2"> - <label for="hiddenLayers" class="col-sm-2 col-form-label">Broj skrivenih slojeva: </label> - <div class="col-sm-10"> - <input type="number" min="1" class="form-control" name="hiddenLayers" [(ngModel)]="newModel.hiddenLayers"> - </div> - </div> + <div class="row p-2"> + <div class="col-1"> + </div> + <div class="col-3"> + <label for="hiddenLayerActivationFunction" class="col-form-label">Funkcija aktivacije skrivenih + slojeva:</label> + </div> + <div class="col-2"> + <select id=hiddenLayerActivationFunctionOptions class="form-control" + name="hiddenLayerActivationFunction" [(ngModel)]="newModel.hiddenLayerActivationFunction"> + <option + *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)" + [value]="option"> + {{ optionName }} + </option> + </select> + </div> + <div class="col-1"> + </div> + <div class="col-2"> + <label for="percentage" class="form-label">Procenat podataka koji se uzima za trening skup:</label> + </div> + <div class="col-1"> + <input id="percentage" type="number" class="form-control" min="10" max="90" step="10" value="90" + [(ngModel)]="tempTestSetDistribution" [disabled]="!newModel.randomTestSet"> + </div> + </div> - <div class="form-group row my-2"> - <label for="outputLayerActivationFunction" class="col-sm-2 col-form-label">Funkcija aktivacije izlaznog - sloja: - </label> - <div class="col-sm-10"> - <select id=outputLayerActivationFunctionOptions class="form-control" name="outputLayerActivationFunction" - [(ngModel)]="newModel.outputLayerActivationFunction"> - <option - *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)" - [value]="option"> - {{ optionName }} - </option> - </select> + <div class="row p-2"> + <div class="col-1"> + </div> + <div class="col-3"> + <label for="outputLayerActivationFunction" class="col-form-label">Funkcija aktivacije izlaznog + sloja:</label> + </div> + <div class="col-2"> + <select id=outputLayerActivationFunctionOptions class="form-control" + name="outputLayerActivationFunction" [(ngModel)]="newModel.outputLayerActivationFunction"> + <option + *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)" + [value]="option"> + {{ optionName }} + </option> + </select> + </div> + <div class="col-1"> + </div> + <div class="col"> + trening + <mat-slider min="10" max="90" step="10" value="10" name="randomTestSetDistribution" thumbLabel + [disabled]="!newModel.randomTestSet" [(ngModel)]="tempTestSetDistribution"> + </mat-slider> + test + </div> + <div class="col"> + </div> + </div> </div> - </div> - <div class="form-group row my-2"> - <label for="batchSize" class="col-sm-2 col-form-label">Broj uzorka po iteraciji: </label> - <div class="col-sm-10"> - <input type="number" min="1" class="form-control" name="batchSize" [(ngModel)]="newModel.batchSize"> + + <br><br> + <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)="addModel();">Sačuvaj model</button> + <div class="col"></div> + <button class="btn btn-lg col-4 disabled" style="background-color:#003459; color:white;" + (click)="trainModel();">Treniraj model</button> + <div class="col"></div> </div> - </div> - <div class=" form-group row my-4"> - <div class="col-4"></div> - <button class="btn btn-lg btn-primary col-4" (click)="addModel();">Dodaj</button> - <div class="col-4"></div> </div> - </div>
\ No newline at end of file diff --git a/frontend/src/app/_pages/add-model/add-model.component.ts b/frontend/src/app/_pages/add-model/add-model.component.ts index 3cb47d61..fcc8ea70 100644 --- a/frontend/src/app/_pages/add-model/add-model.component.ts +++ b/frontend/src/app/_pages/add-model/add-model.component.ts @@ -1,6 +1,14 @@ -import { Component, OnInit } from '@angular/core'; -import Model from 'src/app/_data/Model'; -import { ANNType, Encoding, ActivationFunction, LossFunction, Optimizer } from 'src/app/_data/Model'; +import { Component, OnInit, ViewChild } from '@angular/core'; +import Model, { ReplaceWith } from 'src/app/_data/Model'; +import { ANNType, Encoding, ActivationFunction, LossFunction, Optimizer, NullValueOptions } from 'src/app/_data/Model'; +import { DatasetLoadComponent } from 'src/app/_elements/dataset-load/dataset-load.component'; +import { ModelsService } from 'src/app/_services/models.service'; +import shared from 'src/app/Shared'; +import Dataset from 'src/app/_data/Dataset'; +import { DatatableComponent } from 'src/app/_elements/datatable/datatable.component'; +import { DatasetsService } from 'src/app/_services/datasets.service'; +import { NgxCsvParser } from 'ngx-csv-parser'; +import { CsvParseService } from 'src/app/_services/csv-parse.service'; @Component({ selector: 'app-add-model', @@ -9,24 +17,263 @@ import { ANNType, Encoding, ActivationFunction, LossFunction, Optimizer } from ' }) export class AddModelComponent implements OnInit { - newModel: Model + @ViewChild(DatasetLoadComponent) datasetLoadComponent?: DatasetLoadComponent; + @ViewChild(DatatableComponent) datatable?: DatatableComponent; + datasetLoaded: boolean = false; + + newModel: Model; ANNType = ANNType; Encoding = Encoding; ActivationFunction = ActivationFunction; LossFunction = LossFunction; Optimizer = Optimizer; + NullValueOptions = NullValueOptions; + ReplaceWith = ReplaceWith; Object = Object; + document = document; + shared = shared; + + selectedOutputColumnVal: string = ''; + + showMyDatasets: boolean = true; + myDatasets?: Dataset[]; + existingDatasetSelected: boolean = false; + selectedDataset?: Dataset; + otherDataset?: Dataset; + otherDatasetFile?: any[]; + datasetFile?: any[]; + datasetHasHeader?: boolean = true; + + tempTestSetDistribution: number = 90; - constructor() { + constructor(private models: ModelsService, private datasets: DatasetsService, private csv: CsvParseService) { this.newModel = new Model(); + + this.models.getMyDatasets().subscribe((datasets) => { + this.myDatasets = datasets; + }); } ngOnInit(): void { + (<HTMLInputElement>document.getElementById("btnMyDataset")).focus(); + } + + viewMyDatasetsForm() { + this.showMyDatasets = true; + this.resetSelectedDataset(); + this.datasetLoaded = false; + this.resetCbsAndRbs(); + } + viewNewDatasetForm() { + this.showMyDatasets = false; + this.resetSelectedDataset(); + this.resetCbsAndRbs(); } addModel() { - //TODO + if (!this.showMyDatasets) + this.saveModelWithNewDataset(); + else + this.saveModelWithExistingDataset(); + } + + trainModel() { + this.saveModelWithNewDataset().subscribe((modelId: any) => { + if (modelId) + this.models.trainModel(modelId); + }); //privremeno cuvanje modela => vraca id sacuvanog modela koji cemo da treniramo sad + } + + saveModelWithNewDataset(): any { + + this.getCheckedInputCols(); + this.getCheckedOutputCol(); + + if (this.validationInputsOutput()) { + console.log('ADD MODEL: STEP 1 - UPLOAD FILE'); + if (this.datasetLoadComponent) { + + this.models.uploadData(this.datasetLoadComponent.files[0]).subscribe((file) => { + console.log('ADD MODEL: STEP 2 - ADD DATASET WITH FILE ID ' + file._id); + if (this.datasetLoadComponent) { + this.datasetLoadComponent.dataset.fileId = file._id; + this.datasetLoadComponent.dataset.username = shared.username; + + this.models.addDataset(this.datasetLoadComponent.dataset).subscribe((dataset) => { + console.log('ADD MODEL: STEP 3 - ADD MODEL WITH DATASET ID ', dataset._id); + this.newModel.datasetId = dataset._id; + + //da se doda taj dataset u listu postojecih, da bude izabran + this.refreshMyDatasetList(); + this.showMyDatasets = true; + this.selectThisDataset(dataset); + + this.newModel.randomTestSetDistribution = 1 - Math.round(this.tempTestSetDistribution / 100 * 10) / 10; + this.tempTestSetDistribution = 90; + this.newModel.username = shared.username; + + this.models.addModel(this.newModel).subscribe((response) => { + console.log('ADD MODEL: DONE! REPLY:\n', response); + }, (error) => { + alert("Model sa unetim nazivom već postoji u Vašoj kolekciji.\nPromenite naziv modela i nastavite sa kreiranim datasetom."); + }); //kraj addModel subscribe + }, (error) => { + alert("Dataset sa unetim nazivom već postoji u Vašoj kolekciji.\nIzmenite naziv ili iskoristite postojeći dataset."); + }); //kraj addDataset subscribe + } //kraj treceg ifa + }, (error) => { + //alert("greska uploadData"); + }); //kraj uploadData subscribe + + } //kraj drugog ifa + } //kraj prvog ifa + } + + saveModelWithExistingDataset(): any { + + if (this.selectedDataset) { //dataset je izabran + this.getCheckedInputCols(); + this.getCheckedOutputCol(); + + if (this.validationInputsOutput()) { + this.newModel.datasetId = this.selectedDataset._id; + + this.newModel.randomTestSetDistribution = 1 - Math.round(this.tempTestSetDistribution / 100 * 10) / 10; + this.tempTestSetDistribution = 90; + this.newModel.username = shared.username; + + this.models.addModel(this.newModel).subscribe((response) => { + console.log('ADD MODEL: DONE! REPLY:\n', response); + }, (error) => { + alert("Model sa unetim nazivom već postoji u Vašoj kolekciji.\nPromenite naziv modela i nastavite sa kreiranim datasetom."); + }); + } + } + else { + alert("Molimo Vas da izaberete neki dataset iz kolekcije."); + } + } + + getCheckedInputCols() { + this.newModel.inputColumns = []; + let checkboxes: any; + + checkboxes = document.getElementsByName("cbsNew"); + + for (let i = 0; i < checkboxes.length; i++) { + let thatCb = <HTMLInputElement>checkboxes[i]; + if (thatCb.checked == true && thatCb.disabled == false) + this.newModel.inputColumns.push(thatCb.value); + } + //console.log(this.checkedInputCols); + } + getCheckedOutputCol() { + this.newModel.columnToPredict = ''; + let radiobuttons: any; + + radiobuttons = document.getElementsByName("rbsNew"); + + for (let i = 0; i < radiobuttons.length; i++) { + let thatRb = <HTMLInputElement>radiobuttons[i]; + if (thatRb.checked) { + this.newModel.columnToPredict = thatRb.value; + break; + } + } + //console.log(this.checkedOutputCol); + } + validationInputsOutput(): boolean { + if (this.newModel.inputColumns.length == 0 && this.newModel.columnToPredict == '') { + alert("Molimo Vas da izaberete ulazne i izlazne kolone za mrežu."); + return false; + } + else if (this.newModel.inputColumns.length == 0) { + alert("Molimo Vas da izaberete ulaznu kolonu/kolone za mrežu."); + return false; + } + else if (this.newModel.columnToPredict == '') { + alert("Molimo Vas da izaberete izlaznu kolonu za mrežu."); + return false; + } + for (let i = 0; i < this.newModel.inputColumns.length; i++) { + if (this.newModel.inputColumns[i] == this.newModel.columnToPredict) { + let colName = this.newModel.columnToPredict; + alert("Izabrali ste istu kolonu (" + colName + ") kao ulaznu i izlaznu iz mreže. Korigujte izbor."); + return false; + } + } + return true; + } + + selectThisDataset(dataset: Dataset) { + this.selectedDataset = dataset; + this.existingDatasetSelected = true; + + /*let datasets = document.getElementsByClassName("usersDataset") as HTMLCollection; + for (let i = 0; i < datasets.length; i++) { + if (datasets[i]._id == dataset._id) + }*/ + + + //this.datasetFile = csvRecords; + this.datasets.getDatasetFile(dataset.fileId).subscribe((file: string | undefined) => { + if (file) { + this.datasetFile = this.csv.csvToArray(file, (dataset.delimiter == "razmak") ? " " : (dataset.delimiter == "") ? "," : dataset.delimiter); + } + }); + this.datasetHasHeader = false; + + this.resetCbsAndRbs(); + } + + resetSelectedDataset(): boolean { + const temp = this.selectedDataset; + this.selectedDataset = this.otherDataset; + this.otherDataset = temp; + const tempFile = this.datasetFile; + this.datasetFile = this.otherDatasetFile; + this.otherDatasetFile = tempFile; + return true; + } + resetCbsAndRbs(): boolean { + this.uncheckRbs(); + this.checkAllCbs(); + return true; + } + checkAllCbs() { + let checkboxes: any; + + checkboxes = document.getElementsByName("cbsNew"); + for (let i = 0; i < checkboxes.length; i++) { + (<HTMLInputElement>checkboxes[i]).checked = true; + (<HTMLInputElement>checkboxes[i]).disabled = false; + } + } + uncheckRbs() { + this.selectedOutputColumnVal = ''; + let radiobuttons: any; + + radiobuttons = document.getElementsByName("rbsNew"); + for (let i = 0; i < radiobuttons.length; i++) + (<HTMLInputElement>radiobuttons[i]).checked = false; + } + + refreshMyDatasetList() { + this.models.getMyDatasets().subscribe((datasets) => { + this.myDatasets = datasets; + }); + } + + isNumber(value: string | number): boolean { + return ((value != null) && + (value !== '') && + !isNaN(Number(value.toString()))); + } + + getInputById(id: string): HTMLInputElement { + return document.getElementById(id) as HTMLInputElement; } + arrayColumn = (arr: any[][], n: number) => [...new Set(arr.map(x => x[n]))]; } diff --git a/frontend/src/app/_pages/login-page/login-page.component.css b/frontend/src/app/_pages/browse-datasets/browse-datasets.component.css index e69de29b..e69de29b 100644 --- a/frontend/src/app/_pages/login-page/login-page.component.css +++ b/frontend/src/app/_pages/browse-datasets/browse-datasets.component.css diff --git a/frontend/src/app/_pages/browse-datasets/browse-datasets.component.html b/frontend/src/app/_pages/browse-datasets/browse-datasets.component.html new file mode 100644 index 00000000..fa38a1bc --- /dev/null +++ b/frontend/src/app/_pages/browse-datasets/browse-datasets.component.html @@ -0,0 +1 @@ +<p>browse-datasets works!</p> diff --git a/frontend/src/app/_pages/only-authorized/only-authorized.component.spec.ts b/frontend/src/app/_pages/browse-datasets/browse-datasets.component.spec.ts index 82a01f63..fda74dbe 100644 --- a/frontend/src/app/_pages/only-authorized/only-authorized.component.spec.ts +++ b/frontend/src/app/_pages/browse-datasets/browse-datasets.component.spec.ts @@ -1,20 +1,20 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { OnlyAuthorizedComponent } from './only-authorized.component'; +import { BrowseDatasetsComponent } from './browse-datasets.component'; -describe('OnlyAuthorizedComponent', () => { - let component: OnlyAuthorizedComponent; - let fixture: ComponentFixture<OnlyAuthorizedComponent>; +describe('BrowseDatasetsComponent', () => { + let component: BrowseDatasetsComponent; + let fixture: ComponentFixture<BrowseDatasetsComponent>; beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ OnlyAuthorizedComponent ] + declarations: [ BrowseDatasetsComponent ] }) .compileComponents(); }); beforeEach(() => { - fixture = TestBed.createComponent(OnlyAuthorizedComponent); + fixture = TestBed.createComponent(BrowseDatasetsComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/frontend/src/app/_pages/browse-datasets/browse-datasets.component.ts b/frontend/src/app/_pages/browse-datasets/browse-datasets.component.ts new file mode 100644 index 00000000..dba6c25e --- /dev/null +++ b/frontend/src/app/_pages/browse-datasets/browse-datasets.component.ts @@ -0,0 +1,15 @@ +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 new file mode 100644 index 00000000..b4ac9669 --- /dev/null +++ b/frontend/src/app/_pages/browse-predictors/browse-predictors.component.css @@ -0,0 +1,7 @@ +#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 new file mode 100644 index 00000000..a4ab6e2c --- /dev/null +++ b/frontend/src/app/_pages/browse-predictors/browse-predictors.component.html @@ -0,0 +1,38 @@ + +<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 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)">Otvori</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 new file mode 100644 index 00000000..6d13fedf --- /dev/null +++ b/frontend/src/app/_pages/browse-predictors/browse-predictors.component.spec.ts @@ -0,0 +1,25 @@ +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 new file mode 100644 index 00000000..4f96fc36 --- /dev/null +++ b/frontend/src/app/_pages/browse-predictors/browse-predictors.component.ts @@ -0,0 +1,26 @@ +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.navigateByUrl('/predict?id='+id); + }; + +} diff --git a/frontend/src/app/_pages/only-authorized/only-authorized.component.css b/frontend/src/app/_pages/filter-datasets/filter-datasets.component.css index e69de29b..e69de29b 100644 --- a/frontend/src/app/_pages/only-authorized/only-authorized.component.css +++ b/frontend/src/app/_pages/filter-datasets/filter-datasets.component.css diff --git a/frontend/src/app/_pages/filter-datasets/filter-datasets.component.html b/frontend/src/app/_pages/filter-datasets/filter-datasets.component.html new file mode 100644 index 00000000..84f5ebaf --- /dev/null +++ b/frontend/src/app/_pages/filter-datasets/filter-datasets.component.html @@ -0,0 +1,38 @@ + +<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 new file mode 100644 index 00000000..6ab894fd --- /dev/null +++ b/frontend/src/app/_pages/filter-datasets/filter-datasets.component.spec.ts @@ -0,0 +1,25 @@ +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/filter-datasets/filter-datasets.component.ts b/frontend/src/app/_pages/filter-datasets/filter-datasets.component.ts new file mode 100644 index 00000000..bc13a51c --- /dev/null +++ b/frontend/src/app/_pages/filter-datasets/filter-datasets.component.ts @@ -0,0 +1,39 @@ +import { Component, OnInit } from '@angular/core'; +import { DatasetsService } from 'src/app/_services/datasets.service'; +import Dataset from 'src/app/_data/Dataset'; +import {Router} from '@angular/router' +import { JwtHelperService } from '@auth0/angular-jwt'; +import { CookieService } from 'ngx-cookie-service'; + +@Component({ + selector: 'app-filter-datasets', + templateUrl: './filter-datasets.component.html', + styleUrls: ['./filter-datasets.component.css'] +}) +export class FilterDatasetsComponent implements OnInit { + + publicDatasets?: Dataset[]; + term: string = ""; + constructor(private datasets: DatasetsService,private router:Router, private cookie: CookieService) { + this.datasets.getPublicDatasets().subscribe((datasets) => { + this.publicDatasets = datasets; + }); + } + + ngOnInit(): void { + + } + addDataset(dataset: Dataset):void{ + //this.router.navigateByUrl('/predict?id='+id); + const helper = new JwtHelperService(); + const decodedToken = helper.decodeToken(this.cookie.get("token")); + dataset._id = ""; + dataset.isPublic = false; + dataset.lastUpdated = new Date(); + dataset.username = decodedToken.name; + this.datasets.addDataset(dataset).subscribe((response:string)=>{ + console.log(response); + }); + }; + +} diff --git a/frontend/src/app/_pages/register-page/register-page.component.css b/frontend/src/app/_pages/home/home.component.css index e69de29b..e69de29b 100644 --- a/frontend/src/app/_pages/register-page/register-page.component.css +++ b/frontend/src/app/_pages/home/home.component.css diff --git a/frontend/src/app/_pages/home/home.component.html b/frontend/src/app/_pages/home/home.component.html new file mode 100644 index 00000000..7e895a2d --- /dev/null +++ b/frontend/src/app/_pages/home/home.component.html @@ -0,0 +1,56 @@ +<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> + <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> + + </div> + <h2 class="my-4">Pogledajte javne izvore podataka!</h2> + <app-carousel [items]="publicDatasets"> + + </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"> + </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/login-page/login-page.component.spec.ts b/frontend/src/app/_pages/home/home.component.spec.ts index 9da3aca8..2c5a1726 100644 --- a/frontend/src/app/_pages/login-page/login-page.component.spec.ts +++ b/frontend/src/app/_pages/home/home.component.spec.ts @@ -1,20 +1,20 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { LoginPageComponent } from './login-page.component'; +import { HomeComponent } from './home.component'; -describe('LoginPageComponent', () => { - let component: LoginPageComponent; - let fixture: ComponentFixture<LoginPageComponent>; +describe('HomeComponent', () => { + let component: HomeComponent; + let fixture: ComponentFixture<HomeComponent>; beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ LoginPageComponent ] + declarations: [ HomeComponent ] }) .compileComponents(); }); beforeEach(() => { - fixture = TestBed.createComponent(LoginPageComponent); + fixture = TestBed.createComponent(HomeComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/frontend/src/app/_pages/home/home.component.ts b/frontend/src/app/_pages/home/home.component.ts new file mode 100644 index 00000000..7e4471e8 --- /dev/null +++ b/frontend/src/app/_pages/home/home.component.ts @@ -0,0 +1,45 @@ +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'; + +@Component({ + selector: 'app-home', + templateUrl: './home.component.html', + styleUrls: ['./home.component.css'] +}) +export class HomeComponent implements OnInit { + + publicDatasets: Dataset[]; + publicPredictors: Predictor[]; + + shared = shared; + + constructor() { + this.publicDatasets = [ + 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') + ] + } + + ngOnInit(): void { + } + +} diff --git a/frontend/src/app/_pages/login-page/login-page.component.html b/frontend/src/app/_pages/login-page/login-page.component.html deleted file mode 100644 index 8deb5290..00000000 --- a/frontend/src/app/_pages/login-page/login-page.component.html +++ /dev/null @@ -1,55 +0,0 @@ -<!--<script> - $(document).ready(function(){ - $(".btn").click(function(){ - $("#exampleModal").modal('show'); - }); - - $('#exampleModal').modal({ - backdrop: 'static', - keyboard: false - }); - }); -</script>--> - -<!-- Button trigger modal --> -<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalForLogin" (click)="openModal()"> - Open Modal - </button> - -<!-- -<div style="min-height: 100vh; position: relative;"> - - <div class="container p-5 rounded-3 shadow-sm border" style="max-width: 50em; margin-top: 50px;"> - <h3 class="text-center pb-5">Prijavite se</h3> - <form> - <div class="form-outline mb-4"> - <label class="form-label" for="username">Korisničko ime</label> - <input [(ngModel)]="username" name="username" type="text" id="username" - class="form-control form-control-lg" placeholder="Unesite korisničko ime..." /> - </div> - - <div class="form-outline mb-3"> - <label class="form-label" for="password">Lozinka</label> - <input [(ngModel)]="password" name="password" type="password" id="password" - class="form-control form-control-lg" placeholder="Unesite lozinku..." /> - </div> - - <div class="text-center text-lg-start mt-4 pt-2"> - <p *ngIf="wrongCreds" class="small fw-bold mt-2 pt-1 mb-0 text-danger">Lozinka ili e-mail su pogrešni - </p> - <br> - - <button type="button" class="btn btn-primary btn-lg" - style="padding-left: 2.5rem; padding-right: 2.5rem;" (click)="onSubmit()">Prijava - </button> - - <br> - <p class="small fw-bold mt-2 pt-1 mb-0">Još uvek nemate nalog? - <a routerLink="/register" class="link-danger">Registrujte se</a> - </p> - </div> - </form> - </div> - -</div> --->
\ No newline at end of file diff --git a/frontend/src/app/_pages/login-page/login-page.component.ts b/frontend/src/app/_pages/login-page/login-page.component.ts deleted file mode 100644 index e5366283..00000000 --- a/frontend/src/app/_pages/login-page/login-page.component.ts +++ /dev/null @@ -1,63 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { Router } from '@angular/router'; -import { CookieService } from 'ngx-cookie-service'; -import { AuthService } from 'src/app/_services/auth.service'; - -import { LoginModalComponent } from 'src/app/_modals/login-modal/login-modal.component'; -import { MDBModalRef, MDBModalService } from 'ng-uikit-pro-standard'; - - -declare var window: any; - -@Component({ - selector: 'app-login-page', - templateUrl: './login-page.component.html', - styleUrls: ['./login-page.component.css'], - -}) -export class LoginPageComponent{ - - modalRef?: MDBModalRef; - - //email: string = ''; - username: string = ''; - password: string = ''; - - public wrongCreds: boolean = false; //RAZMOTRITI - //public notApproved: boolean = false; //RAZMOTRITI - - formModal: any; - - constructor( - private authService: AuthService, - private cookie: CookieService, - private router: Router, - private modalService: MDBModalService - ) { } - - openModal() { - //this.modalRef = this.modalService.show(LoginModalComponent); - } - /* - ngOnInit(): void { - this.formModal = new window.bootstrap.Modal( - document.getElementById("exampleModal") - ); - } - - openModal() { - this.formModal.show(); - //console.log("ok"); - //(<HTMLInputElement>document.getElementById("exampleModal")).style.display = "block"; - } - - onSubmit() { - - this.authService.login(this.username, this.password).subscribe((response) => { - console.log(response); - this.cookie.set('token', response); - this.router.navigate(['add-model']); - }); - } -*/ -} diff --git a/frontend/src/app/_pages/my-datasets/my-datasets.component.css b/frontend/src/app/_pages/my-datasets/my-datasets.component.css new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/frontend/src/app/_pages/my-datasets/my-datasets.component.css diff --git a/frontend/src/app/_pages/my-datasets/my-datasets.component.html b/frontend/src/app/_pages/my-datasets/my-datasets.component.html new file mode 100644 index 00000000..623b9ac8 --- /dev/null +++ b/frontend/src/app/_pages/my-datasets/my-datasets.component.html @@ -0,0 +1,5 @@ +<ul class="list-group my-2"> + <li class="list-group-item" *ngFor="let dataset of myDatasets"> + <app-item-dataset [dataset]="dataset"></app-item-dataset> + </li> +</ul>
\ 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/my-datasets/my-datasets.component.spec.ts new file mode 100644 index 00000000..fc1fc3f3 --- /dev/null +++ b/frontend/src/app/_pages/my-datasets/my-datasets.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MyDatasetsComponent } from './my-datasets.component'; + +describe('MyDatasetsComponent', () => { + let component: MyDatasetsComponent; + let fixture: ComponentFixture<MyDatasetsComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ MyDatasetsComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(MyDatasetsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_pages/my-datasets/my-datasets.component.ts b/frontend/src/app/_pages/my-datasets/my-datasets.component.ts new file mode 100644 index 00000000..13b0c47b --- /dev/null +++ b/frontend/src/app/_pages/my-datasets/my-datasets.component.ts @@ -0,0 +1,24 @@ +import { Component, OnInit } from '@angular/core'; +import Dataset from 'src/app/_data/Dataset'; + +@Component({ + selector: 'app-my-datasets', + templateUrl: './my-datasets.component.html', + styleUrls: ['./my-datasets.component.css'] +}) +export class MyDatasetsComponent implements OnInit { + + myDatasets?: Dataset[]; + + constructor() { + this.myDatasets = [ + new Dataset('Titanik', 'Opis titanik', ['K1', 'K2', 'K3', 'Ime', 'Preziveli']), + new Dataset('Neki drugi set', 'opis', ['a', 'b', 'c']), + new Dataset('Treci set', 'opis', ['a', 'b', 'c']) + ]; + } + + ngOnInit(): void { + } + +} diff --git a/frontend/src/app/_pages/my-models/my-models.component.css b/frontend/src/app/_pages/my-models/my-models.component.css new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/frontend/src/app/_pages/my-models/my-models.component.css diff --git a/frontend/src/app/_pages/my-models/my-models.component.html b/frontend/src/app/_pages/my-models/my-models.component.html new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/frontend/src/app/_pages/my-models/my-models.component.html diff --git a/frontend/src/app/_pages/my-models/my-models.component.spec.ts b/frontend/src/app/_pages/my-models/my-models.component.spec.ts new file mode 100644 index 00000000..e431d04c --- /dev/null +++ b/frontend/src/app/_pages/my-models/my-models.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MyModelsComponent } from './my-models.component'; + +describe('MyModelsComponent', () => { + let component: MyModelsComponent; + let fixture: ComponentFixture<MyModelsComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ MyModelsComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(MyModelsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_pages/my-models/my-models.component.ts b/frontend/src/app/_pages/my-models/my-models.component.ts new file mode 100644 index 00000000..e9bc52de --- /dev/null +++ b/frontend/src/app/_pages/my-models/my-models.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-my-models', + templateUrl: './my-models.component.html', + styleUrls: ['./my-models.component.css'] +}) +export class MyModelsComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/frontend/src/app/_pages/my-predictors/my-predictors.component.css b/frontend/src/app/_pages/my-predictors/my-predictors.component.css new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/frontend/src/app/_pages/my-predictors/my-predictors.component.css diff --git a/frontend/src/app/_pages/my-predictors/my-predictors.component.html b/frontend/src/app/_pages/my-predictors/my-predictors.component.html new file mode 100644 index 00000000..32d085af --- /dev/null +++ b/frontend/src/app/_pages/my-predictors/my-predictors.component.html @@ -0,0 +1 @@ +<p>my-predictors works!</p> diff --git a/frontend/src/app/_pages/register-page/register-page.component.spec.ts b/frontend/src/app/_pages/my-predictors/my-predictors.component.spec.ts index 347fe9f4..37dddf6d 100644 --- a/frontend/src/app/_pages/register-page/register-page.component.spec.ts +++ b/frontend/src/app/_pages/my-predictors/my-predictors.component.spec.ts @@ -1,20 +1,20 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { RegisterPageComponent } from './register-page.component'; +import { MyPredictorsComponent } from './my-predictors.component'; -describe('RegisterPageComponent', () => { - let component: RegisterPageComponent; - let fixture: ComponentFixture<RegisterPageComponent>; +describe('MyPredictorsComponent', () => { + let component: MyPredictorsComponent; + let fixture: ComponentFixture<MyPredictorsComponent>; beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ RegisterPageComponent ] + declarations: [ MyPredictorsComponent ] }) .compileComponents(); }); beforeEach(() => { - fixture = TestBed.createComponent(RegisterPageComponent); + fixture = TestBed.createComponent(MyPredictorsComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/frontend/src/app/_pages/my-predictors/my-predictors.component.ts b/frontend/src/app/_pages/my-predictors/my-predictors.component.ts new file mode 100644 index 00000000..b0d6e9dd --- /dev/null +++ b/frontend/src/app/_pages/my-predictors/my-predictors.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-my-predictors', + templateUrl: './my-predictors.component.html', + styleUrls: ['./my-predictors.component.css'] +}) +export class MyPredictorsComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/frontend/src/app/_pages/only-authorized/only-authorized.component.html b/frontend/src/app/_pages/only-authorized/only-authorized.component.html deleted file mode 100644 index 27bbcf09..00000000 --- a/frontend/src/app/_pages/only-authorized/only-authorized.component.html +++ /dev/null @@ -1 +0,0 @@ -<p>only-authorized works!</p> diff --git a/frontend/src/app/_pages/only-authorized/only-authorized.component.ts b/frontend/src/app/_pages/only-authorized/only-authorized.component.ts deleted file mode 100644 index be88365f..00000000 --- a/frontend/src/app/_pages/only-authorized/only-authorized.component.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -@Component({ - selector: 'app-only-authorized', - templateUrl: './only-authorized.component.html', - styleUrls: ['./only-authorized.component.css'] -}) -export class OnlyAuthorizedComponent implements OnInit { - - constructor() { } - - ngOnInit(): void { - } - -} diff --git a/frontend/src/app/_pages/predict/predict.component.css b/frontend/src/app/_pages/predict/predict.component.css new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/frontend/src/app/_pages/predict/predict.component.css diff --git a/frontend/src/app/_pages/predict/predict.component.html b/frontend/src/app/_pages/predict/predict.component.html new file mode 100644 index 00000000..74a83b71 --- /dev/null +++ b/frontend/src/app/_pages/predict/predict.component.html @@ -0,0 +1 @@ +<p>predict works!</p> diff --git a/frontend/src/app/_pages/predict/predict.component.spec.ts b/frontend/src/app/_pages/predict/predict.component.spec.ts new file mode 100644 index 00000000..65871ecc --- /dev/null +++ b/frontend/src/app/_pages/predict/predict.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PredictComponent } from './predict.component'; + +describe('PredictComponent', () => { + let component: PredictComponent; + let fixture: ComponentFixture<PredictComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ PredictComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(PredictComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_pages/predict/predict.component.ts b/frontend/src/app/_pages/predict/predict.component.ts new file mode 100644 index 00000000..0e313c65 --- /dev/null +++ b/frontend/src/app/_pages/predict/predict.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-predict', + templateUrl: './predict.component.html', + styleUrls: ['./predict.component.css'] +}) +export class PredictComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/frontend/src/app/_pages/profile/profile.component.css b/frontend/src/app/_pages/profile/profile.component.css new file mode 100644 index 00000000..5565d105 --- /dev/null +++ b/frontend/src/app/_pages/profile/profile.component.css @@ -0,0 +1,44 @@ +body{margin-top:20px; +background-color:#f2f6fc; +color:#69707a; +} +.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 { + 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); +} +.form-control, .dataTable-input { + display: block; + 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; +} diff --git a/frontend/src/app/_pages/profile/profile.component.html b/frontend/src/app/_pages/profile/profile.component.html new file mode 100644 index 00000000..d082a003 --- /dev/null +++ b/frontend/src/app/_pages/profile/profile.component.html @@ -0,0 +1,137 @@ +<div class="container-xl px-4 mt-1"> + <hr class="mt-0 mb-4"> + + <div class="row"> + <div class="col-xl-4"> + <!-- Profile picture card--> + <div class="card mb-4 mb-xl-0"> + <div class="card-header">Moj profil</div> + <div class="card-body text-center"> + <div class=" image d-flex flex-column justify-content-center align-items-center"> + <!-- Profile picture image--> + <img class="img-account-profile rounded-circle mb-2" src="{{this.photoPath}}" alt="profilePicture"> + <!-- User's info --> + <span>@ {{this.user.username}}</span> + <span class="mt-3" style="font-weight: bold;">{{this.user.firstName}} {{this.user.lastName}}</span> + </div> + </div> + </div> + + <!-- Password Change card --> + <div class="card mt-3"> + <div class="card-header">Promena lozinke</div> + <div class="card-body"> + <form> + <div class="row"> + <!-- Form Row--> + <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> + </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> + </div> + </div> + + <!-- Form Row--> + <div class="row gx-3 mb-3"> + <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> + </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> + </div> + </div> + </div> + </form> + </div> + </div> + </div> + + <!-- Info Change card --> + <div class="col-xl-8"> + <!-- Account details card--> + <div class="card mb-4"> + <div class="card-header">Osnovni podaci</div> + <div class="card-body"> + <form> + <!-- Form Row--> + <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"> + </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"> + </div> + </div> + + <!-- Form Row--> + <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"> + </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"> + </div> + </div> + + <div> + <label class="small mt-2 mb-3">Kliknite na sliku kako biste je odabrali za profilnu:</label> + + <div class="container"> + <div class="card-group"> + <!--bootstrap card with 3 horizontal images--> + <div class="row overflow-auto" style="max-height: 200px;"> + <div class="card col-md-3" *ngFor="let picture of this.pictures" (click)="this.photoId = picture.photoId.toString()" + [ngClass]="{'selectedPicture': this.photoId == picture.photoId.toString()}"> + <img src="{{picture.path}}"> + </div> + </div> + </div> + </div> + </div> + + <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> + </div> + </div> + </form> + </div> + </div> + </div> + </div> + + + <div class="row"> + <div class="col-xl-4"> + + </div> + </div> + + + + + +</div>
\ No newline at end of file diff --git a/frontend/src/app/_pages/profile/profile.component.spec.ts b/frontend/src/app/_pages/profile/profile.component.spec.ts new file mode 100644 index 00000000..e88012e7 --- /dev/null +++ b/frontend/src/app/_pages/profile/profile.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ProfileComponent } from './profile.component'; + +describe('ProfileComponent', () => { + let component: ProfileComponent; + let fixture: ComponentFixture<ProfileComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ProfileComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ProfileComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_pages/profile/profile.component.ts b/frontend/src/app/_pages/profile/profile.component.ts new file mode 100644 index 00000000..3e9a0d11 --- /dev/null +++ b/frontend/src/app/_pages/profile/profile.component.ts @@ -0,0 +1,165 @@ +import { Component, OnInit } from '@angular/core'; +import User from 'src/app/_data/User'; +import { UserInfoService } from 'src/app/_services/user-info.service'; +import { AuthService } from 'src/app/_services/auth.service'; +import { Router } from '@angular/router'; +import { PICTURES } from 'src/app/_data/ProfilePictures'; +import { Picture } from 'src/app/_data/ProfilePictures'; +import shared from '../../Shared'; + + +@Component({ + selector: 'app-profile', + templateUrl: './profile.component.html', + styleUrls: ['./profile.component.css'] +}) +export class ProfileComponent implements OnInit { + + user: User = new User(); + pictures: Picture[] = PICTURES; + + username: string = ''; + email: string = ''; + firstName : string = ''; + lastName : string = ''; + oldPass: string = ''; + newPass1: string = ''; + newPass2: string = ''; + photoId: string = ''; + photoPath: string = ''; + + wrongPassBool: boolean = false; + wrongNewPassBool: boolean = false; + + wrongFirstNameBool: boolean = false; + wrongLastNameBool: boolean = false; + wrongUsernameBool: boolean = false; + wrongEmailBool: boolean = false; + wrongOldPassBool: boolean = false; + wrongNewPass1Bool: boolean = false; + wrongNewPass2Bool: boolean = false; + + pattName: RegExp = /^[a-zA-ZšŠđĐčČćĆžŽ]+([ \-][a-zA-ZšŠđĐčČćĆžŽ]+)*$/; + pattUsername: RegExp = /^[a-zA-Z0-9]{6,18}$/; + pattTwoSpaces: RegExp = / /; + pattEmail: RegExp = /^[a-zA-Z0-9]+([\.\-\+][a-zA-Z0-9]+)*\@([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}$/; + pattPassword: RegExp = /.{6,30}$/; + + + constructor(private userInfoService: UserInfoService, private authService: AuthService, private router: Router) { } + + ngOnInit(): void { + this.userInfoService.getUserInfo().subscribe((response) => { + + this.user = response; + shared.photoId = this.user.photoId; + + this.username = this.user.username; + this.email = this.user.email; + this.firstName = this.user.firstName; + this.lastName = this.user.lastName; + this.photoId = this.user.photoId; + + for (let i = 0; i < this.pictures.length; i++) { + if (this.pictures[i].photoId.toString() === this.photoId) { + this.photoPath = this.pictures[i].path; + break; + } + } + console.log(this.user); + }); + } + + saveInfoChanges() { + let editedUser: User = { + _id: this.user._id, + username: this.username, + email: this.email, + password: this.user.password, + firstName: this.firstName, + lastName: this.lastName, + photoId: this.photoId + } + + this.userInfoService.changeUserInfo(editedUser).subscribe((response: any) =>{ + if (this.user.username != editedUser.username) { //promenio username, ide logout + this.user = editedUser; + alert("Nakon promene korisničkog imena, moraćete ponovo da se ulogujete."); + this.authService.logOut(); + this.router.navigate(['']); + return; + } + this.user = editedUser; + console.log(this.user); + this.resetInfo(); + }, (error: any) =>{ + if (error.error == "Username already exists!") { + alert("Ukucano korisničko ime je već zauzeto!\nIzaberite neko drugo."); + (<HTMLSelectElement>document.getElementById("inputUsername")).focus(); + //poruka obavestenja ispod inputa + this.resetInfo(); + } + }); + } + + savePasswordChanges() { + if (this.newPass1 == '' && this.newPass2 == '') //ne zeli da promeni lozinku + return; + console.log("zeli da promeni lozinku"); + + if (this.newPass1 != this.newPass2) { //netacno ponovio novu lozinku + this.wrongNewPassBool = true; + this.resetNewPassInputs(); + console.log("Netacno ponovljena lozinka"); + return; + } + + this.wrongPassBool = false; + this.wrongNewPassBool = false; + + let passwordArray: string[] = [this.oldPass, this.newPass1]; + this.userInfoService.changeUserPassword(passwordArray).subscribe((response: any) => { + console.log("PROMENIO LOZINKU"); + this.resetNewPassInputs(); + alert("Nakon promene lozinke, moraćete ponovo da se ulogujete."); + this.authService.logOut(); + this.router.navigate(['']); + }, (error: any) => { + console.log("error poruka: ", error.error); + if (error.error == 'Wrong old password!') { + this.wrongPassBool = true; + (<HTMLSelectElement>document.getElementById("inputPassword")).focus(); + return; + } + else if (error.error == 'Identical password!') { + alert("Stara i nova lozinka su identične."); + this.resetNewPassInputs(); + (<HTMLSelectElement>document.getElementById("inputNewPassword")).focus(); + return; + } + }); + } + + resetNewPassInputs() { + this.newPass1 = ''; + this.newPass2 = ''; + } + + resetInfo() { + this.username = this.user.username; + this.email = this.user.email; + this.firstName = this.user.firstName; + this.lastName = this.user.lastName; + this.photoId = this.user.photoId; + + for (let i = 0; i < this.pictures.length; i++) { + if (this.pictures[i].photoId.toString() === this.photoId) { + this.photoPath = this.pictures[i].path; + break; + } + } + shared.photoId = this.photoId; + } + + +} diff --git a/frontend/src/app/_pages/register-page/register-page.component.html b/frontend/src/app/_pages/register-page/register-page.component.html deleted file mode 100644 index f8ae046e..00000000 --- a/frontend/src/app/_pages/register-page/register-page.component.html +++ /dev/null @@ -1,80 +0,0 @@ -<div style="min-height: 100vh; position: relative;"> - - <!-- TODO <app-navbar [activeNav]="'register'"></app-navbar>--> - - <div class="container" style="margin-top: 50px;"> - <div class="text-black"> - <div class="row justify-content-center"> - <div class="col-8 bg-white border rounded-3 shadow-sm p-5"> - <p class="text-center h2 fw-bold mb-5 mx-1 mx-md-4">Registracija</p> - - <form class="mx-1 mx-md-4"> - <!--Ime--> - <div class="row"> - <div class="col-6 p-2"> - <label class="form-label" for="firstName">Ime</label> - <input type="text" id="firstName" class="form-control" [(ngModel)]="firstName" name="firstName"> - <p *ngIf="wrongFirstNameBool" class="small fw-bold text-danger">Unesite ispravno ime. (minimum 1, maksimum 30 karaktera)</p> - </div> - <!--Prezime--> - <div class="col-6 p-2"> - <label class="form-label" for="lastName">Prezime</label> - <input type="text" id="lastName" class="form-control" [(ngModel)]="lastName" name="lastName" /> - <p *ngIf="wrongLastNameBool" class="small fw-bold text-danger">Unesite ispravno prezime. (minimum 1, maksimum 30 karaktera)</p> - </div> - </div> - <br> - - <div class="row"> - <!--Korisnicko ime--> - <div class="col-6 p-2"> - <label class="form-label" for="nickName">Korisničko ime</label> - <input type="text" id="nickName" class="form-control" [(ngModel)]="nickName" name="nickName" /> - <p *ngIf="wrongNickNameBool" class="small fw-bold text-danger">Unesite ispravno korisničko ime.</p> - </div> - <!--Email--> - <div class="col-6 p-2"> - <label class="form-label" for="email">E-mail adresa</label> - <input type="email" id="email" class="form-control" [(ngModel)]="email" name="email" /> - <p *ngIf="wrongEmailBool" class="small fw-bold text-danger">Unesite ispravnu e-mail adresu.</p> - </div> - </div> - <br> - - <div class="row"> - <!-- Lozinka 1. --> - <div class="col-6 p-2"> - <label class="form-label" for="pass1">Lozinka</label> - <input type="password" id="pass1" class="form-control" [(ngModel)]="pass1" name="pass1" /> - <p *ngIf="wrongPass1Bool" class="small fw-bold text-danger">Lozinka se mora sastojati od najmanje 6 karaktera.</p> - </div> - - <!-- Lozinka 2. --> - <div class="col-6 p-2"> - <label class="form-label" for="pass2">Potvrdite lozinku</label> - <input type="password" id="pass2" class="form-control" [(ngModel)]="pass2" name="pass2" /> - <p *ngIf="wrongPass2Bool" class="small fw-bold text-danger">Lozinke se ne podudaraju.</p> - </div> - </div> - - <br><br><br> - <!--Dugme Registruj se--> - <div class="d-flex justify-content-center mx-4 mb-3 mb-lg-4"> - <button type="button" class="btn btn-primary btn-lg" (click)="validation()">Registrujte se</button> - </div> - - <div class="form-check d-flex justify-content-center mb-5"> - <label class="form-check-label" class="small fw-bold mt-2 pt-1 mb-0" for="form2Example3"> - Već imate kreiran nalog? - <a routerLink="/login" class="link-danger">Prijavite se</a> - </label> - </div> - </form> - </div> - </div> - </div> - </div> - - <!-- TODO <app-footer></app-footer> --> - -</div>
\ No newline at end of file diff --git a/frontend/src/app/_pages/register-page/register-page.component.ts b/frontend/src/app/_pages/register-page/register-page.component.ts deleted file mode 100644 index 712fc55e..00000000 --- a/frontend/src/app/_pages/register-page/register-page.component.ts +++ /dev/null @@ -1,140 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { Router } from '@angular/router'; -import { AuthService } from 'src/app/_services/auth.service'; - -@Component({ - selector: 'app-register-page', - templateUrl: './register-page.component.html', - styleUrls: ['./register-page.component.css'] -}) -export class RegisterPageComponent implements OnInit { - firstName: string = ''; - lastName: string = ''; - nickName: string = ''; - email: string = ''; - pass1: string = ''; - pass2: string = ''; - - wrongFirstNameBool: boolean = false; - wrongLastNameBool: boolean = false; - wrongNickNameBool: boolean = false; - wrongEmailBool: boolean = false; - wrongPass1Bool: boolean = false; - wrongPass2Bool: boolean = false; - - pattName: RegExp = /^[a-zA-ZšŠđĐčČćĆžŽ]+([ \-][a-zA-ZšŠđĐčČćĆžŽ]+)*$/; - pattTwoSpaces: RegExp = / /; - pattEmail: RegExp = /^[a-zA-Z0-9]+([\.\-\+][a-zA-Z0-9]+)*\@([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}$/; - pattPassword: RegExp = /.{6,30}$/; - - constructor( - private router: Router, - private authService: AuthService, - ) { } - - ngOnInit(): void { - } - - isCorrectName(element: string): boolean { - if (this.pattName.test(element) && !(this.pattTwoSpaces.test(element)) && (element.length >= 1 && element.length <= 30)) - return true; - return false; - } - isCorrectEmail(element: string): boolean { - if (this.pattEmail.test(element.toLowerCase()) && element.length <= 320) - return true; - return false; - } - isCorrectPassword(element: string): boolean { - if (this.pattPassword.test(element)) - return true; - return false; - } - - firstNameValidation() { - if (this.isCorrectName(this.firstName) == true) { - this.wrongFirstNameBool = false; - return; - } - (<HTMLSelectElement>document.getElementById('firstName')).focus(); - this.wrongFirstNameBool = true; - } - lastNameValidation() { - if (this.isCorrectName(this.lastName) == true) { - this.wrongLastNameBool = false; - return; - } - (<HTMLSelectElement>document.getElementById('lastName')).focus(); - this.wrongLastNameBool = true; - } - nickNameValidation() { - if (this.isCorrectName(this.nickName) == true) { - this.wrongNickNameBool = false; - return; - } - (<HTMLSelectElement>document.getElementById('nickName')).focus(); - this.wrongNickNameBool = true; - } - emailValidation() { - if (this.isCorrectEmail(this.email) == true) { - this.wrongEmailBool = false; - return; - } - (<HTMLSelectElement>document.getElementById('email')).focus(); - this.wrongEmailBool = true; - } - passwordValidation() { - if (this.isCorrectPassword(this.pass1) && this.isCorrectPassword(this.pass2) && this.pass1 == this.pass2) { - this.wrongPass1Bool = false; - this.wrongPass2Bool = false; - return; - } - this.pass1 = ''; //brisi obe ukucane lozinke - this.pass2 = ''; - (<HTMLSelectElement>document.getElementById('pass1')).focus(); - this.wrongPass1Bool = true; - this.wrongPass2Bool = true; - } - - validation() { - this.firstName = this.firstName.trim(); - this.lastName = this.lastName.trim(); - this.nickName = this.nickName.trim(); - this.email = this.email.trim(); - - this.firstNameValidation(); - this.lastNameValidation(); - //this.nickNameValidation(); - this.emailValidation(); - this.passwordValidation(); - - if (!(this.wrongFirstNameBool || this.wrongLastNameBool || this.wrongNickNameBool || - this.wrongEmailBool || this.wrongPass1Bool || this.wrongPass2Bool)) { //sve ok, registruj ga - - let user = { - firstName: this.firstName, - lastName: this.lastName, - username: this.nickName, - password: this.pass1, - email: this.email - } - - this.authService.register(user) - .subscribe( - (response) => { - console.log(response); - if (response === 'User added') - this.router.navigate(['/login']); //registracija uspesna, idi na login - else if (response === 'Email Already Exists') - alert('Nalog sa unetim email-om već postoji!'); - else if (response === 'Username Already Exists') - alert('Nalog sa unetim korisnićkim imenom već postoji!'); - } - ); - } - } - - - - -} diff --git a/frontend/src/app/_pages/settings/settings.component.css b/frontend/src/app/_pages/settings/settings.component.css new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/frontend/src/app/_pages/settings/settings.component.css diff --git a/frontend/src/app/_pages/settings/settings.component.html b/frontend/src/app/_pages/settings/settings.component.html new file mode 100644 index 00000000..4ab2a415 --- /dev/null +++ b/frontend/src/app/_pages/settings/settings.component.html @@ -0,0 +1 @@ +<p>settings works!</p> diff --git a/frontend/src/app/_pages/settings/settings.component.spec.ts b/frontend/src/app/_pages/settings/settings.component.spec.ts new file mode 100644 index 00000000..a3a508b0 --- /dev/null +++ b/frontend/src/app/_pages/settings/settings.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SettingsComponent } from './settings.component'; + +describe('SettingsComponent', () => { + let component: SettingsComponent; + let fixture: ComponentFixture<SettingsComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ SettingsComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(SettingsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_pages/settings/settings.component.ts b/frontend/src/app/_pages/settings/settings.component.ts new file mode 100644 index 00000000..19862fb0 --- /dev/null +++ b/frontend/src/app/_pages/settings/settings.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-settings', + templateUrl: './settings.component.html', + styleUrls: ['./settings.component.css'] +}) +export class SettingsComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} |