Merge branch 'redesign' into 'master'

merge

See merge request igrannonica/neuronstellar!29

4 files changed, 154 insertions, 0 deletions

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..353a094c
--- /dev/null
+++ b/frontend/src/app/_elements/playlist/playlist.component.css
@@ -0,0 +1,61 @@
+.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: 25rem;
+    margin-bottom: 20px;
+}
+
+.ns-card {
+    position: absolute;
+    width: 60%;
+    height: 100%;
+    left: 0;
+    right: 0;
+    margin: auto;
+    transition: transform 0.4s ease;
+    cursor: pointer;
+}
+
+.ns-card:hover {
+    opacity: 1 !important;
+}
+
+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.5;
+    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.5;
+    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..b82de163
--- /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 ns-bg-dark-100 ns-border-primary rounded" for="item-1" id="view-item-1">
+            <app-datatable [tableData]="tableDatas[0]"></app-datatable>
+        </label>
+        <label class="ns-card ns-bg-dark-100 ns-border-primary rounded" for="item-2" id="view-item-2">
+            <app-datatable [tableData]="tableDatas[1]"></app-datatable>
+        </label>
+        <label class="ns-card ns-bg-dark-100 ns-border-primary rounded" for="item-3" id="view-item-3">
+            <app-datatable [tableData]="tableDatas[2]"></app-datatable>
+        </label>
+    </div>
+    <div class="ns-infobox text-offwhite">
+        <h2>{{datasets[getIndex(selectedId)].name}}</h2>
+    </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..7f476178
--- /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.toString() == "") ? "," : dataset.delimiter);
+            this.tableDatas!.push(tableData);
+          }
+        });
+      }
+    });
+
+    //console.log(this.tableDatas);
+  }
+}