fix(master-land): create func js get regency and get district

This commit is contained in:
arieeefajar 2025-02-14 21:56:23 +07:00
parent 3f39f5c536
commit f8d8165492
8 changed files with 6217 additions and 29 deletions

View File

@ -0,0 +1,23 @@
<?php
namespace App\Http\Controllers;
use App\Models\District;
use App\Models\Regency;
use Dflydev\DotAccessData\Data;
use Illuminate\Http\Request;
class LocationController extends Controller
{
public function getRegencies($provinceId)
{
$regencies = Regency::where('province_id', $provinceId)->get();
return response()->json(['success' => true, 'data' => $regencies]);
}
public function getDistricts($regencyId)
{
$distircts = District::where('regency_id', $regencyId)->get();
return response()->json(['success' => true, 'data' => $distircts]);
}
}

View File

@ -4,6 +4,7 @@
use App\Http\Controllers\Controller;
use App\Models\Land;
use App\Models\Province;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Validator;
@ -12,7 +13,8 @@ class LandController extends Controller
public function index()
{
$lands = Land::orderBy('created_at', 'desc')->get();
return view('master-data.lahan.index', compact('lands'));
$provinces = Province::all();
return view('master-data.lahan.index', compact('lands', 'provinces'));
}
public function store(Request $request)

14
app/Models/District.php Normal file
View File

@ -0,0 +1,14 @@
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class District extends Model
{
use HasFactory;
protected $table = 'districts';
protected $guarded = [];
}

View File

