diff --git a/src/app/@core/data/data.module.ts b/src/app/@core/data/data.module.ts new file mode 100644 index 00000000..0dd85a63 --- /dev/null +++ b/src/app/@core/data/data.module.ts @@ -0,0 +1,27 @@ +import { NgModule, ModuleWithProviders } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { UserService } from './users.service'; + +const SERVICES = [ + UserService, +]; + +@NgModule({ + imports: [ + CommonModule, + ], + providers: [ + ...SERVICES, + ], +}) +export class DataModule { + static forRoot(): ModuleWithProviders { + return { + ngModule: DataModule, + providers: [ + ...SERVICES, + ], + }; + } +} diff --git a/src/app/@core/data/users.service.ts b/src/app/@core/data/users.service.ts new file mode 100644 index 00000000..451aedb3 --- /dev/null +++ b/src/app/@core/data/users.service.ts @@ -0,0 +1,35 @@ +import { Injectable } from '@angular/core'; + +let counter = 0; + +@Injectable() +export class UserService { + + private users = { + nick: { name: 'Nick Jones', picture: 'assets/images/nick.png' }, + eva: { name: 'Eva Moor', picture: 'assets/images/eva.png' }, + jack: { name: 'Jack Williams', picture: 'assets/images/jack.png' }, + lee: { name: 'Lee Wong', picture: 'assets/images/lee.png' }, + alan: { name: 'Alan Thompson', picture: 'assets/images/alan.png' }, + kate: { name: 'Kate Martinez', picture: 'assets/images/kate.png' }, + }; + + private userArray: any[]; + + constructor() { + // this.userArray = Object.values(this.users); + } + + getUsers() { + return this.users; + } + + getUserArray() { + return this.userArray; + } + + getUser() { + counter = (counter + 1) % this.userArray.length; + return this.userArray[counter]; + } +} diff --git a/src/app/pages/dashboard/contacts/contacts.component.html b/src/app/pages/dashboard/contacts/contacts.component.html new file mode 100644 index 00000000..99d0ae21 --- /dev/null +++ b/src/app/pages/dashboard/contacts/contacts.component.html @@ -0,0 +1,13 @@ + + + +
+ + +
+ + + Content #2 + + + diff --git a/src/app/pages/dashboard/contacts/contacts.component.scss b/src/app/pages/dashboard/contacts/contacts.component.scss new file mode 100644 index 00000000..cbe82bdf --- /dev/null +++ b/src/app/pages/dashboard/contacts/contacts.component.scss @@ -0,0 +1,44 @@ +@import '../../../@theme/styles/variables'; +@import '~@nga/theme/styles/global/bootstrap/hero-buttons'; + +@include nga-install-component() { + nga-tabset /deep/ ul { + border-bottom: 1px solid nga-theme(separator); + } + + nga-tab { + padding: 0; + } + + .contact { + display: flex; + align-items: center; + justify-content: space-between; + padding: 1rem; + border-bottom: 1px solid nga-theme(separator); + } + + i { + font-size: 2.5rem; + cursor: pointer; + } + + nga-user /deep/ { + .info-container { + margin-left: 0.875rem; + } + + .user-name { + font-size: 1.25rem; + font-weight: nga-theme(font-weight-bolder); + color: nga-theme(color-head); + } + + .user-title { + font-size: 0.875rem; + text-transform: uppercase; + } + } +} + + diff --git a/src/app/pages/dashboard/contacts/contacts.component.ts b/src/app/pages/dashboard/contacts/contacts.component.ts new file mode 100644 index 00000000..9a45374f --- /dev/null +++ b/src/app/pages/dashboard/contacts/contacts.component.ts @@ -0,0 +1,25 @@ +import { Component } from '@angular/core'; + +import { UserService } from '../../../@core/data/users.service'; + +@Component({ + selector: 'ngx-contacts', + styleUrls: ['./contacts.component.scss'], + templateUrl: './contacts.component.html', +}) +export class ContactsComponent { + contacts: any[]; + + constructor(private userService: UserService) { + const users = this.userService.getUsers(); + + this.contacts = [ + { user: users.nick, type: 'mobile' }, + { user: users.eva, type: 'home' }, + { user: users.jack, type: 'mobile' }, + { user: users.lee, type: 'mobile' }, + { user: users.alan, type: 'home' }, + { user: users.kate, type: 'work' }, + ]; + } +} diff --git a/src/app/pages/dashboard/dashboard.component.html b/src/app/pages/dashboard/dashboard.component.html index 8e6f9393..dc3813e6 100644 --- a/src/app/pages/dashboard/dashboard.component.html +++ b/src/app/pages/dashboard/dashboard.component.html @@ -34,20 +34,12 @@ Room Management +
- - - - Content #1 - - - Content #2 - - - +
diff --git a/src/app/pages/dashboard/dashboard.component.scss b/src/app/pages/dashboard/dashboard.component.scss index 5d432378..37eefc04 100644 --- a/src/app/pages/dashboard/dashboard.component.scss +++ b/src/app/pages/dashboard/dashboard.component.scss @@ -1,12 +1,5 @@ @import '../../@theme/styles/variables'; -@import '~@akveo/nga-theme/styles/global/bootstrap/hero-buttons'; @include nga-install-component() { - nga-card-header { - } - - nga-card.contacts nga-tabset /deep/ ul { - border-bottom: 1px solid nga-theme(separator); - } } diff --git a/src/app/pages/dashboard/dashboard.module.ts b/src/app/pages/dashboard/dashboard.module.ts index e662a580..b778c42a 100644 --- a/src/app/pages/dashboard/dashboard.module.ts +++ b/src/app/pages/dashboard/dashboard.module.ts @@ -1,20 +1,25 @@ import { NgModule } from '@angular/core'; -import { NgaTabsetModule } from '@akveo/nga-theme'; +import { NgaTabsetModule, NgaUserModule } from '@akveo/nga-theme'; import { SharedModule } from '../../shared.module'; import { DashboardComponent } from './dashboard.component'; import { StatusCardsComponent } from './status-cards/status-cards.component'; import { TemperatureDraggerComponent } from './temperature-dragger/temperature-dragger.component'; +import { ContactsComponent } from './contacts/contacts.component'; +import { RoomSelectorComponent } from './room-selector/room-selector.component'; @NgModule({ imports: [ - SharedModule, NgaTabsetModule, + NgaUserModule, + SharedModule, ], declarations: [ DashboardComponent, StatusCardsComponent, TemperatureDraggerComponent, + ContactsComponent, + RoomSelectorComponent, ], }) export class DashboardModule { } diff --git a/src/app/pages/dashboard/room-selector/room-selector.component.html b/src/app/pages/dashboard/room-selector/room-selector.component.html new file mode 100644 index 00000000..274bad7e --- /dev/null +++ b/src/app/pages/dashboard/room-selector/room-selector.component.html @@ -0,0 +1,82 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {{room.name.text}} + + diff --git a/src/app/pages/dashboard/room-selector/room-selector.component.scss b/src/app/pages/dashboard/room-selector/room-selector.component.scss new file mode 100644 index 00000000..08faadd3 --- /dev/null +++ b/src/app/pages/dashboard/room-selector/room-selector.component.scss @@ -0,0 +1,59 @@ +:host { + display: block; + align-items: center; + width: 100%; + height: 100%; +} + +svg { + display:block; + width: 100%; + height: 100%; +} + +.stroke-pattern { + fill: none; + stroke: #a1a1e5; + stroke-miterlimit: 10; + opacity: 0.1; + stroke-width: 1px; +} + +.stroked-element { + stroke-width: 4px; + stroke: #a1a1e5; + stroke-miterlimit: 10; + fill: url('#New_Pattern_Swatch_1'); +} + +.room-border { + stroke-width: 4px; + stroke: #a1a1e5; + stroke-miterlimit: 10; + fill: none; + transition: stroke 0.4s ease-out; +} + +.room-bg { + fill: transparent; + stroke: transparent; + cursor: pointer; + transition: fill 0.4s ease-out; +} + +.room-text { + cursor: pointer; + user-select: none; +} + +.selected-room { + z-index: 40; + .room-bg { + stroke: rgba(0, 255, 170, 0.5); + fill: rgba(0, 255, 170, 0.5); + filter: url('#f2'); + } + .room-border { + stroke: #00f9a6; + } +} diff --git a/src/app/pages/dashboard/room-selector/room-selector.component.ts b/src/app/pages/dashboard/room-selector/room-selector.component.ts new file mode 100644 index 00000000..00170020 --- /dev/null +++ b/src/app/pages/dashboard/room-selector/room-selector.component.ts @@ -0,0 +1,78 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'ngx-room-selector', + templateUrl: './room-selector.component.html', + styleUrls: ['./room-selector.component.scss'], +}) +export class RoomSelectorComponent { + selectedRoom: null; + + sortedRooms = []; + + viewBox = '-20 -20 608.88 407.99'; + + 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.21V160H216.21' }, + }, + { + 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,225V354 M216.21,160V92.5H358.8V160 M358.8,225H424.39V312.91a6.09,' + + '6.09,0,0,1,-6.09,6.09H272.71V354' }, + }, + ], + }; + + constructor() { + this.sortRooms(); + } + + 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; + }); + } + + roomSelected(roomNumber) { + this.selectedRoom = roomNumber; + this.sortRooms(); + } +} diff --git a/src/app/pages/pages.module.ts b/src/app/pages/pages.module.ts index fa1347af..1ea3622a 100644 --- a/src/app/pages/pages.module.ts +++ b/src/app/pages/pages.module.ts @@ -8,6 +8,7 @@ import { PagesComponent } from './pages.component'; import { DashboardModule } from './dashboard/dashboard.module'; import { PagesRoutingModule } from './pages-routing.module'; import { ThemeModule } from '../@theme/theme.module'; +import { DataModule } from '../@core/data/data.module'; const PAGES_COMPONENTS = [ PagesComponent, @@ -21,6 +22,7 @@ const PAGES_COMPONENTS = [ NgaMenuModule.forRoot({ items: menuItems }), PagesRoutingModule, ThemeModule, + DataModule.forRoot(), DashboardModule, ], declarations: [ diff --git a/src/assets/images/alan.png b/src/assets/images/alan.png new file mode 100644 index 00000000..9b107cea Binary files /dev/null and b/src/assets/images/alan.png differ diff --git a/src/assets/images/eva.png b/src/assets/images/eva.png new file mode 100644 index 00000000..04baf878 Binary files /dev/null and b/src/assets/images/eva.png differ diff --git a/src/assets/images/jack.png b/src/assets/images/jack.png new file mode 100644 index 00000000..bd9d68c7 Binary files /dev/null and b/src/assets/images/jack.png differ diff --git a/src/assets/images/kate.png b/src/assets/images/kate.png new file mode 100644 index 00000000..0ec8a192 Binary files /dev/null and b/src/assets/images/kate.png differ diff --git a/src/assets/images/lee.png b/src/assets/images/lee.png new file mode 100644 index 00000000..95c1ef73 Binary files /dev/null and b/src/assets/images/lee.png differ diff --git a/src/assets/images/nick.png b/src/assets/images/nick.png new file mode 100644 index 00000000..0045d240 Binary files /dev/null and b/src/assets/images/nick.png differ