From ea61d7f909c3afbee5a75acf56322c548f92ae93 Mon Sep 17 00:00:00 2001
From: Ivan Ljubisavljevic <ivan996sk@gmail.com>
Date: Tue, 3 May 2022 18:11:19 +0200
Subject: Redizajn form dataseta #129

---
 frontend/src/app/_elements/folder/folder.component.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'frontend/src/app/_elements/folder/folder.component.css')

diff --git a/frontend/src/app/_elements/folder/folder.component.css b/frontend/src/app/_elements/folder/folder.component.css
index 137a9643..7f1003cc 100644
--- a/frontend/src/app/_elements/folder/folder.component.css
+++ b/frontend/src/app/_elements/folder/folder.component.css
@@ -157,7 +157,7 @@
 
 .file-content {
     width: 100%;
-    height: 92%;
+    height: 100%;
     position: relative;
 }
 
-- 
cgit v1.2.3


From ec1235f53500181bb4476d86062c33e1175507dd Mon Sep 17 00:00:00 2001
From: Danijel Anđelković <adanijel99@gmail.com>
Date: Tue, 3 May 2022 18:51:15 +0200
Subject: Dodao fajl za stil fontova, povezao tabove u folderu i ispravio neke
 greske.

---
 frontend/src/app/_data/FolderFile.ts               |   3 +-
 .../src/app/_elements/folder/folder.component.css  |  16 +++
 .../src/app/_elements/folder/folder.component.html |  31 +++--
 .../src/app/_elements/folder/folder.component.ts   | 137 +++++++++++++--------
 .../form-dataset/form-dataset.component.html       |  22 ++--
 .../app/_pages/experiment/experiment.component.css |   4 +-
 .../_pages/experiment/experiment.component.html    |   4 +-
 frontend/src/app/_pages/home/home.component.css    |   2 +-
 frontend/src/styles.css                            |   1 +
 frontend/src/styles/font.css                       |   6 +
 10 files changed, 150 insertions(+), 76 deletions(-)
 create mode 100644 frontend/src/styles/font.css

(limited to 'frontend/src/app/_elements/folder/folder.component.css')

