bms-debug-page.component.html

<div class="image-container" style="margin-right: 16px; margin-left: 16px">
  @if (isMobile) {
    <!-- TODO: Add mobile display component -->
  } @else {
    <!-- TODO: Add components for the segment summary-->
    <mat-grid-list cols="6" gutterSize="15px" rowHeight="1.5rem" style="margin-top: -20px">
      <mat-grid-tile [colspan]="6" rowspan="3">
        <bms-header style="width: 100%" [pageTitle]="this.windowSize < 1200 ? 'ACCU' : 'Accumulator'" />
      </mat-grid-tile>
      <mat-grid-tile [colspan]="6" rowspan="5">
        <bms-at-a-glance-redesign style="height: 100%; width: 100%" />
      </mat-grid-tile>
      <mat-grid-tile [colspan]="windowSize > 1300 ? 1 : 2" [rowspan]="16">
        <div style="display: flex; flex-direction: column; width: 100%; height: 100%; gap: 3%">
          <acc-high-voltage style="width: 100%; min-height: 31%" />
          <acc-low-voltage style="width: 100%; min-height: 31%" />
          <acc-high-temp style="width: 100%; min-height: 32%" />
        </div>
      </mat-grid-tile>
      @for (segment of segments; track segment) {
        <mat-grid-tile [colspan]="2" [rowspan]="5">
          <segment-summary [segmentNumber]="segment" style="height: 100%; width: 100%" />
        </mat-grid-tile>
      }
      @for (segment of segments; track segment) {
        <mat-grid-tile colspan="6" rowspan="8">
          <cell-by-cell-heat-map style="width: 100%; height: 100%" [currentSegment]="segment"></cell-by-cell-heat-map>
        </mat-grid-tile>
      }
    </mat-grid-list>
  }
</div>