Dodao folder komponentu, odradjeni tabovi i selekcija, ulazi i izlazi komponente, stil.

9 files changed, 315 insertions, 15 deletions

diff --git a/frontend/src/app/_elements/folder/folder.component.css b/frontend/src/app/_elements/folder/folder.component.css
index e69de29b..cfb0d087 100644
--- a/frontend/src/app/_elements/folder/folder.component.css
+++ b/frontend/src/app/_elements/folder/folder.component.css
@@ -0,0 +1,124 @@
+#folder {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+#tabs {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+    height: 4rem;
+}
+
+#tabs>.folder-tab:not(:first-child) {
+    margin-left: -5px;
+}
+
+.folder-tab {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    position: relative;
+    overflow-x: hidden;
+    background-color: var(--ns-bg-dark-100);
+    height: 2.5rem;
+    border-color: var(--ns-primary);
+    border-style: solid;
+    border-width: 1px 1px 0 1px;
+}
+
+.folder-tab:not(:first-child) {
+    margin-block-start: auto;
+    width: 4rem;
+}
+
+.selected-tab {
+    height: 3rem;
+    background-color: var(--ns-primary);
+}
+
+.hover-tab {
+    height: 3.2rem;
+}
+
+.selected-tab,
+.hover-tab {
+    width: fit-content !important;
+}
+
+.tab-link {
+    color: var(--offwhite) !important;
+    text-decoration: none !important;
+    cursor: pointer;
+}
+
+.tab-link:active {
+    color: var(--ns-accent) !important;
+}
+
+.selected-tab {
+    background-color: var(--ns-primary);
+}
+
+#searchbar {
+    height: 2.5rem;
+    background-color: var(--ns-bg-dark-100);
+    border-bottom: 1px solid var(--ns-primary);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+}
+
+.collapse-horizontal {
+    white-space: nowrap;
+    height: 2.5rem;
+    overflow-x: hidden;
+}
+
+#search-options {
+    margin-left: auto;
+    margin-top: 7px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+#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;
+    border-width: 1px 1px 1px 1px;
+    border-top-right-radius: 4px;
+}
+
+#footer {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+
+.folder-bottom-button {
+    font-size: large;
+    position: relative;
+    background-color: var(--ns-bg-dark-100);
+    width: 10rem;
+    height: 2.5rem;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+    border-color: var(--ns-primary);
+    border-style: solid;
+    border-width: 0px 1px 1px 1px;
+}
+
+.folder-bottom-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 e4c376a7..455d43cc 100644
--- a/frontend/src/app/_elements/folder/folder.component.html
+++ b/frontend/src/app/_elements/folder/folder.component.html
@@ -1 +1,68 @@
-<p>folder works!</p>
+<div id="folder" style="width: 60rem;">
+    <div id="tabs" class="text-offwhite">
+        <div id="new-file-tab" class="folder-tab p-1 rounded-top" [style]="'z-index:' + newFileZIndex() + ' ;'" [ngClass]="{'selected-tab' : newFileSelected}">
+            <mat-icon class="text-offwhite">add</mat-icon>
+            <a class="stretched-link tab-link" (click)="selectNewFile()">
+                <p class="m-1" *ngIf="newFile != undefined">{{newFile.name}}</p>
+            </a>
+        </div>
+        <div class="folder-tab p-1 rounded-top" *ngFor="let file of files; let i = index" [style]="'z-index:' + calcZIndex(i) + ' ;'" [ngClass]="{'selected-tab' : selectedFileIndex == i, 'hover-tab' : hoveringOverFileIndex == i}">
+            <a class="m-1 stretched-link tab-link" (click)="selectFile(i)" (mouseenter)="hoverOverFile(i)" (mouseleave)="hoverOverFile(-1)">{{file.name}}</a>
+        </div>
+    </div>
+    <div id="selected-content" class="rounded-bottom text-offwhite">
+        <div id="searchbar">
+            <div id="path" class="ps-2">{{folderName}}
+            </div>
+            <mat-icon>keyboard_arrow_right</mat-icon>
+            <div id="search">
+                <mat-form-field>
+                    <input matNativeControl>
+                </mat-form-field>
+            </div>
+            <div id="search-options">
+                <div id="collapseFilters" class="collapse collapse-horizontal show">
+                    <mat-chip-list aria-label="filter selection">
+                        <mat-chip class="text-offwhite ns-bg-dark-50">
+                            <mat-icon class="text-offwhite">timeline</mat-icon>
+                            Regresioni
+                        </mat-chip>
+                        <mat-chip class="text-offwhite ns-bg-dark-50">
+                            <mat-icon class="text-offwhite">looks_two</mat-icon>
+                            Binarni klasifikacioni
+                        </mat-chip>
+                        <mat-chip class="text-offwhite ns-bg-dark-50">
+                            <mat-icon class="text-offwhite">auto_awesome_motion</mat-icon>
+                            Multiklasifikacioni
+                        </mat-chip>
+                    </mat-chip-list>
+                </div>
+                <a class="tab-link p-1" data-bs-toggle="collapse" data-bs-target="#collapseFilters" aria-expanded="true" aria-controls="collapseFilters">
+                    <mat-icon>filter_alt</mat-icon>
+                </a>
+                <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">
+                    <mat-icon>sort</mat-icon>
+                </a>
+            </div>
+        </div>
+        {{fileToDisplay ? fileToDisplay.name : 'No file selected.'}} {{selectedFileIndex}} {{hoveringOverFileIndex}}
+    </div>
+    <div id="footer">
+        <div class="folder-bottom-button text-offwhite rounded-bottom" *ngIf="newFileSelected">
+            <a class="tab-link stretched-link">Sačuvaj</a>
+            <div>
+                <mat-icon>check</mat-icon>
+            </div>
+        </div>
+        <div class="folder-bottom-button text-offwhite rounded-bottom" *ngIf="!newFileSelected">
+            <a class="tab-link stretched-link">Ok</a>
+            <div class="icon-double">
+                <mat-icon>check</mat-icon>
+                <mat-icon>check</mat-icon>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/folder/folder.component.ts b/frontend/src/app/_elements/folder/folder.component.ts
index c5ff3c45..34c8db82 100644
--- a/frontend/src/app/_elements/folder/folder.component.ts
+++ b/frontend/src/app/_elements/folder/folder.component.ts
@@ -1,4 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import Dataset from 'src/app/_data/Dataset';
+import Model from 'src/app/_data/Model';
 
 @Component({
   selector: 'app-folder',
@@ -7,9 +9,98 @@ import { Component, OnInit } from '@angular/core';
 })
 export class FolderComponent implements OnInit {
 
-  constructor() { }
+  @Input() folderName: string = 'Moji podaci';
+
+  @Input() files!: (Dataset | Model)[]
+
+  newFile!: Dataset | Model;
+
+  @Input() type: FolderType = FolderType.Dataset;
+
+  newFileSelected: boolean = true;
+
+  selectedFileIndex: number = -1;
+  hoveringOverFileIndex: number = -1;
+
+  fileToDisplay?: (Dataset | Model);
+
+  @Output() selectedFileChanged: EventEmitter<(Dataset | Model)> = new EventEmitter();
+
+  constructor() {
+    //PLACEHOLDER
+    this.files = [
+      new Dataset('Titanik'),
+      new Dataset('Dijamanti'),
+      new Dataset('Filmovi'),
+    ]
+  }
 
   ngOnInit(): void {
+    if (this.files.length > 0)
+      this.selectFile(0);
+    else {
+      this.selectNewFile();
+    }
+  }
+
+  hoverOverFile(i: number) {
+    this.hoveringOverFileIndex = i;
+    if (i != -1) {
+      this.fileToDisplay = this.files[i];
+    } else {
+      if (this.newFileSelected) {
+        this.fileToDisplay = this.newFile;
+      } else {
+        this.fileToDisplay = this.files[this.selectedFileIndex];
+      }
+    }
+  }
+
+  selectNewFile() {
+    if (!this.newFile) {
+      this.createNewFile();
+    }
+    this.fileToDisplay = this.newFile;
+    this.selectedFileIndex = -1;
+    this.newFileSelected = true;
+    this.selectedFileChanged.emit(this.newFile);
+  }
+
+  selectFile(index: number) {
+    this.selectedFileIndex = index;
+    this.fileToDisplay = this.files[index];
+    this.newFileSelected = false;
+    this.selectedFileChanged.emit(this.files[index]);
+  }
+
+  createNewFile() {
+    if (this.type == FolderType.Dataset) {
+      this.newFile = new Dataset();
+    } else if (this.type == FolderType.Model) {
+      this.newFile = new Model();
+    }
+  }
+
+  saveNewFile() {
+    // TODO
+  }
+
+  calcZIndex(i: number) {
+    let zIndex = (this.files.length - i - 1)
+    if (this.selectedFileIndex == i)
+      zIndex = this.files.length + 2;
+    if (this.hoveringOverFileIndex == i)
+      zIndex = this.files.length + 3;
+    return zIndex;
+  }
+
+  newFileZIndex() {
+    return (this.files.length + 1);
   }
 
 }
