webapp/src/app/pages/dashboard/status-card/status-card.component.ts

   1 /**
   2 * @license
   3 * Copyright (C) 2017-2018 "IoT.bzh"
   4 * Author Sebastien Douheret <sebastien@iot.bzh>
   5 *
   6 * Licensed under the Apache License, Version 2.0 (the "License");
   7 * you may not use this file except in compliance with the License.
   8 * You may obtain a copy of the License at
   9 *
  10 *   http://www.apache.org/licenses/LICENSE-2.0
  11 *
  12 * Unless required by applicable law or agreed to in writing, software
  13 * distributed under the License is distributed on an "AS IS" BASIS,
  14 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  15 * See the License for the specific language governing permissions and
  16 * limitations under the License.
  17 */
  18
  19 import { Component, Input } from '@angular/core';
  20
  21 @Component({
  22   selector: 'ngx-status-card',
  23   styleUrls: ['./status-card.component.scss'],
  24   template: `
  25     <nb-card (click)="on = !on" [ngClass]="{'off': !on}">
  26       <div class="icon-container">
  27         <div class="icon {{ type }}">
  28           <ng-content></ng-content>
  29         </div>
  30       </div>
  31
  32       <div class="details">
  33         <div class="title">{{ title }}</div>
  34         <div class="status">{{ on ? 'ON' : 'OFF' }}</div>
  35       </div>
  36     </nb-card>
  37   `,
  38 })
  39 export class StatusCardComponent {
  40
  41   @Input() title: string;
  42   @Input() type: string;
  43   @Input() on = true;
  44 }