From 6aeb963fa64af9dc0ddf2f9aeaf1903a7db26afc Mon Sep 17 00:00:00 2001 From: Danijel Andjelkovic Date: Sun, 13 Mar 2022 20:57:27 +0100 Subject: Dodata naslovna strana i navigacioni meni, kao i neke dodatne komponente i modeli podataka (lista elemenata, element-dataset, element-prediktor). --- frontend/src/app/_data/Dataset.ts | 10 +++++ frontend/src/app/_data/Model.ts | 3 ++ frontend/src/app/_data/Predictor.ts | 9 ++++ .../app/_elements/carousel/carousel.component.css | 0 .../app/_elements/carousel/carousel.component.html | 12 ++++++ .../_elements/carousel/carousel.component.spec.ts | 25 +++++++++++ .../app/_elements/carousel/carousel.component.ts | 17 ++++++++ .../item-dataset/item-dataset.component.css | 0 .../item-dataset/item-dataset.component.html | 15 +++++++ .../item-dataset/item-dataset.component.spec.ts | 25 +++++++++++ .../item-dataset/item-dataset.component.ts | 15 +++++++ .../item-predictor/item-predictor.component.css | 0 .../item-predictor/item-predictor.component.html | 1 + .../item-predictor.component.spec.ts | 25 +++++++++++ .../item-predictor/item-predictor.component.ts | 15 +++++++ .../src/app/_elements/navbar/navbar.component.css | 0 .../src/app/_elements/navbar/navbar.component.html | 38 +++++++++++++++++ .../app/_elements/navbar/navbar.component.spec.ts | 25 +++++++++++ .../src/app/_elements/navbar/navbar.component.ts | 23 ++++++++++ .../app/_pages/add-model/add-model.component.html | 7 ++-- frontend/src/app/_pages/home/home.component.css | 0 frontend/src/app/_pages/home/home.component.html | 49 ++++++++++++++++++++++ .../src/app/_pages/home/home.component.spec.ts | 25 +++++++++++ frontend/src/app/_pages/home/home.component.ts | 26 ++++++++++++ .../app/_pages/login-page/login-page.component.ts | 4 +- frontend/src/app/app-routing.module.ts | 3 +- frontend/src/app/app.component.html | 5 ++- frontend/src/app/app.module.ts | 21 ++++++++-- frontend/src/styles.css | 2 +- 29 files changed, 388 insertions(+), 12 deletions(-) create mode 100644 frontend/src/app/_data/Dataset.ts create mode 100644 frontend/src/app/_data/Predictor.ts create mode 100644 frontend/src/app/_elements/carousel/carousel.component.css create mode 100644 frontend/src/app/_elements/carousel/carousel.component.html create mode 100644 frontend/src/app/_elements/carousel/carousel.component.spec.ts create mode 100644 frontend/src/app/_elements/carousel/carousel.component.ts create mode 100644 frontend/src/app/_elements/item-dataset/item-dataset.component.css create mode 100644 frontend/src/app/_elements/item-dataset/item-dataset.component.html create mode 100644 frontend/src/app/_elements/item-dataset/item-dataset.component.spec.ts create mode 100644 frontend/src/app/_elements/item-dataset/item-dataset.component.ts create mode 100644 frontend/src/app/_elements/item-predictor/item-predictor.component.css create mode 100644 frontend/src/app/_elements/item-predictor/item-predictor.component.html create mode 100644 frontend/src/app/_elements/item-predictor/item-predictor.component.spec.ts create mode 100644 frontend/src/app/_elements/item-predictor/item-predictor.component.ts create mode 100644 frontend/src/app/_elements/navbar/navbar.component.css create mode 100644 frontend/src/app/_elements/navbar/navbar.component.html create mode 100644 frontend/src/app/_elements/navbar/navbar.component.spec.ts create mode 100644 frontend/src/app/_elements/navbar/navbar.component.ts create mode 100644 frontend/src/app/_pages/home/home.component.css create mode 100644 frontend/src/app/_pages/home/home.component.html create mode 100644 frontend/src/app/_pages/home/home.component.spec.ts create mode 100644 frontend/src/app/_pages/home/home.component.ts (limited to 'frontend/src') diff --git a/frontend/src/app/_data/Dataset.ts b/frontend/src/app/_data/Dataset.ts new file mode 100644 index 00000000..b4e46315 --- /dev/null +++ b/frontend/src/app/_data/Dataset.ts @@ -0,0 +1,10 @@ +export default class Dataset { + constructor( + public name: string = 'Novi izvor podataka', + public description: string = '', + public header: string[] = [], + public fileId?: number, + public extension: string = '.csv', + public dateCreated: Date = new Date() + ) { } +} \ No newline at end of file diff --git a/frontend/src/app/_data/Model.ts b/frontend/src/app/_data/Model.ts index 216e1c36..162d5d78 100644 --- a/frontend/src/app/_data/Model.ts +++ b/frontend/src/app/_data/Model.ts @@ -8,6 +8,7 @@ export default class Model { //Test set settings public inputColumns: number[] = [0], public columnToPredict: number = 1, + public randomOrder: boolean = true, public randomTestSet: boolean = true, public randomTestSetDistribution: number = 0.10, //0.1-0.9 (10% - 90%) @@ -31,6 +32,8 @@ export enum ANNType { Convolutional = 'konvoluciona' } +// replaceMissing srednja vrednost mean, median, najcesca vrednost (mode) +// removeOutliers export enum Encoding { Label = 'label', OneHot = 'one hot' diff --git a/frontend/src/app/_data/Predictor.ts b/frontend/src/app/_data/Predictor.ts new file mode 100644 index 00000000..379526ec --- /dev/null +++ b/frontend/src/app/_data/Predictor.ts @@ -0,0 +1,9 @@ +export default class Dataset { + constructor( + public name: string = 'Novi izvor podataka', + public description: string = '', + public inputs: string[] = [], + public output: string = '', + public dateCreated: Date = new Date() + ) { } +} \ No newline at end of file diff --git a/frontend/src/app/_elements/carousel/carousel.component.css b/frontend/src/app/_elements/carousel/carousel.component.css new file mode 100644 index 00000000..e69de29b 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..ea522626 --- /dev/null +++ b/frontend/src/app/_elements/carousel/carousel.component.html @@ -0,0 +1,12 @@ +
+
+ + + + + + + + +
+
\ No newline at end of file diff --git a/frontend/src/app/_elements/carousel/carousel.component.spec.ts b/frontend/src/app/_elements/carousel/carousel.component.spec.ts new file mode 100644 index 00000000..9196e044 --- /dev/null +++ b/frontend/src/app/_elements/carousel/carousel.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CarouselComponent } from './carousel.component'; + +describe('CarouselComponent', () => { + let component: CarouselComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ CarouselComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(CarouselComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); 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/item-dataset/item-dataset.component.css b/frontend/src/app/_elements/item-dataset/item-dataset.component.css new file mode 100644 index 00000000..e69de29b 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..c1dc2609 --- /dev/null +++ b/frontend/src/app/_elements/item-dataset/item-dataset.component.html @@ -0,0 +1,15 @@ +
+
+ {{dataset.name}} +
+
+

+ {{dataset.description}} +

+ + + + +
{{column}}
+
+
\ 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; + + 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 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..cbd53fc2 --- /dev/null +++ b/frontend/src/app/_elements/item-predictor/item-predictor.component.html @@ -0,0 +1 @@ +

item-predictor works!

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; + + 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..fe65ccfd --- /dev/null +++ b/frontend/src/app/_elements/item-predictor/item-predictor.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-item-predictor', + templateUrl: './item-predictor.component.html', + styleUrls: ['./item-predictor.component.css'] +}) +export class ItemPredictorComponent implements OnInit { + + 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 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..60a80e35 --- /dev/null +++ b/frontend/src/app/_elements/navbar/navbar.component.html @@ -0,0 +1,38 @@ +
+
+
+ + + + + + + + +
+ + +
+
+
+
\ 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; + + 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..21a0e9ae --- /dev/null +++ b/frontend/src/app/_elements/navbar/navbar.component.ts @@ -0,0 +1,23 @@ +import { Component, OnInit } from '@angular/core'; +import { Location } from '@angular/common'; + +@Component({ + selector: 'app-navbar', + templateUrl: './navbar.component.html', + styleUrls: ['./navbar.component.css'] +}) +export class NavbarComponent implements OnInit { + + currentUrl: string; + + constructor(public location: Location) { + this.currentUrl = this.location.path(); + this.location.onUrlChange(() => { + this.currentUrl = this.location.path(); + }) + } + + ngOnInit(): void { + } + +} 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..08e27dd7 100644 --- a/frontend/src/app/_pages/add-model/add-model.component.html +++ b/frontend/src/app/_pages/add-model/add-model.component.html @@ -42,15 +42,16 @@
-
- + +
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 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..568e89e3 --- /dev/null +++ b/frontend/src/app/_pages/home/home.component.html @@ -0,0 +1,49 @@ +
+
+

Započnite sa treniranjem!

+
+
+
+ storage +

Moji izvori podataka

+

+ Preuredite vaše izvore + podataka, ili + dodajte novi. +

+
+
+
+
+ model_training + +

Moji modeli

+

+ Pregledajte vaše modele, menjajte ih, + napravite nove modele, ili + ih obrišite. +

+
+
+
+
+ batch_prediction + +

Rezultati treniranja

+

+ Pregledajte sve vaše trenirane modele, + koristite ih da + predvidite + vrednosti za red ili skup podataka, ili ih obrišite. +

+
+
+
+

Pogledajte javne projekte!

+ + +
+
\ 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; + + 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..0c61ef86 --- /dev/null +++ b/frontend/src/app/_pages/home/home.component.ts @@ -0,0 +1,26 @@ +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'; + +@Component({ + selector: 'app-home', + templateUrl: './home.component.html', + styleUrls: ['./home.component.css'] +}) +export class HomeComponent implements OnInit { + + publicDatasets: Dataset[]; + + constructor() { + this.publicDatasets = [ + new Dataset('Dataset1', 'Lorem ipsum dolor sir amet', ['kolona1', 'kolona2', 'kolona3']), + 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']), + ] + } + + ngOnInit(): void { + } + +} diff --git a/frontend/src/app/_pages/login-page/login-page.component.ts b/frontend/src/app/_pages/login-page/login-page.component.ts index e5366283..26d2547e 100644 --- a/frontend/src/app/_pages/login-page/login-page.component.ts +++ b/frontend/src/app/_pages/login-page/login-page.component.ts @@ -13,9 +13,9 @@ declare var window: any; selector: 'app-login-page', templateUrl: './login-page.component.html', styleUrls: ['./login-page.component.css'], - + }) -export class LoginPageComponent{ +export class LoginPageComponent { modalRef?: MDBModalRef; diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts index cd86ef5c..775f3d76 100644 --- a/frontend/src/app/app-routing.module.ts +++ b/frontend/src/app/app-routing.module.ts @@ -7,9 +7,10 @@ import { OnlyAuthorizedComponent } from './_pages/only-authorized/only-authorize 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'; const routes: Routes = [ - { path: '', redirectTo: '/login', pathMatch: 'full' }, + { path: '', component: HomeComponent }, { path: 'login', component: LoginPageComponent }, { path: 'register', component: RegisterPageComponent }, { path: 'only-authorized', component: OnlyAuthorizedComponent, canActivate: [AuthGuardService] }, diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html index 90c6b646..7f2d4225 100644 --- a/frontend/src/app/app.component.html +++ b/frontend/src/app/app.component.html @@ -1 +1,4 @@ - \ No newline at end of file + +
+ +
\ No newline at end of file diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index d95252ad..3d6a6816 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -3,6 +3,8 @@ 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 { AppComponent } from './app.component'; import { LoginPageComponent } from './_pages/login-page/login-page.component'; @@ -13,19 +15,28 @@ import { DatasetLoadComponent } from './_elements/dataset-load/dataset-load.comp 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 { 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'; @NgModule({ declarations: [ AppComponent, - LoginPageComponent, RegisterPageComponent, OnlyAuthorizedComponent, DatasetLoadComponent, AddModelComponent, - LoginModalComponent + LoginModalComponent, + HomeComponent, + NavbarComponent, + ItemPredictorComponent, + ItemDatasetComponent, + CarouselComponent ], imports: [ BrowserModule, @@ -35,7 +46,9 @@ import { ReactiveFormsModule } from '@angular/forms'; NgbModule, BrowserAnimationsModule, MaterialModule, - ReactiveFormsModule + ReactiveFormsModule, + MatSliderModule, + MatIconModule ], providers: [], bootstrap: [AppComponent] diff --git a/frontend/src/styles.css b/frontend/src/styles.css index 8997c10e..b671a2a7 100644 --- a/frontend/src/styles.css +++ b/frontend/src/styles.css @@ -2,4 +2,4 @@ html, body { height: 100%; } body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } -*/ \ No newline at end of file +*/ -- cgit v1.2.3 From 24679faf85c509e04c86f00dae1e6dbc08ce6e2a Mon Sep 17 00:00:00 2001 From: Sonja Galovic Date: Sun, 13 Mar 2022 23:30:29 +0100 Subject: Doradjen login-modal.component i uradjen register-modal.component (stilski uredjen modal register forme) --- frontend/angular.json | 2 +- .../dataset-load/dataset-load.component.ts | 2 +- .../_modals/login-modal/login-modal.component.html | 15 +- .../_modals/login-modal/login-modal.component.ts | 20 +-- .../register-modal/register-modal.component.css | 0 .../register-modal/register-modal.component.html | 85 +++++++++++ .../register-modal.component.spec.ts | 25 ++++ .../register-modal/register-modal.component.ts | 166 +++++++++++++++++++++ .../_pages/login-page/login-page.component.html | 68 ++------- .../app/_pages/login-page/login-page.component.ts | 50 +------ .../register-page/register-page.component.html | 80 ---------- .../register-page/register-page.component.ts | 126 ---------------- frontend/src/app/app-routing.module.ts | 4 +- frontend/src/app/app.module.ts | 4 +- 14 files changed, 308 insertions(+), 339 deletions(-) create mode 100644 frontend/src/app/_modals/register-modal/register-modal.component.css create mode 100644 frontend/src/app/_modals/register-modal/register-modal.component.html create mode 100644 frontend/src/app/_modals/register-modal/register-modal.component.spec.ts create mode 100644 frontend/src/app/_modals/register-modal/register-modal.component.ts (limited to 'frontend/src') diff --git a/frontend/angular.json b/frontend/angular.json index bbbe3eaa..14028ae5 100644 --- a/frontend/angular.json +++ b/frontend/angular.json @@ -31,7 +31,7 @@ "node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.css" ], - "scripts": ["node_modules/bootstrap/dist/js/bootstrap.min.js"] + "scripts": ["node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"] }, "configurations": { "production": { 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..cde3e8b1 100644 --- a/frontend/src/app/_elements/dataset-load/dataset-load.component.ts +++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.ts @@ -38,7 +38,7 @@ export class DatasetLoadComponent { this.ngxCsvParser.parse(this.files[0], { header: false, delimiter: (this.delimiter == "razmak") ? " " : (this.delimiter == "") ? "," : this.delimiter}) .pipe().subscribe((result) => { - //console.log('Result', result); + console.log('Result', result); if (result.constructor === Array) { this.csvRecords = result; if (this.hasHeader) 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..eb6f0c53 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 @@ - - - - - + \ 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..3ee2c7fe 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,7 @@ 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; @Component({ selector: 'app-login-modal', @@ -27,25 +23,21 @@ export class LoginModalComponent implements OnInit { ) { } ngOnInit(): void { - this.loginModal = new window.bootstrap.Modal( - document.getElementById("modalForLogin") - ); } - openModal() { - this.loginModal.show(); - //console.log("ok"); - //(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.resetData(); //dodato this.loginModal.hide(); //dodato this.router.navigate(['add-model']); + }, error => { + console.warn(error); //NETACNI PODACI }); } - sendToRegister() { - + resetData() { + 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 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..d20b199f --- /dev/null +++ b/frontend/src/app/_modals/register-modal/register-modal.component.html @@ -0,0 +1,85 @@ + + + + \ 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; + + 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/_modals/register-modal/register-modal.component.ts b/frontend/src/app/_modals/register-modal/register-modal.component.ts new file mode 100644 index 00000000..d86345b5 --- /dev/null +++ b/frontend/src/app/_modals/register-modal/register-modal.component.ts @@ -0,0 +1,166 @@ +import { Component, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; +import { AuthService } from 'src/app/_services/auth.service'; + +declare var window: any; + +@Component({ + selector: 'app-register-modal', + templateUrl: './register-modal.component.html', + styleUrls: ['./register-modal.component.css'] +}) +export class RegisterModalComponent implements OnInit { + + registerModal: any; + + firstName: string = ''; + lastName: string = ''; + username: string = ''; + email: string = ''; + pass1: string = ''; + pass2: string = ''; + + wrongFirstNameBool: boolean = false; + wrongLastNameBool: 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](_(?!(\.|_))|\.(?!(_|\.))|[a-zA-Z0-9]){6,18}[a-zA-Z0-9]$/; + pattTwoSpaces: RegExp = / /; + pattEmail: RegExp = /^[a-zA-Z0-9]+([\.\-\+][a-zA-Z0-9]+)*\@([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}$/; + pattPassword: RegExp = /.{6,30}$/; + + constructor( + private router: Router, + private authService: AuthService + ) { } + + ngOnInit(): void { + this.registerModal = new window.bootstrap.Modal( + document.getElementById("modalForRegister") + ); + } + + openModal() { + this.registerModal.show(); + } + 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; + return false; + } + isCorrectPassword(element: string): boolean { + if (this.pattPassword.test(element)) + return true; + return false; + } + + firstNameValidation() { + if (this.isCorrectName(this.firstName) == true) { + this.wrongFirstNameBool = false; + return; + } + (document.getElementById('firstName')).focus(); + this.wrongFirstNameBool = true; + } + lastNameValidation() { + if (this.isCorrectName(this.lastName) == true) { + this.wrongLastNameBool = false; + return; + } + (document.getElementById('lastName')).focus(); + this.wrongLastNameBool = true; + } + usernameValidation() { + if (this.isCorrectUsername(this.username) == true) { + this.wrongUsernameBool = false; + return; + } + (document.getElementById('username')).focus(); + this.wrongUsernameBool = true; + } + emailValidation() { + if (this.isCorrectEmail(this.email) == true) { + this.wrongEmailBool = false; + return; + } + (document.getElementById('email')).focus(); + this.wrongEmailBool = true; + } + passwordValidation() { + if (this.isCorrectPassword(this.pass1) && this.isCorrectPassword(this.pass2) && this.pass1 == this.pass2) { + this.wrongPass1Bool = false; + this.wrongPass2Bool = false; + return; + } + this.pass1 = ''; //brisi obe ukucane lozinke + this.pass2 = ''; + (document.getElementById('pass1')).focus(); + this.wrongPass1Bool = true; + this.wrongPass2Bool = true; + } + + validation() { + this.firstName = this.firstName.trim(); + this.lastName = this.lastName.trim(); + this.username = this.username.trim(); + this.email = this.email.trim(); + + this.firstNameValidation(); + this.lastNameValidation(); + this.usernameValidation(); + this.emailValidation(); + this.passwordValidation(); + + if (!(this.wrongFirstNameBool || this.wrongLastNameBool || this.wrongUsernameBool || + this.wrongEmailBool || this.wrongPass1Bool || this.wrongPass2Bool)) { //sve ok, registruj ga + + let user = { + firstName: this.firstName, + lastName: this.lastName, + username: this.username, + password: this.pass1, + email: this.email + } + + this.authService.register(user) + .subscribe( + (response) => { + console.log(response); + if (response === 'User added') { + this.resetData(); //DODATO + this.registerModal.hide(); //dodato + this.router.navigate(['/login']); //registracija uspesna, idi na LOGIN MODAL, SREDITI + } + else if (response === 'Email Already Exists') + alert('Nalog sa unetim email-om već postoji!'); + else if (response === 'Username Already Exists') + alert('Nalog sa unetim korisnićkim imenom već postoji!'); + } + ); + } + } + + +} diff --git a/frontend/src/app/_pages/login-page/login-page.component.html b/frontend/src/app/_pages/login-page/login-page.component.html index 8deb5290..3a4244fc 100644 --- a/frontend/src/app/_pages/login-page/login-page.component.html +++ b/frontend/src/app/_pages/login-page/login-page.component.html @@ -1,55 +1,13 @@ - - - - - - \ 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 index e5366283..23ce4df0 100644 --- a/frontend/src/app/_pages/login-page/login-page.component.ts +++ b/frontend/src/app/_pages/login-page/login-page.component.ts @@ -1,10 +1,5 @@ -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 { Component } from '@angular/core'; -import { LoginModalComponent } from 'src/app/_modals/login-modal/login-modal.component'; -import { MDBModalRef, MDBModalService } from 'ng-uikit-pro-standard'; declare var window: any; @@ -17,47 +12,4 @@ declare var window: any; }) 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"); - //(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/register-page/register-page.component.html b/frontend/src/app/_pages/register-page/register-page.component.html index f8ae046e..e69de29b 100644 --- a/frontend/src/app/_pages/register-page/register-page.component.html +++ b/frontend/src/app/_pages/register-page/register-page.component.html @@ -1,80 +0,0 @@ -
- - - -
-
-
-
-

Registracija

- -
- -
-
- - -

Unesite ispravno ime. (minimum 1, maksimum 30 karaktera)

-
- -
- - -

Unesite ispravno prezime. (minimum 1, maksimum 30 karaktera)

-
-
-
- -
- -
- - -

Unesite ispravno korisničko ime.

-
- -
- - -

Unesite ispravnu e-mail adresu.

-
-
-
- -
- -
- - -

Lozinka se mora sastojati od najmanje 6 karaktera.

-
- - -
- - -

Lozinke se ne podudaraju.

-
-
- -


- -
- -
- -
- -
-
-
-
-
-
- - - -
\ No newline at end of file diff --git a/frontend/src/app/_pages/register-page/register-page.component.ts b/frontend/src/app/_pages/register-page/register-page.component.ts index 712fc55e..3add63a4 100644 --- a/frontend/src/app/_pages/register-page/register-page.component.ts +++ b/frontend/src/app/_pages/register-page/register-page.component.ts @@ -8,133 +8,7 @@ import { AuthService } from 'src/app/_services/auth.service'; styleUrls: ['./register-page.component.css'] }) export class RegisterPageComponent implements OnInit { - firstName: string = ''; - lastName: string = ''; - nickName: string = ''; - email: string = ''; - pass1: string = ''; - pass2: string = ''; - - wrongFirstNameBool: boolean = false; - wrongLastNameBool: boolean = false; - wrongNickNameBool: boolean = false; - wrongEmailBool: boolean = false; - wrongPass1Bool: boolean = false; - wrongPass2Bool: boolean = false; - - pattName: RegExp = /^[a-zA-ZšŠđĐčČćĆžŽ]+([ \-][a-zA-ZšŠđĐčČćĆžŽ]+)*$/; - pattTwoSpaces: RegExp = / /; - pattEmail: RegExp = /^[a-zA-Z0-9]+([\.\-\+][a-zA-Z0-9]+)*\@([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}$/; - pattPassword: RegExp = /.{6,30}$/; - - constructor( - private router: Router, - private authService: AuthService, - ) { } ngOnInit(): void { } - - isCorrectName(element: string): boolean { - if (this.pattName.test(element) && !(this.pattTwoSpaces.test(element)) && (element.length >= 1 && element.length <= 30)) - return true; - return false; - } - isCorrectEmail(element: string): boolean { - if (this.pattEmail.test(element.toLowerCase()) && element.length <= 320) - return true; - return false; - } - isCorrectPassword(element: string): boolean { - if (this.pattPassword.test(element)) - return true; - return false; - } - - firstNameValidation() { - if (this.isCorrectName(this.firstName) == true) { - this.wrongFirstNameBool = false; - return; - } - (document.getElementById('firstName')).focus(); - this.wrongFirstNameBool = true; - } - lastNameValidation() { - if (this.isCorrectName(this.lastName) == true) { - this.wrongLastNameBool = false; - return; - } - (document.getElementById('lastName')).focus(); - this.wrongLastNameBool = true; - } - nickNameValidation() { - if (this.isCorrectName(this.nickName) == true) { - this.wrongNickNameBool = false; - return; - } - (document.getElementById('nickName')).focus(); - this.wrongNickNameBool = true; - } - emailValidation() { - if (this.isCorrectEmail(this.email) == true) { - this.wrongEmailBool = false; - return; - } - (document.getElementById('email')).focus(); - this.wrongEmailBool = true; - } - passwordValidation() { - if (this.isCorrectPassword(this.pass1) && this.isCorrectPassword(this.pass2) && this.pass1 == this.pass2) { - this.wrongPass1Bool = false; - this.wrongPass2Bool = false; - return; - } - this.pass1 = ''; //brisi obe ukucane lozinke - this.pass2 = ''; - (document.getElementById('pass1')).focus(); - this.wrongPass1Bool = true; - this.wrongPass2Bool = true; - } - - validation() { - this.firstName = this.firstName.trim(); - this.lastName = this.lastName.trim(); - this.nickName = this.nickName.trim(); - this.email = this.email.trim(); - - this.firstNameValidation(); - this.lastNameValidation(); - //this.nickNameValidation(); - this.emailValidation(); - this.passwordValidation(); - - if (!(this.wrongFirstNameBool || this.wrongLastNameBool || this.wrongNickNameBool || - this.wrongEmailBool || this.wrongPass1Bool || this.wrongPass2Bool)) { //sve ok, registruj ga - - let user = { - firstName: this.firstName, - lastName: this.lastName, - username: this.nickName, - password: this.pass1, - email: this.email - } - - this.authService.register(user) - .subscribe( - (response) => { - console.log(response); - if (response === 'User added') - this.router.navigate(['/login']); //registracija uspesna, idi na login - else if (response === 'Email Already Exists') - alert('Nalog sa unetim email-om već postoji!'); - else if (response === 'Username Already Exists') - alert('Nalog sa unetim korisnićkim imenom već postoji!'); - } - ); - } - } - - - - } diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts index cd86ef5c..d053a9a5 100644 --- a/frontend/src/app/app-routing.module.ts +++ b/frontend/src/app/app-routing.module.ts @@ -7,6 +7,7 @@ import { OnlyAuthorizedComponent } from './_pages/only-authorized/only-authorize 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 { RegisterModalComponent } from './_modals/register-modal/register-modal.component'; const routes: Routes = [ { path: '', redirectTo: '/login', pathMatch: 'full' }, @@ -14,7 +15,8 @@ const routes: Routes = [ { path: 'register', component: RegisterPageComponent }, { path: 'only-authorized', component: OnlyAuthorizedComponent, canActivate: [AuthGuardService] }, { path: 'add-model', component: AddModelComponent }, - { path: 'login-modal-test', component: LoginModalComponent } + { path: 'login-modal-test', component: LoginModalComponent }, + { path: 'register-modal-test', component: RegisterModalComponent } ]; @NgModule({ diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index d95252ad..553ff513 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -13,6 +13,7 @@ import { DatasetLoadComponent } from './_elements/dataset-load/dataset-load.comp 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 { RegisterModalComponent } from './_modals/register-modal/register-modal.component'; import { MaterialModule } from './material.module'; import { ReactiveFormsModule } from '@angular/forms'; @@ -25,7 +26,8 @@ import { ReactiveFormsModule } from '@angular/forms'; OnlyAuthorizedComponent, DatasetLoadComponent, AddModelComponent, - LoginModalComponent + LoginModalComponent, + RegisterModalComponent ], imports: [ BrowserModule, -- cgit v1.2.3 From 5d9b17d69acc8dfbe30859610c6ba2fa5d9d963f Mon Sep 17 00:00:00 2001 From: Sonja Galovic Date: Mon, 14 Mar 2022 19:03:36 +0100 Subject: Sredjeni modali za login i register. Dodat folder images u src/assets. --- .../_modals/login-modal/login-modal.component.html | 6 ++-- .../_modals/login-modal/login-modal.component.ts | 4 +-- .../register-modal/register-modal.component.html | 37 ++++++--------------- .../register-modal/register-modal.component.ts | 29 ++++++---------- frontend/src/assets/images/logo.png | Bin 0 -> 13315 bytes frontend/src/assets/images/logo_crop.png | Bin 0 -> 11447 bytes frontend/src/assets/images/logo_dark.png | Bin 0 -> 15736 bytes frontend/src/assets/images/logo_dark_crop.png | Bin 0 -> 10987 bytes 8 files changed, 25 insertions(+), 51 deletions(-) create mode 100644 frontend/src/assets/images/logo.png create mode 100644 frontend/src/assets/images/logo_crop.png create mode 100644 frontend/src/assets/images/logo_dark.png create mode 100644 frontend/src/assets/images/logo_dark_crop.png (limited to 'frontend/src') 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 eb6f0c53..d694ea58 100644 --- a/frontend/src/app/_modals/login-modal/login-modal.component.html +++ b/frontend/src/app/_modals/login-modal/login-modal.component.html @@ -2,8 +2,8 @@