daily-summary.component.html

<div class="page-wrapper">
  <div style="text-align: center;">
    <a aria-label="Work View"
       class="back-btn"
       mat-button=""
       routerLink="/work-view">
      <mat-icon>chevron_left</mat-icon>
      Wait I forgot something!
      <!--<mat-icon>playlist_play</mat-icon>-->
    </a>
  </div>

  <h1 class="done-headline mat-headline">Take a moment to <i class="TODO-animate">celebrate!</i></h1>
  <div class="daily-summary-summary">
    <div class="summary-point">
      <mat-icon>check</mat-icon>
      <div class="summary-text">Tasks completed:
        <div class="summary-val">
          <span [innerHtml]="(doneTasks$|async)?.length"></span>/<span
          [innerHtml]="(todaysTasks$|async)?.length"></span>
        </div>
      </div>
    </div>
    <div class="summary-point"
         title="Total time spent today. Archived tasks not included.">
      <mat-icon>timer</mat-icon>
      <div class="summary-text">Total time spent today:
        <div [innerHtml]="workingToday$|async|msToString"
             class="summary-val"></div>
      </div>
    </div>
    <div class="summary-point"
         title="Time estimated for tasks worked on today minus the time already spent with them on other days.">
      <mat-icon>timer</mat-icon>
      <div class="summary-text">Time estimated:
        <div [innerHtml]="estimatedOnTasksWorkedOnToday$|async|msToString"
             class="summary-val"></div>
      </div>
    </div>
  </div>

  <mat-tab-group (selectedIndexChange)="onTabIndexChange($event)"
                 [selectedIndex]="selectedTabIndex"
                 dynamicHeight>
    <mat-tab label="Note">
      <section class="tab-inner">
        <p>This is meant to be a takeaway to be even more productive and happy tomorrow. E.g.: What did you learn today?
          What do you want to do better/smarter tomorrow? What do you want to achieve and why?</p>
        <p>Think a second and reflect on the day.</p>

        <textarea [(ngModel)]="tomorrowsNote"
                  class="tomorrows-note bg-standard mat-elevation-z3"
                  rows="5"></textarea>
      </section>
    </mat-tab>

    <mat-tab label="Today">
      <section class="tab-inner">
        <div class="table-wrapper mat-elevation-z3">
          <table mat-table
                 [dataSource]="todaysTasksFlat$|async"
                 class="mat-elevation-z2 summary-table">
            <ng-container matColumnDef="title">
              <th mat-header-cell
                  *matHeaderCellDef> Task
              </th>
              <td mat-cell
                  *matCellDef="let task">
                <div class="task-title"
                     [class.isSubTask]="task.parentId"
                     [class.isDone]="task.isDone">
                  <span *ngIf="task.parentId">–</span> {{task.title}}
                </div>
              </td>
            </ng-container>

            <ng-container matColumnDef="timeSpentToday">
              <th mat-header-cell
                  *matHeaderCellDef> Spent Today
              </th>
              <td mat-cell
                  *matCellDef="let task"> {{task.timeSpentOnDay[todayStr]|msToClockString}}
              </td>
            </ng-container>

            <ng-container matColumnDef="timeSpentTotal">
              <th mat-header-cell
                  *matHeaderCellDef> Spent Total
              </th>
              <td mat-cell
                  *matCellDef="let task">
                {{task.timeSpent|msToClockString}}
              </td>
            </ng-container>

            <ng-container matColumnDef="timeEstimate">
              <th mat-header-cell
                  *matHeaderCellDef> Estimate
              </th>
              <td mat-cell
                  *matCellDef="let task">
                {{task.timeEstimate|msToClockString}}
              </td>
            </ng-container>

            <ng-container matColumnDef="done">
              <th mat-header-cell
                  *matHeaderCellDef>
              </th>
              <td mat-cell
                  *matCellDef="let task">
                <mat-icon *ngIf="task.isDone">check
                </mat-icon>
              </td>
            </ng-container>

            <tr mat-header-row
                *matHeaderRowDef="['title','timeSpentToday', 'timeSpentTotal', 'timeEstimate', 'done']"></tr>
            <tr mat-row
                *matRowDef="let row; columns: ['title','timeSpentToday', 'timeSpentToday','timeEstimate', 'done']"></tr>
          </table>
        </div>
        <div style="text-align: center; margin-top: 8px; margin-bottom: 16px;">
          <button (click)="showExportModal()"
                  mat-button="">
            <mat-icon>call_made</mat-icon>
            <mat-icon>playlist_play</mat-icon>
            Export Task List
          </button>
        </div>
      </section>
    </mat-tab>
    <mat-tab label="Week">
      <section class="tab-inner full-width">
        <worklog-week></worklog-week>
      </section>
    </mat-tab>
    <mat-tab label="Google Sheet">
      <section class="tab-inner">
        <google-export-time></google-export-time>
      </section>
    </mat-tab>
  </mat-tab-group>


  <section class="daily-summary-actions">
    <div class="bottom-buttons">
      <button (click)="finishDay()"
              [disabled]="cfg.isBlockFinishDayUntilTimeTimeTracked && !isTimeSheetExported"
              color="primary"
              mat-raised-button="">
        <mat-icon>wb_sunny</mat-icon>
        Save and go home
      </button>
    </div>
  </section>
</div>


<div class="success-animation-wrapper"
     *ngIf="showSuccessAnimation">
  <mat-icon>wb_sunny</mat-icon>
  <div class="unicorn-wrapper">
    <img src="assets/unicorn.png"
         class="unicorn">
  </div>
</div>