Upload Pariwisata dan report pariwisata
This commit is contained in:
79
resources/js/data/tourisms/data-tourisms.js
Normal file
79
resources/js/data/tourisms/data-tourisms.js
Normal file
@@ -0,0 +1,79 @@
|
||||
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 = [
|
||||
"Proyek ID",
|
||||
"Jenis Proyek",
|
||||
"NIB",
|
||||
"Nama Perusahaan",
|
||||
"Terbit OSS",
|
||||
"Status Penanaman Modal",
|
||||
"Bentuk Bisnis",
|
||||
"Uraian Resiko Proyek",
|
||||
"Nama Proyek",
|
||||
"Alamat Usaha",
|
||||
"Kecamatan",
|
||||
"Desa",
|
||||
"Luas Tanah",
|
||||
"Jumlah Investasi",
|
||||
"TKI",
|
||||
"Tipe Usaha",
|
||||
{
|
||||
name: "Actions",
|
||||
widht: "120px",
|
||||
formatter: function(cell, row) {
|
||||
const id = row.cells[16].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-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.jenis_project,
|
||||
item.nib,
|
||||
item.business_name,
|
||||
item.terbit_oss,
|
||||
item.status_penanaman_modal,
|
||||
item.business_form,
|
||||
item.uraian_resiko_project,
|
||||
item.project_name,
|
||||
item.business_address,
|
||||
item.district_name,
|
||||
item.village_name,
|
||||
item.land_area,
|
||||
item.investment_amount,
|
||||
item.number_of_employee,
|
||||
item.business_type,
|
||||
item.id,
|
||||
];
|
||||
});
|
||||
};
|
||||
|
||||
table.init();
|
||||
})
|
||||
149
resources/js/data/tourisms/form-upload.js
Normal file
149
resources/js/data/tourisms/form-upload.js
Normal file
@@ -0,0 +1,149 @@
|
||||
import { Dropzone } from "dropzone";
|
||||
import GlobalConfig from "../../global-config.js";
|
||||
|
||||
Dropzone.autoDiscover = false;
|
||||
|
||||
var previewTemplate,
|
||||
dropzone,
|
||||
dropzonePreviewNode = document.querySelector("#dropzone-preview-list");
|
||||
console.log(previewTemplate);
|
||||
console.log(dropzone);
|
||||
console.log(dropzonePreviewNode);
|
||||
|
||||
(dropzonePreviewNode.id = ""),
|
||||
dropzonePreviewNode &&
|
||||
((previewTemplate = dropzonePreviewNode.parentNode.innerHTML),
|
||||
dropzonePreviewNode.parentNode.removeChild(dropzonePreviewNode),
|
||||
(dropzone = new Dropzone(".dropzone", {
|
||||
url: `${GlobalConfig.apiHost}/api/tourisms/import`,
|
||||
// url: "https://httpbin.org/post",
|
||||
method: "post",
|
||||
acceptedFiles: ".xls,.xlsx", // Use acceptedFiles for better validation
|
||||
previewTemplate: previewTemplate,
|
||||
previewsContainer: "#dropzone-preview",
|
||||
autoProcessQueue: false, // Disable auto post
|
||||
headers: {
|
||||
Authorization: `Bearer ${document
|
||||
.querySelector('meta[name="api-token"]')
|
||||
.getAttribute("content")}`
|
||||
},
|
||||
init: function() {
|
||||
// Listen for the success event
|
||||
this.on("success", function(file, response) {
|
||||
console.log("File successfully uploaded:", file);
|
||||
console.log("API Response:", response);
|
||||
|
||||
// Show success toast
|
||||
showToast('bxs-check-square', 'green', response.message);
|
||||
document.getElementById("submit-upload").innerHTML = "Upload Files";
|
||||
// Tunggu sebentar lalu reload halaman
|
||||
setTimeout(() => {
|
||||
window.location.href = "/data/tourisms";
|
||||
}, 2000);
|
||||
});
|
||||
// Listen for the error event
|
||||
this.on("error", function(file, errorMessage) {
|
||||
console.error("Error uploading file:", file);
|
||||
console.error("Error message:", errorMessage);
|
||||
// Handle the error response
|
||||
|
||||
// Show error toast
|
||||
showToast('bxs-error-alt', 'red', errorMessage.message);
|
||||
document.getElementById("submit-upload").innerHTML = "Upload Files";
|
||||
});
|
||||
}
|
||||
})));
|
||||
|
||||
// Add event listener to control the submission manually
|
||||
document.querySelector("#submit-upload").addEventListener("click", function() {
|
||||
console.log("Ini adalah value dropzone", dropzone.files[0]);
|
||||
const formData = new FormData()
|
||||
console.log("Dropzonefiles",dropzone.files);
|
||||
|
||||
this.innerHTML = '<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>Loading...';
|
||||
|
||||
// Pastikan ada file dalam queue sebelum memprosesnya
|
||||
if (dropzone.files.length > 0) {
|
||||
formData.append('file', dropzone.files[0])
|
||||
console.log("ini adalah form data on submit", ...formData);
|
||||
dropzone.processQueue(); // Ini akan manual memicu upload
|
||||
} else {
|
||||
// Show error toast when no file is selected
|
||||
showToast('bxs-error-alt', 'red', "Please add a file first.");
|
||||
document.getElementById("submit-upload").innerHTML = "Upload Files";
|
||||
}
|
||||
});
|
||||
|
||||
// Optional: Listen for the 'addedfile' event to log or control file add behavior
|
||||
dropzone.on("addedfile", function (file) {
|
||||
console.log("File ditambahkan:", file);
|
||||
console.log("Nama File:", file.name);
|
||||
console.log("Tipe File:", file.type);
|
||||
console.log("Ukuran File:", (file.size / 1024).toFixed(2) + " KB");
|
||||
});
|
||||
|
||||
dropzone.on("complete", function(file) {
|
||||
dropzone.removeFile(file);
|
||||
});
|
||||
|
||||
// Add event listener to download file template
|
||||
document.getElementById('downloadtemptourisms').addEventListener('click', function() {
|
||||
var url = `${GlobalConfig.apiHost}/api/download-template-umkm`;
|
||||
fetch(url, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
Authorization: `Bearer ${document
|
||||
.querySelector('meta[name="api-token"]')
|
||||
.getAttribute("content")}`
|
||||
},
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
return response.blob(); // Jika respons OK, konversi menjadi blob
|
||||
} else {
|
||||
return response.json(); // Jika respons gagal, konversi menjadi JSON untuk menangani pesan error
|
||||
}
|
||||
})
|
||||
.then((blob) => {
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.style.display = 'none';
|
||||
a.href = url;
|
||||
a.download = 'template_tourisms.xlsx';
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
window.URL.revokeObjectURL(url);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Gagal mendownload file:", error);
|
||||
showToast('bxs-error-alt', 'red', "Template file is not already exist.");
|
||||
})
|
||||
})
|
||||
|
||||
// Function to show toast
|
||||
function showToast(iconClass, iconColor, message) {
|
||||
const toastElement = document.getElementById('toastUploadUmkm');
|
||||
const toastBody = toastElement.querySelector('.toast-body');
|
||||
const toastHeader = toastElement.querySelector('.toast-header');
|
||||
|
||||
// Remove existing icon (if any) before adding the new one
|
||||
const existingIcon = toastHeader.querySelector('.bx');
|
||||
if (existingIcon) {
|
||||
toastHeader.querySelector('.auth-logo').removeChild(existingIcon); // Remove the existing icon
|
||||
}
|
||||
|
||||
// Add the new icon to the toast header
|
||||
const icon = document.createElement('i');
|
||||
icon.classList.add('bx', iconClass);
|
||||
icon.style.fontSize = '25px';
|
||||
icon.style.color = iconColor;
|
||||
toastHeader.querySelector('.auth-logo').appendChild(icon);
|
||||
|
||||
// Set the toast message
|
||||
toastBody.textContent = message;
|
||||
|
||||
// Show the toast
|
||||
const toast = new bootstrap.Toast(toastElement); // Inisialisasi Bootstrap Toast
|
||||
toast.show();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user