diff --git a/src/services/api/modules/project/index.js b/src/services/api/modules/project/index.js index b058929..127b5c9 100644 --- a/src/services/api/modules/project/index.js +++ b/src/services/api/modules/project/index.js @@ -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 }; + }); } } \ No newline at end of file diff --git a/src/views/MapMonitoring/index.js b/src/views/MapMonitoring/index.js index 83ec348..7e528e6 100644 --- a/src/views/MapMonitoring/index.js +++ b/src/views/MapMonitoring/index.js @@ -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 = `Status: ${feature.properties.type}
Time: ${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 = () => {
- - { routingBarVisible && } - { isSearchingRoute && ( -
- -
+ {routingBarVisible && } + {isSearchingRoute && ( +
+ +
)} @@ -321,13 +342,13 @@ const MapMonitoring = () => { ) - }, [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;