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 11 months 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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 95
      src/services/api/modules/project/index.js
  2. 117
      src/views/MapMonitoring/index.js

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

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

117
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 "react-toastify/dist/ReactToastify.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 pinRouteStart from '../../assets/img/map/pin_route_green.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.js'
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_MIDDLE = 12;
const GRID_RIGHT = 6;
const GRID_TOTAL = GRID_LEFT+GRID_MIDDLE+GRID_RIGHT;
const GRID_RIGHT = 6;
const GRID_TOTAL = GRID_LEFT + GRID_MIDDLE + GRID_RIGHT;
const mapRef = useRef()
const center = {
// lat: -6.200000,
@ -41,7 +60,7 @@ const MapMonitoring = () => {
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 [gridLeft, setGridLeft] = useState(0);
const [gridRight, setGridRight] = useState(0);
@ -88,45 +107,45 @@ const MapMonitoring = () => {
var startIcon = new L.Icon({
iconSize: [60, 60],
iconAnchor: [30, 47],
popupAnchor: [1, -24],
popupAnchor: [1, -24],
iconUrl: pinRouteStart
});
var endIcon = new L.Icon({
iconSize: [60, 60],
iconAnchor: [30, 47],
popupAnchor: [1, -24],
popupAnchor: [1, -24],
iconUrl: pinRouteEnd
});
var onTripIcon = new L.Icon({
iconSize: [60, 60],
iconAnchor: [30, 47],
popupAnchor: [1, -24],
popupAnchor: [1, -24],
iconUrl: pinRouteOnTrip
});
let userHistoryLayer = L.geoJson(userHistory, {
name: 'userHistoryLayer',
onEachFeature: function(feature, layer) {
onEachFeature: function (feature, layer) {
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") : '-'}`;
layer.bindPopup(popupText, {
closeButton: true,
// offset: L.point(0, -20)
closeButton: true,
// offset: L.point(0, -20)
});
layer.on('click', function() {
layer.openPopup();
layer.on('click', function () {
layer.openPopup();
});
},
pointToLayer: function(feature, latlng) {
pointToLayer: function (feature, latlng) {
var type = feature.properties.type;
if (type === 'Start') {
return L.marker(latlng, {icon: startIcon});
}
return L.marker(latlng, { icon: startIcon });
}
else if (type === "Working") {
return L.marker(latlng, {icon: onTripIcon});
}
return L.marker(latlng, { icon: onTripIcon });
}
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
const getMapLeftContent = async () => {
store.dispatch(setMapLoading(true));
let project = await ApiProject.list();
// console.log('project', project);
if (project && project.status && project.data && project.data.length > 0) {
let project = await ApiProject.search(role_id);
// console.log('projectsearch', projectsearch.data.data);
console.log('project', project);
if (project && project.data && project.data.length > 0) {
let projectData = [
{
"title": 'All',
@ -182,13 +203,13 @@ const MapMonitoring = () => {
}
const onEachFeatureUserPoints = (feature, layer) => {
layer.on('click', function(e) {
L.DomEvent.stopPropagation(e);
layer.on('click', function (e) {
L.DomEvent.stopPropagation(e);
if (!store.getState().mapReducer.routingBarVisible) {
// proceed only when routing mode is not visible
showHighLight(feature, e);
}
});
});
}
const renderClassMarker = (feature) => {
@ -226,7 +247,7 @@ const MapMonitoring = () => {
let lon = feature.geometry.coordinates[0];
// 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);
return marker;
}
@ -234,7 +255,7 @@ const MapMonitoring = () => {
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;
@ -256,7 +277,7 @@ const MapMonitoring = () => {
// popupAnchor: [0, -80]
// });
// add highlight
// add highlight
// console.log('selectedIcon', selectedIcon);
// console.log('classList', e.target.options.icon.options.classList);
// if (!openRight) {
@ -271,8 +292,8 @@ const MapMonitoring = () => {
// kalo bukan point bikin hightlight jadi biru
if (feature && feature.geometry && feature.geometry.type !== 'Point') {
L.geoJSON(feature, {
style: function(feature) {
return {color: 'blue'}
style: function (feature) {
return { color: 'blue' }
},
name: 'popupTemp',
onEachFeature: function (feature, layer) {
@ -287,7 +308,7 @@ const MapMonitoring = () => {
// opening right panel
store.dispatch(setOpenRight(!openRight));
store.dispatch(setSelectedFeature(feature));
}
}
const MapContent = useMemo(() => {
return (
@ -297,22 +318,22 @@ const MapMonitoring = () => {
</Col>
<Col span={gridMiddle}>
<div id="map-area" style={{ height: '90vh', width: '100%' }} ref={mapRef}></div>
<button
<button
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))}>
<i className='fa fa-list'></i>
<i className='fa fa-list'></i>
</button>
{ routingBarVisible && <RoutingBar /> }
{ isSearchingRoute && (
<div className="loader-container">
<Loader
type="TailSpin"
color="#36D7B7"
height={100}
width={100}
/>
</div>
{routingBarVisible && <RoutingBar />}
{isSearchingRoute && (
<div className="loader-container">
<Loader
type="TailSpin"
color="#36D7B7"
height={100}
width={100}
/>
</div>
)}
</Col>
<Col span={gridRight}>
@ -321,13 +342,13 @@ const MapMonitoring = () => {
<ToastContainer autoClose={5000} />
</Row>
)
}, [openLeft, openRight, gridLeft, gridMiddle, gridRight, routingBarVisible ])
}, [openLeft, openRight, gridLeft, gridMiddle, gridRight, routingBarVisible])
const renderGridMap = () => {
let middle = GRID_MIDDLE;
let left = GRID_LEFT;
let right = GRID_RIGHT;
if (openLeft && openRight){
if (openLeft && openRight) {
middle = GRID_MIDDLE;
left = GRID_LEFT;
right = GRID_RIGHT;
@ -336,7 +357,7 @@ const MapMonitoring = () => {
middle = GRID_TOTAL - GRID_RIGHT;
left = 0;
right = GRID_RIGHT;
}
}
else if (openLeft && !openRight) {
middle = GRID_TOTAL - GRID_LEFT;
left = GRID_LEFT;

Write Preview
Loading…
Cancel
Save