From bcd4852ea7964e15f4ad7d0061522da42d866d37 Mon Sep 17 00:00:00 2001
From: Danijel Anđelković <adanijel99@gmail.com>
Date: Tue, 19 Apr 2022 02:28:18 +0200
Subject: Dodao komponentu za prikaz dataseta sa tabelama. Promenio scrollbar i
 home stranicu. Zapoceo trening stranicu.

---
 .../app/_elements/playlist/playlist.component.css  | 57 ++++++++++++++++++++++
 .../app/_elements/playlist/playlist.component.html | 19 ++++++++
 .../_elements/playlist/playlist.component.spec.ts  | 25 ++++++++++
 .../app/_elements/playlist/playlist.component.ts   | 49 +++++++++++++++++++
 4 files changed, 150 insertions(+)
 create mode 100644 frontend/src/app/_elements/playlist/playlist.component.css
 create mode 100644 frontend/src/app/_elements/playlist/playlist.component.html
 create mode 100644 frontend/src/app/_elements/playlist/playlist.component.spec.ts
 create mode 100644 frontend/src/app/_elements/playlist/playlist.component.ts

(limited to 'frontend/src/app/_elements/playlist')

diff --git a/frontend/src/app/_elements/playlist/playlist.component.css b/frontend/src/app/_elements/playlist/playlist.component.css
new file mode 100644
index 00000000..7ce320d9
--- /dev/null
+++ b/frontend/src/app/_elements/playlist/playlist.component.css
@@ -0,0 +1,57 @@
+.ns-wrapper {
+    width: 100%;
+    max-width: 800px;
+    max-height: 600px;
+    height: 100%;
+    transform-style: preserve-3d;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+}
+
+.ns-cards {
+    position: relative;
+    width: 300%;
+    height: 36rem;
+    margin-bottom: 20px;
+}
+
+.ns-card {
+    position: absolute;
+    width: 60%;
+    height: 100%;
+    left: 0;
+    right: 0;
+    margin: auto;
+    transition: transform 0.4s ease;
+    cursor: pointer;
+}
+
+input[type=radio] {
+    display: none;
+}
+
+#item-1:checked~.ns-cards #view-item-3,
+#item-2:checked~.ns-cards #view-item-1,
+#item-3:checked~.ns-cards #view-item-2 {
+    transform: translatex(-40%) scale(0.8);
+    opacity: 0.4;
+    z-index: 0;
+}
+
+#item-1:checked~.ns-cards #view-item-2,
+#item-2:checked~.ns-cards #view-item-3,
+#item-3:checked~.ns-cards #view-item-1 {
+    transform: translatex(40%) scale(0.8);
+    opacity: 0.4;
+    z-index: 0;
+}
+
+#item-1:checked~.ns-cards #view-item-1,
+#item-2:checked~.ns-cards #view-item-2,
+#item-3:checked~.ns-cards #view-item-3 {
+    transform: translatex(0) scale(1);
+    opacity: 1;
+    z-index: 1;
+}
\ No newline at end of file
diff --git a/frontend/src/app/_elements/playlist/playlist.component.html b/frontend/src/app/_elements/playlist/playlist.component.html
new file mode 100644
index 00000000..fdb426ed
--- /dev/null
+++ b/frontend/src/app/_elements/playlist/playlist.component.html
@@ -0,0 +1,19 @@
+<div class="ns-wrapper" *ngIf="tableDatas && tableDatas.length==3">
+    <input type="radio" name="slider" id="item-1" value="0" [(ngModel)]="selectedId">
+    <input type="radio" name="slider" id="item-2" value="1" [(ngModel)]="selectedId">
+    <input type="radio" name="slider" id="item-3" value="2" [(ngModel)]="selectedId">
+    <div class="ns-cards">
+        <label class="ns-card bg-light overflow-auto" for="item-1" id="view-item-1">
+            <app-datatable [tableData]="tableDatas[0]"></app-datatable>
+        </label>
+        <label class="ns-card bg-light overflow-auto" for="item-2" id="view-item-2">
+            <app-datatable [tableData]="tableDatas[1]"></app-datatable>
+        </label>
+        <label class="ns-card bg-light overflow-auto" for="item-3" id="view-item-3">
+            <app-datatable [tableData]="tableDatas[2]"></app-datatable>
+        </label>
+    </div>
+    <div class="ns-infobox">
+        <app-item-dataset [dataset]="datasets[getIndex(selectedId)]"></app-item-dataset>
+    </div>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/playlist/playlist.component.spec.ts b/frontend/src/app/_elements/playlist/playlist.component.spec.ts
new file mode 100644
index 00000000..0afe8041
--- /dev/null
+++ b/frontend/src/app/_elements/playlist/playlist.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PlaylistComponent } from './playlist.component';
+
+describe('PlaylistComponent', () => {
+  let component: PlaylistComponent;
+  let fixture: ComponentFixture<PlaylistComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PlaylistComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PlaylistComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_elements/playlist/playlist.component.ts b/frontend/src/app/_elements/playlist/playlist.component.ts
new file mode 100644
index 00000000..74527b39
--- /dev/null
+++ b/frontend/src/app/_elements/playlist/playlist.component.ts
@@ -0,0 +1,49 @@
+import { Component, Input, OnInit } from '@angular/core';
+import Dataset from 'src/app/_data/Dataset';
+import { TableData } from 'src/app/_elements/datatable/datatable.component';
+import { CsvParseService } from 'src/app/_services/csv-parse.service';
+import { DatasetsService } from 'src/app/_services/datasets.service';
+
+@Component({
+  selector: 'app-playlist',
+  templateUrl: './playlist.component.html',
+  styleUrls: ['./playlist.component.css']
+})
+export class PlaylistComponent implements OnInit {
+
+  selectedId: string = "0";
+
+  @Input() datasets!: Dataset[];
+
+  tableDatas?: TableData[];
+
+  constructor(private datasetService: DatasetsService, private csv: CsvParseService) {
+
+  }
+
+  getIndex(str: string) {
+    return parseInt(str);
+  }
+
+  ngOnInit(): void {
+    this.tableDatas = [];
+
+    this.datasets.forEach((dataset, index) => {
+      if (index < 3) {
+        this.datasetService.getDatasetFile(dataset.fileId).subscribe((file: string | undefined) => {
+          if (file) {
+            const tableData = new TableData();
+            tableData.hasInput = true;
+            tableData.loaded = true;
+            tableData.numRows = dataset.rowCount;
+            tableData.numCols = dataset.columnInfo.length;
+            tableData.data = this.csv.csvToArray(file, (dataset.delimiter == "razmak") ? " " : (dataset.delimiter == "") ? "," : dataset.delimiter);
+            this.tableDatas!.push(tableData);
+          }
+        });
+      }
+    });
+
+    console.log(this.tableDatas);
+  }
+}
-- 
cgit v1.2.3