slicing ui cctv

This commit is contained in:
Fuzi_fauzia 2024-06-22 01:52:09 +07:00
parent 1ebe1acc12
commit 024eb6bfc7
8 changed files with 901 additions and 72 deletions

478
package-lock.json generated
View File

@ -86,6 +86,7 @@
"tslib": "^2.4.1",
"util": "^0.12.5",
"uuid": "^9.0.0",
"video.js": "^8.12.0",
"xlsx": "^0.18.5"
},
"devDependencies": {
@ -5585,6 +5586,52 @@
"url": "https://opencollective.com/typescript-eslint"
}
},
"node_modules/@videojs/http-streaming": {
"version": "3.12.1",
"resolved": "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-3.12.1.tgz",
"integrity": "sha512-rpB5AMt0QZ9bMXzwiWhynF2NLNnm5g2DZjPOFX6OoFqqXhbe2ngY2nqm9lLRhRVe22YeysQCmAlvBNwGuWFI8Q==",
"dependencies": {
"@babel/runtime": "^7.12.5",
"@videojs/vhs-utils": "4.0.0",
"aes-decrypter": "4.0.1",
"global": "^4.4.0",
"m3u8-parser": "^7.1.0",
"mpd-parser": "^1.3.0",
"mux.js": "7.0.3",
"video.js": "^7 || ^8"
},
"engines": {
"node": ">=8",
"npm": ">=5"
},
"peerDependencies": {
"video.js": "^8.11.0"
}
},
"node_modules/@videojs/vhs-utils": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-4.0.0.tgz",
"integrity": "sha512-xJp7Yd4jMLwje2vHCUmi8MOUU76nxiwII3z4Eg3Ucb+6rrkFVGosrXlMgGnaLjq724j3wzNElRZ71D/CKrTtxg==",
"dependencies": {
"@babel/runtime": "^7.12.5",
"global": "^4.4.0",
"url-toolkit": "^2.2.1"
},
"engines": {
"node": ">=8",
"npm": ">=5"
}
},
"node_modules/@videojs/xhr": {
"version": "2.6.0",
"resolved": "https://registry.npmjs.org/@videojs/xhr/-/xhr-2.6.0.tgz",
"integrity": "sha512-7J361GiN1tXpm+gd0xz2QWr3xNWBE+rytvo8J3KuggFaLg+U37gZQ2BuPLcnkfGffy2e+ozY70RHC8jt7zjA6Q==",
"dependencies": {
"@babel/runtime": "^7.5.5",
"global": "~4.4.0",
"is-function": "^1.0.1"
}
},
"node_modules/@webassemblyjs/ast": {
"version": "1.11.1",
"resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
@ -5721,6 +5768,14 @@
"resolved": "https://registry.npmjs.org/@webcomponents/webcomponentsjs/-/webcomponentsjs-2.7.0.tgz",
"integrity": "sha512-j161Z9oiy8k74vchdrQGihfSp7QulrTclCUiPo0D7JF6/RjpXAmB0ThlTAFlSElkgqg0vdFgNAXaX9ZHZy25wQ=="
},
"node_modules/@xmldom/xmldom": {
"version": "0.8.10",
"resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.10.tgz",
"integrity": "sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==",
"engines": {
"node": ">=10.0.0"
}
},
"node_modules/@xtuc/ieee754": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
@ -5833,6 +5888,31 @@
"node": ">=0.8"
}
},
"node_modules/aes-decrypter": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/aes-decrypter/-/aes-decrypter-4.0.1.tgz",
"integrity": "sha512-H1nh/P9VZXUf17AA5NQfJML88CFjVBDuGkp5zDHa7oEhYN9TTpNLJknRY1ie0iSKWlDf6JRnJKaZVDSQdPy6Cg==",
"dependencies": {
"@babel/runtime": "^7.12.5",
"@videojs/vhs-utils": "^3.0.5",
"global": "^4.4.0",
"pkcs7": "^1.0.4"
}
},
"node_modules/aes-decrypter/node_modules/@videojs/vhs-utils": {
"version": "3.0.5",
"resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-3.0.5.tgz",
"integrity": "sha512-PKVgdo8/GReqdx512F+ombhS+Bzogiofy1LgAj4tN8PfdBx3HSS7V5WfJotKTqtOWGwVfSWsrYN/t09/DSryrw==",
"dependencies": {
"@babel/runtime": "^7.12.5",
"global": "^4.4.0",
"url-toolkit": "^2.2.1"
},
"engines": {
"node": ">=8",
"npm": ">=5"
}
},
"node_modules/agent-base": {
"version": "6.0.2",
"resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
@ -7953,6 +8033,11 @@
"url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
}
},
"node_modules/dom-walk": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
"integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
},
"node_modules/domelementtype": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
@ -10152,6 +10237,15 @@
"node": ">=10"
}
},
"node_modules/global": {
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
"integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
"dependencies": {
"min-document": "^2.19.0",
"process": "^0.11.10"
}
},
"node_modules/globals": {
"version": "11.12.0",
"resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
@ -10764,6 +10858,11 @@
"node": ">=8"
}
},
"node_modules/individual": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/individual/-/individual-2.0.0.tgz",
"integrity": "sha512-pWt8hBCqJsUWI/HtcfWod7+N9SgAqyPEaF7JQjwzjn5vGrpg6aQ5qeAFQ7dx//UH4J1O+7xqew+gCeeFt6xN/g=="
},
"node_modules/infer-owner": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz",
@ -11164,6 +11263,11 @@
"node": ">=8"
}
},
"node_modules/is-function": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.2.tgz",
"integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ=="
},
"node_modules/is-generator-function": {
"version": "1.0.10",
"resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz",
@ -12055,6 +12159,11 @@
"node": ">=10"
}
},
"node_modules/keycode": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz",
"integrity": "sha512-ps3I9jAdNtRpJrbBvQjpzyFbss/skHqzS+eu4RxKLaEAtFqkjZaB6TZMSivPbLxf4K7VI4SjR0P5mRCX5+Q25A=="
},
"node_modules/kind-of": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
@ -12425,6 +12534,30 @@
"yallist": "^3.0.2"
}
},
"node_modules/m3u8-parser": {
"version": "7.1.0",
"resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-7.1.0.tgz",
"integrity": "sha512-7N+pk79EH4oLKPEYdgRXgAsKDyA/VCo0qCHlUwacttQA0WqsjZQYmNfywMvjlY9MpEBVZEt0jKFd73Kv15EBYQ==",
"dependencies": {
"@babel/runtime": "^7.12.5",
"@videojs/vhs-utils": "^3.0.5",
"global": "^4.4.0"
}
},
"node_modules/m3u8-parser/node_modules/@videojs/vhs-utils": {
"version": "3.0.5",
"resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-3.0.5.tgz",
"integrity": "sha512-PKVgdo8/GReqdx512F+ombhS+Bzogiofy1LgAj4tN8PfdBx3HSS7V5WfJotKTqtOWGwVfSWsrYN/t09/DSryrw==",
"dependencies": {
"@babel/runtime": "^7.12.5",
"global": "^4.4.0",
"url-toolkit": "^2.2.1"
},
"engines": {
"node": ">=8",
"npm": ">=5"
}
},
"node_modules/magic-string": {
"version": "0.26.7",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.26.7.tgz",
@ -12718,6 +12851,14 @@
"node": ">=6"
}
},
"node_modules/min-document": {
"version": "2.19.0",
"resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
"integrity": "sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==",
"dependencies": {
"dom-walk": "^0.1.0"
}
},
"node_modules/mingo": {
"version": "6.2.5",
"resolved": "https://registry.npmjs.org/mingo/-/mingo-6.2.5.tgz",
@ -12979,6 +13120,20 @@
"rimraf": "bin.js"
}
},
"node_modules/mpd-parser": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/mpd-parser/-/mpd-parser-1.3.0.tgz",
"integrity": "sha512-WgeIwxAqkmb9uTn4ClicXpEQYCEduDqRKfmUdp4X8vmghKfBNXZLYpREn9eqrDx/Tf5LhzRcJLSpi4ohfV742Q==",
"dependencies": {
"@babel/runtime": "^7.12.5",
"@videojs/vhs-utils": "^4.0.0",
"@xmldom/xmldom": "^0.8.3",
"global": "^4.4.0"
},
"bin": {
"mpd-to-m3u8-json": "bin/parse.js"
}
},
"node_modules/ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@ -13002,6 +13157,22 @@
"resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
"integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA=="
},
"node_modules/mux.js": {
"version": "7.0.3",
"resolved": "https://registry.npmjs.org/mux.js/-/mux.js-7.0.3.tgz",
"integrity": "sha512-gzlzJVEGFYPtl2vvEiJneSWAWD4nfYRHD5XgxmB2gWvXraMPOYk+sxfvexmNfjQUFpmk6hwLR5C6iSFmuwCHdQ==",
"dependencies": {
"@babel/runtime": "^7.11.2",
"global": "^4.4.0"
},
"bin": {
"muxjs-transmux": "bin/transmux.js"
},
"engines": {
"node": ">=8",
"npm": ">=5"
}
},
"node_modules/nanoid": {
"version": "3.3.4",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
@ -15783,6 +15954,17 @@
"nice-napi": "^1.0.2"
}
},
"node_modules/pkcs7": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/pkcs7/-/pkcs7-1.0.4.tgz",
"integrity": "sha512-afRERtHn54AlwaF2/+LFszyAANTCggGilmcmILUzEjvs3XgFZT+xE6+QWQcAGmu4xajy+Xtj7acLOPdx5/eXWQ==",
"dependencies": {
"@babel/runtime": "^7.5.5"
},
"bin": {
"pkcs7": "bin/cli.js"
}
},
"node_modules/pkg-dir": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
@ -15964,6 +16146,14 @@
"node": "^12.13.0 || ^14.15.0 || >=16.0.0"
}
},
"node_modules/process": {
"version": "0.11.10",
"resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
"integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
"engines": {
"node": ">= 0.6.0"
}
},
"node_modules/process-nextick-args": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@ -16920,6 +17110,14 @@
"resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
"integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw=="
},
"node_modules/rust-result": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/rust-result/-/rust-result-1.0.0.tgz",
"integrity": "sha512-6cJzSBU+J/RJCF063onnQf0cDUOHs9uZI1oroSGnHOph+CQTIJ5Pp2hK5kEQq1+7yE/EEWfulSNXAQ2jikPthA==",
"dependencies": {
"individual": "^2.0.0"
}
},
"node_modules/rxfire": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/rxfire/-/rxfire-6.0.3.tgz",
@ -16970,6 +17168,14 @@
}
]
},
"node_modules/safe-json-parse": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/safe-json-parse/-/safe-json-parse-4.0.0.tgz",
"integrity": "sha512-RjZPPHugjK0TOzFrLZ8inw44s9bKox99/0AZW9o/BEQVrJfhI+fIHMErnPyRa89/yRXUUr93q+tiN6zhoVV4wQ==",
"dependencies": {
"rust-result": "^1.0.0"
}
},
"node_modules/safe-regex-test": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.0.tgz",
@ -18560,6 +18766,11 @@
"punycode": "^2.1.0"
}
},
"node_modules/url-toolkit": {
"version": "2.2.5",
"resolved": "https://registry.npmjs.org/url-toolkit/-/url-toolkit-2.2.5.tgz",
"integrity": "sha512-mtN6xk+Nac+oyJ/PrI7tzfmomRVNFIWKUbG8jdYFt52hxbiReFAXIjYskvu64/dvuW71IcB7lV8l0HvZMac6Jg=="
},
"node_modules/util": {
"version": "0.12.5",
"resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz",
@ -18664,6 +18875,55 @@
"resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
"integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ=="
},
"node_modules/video.js": {
"version": "8.12.0",
"resolved": "https://registry.npmjs.org/video.js/-/video.js-8.12.0.tgz",
"integrity": "sha512-bLjfg3y09CAed1xZ4FujdTW7G9kgL0CJHaBnDKwBUgYuutijCutYPP5yQGCdN6VOi76uEuOpINwmTJSJia6zww==",
"dependencies": {
"@babel/runtime": "^7.12.5",
"@videojs/http-streaming": "3.12.1",
"@videojs/vhs-utils": "^4.0.0",
"@videojs/xhr": "2.6.0",
"aes-decrypter": "^4.0.1",
"global": "4.4.0",
"keycode": "2.2.0",
"m3u8-parser": "^7.1.0",
"mpd-parser": "^1.2.2",
"mux.js": "^7.0.1",
"safe-json-parse": "4.0.0",
"videojs-contrib-quality-levels": "4.1.0",
"videojs-font": "4.1.0",
"videojs-vtt.js": "0.15.5"
}
},
"node_modules/videojs-contrib-quality-levels": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/videojs-contrib-quality-levels/-/videojs-contrib-quality-levels-4.1.0.tgz",
"integrity": "sha512-TfrXJJg1Bv4t6TOCMEVMwF/CoS8iENYsWNKip8zfhB5kTcegiFYezEA0eHAJPU64ZC8NQbxQgOwAsYU8VXbOWA==",
"dependencies": {
"global": "^4.4.0"
},
"engines": {
"node": ">=16",
"npm": ">=8"
},
"peerDependencies": {
"video.js": "^8"
}
},
"node_modules/videojs-font": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-4.1.0.tgz",
"integrity": "sha512-X1LuPfLZPisPLrANIAKCknZbZu5obVM/ylfd1CN+SsCmPZQ3UMDPcvLTpPBJxcBuTpHQq2MO1QCFt7p8spnZ/w=="
},
"node_modules/videojs-vtt.js": {
"version": "0.15.5",
"resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.15.5.tgz",
"integrity": "sha512-yZbBxvA7QMYn15Lr/ZfhhLPrNpI/RmCSCqgIff57GC2gIrV5YfyzLfLyZMj0NnZSAz8syB4N0nHXpZg9MyrMOQ==",
"dependencies": {
"global": "^4.3.1"
}
},
"node_modules/void-elements": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz",
@ -23406,6 +23666,41 @@
"eslint-visitor-keys": "^3.3.0"
}
},
"@videojs/http-streaming": {
"version": "3.12.1",
"resolved": "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-3.12.1.tgz",
"integrity": "sha512-rpB5AMt0QZ9bMXzwiWhynF2NLNnm5g2DZjPOFX6OoFqqXhbe2ngY2nqm9lLRhRVe22YeysQCmAlvBNwGuWFI8Q==",
"requires": {
"@babel/runtime": "^7.12.5",
"@videojs/vhs-utils": "4.0.0",
"aes-decrypter": "4.0.1",
"global": "^4.4.0",
"m3u8-parser": "^7.1.0",
"mpd-parser": "^1.3.0",
"mux.js": "7.0.3",
"video.js": "^7 || ^8"
}
},
"@videojs/vhs-utils": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-4.0.0.tgz",
"integrity": "sha512-xJp7Yd4jMLwje2vHCUmi8MOUU76nxiwII3z4Eg3Ucb+6rrkFVGosrXlMgGnaLjq724j3wzNElRZ71D/CKrTtxg==",
"requires": {
"@babel/runtime": "^7.12.5",
"global": "^4.4.0",
"url-toolkit": "^2.2.1"
}
},
"@videojs/xhr": {
"version": "2.6.0",
"resolved": "https://registry.npmjs.org/@videojs/xhr/-/xhr-2.6.0.tgz",
"integrity": "sha512-7J361GiN1tXpm+gd0xz2QWr3xNWBE+rytvo8J3KuggFaLg+U37gZQ2BuPLcnkfGffy2e+ozY70RHC8jt7zjA6Q==",
"requires": {
"@babel/runtime": "^7.5.5",
"global": "~4.4.0",
"is-function": "^1.0.1"
}
},
"@webassemblyjs/ast": {
"version": "1.11.1",
"resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
@ -23542,6 +23837,11 @@
"resolved": "https://registry.npmjs.org/@webcomponents/webcomponentsjs/-/webcomponentsjs-2.7.0.tgz",
"integrity": "sha512-j161Z9oiy8k74vchdrQGihfSp7QulrTclCUiPo0D7JF6/RjpXAmB0ThlTAFlSElkgqg0vdFgNAXaX9ZHZy25wQ=="
},
"@xmldom/xmldom": {
"version": "0.8.10",
"resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.10.tgz",
"integrity": "sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw=="
},
"@xtuc/ieee754": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
@ -23631,6 +23931,29 @@
"resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.3.1.tgz",
"integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A=="
},
"aes-decrypter": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/aes-decrypter/-/aes-decrypter-4.0.1.tgz",
"integrity": "sha512-H1nh/P9VZXUf17AA5NQfJML88CFjVBDuGkp5zDHa7oEhYN9TTpNLJknRY1ie0iSKWlDf6JRnJKaZVDSQdPy6Cg==",
"requires": {
"@babel/runtime": "^7.12.5",
"@videojs/vhs-utils": "^3.0.5",
"global": "^4.4.0",
"pkcs7": "^1.0.4"
},
"dependencies": {
"@videojs/vhs-utils": {
"version": "3.0.5",
"resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-3.0.5.tgz",
"integrity": "sha512-PKVgdo8/GReqdx512F+ombhS+Bzogiofy1LgAj4tN8PfdBx3HSS7V5WfJotKTqtOWGwVfSWsrYN/t09/DSryrw==",
"requires": {
"@babel/runtime": "^7.12.5",
"global": "^4.4.0",
"url-toolkit": "^2.2.1"
}
}
}
},
"agent-base": {
"version": "6.0.2",
"resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
@ -25226,6 +25549,11 @@
"entities": "^4.2.0"
}
},
"dom-walk": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
"integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
},
"domelementtype": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
@ -26866,6 +27194,15 @@
"resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
"integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw=="
},
"global": {
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
"integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
"requires": {
"min-document": "^2.19.0",
"process": "^0.11.10"
}
},
"globals": {
"version": "11.12.0",
"resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
@ -27336,6 +27673,11 @@
"integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
"dev": true
},
"individual": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/individual/-/individual-2.0.0.tgz",
"integrity": "sha512-pWt8hBCqJsUWI/HtcfWod7+N9SgAqyPEaF7JQjwzjn5vGrpg6aQ5qeAFQ7dx//UH4J1O+7xqew+gCeeFt6xN/g=="
},
"infer-owner": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz",
@ -27622,6 +27964,11 @@
"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="
},
"is-function": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.2.tgz",
"integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ=="
},
"is-generator-function": {
"version": "1.0.10",
"resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz",
@ -28291,6 +28638,11 @@
"source-map-support": "^0.5.5"
}
},
"keycode": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz",
"integrity": "sha512-ps3I9jAdNtRpJrbBvQjpzyFbss/skHqzS+eu4RxKLaEAtFqkjZaB6TZMSivPbLxf4K7VI4SjR0P5mRCX5+Q25A=="
},
"kind-of": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
@ -28575,6 +28927,28 @@
"yallist": "^3.0.2"
}
},
"m3u8-parser": {
"version": "7.1.0",
"resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-7.1.0.tgz",
"integrity": "sha512-7N+pk79EH4oLKPEYdgRXgAsKDyA/VCo0qCHlUwacttQA0WqsjZQYmNfywMvjlY9MpEBVZEt0jKFd73Kv15EBYQ==",
"requires": {
"@babel/runtime": "^7.12.5",
"@videojs/vhs-utils": "^3.0.5",
"global": "^4.4.0"
},
"dependencies": {
"@videojs/vhs-utils": {
"version": "3.0.5",
"resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-3.0.5.tgz",
"integrity": "sha512-PKVgdo8/GReqdx512F+ombhS+Bzogiofy1LgAj4tN8PfdBx3HSS7V5WfJotKTqtOWGwVfSWsrYN/t09/DSryrw==",
"requires": {
"@babel/runtime": "^7.12.5",
"global": "^4.4.0",
"url-toolkit": "^2.2.1"
}
}
}
},
"magic-string": {
"version": "0.26.7",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.26.7.tgz",
@ -28800,6 +29174,14 @@
"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
"integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg=="
},
"min-document": {
"version": "2.19.0",
"resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
"integrity": "sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==",
"requires": {
"dom-walk": "^0.1.0"
}
},
"mingo": {
"version": "6.2.5",
"resolved": "https://registry.npmjs.org/mingo/-/mingo-6.2.5.tgz",
@ -29004,6 +29386,17 @@
}
}
},
"mpd-parser": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/mpd-parser/-/mpd-parser-1.3.0.tgz",
"integrity": "sha512-WgeIwxAqkmb9uTn4ClicXpEQYCEduDqRKfmUdp4X8vmghKfBNXZLYpREn9eqrDx/Tf5LhzRcJLSpi4ohfV742Q==",
"requires": {
"@babel/runtime": "^7.12.5",
"@videojs/vhs-utils": "^4.0.0",
"@xmldom/xmldom": "^0.8.3",
"global": "^4.4.0"
}
},
"ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@ -29024,6 +29417,15 @@
"resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
"integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA=="
},
"mux.js": {
"version": "7.0.3",
"resolved": "https://registry.npmjs.org/mux.js/-/mux.js-7.0.3.tgz",
"integrity": "sha512-gzlzJVEGFYPtl2vvEiJneSWAWD4nfYRHD5XgxmB2gWvXraMPOYk+sxfvexmNfjQUFpmk6hwLR5C6iSFmuwCHdQ==",
"requires": {
"@babel/runtime": "^7.11.2",
"global": "^4.4.0"
}
},
"nanoid": {
"version": "3.3.4",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
@ -31208,6 +31610,14 @@
"nice-napi": "^1.0.2"
}
},
"pkcs7": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/pkcs7/-/pkcs7-1.0.4.tgz",
"integrity": "sha512-afRERtHn54AlwaF2/+LFszyAANTCggGilmcmILUzEjvs3XgFZT+xE6+QWQcAGmu4xajy+Xtj7acLOPdx5/eXWQ==",
"requires": {
"@babel/runtime": "^7.5.5"
}
},
"pkg-dir": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
@ -31320,6 +31730,11 @@
"integrity": "sha512-Kcmo2FhfDTXdcbfDH76N7uBYHINxc/8GW7UAVuVP9I+Va3uHSerrnKV6dLooga/gh7GlgzuCCr/eoldnL1muGw==",
"dev": true
},
"process": {
"version": "0.11.10",
"resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
"integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A=="
},
"process-nextick-args": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@ -32107,6 +32522,14 @@
}
}
},
"rust-result": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/rust-result/-/rust-result-1.0.0.tgz",
"integrity": "sha512-6cJzSBU+J/RJCF063onnQf0cDUOHs9uZI1oroSGnHOph+CQTIJ5Pp2hK5kEQq1+7yE/EEWfulSNXAQ2jikPthA==",
"requires": {
"individual": "^2.0.0"
}
},
"rxfire": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/rxfire/-/rxfire-6.0.3.tgz",
@ -32141,6 +32564,14 @@
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
"integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="
},
"safe-json-parse": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/safe-json-parse/-/safe-json-parse-4.0.0.tgz",
"integrity": "sha512-RjZPPHugjK0TOzFrLZ8inw44s9bKox99/0AZW9o/BEQVrJfhI+fIHMErnPyRa89/yRXUUr93q+tiN6zhoVV4wQ==",
"requires": {
"rust-result": "^1.0.0"
}
},
"safe-regex-test": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.0.tgz",
@ -33349,6 +33780,11 @@
"punycode": "^2.1.0"
}
},
"url-toolkit": {
"version": "2.2.5",
"resolved": "https://registry.npmjs.org/url-toolkit/-/url-toolkit-2.2.5.tgz",
"integrity": "sha512-mtN6xk+Nac+oyJ/PrI7tzfmomRVNFIWKUbG8jdYFt52hxbiReFAXIjYskvu64/dvuW71IcB7lV8l0HvZMac6Jg=="
},
"util": {
"version": "0.12.5",
"resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz",
@ -33440,6 +33876,48 @@
}
}
},
"video.js": {
"version": "8.12.0",
"resolved": "https://registry.npmjs.org/video.js/-/video.js-8.12.0.tgz",
"integrity": "sha512-bLjfg3y09CAed1xZ4FujdTW7G9kgL0CJHaBnDKwBUgYuutijCutYPP5yQGCdN6VOi76uEuOpINwmTJSJia6zww==",
"requires": {
"@babel/runtime": "^7.12.5",
"@videojs/http-streaming": "3.12.1",
"@videojs/vhs-utils": "^4.0.0",
"@videojs/xhr": "2.6.0",
"aes-decrypter": "^4.0.1",
"global": "4.4.0",
"keycode": "2.2.0",
"m3u8-parser": "^7.1.0",
"mpd-parser": "^1.2.2",
"mux.js": "^7.0.1",
"safe-json-parse": "4.0.0",
"videojs-contrib-quality-levels": "4.1.0",
"videojs-font": "4.1.0",
"videojs-vtt.js": "0.15.5"
}
},
"videojs-contrib-quality-levels": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/videojs-contrib-quality-levels/-/videojs-contrib-quality-levels-4.1.0.tgz",
"integrity": "sha512-TfrXJJg1Bv4t6TOCMEVMwF/CoS8iENYsWNKip8zfhB5kTcegiFYezEA0eHAJPU64ZC8NQbxQgOwAsYU8VXbOWA==",
"requires": {
"global": "^4.4.0"
}
},
"videojs-font": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-4.1.0.tgz",
"integrity": "sha512-X1LuPfLZPisPLrANIAKCknZbZu5obVM/ylfd1CN+SsCmPZQ3UMDPcvLTpPBJxcBuTpHQq2MO1QCFt7p8spnZ/w=="
},
"videojs-vtt.js": {
"version": "0.15.5",
"resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.15.5.tgz",
"integrity": "sha512-yZbBxvA7QMYn15Lr/ZfhhLPrNpI/RmCSCqgIff57GC2gIrV5YfyzLfLyZMj0NnZSAz8syB4N0nHXpZg9MyrMOQ==",
"requires": {
"global": "^4.3.1"
}
},
"void-elements": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz",

View File

@ -92,6 +92,7 @@
"tslib": "^2.4.1",
"util": "^0.12.5",
"uuid": "^9.0.0",
"video.js": "^8.12.0",
"xlsx": "^0.18.5"
},
"devDependencies": {

View File

@ -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')
}),

View File

@ -1,44 +1,20 @@
.bg-maintenance-image {
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
:host ::ng-deep .ng-select .ng-select-container {
color: #ffffff !important;
background-color: #252525 !important;
height: 40px !important;
}
.centered-card {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
.background-round {
background-color: #252525 !important;
padding: 8px;
border-radius: 50%;
border: 2px solid #BEF264;
border-color: #BEF264 !important;
}
.box-shadow-2 {
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
:host ::ng-deep .my-gallery .img-thumbnail {
padding: .25rem;
background-color: #F4F5FA;
border: 1px solid #626E82;
border-radius: .25rem;
}
.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);
}
}

View File

@ -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">
<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">
<span class="card-title text-center">
<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
src="assets/images/logo/smart.png"
class="img-fluid mx-auto d-block pt-2"
width="250"
alt="logo"
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'
)
"
/>
</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>
</div>
</div>
<hr />
</div>
</div>
</section>

View File

@ -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

Binary file not shown.

After

Width:  |  Height:  |  Size: 398 KiB

View File

@ -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>