Merge branch 'outlet-map-view'

7 years ago · d9825c5e01
8 changed files with 103 additions and 13 deletions
--- a/app/Outlet.php
+++ b/app/Outlet.php
@ -28,4 +28,20 @@ class Outlet extends Model
    {
        return $this->belongsTo(User::class);
    }
+
+    public function getCoordinateAttribute()
+    {
+        if ($this->latitude && $this->longitude) {
+            return $this->latitude.', '.$this->longitude;
+        }
+    }
+
+    public function getMapPopupContentAttribute()
+    {
+        $mapPopupContent = '';
+        $mapPopupContent .= '<div class="my-2"><strong>'.__('outlet.name').':</strong><br>'.$this->name.'</div>';
+        $mapPopupContent .= '<div class="my-2"><strong>'.__('outlet.coordinate').':</strong><br>'.$this->coordinate.'</div>';
+
+        return $mapPopupContent;
+    }
 }
--- a/public/images/marker-icon-green.png
+++ b/public/images/marker-icon-green.png
--- a/public/images/marker-shadow.png
+++ b/public/images/marker-shadow.png
--- a/resources/lang/en/outlet.php
+++ b/resources/lang/en/outlet.php
@ -28,8 +28,10 @@ return [
    'undeleteable'   => 'Outlet data cannot be deleted.',

    // Attributes
-    'name'      => 'Outlet Name',
-    'address'   => 'Outlet Address',
-    'latitude'  => 'Latitude',
-    'longitude' => 'Longitude',
+    'name'       => 'Outlet Name',
+    'address'    => 'Outlet Address',
+    'latitude'   => 'Latitude',
+    'longitude'  => 'Longitude',
+    'location'   => 'Location',
+    'coordinate' => 'Coordinate',
 ];
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@ -9,15 +9,13 @@

    <title>{{ config('app.name', 'Laravel') }}</title>

-    <!-- Scripts -->
-    <script src="{{ asset('js/app.js') }}" defer></script>
-
    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
+    @yield('styles')
 </head>
 <body>
    <div id="app">
@ -79,5 +77,8 @@
            @yield('content')
        </main>
    </div>
+    <!-- Scripts -->
+    <script src="{{ asset('js/app.js') }}"></script>
+    @stack('scripts')
 </body>
 </html>
--- a/resources/views/outlets/index.blade.php
+++ b/resources/views/outlets/index.blade.php
@ -45,9 +45,7 @@
                        <td>{{ $outlet->latitude }}</td>
                        <td>{{ $outlet->longitude }}</td>
                        <td class="text-center">
-                            @can('view', $outlet)
-                                <a href="{{ route('outlets.show', $outlet) }}" id="show-outlet-{{ $outlet->id }}">{{ __('app.show') }}</a>
-                            @endcan
+                            <a href="{{ route('outlets.show', $outlet) }}" id="show-outlet-{{ $outlet->id }}">{{ __('app.show') }}</a>
                        </td>
                    </tr>
                    @endforeach
--- a/resources/views/outlets/show.blade.php
+++ b/resources/views/outlets/show.blade.php
@ -25,5 +25,53 @@
            </div>
        </div>
    </div>
+    <div class="col-md-6">
+        <div class="card">
+            <div class="card-header">{{ trans('outlet.location') }}</div>
+            @if ($outlet->coordinate)
+            <div class="card-body" id="mapid"></div>
+            @else
+            <div class="card-body">{{ __('outlet.no_coordinate') }}</div>
+            @endif
+        </div>
+    </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 { height: 400px; }
+    .popup-content-row { margin: 6px 0; }
+</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([{{ $outlet->latitude }}, {{ $outlet->longitude }}], 16);
+
+    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);
+
+    var myIcon = L.icon({
+        iconUrl: "{{ url('images/marker-icon-green.png') }}",
+        shadowUrl: "{{ url('images/marker-shadow.png') }}",
+        iconSize: [25, 41],
+        iconAnchor: [12, 41],
+        popupAnchor: [1, -34],
+        shadowSize: [41, 41],
+        className: "marker-icon-green",
+    });
+
+    L.marker([{{ $outlet->latitude }}, {{ $outlet->longitude }}], { icon: myIcon }).addTo(map)
+        .bindPopup('{!! $outlet->map_popup_content !!}');
+</script>
+@endpush
--- a/tests/Unit/Models/OutletTest.php
+++ b/tests/Unit/Models/OutletTest.php
@ -4,15 +4,15 @@ namespace Tests\Unit\Models;

 use App\User;
 use App\Outlet;
-use Illuminate\Foundation\Testing\DatabaseMigrations;
 use Tests\BrowserKitTest as TestCase;
+use Illuminate\Foundation\Testing\DatabaseMigrations;

 class OutletTest extends TestCase
 {
    use DatabaseMigrations;

    /** @test */
-    public function a_outlet_has_name_link_attribute()
+    public function an_outlet_has_name_link_attribute()
    {
        $outlet = factory(Outlet::class)->create();

@ -28,11 +28,36 @@ class OutletTest extends TestCase
    }

    /** @test */
-    public function a_outlet_has_belongs_to_creator_relation()
+    public function an_outlet_has_belongs_to_creator_relation()
    {
        $outlet = factory(Outlet::class)->make();

        $this->assertInstanceOf(User::class, $outlet->creator);
        $this->assertEquals($outlet->creator_id, $outlet->creator->id);
    }
+
+    /** @test */
+    public function an_outlet_has_coordinate_attribute()
+    {
+        $outlet = factory(Outlet::class)->make(['latitude' => '-3.333333', 'longitude' => '114.583333']);
+        $this->assertEquals($outlet->latitude.', '.$outlet->longitude, $outlet->coordinate);
+
+        $outlet = factory(Outlet::class)->make(['latitude' => null, 'longitude' => null]);
+        $this->assertNull($outlet->coordinate);
+
+        $outlet = factory(Outlet::class)->make(['latitude' => null, 'longitude' => '114.583333']);
+        $this->assertNull($outlet->coordinate);
+    }
+
+    /** @test */
+    public function an_outlet_has_map_popup_content_attribute()
+    {
+        $outlet = factory(Outlet::class)->make(['lat' => '-3.333333', 'long' => '114.583333']);
+
+        $mapPopupContent = '';
+        $mapPopupContent .= '<div class="my-2"><strong>'.__('outlet.name').':</strong><br>'.$outlet->name.'</div>';
+        $mapPopupContent .= '<div class="my-2"><strong>'.__('outlet.coordinate').':</strong><br>'.$outlet->coordinate.'</div>';
+
+        $this->assertEquals($mapPopupContent, $outlet->map_popup_content);
+    }
 }