diff options
Diffstat (limited to 'frontend/src/app/_elements/form-dataset')
3 files changed, 76 insertions, 12 deletions
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 6b3e2bed..56eb3cef 100644 --- a/frontend/src/app/_elements/form-dataset/form-dataset.component.css +++ b/frontend/src/app/_elements/form-dataset/form-dataset.component.css @@ -1,19 +1,62 @@ .folderBox { width: 100%; - height: 100%; + height: 90%; position: relative; } +.file-container{ + border: 4px solid transparent; + position: relative; + margin-left: 3%; + margin-top: 3rem; + width: 94%; + 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; +} + +.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 { position: absolute; - top: 50%; + top: 45%; left: 50%; transform: translate(-50%, -50%) scale(4); } .bottomBar { position: absolute; - bottom: 0%; + bottom: -6%; left: 5%; } 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 50a33583..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,12 +1,27 @@ <div class="folderBox"> - <mat-icon class="icon-display">upload</mat-icon> - <!-- - - <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> + + </div> - --> + + + + <div class="bottomBar"> <div class="row"> @@ -27,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(); } |