mirror of
https://github.com/dfpc-coe/CloudTAK.git
synced 2025-12-22 13:47:22 +00:00
Add Style & Times Property Component
This commit is contained in:
194
api/web/package-lock.json
generated
194
api/web/package-lock.json
generated
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "@tak-ps/CloudTAK.web",
|
||||
"version": "12.24.2",
|
||||
"version": "12.26.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "@tak-ps/CloudTAK.web",
|
||||
"version": "12.24.2",
|
||||
"version": "12.26.0",
|
||||
"dependencies": {
|
||||
"@react-hookz/deep-equal": "^3.0.3",
|
||||
"@tabler/core": "^1.4.0",
|
||||
@@ -82,9 +82,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@acemir/cssom": {
|
||||
"version": "0.9.28",
|
||||
"resolved": "https://registry.npmjs.org/@acemir/cssom/-/cssom-0.9.28.tgz",
|
||||
"integrity": "sha512-LuS6IVEivI75vKN8S04qRD+YySP0RmU/cV8UNukhQZvprxF+76Z43TNo/a08eCodaGhT1Us8etqS1ZRY9/Or0A==",
|
||||
"version": "0.9.29",
|
||||
"resolved": "https://registry.npmjs.org/@acemir/cssom/-/cssom-0.9.29.tgz",
|
||||
"integrity": "sha512-G90x0VW+9nW4dFajtjCoT+NM0scAfH9Mb08IcjgFHYbfiL/lU04dTF9JuVOi3/OH+DJCQdcIseSXkdCB9Ky6JA==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
@@ -1113,9 +1113,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@maplibre/maplibre-gl-style-spec": {
|
||||
"version": "24.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@maplibre/maplibre-gl-style-spec/-/maplibre-gl-style-spec-24.3.1.tgz",
|
||||
"integrity": "sha512-TUM5JD40H2mgtVXl5IwWz03BuQabw8oZQLJTmPpJA0YTYF+B+oZppy5lNMO6bMvHzB+/5mxqW9VLG3wFdeqtOw==",
|
||||
"version": "24.4.0",
|
||||
"resolved": "https://registry.npmjs.org/@maplibre/maplibre-gl-style-spec/-/maplibre-gl-style-spec-24.4.0.tgz",
|
||||
"integrity": "sha512-VVuNV2Yf0+yQoth4qbdIPE0qKS6nIG5Atki9BVHZ7R7+0lZyxqxwrh0XVNA5YkuKuytFg/1i3VMyJQnp2EtOqw==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@mapbox/jsonlint-lines-primitives": "~2.0.2",
|
||||
@@ -1617,9 +1617,9 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@redocly/openapi-core": {
|
||||
"version": "1.34.5",
|
||||
"resolved": "https://registry.npmjs.org/@redocly/openapi-core/-/openapi-core-1.34.5.tgz",
|
||||
"integrity": "sha512-0EbE8LRbkogtcCXU7liAyC00n9uNG9hJ+eMyHFdUsy9lB/WGqnEBgwjA9q2cyzAVcdTkQqTBBU1XePNnN3OijA==",
|
||||
"version": "1.34.6",
|
||||
"resolved": "https://registry.npmjs.org/@redocly/openapi-core/-/openapi-core-1.34.6.tgz",
|
||||
"integrity": "sha512-2+O+riuIUgVSuLl3Lyh5AplWZyVMNuG2F98/o6NrutKJfW4/GTZdPpZlIphS0HGgcOHgmWcCSHj+dWFlZaGSHw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
@@ -2081,9 +2081,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@tak-ps/vue-tabler": {
|
||||
"version": "3.85.0",
|
||||
"resolved": "https://registry.npmjs.org/@tak-ps/vue-tabler/-/vue-tabler-3.85.0.tgz",
|
||||
"integrity": "sha512-Ky3+F8RdGpM1lh0tNSY68l5bOSXpQREn39rrrz5VD5IPZZnX2y2AZUnqXaJ8n4kTjww5lsgSeajhVMMdZEUJUQ==",
|
||||
"version": "3.86.0",
|
||||
"resolved": "https://registry.npmjs.org/@tak-ps/vue-tabler/-/vue-tabler-3.86.0.tgz",
|
||||
"integrity": "sha512-sWT4V38cVvzJmuEG6UuQ1mDXXqOPzNUghMYUzeBcFx7XidgK9WhIHVUbicnHnBe+uSKbYdeDqiBYt9lE7FT67w==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@tabler/icons-vue": "^3.0.0",
|
||||
@@ -2745,9 +2745,9 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/node": {
|
||||
"version": "24.10.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-24.10.2.tgz",
|
||||
"integrity": "sha512-WOhQTZ4G8xZ1tjJTvKOpyEVSGgOTvJAfDK3FNFgELyaTpzhdgHVHeqW8V+UJvzF5BT+/B54T/1S2K6gd9c7bbA==",
|
||||
"version": "25.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-25.0.0.tgz",
|
||||
"integrity": "sha512-rl78HwuZlaDIUSeUKkmogkhebA+8K1Hy7tddZuJ3D0xV8pZSfsYGTsliGUol1JPzu9EKnTxPC4L1fiWouStRew==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"undici-types": "~7.16.0"
|
||||
@@ -7254,9 +7254,9 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/sass": {
|
||||
"version": "1.93.3",
|
||||
"resolved": "https://registry.npmjs.org/sass/-/sass-1.93.3.tgz",
|
||||
"integrity": "sha512-elOcIZRTM76dvxNAjqYrucTSI0teAF/L2Lv0s6f6b7FOwcwIuA357bIE871580AjHJuSvLIRUosgV+lIWx6Rgg==",
|
||||
"version": "1.96.0",
|
||||
"resolved": "https://registry.npmjs.org/sass/-/sass-1.96.0.tgz",
|
||||
"integrity": "sha512-8u4xqqUeugGNCYwr9ARNtQKTOj4KmYiJAVKXf2CTIivTCR51j96htbMKWDru8H5SaQWpyVgTfOF8Ylyf5pun1Q==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
@@ -7276,9 +7276,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/sass-embedded": {
|
||||
"version": "1.93.3",
|
||||
"resolved": "https://registry.npmjs.org/sass-embedded/-/sass-embedded-1.93.3.tgz",
|
||||
"integrity": "sha512-+VUy01yfDqNmIVMd/LLKl2TTtY0ovZN0rTonh+FhKr65mFwIYgU9WzgIZKS7U9/SPCQvWTsTGx9jyt+qRm/XFw==",
|
||||
"version": "1.96.0",
|
||||
"resolved": "https://registry.npmjs.org/sass-embedded/-/sass-embedded-1.96.0.tgz",
|
||||
"integrity": "sha512-z9PQ7owvdhn7UuZGrpPccdkcH9xJd9iCv+UQhcPqppBslYEp0R9LRQVyyPTZg7jfA77bGxz/I8V48LXJR5LjXQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
@@ -7298,30 +7298,30 @@
|
||||
"node": ">=16.0.0"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"sass-embedded-all-unknown": "1.93.3",
|
||||
"sass-embedded-android-arm": "1.93.3",
|
||||
"sass-embedded-android-arm64": "1.93.3",
|
||||
"sass-embedded-android-riscv64": "1.93.3",
|
||||
"sass-embedded-android-x64": "1.93.3",
|
||||
"sass-embedded-darwin-arm64": "1.93.3",
|
||||
"sass-embedded-darwin-x64": "1.93.3",
|
||||
"sass-embedded-linux-arm": "1.93.3",
|
||||
"sass-embedded-linux-arm64": "1.93.3",
|
||||
"sass-embedded-linux-musl-arm": "1.93.3",
|
||||
"sass-embedded-linux-musl-arm64": "1.93.3",
|
||||
"sass-embedded-linux-musl-riscv64": "1.93.3",
|
||||
"sass-embedded-linux-musl-x64": "1.93.3",
|
||||
"sass-embedded-linux-riscv64": "1.93.3",
|
||||
"sass-embedded-linux-x64": "1.93.3",
|
||||
"sass-embedded-unknown-all": "1.93.3",
|
||||
"sass-embedded-win32-arm64": "1.93.3",
|
||||
"sass-embedded-win32-x64": "1.93.3"
|
||||
"sass-embedded-all-unknown": "1.96.0",
|
||||
"sass-embedded-android-arm": "1.96.0",
|
||||
"sass-embedded-android-arm64": "1.96.0",
|
||||
"sass-embedded-android-riscv64": "1.96.0",
|
||||
"sass-embedded-android-x64": "1.96.0",
|
||||
"sass-embedded-darwin-arm64": "1.96.0",
|
||||
"sass-embedded-darwin-x64": "1.96.0",
|
||||
"sass-embedded-linux-arm": "1.96.0",
|
||||
"sass-embedded-linux-arm64": "1.96.0",
|
||||
"sass-embedded-linux-musl-arm": "1.96.0",
|
||||
"sass-embedded-linux-musl-arm64": "1.96.0",
|
||||
"sass-embedded-linux-musl-riscv64": "1.96.0",
|
||||
"sass-embedded-linux-musl-x64": "1.96.0",
|
||||
"sass-embedded-linux-riscv64": "1.96.0",
|
||||
"sass-embedded-linux-x64": "1.96.0",
|
||||
"sass-embedded-unknown-all": "1.96.0",
|
||||
"sass-embedded-win32-arm64": "1.96.0",
|
||||
"sass-embedded-win32-x64": "1.96.0"
|
||||
}
|
||||
},
|
||||
"node_modules/sass-embedded-all-unknown": {
|
||||
"version": "1.93.3",
|
||||
"resolved": "https://registry.npmjs.org/sass-embedded-all-unknown/-/sass-embedded-all-unknown-1.93.3.tgz",
|
||||
"integrity": "sha512-3okGgnE41eg+CPLtAPletu6nQ4N0ij7AeW+Sl5Km4j29XcmqZQeFwYjHe1AlKTEgLi/UAONk1O8i8/lupeKMbw==",
|
||||
"version": "1.96.0",
|
||||
"resolved": "https://registry.npmjs.org/sass-embedded-all-unknown/-/sass-embedded-all-unknown-1.96.0.tgz",
|
||||
"integrity": "sha512-UfUHoWZtxmsDjDfK+fKCy0aJe6zThu7oaIQx0c/vnHgvprcddEPIay01qTXhiUa3cFcsMmvlBvPTVw0gjKVtVQ==",
|
||||
"cpu": [
|
||||
"!arm",
|
||||
"!arm64",
|
||||
@@ -7332,13 +7332,13 @@
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"dependencies": {
|
||||
"sass": "1.93.3"
|
||||
"sass": "1.96.0"
|
||||
}
|
||||
},
|
||||
"node_modules/sass-embedded-android-arm": {
|
||||
"version": "1.93.3",
|
||||
"resolved": "https://registry.npmjs.org/sass-embedded-android-arm/-/sass-embedded-android-arm-1.93.3.tgz",
|
||||
"integrity": "sha512-8xOw9bywfOD6Wv24BgCmgjkk6tMrsOTTHcb28KDxeJtFtoxiUyMbxo0vChpPAfp2Hyg2tFFKS60s0s4JYk+Raw==",
|
||||
"version": "1.96.0",
|
||||
"resolved": "https://registry.npmjs.org/sass-embedded-android-arm/-/sass-embedded-android-arm-1.96.0.tgz",
|
||||
"integrity": "sha512-0mwVRBFig9hH8vFcRExBuBoR+CfUOcWdwarZwbxIFGI1IyH4BLBGiX85vVn6ssSCVNydpE6lFGm45CN8O0tQig==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
@@ -7353,9 +7353,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/sass-embedded-android-arm64": {
|
||||
"version": "1.93.3",
|
||||
"resolved": "https://registry.npmjs.org/sass-embedded-android-arm64/-/sass-embedded-android-arm64-1.93.3.tgz",
|
||||
"integrity": "sha512-uqUl3Kt1IqdGVAcAdbmC+NwuUJy8tM+2ZnB7/zrt6WxWVShVCRdFnWR9LT8HJr7eJN7AU8kSXxaVX/gedanPsg==",
|
||||
"version": "1.96.0",
|
||||
"resolved": "https://registry.npmjs.org/sass-embedded-android-arm64/-/sass-embedded-android-arm64-1.96.0.tgz",
|
||||
"integrity": "sha512-TJiebTo4TBF5Wrn+lFkUfSN3wazvl8kkFm9a1nA9ZtRdaE0nsJLGnMM6KLQLP2Vl+IOf6ovetZseISkClRoGXw==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@@ -7370,9 +7370,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/sass-embedded-android-riscv64": {
|
||||
"version": "1.93.3",
|
||||
"resolved": "https://registry.npmjs.org/sass-embedded-android-riscv64/-/sass-embedded-android-riscv64-1.93.3.tgz",
|
||||
"integrity": "sha512-2jNJDmo+3qLocjWqYbXiBDnfgwrUeZgZFHJIwAefU7Fn66Ot7rsXl+XPwlokaCbTpj7eMFIqsRAZ/uDueXNCJg==",
|
||||
"version": "1.96.0",
|
||||
"resolved": "https://registry.npmjs.org/sass-embedded-android-riscv64/-/sass-embedded-android-riscv64-1.96.0.tgz",
|
||||
"integrity": "sha512-7AVu/EeJqKN3BGNhm+tc1XzmoqbOtCwHG2VgN6j6Lyqh1JZlx0dglRtyQuKDZ7odTKiWmotEIuYZ6OxLmr2Ejg==",
|
||||
"cpu": [
|
||||
"riscv64"
|
||||
],
|
||||
@@ -7387,9 +7387,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/sass-embedded-android-x64": {
|
||||
"version": "1.93.3",
|
||||
"resolved": "https://registry.npmjs.org/sass-embedded-android-x64/-/sass-embedded-android-x64-1.93.3.tgz",
|
||||
"integrity": "sha512-y0RoAU6ZenQFcjM9PjQd3cRqRTjqwSbtWLL/p68y2oFyh0QGN0+LQ826fc0ZvU/AbqCsAizkqjzOn6cRZJxTTQ==",
|
||||
"version": "1.96.0",
|
||||
"resolved": "https://registry.npmjs.org/sass-embedded-android-x64/-/sass-embedded-android-x64-1.96.0.tgz",
|
||||
"integrity": "sha512-ei/UsT0q8rF5JzWhn1A7B0M1y/IiWVY3l4zibQrXk5MGaOXHlCM6ffZD+2j7C613Jm9/KAQ7yX1NIIu72LPgDQ==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@@ -7404,9 +7404,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/sass-embedded-darwin-arm64": {
|
||||
"version": "1.93.3",
|
||||
"resolved": "https://registry.npmjs.org/sass-embedded-darwin-arm64/-/sass-embedded-darwin-arm64-1.93.3.tgz",
|
||||
"integrity": "sha512-7zb/hpdMOdKteK17BOyyypemglVURd1Hdz6QGsggy60aUFfptTLQftLRg8r/xh1RbQAUKWFbYTNaM47J9yPxYg==",
|
||||
"version": "1.96.0",
|
||||
"resolved": "https://registry.npmjs.org/sass-embedded-darwin-arm64/-/sass-embedded-darwin-arm64-1.96.0.tgz",
|
||||
"integrity": "sha512-OMvN5NWcrrisC24ZR3GyaWJ1uFxw25qLnUkpEso9TSlaMWiomjU82/uQ/AkQvIMl+EMlJqeYLxZWvq/byLH5Xg==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@@ -7421,9 +7421,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/sass-embedded-darwin-x64": {
|
||||
"version": "1.93.3",
|
||||
"resolved": "https://registry.npmjs.org/sass-embedded-darwin-x64/-/sass-embedded-darwin-x64-1.93.3.tgz",
|
||||
"integrity": "sha512-Ek1Vp8ZDQEe327Lz0b7h3hjvWH3u9XjJiQzveq74RPpJQ2q6d9LfWpjiRRohM4qK6o4XOHw1X10OMWPXJtdtWg==",
|
||||
"version": "1.96.0",
|
||||
"resolved": "https://registry.npmjs.org/sass-embedded-darwin-x64/-/sass-embedded-darwin-x64-1.96.0.tgz",
|
||||
"integrity": "sha512-J/R5sv0eW+/DU98rccHPO1f3lsTFjVTpdkU9d3P1yB7BFmQjw5PYde9BVRlXeOawPwfgT3p/hvY4RELScICdww==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@@ -7438,9 +7438,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/sass-embedded-linux-arm": {
|
||||
"version": "1.93.3",
|
||||
"resolved": "https://registry.npmjs.org/sass-embedded-linux-arm/-/sass-embedded-linux-arm-1.93.3.tgz",
|
||||
"integrity": "sha512-yeiv2y+dp8B4wNpd3+JsHYD0mvpXSfov7IGyQ1tMIR40qv+ROkRqYiqQvAOXf76Qwh4Y9OaYZtLpnsPjfeq6mA==",
|
||||
"version": "1.96.0",
|
||||
"resolved": "https://registry.npmjs.org/sass-embedded-linux-arm/-/sass-embedded-linux-arm-1.96.0.tgz",
|
||||
"integrity": "sha512-XuQvV6gNld5Bz3rX0SFLtKPGMu4UQdXNp//9A+bDmtVGZ6yu8REIqphQBxOMpgkAKsA4JZLKKk1N97woeVsIlA==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
@@ -7455,9 +7455,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/sass-embedded-linux-arm64": {
|
||||
"version": "1.93.3",
|
||||
"resolved": "https://registry.npmjs.org/sass-embedded-linux-arm64/-/sass-embedded-linux-arm64-1.93.3.tgz",
|
||||
"integrity": "sha512-RBrHWgfd8Dd8w4fbmdRVXRrhh8oBAPyeWDTKAWw8ZEmuXfVl4ytjDuyxaVilh6rR1xTRTNpbaA/YWApBlLrrNw==",
|
||||
"version": "1.96.0",
|
||||
"resolved": "https://registry.npmjs.org/sass-embedded-linux-arm64/-/sass-embedded-linux-arm64-1.96.0.tgz",
|
||||
"integrity": "sha512-VcbVjK0/O/mru0h0FC1WSUWIzMqRrzuJ8eZNMXTs4vApfkh28pxNaUodwU81f1L1nngJ3vpFDBniUKpW6NwJhw==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@@ -7472,9 +7472,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/sass-embedded-linux-musl-arm": {
|
||||
"version": "1.93.3",
|
||||
"resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm/-/sass-embedded-linux-musl-arm-1.93.3.tgz",
|
||||
"integrity": "sha512-fU0fwAwbp7sBE3h5DVU5UPzvaLg7a4yONfFWkkcCp6ZrOiPuGRHXXYriWQ0TUnWy4wE+svsVuWhwWgvlb/tkKg==",
|
||||
"version": "1.96.0",
|
||||
"resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm/-/sass-embedded-linux-musl-arm-1.96.0.tgz",
|
||||
"integrity": "sha512-qK7FrnczCVECZXtyYOoI3azFlMDZn70GI1yJPPuZLpWvwIPYoZOLv3u6JSec5o3wT6KeKyWG3ZpGIpigLUjPig==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
@@ -7489,9 +7489,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/sass-embedded-linux-musl-arm64": {
|
||||
"version": "1.93.3",
|
||||
"resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm64/-/sass-embedded-linux-musl-arm64-1.93.3.tgz",
|
||||
"integrity": "sha512-PS829l+eUng+9W4PFclXGb4uA2+965NHV3/Sa5U7qTywjeeUUYTZg70dJHSqvhrBEfCc2XJABeW3adLJbyQYkw==",
|
||||
"version": "1.96.0",
|
||||
"resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm64/-/sass-embedded-linux-musl-arm64-1.96.0.tgz",
|
||||
"integrity": "sha512-lVyLObEeu8Wgw8riC6dSMlkF7jVNAjdZ1jIBhvX1yDsrQwwaI60pM21YXmnZSFyCE6KVFkKAgwRQNO/IkoCwMA==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@@ -7506,9 +7506,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/sass-embedded-linux-musl-riscv64": {
|
||||
"version": "1.93.3",
|
||||
"resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-riscv64/-/sass-embedded-linux-musl-riscv64-1.93.3.tgz",
|
||||
"integrity": "sha512-cK1oBY+FWQquaIGEeQ5H74KTO8cWsSWwXb/WaildOO9U6wmUypTgUYKQ0o5o/29nZbWWlM1PHuwVYTSnT23Jjg==",
|
||||
"version": "1.96.0",
|
||||
"resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-riscv64/-/sass-embedded-linux-musl-riscv64-1.96.0.tgz",
|
||||
"integrity": "sha512-Y+DuGVRsM2zGl268QN5aF/Y6OFYTILb3f+6huEXKlGL6FK2MXadsmeoVbmKVrTamQHzyA2bWWMU1C0jhVFtlzg==",
|
||||
"cpu": [
|
||||
"riscv64"
|
||||
],
|
||||
@@ -7523,9 +7523,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/sass-embedded-linux-musl-x64": {
|
||||
"version": "1.93.3",
|
||||
"resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-x64/-/sass-embedded-linux-musl-x64-1.93.3.tgz",
|
||||
"integrity": "sha512-A7wkrsHu2/I4Zpa0NMuPGkWDVV7QGGytxGyUq3opSXgAexHo/vBPlGoDXoRlSdex0cV+aTMRPjoGIfdmNlHwyg==",
|
||||
"version": "1.96.0",
|
||||
"resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-x64/-/sass-embedded-linux-musl-x64-1.96.0.tgz",
|
||||
"integrity": "sha512-sAQtUQ8fFNxnxSf3fncOh892Hfxa4PW4e5qrnSE0Y1IGV/wsTzk7m5Z6IeT7sa3BsvXh5TFN6+JGbUoOJ5RigA==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@@ -7540,9 +7540,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/sass-embedded-linux-riscv64": {
|
||||
"version": "1.93.3",
|
||||
"resolved": "https://registry.npmjs.org/sass-embedded-linux-riscv64/-/sass-embedded-linux-riscv64-1.93.3.tgz",
|
||||
"integrity": "sha512-vWkW1+HTF5qcaHa6hO80gx/QfB6GGjJUP0xLbnAoY4pwEnw5ulGv6RM8qYr8IDhWfVt/KH+lhJ2ZFxnJareisQ==",
|
||||
"version": "1.96.0",
|
||||
"resolved": "https://registry.npmjs.org/sass-embedded-linux-riscv64/-/sass-embedded-linux-riscv64-1.96.0.tgz",
|
||||
"integrity": "sha512-Bf6bAjuUm6sfGHo0XoZEstjVkEWwmmtOSomGoPuAwXFS9GQnFcqDz9EXKNkZEOsQi2D+aDeDxs8HcU9/OLMT9g==",
|
||||
"cpu": [
|
||||
"riscv64"
|
||||
],
|
||||
@@ -7557,9 +7557,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/sass-embedded-linux-x64": {
|
||||
"version": "1.93.3",
|
||||
"resolved": "https://registry.npmjs.org/sass-embedded-linux-x64/-/sass-embedded-linux-x64-1.93.3.tgz",
|
||||
"integrity": "sha512-k6uFxs+e5jSuk1Y0niCwuq42F9ZC5UEP7P+RIOurIm8w/5QFa0+YqeW+BPWEW5M1FqVOsNZH3qGn4ahqvAEjPA==",
|
||||
"version": "1.96.0",
|
||||
"resolved": "https://registry.npmjs.org/sass-embedded-linux-x64/-/sass-embedded-linux-x64-1.96.0.tgz",
|
||||
"integrity": "sha512-U4GROkS0XM6ekqs/ubroWwFAGY9N35wqrt5q6Y+MJCpTK5bHPHlgFo7J75ZUSaEObL+UrDqvMDQkCdYEFiiQbg==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@@ -7574,9 +7574,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/sass-embedded-unknown-all": {
|
||||
"version": "1.93.3",
|
||||
"resolved": "https://registry.npmjs.org/sass-embedded-unknown-all/-/sass-embedded-unknown-all-1.93.3.tgz",
|
||||
"integrity": "sha512-o5wj2rLpXH0C+GJKt/VpWp6AnMsCCbfFmnMAttcrsa+U3yrs/guhZ3x55KAqqUsE8F47e3frbsDL+1OuQM5DAA==",
|
||||
"version": "1.96.0",
|
||||
"resolved": "https://registry.npmjs.org/sass-embedded-unknown-all/-/sass-embedded-unknown-all-1.96.0.tgz",
|
||||
"integrity": "sha512-OHzGEr2VElK2SaQdkkTX0O0KwTbiv1N/EhnHgzXYaZWOTvv0gxEfR7q7x/oScCBIZc2x8dSfvThfBnohIClo/w==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
@@ -7587,13 +7587,13 @@
|
||||
"!win32"
|
||||
],
|
||||
"dependencies": {
|
||||
"sass": "1.93.3"
|
||||
"sass": "1.96.0"
|
||||
}
|
||||
},
|
||||
"node_modules/sass-embedded-win32-arm64": {
|
||||
"version": "1.93.3",
|
||||
"resolved": "https://registry.npmjs.org/sass-embedded-win32-arm64/-/sass-embedded-win32-arm64-1.93.3.tgz",
|
||||
"integrity": "sha512-0dOfT9moy9YmBolodwYYXtLwNr4jL4HQC9rBfv6mVrD7ud8ue2kDbn+GVzj1hEJxvEexVSmDCf7MHUTLcGs9xQ==",
|
||||
"version": "1.96.0",
|
||||
"resolved": "https://registry.npmjs.org/sass-embedded-win32-arm64/-/sass-embedded-win32-arm64-1.96.0.tgz",
|
||||
"integrity": "sha512-KKz1h5pr45fwrKcxrxHsujo3f/HgVkX64YNJ9PRPuOuX7lU8g18IEgDxoTGQ64PPBQ5RXOt6jxpT+x2OLPVnCw==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@@ -7608,9 +7608,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/sass-embedded-win32-x64": {
|
||||
"version": "1.93.3",
|
||||
"resolved": "https://registry.npmjs.org/sass-embedded-win32-x64/-/sass-embedded-win32-x64-1.93.3.tgz",
|
||||
"integrity": "sha512-wHFVfxiS9hU/sNk7KReD+lJWRp3R0SLQEX4zfOnRP2zlvI2X4IQR5aZr9GNcuMP6TmNpX0nQPZTegS8+h9RrEg==",
|
||||
"version": "1.96.0",
|
||||
"resolved": "https://registry.npmjs.org/sass-embedded-win32-x64/-/sass-embedded-win32-x64-1.96.0.tgz",
|
||||
"integrity": "sha512-MDreKaWcgiyKD5YPShaRvUBoe5dC2y8IPJK49G7iQjoMfw9INDCBkDdLcz00Mn0eJq4nJJp5UEE98M6ljIrBRg==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
|
||||
@@ -445,23 +445,42 @@
|
||||
v-if='cot.properties.remarks !== undefined'
|
||||
class='col-12 py-2'
|
||||
>
|
||||
<div class='col-12'>
|
||||
<div
|
||||
class='d-flex align-items-center cursor-pointer user-select-none py-2 px-2 rounded transition-all mx-2'
|
||||
:class='{ "bg-accent": remarksExpanded, "hover": !remarksExpanded }'
|
||||
@click='remarksExpanded = !remarksExpanded'
|
||||
>
|
||||
<IconBlockquote
|
||||
:size='18'
|
||||
stroke='1'
|
||||
color='#6b7990'
|
||||
class='ms-2 me-1'
|
||||
/>
|
||||
<label class='subheader user-select-none'>Remarks</label>
|
||||
<label class='subheader cursor-pointer m-0'>Remarks</label>
|
||||
<div class='ms-auto d-flex align-items-center'>
|
||||
<IconChevronDown
|
||||
class='transition-transform'
|
||||
:class='{ "rotate-180": !remarksExpanded }'
|
||||
:size='18'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class='px-2'>
|
||||
<CopyField
|
||||
:model-value='cot.properties.remarks'
|
||||
:rows='10'
|
||||
:edit='is_editable'
|
||||
:hover='is_editable'
|
||||
@submit='updateProperty("remarks", $event)'
|
||||
/>
|
||||
|
||||
<div
|
||||
class='grid-transition'
|
||||
:class='{ expanded: remarksExpanded }'
|
||||
>
|
||||
<div class='overflow-hidden'>
|
||||
<div class='px-2 pt-2'>
|
||||
<CopyField
|
||||
:model-value='cot.properties.remarks'
|
||||
:rows='10'
|
||||
:edit='is_editable'
|
||||
:hover='is_editable'
|
||||
@submit='updateProperty("remarks", $event)'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -517,46 +536,10 @@
|
||||
:links='cot.properties.links'
|
||||
/>
|
||||
|
||||
|
||||
<div
|
||||
<PropertyTimes
|
||||
v-if='!cot.properties.archived'
|
||||
class='col-12 pb-2'
|
||||
>
|
||||
<div class='d-flex mx-3'>
|
||||
<label class='subheader user-select-none'>Times</label>
|
||||
<div class='ms-auto cursor-pointer text-blue subheader'>
|
||||
<span
|
||||
v-if='time === "relative"'
|
||||
@click='time = "absolute"'
|
||||
>Absolute</span>
|
||||
<span
|
||||
v-if='time === "absolute"'
|
||||
@click='time = "relative"'
|
||||
>Relative</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class='table-responsive rounded mx-2 py-2 px-2'>
|
||||
<table class='table card-table table-hover table-vcenter datatable'>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Key</th>
|
||||
<th>Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class='bg-accent'>
|
||||
<tr>
|
||||
<td>Time</td><td v-text='timeProp' />
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Start</td><td v-text='startProp' />
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Stale</td><td v-text='staleProp' />
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
:cot='cot'
|
||||
/>
|
||||
|
||||
<PropertySensor
|
||||
v-if='cot.properties.sensor !== undefined'
|
||||
@@ -573,127 +556,10 @@
|
||||
:model-value='cot.properties.milsym.id'
|
||||
/>
|
||||
|
||||
<div
|
||||
<PropertyStyle
|
||||
v-if='is_editable && !cot.is_self'
|
||||
class='pb-2 col-12'
|
||||
>
|
||||
<div class='col-12'>
|
||||
<IconPaint
|
||||
:size='18'
|
||||
stroke='1'
|
||||
color='#6b7990'
|
||||
class='ms-2 me-1'
|
||||
/>
|
||||
<label class='subheader user-select-none'>Style</label>
|
||||
</div>
|
||||
<div class='px-2 py-3'>
|
||||
<div class='row g-2 rounded px-2 bg-accent pb-2'>
|
||||
<template v-if='cot.geometry.type === "Point"'>
|
||||
<div class='col-12'>
|
||||
<IconSelect
|
||||
:model-value='cot.properties.icon'
|
||||
label='Point Icon'
|
||||
:size='32'
|
||||
stroke='1'
|
||||
@update:model-value='updatePropertyIcon($event)'
|
||||
/>
|
||||
</div>
|
||||
<div class='col-12'>
|
||||
<label class='subheader user-select-none'>Point Color</label>
|
||||
<TablerInput
|
||||
:model-value='cot.properties["marker-color"]'
|
||||
label=''
|
||||
default='#FFFFFF'
|
||||
type='color'
|
||||
class='pb-2'
|
||||
@update:model-value='updateProperty("marker-color", $event)'
|
||||
/>
|
||||
</div>
|
||||
<div class='col-12'>
|
||||
<label class='subheader user-select-none'>Point Opacity</label>
|
||||
<TablerRange
|
||||
:model-value='cot.properties["marker-opacity"]'
|
||||
label=''
|
||||
:default='1'
|
||||
:min='0'
|
||||
:max='1'
|
||||
:step='0.01'
|
||||
@update:model-value='updateProperty("marker-opacity", $event)'
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class='col-12'>
|
||||
<label class='subheader user-select-none'>Line Colour</label>
|
||||
<TablerInput
|
||||
:model-value='cot.properties["stroke"]'
|
||||
label=''
|
||||
type='color'
|
||||
@update:model-value='updateProperty("stroke", $event)'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class='col-12'>
|
||||
<label class='subheader user-select-none'>Line Style</label>
|
||||
<TablerEnum
|
||||
:model-value='cot.properties["stroke-style"]'
|
||||
label=''
|
||||
:options='["solid", "dashed", "dotted", "outlined"]'
|
||||
default='solid'
|
||||
@update:model-value='updateProperty("stroke-style", $event)'
|
||||
/>
|
||||
</div>
|
||||
<div class='col-12'>
|
||||
<label class='subheader user-select-none'>Line Thickness</label>
|
||||
<TablerRange
|
||||
:model-value='cot.properties["stroke-width"]'
|
||||
label=''
|
||||
:default='1'
|
||||
:min='1'
|
||||
:max='6'
|
||||
:step='1'
|
||||
@update:model-value='updateProperty("stroke-width", $event)'
|
||||
/>
|
||||
</div>
|
||||
<div class='col-12'>
|
||||
<label class='subheader user-select-none'>Line Opacity</label>
|
||||
<TablerRange
|
||||
:model-value='cot.properties["stroke-opacity"]'
|
||||
label=''
|
||||
:default='1'
|
||||
:min='0'
|
||||
:max='1'
|
||||
:step='0.01'
|
||||
@update:model-value='updateProperty("stroke-opacity", $event)'
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if='cot.geometry.type === "Polygon"'>
|
||||
<div class='col-12'>
|
||||
<label class='subheader user-select-none'>Fill Colour</label>
|
||||
<TablerInput
|
||||
:model-value='cot.properties["fill"]'
|
||||
label=''
|
||||
type='color'
|
||||
@update:model-value='updateProperty("fill", $event)'
|
||||
/>
|
||||
</div>
|
||||
<div class='col-12 round'>
|
||||
<label class='subheader user-select-none'>Fill Opacity</label>
|
||||
<TablerRange
|
||||
:model-value='cot.properties["fill-opacity"]'
|
||||
label=''
|
||||
:default='1'
|
||||
:min='0'
|
||||
:max='1'
|
||||
:step='0.01'
|
||||
@update:model-value='updateProperty("fill-opacity", $event)'
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
:cot='cot'
|
||||
/>
|
||||
|
||||
<div
|
||||
v-if='cot.properties.creator && cot.properties.creator'
|
||||
@@ -806,17 +672,13 @@ import { OriginMode } from '../../base/cot.ts'
|
||||
import Subscription from '../../base/subscription.ts'
|
||||
import {
|
||||
TablerNone,
|
||||
TablerInput,
|
||||
TablerDelete,
|
||||
TablerToggle,
|
||||
TablerEnum,
|
||||
TablerRange,
|
||||
TablerDropdown,
|
||||
TablerIconButton,
|
||||
} from '@tak-ps/vue-tabler';
|
||||
|
||||
import CopyField from './util/CopyField.vue';
|
||||
import IconSelect from '../util/IconSelect.vue';
|
||||
import Share from './util/Share.vue';
|
||||
import LineLength from './util/LineLength.vue';
|
||||
import PolygonArea from './util/PolygonArea.vue';
|
||||
@@ -835,6 +697,8 @@ import Breadcrumb from './util/Breadcrumb.vue';
|
||||
import PropertyElevation from './util/PropertyElevation.vue';
|
||||
import PropertyAttachments from './util/PropertyAttachments.vue';
|
||||
import PropertyLinks from './util/PropertyLinks.vue';
|
||||
import PropertyTimes from './util/PropertyTimes.vue';
|
||||
import PropertyStyle from './util/PropertyStyle.vue';
|
||||
import {
|
||||
IconPencil,
|
||||
IconFence,
|
||||
@@ -855,13 +719,11 @@ import {
|
||||
IconShare2,
|
||||
IconZoomPan,
|
||||
IconCode,
|
||||
IconPaint,
|
||||
IconAffiliate,
|
||||
IconInfoCircle,
|
||||
IconPaperclip,
|
||||
} from '@tabler/icons-vue';
|
||||
import Subscriptions from './util/Subscriptions.vue';
|
||||
import timediff from '../../timediff.ts';
|
||||
import { std } from '../../std.ts';
|
||||
import { useMapStore } from '../../stores/map.ts';
|
||||
import { useFloatStore } from '../../stores/float.ts';
|
||||
@@ -887,10 +749,10 @@ const chevrons = ref<Set<string>>(new Set());
|
||||
const username = ref<string | undefined>();
|
||||
const type = ref<COTType | undefined>();
|
||||
const mode = ref('default');
|
||||
const remarksExpanded = ref(true);
|
||||
|
||||
const currentTime = ref(new Date());
|
||||
const interval = ref<ReturnType<typeof setInterval> | undefined>();
|
||||
const time = ref('relative');
|
||||
|
||||
watch(cot, async () => {
|
||||
if (cot.value) {
|
||||
@@ -977,21 +839,6 @@ async function load_cot() {
|
||||
}
|
||||
}
|
||||
|
||||
const staleProp = computed(() => {
|
||||
if (!cot.value) return '';
|
||||
return (currentTime.value && time.value === 'relative') ? timediff(cot.value.properties.stale) : cot.value.properties.stale;
|
||||
});
|
||||
|
||||
const startProp = computed(() => {
|
||||
if (!cot.value) return '';
|
||||
return (currentTime.value && time.value === 'relative') ? timediff(cot.value.properties.start) : cot.value.properties.start;
|
||||
});
|
||||
|
||||
const timeProp = computed(() => {
|
||||
if (!cot.value) return '';
|
||||
return (currentTime.value && time.value === 'relative') ? timediff(cot.value.properties.time) : cot.value.properties.time;
|
||||
});
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
function updateProperty(key: string, event: any) {
|
||||
if (!cot.value) return;
|
||||
@@ -1007,37 +854,6 @@ function updateProperty(key: string, event: any) {
|
||||
}
|
||||
}
|
||||
|
||||
function updatePropertyIcon(event: string | null) {
|
||||
if (!cot.value) return;
|
||||
|
||||
if (event) {
|
||||
event = event.replace(/\.png$/g, '').replace(':', '/');
|
||||
}
|
||||
|
||||
if (
|
||||
event
|
||||
&& (
|
||||
!cot.value.properties.icon
|
||||
|| (
|
||||
cot.value.properties.icon
|
||||
&& event !== cot.value.properties.icon
|
||||
)
|
||||
)
|
||||
) {
|
||||
cot.value.properties.icon = event;
|
||||
cot.value.properties["marker-color"] = '#FFFFFF';
|
||||
cot.value.update({});
|
||||
} else if (cot.value.properties.icon && !event) {
|
||||
if (cot.value.properties.type !== 'u-d-p') {
|
||||
cot.value.properties.icon = cot.value.properties.type;
|
||||
} else {
|
||||
cot.value.properties.icon = undefined;
|
||||
}
|
||||
|
||||
cot.value.update({});
|
||||
}
|
||||
}
|
||||
|
||||
function updatePropertyType(type: string): void {
|
||||
if (!cot.value) return;
|
||||
|
||||
@@ -1096,3 +912,23 @@ async function deleteCOT() {
|
||||
router.push('/');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.grid-transition {
|
||||
display: grid;
|
||||
grid-template-rows: 0fr;
|
||||
transition: grid-template-rows 0.3s ease-out;
|
||||
}
|
||||
|
||||
.grid-transition.expanded {
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
|
||||
.rotate-180 {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.transition-transform {
|
||||
transition: transform 0.3s ease-out;
|
||||
}
|
||||
</style>
|
||||
|
||||
223
api/web/src/components/CloudTAK/util/PropertyStyle.vue
Normal file
223
api/web/src/components/CloudTAK/util/PropertyStyle.vue
Normal file
@@ -0,0 +1,223 @@
|
||||
<template>
|
||||
<div class='col-12 pb-2'>
|
||||
<div
|
||||
class='d-flex align-items-center cursor-pointer user-select-none py-2 px-2 rounded transition-all mx-2'
|
||||
:class='{ "bg-accent": expanded, "hover": !expanded }'
|
||||
@click='expanded = !expanded'
|
||||
>
|
||||
<IconPaint
|
||||
:size='18'
|
||||
stroke='1'
|
||||
color='#6b7990'
|
||||
class='ms-2 me-1'
|
||||
/>
|
||||
<label class='subheader cursor-pointer m-0'>Style</label>
|
||||
<div class='ms-auto d-flex align-items-center'>
|
||||
<IconChevronDown
|
||||
class='transition-transform'
|
||||
:class='{ "rotate-180": !expanded }'
|
||||
:size='18'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class='grid-transition'
|
||||
:class='{ expanded: expanded }'
|
||||
>
|
||||
<div class='overflow-hidden'>
|
||||
<div class='px-2 py-3'>
|
||||
<div class='row g-2 rounded px-2 bg-accent pb-2'>
|
||||
<template v-if='cot.geometry.type === "Point"'>
|
||||
<div class='col-12'>
|
||||
<IconSelect
|
||||
:model-value='cot.properties.icon'
|
||||
label='Point Icon'
|
||||
:size='32'
|
||||
stroke='1'
|
||||
@update:model-value='updatePropertyIcon($event)'
|
||||
/>
|
||||
</div>
|
||||
<div class='col-12'>
|
||||
<label class='subheader user-select-none'>Point Color</label>
|
||||
<TablerInput
|
||||
:model-value='cot.properties["marker-color"]'
|
||||
label=''
|
||||
default='#FFFFFF'
|
||||
type='color'
|
||||
class='pb-2'
|
||||
@update:model-value='updateProperty("marker-color", $event)'
|
||||
/>
|
||||
</div>
|
||||
<div class='col-12'>
|
||||
<label class='subheader user-select-none'>Point Opacity</label>
|
||||
<TablerRange
|
||||
:model-value='cot.properties["marker-opacity"]'
|
||||
label=''
|
||||
:default='1'
|
||||
:min='0'
|
||||
:max='1'
|
||||
:step='0.01'
|
||||
@update:model-value='updateProperty("marker-opacity", $event)'
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class='col-12'>
|
||||
<label class='subheader user-select-none'>Line Colour</label>
|
||||
<TablerInput
|
||||
:model-value='cot.properties["stroke"]'
|
||||
label=''
|
||||
type='color'
|
||||
@update:model-value='updateProperty("stroke", $event)'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class='col-12'>
|
||||
<label class='subheader user-select-none'>Line Style</label>
|
||||
<TablerEnum
|
||||
:model-value='cot.properties["stroke-style"]'
|
||||
label=''
|
||||
:options='["solid", "dashed", "dotted", "outlined"]'
|
||||
default='solid'
|
||||
@update:model-value='updateProperty("stroke-style", $event)'
|
||||
/>
|
||||
</div>
|
||||
<div class='col-12'>
|
||||
<label class='subheader user-select-none'>Line Thickness</label>
|
||||
<TablerRange
|
||||
:model-value='cot.properties["stroke-width"]'
|
||||
label=''
|
||||
:default='1'
|
||||
:min='1'
|
||||
:max='6'
|
||||
:step='1'
|
||||
@update:model-value='updateProperty("stroke-width", $event)'
|
||||
/>
|
||||
</div>
|
||||
<div class='col-12'>
|
||||
<label class='subheader user-select-none'>Line Opacity</label>
|
||||
<TablerRange
|
||||
:model-value='cot.properties["stroke-opacity"]'
|
||||
label=''
|
||||
:default='1'
|
||||
:min='0'
|
||||
:max='1'
|
||||
:step='0.01'
|
||||
@update:model-value='updateProperty("stroke-opacity", $event)'
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if='cot.geometry.type === "Polygon"'>
|
||||
<div class='col-12'>
|
||||
<label class='subheader user-select-none'>Fill Colour</label>
|
||||
<TablerInput
|
||||
:model-value='cot.properties["fill"]'
|
||||
label=''
|
||||
type='color'
|
||||
@update:model-value='updateProperty("fill", $event)'
|
||||
/>
|
||||
</div>
|
||||
<div class='col-12 round'>
|
||||
<label class='subheader user-select-none'>Fill Opacity</label>
|
||||
<TablerRange
|
||||
:model-value='cot.properties["fill-opacity"]'
|
||||
label=''
|
||||
:default='1'
|
||||
:min='0'
|
||||
:max='1'
|
||||
:step='0.01'
|
||||
@update:model-value='updateProperty("fill-opacity", $event)'
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { ref } from 'vue';
|
||||
import { IconPaint, IconChevronDown } from '@tabler/icons-vue';
|
||||
import {
|
||||
TablerInput,
|
||||
TablerRange,
|
||||
TablerEnum,
|
||||
} from '@tak-ps/vue-tabler';
|
||||
import IconSelect from '../../util/IconSelect.vue';
|
||||
import type COT from '../../../base/cot';
|
||||
|
||||
const props = defineProps<{
|
||||
cot: COT
|
||||
}>();
|
||||
|
||||
const expanded = ref(false);
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
function updateProperty(key: string, event: any) {
|
||||
if (!props.cot) return;
|
||||
|
||||
if (typeof event === 'string' || typeof event === 'number') {
|
||||
if (props.cot.properties[key] !== event) {
|
||||
props.cot.properties[key] = event;
|
||||
props.cot.update({})
|
||||
}
|
||||
} else {
|
||||
props.cot.properties[key] = event;
|
||||
props.cot.update({})
|
||||
}
|
||||
}
|
||||
|
||||
function updatePropertyIcon(event: string | null) {
|
||||
if (!props.cot) return;
|
||||
|
||||
if (event) {
|
||||
event = event.replace(/\.png$/g, '').replace(':', '/');
|
||||
}
|
||||
|
||||
if (
|
||||
event
|
||||
&& (
|
||||
!props.cot.properties.icon
|
||||
|| (
|
||||
props.cot.properties.icon
|
||||
&& event !== props.cot.properties.icon
|
||||
)
|
||||
)
|
||||
) {
|
||||
props.cot.properties.icon = event;
|
||||
props.cot.properties["marker-color"] = '#FFFFFF';
|
||||
props.cot.update({});
|
||||
} else if (props.cot.properties.icon && !event) {
|
||||
if (props.cot.properties.type !== 'u-d-p') {
|
||||
props.cot.properties.icon = props.cot.properties.type;
|
||||
} else {
|
||||
props.cot.properties.icon = undefined;
|
||||
}
|
||||
|
||||
props.cot.update({});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.grid-transition {
|
||||
display: grid;
|
||||
grid-template-rows: 0fr;
|
||||
transition: grid-template-rows 0.3s ease-out;
|
||||
}
|
||||
|
||||
.grid-transition.expanded {
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
|
||||
.rotate-180 {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.transition-transform {
|
||||
transition: transform 0.3s ease-out;
|
||||
}
|
||||
</style>
|
||||
119
api/web/src/components/CloudTAK/util/PropertyTimes.vue
Normal file
119
api/web/src/components/CloudTAK/util/PropertyTimes.vue
Normal file
@@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<div class='col-12 pb-2'>
|
||||
<div
|
||||
class='d-flex align-items-center cursor-pointer user-select-none py-2 px-2 rounded transition-all mx-2'
|
||||
:class='{ "bg-accent": expanded, "hover": !expanded }'
|
||||
@click='expanded = !expanded'
|
||||
>
|
||||
<IconClock
|
||||
:size='18'
|
||||
stroke='1'
|
||||
color='#6b7990'
|
||||
class='ms-2 me-1'
|
||||
/>
|
||||
<label class='subheader cursor-pointer m-0'>Times</label>
|
||||
<div class='ms-auto d-flex align-items-center'>
|
||||
<IconChevronDown
|
||||
class='transition-transform'
|
||||
:class='{ "rotate-180": !expanded }'
|
||||
:size='18'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class='grid-transition'
|
||||
:class='{ expanded: expanded }'
|
||||
>
|
||||
<div class='overflow-hidden'>
|
||||
<div class='d-flex mx-3 pt-2 pb-2'>
|
||||
<div class='ms-auto cursor-pointer text-blue subheader'>
|
||||
<span
|
||||
v-if='mode === "relative"'
|
||||
@click='mode = "absolute"'
|
||||
>Absolute</span>
|
||||
<span
|
||||
v-if='mode === "absolute"'
|
||||
@click='mode = "relative"'
|
||||
>Relative</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class='list-group list-group-flush bg-accent rounded mx-2 mb-2'>
|
||||
<div class='list-group-item bg-transparent d-flex justify-content-between align-items-center border-0'>
|
||||
<span class='text-muted'>Time</span>
|
||||
<span class='font-weight-medium'>{{ timeProp }}</span>
|
||||
</div>
|
||||
<div class='list-group-item bg-transparent d-flex justify-content-between align-items-center border-0'>
|
||||
<span class='text-muted'>Start</span>
|
||||
<span class='font-weight-medium'>{{ startProp }}</span>
|
||||
</div>
|
||||
<div class='list-group-item bg-transparent d-flex justify-content-between align-items-center border-0'>
|
||||
<span class='text-muted'>Stale</span>
|
||||
<span class='font-weight-medium'>{{ staleProp }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue';
|
||||
import { IconClock, IconChevronDown } from '@tabler/icons-vue';
|
||||
import timediff from '../../../timediff';
|
||||
import type COT from '../../../base/cot';
|
||||
|
||||
const props = defineProps<{
|
||||
cot: COT
|
||||
}>();
|
||||
|
||||
const expanded = ref(false);
|
||||
const mode = ref('relative');
|
||||
const currentTime = ref(new Date());
|
||||
const interval = ref<ReturnType<typeof setInterval> | undefined>();
|
||||
|
||||
const staleProp = computed(() => {
|
||||
if (!props.cot) return '';
|
||||
return (currentTime.value && mode.value === 'relative') ? timediff(props.cot.properties.stale) : props.cot.properties.stale;
|
||||
});
|
||||
|
||||
const startProp = computed(() => {
|
||||
if (!props.cot) return '';
|
||||
return (currentTime.value && mode.value === 'relative') ? timediff(props.cot.properties.start) : props.cot.properties.start;
|
||||
});
|
||||
|
||||
const timeProp = computed(() => {
|
||||
if (!props.cot) return '';
|
||||
return (currentTime.value && mode.value === 'relative') ? timediff(props.cot.properties.time) : props.cot.properties.time;
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
interval.value = setInterval(() => {
|
||||
currentTime.value = new Date();
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
if (interval.value) clearInterval(interval.value);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.grid-transition {
|
||||
display: grid;
|
||||
grid-template-rows: 0fr;
|
||||
transition: grid-template-rows 0.3s ease-out;
|
||||
}
|
||||
|
||||
.grid-transition.expanded {
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
|
||||
.rotate-180 {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.transition-transform {
|
||||
transition: transform 0.3s ease-out;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user