update assigment lintas region

This commit is contained in:
majid
2024-11-05 08:29:27 +07:00
parent e466e5e7ff
commit 10c9567b4f
19 changed files with 699 additions and 252 deletions

View File

@@ -668,8 +668,10 @@
</label>
<div class="input-group w-full flex gap-2">
<input class="name_rute" type="hidden" name="name_rute[]" value="rute">
<input id="inputRute" type="file" name="foto_rute" class="file-input file-input-bordered w-full" accept="image/*">
<button id="mod" type="button" class="btn btn-light" onclick="openModal('gistaru')">
<input id="inputRute" type="file" name="foto_rute"
class="file-input file-input-bordered w-full" accept="image/*">
<button id="gistaru" type="button" class="btn btn-light"
onclick="openModal('gistaru')">
<i class="ki-outline ki-abstract-33"></i> Gistaru
</button>
</div>
@@ -679,9 +681,11 @@
<span class="form-label">Bumi</span>
</label>
<div class="input-group w-full flex gap-2">
<input class="name_rute" type="hidden" name="name_rute[]" value="rute">
<input id="inputRute" type="file" name="foto_rute" class="file-input file-input-bordered w-full" accept="image/*" capture="camera">
<button id="mod" type="button" class="btn btn-light" onclick="openModal('bumi')">
<input class="name_rute" type="hidden" name="name_rute" value="rute">
<input id="inputRute" type="file" name="foto_rute"
class="file-input file-input-bordered w-full" accept="image/*" capture="camera">
<button id="bumi" type="button" class="btn btn-light"
onclick="openModal('bumi')">
<i class="ki-outline ki-abstract-33"></i> Bumi
</button>
</div>
@@ -759,7 +763,7 @@
</button>
</div>
<div class="modal-body" id="screenshotContainer" style="height: 500px">
<iframe id="mapFrameGis" frameborder="0" style="width: 100%; height: 100%;"></iframe>
<iframe id="mapFrameGis" style="width: 100%; height: 100%;"></iframe>
</div>
<div class="modal-footer flex justify-end">
<button id="takeScreenshot" class="btn btn-success">Take Screenshot</button>
@@ -770,47 +774,53 @@
@endsection
@push('scripts')
<script>
function getMap(params) {
const iframe = document.getElementById('mapFrameGis');
const maps = [
'https://gistaru.atrbpn.go.id/rtronline/',
'https://bhumi.atrbpn.go.id/peta'
];
<script>
function getMap(params) {
const iframe = document.getElementById('mapFrameGis');
const maps = [
'https://gistaru.atrbpn.go.id/rtronline/',
'https://bhumi.atrbpn.go.id/peta'
];
iframe.src = maps[params];
}
iframe.src = maps[params];
}
function openModal(type) {
const modal = document.getElementById('mod');
modal.setAttribute('data-modal-toggle', '#modal');
function openModal(type) {
const modalGistaru = document.getElementById('gistaru');
const modalBumi = document.getElementById('bumi');
getMap(type === 'gistaru' ? 0 : 1);
}
if (type === 'bumi') {
modalBumi.setAttribute('data-modal-toggle', '#modal');
}else if (type === 'gistaru') {
modalGistaru.setAttribute('data-modal-toggle', '#modal');
}
document.getElementById('takeScreenshot').addEventListener('click', () => {
const screenshotContainer = document.getElementById('screenshotContainer');
const canvas = document.createElement('canvas');
canvas.width = screenshotContainer.offsetWidth;
canvas.height = screenshotContainer.offsetHeight;
const ctx = canvas.getContext('2d');
ctx.drawImage(document.getElementById('mapFrame'), 0, 0, canvas.width, canvas.height);
const dataURL = canvas.toDataURL('image/jpeg');
getMap(type === 'gistaru' ? 0 : 1);
}
// Tampilkan gambar di atas input
const inputRute = document.getElementById('inputRute');
const img = document.createElement('img');
img.src = dataURL;
img.style.maxWidth = '100%';
img.style.maxHeight = '200px';
inputRute.parentNode.insertBefore(img, inputRute);
document.getElementById('takeScreenshot').addEventListener('click', () => {
const screenshotContainer = document.getElementById('screenshotContainer');
const canvas = document.createElement('canvas');
canvas.width = screenshotContainer.offsetWidth;
canvas.height = screenshotContainer.offsetHeight;
const ctx = canvas.getContext('2d');
ctx.drawImage(document.getElementById('mapFrame'), 0, 0, canvas.width, canvas.height);
const dataURL = canvas.toDataURL('image/jpeg');
// Isi input dengan data URL gambar
inputRute.value = dataURL;
});
</script>
// Tampilkan gambar di atas input
const inputRute = document.getElementById('inputRute');
const img = document.createElement('img');
img.src = dataURL;
img.style.maxWidth = '100%';
img.style.maxHeight = '200px';
inputRute.parentNode.insertBefore(img, inputRute);
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
// Isi input dengan data URL gambar
inputRute.value = dataURL;
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script>
// Fungsi untuk mengambil lokasi pengguna
function getUserLocation() {