Dashboard .emptyBox

src/main/angular/src/app/pages/dashboard/dashboard.component.html

@@ -1,21 +1,6 @@
 <div class="verticalScroll">
-
-  <div class="subheading">
-    Eingeschaltete Geräte:
-    {{ deviceList.filtered.length }} / {{ deviceList.unfiltered.length }}
-  </div>
   <app-device-list [list]="deviceList.filtered"></app-device-list>
-
-  <div class="subheading">
-    Eingeschaltete Lichter:
-    {{ tunableList.filtered.length }} / {{ tunableList.unfiltered.length }}
-  </div>
   <app-tunable-list [list]="tunableList.filtered"></app-tunable-list>
-
-  <div class="subheading">
-    {{ shutterSubheading }} Rollläden:
-    {{ shutterList.filtered.length }} / {{ shutterList.unfiltered.length }}
-  </div>
   <app-shutter-list [list]="shutterList.filtered"></app-shutter-list>
-
+  <div class="emptyBox" *ngIf="deviceList.filtered.length === 0 && tunableList.filtered.length === 0 && shutterList.filtered.length === 0">- Nichts -</div>
 </div>

src/main/angular/src/app/pages/dashboard/dashboard.component.less

@@ -6,4 +6,5 @@
   padding-top: calc(@space * 2);
   padding-left: calc(@space * 2);
   color: gray;
+  white-space: nowrap;
 }

src/main/angular/src/app/pages/dashboard/dashboard.component.ts

@@ -11,6 +11,7 @@ import {CrudLiveList} from '../../api/common/CrudLiveList';
 import {TunableListComponent} from '../../shared/tunable-list/tunable-list.component';
 import {ShutterListComponent} from '../../shared/shutter-list/shutter-list.component';
 import {Subscription, timer} from 'rxjs';
+import {NgIf} from '@angular/common';
 
 @Component({
   selector: 'app-dashboard',
@@ -20,6 +21,7 @@ import {Subscription, timer} from 'rxjs';
     FormsModule,
     TunableListComponent,
     ShutterListComponent,
+    NgIf,
   ],
   templateUrl: './dashboard.component.html',
   styleUrl: './dashboard.component.less'

src/main/angular/src/styles.less

@@ -24,6 +24,16 @@ input[type=text] {
   padding-right: 0.2em;
 }
 
+.emptyBox{
+  margin: @space * 2;
+  margin-top: 0;
+  padding: @space * 2;
+  color: darkgray;
+  text-align: center;
+  background-color: #F8F8F8;
+  border: @border dashed darkgray;
+}
+
 @media (min-width: 1000px) {
 
   body {