Browse Source

Merge branch 'master' of https://git.oslog.id/ordo/adw-frontend

pull/2/head
farhan048 2 years ago
parent
commit
e5aeb2d00f
  1. 1
      src/appredux/modules/map/actions.js
  2. 2
      src/services/api/modules/map_monitoring/index.js
  3. 33
      src/views/Dashboard/DashboardBOD.js
  4. 16
      src/views/MapMonitoring/MapMonitoring.css
  5. 94
      src/views/MapMonitoring/index.js

1
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 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 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 : '-', "Clock out location": n.clock_out_loc ? n.clock_out_loc : '-',
"image": n.image_selfie ? n.image_selfie : '' // still dummy
} }
feature.geometry = { feature.geometry = {

2
src/services/api/modules/map_monitoring/index.js

@ -107,7 +107,7 @@ export default class ApiMapMonitoring extends RequestApi {
}).catch(e => { }).catch(e => {
// console.log('error search presence', e); // console.log('error search presence', e);
let error = JSON.parse(JSON.stringify(e)); let error = JSON.parse(JSON.stringify(e));
console.log('error search presence', error); console.log('error search user history', error);
if (error.message) { if (error.message) {
alert(error.message); alert(error.message);
} }

33
src/views/Dashboard/DashboardBOD.js

@ -406,6 +406,15 @@ const DashboardBOD = () => {
<Bar <Bar
options={{ options={{
indexAxis: 'y', indexAxis: 'y',
scales: {
x: {
ticks: {
callback: function (value) {
return toRupiah(value, { useUnit: 'jt' });
}
}
}
},
elements: { elements: {
bar: { bar: {
borderWidth: 2, borderWidth: 2,
@ -489,10 +498,10 @@ const DashboardBOD = () => {
label: "", label: "",
// data: [2, 4, 10], // data: [2, 4, 10],
data: [ data: [
PROJECT_BY_FINANCIAL_HEALTH && PROJECT_BY_FINANCIAL_HEALTH.overrun ? PROJECT_BY_FINANCIAL_HEALTH.overrun : 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 : 0, 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'] : 0 PROJECT_BY_FINANCIAL_HEALTH && PROJECT_BY_FINANCIAL_HEALTH['on-budget'] ? PROJECT_BY_FINANCIAL_HEALTH['on-budget'] : ''
], ].filter(value => value !== null),
borderColor: ["#E80053", "#FFD600", "#52AC0B",], borderColor: ["#E80053", "#FFD600", "#52AC0B",],
backgroundColor: ["#E80053", "#FFD600", "#52AC0B",], backgroundColor: ["#E80053", "#FFD600", "#52AC0B",],
borderWidth: 2, borderWidth: 2,
@ -515,9 +524,9 @@ const DashboardBOD = () => {
label: "", label: "",
// data: [1, 3, 11], // data: [1, 3, 11],
data: [ 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['behind-schedule'] ? PROJECT_BY_SCHEDULE_HEALTH['behind-schedule'] : '',
PROJECT_BY_SCHEDULE_HEALTH && PROJECT_BY_SCHEDULE_HEALTH.warning ? PROJECT_BY_SCHEDULE_HEALTH.warning : 0, 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'] : 0 PROJECT_BY_SCHEDULE_HEALTH && PROJECT_BY_SCHEDULE_HEALTH['on-schedule'] ? PROJECT_BY_SCHEDULE_HEALTH['on-schedule'] : ''
], ],
borderColor: ["#E80053", "#FFD600", "#52AC0B"], borderColor: ["#E80053", "#FFD600", "#52AC0B"],
backgroundColor: ["#E80053", "#FFD600", "#52AC0B"], backgroundColor: ["#E80053", "#FFD600", "#52AC0B"],
@ -571,8 +580,8 @@ const DashboardBOD = () => {
label: "", label: "",
// data: [7, 2, 4, 3], // data: [7, 2, 4, 3],
data: PROJECT_PER_DIVISION ? PROJECT_PER_DIVISION.map((item, idx) => item.total) : [], data: PROJECT_PER_DIVISION ? PROJECT_PER_DIVISION.map((item, idx) => item.total) : [],
borderColor: ["#023E8A", "#C851B7", "#FD7034", "#3A0CA3"], borderColor: ["#023E8A", "#C851B7", "#FD7034", "#3A0CA3", "#A36A16"],
backgroundColor: ["#023E8A", "#C851B7", "#FD7034", "#3A0CA3"], backgroundColor: ["#023E8A", "#C851B7", "#FD7034", "#3A0CA3", "#A36A16"],
borderWidth: 2, borderWidth: 2,
borderSkipped: false borderSkipped: false
}, },
@ -622,9 +631,9 @@ const DashboardBOD = () => {
{ {
label: "", label: "",
// data: [50, 120, 72, 60], // data: [50, 120, 72, 60],
data: PROJECT_VALUE_PER_DIVISION ? PROJECT_VALUE_PER_DIVISION.map((item, idx) => item.total) : [], data: PROJECT_VALUE_PER_DIVISION ? PROJECT_VALUE_PER_DIVISION.map((item, idx) => item.total).filter(value => value !== 0) : [],
borderColor: ["#023E8A", "#C851B7", "#FD7034", "#3A0CA3"], borderColor: ["#023E8A", "#C851B7", "#FD7034", "#3A0CA3", "#A36A16"],
backgroundColor: ["#023E8A", "#C851B7", "#FD7034", "#3A0CA3"], backgroundColor: ["#023E8A", "#C851B7", "#FD7034", "#3A0CA3", "#A36A16"],
borderWidth: 2, borderWidth: 2,
borderSkipped: false borderSkipped: false
}, },

16
src/views/MapMonitoring/MapMonitoring.css

@ -7,3 +7,19 @@
align-self: center; align-self: center;
margin-left: 45%; 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;
}

94
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 { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css"; import "react-toastify/dist/ReactToastify.css";
import './MapMonitoring.css'; import './MapMonitoring.css';
import { BASE_SIMPRO_LUMEN_IMAGE } from '../../const/ApiConst';
import DEFAULT_USER_ICON from '../../assets/img/avatars/user.png';
const MapMonitoring = () => { const MapMonitoring = () => {
@ -53,7 +55,8 @@ const MapMonitoring = () => {
if (userPoints) { if (userPoints) {
let userPointLayer = L.geoJson(userPoints, { let userPointLayer = L.geoJson(userPoints, {
name: 'userPointLayer', name: 'userPointLayer',
onEachFeature: onEachFeatureUserPoints onEachFeature: onEachFeatureUserPoints,
pointToLayer: pointToLayerUserPoints
}); });
userPointLayer.addTo(mymap); userPointLayer.addTo(mymap);
mymap.fitBounds(userPointLayer.getBounds()); mymap.fitBounds(userPointLayer.getBounds());
@ -78,7 +81,8 @@ const MapMonitoring = () => {
const initMap = () => { const initMap = () => {
let mymap = L.map('map-area', { let mymap = L.map('map-area', {
center: center, center: center,
zoom: 5 zoom: 5,
// maxZoom: 20
}); });
store.dispatch(setMymap(mymap)); store.dispatch(setMymap(mymap));
// setMymap(mymap); // setMymap(mymap);
@ -125,14 +129,92 @@ const MapMonitoring = () => {
L.DomEvent.stopPropagation(e); L.DomEvent.stopPropagation(e);
if (!store.getState().mapReducer.routingBarVisible) { if (!store.getState().mapReducer.routingBarVisible) {
// proceed only when routing mode is not visible // 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 = `<img src="${imgSrc}" />`
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'); 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 // add highlight
// 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, { L.geoJSON(feature, {
style: function(feature) { style: function(feature) {
return {color: 'blue'} return {color: 'blue'}
@ -142,6 +224,10 @@ const MapMonitoring = () => {
layer.name = 'popupTemp' layer.name = 'popupTemp'
}, },
}).addTo(mymap); }).addTo(mymap);
}
// let marker = new L.Marker([feature.geometry.coordinates[1], feature.geometry.coordinates[0]],{icon: selectedIcon});
// return marker;
// opening right panel // opening right panel
store.dispatch(setOpenRight(!openRight)); store.dispatch(setOpenRight(!openRight));

Loading…
Cancel
Save