From bcd4852ea7964e15f4ad7d0061522da42d866d37 Mon Sep 17 00:00:00 2001 From: Danijel Anđelković Date: Tue, 19 Apr 2022 02:28:18 +0200 Subject: Dodao komponentu za prikaz dataseta sa tabelama. Promenio scrollbar i home stranicu. Zapoceo trening stranicu. --- .../src/app/_elements/navbar/navbar.component.html | 30 ++++++++-------------- 1 file changed, 10 insertions(+), 20 deletions(-) (limited to 'frontend/src/app/_elements/navbar') diff --git a/frontend/src/app/_elements/navbar/navbar.component.html b/frontend/src/app/_elements/navbar/navbar.component.html index 7d0c4cd8..41105405 100644 --- a/frontend/src/app/_elements/navbar/navbar.component.html +++ b/frontend/src/app/_elements/navbar/navbar.component.html @@ -2,32 +2,24 @@
- +
- -
- -
-- cgit v1.2.3 From c71ced076e4e0b713d428eca304f541f02c8ee6f Mon Sep 17 00:00:00 2001 From: Danijel Anđelković Date: Sat, 23 Apr 2022 18:59:27 +0200 Subject: Doterao stil za playlist komponentu, i tabelu podataka. Dodao arhivu u navbar i obrisao neke stare rute. --- .../_elements/datatable/datatable.component.html | 34 ++++++------- .../src/app/_elements/navbar/navbar.component.html | 6 +-- .../app/_elements/playlist/playlist.component.css | 10 ++-- .../app/_elements/playlist/playlist.component.html | 10 ++-- .../src/app/_pages/archive/archive.component.html | 42 +++++++++++++++- .../src/app/_pages/archive/archive.component.ts | 12 ++++- frontend/src/app/_pages/home/home.component.html | 57 +--------------------- frontend/src/app/app.component.ts | 1 - frontend/src/styles/helper.css | 17 +++++++ frontend/src/styles/theme.css | 17 ++++++- 10 files changed, 112 insertions(+), 94 deletions(-) (limited to 'frontend/src/app/_elements/navbar') diff --git a/frontend/src/app/_elements/datatable/datatable.component.html b/frontend/src/app/_elements/datatable/datatable.component.html index 8db62aff..fe359db0 100644 --- a/frontend/src/app/_elements/datatable/datatable.component.html +++ b/frontend/src/app/_elements/datatable/datatable.component.html @@ -1,18 +1,16 @@
-
-
+
+
-
+
Tabela {{tableData.numCols}}x{{tableData.numRows}}
-
- +
+
@@ -22,21 +20,17 @@ - - - - -
{{item}}
{{col}}
+ {{tableData.numRows - 11}} redova...
- - - - - - - -
{{col}}
+ {{tableData.numRows - 10}} redova...
+ + + +
+
+ {{tableData.numRows - 11}} redova...
+
+ + +
diff --git a/frontend/src/app/_elements/navbar/navbar.component.html b/frontend/src/app/_elements/navbar/navbar.component.html index 41105405..5390136d 100644 --- a/frontend/src/app/_elements/navbar/navbar.component.html +++ b/frontend/src/app/_elements/navbar/navbar.component.html @@ -9,9 +9,7 @@
  • Početna
  • Napravi eksperiment
    • -
  • Treniraj model -
    • -
  • Predvidi +
  • Arhiva
    • @@ -20,8 +18,6 @@ mdo
      -
    • Nov model...
      • -
    • Podešavanja
    • Moj profil
    • diff --git a/frontend/src/app/_elements/playlist/playlist.component.css b/frontend/src/app/_elements/playlist/playlist.component.css index 7ce320d9..83448e51 100644 --- a/frontend/src/app/_elements/playlist/playlist.component.css +++ b/frontend/src/app/_elements/playlist/playlist.component.css @@ -13,7 +13,7 @@ .ns-cards { position: relative; width: 300%; - height: 36rem; + height: 26rem; margin-bottom: 20px; } @@ -28,6 +28,10 @@ cursor: pointer; } +.ns-card:hover { + opacity: 1 !important; +} + input[type=radio] { display: none; } @@ -36,7 +40,7 @@ input[type=radio] { #item-2:checked~.ns-cards #view-item-1, #item-3:checked~.ns-cards #view-item-2 { transform: translatex(-40%) scale(0.8); - opacity: 0.4; + opacity: 0.5; z-index: 0; } @@ -44,7 +48,7 @@ input[type=radio] { #item-2:checked~.ns-cards #view-item-3, #item-3:checked~.ns-cards #view-item-1 { transform: translatex(40%) scale(0.8); - opacity: 0.4; + opacity: 0.5; z-index: 0; } diff --git a/frontend/src/app/_elements/playlist/playlist.component.html b/frontend/src/app/_elements/playlist/playlist.component.html index fdb426ed..97ebe6a5 100644 --- a/frontend/src/app/_elements/playlist/playlist.component.html +++ b/frontend/src/app/_elements/playlist/playlist.component.html @@ -3,17 +3,17 @@
      -
      -
      - +
      +

      {{datasets[getIndex(selectedId)].name}}

      \ No newline at end of file diff --git a/frontend/src/app/_pages/archive/archive.component.html b/frontend/src/app/_pages/archive/archive.component.html index 44c4d9c2..1d5d144f 100644 --- a/frontend/src/app/_pages/archive/archive.component.html +++ b/frontend/src/app/_pages/archive/archive.component.html @@ -1 +1,41 @@ -

      archive works!

      +
      +
      + + +
      + Pogledaj sve javne izvore podataka... +
      +
      + +
      +
      +
      + 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. +

      +
      +
      +
      +
      \ No newline at end of file diff --git a/frontend/src/app/_pages/archive/archive.component.ts b/frontend/src/app/_pages/archive/archive.component.ts index e3ffd6e2..47f96218 100644 --- a/frontend/src/app/_pages/archive/archive.component.ts +++ b/frontend/src/app/_pages/archive/archive.component.ts @@ -1,4 +1,6 @@ import { Component, OnInit } from '@angular/core'; +import Dataset from 'src/app/_data/Dataset'; +import { DatasetsService } from 'src/app/_services/datasets.service'; @Component({ selector: 'app-archive', @@ -7,9 +9,17 @@ import { Component, OnInit } from '@angular/core'; }) export class ArchiveComponent implements OnInit { - constructor() { } + publicDatasets: Dataset[] = []; + + constructor(private datasetsService: DatasetsService) { } ngOnInit(): void { + this.datasetsService.getPublicDatasets().subscribe((datasets) => { + this.publicDatasets = datasets; + this.publicDatasets.forEach((element, index) => { + this.publicDatasets[index] = (element); + }) + }); } } diff --git a/frontend/src/app/_pages/home/home.component.html b/frontend/src/app/_pages/home/home.component.html index b673d074..f73e7571 100644 --- a/frontend/src/app/_pages/home/home.component.html +++ b/frontend/src/app/_pages/home/home.component.html @@ -3,7 +3,7 @@
    -
    +
    @@ -13,62 +13,7 @@
    -
    -
    -
    - 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. -

    -
    -
    -
    -
    -
    - - - -
    - Pogledaj sve javne izvore podataka... -
    - -
    \ No newline at end of file diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts index bd9a3b0d..4a0d85c8 100644 --- a/frontend/src/app/app.component.ts +++ b/frontend/src/app/app.component.ts @@ -6,7 +6,6 @@ import { AuthService } from './_services/auth.service'; import { SignalRService } from './_services/signal-r.service'; import { HttpClient } from '@angular/common/http'; import Shared from './Shared'; -import { CookieService } from 'ngx-cookie-service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', diff --git a/frontend/src/styles/helper.css b/frontend/src/styles/helper.css index bcd02646..58f00c20 100644 --- a/frontend/src/styles/helper.css +++ b/frontend/src/styles/helper.css @@ -24,4 +24,21 @@ margin-top: 50%; margin-left: auto; transform: translateX(-50%); +} + +.footer-center { + position: relative; + height: 1rem; +} + +.footer-center>* { + position: fixed; + bottom: 8%; + left: 50%; + transform: translateX(-50%); +} + +.row-height { + white-space: nowrap; + height: 1rem; } \ No newline at end of file diff --git a/frontend/src/styles/theme.css b/frontend/src/styles/theme.css index 3ef44e54..820f5a5a 100644 --- a/frontend/src/styles/theme.css +++ b/frontend/src/styles/theme.css @@ -1,7 +1,10 @@ :root { --ns-primary: #00a8e8; --ns-bg: #003459; - --ns-bg-transparent: rgba(0, 152, 189, 0.3) + --ns-bg-light-30: rgba(0, 152, 189, 0.3); + --ns-bg-dark-100: rgba(0, 65, 101, 1.0); + --ns-bg-dark-50: rgba(0, 65, 101, 0.5); + --offwhite: #ebe6e6; } body { @@ -10,9 +13,19 @@ body { } .bg-light { - background-color: var(--ns-bg-transparent) !important; + background-color: var(--ns-bg-light-30) !important; +} + +.ns-bg-dark-50 {} + +.ns-bg-dark-100 { + background-color: var(--ns-bg-dark-100) !important; } a { color: var(--ns-primary) !important; +} + +.text-offwhite { + color: var(--offwhite); } \ No newline at end of file -- cgit v1.2.3 From 8497bc988f2a5cbca10ee6870708bd4c06c24dd2 Mon Sep 17 00:00:00 2001 From: Danijel Anđelković Date: Sun, 24 Apr 2022 21:47:00 +0200 Subject: Promenio temu material-a tako da se poklapa sa nasom temom. Dodao responzivnost za eksperiment stranu. --- frontend/angular.json | 216 ++++++++--------- .../src/app/_elements/folder/folder.component.css | 4 +- .../src/app/_elements/folder/folder.component.html | 4 +- .../src/app/_elements/folder/folder.component.ts | 1 - .../src/app/_elements/navbar/navbar.component.html | 2 +- .../app/_pages/experiment/experiment.component.css | 47 ++-- .../_pages/experiment/experiment.component.html | 83 ++++--- .../app/_pages/experiment/experiment.component.ts | 16 +- frontend/src/app/app.component.html | 6 +- frontend/src/app/app.component.ts | 18 +- frontend/src/custom-theme.scss | 267 +++++++++++++++++++-- frontend/src/styles/layout.css | 5 + frontend/src/styles/theme.css | 18 ++ 13 files changed, 452 insertions(+), 235 deletions(-) (limited to 'frontend/src/app/_elements/navbar') diff --git a/frontend/angular.json b/frontend/angular.json index d1983d31..13c27f40 100644 --- a/frontend/angular.json +++ b/frontend/angular.json @@ -1,117 +1,113 @@ { - "$schema": "./node_modules/@angular/cli/lib/config/schema.json", - "version": 1, - "newProjectRoot": "projects", - "projects": { - "frontend": { - "projectType": "application", - "schematics": { - "@schematics/angular:application": { - "strict": true - } - }, - "root": "", - "sourceRoot": "src", - "prefix": "app", - "architect": { - "build": { - "builder": "@angular-devkit/build-angular:browser", - "options": { - "outputPath": "dist/frontend", - "index": "src/index.html", - "main": "src/main.ts", - "polyfills": "src/polyfills.ts", - "tsConfig": "tsconfig.app.json", - "assets": [ - "src/favicon.ico", - "src/assets" - ], - "styles": [ - "src/custom-theme.scss", - "node_modules/bootstrap/dist/css/bootstrap.min.css", - "src/styles.css", - "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css" - ], - "scripts": [ - "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" - ] - }, - "configurations": { - "production": { - "budgets": [ - { - "type": "initial", - "maximumWarning": "2mb", - "maximumError": "4mb" - }, - { - "type": "anyComponentStyle", - "maximumWarning": "10kb", - "maximumError": "15kb" - } - ], - "fileReplacements": [ - { - "replace": "src/environments/environment.ts", - "with": "src/environments/environment.prod.ts" + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "frontend": { + "projectType": "application", + "schematics": { + "@schematics/angular:application": { + "strict": true } - ], - "outputHashing": "all" }, - "development": { - "buildOptimizer": false, - "optimization": false, - "vendorChunk": true, - "extractLicenses": false, - "sourceMap": true, - "namedChunks": true - } - }, - "defaultConfiguration": "production" - }, - "serve": { - "builder": "@angular-devkit/build-angular:dev-server", - "configurations": { - "production": { - "browserTarget": "frontend:build:production" - }, - "development": { - "browserTarget": "frontend:build:development" + "root": "", + "sourceRoot": "src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/frontend", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "tsconfig.app.json", + "assets": [ + "src/favicon.ico", + "src/assets" + ], + "styles": [ + "node_modules/bootstrap/dist/css/bootstrap.min.css", + "src/styles.css", + "src/custom-theme.scss" + ], + "scripts": [ + "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" + ] + }, + "configurations": { + "production": { + "budgets": [{ + "type": "initial", + "maximumWarning": "2mb", + "maximumError": "4mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "10kb", + "maximumError": "15kb" + } + ], + "fileReplacements": [{ + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + }], + "outputHashing": "all" + }, + "development": { + "buildOptimizer": false, + "optimization": false, + "vendorChunk": true, + "extractLicenses": false, + "sourceMap": true, + "namedChunks": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "configurations": { + "production": { + "browserTarget": "frontend:build:production" + }, + "development": { + "browserTarget": "frontend:build:development" + } + }, + "defaultConfiguration": "development" + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "frontend:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "tsconfig.spec.json", + "karmaConfig": "karma.conf.js", + "assets": [ + "src/favicon.ico", + "src/assets" + ], + "styles": [ + "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css", + "src/styles.css" + ], + "scripts": [] + } + } } - }, - "defaultConfiguration": "development" - }, - "extract-i18n": { - "builder": "@angular-devkit/build-angular:extract-i18n", - "options": { - "browserTarget": "frontend:build" - } - }, - "test": { - "builder": "@angular-devkit/build-angular:karma", - "options": { - "main": "src/test.ts", - "polyfills": "src/polyfills.ts", - "tsConfig": "tsconfig.spec.json", - "karmaConfig": "karma.conf.js", - "assets": [ - "src/favicon.ico", - "src/assets" - ], - "styles": [ - "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css", - "src/styles.css" - ], - "scripts": [] - } } - } - } - }, - "defaultProject": "frontend", - "cli": { - "warnings": { - "versionMismatch": false + }, + "defaultProject": "frontend", + "cli": { + "warnings": { + "versionMismatch": false + } } - } } \ No newline at end of file diff --git a/frontend/src/app/_elements/folder/folder.component.css b/frontend/src/app/_elements/folder/folder.component.css index cfb0d087..a1c1124a 100644 --- a/frontend/src/app/_elements/folder/folder.component.css +++ b/frontend/src/app/_elements/folder/folder.component.css @@ -55,7 +55,7 @@ } .tab-link:active { - color: var(--ns-accent) !important; + text-decoration: underline !important; } .selected-tab { @@ -107,7 +107,7 @@ .folder-bottom-button { font-size: large; position: relative; - background-color: var(--ns-bg-dark-100); + background-color: var(--ns-bg-dark-50); width: 10rem; height: 2.5rem; display: flex; diff --git a/frontend/src/app/_elements/folder/folder.component.html b/frontend/src/app/_elements/folder/folder.component.html index 11fccc56..895ac84e 100644 --- a/frontend/src/app/_elements/folder/folder.component.html +++ b/frontend/src/app/_elements/folder/folder.component.html @@ -51,13 +51,13 @@ {{fileToDisplay ? fileToDisplay.name : 'No file selected.'}} {{selectedFileIndex}} {{hoveringOverFileIndex}}