Sredjen upload csv-a #116

6 files changed, 62 insertions, 32 deletions

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;