circular-heatmap.component.html

<div id="cont" class="container-fluid text-center">
  <div class="row">
    <div class="col-md-3"></div>
    <div class="col-md-6">
      <div class="overlay-details" [hidden]="!showOverlay">
        <div *ngIf="showActivityDetails; then activityTrue; else activityFalse"></div>
        <ng-template #activityTrue>
          <div class="overlay-modal">
            <app-activity-description
              [activity]="showActivityDetails"
              [iconName]="dataStore?.meta?.getIcon(showActivityDetails?.category || '') || ''"
              [showCloseButton]="true"
              (activityClicked)="onDependencyClicked($event)"
              (closeRequested)="closeOverlay()">
            </app-activity-description>
          </div>
        </ng-template>
        <ng-template #activityFalse>
          <div class="overlay-modal">
            <div class="overlay-header">
              <button class="overlay-close" (click)="closeOverlay()">
                <mat-icon class="white-icon">close</mat-icon>
              </button>
              <h2>Nothing to show</h2>
            </div>
          </div>
        </ng-template>
      </div>
      <div class="heatmapClass">
        <div id="chart" class="heatmapChart"></div>
        <div class="filter-container">
          <button class="filter-toggle" mat-button color="primary" (click)="toggleFilters()">
            <mat-icon [class.hidden]="!showFilters">keyboard_arrow_up</mat-icon>
            <mat-icon [class.hidden]="showFilters">filter_alt</mat-icon>
          </button>
          <div class="team-filter" [class.hidden]="!showFilters">
            <mat-form-field class="team-chip-list">
              <mat-label
                >{{ settings.getTeamLabel() }} {{ settings.getGroupLabel() }} Filter</mat-label
              >
              <mat-chip-list selectable>
                <mat-chip
                  #chip="matChip"
                  *ngFor="let group of filtersTeamGroups | keyvalue : unsorted"
                  (click)="toggleTeamGroupFilter(chip)"
                  [selected]="filtersTeamGroups[group.key]">
                  {{ group.key }}
                </mat-chip>
              </mat-chip-list>
            </mat-form-field>
            <mat-form-field>
              <mat-label>{{ settings.getTeamLabel() }} Filter</mat-label>
              <mat-chip-list selectable multiple>
                <mat-chip
                  #chip="matChip"
                  *ngFor="let team of filtersTeams | keyvalue"
                  (click)="toggleTeamFilter(chip)"
                  [value]="team.key"
                  [selected]="team.value">
                  {{ team.key }}
                </mat-chip>
              </mat-chip-list>
            </mat-form-field>
          </div>
        </div>
        <mat-card class="activity-card" *ngIf="showActivityCard">
          <mat-card-title-group>
            <mat-card-title>{{ showActivityCard.dimension }}</mat-card-title>
            <mat-card-subtitle>Level {{ showActivityCard.level }}</mat-card-subtitle>
          </mat-card-title-group>
          <mat-card-content
            *ngFor="let activity of showActivityCard.activities; index as activityIndex">
            <mat-expansion-panel
              (opened)="onPanelOpened(activity)"
              (closed)="onPanelClosed(activity)">
              <mat-expansion-panel-header>
                <mat-panel-title>
                  <span class="title-text">
                    {{ activity['name'] }}
                  </span>
                  <button
                    mat-icon-button
                    class="info-button"
                    matTooltip="Open activity description"
                    matTooltipClass="compact-tooltip"
                    (click)="openActivityDetails(activity['uuid']); $event.stopPropagation()">
                    <mat-icon class="info-icon">info</mat-icon>
                  </button>
                </mat-panel-title>
              </mat-expansion-panel-header>
              <ng-template matExpansionPanelContent>
                <ul class="team-list">
                  <ng-container *ngFor="let team of filtersTeams | keyvalue">
                    <li *ngIf="team.value || !hasTeamsFilter">
                      <label class="team-label"> {{ team.key }}: </label>
                      <app-progress-slider
                        [DBG_name]="activity['name']"
                        [steps]="progressStates"
                        [state]="getTeamProgressState(activity['uuid'], team.key)"
                        [originalState]="getBackedupTeamProgressState(activity['uuid'], team.key)"
                        (progressChange)="
                          onProgressChange(activity['uuid'], team.key, $event)
                        "></app-progress-slider>
                    </li>
                  </ng-container>
                </ul>
                <div class="smaller-italics">
                  <span>* Has been modified</span><br />
                  <span>** Has been modified to less complete stage than before</span>
                </div>
              </ng-template>
            </mat-expansion-panel>
          </mat-card-content>
        </mat-card>
        <div class="footer-buttons">
          <button
            class="normal-button"
            mat-raised-button
            class="downloadButtonClass"
            (click)="exportTeamProgress()">
            Download {{ settings.getTeamLabel() | lowercase }} progress
          </button>
          <button
            class="normal-button"
            mat-raised-button
            class="resetButtonClass"
            (click)="deleteLocalTeamsProgress()">
            Delete {{ settings.getTeamLabel() | lowercase }} progress
          </button>
        </div>
      </div>
    </div>
    <div class="col-md-3"></div>
  </div>
</div>