From e7fd69e652566232dad8631a9c95532c033eaf96 Mon Sep 17 00:00:00 2001
From: "DESKTOP-S0O2C44\\ROG" <ivan996sk@gmail.com>
Date: Thu, 31 Mar 2022 14:22:55 +0200
Subject: Doradjen dizajn stranica modeli i prediktor #53 #66

---
 frontend/src/app/_elements/annvisual/annvisual.component.html   | 4 ++--
 frontend/src/app/_elements/item-model/item-model.component.html | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

(limited to 'frontend/src/app/_elements')

diff --git a/frontend/src/app/_elements/annvisual/annvisual.component.html b/frontend/src/app/_elements/annvisual/annvisual.component.html
index f23022de..09251398 100644
--- a/frontend/src/app/_elements/annvisual/annvisual.component.html
+++ b/frontend/src/app/_elements/annvisual/annvisual.component.html
@@ -1,5 +1,5 @@
-<div style="text-align: center; width: 100%;" >
+<div style="text-align: center; " >
     <button (click)="d3()" mat-raised-button color="primary">Prikaz veštačke neuronske mreže</button>
-    <div id="graph" align-items-center ></div>
+    <div id="graph" align-items-center style="width: 12rem;"></div>
   </div>
 
diff --git a/frontend/src/app/_elements/item-model/item-model.component.html b/frontend/src/app/_elements/item-model/item-model.component.html
index 9466da01..c8c1a36d 100644
--- a/frontend/src/app/_elements/item-model/item-model.component.html
+++ b/frontend/src/app/_elements/item-model/item-model.component.html
@@ -6,9 +6,9 @@
     <div class="card-body overflow-hidden">
         <p class="card-text">
             {{"Opis: "+ model.description}}<br>
-            {{"Datum kreiranja:" + model.dateCreated}}<br>
-            {{"Poslednje ažuriranje:" + model.lastUpdated}}<br>
+            {{"Datum kreiranja: " + model.dateCreated}}<br>
+            {{"Poslednje ažuriranje: " + model.lastUpdated}}<br>
         </p>
-        
+        <app-annvisual class="align-items-center"  [model]="model" style="width: 12rem"></app-annvisual>
     </div>
 </div>
\ No newline at end of file
-- 
cgit v1.2.3


From f694ca566bf29e0129043b6852a613d744ce1c61 Mon Sep 17 00:00:00 2001
From: Sonja Galovic <galovicsonja@gmail.com>
Date: Thu, 31 Mar 2022 21:20:32 +0200
Subject: Sitne izmene - add-model i item-predictor

---
 frontend/package-lock.json                         | 167 +++++++++++++--------
 .../item-predictor/item-predictor.component.ts     |   2 +-
 .../app/_pages/add-model/add-model.component.ts    |   6 +-
 3 files changed, 113 insertions(+), 62 deletions(-)

(limited to 'frontend/src/app/_elements')

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 962905b7..b5ca9d02 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -450,6 +450,7 @@
       "version": "13.2.5",
       "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-13.2.5.tgz",
       "integrity": "sha512-Xd8xj2Z0ilA4TJAM/JkTtA1CAa6SuebFsEEvabHCRO5MDvtdsIUP91ADUZIqDHy7qe6Qift/rAVN2PXxT2aaNA==",
