Init First Release
This commit is contained in:
Firman Herdiansyah
@@ -1,13 +1,83 @@
|
||||
import ApexCharts from "apexcharts";
|
||||
|
||||
import Big from "big.js";
|
||||
import GlobalConfig, { addThousandSeparators } from "../global-config.js";
|
||||
|
||||
class BigData {
|
||||
async init() {
|
||||
try{
|
||||
this.resultDataTotal = await this.getTotalAllTask();
|
||||
try {
|
||||
this.totalTargetPAD = await this.getTargetPAD();
|
||||
this.resultDataTotal = await this.getDataTotalPotensi();
|
||||
this.dataVerification = await this.getDataVerfication();
|
||||
this.dataNonVerification = await this.getDataNonVerfication();
|
||||
this.dataBusiness = await this.getDataBusiness();
|
||||
this.dataNonBusiness = await this.getDataNonBusiness();
|
||||
|
||||
if (!this.resultDataTotal) {
|
||||
// total potensi
|
||||
this.bigTargetPAD = new Big(this.totalTargetPAD ?? 0);
|
||||
this.bigTotalPotensi = new Big(this.resultDataTotal.totalData ?? 0);
|
||||
|
||||
this.resultPercentage = 0;
|
||||
if (this.bigTotalPotensi > 0 && this.bigTargetPAD > 0) {
|
||||
this.resultPercentage = this.bigTotalPotensi
|
||||
.div(this.bigTargetPAD)
|
||||
.times(100)
|
||||
.toFixed(2);
|
||||
if (this.resultPercentage > 100) {
|
||||
this.resultPercentage = 100;
|
||||
}
|
||||
}
|
||||
|
||||
// kekurangan potensi
|
||||
this.totalKekuranganPotensi = new Big(
|
||||
this.totalTargetPAD - this.bigTotalPotensi
|
||||
);
|
||||
this.percentageKekuranganPotensi =
|
||||
this.totalKekuranganPotensi <= 0 || this.totalTargetPAD <= 0
|
||||
? 0
|
||||
: this.totalKekuranganPotensi
|
||||
.div(this.bigTargetPAD)
|
||||
.times(100)
|
||||
.toFixed(2);
|
||||
|
||||
// non-verification documents
|
||||
this.bigTotalNonVerification = new Big(
|
||||
this.dataNonVerification.total
|
||||
);
|
||||
this.percentageResultNonVerification = this.bigTotalNonVerification
|
||||
.div(this.bigTotalPotensi)
|
||||
.times(100)
|
||||
.toFixed(2);
|
||||
|
||||
// verification documents
|
||||
this.bigTotalVerification = new Big(this.dataVerification.total);
|
||||
this.percetageResultVerification =
|
||||
this.bigTotalVerification <= 0 || this.bigTotalPotensi <= 0
|
||||
? 0
|
||||
: this.bigTotalVerification
|
||||
.div(this.bigTargetPAD)
|
||||
.times(100)
|
||||
.toFixed(2);
|
||||
|
||||
// business documents
|
||||
this.bigTotalBusiness = new Big(this.dataBusiness.total);
|
||||
this.percentageResultBusiness =
|
||||
this.bigTotalNonVerification <= 0
|
||||
? 0
|
||||
: this.bigTotalBusiness
|
||||
.div(this.bigTotalNonVerification)
|
||||
.times(100)
|
||||
.toFixed(2);
|
||||
|
||||
// non-business documents
|
||||
this.bigTotalNonBusiness = new Big(this.dataNonBusiness.total);
|
||||
this.percentageResultNonBusiness =
|
||||
this.bigTotalNonBusiness <= 0
|
||||
? 0
|
||||
: this.bigTotalNonBusiness
|
||||
.div(this.bigTotalNonVerification)
|
||||
.times(100)
|
||||
.toFixed(2);
|
||||
|
||||
if (!this.totalTargetPAD) {
|
||||
console.error("Failed to load chart data");
|
||||
return;
|
||||
}
|
||||
@@ -15,455 +85,469 @@ class BigData {
|
||||
this.initChartTargetPAD();
|
||||
this.initChartUsaha();
|
||||
this.initChartNonUsaha();
|
||||
this.initChartStatus1();
|
||||
this.initChartStatus2();
|
||||
this.initChartStatus3();
|
||||
this.initChartStatus4();
|
||||
this.initChartStatus5();
|
||||
this.initChartStatus6();
|
||||
this.initChartStatus7();
|
||||
this.initChartStatus20();
|
||||
this.initChartStatus24();
|
||||
}catch(e){
|
||||
this.initChartTotalPotensi();
|
||||
this.initChartVerificationDocuments();
|
||||
this.initChartNonVerificationDocuments();
|
||||
this.initChartKekuranganPotensi();
|
||||
this.initChartRealisasiTerbitPBG();
|
||||
this.initChartMenungguKlikDPMPTSP();
|
||||
this.initChartProsesDinasTeknis();
|
||||
this.initChartPotensiTataRuang();
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
|
||||
async getTotalAllTask() {
|
||||
async getDataTotalPotensi() {
|
||||
try {
|
||||
const response = await fetch(`${GlobalConfig.apiHost}/api/all-task-documents`, {
|
||||
credentials: "include",
|
||||
headers: {
|
||||
Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
});
|
||||
|
||||
const response = await fetch(
|
||||
`${GlobalConfig.apiHost}/api/all-task-documents`,
|
||||
{
|
||||
credentials: "include",
|
||||
headers: {
|
||||
Authorization: `Bearer ${
|
||||
document.querySelector("meta[name='api-token']")
|
||||
.content
|
||||
}`,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
console.error("Network response was not ok", response);
|
||||
}
|
||||
|
||||
|
||||
const data = await response.json();
|
||||
return {
|
||||
seriesData: data.data.series,
|
||||
countData: data.data.count,
|
||||
totalData: data.data.total
|
||||
totalData: data.data.total,
|
||||
};
|
||||
|
||||
} catch (error) {
|
||||
console.error("Error fetching chart data:", error);
|
||||
return null; // Mengembalikan null jika terjadi error
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
async getTargetPAD() {
|
||||
try {
|
||||
const response = await fetch(
|
||||
`${GlobalConfig.apiHost}/api/api-data-settings?search=target_pad`,
|
||||
{
|
||||
credentials: "include",
|
||||
headers: {
|
||||
Authorization: `Bearer ${
|
||||
document.querySelector("meta[name='api-token']")
|
||||
.content
|
||||
}`,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
console.error("Network response was not ok", response);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
return data.data[0].value;
|
||||
} catch (error) {
|
||||
console.error("Error fetching chart data:", error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
async getDataVerfication() {
|
||||
try {
|
||||
const response = await fetch(
|
||||
`${GlobalConfig.apiHost}/api/verification-documents`,
|
||||
{
|
||||
credentials: "include",
|
||||
headers: {
|
||||
Authorization: `Bearer ${
|
||||
document.querySelector("meta[name='api-token']")
|
||||
.content
|
||||
}`,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
console.error("Network response was not ok", response);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
return {
|
||||
count: data.data.count,
|
||||
total: data.data.total,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error("Error fetching chart data:", error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
async getDataNonVerfication() {
|
||||
try {
|
||||
const response = await fetch(
|
||||
`${GlobalConfig.apiHost}/api/non-verification-documents`,
|
||||
{
|
||||
credentials: "include",
|
||||
headers: {
|
||||
Authorization: `Bearer ${
|
||||
document.querySelector("meta[name='api-token']")
|
||||
.content
|
||||
}`,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
console.error("Network response was not ok", response);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
return {
|
||||
count: data.data.count,
|
||||
total: data.data.total,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error("Error fetching chart data:", error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
async getDataBusiness() {
|
||||
try {
|
||||
const response = await fetch(
|
||||
`${GlobalConfig.apiHost}/api/business-documents`,
|
||||
{
|
||||
credentials: "include",
|
||||
headers: {
|
||||
Authorization: `Bearer ${
|
||||
document.querySelector("meta[name='api-token']")
|
||||
.content
|
||||
}`,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
console.error("Network response was not ok", response);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
return {
|
||||
count: data.data.count,
|
||||
total: data.data.total,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error("Error fetching chart data:", error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
async getDataNonBusiness() {
|
||||
try {
|
||||
const response = await fetch(
|
||||
`${GlobalConfig.apiHost}/api/non-business-documents`,
|
||||
{
|
||||
credentials: "include",
|
||||
headers: {
|
||||
Authorization: `Bearer ${
|
||||
document.querySelector("meta[name='api-token']")
|
||||
.content
|
||||
}`,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
console.error("Network response was not ok", response);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
return {
|
||||
count: data.data.count,
|
||||
total: data.data.total,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error("Error fetching chart data:", error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
initChartTargetPAD() {
|
||||
const total = this.resultDataTotal.totalData;
|
||||
const count = this.resultDataTotal.countData;
|
||||
document.querySelectorAll('.document-count.chart-all-task').forEach((element) => {
|
||||
element.innerText = `${count}`;
|
||||
});
|
||||
document.querySelectorAll('.document-total.chart-all-task').forEach((element) => {
|
||||
element.innerText = `Rp.${addThousandSeparators(total)}`;
|
||||
});
|
||||
document.querySelectorAll('.small-percentage.chart-all-task').forEach((element) => {
|
||||
element.innerText = `${100}%`;
|
||||
});
|
||||
let totalPad = 0;
|
||||
fetch(
|
||||
`${GlobalConfig.apiHost}/api/api-data-settings?search=target_pad`,
|
||||
{
|
||||
credentials: "include",
|
||||
headers: {
|
||||
Authorization: `Bearer ${
|
||||
document.querySelector("meta[name='api-token']").content
|
||||
}`,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
}
|
||||
)
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error("Network response was not ok");
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then((data) => {
|
||||
totalPad = data.data[0].value;
|
||||
document
|
||||
.querySelectorAll(".document-count.chart-target-pad")
|
||||
.forEach((element) => {
|
||||
element.innerText = ``;
|
||||
});
|
||||
document
|
||||
.querySelectorAll(".document-total.chart-target-pad")
|
||||
.forEach((element) => {
|
||||
element.innerText = `Rp.${addThousandSeparators(
|
||||
totalPad
|
||||
)}`;
|
||||
});
|
||||
document
|
||||
.querySelectorAll(".small-percentage.chart-target-pad")
|
||||
.forEach((element) => {
|
||||
element.innerText = `${100}%`;
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error fetching target_pad:", error);
|
||||
});
|
||||
}
|
||||
initChartTotalPotensi() {
|
||||
const countAll = this.resultDataTotal.countData ?? 0;
|
||||
|
||||
document
|
||||
.querySelectorAll(".document-count.chart-total-potensi")
|
||||
.forEach((element) => {
|
||||
element.innerText = `${countAll}`;
|
||||
});
|
||||
document
|
||||
.querySelectorAll(".document-total.chart-total-potensi")
|
||||
.forEach((element) => {
|
||||
element.innerText = `Rp.${addThousandSeparators(
|
||||
this.bigTotalPotensi.toString()
|
||||
)}`;
|
||||
});
|
||||
document
|
||||
.querySelectorAll(".small-percentage.chart-total-potensi")
|
||||
.forEach((element) => {
|
||||
element.innerText = `${this.resultPercentage}%`;
|
||||
});
|
||||
}
|
||||
initChartVerificationDocuments() {
|
||||
document
|
||||
.querySelectorAll(".document-count.chart-berkas-terverifikasi")
|
||||
.forEach((element) => {
|
||||
element.innerText = `${this.dataVerification.count}`;
|
||||
});
|
||||
document
|
||||
.querySelectorAll(".document-total.chart-berkas-terverifikasi")
|
||||
.forEach((element) => {
|
||||
element.innerText = `Rp.${addThousandSeparators(
|
||||
this.bigTotalVerification.toString()
|
||||
)}`;
|
||||
});
|
||||
document
|
||||
.querySelectorAll(".small-percentage.chart-berkas-terverifikasi")
|
||||
.forEach((element) => {
|
||||
element.innerText = `${this.percetageResultVerification}%`;
|
||||
});
|
||||
}
|
||||
initChartNonVerificationDocuments() {
|
||||
document
|
||||
.querySelectorAll(
|
||||
".document-count.chart-berkas-belum-terverifikasi"
|
||||
)
|
||||
.forEach((element) => {
|
||||
element.innerText = `${this.dataNonVerification.count}`;
|
||||
});
|
||||
document
|
||||
.querySelectorAll(
|
||||
".document-total.chart-berkas-belum-terverifikasi"
|
||||
)
|
||||
.forEach((element) => {
|
||||
element.innerText = `Rp.${addThousandSeparators(
|
||||
this.bigTotalNonVerification.toString()
|
||||
)}`;
|
||||
});
|
||||
document
|
||||
.querySelectorAll(
|
||||
".small-percentage.chart-berkas-belum-terverifikasi"
|
||||
)
|
||||
.forEach((element) => {
|
||||
element.innerText = `${this.percentageResultNonVerification}%`;
|
||||
});
|
||||
}
|
||||
initChartUsaha() {
|
||||
fetch(`${GlobalConfig.apiHost}/api/business-documents`,{
|
||||
credentials: "include",
|
||||
headers: {
|
||||
Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error("Network response was not ok");
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then((data) => {
|
||||
// Pastikan this.resultDataTotal sudah ada
|
||||
if (!this.resultDataTotal) {
|
||||
console.error("Error: resultDataTotal is undefined");
|
||||
return;
|
||||
}
|
||||
|
||||
const totalAll = this.resultDataTotal.totalData ?? 0;
|
||||
const countAll = this.resultDataTotal.countData ?? 0;
|
||||
const countUsaha = data?.data?.count ?? 0;
|
||||
const totalUsaha = data?.data?.total ?? 0;
|
||||
|
||||
// Perbaikan perhitungan persentase
|
||||
let resultPercentage = 0;
|
||||
if (countUsaha > 0) {
|
||||
resultPercentage = (countUsaha / countAll) * 100;
|
||||
if (resultPercentage > 100) {
|
||||
resultPercentage = 100; // Batasi maksimum 100%
|
||||
}
|
||||
}
|
||||
document.querySelectorAll('.document-count.chart-business').forEach((element) => {
|
||||
element.innerText = `${countUsaha}`;
|
||||
document
|
||||
.querySelectorAll(".document-count.chart-business")
|
||||
.forEach((element) => {
|
||||
element.innerText = `${this.dataBusiness.count}`;
|
||||
});
|
||||
document.querySelectorAll('.document-total.chart-business').forEach((element) => {
|
||||
element.innerText = `Rp.${addThousandSeparators(totalUsaha)}`;
|
||||
document
|
||||
.querySelectorAll(".document-total.chart-business")
|
||||
.forEach((element) => {
|
||||
element.innerText = `Rp.${addThousandSeparators(
|
||||
this.bigTotalBusiness.toString()
|
||||
)}`;
|
||||
});
|
||||
document.querySelectorAll('.small-percentage.chart-business').forEach((element) => {
|
||||
element.innerText = `${resultPercentage.toFixed(2)}%`;
|
||||
document
|
||||
.querySelectorAll(".small-percentage.chart-business")
|
||||
.forEach((element) => {
|
||||
element.innerText = `${this.percentageResultBusiness}%`;
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("error fetching chart dara : ", error);
|
||||
});
|
||||
}
|
||||
initChartNonUsaha() {
|
||||
fetch(`${GlobalConfig.apiHost}/api/non-business-documents`, {
|
||||
credentials: "include",
|
||||
headers: {
|
||||
Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error("Network response was not ok");
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then((data) => {
|
||||
// Pastikan this.resultDataTotal sudah ada
|
||||
if (!this.resultDataTotal) {
|
||||
console.error("Error: resultDataTotal is undefined");
|
||||
return;
|
||||
}
|
||||
|
||||
const totalAll = this.resultDataTotal.totalData ?? 0;
|
||||
const countAll = this.resultDataTotal.countData ?? 0;
|
||||
const countUsaha = data?.data?.count ?? 0;
|
||||
const totalUsaha = data?.data?.total ?? 0;
|
||||
|
||||
// Perbaikan perhitungan persentase
|
||||
let resultPercentage = 0;
|
||||
if (countUsaha > 0) {
|
||||
resultPercentage = (countUsaha / countAll) * 100;
|
||||
if (resultPercentage > 100) {
|
||||
resultPercentage = 100; // Batasi maksimum 100%
|
||||
}
|
||||
}
|
||||
document.querySelectorAll('.document-count.chart-non-business').forEach((element) => {
|
||||
element.innerText = `${data.data.count}`;
|
||||
document
|
||||
.querySelectorAll(".document-count.chart-non-business")
|
||||
.forEach((element) => {
|
||||
element.innerText = `${this.dataNonBusiness.count}`;
|
||||
});
|
||||
document.querySelectorAll('.document-total.chart-non-business').forEach((element) => {
|
||||
element.innerText = `Rp.${addThousandSeparators(data.data.total)}`;
|
||||
document
|
||||
.querySelectorAll(".document-total.chart-non-business")
|
||||
.forEach((element) => {
|
||||
element.innerText = `Rp.${addThousandSeparators(
|
||||
this.bigTotalNonBusiness.toString()
|
||||
)}`;
|
||||
});
|
||||
document.querySelectorAll('.small-percentage.chart-non-business').forEach((element) => {
|
||||
element.innerText = `${resultPercentage.toFixed(2)}%`;
|
||||
document
|
||||
.querySelectorAll(".small-percentage.chart-non-business")
|
||||
.forEach((element) => {
|
||||
element.innerText = `${this.percentageResultNonBusiness}%`;
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("error fetching chart dara : ", error);
|
||||
});
|
||||
}
|
||||
initChartStatus1(){
|
||||
fetch(`${GlobalConfig.apiHost}/api/pbg-task-documents?status=1`, {
|
||||
credentials: "include",
|
||||
headers: {
|
||||
Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`,
|
||||
"Content-Type": "application/json",
|
||||
}
|
||||
})
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error("Network response was not ok");
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then((data) => {
|
||||
const seriesData = data.data.series;
|
||||
// document.getElementById(
|
||||
// "countStatus1"
|
||||
// ).innerText = `${data.data.count} Berkas`;
|
||||
// document.getElementById(
|
||||
// "totalStatus1"
|
||||
// ).innerText = `Rp.${addThousandSeparators(data.data.total)}`;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("error fetching chart dara : ", error);
|
||||
});
|
||||
initChartKekuranganPotensi() {
|
||||
document
|
||||
.querySelectorAll(".document-count.chart-kekurangan-potensi")
|
||||
.forEach((element) => {
|
||||
element.innerText = ``;
|
||||
});
|
||||
document
|
||||
.querySelectorAll(".document-total.chart-kekurangan-potensi")
|
||||
.forEach((element) => {
|
||||
element.innerText = `Rp.${addThousandSeparators(
|
||||
this.totalKekuranganPotensi.toString()
|
||||
)}`;
|
||||
});
|
||||
document
|
||||
.querySelectorAll(".small-percentage.chart-kekurangan-potensi")
|
||||
.forEach((element) => {
|
||||
element.innerText = `${this.percentageKekuranganPotensi}%`;
|
||||
});
|
||||
}
|
||||
initChartStatus2(){
|
||||
fetch(`${GlobalConfig.apiHost}/api/pbg-task-documents?status=2`, {
|
||||
credentials: "include",
|
||||
headers: {
|
||||
Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`,
|
||||
"Content-Type": "application/json",
|
||||
}
|
||||
})
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error("Network response was not ok");
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then((data) => {
|
||||
const seriesData = data.data.series;
|
||||
// document.getElementById(
|
||||
// "countStatus2"
|
||||
// ).innerText = `${data.data.count} Berkas`;
|
||||
// document.getElementById(
|
||||
// "totalStatus2"
|
||||
// ).innerText = `Rp.${addThousandSeparators(data.data.total)}`;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("error fetching chart dara : ", error);
|
||||
});
|
||||
initChartRealisasiTerbitPBG() {
|
||||
document
|
||||
.querySelectorAll(".document-count.chart-realisasi-tebit-pbg")
|
||||
.forEach((element) => {
|
||||
element.innerText = `0`;
|
||||
});
|
||||
document
|
||||
.querySelectorAll(".document-total.chart-realisasi-tebit-pbg")
|
||||
.forEach((element) => {
|
||||
element.innerText = `Rp.${addThousandSeparators("0.00")}`;
|
||||
});
|
||||
document
|
||||
.querySelectorAll(".small-percentage.chart-realisasi-tebit-pbg")
|
||||
.forEach((element) => {
|
||||
element.innerText = `0.00%`;
|
||||
});
|
||||
}
|
||||
initChartStatus3(){
|
||||
fetch(`${GlobalConfig.apiHost}/api/pbg-task-documents?status=3`, {
|
||||
credentials: "include",
|
||||
headers: {
|
||||
Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`,
|
||||
"Content-Type": "application/json",
|
||||
}
|
||||
})
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error("Network response was not ok");
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then((data) => {
|
||||
const seriesData = data.data.series;
|
||||
// document.getElementById(
|
||||
// "countStatus3"
|
||||
// ).innerText = `${data.data.count} Berkas`;
|
||||
// document.getElementById(
|
||||
// "totalStatus3"
|
||||
// ).innerText = `Rp.${addThousandSeparators(data.data.total)}`;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("error fetching chart dara : ", error);
|
||||
});
|
||||
initChartMenungguKlikDPMPTSP() {
|
||||
document
|
||||
.querySelectorAll(".document-count.chart-menunggu-klik-dpmptsp")
|
||||
.forEach((element) => {
|
||||
element.innerText = `${0}`;
|
||||
});
|
||||
document
|
||||
.querySelectorAll(".document-total.chart-menunggu-klik-dpmptsp")
|
||||
.forEach((element) => {
|
||||
element.innerText = `Rp.${addThousandSeparators("0.00")}`;
|
||||
});
|
||||
document
|
||||
.querySelectorAll(".small-percentage.chart-menunggu-klik-dpmptsp")
|
||||
.forEach((element) => {
|
||||
element.innerText = `0.00%`;
|
||||
});
|
||||
}
|
||||
initChartStatus4(){
|
||||
fetch(`${GlobalConfig.apiHost}/api/pbg-task-documents?status=4`, {
|
||||
credentials: "include",
|
||||
headers: {
|
||||
Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`,
|
||||
"Content-Type": "application/json",
|
||||
}
|
||||
})
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error("Network response was not ok");
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then((data) => {
|
||||
const seriesData = data.data.series;
|
||||
// document.getElementById(
|
||||
// "countStatus4"
|
||||
// ).innerText = `${data.data.count} Berkas`;
|
||||
// document.getElementById(
|
||||
// "totalStatus4"
|
||||
// ).innerText = `Rp.${addThousandSeparators(data.data.total)}`;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("error fetching chart dara : ", error);
|
||||
});
|
||||
initChartProsesDinasTeknis() {
|
||||
document
|
||||
.querySelectorAll(".document-count.chart-proses-dinas-teknis")
|
||||
.forEach((element) => {
|
||||
element.innerText = `${0}`;
|
||||
});
|
||||
document
|
||||
.querySelectorAll(".document-total.chart-proses-dinas-teknis")
|
||||
.forEach((element) => {
|
||||
element.innerText = `Rp.${addThousandSeparators("0.00")}`;
|
||||
});
|
||||
document
|
||||
.querySelectorAll(".small-percentage.chart-proses-dinas-teknis")
|
||||
.forEach((element) => {
|
||||
element.innerText = `0.00%`;
|
||||
});
|
||||
}
|
||||
initChartStatus5(){
|
||||
fetch(`${GlobalConfig.apiHost}/api/pbg-task-documents?status=5`, {
|
||||
credentials: "include",
|
||||
headers: {
|
||||
Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`,
|
||||
"Content-Type": "application/json",
|
||||
}
|
||||
})
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error("Network response was not ok");
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then((data) => {
|
||||
const seriesData = data.data.series;
|
||||
// document.getElementById(
|
||||
// "countStatus5"
|
||||
// ).innerText = `${data.data.count} Berkas`;
|
||||
// document.getElementById(
|
||||
// "totalStatus5"
|
||||
// ).innerText = `Rp.${addThousandSeparators(data.data.total)}`;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("error fetching chart dara : ", error);
|
||||
});
|
||||
}
|
||||
initChartStatus6(){
|
||||
fetch(`${GlobalConfig.apiHost}/api/pbg-task-documents?status=6`, {
|
||||
credentials: "include",
|
||||
headers: {
|
||||
Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`,
|
||||
"Content-Type": "application/json",
|
||||
}
|
||||
})
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error("Network response was not ok");
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then((data) => {
|
||||
const seriesData = data.data.series;
|
||||
// document.getElementById(
|
||||
// "countStatus6"
|
||||
// ).innerText = `${data.data.count} Berkas`;
|
||||
// document.getElementById(
|
||||
// "totalStatus6"
|
||||
// ).innerText = `Rp.${addThousandSeparators(data.data.total)}`;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("error fetching chart dara : ", error);
|
||||
});
|
||||
}
|
||||
initChartStatus7(){
|
||||
fetch(`${GlobalConfig.apiHost}/api/pbg-task-documents?status=7`, {
|
||||
credentials: "include",
|
||||
headers: {
|
||||
Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`,
|
||||
"Content-Type": "application/json",
|
||||
}
|
||||
})
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error("Network response was not ok");
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then((data) => {
|
||||
const seriesData = data.data.series;
|
||||
// document.getElementById(
|
||||
// "countStatus7"
|
||||
// ).innerText = `${data.data.count} Berkas`;
|
||||
// document.getElementById(
|
||||
// "totalStatus7"
|
||||
// ).innerText = `Rp.${addThousandSeparators(data.data.total)}`;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("error fetching chart dara : ", error);
|
||||
});
|
||||
}
|
||||
initChartStatus20(){
|
||||
fetch(`${GlobalConfig.apiHost}/api/pbg-task-documents?status=20`, {
|
||||
credentials: "include",
|
||||
headers: {
|
||||
Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`,
|
||||
"Content-Type": "application/json",
|
||||
}
|
||||
})
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error("Network response was not ok");
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then((data) => {
|
||||
const seriesData = data.data.series;
|
||||
// document.getElementById(
|
||||
// "countStatus20"
|
||||
// ).innerText = `${data.data.count} Berkas`;
|
||||
// document.getElementById(
|
||||
// "totalStatus20"
|
||||
// ).innerText = `Rp.${addThousandSeparators(data.data.total)}`;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("error fetching chart dara : ", error);
|
||||
});
|
||||
}
|
||||
initChartStatus24(){
|
||||
fetch(`${GlobalConfig.apiHost}/api/pbg-task-documents?status=24`, {
|
||||
credentials: "include",
|
||||
headers: {
|
||||
Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`,
|
||||
"Content-Type": "application/json",
|
||||
}
|
||||
})
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error("Network response was not ok");
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then((data) => {
|
||||
const seriesData = data.data.series;
|
||||
// document.getElementById(
|
||||
// "countStatus24"
|
||||
// ).innerText = `${data.data.count} Berkas`;
|
||||
// document.getElementById(
|
||||
// "totalStatus24"
|
||||
// ).innerText = `Rp.${addThousandSeparators(data.data.total)}`;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("error fetching chart dara : ", error);
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
class ArrowConnectorCircles {
|
||||
init(){
|
||||
// Memanggil fungsi saat halaman dimuat dan ketika layar diubah ukurannya
|
||||
document.addEventListener("resize", this.updateLine());
|
||||
document.addEventListener("load", this.updateLine());
|
||||
}
|
||||
|
||||
updateLine() {
|
||||
const circle1 = document.getElementById("chart-all-task-1").getBoundingClientRect();
|
||||
const circle2 = document.getElementById("chart-all-task-2").getBoundingClientRect();
|
||||
const line = document.getElementById("connector-line");
|
||||
|
||||
console.log(circle1);
|
||||
console.log(circle2);
|
||||
|
||||
line.setAttribute("x1", circle1.left + circle1.width / 2);
|
||||
line.setAttribute("y1", circle1.top + circle1.height / 2);
|
||||
line.setAttribute("x2", circle2.left + circle2.width / 2);
|
||||
line.setAttribute("y2", circle2.top + circle2.height / 2);
|
||||
initChartPotensiTataRuang() {
|
||||
document
|
||||
.querySelectorAll(".document-count.chart-potensi-tata-ruang")
|
||||
.forEach((element) => {
|
||||
element.innerText = `${0}`;
|
||||
});
|
||||
document
|
||||
.querySelectorAll(".document-total.chart-potensi-tata-ruang")
|
||||
.forEach((element) => {
|
||||
element.innerText = `Rp.${addThousandSeparators("0.00")}`;
|
||||
});
|
||||
document
|
||||
.querySelectorAll(".small-percentage.chart-potensi-tata-ruang")
|
||||
.forEach((element) => {
|
||||
element.innerText = `0.00%`;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", async function (e) {
|
||||
await new BigData().init();
|
||||
// new ArrowConnectorCircles().init();
|
||||
});
|
||||
|
||||
function resizeDashboard(){
|
||||
//Target Width
|
||||
let targetElement = document.getElementById("dashboard-fixed-wrapper");
|
||||
let targetWidth = targetElement.offsetWidth;
|
||||
//console.log("TARGET ",targetWidth);
|
||||
function resizeDashboard() {
|
||||
//Target Width
|
||||
let targetElement = document.getElementById("dashboard-fixed-wrapper");
|
||||
let targetWidth = targetElement.offsetWidth;
|
||||
//console.log("TARGET ",targetWidth);
|
||||
|
||||
//Real Object Width
|
||||
let dashboardElement = document.getElementById("dashboard-fixed-container");
|
||||
let dashboardWidth = 1110; //dashboardElement.offsetWidth;
|
||||
//console.log("CURRENT ",dashboardWidth);
|
||||
//Real Object Width
|
||||
let dashboardElement = document.getElementById("dashboard-fixed-container");
|
||||
let dashboardWidth = 1110; //dashboardElement.offsetWidth;
|
||||
//console.log("CURRENT ",dashboardWidth);
|
||||
|
||||
if(targetWidth> dashboardWidth){
|
||||
targetWidth = dashboardWidth;
|
||||
}
|
||||
|
||||
dashboardElement.style.transformOrigin = "left top";
|
||||
dashboardElement.style.transition = "transform 0.2s ease-in-out";
|
||||
dashboardElement.style.transform = "scale(" + (targetWidth/dashboardWidth).toFixed(2) + ")";
|
||||
//console.log("SCALE ", (targetWidth/dashboardWidth).toFixed(2));
|
||||
if (targetWidth > dashboardWidth) {
|
||||
targetWidth = dashboardWidth;
|
||||
}
|
||||
|
||||
dashboardElement.style.transformOrigin = "left top";
|
||||
dashboardElement.style.transition = "transform 0.2s ease-in-out";
|
||||
dashboardElement.style.transform =
|
||||
"scale(" + (targetWidth / dashboardWidth).toFixed(2) + ")";
|
||||
//console.log("SCALE ", (targetWidth/dashboardWidth).toFixed(2));
|
||||
}
|
||||
|
||||
window.addEventListener("load", function () {
|
||||
resizeDashboard();
|
||||
});
|
||||
|
||||
window.addEventListener("resize", function () {
|
||||
resizeDashboard();
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
107
resources/js/data-settings/index.js
Normal file
107
resources/js/data-settings/index.js
Normal file
@@ -0,0 +1,107 @@
|
||||
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";
|
||||
|
||||
class DataSettings {
|
||||
init() {
|
||||
this.getFetchApiData();
|
||||
}
|
||||
|
||||
getFetchApiData() {
|
||||
const table = new Grid({
|
||||
columns: [
|
||||
"ID",
|
||||
"Key",
|
||||
"Value",
|
||||
"Created",
|
||||
{
|
||||
name: "Actions",
|
||||
width: "120px",
|
||||
formatter: function (cell) {
|
||||
console.log("cell data", cell);
|
||||
return gridjs.html(`
|
||||
<div class="d-flex justify-items-end gap-10">
|
||||
<a href="/data-settings/${cell}/edit" class="btn btn-yellow me-2">Update</a>
|
||||
<button class="btn btn-red btn-delete btn-delete-data-settings" data-id="${cell}">Delete</button>
|
||||
</div>
|
||||
`);
|
||||
},
|
||||
},
|
||||
],
|
||||
search: {
|
||||
server: {
|
||||
url: (prev, keyword) => `${prev}?search=${keyword}`,
|
||||
},
|
||||
},
|
||||
pagination: {
|
||||
limit: 15,
|
||||
server: {
|
||||
url: (prev, page) =>
|
||||
`${prev}${prev.includes("?") ? "&" : "?"}page=${
|
||||
page + 1
|
||||
}`,
|
||||
},
|
||||
},
|
||||
sort: true,
|
||||
server: {
|
||||
url: `${GlobalConfig.apiHost}/api/api-data-settings`,
|
||||
headers: {
|
||||
Authorization: `Bearer ${document
|
||||
.querySelector('meta[name="api-token"]')
|
||||
.getAttribute("content")}`,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
then: (data) =>
|
||||
data.data.map((item) => [
|
||||
item.id,
|
||||
item.key,
|
||||
item.value,
|
||||
item.created_at,
|
||||
item.id,
|
||||
]),
|
||||
total: (data) => data.meta.total,
|
||||
},
|
||||
});
|
||||
table.render(document.getElementById("table-data-settings"));
|
||||
|
||||
document.addEventListener("click", this.handleDelete);
|
||||
}
|
||||
handleDelete(event) {
|
||||
if (event.target.classList.contains("btn-delete-data-settings")) {
|
||||
event.preventDefault();
|
||||
const id = event.target.getAttribute("data-id");
|
||||
|
||||
if (confirm("Are you sure you want to delete this item?")) {
|
||||
fetch(`/data-settings/${id}`, {
|
||||
method: "DELETE",
|
||||
headers: {
|
||||
"X-CSRF-TOKEN": document
|
||||
.querySelector('meta[name="csrf-token"]')
|
||||
.getAttribute("content"),
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
if (response.ok) {
|
||||
alert("Item deleted successfully!");
|
||||
window.location.reload();
|
||||
} else {
|
||||
return response.json().then((error) => {
|
||||
throw new Error(
|
||||
error.message || "Failed to delete item."
|
||||
);
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error deleting item:", error);
|
||||
alert("Something went wrong. Please try again.");
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
document.addEventListener("DOMContentLoaded", function (e) {
|
||||
new DataSettings().init();
|
||||
});
|
||||
@@ -1,12 +1,28 @@
|
||||
const GlobalConfig = {
|
||||
apiHost: 'http://localhost:8000'
|
||||
apiHost: "http://localhost:8000",
|
||||
};
|
||||
|
||||
export default GlobalConfig;
|
||||
|
||||
export function addThousandSeparators(number, fractionDigits = 2) {
|
||||
return new Intl.NumberFormat('en-US', {
|
||||
minimumFractionDigits: fractionDigits,
|
||||
maximumFractionDigits: fractionDigits,
|
||||
}).format(number);
|
||||
}
|
||||
export function addThousandSeparators(value, fractionDigits = 2) {
|
||||
if (!value) return null; // Handle empty or null values
|
||||
|
||||
// Remove any non-numeric characters except commas and dots
|
||||
value = value.replace(/[^0-9,.]/g, "");
|
||||
|
||||
// If the value contains multiple dots, assume dots are thousand separators
|
||||
if ((value.match(/\./g) || []).length > 1) {
|
||||
value = value.replace(/\./g, "");
|
||||
}
|
||||
|
||||
// Convert to a proper decimal number
|
||||
let number = parseFloat(value.replace(",", "."));
|
||||
|
||||
if (isNaN(number)) return null; // Return null if conversion fails
|
||||
|
||||
// Format the number with thousand separators
|
||||
return new Intl.NumberFormat("en-US", {
|
||||
minimumFractionDigits: fractionDigits,
|
||||
maximumFractionDigits: fractionDigits,
|
||||
}).format(number);
|
||||
}
|
||||
|
||||
132
resources/js/pbg-task/create.js
Normal file
132
resources/js/pbg-task/create.js
Normal file
@@ -0,0 +1,132 @@
|
||||
import GlobalConfig from "../global-config.js";
|
||||
|
||||
class MultiFormCreatePBG {
|
||||
constructor() {
|
||||
this.currentStep = 1;
|
||||
this.totalSteps = 4;
|
||||
this.formData = {}; // Menyimpan data dari semua langkah
|
||||
}
|
||||
|
||||
init() {
|
||||
document
|
||||
.getElementById("nextStep")
|
||||
.addEventListener("click", () => this.nextStep());
|
||||
|
||||
document
|
||||
.getElementById("prevStep")
|
||||
.addEventListener("click", () => this.prevStep());
|
||||
}
|
||||
|
||||
nextStep() {
|
||||
if (!this.validateStep()) return;
|
||||
|
||||
this.saveStepData();
|
||||
|
||||
if (this.currentStep < this.totalSteps) {
|
||||
document
|
||||
.getElementById(`step${this.currentStep}`)
|
||||
.classList.add("d-none");
|
||||
|
||||
this.currentStep++;
|
||||
document
|
||||
.getElementById(`step${this.currentStep}`)
|
||||
.classList.remove("d-none");
|
||||
|
||||
document.getElementById(
|
||||
"stepTitle"
|
||||
).innerText = `Step ${this.currentStep}`;
|
||||
document.getElementById("prevStep").disabled = false;
|
||||
document.getElementById("nextStep").innerText =
|
||||
this.currentStep === this.totalSteps ? "Submit" : "Next →";
|
||||
} else {
|
||||
this.submitForm(); // Submit ke API jika sudah step terakhir
|
||||
}
|
||||
}
|
||||
|
||||
prevStep() {
|
||||
if (this.currentStep > 1) {
|
||||
document
|
||||
.getElementById(`step${this.currentStep}`)
|
||||
.classList.add("d-none");
|
||||
|
||||
this.currentStep--;
|
||||
document
|
||||
.getElementById(`step${this.currentStep}`)
|
||||
.classList.remove("d-none");
|
||||
|
||||
document.getElementById(
|
||||
"stepTitle"
|
||||
).innerText = `Step ${this.currentStep}`;
|
||||
document.getElementById("prevStep").disabled =
|
||||
this.currentStep === 1;
|
||||
document.getElementById("nextStep").innerText = "Next →";
|
||||
}
|
||||
}
|
||||
|
||||
saveStepData() {
|
||||
const stepForm = document.querySelector(`#step${this.currentStep}Form`);
|
||||
const formDataObj = new FormData(stepForm);
|
||||
|
||||
if (!this.formData) {
|
||||
this.formData = {};
|
||||
}
|
||||
|
||||
const stepKey = `step${this.currentStep}Form`;
|
||||
this.formData[stepKey] = {};
|
||||
|
||||
for (const [key, value] of formDataObj.entries()) {
|
||||
this.formData[stepKey][key] = value;
|
||||
}
|
||||
|
||||
console.log("form data", this.formData);
|
||||
}
|
||||
|
||||
validateStep() {
|
||||
const stepForm = document.querySelector(`#step${this.currentStep}Form`);
|
||||
const inputs = stepForm.querySelectorAll(
|
||||
"input[required], select[required]"
|
||||
);
|
||||
let isValid = true;
|
||||
|
||||
inputs.forEach((input) => {
|
||||
if (!input.value) {
|
||||
input.classList.add("is-invalid");
|
||||
isValid = false;
|
||||
} else {
|
||||
input.classList.remove("is-invalid");
|
||||
}
|
||||
});
|
||||
|
||||
return isValid;
|
||||
}
|
||||
|
||||
async submitForm() {
|
||||
try {
|
||||
const response = await fetch(
|
||||
`${GlobalConfig.apiHost}/api/api-pbg-task`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
Authorization: `Bearer ${
|
||||
document.querySelector("meta[name='api-token']")
|
||||
.content
|
||||
}`,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(this.formData),
|
||||
}
|
||||
);
|
||||
|
||||
const result = await response.json();
|
||||
alert(result.message);
|
||||
window.location.href = "/pbg-task";
|
||||
} catch (error) {
|
||||
console.error("Error submitting form:", error);
|
||||
alert("Terjadi kesalahan saat mengirim data.");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
new MultiFormCreatePBG().init();
|
||||
});
|
||||
69
resources/js/pbg-task/index.js
Normal file
69
resources/js/pbg-task/index.js
Normal file
@@ -0,0 +1,69 @@
|
||||
import { Grid } from "gridjs/dist/gridjs.umd.js";
|
||||
import "gridjs/dist/gridjs.umd.js";
|
||||
import GlobalConfig from "../global-config";
|
||||
|
||||
class PbgTasks {
|
||||
init() {
|
||||
this.initTableRequestAssignment();
|
||||
}
|
||||
|
||||
initTableRequestAssignment() {
|
||||
new Grid({
|
||||
columns: [
|
||||
"ID",
|
||||
{ name: "Name", width: "15%" },
|
||||
{ name: "Condition", width: "7%" },
|
||||
"Registration Number",
|
||||
"Document Number",
|
||||
{ name: "Address", width: "30%" },
|
||||
"Status",
|
||||
"Function Type",
|
||||
"Consultation Type",
|
||||
{ name: "Due Date", width: "7%" },
|
||||
],
|
||||
search: {
|
||||
server: {
|
||||
url: (prev, keyword) => `${prev}?search=${keyword}`,
|
||||
},
|
||||
},
|
||||
pagination: {
|
||||
limit: 15,
|
||||
server: {
|
||||
url: (prev, page) =>
|
||||
`${prev}${prev.includes("?") ? "&" : "?"}page=${
|
||||
page + 1
|
||||
}`,
|
||||
},
|
||||
},
|
||||
sort: true,
|
||||
server: {
|
||||
url: `${GlobalConfig.apiHost}/api/request-assignments`,
|
||||
credentials: "include",
|
||||
headers: {
|
||||
Authorization: `Bearer ${document
|
||||
.querySelector('meta[name="api-token"]')
|
||||
.getAttribute("content")}`,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
then: (data) =>
|
||||
data.data.map((item) => [
|
||||
item.id,
|
||||
item.name,
|
||||
item.condition,
|
||||
item.registration_number,
|
||||
item.document_number,
|
||||
item.address,
|
||||
item.status_name,
|
||||
item.function_type,
|
||||
item.consultation_type,
|
||||
item.due_date,
|
||||
]),
|
||||
total: (data) => data.meta.total,
|
||||
},
|
||||
}).render(document.getElementById("table-pbg-tasks"));
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function (e) {
|
||||
new PbgTasks().init();
|
||||
});
|
||||
@@ -7,6 +7,7 @@ class SyncronizeTask {
|
||||
init() {
|
||||
this.initTableImportDatasources();
|
||||
this.handleSubmitSync();
|
||||
this.handleSubmitSnycGoogleSheet();
|
||||
}
|
||||
initTableImportDatasources() {
|
||||
new Grid({
|
||||
@@ -48,68 +49,112 @@ class SyncronizeTask {
|
||||
}
|
||||
handleSubmitSync() {
|
||||
const button = document.getElementById("btn-sync-submit");
|
||||
|
||||
|
||||
// Check if the button should be enabled or disabled based on the status
|
||||
fetch(`${GlobalConfig.apiHost}/api/import-datasource/check-datasource`, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
Authorization: `Bearer ${document
|
||||
.querySelector('meta[name="api-token"]')
|
||||
.getAttribute("content")}`,
|
||||
"Content-Type": "application/json",
|
||||
fetch(
|
||||
`${GlobalConfig.apiHost}/api/import-datasource/check-datasource`,
|
||||
{
|
||||
method: "GET",
|
||||
headers: {
|
||||
Authorization: `Bearer ${document
|
||||
.querySelector('meta[name="api-token"]')
|
||||
.getAttribute("content")}`,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
}
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error("Network response was not ok");
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
console.log("data check button sync", data.can_execute);
|
||||
button.disabled = !data.can_execute;
|
||||
|
||||
// If the button is enabled, add click event to trigger sync
|
||||
if (!button.disabled) {
|
||||
button.addEventListener("click", function(e) {
|
||||
button.disabled = true; // Disable button to prevent multiple clicks
|
||||
button.textContent = "Syncing..."; // Change button text to show syncing
|
||||
|
||||
// Trigger the scraping API call
|
||||
fetch(`${GlobalConfig.apiHost}/api/scraping`, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
Authorization: `Bearer ${document
|
||||
.querySelector('meta[name="api-token"]')
|
||||
.getAttribute("content")}`,
|
||||
"Content-Type": "application/json",
|
||||
}
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error("Network response was not ok");
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
console.log("data sync button", data);
|
||||
alert("Synchronization executed successfully");
|
||||
window.location.reload();
|
||||
})
|
||||
.catch(err => {
|
||||
console.error("Fetch error:", err);
|
||||
alert("An error occurred during synchronization");
|
||||
})
|
||||
.finally(() => {
|
||||
button.disabled = false; // Re-enable the button after the request is complete
|
||||
button.textContent = "Sync Data"; // Reset button text
|
||||
)
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error("Network response was not ok");
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then((data) => {
|
||||
console.log("data check button sync", data.can_execute);
|
||||
button.disabled = !data.can_execute;
|
||||
|
||||
// If the button is enabled, add click event to trigger sync
|
||||
if (!button.disabled) {
|
||||
button.addEventListener("click", function (e) {
|
||||
button.disabled = true; // Disable button to prevent multiple clicks
|
||||
button.textContent = "Syncing..."; // Change button text to show syncing
|
||||
|
||||
// Trigger the scraping API call
|
||||
fetch(`${GlobalConfig.apiHost}/api/scraping`, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
Authorization: `Bearer ${document
|
||||
.querySelector('meta[name="api-token"]')
|
||||
.getAttribute("content")}`,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error(
|
||||
"Network response was not ok"
|
||||
);
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then((data) => {
|
||||
console.log("data sync button", data);
|
||||
alert("Synchronization executed successfully");
|
||||
window.location.reload();
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error("Fetch error:", err);
|
||||
alert(
|
||||
"An error occurred during synchronization"
|
||||
);
|
||||
})
|
||||
.finally(() => {
|
||||
button.disabled = false; // Re-enable the button after the request is complete
|
||||
button.textContent = "Sync Data"; // Reset button text
|
||||
});
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error("Fetch error:", err);
|
||||
alert("An error occurred while checking the datasource");
|
||||
});
|
||||
}
|
||||
handleSubmitSnycGoogleSheet() {
|
||||
const button = document.getElementById("btn-sync-submit-google-sheet");
|
||||
button.addEventListener("click", function (e) {
|
||||
button.disabled = true; // Disable button to prevent multiple clicks
|
||||
button.textContent = "Syncing..."; // Change button text to show syncing
|
||||
|
||||
// Trigger the scraping API call
|
||||
fetch(`${GlobalConfig.apiHost}/api/sync-pbg-task-google-sheet`, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
Authorization: `Bearer ${document
|
||||
.querySelector('meta[name="api-token"]')
|
||||
.getAttribute("content")}`,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error("Network response was not ok");
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then((data) => {
|
||||
console.log("data sync button", data);
|
||||
alert("Synchronization executed successfully");
|
||||
window.location.reload();
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error("Fetch error:", err);
|
||||
alert("An error occurred during synchronization");
|
||||
})
|
||||
.finally(() => {
|
||||
button.disabled = false; // Re-enable the button after the request is complete
|
||||
button.textContent = "Sync Google Sheet"; // Reset button text
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.error("Fetch error:", err);
|
||||
alert("An error occurred while checking the datasource");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,110 +1,97 @@
|
||||
:root {
|
||||
--circle-color: #c97a04; /* Default warna lingkaran */
|
||||
--circle-color: #c97a04; /* Default warna lingkaran */
|
||||
}
|
||||
|
||||
.circle-container {
|
||||
width: 200px; /* Ukuran lingkaran */
|
||||
height: 200px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--circle-color);; /* Warna lingkaran utama */
|
||||
border-radius: 50%; /* Membuat lingkaran */
|
||||
border: 6px solid white; /* Border putih */
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Efek bayangan */
|
||||
position: absolute;
|
||||
|
||||
.circle-content {
|
||||
width: 180px; /* Ukuran lingkaran dalam */
|
||||
height: 180px;
|
||||
background-color: var(--circle-color); /* Warna lingkaran dalam */
|
||||
border-radius: 50%;
|
||||
width: 200px; /* Ukuran lingkaran */
|
||||
height: 200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
color: white; /* Warna teks */
|
||||
border: 4px solid white; /* Border lingkaran dalam */
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.circle-content .document-title {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
margin: 0 5px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.circle-content .document-total {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #000000; /* Warna biru gelap untuk total */
|
||||
background-color: white; /* Background putih untuk total */
|
||||
padding: 0 7px;
|
||||
border-radius: 10px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.circle-content .document-count {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.circle-content .document-type {
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.small-circle-container {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 50px; /* Ukuran lingkaran kecil */
|
||||
height: 50px;
|
||||
background-color: #2d4f90; /* Warna lingkaran kecil */
|
||||
background-color: var(--circle-color); /* Warna lingkaran utama */
|
||||
border-radius: 50%; /* Membuat lingkaran */
|
||||
// border: 4px solid white; /* Border putih */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 6px solid white; /* Border putih */
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Efek bayangan */
|
||||
position: absolute;
|
||||
|
||||
.small-circle-content{
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
background-color: #2d4f90; /* Warna lingkaran kecil */
|
||||
border-radius: 50%; /* Membuat lingkaran */
|
||||
border: 2px solid white; /* Border putih */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.small-percentage {
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
.circle-content {
|
||||
width: 180px; /* Ukuran lingkaran dalam */
|
||||
height: 180px;
|
||||
background-color: var(--circle-color); /* Warna lingkaran dalam */
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
color: white; /* Warna teks */
|
||||
margin: 0;
|
||||
}
|
||||
border: 4px solid white; /* Border lingkaran dalam */
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
}
|
||||
.circle-content .document-title {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
margin: 0 5px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.circle-content .document-total {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #000000; /* Warna biru gelap untuk total */
|
||||
background-color: white; /* Background putih untuk total */
|
||||
padding: 0 7px;
|
||||
border-radius: 10px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.circle-content .document-count {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.circle-content .document-type {
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.small-circle-container {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 50px; /* Ukuran lingkaran kecil */
|
||||
height: 50px;
|
||||
background-color: #2d4f90; /* Warna lingkaran kecil */
|
||||
border-radius: 50%; /* Membuat lingkaran */
|
||||
// border: 4px solid white; /* Border putih */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Efek bayangan */
|
||||
|
||||
.small-circle-content {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
background-color: #2d4f90; /* Warna lingkaran kecil */
|
||||
border-radius: 50%; /* Membuat lingkaran */
|
||||
border: 2px solid white; /* Border putih */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.small-percentage {
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
color: white; /* Warna teks */
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.arrow-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none; /* Agar SVG tidak menghalangi interaksi */
|
||||
}
|
||||
|
||||
|
||||
// .circle-container {
|
||||
// width: 20vw; /* Responsif menggunakan unit viewport */
|
||||
// height: 20vw; /* Pastikan tinggi sama dengan lebar */
|
||||
|
||||
@@ -59,8 +59,8 @@
|
||||
@component('components.circle', [
|
||||
'document_title' => 'Kekurangan Potensi',
|
||||
'document_color' => '#911701',
|
||||
'document_type' => 'Pemohon',
|
||||
'document_id' => 'chart-all-task',
|
||||
'document_type' => '',
|
||||
'document_id' => 'chart-kekurangan-potensi',
|
||||
'visible_small_circle' => true,
|
||||
'style' => 'top:150px;'
|
||||
])
|
||||
@@ -69,8 +69,8 @@
|
||||
@component('components.circle', [
|
||||
'document_title' => 'Target PAD 2024',
|
||||
'document_color' => '#020e42',
|
||||
'document_type' => 'Pemohon',
|
||||
'document_id' => 'chart-all-task',
|
||||
'document_type' => '',
|
||||
'document_id' => 'chart-target-pad',
|
||||
'visible_small_circle' => true,
|
||||
'style' => 'left:200px;'
|
||||
])
|
||||
@@ -88,7 +88,7 @@
|
||||
'document_title' => 'Total Potensi Berkas',
|
||||
'document_color' => '#02acfa',
|
||||
'document_type' => 'Pemohon',
|
||||
'document_id' => 'chart-all-task',
|
||||
'document_id' => 'chart-total-potensi',
|
||||
'visible_small_circle' => true,
|
||||
'style' => 'left:400px;top:150px;'
|
||||
])
|
||||
@@ -103,8 +103,8 @@
|
||||
@component('components.circle', [
|
||||
'document_title' => 'Perkiraan Potensi PBG Dari Tata Ruang',
|
||||
'document_color' => '#bf04bc',
|
||||
'document_type' => 'Pemohon',
|
||||
'document_id' => 'chart-all-task',
|
||||
'document_type' => 'Berkas',
|
||||
'document_id' => 'chart-potensi-tata-ruang',
|
||||
'visible_small_circle' => true,
|
||||
'style' => 'left:600px;'
|
||||
])
|
||||
@@ -137,7 +137,7 @@
|
||||
'document_title' => 'Berkas Terverifikasi',
|
||||
'document_color' => '#0561f5',
|
||||
'document_type' => 'Berkas',
|
||||
'document_id' => 'chart-business',
|
||||
'document_id' => 'chart-berkas-terverifikasi',
|
||||
'visible_small_circle' => true,
|
||||
'style' => 'top:300px;left:200px;'
|
||||
])
|
||||
@@ -153,7 +153,7 @@
|
||||
'document_title' => 'Berkas Belum Terverifikasi',
|
||||
'document_color' => '#b973ff',
|
||||
'document_type' => 'Berkas',
|
||||
'document_id' => 'chart-business',
|
||||
'document_id' => 'chart-berkas-belum-terverifikasi',
|
||||
'visible_small_circle' => true,
|
||||
'style' => 'top:300px;left:600px;'
|
||||
])
|
||||
@@ -170,7 +170,7 @@
|
||||
'document_title' => 'Realisasi Terbit PBG',
|
||||
'document_color' => '#09ab5a',
|
||||
'document_type' => 'Berkas',
|
||||
'document_id' => 'chart-business',
|
||||
'document_id' => 'chart-realisasi-tebit-pbg',
|
||||
'visible_small_circle' => true,
|
||||
'style' => 'top:550px;left:100px;'
|
||||
])
|
||||
@@ -183,7 +183,7 @@
|
||||
'document_title' => 'Menunggu Klik DPMPTSP',
|
||||
'document_color' => '#0294ad',
|
||||
'document_type' => 'Berkas',
|
||||
'document_id' => 'chart-business',
|
||||
'document_id' => 'chart-menunggu-klik-dpmptsp',
|
||||
'visible_small_circle' => true,
|
||||
'style' => 'top:550px;left:400px'
|
||||
])
|
||||
@@ -196,57 +196,12 @@
|
||||
'document_title' => 'Berproses Di Dinas Teknis',
|
||||
'document_color' => '#422519',
|
||||
'document_type' => 'Berkas',
|
||||
'document_id' => 'chart-business',
|
||||
'document_id' => 'chart-proses-dinas-teknis',
|
||||
'visible_small_circle' => true,
|
||||
'style' => 'top:550px;left:700px'
|
||||
])
|
||||
@endcomponent
|
||||
</div>
|
||||
<div class="row d-flex justify-content-center">
|
||||
|
||||
|
||||
<!-- <div id="circle1" class="absolute w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center text-white text-lg font-bold top-40 left-40">
|
||||
1
|
||||
</div>
|
||||
|
||||
<div id="circle2" class="absolute w-16 h-16 bg-red-500 rounded-full flex items-center justify-center text-white text-lg font-bold top-80 left-80">
|
||||
2
|
||||
</div>
|
||||
|
||||
<svg id="svg-container" class="absolute inset-0 w-full h-full pointer-events-none">
|
||||
<defs>
|
||||
<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
|
||||
<polygon points="0 0, 10 3.5, 0 7" fill="red"></polygon>
|
||||
</marker>
|
||||
</defs>
|
||||
<line id="connector-line" stroke="red" stroke-width="2" marker-end="url(#arrowhead)" />
|
||||
</svg> -->
|
||||
</div>
|
||||
<div class="row d-flex justify-content-center">
|
||||
|
||||
</div>
|
||||
<div class="row d-flex justify-content-center">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="row d-flex justify-content-center">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="row d-flex justify-content-center">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="row d-flex justify-content-center">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@endsection
|
||||
|
||||
50
resources/views/data-settings/create.blade.php
Normal file
50
resources/views/data-settings/create.blade.php
Normal file
@@ -0,0 +1,50 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Create'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Data Settings', 'subtitle' => 'Setting Dashboard'])
|
||||
|
||||
<div class="row d-flex justify-content-center">
|
||||
@if (session('error'))
|
||||
<div class="alert alert-danger">
|
||||
{{ session('error') }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if ($errors->any())
|
||||
<div class="alert alert-danger">
|
||||
<ul>
|
||||
@foreach ($errors->all() as $error)
|
||||
<li>{{ $error }}</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
@endif
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<form action="{{ route('data-settings.store') }}" method="POST">
|
||||
@csrf
|
||||
<div class="mb-3">
|
||||
<label for="key" class="form-label">Key</label>
|
||||
<input type="text" id="key" class="form-control" name="key">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="value" class="form-label">Value</label>
|
||||
<input type="text" id="value" class="form-control" name="value">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="type" class="form-label">Type</label>
|
||||
<input type="text" id="type" class="form-control" name="type">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-success width-lg">Create</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
@endsection
|
||||
51
resources/views/data-settings/edit.blade.php
Normal file
51
resources/views/data-settings/edit.blade.php
Normal file
@@ -0,0 +1,51 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Create'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Data Settings', 'subtitle' => 'Setting Dashboard'])
|
||||
|
||||
<div class="row d-flex justify-content-center">
|
||||
@if (session('error'))
|
||||
<div class="alert alert-danger">
|
||||
{{ session('error') }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if ($errors->any())
|
||||
<div class="alert alert-danger">
|
||||
<ul>
|
||||
@foreach ($errors->all() as $error)
|
||||
<li>{{ $error }}</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
@endif
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<form action="{{ route('data-settings.update', $data->id) }}" method="POST">
|
||||
@csrf
|
||||
@method('PUT')
|
||||
<div class="mb-3">
|
||||
<label for="key" class="form-label">Key</label>
|
||||
<input type="text" id="key" class="form-control" name="key" value="{{$data->key}}">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="value" class="form-label">Value</label>
|
||||
<input type="text" id="value" class="form-control" name="value" value="{{$data->value}}">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="type" class="form-label">Type</label>
|
||||
<input type="text" id="type" class="form-control" name="type" value="{{$data->type}}">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-success width-lg">Update</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
@endsection
|
||||
24
resources/views/data-settings/index.blade.php
Normal file
24
resources/views/data-settings/index.blade.php
Normal file
@@ -0,0 +1,24 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Data Settings'])
|
||||
|
||||
@section('css')
|
||||
@vite(['node_modules/gridjs/dist/theme/mermaid.min.css'])
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Data Settings', 'subtitle' => 'Setting Dashboard'])
|
||||
|
||||
<div class="row">
|
||||
<div class="d-flex justify-content-end pb-3">
|
||||
<a href="{{ route('data-settings.create')}}" class="btn btn-success width-lg">Create</a>
|
||||
</div>
|
||||
<div>
|
||||
<div id="table-data-settings"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
@vite(['resources/js/data-settings/index.js'])
|
||||
@endsection
|
||||
@@ -30,6 +30,7 @@
|
||||
<ul class="nav sub-navbar-nav">
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="{{ route ('home' ) }}">Dashboard Pimpinan</a>
|
||||
|
||||
</li>
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="{{ route ('dashboards.pbg' ) }}">Dashboard PBG</a>
|
||||
@@ -65,7 +66,7 @@
|
||||
</a>
|
||||
<div class="collapse" id="sidebarSettings">
|
||||
<ul class="nav sub-navbar-nav">
|
||||
<li class="sub-nav-item">
|
||||
<li class="sub-nav-item d-none">
|
||||
<a class="sub-nav-link" href="{{ route ('general.index' ) }}">General</a>
|
||||
</li>
|
||||
<li class="sub-nav-item">
|
||||
@@ -75,6 +76,23 @@
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link menu-arrow" href="#dataSettings" data-bs-toggle="collapse" role="button"
|
||||
aria-expanded="false" aria-controls="dataSettings">
|
||||
<span class="nav-icon">
|
||||
<iconify-icon icon="mingcute:settings-1-line"></iconify-icon>
|
||||
</span>
|
||||
<span class="nav-text">Data Settings</span>
|
||||
</a>
|
||||
<div class="collapse" id="dataSettings">
|
||||
<ul class="nav sub-navbar-nav">
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="{{ route ('data-settings.index' ) }}">Setting Dashboard</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link menu-arrow" href="#data" data-bs-toggle="collapse" role="button"
|
||||
aria-expanded="false" aria-controls="data">
|
||||
@@ -86,7 +104,7 @@
|
||||
<div class="collapse" id="data">
|
||||
<ul class="nav sub-navbar-nav">
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="{{ route ('request-assignments.index' ) }}">PBG</a>
|
||||
<a class="sub-nav-link" href="{{ route ('pbg-task.index' ) }}">PBG</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -96,7 +114,7 @@
|
||||
</div>
|
||||
|
||||
|
||||
<!-- <div class="animated-stars">
|
||||
<div class="animated-stars">
|
||||
<div class="shooting-star"></div>
|
||||
<div class="shooting-star"></div>
|
||||
<div class="shooting-star"></div>
|
||||
@@ -117,4 +135,4 @@
|
||||
<div class="shooting-star"></div>
|
||||
<div class="shooting-star"></div>
|
||||
<div class="shooting-star"></div>
|
||||
</div> -->
|
||||
</div>
|
||||
80
resources/views/pbg_task/_form_pbg_task.blade.php
Normal file
80
resources/views/pbg_task/_form_pbg_task.blade.php
Normal file
@@ -0,0 +1,80 @@
|
||||
<div class="card">
|
||||
<form id="step1Form">
|
||||
@csrf
|
||||
<div class="card-body">
|
||||
<h5 class="card-title mb-2">PBG Task</h5>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="uuid">UUID</label>
|
||||
<input type="string" id="uuid" name="uuid" class="form-control" placeholder="Enter UUID">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="name">Name</label>
|
||||
<input type="string" id="name" name="name" class="form-control" placeholder="Enter name">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="owner_name">Owner Name</label>
|
||||
<input type="string" id="owner_name" name="owner_name" class="form-control" placeholder="Enter ornwe name">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="application_type">Application Type</label>
|
||||
<input type="number" id="application_type" name="application_type" class="form-control" placeholder="Enter application type">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="application_type_name">Application Type Name</label>
|
||||
<input type="string" id="application_type_name" name="application_type_name" class="form-control" placeholder="Enter application type name">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="condition">Condition</label>
|
||||
<input type="string" id="condition" name="condition" class="form-control" placeholder="Enter condition">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="registration_number">Registration Number</label>
|
||||
<input type="string" id="registration_number" name="registration_number" class="form-control" placeholder="Enter registration number">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="document_number">Document Number</label>
|
||||
<input type="string" id="document_number" name="document_number" class="form-control" placeholder="Enter document number">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="address">Address</label>
|
||||
<input type="string" id="address" name="address" class="form-control" placeholder="Enter address">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="status">Status</label>
|
||||
<input type="number" id="status" name="status" class="form-control" placeholder="Enter status">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="status_name">Status Name</label>
|
||||
<input type="string" id="status_name" name="status_name" class="form-control" placeholder="Enter status name">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="slf_status">SLF Status</label>
|
||||
<input type="string" id="slf_status" name="slf_status" class="form-control" placeholder="Enter slf status">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="slf_status_name">SLF Status Name</label>
|
||||
<input type="string" id="slf_status_name" name="slf_status_name" class="form-control" placeholder="Enter slf status name">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="function_type">Function Type</label>
|
||||
<input type="string" id="function_type" name="function_type" class="form-control" placeholder="Enter function type">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="consultation_type">Consultation Type</label>
|
||||
<input type="string" id="consultation_type" name="consultation_type" class="form-control" placeholder="Enter cosultation type">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="due_date">Due Date</label>
|
||||
<input type="string" id="due_date" name="due_date" class="form-control" placeholder="Enter due date">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="land_certificate_phase">Land Certificate Phase</label>
|
||||
<input type="boolean" id="land_certificate_phase" name="land_certificate_phase" class="form-control" placeholder="Enter land certificate phase">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="task_created_at">Task Created At</label>
|
||||
<input type="string" id="task_created_at" name="task_created_at" class="form-control" placeholder="Enter task created at">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@@ -0,0 +1,40 @@
|
||||
<div class="card">
|
||||
<form id="step3Form">
|
||||
@csrf
|
||||
<div class="card-body">
|
||||
<h5 class="card-title mb-2">PBG Task Indeks Integration</h5>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="pbg_task_uid">PBG Task UID</label>
|
||||
<input type="string" id="pbg_task_uid" name="pbg_task_uid" class="form-control" placeholder="Enter pbg task uid">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="indeks_fungsi_bangunan">Indeks Fungsi Bangunan</label>
|
||||
<input type="string" id="indeks_fungsi_bangunan" name="indeks_fungsi_bangunan" class="form-control" placeholder="Enter indeks fungsi bangunan">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="indeks_parameter_kompleksitas">Indeks parameter kompleksitas</label>
|
||||
<input type="string" id="indeks_parameter_kompleksitas" name="indeks_parameter_kompleksitas" class="form-control" placeholder="Enter detail updated at">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="indeks_parameter_permanensi">Indeks Parameter Permanensi</label>
|
||||
<input type="string" id="indeks_parameter_permanensi" name="indeks_parameter_permanensi" class="form-control" placeholder="Enter indeks parameter permanensi">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="indeks_parameter_ketinggian">Indeks Parameter Ketinggian</label>
|
||||
<input type="string" id="indeks_parameter_ketinggian" name="indeks_parameter_ketinggian" class="form-control" placeholder="Enter indeks parameter ketinggian">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="faktor_kepemilikan">Faktor Kepemilikan</label>
|
||||
<input type="string" id="faktor_kepemilikan" name="faktor_kepemilikan" class="form-control" placeholder="Enter faktor kepemilikan">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="indeks_terintegrasi">Indeks Terintegrasi</label>
|
||||
<input type="number" id="indeks_terintegrasi" name="indeks_terintegrasi" class="form-control" placeholder="Enter indeks terintegrasi">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="total">Total</label>
|
||||
<input type="string" id="total" name="total" class="form-control" placeholder="Enter total">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
40
resources/views/pbg_task/_form_pbg_task_prasarana.blade.php
Normal file
40
resources/views/pbg_task/_form_pbg_task_prasarana.blade.php
Normal file
@@ -0,0 +1,40 @@
|
||||
<div class="card">
|
||||
<form id="step4Form">
|
||||
@csrf
|
||||
<div class="card-body">
|
||||
<h5 class="card-title mb-2">PBG Task Prasarana</h5>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="pbg_task_uid">PBG Task UID</label>
|
||||
<input type="string" id="pbg_task_uid" name="pbg_task_uid" class="form-control" placeholder="Enter pbg task uid">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="prasarana_id">Prasarana ID</label>
|
||||
<input type="string" id="prasarana_id" name="prasarana_id" class="form-control" placeholder="Enter prasarana id">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="prasarana_type">Prasarana Type</label>
|
||||
<input type="string" id="prasarana_type" name="prasarana_type" class="form-control" placeholder="Enter prasarana type">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="building_type">Building Type</label>
|
||||
<input type="string" id="building_type" name="building_type" class="form-control" placeholder="Enter building type">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="total">Total</label>
|
||||
<input type="string" id="total" name="total" class="form-control" placeholder="Enter total">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="quantity">Quantity</label>
|
||||
<input type="string" id="quantity" name="quantity" class="form-control" placeholder="Enter quantity">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="unit">Unit</label>
|
||||
<input type="number" id="unit" name="unit" class="form-control" placeholder="Enter unit">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="index_prasarana">Index Prasarana</label>
|
||||
<input type="string" id="index_prasarana" name="index_prasarana" class="form-control" placeholder="Enter indeks prasarana">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@@ -0,0 +1,80 @@
|
||||
<div class="card">
|
||||
<form id="step2Form">
|
||||
@csrf
|
||||
<div class="card-body">
|
||||
<h5 class="card-title mb-2">PBG Task Retribution</h5>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="detail_id">Detail ID</label>
|
||||
<input type="string" id="detail_id" name="detail_id" class="form-control" placeholder="Enter detail id">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="detail_created_at">Detail Created At</label>
|
||||
<input type="string" id="detail_created_at" name="detail_created_at" class="form-control" placeholder="Enter detail created at">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="detail_updated_at">Detail Updated At</label>
|
||||
<input type="string" id="detail_updated_at" name="detail_updated_at" class="form-control" placeholder="Enter detail updated at">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="detail_uid">Detail UID</label>
|
||||
<input type="string" id="detail_uid" name="detail_uid" class="form-control" placeholder="Enter detail uid">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="luas_bangunan">Luas Bangunan</label>
|
||||
<input type="string" id="luas_bangunan" name="luas_bangunan" class="form-control" placeholder="Enter luas bangunan">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="indeks_lokalitas">Indeks Lokalitas</label>
|
||||
<input type="string" id="indeks_lokalitas" name="indeks_lokalitas" class="form-control" placeholder="Enter indeks lokalitas">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="wilayah_shst">Wilayah SHST</label>
|
||||
<input type="number" id="wilayah_shst" name="wilayah_shst" class="form-control" placeholder="Enter wilayah SHST">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="kegiatan_id">Kegiatan ID</label>
|
||||
<input type="string" id="kegiatan_id" name="kegiatan_id" class="form-control" placeholder="Enter kegiatan id">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="kegiatan_name">Kegiatan Name</label>
|
||||
<input type="string" id="kegiatan_name" name="kegiatan_name" class="form-control" placeholder="Enter kegiatan name">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="nilai_shst">Nilai SHST</label>
|
||||
<input type="string" id="nilai_shst" name="nilai_shst" class="form-control" placeholder="Enter nilai shst">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="nilai_retribusi_bangunan">Indeks Retribusi Terbangun</label>
|
||||
<input type="string" id="nilai_retribusi_bangunan" name="nilai_retribusi_bangunan" class="form-control" placeholder="Enter indeks retribusi terbangun">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="nilai_prasarana">Nilai Prasarana</label>
|
||||
<input type="string" id="nilai_prasarana" name="nilai_prasarana" class="form-control" placeholder="Enter nilai_prasarana">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="created_by">Created By</label>
|
||||
<input type="string" id="created_by" name="created_by" class="form-control" placeholder="Enter created_by">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="pbg_document">PBG Document</label>
|
||||
<input type="string" id="pbg_document" name="pbg_document" class="form-control" placeholder="Enter pbg document">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="underpayment">Underpayment</label>
|
||||
<input type="string" id="underpayment" name="underpayment" class="form-control" placeholder="Enter underpayment">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="function_type">Function Type</label>
|
||||
<input type="string" id="function_type" name="function_type" class="form-control" placeholder="Enter function type">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="skrd_amount">SKRD Amount</label>
|
||||
<input type="string" id="skrd_amount" name="skrd_amount" class="form-control" placeholder="Enter skrd amount">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="pbg_task_uid">PBG Task UID</label>
|
||||
<input type="string" id="pbg_task_uid" name="pbg_task_uid" class="form-control" placeholder="Enter due date">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
44
resources/views/pbg_task/create.blade.php
Normal file
44
resources/views/pbg_task/create.blade.php
Normal file
@@ -0,0 +1,44 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'PBG'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Create', 'subtitle' => 'PBG'])
|
||||
|
||||
<div class="row">
|
||||
<!-- Navigasi Step -->
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<button class="btn btn-outline-secondary" id="prevStep" disabled>
|
||||
← Back
|
||||
</button>
|
||||
<h4 id="stepTitle">Step 1</h4>
|
||||
<button class="btn btn-primary" id="nextStep">
|
||||
Next →
|
||||
</button>
|
||||
</div>
|
||||
<div class="row d-flex justify-content-center">
|
||||
<div class="col-md-8 col-lg-8 col-sm-8" id="step1">
|
||||
@include("pbg_task._form_pbg_task")
|
||||
</div>
|
||||
</div>
|
||||
<div class="row d-flex justify-content-center">
|
||||
<div id="step2" class="step-content d-none col-md-8 col-lg-8 col-sm-8">
|
||||
@include("pbg_task._form_pbg_task_retribution")
|
||||
</div>
|
||||
</div>
|
||||
<div class="row d-flex justify-content-center">
|
||||
<div id="step3" class="step-content d-none col-md-8 col-lg-8 col-sm-8">
|
||||
@include("pbg_task._form_pbg_task_index_integration")
|
||||
</div>
|
||||
</div>
|
||||
<div class="row d-flex justify-content-center">
|
||||
<div id="step4" class="step-content d-none col-md-8 col-lg-8 col-sm-8">
|
||||
@include("pbg_task._form_pbg_task_prasarana")
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
@vite(['resources/js/pbg-task/create.js'])
|
||||
@endsection
|
||||
3
resources/views/pbg_task/edit.blade.php
Normal file
3
resources/views/pbg_task/edit.blade.php
Normal file
@@ -0,0 +1,3 @@
|
||||
<div>
|
||||
<!-- Because you are alive, everything is possible. - Thich Nhat Hanh -->
|
||||
</div>
|
||||
24
resources/views/pbg_task/index.blade.php
Normal file
24
resources/views/pbg_task/index.blade.php
Normal file
@@ -0,0 +1,24 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Data'])
|
||||
|
||||
@section('css')
|
||||
@vite(['node_modules/gridjs/dist/theme/mermaid.min.css'])
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Data', 'subtitle' => 'PBG'])
|
||||
|
||||
<div class="row">
|
||||
<div class="d-flex justify-content-end pb-3">
|
||||
<a href="{{ route('pbg-task.create')}}" class="btn btn-success width-lg">Create</a>
|
||||
</div>
|
||||
<div>
|
||||
<div id="table-pbg-tasks"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
@vite(['resources/js/pbg-task/index.js'])
|
||||
@endsection
|
||||
@@ -9,6 +9,9 @@
|
||||
@include('layouts.partials/page-title', ['title' => 'Data', 'subtitle' => 'PBG'])
|
||||
|
||||
<div class="row">
|
||||
<div class="d-flex justify-content-end pb-3">
|
||||
<a href="{{ route('data-settings.create')}}" class="btn btn-success width-lg">Create</a>
|
||||
</div>
|
||||
<div>
|
||||
<div id="table-request-assignment"></div>
|
||||
</div>
|
||||
|
||||
@@ -10,11 +10,8 @@
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12 col-xl-12 d-flex justify-content-end">
|
||||
<!-- <form action="{{route('settings.sync')}}" method="post" id="sync-form">
|
||||
@csrf
|
||||
<button type="button" class="btn btn-success width-lg" id="btn-sync-submit">Sync SIMBG</button>
|
||||
</form> -->
|
||||
<button type="button" class="btn btn-success width-lg" id="btn-sync-submit">Sync SIMBG</button>
|
||||
<button type="button" class="btn btn-success" style="margin-right: 20px;" id="btn-sync-submit-google-sheet">Sync Google Sheet</button>
|
||||
<button type="button" class="btn btn-success" id="btn-sync-submit">Sync SIMBG</button>
|
||||
</div>
|
||||
<div>
|
||||
<div id="table-import-datasources"></div>
|
||||
|
||||
Reference in New Issue
Block a user