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

map monitoring by filter project

pull/1/head
farhantock 1 year ago
parent
4f70295928
commit
b92c3a2c4a
2 changed files with 116 additions and 96 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. 63
      src/services/api/modules/project/index.js
  2. 67
      src/views/MapMonitoring/index.js

63
src/services/api/modules/project/index.js
Unescape View File

@ -2,52 +2,51 @@ import { BASE_SIMPRO_LUMEN } from "../../../../const/ApiConst";
import RequestApi from '../../base'; import RequestApi from '../../base';
export default class ApiProject extends RequestApi { export default class ApiProject extends RequestApi {
static async list() { static async search(role_id) {
// const user_id = store.getState().userReducer && store.getState().userReducer.user && store.getState().userReducer.user.data_user ? store.getState().userReducer.user.data_user.id : 0; // const user_id = store.getState().userReducer && store.getState().userReducer.user && store.getState().userReducer.user.data_user ? store.getState().userReducer.user.data_user.id : 0;
const URL = `${BASE_SIMPRO_LUMEN}/project/list` const URL = `${BASE_SIMPRO_LUMEN}/project/search`
// const payload = { let hierarchy = [];
// "paging": { "start": 0, "length": 25 }, hierarchy.push(JSON.parse(localStorage.getItem("hierarchy")));
// // "columns": [ const payload = {
// // { "name": "user_id", "logic_operator": "=", "value": user_id } columns: [],
// // ], select: [
// // "joins": [ "id",
// // { "nama",
// // "name": "m_proyek", "kode_sortname",
// // "column_join": "proyek_id", "type_proyek_id",
// // "column_results": [ "currency_symbol",
// // "nama", "kode_sortname", "mulai_proyek", "akhir_proyek" "mulai_proyek",
// // ] "akhir_proyek",
// // }, ],
// // {
// // "name": "m_activity", orders: { columns: ["nama"], ascending: true },
// // "column_join": "activity_id", paging: { start: 0, length: -1 },
// // "column_results": [ };
// // "name", "start_date", "end_date", "persentase_progress" if (parseInt(role_id) !== 70) {
// // ] payload["columns"] = [
// // } { name: "created_by_id", logic_operator: "IN", value: hierarchy, operator: "AND" }
// // ], ];
// "orders": { "columns": ["id"], "ascending": false } }
// } return await RequestApi.Request().post(
return await RequestApi.Request().get( URL, payload,
URL,
RequestApi.HeaderWithToken()).then(res => { RequestApi.HeaderWithToken()).then(res => {
if (res) { if (res) {
if (res && res.data && res.data.data) { if (res && res.data && res.data.data) {
// console.log('ApiProject search', res.data.data) // console.log('ApiProject search', res.data.data)
if (res.data.data.length > 0) { if (res.data.data.length > 0) {
return {status: true, data: res.data.data}; return { status: true, data: res.data.data };
} }
else { else {
return {status: false, data: null} return { status: false, data: null }
} }
} }
else { else {
return {status: false, data: null}; return { status: false, data: null };
} }
} }
else { else {
alert("Please check your internet connection.", "error"); alert("Please check your internet connection.", "error");
return {status: false, data: null}; return { status: false, data: null };
} }
}).catch(e => { }).catch(e => {
// console.log('error search project', e); // console.log('error search project', e);
@ -56,7 +55,7 @@ export default class ApiProject extends RequestApi {
if (error.message) { if (error.message) {
alert(error.message); alert(error.message);
} }
return {status: false, data: null}; return { status: false, data: null };
}); });
} }
} }

67
src/views/MapMonitoring/index.js
Unescape View File

