831 lines
30 KiB
JavaScript
831 lines
30 KiB
JavaScript
var map, mapEdit;
|
|
var currentMarker = null;
|
|
var currentMarkerEdit = null;
|
|
|
|
var form = document.getElementById("add-form");
|
|
var formEdit = document.getElementById("edit-form");
|
|
var provinceField = form.querySelector("#province-field");
|
|
var provinceVal = new Choices(provinceField);
|
|
|
|
var regencyContainer = form.querySelector("#regency-container");
|
|
var regencyField = form.querySelector("#regency-field");
|
|
var regencyVal = new Choices(regencyField, {
|
|
shouldSort: false,
|
|
});
|
|
|
|
var regencyEditContainer = formEdit.querySelector("#regency-edit-container");
|
|
var regencyEditField = formEdit.querySelector("#regency-edit-field");
|
|
var regencyEditVal = new Choices(regencyEditField, {
|
|
shouldSort: false,
|
|
});
|
|
|
|
var districtContainer = form.querySelector("#district-container");
|
|
var districtField = form.querySelector("#district-field");
|
|
var districtVal = new Choices(districtField, {
|
|
shouldSort: false,
|
|
});
|
|
|
|
var districtEditContainer = formEdit.querySelector("#district-edit-container");
|
|
var districtEditField = formEdit.querySelector("#district-edit-field");
|
|
var districtEditVal = new Choices(districtEditField, {
|
|
shouldSort: false,
|
|
});
|
|
|
|
var addressContainer = form.querySelector("#address-container");
|
|
var addressField = form.querySelector("#address-field");
|
|
|
|
var addressEditContainer = formEdit.querySelector("#address-edit-container");
|
|
var addressEditField = formEdit.querySelector("#address-edit-field");
|
|
|
|
var mapContainer = form.querySelector("#map-container");
|
|
var latField = form.querySelector("#lat");
|
|
var lngField = form.querySelector("#lng");
|
|
|
|
var mapEditConatiner = formEdit.querySelector("#map-edit-container");
|
|
var latEditField = formEdit.querySelector("#lat-edit");
|
|
var lngEditField = formEdit.querySelector("#lng-edit");
|
|
|
|
var loading = form.querySelector("#loading");
|
|
var loadingEdit = formEdit.querySelector("#loading-edit");
|
|
|
|
var btnContainer = form.querySelector("#add-footer");
|
|
var btnEditContainer = formEdit.querySelector("#edit-footer");
|
|
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
map = L.map("map", {
|
|
attributionControl: false,
|
|
}).setView([-8.157416852745705, 113.72281580436439], 16);
|
|
|
|
mapEdit = L.map("map-edit", {
|
|
attributionControl: false,
|
|
}).setView([-8.157416852745705, 113.72281580436439], 16);
|
|
|
|
L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
|
|
maxZoom: 19,
|
|
}).addTo(map);
|
|
|
|
L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
|
|
maxZoom: 19,
|
|
}).addTo(mapEdit);
|
|
|
|
var iconMarker = L.icon({
|
|
iconUrl: "/assets/images/marker.png",
|
|
iconSize: [50, 50],
|
|
iconAnchor: [25, 50],
|
|
popupAnchor: [0, -50],
|
|
});
|
|
|
|
currentMarker = L.marker([-8.157416852745705, 113.72281580436439], {
|
|
icon: iconMarker,
|
|
draggable: true,
|
|
})
|
|
.addTo(map)
|
|
.bindPopup(
|
|
`<div class="text-center"><b>Anda berada di sini</b><br />Silahkan priksa lokasi petamu sudah benar.</div>`
|
|
);
|
|
|
|
currentMarkerEdit = L.marker([-8.157416852745705, 113.72281580436439], {
|
|
icon: iconMarker,
|
|
draggable: true,
|
|
})
|
|
.addTo(mapEdit)
|
|
.bindPopup(
|
|
`<div class="text-center"><b>Anda berada di sini</b><br />Silahkan priksa lokasi petamu sudah benar.</div>`
|
|
);
|
|
|
|
$("#showModal").on("shown.bs.modal", function () {
|
|
map.invalidateSize();
|
|
});
|
|
|
|
$("#editModal").on("shown.bs.modal", function () {
|
|
mapEdit.invalidateSize();
|
|
});
|
|
|
|
map.on("click", onMapClick);
|
|
});
|
|
|
|
function validatePhoneNumber(input) {
|
|
input.value = input.value.replace(/\D/g, "");
|
|
|
|
if (input.value.length < 10 || input.value.length > 13) {
|
|
input.setCustomValidity("Nomor telepon tidak valid");
|
|
} else {
|
|
input.setCustomValidity("");
|
|
}
|
|
}
|
|
|
|
function validatePrice(input) {
|
|
let value = input.value.replace(/\D/g, "");
|
|
let formatted = new Intl.NumberFormat("id-ID", {
|
|
style: "currency",
|
|
currency: "IDR",
|
|
minimumFractionDigits: 0,
|
|
}).format(value);
|
|
|
|
input.value = formatted.replace("Rp", "").trim();
|
|
}
|
|
|
|
function showmap(districtId) {
|
|
loading.style.display = "block";
|
|
if (!navigator.geolocation) {
|
|
alert("Geolocation tidak didukung oleh browser ini.");
|
|
return;
|
|
}
|
|
|
|
navigator.geolocation.getCurrentPosition(
|
|
function (position) {
|
|
loading.style.display = "none";
|
|
mapContainer.style.display = "block";
|
|
map.invalidateSize();
|
|
|
|
addressContainer.style.display = "block";
|
|
|
|
mapEditConatiner.style.display = "block";
|
|
mapEdit.invalidateSize();
|
|
|
|
addressEditContainer.style.display = "block";
|
|
|
|
btnContainer.style.display = "block";
|
|
btnEditContainer.style.display = "block";
|
|
|
|
var lat = position.coords.latitude;
|
|
var lng = position.coords.longitude;
|
|
|
|
console.log(lat, lng);
|
|
|
|
map.setView([lat, lng], 16);
|
|
mapEdit.setView([lat, lng], 16);
|
|
|
|
if (currentMarker || currentMarkerEdit) {
|
|
map.removeLayer(currentMarker);
|
|
mapEdit.removeLayer(currentMarkerEdit);
|
|
}
|
|
|
|
var iconMarker = L.icon({
|
|
iconUrl: "/assets/images/marker.png",
|
|
iconSize: [50, 50],
|
|
iconAnchor: [25, 50],
|
|
popupAnchor: [0, -50],
|
|
});
|
|
|
|
currentMarker = L.marker([lat, lng], {
|
|
icon: iconMarker,
|
|
draggable: true,
|
|
}).addTo(map);
|
|
|
|
currentMarkerEdit = L.marker([lat, lng], {
|
|
icon: iconMarker,
|
|
draggable: true,
|
|
}).addTo(mapEdit);
|
|
|
|
currentMarker.on("dragend", onMapDragend);
|
|
currentMarkerEdit.on("dragend", onMapDragend);
|
|
|
|
currentMarker
|
|
.bindPopup(
|
|
`<div class="text-center"><b>Anda berada di sini</b><br />Silahkan priksa lokasi petamu sudah benar.</div>`
|
|
)
|
|
.openPopup();
|
|
|
|
currentMarkerEdit
|
|
.bindPopup(
|
|
`<div class="text-center"><b>Anda berada di sini</b><br />Silahkan priksa lokasi petamu sudah benar.</div>`
|
|
)
|
|
.openPopup();
|
|
|
|
latField.value = lat;
|
|
lngField.value = lng;
|
|
|
|
latEditField.value = lat;
|
|
lngEditField.value = lng;
|
|
},
|
|
function (error) {
|
|
alert("Error: " + error.message);
|
|
}
|
|
);
|
|
}
|
|
|
|
function onMapClick(e) {
|
|
var lat = e.latlng.lat;
|
|
var lng = e.latlng.lng;
|
|
|
|
if (!currentMarker) {
|
|
currentMarker = L.marker(e.latlng).addTo(map);
|
|
} else {
|
|
currentMarker.setLatLng(e.latlng);
|
|
}
|
|
|
|
currentMarker.on("dragend", onMapDragend);
|
|
|
|
currentMarker
|
|
.bindPopup(
|
|
`<div class="text-center"><b>Anda berada di sini</b><br />Silahkan priksa lokasi petamu sudah benar.</div>`
|
|
)
|
|
.openPopup();
|
|
|
|
latField.value = lat;
|
|
lngField.value = lng;
|
|
}
|
|
|
|
function onMapDragend() {
|
|
if (!currentMarker) return;
|
|
var coordinates = currentMarker.getLatLng();
|
|
currentMarker
|
|
.setLatLng(coordinates)
|
|
.bindPopup(
|
|
`<div class="text-center"><b>Anda berada di sini</b><br />Silahkan priksa lokasi petamu sudah benar.</div>`
|
|
)
|
|
.openPopup();
|
|
|
|
latField.value = coordinates.lat;
|
|
lngField.value = coordinates.lng;
|
|
}
|
|
|
|
function getProvinces(provinceId) {
|
|
return new Promise(function (resolve, reject) {
|
|
$.ajax({
|
|
url: "/location/get-province",
|
|
type: "GET",
|
|
success: function (response) {
|
|
if (response.success) {
|
|
const province = response.data.find(
|
|
(province) => province.id == provinceId
|
|
);
|
|
|
|
resolve(province);
|
|
} else {
|
|
reject(new Error("Terjadi kesalahan saat mengambil data"));
|
|
}
|
|
},
|
|
error: function (xhr, status, error) {
|
|
reject(new Error("Terjadi kesalahan saat mengambil data"));
|
|
},
|
|
});
|
|
});
|
|
}
|
|
|
|
function getRegencies(provinceId) {
|
|
regencyContainer.style.display = "none";
|
|
regencyEditContainer.style.display = "none";
|
|
districtContainer.style.display = "none";
|
|
districtEditContainer.style.display = "none";
|
|
addressContainer.style.display = "none";
|
|
addressEditContainer.style.display = "none";
|
|
loading.style.display = "block";
|
|
loadingEdit.style.display = "block";
|
|
mapContainer.style.display = "none";
|
|
mapEditConatiner.style.display = "none";
|
|
|
|
const url = "/location/get-regency/" + provinceId;
|
|
$.ajax({
|
|
url: url,
|
|
type: "GET",
|
|
success: function (response) {
|
|
if (response.success) {
|
|
loading.style.display = "none";
|
|
loadingEdit.style.display = "none";
|
|
const data = response.data;
|
|
|
|
regencyVal.clearStore();
|
|
regencyVal.clearChoices();
|
|
|
|
regencyEditVal.clearStore();
|
|
regencyEditVal.clearChoices();
|
|
|
|
regencyVal.value = "";
|
|
regencyVal.setChoices([
|
|
{
|
|
value: "",
|
|
label: "Pilih Kabupaten",
|
|
selected: true,
|
|
disabled: true,
|
|
},
|
|
]);
|
|
|
|
regencyEditVal.value = "";
|
|
regencyEditVal.setChoices([
|
|
{
|
|
value: "",
|
|
label: "Pilih Kabupaten",
|
|
selected: true,
|
|
disabled: true,
|
|
},
|
|
]);
|
|
|
|
if (Array.isArray(data)) {
|
|
regencyVal.setChoices(
|
|
data.map((regency) => ({
|
|
value: regency.id,
|
|
label: regency.name,
|
|
selected: false,
|
|
disabled: false,
|
|
}))
|
|
);
|
|
|
|
regencyEditVal.setChoices(
|
|
data.map((regency) => ({
|
|
value: regency.id,
|
|
label: regency.name,
|
|
selected: false,
|
|
disabled: false,
|
|
}))
|
|
);
|
|
regencyContainer.style.display = "block";
|
|
regencyEditContainer.style.display = "block";
|
|
} else {
|
|
mapContainer.style.display = "block";
|
|
mapContainer.innerHTML =
|
|
"<p class='text-center text-muted'>Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi</p>";
|
|
|
|
mapEditConatiner.style.display = "block";
|
|
mapEditConatiner.innerHTML =
|
|
"<p class='text-center text-muted'>Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi</p>";
|
|
}
|
|
}
|
|
},
|
|
error: function (xhr, status, error) {
|
|
mapContainer.style.display = "block";
|
|
mapContainer.innerHTML =
|
|
"<p class='text-center text-muted'>Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi</p>";
|
|
|
|
mapEditConatiner.style.display = "block";
|
|
mapEditConatiner.innerHTML =
|
|
"<p class='text-center text-muted'>Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi</p>";
|
|
},
|
|
});
|
|
}
|
|
|
|
function getDistricts(regencyId) {
|
|
districtContainer.style.display = "none";
|
|
districtEditContainer.style.display = "none";
|
|
addressContainer.style.display = "none";
|
|
addressEditContainer.style.display = "none";
|
|
loading.style.display = "block";
|
|
loadingEdit.style.display = "block";
|
|
mapContainer.style.display = "none";
|
|
mapEditConatiner.style.display = "none";
|
|
|
|
const url = "/location/get-district/" + regencyId;
|
|
$.ajax({
|
|
url: url,
|
|
type: "GET",
|
|
success: function (response) {
|
|
if (response.success) {
|
|
loading.style.display = "none";
|
|
loadingEdit.style.display = "none";
|
|
const data = response.data;
|
|
|
|
districtVal.clearStore();
|
|
districtVal.clearChoices();
|
|
|
|
districtEditVal.clearStore();
|
|
districtEditVal.clearChoices();
|
|
|
|
districtVal.value = "";
|
|
districtVal.setChoices([
|
|
{
|
|
value: "",
|
|
label: "Pilih Kecamatan",
|
|
selected: true,
|
|
disabled: true,
|
|
},
|
|
]);
|
|
|
|
districtEditVal.value = "";
|
|
districtEditVal.setChoices([
|
|
{
|
|
value: "",
|
|
label: "Pilih Kecamatan",
|
|
selected: true,
|
|
disabled: true,
|
|
},
|
|
]);
|
|
|
|
if (Array.isArray(data)) {
|
|
districtVal.setChoices(
|
|
data.map((district) => ({
|
|
value: district.id,
|
|
label: district.name,
|
|
selected: false,
|
|
disabled: false,
|
|
}))
|
|
);
|
|
|
|
districtEditVal.setChoices(
|
|
data.map((district) => ({
|
|
value: district.id,
|
|
label: district.name,
|
|
selected: false,
|
|
disabled: false,
|
|
}))
|
|
);
|
|
districtContainer.style.display = "block";
|
|
districtEditContainer.style.display = "block";
|
|
} else {
|
|
mapContainer.style.display = "block";
|
|
mapContainer.innerHTML =
|
|
"<p class='text-center text-muted'>Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi</p>";
|
|
mapEditConatiner.style.display = "block";
|
|
mapEditConatiner.innerHTML =
|
|
"<p class='text-center text-muted'>Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi</p>";
|
|
}
|
|
}
|
|
},
|
|
error: function (xhr, status, error) {
|
|
mapContainer.style.display = "block";
|
|
mapContainer.innerHTML =
|
|
"<p class='text-center text-muted'>Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi</p>";
|
|
|
|
mapEditConatiner.style.display = "block";
|
|
mapEditConatiner.innerHTML =
|
|
"<p class='text-center text-muted'>Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi</p>";
|
|
},
|
|
});
|
|
}
|
|
|
|
async function updateData(data) {
|
|
const land = data.land;
|
|
const userRole = data.role;
|
|
|
|
var ownerEditField = formEdit.querySelector("#owner-edit-field");
|
|
var noHpEditField = formEdit.querySelector("#nohp-edit-field");
|
|
var rentalPriceEditField = formEdit.querySelector(
|
|
"#rentalprice-edit-field"
|
|
);
|
|
var rentalStartEditField = formEdit.querySelector(
|
|
"#rentalstart-edit-field"
|
|
);
|
|
var rentalUntilEditField = formEdit.querySelector(
|
|
"#rentaluntil-edit-field"
|
|
);
|
|
var landNameEditField = formEdit.querySelector("#landname-edit-field");
|
|
var provinceEditField = formEdit.querySelector("#province-edit-field");
|
|
var provinceEditVal = new Choices(provinceEditField);
|
|
|
|
let rentalPrice = new Intl.NumberFormat("id-ID", {
|
|
style: "currency",
|
|
currency: "IDR",
|
|
minimumFractionDigits: 0,
|
|
}).format(land.rental_price);
|
|
|
|
ownerEditField.value = land.owner;
|
|
noHpEditField.value = land.no_hp;
|
|
rentalPriceEditField.value = rentalPrice.replace(/Rp\s?/g, "").trim();
|
|
rentalStartEditField.value = land.rental_start;
|
|
rentalUntilEditField.value = land.rental_until;
|
|
landNameEditField.value = land.land_name;
|
|
provinceEditField.value = land.province_code;
|
|
try {
|
|
const province = await getProvinces(land.province_code);
|
|
provinceEditVal.setChoices([
|
|
{
|
|
value: province.id,
|
|
label: province.name,
|
|
selected: true,
|
|
disabled: true,
|
|
},
|
|
]);
|
|
|
|
$.ajax({
|
|
type: "GET",
|
|
url: "/location/get-regency/" + land.province_code,
|
|
success: function (response) {
|
|
if (response.success) {
|
|
const dataRegencies = response.data;
|
|
const regencies = response.data.find(
|
|
(regency) => regency.id === parseInt(land.regency_code)
|
|
);
|
|
|
|
regencyEditVal.setChoices([
|
|
{
|
|
value: regencies.id,
|
|
label: regencies.name,
|
|
selected: true,
|
|
disabled: true,
|
|
},
|
|
]);
|
|
|
|
if (Array.isArray(dataRegencies)) {
|
|
regencyEditVal.setChoices(
|
|
dataRegencies.map((regency) => ({
|
|
value: regency.id,
|
|
label: regency.name,
|
|
selected: false,
|
|
disabled: false,
|
|
}))
|
|
);
|
|
} else {
|
|
mapEditConatiner.style.display = "block";
|
|
mapEditConatiner.innerHTML =
|
|
"<p class='text-center text-muted'>Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi</p>";
|
|
}
|
|
}
|
|
},
|
|
});
|
|
|
|
$.ajax({
|
|
type: "GET",
|
|
url: "/location/get-district/" + land.regency_code,
|
|
success: function (response) {
|
|
if (response.success) {
|
|
const dataDistricts = response.data;
|
|
const districts = response.data.find(
|
|
(district) =>
|
|
district.id === parseInt(land.district_code)
|
|
);
|
|
|
|
districtEditVal.setChoices([
|
|
{
|
|
value: districts.id,
|
|
label: districts.name,
|
|
selected: true,
|
|
disabled: true,
|
|
},
|
|
]);
|
|
|
|
if (Array.isArray(dataDistricts)) {
|
|
districtEditVal.setChoices(
|
|
dataDistricts.map((district) => ({
|
|
value: district.id,
|
|
label: district.name,
|
|
selected: false,
|
|
disabled: false,
|
|
}))
|
|
);
|
|
} else {
|
|
mapEditConatiner.style.display = "block";
|
|
mapEditConatiner.innerHTML =
|
|
"<p class='text-center text-muted'>Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi</p>";
|
|
}
|
|
}
|
|
},
|
|
});
|
|
|
|
addressEditContainer.style.display = "block";
|
|
addressEditField.value = land.address;
|
|
|
|
mapEdit.setView([land.latitude, land.longitude], 16);
|
|
currentMarkerEdit
|
|
.setLatLng([land.latitude, land.longitude])
|
|
.openPopup();
|
|
|
|
latEditField.value = land.latitude;
|
|
lngEditField.value = land.longitude;
|
|
|
|
if (userRole === "admin") {
|
|
formEdit.action = "/data-lahan/" + land.id;
|
|
} else {
|
|
formEdit.action = "/data-lahan-petugas/" + land.id;
|
|
}
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
}
|
|
|
|
function deleteData(data) {
|
|
const landId = data.landId;
|
|
const userRole = data.role;
|
|
|
|
var form = document.getElementById("delete-form");
|
|
|
|
if (userRole === "admin") {
|
|
form.action = "/data-lahan/" + landId;
|
|
} else {
|
|
form.action = "/data-lahan-petugas/" + landId;
|
|
}
|
|
}
|
|
|
|
var perPage = 10,
|
|
options = {
|
|
valueNames: ["id", "land_name", "owner", "rental_price", "status"],
|
|
page: perPage,
|
|
pagination: !0,
|
|
plugins: [ListPagination({ left: 2, right: 2 })],
|
|
},
|
|
customerList = new List("customerList", options).on(
|
|
"updated",
|
|
function (e) {
|
|
0 == e.matchingItems.length
|
|
? (document.getElementsByClassName(
|
|
"noresult"
|
|
)[0].style.display = "block")
|
|
: (document.getElementsByClassName(
|
|
"noresult"
|
|
)[0].style.display = "none");
|
|
var t = 1 == e.i,
|
|
a = e.i > e.matchingItems.length - e.page;
|
|
document.querySelector(".pagination-prev.disabled") &&
|
|
document
|
|
.querySelector(".pagination-prev.disabled")
|
|
.classList.remove("disabled"),
|
|
document.querySelector(".pagination-next.disabled") &&
|
|
document
|
|
.querySelector(".pagination-next.disabled")
|
|
.classList.remove("disabled"),
|
|
t &&
|
|
document
|
|
.querySelector(".pagination-prev")
|
|
.classList.add("disabled"),
|
|
a &&
|
|
document
|
|
.querySelector(".pagination-next")
|
|
.classList.add("disabled"),
|
|
e.matchingItems.length <= perPage
|
|
? (document.querySelector(
|
|
".pagination-wrap"
|
|
).style.display = "none")
|
|
: (document.querySelector(
|
|
".pagination-wrap"
|
|
).style.display = "flex"),
|
|
e.matchingItems.length == perPage &&
|
|
document
|
|
.querySelector(".pagination.listjs-pagination")
|
|
.firstElementChild.children[0].click(),
|
|
0 < e.matchingItems.length
|
|
? (document.getElementsByClassName(
|
|
"noresult"
|
|
)[0].style.display = "none")
|
|
: (document.getElementsByClassName(
|
|
"noresult"
|
|
)[0].style.display = "block");
|
|
}
|
|
);
|
|
isCount = new DOMParser().parseFromString(
|
|
customerList.items.slice(-1)[0]._values.id,
|
|
"text/html"
|
|
);
|
|
var isValue = isCount.body.firstElementChild.innerHTML,
|
|
idField = document.getElementById("id-field"),
|
|
customerNameField = document.getElementById("customername-field"),
|
|
emailField = document.getElementById("email-field"),
|
|
dateField = document.getElementById("date-field"),
|
|
phoneField = document.getElementById("phone-field"),
|
|
statusField = document.getElementById("status-field"),
|
|
addBtn = document.getElementById("add-btn"),
|
|
editBtn = document.getElementById("edit-btn"),
|
|
removeBtns = document.getElementsByClassName("remove-item-btn"),
|
|
editBtns = document.getElementsByClassName("edit-item-btn");
|
|
function filterContact(e) {
|
|
var t = e;
|
|
customerList.filter(function (e) {
|
|
matchData = new DOMParser().parseFromString(
|
|
e.values().status,
|
|
"text/html"
|
|
);
|
|
e = matchData.body.firstElementChild.innerHTML;
|
|
return "All" == e || "All" == t || e == t;
|
|
}),
|
|
customerList.update();
|
|
}
|
|
function updateList() {
|
|
var a = document.querySelector("input[name=status]:checked").value;
|
|
(data = userList.filter(function (e) {
|
|
var t = !1;
|
|
return (
|
|
"All" == a
|
|
? (t = !0)
|
|
: ((t = e.values().sts == a), console.log(t, "statusFilter")),
|
|
t
|
|
);
|
|
})),
|
|
userList.update();
|
|
}
|
|
refreshCallbacks(),
|
|
filterContact("All"),
|
|
// document
|
|
// .getElementById("showModal")
|
|
// .addEventListener("show.bs.modal", function (e) {
|
|
// e.relatedTarget.classList.contains("edit-item-btn")
|
|
// ? ((document.getElementById("exampleModalLabel").innerHTML =
|
|
// "Edit Customer"),
|
|
// (document
|
|
// .getElementById("showModal")
|
|
// .querySelector(".modal-footer").style.display = "block"),
|
|
// (document.getElementById("add-btn").style.display = "none"),
|
|
// (document.getElementById("edit-btn").style.display = "block"))
|
|
// : e.relatedTarget.classList.contains("add-btn")
|
|
// ? ((document.getElementById("exampleModalLabel").innerHTML =
|
|
// "Tambah Data Lahan"),
|
|
// (document
|
|
// .getElementById("showModal")
|
|
// .querySelector(".modal-footer").style.display = "block"),
|
|
// (document.getElementById("edit-btn").style.display = "none"),
|
|
// (document.getElementById("add-btn").style.display = "block"))
|
|
// : ((document.getElementById("exampleModalLabel").innerHTML =
|
|
// "List Customer"),
|
|
// (document
|
|
// .getElementById("showModal")
|
|
// .querySelector(".modal-footer").style.display = "none"));
|
|
// }),
|
|
ischeckboxcheck(),
|
|
document
|
|
.getElementById("showModal")
|
|
.addEventListener("hidden.bs.modal", function () {
|
|
clearFields();
|
|
}),
|
|
document
|
|
.querySelector("#customerList")
|
|
.addEventListener("click", function () {
|
|
refreshCallbacks(), ischeckboxcheck();
|
|
});
|
|
var table = document.getElementById("customerTable"),
|
|
tr = table.getElementsByTagName("tr"),
|
|
trlist = table.querySelectorAll(".list tr"),
|
|
count = Number(isValue.replace(/[^0-9]/g, "")) + 1;
|
|
addBtn.addEventListener("click", function (e) {
|
|
"" !== customerNameField.value &&
|
|
"" !== emailField.value &&
|
|
"" !== dateField.value &&
|
|
"" !== phoneField.value &&
|
|
(customerList.add({
|
|
id:
|
|
'<a href="javascript:void(0);" class="fw-medium link-primary">#VZ' +
|
|
count +
|
|
"</a>",
|
|
customer_name: customerNameField.value,
|
|
email: emailField.value,
|
|
date: dateField.value,
|
|
phone: phoneField.value,
|
|
status: isStatus(statusField.value),
|
|
}),
|
|
document.getElementById("close-modal").click(),
|
|
clearFields(),
|
|
refreshCallbacks(),
|
|
filterContact("All"),
|
|
count++);
|
|
}),
|
|
// var statusVal = new Choices(statusField);
|
|
function isStatus(e) {
|
|
switch (e) {
|
|
case "Active":
|
|
return (
|
|
'<span class="badge badge-soft-success text-uppercase">' +
|
|
e +
|
|
"</span>"
|
|
);
|
|
case "Block":
|
|
return (
|
|
'<span class="badge badge-soft-danger text-uppercase">' +
|
|
e +
|
|
"</span>"
|
|
);
|
|
}
|
|
};
|
|
function ischeckboxcheck() {
|
|
document.getElementsByName("checkAll").forEach(function (e) {
|
|
e.addEventListener("click", function (e) {
|
|
e.target.checked
|
|
? e.target.closest("tr").classList.add("table-active")
|
|
: e.target.closest("tr").classList.remove("table-active");
|
|
});
|
|
});
|
|
}
|
|
function refreshCallbacks() {
|
|
removeBtns.forEach(function (e) {
|
|
e.addEventListener("click", function (e) {
|
|
e.target.closest("tr").children[1].innerText,
|
|
(itemId = e.target.closest("tr").children[1].innerText),
|
|
customerList.get({ id: itemId }).forEach(function (e) {
|
|
deleteid = new DOMParser().parseFromString(
|
|
e._values.id,
|
|
"text/html"
|
|
);
|
|
var t = deleteid.body.firstElementChild;
|
|
deleteid.body.firstElementChild.innerHTML == itemId &&
|
|
document
|
|
.getElementById("delete-record")
|
|
.addEventListener("click", function () {
|
|
customerList.remove("id", t.outerHTML),
|
|
document
|
|
.getElementById("deleteRecordModal")
|
|
.click();
|
|
});
|
|
});
|
|
});
|
|
});
|
|
}
|
|
document
|
|
.querySelector(".pagination-next")
|
|
.addEventListener("click", function () {
|
|
!document.querySelector(".pagination.listjs-pagination") ||
|
|
(document
|
|
.querySelector(".pagination.listjs-pagination")
|
|
.querySelector(".active") &&
|
|
document
|
|
.querySelector(".pagination.listjs-pagination")
|
|
.querySelector(".active")
|
|
.nextElementSibling.children[0].click());
|
|
}),
|
|
document
|
|
.querySelector(".pagination-prev")
|
|
.addEventListener("click", function () {
|
|
!document.querySelector(".pagination.listjs-pagination") ||
|
|
(document
|
|
.querySelector(".pagination.listjs-pagination")
|
|
.querySelector(".active") &&
|
|
document
|
|
.querySelector(".pagination.listjs-pagination")
|
|
.querySelector(".active")
|
|
.previousSibling.children[0].click());
|
|
});
|