You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
96 lines
4.5 KiB
96 lines
4.5 KiB
@extends('layouts.app')
|
|
|
|
@section('title', __('outlet.create'))
|
|
|
|
@section('content')
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">{{ __('outlet.create') }}</div>
|
|
<form method="POST" action="{{ route('outlets.store') }}" accept-charset="UTF-8">
|
|
{{ csrf_field() }}
|
|
<div class="card-body">
|
|
<div class="form-group">
|
|
<label for="name" class="control-label">{{ __('outlet.name') }}</label>
|
|
<input id="name" type="text" class="form-control{{ $errors->has('name') ? ' is-invalid' : '' }}" name="name" value="{{ old('name') }}" required>
|
|
{!! $errors->first('name', '<span class="invalid-feedback" role="alert">:message</span>') !!}
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="address" class="control-label">{{ __('outlet.address') }}</label>
|
|
<textarea id="address" class="form-control{{ $errors->has('address') ? ' is-invalid' : '' }}" name="address" rows="4">{{ old('address') }}</textarea>
|
|
{!! $errors->first('address', '<span class="invalid-feedback" role="alert">:message</span>') !!}
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="latitude" class="control-label">{{ __('outlet.latitude') }}</label>
|
|
<input id="latitude" type="text" class="form-control{{ $errors->has('latitude') ? ' is-invalid' : '' }}" name="latitude" value="{{ old('latitude') }}" required>
|
|
{!! $errors->first('latitude', '<span class="invalid-feedback" role="alert">:message</span>') !!}
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="longitude" class="control-label">{{ __('outlet.longitude') }}</label>
|
|
<input id="longitude" type="text" class="form-control{{ $errors->has('longitude') ? ' is-invalid' : '' }}" name="longitude" value="{{ old('longitude') }}" required>
|
|
{!! $errors->first('longitude', '<span class="invalid-feedback" role="alert">:message</span>') !!}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="mapid"></div>
|
|
</div>
|
|
<div class="card-footer">
|
|
<input type="submit" value="{{ __('outlet.create') }}" class="btn btn-success">
|
|
<a href="{{ route('outlets.index') }}" class="btn btn-link">{{ __('app.cancel') }}</a>
|
|
</div>
|
|
</form>
|
|
</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: 300px; }
|
|
</style>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
|
|
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
|
|
crossorigin=""></script>
|
|
<script>
|
|
var mapCenter = ['-3.313695', '114.590148'];
|
|
var map = L.map('mapid').setView(mapCenter, 13);
|
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
}).addTo(map);
|
|
|
|
var marker = L.marker(mapCenter).addTo(map);
|
|
function updateMarker(lat, lng) {
|
|
marker
|
|
.setLatLng([lat, lng])
|
|
.bindPopup("Your location : " + marker.getLatLng().toString())
|
|
.openPopup();
|
|
return false;
|
|
};
|
|
|
|
map.on('click', function(e) {
|
|
let latitude = e.latlng.lat.toString().substring(0, 15);
|
|
let longitude = e.latlng.lng.toString().substring(0, 15);
|
|
$('#latitude').val(latitude);
|
|
$('#longitude').val(longitude);
|
|
updateMarker(latitude, longitude);
|
|
});
|
|
|
|
var updateMarkerByInputs = function() {
|
|
return updateMarker( $('#latitude').val() , $('#longitude').val());
|
|
}
|
|
$('#latitude').on('input', updateMarkerByInputs);
|
|
$('#longitude').on('input', updateMarkerByInputs);
|
|
</script>
|
|
@endpush
|