From 659abf4fa05e445c7c2d38b675a3fc0d4219086b Mon Sep 17 00:00:00 2001 From: ardhi Date: Wed, 15 Feb 2023 22:10:28 +0700 Subject: [PATCH 1/2] change marker icon on map monitoring --- src/appredux/modules/map/actions.js | 1 + .../api/modules/map_monitoring/index.js | 2 +- src/views/MapMonitoring/MapMonitoring.css | 16 +++ src/views/MapMonitoring/index.js | 112 ++++++++++++++++-- 4 files changed, 117 insertions(+), 14 deletions(-) diff --git a/src/appredux/modules/map/actions.js b/src/appredux/modules/map/actions.js index 42d9f5f..7b1da5c 100644 --- a/src/appredux/modules/map/actions.js +++ b/src/appredux/modules/map/actions.js @@ -109,6 +109,7 @@ export const getUserPoints = async () => { "Clock in location": n.clock_in_loc ? n.clock_in_loc : '-', "Clock out time": n.clock_out ? moment(n.clock_out).format('YYYY-MM-DD HH:mm:ss') : '-', "Clock out location": n.clock_out_loc ? n.clock_out_loc : '-', + "image": n.image_selfie ? n.image_selfie : '' // still dummy } feature.geometry = { diff --git a/src/services/api/modules/map_monitoring/index.js b/src/services/api/modules/map_monitoring/index.js index 6a989cb..e5b46fb 100644 --- a/src/services/api/modules/map_monitoring/index.js +++ b/src/services/api/modules/map_monitoring/index.js @@ -107,7 +107,7 @@ export default class ApiMapMonitoring extends RequestApi { }).catch(e => { // console.log('error search presence', e); let error = JSON.parse(JSON.stringify(e)); - console.log('error search presence', error); + console.log('error search user history', error); if (error.message) { alert(error.message); } diff --git a/src/views/MapMonitoring/MapMonitoring.css b/src/views/MapMonitoring/MapMonitoring.css index 1ad7e4c..34f2c44 100644 --- a/src/views/MapMonitoring/MapMonitoring.css +++ b/src/views/MapMonitoring/MapMonitoring.css @@ -6,4 +6,20 @@ z-index: 999999; align-self: center; margin-left: 45%; +} + +.image-marker img { + height: 40px !important; + width: 40px !important; + border-radius: 50%; + border: solid; + border-color: green; +} + +.image-marker-active img { + height: 40px !important; + width: 40px !important; + border-radius: 50%; + border: solid; + border-color: blue; } \ No newline at end of file diff --git a/src/views/MapMonitoring/index.js b/src/views/MapMonitoring/index.js index 3623a77..cda19a4 100644 --- a/src/views/MapMonitoring/index.js +++ b/src/views/MapMonitoring/index.js @@ -15,6 +15,8 @@ import "react-loader-spinner/dist/loader/css/react-spinner-loader.css"; import { ToastContainer, toast } from "react-toastify"; import "react-toastify/dist/ReactToastify.css"; import './MapMonitoring.css'; +import { BASE_SIMPRO_LUMEN_IMAGE } from '../../const/ApiConst'; +import DEFAULT_USER_ICON from '../../assets/img/avatars/user.png'; const MapMonitoring = () => { @@ -53,7 +55,8 @@ const MapMonitoring = () => { if (userPoints) { let userPointLayer = L.geoJson(userPoints, { name: 'userPointLayer', - onEachFeature: onEachFeatureUserPoints + onEachFeature: onEachFeatureUserPoints, + pointToLayer: pointToLayerUserPoints }); userPointLayer.addTo(mymap); mymap.fitBounds(userPointLayer.getBounds()); @@ -78,7 +81,8 @@ const MapMonitoring = () => { const initMap = () => { let mymap = L.map('map-area', { center: center, - zoom: 5 + zoom: 5, + // maxZoom: 20 }); store.dispatch(setMymap(mymap)); // setMymap(mymap); @@ -125,23 +129,105 @@ const MapMonitoring = () => { L.DomEvent.stopPropagation(e); if (!store.getState().mapReducer.routingBarVisible) { // proceed only when routing mode is not visible - showHighLight(feature); + showHighLight(feature, e); } }); } - function showHighLight(feature) { + const pointToLayerUserPoints = (feature, latlng) => { + // console.log('feature', feature); + // create a marker style + // let logoMarkerStyle = L.Icon.extend({ + // options: { + // iconSize: [85, 90], + // iconAnchor: [38, 86], + // popupAnchor: [0, -80] + // } + // }); + + // let logoMarker = new logoMarkerStyle({iconUrl: `${BASE_SIMPRO_LUMEN_IMAGE}/${feature.properties.image}`}); + let imgSrc = DEFAULT_USER_ICON; + if (feature && feature.properties && feature.properties.image && feature.properties.image !== '') { + imgSrc = `${BASE_SIMPRO_LUMEN_IMAGE}/${feature.properties.image}` + } + let img = `` + let logoMarker = L.divIcon({ + html: img, + className: 'image-marker', + iconSize: [40, 40], + iconAnchor: [20, 50], + popupAnchor: [0, -80] + }); + + // let logoMarkerActive = L.divIcon({ + // html: img, + // className: 'image-marker-active', + // iconSize: [40, 40], + // iconAnchor: [20, 50], + // popupAnchor: [0, -80] + // }); + + // read the coordinates from your marker + let lat = feature.geometry.coordinates[1]; + let lon = feature.geometry.coordinates[0]; + + // create a new marker using the icon style + let marker = new L.Marker([lat,lon],{icon: logoMarker}); + return marker; + } + + function showHighLight(feature, e) { + // console.log('showHighLight feature', feature); + // console.log('showHighLight e', e); removeLayerByName('popupTemp'); + + // let selectedIcon = e.target.options.icon; + // let classIcon = e.target.options.icon.options.className; + // let newClassIcon = 'image-marker-active'; + // if (classIcon === 'image-marker-active') { + // newClassIcon = 'image-marker'; + // } + + // build new icon + // selectedIcon.options.className = newClassIcon; + // e.setIcon(selectedIcon); + // L.divIcon(selectedIcon); + + // L.divIcon({ + // html: img, + // className: 'image-marker', + // iconSize: [40, 40], + // iconAnchor: [20, 50], + // popupAnchor: [0, -80] + // }); + // add highlight - L.geoJSON(feature, { - style: function(feature) { - return {color: 'blue'} - }, - name: 'popupTemp', - onEachFeature: function (feature, layer) { - layer.name = 'popupTemp' - }, - }).addTo(mymap); + // console.log('selectedIcon', selectedIcon); + // console.log('classList', e.target.options.icon.options.classList); + // if (!openRight) { + // console.log('e.target.options.icon.options.className', e.target.options.icon.options.className) + // e.target.options.icon.options.className.replace('image-marker','image-marker-active'); + // } + // else { + // console.log('e.target.options.icon.options.className', e.target.options.icon.options.className) + // e.target.options.icon.options.className.replace('image-marker-active','image-marker'); + // } + + // kalo bukan point bikin hightlight jadi biru + if (feature && feature.geometry && feature.geometry.type !== 'Point') { + L.geoJSON(feature, { + style: function(feature) { + return {color: 'blue'} + }, + name: 'popupTemp', + onEachFeature: function (feature, layer) { + layer.name = 'popupTemp' + }, + }).addTo(mymap); + } + + // let marker = new L.Marker([feature.geometry.coordinates[1], feature.geometry.coordinates[0]],{icon: selectedIcon}); + // return marker; // opening right panel store.dispatch(setOpenRight(!openRight)); From 81a16c28ac115b67192a1c069c86ade9aa4b3508 Mon Sep 17 00:00:00 2001 From: Wahyu Ramadhan Date: Thu, 16 Feb 2023 13:26:16 +0700 Subject: [PATCH 2/2] Fix ui dashboard bod --- src/views/Dashboard/DashboardBOD.js | 35 ++++++++++++++++++----------- 1 file changed, 22 insertions(+), 13 deletions(-) diff --git a/src/views/Dashboard/DashboardBOD.js b/src/views/Dashboard/DashboardBOD.js index f22d136..8515a48 100644 --- a/src/views/Dashboard/DashboardBOD.js +++ b/src/views/Dashboard/DashboardBOD.js @@ -406,6 +406,15 @@ const DashboardBOD = () => { { datalabels: { color: '#FFFFFF', formatter: function(value, context) { - return value ? toRupiah(value, {useUnit: 'jt'}) : 0 + return value ? toRupiah(value, { useUnit: 'jt' }) : 0 } } }, @@ -489,10 +498,10 @@ const DashboardBOD = () => { label: "", // data: [2, 4, 10], data: [ - PROJECT_BY_FINANCIAL_HEALTH && PROJECT_BY_FINANCIAL_HEALTH.overrun ? PROJECT_BY_FINANCIAL_HEALTH.overrun : 0, - PROJECT_BY_FINANCIAL_HEALTH && PROJECT_BY_FINANCIAL_HEALTH.warning ? PROJECT_BY_FINANCIAL_HEALTH.warning : 0, - PROJECT_BY_FINANCIAL_HEALTH && PROJECT_BY_FINANCIAL_HEALTH['on-budget'] ? PROJECT_BY_FINANCIAL_HEALTH['on-budget'] : 0 - ], + PROJECT_BY_FINANCIAL_HEALTH && PROJECT_BY_FINANCIAL_HEALTH.overrun ? PROJECT_BY_FINANCIAL_HEALTH.overrun : '', + PROJECT_BY_FINANCIAL_HEALTH && PROJECT_BY_FINANCIAL_HEALTH.warning ? PROJECT_BY_FINANCIAL_HEALTH.warning : '', + PROJECT_BY_FINANCIAL_HEALTH && PROJECT_BY_FINANCIAL_HEALTH['on-budget'] ? PROJECT_BY_FINANCIAL_HEALTH['on-budget'] : '' + ].filter(value => value !== null), borderColor: ["#E80053", "#FFD600", "#52AC0B",], backgroundColor: ["#E80053", "#FFD600", "#52AC0B",], borderWidth: 2, @@ -515,9 +524,9 @@ const DashboardBOD = () => { label: "", // data: [1, 3, 11], data: [ - PROJECT_BY_SCHEDULE_HEALTH && PROJECT_BY_SCHEDULE_HEALTH['behind-schedule'] ? PROJECT_BY_SCHEDULE_HEALTH['behind-schedule'] : 0, - PROJECT_BY_SCHEDULE_HEALTH && PROJECT_BY_SCHEDULE_HEALTH.warning ? PROJECT_BY_SCHEDULE_HEALTH.warning : 0, - PROJECT_BY_SCHEDULE_HEALTH && PROJECT_BY_SCHEDULE_HEALTH['on-schedule'] ? PROJECT_BY_SCHEDULE_HEALTH['on-schedule'] : 0 + PROJECT_BY_SCHEDULE_HEALTH && PROJECT_BY_SCHEDULE_HEALTH['behind-schedule'] ? PROJECT_BY_SCHEDULE_HEALTH['behind-schedule'] : '', + PROJECT_BY_SCHEDULE_HEALTH && PROJECT_BY_SCHEDULE_HEALTH.warning ? PROJECT_BY_SCHEDULE_HEALTH.warning : '', + PROJECT_BY_SCHEDULE_HEALTH && PROJECT_BY_SCHEDULE_HEALTH['on-schedule'] ? PROJECT_BY_SCHEDULE_HEALTH['on-schedule'] : '' ], borderColor: ["#E80053", "#FFD600", "#52AC0B"], backgroundColor: ["#E80053", "#FFD600", "#52AC0B"], @@ -571,8 +580,8 @@ const DashboardBOD = () => { label: "", // data: [7, 2, 4, 3], data: PROJECT_PER_DIVISION ? PROJECT_PER_DIVISION.map((item, idx) => item.total) : [], - borderColor: ["#023E8A", "#C851B7", "#FD7034", "#3A0CA3"], - backgroundColor: ["#023E8A", "#C851B7", "#FD7034", "#3A0CA3"], + borderColor: ["#023E8A", "#C851B7", "#FD7034", "#3A0CA3", "#A36A16"], + backgroundColor: ["#023E8A", "#C851B7", "#FD7034", "#3A0CA3", "#A36A16"], borderWidth: 2, borderSkipped: false }, @@ -622,9 +631,9 @@ const DashboardBOD = () => { { label: "", // data: [50, 120, 72, 60], - data: PROJECT_VALUE_PER_DIVISION ? PROJECT_VALUE_PER_DIVISION.map((item, idx) => item.total) : [], - borderColor: ["#023E8A", "#C851B7", "#FD7034", "#3A0CA3"], - backgroundColor: ["#023E8A", "#C851B7", "#FD7034", "#3A0CA3"], + data: PROJECT_VALUE_PER_DIVISION ? PROJECT_VALUE_PER_DIVISION.map((item, idx) => item.total).filter(value => value !== 0) : [], + borderColor: ["#023E8A", "#C851B7", "#FD7034", "#3A0CA3", "#A36A16"], + backgroundColor: ["#023E8A", "#C851B7", "#FD7034", "#3A0CA3", "#A36A16"], borderWidth: 2, borderSkipped: false },