+      "dev": true,
       "dependencies": {
         "@babel/core": "^7.17.2",
         "chokidar": "^3.0.0",
@@ -479,6 +480,7 @@
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.1.2.tgz",
       "integrity": "sha512-hoyByceqwKirw7w3Z7gnIIZC3Wx3J484Y3L/cMpXFbr7d9ZQj2mODrirNzcJa+SM3UlpWXYvKV4RlRpFXlWgXg==",
+      "dev": true,
       "dependencies": {
         "@jridgewell/trace-mapping": "^0.3.0"
       },
@@ -490,6 +492,7 @@
       "version": "7.17.5",
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.17.5.tgz",
       "integrity": "sha512-/BBMw4EvjmyquN5O+t5eh0+YqB3XXJkYD2cjKpYtWOfFy4lQ4UozNSmxAcWT8r2XtZs0ewG+zrfsqeR15i1ajA==",
+      "dev": true,
       "dependencies": {
         "@ampproject/remapping": "^2.1.0",
         "@babel/code-frame": "^7.16.7",
@@ -519,6 +522,7 @@
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
       "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "dev": true,
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -527,6 +531,7 @@
       "version": "7.17.3",
       "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.17.3.tgz",
       "integrity": "sha512-+R6Dctil/MgUsZsZAkYgK+ADNSZzJRRy0TvY65T71z/CR854xHQ1EweBYXdfT+HNeN7w0cSJJEzgxZMv40pxsg==",
+      "dev": true,
       "dependencies": {
         "@babel/types": "^7.17.0",
         "jsesc": "^2.5.1",
@@ -540,6 +545,7 @@
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
       "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -779,6 +785,7 @@
       "version": "7.16.12",
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.16.12.tgz",
       "integrity": "sha512-dK5PtG1uiN2ikk++5OzSYsitZKny4wOCD0nrO4TqnW4BVBTQ2NGS3NgilvT/TEyxTST7LNyWV/T4tXDoD3fOgg==",
+      "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.16.7",
         "@babel/generator": "^7.16.8",
@@ -808,6 +815,7 @@
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
       "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "dev": true,
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -816,6 +824,7 @@
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
       "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -824,6 +833,7 @@
       "version": "7.16.8",
       "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.16.8.tgz",
       "integrity": "sha512-1ojZwE9+lOXzcWdWmO6TbUzDfqLD39CmEhN8+2cX9XkDo5yW1OpgfejfliysR2AWLpMamTiOiAp/mtroaymhpw==",
+      "dev": true,
       "dependencies": {
         "@babel/types": "^7.16.8",
         "jsesc": "^2.5.1",
@@ -837,6 +847,7 @@
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
       "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3320,6 +3331,7 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
       "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
+      "dev": true,
       "dependencies": {
         "normalize-path": "^3.0.0",
         "picomatch": "^2.0.4"
@@ -3593,6 +3605,7 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
       "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -3689,6 +3702,7 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
       "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "dev": true,
       "dependencies": {
         "fill-range": "^7.0.1"
       },
@@ -3866,6 +3880,7 @@
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
       "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -4884,6 +4899,7 @@
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-0.11.0.tgz",
       "integrity": "sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg==",
+      "dev": true,
       "engines": {
         "node": ">= 0.6.0"
       }
@@ -5832,6 +5848,7 @@
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
       "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "dev": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -6000,6 +6017,7 @@
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
       "hasInstallScript": true,
       "optional": true,
       "os": [
@@ -6109,6 +6127,7 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -6701,6 +6720,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
       "dependencies": {
         "binary-extensions": "^2.0.0"
       },
@@ -6754,6 +6774,7 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -6770,6 +6791,7 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
       "dependencies": {
         "is-extglob": "^2.1.1"
       },
@@ -6796,6 +6818,7 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
       "engines": {
         "node": ">=0.12.0"
       }
@@ -7656,6 +7679,7 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
       "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dev": true,
       "dependencies": {
         "yallist": "^4.0.0"
       },
@@ -7667,6 +7691,7 @@
       "version": "0.25.7",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
       "integrity": "sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==",
+      "dev": true,
       "dependencies": {
         "sourcemap-codec": "^1.4.4"
       }
@@ -8289,6 +8314,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -8976,6 +9002,7 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
       "engines": {
         "node": ">=8.6"
       },
@@ -9771,6 +9798,7 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
       "dependencies": {
         "picomatch": "^2.2.1"
       },
@@ -9781,7 +9809,8 @@
     "node_modules/reflect-metadata": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.1.13.tgz",
-      "integrity": "sha512-Ts1Y/anZELhSsjMcU605fU9RE4Oi3p5ORujwbIKXfWa+0Zxs510Qrmrce5/Jowq3cHSZSJqBjypxmHarc+vEWg=="
+      "integrity": "sha512-Ts1Y/anZELhSsjMcU605fU9RE4Oi3p5ORujwbIKXfWa+0Zxs510Qrmrce5/Jowq3cHSZSJqBjypxmHarc+vEWg==",
+      "dev": true
     },
     "node_modules/regenerate": {
       "version": "1.4.2",
@@ -10202,6 +10231,7 @@
       "version": "7.3.5",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
       "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
+      "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
       },
@@ -10586,7 +10616,8 @@
     "node_modules/sourcemap-codec": {
       "version": "1.4.8",
       "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
-      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+      "dev": true
     },
     "node_modules/spdy": {
       "version": "4.0.2",
@@ -10987,6 +11018,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
       "dependencies": {
         "is-number": "^7.0.0"
       },
@@ -11052,6 +11084,7 @@
       "version": "4.5.5",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.5.5.tgz",
       "integrity": "sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==",
+      "dev": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -11668,7 +11701,8 @@
     "node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true
     },
     "node_modules/yaml": {
       "version": "1.10.2",
@@ -12003,6 +12037,7 @@
       "version": "13.2.5",
       "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-13.2.5.tgz",
       "integrity": "sha512-Xd8xj2Z0ilA4TJAM/JkTtA1CAa6SuebFsEEvabHCRO5MDvtdsIUP91ADUZIqDHy7qe6Qift/rAVN2PXxT2aaNA==",
+      "dev": true,
       "requires": {
         "@babel/core": "^7.17.2",
         "chokidar": "^3.0.0",
@@ -12020,6 +12055,7 @@
           "version": "2.1.2",
           "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.1.2.tgz",
           "integrity": "sha512-hoyByceqwKirw7w3Z7gnIIZC3Wx3J484Y3L/cMpXFbr7d9ZQj2mODrirNzcJa+SM3UlpWXYvKV4RlRpFXlWgXg==",
+          "dev": true,
           "requires": {
             "@jridgewell/trace-mapping": "^0.3.0"
           }
@@ -12028,6 +12064,7 @@
           "version": "7.17.5",
           "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.17.5.tgz",
           "integrity": "sha512-/BBMw4EvjmyquN5O+t5eh0+YqB3XXJkYD2cjKpYtWOfFy4lQ4UozNSmxAcWT8r2XtZs0ewG+zrfsqeR15i1ajA==",
+          "dev": true,
           "requires": {
             "@ampproject/remapping": "^2.1.0",
             "@babel/code-frame": "^7.16.7",
@@ -12049,7 +12086,8 @@
             "semver": {
               "version": "6.3.0",
               "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-              "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+              "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+              "dev": true
             }
           }
         },
@@ -12057,6 +12095,7 @@
           "version": "7.17.3",
           "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.17.3.tgz",
           "integrity": "sha512-+R6Dctil/MgUsZsZAkYgK+ADNSZzJRRy0TvY65T71z/CR854xHQ1EweBYXdfT+HNeN7w0cSJJEzgxZMv40pxsg==",
+          "dev": true,
           "requires": {
             "@babel/types": "^7.17.0",
             "jsesc": "^2.5.1",
@@ -12066,7 +12105,8 @@
         "source-map": {
           "version": "0.5.7",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
+          "dev": true
         }
       }
     },
@@ -12211,6 +12251,7 @@
       "version": "7.16.12",
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.16.12.tgz",
       "integrity": "sha512-dK5PtG1uiN2ikk++5OzSYsitZKny4wOCD0nrO4TqnW4BVBTQ2NGS3NgilvT/TEyxTST7LNyWV/T4tXDoD3fOgg==",
+      "dev": true,
       "requires": {
         "@babel/code-frame": "^7.16.7",
         "@babel/generator": "^7.16.8",
@@ -12232,12 +12273,14 @@
         "semver": {
           "version": "6.3.0",
           "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+          "dev": true
         },
         "source-map": {
           "version": "0.5.7",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
+          "dev": true
         }
       }
     },
@@ -12245,6 +12288,7 @@
       "version": "7.16.8",
       "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.16.8.tgz",
       "integrity": "sha512-1ojZwE9+lOXzcWdWmO6TbUzDfqLD39CmEhN8+2cX9XkDo5yW1OpgfejfliysR2AWLpMamTiOiAp/mtroaymhpw==",
+      "dev": true,
       "requires": {
         "@babel/types": "^7.16.8",
         "jsesc": "^2.5.1",
@@ -12254,7 +12298,8 @@
         "source-map": {
           "version": "0.5.7",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
+          "dev": true
         }
       }
     },
@@ -13412,8 +13457,7 @@
       "version": "13.2.5",
       "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-13.2.5.tgz",
       "integrity": "sha512-obiPvwPe+UJUO8cfNbBxukLKG30F+gLF5/erexwklRknJzS4KP8ciH2on6XlTuXUahpDjbO0pffugFE2I/IszQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
@@ -14005,8 +14049,7 @@
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz",
       "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "adjust-sourcemap-loader": {
       "version": "4.0.0",
@@ -14129,6 +14172,7 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
       "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
+      "dev": true,
       "requires": {
         "normalize-path": "^3.0.0",
         "picomatch": "^2.0.4"
@@ -14326,7 +14370,8 @@
     "binary-extensions": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
-      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA=="
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "dev": true
     },
     "bl": {
       "version": "4.1.0",
@@ -14397,8 +14442,7 @@
     "bootstrap": {
       "version": "5.1.3",
       "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
-      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
-      "requires": {}
+      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q=="
     },
     "brace-expansion": {
       "version": "1.1.11",
@@ -14413,6 +14457,7 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
       "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "dev": true,
       "requires": {
         "fill-range": "^7.0.1"
       }
@@ -14541,6 +14586,7 @@
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
       "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "dev": true,
       "requires": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
@@ -14568,8 +14614,7 @@
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/circular-dependency-plugin/-/circular-dependency-plugin-5.2.2.tgz",
       "integrity": "sha512-g38K9Cm5WRwlaH6g03B9OEz/0qRizI+2I7n+Gz+L5DxXJAPAiWQvwlYNm1V1jkdpUv95bOe/ASm2vfi/G560jQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "clean-stack": {
       "version": "2.2.0",
@@ -15047,8 +15092,7 @@
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-6.0.3.tgz",
       "integrity": "sha512-4BqMbZksRkJQx2zAjrokiGMd07RqOa2IxIrrN10lyBe9xhn9DEvjUK79J6jkeiv9D9hQFXKb6g1jwU62jziJZA==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "css-select": {
       "version": "4.2.1",
@@ -15314,7 +15358,8 @@
     "dependency-graph": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-0.11.0.tgz",
-      "integrity": "sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg=="
+      "integrity": "sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg==",
+      "dev": true
     },
     "destroy": {
       "version": "1.0.4",
@@ -15962,6 +16007,7 @@
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
       "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "dev": true,
       "requires": {
         "to-regex-range": "^5.0.1"
       }
@@ -16084,6 +16130,7 @@
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
       "optional": true
     },
     "function-bind": {
@@ -16159,6 +16206,7 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
       "requires": {
         "is-glob": "^4.0.1"
       }
@@ -16415,8 +16463,7 @@
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
       "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "ieee754": {
       "version": "1.2.1",
@@ -16613,6 +16660,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
       "requires": {
         "binary-extensions": "^2.0.0"
       }
@@ -16644,7 +16692,8 @@
     "is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI="
+      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
+      "dev": true
     },
     "is-fullwidth-code-point": {
       "version": "3.0.0",
@@ -16655,6 +16704,7 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
       "requires": {
         "is-extglob": "^2.1.1"
       }
@@ -16674,7 +16724,8 @@
     "is-number": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true
     },
     "is-path-cwd": {
       "version": "2.2.0",
@@ -17093,8 +17144,7 @@
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/karma-jasmine-html-reporter/-/karma-jasmine-html-reporter-1.7.0.tgz",
       "integrity": "sha512-pzum1TL7j90DTE86eFt48/s12hqwQuiD+e5aXx2Dc9wDEn2LfGq6RoAxEZZjFiN0RDSCOnosEKRZWxbQ+iMpQQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "karma-source-map-support": {
       "version": "1.4.0",
@@ -17316,6 +17366,7 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
       "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dev": true,
       "requires": {
         "yallist": "^4.0.0"
       }
@@ -17324,6 +17375,7 @@
       "version": "0.25.7",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
       "integrity": "sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==",
+      "dev": true,
       "requires": {
         "sourcemap-codec": "^1.4.4"
       }
@@ -17791,7 +17843,8 @@
     "normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true
     },
     "normalize-range": {
       "version": "0.1.2",
@@ -18316,7 +18369,8 @@
     "picomatch": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true
     },
     "pify": {
       "version": "2.3.0",
@@ -18427,8 +18481,7 @@
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-8.0.0.tgz",
       "integrity": "sha512-FvO2GzMUaTN0t1fBULDeIvxr5IvbDXcIatt6pnJghc736nqNgsGao5NT+5+WVLAQiTt6Cb3YUms0jiPaXhL//g==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-custom-properties": {
       "version": "12.1.4",
@@ -18498,15 +18551,13 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/postcss-font-variant/-/postcss-font-variant-5.0.0.tgz",
       "integrity": "sha512-1fmkBaCALD72CK2a9i468mA/+tr9/1cBxRRMXOUaZqO43oWPR5imcyPjXwuv7PXbCid4ndlP5zWhidQVVa3hmA==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-gap-properties": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/postcss-gap-properties/-/postcss-gap-properties-3.0.3.tgz",
       "integrity": "sha512-rPPZRLPmEKgLk/KlXMqRaNkYTUpE7YC+bOIQFN5xcu1Vp11Y4faIXv6/Jpft6FMnl6YRxZqDZG0qQOW80stzxQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-image-set-function": {
       "version": "4.0.6",
@@ -18532,8 +18583,7 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/postcss-initial/-/postcss-initial-4.0.1.tgz",
       "integrity": "sha512-0ueD7rPqX8Pn1xJIjay0AZeIuDoF+V+VvMt/uOnn+4ezUKhZM/NokDeP6DwMNyIoYByuN/94IQnt5FEkaN59xQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-lab-function": {
       "version": "4.1.1",
@@ -18560,22 +18610,19 @@
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-5.0.4.tgz",
       "integrity": "sha512-RHXxplCeLh9VjinvMrZONq7im4wjWGlRJAqmAVLXyZaXwfDWP73/oq4NdIp+OZwhQUMj0zjqDfM5Fj7qby+B4g==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-media-minmax": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/postcss-media-minmax/-/postcss-media-minmax-5.0.0.tgz",
       "integrity": "sha512-yDUvFf9QdFZTuCUg0g0uNSHVlJ5X1lSzDZjPSFaiCWvjgsvu8vEVxtahPrLMinIDEEGnx6cBe6iqdx5YWz08wQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-modules-extract-imports": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
       "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-modules-local-by-default": {
       "version": "4.0.0",
@@ -18619,15 +18666,13 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/postcss-overflow-shorthand/-/postcss-overflow-shorthand-3.0.3.tgz",
       "integrity": "sha512-CxZwoWup9KXzQeeIxtgOciQ00tDtnylYIlJBBODqkgS/PU2jISuWOL/mYLHmZb9ZhZiCaNKsCRiLp22dZUtNsg==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-page-break": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/postcss-page-break/-/postcss-page-break-3.0.4.tgz",
       "integrity": "sha512-1JGu8oCjVXLa9q9rFTo4MbeeA5FMe00/9C7lN4va606Rdb+HkxXtXsmEDrIraQ11fGz/WvKWa8gMuCKkrXpTsQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-place": {
       "version": "7.0.4",
@@ -18692,8 +18737,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-4.0.0.tgz",
       "integrity": "sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-selector-not": {
       "version": "5.0.0",
@@ -18858,6 +18902,7 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
       "requires": {
         "picomatch": "^2.2.1"
       }
@@ -18865,7 +18910,8 @@
     "reflect-metadata": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.1.13.tgz",
-      "integrity": "sha512-Ts1Y/anZELhSsjMcU605fU9RE4Oi3p5ORujwbIKXfWa+0Zxs510Qrmrce5/Jowq3cHSZSJqBjypxmHarc+vEWg=="
+      "integrity": "sha512-Ts1Y/anZELhSsjMcU605fU9RE4Oi3p5ORujwbIKXfWa+0Zxs510Qrmrce5/Jowq3cHSZSJqBjypxmHarc+vEWg==",
+      "dev": true
     },
     "regenerate": {
       "version": "1.4.2",
@@ -19141,8 +19187,7 @@
           "version": "3.5.2",
           "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
           "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-          "dev": true,
-          "requires": {}
+          "dev": true
         },
         "json-schema-traverse": {
           "version": "0.4.1",
@@ -19171,6 +19216,7 @@
       "version": "7.3.5",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
       "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
+      "dev": true,
       "requires": {
         "lru-cache": "^6.0.0"
       }
@@ -19486,7 +19532,8 @@
     "sourcemap-codec": {
       "version": "1.4.8",
       "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
-      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+      "dev": true
     },
     "spdy": {
       "version": "4.0.2",
@@ -19694,8 +19741,7 @@
           "version": "3.5.2",
           "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
           "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-          "dev": true,
-          "requires": {}
+          "dev": true
         },
         "json-schema-traverse": {
           "version": "0.4.1",
@@ -19769,6 +19815,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
       "requires": {
         "is-number": "^7.0.0"
       }
@@ -19815,7 +19862,8 @@
     "typescript": {
       "version": "4.5.5",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.5.5.tgz",
-      "integrity": "sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA=="
+      "integrity": "sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==",
+      "dev": true
     },
     "ua-parser-js": {
       "version": "0.7.31",
@@ -20010,8 +20058,7 @@
           "version": "3.5.2",
           "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
           "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-          "dev": true,
-          "requires": {}
+          "dev": true
         },
         "json-schema-traverse": {
           "version": "0.4.1",
@@ -20238,8 +20285,7 @@
       "version": "8.2.3",
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz",
       "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "y18n": {
       "version": "5.0.8",
@@ -20249,7 +20295,8 @@
     "yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true
     },
     "yaml": {
       "version": "1.10.2",
diff --git a/frontend/src/app/_elements/item-predictor/item-predictor.component.ts b/frontend/src/app/_elements/item-predictor/item-predictor.component.ts
index b6b5c9db..41d2ab9c 100644
--- a/frontend/src/app/_elements/item-predictor/item-predictor.component.ts
+++ b/frontend/src/app/_elements/item-predictor/item-predictor.component.ts
@@ -17,7 +17,7 @@ export class ItemPredictorComponent implements OnInit {
   }
 
   openPredictor() {
-    this.router.navigate(['predict/'+ '6244958a26cf2385bc29ba2c']);
+    this.router.navigate(['predict/'+ '6245a5958a9c76c1bf7ff9b6']);
     //this.router.navigate(['predict'+this.predictor._id]);
     }
 
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 b35b9fa4..2121dc3b 100644
--- a/frontend/src/app/_pages/add-model/add-model.component.ts
+++ b/frontend/src/app/_pages/add-model/add-model.component.ts
@@ -467,9 +467,13 @@ export class AddModelComponent implements OnInit {
 
   arrayColumn = (arr: any[][], n: number) => [...this.dropEmptyString(new Set(arr.map(x => x[n])))];
 
-  dropEmptyString(set: Set<string>): Set<string> {
+  dropEmptyString(set: Set<any>): Set<string> {
     if (set.has(""))
       set.delete("");
+    if (set.has(null))
+      set.delete(null);
+    if (set.has(undefined))
+      set.delete(undefined);
     return set;
   }
 
-- 
cgit v1.2.3


From 137bd7ab0c622c030effa7b4ef77fb8d138ee56d Mon Sep 17 00:00:00 2001
From: "DESKTOP-S0O2C44\\ROG" <ivan996sk@gmail.com>
Date: Sun, 3 Apr 2022 20:08:36 +0200
Subject: Zavrsena stranica moji prediktori #66

---
 .../item-predictor/item-predictor.component.ts     |  3 +-
 .../my-predictors/my-predictors.component.html     |  2 +-
 .../my-predictors/my-predictors.component.ts       | 37 ++++++++++++++++------
 frontend/src/app/_services/predictors.service.ts   |  8 +++++
 4 files changed, 37 insertions(+), 13 deletions(-)

(limited to 'frontend/src/app/_elements')

diff --git a/frontend/src/app/_elements/item-predictor/item-predictor.component.ts b/frontend/src/app/_elements/item-predictor/item-predictor.component.ts
index 41d2ab9c..246032e0 100644
--- a/frontend/src/app/_elements/item-predictor/item-predictor.component.ts
+++ b/frontend/src/app/_elements/item-predictor/item-predictor.component.ts
@@ -17,8 +17,7 @@ export class ItemPredictorComponent implements OnInit {
   }
 
   openPredictor() {
-    this.router.navigate(['predict/'+ '6245a5958a9c76c1bf7ff9b6']);
-    //this.router.navigate(['predict'+this.predictor._id]);
+    this.router.navigate(['predict/'+ this.predictor._id]);
     }
 
 }
diff --git a/frontend/src/app/_pages/my-predictors/my-predictors.component.html b/frontend/src/app/_pages/my-predictors/my-predictors.component.html
index d739f561..3746d35e 100644
--- a/frontend/src/app/_pages/my-predictors/my-predictors.component.html
+++ b/frontend/src/app/_pages/my-predictors/my-predictors.component.html
@@ -7,7 +7,7 @@
         <app-item-predictor [predictor]="predictor"></app-item-predictor>
     </div>
     <div>
-        <button (click)="delete()" mat-raised-button color="warn" style="min-width: 15rem;float: right" ><mat-icon>delete</mat-icon></button>
+        <button (click)="delete(predictor)" mat-raised-button color="warn" style="min-width: 15rem;float: right" ><mat-icon>delete</mat-icon></button>
     </div>
     
 </div>
diff --git a/frontend/src/app/_pages/my-predictors/my-predictors.component.ts b/frontend/src/app/_pages/my-predictors/my-predictors.component.ts
index 58daa44f..13cfdab2 100644
--- a/frontend/src/app/_pages/my-predictors/my-predictors.component.ts
+++ b/frontend/src/app/_pages/my-predictors/my-predictors.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import Predictor from 'src/app/_data/Predictor';
+import { PredictorsService } from 'src/app/_services/predictors.service';
 
 @Component({
   selector: 'app-my-predictors',
@@ -7,22 +8,38 @@ import Predictor from 'src/app/_data/Predictor';
   styleUrls: ['./my-predictors.component.css']
 })
 export class MyPredictorsComponent implements OnInit {
-  predictors: Predictor[];
-  constructor() { 
-  this.predictors = [
-    new Predictor('Titanik', 'Opis titanik', ['K1', 'K2', 'K3', 'Ime', 'Preziveli'],'Preziveli'),
-    new Predictor('Neki drugi set', 'opis', ['a', 'b', 'c'],'c'),
-    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')];
+  predictors: Predictor[] = [];
+  constructor(private predictorsS : PredictorsService) {
   }
   ngOnInit(): void {
+    this.getAllMyPredictors();
+
   }
 
-  delete(){
-    confirm("IZABRANI MODEL ĆE BITI IZBRISAN")
+  delete(predictor: Predictor){
+    if(window.confirm("IZABRANI MODEL ĆE BITI IZBRISAN"))
+      {
+      this.predictorsS.deletePredictor(predictor).subscribe((response) => {
+        console.log("OBRISANOOO JEE", response);
+        //na kraju uspesnog
+        this.getAllMyPredictors();
+      }, (error) =>{
+          if (error.error == "Predictor with name = {name} deleted") {
+            alert("Greška pri brisanju modela!");
+          }
+        });
+    }
+    
     
   }
-  
+
+  getAllMyPredictors(): void{
+    this.predictorsS.getMyPredictors().subscribe(m => {
+      
+      this.predictors = m;
+      console.log(this.predictors);
+    });
+  }
 
 
 }
diff --git a/frontend/src/app/_services/predictors.service.ts b/frontend/src/app/_services/predictors.service.ts
index 54ae5694..f2751d8f 100644
--- a/frontend/src/app/_services/predictors.service.ts
+++ b/frontend/src/app/_services/predictors.service.ts
@@ -24,4 +24,12 @@ export class PredictorsService {
   usePredictor(predictor: Predictor, inputs : String[]) {
     return this.http.post(`${API_SETTINGS.apiURL}/predictor/usepredictor/` + predictor._id, inputs, { headers: this.authService.authHeader() });
   }
+
+  deletePredictor(predictor: Predictor) {
+    return this.http.delete(`${API_SETTINGS.apiURL}/predictor/` + predictor.name, { headers: this.authService.authHeader(), responseType: "text" });
+  }
+
+  getMyPredictors(): Observable<Predictor[]> {
+    return this.http.get<Predictor[]>(`${API_SETTINGS.apiURL}/predictor/mypredictors`, { headers: this.authService.authHeader() });
+  }
 }
-- 
cgit v1.2.3


From 5beed95078c5eec21113c9b5fede1c167e653a5e Mon Sep 17 00:00:00 2001
From: Sonja Galovic <galovicsonja@gmail.com>
Date: Mon, 4 Apr 2022 00:40:39 +0200
Subject: Odradjen prikaz svih obavestenja korisniku u okviru aplikacije.
 (umesto alerta ide mat-dialog)

---
 frontend/angular.json                              |  8 +++----
 frontend/src/app/Shared.ts                         | 25 ++++++++++++++++++-
 .../src/app/_elements/navbar/navbar.component.ts   |  4 +++-
 .../alert-dialog/alert-dialog.component.css        |  0
 .../alert-dialog/alert-dialog.component.html       |  7 ++++++
 .../alert-dialog/alert-dialog.component.spec.ts    | 25 +++++++++++++++++++
 .../_modals/alert-dialog/alert-dialog.component.ts | 28 ++++++++++++++++++++++
 .../_modals/login-modal/login-modal.component.html |  2 +-
 .../_modals/login-modal/login-modal.component.ts   |  5 +++-
 .../register-modal/register-modal.component.ts     | 12 +++++++---
 .../app/_pages/add-model/add-model.component.ts    | 18 +++++++-------
 .../filter-datasets/filter-datasets.component.ts   |  8 +++----
 .../app/_pages/my-models/my-models.component.ts    |  3 ++-
 .../src/app/_pages/predict/predict.component.ts    |  4 ++--
 .../src/app/_pages/profile/profile.component.ts    | 13 +++++-----
 frontend/src/app/app.module.ts                     | 10 +++++---
 frontend/src/app/material.module.ts                |  7 ++++--
 17 files changed, 140 insertions(+), 39 deletions(-)
 create mode 100644 frontend/src/app/_modals/alert-dialog/alert-dialog.component.css
 create mode 100644 frontend/src/app/_modals/alert-dialog/alert-dialog.component.html
 create mode 100644 frontend/src/app/_modals/alert-dialog/alert-dialog.component.spec.ts
 create mode 100644 frontend/src/app/_modals/alert-dialog/alert-dialog.component.ts

(limited to 'frontend/src/app/_elements')

diff --git a/frontend/angular.json b/frontend/angular.json
index b1aaac3f..6653e4b1 100644
--- a/frontend/angular.json
+++ b/frontend/angular.json
@@ -41,13 +41,13 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "500kb",
-                  "maximumError": "1mb"
+                  "maximumWarning": "2mb",
+                  "maximumError": "4mb"
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "2kb",
-                  "maximumError": "4kb"
+                  "maximumWarning": "10kb",
+                  "maximumError": "15kb"
                 }
               ],
               "fileReplacements": [
diff --git a/frontend/src/app/Shared.ts b/frontend/src/app/Shared.ts
index 31afb1a6..86e26687 100644
--- a/frontend/src/app/Shared.ts
+++ b/frontend/src/app/Shared.ts
@@ -1,9 +1,32 @@
+import { ElementRef } from "@angular/core";
+import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { AlertDialogComponent } from './_modals/alert-dialog/alert-dialog.component';
+
 class Shared {
     constructor(
         public loggedIn: boolean,
         public username: string = '',
-        public photoId: string = '1'
+        public photoId: string = '1',
+        public dialog?: MatDialog
+        //public alertDialog?: ElementRef
     ) { }
+
+
+    openDialog(title: string, message: string): void {
+        console.log("USAO U OPEN DIALOG 1");
+
+        if (this.dialog) {
+            console.log("USAO U OPEN DIALOG 2");
+            const dialogRef = this.dialog.open(AlertDialogComponent, {
+                //width: '250px',
+                data: { title: title, message: message }
+            });
+            dialogRef.afterClosed().subscribe(res => {
+                //nesto
+            });
+        }
+    }
 }
 
 export default new Shared(false);
\ No newline at end of file
diff --git a/frontend/src/app/_elements/navbar/navbar.component.ts b/frontend/src/app/_elements/navbar/navbar.component.ts
index 2e4bde91..368508ed 100644
--- a/frontend/src/app/_elements/navbar/navbar.component.ts
+++ b/frontend/src/app/_elements/navbar/navbar.component.ts
@@ -3,6 +3,7 @@ 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';
+import { MatDialog } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-navbar',
@@ -14,7 +15,8 @@ export class NavbarComponent implements OnInit {
   currentUrl: string;
   shared = shared;
 
-  constructor(public location: Location, private auth: AuthService, private userInfoService: UserInfoService) {
+  constructor(public location: Location, private auth: AuthService, private userInfoService: UserInfoService, private matDialog: MatDialog) {
+    shared.dialog = matDialog;
     this.currentUrl = this.location.path();
     this.location.onUrlChange(() => {
       this.currentUrl = this.location.path();
diff --git a/frontend/src/app/_modals/alert-dialog/alert-dialog.component.css b/frontend/src/app/_modals/alert-dialog/alert-dialog.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/frontend/src/app/_modals/alert-dialog/alert-dialog.component.html b/frontend/src/app/_modals/alert-dialog/alert-dialog.component.html
new file mode 100644
index 00000000..82365193
--- /dev/null
+++ b/frontend/src/app/_modals/alert-dialog/alert-dialog.component.html
@@ -0,0 +1,7 @@
+<h2 mat-dialog-title class="text-muted">{{data.title}}</h2>
+<div mat-dialog-content class="mt-4" style="color: rgb(81, 76, 76);">
+  {{data.message}}
+</div>
+<div mat-dialog-actions class="d-flex justify-content-center mt-4">
+  <button mat-button cdkFocusInitial (click)="onOkClick()" style="background-color: lightgray;">OK</button>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/_modals/alert-dialog/alert-dialog.component.spec.ts b/frontend/src/app/_modals/alert-dialog/alert-dialog.component.spec.ts
new file mode 100644
index 00000000..a93fc493
--- /dev/null
+++ b/frontend/src/app/_modals/alert-dialog/alert-dialog.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AlertDialogComponent } from './alert-dialog.component';
+
+describe('AlertDialogComponent', () => {
+  let component: AlertDialogComponent;
+  let fixture: ComponentFixture<AlertDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AlertDialogComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AlertDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_modals/alert-dialog/alert-dialog.component.ts b/frontend/src/app/_modals/alert-dialog/alert-dialog.component.ts
new file mode 100644
index 00000000..e15f3c6f
--- /dev/null
+++ b/frontend/src/app/_modals/alert-dialog/alert-dialog.component.ts
@@ -0,0 +1,28 @@
+import { Component, OnInit } from '@angular/core';
+import { Inject} from '@angular/core';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
+
+interface DialogData {
+  title: string;
+  message: string;
+}
+
+@Component({
+  selector: 'app-alert-dialog',
+  templateUrl: './alert-dialog.component.html',
+  styleUrls: ['./alert-dialog.component.css']
+})
+export class AlertDialogComponent {
+
+  constructor(
+    public dialogRef: MatDialogRef<AlertDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: DialogData,
+    //public dialog: MatDialog
+  ) {}
+
+  onOkClick(): void {
+    this.dialogRef.close();
+  }
+
+
+}
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 d7836848..03048155 100644
--- a/frontend/src/app/_modals/login-modal/login-modal.component.html
+++ b/frontend/src/app/_modals/login-modal/login-modal.component.html
@@ -3,7 +3,7 @@
   <div class="modal-dialog modal-dialog-centered">
     <div class="modal-content">
       <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>
+        <button #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>
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 c86c269a..e1535a25 100644
--- a/frontend/src/app/_modals/login-modal/login-modal.component.ts
+++ b/frontend/src/app/_modals/login-modal/login-modal.component.ts
@@ -4,6 +4,7 @@ import { CookieService } from 'ngx-cookie-service';
 import { AuthService } from 'src/app/_services/auth.service';
 import { UserInfoService } from 'src/app/_services/user-info.service';
 import shared from '../../Shared';
+import {AfterViewInit, ElementRef} from '@angular/core';
 
 @Component({
   selector: 'app-login-modal',
@@ -12,6 +13,8 @@ import shared from '../../Shared';
 })
 export class LoginModalComponent implements OnInit {
 
+  @ViewChild('closeButton') closeButton?: ElementRef;
+
   username: string = '';
   password: string = '';
 
@@ -38,7 +41,7 @@ export class LoginModalComponent implements OnInit {
         }
         else {
           this.authService.authenticate(response);
-          (<HTMLSelectElement>document.getElementById('closeButton')).click();
+          (<HTMLSelectElement>this.closeButton?.nativeElement).click();
           this.userInfoService.getUserInfo().subscribe((response) => {
             shared.photoId = response.photoId;
           });
diff --git a/frontend/src/app/_modals/register-modal/register-modal.component.ts b/frontend/src/app/_modals/register-modal/register-modal.component.ts
index 13ef7eba..05888589 100644
--- a/frontend/src/app/_modals/register-modal/register-modal.component.ts
+++ b/frontend/src/app/_modals/register-modal/register-modal.component.ts
@@ -1,6 +1,9 @@
 import { Component, OnInit } from '@angular/core';
 import { AuthService } from 'src/app/_services/auth.service';
 import User from 'src/app/_data/User';
+import { DOCUMENT } from '@angular/common';
+import { Inject }  from '@angular/core';
+import shared from 'src/app/Shared';
 
 @Component({
   selector: 'app-register-modal',
@@ -29,8 +32,11 @@ export class RegisterModalComponent implements OnInit {
   pattEmail: RegExp = /^[a-zA-Z0-9]+([\.\-\+][a-zA-Z0-9]+)*\@([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}$/;
   pattPassword: RegExp = /.{6,30}$/;
 
+  shared = shared;
+
   constructor(
-    private authService: AuthService
+    private authService: AuthService,
+    @Inject(DOCUMENT) document: Document
   ) { }
 
   ngOnInit(): void {
@@ -149,11 +155,11 @@ export class RegisterModalComponent implements OnInit {
               }, (error) => console.warn(error));             
             }
             else if (response == 'Email Already Exists') {
-              alert('Nalog sa unetim email-om već postoji!');
+              shared.openDialog("Greška!", "Nalog sa unetim email-om već postoji!");
               (<HTMLSelectElement>document.getElementById('email')).focus();
             }
             else if (response == 'Username Already Exists') {
-              alert('Nalog sa unetim korisničkim imenom već postoji!');
+              shared.openDialog("Greška!", "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.ts b/frontend/src/app/_pages/add-model/add-model.component.ts
index 2121dc3b..945a58b5 100644
--- a/frontend/src/app/_pages/add-model/add-model.component.ts
+++ b/frontend/src/app/_pages/add-model/add-model.component.ts
@@ -143,14 +143,14 @@ export class AddModelComponent implements OnInit {
               this.models.addModel(this.newModel).subscribe((response) => {
                 callback(response);
               }, (error) => {
-                alert("Model sa unetim nazivom već postoji u Vašoj kolekciji.\nPromenite naziv modela i nastavite sa kreiranim datasetom.");
+                shared.openDialog("Neuspeo pokušaj!", "Model sa unetim nazivom već postoji u Vašoj kolekciji. Promenite 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.");
+              shared.openDialog("Neuspeo pokušaj!", "Dataset sa unetim nazivom već postoji u Vašoj kolekciji. Izmenite naziv ili iskoristite postojeći dataset.");
             }); //kraj addDataset subscribe
           } //kraj treceg ifa
         }, (error) => {
-          //alert("greska uploadData");
+          
         }); //kraj uploadData subscribe
 
       } //kraj drugog ifa
@@ -174,12 +174,12 @@ export class AddModelComponent implements OnInit {
         this.models.addModel(this.newModel).subscribe((response) => {
           callback(response);
         }, (error) => {
-          alert("Model sa unetim nazivom već postoji u Vašoj kolekciji.\nPromenite naziv modela i nastavite sa kreiranim datasetom.");
+          shared.openDialog("Neuspeo pokušaj!", "Model sa unetim nazivom već postoji u Vašoj kolekciji. Promenite naziv modela i nastavite sa kreiranim datasetom.");
         });
       }
     }
     else {
-      alert("Molimo Vas da izaberete neki dataset iz kolekcije.");
+      shared.openDialog("Obaveštenje", "Molimo Vas da izaberete neki dataset iz kolekcije.");
     }
   }
 
@@ -213,21 +213,21 @@ export class AddModelComponent implements OnInit {
   }
   validationInputsOutput(): boolean {
     if (this.newModel.inputColumns.length == 0 && this.newModel.columnToPredict == '') {
-      alert("Molimo Vas da izaberete ulazne i izlazne kolone za mrežu.");
+      shared.openDialog("Neuspeo pokušaj!", "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.");
+      shared.openDialog("Neuspeo pokušaj!", "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.");
+      shared.openDialog("Neuspeo pokušaj!", "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.");
+        shared.openDialog("Neuspeo pokušaj!", "Izabrali ste istu kolonu (" + colName + ") kao ulaznu i izlaznu iz mreže. Korigujte izbor.");
         return false;
       }
     }
diff --git a/frontend/src/app/_pages/filter-datasets/filter-datasets.component.ts b/frontend/src/app/_pages/filter-datasets/filter-datasets.component.ts
index b75decf2..fc146046 100644
--- a/frontend/src/app/_pages/filter-datasets/filter-datasets.component.ts
+++ b/frontend/src/app/_pages/filter-datasets/filter-datasets.component.ts
@@ -4,6 +4,7 @@ import Dataset from 'src/app/_data/Dataset';
 import {Router} from '@angular/router'
 import { JwtHelperService } from '@auth0/angular-jwt';
 import { CookieService } from 'ngx-cookie-service';
+import shared from 'src/app/Shared';
 
 @Component({
   selector: 'app-filter-datasets',
@@ -12,6 +13,7 @@ import { CookieService } from 'ngx-cookie-service';
 })
 export class FilterDatasetsComponent implements OnInit {
 
+  shared = shared;
   publicDatasets?: Dataset[];
   term: string = "";
   constructor(private datasets: DatasetsService,private router:Router, private cookie: CookieService) {
@@ -37,11 +39,9 @@ export class FilterDatasetsComponent implements OnInit {
     if(name!=null && name!="")
     this.datasets.addDataset(newDataset).subscribe((response:string)=>{
       console.log(response);
-      alert("Uspenso ste dodali dataset sa imenom "+newDataset.name);
+      shared.openDialog("Obaveštenje", "Uspešno ste dodali dataset sa nazivom " + newDataset.name);
     },(error)=>{
-      alert("Vec imate dataset sa istim imenom molim vas unesite drugo ime");
-      
-
+      shared.openDialog("Obaveštenje", "U svojoj kolekciji već imate dataset sa ovim imenom. Molimo Vas da unesete drugo ime.");
     });
   
   };
diff --git a/frontend/src/app/_pages/my-models/my-models.component.ts b/frontend/src/app/_pages/my-models/my-models.component.ts
index bd6b0a2b..6086b1b1 100644
--- a/frontend/src/app/_pages/my-models/my-models.component.ts
+++ b/frontend/src/app/_pages/my-models/my-models.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import shared from 'src/app/Shared';
 import Model from 'src/app/_data/Model';
 import { ModelsService } from 'src/app/_services/models.service';
 
@@ -38,7 +39,7 @@ deleteThisModel(model: Model): void{
     this.getAllMyModels();
   }, (error) =>{
       if (error.error == "Model with name = {name} deleted") {
-        alert("Greška pri brisanju modela!");
+        shared.openDialog("Obaveštenje", "Greška prilikom brisanja modela.");
       }
     });
 
diff --git a/frontend/src/app/_pages/predict/predict.component.ts b/frontend/src/app/_pages/predict/predict.component.ts
index 71cf93ce..b541e1f0 100644
--- a/frontend/src/app/_pages/predict/predict.component.ts
+++ b/frontend/src/app/_pages/predict/predict.component.ts
@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import Predictor from 'src/app/_data/Predictor';
 import { PredictorsService } from 'src/app/_services/predictors.service';
+import shared from 'src/app/Shared';
 
 @Component({
   selector: 'app-predict',
@@ -29,8 +30,7 @@ export class PredictComponent implements OnInit {
 
   usePredictor(): void{ 
     this.predictS.usePredictor(this.predictor, this.inputs).subscribe(p => {
-      
-      alert("Prediktor je uspesno poslat na treniranje!");
+      shared.openDialog("Obaveštenje", "Prediktor je uspešno poslat na probu."); //pisalo je "na treniranje" ??
     })
     console.log(this.inputs);
   }
diff --git a/frontend/src/app/_pages/profile/profile.component.ts b/frontend/src/app/_pages/profile/profile.component.ts
index 7a7796da..d055fad3 100644
--- a/frontend/src/app/_pages/profile/profile.component.ts
+++ b/frontend/src/app/_pages/profile/profile.component.ts
@@ -6,6 +6,7 @@ import { Router } from '@angular/router';
 import { PICTURES } from 'src/app/_data/ProfilePictures';
 import { Picture } from 'src/app/_data/ProfilePictures';
 import shared from '../../Shared';
+import { share } from 'rxjs';
 
 
 @Component({
@@ -15,8 +16,6 @@ import shared from '../../Shared';
 })
 export class ProfileComponent implements OnInit {
 
-
-
   user: User = new User();
   pictures: Picture[] = PICTURES;
 
@@ -90,18 +89,18 @@ export class ProfileComponent implements OnInit {
       if (this.user.username != editedUser.username) { //promenio username, ide logout
         this.user = editedUser;
         this.resetInfo();
-        alert("Nakon promene korisničkog imena, moraćete ponovo da se ulogujete.");
+        shared.openDialog("Obaveštenje", "Nakon promene korisničkog imena, moraćete ponovo da se ulogujete.");
         this.authService.logOut();
         this.router.navigate(['']);
         return;
       }
-      alert("Podaci su uspešno promenjeni.");
+      shared.openDialog("Obaveštenje", "Podaci su uspešno promenjeni.");
       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.");
+        shared.openDialog("Obaveštenje", "Ukucano korisničko ime je već zauzeto! Izaberite neko drugo.");
         //(<HTMLSelectElement>document.getElementById("inputUsername")).focus();
         //poruka obavestenja ispod inputa
         this.resetInfo();
@@ -131,7 +130,7 @@ export class ProfileComponent implements OnInit {
     this.userInfoService.changeUserPassword(passwordArray).subscribe((response: any) => {
       //console.log("PROMENIO LOZINKU");
       this.resetNewPassInputs();
-      alert("Nakon promene lozinke, moraćete ponovo da se ulogujete.");
+      shared.openDialog("Obaveštenje", "Nakon promene lozinke, moraćete ponovo da se ulogujete.");
       this.authService.logOut();
       this.router.navigate(['']);
     }, (error: any) => {
@@ -142,7 +141,7 @@ export class ProfileComponent implements OnInit {
         return;
       }
       else if (error.error == 'Identical password!') {
-        alert("Stara i nova lozinka su identične.");
+        shared.openDialog("Obaveštenje", "Stara i nova lozinka su identične."); 
         this.resetNewPassInputs();
         //(<HTMLSelectElement>document.getElementById("inputNewPassword")).focus();
         return;
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index d90de54d..8098df40 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule } from '@angular/forms';
 import { AppRoutingModule } from './app-routing.module';
@@ -39,6 +39,7 @@ import { FilterDatasetsComponent } from './_pages/filter-datasets/filter-dataset
 import { ReactiveBackgroundComponent } from './_elements/reactive-background/reactive-background.component';
 import { ItemModelComponent } from './_elements/item-model/item-model.component';
 import { AnnvisualComponent } from './_elements/annvisual/annvisual.component';
+import { AlertDialogComponent } from './_modals/alert-dialog/alert-dialog.component';
 
 @NgModule({
   declarations: [
@@ -67,7 +68,8 @@ import { AnnvisualComponent } from './_elements/annvisual/annvisual.component';
     FilterDatasetsComponent,
     ReactiveBackgroundComponent,
     ItemModelComponent,
-    AnnvisualComponent
+    AnnvisualComponent,
+    AlertDialogComponent
   ],
   imports: [
     BrowserModule,
@@ -84,6 +86,8 @@ import { AnnvisualComponent } from './_elements/annvisual/annvisual.component';
     Ng2SearchPipeModule,
   ],
   providers: [],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  entryComponents: [AlertDialogComponent]
 })
 export class AppModule { }
diff --git a/frontend/src/app/material.module.ts b/frontend/src/app/material.module.ts
index e85419ee..d16cef3d 100644
--- a/frontend/src/app/material.module.ts
+++ b/frontend/src/app/material.module.ts
@@ -1,18 +1,21 @@
 import { NgModule } from '@angular/core';
-
+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 { MatInputModule } from '@angular/material/input';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatIconModule } from '@angular/material/icon';
 
 @NgModule({
   exports: [
+    CommonModule,
     MatDialogModule,
     MatButtonModule,
     MatFormFieldModule,
     MatInputModule,
-    MatCheckboxModule
+    MatCheckboxModule,
+    MatIconModule
   ]
 })
 export class MaterialModule {}
\ No newline at end of file
-- 
cgit v1.2.3


From fef66d17b52568bb64a8857c3dd8feacfde57297 Mon Sep 17 00:00:00 2001
From: Sonja Galovic <galovicsonja@gmail.com>
Date: Tue, 5 Apr 2022 17:33:43 +0200
Subject: Kompletna reorganizacija komponenti za izbor dataseta pri dodavanju
 modela. Dodata komponenta add-new-dataset, dataset-load.component izmenjena,
 preostala add-model da se uskladi.

---
 .../add-new-dataset/add-new-dataset.component.css  |   0
 .../add-new-dataset/add-new-dataset.component.html |  41 +++++++
 .../add-new-dataset.component.spec.ts              |  25 +++++
 .../add-new-dataset/add-new-dataset.component.ts   |  78 +++++++++++++
 .../dataset-load/dataset-load.component.css        |  15 ++-
 .../dataset-load/dataset-load.component.html       |  70 ++++++------
 .../dataset-load/dataset-load.component.ts         | 121 ++++++++++++---------
 .../app/_pages/add-model/add-model.component.css   |   9 +-
 .../app/_pages/add-model/add-model.component.html  |  39 +------
 .../app/_pages/add-model/add-model.component.ts    |  62 +++++------
 frontend/src/app/app.module.ts                     |   4 +-
 11 files changed, 300 insertions(+), 164 deletions(-)
 create mode 100644 frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.css
 create mode 100644 frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.html
 create mode 100644 frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.spec.ts
 create mode 100644 frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.ts

(limited to 'frontend/src/app/_elements')

diff --git a/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.css b/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.html b/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.html
new file mode 100644
index 00000000..dfeb4f62
--- /dev/null
+++ b/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.html
@@ -0,0 +1,41 @@
+<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">
+
+      <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>
+
+      <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? &nbsp;
+        <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">
+
+      <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>
+
+      <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)]="dataset.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>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.spec.ts b/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.spec.ts
new file mode 100644
index 00000000..a9ea25b4
--- /dev/null
+++ b/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddNewDatasetComponent } from './add-new-dataset.component';
+
+describe('AddNewDatasetComponent', () => {
+  let component: AddNewDatasetComponent;
+  let fixture: ComponentFixture<AddNewDatasetComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AddNewDatasetComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddNewDatasetComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.ts b/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.ts
new file mode 100644
index 00000000..fceb53cf
--- /dev/null
+++ b/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.ts
@@ -0,0 +1,78 @@
+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-add-new-dataset',
+  templateUrl: './add-new-dataset.component.html',
+  styleUrls: ['./add-new-dataset.component.css']
+})
+export class AddNewDatasetComponent {
+
+  @Output() loaded = new EventEmitter<string>();
+
+  delimiterOptions: Array<string> = [",", ";", "\t", "razmak", "|"]; //podrazumevano ","
+
+  //hasHeader: boolean = true;
+  hasInput: boolean = false;
+
+  csvRecords: any[] = [];
+  files: File[] = [];
+  rowsNumber: number = 0;
+  colsNumber: number = 0;
+
+  dataset: Dataset; //dodaj ! potencijalno
+
+  constructor(private ngxCsvParser: NgxCsvParser) {
+    this.dataset = new Dataset();
+  }
+
+  //@ViewChild('fileImportInput', { static: false }) fileImportInput: any; cemu je ovo sluzilo?
+
+  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();
+  }
+
+  update() {
+
+    if (this.files.length < 1)
+      return;
+
+    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.dataset.hasHeader)
+            this.rowsNumber = this.csvRecords.length - 1;
+          else
+            this.rowsNumber = this.csvRecords.length;
+          this.colsNumber = this.csvRecords[0].length;
+
+          if (this.dataset.hasHeader) //kasnije dodati opciju kada nema header da korisnik rucno unosi header-e
+            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/_elements/dataset-load/dataset-load.component.css b/frontend/src/app/_elements/dataset-load/dataset-load.component.css
index 05819702..54e0738e 100644
--- a/frontend/src/app/_elements/dataset-load/dataset-load.component.css
+++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.css
@@ -1,6 +1,13 @@
-#divInputs {
-    margin-left: 20px;
+.btnType1 {
+    background-color: #003459;
+    color: white;
 }
-#divOutputs {
-    margin-left: 20px;
+.btnType2 {
+    background-color: white;
+    color: #003459;
+    border-color: #003459;
+}
+.selectedDatasetClass {
+    /*border-color: 2px solid #003459;*/
+    background-color: lightblue;
 }
\ 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 76e46092..674e5990 100644
--- a/frontend/src/app/_elements/dataset-load/dataset-load.component.html
+++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.html
@@ -1,44 +1,42 @@
 <div>
 
-  <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">
-
-      <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>
+  <!--Sklonjeno ucitavanje novog dataseta i sve opcije u vezi sa tim, premesteno u add-new-dataset-->
 
-      <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? &nbsp;
-        <input class="mx-3 form-check-input" type="checkbox" [(ngModel)]="dataset.accessibleByLink" type="checkbox"
-          value="" id="checkboxAccessibleByLink">
-      </label>
-    </div>
+  <div class="col-12 d-flex my-5">
+    <h2 class="">Izvor podataka:</h2>
     <div class="col-1">
     </div>
-    <div class="col-4 mt-4">
-
-      <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>
+    <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 my-2">
+      <input *ngIf="showMyDatasets" type="text" class="form-control" placeholder="Pretraga"
+          [(ngModel)]="term">
+  </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|filter:term"
+                  [ngClass]="{'selectedDatasetClass': this.selectedDataset == dataset}">
+                  <app-item-dataset name="usersDataset" [dataset]="dataset"
+                      (click)="selectThisDataset(dataset);"></app-item-dataset>
+              </li>
+          </ul>
+      </div>
+  </div>
 
-      <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)]="dataset.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>
+  <app-add-new-dataset [style]="(showMyDatasets)?'display:none;visibility:hidden;':''" id="dataset"
+      (loaded)="datasetLoaded = true; selectedDataset = addNewDatasetComponent?.dataset; datasetFile = addNewDatasetComponent?.csvRecords; datasetHasHeader = addNewDatasetComponent?.dataset!.hasHeader">
+  </app-add-new-dataset>
+  <div class="px-5 mt-5">
+      <app-datatable [data]="datasetFile" [hasHeader]="datasetHasHeader"></app-datatable>
   </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 f9343117..ed71dc3c 100644
--- a/frontend/src/app/_elements/dataset-load/dataset-load.component.ts
+++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.ts
@@ -1,6 +1,12 @@
-import { Component, EventEmitter, Output, ViewChild } from '@angular/core';
-import { NgxCsvParser, NgxCSVParserError } from 'ngx-csv-parser';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { AddNewDatasetComponent } from '../add-new-dataset/add-new-dataset.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 { CsvParseService } from 'src/app/_services/csv-parse.service';
+import { Output, EventEmitter } from '@angular/core';
 
 @Component({
   selector: 'app-dataset-load',
@@ -9,70 +15,77 @@ import Dataset from 'src/app/_data/Dataset';
 })
 export class DatasetLoadComponent {
 
-  @Output() loaded = new EventEmitter<string>();
+  @Output() selectedDatasetChangeEvent = new EventEmitter<Dataset>();
 
-  delimiterOptions: Array<string> = [",", ";", "\t", "razmak", "|"]; //podrazumevano ","
+  @ViewChild(AddNewDatasetComponent) addNewDatasetComponent?: AddNewDatasetComponent;
+  @ViewChild(AddNewDatasetComponent) datatable?: DatatableComponent;
+  datasetLoaded: boolean = false;
+  selectedDatasetLoaded: boolean = false;
 
-  //hasHeader: boolean = true;
-  hasInput: boolean = false;
+  showMyDatasets: boolean = true;
+  myDatasets?: Dataset[];
+  existingDatasetSelected: boolean = false;
+  selectedDataset?: Dataset;
+  otherDataset?: Dataset;
+  otherDatasetFile?: any[];
+  datasetFile?: any[];
+  datasetHasHeader?: boolean = true;
 
-  csvRecords: any[] = [];
-  files: File[] = [];
-  rowsNumber: number = 0;
-  colsNumber: number = 0;
+  term: string = "";
 
-  dataset: Dataset; //dodaj ! potencijalno
-
-  constructor(private ngxCsvParser: NgxCsvParser) {
-    this.dataset = new Dataset();
+  constructor(private models: ModelsService, private datasets: DatasetsService, private csv: CsvParseService) {
+    this.datasets.getMyDatasets().subscribe((datasets) => {
+      this.myDatasets = datasets;
+    });
   }
 
-  @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();
+  viewMyDatasetsForm() {
+    this.showMyDatasets = true;
+    this.resetSelectedDataset();
+    //this.resetCbsAndRbs();        //TREBA DA SE DESI
+  }
+  viewNewDatasetForm() {
+    this.showMyDatasets = false;
+    this.resetSelectedDataset();
+    //this.resetCbsAndRbs();        //TREBA DA SE DESI
   }
 
-  update() {
-
-    if (this.files.length < 1)
-      return;
-
-    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.dataset.hasHeader)
-            this.rowsNumber = this.csvRecords.length - 1;
+  selectThisDataset(dataset: Dataset) {
+    this.selectedDataset = dataset;
+    this.selectedDatasetLoaded = false;
+    this.existingDatasetSelected = true;
+    this.datasetHasHeader = this.selectedDataset.hasHeader;
+
+    this.datasets.getDatasetFile(dataset.fileId).subscribe((file: string | undefined) => {
+      if (file) {
+        this.datasetFile = this.csv.csvToArray(file, (dataset.delimiter == "razmak") ? " " : (dataset.delimiter == "") ? "," : dataset.delimiter);
+        /*for (let i = this.datasetFile.length - 1; i >= 0; i--) {  //moguce da je vise redova na kraju fajla prazno i sl.
+          if (this.datasetFile[i].length != this.datasetFile[0].length)
+            this.datasetFile[i].pop();
           else
-            this.rowsNumber = this.csvRecords.length;
-          this.colsNumber = this.csvRecords[0].length;
+            break; //nema potrebe dalje
+        }*/
+        //console.log(this.datasetFile);
+        //this.resetCbsAndRbs();                        //TREBA DA SE DESI
+        //this.refreshThreeNullValueRadioOptions();       //TREBA DA SE DESI
+        this.selectedDatasetLoaded = true;
+        //this.scrollToNextForm();
+      }
+    });
+  }
 
-          if (this.dataset.hasHeader) //kasnije dodati opciju kada nema header da korisnik rucno unosi header-e
-            this.dataset.header = this.csvRecords[0];
+  resetSelectedDataset(): boolean {
+    const temp = this.selectedDataset;
+    this.selectedDataset = this.otherDataset;
+    this.otherDataset = temp;
+    const tempFile = this.datasetFile;
+    this.datasetFile = this.otherDatasetFile;
+    this.otherDatasetFile = tempFile;
 
-          this.loaded.emit("loaded");
-        }
-      }, (error: NgxCSVParserError) => {
-        console.log('Error', error);
-      });
-  }
+    this.selectedDatasetChangeEvent.emit(this.selectedDataset);
 
-  checkAccessible() {
-    if (this.dataset.isPublic)
-      this.dataset.accessibleByLink = true;
+    return true;
   }
 
+
 }
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 6d961287..7f05af0f 100644
--- a/frontend/src/app/_pages/add-model/add-model.component.css
+++ b/frontend/src/app/_pages/add-model/add-model.component.css
@@ -32,4 +32,11 @@
 }
 ul li:hover {
     background-color: lightblue;
-}
\ No newline at end of file
+}
+
+#divInputs {
+    margin-left: 20px;
+}
+#divOutputs {
+    margin-left: 20px;
+}
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 97b35b7a..9d727236 100644
--- a/frontend/src/app/_pages/add-model/add-model.component.html
+++ b/frontend/src/app/_pages/add-model/add-model.component.html
@@ -26,48 +26,15 @@
 
         <div class="py-3 pr-5 justify-content-center">
 
-            <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 my-2">
-                <input *ngIf="showMyDatasets" type="text" class="form-control" placeholder="Pretraga"
-                    [(ngModel)]="term">
-            </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|filter:term"
-                            [ngClass]="{'selectedDatasetClass': this.selectedDataset == dataset}">
-                            <app-item-dataset name="usersDataset" [dataset]="dataset"
-                                (click)="selectThisDataset(dataset);"></app-item-dataset>
-                        </li>
-                    </ul>
-                </div>
-            </div>
+            <!--Od naslova Izvor podataka pa sve do prikaza tabele (i to) premesteno u dataset-load.component-->
+            <app-dataset-load (selectedDatasetChangeEvent)="datasetHasChanged($event)"></app-dataset-load>
 
-            <app-dataset-load [style]="(showMyDatasets)?'display:none;visibility:hidden;':''" id="dataset"
-                (loaded)="scrollToNextForm(); datasetLoaded = true; selectedDataset = datasetLoadComponent?.dataset; datasetFile = datasetLoadComponent?.csvRecords; datasetHasHeader = datasetLoadComponent?.dataset!.hasHeader">
-            </app-dataset-load>
-            <div class="px-5 mt-5">
-                <app-datatable [data]="datasetFile" [hasHeader]="datasetHasHeader"></app-datatable>
-            </div>
         </div>
 
         <!-- ULAZNE/IZLAZNE KOLONE -->
         <span id="selectInAndOuts"></span>
         <div
-            *ngIf="selectedDataset && ((showMyDatasets && selectedDatasetLoaded) || (!showMyDatasets && datasetLoaded))">
+            *ngIf="selectedDataset && ((showMyDatasets) || (!showMyDatasets))">
             <!--postignuto da se kod newdataseta ucita tabela pa ulazi/izlazi. ostalo srediti to kod mydatasets(dopuna 2. uslova)-->
             <div class="row">
                 <div class="col d-flex justify-content-center">
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 945a58b5..192fc6ff 100644
--- a/frontend/src/app/_pages/add-model/add-model.component.ts
+++ b/frontend/src/app/_pages/add-model/add-model.component.ts
@@ -5,9 +5,7 @@ import { DatasetLoadComponent } from 'src/app/_elements/dataset-load/dataset-loa
 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';
 
 
@@ -18,11 +16,6 @@ import { CsvParseService } from 'src/app/_services/csv-parse.service';
 })
 export class AddModelComponent implements OnInit {
 
-  @ViewChild(DatasetLoadComponent) datasetLoadComponent?: DatasetLoadComponent;
-  @ViewChild(DatatableComponent) datatable?: DatatableComponent;
-  datasetLoaded: boolean = false;
-  selectedDatasetLoaded: boolean = false;
-
   newModel: Model;
 
   ProblemType = ProblemType;
@@ -71,8 +64,13 @@ export class AddModelComponent implements OnInit {
     (<HTMLInputElement>document.getElementById("btnMyDataset")).focus();
   }
 
+  datasetHasChanged(selectedDataset: Dataset) {
+    this.selectedDataset = selectedDataset;
+    this.resetCbsAndRbs();
+    this.refreshThreeNullValueRadioOptions();
+  }
 
-  viewMyDatasetsForm() {
+  /*viewMyDatasetsForm() {
     this.showMyDatasets = true;
     this.resetSelectedDataset();
     //this.datasetLoaded = false;
@@ -82,7 +80,7 @@ export class AddModelComponent implements OnInit {
     this.showMyDatasets = false;
     this.resetSelectedDataset();
     this.resetCbsAndRbs();
-  }
+  }*/
 
   addModel() {
     if (!this.showMyDatasets)
@@ -117,20 +115,20 @@ export class AddModelComponent implements OnInit {
 
     if (this.validationInputsOutput()) {
       console.log('ADD MODEL: STEP 1 - UPLOAD FILE');
-      if (this.datasetLoadComponent) {
-        console.log("this.datasetLoadComponent.files:", this.datasetLoadComponent.files);
-        this.models.uploadData(this.datasetLoadComponent.files[0]).subscribe((file) => {
+      if (this.selectedDataset) {
+        //console.log("this.datasetLoadComponent.files:", this.datasetLoadComponent.files);
+        /*this.models.uploadData(this.datasetLoadComponent.files[0]).subscribe((file) => {   ZAKOMENTARISANO ZBOG KOMPAJLERSKE GRESKE TOKOM REORGANIZACIJE
           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;
+          if (this.selectedDataset) {
+            this.selectedDataset!.fileId = file._id;
+            this.selectedDataset!.username = shared.username;
 
-            this.datasets.addDataset(this.datasetLoadComponent.dataset).subscribe((dataset) => {
+            this.datasets.addDataset(this.selectedDataset!).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.refreshMyDatasetList();  MORA OVO
               this.showMyDatasets = true;
               this.selectThisDataset(dataset);
 
@@ -151,7 +149,7 @@ export class AddModelComponent implements OnInit {
           } //kraj treceg ifa
         }, (error) => {
           
-        }); //kraj uploadData subscribe
+        }); //kraj uploadData subscribe*/
 
       } //kraj drugog ifa
     } //kraj prvog ifa
@@ -234,30 +232,30 @@ export class AddModelComponent implements OnInit {
     return true;
   }
 
-  selectThisDataset(dataset: Dataset) {
+  /*selectThisDataset(dataset: Dataset) {
     this.selectedDataset = dataset;
-    this.selectedDatasetLoaded = false;
+    //this.selectedDatasetLoaded = false;
     this.existingDatasetSelected = true;
     this.datasetHasHeader = this.selectedDataset.hasHeader;
 
     this.datasets.getDatasetFile(dataset.fileId).subscribe((file: string | undefined) => {
       if (file) {
         this.datasetFile = this.csv.csvToArray(file, (dataset.delimiter == "razmak") ? " " : (dataset.delimiter == "") ? "," : dataset.delimiter);
-        /*for (let i = this.datasetFile.length - 1; i >= 0; i--) {  //moguce da je vise redova na kraju fajla prazno i sl.
-          if (this.datasetFile[i].length != this.datasetFile[0].length)
-            this.datasetFile[i].pop();
-          else
-            break; //nema potrebe dalje
-        }*/
+        //for (let i = this.datasetFile.length - 1; i >= 0; i--) {  //moguce da je vise redova na kraju fajla prazno i sl.
+          //if (this.datasetFile[i].length != this.datasetFile[0].length)
+            //this.datasetFile[i].pop();
+          //else
+          //  break; //nema potrebe dalje
+        //}
         //console.log(this.datasetFile);
         this.resetCbsAndRbs();
         this.refreshThreeNullValueRadioOptions();
-        this.selectedDatasetLoaded = true;
+        //this.selectedDatasetLoaded = true;
         this.scrollToNextForm();
       }
     });
     //this.datasetHasHeader = false;
-  }
+  }*/
 
   scrollToNextForm() {
     (<HTMLSelectElement>document.getElementById("selectInAndOuts")).scrollIntoView({
@@ -267,7 +265,7 @@ export class AddModelComponent implements OnInit {
     });
   }
 
-  resetSelectedDataset(): boolean {
+  /*resetSelectedDataset(): boolean {
     const temp = this.selectedDataset;
     this.selectedDataset = this.otherDataset;
     this.otherDataset = temp;
@@ -275,7 +273,7 @@ export class AddModelComponent implements OnInit {
     this.datasetFile = this.otherDatasetFile;
     this.otherDatasetFile = tempFile;
     return true;
-  }
+  }*/
   resetCbsAndRbs(): boolean {
     this.uncheckRbs();
     this.checkAllCbs();
@@ -345,7 +343,7 @@ export class AddModelComponent implements OnInit {
       let colIndex = this.findColIndexByName(colName);
       let sumOfNulls = 0;
 
-      let startValue = (this.datasetLoadComponent?.dataset.hasHeader) ? 1 : 0;
+      let startValue = (this.selectedDataset!.hasHeader) ? 1 : 0;
       for (let i = startValue; i < this.datasetFile.length; i++) {
         if (this.datasetFile[i][colIndex] == "" || this.datasetFile[i][colIndex] == undefined)
           ++sumOfNulls;
@@ -360,7 +358,7 @@ export class AddModelComponent implements OnInit {
       let sum = 0;
       let n = 0;
 
-      let startValue = (this.datasetLoadComponent?.dataset.hasHeader) ? 1 : 0;
+      let startValue = (this.selectedDataset!.hasHeader) ? 1 : 0;
       for (let i = startValue; i < this.datasetFile.length; i++)
         if (this.datasetFile[i][colIndex] != '') {
           sum += Number(this.datasetFile[i][colIndex]);
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 8098df40..b9ad524f 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -40,6 +40,7 @@ import { ReactiveBackgroundComponent } from './_elements/reactive-background/rea
 import { ItemModelComponent } from './_elements/item-model/item-model.component';
 import { AnnvisualComponent } from './_elements/annvisual/annvisual.component';
 import { AlertDialogComponent } from './_modals/alert-dialog/alert-dialog.component';
+import { AddNewDatasetComponent } from './_elements/add-new-dataset/add-new-dataset.component';
 
 @NgModule({
   declarations: [
@@ -69,7 +70,8 @@ import { AlertDialogComponent } from './_modals/alert-dialog/alert-dialog.compon
     ReactiveBackgroundComponent,
     ItemModelComponent,
     AnnvisualComponent,
-    AlertDialogComponent
+    AlertDialogComponent,
+    AddNewDatasetComponent
   ],
   imports: [
     BrowserModule,
-- 
cgit v1.2.3