+
+export enum FolderType {
+  Dataset,
+  Model
+} 
diff --git a/frontend/src/app/_elements/playlist/playlist.component.css b/frontend/src/app/_elements/playlist/playlist.component.css
index 83448e51..353a094c 100644
--- a/frontend/src/app/_elements/playlist/playlist.component.css
+++ b/frontend/src/app/_elements/playlist/playlist.component.css
@@ -13,7 +13,7 @@
 .ns-cards {
     position: relative;
     width: 300%;
-    height: 26rem;
+    height: 25rem;
     margin-bottom: 20px;
 }
 
diff --git a/frontend/src/app/_elements/playlist/playlist.component.html b/frontend/src/app/_elements/playlist/playlist.component.html
index 97ebe6a5..b82de163 100644
--- a/frontend/src/app/_elements/playlist/playlist.component.html
+++ b/frontend/src/app/_elements/playlist/playlist.component.html
@@ -3,13 +3,13 @@
     <input type="radio" name="slider" id="item-2" value="1" [(ngModel)]="selectedId">
     <input type="radio" name="slider" id="item-3" value="2" [(ngModel)]="selectedId">
     <div class="ns-cards">
-        <label class="ns-card ns-bg-dark-100 overflow-x-auto overflow-y-none" for="item-1" id="view-item-1">
+        <label class="ns-card ns-bg-dark-100 ns-border-primary rounded" for="item-1" id="view-item-1">
             <app-datatable [tableData]="tableDatas[0]"></app-datatable>
         </label>
-        <label class="ns-card ns-bg-dark-100 overflow-x-auto overflow-y-none" for="item-2" id="view-item-2">
+        <label class="ns-card ns-bg-dark-100 ns-border-primary rounded" for="item-2" id="view-item-2">
             <app-datatable [tableData]="tableDatas[1]"></app-datatable>
         </label>
-        <label class="ns-card ns-bg-dark-100 overflow-x-auto overflow-y-none" for="item-3" id="view-item-3">
+        <label class="ns-card ns-bg-dark-100 ns-border-primary rounded" for="item-3" id="view-item-3">
             <app-datatable [tableData]="tableDatas[2]"></app-datatable>
         </label>
     </div>
diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html
index bcecd284..7f4e14ec 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.html
+++ b/frontend/src/app/_pages/experiment/experiment.component.html
@@ -1 +1,2 @@
 <p>experiment works!</p>
+<app-folder></app-folder>
\ No newline at end of file
diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html
index 06416791..93c27eb8 100644
--- a/frontend/src/app/app.component.html
+++ b/frontend/src/app/app.component.html
@@ -1,9 +1,9 @@
 <app-gradient-background colorHorizontal1="rgba(0, 8, 45, 0.5)" colorHorizontal2="rgba(0, 52, 89, 0.5)" colorVertical1="rgba(0, 52, 89, 0.5)" colorVertical2="rgba(0, 152, 189, 0.5)"></app-gradient-background>
