From 6fe49c5cd6ef20dc477f11dac098e4c18c2584ee Mon Sep 17 00:00:00 2001 From: Danijel Anđelković Date: Sat, 23 Apr 2022 03:01:02 +0200 Subject: Dodao korisnička podešavanja za pozadinu. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/app/material.module.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'frontend/src/app/material.module.ts') diff --git a/frontend/src/app/material.module.ts b/frontend/src/app/material.module.ts index d16cef3d..4cee3146 100644 --- a/frontend/src/app/material.module.ts +++ b/frontend/src/app/material.module.ts @@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common'; import { MatDialogModule } from '@angular/material/dialog'; import { MatButtonModule } from '@angular/material/button'; import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatSlideToggleModule } from '@angular/material/slide-toggle'; import { MatInputModule } from '@angular/material/input'; import { MatCheckboxModule } from '@angular/material/checkbox'; import { MatIconModule } from '@angular/material/icon'; @@ -15,7 +16,8 @@ import { MatIconModule } from '@angular/material/icon'; MatFormFieldModule, MatInputModule, MatCheckboxModule, - MatIconModule + MatIconModule, + MatSlideToggleModule ] }) -export class MaterialModule {} \ No newline at end of file +export class MaterialModule { } \ No newline at end of file -- cgit v1.2.3 From 7f4315cc4accda4e7c038a58f6e8a2623c986eca Mon Sep 17 00:00:00 2001 From: TAMARA JERINIC Date: Sat, 23 Apr 2022 20:46:13 +0200 Subject: Dodate stavke u material.module i form-model --- frontend/package-lock.json | 44 +++---- frontend/package.json | 4 +- .../_elements/form-model/form-model.component.css | 3 + .../_elements/form-model/form-model.component.html | 140 ++++++++++++++++++++- .../_elements/form-model/form-model.component.ts | 45 ++++++- frontend/src/app/_services/auth.service.ts | 3 +- frontend/src/app/material.module.ts | 117 +++++++++++++++-- 7 files changed, 318 insertions(+), 38 deletions(-) (limited to 'frontend/src/app/material.module.ts') diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 488653db..22756c36 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -10,13 +10,13 @@ "hasInstallScript": true, "dependencies": { "@angular/animations": "~13.2.0", - "@angular/cdk": "^13.2.6", + "@angular/cdk": "^13.3.4", "@angular/common": "~13.2.0", "@angular/compiler": "~13.2.0", "@angular/core": "~13.2.0", "@angular/forms": "~13.2.0", "@angular/localize": "~13.2.0", - "@angular/material": "^13.2.6", + "@angular/material": "^13.3.4", "@angular/platform-browser": "~13.2.0", "@angular/platform-browser-dynamic": "~13.2.0", "@angular/router": "~13.2.0", @@ -351,9 +351,9 @@ "dev": true }, "node_modules/@angular/animations": { - "version": "13.2.6", - "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-13.2.6.tgz", - "integrity": "sha512-DrjpKo68uR3lSLQQXosoTCbjKQS6IKRCpR14E2t8fo0AX8i2hkB8je4SrhdCyB7FgFN7l2kgUYo4Qa8+BOB+aA==", + "version": "13.2.7", + "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-13.2.7.tgz", + "integrity": "sha512-FthGqRPQ1AOcOx/NIW65xeFYkQZJ7PpXcX59Kt+qkoUzngAQEY+UUpOteG52tmL0iZSVwOCjtxRFi9w4heVgEg==", "dependencies": { "tslib": "^2.3.0" }, @@ -361,13 +361,13 @@ "node": "^12.20.0 || ^14.15.0 || >=16.10.0" }, "peerDependencies": { - "@angular/core": "13.2.6" + "@angular/core": "13.2.7" } }, "node_modules/@angular/cdk": { - "version": "13.2.6", - "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-13.2.6.tgz", - "integrity": "sha512-epuXmaHqfukwPsYvIksbuHLXDtb6GALV2Vgv6W2asj4TorD584CeQTs0EcdPGmCzhGUYI8U8QV63WOxu9YFcNA==", + "version": "13.3.4", + "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-13.3.4.tgz", + "integrity": "sha512-im4LKxJaIuqFVzmtf650PoiYsn/SZlvBV2zEgzusK8HwQ24C1Lya7NQSApwl8k43h4eKO1OvUKBjqL5uDgEQag==", "dependencies": { "tslib": "^2.3.0" }, @@ -670,15 +670,15 @@ } }, "node_modules/@angular/material": { - "version": "13.2.6", - "resolved": "https://registry.npmjs.org/@angular/material/-/material-13.2.6.tgz", - "integrity": "sha512-/h5wa/tXE0DMIIEQX+rozFkUWHYUWg1Xf1R2tXUFLslLQ0KRCGyNo225Sv/1wrxXHxfrML787lA9ex4p90Feqw==", + "version": "13.3.4", + "resolved": "https://registry.npmjs.org/@angular/material/-/material-13.3.4.tgz", + "integrity": "sha512-jK9rWmBaPrE+3re6uIdyvG5DCzc47VUvnP1DqblNnpaa8GCKllb1cFRGqa5GPYB1/96d3wO+RPwzhC06qqV+yw==", "dependencies": { "tslib": "^2.3.0" }, "peerDependencies": { "@angular/animations": "^13.0.0 || ^14.0.0-0", - "@angular/cdk": "13.2.6", + "@angular/cdk": "13.3.4", "@angular/common": "^13.0.0 || ^14.0.0-0", "@angular/core": "^13.0.0 || ^14.0.0-0", "@angular/forms": "^13.0.0 || ^14.0.0-0", @@ -12087,17 +12087,17 @@ } }, "@angular/animations": { - "version": "13.2.6", - "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-13.2.6.tgz", - "integrity": "sha512-DrjpKo68uR3lSLQQXosoTCbjKQS6IKRCpR14E2t8fo0AX8i2hkB8je4SrhdCyB7FgFN7l2kgUYo4Qa8+BOB+aA==", + "version": "13.2.7", + "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-13.2.7.tgz", + "integrity": "sha512-FthGqRPQ1AOcOx/NIW65xeFYkQZJ7PpXcX59Kt+qkoUzngAQEY+UUpOteG52tmL0iZSVwOCjtxRFi9w4heVgEg==", "requires": { "tslib": "^2.3.0" } }, "@angular/cdk": { - "version": "13.2.6", - "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-13.2.6.tgz", - "integrity": "sha512-epuXmaHqfukwPsYvIksbuHLXDtb6GALV2Vgv6W2asj4TorD584CeQTs0EcdPGmCzhGUYI8U8QV63WOxu9YFcNA==", + "version": "13.3.4", + "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-13.3.4.tgz", + "integrity": "sha512-im4LKxJaIuqFVzmtf650PoiYsn/SZlvBV2zEgzusK8HwQ24C1Lya7NQSApwl8k43h4eKO1OvUKBjqL5uDgEQag==", "requires": { "parse5": "^5.0.0", "tslib": "^2.3.0" @@ -12304,9 +12304,9 @@ } }, "@angular/material": { - "version": "13.2.6", - "resolved": "https://registry.npmjs.org/@angular/material/-/material-13.2.6.tgz", - "integrity": "sha512-/h5wa/tXE0DMIIEQX+rozFkUWHYUWg1Xf1R2tXUFLslLQ0KRCGyNo225Sv/1wrxXHxfrML787lA9ex4p90Feqw==", + "version": "13.3.4", + "resolved": "https://registry.npmjs.org/@angular/material/-/material-13.3.4.tgz", + "integrity": "sha512-jK9rWmBaPrE+3re6uIdyvG5DCzc47VUvnP1DqblNnpaa8GCKllb1cFRGqa5GPYB1/96d3wO+RPwzhC06qqV+yw==", "requires": { "tslib": "^2.3.0" } diff --git a/frontend/package.json b/frontend/package.json index c02a1fb0..5d9d677d 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -13,13 +13,13 @@ "private": true, "dependencies": { "@angular/animations": "~13.2.0", - "@angular/cdk": "^13.2.6", + "@angular/cdk": "^13.3.4", "@angular/common": "~13.2.0", "@angular/compiler": "~13.2.0", "@angular/core": "~13.2.0", "@angular/forms": "~13.2.0", "@angular/localize": "~13.2.0", - "@angular/material": "^13.2.6", + "@angular/material": "^13.3.4", "@angular/platform-browser": "~13.2.0", "@angular/platform-browser-dynamic": "~13.2.0", "@angular/router": "~13.2.0", diff --git a/frontend/src/app/_elements/form-model/form-model.component.css b/frontend/src/app/_elements/form-model/form-model.component.css index e69de29b..9340fed5 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.css +++ b/frontend/src/app/_elements/form-model/form-model.component.css @@ -0,0 +1,3 @@ +*{ + color: var(--offwhite) !important; +} \ No newline at end of file diff --git a/frontend/src/app/_elements/form-model/form-model.component.html b/frontend/src/app/_elements/form-model/form-model.component.html index 8f284c46..5db2cb49 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.html +++ b/frontend/src/app/_elements/form-model/form-model.component.html @@ -1 +1,139 @@ -

