Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-17 07:50:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(dashboard): add a camera selecting for security cameras widget

Browse source
This commit is contained in:
Alexander Zhukov 2017-07-12 16:20:30 +03:00
parent d9f7580e2d
commit 05c15bb314
3 changed files with 11 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/app/pages/dashboard/security-cameras/security-cameras.component.html
View file

@ -14,12 +14,12 @@
</nga-card-header> </nga-card-header>
<nga-card-body> <nga-card-body>
<div class="cameras single-view" *ngIf="isSingleView"> <div class="cameras single-view" *ngIf="isSingleView">
<div class="camera" [style.background-image]="'url(/assets/images/camera1.jpg)'"> <div class="camera" [style.background-image]="'url(' + selectedCamera.source + ')'">
<span>Camera #1</span> <span>{{ selectedCamera.title }}</span>
</div> </div>
</div> </div>
<div class="cameras" *ngIf="!isSingleView"> <div class="cameras" *ngIf="!isSingleView">
<div class="camera" *ngFor="let c of cameras" [style.background-image]="'url(' + c.source + ')'"> <div class="camera" *ngFor="let c of cameras" [style.background-image]="'url(' + c.source + ')'" (click)="selectCamera(c)">
<span>{{ c.title }}</span> <span>{{ c.title }}</span>
</div> </div>
</div> </div>

1
src/app/pages/dashboard/security-cameras/security-cameras.component.scss
View file

@ -73,6 +73,7 @@
width: 100%; width: 100%;
height: 210px; height: 210px;
opacity: 0.5; opacity: 0.5;
transition: 0.1s;
} }
.camera:hover::before { .camera:hover::before {

7
src/app/pages/dashboard/security-cameras/security-cameras.component.ts
View file

@ -21,6 +21,8 @@ export class SecurityCamerasComponent {
source: '/assets/images/camera4.jpg', source: '/assets/images/camera4.jpg',
}]; }];
selectedCamera: any = this.cameras[0];
userMenu = [{ userMenu = [{
title: 'Profile', title: 'Profile',
}, { }, {
@ -28,4 +30,9 @@ export class SecurityCamerasComponent {
}]; }];
isSingleView: boolean = false; isSingleView: boolean = false;
selectCamera(camera: any) {
this.selectedCamera = camera;
this.isSingleView = true;
}
} }