Add a fancy table

EnessenE · Dec 28, 2024 · 2b72a7e · 2b72a7e
1 parent 856cc40
commit 2b72a7e
Show file tree

Hide file tree

Showing 10 changed files with 286 additions and 37 deletions.
diff --git a/angular.json b/angular.json
@@ -33,10 +33,11 @@
                             }
                         ],
                         "styles": [
-                            "src/styles.scss",
-                            "node_modules/bootstrap/scss/bootstrap.scss",
-                            "node_modules/leaflet/dist/leaflet.css",
-                            "node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css"
+                          "@angular/material/prebuilt-themes/azure-blue.css",
+                          "src/styles.scss",
+                          "node_modules/bootstrap/scss/bootstrap.scss",
+                          "node_modules/leaflet/dist/leaflet.css",
+                          "node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css"
                         ],
                         "scripts": [
                             "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
@@ -110,10 +111,11 @@
                             }
                         ],
                         "styles": [
-                            "src/styles.scss",
-                            "node_modules/bootstrap/scss/bootstrap.scss",
-                            "node_modules/leaflet/dist/leaflet.css",
-                            "node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css"
+                          "@angular/material/prebuilt-themes/azure-blue.css",
+                          "src/styles.scss",
+                          "node_modules/bootstrap/scss/bootstrap.scss",
+                          "node_modules/leaflet/dist/leaflet.css",
+                          "node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css"
                         ],
                         "scripts": [
                             "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
     "@angular/compiler": "^19.0.4",
     "@angular/core": "^19.0.4",
     "@angular/forms": "^19.0.4",
+    "@angular/material": "^19.0.3",
     "@angular/platform-browser": "^19.0.4",
     "@angular/platform-browser-dynamic": "^19.0.4",
     "@angular/router": "^19.0.4",
@@ -48,4 +49,4 @@
     "prettier": "^3.2.5",
     "typescript": "~5.5.4"
   }
-}
+}
diff --git a/src/app/app.config.ts b/src/app/app.config.ts
@@ -3,6 +3,7 @@ import { InMemoryScrollingFeature, InMemoryScrollingOptions, provideRouter, with
 
 import { routes } from './app.routes';
 import { provideHttpClient } from '@angular/common/http';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 
 const scrollConfig: InMemoryScrollingOptions = {
   scrollPositionRestoration: 'top',
@@ -13,5 +14,5 @@ const inMemoryScrollingFeature: InMemoryScrollingFeature =
   withInMemoryScrolling(scrollConfig);
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideHttpClient(), provideRouter(routes, inMemoryScrollingFeature)],
+  providers: [provideHttpClient(), provideRouter(routes, inMemoryScrollingFeature), provideAnimationsAsync()],
 };
diff --git a/src/app/pages/feeds/feeds.component.html b/src/app/pages/feeds/feeds.component.html
@@ -1,18 +1,198 @@
 <div class="col-12 overflow-auto">
     @if (loading) {
         <div>
-            <div
-                class="spinner-border"
-                role="status"
-            >
-                🚉
-                <span class="visually-hidden">Loading...</span>
-            </div>
+            <app-loading></app-loading>
             <p>Loading feed data...</p>
         </div>
     }
+    <div [hidden]="!dataSource">
+        <table
+            mat-table
+            [dataSource]="dataSource"
+            matSort
+            class="mat-elevation-z8"
+        >
+            <!-- Name Column -->
+            <ng-container matColumnDef="name">
+                <th
+                    mat-header-cell
+                    *matHeaderCellDef
+                    mat-sort-header
+                    sortActionDescription="Sort by name"
+                >
+                    Name
+                </th>
+                <td
+                    mat-cell
+                    *matCellDef="let element"
+                >
+                    <a routerLink="/feed/{{ element.name }}">{{ element.name }}</a>
+                </td>
+            </ng-container>
+            <ng-container matColumnDef="downloadPending">
+                <th
+                    mat-header-cell
+                    *matHeaderCellDef
+                    mat-sort-header
+                    sortActionDescription="Sort by downloadPending"
+                >
+                    Queued for import?
+                </th>
+                <td
+                    mat-cell
+                    *matCellDef="let element"
+                >
+                @if (element.downloadPending) {
+                    <span style="color: blue">Yes</span>
+                } @else {
+                    <span style="color: green">No</span>
+                }
+                </td>
+            </ng-container>
+            <ng-container matColumnDef="interval">
+                <th
+                    mat-header-cell
+                    *matHeaderCellDef
+                    mat-sort-header
+                    sortActionDescription="Sort by interval"
+                >
+                    Interval
+                </th>
+                <td
+                    mat-cell
+                    *matCellDef="let element"
+                >
+                    {{ element.interval }}
+                </td>
+            </ng-container>
 