@ -1,3 +1,150 @@
var map;
document.addEventListener("DOMContentLoaded", function () {
// Initialize the first map
map = L.map("map", {
attributionControl: false,
}).setView([-8.157416852745705, 113.72281580436439], 16);
// Add tile layers to both maps
L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
maxZoom: 19,
}).addTo(map);
$("#showModal").on("shown.bs.modal", function () {
map.invalidateSize();
});
});
var form = document.getElementById("add-form");
var provinceField = form.querySelector("#province-field");
var provinceVal = new Choices(provinceField);
var regencyContainer = form.querySelector("#regency-container");
var regencyField = form.querySelector("#regency-field");
var regencyVal = new Choices(regencyField, {
shouldSort: false,
});
var districtContainer = form.querySelector("#district-container");
var districtField = form.querySelector("#district-field");
var districtVal = new Choices(districtField, {
shouldSort: false,
});
var mapContainer = form.querySelector("#map-container");
var loading = form.querySelector("#loading");
function getRegencies(provinceId) {
regencyContainer.style.display = "none";
districtContainer.style.display = "none";
loading.style.display = "block";
mapContainer.style.display = "none";
const url = "/location/get-regency/" + provinceId;
$.ajax({
url: url,
type: "GET",
success: function (response) {
if (response.success) {
loading.style.display = "none";
const data = response.data;
regencyVal.clearStore();
regencyVal.clearChoices();
regencyVal.value = "";
regencyVal.setChoices([
{
value: "",
label: "Pilih Kabupaten",
selected: true,
disabled: true,
},
]);
if (Array.isArray(data)) {
regencyVal.setChoices(
data.map((regency) => ({
value: regency.id,
label: regency.name,
selected: false,
disabled: false,
}))
);
regencyContainer.style.display = "block";
} else {
mapContainer.style.display = "block";
mapContainer.innerHTML =
"<p class='text-center text-muted'>Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi</p>";
}
}
},
error: function (xhr, status, error) {
mapContainer.style.display = "block";
mapContainer.innerHTML =
"<p class='text-center text-muted'>Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi</p>";
},
});
}
function showmap(districtId) {
mapContainer.style.display = "block";
map.invalidateSize();
}
function getDistricts(regencyId) {
districtContainer.style.display = "none";
loading.style.display = "block";
mapContainer.style.display = "none";
const url = "/location/get-district/" + regencyId;
$.ajax({
url: url,
type: "GET",
success: function (response) {
if (response.success) {
loading.style.display = "none";
const data = response.data;
districtVal.clearStore();
districtVal.clearChoices();
districtVal.value = "";
districtVal.setChoices([
{
value: "",
label: "Pilih Kecamatan",
selected: true,
disabled: true,
},
]);
if (Array.isArray(data)) {
districtVal.setChoices(
data.map((district) => ({
value: district.id,
label: district.name,
selected: false,
disabled: false,
}))
);
districtContainer.style.display = "block";
} else {
mapContainer.style.display = "block";
mapContainer.innerHTML =
"<p class='text-center text-muted'>Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi</p>";
}
}
},
error: function (xhr, status, error) {
mapContainer.style.display = "block";
mapContainer.innerHTML =
"<p class='text-center text-muted'>Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi</p>";
},
});
}
function updateData(land) {
var form = document.getElementById("edit-form");
var landName = document.getElementById("landname-edit-field");

5966
public/assets/libs/jquery/jquery.min.js vendored Normal file

File diff suppressed because it is too large Load Diff

View File

@ -21,7 +21,7 @@
<link href="assets/css/app.min.css" rel="stylesheet" type="text/css" />
<!-- custom Css-->
<link href="assets/css/custom.min.css" rel="stylesheet" type="text/css" />
@stack('other-css')
</head>
@ -605,6 +605,7 @@ class="form-check-input">
<!-- App js -->
<script src="assets/js/app.js"></script>
<script src="assets/libs/jquery/jquery.min.js"></script>
</body>
</html>

View File

@ -1,6 +1,17 @@
@extends('layouts.app')
@push('title', 'Data Tanah')
@section('content')
@push('other-css')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
<style>
#map {
height: 200px;
width: 100%;
}
</style>
@endpush
<div class="page-content">
<div class="container-fluid">
@ -167,23 +178,28 @@ class="fw-medium link-primary">#VZ2101</a></td>
</div>
</div>
<div class="mb-3">
<label for="rentalstart-field" class="form-label">Mulai Dari</label>
<input type="date" id="rentalstart-field" class="form-control"
name="rental_start" value="{{ old('rental_start') }}"
placeholder="Masukan Tanggal Mulai" required />
<div class="invalid-feedback">
Masukan Tanggal Mulai
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="rentalstart-field" class="form-label">Mulai Dari</label>
<input type="date" id="rentalstart-field" class="form-control"
name="rental_start" value="{{ old('rental_start') }}"
placeholder="Masukan Tanggal Mulai" required />
<div class="invalid-feedback">
Masukan Tanggal Mulai
</div>
</div>
</div>
</div>
<div class="mb-3">
<label for="rentaluntil-field" class="form-label">Sampai</label>
<input type="date" id="rentaluntil-field" class="form-control"
name="rental_until" value="{{ old('rental_start') }}"
placeholder="Masukan Tanggal Sampai" required />
<div class="invalid-feedback">
Masukan Tanggal Sampai
<div class="col-md-6">
<div class="mb-3">
<label for="rentaluntil-field" class="form-label">Sampai</label>
<input type="date" id="rentaluntil-field" class="form-control"
name="rental_until" value="{{ old('rental_start') }}"
placeholder="Masukan Tanggal Sampai" required />
<div class="invalid-feedback">
Masukan Tanggal Sampai
</div>
</div>
</div>
</div>
@ -198,17 +214,24 @@ class="fw-medium link-primary">#VZ2101</a></td>
<div class="mb-3">
<label for="province-field" class="form-label">Provinsi</label>
<select name="province_id" id="province-field" class="form-control" required>
<select name="province_id" id="province-field" class="form-control" required
onchange="getRegencies(this.value)">
<option value="" selected disabled>Pilih Provinsi</option>
@foreach ($provinces as $province)
<option value="{{ $province->id }}"
{{ old('province_id') == $province->id ? 'selected' : '' }}>
{{ $province->name }}</option>
@endforeach
</select>
<div class="invalid-feedback">
Harap Pilih Provinsi
</div>
</div>
<div class="mb-3">
<div class="mb-3" id="regency-container" style="display: none">
<label for="regency-field" class="form-label">Kabupaten atau Kota</label>
<select name="regency_id" id="regency-field" class="form-control" required>
<select name="regency_id" id="regency-field" class="form-control" required
onchange="getDistricts(this.value)">
<option value="" selected disabled>Pilih Kabupaten atau Kota</option>
</select>
<div class="invalid-feedback">
@ -216,9 +239,10 @@ class="fw-medium link-primary">#VZ2101</a></td>
</div>
</div>
<div class="mb-3">
<div class="mb-3" id="district-container" style="display: none">
<label for="district-field" class="form-label">Kecamatan</label>
<select name="district_id" id="district-field" class="form-control" required>
<select name="district_id" id="district-field" class="form-control" required
onchange="showmap(this.value)">
<option value="" selected disabled>Pilih Kecamatan</option>
</select>
<div class="invalid-feedback">
@ -226,14 +250,15 @@ class="fw-medium link-primary">#VZ2101</a></td>
</div>
</div>
<div>
<label for="status-field" class="form-label">Deskripsi</label>
<textarea name="description" id="status-field" rows="5" placeholder="Masukan Deskripsi" class="form-control"
required>{{ old('description') }}</textarea>
<div class="invalid-feedback">
Masukan Deskripsi
<div id="loading" class="text-center" style="display: none">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<div id="map-container" style="display: none">
<div id="map"></div>
</div>
</div>
<div class="modal-footer">
<div class="hstack gap-2 justify-content-end">
@ -338,5 +363,9 @@ class="form-control" required>{{ old('description') }}</textarea>
<script src="assets/js/pages/customJs/master-data/lahan/index.js"></script>
<script src="assets/js/pages/form-validation.init.js"></script>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
@endpush
@endsection

View File

@ -7,6 +7,7 @@
use App\Http\Controllers\Auth\RegisteredUserController;
use App\Http\Controllers\Auth\TwoStepVerifyController;
use App\Http\Controllers\DashboardController;
use App\Http\Controllers\LocationController;
use App\Http\Controllers\MasterData\IndicatorController;
use App\Http\Controllers\MasterData\LandController;
use App\Http\Controllers\MasterData\RuleController;
@ -59,6 +60,11 @@
Route::middleware(['auth', 'verifiedAcount'])->group(function () {
Route::post('/logout', [AuthenticatedSessionController::class, 'destroy'])->name('auth.logout');
Route::prefix('location')->controller(LocationController::class)->name('location.')->group(function () {
Route::get('/get-regency/{id}', 'getRegencies')->name('get_regencies');
Route::get('/get-district/{id}', 'getDistricts')->name('get_districts');
});
Route::middleware('admin')->group(function () {
Route::get('/dashboard-admin', [DashboardController::class, 'admin'])->name('dashboard.admin');