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
Split 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. 112
      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 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 = {

2
src/services/api/modules/map_monitoring/index.js
Unescape View File

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

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

@ -406,6 +406,15 @@ const DashboardBOD = () => {
<Bar
options={{
indexAxis: 'y',
scales: {
x: {
ticks: {
callback: function (value) {
return toRupiah(value, { useUnit: 'jt' });
}
}
}
},
elements: {
bar: {
borderWidth: 2,
@ -424,7 +433,7 @@ 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
},

16
src/views/MapMonitoring/MapMonitoring.css
Unescape View File

@ -7,3 +7,19 @@
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;
}

112
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 "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 = `<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');
// 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));

Write Preview
Loading…
Cancel
Save