Remove non-material themes

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

@@ -50,34 +50,9 @@ export class DashboardComponent implements OnDestroy {
   ];
 
   statusCardsByThemes: {
-    default: CardSettings[];
-    cosmic: CardSettings[];
-    corporate: CardSettings[];
-    dark: CardSettings[];
     'material-dark': CardSettings[];
     'material-light': CardSettings[];
   } = {
-    default: this.commonStatusCardsSet,
-    cosmic: this.commonStatusCardsSet,
-    corporate: [
-      {
-        ...this.lightCard,
-        type: 'warning',
-      },
-      {
-        ...this.rollerShadesCard,
-        type: 'primary',
-      },
-      {
-        ...this.wirelessAudioCard,
-        type: 'danger',
-      },
-      {
-        ...this.coffeeMakerCard,
-        type: 'info',
-      },
-    ],
-    dark: this.commonStatusCardsSet,
     'material-dark': this.commonStatusCardsSet,
     'material-light': this.commonStatusCardsSet,
   };

src/app/pages/dashboard/rooms/room-selector/room-selector.component.ts

@@ -0,0 +1,90 @@
+import { Component, EventEmitter, Output } from '@angular/core';
+import { Location, LocationStrategy } from '@angular/common';
+
+@Component({
+  selector: 'ngx-room-selector',
+  templateUrl: './room-selector.component.html',
+  styleUrls: ['./room-selector.component.scss'],
+})
+export class RoomSelectorComponent {
+  @Output() select: EventEmitter<number> = new EventEmitter();
+
+  selectedRoom = null;
+  sortedRooms = [];
+  viewBox = '-20 -20 618.88 407.99';
+  isIE = !!(navigator.userAgent.match(/Trident/)
+            || navigator.userAgent.match(/MSIE/)
+            || navigator.userAgent.match(/Edge/));
+  isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') >= 0;
+  roomSvg = {
+    borders: [{
+      d: 'M186.21,130.05H216.37V160H186.21Z',
+    }],
+    stokedAreas: [
+      { d: 'M562.71,225V354h-290V319H418.37a6.09,6.09,0,0,0,6.09-6.09V225Z' },
+      { d: 'M8.09,130V347.91A6.09,6.09,0,0,0,14.18,354h54V130Z' },
+      { d: 'M216.37,49.82H358.8V92.5H216.37Z' },
+    ],
+    rooms: [
+      {
+        id: '0',
+        name: { text: 'Kitchen', x: 142, y: 240.8 },
+        area: { d: 'M68.18,130V359.9A6.09,6.09,0,0,0,74.27,366h136a6.09,6.09,0,0,0,6.09-6.09V160H186.21V130Z' },
+        border: { d: 'M96,130H68.18V359.9A6.09,6.09,0,0,0,74.27,366h136a6.09,6.09,0,0,0,6.09-6.09V225 M152.71,' +
+          '130H186.21V160H218.5' },
+      },
+      {
+        id: '1',
+        name: { text: 'Bedroom', x: 109, y: 66 },
+        area: { d: 'M152.71,130h63.66V8.09A6.09,6.09,0,0,0,210.27,2H8.09A6.09,6.09,0,0,0,2,8.09V123.95A6.09,' +
+          '6.09,0,0,0,8.09,130H96Z' },
+        border: { d: 'M152.71,130h63.66V8.09A6.09,6.09,0,0,0,210.27,2H8.09A6.09,6.09,0,0,0,2,8.09V123.95A6.09' +
+          ',6.09,0,0,0,8.09,130H96' },
+      },
+      {
+        id: '2',
+        name: { text: 'Living Room', x: 468, y: 134 },
+        area: { d: 'M358.8,160V49.82a6.09,6.09,0,0,1,6.09-6.09H570.78a6.09,6.09,0,0,1,6.09,6.09V218.9a6.09' +
+          ',6.09,0,0,1-6.09,6.09h-212Z' },
+        border: { d: 'M358.8,160V49.82a6.09,6.09,0,0,1,6.09-6.09H570.78a6.09,6.09,0,0,1,6.09,6.09V218.9a6.09' +
+          ',6.09,0,0,1-6.09,6.09h-212' },
+      },
+      {
+        id: '3',
+        name: { text: 'Hallway', x: 320, y: 273 },
+        area: { d: 'M216.37,354V92.5H358.8V225H424.39V319H272.71V354Z' },
+        border: { d: 'M216.37,225V356 M216.21,162V92.5H358.8V160 M358.8,225H424.39V312.91a6.09,' +
+          '6.09,0,0,1,-6.09,6.09H272.71V356' },
+      },
+    ],
+  };
+
+  constructor(private location: Location, private locationStrategy: LocationStrategy) {
+    this.selectRoom('2');
+  }
+
+  private sortRooms() {
+    this.sortedRooms = this.roomSvg.rooms.slice(0).sort((a, b) => {
+      if (a.id === this.selectedRoom) {
+        return 1;
+      }
+      if (b.id === this.selectedRoom) {
+        return -1;
+      }
+      return 0;
+    });
+  }
+
+  selectRoom(roomNumber) {
+    this.select.emit(roomNumber);
+    this.selectedRoom = roomNumber;
+    this.sortRooms();
+  }
+
+  getUrlPath(id: string) {
+    const baseHref = this.locationStrategy.getBaseHref().replace(/\/$/, '');
+    const path = this.location.path().replace(/\/$/, '');
+
+    return `url(${baseHref}${path}${id})`;
+  }
+}

