Merge branch 'interactive-map'

app/Http/Controllers/Api/OutletController.php

@@ -0,0 +1,35 @@
+<?php
+
+namespace App\Http\Controllers\Api;
+
+use App\Outlet;
+use Illuminate\Http\Request;
+use App\Http\Controllers\Controller;
+use App\Http\Resources\Outlet as OutletResource;
+
+class OutletController extends Controller
+{
+    public function index(Request $request)
+    {
+        $outlets = Outlet::all();
+
+        $geoJSONdata = $outlets->map(function ($outlet) {
+            return [
+                'type'       => 'Feature',
+                'properties' => new OutletResource($outlet),
+                'geometry'   => [
+                    'type'        => 'Point',
+                    'coordinates' => [
+                        $outlet->longitude,
+                        $outlet->latitude,
+                    ],
+                ],
+            ];
+        });
+
+        return response()->json([
+            'type'     => 'FeatureCollection',
+            'features' => $geoJSONdata,
+        ]);
+    }
+}

app/Http/Controllers/OutletMapController.php

@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+
+class OutletMapController extends Controller
+{
+    public function index(Request $request)
+    {
+        return view('outlets.map');
+    }
+}

app/Http/Resources/Outlet.php

@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Resources\Json\JsonResource;
+
+class Outlet extends JsonResource
+{
+    /**
+     * Transform the resource into an array.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @return array
+     */
+    public function toArray($request)
+    {
+        return parent::toArray($request);
+    }
+}

app/Http/Resources/OutletCollection.php

@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Resources\Json\ResourceCollection;
+
+class OutletCollection extends ResourceCollection
+{
+    /**
+     * Transform the resource collection into an array.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @return array
+     */
+    public function toArray($request)
+    {
+        return parent::toArray($request);
+    }
+}

app/Outlet.php

@@ -11,6 +11,10 @@ class Outlet extends Model
         'name', 'address', 'latitude', 'longitude', 'creator_id',
     ];
 
+    public $appends = [
+        'coordinate', 'map_popup_content',
+    ];
+
     public function getNameLinkAttribute()
     {
         $title = __('app.show_detail_title', [

resources/lang/en/menu.php

@@ -0,0 +1,5 @@
+<?php
+
+return [
+    'our_outlets' => 'Our Outlets',
+];

resources/views/layouts/app.blade.php

@@ -37,6 +37,7 @@
                     <!-- Right Side Of Navbar -->
                     <ul class="navbar-nav ml-auto">
                         <!-- Authentication Links -->
+                        <li class="nav-item"><a class="nav-link" href="{{ route('outlet_map.index') }}">{{ __('menu.our_outlets') }}</a></li>
                         @guest
                             <li class="nav-item">
                                 <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>

resources/views/outlets/map.blade.php

@@ -0,0 +1,57 @@
+@extends('layouts.app')
+
+@section('content')
+<div class="card">
+    <div class="card-body" id="mapid"></div>
+</div>
+@endsection
+
+@section('styles')
+<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
+    integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
+    crossorigin=""/>
+
+<style>
+    #mapid { min-height: 500px; }
+</style>
+@endsection
+@push('scripts')
+<!-- Make sure you put this AFTER Leaflet's CSS -->
+<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
+    integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
+    crossorigin=""></script>
+
+<script>
+    var map = L.map('mapid').setView(['-3.313695', '114.590148'], 13);
+    var baseUrl = "{{ url('/') }}";
+
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+    }).addTo(map);
+
+    axios.get('{{ route('api.outlets.index') }}')
+    .then(function (response) {
+        console.log(response.data);
+        L.geoJSON(response.data, {
+            pointToLayer: function(geoJsonPoint, latlng) {
+                var myIcon = L.icon({
+                    iconUrl: baseUrl + '/images/marker-icon-green.png',
+                    shadowUrl: baseUrl + '/images/marker-shadow.png',
+                    iconSize: [25, 41],
+                    iconAnchor: [12, 41],
+                    popupAnchor: [1, -34],
+                    shadowSize: [41, 41],
+                    className: 'marker-icon-green',
+                });
+                return L.marker(latlng, { icon: myIcon });
+            }
+        })
+        .bindPopup(function (layer) {
+            return layer.feature.properties.map_popup_content;
+        }).addTo(map);
+    })
+    .catch(function (error) {
+        console.log(error);
+    });
+</script>
+@endpush

routes/api.php

@@ -16,3 +16,10 @@ use Illuminate\Http\Request;
 Route::middleware('auth:api')->get('/user', function (Request $request) {
     return $request->user();
 });
+
+Route::group(['as' => 'api.', 'namespace' => 'Api'], function () {
+    /*
+     * Outlets Endpoints
+     */
+    Route::get('outlets', 'OutletController@index')->name('outlets.index');
+});

routes/web.php

@@ -22,4 +22,5 @@ Route::get('/home', 'HomeController@index')->name('home');
 /*
  * Outlets Routes
  */
+Route::get('/our_outlets', 'OutletMapController@index')->name('outlet_map.index');
 Route::resource('outlets', 'OutletController');

tests/Feature/Api/OutletListingTest.php

@@ -0,0 +1,41 @@
+<?php
+
+namespace Tests\Feature\Api;
+
+use App\Outlet;
+use Tests\BrowserKitTest as TestCase;
+use Illuminate\Foundation\Testing\RefreshDatabase;
+
+class OutletListingTest extends TestCase
+{
+    use RefreshDatabase;
+
+    /** @test */
+    public function guest_can_retrieve_outlet_list()
+    {
+        $outlet = factory(Outlet::class)->create();
+
+        $this->getJson(route('api.outlets.index'));
+
+        $this->seeJsonSubset([
+            'type'     => 'FeatureCollection',
+            'features' => [
+                [
+                    'type'       => 'Feature',
+                    'properties' => [
+                        'name'       => $outlet->name,
+                        'address'    => $outlet->address,
+                        'coordinate' => $outlet->coordinate,
+                    ],
+                    'geometry'   => [
+                        'type'        => 'Point',
+                        'coordinates' => [
+                            $outlet->longitude,
+                            $outlet->latitude,
+                        ],
+                    ],
+                ],
+            ],
+        ]);
+    }
+}