Revert "Remove Angular Material"

This reverts commit 3ae12966b6.

package-lock.json

@@ -613,6 +613,14 @@
         }
       }
     },
+    "@angular/material": {
+      "version": "10.1.3",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-10.1.3.tgz",
+      "integrity": "sha512-6ygbCVcejFydmZUlOcNreiWQTvL4kOrEp/M51DV70hqffTnxajCzaRe2MQhxisENB/bR8mtMvf8YY3Rsys/HCw==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
     "@angular/platform-browser": {
       "version": "10.0.14",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-10.0.14.tgz",

package.json

@@ -19,6 +19,7 @@
     "@angular/core": "~10.0.14",
     "@angular/forms": "~10.0.14",
     "@angular/localize": "^10.0.14",
+    "@angular/material": "^10.1.3",
     "@angular/platform-browser": "~10.0.14",
     "@angular/platform-browser-dynamic": "~10.0.14",
     "@angular/router": "~10.0.14",

src/app/app.module.ts

@@ -1,6 +1,16 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
+// Angular Material Components
+import {MatToolbarModule} from '@angular/material/toolbar';
+import {MatButtonModule} from '@angular/material/button';
+import {MatTableModule} from '@angular/material/table';
+import {MatInputModule} from '@angular/material/input';
+import {MatMenuModule} from '@angular/material/menu';
+import {MatSlideToggleModule} from '@angular/material/slide-toggle';
+import {MatIconModule} from '@angular/material/icon';
+
+
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -21,6 +31,13 @@ import { BikesComponent } from './pages/bikes/bikes.component';
     BrowserModule,
     AppRoutingModule,
     BrowserAnimationsModule,
+    MatToolbarModule,
+    MatButtonModule,
+    MatTableModule,
+    MatInputModule,
+    MatMenuModule,
+    MatSlideToggleModule,
+    MatIconModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/components/navbar/navbar.component.html

@@ -1,4 +1,4 @@
-<!--<div id="navbar">
+<mat-toolbar id="navbar">
   <span>Flotte</span>
   <button mat-icon-button [matMenuTriggerFor]="menu" id="menu-trigger-button">
     <mat-icon>more_vert</mat-icon>
@@ -8,4 +8,4 @@
       <mat-slide-toggle (change)="changeTheme($event)" [checked]="darkThemeIsActive">Dark Mode</mat-slide-toggle>
     </div>
   </mat-menu>
-</div>-->
+</mat-toolbar>

src/app/pages/bikes/bikes.component.html

@@ -1 +1,37 @@
-bikes works
+<button mat-raised-button color="primary">Primary</button>
+<button mat-raised-button color="accent">Accent</button>
+
+<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+
+  <!--- Note that these columns can be defined in any order.
+        The actual rendered columns are set as a property on the row definition" -->
+
+  <!-- Position Column -->
+  <ng-container matColumnDef="position">
+    <th mat-header-cell *matHeaderCellDef> No. </th>
+    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
+  </ng-container>
+
+  <!-- Name Column -->
+  <ng-container matColumnDef="name">
+    <th mat-header-cell *matHeaderCellDef> Name </th>
+    <td mat-cell *matCellDef="let element" contenteditable (input)="onTableInput(element)"> {{element.name}} </td>
+  </ng-container>
+
+  <!-- Weight Column -->
+  <ng-container matColumnDef="weight">
+    <th mat-header-cell *matHeaderCellDef> Weight </th>
+    <td mat-cell *matCellDef="let element">
+    <mat-form-field><input matInput color="warn" [value]="element.weight"></mat-form-field>
+    </td>
+  </ng-container>
+
+  <!-- Symbol Column -->
+  <ng-container matColumnDef="symbol">
+    <th mat-header-cell *matHeaderCellDef> Symbol </th>
+    <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
+  </ng-container>
+
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+</table>