Probindo/database-pertani-web
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update Master

Browse Source
This commit is contained in:
afriadirahman
2026-03-10 14:05:41 +07:00
parent 72d7b97939
commit 79c91d83e5
88 changed files with 7289 additions and 956 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/master/tanaman/add.blade.php
+237
View File
@@ -0,0 +1,237 @@
@extends('layout.main')
@section('content')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<div class="container-xxl flex-grow-1 container-p-y">
<div class="card">
<div class="card-header border-bottom mb-4">
<h5 class="card-title mb-0">Tambah Map Tanaman</h5>
</div>
<div class="card-body">
<form id="addTanamanForm" action="{{ route('tanaman.store') }}" method="POST">
@csrf
<div class="row">
<div class="col-lg-5 mb-4">
<h6 class="mb-3 text-primary"><i class="ti tabler-seeding me-1"></i> Data Tanaman</h6>
<div class="mb-3 form-control-validation">
<label class="form-label">Nama Tanaman (Cth: Pohon Mangga 01)<span class="text-danger">*</span></label>
<input type="text" class="form-control" name="nama" />
</div>
<div class="mb-3 form-control-validation">
<label class="form-label">Pemilik/Pengelola<span class="text-danger">*</span></label>
<select name="profile_id" class="select2 form-select" data-placeholder="Pilih Pemilik">
<option value="">Pilih Pemilik</option>
@foreach($profiles as $p)
<option value="{{ $p->id }}">{{ $p->nama }}</option>
@endforeach
</select>
</div>
<div class="row">
<div class="col-md-6 mb-3 form-control-validation">
<label class="form-label">Komoditas<span class="text-danger">*</span></label>
<select name="komoditas_id" class="select2 form-select" data-placeholder="Pilih Komoditas">
<option value="">Pilih Komoditas</option>
@foreach($komoditas as $k)
<option value="{{ $k->id }}">{{ $k->nama }}</option>
@endforeach
</select>
</div>
<div class="col-md-6 mb-3 form-control-validation">
<label class="form-label">Kondisi<span class="text-danger">*</span></label>
<select name="kondisi_tanaman" class="select2 form-select" data-placeholder="Kondisi">
<option value="">Pilih Kondisi</option>
<option value="sehat">Sehat</option>
<option value="sakit">Sakit</option>
<option value="mati">Mati</option>
</select>
</div>
</div>
<hr class="my-4">
<h6 class="mb-3 text-primary"><i class="ti tabler-map-pin me-1"></i> Tentukan Titik Koordinat</h6>
<div class="mb-3 form-control-validation">
<label class="form-label text-success fw-bold">1. Pilih Lahan (Lokasi Tanam)<span class="text-danger">*</span></label>
<select id="lahan-select" name="lahan_id" class="select2 form-select" data-placeholder="Pilih Lahan">
<option value="">Pilih Lahan</option>
@foreach($lahan as $l)
<option value="{{ $l->id }}">{{ $l->nama }}</option>
@endforeach
</select>
<small class="text-muted d-block mt-1">Pilih lahan untuk memunculkan poligon di peta.</small>
</div>
<div class="row">
<div class="col-12 mb-2">
<label class="form-label text-success fw-bold">2. Klik Area pada Peta di samping untuk mengisi koordinat otomatis <i class="ti tabler-arrow-right d-none d-lg-inline"></i></label>
</div>
<div class="col-6 mb-3 form-control-validation">
<label class="form-label">Latitude<span class="text-danger">*</span></label>
<input type="text" class="form-control bg-lighter" id="lat-input" name="latitude" readonly placeholder="Otomatis" />
</div>
<div class="col-6 mb-3 form-control-validation">
<label class="form-label">Longitude<span class="text-danger">*</span></label>
<input type="text" class="form-control bg-lighter" id="lng-input" name="longitude" readonly placeholder="Otomatis" />
</div>
</div>
<div class="mt-4 text-end">
<a href="{{ route('tanaman.index') }}" class="btn btn-label-secondary me-2">Batal</a>
<button type="submit" class="btn btn-primary data-submit">Simpan Tanaman</button>
</div>
</div>
<div class="col-lg-7">
<div class="border rounded h-100 min-vh-50" style="min-height: 500px; position: relative;">
<div id="map" style="height: 100%; width: 100%; z-index: 1; border-radius: 0.375rem;"></div>
<div id="map-overlay" class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center bg-dark bg-opacity-50 rounded" style="z-index: 2;">
<h5 class="text-white text-center px-4"><i class="ti tabler-map-search mb-2" style="font-size: 3rem;"></i><br>Silakan pilih Lahan terlebih dahulu</h5>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
@endsection
@push('scripts')
<script>
'use strict';
$(document).ready(function () {
$('.select2').select2();
let map = L.map('map').setView([-2.5489, 118.0149], 5);
L.tileLayer('http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}', {
maxZoom: 20,
subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
attribution: '&copy; Google Maps Satellite'
}).addTo(map);
let currentPolygon = null;
let currentMarker = null;
$('#lahan-select').on('change', function() {
let lahanId = $(this).val();
if (currentPolygon) map.removeLayer(currentPolygon);
if (currentMarker) map.removeLayer(currentMarker);
$('#lat-input').val('');
$('#lng-input').val('');
fvAdd.revalidateField('latitude');
if (lahanId) {
$('#map-overlay').addClass('d-none');
$.get(`/tanaman/get-lahan/${lahanId}`, function(res) {
if (res.status === 'success' && res.path) {
try {
let rawData = JSON.parse(res.path);
let latLngs = rawData.map(coord => [coord[1], coord[0]]);
currentPolygon = L.polygon(latLngs, {
color: '#28c76f',
fillColor: '#28c76f',
fillOpacity: 0.4,
weight: 2
}).addTo(map);
map.fitBounds(currentPolygon.getBounds(), { padding: [30, 30] });
} catch (e) {
console.error("Format JSON Lahan tidak valid.");
Swal.fire('Oops!', 'Format koordinat lahan ini rusak/tidak valid.', 'warning');
}
} else {
Swal.fire('Oops!', 'Lahan ini belum memiliki data pemetaan (Polygon kosong).', 'warning');
}
});
} else {
$('#map-overlay').removeClass('d-none');
map.setView([-2.5489, 118.0149], 5);
}
});
map.on('click', function(e) {
let lahanId = $('#lahan-select').val();
if (!lahanId) {
Swal.fire('Perhatian', 'Silakan pilih Lahan terlebih dahulu sebelum menentukan titik tanam.', 'warning');
return;
}
let lat = e.latlng.lat.toFixed(8);
let lng = e.latlng.lng.toFixed(8);
$('#lat-input').val(lat);
$('#lng-input').val(lng);
fvAdd.revalidateField('latitude');
fvAdd.revalidateField('longitude');
if (currentMarker) {
map.removeLayer(currentMarker);
}
currentMarker = L.marker([lat, lng]).addTo(map)
.bindPopup("<b>Titik Tanam Dipilih!</b><br>Lat: " + lat + "<br>Lng: " + lng).openPopup();
});
const addForm = document.getElementById('addTanamanForm');
let fvAdd = FormValidation.formValidation(addForm, {
fields: {
nama: { validators: { notEmpty: { message: 'Nama tanaman wajib diisi' } } },
profile_id: { validators: { notEmpty: { message: 'Pemilik wajib dipilih' } } },
lahan_id: { validators: { notEmpty: { message: 'Lahan wajib dipilih' } } },
komoditas_id: { validators: { notEmpty: { message: 'Komoditas wajib dipilih' } } },
kondisi_tanaman: { validators: { notEmpty: { message: 'Kondisi wajib dipilih' } } },
latitude: { validators: { notEmpty: { message: 'Klik pada peta untuk menentukan titik koordinat' } } },
longitude: { validators: { notEmpty: { message: 'Longitude tidak boleh kosong' } } },
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap5: new FormValidation.plugins.Bootstrap5({ eleValidClass: '', rowSelector: '.form-control-validation' }),
submitButton: new FormValidation.plugins.SubmitButton(),
}
}).on('core.form.valid', function () {
let formData = $(addForm).serialize();
$.ajax({
url: addForm.action,
type: 'POST',
data: formData,
success: function (res) {
Swal.fire({ icon: 'success', title: 'Berhasil!', text: res.message, timer: 1500, showConfirmButton: false })
.then(() => window.location.href = "{{ route('tanaman.index') }}");
},
error: function (xhr) {
if (xhr.status === 422) {
const errors = xhr.responseJSON.errors || {};
Object.keys(errors).forEach(key => {
fvAdd.updateFieldStatus(key, 'Invalid', 'notEmpty');
const fieldRow = addForm.querySelector(`[name="${key}"]`).closest('.form-control-validation');
const messageContainer = fieldRow.querySelector('.fv-plugins-message-container');
if (messageContainer) messageContainer.innerHTML = `<div class="fv-help-block text-danger">${errors[key][0]}</div>`;
});
} else {
Swal.fire({ icon: 'error', title: 'Gagal!', text: xhr.responseJSON?.message || 'Error' });
}
}
});
});
$('.select2').on('change', function() {
const name = $(this).attr('name');
if (name && addForm.querySelector(`[name="${name}"]`)) fvAdd.revalidateField(name);
});
});
</script>
@endpush
resources/views/master/tanaman/index.blade.php
+83
View File
@@ -0,0 +1,83 @@
@extends('layout.main')
@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
<div class="card">
<div class="card-header border-bottom">
<h5 class="card-title mb-0">Data Map Tanaman</h5>
</div>
<div class="card-body border-bottom pt-4">
<form method="GET" action="{{ route('tanaman.index') }}" class="d-flex justify-content-between align-items-center row gap-3 gap-md-0">
<div class="col-md-auto">
<div class="d-flex align-items-center">
<label class="me-2 text-nowrap">Show</label>
<select name="per_page" class="form-select form-select-sm w-auto" onchange="this.form.submit()">
<option value="10" {{ request('per_page') == 10 ? 'selected' : '' }}>10</option>
<option value="25" {{ request('per_page') == 25 ? 'selected' : '' }}>25</option>
</select>
<label class="ms-2 text-nowrap">entries</label>
</div>
</div>
<div class="col-md-auto d-flex gap-2">
<div class="input-group input-group-sm w-auto">
<input type="text" name="search" class="form-control" placeholder="Cari Tanaman / Lahan..." value="{{ request('search') }}">
<button type="submit" class="btn btn-outline-primary"><i class="ti tabler-search"></i></button>
</div>
<a href="{{ route('tanaman.create') }}" class="btn btn-sm btn-primary">
<i class="ti tabler-plus me-1"></i> Tambah Tanaman
</a>
</div>
</form>
</div>
<div class="table-responsive text-nowrap">
<table class="table table-hover">
<thead class="border-top">
<tr>
<th>No</th>
<th>Nama Tanaman</th>
<th>Komoditas</th>
<th>Lahan</th>
<th>Kondisi</th>
<th>Koordinat</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
@forelse($tanaman as $index => $item)
<tr>
<td>{{ $tanaman->firstItem() + $index }}</td>
<td><span class="text-heading fw-medium">{{ $item->nama }}</span></td>
<td>{{ $item->komoditas->nama ?? '-' }}</td>
<td>{{ $item->lahan->nama ?? '-' }}</td>
<td>
@if($item->kondisi_tanaman == 'sehat')
<span class="badge bg-label-success">Sehat</span>
@elseif($item->kondisi_tanaman == 'sakit')
<span class="badge bg-label-warning">Sakit</span>
@else
<span class="badge bg-label-danger">Mati</span>
@endif
</td>
<td><small>{{ $item->latitude }},<br>{{ $item->longitude }}</small></td>
<td>
<div class="d-flex align-items-center">
<a href="#" class="btn btn-icon btn-text-secondary rounded-pill"><i class="ti tabler-edit ti-md"></i></a>
<a href="#" class="btn btn-icon btn-text-secondary rounded-pill"><i class="ti tabler-trash ti-md"></i></a>
<a href="{{ route('tanaman.show', $item->id) }}" class="btn btn-icon btn-text-secondary rounded-pill"><i class="ti tabler-eye ti-md"></i></a>
</div>
</td>
</tr>
@empty
<tr><td colspan="7" class="text-center py-4">Tidak ada data tanaman ditemukan.</td></tr>
@endforelse
</tbody>
</table>
</div>
<div class="card-footer d-flex justify-content-center justify-content-md-end border-top">
{{ $tanaman->appends(request()->query())->links('pagination::bootstrap-5') }}
</div>
</div>
</div>
@endsection
resources/views/master/tanaman/view.blade.php
+170
View File
@@ -0,0 +1,170 @@
@extends('layout.main')
@push('style')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<style>
.plant-marker {
border: 2px solid #ffffff;
border-radius: 50%;
box-shadow: 0 0 5px rgba(0,0,0,0.6);
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(0,0,0, 0.4); }
70% { box-shadow: 0 0 0 10px rgba(0,0,0, 0); }
100% { box-shadow: 0 0 0 0 rgba(0,0,0, 0); }
}
</style>
@endpush
@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
<div class="card">
<div class="card-header border-bottom mb-4 d-flex justify-content-between align-items-center">
<h5 class="card-title mb-0">Detail Map Tanaman</h5>
<a href="{{ route('tanaman.index') }}" class="btn btn-sm btn-label-secondary">
<i class="ti tabler-arrow-left me-1"></i> Kembali
</a>
</div>
<div class="card-body">
<div class="row">
<div class="col-lg-5 mb-4">
<h6 class="mb-3 text-primary"><i class="ti tabler-seeding me-1"></i> Identitas Tanaman</h6>
<div class="mb-3">
<label class="form-label">Nama Tanaman</label>
<input type="text" class="form-control bg-lighter fw-bold text-dark" value="{{ $tanaman->nama }}" readonly />
</div>
<div class="mb-3">
<label class="form-label">Pemilik / Pengelola</label>
<input type="text" class="form-control bg-lighter" value="{{ $tanaman->profile->nama ?? '-' }}" readonly />
</div>
<div class="row">
<div class="col-md-6 mb-3">
<label class="form-label">Komoditas</label>
<div class="input-group">
<span class="input-group-text color-indicator" style="background-color: #fff; border-right: none;"></span>
<input type="text" class="form-control bg-lighter" value="{{ $tanaman->komoditas->nama ?? '-' }}" readonly />
</div>
</div>
<div class="col-md-6 mb-3">
<label class="form-label">Kondisi Saat Ini</label>
<div>
@if($tanaman->kondisi_tanaman == 'sehat')
<span class="badge bg-label-success w-100 p-2 fs-6">Sehat</span>
@elseif($tanaman->kondisi_tanaman == 'sakit')
<span class="badge bg-label-warning w-100 p-2 fs-6">Sakit</span>
@else
<span class="badge bg-label-danger w-100 p-2 fs-6">Mati</span>
@endif
</div>
</div>
</div>
<hr class="my-4">
<h6 class="mb-3 text-primary"><i class="ti tabler-map-pin me-1"></i> Informasi Spasial (Lokasi)</h6>
<div class="mb-3">
<label class="form-label">Berada di Lahan</label>
<input type="text" class="form-control bg-lighter" value="{{ $tanaman->lahan->nama ?? '-' }}" readonly />
</div>
<div class="row">
<div class="col-6 mb-3">
<label class="form-label">Latitude</label>
<input type="text" class="form-control bg-lighter font-monospace" value="{{ $tanaman->latitude }}" readonly />
</div>
<div class="col-6 mb-3">
<label class="form-label">Longitude</label>
<input type="text" class="form-control bg-lighter font-monospace" value="{{ $tanaman->longitude }}" readonly />
</div>
</div>
</div>
<div class="col-lg-7 mb-4">
<h6 class="mb-3 text-primary"><i class="ti tabler-map me-1"></i> Visualisasi Titik Tanam</h6>
<div class="border rounded" style="height: 500px; position: relative;">
<div id="map" style="height: 100%; width: 100%; border-radius: 0.375rem; z-index: 1;"></div>
</div>
<small class="text-muted d-block mt-2 fst-italic">*Klik pada titik tanaman di peta untuk melihat informasi kondisi.</small>
</div>
</div>
</div>
</div>
</div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
@endsection
@push('scripts')
<script>
document.addEventListener("DOMContentLoaded", function() {
let lahanPath = {!! $tanaman->lahan->path ? $tanaman->lahan->path : '[]' !!};
let plantLat = {{ $tanaman->latitude }};
let plantLng = {{ $tanaman->longitude }};
let plantName = "{{ $tanaman->nama }}";
let plantCondition = "{{ ucfirst($tanaman->kondisi_tanaman) }}";
let komoditasId = {{ $tanaman->komoditas_id ?? 1 }};
const colorPalette = [
'#FF33A8', '#3357FF', '#F3FF33', '#FF5733', '#33FFF5',
'#8A33FF', '#FF8F33', '#33FF8A', '#FF3333', '#33A8FF'
];
let markerColor = colorPalette[komoditasId % colorPalette.length];
document.querySelector('.color-indicator').style.backgroundColor = markerColor;
let map = L.map('map').setView([plantLat, plantLng], 18);
L.tileLayer('http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}', {
maxZoom: 22,
subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
attribution: '&copy; Google Maps Satellite'
}).addTo(map);
if (Array.isArray(lahanPath) && lahanPath.length > 0) {
try {
let latLngs = lahanPath.map(coord => [coord[1], coord[0]]);
let polygon = L.polygon(latLngs, {
color: '#28c76f',
fillColor: '#28c76f',
fillOpacity: 0.3,
weight: 2
}).addTo(map);
map.fitBounds(polygon.getBounds(), { padding: [20, 20] });
} catch (e) {
console.error("Gagal menggambar poligon lahan.");
}
}
let customIcon = L.divIcon({
className: 'custom-div-icon',
html: `<div class="plant-marker" style="background-color:${markerColor}; width:20px; height:20px;"></div>`,
iconSize: [20, 20],
iconAnchor: [10, 10]
});
let badgeClass = 'bg-label-success';
if (plantCondition.toLowerCase() === 'sakit') badgeClass = 'bg-label-warning';
if (plantCondition.toLowerCase() === 'mati') badgeClass = 'bg-label-danger';
let popupContent = `
<div class="text-center" style="min-width: 120px;">
<h6 class="mb-1 fw-bold">${plantName}</h6>
</div>
`;
let marker = L.marker([plantLat, plantLng], { icon: customIcon }).addTo(map);
marker.bindPopup(popupContent);
setTimeout(() => { marker.openPopup(); }, 500);
});
</script>
@endpush