From c71ced076e4e0b713d428eca304f541f02c8ee6f Mon Sep 17 00:00:00 2001
From: Danijel Anđelković <adanijel99@gmail.com>
Date: Sat, 23 Apr 2022 18:59:27 +0200
Subject: Doterao stil za playlist komponentu, i tabelu podataka. Dodao arhivu
 u navbar i obrisao neke stare rute.

---
 .../_elements/datatable/datatable.component.html   | 34 +++++++++-------------
 1 file changed, 14 insertions(+), 20 deletions(-)

(limited to 'frontend/src/app/_elements/datatable/datatable.component.html')

diff --git a/frontend/src/app/_elements/datatable/datatable.component.html b/frontend/src/app/_elements/datatable/datatable.component.html
index 8db62aff..fe359db0 100644
--- a/frontend/src/app/_elements/datatable/datatable.component.html
+++ b/frontend/src/app/_elements/datatable/datatable.component.html
@@ -1,18 +1,16 @@
 <div *ngIf="tableData.hasInput">
-    <div>
-        <div *ngIf="!tableData.loaded" backgroundColor="secondary" style="width: 100%; height: 100%;"
-            class="d-flex justify-content-center align-items-center">
+    <div class="text-white">
+        <div *ngIf="!tableData.loaded" style="width: 100%; height: 100%;" class="d-flex justify-content-center align-items-center">
             <app-loading></app-loading>
         </div>
         <div *ngIf="tableData.loaded && tableData.data">
-            <div id="info" *ngIf="tableData.data.length > 0 && tableData.data[0].length > 0"
-                class="d-flex flex-row justify-content-center align-items-center">
+            <div id="info" *ngIf="tableData.data.length > 0 && tableData.data[0].length > 0" class="d-flex flex-row justify-content-center align-items-center">
                 <div class="fs-5 mb-3">
                     Tabela {{tableData.numCols}}x{{tableData.numRows}}
                 </div>
             </div>
-            <div class="table-responsive" style="overflow: auto; border-radius: 5px;">
-                <table *ngIf="tableData.data.length > 0 && tableData.hasHeader && tableData.data[0].length > 0" class="table table-bordered table-light">
+            <div style="border-radius: 5px; overflow-x: auto; overflow-y: hidden;">
+                <table *ngIf="tableData.data.length && tableData.data[0].length > 0" class="table table-responsive table-sm text-offwhite row-height">
                     <thead>
                         <tr>
                             <th *ngFor="let item of tableData.data[0]; let i = index">{{item}}</th>
@@ -22,21 +20,17 @@
                         <tr *ngFor="let row of tableData.data | slice:1">
                             <td *ngFor="let col of row">{{col}}</td>
                         </tr>
-                        <tr>
-                            <td colspan="100" class="text-lg-center fs-6">+ {{tableData.numRows - 11}} redova...</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <table *ngIf="tableData.data.length > 0 && !tableData.hasHeader && tableData.data[0].length > 0" class="table table-bordered table-light">
-                    <tbody>
-                        <tr *ngFor="let row of tableData.data">
-                            <td *ngFor="let col of row">{{col}}</td>
-                        </tr>
-                        <tr>
-                            <td colspan="100" class="text-lg-center fs-6">+ {{tableData.numRows - 10}} redova...</td>
-                        </tr>
                     </tbody>
                 </table>
+                <tfoot>
+                    <tr>
+                        <td colspan="100" class="fs-6">
+                            <div class="footer-center">
+                                <div>+ {{tableData.numRows - 11}} redova...</div>
+                            </div>
+                        </td>
+                    </tr>
+                </tfoot>
             </div>
         </div>
     </div>
-- 
cgit v1.2.3


From b687d25e0d94992aca66d7e322643cda705db7c1 Mon Sep 17 00:00:00 2001
From: Ivan Ljubisavljevic <ivan996sk@gmail.com>
Date: Thu, 28 Apr 2022 01:11:34 +0200
Subject: Sredjen upload csv-a #116

---
 .../_elements/datatable/datatable.component.html   | 14 +++-----
 .../src/app/_elements/folder/folder.component.css  |  2 +-
 .../form-dataset/form-dataset.component.css        | 40 ++++++++++++++++++----
 .../form-dataset/form-dataset.component.html       | 23 +++++++++----
 .../form-dataset/form-dataset.component.ts         |  8 ++++-
 frontend/src/styles/helper.css                     |  7 +---
 6 files changed, 62 insertions(+), 32 deletions(-)

(limited to 'frontend/src/app/_elements/datatable/datatable.component.html')

diff --git a/frontend/src/app/_elements/datatable/datatable.component.html b/frontend/src/app/_elements/datatable/datatable.component.html
index fe359db0..17a187ef 100644
--- a/frontend/src/app/_elements/datatable/datatable.component.html
+++ b/frontend/src/app/_elements/datatable/datatable.component.html
@@ -1,4 +1,4 @@
-<div *ngIf="tableData.hasInput">
+<div *ngIf="tableData.hasInput" class="position-relative">
     <div class="text-white">
         <div *ngIf="!tableData.loaded" style="width: 100%; height: 100%;" class="d-flex justify-content-center align-items-center">
             <app-loading></app-loading>
@@ -22,15 +22,9 @@
                         </tr>
                     </tbody>
                 </table>
-                <tfoot>
-                    <tr>
-                        <td colspan="100" class="fs-6">
-                            <div class="footer-center">
-                                <div>+ {{tableData.numRows - 11}} redova...</div>
-                            </div>
-                        </td>
-                    </tr>
-                </tfoot>
+            </div>
+            <div class="footer-center" >
+                <div>+ {{tableData.numRows - 11}} redova...</div>
             </div>
         </div>
     </div>
diff --git a/frontend/src/app/_elements/folder/folder.component.css b/frontend/src/app/_elements/folder/folder.component.css
index c90278d2..458e6b4f 100644
--- a/frontend/src/app/_elements/folder/folder.component.css
+++ b/frontend/src/app/_elements/folder/folder.component.css
@@ -158,7 +158,7 @@
 
 .file-content {
     width: 100%;
-    height: 93%;
+    height: 92%;
     position: relative;
 }
 
diff --git a/frontend/src/app/_elements/form-dataset/form-dataset.component.css b/frontend/src/app/_elements/form-dataset/form-dataset.component.css
index 66be7f7d..56eb3cef 100644
--- a/frontend/src/app/_elements/form-dataset/form-dataset.component.css
+++ b/frontend/src/app/_elements/form-dataset/form-dataset.component.css
@@ -4,21 +4,47 @@
     position: relative;
 }
 
