ilham
/
sekolah_adiwiyata
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

main
Ilham Wara Nugroho 2026-04-15 14:51:29 +07:00
parent 144185b2f1
commit 0e5a30cf9b
1 changed files with 133 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

155
resources/views/modules/profile/profile.blade.php
View File

@ -1,4 +1,10 @@
@extends('layouts.master')
@section('page-css')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
<style>
#map { height: 60vh; min-height: 400px; }
</style>
@endsection
@section('breadcrumbs')
<ol class="breadcrumb page-breadcrumb">
@foreach($breadcrumbs as $dataBread)
@ -111,6 +117,42 @@
</div>
</div>
</div>
<div class="col-12 mb-3">
<div class="row">
<div class="col-12">
<div id="map" class="rounded-md border mb-3"></div>
<button type="button" id="btnUseLocation" class="px-3 btn-primary border-0 mb-2 py-2 bg-blue-600 text-white rounded">Gunakan Lokasi Saya</button>
<button type="button" id="btnClear" class="px-3 btn-warning py-2 border-0 mb-2 rounded">Reset</button>
</div>
<div class="col-12">
<div class="row">
<div class="col-6 mb-3">
<div class="form-group">
<label class="col-xl-12 form-label" for="emailverify">Latitude</label>
<div class="col-12 pr-1">
<input type="text" id="latInput" value="{{@$item->profile->lat ? @$item->profile->lat : old('lat')}}" name="lat" class="form-control @error('lat') is-invalid @enderror" placeholder="Masukan Latitude">
@error('lat')
<span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
@enderror
</div>
</div>
</div>
<div class="col-6 mb-3">
<div class="form-group">
<label class="col-xl-12 form-label" for="emailverify">Longitude</label>
<div class="col-12 pr-1">
<input type="text" id="lngInput" value="{{@$item->profile->long ? @$item->profile->long : old('long')}}" name="long" class="form-control @error('long') is-invalid @enderror" placeholder="Masukan longitude">
@error('long')
<span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
@enderror
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 mb-3">
<div class="form-group">
<label class="col-xl-12 form-label" for="emailverify">Telp/WA</label>
@ -122,28 +164,6 @@
</div>
</div>
</div>
<div class="col-12 mb-3">
<div class="form-group">
<label class="col-xl-12 form-label" for="emailverify">Latitude</label>
<div class="col-12 pr-1">
<input type="text" value="{{@$item->profile->lat ? @$item->profile->lat : old('lat')}}" name="lat" class="form-control @error('lat') is-invalid @enderror" placeholder="Masukan Latitude">
@error('lat')
<span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
@enderror
</div>
</div>
</div>
<div class="col-12 mb-3">
<div class="form-group">
<label class="col-xl-12 form-label" for="emailverify">Longitude</label>
<div class="col-12 pr-1">
<input type="text" value="{{@$item->profile->long ? @$item->profile->long : old('long')}}" name="long" class="form-control @error('long') is-invalid @enderror" placeholder="Masukan longitude">
@error('long')
<span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
@enderror
</div>
</div>
</div>
<div class="col-12 mb-3">
<div class="form-group">
<label class="col-xl-12 form-label" for="emailverify">Email</label>
@ -191,6 +211,97 @@
</div>
@endsection
@section('page-js')
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
// ===== Inisialisasi peta =====
const defaultLat = '{{(@$item->profile->lat ? @$item->profile->lat : "-6.200000")}}' ;
const defaultLng = '{{(@$item->profile->long ? @$item->profile->long : "106.816666")}}';
const defaultZoom = 15;
const map = L.map('map').setView([defaultLat, defaultLng], defaultZoom);
// Tile layer (OpenStreetMap)
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; OpenStreetMap contributors'
}).addTo(map);
// Marker (dapat digerakkan)
let marker = L.marker([defaultLat, defaultLng], { draggable: true }).addTo(map);
// Element input
const latInput = document.getElementById('latInput');
const lngInput = document.getElementById('lngInput');
const btnUseLocation = document.getElementById('btnUseLocation');
const btnClear = document.getElementById('btnClear');
// Fungsi format untuk menampilkan lat/lng (6 desimal)
function fmt(n) {
return Number(n).toFixed(6);
}
// Set input berdasarkan koordinat
function setInputs(lat, lng) {
latInput.value = fmt(lat);
lngInput.value = fmt(lng);
}
// Ketika klik di map => pindah marker & isi input
map.addEventListener('click', function(e) {
const { lat, lng } = e.latlng;
marker.setLatLng([lat, lng]);
setInputs(lat, lng);
});
// Ketika marker di-drag selesai => update input
marker.addEventListener('moveend', function(e) {
const pos = e.target.getLatLng();
setInputs(pos.lat, pos.lng);
});
// Tombol: gunakan lokasi (geolocation)
btnUseLocation.addEventListener('click', function() {
if (!navigator.geolocation) {
alert('Geolocation tidak didukung oleh browser ini.');
return;
}
btnUseLocation.disabled = true;
btnUseLocation.textContent = 'Mencari lokasi...';
navigator.geolocation.getCurrentPosition(function(position) {
const lat = position.coords.latitude;
const lng = position.coords.longitude;
map.setView([lat, lng], 15);
marker.setLatLng([lat, lng]);
setInputs(lat, lng);
btnUseLocation.disabled = false;
btnUseLocation.textContent = 'Gunakan Lokasi Saya';
}, function(err) {
alert('Gagal mendapatkan lokasi: ' + err.message);
btnUseLocation.disabled = false;
btnUseLocation.textContent = 'Gunakan Lokasi Saya';
}, {
enableHighAccuracy: true,
timeout: 10000
});
});
// Tombol reset: pindah kembali ke default dan clear input
btnClear.addEventListener('click', function() {
map.setView([defaultLat, defaultLng], defaultZoom);
marker.setLatLng([defaultLat, defaultLng]);
latInput.value = '';
lngInput.value = '';
});
// Inisialisasi input awal (kosong)
latInput.value = '{{(@$item->profile->lat ? @$item->profile->lat : "")}}';
lngInput.value = '{{(@$item->profile->long ? @$item->profile->long : "")}}';
// Opsional: jika mau isi input dengan koordinat awal marker:
// setInputs(defaultLat, defaultLng);
</script>
<script type="text/javascript">
$(document).ready(function() {
$('.numberInput').on('input', function() {