form-model works!

+
+
+
+
+ + Naziv + + + Obavezno polje + + +
+
+ + Tip problema + + + Obavezno polje + + +
+
+
+
+ + Optimizacija + + + Obavezno polje + + +
+
+ + Learning rate + + + Obavezno polje + + +
+
+
+
+ + Broj epoha + + + Obavezno polje + + +
+
+ + Broj uzoraka po iteraciji + + + Obavezno polje + + +
+
+
+
+ + Funkcija aktivacije izlaznog sloja + + + Obavezno polje + + +
+
+ + Funkcija troška + + + Obavezno polje + + +
+
+
+ +
+ +
+
+ +
+ +
+
+ +
\ No newline at end of file diff --git a/frontend/src/app/_elements/form-model/form-model.component.ts b/frontend/src/app/_elements/form-model/form-model.component.ts index 2ff8c605..6f795161 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.ts +++ b/frontend/src/app/_elements/form-model/form-model.component.ts @@ -1,15 +1,54 @@ -import { Component, OnInit } from '@angular/core'; - +import { Component, OnInit ,Input, ViewChild, Output, EventEmitter} from '@angular/core'; +import {FormControl, Validators} from '@angular/forms'; +import Shared from 'src/app/Shared'; +import Experiment from 'src/app/_data/Experiment'; +import Model, { ActivationFunction, LossFunction, LossFunctionBinaryClassification, LossFunctionMultiClassification, LossFunctionRegression, Metrics, MetricsBinaryClassification, MetricsMultiClassification, MetricsRegression, NullValueOptions, Optimizer, ProblemType } from 'src/app/_data/Model'; +import { GraphComponent } from '../graph/graph.component'; @Component({ selector: 'app-form-model', templateUrl: './form-model.component.html', styleUrls: ['./form-model.component.css'] }) export class FormModelComponent implements OnInit { + @ViewChild(GraphComponent) graph!: GraphComponent; + @Input() forExperiment?: Experiment; + @Output() selectedModelChangeEvent = new EventEmitter(); constructor() { } - + ngOnInit(): void { } + animalControl = new FormControl('', Validators.required); + selectFormControl = new FormControl('', Validators.required); + /*animals: Animal[] = [ + {name: 'Dog', sound: 'Woof!'}, + {name: 'Cat', sound: 'Meow!'}, + {name: 'Cow', sound: 'Moo!'}, + {name: 'Fox', sound: 'Wa-pa-pa-pa-pa-pa-pow!'}, + ]; + */ + newModel: Model = new Model(); + myModels?: Model[]; + selectedModel?: Model; + + ProblemType = ProblemType; + ActivationFunction = ActivationFunction; + metrics: any = Metrics; + LossFunction = LossFunction; + Optimizer = Optimizer; + Object = Object; + document = document; + shared = Shared; + + term: string = ""; + selectedMetrics = []; + lossFunction: any = LossFunction; + showMyModels: boolean = true; + + batchSizePower: number = 2; + + updateGraph() { + this.graph.update(); + } } diff --git a/frontend/src/app/_services/auth.service.ts b/frontend/src/app/_services/auth.service.ts index b7d28d77..dd46615d 100644 --- a/frontend/src/app/_services/auth.service.ts +++ b/frontend/src/app/_services/auth.service.ts @@ -1,4 +1,4 @@ -import { Injectable } from '@angular/core'; +import { EventEmitter, Injectable } from '@angular/core'; import { HttpClient, HttpHeaders } from '@angular/common/http'; import { JwtHelperService } from '@auth0/angular-jwt'; import { CookieService } from 'ngx-cookie-service'; @@ -13,6 +13,7 @@ const jwtHelper = new JwtHelperService(); export class AuthService { shared = shared; + public loggedInEvent: EventEmitter = new EventEmitter(); constructor(private http: HttpClient, private cookie: CookieService) { } diff --git a/frontend/src/app/material.module.ts b/frontend/src/app/material.module.ts index 4cee3146..baaae58b 100644 --- a/frontend/src/app/material.module.ts +++ b/frontend/src/app/material.module.ts @@ -1,23 +1,122 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { MatDialogModule } from '@angular/material/dialog'; -import { MatButtonModule } from '@angular/material/button'; +// Material Form Controls +import { MatAutocompleteModule } from '@angular/material/autocomplete'; +import { MatCheckboxModule } from '@angular/material/checkbox'; +import { MatDatepickerModule } from '@angular/material/datepicker'; import { MatFormFieldModule } from '@angular/material/form-field'; -import { MatSlideToggleModule } from '@angular/material/slide-toggle'; import { MatInputModule } from '@angular/material/input'; -import { MatCheckboxModule } from '@angular/material/checkbox'; +import { MatRadioModule } from '@angular/material/radio'; +import { MatSelectModule } from '@angular/material/select'; +import { MatSliderModule } from '@angular/material/slider'; +import { MatSlideToggleModule } from '@angular/material/slide-toggle'; +// Material Navigation +import { MatMenuModule } from '@angular/material/menu'; +import { MatSidenavModule } from '@angular/material/sidenav'; +import { MatToolbarModule } from '@angular/material/toolbar'; +// Material Layout +import { MatCardModule } from '@angular/material/card'; +import { MatDividerModule } from '@angular/material/divider'; +import { MatExpansionModule } from '@angular/material/expansion'; +import { MatGridListModule } from '@angular/material/grid-list'; +import { MatListModule } from '@angular/material/list'; +import { MatStepperModule } from '@angular/material/stepper'; +import { MatTabsModule } from '@angular/material/tabs'; +import { MatTreeModule } from '@angular/material/tree'; +// Material Buttons & Indicators +import { MatButtonModule } from '@angular/material/button'; +import { MatButtonToggleModule } from '@angular/material/button-toggle'; +import { MatBadgeModule } from '@angular/material/badge'; +import { MatChipsModule } from '@angular/material/chips'; import { MatIconModule } from '@angular/material/icon'; - +import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; +import { MatProgressBarModule } from '@angular/material/progress-bar'; +import { MatRippleModule } from '@angular/material/core'; +// Material Popups & Modals +import { MatBottomSheetModule } from '@angular/material/bottom-sheet'; +import { MatDialogModule } from '@angular/material/dialog'; +import { MatSnackBarModule } from '@angular/material/snack-bar'; +import { MatTooltipModule } from '@angular/material/tooltip'; +// Material Data tables +import { MatPaginatorModule } from '@angular/material/paginator'; +import { MatSortModule } from '@angular/material/sort'; +import { MatTableModule } from '@angular/material/table'; @NgModule({ - exports: [ + declarations: [], + imports: [ CommonModule, - MatDialogModule, - MatButtonModule, + MatAutocompleteModule, + MatCheckboxModule, + MatDatepickerModule, MatFormFieldModule, MatInputModule, + MatRadioModule, + MatSelectModule, + MatSliderModule, + MatSlideToggleModule, + MatMenuModule, + MatSidenavModule, + MatToolbarModule, + MatCardModule, + MatDividerModule, + MatExpansionModule, + MatGridListModule, + MatListModule, + MatStepperModule, + MatTabsModule, + MatTreeModule, + MatButtonModule, + MatButtonToggleModule, + MatBadgeModule, + MatChipsModule, + MatIconModule, + MatProgressSpinnerModule, + MatProgressBarModule, + MatRippleModule, + MatBottomSheetModule, + MatDialogModule, + MatSnackBarModule, + MatTooltipModule, + MatPaginatorModule, + MatSortModule, + MatTableModule + ], + exports: [ + MatAutocompleteModule, MatCheckboxModule, + MatDatepickerModule, + MatFormFieldModule, + MatInputModule, + MatRadioModule, + MatSelectModule, + MatSliderModule, + MatSlideToggleModule, + MatMenuModule, + MatSidenavModule, + MatToolbarModule, + MatCardModule, + MatDividerModule, + MatExpansionModule, + MatGridListModule, + MatListModule, + MatStepperModule, + MatTabsModule, + MatTreeModule, + MatButtonModule, + MatButtonToggleModule, + MatBadgeModule, + MatChipsModule, MatIconModule, - MatSlideToggleModule + MatProgressSpinnerModule, + MatProgressBarModule, + MatRippleModule, + MatBottomSheetModule, + MatDialogModule, + MatSnackBarModule, + MatTooltipModule, + MatPaginatorModule, + MatSortModule, + MatTableModule ] }) export class MaterialModule { } \ No newline at end of file -- cgit v1.2.3