Add Reopening Time to OH Panel, Make OH Panel Responsive (#385)

* Add Reopening Time to OH Panel, Make OH Panel Responsive * Fix Month and Date Orientation
unc-csxl · Apr 19, 2024 · 0abfac2 · 0abfac2
1 parent 72fe4aa
commit 0abfac2
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 18 deletions.
diff --git a/frontend/src/app/coworking/coworking.module.ts b/frontend/src/app/coworking/coworking.module.ts
@@ -8,7 +8,10 @@ import { MatCardModule } from '@angular/material/card';
 import { CoworkingReservationCard } from './widgets/coworking-reservation-card/coworking-reservation-card';
 import { CoworkingDropInCard } from './widgets/dropin-availability-card/dropin-availability-card.widget';
 import { MatListModule } from '@angular/material/list';
-import { CoworkingHoursCard } from './widgets/operating-hours-panel/operating-hours-panel.widget';
+import {
+  CoworkingHoursCard,
+  OperatingHoursCapitalizationPipe
+} from './widgets/operating-hours-panel/operating-hours-panel.widget';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatTableModule } from '@angular/material/table';
 import { ReservationComponent } from './reservation/reservation.component';
@@ -47,7 +50,8 @@ import { AmbassadorRoomListComponent } from './ambassador-home/ambassador-room/l
     ConfirmReservationComponent,
     NewReservationPageComponent,
     DateSelector,
-    OperatingHoursDialog
+    OperatingHoursDialog,
+    OperatingHoursCapitalizationPipe
   ],
   imports: [
     CommonModule,

diff --git a/frontend/src/app/coworking/widgets/operating-hours-panel/operating-hours-panel.widget.css b/frontend/src/app/coworking/widgets/operating-hours-panel/operating-hours-panel.widget.css
@@ -23,6 +23,7 @@
   margin-right: 8px;
   padding: 0 16px;
   color: white;
+  width: fit-content;
 }
 
 .open .badge {
@@ -43,3 +44,24 @@
   flex-direction: row;
   width: 100%;
 }
+
+button {
+  margin-left: auto;
+}
+
+@media only screen and (max-width: 900px) {
+  .header-row {
+    flex-direction: column;
+    align-items: baseline;
+  }
+
+  .mat-mdc-card-title {
+    display: flex;
+    flex-direction: column;
+  }
+
+  button {
+    margin-left: 0;
+  }
+
+}
diff --git a/frontend/src/app/coworking/widgets/operating-hours-panel/operating-hours-panel.widget.html b/frontend/src/app/coworking/widgets/operating-hours-panel/operating-hours-panel.widget.html
@@ -1,20 +1,30 @@
 <mat-card appearance="outlined">
   <mat-card-header class="header">
-    <mat-card-title
-      class="hours-title open"
-      *ngIf="openOperatingHours; else closed">
-      <div class="header-row">
-        <span class="badge">Open</span>
-        until {{ openOperatingHours!.end | date: 'h:mma' | lowercase }}
-      </div>
-    </mat-card-title>
-    <ng-template #closed>
-      <mat-card-title class="hours-title closed"
-        ><span class="badge">Closed</span></mat-card-title
-      >
-    </ng-template>
-    <button mat-stroked-button id="hours-button" (click)="openDialog()">
-      All Hours
-    </button>
+    <div class="header-row">
+      <mat-card-title
+        class="hours-title open"
+        *ngIf="openOperatingHours; else closed">
+        <div class="header-row">
+          <span class="badge">Open</span>
+          until {{ openOperatingHours!.end | date: 'h:mma' | lowercase }}
+        </div>
+      </mat-card-title>
+      <ng-template #closed>
+        <mat-card-title class="hours-title closed">
+          <span class="badge">Closed</span>
+          <span *ngIf="operatingHours.length > 0"
+            >Open 
+            {{
+              operatingHours[0]!.start
+                | date: "EEE, MMM d 'at' h:mma"
+                | operatingHoursCapitalizationPipe
+            }}</span
+          >
+        </mat-card-title>
+      </ng-template>
+      <button mat-stroked-button id="hours-button" (click)="openDialog()">
+        All Hours
+      </button>
+    </div>
   </mat-card-header>
 </mat-card>
diff --git a/frontend/src/app/coworking/widgets/operating-hours-panel/operating-hours-panel.widget.ts b/frontend/src/app/coworking/widgets/operating-hours-panel/operating-hours-panel.widget.ts
@@ -2,6 +2,7 @@ import { Component, Input } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { OperatingHours } from 'src/app/coworking/coworking.models';
 import { OperatingHoursDialog } from '../operating-hours-dialog/operating-hours-dialog.widget';
+import { Pipe, PipeTransform } from '@angular/core';
 
 @Component({
   selector: 'coworking-operating-hours-panel',
@@ -20,3 +21,24 @@ export class CoworkingHoursCard {
     });
   }
 }
+
+/** Local pipe that capitalizes the first letter of the string. */
+@Pipe({
+  name: 'operatingHoursCapitalizationPipe'
+})
+export class OperatingHoursCapitalizationPipe implements PipeTransform {
+  transform(sentence: string | null | undefined): string {
+    if (!sentence) return '';
+    let newSentence = '';
+    sentence.split(' ').forEach((segment) => {
+      if (segment != 'at') {
+        newSentence +=
+          segment[0].toUpperCase() + segment.substring(1).toLowerCase();
+      } else {
+        newSentence += segment;
+      }
+      newSentence += ' ';
+    });
+    return newSentence.trimEnd();
+  }
+}