Add error messages to page and table

src/app/components/data-page/data-page.component.html

@@ -3,7 +3,7 @@
   [diameter]="32"
   class="page-loading-spinner"
 ></mat-spinner>
-<div class="page-wrapper" *ngIf="!isLoading && !data">
+<div class="loading-error-message" *ngIf="!isLoading && !data">
   <h1>Seite konnte nicht gefunden werden :(</h1>
 </div>
 
@@ -128,7 +128,7 @@
     *ngIf="!data?.isLockedByMe && !data?.isLocked"
     class="floating-fab-button"
     color="primary"
-    [disabled]="isSavingOrLocking || isLoading"
+    [disabled]="isSavingOrLocking || isLoading || !data"
   >
     <mat-icon>edit</mat-icon>
   </button>

src/app/components/data-page/data-page.component.scss

@@ -1,3 +1,7 @@
+.loading-error-message {
+  margin: 1em;
+}
+
 .page-loading-spinner {
   margin: 0 auto;
 }

src/app/components/table/table.component.html

@@ -1,7 +1,9 @@
 <div class="table-page-wrapper">
   <h1 class="headline" *ngIf="headline">
     {{ headline }}
-    <mat-icon id="table-icon" (click)="$event.target.classList.add('drive')">{{ headlineIconName }}</mat-icon>
+    <mat-icon id="table-icon" (click)="$event.target.classList.add('drive')">{{
+      headlineIconName
+    }}</mat-icon>
   </h1>
   <div class="table-control">
     <!--<button
@@ -26,7 +28,7 @@
       mat-raised-button
       class="table-control-button"
       (click)="addNewObject()"
-      [disabled]="reloadingTable"
+      [disabled]="reloadingTable || !isLoaded || loadingErrorOccurred"
     >
       <mat-icon class="spin">add</mat-icon>
     </button>
@@ -376,6 +378,9 @@
       ></tr>
     </table>
   </div>
+  <span class="loading-error-message" *ngIf="isLoaded && !isProcessing && loadingErrorOccurred"
+    >Die Daten konnten leider nicht geladen werden :(</span
+  >
   <mat-spinner
     class="idle-spinner"
     *ngIf="!isLoaded || isProcessing"

src/app/components/table/table.component.scss

@@ -79,6 +79,10 @@
       }
     }
   }
+  .loading-error-message {
+    margin: 3em auto;
+    font-size: large;
+  }
 }
 
 .drive {

src/app/components/table/table.component.ts

@@ -97,6 +97,7 @@ export class TableComponent implements AfterViewInit {
 
   isLoaded = false;
   isProcessing = false;
+  loadingErrorOccurred = false;
 
   @Output() createEvent = new EventEmitter();
   @Output() lockEvent = new EventEmitter();
@@ -163,11 +164,14 @@ export class TableComponent implements AfterViewInit {
 
     this.dataService.tableData.subscribe((newTableDataSource) => {
       const tempDataSource = [];
+      this.isLoaded = true;
+      this.reloadingTable = false;
+      this.loadingErrorOccurred = false;
       if (newTableDataSource == null) {
+        this.data.data = [];
+        this.loadingErrorOccurred = true;
         return;
       }
-      this.reloadingTable = false;
-      this.isLoaded = true;
       for (const row of newTableDataSource) {
         if (row.newObject) {
           // its a copied object
@@ -201,6 +205,7 @@ export class TableComponent implements AfterViewInit {
       });
     });
     this.dataService.loadTableData();
+    this.isLoaded = false;
 
     this.relockingInterval = setInterval(() => {
       for (const row of this.data.data) {