add data
This commit is contained in:
louai98
parent
e49491ea32
commit
feee8eb239
1
.npmrc
Normal file
1
.npmrc
Normal file
@ -0,0 +1 @@
|
|||||||
|
//registry.npmjs.org/:_authToken=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
|
||||||
193
package-lock.json
generated
193
package-lock.json
generated
@ -8,10 +8,15 @@
|
|||||||
"name": "salw_client",
|
"name": "salw_client",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@fortawesome/fontawesome-svg-core": "^6.5.2",
|
||||||
|
"@fortawesome/free-solid-svg-icons": "^6.5.2",
|
||||||
|
"@fortawesome/react-fontawesome": "^0.2.1",
|
||||||
"@testing-library/jest-dom": "^5.17.0",
|
"@testing-library/jest-dom": "^5.17.0",
|
||||||
"@testing-library/react": "^13.4.0",
|
"@testing-library/react": "^13.4.0",
|
||||||
"@testing-library/user-event": "^13.5.0",
|
"@testing-library/user-event": "^13.5.0",
|
||||||
"bootstrap": "^5.3.2",
|
"bootstrap": "^5.3.2",
|
||||||
|
"dompurify": "^3.1.4",
|
||||||
|
"html-react-parser": "^5.1.10",
|
||||||
"leaflet": "^1.9.4",
|
"leaflet": "^1.9.4",
|
||||||
"node-sass": "^7.0.3",
|
"node-sass": "^7.0.3",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
@ -2521,6 +2526,51 @@
|
|||||||
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
|
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
|
||||||
"integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
|
"integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
|
||||||
},
|
},
|
||||||
|
"node_modules/@fortawesome/fontawesome-common-types": {
|
||||||
|
"version": "6.5.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.2.tgz",
|
||||||
|
"integrity": "sha512-gBxPg3aVO6J0kpfHNILc+NMhXnqHumFxOmjYCFfOiLZfwhnnfhtsdA2hfJlDnj+8PjAs6kKQPenOTKj3Rf7zHw==",
|
||||||
|
"hasInstallScript": true,
|
||||||
|
"engines": {
|
||||||
|
"node": ">=6"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@fortawesome/fontawesome-svg-core": {
|
||||||
|
"version": "6.5.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.2.tgz",
|
||||||
|
"integrity": "sha512-5CdaCBGl8Rh9ohNdxeeTMxIj8oc3KNBgIeLMvJosBMdslK/UnEB8rzyDRrbKdL1kDweqBPo4GT9wvnakHWucZw==",
|
||||||
|
"hasInstallScript": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@fortawesome/fontawesome-common-types": "6.5.2"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=6"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@fortawesome/free-solid-svg-icons": {
|
||||||
|
"version": "6.5.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.2.tgz",
|
||||||
|
"integrity": "sha512-QWFZYXFE7O1Gr1dTIp+D6UcFUF0qElOnZptpi7PBUMylJh+vFmIedVe1Ir6RM1t2tEQLLSV1k7bR4o92M+uqlw==",
|
||||||
|
"hasInstallScript": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@fortawesome/fontawesome-common-types": "6.5.2"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=6"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@fortawesome/react-fontawesome": {
|
||||||
|
"version": "0.2.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.1.tgz",
|
||||||
|
"integrity": "sha512-ldr5QO2MneAX5W5WBCYB2pZp/PiHDD1hy9YEBLcXUyJb0qnO86oP8RU+CgmYVSH/R4Dbe2ernhcWOrcgaKD9NQ==",
|
||||||
|
"dependencies": {
|
||||||
|
"prop-types": "^15.8.1"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@fortawesome/fontawesome-svg-core": "~1 || ~6",
|
||||||
|
"react": ">=16.3"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@gar/promisify": {
|
"node_modules/@gar/promisify": {
|
||||||
"version": "1.1.3",
|
"version": "1.1.3",
|
||||||
"resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
|
"resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
|
||||||
@ -7578,6 +7628,11 @@
|
|||||||
"url": "https://github.com/fb55/domhandler?sponsor=1"
|
"url": "https://github.com/fb55/domhandler?sponsor=1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/dompurify": {
|
||||||
|
"version": "3.1.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.1.4.tgz",
|
||||||
|
"integrity": "sha512-2gnshi6OshmuKil8rMZuQCGiUF3cUxHY3NGDzUAdUx/NPEe5DVnO8BDoAQouvgwnx0R/+a6jUn36Z0FSdq8vww=="
|
||||||
|
},
|
||||||
"node_modules/domutils": {
|
"node_modules/domutils": {
|
||||||
"version": "2.8.0",
|
"version": "2.8.0",
|
||||||
"resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
|
"resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
|
||||||
@ -9790,6 +9845,84 @@
|
|||||||
"safe-buffer": "~5.1.0"
|
"safe-buffer": "~5.1.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/html-dom-parser": {
|
||||||
|
"version": "5.0.8",
|
||||||
|
"resolved": "https://registry.npmjs.org/html-dom-parser/-/html-dom-parser-5.0.8.tgz",
|
||||||
|
"integrity": "sha512-vuWiX9EXgu8CJ5m9EP5c7bvBmNSuQVnrY8tl0z0ZX96Uth1IPlYH/8W8VZ/hBajFf18EN+j2pukbCNd01HEd1w==",
|
||||||
|
"dependencies": {
|
||||||
|
"domhandler": "5.0.3",
|
||||||
|
"htmlparser2": "9.1.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/html-dom-parser/node_modules/dom-serializer": {
|
||||||
|
"version": "2.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
|
||||||
|
"integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
|
||||||
|
"dependencies": {
|
||||||
|
"domelementtype": "^2.3.0",
|
||||||
|
"domhandler": "^5.0.2",
|
||||||
|
"entities": "^4.2.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/html-dom-parser/node_modules/domhandler": {
|
||||||
|
"version": "5.0.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
|
||||||
|
"integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
|
||||||
|
"dependencies": {
|
||||||
|
"domelementtype": "^2.3.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 4"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/fb55/domhandler?sponsor=1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/html-dom-parser/node_modules/domutils": {
|
||||||
|
"version": "3.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
|
||||||
|
"integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
|
||||||
|
"dependencies": {
|
||||||
|
"dom-serializer": "^2.0.0",
|
||||||
|
"domelementtype": "^2.3.0",
|
||||||
|
"domhandler": "^5.0.3"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/fb55/domutils?sponsor=1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/html-dom-parser/node_modules/entities": {
|
||||||
|
"version": "4.5.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
|
||||||
|
"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.12"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/fb55/entities?sponsor=1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/html-dom-parser/node_modules/htmlparser2": {
|
||||||
|
"version": "9.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-9.1.0.tgz",
|
||||||
|
"integrity": "sha512-5zfg6mHUoaer/97TxnGpxmbR7zJtPwIYFMZ/H5ucTlPZhKvtum05yiPK3Mgai3a0DyVxv7qYqoweaEd2nrYQzQ==",
|
||||||
|
"funding": [
|
||||||
|
"https://github.com/fb55/htmlparser2?sponsor=1",
|
||||||
|
{
|
||||||
|
"type": "github",
|
||||||
|
"url": "https://github.com/sponsors/fb55"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"dependencies": {
|
||||||
|
"domelementtype": "^2.3.0",
|
||||||
|
"domhandler": "^5.0.3",
|
||||||
|
"domutils": "^3.1.0",
|
||||||
|
"entities": "^4.5.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/html-encoding-sniffer": {
|
"node_modules/html-encoding-sniffer": {
|
||||||
"version": "2.0.1",
|
"version": "2.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz",
|
||||||
@ -9841,6 +9974,40 @@
|
|||||||
"node": ">=12"
|
"node": ">=12"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/html-react-parser": {
|
||||||
|
"version": "5.1.10",
|
||||||
|
"resolved": "https://registry.npmjs.org/html-react-parser/-/html-react-parser-5.1.10.tgz",
|
||||||
|
"integrity": "sha512-gV22PvLij4wdEdtrZbGVC7Zy2OVWnQ0bYhX63S196ZRSx4+K0TuutCreHSXr+saUia8KeKB+2TYziVfijpH4Tw==",
|
||||||
|
"dependencies": {
|
||||||
|
"domhandler": "5.0.3",
|
||||||
|
"html-dom-parser": "5.0.8",
|
||||||
|
"react-property": "2.0.2",
|
||||||
|
"style-to-js": "1.1.12"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@types/react": "17 || 18",
|
||||||
|
"react": "0.14 || 15 || 16 || 17 || 18"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"@types/react": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/html-react-parser/node_modules/domhandler": {
|
||||||
|
"version": "5.0.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
|
||||||
|
"integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
|
||||||
|
"dependencies": {
|
||||||
|
"domelementtype": "^2.3.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 4"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/fb55/domhandler?sponsor=1"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/html-webpack-plugin": {
|
"node_modules/html-webpack-plugin": {
|
||||||
"version": "5.5.3",
|
"version": "5.5.3",
|
||||||
"resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.5.3.tgz",
|
"resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.5.3.tgz",
|
||||||
@ -10143,6 +10310,11 @@
|
|||||||
"resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
|
"resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
|
||||||
"integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
|
"integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
|
||||||
},
|
},
|
||||||
|
"node_modules/inline-style-parser": {
|
||||||
|
"version": "0.2.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.3.tgz",
|
||||||
|
"integrity": "sha512-qlD8YNDqyTKTyuITrDOffsl6Tdhv+UC4hcdAVuQsK4IMQ99nSgd1MIA/Q+jQYoh9r3hVUXhYh7urSRmXPkW04g=="
|
||||||
|
},
|
||||||
"node_modules/internal-slot": {
|
"node_modules/internal-slot": {
|
||||||
"version": "1.0.5",
|
"version": "1.0.5",
|
||||||
"resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.5.tgz",
|
"resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.5.tgz",
|
||||||
@ -16156,6 +16328,11 @@
|
|||||||
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
|
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
|
||||||
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
|
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
|
||||||
},
|
},
|
||||||
|
"node_modules/react-property": {
|
||||||
|
"version": "2.0.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-property/-/react-property-2.0.2.tgz",
|
||||||
|
"integrity": "sha512-+PbtI3VuDV0l6CleQMsx2gtK0JZbZKbpdu5ynr+lbsuvtmgbNcS3VM0tuY2QjFNOcWxvXeHjDpy42RO+4U2rug=="
|
||||||
|
},
|
||||||
"node_modules/react-refresh": {
|
"node_modules/react-refresh": {
|
||||||
"version": "0.11.0",
|
"version": "0.11.0",
|
||||||
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
|
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
|
||||||
@ -17971,6 +18148,22 @@
|
|||||||
"webpack": "^5.0.0"
|
"webpack": "^5.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/style-to-js": {
|
||||||
|
"version": "1.1.12",
|
||||||
|
"resolved": "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.12.tgz",
|
||||||
|
"integrity": "sha512-tv+/FkgNYHI2fvCoBMsqPHh5xovwiw+C3X0Gfnss/Syau0Nr3IqGOJ9XiOYXoPnToHVbllKFf5qCNFJGwFg5mg==",
|
||||||
|
"dependencies": {
|
||||||
|
"style-to-object": "1.0.6"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/style-to-object": {
|
||||||
|
"version": "1.0.6",
|
||||||
|
"resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.6.tgz",
|
||||||
|
"integrity": "sha512-khxq+Qm3xEyZfKd/y9L3oIWQimxuc4STrQKtQn8aSDRHb8mFgpukgX1hdzfrMEW6JCjyJ8p89x+IUMVnCBI1PA==",
|
||||||
|
"dependencies": {
|
||||||
|
"inline-style-parser": "0.2.3"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/stylehacks": {
|
"node_modules/stylehacks": {
|
||||||
"version": "5.1.1",
|
"version": "5.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz",
|
||||||
|
|||||||
@ -3,10 +3,15 @@
|
|||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@fortawesome/fontawesome-svg-core": "^6.5.2",
|
||||||
|
"@fortawesome/free-solid-svg-icons": "^6.5.2",
|
||||||
|
"@fortawesome/react-fontawesome": "^0.2.1",
|
||||||
"@testing-library/jest-dom": "^5.17.0",
|
"@testing-library/jest-dom": "^5.17.0",
|
||||||
"@testing-library/react": "^13.4.0",
|
"@testing-library/react": "^13.4.0",
|
||||||
"@testing-library/user-event": "^13.5.0",
|
"@testing-library/user-event": "^13.5.0",
|
||||||
"bootstrap": "^5.3.2",
|
"bootstrap": "^5.3.2",
|
||||||
|
"dompurify": "^3.1.4",
|
||||||
|
"html-react-parser": "^5.1.10",
|
||||||
"leaflet": "^1.9.4",
|
"leaflet": "^1.9.4",
|
||||||
"node-sass": "^7.0.3",
|
"node-sass": "^7.0.3",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
|
|||||||
25
src/Components/Helpers/TruncateContent/TruncateContent.css
Normal file
25
src/Components/Helpers/TruncateContent/TruncateContent.css
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
.content-wrapper {
|
||||||
|
position: relative;
|
||||||
|
max-height: 150px; /* Adjust this value to the desired truncated height */
|
||||||
|
overflow: hidden;
|
||||||
|
transition: max-height 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-wrapper.expanded {
|
||||||
|
max-height: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.read-more {
|
||||||
|
display: block;
|
||||||
|
margin-top: 10px;
|
||||||
|
color: blue;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: underline;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.read-more:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
25
src/Components/Helpers/TruncateContent/TruncateContent.jsx
Normal file
25
src/Components/Helpers/TruncateContent/TruncateContent.jsx
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
import React, { useState } from "react";
|
||||||
|
import "./TruncateContent.css";
|
||||||
|
|
||||||
|
const TruncateContent = ({ children }) => {
|
||||||
|
const [isExpanded, setIsExpanded] = useState(false);
|
||||||
|
|
||||||
|
const toggleReadMore = () => {
|
||||||
|
setIsExpanded(!isExpanded);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div
|
||||||
|
className={`content-wrapper ${isExpanded ? "expanded" : "truncated"}`}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
<button className="read-more" onClick={toggleReadMore}>
|
||||||
|
{isExpanded ? "Read Less" : "Read More"}
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TruncateContent;
|
||||||
@ -1,35 +1,161 @@
|
|||||||
import React from "react";
|
import React, { useState } from "react";
|
||||||
|
import Card_ from "../../UI/Card_/Card_";
|
||||||
|
import DOMPurify from "dompurify";
|
||||||
|
import parse from "html-react-parser";
|
||||||
|
import TruncateContent from "../../Helpers/TruncateContent/TruncateContent";
|
||||||
|
|
||||||
const Blurb = () => {
|
const Blurb = () => {
|
||||||
|
DOMPurify.addHook("afterSanitizeAttributes", function (node) {
|
||||||
|
// set all elements owning target to target=_blank
|
||||||
|
if ("target" in node) {
|
||||||
|
node.setAttribute("target", "_blank");
|
||||||
|
node.setAttribute("rel", "noopener");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const [footnotes, setFootnotes] = useState([
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
text: "Weapons are illegally given out for a short period of time in return for some money. These weapons are often used in criminal activities and then returned. This practice has been used to supplement a low salary/income.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
text: "UNODA Training Manual on Gender-Mainstreaming Small Arms Control, p.132, UNODA-Gender-SALW-Training-Manual®.pdf (un-arm.org)",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
text: "Organization for Security and Co-operation in Europe (OSCE), Best Practice Guide on National Procedures for Stockpile Management and Security of Small Arms and Light Weapons, 511204.pdf (<a href='https://www.osce.org/files/f/documents/6/1/511204.pdf' target='_blank'>osce.org</a>), p.2",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<Card_ className="p-3">
|
||||||
<div className="responsive-text">
|
<TruncateContent>
|
||||||
<p>
|
<MainText footnotes={footnotes} />
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
<Footnotes footnotes={footnotes} />
|
||||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Lobortis
|
</TruncateContent>
|
||||||
scelerisque fermentum dui faucibus in ornare quam viverra orci. Purus
|
</Card_>
|
||||||
faucibus ornare suspendisse sed nisi lacus. Molestie ac feugiat sed
|
);
|
||||||
lectus vestibulum mattis ullamcorper. Id aliquet risus feugiat in ante
|
};
|
||||||
metus. Fermentum posuere urna nec tincidunt praesent semper feugiat
|
|
||||||
nibh. Tortor dignissim convallis aenean et tortor at risus. Sagittis
|
const MainText = ({ footnotes }) => {
|
||||||
nisl rhoncus mattis rhoncus urna neque viverra justo. Vestibulum sed
|
return (
|
||||||
arcu non odio euismod lacinia at quis.
|
<div>
|
||||||
</p>
|
<h3>Physical Security and Stockpile Management (PSSM)</h3>
|
||||||
</div>
|
<p>
|
||||||
<div className="responsive-text">
|
Diverted or ‘lost’ from poorly managed storage facilities, ‘recycled’
|
||||||
<p>
|
from one conflict to another or ‘rented out’
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
<sup>
|
||||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Lobortis
|
<a href="#footnote-1">1</a>
|
||||||
scelerisque fermentum dui faucibus in ornare quam viverra orci. Purus
|
</sup>
|
||||||
faucibus ornare suspendisse sed nisi lacus. Molestie ac feugiat sed
|
, small arms and light weapons (SALW) and their ammunition remain a
|
||||||
lectus vestibulum mattis ullamcorper. Id aliquet risus feugiat in ante
|
primary obstacle to the de-escalation of violent conflicts, national and
|
||||||
metus. Fermentum posuere urna nec tincidunt praesent semper feugiat
|
regional stability and peace-building efforts. Coupled with inadequate
|
||||||
nibh. Tortor dignissim convallis aenean et tortor at risus. Sagittis
|
storage practices, they further pose a serious threat to the safety and
|
||||||
nisl rhoncus mattis rhoncus urna neque viverra justo. Vestibulum sed
|
security of nearby communities and civilian infrastructure, such as
|
||||||
arcu non odio euismod lacinia at quis.
|
schools and hospitals, and their easy accessibility increases the risk
|
||||||
</p>
|
that they are misused to commit armed violence (often against young men)
|
||||||
</div>
|
or acts of gender-based violence (GBV), often against women
|
||||||
</>
|
<sup>
|
||||||
|
<a href="#footnote-2">2</a>
|
||||||
|
</sup>
|
||||||
|
.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Physical Security and Stockpile Management (PSSM) consists of the
|
||||||
|
“procedures and activities that are necessary for the safe and secure
|
||||||
|
accounting, storage, transportation and handling of SALW”
|
||||||
|
<sup>
|
||||||
|
<a href="#footnote-3">3</a>
|
||||||
|
</sup>
|
||||||
|
. It can therefore be viewed as a key element of practical weapons and
|
||||||
|
ammunition management, and it significantly decreases the risk of
|
||||||
|
illicit proliferation, trafficking and diversion of firearms,
|
||||||
|
ammunition, and explosives as well as reduces the risk of Unintentional
|
||||||
|
Munitions Explosions.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Responsible management of stockpiles can therefore positively impact on
|
||||||
|
efforts to reduce armed violence and contribute towards enhancing the
|
||||||
|
security of the surrounding communities as well as the security at the
|
||||||
|
local, national and regional level.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h3>Regional PSSM Training of Trainers (ToT) processes</h3>
|
||||||
|
<p>
|
||||||
|
Since 2016, the bicc advisory team on Weapons and Ammunition Management
|
||||||
|
(WAM) has been supporting two multi-stakeholder regional PSSM Training
|
||||||
|
of Trainers (ToT) processes; one in East Africa (with the Regional
|
||||||
|
Centre on Small Arms in the Great Lakes Region, the Horn of Africa and
|
||||||
|
Bordering States, RECSA) and one in West Africa (with the Economic
|
||||||
|
Community of West African States, ECOWAS).
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
The aim of both processes was to support and enhance regional ownership,
|
||||||
|
strengthen PSSM capacities, establish sustainable structures by creating
|
||||||
|
a regional trainer pool whose trainers can independently train more
|
||||||
|
trainers that equally possess the necessary regional and local
|
||||||
|
knowledge, thereby decreasing a dependency on foreign experts. The focus
|
||||||
|
on regional ownership and sustainability represents a crucial piece of
|
||||||
|
the peace and security puzzle, in alignment with SDG 16.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Based on the UN Programme of Action, and acknowledging PSSM as a key
|
||||||
|
element of WAM, the Multinational Small Arms and Ammunition Group (MSAG)
|
||||||
|
initiated a training programme on the security and stockpile management
|
||||||
|
of weapons, ammunition, and explosives for East African states in Kenya
|
||||||
|
in 2012. Participants of the ToT processes derived from among the
|
||||||
|
military, police and wildlife service sectors. Up until March 2024, 469
|
||||||
|
participants have been trained, out of which 42 were certified as PSSM
|
||||||
|
Instructors and 13 as Senior Instructors. The map below shows their
|
||||||
|
geographical distribution.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
In the meantime, the need for another regional PSSM ToT process was
|
||||||
|
identified in the ECOWAS region (West Africa), which was established in
|
||||||
|
2018 and completed in 2023. Based on the identified need for a regional
|
||||||
|
trainer pool and more accountable PSSM practices, this process also took
|
||||||
|
into account lessons learned from the East Africa ToT process. Between
|
||||||
|
2018 and 2023, a total of 000 participants have been trained, out of
|
||||||
|
which 000 were certified as PSSM Instructors and 000 as Senior
|
||||||
|
Instructors. The map below shows their geographical distribution.
|
||||||
|
</p>
|
||||||
|
<p>Stakeholders implementing the regional PSSM ToT trainings were:</p>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
RECSA, MSAG nations (namely the Bundeswehr Verification Centre, the
|
||||||
|
Austrian Verification Centre, Denmark, among others), IPSTC
|
||||||
|
(International Peace Support Training Centre) in Nairobi/Kenya and
|
||||||
|
bicc.
|
||||||
|
</li>
|
||||||
|
<li>ECOWAS, MSAG (the Bundeswehr Verification Centre) and bicc.</li>
|
||||||
|
</ul>
|
||||||
|
<p>
|
||||||
|
Each of these partners brings a unique skillset that complements that of
|
||||||
|
the other stakeholders.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const Footnotes = ({ footnotes }) => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h4>
|
||||||
|
<hr />
|
||||||
|
</h4>
|
||||||
|
{footnotes.map((footnote) => (
|
||||||
|
<ul>
|
||||||
|
<li
|
||||||
|
className="list-unstyled"
|
||||||
|
key={footnote.id}
|
||||||
|
id={`footnote-${footnote.id}`}
|
||||||
|
>
|
||||||
|
<small>{parse(`${footnote.id}. ${footnote.text}`)}</small>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -1,13 +1,17 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
|
import ReactDOM from 'react-dom';
|
||||||
|
|
||||||
import { MapContainer, GeoJSON, Marker, Tooltip } from "react-leaflet";
|
import { MapContainer, GeoJSON, Marker, Tooltip } from "react-leaflet";
|
||||||
import L, { control } from "leaflet";
|
import L, { control } from "leaflet";
|
||||||
import Africa from "../../../Data/PSSM.geojson";
|
import Africa from "../../../Data/PSSM.geojson";
|
||||||
import "../../../Styles/main.scss";
|
import "../../../Styles/main.scss";
|
||||||
import {
|
import Card_ from "../../UI/Card_/Card_";
|
||||||
CountryStyle,
|
import { CountrySelectedStyle, NotPSSMCountryStyle } from "./countryStyles";
|
||||||
CountrySelectedStyle,
|
|
||||||
CountryHighlightStyle,
|
import Person from "../../../Icons/person.svg";
|
||||||
} from "./countryStyles";
|
import Person2 from "../../../Icons/person2.svg";
|
||||||
|
import Person3 from "../../../Icons/person3.svg";
|
||||||
|
|
||||||
class PSSM extends React.Component {
|
class PSSM extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
@ -15,8 +19,10 @@ class PSSM extends React.Component {
|
|||||||
this.state = {
|
this.state = {
|
||||||
africaCountries: null,
|
africaCountries: null,
|
||||||
countriesNames: [],
|
countriesNames: [],
|
||||||
|
pssmCountries: [],
|
||||||
loading: true,
|
loading: true,
|
||||||
error: null,
|
error: null,
|
||||||
|
selectedCountry: "",
|
||||||
|
|
||||||
center: [3, 15],
|
center: [3, 15],
|
||||||
zoom: 4,
|
zoom: 4,
|
||||||
@ -38,6 +44,10 @@ class PSSM extends React.Component {
|
|||||||
countriesNames: data.features
|
countriesNames: data.features
|
||||||
.map((feature) => feature.properties.name)
|
.map((feature) => feature.properties.name)
|
||||||
.sort(),
|
.sort(),
|
||||||
|
pssmCountries: data.features.filter(
|
||||||
|
(feature) =>
|
||||||
|
feature.properties.RECSA === 1 || feature.properties.ECOWAS === 1
|
||||||
|
),
|
||||||
loading: false,
|
loading: false,
|
||||||
},
|
},
|
||||||
() => {}
|
() => {}
|
||||||
@ -48,10 +58,39 @@ class PSSM extends React.Component {
|
|||||||
loading: false,
|
loading: false,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
console.log(this.state.pssmCountries);
|
||||||
|
};
|
||||||
|
|
||||||
|
onEachFeature = (feature, layer) => {
|
||||||
|
// Bind event to layer
|
||||||
|
layer.on({
|
||||||
|
click: this.onMouseClick,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
onMouseClick = (e) => {
|
||||||
|
this.setState({
|
||||||
|
selectedCountriesFilter: [],
|
||||||
|
selectedCountryColor: "yellow",
|
||||||
|
});
|
||||||
|
const countryName = e.target.feature.properties.name;
|
||||||
|
if (countryName === this.state.selectedCountry) {
|
||||||
|
this.setState({ selectedCountry: "" });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.setState({ selectedCountry: countryName });
|
||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { africaCountries, countriesNames, loading, error } = this.state;
|
const {
|
||||||
|
africaCountries,
|
||||||
|
countriesNames,
|
||||||
|
pssmCountries,
|
||||||
|
loading,
|
||||||
|
error,
|
||||||
|
selectedCountry,
|
||||||
|
} = this.state;
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return <div>Loading...</div>;
|
return <div>Loading...</div>;
|
||||||
}
|
}
|
||||||
@ -60,7 +99,7 @@ class PSSM extends React.Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div id="map" className="map-container border">
|
<Card_ id="map" className="map-container mt-3">
|
||||||
<MapContainer
|
<MapContainer
|
||||||
center={this.state.center}
|
center={this.state.center}
|
||||||
zoom={this.state.zoom}
|
zoom={this.state.zoom}
|
||||||
@ -85,6 +124,8 @@ class PSSM extends React.Component {
|
|||||||
}
|
}
|
||||||
if (feature.properties.ECOWAS === 1) {
|
if (feature.properties.ECOWAS === 1) {
|
||||||
return CountrySelectedStyle("red");
|
return CountrySelectedStyle("red");
|
||||||
|
} else {
|
||||||
|
return NotPSSMCountryStyle();
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
key="africa-map"
|
key="africa-map"
|
||||||
@ -92,8 +133,45 @@ class PSSM extends React.Component {
|
|||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
{selectedCountry &&
|
||||||
|
pssmCountries.map((feature) => {
|
||||||
|
if (feature.properties.name === selectedCountry) {
|
||||||
|
return (
|
||||||
|
<Marker
|
||||||
|
key={feature.properties.name}
|
||||||
|
position={[feature.properties.y, feature.properties.x]}
|
||||||
|
>
|
||||||
|
<Tooltip
|
||||||
|
direction="bottom"
|
||||||
|
offset={[-13, 27]}
|
||||||
|
opacity={1}
|
||||||
|
permanent
|
||||||
|
className="tooltip-custom"
|
||||||
|
>
|
||||||
|
<h5>{feature.properties.name}</h5>
|
||||||
|
<div>
|
||||||
|
<ul className="list-unstyled tooltip-text">
|
||||||
|
<li>
|
||||||
|
<img src={Person3} className="person-icon"/> Number of participants trained:{" "}
|
||||||
|
<span className="tooltip-text-number">{feature.properties["Trained-Participants"] || "-"}</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<img src={Person2} className="person-icon"/> Number of PSSM instractors:{" "}
|
||||||
|
<span className="tooltip-text-number">{feature.properties["PSSM-Instructors"] || "-"}</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<img src={Person} className="person-icon"/> Number of senior PSSM instractors:{" "}
|
||||||
|
<span className="tooltip-text-number">{feature.properties["PSSM-Senior-Instructors"] || "-"}</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</Tooltip>
|
||||||
|
</Marker>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
})}
|
||||||
</MapContainer>
|
</MapContainer>
|
||||||
</div>
|
</Card_>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,26 +1,36 @@
|
|||||||
export const CountryStyle = () => {
|
export const CountryStyle = () => {
|
||||||
return {
|
return {
|
||||||
color: "black",
|
color: "black",
|
||||||
weight: 1,
|
weight: 1,
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
fillColor: "#FDEDE2",
|
fillColor: "#FDEDE2",
|
||||||
fillOpacity: 0.3,
|
fillOpacity: 0.3,
|
||||||
};
|
|
||||||
};
|
};
|
||||||
|
};
|
||||||
|
|
||||||
export const CountrySelectedStyle = (color) => {
|
export const CountrySelectedStyle = (color) => {
|
||||||
return {
|
return {
|
||||||
fillColor: color,
|
fillColor: color,
|
||||||
color: "black",
|
color: "black",
|
||||||
weight: 3,
|
weight: 2,
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
};
|
};
|
||||||
}
|
};
|
||||||
|
|
||||||
export const CountryHighlightStyle = () => {
|
export const CountryHighlightStyle = () => {
|
||||||
return {
|
return {
|
||||||
fillColor: "yellow",
|
fillColor: "yellow",
|
||||||
color: "black",
|
color: "black",
|
||||||
weight: 3,
|
weight: 3,
|
||||||
};
|
};
|
||||||
}
|
};
|
||||||
|
|
||||||
|
export const NotPSSMCountryStyle = () => {
|
||||||
|
return {
|
||||||
|
fillColor: "#cccccc",
|
||||||
|
color: "#e3e3e3",
|
||||||
|
weight: 1,
|
||||||
|
opacity: 1,
|
||||||
|
fillOpacity: 0.3,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
23
src/Icons/person.svg
Normal file
23
src/Icons/person.svg
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1080" height="1080" viewBox="0 0 1080 1080" xml:space="preserve">
|
||||||
|
<desc>Created with Fabric.js 5.2.4</desc>
|
||||||
|
<defs>
|
||||||
|
</defs>
|
||||||
|
<rect x="0" y="0" width="100%" height="100%" fill="transparent"></rect>
|
||||||
|
<g transform="matrix(1 0 0 1 540 540)" id="92f8c780-682d-410e-9305-55f6c76b821a" >
|
||||||
|
<rect style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1; visibility: hidden;" vector-effect="non-scaling-stroke" x="-540" y="-540" rx="0" ry="0" width="1080" height="1080" />
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(1 0 0 1 540 540)" id="2902fc72-5f87-4d9a-a213-49b43b827461" >
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(1 0 0 1 174.64 508.98)" >
|
||||||
|
<g style="" vector-effect="non-scaling-stroke" >
|
||||||
|
<g transform="matrix(33.33 0 0 33.33 -0.01 1.63)" >
|
||||||
|
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-12, -12.05)" d="M 13.9 2.999 C 13.900404510128258 3.767569137253463 13.437740927005041 4.4606849303964715 12.727791698439338 4.755083937232331 C 12.017842469873635 5.04948294406819 11.200454630665819 4.88717393579122 10.656851071891348 4.343856484152948 C 10.113247513116876 3.800539032514675 9.950508209994716 2.9832367548523684 10.244533420214 2.273132637048167 C 10.538558630433283 1.5630285192439657 11.231430756296502 1.1000001064500415 12 1.1 C 13.048950624407942 1.09999985471597 13.899447920724006 1.9500495208760782 13.9 2.9990000000000006 z M 13.544 6 L 10.456 6 C 9.604684814488484 5.999811949956359 8.862518492883558 6.579113995431316 8.655999999999999 7.405000000000001 L 6.993999999999999 14.057 C 6.949087749408432 14.259377888455008 7.00082563788415 14.471133674859198 7.133999999999999 14.63 C 7.29552492159201 14.833465444933692 7.539274387351227 14.954423826438266 7.798999999999999 14.96 C 8.086057992331412 14.955557715508808 8.34287529667128 14.780544391724366 8.451999999999998 14.515 L 10 9.1 L 10 13 L 9.078 22.219 C 9.057924474646427 22.41874832997887 9.123349536101328 22.61765922173752 9.258078407025312 22.76648984152766 C 9.392807277949297 22.915320461317805 9.584245430761463 23.000158042462385 9.785 23 L 9.859 23 C 10.19101964547464 22.999898168622497 10.475889150458729 22.763347237492642 10.537 22.437 L 12 14.583 L 13.463000000000001 22.437 C 13.524110849541275 22.763347237492642 13.808980354525362 22.999898168622497 14.141000000000002 23 L 14.215000000000002 23 C 14.415754569238539 23.000158042462385 14.607192722050703 22.915320461317805 14.74192159297469 22.76648984152766 C 14.876650463898674 22.61765922173752 14.942075525353575 22.41874832997887 14.922000000000002 22.219 L 14 13 L 14 9.1 L 15.548 14.515 C 15.65743368223532 14.780152409969652 15.914184251847452 14.954727069859064 16.201 14.959000000000001 C 16.460559067140714 14.953667969304108 16.704279363027823 14.83309055975996 16.866 14.63 C 16.99917436211585 14.471133674859198 17.05091225059157 14.259377888455008 17.006 14.057 L 15.344000000000001 7.405 C 15.137481507116442 6.579113995431316 14.395315185511514 5.999811949956358 13.544 6 z" stroke-linecap="round" />
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(33.33 0 0 33.33 -0.04 -0.04)" >
|
||||||
|
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: none; fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-12, -12)" d="M 0 0 L 24 0 L 24 24 L 0 24 z" stroke-linecap="round" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.9 KiB |
33
src/Icons/person2.svg
Normal file
33
src/Icons/person2.svg
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1080" height="1080" viewBox="0 0 1080 1080" xml:space="preserve">
|
||||||
|
<desc>Created with Fabric.js 5.2.4</desc>
|
||||||
|
<defs>
|
||||||
|
</defs>
|
||||||
|
<rect x="0" y="0" width="100%" height="100%" fill="transparent"></rect>
|
||||||
|
<g transform="matrix(1 0 0 1 540 540)" id="92f8c780-682d-410e-9305-55f6c76b821a" >
|
||||||
|
<rect style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1; visibility: hidden;" vector-effect="non-scaling-stroke" x="-540" y="-540" rx="0" ry="0" width="1080" height="1080" />
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(1 0 0 1 540 540)" id="2902fc72-5f87-4d9a-a213-49b43b827461" >
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(1 0 0 1 174.64 508.98)" >
|
||||||
|
<g style="" vector-effect="non-scaling-stroke" >
|
||||||
|
<g transform="matrix(33.33 0 0 33.33 -0.01 1.63)" >
|
||||||
|
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-12, -12.05)" d="M 13.9 2.999 C 13.900404510128258 3.767569137253463 13.437740927005041 4.4606849303964715 12.727791698439338 4.755083937232331 C 12.017842469873635 5.04948294406819 11.200454630665819 4.88717393579122 10.656851071891348 4.343856484152948 C 10.113247513116876 3.800539032514675 9.950508209994716 2.9832367548523684 10.244533420214 2.273132637048167 C 10.538558630433283 1.5630285192439657 11.231430756296502 1.1000001064500415 12 1.1 C 13.048950624407942 1.09999985471597 13.899447920724006 1.9500495208760782 13.9 2.9990000000000006 z M 13.544 6 L 10.456 6 C 9.604684814488484 5.999811949956359 8.862518492883558 6.579113995431316 8.655999999999999 7.405000000000001 L 6.993999999999999 14.057 C 6.949087749408432 14.259377888455008 7.00082563788415 14.471133674859198 7.133999999999999 14.63 C 7.29552492159201 14.833465444933692 7.539274387351227 14.954423826438266 7.798999999999999 14.96 C 8.086057992331412 14.955557715508808 8.34287529667128 14.780544391724366 8.451999999999998 14.515 L 10 9.1 L 10 13 L 9.078 22.219 C 9.057924474646427 22.41874832997887 9.123349536101328 22.61765922173752 9.258078407025312 22.76648984152766 C 9.392807277949297 22.915320461317805 9.584245430761463 23.000158042462385 9.785 23 L 9.859 23 C 10.19101964547464 22.999898168622497 10.475889150458729 22.763347237492642 10.537 22.437 L 12 14.583 L 13.463000000000001 22.437 C 13.524110849541275 22.763347237492642 13.808980354525362 22.999898168622497 14.141000000000002 23 L 14.215000000000002 23 C 14.415754569238539 23.000158042462385 14.607192722050703 22.915320461317805 14.74192159297469 22.76648984152766 C 14.876650463898674 22.61765922173752 14.942075525353575 22.41874832997887 14.922000000000002 22.219 L 14 13 L 14 9.1 L 15.548 14.515 C 15.65743368223532 14.780152409969652 15.914184251847452 14.954727069859064 16.201 14.959000000000001 C 16.460559067140714 14.953667969304108 16.704279363027823 14.83309055975996 16.866 14.63 C 16.99917436211585 14.471133674859198 17.05091225059157 14.259377888455008 17.006 14.057 L 15.344000000000001 7.405 C 15.137481507116442 6.579113995431316 14.395315185511514 5.999811949956358 13.544 6 z" stroke-linecap="round" />
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(33.33 0 0 33.33 -0.04 -0.04)" >
|
||||||
|
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: none; fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-12, -12)" d="M 0 0 L 24 0 L 24 24 L 0 24 z" stroke-linecap="round" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(1 0 0 1 508.64 510.94)" >
|
||||||
|
<g style="" vector-effect="non-scaling-stroke" >
|
||||||
|
<g transform="matrix(33.33 0 0 33.33 -0.01 1.63)" >
|
||||||
|
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-12, -12.05)" d="M 13.9 2.999 C 13.900404510128258 3.767569137253463 13.437740927005041 4.4606849303964715 12.727791698439338 4.755083937232331 C 12.017842469873635 5.04948294406819 11.200454630665819 4.88717393579122 10.656851071891348 4.343856484152948 C 10.113247513116876 3.800539032514675 9.950508209994716 2.9832367548523684 10.244533420214 2.273132637048167 C 10.538558630433283 1.5630285192439657 11.231430756296502 1.1000001064500415 12 1.1 C 13.048950624407942 1.09999985471597 13.899447920724006 1.9500495208760782 13.9 2.9990000000000006 z M 13.544 6 L 10.456 6 C 9.604684814488484 5.999811949956359 8.862518492883558 6.579113995431316 8.655999999999999 7.405000000000001 L 6.993999999999999 14.057 C 6.949087749408432 14.259377888455008 7.00082563788415 14.471133674859198 7.133999999999999 14.63 C 7.29552492159201 14.833465444933692 7.539274387351227 14.954423826438266 7.798999999999999 14.96 C 8.086057992331412 14.955557715508808 8.34287529667128 14.780544391724366 8.451999999999998 14.515 L 10 9.1 L 10 13 L 9.078 22.219 C 9.057924474646427 22.41874832997887 9.123349536101328 22.61765922173752 9.258078407025312 22.76648984152766 C 9.392807277949297 22.915320461317805 9.584245430761463 23.000158042462385 9.785 23 L 9.859 23 C 10.19101964547464 22.999898168622497 10.475889150458729 22.763347237492642 10.537 22.437 L 12 14.583 L 13.463000000000001 22.437 C 13.524110849541275 22.763347237492642 13.808980354525362 22.999898168622497 14.141000000000002 23 L 14.215000000000002 23 C 14.415754569238539 23.000158042462385 14.607192722050703 22.915320461317805 14.74192159297469 22.76648984152766 C 14.876650463898674 22.61765922173752 14.942075525353575 22.41874832997887 14.922000000000002 22.219 L 14 13 L 14 9.1 L 15.548 14.515 C 15.65743368223532 14.780152409969652 15.914184251847452 14.954727069859064 16.201 14.959000000000001 C 16.460559067140714 14.953667969304108 16.704279363027823 14.83309055975996 16.866 14.63 C 16.99917436211585 14.471133674859198 17.05091225059157 14.259377888455008 17.006 14.057 L 15.344000000000001 7.405 C 15.137481507116442 6.579113995431316 14.395315185511514 5.999811949956358 13.544 6 z" stroke-linecap="round" />
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(33.33 0 0 33.33 -0.04 -0.04)" >
|
||||||
|
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: none; fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-12, -12)" d="M 0 0 L 24 0 L 24 24 L 0 24 z" stroke-linecap="round" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 6.8 KiB |
42
src/Icons/person3.svg
Normal file
42
src/Icons/person3.svg
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1080" height="1080" viewBox="0 0 1080 1080" xml:space="preserve">
|
||||||
|
<desc>Created with Fabric.js 5.2.4</desc>
|
||||||
|
<defs>
|
||||||
|
</defs>
|
||||||
|
<g transform="matrix(1 0 0 1 540 540)" id="92f8c780-682d-410e-9305-55f6c76b821a" >
|
||||||
|
<rect style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1; visibility: hidden;" vector-effect="non-scaling-stroke" x="-540" y="-540" rx="0" ry="0" width="1080" height="1080" />
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(1 0 0 1 540 540)" id="2902fc72-5f87-4d9a-a213-49b43b827461" >
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(1 0 0 1 174.64 508.98)" >
|
||||||
|
<g style="" vector-effect="non-scaling-stroke" >
|
||||||
|
<g transform="matrix(33.33 0 0 33.33 -0.01 1.63)" >
|
||||||
|
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-12, -12.05)" d="M 13.9 2.999 C 13.900404510128258 3.767569137253463 13.437740927005041 4.4606849303964715 12.727791698439338 4.755083937232331 C 12.017842469873635 5.04948294406819 11.200454630665819 4.88717393579122 10.656851071891348 4.343856484152948 C 10.113247513116876 3.800539032514675 9.950508209994716 2.9832367548523684 10.244533420214 2.273132637048167 C 10.538558630433283 1.5630285192439657 11.231430756296502 1.1000001064500415 12 1.1 C 13.048950624407942 1.09999985471597 13.899447920724006 1.9500495208760782 13.9 2.9990000000000006 z M 13.544 6 L 10.456 6 C 9.604684814488484 5.999811949956359 8.862518492883558 6.579113995431316 8.655999999999999 7.405000000000001 L 6.993999999999999 14.057 C 6.949087749408432 14.259377888455008 7.00082563788415 14.471133674859198 7.133999999999999 14.63 C 7.29552492159201 14.833465444933692 7.539274387351227 14.954423826438266 7.798999999999999 14.96 C 8.086057992331412 14.955557715508808 8.34287529667128 14.780544391724366 8.451999999999998 14.515 L 10 9.1 L 10 13 L 9.078 22.219 C 9.057924474646427 22.41874832997887 9.123349536101328 22.61765922173752 9.258078407025312 22.76648984152766 C 9.392807277949297 22.915320461317805 9.584245430761463 23.000158042462385 9.785 23 L 9.859 23 C 10.19101964547464 22.999898168622497 10.475889150458729 22.763347237492642 10.537 22.437 L 12 14.583 L 13.463000000000001 22.437 C 13.524110849541275 22.763347237492642 13.808980354525362 22.999898168622497 14.141000000000002 23 L 14.215000000000002 23 C 14.415754569238539 23.000158042462385 14.607192722050703 22.915320461317805 14.74192159297469 22.76648984152766 C 14.876650463898674 22.61765922173752 14.942075525353575 22.41874832997887 14.922000000000002 22.219 L 14 13 L 14 9.1 L 15.548 14.515 C 15.65743368223532 14.780152409969652 15.914184251847452 14.954727069859064 16.201 14.959000000000001 C 16.460559067140714 14.953667969304108 16.704279363027823 14.83309055975996 16.866 14.63 C 16.99917436211585 14.471133674859198 17.05091225059157 14.259377888455008 17.006 14.057 L 15.344000000000001 7.405 C 15.137481507116442 6.579113995431316 14.395315185511514 5.999811949956358 13.544 6 z" stroke-linecap="round" />
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(33.33 0 0 33.33 -0.04 -0.04)" >
|
||||||
|
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: none; fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-12, -12)" d="M 0 0 L 24 0 L 24 24 L 0 24 z" stroke-linecap="round" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(1 0 0 1 508.64 510.94)" >
|
||||||
|
<g style="" vector-effect="non-scaling-stroke" >
|
||||||
|
<g transform="matrix(33.33 0 0 33.33 -0.01 1.63)" >
|
||||||
|
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-12, -12.05)" d="M 13.9 2.999 C 13.900404510128258 3.767569137253463 13.437740927005041 4.4606849303964715 12.727791698439338 4.755083937232331 C 12.017842469873635 5.04948294406819 11.200454630665819 4.88717393579122 10.656851071891348 4.343856484152948 C 10.113247513116876 3.800539032514675 9.950508209994716 2.9832367548523684 10.244533420214 2.273132637048167 C 10.538558630433283 1.5630285192439657 11.231430756296502 1.1000001064500415 12 1.1 C 13.048950624407942 1.09999985471597 13.899447920724006 1.9500495208760782 13.9 2.9990000000000006 z M 13.544 6 L 10.456 6 C 9.604684814488484 5.999811949956359 8.862518492883558 6.579113995431316 8.655999999999999 7.405000000000001 L 6.993999999999999 14.057 C 6.949087749408432 14.259377888455008 7.00082563788415 14.471133674859198 7.133999999999999 14.63 C 7.29552492159201 14.833465444933692 7.539274387351227 14.954423826438266 7.798999999999999 14.96 C 8.086057992331412 14.955557715508808 8.34287529667128 14.780544391724366 8.451999999999998 14.515 L 10 9.1 L 10 13 L 9.078 22.219 C 9.057924474646427 22.41874832997887 9.123349536101328 22.61765922173752 9.258078407025312 22.76648984152766 C 9.392807277949297 22.915320461317805 9.584245430761463 23.000158042462385 9.785 23 L 9.859 23 C 10.19101964547464 22.999898168622497 10.475889150458729 22.763347237492642 10.537 22.437 L 12 14.583 L 13.463000000000001 22.437 C 13.524110849541275 22.763347237492642 13.808980354525362 22.999898168622497 14.141000000000002 23 L 14.215000000000002 23 C 14.415754569238539 23.000158042462385 14.607192722050703 22.915320461317805 14.74192159297469 22.76648984152766 C 14.876650463898674 22.61765922173752 14.942075525353575 22.41874832997887 14.922000000000002 22.219 L 14 13 L 14 9.1 L 15.548 14.515 C 15.65743368223532 14.780152409969652 15.914184251847452 14.954727069859064 16.201 14.959000000000001 C 16.460559067140714 14.953667969304108 16.704279363027823 14.83309055975996 16.866 14.63 C 16.99917436211585 14.471133674859198 17.05091225059157 14.259377888455008 17.006 14.057 L 15.344000000000001 7.405 C 15.137481507116442 6.579113995431316 14.395315185511514 5.999811949956358 13.544 6 z" stroke-linecap="round" />
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(33.33 0 0 33.33 -0.04 -0.04)" >
|
||||||
|
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: none; fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-12, -12)" d="M 0 0 L 24 0 L 24 24 L 0 24 z" stroke-linecap="round" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(1 0 0 1 844.94 511.75)" >
|
||||||
|
<g style="" vector-effect="non-scaling-stroke" >
|
||||||
|
<g transform="matrix(33.33 0 0 33.33 -0.01 1.63)" >
|
||||||
|
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-12, -12.05)" d="M 13.9 2.999 C 13.900404510128258 3.767569137253463 13.437740927005041 4.4606849303964715 12.727791698439338 4.755083937232331 C 12.017842469873635 5.04948294406819 11.200454630665819 4.88717393579122 10.656851071891348 4.343856484152948 C 10.113247513116876 3.800539032514675 9.950508209994716 2.9832367548523684 10.244533420214 2.273132637048167 C 10.538558630433283 1.5630285192439657 11.231430756296502 1.1000001064500415 12 1.1 C 13.048950624407942 1.09999985471597 13.899447920724006 1.9500495208760782 13.9 2.9990000000000006 z M 13.544 6 L 10.456 6 C 9.604684814488484 5.999811949956359 8.862518492883558 6.579113995431316 8.655999999999999 7.405000000000001 L 6.993999999999999 14.057 C 6.949087749408432 14.259377888455008 7.00082563788415 14.471133674859198 7.133999999999999 14.63 C 7.29552492159201 14.833465444933692 7.539274387351227 14.954423826438266 7.798999999999999 14.96 C 8.086057992331412 14.955557715508808 8.34287529667128 14.780544391724366 8.451999999999998 14.515 L 10 9.1 L 10 13 L 9.078 22.219 C 9.057924474646427 22.41874832997887 9.123349536101328 22.61765922173752 9.258078407025312 22.76648984152766 C 9.392807277949297 22.915320461317805 9.584245430761463 23.000158042462385 9.785 23 L 9.859 23 C 10.19101964547464 22.999898168622497 10.475889150458729 22.763347237492642 10.537 22.437 L 12 14.583 L 13.463000000000001 22.437 C 13.524110849541275 22.763347237492642 13.808980354525362 22.999898168622497 14.141000000000002 23 L 14.215000000000002 23 C 14.415754569238539 23.000158042462385 14.607192722050703 22.915320461317805 14.74192159297469 22.76648984152766 C 14.876650463898674 22.61765922173752 14.942075525353575 22.41874832997887 14.922000000000002 22.219 L 14 13 L 14 9.1 L 15.548 14.515 C 15.65743368223532 14.780152409969652 15.914184251847452 14.954727069859064 16.201 14.959000000000001 C 16.460559067140714 14.953667969304108 16.704279363027823 14.83309055975996 16.866 14.63 C 16.99917436211585 14.471133674859198 17.05091225059157 14.259377888455008 17.006 14.057 L 15.344000000000001 7.405 C 15.137481507116442 6.579113995431316 14.395315185511514 5.999811949956358 13.544 6 z" stroke-linecap="round" />
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(33.33 0 0 33.33 -0.04 -0.04)" >
|
||||||
|
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: none; fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-12, -12)" d="M 0 0 L 24 0 L 24 24 L 0 24 z" stroke-linecap="round" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 9.7 KiB |
@ -0,0 +1,12 @@
|
|||||||
|
|
||||||
|
.tooltip-text {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip-text-number{
|
||||||
|
color: rgb(0, 132, 255);
|
||||||
|
}
|
||||||
|
|
||||||
|
.person-icon{
|
||||||
|
height: 1.3rem;
|
||||||
|
}
|
||||||
@ -12,6 +12,7 @@
|
|||||||
@import 'Layout/filters';
|
@import 'Layout/filters';
|
||||||
@import 'Layout/map';
|
@import 'Layout/map';
|
||||||
@import 'Layout/tooltips';
|
@import 'Layout/tooltips';
|
||||||
|
@import 'Layout/map_pssm';
|
||||||
// Import other layout partials...
|
// Import other layout partials...
|
||||||
|
|
||||||
// Components
|
// Components
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user