slicing ui cctv
This commit is contained in:
@@ -26,6 +26,7 @@ import { DetailRoomComponent } from './detail-room/detail-room.component';
|
||||
import { FilterTopUsePipe } from './monitoring.pipe';
|
||||
import { SurveillanceComponent } from './surveillance/surveillance.component';
|
||||
import { WaterComponent } from './water/water.component';
|
||||
import { NgSelectModule } from '@ng-select/ng-select';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
@@ -55,6 +56,7 @@ import { WaterComponent } from './water/water.component';
|
||||
NgxPhotoswipeModule,
|
||||
NgxMasonryModule,
|
||||
UiSwitchModule,
|
||||
NgSelectModule,
|
||||
NgxEchartsModule.forRoot({
|
||||
echarts: () => import('echarts')
|
||||
}),
|
||||
|
||||
@@ -1,44 +1,20 @@
|
||||
.bg-maintenance-image {
|
||||
background-size: cover;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.centered-card {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.box-shadow-2 {
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.box-shadow-3 {
|
||||
box-shadow: 0 3px 20px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
padding: 20px;
|
||||
max-width: 400px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
:host ::ng-deep .ng-select .ng-select-container {
|
||||
color: #ffffff !important;
|
||||
background-color: #252525 !important;
|
||||
height: 40px !important;
|
||||
}
|
||||
|
||||
.background-round {
|
||||
background-color: #252525 !important;
|
||||
padding: 8px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #BEF264;
|
||||
border-color: #BEF264 !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .my-gallery .img-thumbnail {
|
||||
padding: .25rem;
|
||||
background-color: #F4F5FA;
|
||||
border: 1px solid #626E82;
|
||||
border-radius: .25rem;
|
||||
}
|
||||
@@ -1,30 +1,253 @@
|
||||
<div class="app-content content bg-maintenance-image">
|
||||
<div class="app-content content" style="background-color: #000000 !important">
|
||||
<div class="content-wrapper">
|
||||
<div class="content-header row mb-1">
|
||||
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
|
||||
</div>
|
||||
<div class="content-body">
|
||||
<section class="flexbox-container">
|
||||
<div class="centered-card">
|
||||
<div class="card box-shadow-3">
|
||||
<div class="card-body">
|
||||
<span class="card-title text-center">
|
||||
<img
|
||||
src="assets/images/logo/smart.png"
|
||||
class="img-fluid mx-auto d-block pt-2"
|
||||
width="250"
|
||||
alt="logo"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div class="card-body text-center">
|
||||
<h3 style="font-weight: 600; color: #000000">Coming Soon</h3>
|
||||
<p style="color: #000000">
|
||||
We're working hard to bring you this page. <br />
|
||||
Please check back later.
|
||||
</p>
|
||||
<div class="mt-2">
|
||||
<i class="la la-cog spinner font-large-2"></i>
|
||||
<section id="filter">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card" style="background-color: #252525 !important">
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-2">
|
||||
<div class="form-group">
|
||||
<ng-select
|
||||
class="select-custom"
|
||||
[items]="dataBuildingList"
|
||||
[searchable]="true"
|
||||
bindLabel="name"
|
||||
bindValue="id"
|
||||
placeholder="Select Building"
|
||||
[(ngModel)]="buildingSelected"
|
||||
>
|
||||
</ng-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<div class="form-group">
|
||||
<ng-select
|
||||
class="select-custom"
|
||||
[items]="dataMasterCategori"
|
||||
[searchable]="true"
|
||||
bindLabel="name"
|
||||
bindValue="id"
|
||||
placeholder="Select Category"
|
||||
[(ngModel)]="categorySelected"
|
||||
>
|
||||
</ng-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<div class="form-group">
|
||||
<ng-select
|
||||
class="select-custom"
|
||||
[items]="dataMasterStatus"
|
||||
[searchable]="true"
|
||||
bindLabel="name"
|
||||
bindValue="id"
|
||||
placeholder="Select Status"
|
||||
[(ngModel)]="statusSelected"
|
||||
>
|
||||
</ng-select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-2 text-left">
|
||||
<div class="d-flex">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-outline-success ml-2"
|
||||
(click)="doFilter()"
|
||||
style="
|
||||
background-color: #252525 !important;
|
||||
border-color: #bef264 !important;
|
||||
"
|
||||
[disabled]="spinnerFilterActive"
|
||||
>
|
||||
<i
|
||||
class="la la-search"
|
||||
style="color: #ffffff !important"
|
||||
*ngIf="!spinnerFilterActive"
|
||||
></i>
|
||||
<i
|
||||
class="la la-spinner spinner"
|
||||
style="color: #ffffff !important"
|
||||
*ngIf="spinnerFilterActive"
|
||||
></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-2"></div>
|
||||
</div>
|
||||
|
||||
<div class="card-dashboard"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="configuration">
|
||||
<div class="row">
|
||||
<div class="col-lg-4 col-12">
|
||||
<div
|
||||
class="card pull-up"
|
||||
style="background-color: #252525 !important"
|
||||
>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="media d-flex">
|
||||
<div class="media-body text-left">
|
||||
<h6 class="text-muted" style="color: #ffffff !important">
|
||||
Total Device
|
||||
</h6>
|
||||
<h3 style="color: #ffffff !important">123123</h3>
|
||||
</div>
|
||||
<div class="align-self-center">
|
||||
<i
|
||||
class="feather ft-zap primary font-large-2 float-right"
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-12">
|
||||
<div
|
||||
class="card pull-up"
|
||||
style="background-color: #252525 !important"
|
||||
>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="media d-flex">
|
||||
<div class="media-body text-left">
|
||||
<h6 class="text-light" style="color: #ffffff !important">
|
||||
Total Device Active
|
||||
</h6>
|
||||
<h3 style="color: #ffffff !important">13123</h3>
|
||||
</div>
|
||||
<div class="align-self-center">
|
||||
<i
|
||||
class="feather ft-wifi success font-large-2 float-right"
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-12">
|
||||
<div
|
||||
class="card pull-up"
|
||||
style="background-color: #252525 !important"
|
||||
>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="media d-flex">
|
||||
<div class="media-body text-left">
|
||||
<h6 class="text-muted" style="color: #ffffff !important">
|
||||
Total Device Non-Active
|
||||
</h6>
|
||||
<h3 style="color: #ffffff !important">13123</h3>
|
||||
</div>
|
||||
<div class="align-self-center">
|
||||
<i
|
||||
class="feather ft-wifi-off danger font-large-2 float-right"
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="configuration">
|
||||
<div class="row mb-2">
|
||||
<div class="col-12">
|
||||
<iframe
|
||||
#videoIframe
|
||||
allowfullscreen
|
||||
frameBorder="0"
|
||||
class="img-thumbnail"
|
||||
[loading]="true"
|
||||
width="100%"
|
||||
style="height: 500px !important"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-3 col-md-6 col-12">
|
||||
<div class="card" style="background-color: #252525 !important">
|
||||
<div class="card-content">
|
||||
<label style="color: #ffffff;">Pengadilan Agama Padang Cam 1</label>
|
||||
<img
|
||||
class="card-img-top img-fluid"
|
||||
src="../../../../../assets/images/cctv.jpg"
|
||||
alt="Image 1"
|
||||
(click)="
|
||||
onClick(
|
||||
'https://pdg2.cctvbadilag.my.id:5443/401900PTAPADANG/play.html?name=034163533934088379392939'
|
||||
)
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6 col-12">
|
||||
<div class="card" style="background-color: #252525 !important">
|
||||
<div class="card-content">
|
||||
<label style="color: #ffffff;">Pengadilan Agama Padang Cam 2</label>
|
||||
<img
|
||||
class="card-img-top img-fluid"
|
||||
src="../../../../../assets/images/cctv.jpg"
|
||||
alt="Image 2"
|
||||
(click)="
|
||||
onClick(
|
||||
'https://pdg2.cctvbadilag.my.id:5443/401900PTAPADANG/play.html?name=671014455048381705129283'
|
||||
)
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6 col-12">
|
||||
<div class="card" style="background-color: #252525 !important">
|
||||
<div class="card-content">
|
||||
<label style="color: #ffffff;">Pengadilan Agama Purwakarta Cam 1</label>
|
||||
<img
|
||||
class="card-img-top img-fluid"
|
||||
src="../../../../../assets/images/cctv.jpg"
|
||||
alt="Image 2"
|
||||
(click)="
|
||||
onClick(
|
||||
'https://bdg2.cctvbadilag.my.id:5443/400854PAPURWAKARTA/play.html?name=194533247298993755522217'
|
||||
)
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6 col-12">
|
||||
<div class="card" style="background-color: #252525 !important">
|
||||
<div class="card-content">
|
||||
<label style="color: #ffffff;">Pengadilan Agama Purwakarta Cam 2</label>
|
||||
<img
|
||||
class="card-img-top img-fluid"
|
||||
src="../../../../../assets/images/cctv.jpg"
|
||||
alt="Image 2"
|
||||
(click)="
|
||||
onClick(
|
||||
'https://bdg2.cctvbadilag.my.id:5443/400854PAPURWAKARTA/play.html?name=113658520181242556385273'
|
||||
)
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,10 +1,155 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { Component, ElementRef, ViewChild } from "@angular/core";
|
||||
import { Router } from "@angular/router";
|
||||
import { DeviceService } from "../../service/device.service";
|
||||
import { BuildingService } from "../../service/monitoring-api.service";
|
||||
import videojs from "video.js";
|
||||
|
||||
@Component({
|
||||
selector: 'app-surveillance',
|
||||
templateUrl: './surveillance.component.html',
|
||||
styleUrls: ['./surveillance.component.css']
|
||||
selector: "app-surveillance",
|
||||
templateUrl: "./surveillance.component.html",
|
||||
styleUrls: ["./surveillance.component.css"],
|
||||
})
|
||||
export class SurveillanceComponent {
|
||||
@ViewChild('videoPlayer', { static: false }) videoPlayer: ElementRef;
|
||||
@ViewChild('videoIframe', { static: false }) videoIframe: ElementRef;
|
||||
data: any;
|
||||
totalOn: any;
|
||||
totalOff: any;
|
||||
filteredRows: any[];
|
||||
searchTerm: string = "";
|
||||
buildingSelected: any;
|
||||
statusSelected: any;
|
||||
categorySelected: any;
|
||||
dataMasterCategori: any;
|
||||
dataBuildingList: any;
|
||||
dataMasterStatus: any;
|
||||
storedData: any;
|
||||
spinnerFilterActive = false;
|
||||
switchState: boolean;
|
||||
|
||||
public breadcrumb: any;
|
||||
spinnerActive: boolean = false;
|
||||
|
||||
singlebasicSelected: any;
|
||||
|
||||
mainPlayer: any;
|
||||
videos = "";
|
||||
|
||||
constructor(
|
||||
private router: Router,
|
||||
private deviceService: DeviceService,
|
||||
private monitoringApiService: BuildingService
|
||||
) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
mainlabel: "Device",
|
||||
links: [
|
||||
{
|
||||
name: "Home",
|
||||
isLink: false,
|
||||
link: "/dashboard/sales",
|
||||
},
|
||||
{
|
||||
name: "Device",
|
||||
isLink: false,
|
||||
},
|
||||
],
|
||||
};
|
||||
this.storedData = JSON.parse(localStorage.getItem("currentUser"));
|
||||
this.buildingSelected = this.storedData.buildingId;
|
||||
this.fetchData(
|
||||
this.buildingSelected,
|
||||
this.categorySelected,
|
||||
this.statusSelected
|
||||
);
|
||||
this.dataListMaster();
|
||||
this.dataListBuilding();
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
//Called after ngAfterContentInit when the component's view has been initialized. Applies to components only.
|
||||
//Add 'implements AfterViewInit' to the class.
|
||||
|
||||
}
|
||||
|
||||
fetchData(buildingSelected, categorySelected, statusSelected) {
|
||||
this.deviceService
|
||||
.getDeviceData(buildingSelected, categorySelected, statusSelected)
|
||||
.subscribe((res) => {
|
||||
this.data = res;
|
||||
this.filteredRows = this.data.results.data;
|
||||
console.log(this.filteredRows);
|
||||
});
|
||||
}
|
||||
|
||||
dataListMaster() {
|
||||
this.monitoringApiService.getMasterListData().subscribe((data) => {
|
||||
const dataCategory = data.data.find(
|
||||
(item) => item.name === "master_category"
|
||||
).headerDetailParam;
|
||||
const dataStatus = data.data.find(
|
||||
(item) => item.name === "master_status"
|
||||
).headerDetailParam;
|
||||
this.dataMasterCategori = dataCategory.filter(
|
||||
(item) => item.status === "2"
|
||||
);
|
||||
this.dataMasterStatus = dataStatus.filter((item) => item.status === "2");
|
||||
});
|
||||
}
|
||||
|
||||
dataListBuilding() {
|
||||
this.monitoringApiService.getBuildingList().subscribe((data) => {
|
||||
this.dataBuildingList = data.data.filter((item) => item.statusId === 2);
|
||||
});
|
||||
}
|
||||
|
||||
doFilter() {
|
||||
this.spinnerFilterActive = true;
|
||||
this.fetchData(
|
||||
this.buildingSelected,
|
||||
this.categorySelected,
|
||||
this.statusSelected
|
||||
);
|
||||
setTimeout(() => {
|
||||
this.spinnerFilterActive = false;
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
filterRows() {
|
||||
if (!this.searchTerm) {
|
||||
this.filteredRows = [...this.data.results.data];
|
||||
} else {
|
||||
this.filteredRows = this.data.results.data.filter((row) =>
|
||||
this.rowContainsSearchTerm(row)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
rowContainsSearchTerm(row: any): boolean {
|
||||
const searchTermLC = this.searchTerm.toLowerCase();
|
||||
return Object.values(row).some(
|
||||
(value) =>
|
||||
value !== null && value.toString().toLowerCase().includes(searchTermLC)
|
||||
);
|
||||
}
|
||||
|
||||
switchChanged(ev, data) {
|
||||
console.log(ev);
|
||||
console.log(data);
|
||||
const requestData = {
|
||||
device_id: data.device_id,
|
||||
switch: data.mapping[0].switch,
|
||||
value: ev,
|
||||
command_type: "on_off",
|
||||
};
|
||||
this.deviceService.deviceSwitch(requestData).subscribe((res) => {
|
||||
console.log(res);
|
||||
});
|
||||
}
|
||||
|
||||
onClick(videoUrl: string) {
|
||||
const iframe = this.videoIframe.nativeElement;
|
||||
iframe.src = videoUrl;
|
||||
}
|
||||
}
|
||||
|
||||
BIN
src/assets/images/cctv.jpg
Normal file
BIN
src/assets/images/cctv.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 398 KiB |
@@ -33,11 +33,15 @@
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i%7CQuicksand:300,400,500,700"
|
||||
rel="stylesheet">
|
||||
|
||||
<!-- <link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet"> -->
|
||||
<!-- <link href="https://vjs.zencdn.net/8.10.0/video-js.css" rel="stylesheet" /> -->
|
||||
|
||||
</head>
|
||||
|
||||
<body class="vertical-layout 1-column blank-page pace-done menu-collapsed menu-hide vertical-overlay-menu" data-open="click" data-menu="vertical-menu-modern" data-col="2-columns">
|
||||
|
||||
<app-main></app-main>
|
||||
|
||||
<!-- <script src="https://vjs.zencdn.net/7.14.3/video.min.js"></script> -->
|
||||
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-youtube/2.6.2/Youtube.min.js"></script> -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user