diff --git a/frontend/src/app/_data/FolderFile.ts b/frontend/src/app/_data/FolderFile.ts
index a79eeac5..c228f25e 100644
--- a/frontend/src/app/_data/FolderFile.ts
+++ b/frontend/src/app/_data/FolderFile.ts
@@ -9,5 +9,6 @@ export class FolderFile {
 
 export enum FolderType {
     Dataset,
-    Model
+    Model,
+    Experiment
 }
\ No newline at end of file
diff --git a/frontend/src/app/_elements/folder/folder.component.css b/frontend/src/app/_elements/folder/folder.component.css
index 7f1003cc..2340ee8a 100644
--- a/frontend/src/app/_elements/folder/folder.component.css
+++ b/frontend/src/app/_elements/folder/folder.component.css
@@ -129,6 +129,8 @@
 .list-view {
     height: 100%;
     overflow-y: auto;
+    display: flex;
+    flex-direction: column;
 }
 
 .list-item {
@@ -138,6 +140,7 @@
     align-items: center;
     justify-content: space-between;
     border-bottom: 1px solid var(--ns-primary);
+    flex-shrink: 0;
 }
 
 .list-item:hover {
@@ -149,6 +152,15 @@
     display: none;
 }
 
+.list-add {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    flex-grow: 1;
+    height: 100%;
+}
+
 .folder-inside {
     width: 100%;
     height: 40rem;
@@ -186,4 +198,8 @@
 
 .file-button:hover {
     background-color: var(--ns-primary);
+}
+
+.form-hidden {
+    display: none;
 }
\ 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 36f70c97..e77f837e 100644
--- a/frontend/src/app/_elements/folder/folder.component.html
+++ b/frontend/src/app/_elements/folder/folder.component.html
@@ -1,9 +1,9 @@
 <div id="folder">
     <div id="tabs">
-        <div id="new-file-tab" class="folder-tab p-1 rounded-top" [style]="'z-index:' + (selectedTab == TabType.NewFile ? 11 : 10) + ' ;'" [ngClass]="{'selected-tab' : selectedTab == TabType.NewFile, 'hover-tab' : hoverTab == TabType.NewFile}">
+        <div id="new-file-tab" *ngIf="newFile" class="folder-tab p-1 rounded-top" [style]="'z-index:' + (selectedTab == TabType.NewFile ? 11 : 10) + ' ;'" [ngClass]="{'selected-tab' : selectedTab == TabType.NewFile, 'hover-tab' : hoverTab == TabType.NewFile}">
             <mat-icon class="text-offwhite">add</mat-icon>
             <a class="stretched-link tab-link" (click)="selectTab(TabType.NewFile)" (mouseenter)="hoverOverTab(TabType.NewFile)" (mouseleave)="hoverOverTab(TabType.None)">
-                {{tabTitles[TabType.NewFile]}}
+                {{newFile.name}}
             </a>
         </div>
         <!--<div class="folder-tab p-1 rounded-top" *ngFor="let file of filteredFiles; let i = index" [style]="'z-index:' + calcZIndex(i) + ' ;'" [ngClass]="{'selected-tab' : selectedFileIndex == i, 'hover-tab' : hoveringOverFileIndex == i}">
@@ -12,6 +12,10 @@
         <div class="folder-tab p-1 rounded-top" *ngFor="let tab of tabsToShow; let i = index" [style]="'z-index:' + (selectedTab == tab ? 11 : (tabsToShow.length - i)) + ' ;'" [ngClass]="{'selected-tab' : selectedTab == tab, 'hover-tab' : hoverTab == tab}">
             <a class="m-1 stretched-link tab-link" (click)="selectTab(tab)" (mouseenter)="hoverOverTab(tab)" (mouseleave)="hoverOverTab(TabType.None)">{{tabTitles[tab]}}</a>
         </div>
+
+        <div class="folder-tab p-1 rounded-top" *ngIf="selectedFile" [style]="'z-index:' + (selectedTab == TabType.File ? 11 : (tabsToShow.length)) + ' ;'" [ngClass]="{'selected-tab' : selectedTab == TabType.File, 'hover-tab' : hoverTab == TabType.File}">
+            <a class="m-1 stretched-link tab-link" (click)="selectTab(TabType.File)" (mouseenter)="hoverOverTab(TabType.File)" (mouseleave)="hoverOverTab(TabType.None)">{{selectedFile.name}}</a>
+        </div>
     </div>
     <div id="selected-content" class="rounded-bottom text-offwhite">
         <div id="searchbar" *ngIf="listView">
@@ -49,35 +53,40 @@
             </div>
         </div>
         <!--{{fileToDisplay ? fileToDisplay.name : 'No file selected.'}} {{selectedFileIndex}} {{hoveringOverFileIndex}}-->
-        <div [ngSwitch]="listView" class="folder-inside bg-blur">
-            <div class="file-content" [ngSwitch]="type" *ngSwitchCase="false">
+        <div class="folder-inside bg-blur">
+            <div class="file-content" [ngClass]="{'form-hidden' : listView}">
                 <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>
+                        <mat-icon>share</mat-icon>
                     </button>
                     <button class="btn-clear file-button">
                         <mat-icon>zoom_out_map</mat-icon>
                     </button>
                 </div>
-                <app-form-model [forExperiment]="forExperiment" [model]="fileToDisplay" *ngSwitchCase="FolderType.Model"></app-form-model>
-                <app-form-dataset *ngSwitchCase="FolderType.Dataset" ></app-form-dataset>
+                <app-form-model [forExperiment]="forExperiment" [model]="fileToDisplay" [ngClass]="{'form-hidden': type != FolderType.Model}"></app-form-model>
+                <app-form-dataset [ngClass]="{'form-hidden': type != 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 [ngClass]="{'form-hidden' : !listView}" class="list-view">
+                <div *ngFor="let file of filteredFiles; let i = index" class="list-item force-link" (click)="selectFile(file)">
                     <div class="mx-2">
-                        <a class="force-link" (click)="selectFile(i)">{{file.name}}</a>
+                        {{file.name}}
                     </div>
                     <div class="mx-2 hover-hide">
                         {{file.lastUpdated | date}}
                     </div>
                 </div>
+                <div class="list-add" [ngSwitch]="type">
+                    <button mat-raised-button *ngSwitchCase="FolderType.Dataset" (click)="selectNewFile()">Dodaj {{privacy == Privacy.Public ? 'javni ' : ' '}}izvor podataka</button>
+                    <button mat-raised-button *ngSwitchCase="FolderType.Model" (click)="selectNewFile()">Dodaj {{privacy == Privacy.Public ? 'javnu ' : ' '}}konfiguraciju neuronske mreže</button>
+                    <button mat-raised-button *ngSwitchCase="FolderType.Experiment" routerLink="/experiment">Dodaj eksperiment</button>
+                </div>
             </div>
         </div>
     </div>
-    <div id="footer" [ngSwitch]="newFileSelected">
+    <div id="footer" [ngSwitch]="newFileSelected" *ngIf="!listView">
         <button mat-button (click)="saveNewFile()" class="bottom-button text-offwhite rounded-bottom" *ngSwitchCase="true">
             <div  class="f-row">
                 <div>Sačuvaj</div>
diff --git a/frontend/src/app/_elements/folder/folder.component.ts b/frontend/src/app/_elements/folder/folder.component.ts
index 06b4d893..c97a01b6 100644
--- a/frontend/src/app/_elements/folder/folder.component.ts
+++ b/frontend/src/app/_elements/folder/folder.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, EventEmitter, Input, OnInit, Output, ViewChild } 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';
@@ -15,19 +15,18 @@ import { PredictorsService } from 'src/app/_services/predictors.service';
   templateUrl: './folder.component.html',
   styleUrls: ['./folder.component.css']
 })
