federated-storage/frontend/src/app/component/images/images.component.html

<h2>Available Images</h2>

<div style="font-weight: bolder; font-size: 20px">
  <span style="width: 22.5em; display: inline-block; margin-left: 1.15em">Name</span>
  <span style="width: 22.5em; display: inline-block">Date</span>
  <span style="width: 22.5em; display: inline-block">File available | valid</span>
</div>
<mat-expansion-panel
  *ngFor="let image of filterOnlyNewestImageVersion() | slice:paginationGetStart():paginationGetEnd(); let i = index"
  (opened)="openImageExpansion[i][0] = true; loadImage(getImageIndex(image), image.identifier)"
  (closed)="openImageExpansion[i][0] = false;"
  [expanded]="openImageExpansion[i][0]"
>
  <!--  (opened)="loadImage(getImageIndex(image), image.filename.split('.')[0])"-->
  <mat-expansion-panel-header (click)="$event.stopPropagation()">
    <h4 style="width: 25em"
    >{{image.name}}</h4>
    <h4 style="width: 25em"
    >{{image.datetime}}</h4>
    <h4 style="width: 25em; margin-left: 6em;" *ngIf="image.available !== undefined || image.valid !== undefined;
    else loadingValidity">
      {{image.available ? '✓' : 'X' }} | {{image.valid ? '✓' : 'X' }}
    </h4>
    <ng-template #loadingValidity>
      <h4 style="width: 25em; margin-left: 7em;">...</h4>
    </ng-template>
    <span style="float: right; margin-left: auto; margin-right: 1em;">
      <button mat-raised-button color="warn"
              (click)="deleteImage(image); $event.stopPropagation()">
        Delete
      </button>
    </span>
  </mat-expansion-panel-header>

  <mat-divider style="
  margin-top: 1em;
  margin-bottom: 1em;
  opacity: 20%;"></mat-divider>

  <ng-template matExpansionPanelContent>

    <mat-grid-list cols="4" rowHeight="22em" style="width: 100%; margin: auto">

      <mat-grid-tile style="justify-content: left!important;" colspan="1">
        <div style="width: 20em; height: 20em; border: solid; margin-bottom: 1em; display: flex">
          <img *ngIf="image.image_b64, let b64; else loadingImage"
               [src]="b64"
               style="width: 100%; margin: auto" [alt]="image.filename"/>
          <ng-template #loadingImage>
            <mat-spinner style="margin: auto;"></mat-spinner>
          </ng-template>
        </div>
      </mat-grid-tile>

      <mat-grid-tile colspan="3">
        <div style="display: block; width: 100%">
