diff options
Diffstat (limited to 'frontend/src/app/_elements/form-dataset')
3 files changed, 67 insertions, 103 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 da31cfcb..7c7eb0d3 100644 --- a/frontend/src/app/_elements/form-dataset/form-dataset.component.css +++ b/frontend/src/app/_elements/form-dataset/form-dataset.component.css @@ -4,26 +4,23 @@ position: relative; } +.bottomBar { + width: 50%; + margin: 1rem; + align-items: flex-start; +} + +.fileButton{ + margin-top: 10px; +} + .file-container { border: 4px solid transparent; position: relative; margin-left: 3%; - margin-top: 3rem; width: 94%; - min-height: 300px; - height: 75%; -} - -.fileButton { - position: absolute; - margin-top: -3rem; - display: flex; - flex-direction: row; - align-items: center; -} - -.fileButton label { - margin-left: 10px; + min-height: 400px; + height: 95%; } .dottedClass { @@ -31,6 +28,13 @@ border-radius: 25px; } +.icon-display { + position: absolute; + top: 45%; + left: 50%; + transform: translate(-50%, -50%) scale(4); +} + .hidden { visibility: hidden; } @@ -42,28 +46,7 @@ opacity: 0; } -.file input { - border-radius: 4px; - margin-top: -15px; - width: 100%; - height: 100%; -} - -.icon-display { - position: absolute; - top: 45%; - left: 50%; - transform: translate(-50%, -50%) scale(4); -} - -.bottomBar { - width: 50%; - margin: 1rem; - align-items: flex-start; -} - -#bottomButton { - background-color: var(--ns-bg-dark-100); - width: 10%; - height: 65%; +.file-container input{ + border-radius: 5px; + left: 0%; }
\ No newline at end of file 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 7bbe0921..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,74 +1,58 @@ -<div class="folderBox"> - - <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, .xlsx, .json"> - - - <div class="mt-5 datatable"> - <app-datatable [tableData]="tableData"></app-datatable> - </div> - - - </div> - +<div class="folderBox" *ngIf="dataset"> + + <div class="row"> + <div class="bottomBar"> + <div class="row"> + <div class="col-sm mb-3"> + <div class="fileButton"> + <button type="button" mat-raised-button (click)="fileInput.click()">Choose File</button> + <label>{{filename}}</label> + </div> + </div> - - + <div class="col-sm"> + <div role="group"> + <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"> - <div class="bottomBar"> - <div class="row"> - <div class="col-sm"> - <div role="group"> - <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" > - <!--[formControl]="nameFormControl"--> - <mat-error *ngIf="nameFormControl.hasError('required')"> - Naziv je <strong>obavezan</strong> - </mat-error> - </mat-form-field> + <mat-error *ngIf="nameFormControl.hasError('required')"> + Naziv je <strong>obavezan</strong> + </mat-error> + </mat-form-field> + </div> </div> </div> + <div class="col-sm"> + <mat-form-field appearance="fill"> + <mat-label>Delimiter</mat-label> + <mat-select id="delimiterOptions" [(ngModel)]="dataset.delimiter" (change)="update()" value=","> + <mat-option *ngFor="let option of delimiterOptions" [value]="option"> + {{ option }} + </mat-option> + </mat-select> + </mat-form-field> + </div> </div> - <div class="col-sm mb-3"> + </div> + </div> - <!--<input id="fileInput" class="form-control btn-lg" type="file" class="upload" (change)="changeListener($event)" accept=".csv"> - --> - </div> - <div class="col-sm"> + <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> - <mat-form-field appearance="fill"> - <mat-label>Delimiter</mat-label> - <mat-select id="delimiterOptions" [(ngModel)]="dataset.delimiter" (change)="update()" value=","> - <mat-option *ngFor="let option of delimiterOptions" [value]="option"> - {{ option }} - </mat-option> - </mat-select> - </mat-form-field> + <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> - <div class="btn-group" role="group" aria-label="Button group with nested dropdown"> + </div> </div> - - <!-- - <div class="d-flex flex-row align-items-center justify-content-center w-100 my-2"> - <button (click)="uploadDataset()" class="btn btn-lg col-4" style="background-color:#003459; color:white;">Dodaj izvor podataka</button> - </div> ---> </div>
\ No newline at end of file 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 c7efe098..5e088e46 100644 --- a/frontend/src/app/_elements/form-dataset/form-dataset.component.ts +++ b/frontend/src/app/_elements/form-dataset/form-dataset.component.ts @@ -65,16 +65,13 @@ export class FormDatasetComponent { if (typeof fileReader.result === 'string') { const result = this.csv.csvToArray(fileReader.result, (this.dataset.delimiter == "razmak") ? " " : (this.dataset.delimiter == "novi red") ? "\t" : this.dataset.delimiter) - if (this.dataset.hasHeader) - this.csvRecords = result.splice(0, 11); - else - this.csvRecords = result.splice(0, 10); + + this.csvRecords = result.splice(0, 11); this.colsNumber = result[0].length; this.rowsNumber = result.length; - this.tableData.data = this.csvRecords - this.tableData.hasHeader = this.dataset.hasHeader; + this.tableData.data = this.csvRecords; this.tableData.loaded = true; this.tableData.numCols = this.colsNumber; this.tableData.numRows = this.rowsNumber; |