-export class FolderComponent implements OnInit {
+export class FolderComponent implements AfterViewInit {
 
   @ViewChild(FormDatasetComponent) formDataset?: FormDatasetComponent;
 
   @Input() folderName: string = 'Moji podaci';
-
   @Input() files!: FolderFile[]
 
   newFile!: Dataset | Model;
 
   @Input() type: FolderType = FolderType.Dataset;
-
   @Input() forExperiment?: Experiment;
+  @Input() startingTab: TabType = TabType.MyDatasets;
 
   newFileSelected: boolean = true;
 
@@ -50,26 +49,21 @@ export class FolderComponent implements OnInit {
     this.folders[TabType.File] = [];
     this.folders[TabType.NewFile] = [];
 
-    this.refreshFiles();
-
-    
   }
 
-  ngOnInit(): void {
-    if (this.files.length > 0)
-      this.selectFile(0);
-    else {
-      this.selectNewFile();
-    }
+  ngAfterViewInit(): void {
+    this.refreshFiles();
   }
 
-  displayFile(){
-    if(this.type == FolderType.Dataset)
+  _initialized = false;
+
+  displayFile() {
+    if (this.type == FolderType.Dataset)
       this.formDataset!.dataset = <Dataset>this.fileToDisplay;
   }
 
   hoverOverFile(i: number) {
-    this.hoveringOverFileIndex = i;
+    /*this.hoveringOverFileIndex = i;
     if (i != -1) {
       this.fileToDisplay = this.files[i];
     } else {
@@ -79,7 +73,7 @@ export class FolderComponent implements OnInit {
         this.fileToDisplay = this.files[this.selectedFileIndex];
       }
     }
-    this.displayFile();
+    this.displayFile();*/
   }
 
   selectNewFile() {
@@ -87,20 +81,20 @@ export class FolderComponent implements OnInit {
       this.createNewFile();
     }
     this.fileToDisplay = this.newFile;
-    this.selectedFile = this.newFile;
     this.newFileSelected = true;
     this.listView = false;
     this.selectedFileChanged.emit(this.newFile);
     this.displayFile();
   }
 
-  selectFile(index: number) {
-    this.selectedFile = this.filteredFiles[index];
-    this.fileToDisplay = this.filteredFiles[index];
+  selectFile(file?: FolderFile) {
+    this.selectedFile = file;
+    this.fileToDisplay = file;
     this.newFileSelected = false;
     this.listView = false;
     this.selectedFileChanged.emit(this.selectedFile);
     this.displayFile();
+    this.selectTab(TabType.File);
   }
 
   createNewFile() {
@@ -115,7 +109,11 @@ export class FolderComponent implements OnInit {
     this.okPressed.emit();
   }
 
-  refreshFiles(){
+  refreshFiles() {
+    this.tabsToShow.forEach(tab => {
+      this.folders[tab] = [];
+    })
+
     this.datasetsService.getMyDatasets().subscribe((datasets) => {
       this.folders[TabType.MyDatasets] = datasets;
     });
@@ -137,17 +135,16 @@ export class FolderComponent implements OnInit {
       this.folders[TabType.MyExperiments] = experiments;
     });
 
-    this.files = [];
-
-    this.filteredFiles.length = 0;
-    this.filteredFiles.push(...this.files);
-
-    this.searchTermsChanged();
-
+    if (!this._initialized) {
+      this.selectTab(this.startingTab);
+      this._initialized = true;
+    }
+    else
+      this.searchTermsChanged();
   }
 
   saveNewFile() {
-    if(this.type == FolderType.Dataset)
+    if (this.type == FolderType.Dataset)
       this.formDataset!.uploadDataset();
   }
 
@@ -159,7 +156,7 @@ export class FolderComponent implements OnInit {
       zIndex = this.files.length + 3;
     return zIndex;
   }
-
+  
   newFileZIndex() {
     return (this.files.length + 1);
   }*/
@@ -174,16 +171,19 @@ export class FolderComponent implements OnInit {
   searchTermsChanged() {
     this.filteredFiles.length = 0;
     this.filteredFiles.push(...this.files.filter((file) => file.name.toLowerCase().includes(this.searchTerm.toLowerCase())));
-    if (this.selectedFile) {
+    /*if (this.selectedFile) {
       if (!this.filteredFiles.includes(this.selectedFile)) {
-        this.selectFile(-1);
+        if (this.hoverTab === TabType.None && this.getFolderType(this.selectedTab) === this.type) {
+          this.selectFile(undefined);
+          console.log(this.getFolderType(this.selectedTab), this.type);
+        }
       } else {
-        this.selectedFileIndex = this.filteredFiles.indexOf(this.selectedFile);
+        //this.selectedFileIndex = this.filteredFiles.indexOf(this.selectedFile);
       }
-    }
+    }*/
   }
 
-  listView: boolean = false;
+  listView: boolean = true;
 
   toggleListView() {
     this.listView = !this.listView;
@@ -206,51 +206,92 @@ export class FolderComponent implements OnInit {
   };
 
   FolderType = FolderType;
-
+  Privacy = Privacy;
   TabType = TabType;
 
+  privacy: Privacy = Privacy.Private;
+
   @Input() tabsToShow: TabType[] = [
     TabType.MyDatasets,
     TabType.PublicDatasets,
     TabType.MyModels,
     TabType.PublicModels,
-    TabType.MyExperiments,
-    TabType.File
+    TabType.MyExperiments
   ]
 
   @Input() selectedTab: TabType = TabType.NewFile;
   hoverTab: TabType = TabType.None;
 
   selectTab(tab: TabType) {
-    this.checkListView(tab);
+    if (tab == TabType.NewFile) {
+
+      this.selectNewFile();
+    }
+
+    this.listView = this.getListView(tab);
+    this.type = this.getFolderType(tab);
+    this.previousPrivacy = this.privacy;
+    this.privacy = this.getPrivacy(tab);
     this.selectedTab = tab;
     this.files = this.folders[tab];
 
-    this.searchTermsChanged();
+    if (tab !== TabType.File && tab !== TabType.NewFile)
+      this.searchTermsChanged();
   }
 
-  checkListView(tab: TabType) {
+  getListView(tab: TabType) {
     switch (tab) {
       case TabType.File:
       case TabType.NewFile:
       case TabType.None:
-        this.listView = false;
-        break;
+        return false;
       case TabType.MyExperiments:
       case TabType.MyDatasets:
       case TabType.MyModels:
       case TabType.PublicDatasets:
       case TabType.PublicModels:
-        this.listView = true;
-        break;
+        return true;
+      default:
+        return false;
+    }
+  }
+
+  getFolderType(tab: TabType) {
+    switch (tab) {
+      case TabType.MyExperiments:
+        return FolderType.Experiment;
+      case TabType.MyDatasets:
+      case TabType.PublicDatasets:
+        return FolderType.Dataset;
+      case TabType.MyModels:
+      case TabType.PublicModels:
+        return FolderType.Model;
+      default:
+        return this.type;
+    }
+  }
+
+  previousPrivacy: Privacy = Privacy.Private;
+
+  getPrivacy(tab: TabType) {
+    switch (tab) {
+      case TabType.PublicDatasets:
+      case TabType.PublicModels:
+        return Privacy.Public;
+      case TabType.None:
+        return this.previousPrivacy;
+      default:
+        return Privacy.Private;
     }
   }
 
   hoverOverTab(tab: TabType) {
-    this.checkListView(tab);
+    this.listView = this.getListView(tab);
+    this.previousPrivacy = this.privacy;
+    this.privacy = this.getPrivacy(tab);
     this.hoverTab = tab;
     if (tab == TabType.None) {
-      this.checkListView(this.selectedTab);
+      this.listView = this.getListView(this.selectedTab);
       this.files = this.folders[this.selectedTab];
     } else {
       this.files = this.folders[tab];
diff --git a/frontend/src/app/_elements/form-dataset/form-dataset.component.html b/frontend/src/app/_elements/form-dataset/form-dataset.component.html
index ee65bdc6..80476292 100644
--- a/frontend/src/app/_elements/form-dataset/form-dataset.component.html
+++ b/frontend/src/app/_elements/form-dataset/form-dataset.component.html
@@ -1,10 +1,10 @@
-<div class="folderBox">
+<div class="folderBox" *ngIf="dataset">
 
     <div class="row">
         <div class="bottomBar">
             <div class="row">
                 <div class="col-sm mb-3">
-                    <div class="fileButton">   
+                    <div class="fileButton">
                         <button type="button" mat-raised-button (click)="fileInput.click()">Choose File</button>
                         <label>{{filename}}</label>
                     </div>
@@ -15,8 +15,8 @@
                         <div class="row">
                             <mat-form-field class="example-full-width" appearance="fill">
                                 <mat-label>Naziv</mat-label>
-                                <input type="text" matInput value="{{dataset?.name}}" [(ngModel)]="dataset.name" >
-                                
+                                <input type="text" matInput value="{{dataset?.name}}" [(ngModel)]="dataset.name">
+
 
                                 <mat-error *ngIf="nameFormControl.hasError('required')">
                                     Naziv je <strong>obavezan</strong>
@@ -39,19 +39,19 @@
         </div>
     </div>
 
-    
+
     <div class="row">
         <div class="file-container" [ngClass]="{'dottedClass': !tableData.hasInput}">
-            
+
             <i class="material-icons-outlined icon-display" [ngClass]="{'hidden': tableData.hasInput}">file_upload</i>
-            
-            <input class="file" id="file-upload" (change)="changeListener($event)" #fileInput type="file"  accept=".csv">
-            
+
+            <input class="file" id="file-upload" (change)="changeListener($event)" #fileInput type="file" accept=".csv">
+
             <div class="mt-5 datatable">
                 <app-datatable [tableData]="tableData"></app-datatable>
             </div>
-            
-            
+
+
         </div>
     </div>
 
diff --git a/frontend/src/app/_pages/experiment/experiment.component.css b/frontend/src/app/_pages/experiment/experiment.component.css
index aca0562a..36c35484 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.css
+++ b/frontend/src/app/_pages/experiment/experiment.component.css
@@ -49,7 +49,7 @@ mat-stepper {
 }
 
 .step-content-inside {
-    width: 90%;
-    height: 90%;
+    width: 98%;
+    height: 98%;
     overflow-y: auto;
 }
\ No newline at end of file
diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html
index 6c53180d..2124d84a 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.html
+++ b/frontend/src/app/_pages/experiment/experiment.component.html
@@ -27,7 +27,7 @@
     <div #stepsContainer class="steps-container">
         <div #steps id="step_1" class="step-content">
             <div class="step-content-inside">
-                <app-folder [type]="FolderType.Dataset" [tabsToShow]="[TabType.MyDatasets, TabType.PublicDatasets, TabType.File]" (okPressed)="goToPage(1)"></app-folder>
+                <app-folder [type]="FolderType.Dataset" [startingTab]="TabType.NewFile" [tabsToShow]="[TabType.MyDatasets, TabType.PublicDatasets]" (okPressed)="goToPage(1)"></app-folder>
             </div>
         </div>
         <div #steps id="step_2" class="step-content">
@@ -37,7 +37,7 @@
         </div>
         <div #steps id="step_3" class="step-content">
             <div class="step-content-inside">
-                <app-folder [type]="FolderType.Model" (okPressed)="goToPage(3)"></app-folder>
+                <app-folder [type]="FolderType.Model" [startingTab]="TabType.NewFile" [tabsToShow]="[TabType.MyModels, TabType.PublicModels]" (okPressed)="goToPage(3)"></app-folder>
             </div>
         </div>
         <div #steps id="step_4" class="step-content">
diff --git a/frontend/src/app/_pages/home/home.component.css b/frontend/src/app/_pages/home/home.component.css
index 22137c24..906f5728 100644
--- a/frontend/src/app/_pages/home/home.component.css
+++ b/frontend/src/app/_pages/home/home.component.css
@@ -15,6 +15,6 @@ h1 {
 
 .card {
     margin: 2.5rem !important;
-    padding: 3rem;
+    padding: 1.5rem;
     width: 26rem !important;
 }
\ No newline at end of file
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index e65d8d7c..50986ea4 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -4,4 +4,5 @@
 @import './styles/helper.css';
 @import './styles/scrollbar.css';
 @import './styles/fx.css';
+@import './styles/font.css';
 @import 'material-icons/iconfont/material-icons.css';
\ No newline at end of file
diff --git a/frontend/src/styles/font.css b/frontend/src/styles/font.css
new file mode 100644
index 00000000..a4d876f5
--- /dev/null
+++ b/frontend/src/styles/font.css
@@ -0,0 +1,6 @@
+/*p,
+a {
+    font-family: Helvetica, sans-serif;
+    letter-spacing: 2px;
+    font-weight: 100;
+}*/
\ No newline at end of file
-- 
cgit v1.2.3