126 lines
3.9 KiB
JavaScript
126 lines
3.9 KiB
JavaScript
import { Grid } from "gridjs/dist/gridjs.umd.js";
|
|
import gridjs from "gridjs/dist/gridjs.umd.js";
|
|
import "gridjs/dist/gridjs.umd.js";
|
|
import GlobalConfig from "../../global-config.js";
|
|
import GeneralTable from "../../table-generator.js";
|
|
|
|
const dataTourismsColumns = [
|
|
"ID Proyek",
|
|
"Jenis Proyek",
|
|
"NIB",
|
|
"Nama Perusahaan",
|
|
"Tanggal Terbit OSS",
|
|
"Uraian Status Penanaman Modal",
|
|
"Uraian Jenis Perusahaan",
|
|
"Risiko Proyek",
|
|
"Nama Proyek",
|
|
"Uraian Skala Usaha",
|
|
"Alamat Usaha",
|
|
"Kecamatan",
|
|
"Desa",
|
|
"Longitude",
|
|
"Latitude",
|
|
"Tanggal Pengajuan Project",
|
|
"KBLI",
|
|
"Judul KBLI",
|
|
"Sektor Pembina",
|
|
"Nama User",
|
|
"Email",
|
|
"Kontak",
|
|
"Luas Tanah (m2)",
|
|
"Jumlah Investasi",
|
|
"TKI",
|
|
{
|
|
name: "Actions",
|
|
widht: "120px",
|
|
formatter: function (cell, row) {
|
|
const id = row.cells[25].data;
|
|
const long = row.cells[13].data;
|
|
const lat = row.cells[14].data;
|
|
const model = "data/tourisms";
|
|
return gridjs.html(`
|
|
<div class="d-flex justify-items-end gap-10">
|
|
<button class="btn btn-warning me-2 btn-edit"
|
|
data-id="${id}"
|
|
data-model="${model}">
|
|
<i class='bx bx-edit'></i></button>
|
|
|
|
<button class="btn btn-info me-2 btn-view"
|
|
data-long="${long}" data-lat="${lat}">
|
|
<i class='bx bx-show'></i></button>
|
|
|
|
<button class="btn btn-red btn-delete"
|
|
data-id="${id}">
|
|
<i class='bx bxs-trash'></i></button>
|
|
</div>
|
|
`);
|
|
},
|
|
},
|
|
];
|
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const table = new GeneralTable(
|
|
"tourisms-data-table",
|
|
`${GlobalConfig.apiHost}/api/tourisms`,
|
|
`${GlobalConfig.apiHost}`,
|
|
dataTourismsColumns
|
|
);
|
|
|
|
table.processData = function (data) {
|
|
return data.data.map((item) => {
|
|
return [
|
|
item.project_id,
|
|
item.project_type_id,
|
|
item.nib,
|
|
item.business_name,
|
|
item.oss_publication_date,
|
|
item.investment_status_description,
|
|
item.business_form,
|
|
item.project_risk,
|
|
item.project_name,
|
|
item.business_scale,
|
|
item.business_address,
|
|
item.district_name,
|
|
item.village_name,
|
|
item.longitude,
|
|
item.latitude,
|
|
item.project_submission_date,
|
|
item.kbli,
|
|
item.kbli_title,
|
|
item.supervisory_sector,
|
|
item.user_name,
|
|
item.email,
|
|
item.contact,
|
|
item.land_area_in_m2,
|
|
item.investment_amount,
|
|
item.tki,
|
|
item.id,
|
|
];
|
|
});
|
|
};
|
|
|
|
table.init();
|
|
|
|
// Event listener untuk tombol "View" yang memunculkan modal
|
|
document.addEventListener("click", function (e) {
|
|
if (e.target && e.target.classList.contains("btn-view")) {
|
|
const long = e.target.getAttribute("data-long");
|
|
const lat = e.target.getAttribute("data-lat");
|
|
|
|
// Menyiapkan URL iframe dengan koordinat yang didapatkan
|
|
const iframeSrc = `https://www.google.com/maps?q=${lat},${long}&hl=es;z=14&output=embed`;
|
|
|
|
// Menemukan modal dan iframe di dalam modal
|
|
const modal = document.querySelector(".modalGMaps");
|
|
const iframe = modal.querySelector("iframe");
|
|
|
|
// Set src iframe untuk menampilkan peta dengan koordinat yang relevan
|
|
iframe.src = iframeSrc;
|
|
|
|
// Menampilkan modal
|
|
var modalInstance = new bootstrap.Modal(modal);
|
|
modalInstance.show();
|
|
}
|
|
});
|
|
});
|