Ispravio graph da radi sa razlicitim brojem neurona za svaki sloj, uskladio sve korake na experiment strani, promenio stil navbara, dodao bottom dugmice u folder. Dodao responzivnost na nekim komponentama.

3 files changed, 131 insertions, 20 deletions

diff --git a/frontend/src/app/_elements/folder/folder.component.css b/frontend/src/app/_elements/folder/folder.component.css
index 3e865576..ce9b9fad 100644
--- a/frontend/src/app/_elements/folder/folder.component.css
+++ b/frontend/src/app/_elements/folder/folder.component.css
@@ -8,7 +8,7 @@
     display: flex;
     flex-direction: row;
     align-items: flex-end;
-    height: 4rem;
+    height: 3.1rem;
 }
 
 #tabs>.folder-tab:not(:first-child) {
@@ -83,16 +83,15 @@
 
 #search-options {
     margin-left: auto;
-    margin-top: 7px;
     display: flex;
     flex-direction: row;
     align-items: center;
+    height: 100%;
 }
 
 #selected-content {
     background-color: var(--ns-bg-dark-50);
     width: 100%;
-    height: 36rem;
     /*backdrop-filter: blur(2px);*/
     border-color: var(--ns-primary);
     border-style: solid;
@@ -120,4 +119,72 @@
 .rounded-bottom {
     border-top-right-radius: 0;
     border-top-left-radius: 0;
+}
+
+.separator {
+    border-left-color: var(--ns-primary);
+    border-left-width: 1px;
+    border-left-style: solid;
+}
+
+.list-view {
+    height: 100%;
+    overflow-y: auto;
+}
+
+.list-item {
+    height: 3rem;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid var(--ns-primary);
+}
+
+.list-item:hover {
+    background-color: var(--ns-bg-dark-100);
+    box-shadow: 0px 3px 3px var(--ns-primary);
+}
+
+.list-item:hover>.hover-hide {
+    display: none;
+}
+
+.folder-inside {
+    width: 100%;
+    height: 40rem;
+    overflow-y: auto;
+}
+
+.file-content {
+    width: 100%;
+    height: 100%;
+    position: relative;
+}
+
+.file-bottom-buttons {
+    position: absolute;
+    bottom: 15px;
+    right: 15px;
+    display: flex;
+    flex-direction: row-reverse;
+}
+
+.file-button {
+    position: relative;
+    color: var(--offwhite);
+    border-radius: 4px;
+    border: 1px solid var(--ns-primary);
+    margin: 5px;
+    padding: 5px;
+    cursor: pointer;
+    z-index: 1001;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
+
+.file-button:hover {
+    background-color: var(--ns-primary);
 }
\ No newline at end of file
diff --git a/frontend/src/app/_elements/folder/folder.component.html b/frontend/src/app/_elements/folder/folder.component.html
index 95e99911..f0bc409a 100644
--- a/frontend/src/app/_elements/folder/folder.component.html
+++ b/frontend/src/app/_elements/folder/folder.component.html
@@ -1,4 +1,4 @@
-<div id="folder" style="width: 60rem;">
+<div id="folder">
     <div id="tabs">
         <div id="new-file-tab" class="folder-tab p-1 rounded-top" [style]="'z-index:' + newFileZIndex() + ' ;'" [ngClass]="{'selected-tab' : newFileSelected, 'hover-tab' : hoveringOverFileIndex == -2}">
             <mat-icon class="text-offwhite">add</mat-icon>
@@ -24,7 +24,6 @@
             </div>
             <div id="search-options">
                 <div id="collapseFilters" class="collapse collapse-horizontal">
-
                     <mat-icon class="text-offwhite ">timeline</mat-icon>
                     Regresioni
                     <mat-icon class="text-offwhite ">looks_two</mat-icon>
@@ -32,19 +31,48 @@
                     <mat-icon class="text-offwhite ">auto_awesome_motion</mat-icon>
                     Multiklasifikacioni
                 </div>
-                <a class="tab-link p-1" data-bs-toggle="collapse" data-bs-target="#collapseFilters" aria-expanded="false" aria-controls="collapseFilters">
+                <button class="btn-clear icon-toggle" data-bs-toggle="collapse" data-bs-target="#collapseFilters" aria-expanded="false" aria-controls="collapseFilters">
                     <mat-icon>filter_alt</mat-icon>
-                </a>
+                </button>
                 <div id="collapseSort" class="collapse collapse-horizontal">
                     [sort options here TODO]
                 </div>
-                <a class="tab-link p-1" data-bs-toggle="collapse" data-bs-target="#collapseSort" aria-expanded="false" aria-controls="collapseSort">
+                <button class="btn-clear icon-toggle" data-bs-toggle="collapse" data-bs-target="#collapseSort" aria-expanded="false" aria-controls="collapseSort">
                     <mat-icon>sort</mat-icon>
-                </a>
+                </button>
+                <button class="btn-clear icon-toggle separator" [ngClass]="{'icon-toggle-on': listView}" (click)="toggleListView()">
+                    <mat-icon>view_list</mat-icon>
+                </button>
+            </div>
+        </div>
+        <!--{{fileToDisplay ? fileToDisplay.name : 'No file selected.'}} {{selectedFileIndex}} {{hoveringOverFileIndex}}-->
+        <div [ngSwitch]="listView" class="folder-inside">
+            <div class="file-content" [ngSwitch]="type" *ngSwitchCase="false">
+                <div class="file-bottom-buttons">
+                    <button class="btn-clear file-button" (click)="deleteFile()">
+                        <mat-icon>delete</mat-icon>
+                    </button>
+                    <button class="btn-clear file-button">
+                        <mat-icon>link</mat-icon>
+                    </button>
+                    <button class="btn-clear file-button">
+                        <mat-icon>zoom_out_map</mat-icon>
+                    </button>
+                </div>
+                <app-form-model [model]="fileToDisplay" *ngSwitchCase="FolderType.Model"></app-form-model>
+                <app-form-dataset *ngSwitchCase="FolderType.Dataset"></app-form-dataset>
+            </div>
+            <div *ngSwitchCase="true" class="list-view">
+                <div *ngFor="let file of filteredFiles; let i = index" class="list-item">
+                    <div class="mx-2">
+                        <a class="force-link" (click)="selectFile(i)">{{file.name}}</a>
+                    </div>
+                    <div class="mx-2 hover-hide">
+                        {{file.lastUpdated | date}}
+                    </div>
+                </div>
             </div>
         </div>
-        <!--        {{fileToDisplay ? fileToDisplay.name : 'No file selected.'}} {{selectedFileIndex}} {{hoveringOverFileIndex}}-->
-        <app-form-dataset></app-form-dataset>
     </div>
     <div id="footer" [ngSwitch]="newFileSelected">
         <button mat-button (click)="saveNewFile()" class="bottom-button text-offwhite rounded-bottom" *ngSwitchCase="true">
diff --git a/frontend/src/app/_elements/folder/folder.component.ts b/frontend/src/app/_elements/folder/folder.component.ts
index 91565f3c..4bf964b6 100644
--- a/frontend/src/app/_elements/folder/folder.component.ts
+++ b/frontend/src/app/_elements/folder/folder.component.ts
@@ -1,5 +1,6 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import Dataset from 'src/app/_data/Dataset';
+import { FolderFile, FolderType } from 'src/app/_data/FolderFile';
 import Model from 'src/app/_data/Model';
 
 @Component({
@@ -11,7 +12,7 @@ export class FolderComponent implements OnInit {
 
   @Input() folderName: string = 'Moji podaci';
 
-  @Input() files!: (Dataset | Model)[]
+  @Input() files!: FolderFile[]
 
   newFile!: Dataset | Model;
 
@@ -20,12 +21,12 @@ export class FolderComponent implements OnInit {
   newFileSelected: boolean = true;
 
   selectedFileIndex: number = -1;
-  selectedFile?: (Dataset | Model);
+  selectedFile?: FolderFile;
   hoveringOverFileIndex: number = -1;
 
-  fileToDisplay?: (Dataset | Model);
+  fileToDisplay?: FolderFile;
 
-  @Output() selectedFileChanged: EventEmitter<(Dataset | Model)> = new EventEmitter();
+  @Output() selectedFileChanged: EventEmitter<FolderFile> = new EventEmitter();
   @Output() okPressed: EventEmitter<string> = new EventEmitter();
 
   searchTerm: string = '';
@@ -71,6 +72,7 @@ export class FolderComponent implements OnInit {
     this.fileToDisplay = this.newFile;
     this.selectedFile = this.newFile;
     this.newFileSelected = true;
+    this.listView = false;
     this.selectedFileChanged.emit(this.newFile);
   }
 
@@ -79,6 +81,7 @@ export class FolderComponent implements OnInit {
     this.selectedFile = this.filteredFiles[index];
     this.fileToDisplay = this.filteredFiles[index];
     this.newFileSelected = false;
+    this.listView = false;
     this.selectedFileChanged.emit(this.selectedFile);
   }
 
@@ -113,9 +116,10 @@ export class FolderComponent implements OnInit {
 
   clearSearchTerm() {
     this.searchTerm = '';
+    this.searchTermsChanged();
   }
 
-  filteredFiles: (Dataset | Model)[] = [];
+  filteredFiles: FolderFile[] = [];
 
   searchTermsChanged() {
     this.filteredFiles.length = 0;
@@ -128,9 +132,21 @@ export class FolderComponent implements OnInit {
       }
     }
   }
+
+  listView: boolean = false;
+
+  toggleListView() {
+    this.listView = !this.listView;
+  }
+
+  deleteFile() {
+    console.log('delete');
+  }
+
+  FolderType = FolderType;
 }
 
-export enum FolderType {
-  Dataset,
-  Model
-} 
+export enum Privacy {
+  Private,
+  Public
+}
\ No newline at end of file