Merge pull request #37 from ThingooKNI/feature/device-list

Add device-list and device-details components
ThingooKNI · Apr 2, 2021 · 9f6d938 · 9f6d938
2 parents bce13e1 + d1ef1cf
commit 9f6d938
Show file tree

Hide file tree

Showing 12 changed files with 392 additions and 1 deletion.
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
@@ -2,6 +2,8 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { DashboardComponent } from './pages/dashboard/dashboard.component';
 import { UserProfileComponent } from './pages/user-profile/user-profile.component';
+import { DeviceListComponent } from './pages/device-list/device-list.component';
+import { DeviceDetailsComponent } from './pages/device-details/device-details.component';
 import { AuthService } from './auth/auth.service';
 
 const routes: Routes = [
@@ -11,6 +13,16 @@ const routes: Routes = [
     component: UserProfileComponent,
     canActivate: [AuthService],
   },
+  {
+    path: 'devices',
+    component: DeviceListComponent,
+    canActivate: [AuthService],
+  },
+  {
+    path: 'devices/:id',
+    component: DeviceDetailsComponent,
+    canActivate: [AuthService],
+  },
 ];
 
 @NgModule({

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -5,7 +5,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
-
+import { MatRippleModule } from '@angular/material/core';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -15,6 +15,9 @@ import { FooterComponent } from './shared/footer/footer.component';
 import { DashboardComponent } from './pages/dashboard/dashboard.component';
 import { UserProfileComponent } from './pages/user-profile/user-profile.component';
 import { AuthConfigModule } from './auth/auth-config.module';
+import { DeviceListComponent } from './pages/device-list/device-list.component';
+import { DeviceCardComponent } from './pages/device-list/device-card/device-card.component';
+import { DeviceDetailsComponent } from './pages/device-details/device-details.component';
 
 @NgModule({
   declarations: [
@@ -23,6 +26,9 @@ import { AuthConfigModule } from './auth/auth-config.module';
     FooterComponent,
     DashboardComponent,
     UserProfileComponent,
+    DeviceListComponent,
+    DeviceCardComponent,
+    DeviceDetailsComponent,
   ],
   imports: [
     MatToolbarModule,
@@ -35,6 +41,7 @@ import { AuthConfigModule } from './auth/auth-config.module';
     BrowserAnimationsModule,
     ReactiveFormsModule,
     AuthConfigModule,
+    MatRippleModule,
   ],
   providers: [],
   bootstrap: [AppComponent],

diff --git a/src/app/pages/device-details/device-details.component.html b/src/app/pages/device-details/device-details.component.html
@@ -0,0 +1,45 @@
+<div class="device-details-page-wrapper">
+  <mat-card class="device-details__section">
+    <div class="device-basic-info">
+      <div class="device-basic-info__first">
+        <div class="icon__wrapper">
+          <div class="icon"></div>
+        </div>
+        <div class="text__wrapper header-flex-column">
+          <h2>{{ device.displayName }}</h2>
+          <p>
+            {{ device.entities.length }}
+            <span class="gray-color">ENTITIES</span>
+          </p>
+        </div>
+      </div>
+      <div class="device-basic-info__second header-flex-column">
+        <div>
+          <span class="gray-color">KEY</span>
+          {{ device.key }}
+        </div>
+
+        <div>
+          <span class="gray-color">MAC</span>
+          {{ device.macAddress }}
+        </div>
+      </div>
+    </div>
+  </mat-card>
+  <mat-card class="device-entities device-details__section">
+    <h1 class="entities-title">Entities:</h1>
+    <div class="entity-list">
+      <mat-card
+        class="entity-item mat-elevation-z2"
+        *ngFor="let entity of device.entities"
+      >
+        <div class="icon"></div>
+        <h4>
+          {{ entity.displayName }}
+        </h4>
+        <h3>92 dB</h3>
+        <h5>13 minutes ago</h5>
+      </mat-card>
+    </div>
+  </mat-card>
+</div>
diff --git a/src/app/pages/device-details/device-details.component.scss b/src/app/pages/device-details/device-details.component.scss
@@ -0,0 +1,100 @@
+.device-details-page-wrapper {
+  width: 100vw;
+  max-width: 1000px;
+
+  mat-card.device-details__section {
+    padding: calc(16px + 1.5vw) calc(16px + 1.5vw);
+  }
+}
+
+.entity-list {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  gap: 20px;
+}
+
+.gray-color {
+  color: lightgray;
+}
+
+.device-entities {
+  margin-top: 12px;
+}
+
+.device-basic-info {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: wrap;
+
+  .header-flex-column {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+
+  p {
+    margin: 0px;
+  }
+
+  &__first {
+    display: grid;
+    grid-template-columns: 65px calc(100% - 65px);
+    margin-right: 4vw;
+
+    .text__wrapper {
+      margin-left: 5px;
+    }
+
+    h2 {
+      margin-bottom: 0px;
+      font-size: 28px;
+    }
+  }
+
+  &__second {
+    span {
+      font-size: 18px;
+      font-weight: 500;
+      width: 45px;
+      display: inline-block;
+    }
+    p {
+      font-size: 18px;
+    }
+  }
+}
+
+.entity-item {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  width: 120px;
+
+  &::before {
+    content: " ";
+    background-color: rgba($color: #fff, $alpha: 0.07);
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 4px;
+  }
+
+  h4 {
+    margin: 8px 0;
+  }
+  h3 {
+    margin-bottom: 8px;
+  }
+}
+
+.icon {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  background-color: lightgray;
+}
diff --git a/src/app/pages/device-details/device-details.component.ts b/src/app/pages/device-details/device-details.component.ts
@@ -0,0 +1,47 @@
+import { Component, OnInit } from '@angular/core';
+import { Device } from 'src/app/api/device.model';
+import { Entity, EntityType, UnitType } from 'src/app/api/entity.model';
+
+@Component({
+  selector: 'app-device-details',
+  templateUrl: './device-details.component.html',
+  styleUrls: ['./device-details.component.scss'],
+})
+export class DeviceDetailsComponent implements OnInit {
+  public device = new Device(
+    1,
+    'example key',
+    '11:22:33:44:55:66:77',
+    [
+      new Entity(
+        1,
+        'key1',
+        EntityType.SENSOR,
+        UnitType.DECIMAL,
+        'C',
+        'Entity 1'
+      ),
+      new Entity(
+        2,
+        'key1',
+        EntityType.SENSOR,
+        UnitType.DECIMAL,
+        'C',
+        'Entity 2'
+      ),
+      new Entity(
+        3,
+        'key1',
+        EntityType.SENSOR,
+        UnitType.DECIMAL,
+        'C',
+        'Entity 3'
+      ),
+    ],
+    'Example device'
+  );
+
+  constructor() {}
+
+  ngOnInit(): void {}
+}
diff --git a/src/app/pages/device-list/device-card/device-card.component.html b/src/app/pages/device-list/device-card/device-card.component.html
@@ -0,0 +1,9 @@
+<mat-card class="device-card" [routerLink]="device.id.toString()" matRipple>
+  <div>
+    <div class="device-icon"></div>
+    <h3 class="device-card__h3">
+      {{ device.displayName }}
+    </h3>
+    <p class="device-card__p">Entities: {{ device.entities.length }}</p>
+  </div>
+</mat-card>
diff --git a/src/app/pages/device-list/device-card/device-card.component.scss b/src/app/pages/device-list/device-card/device-card.component.scss
@@ -0,0 +1,44 @@
+.device-icon {
+  width: 60px;
+  height: 60px;
+  background-color: lightgray;
+  border-radius: 50%;
+  margin-bottom: 12px;
+}
+
+.device-card {
+  width: 130px;
+  height: 160px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  user-select: none;
+  cursor: pointer;
+  border: 1px solid #303030;
+
+  &:hover,
+  &:focus {
+    outline: none;
+
+    &::before {
+      /* this should be transformed into some kind of a mixin at a later date */
+      content: " ";
+      background-color: rgba($color: #fff, $alpha: 0.03);
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      border-radius: 4px;
+    }
+  }
+
+  &__h3 {
+    margin-bottom: 5px;
+  }
+
+  &__p {
+    margin-top: 0;
+    font-size: 13px;
+  }
+}
diff --git a/src/app/pages/device-list/device-card/device-card.component.ts b/src/app/pages/device-list/device-card/device-card.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { Device } from 'src/app/api/device.model';
+
+@Component({
+  selector: 'app-device-card',
+  templateUrl: './device-card.component.html',
+  styleUrls: ['./device-card.component.scss'],
+})
+export class DeviceCardComponent implements OnInit {
+  @Input() device!: Device;
+
+  constructor() {}
+
+  ngOnInit(): void {}
+}
diff --git a/src/app/pages/device-list/device-list.component.html b/src/app/pages/device-list/device-list.component.html
@@ -0,0 +1,11 @@
+<div class="device-list-page-wrapper">
+  <mat-card class="no-devices" *ngIf="devicesList.length == 0">
+    <h1>You have no devices at this moment.</h1>
+  </mat-card>
+  <div class="device-list">
+    <app-device-card
+      *ngFor="let device of devicesList"
+      [device]="device"
+    ></app-device-card>
+  </div>
+</div>
diff --git a/src/app/pages/device-list/device-list.component.scss b/src/app/pages/device-list/device-list.component.scss
@@ -0,0 +1,18 @@
+.device-list {
+  &-page-wrapper {
+    width: 100vw;
+    max-width: 1000px;
+  }
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  width: 100%;
+  gap: 20px;
+}
+
+.no-devices {
+  text-align: center;
+}