diff options
Diffstat (limited to 'frontend/src')
136 files changed, 3305 insertions, 571 deletions
diff --git a/frontend/src/app/Shared.ts b/frontend/src/app/Shared.ts new file mode 100644 index 00000000..31afb1a6 --- /dev/null +++ b/frontend/src/app/Shared.ts @@ -0,0 +1,9 @@ +class Shared { + constructor( + public loggedIn: boolean, + public username: string = '', + public photoId: string = '1' + ) { } +} + +export default new Shared(false);
\ No newline at end of file diff --git a/frontend/src/app/_data/Dataset.ts b/frontend/src/app/_data/Dataset.ts new file mode 100644 index 00000000..665df932 --- /dev/null +++ b/frontend/src/app/_data/Dataset.ts @@ -0,0 +1,16 @@ +export default class Dataset { + _id: string = ''; + constructor( + public name: string = 'Novi izvor podataka', + public description: string = '', + public header: string[] = [], + public fileId?: number, + public extension: string = '.csv', + public isPublic: boolean = false, + public accessibleByLink: boolean = false, + public dateCreated: Date = new Date(), + public lastUpdated: Date = new Date(), + public username: string = '', + public delimiter: string = '' + ) { } +}
\ No newline at end of file diff --git a/frontend/src/app/_data/Model.ts b/frontend/src/app/_data/Model.ts index 216e1c36..f6e01d08 100644 --- a/frontend/src/app/_data/Model.ts +++ b/frontend/src/app/_data/Model.ts @@ -1,15 +1,18 @@ export default class Model { + _id: string = ''; constructor( public name: string = 'Novi model', public description: string = '', public dateCreated: Date = new Date(), - public datasetId?: number, + public lastUpdated: Date = new Date(), + public datasetId: string = '', - //Test set settings - public inputColumns: number[] = [0], - public columnToPredict: number = 1, + // Test set settings + public inputColumns: string[] = [], + public columnToPredict: string = '', + public randomOrder: boolean = true, public randomTestSet: boolean = true, - public randomTestSetDistribution: number = 0.10, //0.1-0.9 (10% - 90%) + public randomTestSetDistribution: number = 0.1, //0.1-0.9 (10% - 90%) JESTE OVDE ZAKUCANO 10, AL POSLATO JE KAO 0.1 BACK-U // Neural net training settings public type: ANNType = ANNType.FullyConnected, @@ -22,7 +25,10 @@ export default class Model { public batchSize: number = 5, public inputLayerActivationFunction: ActivationFunction = ActivationFunction.Sigmoid, public hiddenLayerActivationFunction: ActivationFunction = ActivationFunction.Sigmoid, - public outputLayerActivationFunction: ActivationFunction = ActivationFunction.Sigmoid + public outputLayerActivationFunction: ActivationFunction = ActivationFunction.Sigmoid, + public username: string = '', + public nullValues: NullValueOptions = NullValueOptions.DeleteRows, + public nullValuesReplacers = [] ) { } } @@ -31,23 +37,77 @@ export enum ANNType { Convolutional = 'konvoluciona' } +// replaceMissing srednja vrednost mean, median, najcesca vrednost (mode) +// removeOutliers export enum Encoding { Label = 'label', - OneHot = 'one hot' + OneHot = 'one hot', + BackwardDifference = 'backward difference', + BaseN = 'baseN', + Binary = 'binary', + CatBoost = 'cat boost', + Count = 'count', + GLMM = 'glmm', + Hashing = 'hashing', + Helmert = 'helmert', + JamesStein = 'james stein', + LeaveOneOut = 'leave one out', + MEstimate = 'MEstimate', + Ordinal = 'ordinal', + Sum = 'sum', + Polynomial = 'polynomial', + Target = 'target', + WOE = 'woe', + Quantile = 'quantile' } export enum ActivationFunction { + // linear + Binary_Step = 'binaryStep', + Linear = 'linear', + // non-linear Relu = 'relu', + Leaky_Relu = 'leakyRelu', + Parameterised_Relu = 'parameterisedRelu', + Exponential_Linear_Unit = 'exponentialLinearUnit', + Swish = 'swish', Sigmoid = 'sigmoid', Tanh = 'tanh', - Linear = 'linear' + Softmax = 'softmax' } export enum LossFunction { + // binary classification loss functions BinaryCrossEntropy = 'binary_crossentropy', - MeanSquaredError = 'mean_squared_error' + HingeLoss = 'hinge_loss', + // multi-class classiication loss functions + CategoricalCrossEntropy = 'categorical_crossentropy', + KLDivergence = 'kullback_leibler_divergence', + // regression loss functions + MeanSquaredError = 'mean_squared_error', + MeanAbsoluteError = 'mean_absolute_error', + HuberLoss = 'Huber', } export enum Optimizer { - Adam = 'adam' + Adam = 'Adam', + Adadelta = 'Adadelta', + Adagrad = 'Adagrad', + Ftrl = 'Ftrl', + Nadam = 'Nadam', + SGD = 'SGD', + SGDMomentum = 'SGDMomentum', + RMSprop = 'RMSprop' +} + +export enum NullValueOptions { + DeleteRows = 'delete_rows', + DeleteColumns = 'delete_columns', + Replace = 'replace' +} + +export enum ReplaceWith { + None = 'Popuni...', + Mean = 'Srednja vrednost', + Median = 'Medijana' }
\ No newline at end of file diff --git a/frontend/src/app/_data/Predictor.ts b/frontend/src/app/_data/Predictor.ts new file mode 100644 index 00000000..7e902eae --- /dev/null +++ b/frontend/src/app/_data/Predictor.ts @@ -0,0 +1,12 @@ +export default class Predictor { + _id: string = ''; + constructor( + public name: string = 'Novi prediktor', + public description: string = '', + public inputs: string[] = [], + public output: string = '', + public isPublic: boolean = false, + public accessibleByLink: boolean = false, + public dateCreated: Date = new Date() + ) { } +}
\ No newline at end of file diff --git a/frontend/src/app/_data/ProfilePictures.ts b/frontend/src/app/_data/ProfilePictures.ts new file mode 100644 index 00000000..217810d9 --- /dev/null +++ b/frontend/src/app/_data/ProfilePictures.ts @@ -0,0 +1,63 @@ +export class Picture { + photoId!: number; + path!: string; +} + +export const PICTURES = [ + { + photoId: 1, + path: "/assets/profilePictures/1.png" + }, + { + photoId: 2, + path: "/assets/profilePictures/2.png" + }, + { + photoId: 3, + path: "/assets/profilePictures/3.png" + }, + { + photoId: 4, + path: "/assets/profilePictures/4.png" + }, + { + photoId: 5, + path: "/assets/profilePictures/5.png" + }, + { + photoId: 6, + path: "/assets/profilePictures/6.png" + }, + { + photoId: 7, + path: "/assets/profilePictures/7.png" + }, + { + photoId: 8, + path: "/assets/profilePictures/8.png" + }, + { + photoId: 9, + path: "/assets/profilePictures/9.png" + }, + { + photoId: 10, + path: "/assets/profilePictures/10.png" + }, + { + photoId: 11, + path: "/assets/profilePictures/11.png" + }, + { + photoId: 12, + path: "/assets/profilePictures/12.png" + }, + { + photoId: 13, + path: "/assets/profilePictures/13.png" + }, + { + photoId: 14, + path: "/assets/profilePictures/14.png" + } +]
\ No newline at end of file diff --git a/frontend/src/app/_data/User.ts b/frontend/src/app/_data/User.ts new file mode 100644 index 00000000..be42ed0a --- /dev/null +++ b/frontend/src/app/_data/User.ts @@ -0,0 +1,11 @@ +export default class User { + _id?: string = ''; + constructor( + public username: string = '', + public email: string = '', + public password: string = '', + public firstName: string = '', + public lastName: string = '', + public photoId: string = '1' //difoltna profilna slika + ) { } +}
\ No newline at end of file diff --git a/frontend/src/app/_pages/login-page/login-page.component.css b/frontend/src/app/_elements/carousel/carousel.component.css index e69de29b..e69de29b 100644 --- a/frontend/src/app/_pages/login-page/login-page.component.css +++ b/frontend/src/app/_elements/carousel/carousel.component.css diff --git a/frontend/src/app/_elements/carousel/carousel.component.html b/frontend/src/app/_elements/carousel/carousel.component.html new file mode 100644 index 00000000..755899a7 --- /dev/null +++ b/frontend/src/app/_elements/carousel/carousel.component.html @@ -0,0 +1,14 @@ +<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/_pages/login-page/login-page.component.spec.ts b/frontend/src/app/_elements/carousel/carousel.component.spec.ts index 9da3aca8..9196e044 100644 --- a/frontend/src/app/_pages/login-page/login-page.component.spec.ts +++ b/frontend/src/app/_elements/carousel/carousel.component.spec.ts @@ -1,20 +1,20 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { LoginPageComponent } from './login-page.component'; +import { CarouselComponent } from './carousel.component'; -describe('LoginPageComponent', () => { - let component: LoginPageComponent; - let fixture: ComponentFixture<LoginPageComponent>; +describe('CarouselComponent', () => { + let component: CarouselComponent; + let fixture: ComponentFixture<CarouselComponent>; beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ LoginPageComponent ] + declarations: [ CarouselComponent ] }) .compileComponents(); }); beforeEach(() => { - fixture = TestBed.createComponent(LoginPageComponent); + fixture = TestBed.createComponent(CarouselComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/frontend/src/app/_elements/carousel/carousel.component.ts b/frontend/src/app/_elements/carousel/carousel.component.ts new file mode 100644 index 00000000..ed4fa4a5 --- /dev/null +++ b/frontend/src/app/_elements/carousel/carousel.component.ts @@ -0,0 +1,17 @@ +import { Component, Input, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-carousel', + templateUrl: './carousel.component.html', + styleUrls: ['./carousel.component.css'] +}) +export class CarouselComponent { + + @Input() items: any[] = []; + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/frontend/src/app/_elements/dataset-load/dataset-load.component.css b/frontend/src/app/_elements/dataset-load/dataset-load.component.css index e69de29b..05819702 100644 --- a/frontend/src/app/_elements/dataset-load/dataset-load.component.css +++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.css @@ -0,0 +1,6 @@ +#divInputs { + margin-left: 20px; +} +#divOutputs { + margin-left: 20px; +}
\ No newline at end of file diff --git a/frontend/src/app/_elements/dataset-load/dataset-load.component.html b/frontend/src/app/_elements/dataset-load/dataset-load.component.html index c89add43..3ac43f73 100644 --- a/frontend/src/app/_elements/dataset-load/dataset-load.component.html +++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.html @@ -1,42 +1,44 @@ <div> - <input style="display: inline-block; width:350px;" list=delimiterOptions - placeholder="Izaberite ili ukucajte delimiter za .csv fajl" class="form-control" [(ngModel)]="delimiter" - (input)="update()"> - <datalist id=delimiterOptions> - <option *ngFor="let option of delimiterOptions">{{option}}</option> - </datalist> - - <label for="checkboxHeader">Da li .csv ima header?</label> - <input (input)="update()" [(ngModel)]="hasHeader" type="checkbox" value="" id="checkboxHeader" checked> - <br><br> + <div class="row mb-4"> + <div class="col-2"> + </div> + <div class="col-3"> + <label for="name" class="col-form-label">Naziv dataseta:</label> + <input type="text" class="form-control mb-1" name="name" placeholder="Naziv..." [(ngModel)]="dataset.name"> - <input id="fileInput" class="form-control mb-5" type="file" class="upload" (change)="changeListener($event)" accept=".csv"> + <label for="desc" class="col-sm-2 col-form-label">Opis:</label> + <div> + <textarea class="form-control" name="desc" rows="3" [(ngModel)]="dataset.description"></textarea> + </div> - <table *ngIf="csvRecords.length > 0 && hasHeader" class="table table-bordered table-light mt-5"> - <thead> - <tr> - <th *ngFor="let item of csvRecords[0]; let i = index">{{item}}</th> - </tr> - </thead> - <tbody> - <tr *ngFor="let row of csvRecords | slice:1:11"> - <td *ngFor="let col of row">{{col}}</td> - </tr> - </tbody> - </table> + <label for="checkboxIsPublic" class="form-check-label mt-3 mb-1">Želite li da dataset bude javan? + <input class="mx-3 form-check-input" type="checkbox" [(ngModel)]="dataset.isPublic" (change)="checkAccessible()" type="checkbox" + value="" id="checkboxIsPublic"> + </label> + + <label for="checkboxAccessibleByLink" class="form-check-label">Želite li da bude deljiv linkom? + <input class="mx-3 form-check-input" type="checkbox" [(ngModel)]="dataset.accessibleByLink" type="checkbox" + value="" id="checkboxAccessibleByLink"> + </label> + </div> + <div class="col-1"> + </div> + <div class="col-4 mt-4"> - <table *ngIf="csvRecords.length > 0 && !hasHeader" class="table table-bordered table-light mt-5"> - <tbody> - <tr *ngFor="let row of csvRecords | slice:0:10"> - <td *ngFor="let col of row">{{col}}</td> - </tr> - </tbody> - </table> + <input list=delimiterOptions placeholder="Izaberite ili ukucajte delimiter za .csv fajl" class="form-control mt-2" + [(ngModel)]="dataset.delimiter" (input)="update()"> + <datalist id=delimiterOptions> + <option *ngFor="let option of delimiterOptions">{{option}}</option> + </datalist> - <div *ngIf="csvRecords.length > 0" id="info"> - . . . <br> - {{rowsNumber}} x {{colsNumber}} + <label for="type" class="form-check-label my-5">Da li .csv ima header? + <input class="mx-3 form-check-input" type="checkbox" (input)="update()" [(ngModel)]="hasHeader" type="checkbox" + value="" id="checkboxHeader" checked> + </label> + <br> + <input id="fileInput" class="form-control" type="file" class="upload" (change)="changeListener($event)" + accept=".csv"> + </div> </div> - </div>
\ No newline at end of file diff --git a/frontend/src/app/_elements/dataset-load/dataset-load.component.ts b/frontend/src/app/_elements/dataset-load/dataset-load.component.ts index 843a5709..e7b19f9a 100644 --- a/frontend/src/app/_elements/dataset-load/dataset-load.component.ts +++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.ts @@ -1,5 +1,6 @@ -import { Component, ViewChild } from '@angular/core'; +import { Component, EventEmitter, Output, ViewChild } from '@angular/core'; import { NgxCsvParser, NgxCSVParserError } from 'ngx-csv-parser'; +import Dataset from 'src/app/_data/Dataset'; @Component({ selector: 'app-dataset-load', @@ -8,25 +9,37 @@ import { NgxCsvParser, NgxCSVParserError } from 'ngx-csv-parser'; }) export class DatasetLoadComponent { - delimiter: string = ""; + @Output() loaded = new EventEmitter<string>(); + delimiterOptions: Array<string> = [",", ";", "\t", "razmak", "|"]; //podrazumevano "," hasHeader: boolean = true; - - slice: string = ""; + hasInput: boolean = false; csvRecords: any[] = []; - files: any[] = []; + files: File[] = []; rowsNumber: number = 0; colsNumber: number = 0; + dataset: Dataset; + constructor(private ngxCsvParser: NgxCsvParser) { + this.dataset = new Dataset(); } @ViewChild('fileImportInput', { static: false }) fileImportInput: any; changeListener($event: any): void { this.files = $event.srcElement.files; + if (this.files.length == 0 || this.files[0] == null) { + //console.log("NEMA FAJLA"); + //this.loaded.emit("not loaded"); + this.hasInput = false; + return; + } + else + this.hasInput = true; + this.update(); } @@ -35,20 +48,30 @@ export class DatasetLoadComponent { if (this.files.length < 1) return; - this.ngxCsvParser.parse(this.files[0], { header: false, delimiter: (this.delimiter == "razmak") ? " " : (this.delimiter == "") ? "," : this.delimiter}) - .pipe().subscribe((result) => { - - //console.log('Result', result); - if (result.constructor === Array) { - this.csvRecords = result; - if (this.hasHeader) - this.rowsNumber = this.csvRecords.length - 1; - else - this.rowsNumber = this.csvRecords.length; - this.colsNumber = this.csvRecords[0].length; - } - }, (error: NgxCSVParserError) => { - console.log('Error', error); - }); + this.ngxCsvParser.parse(this.files[0], { header: false, delimiter: (this.dataset.delimiter == "razmak") ? " " : (this.dataset.delimiter == "") ? "," : this.dataset.delimiter }) + .pipe().subscribe((result) => { + + console.log('Result', result); + if (result.constructor === Array) { + this.csvRecords = result; + if (this.hasHeader) + this.rowsNumber = this.csvRecords.length - 1; + else + this.rowsNumber = this.csvRecords.length; + this.colsNumber = this.csvRecords[0].length; + + this.dataset.header = this.csvRecords[0]; + + this.loaded.emit("loaded"); + } + }, (error: NgxCSVParserError) => { + console.log('Error', error); + }); } + + checkAccessible() { + if (this.dataset.isPublic) + this.dataset.accessibleByLink = true; + } + } diff --git a/frontend/src/app/_pages/only-authorized/only-authorized.component.css b/frontend/src/app/_elements/datatable/datatable.component.css index e69de29b..e69de29b 100644 --- a/frontend/src/app/_pages/only-authorized/only-authorized.component.css +++ b/frontend/src/app/_elements/datatable/datatable.component.css diff --git a/frontend/src/app/_elements/datatable/datatable.component.html b/frontend/src/app/_elements/datatable/datatable.component.html new file mode 100644 index 00000000..2c469ecc --- /dev/null +++ b/frontend/src/app/_elements/datatable/datatable.component.html @@ -0,0 +1,29 @@ +<div *ngIf="data"> + <div class="table-responsive"> + <table *ngIf="hasHeader" class="table table-bordered table-light mt-4"> + <thead> + <tr> + <th *ngFor="let item of data[0]; let i = index">{{item}}</th> + </tr> + </thead> + <tbody> + <tr *ngFor="let row of data | slice:1:11"> + <td *ngFor="let col of row">{{col}}</td> + </tr> + </tbody> + </table> + + <table *ngIf="data.length > 0 && !hasHeader" class="table table-bordered table-light mt-4"> + <tbody> + <tr *ngFor="let row of data | slice:0:10"> + <td *ngFor="let col of row">{{col}}</td> + </tr> + </tbody> + </table> + </div> + + <div id="info"> + . . . <br> + {{data.length}} x {{data[0].length}} + </div> +</div>
\ No newline at end of file diff --git a/frontend/src/app/_elements/datatable/datatable.component.spec.ts b/frontend/src/app/_elements/datatable/datatable.component.spec.ts new file mode 100644 index 00000000..3cf06160 --- /dev/null +++ b/frontend/src/app/_elements/datatable/datatable.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DatatableComponent } from './datatable.component'; + +describe('DatatableComponent', () => { + let component: DatatableComponent; + let fixture: ComponentFixture<DatatableComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ DatatableComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(DatatableComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_elements/datatable/datatable.component.ts b/frontend/src/app/_elements/datatable/datatable.component.ts new file mode 100644 index 00000000..d3740d83 --- /dev/null +++ b/frontend/src/app/_elements/datatable/datatable.component.ts @@ -0,0 +1,19 @@ +import { Component, Input, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-datatable', + templateUrl: './datatable.component.html', + styleUrls: ['./datatable.component.css'] +}) +export class DatatableComponent implements OnInit { + + @Input() hasHeader?: boolean = true; + + @Input() data?: any[] = []; + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/frontend/src/app/_pages/register-page/register-page.component.css b/frontend/src/app/_elements/item-dataset/item-dataset.component.css index e69de29b..e69de29b 100644 --- a/frontend/src/app/_pages/register-page/register-page.component.css +++ b/frontend/src/app/_elements/item-dataset/item-dataset.component.css diff --git a/frontend/src/app/_elements/item-dataset/item-dataset.component.html b/frontend/src/app/_elements/item-dataset/item-dataset.component.html new file mode 100644 index 00000000..46840cdd --- /dev/null +++ b/frontend/src/app/_elements/item-dataset/item-dataset.component.html @@ -0,0 +1,15 @@ +<div class="card" style="min-width: 12rem;"> + <div class="card-header"> + {{dataset.name}} + </div> + <div class="card-body overflow-hidden"> + <p class="card-text"> + {{dataset.description}} + </p> + <table class="table table-bordered table-sm"> + <thead> + <th scope="col" *ngFor="let column of dataset.header">{{column}}</th> + </thead> + </table> + </div> +</div>
\ No newline at end of file diff --git a/frontend/src/app/_elements/item-dataset/item-dataset.component.spec.ts b/frontend/src/app/_elements/item-dataset/item-dataset.component.spec.ts new file mode 100644 index 00000000..603889b2 --- /dev/null +++ b/frontend/src/app/_elements/item-dataset/item-dataset.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ItemDatasetComponent } from './item-dataset.component'; + +describe('ItemDatasetComponent', () => { + let component: ItemDatasetComponent; + let fixture: ComponentFixture<ItemDatasetComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ItemDatasetComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ItemDatasetComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_elements/item-dataset/item-dataset.component.ts b/frontend/src/app/_elements/item-dataset/item-dataset.component.ts new file mode 100644 index 00000000..e12de34d --- /dev/null +++ b/frontend/src/app/_elements/item-dataset/item-dataset.component.ts @@ -0,0 +1,15 @@ +import { Component, Input, OnInit } from '@angular/core'; +import Dataset from 'src/app/_data/Dataset'; + +@Component({ + selector: 'app-item-dataset', + templateUrl: './item-dataset.component.html', + styleUrls: ['./item-dataset.component.css'] +}) +export class ItemDatasetComponent { + + @Input() dataset: Dataset = new Dataset(); + + constructor() { + } +} diff --git a/frontend/src/app/_elements/item-predictor/item-predictor.component.css b/frontend/src/app/_elements/item-predictor/item-predictor.component.css new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/frontend/src/app/_elements/item-predictor/item-predictor.component.css diff --git a/frontend/src/app/_elements/item-predictor/item-predictor.component.html b/frontend/src/app/_elements/item-predictor/item-predictor.component.html new file mode 100644 index 00000000..92d747e2 --- /dev/null +++ b/frontend/src/app/_elements/item-predictor/item-predictor.component.html @@ -0,0 +1,24 @@ +<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.spec.ts b/frontend/src/app/_elements/item-predictor/item-predictor.component.spec.ts new file mode 100644 index 00000000..b5c2d91c --- /dev/null +++ b/frontend/src/app/_elements/item-predictor/item-predictor.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ItemPredictorComponent } from './item-predictor.component'; + +describe('ItemPredictorComponent', () => { + let component: ItemPredictorComponent; + let fixture: ComponentFixture<ItemPredictorComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ItemPredictorComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ItemPredictorComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_elements/item-predictor/item-predictor.component.ts b/frontend/src/app/_elements/item-predictor/item-predictor.component.ts new file mode 100644 index 00000000..cc782f45 --- /dev/null +++ b/frontend/src/app/_elements/item-predictor/item-predictor.component.ts @@ -0,0 +1,18 @@ +import { Component, Input, OnInit } from '@angular/core'; +import Predictor from 'src/app/_data/Predictor'; + +@Component({ + selector: 'app-item-predictor', + templateUrl: './item-predictor.component.html', + styleUrls: ['./item-predictor.component.css'] +}) +export class ItemPredictorComponent implements OnInit { + + @Input() predictor: Predictor = new Predictor(); + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/frontend/src/app/_elements/navbar/navbar.component.css b/frontend/src/app/_elements/navbar/navbar.component.css new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/frontend/src/app/_elements/navbar/navbar.component.css diff --git a/frontend/src/app/_elements/navbar/navbar.component.html b/frontend/src/app/_elements/navbar/navbar.component.html new file mode 100644 index 00000000..82a1ea07 --- /dev/null +++ b/frontend/src/app/_elements/navbar/navbar.component.html @@ -0,0 +1,50 @@ +<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 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"> + <li><a routerLink="" class="nav-link px-2" + [class]="(currentUrl === '') ? 'text-secondary' : 'text-white'">Početna</a></li> + <li><a routerLink="add-model" class="nav-link px-2" + [class]="(currentUrl === '/add-model') ? 'text-secondary' : 'text-white'">Dodaj model</a></li> + <li><a routerLink="my-predictors" class="nav-link px-2" + [class]="(currentUrl === '/my-predictors') ? 'text-secondary' : 'text-white' + (shared.loggedIn) ? '' : 'disabled'">Predvidi</a> + </li> + </ul> + + <div *ngIf="shared.loggedIn" class="dropdown text-end"> + <a href="#" class="d-block link-light text-decoration-none dropdown-toggle" id="dropdownUser1" + data-bs-toggle="dropdown" aria-expanded="false"> + <img [src]="'/assets/profilePictures/'+ shared.photoId +'.png'" alt="mdo" width="32" height="32" class="rounded-circle"> + </a> + <ul class="dropdown-menu text-small" aria-labelledby="dropdownUser1" + style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate(0px, 34px);" + data-popper-placement="bottom-end"> + <li><a class="dropdown-item" routerLink="add-model">Nov model...</a></li> + <li><a class="dropdown-item" routerLink="settings">Podešavanja</a></li> + <li><a class="dropdown-item" routerLink="profile">Moj profil</a></li> + <li> + <hr class="dropdown-divider"> + </li> + <li><a class="dropdown-item" routerLink="" (click)="logOut()">Odjavi se</a></li> + </ul> + </div> + <div *ngIf="!shared.loggedIn" class="dropdown text-end"> + <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" mat-raised-button color="primary" data-bs-toggle="modal" + data-bs-target="#modalForRegister"> + Registruj se + </button> + </div> + </div> + </div> +</header> + +<app-login-modal></app-login-modal> +<app-register-modal></app-register-modal>
\ No newline at end of file diff --git a/frontend/src/app/_elements/navbar/navbar.component.spec.ts b/frontend/src/app/_elements/navbar/navbar.component.spec.ts new file mode 100644 index 00000000..f8ccd6f4 --- /dev/null +++ b/frontend/src/app/_elements/navbar/navbar.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { NavbarComponent } from './navbar.component'; + +describe('NavbarComponent', () => { + let component: NavbarComponent; + let fixture: ComponentFixture<NavbarComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ NavbarComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(NavbarComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_elements/navbar/navbar.component.ts b/frontend/src/app/_elements/navbar/navbar.component.ts new file mode 100644 index 00000000..2e4bde91 --- /dev/null +++ b/frontend/src/app/_elements/navbar/navbar.component.ts @@ -0,0 +1,36 @@ +import { Component, OnInit } from '@angular/core'; +import { Location } from '@angular/common'; +import { AuthService } from '../../_services/auth.service'; +import shared from 'src/app/Shared'; +import { UserInfoService } from 'src/app/_services/user-info.service'; + +@Component({ + selector: 'app-navbar', + templateUrl: './navbar.component.html', + styleUrls: ['./navbar.component.css'] +}) +export class NavbarComponent implements OnInit { + + currentUrl: string; + shared = shared; + + constructor(public location: Location, private auth: AuthService, private userInfoService: UserInfoService) { + this.currentUrl = this.location.path(); + this.location.onUrlChange(() => { + this.currentUrl = this.location.path(); + }) + } + + ngOnInit(): void { + this.auth.updateUser(); + if (this.auth.isAuthenticated() != false) { + this.userInfoService.getUserInfo().subscribe((response) => { + shared.photoId = response.photoId; + }); + } + } + + logOut() { + this.auth.logOut(); + } +} diff --git a/frontend/src/app/_elements/notifications/notifications.component.css b/frontend/src/app/_elements/notifications/notifications.component.css new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/frontend/src/app/_elements/notifications/notifications.component.css diff --git a/frontend/src/app/_elements/notifications/notifications.component.html b/frontend/src/app/_elements/notifications/notifications.component.html new file mode 100644 index 00000000..27071425 --- /dev/null +++ b/frontend/src/app/_elements/notifications/notifications.component.html @@ -0,0 +1,3 @@ +<div class="position-fixed card card-body bg-dark text-white m-3" style="bottom: 0; right: 0;"> + <h3>Notifikacije</h3> +</div>
\ No newline at end of file diff --git a/frontend/src/app/_elements/notifications/notifications.component.spec.ts b/frontend/src/app/_elements/notifications/notifications.component.spec.ts new file mode 100644 index 00000000..4ae22edc --- /dev/null +++ b/frontend/src/app/_elements/notifications/notifications.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { NotificationsComponent } from './notifications.component'; + +describe('NotificationsComponent', () => { + let component: NotificationsComponent; + let fixture: ComponentFixture<NotificationsComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ NotificationsComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(NotificationsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_elements/notifications/notifications.component.ts b/frontend/src/app/_elements/notifications/notifications.component.ts new file mode 100644 index 00000000..7566828d --- /dev/null +++ b/frontend/src/app/_elements/notifications/notifications.component.ts @@ -0,0 +1,17 @@ +import { Component, OnInit } from '@angular/core'; +import { WebSocketService } from 'src/app/_services/web-socket.service'; + +@Component({ + selector: 'app-notifications', + templateUrl: './notifications.component.html', + styleUrls: ['./notifications.component.css'] +}) +export class NotificationsComponent implements OnInit { + + constructor(private wsService: WebSocketService) { } + + ngOnInit(): void { + // this.wsService.send('test'); + } + +} diff --git a/frontend/src/app/_modals/login-modal/login-modal.component.html b/frontend/src/app/_modals/login-modal/login-modal.component.html index 22f50de2..d7836848 100644 --- a/frontend/src/app/_modals/login-modal/login-modal.component.html +++ b/frontend/src/app/_modals/login-modal/login-modal.component.html @@ -1,14 +1,9 @@ -<!-- Button trigger modal, OVO JE U STVARI DUGME U NAVBARU --> -<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalForLogin" (click)="openModal()"> - Otvori login modal -</button> - <!-- Modal --> <div class="modal fade" id="modalForLogin" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> - <div class="modal-header bg-info"> - <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> + <div class="modal-header" style="background-color: #003459;"> + <button id="closeButton" type="button" class="btn-close" style="background-color:white;" data-bs-dismiss="modal" aria-label="Close" (click)="resetData()"></button> </div> <div class="modal-body px-5" style="color:#003459"> <h1 class="text-center mt-2 mb-4">Prijavite se</h1> @@ -25,25 +20,23 @@ <input [(ngModel)]="password" name="password" type="password" id="password" class="form-control form-control" placeholder="Unesite lozinku..." /> </div> - - <div class="text-center text-lg-start mt-5 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> - </div> </form> + + <div class="text-center text-lg-start mt-5"> + <p *ngIf="wrongCreds" class="small fw-bold text-danger text-center">Unesite ispravan e-mail i lozinku.</p> + </div> + <div class="col-md-12 d-flex justify-content-center"> - <button type="button" class="btn btn-lg btn-info" style="color:white; border-color: #00a8e8; margin-right: 10px;" (click)="doLogin()">Prijavite se</button> - <button type="button" class="btn btn-lg btn-outline-secondary" data-bs-dismiss="modal">Odustanite</button> + <button type="button" class="btn btn-lg" style="color:white; background-color: #003459; margin-right: 10px;" (click)="doLogin()">Prijavite se</button> + <button type="button" class="btn btn-lg btn-outline-secondary" data-bs-dismiss="modal" (click)="resetData()">Odustanite</button> </div> <br> </div> <div class="modal-footer justify-content-center"> <p class="small fw-bold">Još uvek nemate nalog? - <a routerLink="/register" class="link-danger">Registrujte se</a> + <a data-bs-toggle="modal" data-bs-target="#modalForRegister" class="link-danger">Registrujte se</a> </p> </div> </div> </div> -</div> - - +</div>
\ No newline at end of file diff --git a/frontend/src/app/_modals/login-modal/login-modal.component.ts b/frontend/src/app/_modals/login-modal/login-modal.component.ts index 3a6fd8f1..c86c269a 100644 --- a/frontend/src/app/_modals/login-modal/login-modal.component.ts +++ b/frontend/src/app/_modals/login-modal/login-modal.component.ts @@ -1,11 +1,9 @@ import { Component, OnInit, ViewChild } from '@angular/core'; -import { FormControl, FormGroup } from '@angular/forms'; import { Router } from '@angular/router'; import { CookieService } from 'ngx-cookie-service'; import { AuthService } from 'src/app/_services/auth.service'; -import { ElementRef } from '@angular/core'; - -declare var window: any; +import { UserInfoService } from 'src/app/_services/user-info.service'; +import shared from '../../Shared'; @Component({ selector: 'app-login-modal', @@ -14,38 +12,47 @@ declare var window: any; }) export class LoginModalComponent implements OnInit { - loginModal: any; username: string = ''; password: string = ''; - public wrongCreds: boolean = false; //RAZMOTRITI + wrongCreds: boolean = false; constructor( private authService: AuthService, private cookie: CookieService, - private router: Router + private router: Router, + private userInfoService: UserInfoService ) { } ngOnInit(): void { - this.loginModal = new window.bootstrap.Modal( - document.getElementById("modalForLogin") - ); } - openModal() { - this.loginModal.show(); - //console.log("ok"); - //(<HTMLInputElement>document.getElementById("exampleModal")).style.display = "block"; - } doLogin() { - this.authService.login(this.username, this.password).subscribe((response) => { //ako nisu ok podaci, ne ide hide nego mora opet da ukucava!!!!podesi - console.log(response); - this.cookie.set('token', response); - this.loginModal.hide(); //dodato - this.router.navigate(['add-model']); - }); + if (this.username.length > 0 && this.password.length > 0) { + this.authService.login(this.username, this.password).subscribe((response) => { + console.log(response); + + if (response == "Username doesn't exist" || response == "Wrong password") { + this.wrongCreds = true; + this.password = ''; + } + else { + this.authService.authenticate(response); + (<HTMLSelectElement>document.getElementById('closeButton')).click(); + this.userInfoService.getUserInfo().subscribe((response) => { + shared.photoId = response.photoId; + }); + } + }); + } + else { + this.wrongCreds = true; + this.password = ''; + } } - sendToRegister() { - + resetData() { + this.wrongCreds = false; + this.username = ''; + this.password = ''; } } diff --git a/frontend/src/app/_modals/register-modal/register-modal.component.css b/frontend/src/app/_modals/register-modal/register-modal.component.css new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/frontend/src/app/_modals/register-modal/register-modal.component.css diff --git a/frontend/src/app/_modals/register-modal/register-modal.component.html b/frontend/src/app/_modals/register-modal/register-modal.component.html new file mode 100644 index 00000000..68025a46 --- /dev/null +++ b/frontend/src/app/_modals/register-modal/register-modal.component.html @@ -0,0 +1,88 @@ +<!-- Modal --> +<div class="modal fade" id="modalForRegister" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" + aria-labelledby="staticBackdropLabel" aria-hidden="true"> + <div class="modal-dialog modal-dialog-centered modal-dialog modal-lg"> + <div class="modal-content"> + <div class="modal-header" style="background-color: #003459;"> + <button id="closeButtonReg" type="button" class="btn-close" data-bs-dismiss="modal" style="background-color: white;" + aria-label="Close" (click)="resetData()"></button> + </div> + <div class="modal-body" style="color:#003459"> + <h1 class="text-center mt-2 mb-4">Registracija</h1> + + <form class="mx-5"> + <!--Ime--> + <div class="row"> + <div class="col-6 px-3 py-3"> + <label class="form-label" for="firstName">Ime</label> + <input type="text" id="firstName" class="form-control" [(ngModel)]="firstName" + name="firstName" placeholder="Unesite ime..."> + <small *ngIf="wrongFirstNameBool" class="form-text text-danger">Unesite ispravno + ime.</small> + </div> + <!--Prezime--> + <div class="col-6 px-3 py-3"> + <label class="form-label" for="lastName">Prezime</label> + <input type="text" id="lastName" class="form-control" [(ngModel)]="lastName" name="lastName" + placeholder="Unesite prezime..." /> + <small *ngIf="wrongLastNameBool" class="form-text text-danger">Unesite ispravno + prezime.</small> + </div> + </div> + <div class="row"> + <!--Korisnicko ime--> + <div class="col-12 px-3 py-3"> + <label class="form-label" for="username-register">Korisničko ime</label> + <input type="text" id="username-register" class="form-control" [(ngModel)]="username" + name="username-register" placeholder="Unesite korisničko ime..." /> + <small *ngIf="wrongUsernameBool" class="form-text text-danger">Unesite ispravno korisničko + ime.</small> + </div> + </div> + <div class="row"> + <!--Email--> + <div class="col-12 px-3 py-3"> + <label class="form-label" for="email">E-mail adresa</label> + <input type="email" id="email" class="form-control" [(ngModel)]="email" name="email" + placeholder="Unesite email adresu..." /> + <small *ngIf="wrongEmailBool" class="form-text text-danger">Unesite ispravno e-mail + adresu.</small> + </div> + </div> + <div class="row"> + <!-- Lozinka 1. --> + <div class="col-6 px-3 py-3"> + <label class="form-label" for="pass1">Lozinka</label> + <input type="password" id="pass1" class="form-control" [(ngModel)]="pass1" name="pass1" + placeholder="Unesite lozinku..." /> + <small *ngIf="wrongPass1Bool" class="form-text text-danger">Lozinka se mora sastojati od + najmanje 6 karaktera.</small> + </div> + <!-- Lozinka 2. --> + <div class="col-6 px-3 py-3"> + <label class="form-label" for="pass2">Potvrdite lozinku</label> + <input type="password" id="pass2" class="form-control" [(ngModel)]="pass2" name="pass2" + placeholder="Ponovite lozinku..." /> + <small *ngIf="wrongPass2Bool" class="form-text text-danger">Lozinke se ne + podudaraju.</small> + </div> + </div> + </form> + <div class="col-md-12 d-flex justify-content-center mt-5"> + <button type="button" class="btn btn-lg" + style="color:white; background-color: #003459; margin-right: 10px;" + (click)="doRegister()">Registrujte se</button> + <button type="button" class="btn btn-lg btn-outline-secondary" style="margin-left: 15px;" + data-bs-dismiss="modal" (click)="resetData()">Odustanite</button> + </div> + <br> + </div> + <div class="modal-footer justify-content-center"> + <p class="small fw-bold">Već imate kreiran nalog? + <a id="linkToLoginModal" data-bs-toggle="modal" data-bs-target="#modalForLogin" + class="link-danger">Prijavite se</a> + </p> + </div> + </div> + </div> +</div>
\ No newline at end of file diff --git a/frontend/src/app/_modals/register-modal/register-modal.component.spec.ts b/frontend/src/app/_modals/register-modal/register-modal.component.spec.ts new file mode 100644 index 00000000..e371b3d8 --- /dev/null +++ b/frontend/src/app/_modals/register-modal/register-modal.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { RegisterModalComponent } from './register-modal.component'; + +describe('RegisterModalComponent', () => { + let component: RegisterModalComponent; + let fixture: ComponentFixture<RegisterModalComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ RegisterModalComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(RegisterModalComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_pages/register-page/register-page.component.ts b/frontend/src/app/_modals/register-modal/register-modal.component.ts index 712fc55e..13ef7eba 100644 --- a/frontend/src/app/_pages/register-page/register-page.component.ts +++ b/frontend/src/app/_modals/register-modal/register-modal.component.ts @@ -1,45 +1,59 @@ import { Component, OnInit } from '@angular/core'; -import { Router } from '@angular/router'; import { AuthService } from 'src/app/_services/auth.service'; +import User from 'src/app/_data/User'; @Component({ - selector: 'app-register-page', - templateUrl: './register-page.component.html', - styleUrls: ['./register-page.component.css'] + selector: 'app-register-modal', + templateUrl: './register-modal.component.html', + styleUrls: ['./register-modal.component.css'] }) -export class RegisterPageComponent implements OnInit { +export class RegisterModalComponent implements OnInit { + firstName: string = ''; lastName: string = ''; - nickName: string = ''; + username: string = ''; email: string = ''; pass1: string = ''; pass2: string = ''; wrongFirstNameBool: boolean = false; wrongLastNameBool: boolean = false; - wrongNickNameBool: boolean = false; + wrongUsernameBool: boolean = false; wrongEmailBool: boolean = false; wrongPass1Bool: boolean = false; wrongPass2Bool: 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 router: Router, - private authService: AuthService, + private authService: AuthService ) { } ngOnInit(): void { } + doRegister() { + this.validation(); + } + resetData() { + this.firstName = this.lastName = this.username = this.email = this.pass1 = this.pass2 = ''; + this.wrongFirstNameBool = this.wrongLastNameBool = this.wrongUsernameBool = this.wrongEmailBool = this.wrongPass1Bool = this.wrongPass2Bool = false; + } + isCorrectName(element: string): boolean { if (this.pattName.test(element) && !(this.pattTwoSpaces.test(element)) && (element.length >= 1 && element.length <= 30)) return true; return false; } + isCorrectUsername(element: string): boolean { + if (this.pattUsername.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; @@ -67,13 +81,13 @@ export class RegisterPageComponent implements OnInit { (<HTMLSelectElement>document.getElementById('lastName')).focus(); this.wrongLastNameBool = true; } - nickNameValidation() { - if (this.isCorrectName(this.nickName) == true) { - this.wrongNickNameBool = false; + usernameValidation() { + if (this.isCorrectUsername(this.username) == true) { + this.wrongUsernameBool = false; return; } - (<HTMLSelectElement>document.getElementById('nickName')).focus(); - this.wrongNickNameBool = true; + (<HTMLSelectElement>document.getElementById('username-register')).focus(); + this.wrongUsernameBool = true; } emailValidation() { if (this.isCorrectEmail(this.email) == true) { @@ -99,42 +113,53 @@ export class RegisterPageComponent implements OnInit { validation() { this.firstName = this.firstName.trim(); this.lastName = this.lastName.trim(); - this.nickName = this.nickName.trim(); + this.username = this.username.trim(); this.email = this.email.trim(); this.firstNameValidation(); this.lastNameValidation(); - //this.nickNameValidation(); + this.usernameValidation(); this.emailValidation(); this.passwordValidation(); - if (!(this.wrongFirstNameBool || this.wrongLastNameBool || this.wrongNickNameBool || + if (!(this.wrongFirstNameBool || this.wrongLastNameBool || this.wrongUsernameBool || this.wrongEmailBool || this.wrongPass1Bool || this.wrongPass2Bool)) { //sve ok, registruj ga - let user = { + let user: User = { firstName: this.firstName, lastName: this.lastName, - username: this.nickName, + username: this.username, password: this.pass1, - email: this.email + email: this.email, + photoId: "1" } 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') + if (response == 'User added') { + //nakon sto je registrovan, nek bude ulogovan + this.authService.login(this.username, this.pass1).subscribe((response) => { + + this.authService.authenticate(response); + console.log("close button"); + (<HTMLSelectElement>document.getElementById('closeButtonReg')).click(); + //(<HTMLSelectElement>document.getElementById('linkToLoginModal')).click(); + }, (error) => console.warn(error)); + } + 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!'); + (<HTMLSelectElement>document.getElementById('email')).focus(); + } + else if (response == 'Username Already Exists') { + alert('Nalog sa unetim korisničkim imenom već postoji!'); + (<HTMLSelectElement>document.getElementById('username-register')).focus(); + } } ); } } - - } 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/browse-datasets/browse-datasets.component.css b/frontend/src/app/_pages/browse-datasets/browse-datasets.component.css new file mode 100644 index 00000000..e69de29b --- /dev/null +++ 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/filter-datasets/filter-datasets.component.css b/frontend/src/app/_pages/filter-datasets/filter-datasets.component.css new file mode 100644 index 00000000..e69de29b --- /dev/null +++ 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/home/home.component.css b/frontend/src/app/_pages/home/home.component.css new file mode 100644 index 00000000..e69de29b --- /dev/null +++ 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/home/home.component.spec.ts b/frontend/src/app/_pages/home/home.component.spec.ts new file mode 100644 index 00000000..2c5a1726 --- /dev/null +++ b/frontend/src/app/_pages/home/home.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HomeComponent } from './home.component'; + +describe('HomeComponent', () => { + let component: HomeComponent; + let fixture: ComponentFixture<HomeComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ HomeComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(HomeComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); 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/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 { + } + +} diff --git a/frontend/src/app/_services/auth-guard.service.ts b/frontend/src/app/_services/auth-guard.service.ts index b6d3678d..057996e0 100644 --- a/frontend/src/app/_services/auth-guard.service.ts +++ b/frontend/src/app/_services/auth-guard.service.ts @@ -15,7 +15,7 @@ export class AuthGuardService implements CanActivate { if (this.auth.isAuthenticated()) { return true; } - this.router.navigate(['login']); + this.router.navigate(['']); return false; } } diff --git a/frontend/src/app/_services/auth.service.ts b/frontend/src/app/_services/auth.service.ts index c96c2dae..449b8802 100644 --- a/frontend/src/app/_services/auth.service.ts +++ b/frontend/src/app/_services/auth.service.ts @@ -3,6 +3,7 @@ import { HttpClient, HttpHeaders } from '@angular/common/http'; import { JwtHelperService } from '@auth0/angular-jwt'; import { CookieService } from 'ngx-cookie-service'; import { API_SETTINGS } from 'src/config'; +import shared from '../Shared'; const jwtHelper = new JwtHelperService(); @@ -11,6 +12,8 @@ const jwtHelper = new JwtHelperService(); }) export class AuthService { + shared = shared; + constructor(private http: HttpClient, private cookie: CookieService) { } login(username: string, password: string) { @@ -28,4 +31,52 @@ export class AuthService { } return false; } + + lastToken?: string; + refresher: any; + + enableAutoRefresh() { + this.lastToken = this.cookie.get('token'); + let exp = jwtHelper.getTokenExpirationDate(this.lastToken); + if (!exp) { + exp = new Date(); + } + this.refresher = setTimeout(() => { + console.log('refreshing token!'); + this.http.post(`${API_SETTINGS.apiURL}/auth/renewJwt`, {}, { headers: this.authHeader(), responseType: 'text' }).subscribe((response) => { + this.authenticate(response); + }); + }, exp.getTime() - new Date().getTime() - 60000); + } + + authenticate(token: string) { + let exp = jwtHelper.getTokenExpirationDate(token); + if (!exp) { + exp = new Date(); + } + this.cookie.set('token', token, exp); + this.updateUser(); + } + + updateUser() { + if (this.cookie.check('token')) { + const token = this.cookie.get('token'); + const decodedToken = jwtHelper.decodeToken(token); + console.log("decoded:", decodedToken); + this.shared.loggedIn = this.isAuthenticated(); + this.shared.username = decodedToken.name; + this.enableAutoRefresh(); + } + } + + logOut() { + this.cookie.delete('token'); + if (this.refresher) + clearTimeout(this.refresher); + this.shared.loggedIn = false; + } + + authHeader() { + return new HttpHeaders().set("Authorization", "Bearer " + this.cookie.get('token')); + } } diff --git a/frontend/src/app/_services/csv-parse.service.spec.ts b/frontend/src/app/_services/csv-parse.service.spec.ts new file mode 100644 index 00000000..ab685d49 --- /dev/null +++ b/frontend/src/app/_services/csv-parse.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { CsvParseService } from './csv-parse.service'; + +describe('CsvParseService', () => { + let service: CsvParseService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(CsvParseService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_services/csv-parse.service.ts b/frontend/src/app/_services/csv-parse.service.ts new file mode 100644 index 00000000..d53f504e --- /dev/null +++ b/frontend/src/app/_services/csv-parse.service.ts @@ -0,0 +1,53 @@ +import { Injectable } from "@angular/core"; +@Injectable({ providedIn: 'root' }) +export class CsvParseService { + + csvToArray(strData: string, strDelimiter: string): string[][] { + strDelimiter = (strDelimiter || ","); + + let objPattern = new RegExp( + ( + // Delimiters. + "(\\" + strDelimiter + "|\\r?\\n|\\r|^)" + + + // Quoted fields. + "(?:\"([^\"]*(?:\"\"[^\"]*)*)\"|" + + + // Standard fields. + "([^\"\\" + strDelimiter + "\\r\\n]*))" + ), + "gi" + ); + + let arrData: string[][] = [[]]; + + let arrMatches = null; + + while (arrMatches = objPattern.exec(strData)) { + + let strMatchedDelimiter = arrMatches[1]; + + if ( + strMatchedDelimiter.length && + strMatchedDelimiter !== strDelimiter + ) { + arrData.push([]); + } + + let strMatchedValue; + + if (arrMatches[2]) { + strMatchedValue = arrMatches[2].replace( + new RegExp("\"\"", "g"), + "\"" + ); + } else { + strMatchedValue = arrMatches[3]; + } + + arrData[arrData.length - 1].push(strMatchedValue); + } + + return (arrData); + } +}
\ No newline at end of file diff --git a/frontend/src/app/_services/datasets.service.spec.ts b/frontend/src/app/_services/datasets.service.spec.ts new file mode 100644 index 00000000..87b46acd --- /dev/null +++ b/frontend/src/app/_services/datasets.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { DatasetsService } from './datasets.service'; + +describe('DatasetsService', () => { + let service: DatasetsService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(DatasetsService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_services/datasets.service.ts b/frontend/src/app/_services/datasets.service.ts new file mode 100644 index 00000000..35ca24e5 --- /dev/null +++ b/frontend/src/app/_services/datasets.service.ts @@ -0,0 +1,26 @@ +import { HttpClient } from '@angular/common/http'; +import { Injectable } from '@angular/core'; +import { Observable } from 'rxjs'; +import { API_SETTINGS } from 'src/config'; +import Dataset from '../_data/Dataset'; +import { AuthService } from './auth.service'; + +@Injectable({ + providedIn: 'root' +}) +export class DatasetsService { + + constructor(private http: HttpClient, private authService: AuthService) { } + + getPublicDatasets(): Observable<Dataset[]> { + return this.http.get<Dataset[]>(`${API_SETTINGS.apiURL}/dataset/publicdatasets`, { headers: this.authService.authHeader() }); + } + + addDataset(dataset: Dataset): any { + return this.http.post(`${API_SETTINGS.apiURL}/dataset/add`, dataset, { headers: this.authService.authHeader() }); + } + + getDatasetFile(fileId: any): any { + return this.http.get(`${API_SETTINGS.apiURL}/file/download?id=${fileId}`, { headers: this.authService.authHeader(), responseType: 'text' }); + } +} diff --git a/frontend/src/app/_services/models.service.spec.ts b/frontend/src/app/_services/models.service.spec.ts new file mode 100644 index 00000000..b5b25752 --- /dev/null +++ b/frontend/src/app/_services/models.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { ModelsService } from './models.service'; + +describe('ModelsService', () => { + let service: ModelsService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(ModelsService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_services/models.service.ts b/frontend/src/app/_services/models.service.ts new file mode 100644 index 00000000..f629fd2a --- /dev/null +++ b/frontend/src/app/_services/models.service.ts @@ -0,0 +1,45 @@ +import { HttpClient, HttpParams, HttpRequest } from '@angular/common/http'; +import { Injectable } from '@angular/core'; +import Model from '../_data/Model'; +import { AuthService } from './auth.service'; +import { API_SETTINGS } from 'src/config'; +import Dataset from '../_data/Dataset'; +import { Observable } from 'rxjs'; + + +@Injectable({ + providedIn: 'root' +}) +export class ModelsService { + + constructor(private http: HttpClient, private authService: AuthService) { } + + uploadData(file: File): Observable<any> { + let formData = new FormData(); + formData.append('file', file, file.name); + + let params = new HttpParams(); + + const options = { + params: params, + reportProgress: false, + headers: this.authService.authHeader() + }; + + return this.http.post(`${API_SETTINGS.apiURL}/file/csv`, formData, options); + } + + addModel(model: Model): Observable<any> { + return this.http.post(`${API_SETTINGS.apiURL}/model/add`, model, { headers: this.authService.authHeader() }); + } + addDataset(dataset: Dataset): Observable<any> { + return this.http.post(`${API_SETTINGS.apiURL}/dataset/add`, dataset, { headers: this.authService.authHeader() }); + } + trainModel(modelId: string): Observable<any> { + return this.http.post(`${API_SETTINGS.apiURL}/model/train`, modelId, { headers: this.authService.authHeader() }); + } + + getMyDatasets(): Observable<Dataset[]> { + return this.http.get<Dataset[]>(`${API_SETTINGS.apiURL}/dataset/mydatasets`, { headers: this.authService.authHeader() }); + } +} diff --git a/frontend/src/app/_services/predictors.service.spec.ts b/frontend/src/app/_services/predictors.service.spec.ts new file mode 100644 index 00000000..7733780b --- /dev/null +++ b/frontend/src/app/_services/predictors.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { PredictorsService } from './predictors.service'; + +describe('PredictorsService', () => { + let service: PredictorsService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(PredictorsService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_services/predictors.service.ts b/frontend/src/app/_services/predictors.service.ts new file mode 100644 index 00000000..0cd7f0f6 --- /dev/null +++ b/frontend/src/app/_services/predictors.service.ts @@ -0,0 +1,21 @@ +import { HttpClient } from '@angular/common/http'; +import { Injectable } from '@angular/core'; +import { Observable } from 'rxjs'; +import { API_SETTINGS } from 'src/config'; +import Predictor from '../_data/Predictor'; +import { AuthService } from './auth.service'; + +@Injectable({ + providedIn: 'root' +}) +export class PredictorsService { + + + + constructor(private http: HttpClient, private authService: AuthService) { } + + getPublicPredictors(): Observable<Predictor[]> { + return this.http.get<Predictor[]>(`${API_SETTINGS.apiURL}/Predictor/publicpredictors`, { headers: this.authService.authHeader() }); + } + +} diff --git a/frontend/src/app/_services/user-info.service.spec.ts b/frontend/src/app/_services/user-info.service.spec.ts new file mode 100644 index 00000000..a181223a --- /dev/null +++ b/frontend/src/app/_services/user-info.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { UserInfoService } from './user-info.service'; + +describe('UserInfoService', () => { + let service: UserInfoService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(UserInfoService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_services/user-info.service.ts b/frontend/src/app/_services/user-info.service.ts new file mode 100644 index 00000000..7ed2970c --- /dev/null +++ b/frontend/src/app/_services/user-info.service.ts @@ -0,0 +1,30 @@ +import { HttpClient } from '@angular/common/http'; +import { Injectable } from '@angular/core'; +import { Observable } from 'rxjs'; +import { API_SETTINGS } from 'src/config'; +import User from '../_data/User'; +import { AuthService } from './auth.service'; + +@Injectable({ + providedIn: 'root' +}) +export class UserInfoService { + + constructor(private http: HttpClient, private authService: AuthService) { } + + getUserInfo(): Observable<User> { + return this.http.get<User>(`${API_SETTINGS.apiURL}/user/myprofile`, { headers: this.authService.authHeader() }); + } + + changeUserInfo(user: User): any { + return this.http.put(`${API_SETTINGS.apiURL}/user/changeinfo`, user, { headers: this.authService.authHeader() }); + } + + changeUserPassword(passwordArray: string[]): any { + return this.http.put(`${API_SETTINGS.apiURL}/user/changepass`, passwordArray, { headers: this.authService.authHeader(), responseType: 'text' }); + } + + deleteUser(): any { + return this.http.delete(`${API_SETTINGS.apiURL}/user/deleteprofile`, { headers: this.authService.authHeader() }); + } +} diff --git a/frontend/src/app/_services/web-socket.service.spec.ts b/frontend/src/app/_services/web-socket.service.spec.ts new file mode 100644 index 00000000..a86aeca7 --- /dev/null +++ b/frontend/src/app/_services/web-socket.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { WebSocketService } from './web-socket.service'; + +describe('WebSocketService', () => { + let service: WebSocketService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(WebSocketService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_services/web-socket.service.ts b/frontend/src/app/_services/web-socket.service.ts new file mode 100644 index 00000000..890ada6b --- /dev/null +++ b/frontend/src/app/_services/web-socket.service.ts @@ -0,0 +1,39 @@ +import { Injectable } from '@angular/core'; +import { ConstantBackoff, Websocket, WebsocketBuilder } from 'websocket-ts'; +import { API_SETTINGS } from 'src/config'; + +@Injectable({ + providedIn: 'root' +}) +export class WebSocketService { + + ws?: Websocket; + + private handlers: Function[] = []; + + constructor() { + this.ws = new WebsocketBuilder(API_SETTINGS.apiWSUrl) + .withBackoff(new ConstantBackoff(30000)) + .onOpen((i, e) => { console.log('WS: Connected to ' + API_SETTINGS.apiWSUrl) }) + .onMessage((i, e) => { + console.log('WS MESSAGE: ', e.data); + this.handlers.forEach(handler => { + handler(e.data); + }) + }) + .onClose((i, e) => { console.log('WS: Connection closed!') }) + .build(); + } + + send(msg: string) { + this.ws?.send(msg); + } + + addHandler(handler: Function) { + this.handlers.push(handler); + } + + removeHandler(handler: Function) { + this.handlers.splice(this.handlers.indexOf(handler), 1); + } +} diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts index cd86ef5c..1c368318 100644 --- a/frontend/src/app/app-routing.module.ts +++ b/frontend/src/app/app-routing.module.ts @@ -2,19 +2,29 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { AuthGuardService } from './_services/auth-guard.service'; -import { LoginPageComponent } from './_pages/login-page/login-page.component'; -import { OnlyAuthorizedComponent } from './_pages/only-authorized/only-authorized.component'; -import { RegisterPageComponent } from './_pages/register-page/register-page.component'; import { AddModelComponent } from './_pages/add-model/add-model.component'; -import { LoginModalComponent } from './_modals/login-modal/login-modal.component'; +import { HomeComponent } from './_pages/home/home.component'; +import { MyDatasetsComponent } from './_pages/my-datasets/my-datasets.component'; +import { MyModelsComponent } from './_pages/my-models/my-models.component'; +import { MyPredictorsComponent } from './_pages/my-predictors/my-predictors.component'; +import { BrowsePredictorsComponent } from './_pages/browse-predictors/browse-predictors.component'; +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'; +import { FilterDatasetsComponent } from './_pages/filter-datasets/filter-datasets.component'; const routes: Routes = [ - { path: '', redirectTo: '/login', pathMatch: 'full' }, - { path: 'login', component: LoginPageComponent }, - { path: 'register', component: RegisterPageComponent }, - { path: 'only-authorized', component: OnlyAuthorizedComponent, canActivate: [AuthGuardService] }, - { path: 'add-model', component: AddModelComponent }, - { path: 'login-modal-test', component: LoginModalComponent } + { path: '', component: HomeComponent, data: { title: 'Početna strana' } }, + { path: 'add-model', component: AddModelComponent, data: { title: 'Dodaj model' } }, + { path: 'my-datasets', component: MyDatasetsComponent, canActivate: [AuthGuardService], data: { title: 'Moji izvori podataka' } }, + { path: 'my-models', component: MyModelsComponent, canActivate: [AuthGuardService], data: { title: 'Moji modeli' } }, + { path: 'my-predictors', component: MyPredictorsComponent, canActivate: [AuthGuardService], data: { title: 'Moji trenirani modeli' } }, + { path: 'settings', component: SettingsComponent, canActivate: [AuthGuardService], data: { title: 'Podešavanja' } }, + { path: 'profile', component: ProfileComponent, canActivate: [AuthGuardService], data: { title: 'Profil' } }, + { path: 'browse-datasets', component: FilterDatasetsComponent, data: { title: 'Javni izvori podataka' } }, + { path: 'browse-predictors', component: BrowsePredictorsComponent, data: { title: 'Javni trenirani modeli' } }, + { path: 'predict', component: PredictComponent, data: { title: 'Predvidi vrednosti' } } ]; @NgModule({ diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html index 90c6b646..f44a6d00 100644 --- a/frontend/src/app/app.component.html +++ b/frontend/src/app/app.component.html @@ -1 +1,7 @@ -<router-outlet></router-outlet>
\ No newline at end of file +<app-navbar></app-navbar> +<div class="container h-100"> + <router-outlet></router-outlet> + <!--<app-barchart></app-barchart> + <app-scatterchart></app-scatterchart>--> +</div> +<app-notifications></app-notifications>
\ No newline at end of file diff --git a/frontend/src/app/app.component.spec.ts b/frontend/src/app/app.component.spec.ts index 74b5b3eb..d0679f89 100644 --- a/frontend/src/app/app.component.spec.ts +++ b/frontend/src/app/app.component.spec.ts @@ -20,12 +20,6 @@ describe('AppComponent', () => { expect(app).toBeTruthy(); }); - it(`should have as title 'frontend'`, () => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app.title).toEqual('frontend'); - }); - it('should render title', () => { const fixture = TestBed.createComponent(AppComponent); fixture.detectChanges(); diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts index 9d6b2f11..f5ae5786 100644 --- a/frontend/src/app/app.component.ts +++ b/frontend/src/app/app.component.ts @@ -1,10 +1,37 @@ -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; +import { Title } from '@angular/platform-browser'; +import { Router, NavigationEnd, ActivatedRoute } from '@angular/router'; +import { filter, map } from 'rxjs'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) -export class AppComponent { - title = 'frontend'; +export class AppComponent implements OnInit { + + constructor(private router: Router, private titleService: Title) { } + + ngOnInit() { + this.router.events + .pipe( + filter((event) => event instanceof NavigationEnd), + map(() => { + let route: ActivatedRoute = this.router.routerState.root; + let routeTitle = ''; + while (route!.firstChild) { + route = route.firstChild; + } + if (route.snapshot.data['title']) { + routeTitle = route!.snapshot.data['title']; + } + return routeTitle; + }) + ) + .subscribe((title: string) => { + if (title) { + this.titleService.setTitle(`${title} - Igrannonica`); + } + }); + } } diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index d95252ad..4612e3a7 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -3,29 +3,65 @@ import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { AppRoutingModule } from './app-routing.module'; import { HttpClientModule } from '@angular/common/http'; +import { MatSliderModule } from '@angular/material/slider'; +import { MatIconModule } from '@angular/material/icon'; +import { NgChartsModule } from 'ng2-charts'; +import { Ng2SearchPipeModule } from 'ng2-search-filter'; import { AppComponent } from './app.component'; -import { LoginPageComponent } from './_pages/login-page/login-page.component'; -import { RegisterPageComponent } from './_pages/register-page/register-page.component'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; -import { OnlyAuthorizedComponent } from './_pages/only-authorized/only-authorized.component'; import { DatasetLoadComponent } from './_elements/dataset-load/dataset-load.component'; import { AddModelComponent } from './_pages/add-model/add-model.component'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { LoginModalComponent } from './_modals/login-modal/login-modal.component'; +import { ReactiveFormsModule } from '@angular/forms'; +import { RegisterModalComponent } from './_modals/register-modal/register-modal.component'; import { MaterialModule } from './material.module'; -import { ReactiveFormsModule } from '@angular/forms'; +import { HomeComponent } from './_pages/home/home.component'; +import { NavbarComponent } from './_elements/navbar/navbar.component'; +import { ItemPredictorComponent } from './_elements/item-predictor/item-predictor.component'; +import { ItemDatasetComponent } from './_elements/item-dataset/item-dataset.component'; +import { CarouselComponent } from './_elements/carousel/carousel.component'; +import { SettingsComponent } from './_pages/settings/settings.component'; +import { ProfileComponent } from './_pages/profile/profile.component'; +import { MyPredictorsComponent } from './_pages/my-predictors/my-predictors.component'; +import { MyDatasetsComponent } from './_pages/my-datasets/my-datasets.component'; +import { MyModelsComponent } from './_pages/my-models/my-models.component'; +import { BrowseDatasetsComponent } from './_pages/browse-datasets/browse-datasets.component'; +import { BrowsePredictorsComponent } from './_pages/browse-predictors/browse-predictors.component'; +import { PredictComponent } from './_pages/predict/predict.component'; +import { ScatterchartComponent } from './scatterchart/scatterchart.component'; +import { BarchartComponent } from './barchart/barchart.component'; +import { NotificationsComponent } from './_elements/notifications/notifications.component'; +import { DatatableComponent } from './_elements/datatable/datatable.component'; +import { FilterDatasetsComponent } from './_pages/filter-datasets/filter-datasets.component'; @NgModule({ declarations: [ AppComponent, - LoginPageComponent, - RegisterPageComponent, - OnlyAuthorizedComponent, DatasetLoadComponent, AddModelComponent, - LoginModalComponent + LoginModalComponent, + RegisterModalComponent, + HomeComponent, + NavbarComponent, + ItemPredictorComponent, + ItemDatasetComponent, + CarouselComponent, + SettingsComponent, + ProfileComponent, + MyPredictorsComponent, + MyDatasetsComponent, + MyModelsComponent, + BrowseDatasetsComponent, + BrowsePredictorsComponent, + PredictComponent, + ScatterchartComponent, + BarchartComponent, + NotificationsComponent, + DatatableComponent, + FilterDatasetsComponent ], imports: [ BrowserModule, @@ -35,7 +71,11 @@ import { ReactiveFormsModule } from '@angular/forms'; NgbModule, BrowserAnimationsModule, MaterialModule, - ReactiveFormsModule + ReactiveFormsModule, + MatSliderModule, + MatIconModule, + NgChartsModule, + Ng2SearchPipeModule ], providers: [], bootstrap: [AppComponent] diff --git a/frontend/src/app/barchart/barchart.component.css b/frontend/src/app/barchart/barchart.component.css new file mode 100644 index 00000000..c3634c9f --- /dev/null +++ b/frontend/src/app/barchart/barchart.component.css @@ -0,0 +1,6 @@ +#divBarChart{ + background-color: beige; + display: block; + width: 400px; + height: 200px; +} diff --git a/frontend/src/app/barchart/barchart.component.html b/frontend/src/app/barchart/barchart.component.html new file mode 100644 index 00000000..48b7bd3e --- /dev/null +++ b/frontend/src/app/barchart/barchart.component.html @@ -0,0 +1,4 @@ +<p>Bar chart:</p> +<div id="divBarChart"> + <canvas id="Barchart"> </canvas> +</div>
\ No newline at end of file diff --git a/frontend/src/app/barchart/barchart.component.spec.ts b/frontend/src/app/barchart/barchart.component.spec.ts new file mode 100644 index 00000000..8b346d1c --- /dev/null +++ b/frontend/src/app/barchart/barchart.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { BarchartComponent } from './barchart.component'; + +describe('BarchartComponent', () => { + let component: BarchartComponent; + let fixture: ComponentFixture<BarchartComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ BarchartComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(BarchartComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/barchart/barchart.component.ts b/frontend/src/app/barchart/barchart.component.ts new file mode 100644 index 00000000..def64b7d --- /dev/null +++ b/frontend/src/app/barchart/barchart.component.ts @@ -0,0 +1,54 @@ +import { Component, OnInit } from '@angular/core'; +import {Chart} from 'node_modules/chart.js'; + +@Component({ + selector: 'app-barchart', + templateUrl: './barchart.component.html', + styleUrls: ['./barchart.component.css'] +}) +export class BarchartComponent implements OnInit { + + constructor() { } + + ngOnInit(){ + const myChart = new Chart("Barchart", { + type: 'bar', + data: { + labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], + datasets: [{ + label: 'Number of Votes', + data: [12, 19, 3, 5, 2, 3], + backgroundColor: [ + 'rgba(255, 99, 132, 1)', + 'rgba(54, 162, 235, 1)', + 'rgba(255, 206, 86, 1)', + 'rgba(75, 192, 192, 1)', + 'rgba(153, 102, 255, 1)', + 'rgba(255, 159, 64, 1)' + ], + borderColor: [ + 'rgba(255, 99, 132, 1)', + 'rgba(54, 162, 235, 1)', + 'rgba(255, 206, 86, 1)', + 'rgba(75, 192, 192, 1)', + 'rgba(153, 102, 255, 1)', + 'rgba(255, 159, 64, 1)' + ], + borderWidth: 1 + }] + }, + options: { + scales: { + y: { + beginAtZero: true + } + } + } + + + }); + + + } + +} diff --git a/frontend/src/app/scatterchart/scatterchart.component.css b/frontend/src/app/scatterchart/scatterchart.component.css new file mode 100644 index 00000000..5735217e --- /dev/null +++ b/frontend/src/app/scatterchart/scatterchart.component.css @@ -0,0 +1,6 @@ +#divScatterChart{ + background-color: beige; + display: block; + width: 400px; + height: 200px; +}
\ No newline at end of file diff --git a/frontend/src/app/scatterchart/scatterchart.component.html b/frontend/src/app/scatterchart/scatterchart.component.html new file mode 100644 index 00000000..2b30fe1f --- /dev/null +++ b/frontend/src/app/scatterchart/scatterchart.component.html @@ -0,0 +1,4 @@ +<p>Scatter chart:</p> +<div id="divScatterChart"> + <canvas id="ScatterCharts"> </canvas> +</div>
\ No newline at end of file diff --git a/frontend/src/app/scatterchart/scatterchart.component.spec.ts b/frontend/src/app/scatterchart/scatterchart.component.spec.ts new file mode 100644 index 00000000..1db81051 --- /dev/null +++ b/frontend/src/app/scatterchart/scatterchart.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ScatterchartComponent } from './scatterchart.component'; + +describe('ScatterchartComponent', () => { + let component: ScatterchartComponent; + let fixture: ComponentFixture<ScatterchartComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ScatterchartComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ScatterchartComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/scatterchart/scatterchart.component.ts b/frontend/src/app/scatterchart/scatterchart.component.ts new file mode 100644 index 00000000..1da88fe7 --- /dev/null +++ b/frontend/src/app/scatterchart/scatterchart.component.ts @@ -0,0 +1,32 @@ +import { Component, OnInit } from '@angular/core'; +import {Chart} from 'node_modules/chart.js'; + +@Component({ + selector: 'app-scatterchart', + templateUrl: './scatterchart.component.html', + styleUrls: ['./scatterchart.component.css'] +}) +export class ScatterchartComponent implements OnInit { + + constructor() { } + + ngOnInit(){ + const myChart = new Chart("ScatterCharts", { + type: 'scatter', + data: { + datasets: [{ + label: 'Scatter Example:', + data: [{x: 1, y: 11}, {x:2, y:12}, {x: 1, y: 2}, {x: 2, y: 4}, {x: 3, y: 8},{x: 4, y: 16}, {x: 1, y: 3}, {x: 3, y: 4}, {x: 4, y: 6}, {x: 6, y: 9}], + backgroundColor: 'rgb(255, 99, 132)' + }] + }, + options: { + scales: { + y: { + beginAtZero: true + } + } + } + }); + } +} diff --git a/frontend/src/assets/images/add_model_background.jpg b/frontend/src/assets/images/add_model_background.jpg Binary files differnew file mode 100644 index 00000000..d86f0566 --- /dev/null +++ b/frontend/src/assets/images/add_model_background.jpg diff --git a/frontend/src/assets/images/logo.png b/frontend/src/assets/images/logo.png Binary files differnew file mode 100644 index 00000000..2e15550a --- /dev/null +++ b/frontend/src/assets/images/logo.png diff --git a/frontend/src/assets/images/logo_dark.png b/frontend/src/assets/images/logo_dark.png Binary files differnew file mode 100644 index 00000000..95c06d8f --- /dev/null +++ b/frontend/src/assets/images/logo_dark.png diff --git a/frontend/src/assets/profilePictures/1.png b/frontend/src/assets/profilePictures/1.png Binary files differnew file mode 100644 index 00000000..6e2f8b73 --- /dev/null +++ b/frontend/src/assets/profilePictures/1.png diff --git a/frontend/src/assets/profilePictures/10.png b/frontend/src/assets/profilePictures/10.png Binary files differnew file mode 100644 index 00000000..cbd270ca --- /dev/null +++ b/frontend/src/assets/profilePictures/10.png diff --git a/frontend/src/assets/profilePictures/11.png b/frontend/src/assets/profilePictures/11.png Binary files differnew file mode 100644 index 00000000..982fdae4 --- /dev/null +++ b/frontend/src/assets/profilePictures/11.png diff --git a/frontend/src/assets/profilePictures/12.png b/frontend/src/assets/profilePictures/12.png Binary files differnew file mode 100644 index 00000000..2aedbdb0 --- /dev/null +++ b/frontend/src/assets/profilePictures/12.png diff --git a/frontend/src/assets/profilePictures/13.png b/frontend/src/assets/profilePictures/13.png Binary files differnew file mode 100644 index 00000000..f8d771d9 --- /dev/null +++ b/frontend/src/assets/profilePictures/13.png diff --git a/frontend/src/assets/profilePictures/14.png b/frontend/src/assets/profilePictures/14.png Binary files differnew file mode 100644 index 00000000..d3ec8ae1 --- /dev/null +++ b/frontend/src/assets/profilePictures/14.png diff --git a/frontend/src/assets/profilePictures/2.png b/frontend/src/assets/profilePictures/2.png Binary files differnew file mode 100644 index 00000000..d8dc7967 --- /dev/null +++ b/frontend/src/assets/profilePictures/2.png diff --git a/frontend/src/assets/profilePictures/3.png b/frontend/src/assets/profilePictures/3.png Binary files differnew file mode 100644 index 00000000..b4219c22 --- /dev/null +++ b/frontend/src/assets/profilePictures/3.png diff --git a/frontend/src/assets/profilePictures/4.png b/frontend/src/assets/profilePictures/4.png Binary files differnew file mode 100644 index 00000000..ef0701ef --- /dev/null +++ b/frontend/src/assets/profilePictures/4.png diff --git a/frontend/src/assets/profilePictures/5.png b/frontend/src/assets/profilePictures/5.png Binary files differnew file mode 100644 index 00000000..8523f582 --- /dev/null +++ b/frontend/src/assets/profilePictures/5.png diff --git a/frontend/src/assets/profilePictures/6.png b/frontend/src/assets/profilePictures/6.png Binary files differnew file mode 100644 index 00000000..96540607 --- /dev/null +++ b/frontend/src/assets/profilePictures/6.png diff --git a/frontend/src/assets/profilePictures/7.png b/frontend/src/assets/profilePictures/7.png Binary files differnew file mode 100644 index 00000000..f0557738 --- /dev/null +++ b/frontend/src/assets/profilePictures/7.png diff --git a/frontend/src/assets/profilePictures/8.png b/frontend/src/assets/profilePictures/8.png Binary files differnew file mode 100644 index 00000000..835ba0ab --- /dev/null +++ b/frontend/src/assets/profilePictures/8.png diff --git a/frontend/src/assets/profilePictures/9.png b/frontend/src/assets/profilePictures/9.png Binary files differnew file mode 100644 index 00000000..fd38fac4 --- /dev/null +++ b/frontend/src/assets/profilePictures/9.png diff --git a/frontend/src/assets/svg/logo.svg b/frontend/src/assets/svg/logo.svg new file mode 100644 index 00000000..cd79cd55 --- /dev/null +++ b/frontend/src/assets/svg/logo.svg @@ -0,0 +1,165 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> +<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" + width="100px" height="100px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"> +<style type="text/css"> + .st0{fill:none;} + .st1{fill:#00A8E8;} + .st2{fill:#007EA7;} + .st3{fill:#FFFFFF;} +</style> +<g id="XMLID_455_"> + <g id="XMLID_357_"> + <g id="XMLID_317_"> + <rect id="XMLID_30_" x="-18.1" y="76.3" class="st0" width="138.3" height="23.7"/> + <path id="XMLID_2_" class="st1" d="M10,79.1v3.6h0.4c0.3,0,0.5,0.1,0.6,0.2s0.2,0.3,0.2,0.4c0,0.2-0.1,0.3-0.2,0.4 + s-0.3,0.2-0.6,0.2H8.9c-0.3,0-0.5-0.1-0.6-0.2s-0.2-0.3-0.2-0.4c0-0.2,0.1-0.3,0.2-0.4s0.3-0.2,0.6-0.2V78H8.6 + C8.3,78,8.1,78,8,77.9s-0.2-0.3-0.2-0.4S7.9,77.1,8,77s0.3-0.2,0.6-0.2l1.4,0l3.1,4.8V78h-0.4c-0.3,0-0.5-0.1-0.6-0.2 + s-0.2-0.3-0.2-0.4s0.1-0.3,0.2-0.4s0.3-0.2,0.6-0.2l1.6,0c0.3,0,0.5,0.1,0.6,0.2s0.2,0.3,0.2,0.4c0,0.2-0.1,0.3-0.2,0.4 + S14.5,78,14.3,78v5.9h-1.2L10,79.1z"/> + <path id="XMLID_4_" class="st1" d="M21.7,81.9h-4.9c0.1,0.3,0.3,0.6,0.7,0.8s0.7,0.3,1.3,0.3c0.4,0,1-0.1,1.8-0.3 + c0.3-0.1,0.5-0.1,0.6-0.1c0.2,0,0.3,0.1,0.4,0.2s0.2,0.3,0.2,0.4c0,0.2-0.1,0.3-0.2,0.4c-0.2,0.1-0.5,0.3-1.1,0.4 + s-1.2,0.2-1.7,0.2c-1,0-1.7-0.3-2.3-0.8s-0.9-1.2-0.9-2c0-0.8,0.3-1.5,0.9-2.1s1.3-0.8,2.2-0.8c0.5,0,0.9,0.1,1.3,0.3 + s0.7,0.4,0.9,0.6c0.3,0.3,0.5,0.6,0.7,1.1c0.1,0.3,0.2,0.6,0.2,1V81.9z M20.4,80.7c-0.2-0.3-0.4-0.6-0.7-0.8s-0.7-0.3-1.1-0.3 + c-0.4,0-0.8,0.1-1.1,0.3s-0.5,0.4-0.7,0.8H20.4z"/> + <path id="XMLID_7_" class="st1" d="M28.5,78.6v4.1c0.3,0,0.4,0.1,0.6,0.2s0.2,0.3,0.2,0.4s-0.1,0.3-0.2,0.4s-0.3,0.2-0.6,0.2 + h-1.1v-0.3c-0.3,0.2-0.7,0.3-1,0.4s-0.6,0.1-0.9,0.1c-0.4,0-0.7-0.1-1-0.2s-0.5-0.4-0.7-0.7c-0.1-0.2-0.2-0.5-0.2-0.8v-2.6h-0.2 + c-0.3,0-0.5-0.1-0.6-0.2s-0.2-0.3-0.2-0.4c0-0.2,0.1-0.3,0.2-0.4s0.3-0.2,0.6-0.2h1.4v3.6c0,0.3,0.1,0.4,0.2,0.6s0.3,0.2,0.6,0.2 + c0.2,0,0.5,0,0.8-0.1s0.6-0.3,1-0.5v-2.4h-0.4c-0.3,0-0.5-0.1-0.6-0.2S26,79.4,26,79.2c0-0.2,0.1-0.3,0.2-0.4s0.3-0.2,0.6-0.2 + H28.5z"/> + <path id="XMLID_9_" class="st1" d="M32.9,78.6v0.8c0.5-0.4,0.9-0.6,1.2-0.7s0.6-0.2,0.8-0.2c0.4,0,0.8,0.1,1.1,0.4 + c0.3,0.2,0.4,0.4,0.4,0.6c0,0.2-0.1,0.3-0.2,0.4s-0.3,0.2-0.4,0.2c-0.1,0-0.3-0.1-0.5-0.2s-0.3-0.2-0.4-0.2 + c-0.2,0-0.4,0.1-0.8,0.3s-0.8,0.5-1.3,0.9v1.8h1.7c0.3,0,0.5,0.1,0.6,0.2s0.2,0.3,0.2,0.4c0,0.2-0.1,0.3-0.2,0.4 + s-0.3,0.2-0.6,0.2h-3.6c-0.3,0-0.5-0.1-0.6-0.2s-0.2-0.3-0.2-0.4c0-0.2,0.1-0.3,0.2-0.4s0.3-0.2,0.6-0.2h0.7v-2.9h-0.4 + c-0.3,0-0.5-0.1-0.6-0.2s-0.2-0.3-0.2-0.4c0-0.2,0.1-0.3,0.2-0.4s0.3-0.2,0.6-0.2H32.9z"/> + <path id="XMLID_11_" class="st1" d="M43.4,81.4c0,0.5-0.1,0.9-0.4,1.3s-0.6,0.8-1.1,1s-1,0.4-1.6,0.4c-0.5,0-1.1-0.1-1.6-0.4 + s-0.9-0.6-1.1-1s-0.4-0.9-0.4-1.4c0-0.5,0.1-1,0.4-1.4s0.6-0.8,1.1-1.1s1-0.4,1.6-0.4c0.5,0,1.1,0.1,1.6,0.4s0.9,0.6,1.1,1.1 + S43.4,80.9,43.4,81.4z M42.2,81.4c0-0.4-0.1-0.7-0.4-1.1c-0.4-0.4-0.9-0.7-1.5-0.7c-0.5,0-1,0.2-1.4,0.5s-0.5,0.8-0.5,1.2 + c0,0.4,0.2,0.7,0.6,1.1s0.8,0.5,1.4,0.5c0.5,0,1-0.2,1.4-0.5S42.2,81.8,42.2,81.4z"/> + <path id="XMLID_14_" class="st1" d="M45.8,83.6c-0.1,0.1-0.2,0.2-0.3,0.2s-0.1,0.1-0.2,0.1c-0.2,0-0.3-0.1-0.4-0.2 + s-0.2-0.3-0.2-0.6v-0.8c0-0.3,0.1-0.5,0.2-0.6s0.3-0.2,0.4-0.2c0.1,0,0.3,0,0.4,0.1s0.2,0.2,0.2,0.4s0.1,0.3,0.2,0.4 + c0.1,0.1,0.3,0.2,0.6,0.4s0.6,0.2,0.9,0.2c0.5,0,1-0.1,1.3-0.4c0.2-0.2,0.3-0.3,0.3-0.6c0-0.1-0.1-0.3-0.2-0.4s-0.3-0.2-0.5-0.3 + c-0.2-0.1-0.5-0.1-1-0.2c-0.7-0.1-1.2-0.3-1.5-0.4s-0.6-0.4-0.8-0.7s-0.3-0.7-0.3-1c0-0.6,0.2-1.1,0.7-1.5s1.1-0.6,1.9-0.6 + c0.3,0,0.6,0,0.9,0.1s0.5,0.2,0.7,0.3c0.2-0.2,0.3-0.2,0.5-0.2c0.2,0,0.3,0.1,0.4,0.2s0.2,0.3,0.2,0.6v0.9c0,0.3-0.1,0.5-0.2,0.6 + s-0.3,0.2-0.4,0.2c-0.1,0-0.3,0-0.4-0.1C49.1,79.1,49,79,49,78.8s-0.1-0.3-0.2-0.4c-0.1-0.1-0.3-0.3-0.5-0.4s-0.5-0.2-0.8-0.2 + c-0.4,0-0.8,0.1-1,0.3s-0.4,0.4-0.4,0.6c0,0.1,0.1,0.3,0.2,0.4s0.3,0.2,0.5,0.3c0.1,0.1,0.5,0.1,1.1,0.3s1.1,0.3,1.4,0.4 + s0.6,0.4,0.8,0.7s0.3,0.7,0.3,1.1c0,0.6-0.2,1.1-0.6,1.4c-0.6,0.5-1.3,0.7-2.1,0.7c-0.3,0-0.7,0-1-0.1S46.1,83.8,45.8,83.6z"/> + <path id="XMLID_16_" class="st1" d="M54.4,79.8v2.4c0,0.3,0.1,0.4,0.2,0.5c0.2,0.1,0.5,0.2,0.9,0.2c0.6,0,1.2-0.1,1.7-0.4 + c0.2-0.1,0.4-0.2,0.5-0.2c0.2,0,0.3,0.1,0.4,0.2s0.2,0.3,0.2,0.4c0,0.2-0.1,0.3-0.2,0.4c-0.2,0.2-0.6,0.4-1.1,0.5s-1,0.2-1.4,0.2 + c-0.7,0-1.3-0.2-1.7-0.5s-0.6-0.7-0.6-1.2v-2.6h-0.4c-0.3,0-0.5-0.1-0.6-0.2S52,79.4,52,79.2c0-0.2,0.1-0.3,0.2-0.4 + s0.3-0.2,0.6-0.2h0.4v-1.1c0-0.3,0.1-0.5,0.2-0.6s0.3-0.2,0.4-0.2c0.2,0,0.3,0.1,0.4,0.2s0.2,0.3,0.2,0.6v1.1h2.2 + c0.3,0,0.5,0.1,0.6,0.2s0.2,0.3,0.2,0.4c0,0.2-0.1,0.3-0.2,0.4s-0.3,0.2-0.6,0.2H54.4z"/> + <path id="XMLID_18_" class="st1" d="M64.9,81.9H60c0.1,0.3,0.3,0.6,0.7,0.8s0.7,0.3,1.3,0.3c0.4,0,1-0.1,1.8-0.3 + c0.3-0.1,0.5-0.1,0.6-0.1c0.2,0,0.3,0.1,0.4,0.2s0.2,0.3,0.2,0.4c0,0.2-0.1,0.3-0.2,0.4c-0.2,0.1-0.5,0.3-1.1,0.4 + s-1.2,0.2-1.7,0.2c-1,0-1.7-0.3-2.3-0.8s-0.9-1.2-0.9-2c0-0.8,0.3-1.5,0.9-2.1s1.3-0.8,2.2-0.8c0.5,0,0.9,0.1,1.3,0.3 + s0.7,0.4,0.9,0.6c0.3,0.3,0.5,0.6,0.7,1.1c0.1,0.3,0.2,0.6,0.2,1V81.9z M63.6,80.7c-0.2-0.3-0.4-0.6-0.7-0.8s-0.7-0.3-1.1-0.3 + c-0.4,0-0.8,0.1-1.1,0.3s-0.5,0.4-0.7,0.8H63.6z"/> + <path id="XMLID_21_" class="st1" d="M69.7,76.3v6.4h1.4c0.3,0,0.5,0.1,0.6,0.2s0.2,0.3,0.2,0.4c0,0.2-0.1,0.3-0.2,0.4 + s-0.3,0.2-0.6,0.2h-4.1c-0.3,0-0.5-0.1-0.6-0.2s-0.2-0.3-0.2-0.4c0-0.2,0.1-0.3,0.2-0.4s0.3-0.2,0.6-0.2h1.4v-5.2h-1 + c-0.3,0-0.5-0.1-0.6-0.2s-0.2-0.3-0.2-0.4c0-0.2,0.1-0.3,0.2-0.4s0.3-0.2,0.6-0.2H69.7z"/> + <path id="XMLID_23_" class="st1" d="M76.9,76.3v6.4h1.4c0.3,0,0.5,0.1,0.6,0.2s0.2,0.3,0.2,0.4c0,0.2-0.1,0.3-0.2,0.4 + s-0.3,0.2-0.6,0.2h-4.1c-0.3,0-0.5-0.1-0.6-0.2s-0.2-0.3-0.2-0.4c0-0.2,0.1-0.3,0.2-0.4s0.3-0.2,0.6-0.2h1.4v-5.2h-1 + c-0.3,0-0.5-0.1-0.6-0.2s-0.2-0.3-0.2-0.4c0-0.2,0.1-0.3,0.2-0.4s0.3-0.2,0.6-0.2H76.9z"/> + <path id="XMLID_25_" class="st1" d="M84.6,83.9v-0.3c-0.3,0.2-0.6,0.3-1,0.4s-0.7,0.1-1,0.1c-0.6,0-1.2-0.2-1.6-0.5 + s-0.6-0.7-0.6-1.1c0-0.5,0.3-1,0.8-1.4s1.2-0.6,2.1-0.6c0.4,0,0.8,0,1.3,0.1v-0.3c0-0.2-0.1-0.3-0.2-0.4s-0.4-0.2-0.9-0.2 + c-0.4,0-0.8,0.1-1.4,0.2c-0.2,0.1-0.4,0.1-0.5,0.1c-0.2,0-0.3-0.1-0.4-0.2S81,79.5,81,79.3c0-0.1,0-0.2,0.1-0.3s0.1-0.1,0.2-0.2 + s0.2-0.1,0.4-0.2c0.3-0.1,0.6-0.1,0.9-0.2s0.6-0.1,0.8-0.1c0.7,0,1.3,0.2,1.7,0.5s0.6,0.8,0.6,1.3v2.5H86c0.3,0,0.5,0.1,0.6,0.2 + s0.2,0.3,0.2,0.4c0,0.2-0.1,0.3-0.2,0.4s-0.3,0.2-0.6,0.2H84.6z M84.6,81.8c-0.5-0.1-0.9-0.1-1.3-0.1c-0.5,0-0.9,0.1-1.3,0.4 + c-0.2,0.2-0.3,0.3-0.3,0.5c0,0.1,0.1,0.2,0.2,0.3c0.2,0.1,0.5,0.2,0.8,0.2c0.3,0,0.6-0.1,1-0.2s0.7-0.3,1-0.5V81.8z"/> + <path id="XMLID_28_" class="st1" d="M90.5,78.6v0.8c0.5-0.4,0.9-0.6,1.2-0.7s0.6-0.2,0.8-0.2c0.4,0,0.8,0.1,1.1,0.4 + c0.3,0.2,0.4,0.4,0.4,0.6c0,0.2-0.1,0.3-0.2,0.4s-0.3,0.2-0.4,0.2c-0.1,0-0.3-0.1-0.5-0.2s-0.3-0.2-0.4-0.2 + c-0.2,0-0.4,0.1-0.8,0.3s-0.8,0.5-1.3,0.9v1.8h1.7c0.3,0,0.5,0.1,0.6,0.2s0.2,0.3,0.2,0.4c0,0.2-0.1,0.3-0.2,0.4 + s-0.3,0.2-0.6,0.2h-3.6c-0.3,0-0.5-0.1-0.6-0.2s-0.2-0.3-0.2-0.4c0-0.2,0.1-0.3,0.2-0.4s0.3-0.2,0.6-0.2h0.7v-2.9h-0.4 + c-0.3,0-0.5-0.1-0.6-0.2S88,79.4,88,79.2c0-0.2,0.1-0.3,0.2-0.4s0.3-0.2,0.6-0.2H90.5z"/> + </g> + <path id="XMLID_318_" class="st2" d="M82,87.5c0,0.3-0.2,0.5-0.5,0.5h-63c-0.3,0-0.5-0.2-0.5-0.5l0,0c0-0.3,0.2-0.5,0.5-0.5h63 + C81.8,87,82,87.2,82,87.5L82,87.5z"/> + <path id="XMLID_319_" class="st2" d="M67,91.5c0,0.3-0.2,0.5-0.5,0.5h-34c-0.3,0-0.5-0.2-0.5-0.5l0,0c0-0.3,0.2-0.5,0.5-0.5h34 + C66.8,91,67,91.2,67,91.5L67,91.5z"/> + </g> + <g id="XMLID_273_"> + <path id="XMLID_274_" class="st2" d="M86.3,46c-5,1.3-10.4,3.4-15.8,6.9c-5.5,3.7-9.6,8-12.7,12.2c-2.2-3.3-4.5-6.6-6.7-10 + c5-1.5,10.4-3.8,15.7-7.4c5.3-3.6,9.5-7.7,12.8-11.8C81.9,39.4,84.1,42.7,86.3,46z"/> + <path id="XMLID_275_" class="st2" d="M47.7,55.5c-3-0.5-8.5-1.9-14.3-5.8c-5.9-3.9-9.3-8.6-10.9-11.2c-1.6,2.4-3.2,4.8-4.8,7.2 + c3.1,0.6,8.5,2.1,14.3,6c5.7,3.9,9.2,8.3,10.9,11C44.5,60.3,46.1,57.9,47.7,55.5z"/> + <path id="XMLID_281_" class="st2" d="M83,30.4c-3-0.5-8.5-1.9-14.2-5.7c-5.9-3.9-9.2-8.5-10.8-11.1c-1.6,2.4-3.2,4.8-4.8,7.2 + c3.1,0.6,8.5,2.1,14.2,5.9c5.7,3.8,9.1,8.3,10.8,10.9C79.8,35.2,81.4,32.8,83,30.4z"/> + <path id="XMLID_282_" class="st2" d="M51.1,22.3c-4.9,1.3-10.3,3.4-15.6,7c-5.4,3.7-9.4,8.1-12.3,12.4c-2.3-3.4-4.7-6.8-7-10.1 + c4.9-1.5,10.3-3.9,15.5-7.5c5.2-3.6,9.3-7.8,12.5-11.9C46.4,15.6,48.8,18.9,51.1,22.3z"/> + <g id="XMLID_283_"> + <g id="XMLID_302_"> + <circle id="XMLID_303_" class="st1" cx="84.8" cy="38.4" r="8.6"/> + </g> + <g id="XMLID_370_"> + <path id="XMLID_364_" class="st3" d="M92.7,38.4h-7.9v-7.9c0.6,2,1.2,4.1,1.9,6.1C88.6,37.2,90.7,37.8,92.7,38.4z"/> + <path id="XMLID_365_" class="st3" d="M76.8,38.4h7.9v-7.9c-0.6,2-1.2,4.1-1.9,6.1C80.9,37.2,78.8,37.8,76.8,38.4z"/> + <path id="XMLID_369_" class="st3" d="M92.7,38.4h-7.9v7.9c0.6-2,1.2-4.1,1.9-6.1C88.6,39.6,90.7,39,92.7,38.4z"/> + <path id="XMLID_366_" class="st3" d="M76.8,38.4h7.9v7.9c-0.6-2-1.2-4.1-1.9-6.1C80.9,39.6,78.8,39,76.8,38.4z"/> + </g> + </g> + <g id="XMLID_284_"> + <g id="XMLID_288_"> + <circle id="XMLID_289_" class="st1" cx="51.8" cy="15.4" r="8.6"/> + </g> + <g id="XMLID_285_"> + <path id="XMLID_287_" class="st3" d="M59.7,15.4h-7.9V7.5c0.6,2,1.2,4.1,1.9,6.1C55.6,14.2,57.7,14.8,59.7,15.4z"/> + <path id="XMLID_286_" class="st3" d="M43.8,15.4h7.9V7.5c-0.6,2-1.2,4.1-1.9,6.1C47.9,14.2,45.8,14.8,43.8,15.4z"/> + <path id="XMLID_290_" class="st3" d="M59.7,15.4h-7.9v7.9c0.6-2,1.2-4.1,1.9-6.1C55.6,16.6,57.7,16,59.7,15.4z"/> + <path id="XMLID_291_" class="st3" d="M43.8,15.4h7.9v7.9c-0.6-2-1.2-4.1-1.9-6.1C47.9,16.6,45.8,16,43.8,15.4z"/> + </g> + </g> + <g id="XMLID_292_"> + <g id="XMLID_296_"> + <circle id="XMLID_297_" class="st1" cx="50.8" cy="61.4" r="8.6"/> + </g> + <g id="XMLID_293_"> + <path id="XMLID_295_" class="st3" d="M58.7,61.4h-7.9v-7.9c0.6,2,1.2,4.1,1.9,6.1C54.6,60.2,56.7,60.8,58.7,61.4z"/> + <path id="XMLID_294_" class="st3" d="M42.8,61.4h7.9v-7.9c-0.6,2-1.2,4.1-1.9,6.1C46.9,60.2,44.8,60.8,42.8,61.4z"/> + <path id="XMLID_298_" class="st3" d="M58.7,61.4h-7.9v7.9c0.6-2,1.2-4.1,1.9-6.1C54.6,62.6,56.7,62,58.7,61.4z"/> + <path id="XMLID_299_" class="st3" d="M42.8,61.4h7.9v7.9c-0.6-2-1.2-4.1-1.9-6.1C46.9,62.6,44.8,62,42.8,61.4z"/> + </g> + </g> + <g id="XMLID_300_"> + <g id="XMLID_306_"> + <circle id="XMLID_307_" class="st1" cx="15.8" cy="38.4" r="8.6"/> + </g> + <g id="XMLID_301_"> + <path id="XMLID_305_" class="st3" d="M23.7,38.4h-7.9v-7.9c0.6,2,1.2,4.1,1.9,6.1C19.6,37.2,21.7,37.8,23.7,38.4z"/> + <path id="XMLID_304_" class="st3" d="M7.8,38.4h7.9v-7.9c-0.6,2-1.2,4.1-1.9,6.1C11.9,37.2,9.8,37.8,7.8,38.4z"/> + <path id="XMLID_308_" class="st3" d="M23.7,38.4h-7.9v7.9c0.6-2,1.2-4.1,1.9-6.1C19.6,39.6,21.7,39,23.7,38.4z"/> + <path id="XMLID_309_" class="st3" d="M7.8,38.4h7.9v7.9c-0.6-2-1.2-4.1-1.9-6.1C11.9,39.6,9.8,39,7.8,38.4z"/> + </g> + </g> + </g> +</g> +<g id="XMLID_1_"> +</g> +<g id="XMLID_31_"> +</g> +<g id="XMLID_32_"> +</g> +<g id="XMLID_33_"> +</g> +<g id="XMLID_34_"> +</g> +<g id="XMLID_35_"> +</g> +<g id="XMLID_36_"> +</g> +<g id="XMLID_37_"> +</g> +<g id="XMLID_38_"> +</g> +<g id="XMLID_39_"> +</g> +<g id="XMLID_40_"> +</g> +<g id="XMLID_41_"> +</g> +<g id="XMLID_42_"> +</g> +<g id="XMLID_43_"> +</g> +<g id="XMLID_44_"> +</g> +</svg> diff --git a/frontend/src/assets/svg/logo_no_text.svg b/frontend/src/assets/svg/logo_no_text.svg new file mode 100644 index 00000000..102b3781 --- /dev/null +++ b/frontend/src/assets/svg/logo_no_text.svg @@ -0,0 +1,107 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> +<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" + width="1000px" height="700px" viewBox="0 0 1000 700" style="enable-background:new 0 0 1000 700;" xml:space="preserve"> +<style type="text/css"> + .st0{fill:#007EA7;} + .st1{fill:#00A8E8;} + .st2{fill:#FFFFFF;} +</style> +<g id="XMLID_273_"> + <path id="XMLID_274_" class="st0" d="M895.8,433.5C841.3,447.3,781,470.5,722,509.7c-60.6,40.3-106,88.3-140,134.5 + c-24.5-36.5-49-73-73.5-109.5c54.8-16.7,114.1-42.1,172.6-81.4C739.8,414,786,368.6,822.2,324C846.8,360.5,871.3,397,895.8,433.5z" + /> + <path id="XMLID_275_" class="st0" d="M471.8,537.7c-32.9-5.8-93.3-20.8-157.2-63.4c-64.8-43.3-102-94.3-119.9-122.6 + c-17.6,26.3-35.3,52.5-52.9,78.8c34,6.8,93.9,23.1,157.3,65.8c63.1,42.4,100.7,91.4,119.8,120.3C436.5,590.3,454.2,564,471.8,537.7 + z"/> + <path id="XMLID_281_" class="st0" d="M859.1,261.9c-32.7-5.7-92.8-20.4-156.3-62.8c-64.3-43-101.2-93.8-118.9-122 + c-17.6,26.3-35.3,52.5-52.9,78.8c33.8,6.7,93.4,22.8,156.4,65.1c62.6,42.1,99.9,90.9,118.9,119.7 + C823.9,314.5,841.5,288.2,859.1,261.9z"/> + <path id="XMLID_282_" class="st0" d="M509,173.3c-54.1,13.8-113.6,37.2-171.3,76.8c-59.3,40.7-103.1,89.3-135.6,136.1 + c-25.7-37.1-51.5-74.2-77.2-111.4c54.3-16.7,112.8-42.4,170-82.1C352.3,153,396.9,107,431.7,61.9C457.5,99,483.2,136.2,509,173.3z" + /> + <g id="XMLID_283_"> + <g id="XMLID_302_"> + <circle id="XMLID_303_" class="st1" cx="878.4" cy="350.1" r="94.3"/> + </g> + <g id="XMLID_370_"> + <path id="XMLID_364_" class="st2" d="M965.4,350.1h-86.9v-86.9c6.8,22.4,13.7,44.8,20.5,67.2 + C921.1,336.9,943.2,343.5,965.4,350.1z"/> + <path id="XMLID_365_" class="st2" d="M791.5,350.1h86.9v-86.9c-6.8,22.4-13.7,44.8-20.5,67.2 + C835.7,336.9,813.6,343.5,791.5,350.1z"/> + <path id="XMLID_369_" class="st2" d="M965.4,350.1h-86.9v86.9c6.8-22.4,13.7-44.8,20.5-67.2C921.1,363.3,943.2,356.7,965.4,350.1 + z"/> + <path id="XMLID_366_" class="st2" d="M791.5,350.1h86.9v86.9c-6.8-22.4-13.7-44.8-20.5-67.2C835.7,363.3,813.6,356.7,791.5,350.1 + z"/> + </g> + </g> + <g id="XMLID_284_"> + <g id="XMLID_288_"> + <circle id="XMLID_289_" class="st1" cx="516" cy="97.5" r="94.3"/> + </g> + <g id="XMLID_285_"> + <path id="XMLID_287_" class="st2" d="M602.9,97.5H516V10.6c6.8,22.4,13.7,44.8,20.5,67.2C558.7,84.3,580.8,90.9,602.9,97.5z"/> + <path id="XMLID_286_" class="st2" d="M429,97.5H516V10.6c-6.8,22.4-13.7,44.8-20.5,67.2C473.3,84.3,451.2,90.9,429,97.5z"/> + <path id="XMLID_290_" class="st2" d="M602.9,97.5H516v86.9c6.8-22.4,13.7-44.8,20.5-67.2C558.7,110.7,580.8,104.1,602.9,97.5z"/> + <path id="XMLID_291_" class="st2" d="M429,97.5H516v86.9c-6.8-22.4-13.7-44.8-20.5-67.2C473.3,110.7,451.2,104.1,429,97.5z"/> + </g> + </g> + <g id="XMLID_292_"> + <g id="XMLID_296_"> + <circle id="XMLID_297_" class="st1" cx="505" cy="602.7" r="94.3"/> + </g> + <g id="XMLID_293_"> + <path id="XMLID_295_" class="st2" d="M591.9,602.7H505v-86.9c6.8,22.4,13.7,44.8,20.5,67.2C547.7,589.5,569.8,596.1,591.9,602.7z + "/> + <path id="XMLID_294_" class="st2" d="M418,602.7H505v-86.9c-6.8,22.4-13.7,44.8-20.5,67.2C462.3,589.5,440.2,596.1,418,602.7z"/> + <path id="XMLID_298_" class="st2" d="M591.9,602.7H505v86.9c6.8-22.4,13.7-44.8,20.5-67.2C547.7,615.9,569.8,609.3,591.9,602.7z" + /> + <path id="XMLID_299_" class="st2" d="M418,602.7H505v86.9c-6.8-22.4-13.7-44.8-20.5-67.2C462.3,615.9,440.2,609.3,418,602.7z"/> + </g> + </g> + <g id="XMLID_300_"> + <g id="XMLID_306_"> + <circle id="XMLID_307_" class="st1" cx="120.6" cy="350.1" r="94.3"/> + </g> + <g id="XMLID_301_"> + <path id="XMLID_305_" class="st2" d="M207.5,350.1h-86.9v-86.9c6.8,22.4,13.7,44.8,20.5,67.2 + C163.3,336.9,185.4,343.5,207.5,350.1z"/> + <path id="XMLID_304_" class="st2" d="M33.7,350.1h86.9v-86.9c-6.8,22.4-13.7,44.8-20.5,67.2C77.9,336.9,55.8,343.5,33.7,350.1z" + /> + <path id="XMLID_308_" class="st2" d="M207.5,350.1h-86.9v86.9c6.8-22.4,13.7-44.8,20.5-67.2C163.3,363.3,185.4,356.7,207.5,350.1 + z"/> + <path id="XMLID_309_" class="st2" d="M33.7,350.1h86.9v86.9c-6.8-22.4-13.7-44.8-20.5-67.2C77.9,363.3,55.8,356.7,33.7,350.1z"/> + </g> + </g> +</g> +<g id="XMLID_1_"> +</g> +<g id="XMLID_2_"> +</g> +<g id="XMLID_3_"> +</g> +<g id="XMLID_4_"> +</g> +<g id="XMLID_5_"> +</g> +<g id="XMLID_6_"> +</g> +<g id="XMLID_7_"> +</g> +<g id="XMLID_8_"> +</g> +<g id="XMLID_9_"> +</g> +<g id="XMLID_10_"> +</g> +<g id="XMLID_11_"> +</g> +<g id="XMLID_12_"> +</g> +<g id="XMLID_13_"> +</g> +<g id="XMLID_14_"> +</g> +<g id="XMLID_15_"> +</g> +</svg> diff --git a/frontend/src/config.ts b/frontend/src/config.ts index 8c48672e..f1c14194 100644 --- a/frontend/src/config.ts +++ b/frontend/src/config.ts @@ -1,3 +1,4 @@ export const API_SETTINGS = { - apiURL: 'http://localhost:5283/api' + apiURL: 'http://localhost:5283/api', + apiWSUrl: 'ws://localhost:5283/api/websocket/ws' }
\ No newline at end of file diff --git a/frontend/src/index.html b/frontend/src/index.html index b3b6eb54..1461c9ae 100644 --- a/frontend/src/index.html +++ b/frontend/src/index.html @@ -1,5 +1,6 @@ <!doctype html> <html lang="en"> + <head> <meta charset="utf-8"> <title>Frontend</title> @@ -10,7 +11,9 @@ <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> </head> + <body class="mat-typography"> <app-root></app-root> </body> -</html> + +</html>
\ No newline at end of file diff --git a/frontend/src/styles.css b/frontend/src/styles.css index 8997c10e..5a30802b 100644 --- a/frontend/src/styles.css +++ b/frontend/src/styles.css @@ -1,5 +1,4 @@ -/* You can add global styles to this file, and also import other style files - -html, body { height: 100%; } -body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } -*/
\ No newline at end of file +@import '~bootstrap/dist/css/bootstrap.min.css'; +body { + background-image: url('/assets/images/add_model_background.jpg'); +}
\ No newline at end of file |
