upadate
This commit is contained in:
meusinfirmary
@ -3,11 +3,8 @@
|
||||
Add Zone
|
||||
@endsection
|
||||
@section('customcss')
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"
|
||||
integrity="sha512-gc3xjCmIy673V6MyOAZhIW93xhM9ei1I+gLbmFjUHIjocENRsLX/QUE1htk5q1XV2D/iie/VQ8DXI6Vu8bexvQ=="
|
||||
crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vanilla-picker@2.12.1/dist/vanilla-picker.csp.css"
|
||||
integrity="sha256-ITHmamcImsZ/Je1xrdtDLZVvRSpj1Zokb6uHXORB824=" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css" integrity="sha512-gc3xjCmIy673V6MyOAZhIW93xhM9ei1I+gLbmFjUHIjocENRsLX/QUE1htk5q1XV2D/iie/VQ8DXI6Vu8bexvQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vanilla-picker@2.12.1/dist/vanilla-picker.csp.css" integrity="sha256-ITHmamcImsZ/Je1xrdtDLZVvRSpj1Zokb6uHXORB824=" crossorigin="anonymous">
|
||||
@endsection
|
||||
@section('content')
|
||||
<div class="container-fluid">
|
||||
@ -16,31 +13,29 @@
|
||||
<div class="col-sm-12">
|
||||
<div class="card bg-light">
|
||||
<div class="card-header">
|
||||
<p class="card-title text-bold mb-0">Tambah Zona</p>
|
||||
<p class="card-title text-bold mb-0">Add New Zone</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-sm-5">
|
||||
<h6>Infomasi Zona</h6>
|
||||
<h6>Zone Information</h6>
|
||||
<div class="mb-3">
|
||||
<label for="add-zone_name" class="form-label">Nama</label>
|
||||
<input type="text" class="form-control form-control-sm" name="add-zone_name"
|
||||
id="add-zone_name">
|
||||
<label for="add-zone_name" class="form-label">Name</label>
|
||||
<input type="text" class="form-control form-control-sm" name="add-zone_name" id="add-zone_name">
|
||||
</div>
|
||||
@if ($is_su)
|
||||
<div class="mb-3">
|
||||
<label for="add-zone_client" class="form-label">Client</label>
|
||||
<select name="add-zone_client" id="add-zone_client"
|
||||
class="form-control select2">
|
||||
<label for="add-zone_client" class="form-label">Company</label>
|
||||
<select name="add-zone_client" id="add-zone_client" class="form-control select2">
|
||||
<option value="">Choose</option>
|
||||
@foreach ($clients as $client)
|
||||
<option value="{{ $client->id }}">{{ $client->name }}</option>
|
||||
<option value="{{ $client->id }}" selected>{{ $client->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
@endif
|
||||
<div class="mb-3">
|
||||
<label for="add-zone_type" class="form-label">Tipe Zona</label>
|
||||
<label for="add-zone_type" class="form-label">Zone Type</label>
|
||||
<select name="add-zone_type" id="add-zone_type" class="form-control select2">
|
||||
<option value="">Choose</option>
|
||||
@foreach ($types as $type)
|
||||
@ -51,18 +46,16 @@
|
||||
<div class="mb-3">
|
||||
<label for="add-workflow_zone_type" class="form-label">Workflow Zone
|
||||
Type</label>
|
||||
<select name="add-workflow_zone_type" id="add-workflow_zone_type"
|
||||
class="form-control select2">
|
||||
<select name="add-workflow_zone_type" id="add-workflow_zone_type" class="form-control select2">
|
||||
<option value="">Choose</option>
|
||||
@foreach ($workflows as $workflow)
|
||||
<option value="{{ $workflow->id }}">{{ $workflow->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
{{-- <div class="mb-3">
|
||||
<label for="add-shiptocode" class="form-label">Kode Pos</label>
|
||||
<input type="number" class="form-control form-control-sm" name="add-shiptocode"
|
||||
id="add-shiptocode" placeholder="postcode">
|
||||
<input type="number" class="form-control form-control-sm" name="add-shiptocode" id="add-shiptocode" placeholder="postcode">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="add-prid" class="form-label">Provinsi</label>
|
||||
@ -91,50 +84,45 @@
|
||||
<select class="form-control form-control-sm select2" name="add-klid" id="add-klid">
|
||||
<option value="">Select Village</option>
|
||||
</select>
|
||||
</div>
|
||||
</div> --}}
|
||||
<div class="mb-4">
|
||||
<label for="add-fulladdress" class="form-label">Alamat Lengkap</label>
|
||||
<textarea name="add-fulladdress" id="add-fulladdress"
|
||||
class="form-control form-control-sm" rows="3"></textarea>
|
||||
<label for="add-fulladdress" class="form-label">Full Address</label>
|
||||
<textarea name="add-fulladdress" id="add-fulladdress" class="form-control form-control-sm" rows="3"></textarea>
|
||||
</div>
|
||||
<h6>Lainnya</h6>
|
||||
<div class="mb-4">
|
||||
<label for="add-status" class="form-label">Status Zona</label>
|
||||
<label for="add-status" class="form-label">Status</label>
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" id="add-status">
|
||||
<label class="form-check-label" for="add-status"><span class="text-dark"
|
||||
id="add-txtStatus">Inactive</span></label>
|
||||
<label class="form-check-label" for="add-status"><span class="text-dark" id="add-txtStatus">Inactive</span></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-7">
|
||||
<h6>Gambar Zona</h6>
|
||||
<h6>Draw Zona</h6>
|
||||
<div class="mb-3">
|
||||
<div class="row">
|
||||
<div class="col-3">
|
||||
<label for="add-boundary_color" class="form-label">Warna Zona</label>
|
||||
<input type="color" class="form-control form-control-sm"
|
||||
name="add-boundary_color" id="add-boundary_color"
|
||||
placeholder="hex codes">
|
||||
<label for="add-boundary_color" class="form-label">Color</label>
|
||||
<input type="color" class="form-control form-control-sm" name="add-boundary_color" id="add-boundary_color" placeholder="hex codes">
|
||||
</div>
|
||||
<div class="col-9">
|
||||
<label for="add-boundary_hex" class="form-label"> </label>
|
||||
<input type="text" class="form-control form-control-sm"
|
||||
name="add-boundary_hex" id="add-boundary_hex" value="#000000"
|
||||
placeholder="hex codes">
|
||||
<input type="text" class="form-control form-control-sm" name="add-boundary_hex" id="add-boundary_hex" value="#000000" placeholder="hex codes">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<label for="add-boundary_type" class="form-label">Batas Zona</label>
|
||||
<select id="add-boundary_type" name="add-boundary_type"
|
||||
class="form-control select2">
|
||||
<label for="add-boundary_type" class="form-label">Boundary</label>
|
||||
<select id="add-boundary_type" name="add-boundary_type" class="form-control select2">
|
||||
<option value="">Choose</option>
|
||||
@foreach ($boundarys as $boundary)
|
||||
@php
|
||||
if ($boundary['id'] == \App\Models\Zone::ZONE_BOUNDARY_POLYGON) continue;
|
||||
if ($boundary['id'] == \App\Models\Zone::ZONE_BOUNDARY_POLYGON) {
|
||||
continue;
|
||||
}
|
||||
@endphp
|
||||
<option value="{{ $boundary['id'] }}">{{ $boundary['name'] }}</option>
|
||||
@endforeach
|
||||
@ -143,18 +131,15 @@
|
||||
<div class="add-group_boundary_circle col-6 mb-3 d-none">
|
||||
<label for="add-boundary_radius" class="form-label">Radius
|
||||
(meter)</label>
|
||||
<input type="text" class="form-control form-control-sm"
|
||||
name="add-boundary_radius" id="add-boundary_radius">
|
||||
<input type="text" class="form-control form-control-sm" name="add-boundary_radius" id="add-boundary_radius">
|
||||
</div>
|
||||
<div class="add-group_boundary_circle col-6 d-none">
|
||||
<label for="add-boundary_lat" class="form-label">Latitude</label>
|
||||
<input type="text" class="form-control form-control-sm"
|
||||
name="add-boundary_lat" id="add-boundary_lat">
|
||||
<input type="text" class="form-control form-control-sm" name="add-boundary_lat" id="add-boundary_lat">
|
||||
</div>
|
||||
<div class="add-group_boundary_circle col-6 d-none">
|
||||
<label for="add-boundary_lng" class="form-label">Longitude</label>
|
||||
<input type="text" class="form-control form-control-sm"
|
||||
name="add-boundary_lng" id="add-boundary_lng">
|
||||
<input type="text" class="form-control form-control-sm" name="add-boundary_lng" id="add-boundary_lng">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -165,8 +150,8 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12">
|
||||
<a href="{{ route('view_zone') }}" class="btn btn-sm btn-secondary">Batal</a>
|
||||
<button id="btnSubmitNewZone" class="btn btn-sm btn-danger">Simpan Zona</button>
|
||||
<a href="{{ route('view_zone') }}" class="btn btn-sm btn-secondary">Cancel</a>
|
||||
<button id="btnSubmitNewZone" class="btn btn-sm btn-danger">Save Zone</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -175,11 +160,8 @@
|
||||
|
||||
@section('customjs')
|
||||
<script src="{{ asset('assets/vendor/leaflet-1.7.1/leaflet-src.js') }}"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"
|
||||
integrity="sha512-ozq8xQKq6urvuU6jNgkfqAmT7jKN2XumbrX1JiB3TnF7tI48DPI4Gy1GXKD/V3EExgAs1V+pRO7vwtS1LHg0Gw=="
|
||||
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vanilla-picker@2.12.1/dist/vanilla-picker.min.js"
|
||||
integrity="sha256-V1zh/sQiwo4NO4mg4WqQF9j79hDt7MBbTi3klxV3ZK4=" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js" integrity="sha512-ozq8xQKq6urvuU6jNgkfqAmT7jKN2XumbrX1JiB3TnF7tI48DPI4Gy1GXKD/V3EExgAs1V+pRO7vwtS1LHg0Gw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vanilla-picker@2.12.1/dist/vanilla-picker.min.js" integrity="sha256-V1zh/sQiwo4NO4mg4WqQF9j79hDt7MBbTi3klxV3ZK4=" crossorigin="anonymous"></script>
|
||||
<script>
|
||||
'use strict'
|
||||
|
||||
@ -405,7 +387,7 @@
|
||||
activate: function() {
|
||||
// centering java archipelago => .setView([-7.1451449, 109.9776078], 6.5);
|
||||
// centering indonesia country => .setView([-1.38116, 117.6168817], 5.4);
|
||||
Leaflet.map = L.map('mapDraw').setView([-7.1451449, 109.9776078], 6.5);
|
||||
Leaflet.map = L.map('mapDraw').setView([-8.90507, 125.9945732], 9);
|
||||
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
|
||||
attribution: 'Map data © <a href="https://www.mapbox.com/feedback/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
|
||||
maxZoom: 20,
|
||||
@ -807,9 +789,9 @@
|
||||
country_code: 'id',
|
||||
}
|
||||
Req.geo_addr(data, false, function(resp) {
|
||||
if (resp.meta.type == 'success' && resp.data) {
|
||||
if (resp.meta.type == 'success' && resp.data) {
|
||||
if (resp.data.lat && resp.data.lng) {
|
||||
Leaflet.map.setView([resp.data.lat, resp.data.lng], 16);
|
||||
Leaflet.map.setView([resp.data.lat, resp.data.lng], 16);
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -833,18 +815,19 @@
|
||||
name: '',
|
||||
fulladdress: '',
|
||||
boundary_radius: Number(rad),
|
||||
boundary_latlngs: [
|
||||
{
|
||||
lat: lat,
|
||||
lng: lng,
|
||||
},
|
||||
],
|
||||
boundary_latlngs: [{
|
||||
lat: lat,
|
||||
lng: lng,
|
||||
}, ],
|
||||
boundary_bounds: '',
|
||||
boundary_type: State.boundary_type.circle,
|
||||
createDrawToolbar: State.createDrawToolbar,
|
||||
};
|
||||
Leaflet.injectShapeToLDraw(obj);
|
||||
ZNew.toggleInputCircle(true, rad, {lat, lng});
|
||||
ZNew.toggleInputCircle(true, rad, {
|
||||
lat,
|
||||
lng
|
||||
});
|
||||
}
|
||||
let radTimeout = null;
|
||||
$('#add-boundary_radius').on('keyup', function() {
|
||||
@ -927,17 +910,21 @@
|
||||
// https://gist.github.com/takvol/f4288261fba112030fb0fbfe11724f04
|
||||
if (data.boundary_type == State.boundary_type.circle) {
|
||||
data.boundary_diameter = data.boundary_radius * 2;
|
||||
data.boundary_area = 0; data.boundary_ha = 0;
|
||||
data.boundary_area = 0;
|
||||
data.boundary_ha = 0;
|
||||
} else if (data.boundary_type == State.boundary_type.rectangle) {
|
||||
data.boundary_radius = 0; data.boundary_diameter = 0;
|
||||
data.boundary_radius = 0;
|
||||
data.boundary_diameter = 0;
|
||||
data.boundary_area = L.GeometryUtil.geodesicArea(data.boundary_latlngs); // in square meter
|
||||
data.boundary_ha = L.GeometryUtil.readableArea(data.boundary_area, true).replace(' ha', ''); // in ha
|
||||
} else if (data.boundary_type == State.boundary_type.polygon) {
|
||||
data.boundary_radius = 0; data.boundary_diameter = 0;
|
||||
data.boundary_radius = 0;
|
||||
data.boundary_diameter = 0;
|
||||
data.boundary_area = L.GeometryUtil.geodesicArea(data.boundary_latlngs); // in square meter
|
||||
data.boundary_ha = L.GeometryUtil.readableArea(data.boundary_area, true).replace(' ha', ''); // in ha
|
||||
} else {
|
||||
data.boundary_radius = 0; data.boundary_diameter = 0;
|
||||
data.boundary_radius = 0;
|
||||
data.boundary_diameter = 0;
|
||||
data.boundary_area = 0;
|
||||
data.boundary_ha = 0;
|
||||
}
|
||||
@ -1019,7 +1006,10 @@
|
||||
lng: e.layer._latlng.lng,
|
||||
}];
|
||||
State.boundary_radius = e.layer._mRadius;
|
||||
ZNew.toggleInputCircle(true, State.boundary_radius, {lat: e.layer._latlng.lat, lng: e.layer._latlng.lng});
|
||||
ZNew.toggleInputCircle(true, State.boundary_radius, {
|
||||
lat: e.layer._latlng.lat,
|
||||
lng: e.layer._latlng.lng
|
||||
});
|
||||
} else if (e.layerType == State.boundary_type.polygon) {
|
||||
State.boundary_type_choose = State.boundary_type.polygon;
|
||||
State.boundary_latlngs = [];
|
||||
|
||||
Reference in New Issue
Block a user