-<app-reactive-background [speed]="0.0005" [scrollSpeed]="0.25" [minDistance]="0.1" [maxSize]="4" [cursorDistance]="0.17" lineColor="#00a8e8" pointColor="rgba(0, 188, 252, 0.33)" cursorLineColor="#00a8e8" [numPoints]="300">
+<app-reactive-background [speed]="0.0005" [scrollSpeed]="0.25" [minDistance]="0.1" [maxSize]="3" [cursorDistance]="0.17" lineColor="#00a8e8" pointColor="rgba(0, 188, 252, 0.33)" cursorLineColor="#00a8e8" [numPoints]="300">
 </app-reactive-background>
-<app-reactive-background [speed]="0.0008" [scrollSpeed]="0.5" [minDistance]="0.12" [maxSize]="6" [cursorDistance]="0.19" lineColor="#00a8e8" pointColor="rgba(0, 188, 252, 0.66)" cursorLineColor="#00a8e8" [numPoints]="200">
+<app-reactive-background [speed]="0.0008" [scrollSpeed]="0.5" [minDistance]="0.12" [maxSize]="4" [cursorDistance]="0.19" lineColor="#00a8e8" pointColor="rgba(0, 188, 252, 0.66)" cursorLineColor="#00a8e8" [numPoints]="200">
 </app-reactive-background>
-<app-reactive-background [speed]="0.001" [scrollSpeed]="1" [minDistance]="0.14" [maxSize]="8" [cursorDistance]="0.22" lineColor="#00a8e8" pointColor="rgba(0, 188, 252, 1)" cursorLineColor="#00a8e8" [numPoints]="100">
+<app-reactive-background [speed]="0.001" [scrollSpeed]="1" [minDistance]="0.14" [maxSize]="5" [cursorDistance]="0.22" lineColor="#00a8e8" pointColor="rgba(0, 188, 252, 1)" cursorLineColor="#00a8e8" [numPoints]="100">
 </app-reactive-background>
 <app-navbar></app-navbar>
 <a class="bg-controls" routerLink="playground">pozadina</a>
diff --git a/frontend/src/styles/helper.css b/frontend/src/styles/helper.css
index 58f00c20..9c520ac3 100644
--- a/frontend/src/styles/helper.css
+++ b/frontend/src/styles/helper.css
@@ -33,7 +33,7 @@
 
 .footer-center>* {
     position: fixed;
-    bottom: 8%;
+    bottom: 15px;
     left: 50%;
     transform: translateX(-50%);
 }
@@ -41,4 +41,14 @@
 .row-height {
     white-space: nowrap;
     height: 1rem;
+}
+
+.icon-double>*:nth-child(2) {
+    margin-left: -1rem;
+}
+
+.no-wrap {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
\ No newline at end of file
diff --git a/frontend/src/styles/theme.css b/frontend/src/styles/theme.css
index 820f5a5a..d0ccc935 100644
--- a/frontend/src/styles/theme.css
+++ b/frontend/src/styles/theme.css
@@ -1,10 +1,11 @@
 :root {
-    --ns-primary: #00a8e8;
+    --ns-primary: #0063AB;
+    --ns-accent: #00a8e8;
     --ns-bg: #003459;
     --ns-bg-light-30: rgba(0, 152, 189, 0.3);
     --ns-bg-dark-100: rgba(0, 65, 101, 1.0);
     --ns-bg-dark-50: rgba(0, 65, 101, 0.5);
-    --offwhite: #ebe6e6;
+    --offwhite: #dfd7d7;
 }
 
 body {
@@ -16,7 +17,13 @@ body {
     background-color: var(--ns-bg-light-30) !important;
 }
 
-.ns-bg-dark-50 {}
+.ns-border-primary {
+    border: 1px solid var(--ns-primary);
+}
+
+.ns-bg-dark-50 {
+    background-color: var(--ns-bg-dark-50) !important;
+}
 
 .ns-bg-dark-100 {
     background-color: var(--ns-bg-dark-100) !important;
@@ -27,5 +34,5 @@ a {
 }
 
 .text-offwhite {
-    color: var(--offwhite);
+    color: var(--offwhite) !important;
 }
\ No newline at end of file