<!--          <p *ngIf="image.version">version: {{image.version}}</p>-->
          <p *ngIf="image.filename">filename: {{image.filename}}</p>
          <p *ngIf="image.latitude">latitude: {{image.latitude}}</p>
          <p *ngIf="image.longitude">longitude: {{image.longitude}}</p>
          <p *ngIf="image.place_ident">place_ident: {{image.place_ident}}</p>
          <p *ngIf="image.seq_id">seq_id: {{image.seq_id}}</p>
          <p *ngIf="image.frame_num">frame_num: {{image.frame_num}}</p>
          <p *ngIf="image.seq_num_frames">seq_num_frames: {{image.seq_num_frames}}</p>
          <p *ngIf="image.device_id">device_id: {{image.device_id}}</p>
        </div>
      </mat-grid-tile>
    </mat-grid-list>

    <app-file-uploader [mode]="'put'"
                       [filename]="image.filename.split('.')[0]"
                       [meta]=image
                       (reload)="reload.emit(); checkValidity()"
    ></app-file-uploader>
    <!--    (reload)="image.image_b64 = undefined; this.loadImage(getImageIndex(image), image.identifier)"-->

    <ng-container *ngIf="getRelatedImageMeta(image); let relatedImages">
      <mat-expansion-panel *ngIf="relatedImages.length > 0" [expanded]="openImageExpansion[i][1]">
        <mat-expansion-panel-header>
          Previous versions
        </mat-expansion-panel-header>
        <ng-template matExpansionPanelContent>

          <mat-expansion-panel *ngFor="let relImage of relatedImages.slice().reverse(); let j = index"
                               (opened)="loadImage(-1, relImage.identifier, relImage);
                               openImageExpansion[i][2+j]=true"
                               (closed)="openImageExpansion[i][2+j] = false"
                               [expanded]="openImageExpansion[i][2+j]"
          >
            <!--            <mat-divider></mat-divider>-->
            <!--            <p *ngIf="imageMeta.version">version: {{imageMeta.version}}</p>-->
            <!--            <p *ngIf="imageMeta.name">name: {{imageMeta.name}}</p>-->
            <!--            <p *ngIf="imageMeta.tag">tag: {{imageMeta.tag}}</p>-->
            <!--            <p *ngIf="imageMeta.filename">filename: {{imageMeta.filename}}</p>-->
            <!--            <p *ngIf="imageMeta.latitude">latitude: {{imageMeta.latitude}}</p>-->
            <!--            <p *ngIf="imageMeta.longitude">longitude: {{imageMeta.longitude}}</p>-->
            <mat-expansion-panel-header>
              <p>version: {{relImage.version ? relImage.version : 0}}</p>
            </mat-expansion-panel-header>

            <mat-grid-list cols="4" rowHeight="22em" style="width: 100%; margin: auto">

              <mat-grid-tile style="justify-content: left!important;" colspan="1">
                <div style="width: 20em; height: 20em; border: solid; margin-bottom: 1em; display: flex">
                  <img *ngIf="relImage.image_b64, let subB64; else loadingSubImage"
                       [src]="subB64"
                       style="width: 100%; margin: auto" [alt]="image.filename"/>
                  <ng-template #loadingSubImage>
                    <mat-spinner style="margin: auto;"></mat-spinner>
                  </ng-template>
                </div>
              </mat-grid-tile>

              <mat-grid-tile colspan="3">
                <div style="display: block; width: 100%">
                  <p *ngIf="relImage.filename">filename: {{relImage.filename}}</p>
                  <p *ngIf="relImage.tag">tag: {{relImage.tag}}</p>
                  <p *ngIf="relImage.latitude">latitude: {{relImage.latitude}}</p>
                  <p *ngIf="relImage.longitude">longitude: {{relImage.longitude}}</p>
                  <p *ngIf="relImage.datetime">datetime: {{relImage.datetime}}</p>
                  <p *ngIf="image.place_ident">place_ident: {{image.place_ident}}</p>
                  <p *ngIf="image.seq_id">seq_id: {{image.seq_id}}</p>
                  <p *ngIf="image.frame_num">frame_num: {{image.frame_num}}</p>
                  <p *ngIf="image.seq_num_frames">seq_num_frames: {{image.seq_num_frames}}</p>
                  <p *ngIf="image.device_id">device_id: {{image.device_id}}</p>
                </div>
              </mat-grid-tile>
            </mat-grid-list>
          </mat-expansion-panel>

        </ng-template>
      </mat-expansion-panel>
    </ng-container>

  </ng-template>
</mat-expansion-panel>

<mat-paginator *ngIf="filterOnlyNewestImageVersion().length > 0"
               [length]="filterOnlyNewestImageVersion().length"
               [pageSize]="pageSizeOptions[0]"
               [pageSizeOptions]="pageSizeOptions"
               (page)="lastPageEvent = $event; openImageExpansion = ALL_CLOSED_DEFAULT; checkValidity()"
               showFirstLastButtons
               hidePageSize
></mat-paginator>

<mat-divider style="margin-top: 2em"></mat-divider>
<h3>Upload New Image</h3>
<app-file-uploader [mode]="'post'" (reload)="reload.emit(); checkValidity()"></app-file-uploader>
<mat-divider style="margin-top: 2em"></mat-divider>