From 217f73a05f3e297fe2c15127b3568c93da521c2c Mon Sep 17 00:00:00 2001 From: Marius Constantin Date: Tue, 31 Oct 2023 00:37:14 +0200 Subject: [PATCH] map points view & boundry search on points --- app/Http/Controllers/Api/MapController.php | 3 +- app/Models/MapPoint.php | 23 +++- public/assets/images/pin.png | Bin 0 -> 1635 bytes resources/assets/images/logo.png | Bin 3329 -> 0 bytes resources/assets/images/notFound.png | Bin 2505 -> 0 bytes resources/assets/images/punct_benzinarie.svg | 37 ------- resources/js/components/IndexPage.vue | 106 ++++++++++++++++--- resources/js/components/leftSidebar.vue | 1 - 8 files changed, 114 insertions(+), 56 deletions(-) create mode 100644 public/assets/images/pin.png delete mode 100644 resources/assets/images/logo.png delete mode 100644 resources/assets/images/notFound.png delete mode 100644 resources/assets/images/punct_benzinarie.svg diff --git a/app/Http/Controllers/Api/MapController.php b/app/Http/Controllers/Api/MapController.php index b925e6f0..a72b9a5b 100644 --- a/app/Http/Controllers/Api/MapController.php +++ b/app/Http/Controllers/Api/MapController.php @@ -19,10 +19,11 @@ class MapController extends Controller public function points(Request $request) { $filters = $request->get('filters', []); + $bounds = $request->get('bounds', []); return response() ->json( [ - 'points' => MapPoint::getFilteredMapPoints($filters) + 'points' => MapPoint::getFilteredMapPoints($filters, $bounds) ]); } diff --git a/app/Models/MapPoint.php b/app/Models/MapPoint.php index cb0f1257..72bbff0f 100644 --- a/app/Models/MapPoint.php +++ b/app/Models/MapPoint.php @@ -677,16 +677,31 @@ public function fieldTypes() * * @return Collection */ - public static function getFilteredMapPoints(array $filters): Collection - { + public static function getFilteredMapPoints(array $filters, array $bounds): Collection + { + if (empty($bounds)) + { + return collect([]); + } + + $polygon = [ + $bounds['northEast']['lat'].' '.$bounds['northEast']['lng'], + $bounds['northWest']['lat'].' '.$bounds['northWest']['lng'], + $bounds['southWest']['lat'].' '.$bounds['southWest']['lng'], + $bounds['southEast']['lat'].' '.$bounds['southEast']['lng'], + $bounds['northEast']['lat'].' '.$bounds['northEast']['lng'], + ]; + $boundarySearch = "ST_WITHIN(POINT(recycling_points.lat, recycling_points.lon), ST_GEOMETRYFROMTEXT('POLYGON((".implode(", ", $polygon)."))')) AS in_bounds"; $sql = self:: select( 'recycling_points.id', 'recycling_points.lat', 'recycling_points.lon', 'recycling_points.location', - ) - ->where('status', 1); + \DB::raw($boundarySearch) + ) + ->having('in_bounds', '=', 1) + ->where('status', 1); if (!empty($filters)) { diff --git a/public/assets/images/pin.png b/public/assets/images/pin.png new file mode 100644 index 0000000000000000000000000000000000000000..37e281637390c76e0dd5b9478dd153a2729e788c GIT binary patch literal 1635 zcmV-p2AuhcP)fUqv^lr}sT>-~ZJLS;*bxmXAcOsc{aJ92{XIfg%*QM&Xbm6&Z;nCQ?0}H|w$2>-EQOcH_-Yaym1+ zTfhH&zJ1RG%)lRVLO$;YO5LpHVjmAHI{}EZbPs_n`-`6xP-zt;nu5jYEF2I5MnR+Z zb_49c=m!d3Fa{GtCcyy-qhj<6K*M);M_DOU(ZdIYKokfW*DFMy0N-#JGz@p1JOQ50 zGw`uR)75i66}-8{8i&iXatsL$H7zqeL)u# zXbf;}EAYN@0S4cD9sF;)xd=U=AQUqG?E){WFM~vSn;DJ90(>Kb08b~By^e;5Kf1#I zHG}BApS6VK0Hh&Uo{HCdw!Q#gFwBRvi0kz8aOdMe(+pP=xx2uHR8oIRIci-{8;?e> z+`JAib-V~xf#2bO!vjmn-ypZMS8OF-=zJ9*v%aeJjP?llM*IMUn5c$7yaEw6Wey9R zO1+=ls+>}i6oAF4IrY8O0{DV0{37Q3VH+>N9jo`#Tgu%k#};* z>d%{8hq3B)m-VZR} z#;&MFp&$QBeEJlfG^<<$vq1YwI}*NwuxTW*L#yOr4*Kld`+|V)Qn|8|_e<=J$Sdl0 z9|5GoMu~bPc09YQF4!1%XNR)tVk1CZykw(&zaD6(VjZ|~7jlUUM+JOU6-BAs*m}32 zS(FZ5S-{CQIEqMc#9;zx4htHQ0o#(>*)0{B0CMC6WVip33xsAR77fc{xptt*Uhn`} zX#@xx0SbTe3x6vw*q3x>OHm^@0)-S7@g@2wj6(cDT2U*caRjoWI{zRAb_c_eC5V)g zV1GX$>d|{^ww^}V!4;d$@#9QDB8t0E7V9{T=6_0qU73j8FINalki;i)@%(pF0C$K0B zz;!@LDR7EwVPJd;>;M`bn*LtZN)n<}cIFh*2*ER9Z0ZMSB_c{)g+rPw6-$kq$t;}j z@j~$h2U**A#KYHK_u;>8YKGVm!ZVs*h-zhmqw6AJJCa}7ge(8BMbtDNkys{kGg&%u ztMdbwuRUTSTVrZsmfCMHPdvvANB5v9|Ld5e8-Dz{%G<1+X7ydebdDdIL`09>EVF|V z4)t0=gR|RDApLNQyTrN@Ow?&pq2&Mo002ovPDHLkV1o9x<)8on literal 0 HcmV?d00001 diff --git a/resources/assets/images/logo.png b/resources/assets/images/logo.png deleted file mode 100644 index 33eb997593b5582a97d2179bda539c33a0ee1226..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3329 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 LNkvXXu0mjfEd^5F diff --git a/resources/assets/images/notFound.png b/resources/assets/images/notFound.png deleted file mode 100644 index 1f1c2a35190528982bba0cdba1c8360d271ca69e..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2505 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 - - - - punct_benzinarie - - - - - - - - - - - - - - diff --git a/resources/js/components/IndexPage.vue b/resources/js/components/IndexPage.vue index 10617234..97c3f6fe 100644 --- a/resources/js/components/IndexPage.vue +++ b/resources/js/components/IndexPage.vue @@ -1,7 +1,7 @@ @@ -118,13 +121,15 @@ export default longitude: CONSTANTS.DEFAULT_LOCATION.LONGITUDE, points: {}, icon: L.icon({ - iconUrl: '/assets/images/punct_benzinarie.svg', - iconSize: [100, 37], - iconAnchor: [16, 37] + iconUrl: '/assets/images/pin.png', + iconSize: [48, 64], + iconAnchor: [48, 64] }), - iconSize: 100, + iconSize: 48, hasApprovedLocation: false, - hasResults: false + hasResults: false, + filters: {}, + bounds: {} }; }, @@ -150,6 +155,7 @@ export default const error = (err) => { console.log(error) + this.getMapPoints(); }; navigator.geolocation.getCurrentPosition(success, error); }, @@ -174,14 +180,21 @@ export default this.isAuthenticated = false; } }, - getMapPoints(filters) + getMapPoints(filters = {}) { - console.log(`filters`, filters); axios - .get(CONSTANTS.API_DOMAIN + CONSTANTS.ROUTES.MAP.POINTS.INFO) + .get(CONSTANTS.API_DOMAIN + CONSTANTS.ROUTES.MAP.POINTS.INFO, { + params: { + bounds: this.bounds, + filters: this.filters, + lat: this.latitude, + lng: this.longitude + } + }) .then((response) => { this.points = _.get(response, 'data.points', {}); + console.log(this.points); if (Object.keys(this.points).length > 0) { this.hasResults = true; @@ -190,6 +203,74 @@ export default { console.log(err); }); + }, + initMap() + { + this.map = this.$refs.map.leafletObject; + this.bounds = { + northEast: { + lat: this.map.getBounds().getNorthEast().lat, + lng: this.map.getBounds().getNorthEast().lng, + }, + northWest: { + lat: this.map.getBounds().getNorthWest().lat, + lng: this.map.getBounds().getNorthWest().lng, + }, + southWest: { + lat: this.map.getBounds().getSouthWest().lat, + lng: this.map.getBounds().getSouthWest().lng, + }, + southEast: { + lat: this.map.getBounds().getSouthEast().lat, + lng: this.map.getBounds().getSouthEast().lng, + }, + }; + this.getMapPoints(); + }, + setFilters(event) + { + if (Object.keys(event).length > 0) + { + this.filters = event; + this.getMapPoints(); + } + }, + zoomEvent(event) + { + if (event != this.zoom) + { + this.getMapPoints(); + } + + this.zoom = event; + }, + centerEvent(event) + { + this.latitude = event.lat; + this.longitude = event.lng; + + this.getMapPoints(); + }, + boundsEvent(event) + { + this.bounds = { + northEast: { + lat: event.getNorthEast().lat, + lng: event.getNorthEast().lng, + }, + northWest: { + lat: event.getNorthWest().lat, + lng: event.getNorthWest().lng, + }, + southWest: { + lat: event.getSouthWest().lat, + lng: event.getSouthWest().lng, + }, + southEast: { + lat: event.getSouthEast().lat, + lng: event.getSouthEast().lng, + } + }; } }, computed: { @@ -199,7 +280,7 @@ export default }, dynamicSize () { - return [this.iconSize, this.iconSize / 2.15]; + return [this.iconSize, this.iconSize * 1.25]; } }, mounted() @@ -211,7 +292,6 @@ export default this.getUserInfo(); }); this.getUserInfo(); - this.getMapPoints({}); } }; diff --git a/resources/js/components/leftSidebar.vue b/resources/js/components/leftSidebar.vue index 9909a7ae..1bd5ef23 100644 --- a/resources/js/components/leftSidebar.vue +++ b/resources/js/components/leftSidebar.vue @@ -309,7 +309,6 @@ export default { this.materialTypesFilters.push(filterToAppend); } } - this.collectedFilters.material_type_id = this.materialTypesFilters; }, serviceFilterChanged(filterId) { if (filterId === this.searchParamsForFilters.service_id) {