mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-16 15:40:11 +01:00
feat(dashboard): add a camera selecting for security cameras widget
This commit is contained in:
parent
d9f7580e2d
commit
05c15bb314
3 changed files with 11 additions and 3 deletions
|
|
@ -14,12 +14,12 @@
|
|||
</nga-card-header>
|
||||
<nga-card-body>
|
||||
<div class="cameras single-view" *ngIf="isSingleView">
|
||||
<div class="camera" [style.background-image]="'url(/assets/images/camera1.jpg)'">
|
||||
<span>Camera #1</span>
|
||||
<div class="camera" [style.background-image]="'url(' + selectedCamera.source + ')'">
|
||||
<span>{{ selectedCamera.title }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -73,6 +73,7 @@
|
|||
width: 100%;
|
||||
height: 210px;
|
||||
opacity: 0.5;
|
||||
transition: 0.1s;
|
||||
}
|
||||
|
||||
.camera:hover::before {
|
||||
|
|
|
|||
|
|
@ -21,6 +21,8 @@ export class SecurityCamerasComponent {
|
|||
source: '/assets/images/camera4.jpg',
|
||||
}];
|
||||
|
||||
selectedCamera: any = this.cameras[0];
|
||||
|
||||
userMenu = [{
|
||||
title: 'Profile',
|
||||
}, {
|
||||
|
|
@ -28,4 +30,9 @@ export class SecurityCamerasComponent {
|
|||
}];
|
||||
|
||||
isSingleView: boolean = false;
|
||||
|
||||
selectCamera(camera: any) {
|
||||
this.selectedCamera = camera;
|
||||
this.isSingleView = true;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue