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

update

main
Ilham Wara Nugroho 2025-10-14 10:50:18 +07:00
parent a353cc2400
commit 4f8ace8130
1 changed files with 244 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

191
resources/views/modules/profile/lengkapi.blade.php
View File

@ -1,11 +1,13 @@
@extends('layouts.blank')
@section('css')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
<style>
.bg-login{
background-image: url("{{asset('assets/bg-login.png')}}");
background-repeat: no-repeat;
background-size: cover;
}
#map { height: 60vh; min-height: 400px; }
</style>
@endsection
@section('content')
@ -54,8 +56,14 @@
<div id="loading-spinner" style="display: none; text-align: center;">
<img src="{{ asset('assets/spinner.gif') }}" alt="Loading..." width="20">
</div>
<div class="col-12 row mx-auto mt-3">
<div class="col-md-6">
<div class="card row mx-auto">
<div class="card-header">
<h5 class="mb-0"><b>Profile Sekolah</b></h5>
</div>
<div class="card-body">
<div class="col-md-12 mt-3">
<div class="form-group row">
<label class="col-xl-12 form-label" for="fname">Nama Sekolah</label>
<div class="col-12 pr-1">
@ -66,7 +74,7 @@
</div>
</div>
</div>
<div class="col-md-6">
<div class="col-md-12 mt-3">
<div class="form-group row">
<label class="col-xl-12 form-label" for="fname">NPSN</label>
<div class="col-12 pr-1">
@ -78,10 +86,7 @@
</div>
</div>
</div>
</div>
<div class="col-12 row mx-auto mt-3">
<div class="col-md-6">
<div class="col-md-12 mt-3">
<div class="form-group row">
<label class="col-xl-12 form-label">Tingkat Sekolah</label>
<div class="col-12 pr-1">
@ -105,7 +110,7 @@
</div>
</div>
</div>
<div class="col-md-6">
<div class="col-md-12 mt-3">
<div class="form-group row">
<label class="col-xl-12 form-label" for="fname">Status Sekolah</label>
<div class="col-12 pr-1">
@ -120,34 +125,8 @@
</div>
</div>
</div>
</div>
<div class="col-12 row mx-auto mt-3">
<div class="col-md-6">
<div class="form-group row">
<label class="col-xl-12 form-label">Latitude</label>
<div class="col-12 pr-1">
<input type="text" value="{{ @$user->profile->lat ? @$user->profile->lat : old('lat')}}" name="lat" class="form-control @error('lat') is-invalid @enderror" placeholder="Masukan Latitude">
<ul id="result"></ul>
@error('lat')
<span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
@enderror
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group row">
<label class="col-xl-12 form-label">Longitude</label>
<div class="col-12 pr-1">
<input type="text" value="{{ @$user->profile->long ? @$user->profile->long : old('long')}}" name="long" class="form-control @error('long') is-invalid @enderror" placeholder="Masukan Longitude">
<ul id="result"></ul>
@error('long')
<span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
@enderror
</div>
</div>
</div>
<div class="col-md-6">
<div class="col-md-12 mt-3">
<div class="form-group row">
<label class="col-xl-12 form-label" for="fname">Provinsi</label>
<div class="col-12 pr-1">
@ -163,7 +142,7 @@
</div>
</div>
</div>
<div class="col-md-6">
<div class="col-md-12 mt-3">
<div class="form-group row">
<label class="col-xl-12 form-label" for="fname">Kabupaten</label>
<div class="col-12 pr-1">
@ -173,11 +152,7 @@
</div>
</div>
</div>
</div>
<div class="col-12 row mx-auto mt-3">
<div class="col-md-12">
<div class="col-md-12 mt-3">
<div class="form-group row">
<label class="col-xl-12 form-label" for="fname">Kecamatan</label>
<div class="col-12 pr-1">
@ -186,7 +161,8 @@
</select>
</div>
</div>
</div>
<div class="col-md-12 mt-3">
<div class="form-group row">
<label class="col-xl-12 form-label" for="fname">Alamat Sekolah</label>
<div class="col-12 pr-1">
@ -197,6 +173,48 @@
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card row mx-auto">
<div class="card-header">
<h5 class="mb-0"><b>Lokasi Sekolah</b></h5>
</div>
<div class="card-body">
<div class="col-md-12 mt-3">
<div class="form-group row">
<label class="col-xl-12 form-label">Latitude</label>
<div class="col-12 pr-1">
<input type="text" id="latInput" value="{{ @$user->profile->lat ? @$user->profile->lat : old('lat')}}" name="lat" class="form-control @error('lat') is-invalid @enderror" placeholder="Masukan Latitude">
<ul id="result"></ul>
@error('lat')
<span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
@enderror
</div>
</div>
</div>
<div class="col-md-12 mt-3">
<div class="form-group row">
<label class="col-xl-12 form-label">Longitude</label>
<div class="col-12 pr-1">
<input id="lngInput" type="text" value="{{ @$user->profile->long ? @$user->profile->long : old('long')}}" name="long" class="form-control @error('long') is-invalid @enderror" placeholder="Masukan Longitude">
<ul id="result"></ul>
@error('long')
<span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
@enderror
</div>
</div>
</div>
<div class="col-md-12 mt-3">
<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 id="map" class="rounded-md border"></div>
</div>
</div>
</div>
</div>
<div class="col-md-12 mt-3">
@ -225,6 +243,97 @@
<script src="{{asset('assets/js/vendors.bundle.js')}}"></script>
<script src="{{asset('assets/js/app.bundle.js')}}"></script>
<script src="{{asset('assets/js/formplugins/select2/select2.bundle.js')}}"></script>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
// ===== Inisialisasi peta =====
const defaultLat = -6.200000;
const defaultLng = 106.816666;
const defaultZoom = 12;
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 = '';
lngInput.value = '';
// Opsional: jika mau isi input dengan koordinat awal marker:
// setInputs(defaultLat, defaultLng);
</script>
<script>
$(document).ready(function() {
$('.select2').select2();