@ -15,7 +15,7 @@ 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 { BASE_SIMPRO_LUMEN_IMAGE, PROYEK_SEARCH } from '../../const/ApiConst';
import DEFAULT_USER_ICON from '../../assets/img/avatars/user.png'; import DEFAULT_USER_ICON from '../../assets/img/avatars/user.png';
import pinRouteStart from '../../assets/img/map/pin_route_green.png'; import pinRouteStart from '../../assets/img/map/pin_route_green.png';
import pinRouteEnd from '../../assets/img/map/pin_route_red.png'; import pinRouteEnd from '../../assets/img/map/pin_route_red.png';
@ -26,13 +26,32 @@ import 'leaflet.markercluster/dist/leaflet.markercluster.js'
import 'leaflet-control-geocoder/dist/Control.Geocoder.css' import 'leaflet-control-geocoder/dist/Control.Geocoder.css'
import 'leaflet-control-geocoder/dist/Control.Geocoder.js' import 'leaflet-control-geocoder/dist/Control.Geocoder.js'
import moment from 'moment'; import moment from 'moment';
import axios from "../../const/interceptorApi";
const MapMonitoring = ({ ...props }) => {
let role_id = '', user_id = '', proyek_id = '', isLogin = '', token = '';
if (props.location.state && props.location.state.role_id && props.location.state.user_id) {
role_id = props.location.state.role_id;
user_id = props.location.state.user_id;
token = props.location.state.token;
isLogin = props.location.state.isLogin;
const MapMonitoring = () => { } else {
role_id = localStorage.getItem("role_id");
proyek_id = localStorage.getItem("proyek_id");
user_id = localStorage.getItem("user_id");
token = localStorage.getItem("token");
isLogin = localStorage.getItem("isLogin");
}
const HEADER = {
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${token}`,
},
};
const GRID_LEFT = 6; const GRID_LEFT = 6;
const GRID_MIDDLE = 12; const GRID_MIDDLE = 12;
const GRID_RIGHT = 6; const GRID_RIGHT = 6;
const GRID_TOTAL = GRID_LEFT+GRID_MIDDLE+GRID_RIGHT; const GRID_TOTAL = GRID_LEFT + GRID_MIDDLE + GRID_RIGHT;
const mapRef = useRef() const mapRef = useRef()
const center = { const center = {
// lat: -6.200000, // lat: -6.200000,
@ -41,7 +60,7 @@ const MapMonitoring = () => {
lng: 120.13025155062624 lng: 120.13025155062624
} }
const {userPoints, mymap, openLeft, openRight, routingBarVisible, userHistory, isSearchingRoute, selectedFeature} = useSelector(state => state.mapReducer); const { userPoints, mymap, openLeft, openRight, routingBarVisible, userHistory, isSearchingRoute, selectedFeature } = useSelector(state => state.mapReducer);
const [gridMiddle, setGridMiddle] = useState(GRID_MIDDLE); const [gridMiddle, setGridMiddle] = useState(GRID_MIDDLE);
const [gridLeft, setGridLeft] = useState(0); const [gridLeft, setGridLeft] = useState(0);
const [gridRight, setGridRight] = useState(0); const [gridRight, setGridRight] = useState(0);
@ -105,7 +124,7 @@ const MapMonitoring = () => {
}); });
let userHistoryLayer = L.geoJson(userHistory, { let userHistoryLayer = L.geoJson(userHistory, {
name: 'userHistoryLayer', name: 'userHistoryLayer',
onEachFeature: function(feature, layer) { onEachFeature: function (feature, layer) {
var popupText = `<b>Status: </b>${feature.properties.type}<br> var popupText = `<b>Status: </b>${feature.properties.type}<br>
<b>Time: </b> ${feature.properties.wptime ? moment(feature.properties.wptime).format("DD-MM-YYYY HH:mm:ss") : '-'}`; <b>Time: </b> ${feature.properties.wptime ? moment(feature.properties.wptime).format("DD-MM-YYYY HH:mm:ss") : '-'}`;
@ -113,20 +132,20 @@ const MapMonitoring = () => {
closeButton: true, closeButton: true,
// offset: L.point(0, -20) // offset: L.point(0, -20)
}); });
layer.on('click', function() { layer.on('click', function () {
layer.openPopup(); layer.openPopup();
}); });
}, },
pointToLayer: function(feature, latlng) { pointToLayer: function (feature, latlng) {
var type = feature.properties.type; var type = feature.properties.type;
if (type === 'Start') { if (type === 'Start') {
return L.marker(latlng, {icon: startIcon}); return L.marker(latlng, { icon: startIcon });
} }
else if (type === "Working") { else if (type === "Working") {
return L.marker(latlng, {icon: onTripIcon}); return L.marker(latlng, { icon: onTripIcon });
} }
else if (type === "End") { else if (type === "End") {
return L.marker(latlng, {icon: endIcon}); return L.marker(latlng, { icon: endIcon });
} }
}, },
}); });
@ -155,9 +174,11 @@ const MapMonitoring = () => {
// init for left content panel, get projects and build tree select antd // init for left content panel, get projects and build tree select antd
const getMapLeftContent = async () => { const getMapLeftContent = async () => {
store.dispatch(setMapLoading(true)); store.dispatch(setMapLoading(true));
let project = await ApiProject.list();
// console.log('project', project); let project = await ApiProject.search(role_id);
if (project && project.status && project.data && project.data.length > 0) { // console.log('projectsearch', projectsearch.data.data);
console.log('project', project);
if (project && project.data && project.data.length > 0) {
let projectData = [ let projectData = [
{ {
"title": 'All', "title": 'All',
@ -182,7 +203,7 @@ const MapMonitoring = () => {
} }
const onEachFeatureUserPoints = (feature, layer) => { const onEachFeatureUserPoints = (feature, layer) => {
layer.on('click', function(e) { layer.on('click', function (e) {
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
@ -226,7 +247,7 @@ const MapMonitoring = () => {
let lon = feature.geometry.coordinates[0]; let lon = feature.geometry.coordinates[0];
// create a new marker using the icon style // create a new marker using the icon style
let marker = new L.Marker([lat,lon],{icon: logoMarker}); let marker = new L.Marker([lat, lon], { icon: logoMarker });
markerCluster.addLayer(marker); markerCluster.addLayer(marker);
return marker; return marker;
} }
@ -271,8 +292,8 @@ const MapMonitoring = () => {
// kalo bukan point bikin hightlight jadi biru // kalo bukan point bikin hightlight jadi biru
if (feature && feature.geometry && feature.geometry.type !== 'Point') { 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' }
}, },
name: 'popupTemp', name: 'popupTemp',
onEachFeature: function (feature, layer) { onEachFeature: function (feature, layer) {
@ -299,12 +320,12 @@ const MapMonitoring = () => {
<div id="map-area" style={{ height: '90vh', width: '100%' }} ref={mapRef}></div> <div id="map-area" style={{ height: '90vh', width: '100%' }} ref={mapRef}></div>
<button <button
title='Project List' title='Project List'
style={{position: 'absolute', top: 80, left: 10, zIndex: 999, backgroundColor:'white', backgroundSize:'34px 34px', width: '34px', height: '34px', borderRadius: '2px', borderWidth: '1px', borderColor: 'grey'}} style={{ position: 'absolute', top: 80, left: 10, zIndex: 999, backgroundColor: 'white', backgroundSize: '34px 34px', width: '34px', height: '34px', borderRadius: '2px', borderWidth: '1px', borderColor: 'grey' }}
onClick={() => store.dispatch(setOpenLeft(!openLeft))}> onClick={() => store.dispatch(setOpenLeft(!openLeft))}>
<i className='fa fa-list'></i> <i className='fa fa-list'></i>
</button> </button>
{ routingBarVisible && <RoutingBar /> } {routingBarVisible && <RoutingBar />}
{ isSearchingRoute && ( {isSearchingRoute && (
<div className="loader-container"> <div className="loader-container">
<Loader <Loader
type="TailSpin" type="TailSpin"
@ -321,13 +342,13 @@ const MapMonitoring = () => {
<ToastContainer autoClose={5000} /> <ToastContainer autoClose={5000} />
</Row> </Row>
) )
}, [openLeft, openRight, gridLeft, gridMiddle, gridRight, routingBarVisible ]) }, [openLeft, openRight, gridLeft, gridMiddle, gridRight, routingBarVisible])
const renderGridMap = () => { const renderGridMap = () => {
let middle = GRID_MIDDLE; let middle = GRID_MIDDLE;
let left = GRID_LEFT; let left = GRID_LEFT;
let right = GRID_RIGHT; let right = GRID_RIGHT;
if (openLeft && openRight){ if (openLeft && openRight) {
middle = GRID_MIDDLE; middle = GRID_MIDDLE;
left = GRID_LEFT; left = GRID_LEFT;
right = GRID_RIGHT; right = GRID_RIGHT;

Write Preview
Loading…
Cancel
Save