src/app/pages/dashboard/rooms/rooms.component.ts

@@ -0,0 +1,77 @@
+import { Component, HostBinding, OnDestroy } from '@angular/core';
+import { NbThemeService, NbMediaBreakpoint, NbMediaBreakpointsService } from '@nebular/theme';
+import { map } from 'rxjs/operators';
+
+@Component({
+  selector: 'ngx-rooms',
+  styleUrls: ['./rooms.component.scss'],
+  template: `
+    <nb-card [size]="breakpoint.width >= breakpoints.sm ? 'giant' : ''">
+      <nb-icon icon="arrow-ios-downward" pack="eva"
+               (click)="collapse()"
+               class="collapse"
+               [hidden]="isCollapsed()">
+      </nb-icon>
+      <ngx-room-selector [class.dark-background]="isDarkTheme" (select)="select($event)"></ngx-room-selector>
+      <ngx-player [collapsed]="isCollapsed() && breakpoint.width <= breakpoints.md"></ngx-player>
+    </nb-card>
+  `,
+})
+export class RoomsComponent implements OnDestroy {
+
+  @HostBinding('class.expanded')
+  private expanded: boolean;
+  private selected: number;
+
+  isDarkTheme: boolean;
+
+  breakpoint: NbMediaBreakpoint;
+  breakpoints: any;
+  themeSubscription: any;
+  themeChangeSubscription: any;
+
+  constructor(private themeService: NbThemeService,
+              private breakpointService: NbMediaBreakpointsService) {
+
+    this.breakpoints = this.breakpointService.getBreakpointsMap();
+    this.themeSubscription = this.themeService.onMediaQueryChange()
+      .subscribe(([, newValue]) => {
+        this.breakpoint = newValue;
+      });
+
+    this.themeChangeSubscription = this.themeService.onThemeChange()
+      .pipe(map(({ name }) => name === 'material-dark'))
+      .subscribe((isDark: boolean) => this.isDarkTheme = isDark);
+  }
+
+  select(roomNumber) {
+    if (this.isSelected(roomNumber)) {
+      this.expand();
+    } else {
+      this.collapse();
+    }
+
+    this.selected = roomNumber;
+  }
+
+  expand() {
+    this.expanded = true;
+  }
+
+  collapse() {
+    this.expanded = false;
+  }
+
+  isCollapsed() {
+    return !this.expanded;
+  }
+
+  private isSelected(roomNumber): boolean {
+    return this.selected === roomNumber;
+  }
+
+  ngOnDestroy() {
+    this.themeSubscription.unsubscribe();
+    this.themeChangeSubscription.unsubscribe();
+  }
+}