-
 .file-container{
+    border: 4px solid transparent;
+    position: relative;
     margin-left: 3%;
-    margin-top: 3%;
-    margin-bottom: -50%;
+    margin-top: 3rem;
     width: 94%;
-    height: 500px;
+    min-height: 500px;
+}
+.fileButton{
+    position: absolute;
+    margin-top: -3rem;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+.fileButton label{
+    margin-left: 10px;
+}
+.dottedClass
+{
     border: 4px dotted white;
     border-radius: 25px;
 }
-.file-container .file {
-   opacity: 0;
-   padding: 5rem;
+
+.hidden{
+    visibility: hidden;
+}
+
+.file {
+    position: absolute;
    width: 100%;
    height: 100%;
+   opacity: 0;
+}
+
+.file input{
+
+    border-radius: 4px;
+    margin-top: -15px;
+    width: 100%;
+    height: 100%;
 }
 
 .icon-display {
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 afe1aeed..e0c7f288 100644
--- a/frontend/src/app/_elements/form-dataset/form-dataset.component.html
+++ b/frontend/src/app/_elements/form-dataset/form-dataset.component.html
@@ -1,11 +1,20 @@
 <div class="folderBox">
 
-    <div class="file-container">
-        <div class="px-5 mt-5 ">
-            <!--<app-datatable [tableData]="tableData"></app-datatable>-->
+    <div class="file-container" [ngClass]="{'dottedClass': !tableData.hasInput}">
+        
+        <i class="material-icons-outlined icon-display" [ngClass]="{'hidden': tableData.hasInput}">file_upload</i>
+        
+        <div class="fileButton">   
+                <button type="button" mat-raised-button (click)="fileInput.click()">Choose File</button>
+                <label>{{filename}}</label>
+        </div>
+                
+        <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>
-        <i class="material-icons-outlined icon-display">file_upload</i>
-        <input type="file" class="file"  (change)="changeListener($event)" accept=".csv">
         
         
     </div>
@@ -33,8 +42,8 @@
             </div>
             <div class="col-sm mb-3">
 
-                <input id="fileInput" class="form-control btn-lg" type="file" class="upload" (change)="changeListener($event)" accept=".csv">
-
+                <!--<input id="fileInput" class="form-control btn-lg" type="file" class="upload" (change)="changeListener($event)" accept=".csv">
+                -->
             </div>
             <div class="col-sm">
 
diff --git a/frontend/src/app/_elements/form-dataset/form-dataset.component.ts b/frontend/src/app/_elements/form-dataset/form-dataset.component.ts
index 9bdd7e14..254f5fe4 100644
--- a/frontend/src/app/_elements/form-dataset/form-dataset.component.ts
+++ b/frontend/src/app/_elements/form-dataset/form-dataset.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Output, ViewChild } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Output, ViewChild } from '@angular/core';
 import Dataset from 'src/app/_data/Dataset';
 import { DatasetsService } from 'src/app/_services/datasets.service';
 import { ModelsService } from 'src/app/_services/models.service';
@@ -29,9 +29,14 @@ export class FormDatasetComponent {
 
   tableData: TableData = new TableData();
 
+  @ViewChild('fileInput') fileInput! : ElementRef
+
+  filename: String;
+
   constructor(private modelsService: ModelsService, private datasetsService: DatasetsService, private csv: CsvParseService) {
     this.dataset = new Dataset();
     this.dataset.delimiter = ',';
+    this.filename = "";
   }
 
   //@ViewChild('fileImportInput', { static: false }) fileImportInput: any; cemu je ovo sluzilo?
@@ -45,6 +50,7 @@ export class FormDatasetComponent {
     else
       this.tableData.hasInput = true;
 
+    this.filename = this.files[0].name;
     this.tableData.loaded = false;
     this.update();
   }
diff --git a/frontend/src/styles/helper.css b/frontend/src/styles/helper.css
index ef875069..76cb6204 100644
--- a/frontend/src/styles/helper.css
+++ b/frontend/src/styles/helper.css
@@ -29,14 +29,9 @@
 .footer-center {
     position: relative;
     height: 1rem;
+    text-align: center;
 }
 
-.footer-center>* {
-    position: fixed;
-    bottom: 15px;
-    left: 50%;
-    transform: translateX(-50%);
-}
 
 .row-height {
     white-space: nowrap;
-- 
cgit v1.2.3


From bd13fc85e30778e0ce84ca3f066196c3e08a2e13 Mon Sep 17 00:00:00 2001
From: Ivan Ljubisavljevic <ivan996sk@gmail.com>
Date: Thu, 5 May 2022 01:34:20 +0200
Subject: Dataset form - ucitavanje postojeceg

---
 backend/api/api/Controllers/FileController.cs      |  2 +-
 .../_elements/datatable/datatable.component.html   | 20 ++++++++++------
 .../src/app/_elements/folder/folder.component.ts   |  5 ++++
 .../form-dataset/form-dataset.component.css        | 16 +++++++++++--
 .../form-dataset/form-dataset.component.html       | 15 ++++++++----
 .../form-dataset/form-dataset.component.ts         | 27 ++++++++++++++++++++++
 frontend/src/app/_services/datasets.service.ts     |  2 +-
 7 files changed, 72 insertions(+), 15 deletions(-)

(limited to 'frontend/src/app/_elements/datatable/datatable.component.html')

diff --git a/backend/api/api/Controllers/FileController.cs b/backend/api/api/Controllers/FileController.cs
index 99d98a78..1d995068 100644
--- a/backend/api/api/Controllers/FileController.cs
+++ b/backend/api/api/Controllers/FileController.cs
@@ -96,7 +96,7 @@ namespace api.Controllers
 
         [HttpGet("csvread/{fileId}/{skipRows}/{takeRows}")]
         [Authorize(Roles = "User,Guest")]
-        public ActionResult<string> CsvRead(string fileId, int skipRows = 0, int takeRows = 10)
+        public ActionResult<string> CsvRead(string fileId, int skipRows = 1, int takeRows = 11)
         {
 
             string uploaderId = getUserId();
diff --git a/frontend/src/app/_elements/datatable/datatable.component.html b/frontend/src/app/_elements/datatable/datatable.component.html
index 17a187ef..27d66dd3 100644
--- a/frontend/src/app/_elements/datatable/datatable.component.html
+++ b/frontend/src/app/_elements/datatable/datatable.component.html
@@ -4,11 +4,6 @@
             <app-loading></app-loading>
         </div>
         <div *ngIf="tableData.loaded && tableData.data">
-            <div id="info" *ngIf="tableData.data.length > 0 && tableData.data[0].length > 0" class="d-flex flex-row justify-content-center align-items-center">
-                <div class="fs-5 mb-3">
-                    Tabela {{tableData.numCols}}x{{tableData.numRows}}
-                </div>
-            </div>
             <div style="border-radius: 5px; overflow-x: auto; overflow-y: hidden;">
                 <table *ngIf="tableData.data.length && tableData.data[0].length > 0" class="table table-responsive table-sm text-offwhite row-height">
                     <thead>
@@ -23,8 +18,19 @@
                     </tbody>
                 </table>
             </div>
-            <div class="footer-center" >
-                <div>+ {{tableData.numRows - 11}} redova...</div>
+            <div class="row" >
+                <div id="info" *ngIf="tableData.data.length > 0 && tableData.data[0].length > 0" class="d-flex flex-row justify-content-right align-items-right col-sm">
+                    <div class=" mb-3">
+                        Tabela {{tableData.numCols}} x {{tableData.numRows}}
+                    </div>
+                </div>
+                <div class="col-sm"></div>
+                <div class="col-sm"></div>
+                <div class="footer-center col-sm">Prikazano 10/{{tableData.numRows}} redova</div>
+                <div class="col-sm"></div>
+                <div class="col-sm"></div>
+                <div class="col-sm"></div>
+                
             </div>
         </div>
     </div>
diff --git a/frontend/src/app/_elements/folder/folder.component.ts b/frontend/src/app/_elements/folder/folder.component.ts
index d5a7a85c..b3c70d1d 100644
--- a/frontend/src/app/_elements/folder/folder.component.ts
+++ b/frontend/src/app/_elements/folder/folder.component.ts
@@ -91,6 +91,8 @@ export class FolderComponent implements AfterViewInit {
     this.newFileSelected = true;
     this.listView = false;
     this.displayFile();
+    if(this.type == FolderType.Dataset)
+      this.formDataset.clear();
   }
 
   selectFile(file?: FolderFile) {
@@ -101,6 +103,9 @@ export class FolderComponent implements AfterViewInit {
     this.selectedFileChanged.emit(this.selectedFile);
     this.selectTab(TabType.File);
     this.displayFile();
+
+    if(this.type == FolderType.Dataset)
+      this.formDataset.loadExisting();
   }
 
   createNewFile() {
diff --git a/frontend/src/app/_elements/form-dataset/form-dataset.component.css b/frontend/src/app/_elements/form-dataset/form-dataset.component.css
index 7c7eb0d3..953daa0c 100644
--- a/frontend/src/app/_elements/form-dataset/form-dataset.component.css
+++ b/frontend/src/app/_elements/form-dataset/form-dataset.component.css
@@ -4,12 +4,24 @@
     position: relative;
 }
 
-.bottomBar {
-    width: 50%;
+.topBar {
+    width: 100%;
     margin: 1rem;
     align-items: flex-start;
 }
 
+.topBar label{
+    font-size: 30px;
+}
+.topBar mat-form-field{
+    width: 250px;
+}
+
+.toptop{
+    margin-left: 1.5%; 
+    width: 50%;
+}
+
 .fileButton{
     margin-top: 10px;
 }
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 5c2b29ba..281f9c05 100644
--- a/frontend/src/app/_elements/form-dataset/form-dataset.component.html
+++ b/frontend/src/app/_elements/form-dataset/form-dataset.component.html
@@ -1,12 +1,12 @@
 <div class="folderBox" *ngIf="dataset">
 
     <div class="row" style="margin-right: 0;">
-        <div class="bottomBar">
-            <div class="row">
+        <div class="topBar">
+            <div class="row toptop">
                 <div class="col-sm mb-3">
                     <div class="fileButton">
-                        <button type="button" mat-raised-button (click)="fileInput.click()">Choose File</button>
-                        <label>{{filename}}</label>
+                        <button type="button" mat-raised-button (click)="fileInput.click()">Dodaj izvor podataka</button>
+                        
                     </div>
                 </div>
 
@@ -35,6 +35,13 @@
                         </mat-select>
                     </mat-form-field>
                 </div>
+                <div class="col-sm">
+                    
+                </div>
+            </div>
+            <div class="row" *ngIf="firstInput">
+                <label class=" mt-5">{{filename}}</label>
+
             </div>
         </div>
     </div>
diff --git a/frontend/src/app/_elements/form-dataset/form-dataset.component.ts b/frontend/src/app/_elements/form-dataset/form-dataset.component.ts
index 62afaa47..1eed2cdc 100644
--- a/frontend/src/app/_elements/form-dataset/form-dataset.component.ts
+++ b/frontend/src/app/_elements/form-dataset/form-dataset.component.ts
@@ -41,6 +41,10 @@ export class FormDatasetComponent {
 
   //@ViewChild('fileImportInput', { static: false }) fileImportInput: any; cemu je ovo sluzilo?
 
+  clear(){
+    this.tableData.hasInput = false;
+  }
+
   changeListener($event: any): void {
     this.files = $event.srcElement.files;
     if (this.files.length == 0 || this.files[0] == null) {
@@ -55,8 +59,12 @@ export class FormDatasetComponent {
     this.update();
   }
 
+  firstInput = false;
+
   update() {
 
+    this.firstInput = true
+
     if (this.files.length < 1)
       return;
 
@@ -82,6 +90,25 @@ export class FormDatasetComponent {
     this.dataset.name = this.filename.slice(0, this.filename.length - 4);
   }
 
+  loadExisting(){
+    this.firstInput = false;
+
+    this.tableData.hasInput = true;
+    this.tableData.loaded = false;
+
+    this.datasetsService.getDatasetFile(this.dataset.fileId).subscribe((file: string | undefined) => {
+      if (file) {
+        this.tableData.loaded = true;
+        this.tableData.numRows = this.dataset.rowCount;
+        this.tableData.numCols = this.dataset.columnInfo.length;
+        this.tableData.data = this.csv.csvToArray(file, (this.dataset.delimiter == "razmak") ? " " : (this.dataset.delimiter == "") ? "," : this.dataset.delimiter);
+
+      }
+    });
+
+    
+  }
+
   /*exportAsXLSX():void {
     this.excelService.exportAsExcelFile(this.data, 'sample');
   }*/
diff --git a/frontend/src/app/_services/datasets.service.ts b/frontend/src/app/_services/datasets.service.ts
index d3f646cb..2211996f 100644
--- a/frontend/src/app/_services/datasets.service.ts
+++ b/frontend/src/app/_services/datasets.service.ts
@@ -25,7 +25,7 @@ export class DatasetsService {
   }
 
   getDatasetFile(fileId: any): any {
-    return this.http.get(`${Configuration.settings.apiURL}/file/csvRead/${fileId}`, { headers: this.authService.authHeader(), responseType: 'text' });
+    return this.http.get(`${Configuration.settings.apiURL}/file/csvRead/${fileId}/-1/11`, { headers: this.authService.authHeader(), responseType: 'text' });
   }
   getDatasetFilePartial(fileId: any, startRow: number, rowNum: number): Observable<any> {
     return this.http.get(`${Configuration.settings.apiURL}/file/csvRead/${fileId}/${startRow}/${rowNum}`, { headers: this.authService.authHeader(), responseType: 'text' });
-- 
cgit v1.2.3