Polypheny-UI/src/app/components/data-view/data-carousel/data-carousel.component.html at 42345d8ce56d591ac0148fb5cd97841a2d7cff11 · polypheny/Polypheny-UI · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<app-toast></app-toast>
<div *ngIf="resultSet" id="carousel-wrapper">
  <button *ngIf="!showInsert && config.update" (click)="showInsert = true" class="btn btn-primary btn-circle" id="insert-btn"><i class="fa fa-plus"></i></button>
  <carousel [noWrap]="true" [interval]="0" [showIndicators]="false" [activeSlide]="currentSlide" [isAnimated]="true">
    <div class="navigator-wrapper mb-2" *ngIf="resultSet.data && resultSet.data.length > 0 && editing !== currentSlide && !showInsert">
      <button class="btn btn-light btn-sm" [disabled]="loadingPage || (currentSlide === 0 && resultSet.currentPage === 1)" (click)="changeSlide(-1)">
        <i class="cui-chevron-left"></i>
      </button>
      <button class="btn btn-light btn-sm" [disabled]="loadingPage || (currentSlide === resultSet.data.length - 1 && resultSet.currentPage === resultSet.highestPage)" (click)="changeSlide(1)">
        <i class="cui-chevron-right"></i>
      </button>
    </div>
    <div class="navigator-wrapper mb-2" *ngIf="config.update && resultSet.data && resultSet.data.length > 0 && !showInsert">
      <button *ngIf="editing !== currentSlide" class="btn btn-light btn-sm" (click)="triggerEditing(currentSlide)"><i class="fa fa-pencil"></i></button>
      <button *ngIf="editing === currentSlide" class="btn btn-light btn-sm" (click)="editing = -1"><i class="fa fa-close"></i></button>
      <button class="btn btn-light btn-sm btn-del" (click)="deleteRow(resultSet.data[currentSlide], currentSlide)" (mouseleave)="confirm = -1">
        <i [ngClass]="{ 'cui-trash': currentSlide!==confirm, 'fa': currentSlide===confirm, 'fa-warning': currentSlide===confirm}"></i>
      </button>
    </div>
    <div class="navigator-wrapper mb-2" *ngIf="showInsert">
      <h5 class="m-0">Insert data</h5>
    </div>
    <div style="text-align:center;" *ngIf="resultSet.data && resultSet.data.length == 0 && !showInsert">
      <span class="text-danger">(no data to show)</span>
    </div>

    <ng-container *ngIf="!showInsert">
      <slide *ngFor="let d1 of [resultSet.data[currentSlide]]">

        <div *ngIf="resultSet.data?.length > 0" [ngClass]="{'editing-wrapper': editing === currentSlide}" (dblclick)="triggerEditing(currentSlide)">
          <!-- load MM types first -->
          <ng-container *ngFor="let h of resultSet.header; let j = index">
            <ng-container *ngIf="showFirst(h.dataType)" [ngSwitch]="h.dataType">
              <ng-container *ngIf="d1 && d1[j] && currentSlide !== editing">
                <img class="carousel-multimedia" *ngSwitchCase="'IMAGE'" [src]="getFileLink(d1[j])"/>
                <app-media *ngSwitchCase="'VIDEO'" [src]="getFileLink(d1[j])" [type]="h.dataType" id="video"></app-media>
                <app-media *ngSwitchCase="'SOUND'" [src]="getFileLink(d1[j])" [type]="h.dataType"></app-media>
              </ng-container>
              <p *ngIf="currentSlide === editing">
                <app-input [header]="h" [showLabel]="true" [value]="updateValues.get(h.name)" (valueChange)="newUpdateValue(h.name, $event)" (enter)="updateRow()" [attr.data-before]="d1[j]" [attr.data-col]="h.name"></app-input>
              </p>
            </ng-container>
          </ng-container>

          <!-- then load all non-MM data -->
          <div style="text-align: center">
            <ng-container *ngFor="let h of resultSet.header; let j = index">
              <ng-container *ngIf="!showFirst(h.dataType)">
                <p *ngIf="d1 && d1[j] && currentSlide !== editing" class="mt-3" [ngSwitch]="h.dataType">
                  <ng-container *ngSwitchCase="'FILE'">
                    <span class="key">
                      {{h.name}}
                    </span>
                    <span class="val">: <a class="download" [href]="getFileLink(d1[j])" download><span class="cui-cloud-download"></span></a></span>
                  </ng-container>
                  <ng-container *ngSwitchDefault>
                    <span class="key">{{h.name}}: </span>
                    <app-expandable-text [text]="d1[j]"></app-expandable-text>
                  </ng-container>
                </p>
                <p *ngIf="currentSlide === editing">
                  <app-input [header]="h" [showLabel]="true" [value]="updateValues.get(h.name)" (valueChange)="newUpdateValue(h.name, $event)" (enter)="updateRow()" [attr.data-before]="d1[j]" [attr.data-col]="h.name"></app-input>
                </p>
              </ng-container>
            </ng-container>
          </div>

          <p *ngIf="editing === currentSlide" class="space-between">
            <button class="btn btn-light btn-sm" (click)="editing = -1">Cancel</button>
            <button class="btn btn-primary btn-sm" (click)="updateRow()">Save</button>
          </p>

        </div>

      </slide>
    </ng-container>

    <div *ngIf="showInsert" id="insert-wrapper">
      <p *ngFor="let h of resultSet.header">
        <app-input [header]="h" [showLabel]="true" [value]="insertValues.get(h.name)" (valueChange)="inputChange(h.name, $event)"
                   (enter)="insertRow()"></app-input>
      </p>
      <p class="space-between">
        <button class="btn btn-light btn-sm" (click)="showInsert = false">cancel</button>
        <button class="btn btn-primary btn-sm" (click)="insertRow()">save</button>
      </p>
    </div>

  </carousel>
</div>