-    <table class="table table-striped table-hover ">
+            <ng-container matColumnDef="lastUpdated">
+                <th
+                    mat-header-cell
+                    *matHeaderCellDef
+                    mat-sort-header
+                    sortActionDescription="Sort by lastUpdated"
+                >
+                    Last successfull update
+                </th>
+                <td
+                    mat-cell
+                    *matCellDef="let element"
+                >
+                    {{ element.lastUpdated | date: 'EEEE, MMMM d, y, HH:mm' }}
+                </td>
+            </ng-container>
+            <ng-container matColumnDef="lastChecked">
+                <th
+                    mat-header-cell
+                    *matHeaderCellDef
+                    mat-sort-header
+                    sortActionDescription="Sort by lastChecked"
+                >
+                    Last checked
+                </th>
+                <td
+                    mat-cell
+                    *matCellDef="let element"
+                >
+                    {{ element.lastChecked | date: 'EEEE, MMMM d, y, HH:mm' }}
+                </td>
+            </ng-container>
+            <ng-container matColumnDef="lastAttempt">
+                <th
+                    mat-header-cell
+                    *matHeaderCellDef
+                    mat-sort-header
+                    sortActionDescription="Sort by lastAttempt"
+                >
+                    Last failed attempt
+                </th>
+                <td
+                    mat-cell
+                    *matCellDef="let element"
+                >
+                    {{ element.lastAttempt | date: 'EEEE, MMMM d, y, HH:mm' }}
+                </td>
+            </ng-container>
+            <ng-container matColumnDef="agencies">
+                <th
+                    mat-header-cell
+                    *matHeaderCellDef
+                    mat-sort-header
+                    sortActionDescription="Sort by agencies"
+                >
+                    Agencies
+                </th>
+                <td
+                    mat-cell
+                    *matCellDef="let element"
+                >
+                    {{ element.agencies }}
+                </td>
+            </ng-container>
+            <ng-container matColumnDef="routes">
+                <th
+                    mat-header-cell
+                    *matHeaderCellDef
+                    mat-sort-header
+                    sortActionDescription="Sort by routes"
+                >
+                    Routes
+                </th>
+                <td
+                    mat-cell
+                    *matCellDef="let element"
+                >
+                    {{ element.routes }}
+                </td>
+            </ng-container>
+            <ng-container matColumnDef="stops">
+                <th
+                    mat-header-cell
+                    *matHeaderCellDef
+                    mat-sort-header
+                    sortActionDescription="Sort by stops"
+                >
+                    Stops
+                </th>
+                <td
+                    mat-cell
+                    *matCellDef="let element"
+                >
+                    {{ element.stops }}
+                </td>
+            </ng-container>
+            <ng-container matColumnDef="trips">
+                <th
+                    mat-header-cell
+                    *matHeaderCellDef
+                    mat-sort-header
+                    sortActionDescription="Sort by trips"
+                >
+                    Trips
+                </th>
+                <td
+                    mat-cell
+                    *matCellDef="let element"
+                >
+                    {{ element.trips }}
+                </td>
+            </ng-container>
+            <tr
+                mat-header-row
+                *matHeaderRowDef="displayedColumns"
+            ></tr>
+            <tr
+                mat-row
+                *matRowDef="let row; columns: displayedColumns"
+            ></tr>
+        </table>
+    </div>
+
+    <!-- <table
+        class="table table-striped table-hover"
+        mat-table
+    >
         <thead class="thead-dark">
             <tr>
                 <th scope="col">Enabled</th>
@@ -31,19 +211,20 @@
         <tbody>
             @for (feed of feeds; track feed) {
                 <tr>
-                    <td>{{ feed.enabled ?? "Yes"}}</td>
-                    <th scope="row"><a routerLink="/feed/{{feed.name}}">{{ feed.name }}</a></th>
-                    <td>@if(feed.downloadPending)
-                        {
+                    <td>{{ feed.enabled ?? 'Yes' }}</td>
+                    <th scope="row">
+                        <a routerLink="/feed/{{ feed.name }}">{{ feed.name }}</a>
+                    </th>
+                    <td>
+                        @if (feed.downloadPending) {
                             <span style="color: orange">Yes</span>
-                        }
-                        @else {
+                        } @else {
                             <span style="color: green">No</span>
                         }
                     </td>
                     <td>{{ feed.lastAttempt | date: 'EEEE, MMMM d, y, HH:mm' }}</td>
-                    <td>{{ feed.lastUpdated | date: 'EEEE, MMMM d, y, HH:mm'}}</td>
-                    <td>{{ feed.lastChecked | date: 'EEEE, MMMM d, y, HH:mm'}}</td>
+                    <td>{{ feed.lastUpdated | date: 'EEEE, MMMM d, y, HH:mm' }}</td>
+                    <td>{{ feed.lastChecked | date: 'EEEE, MMMM d, y, HH:mm' }}</td>
                     <td>{{ feed.interval }}</td>
                     <td>{{ feed.agencies }}</td>
                     <td>{{ feed.routes }}</td>
@@ -54,5 +235,5 @@
                 <p>No feeds loaded to display!</p>
             }
         </tbody>
-    </table>
+    </table> -->
 </div>
diff --git a/src/app/pages/feeds/feeds.component.scss b/src/app/pages/feeds/feeds.component.scss
@@ -0,0 +1,16 @@
+th.mat-sort-header-sorted {
+    color: black;
+}
+
+th{
+
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+.mat-mdc-row:hover {
+    background-color: lightgray;
+}