ordo
/
surveyor_indonesia_frontend
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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

pull/2/head
farhan048 2 years ago
parent
18f50fe6ee 81a16c28ac
commit
e5aeb2d00f
5 changed files with 139 additions and 27 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      src/appredux/modules/map/actions.js
  2. 2
      src/services/api/modules/map_monitoring/index.js
  3. 35
      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
Unescape View File

@ -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
Unescape View File

@ -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);
} }

35
src/views/Dashboard/DashboardBOD.js
Unescape View File

@ -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,
@ -424,7 +433,7 @@ const DashboardBOD = () => {
datalabels: { datalabels: {
color: '#FFFFFF', color: '#FFFFFF',
formatter: function(value, context) { 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: "", 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
Unescape View File

@ -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
Unescape View File

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

Write Preview
Loading…
Cancel
Save