189 lines
6.5 KiB
HTML
189 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>OPT IN ANALYST</title>
|
|
<!-- Tabulator CSS -->
|
|
<link href="https://unpkg.com/tabulator-tables@5.4.4/dist/css/tabulator.min.css" rel="stylesheet">
|
|
<style>
|
|
.button {
|
|
border: none;
|
|
color: white;
|
|
padding: 4px 4px;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
font-size: 12px;
|
|
margin: 4px 2px;
|
|
cursor: pointer;
|
|
}
|
|
.button1 {background-color: #04AA6D;}
|
|
.button2 {background-color: #008CBA;}
|
|
.button3 {background-color: #9bba00;}
|
|
.loader {
|
|
position: fixed;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
border: 16px solid #f3f3f3;
|
|
border-radius: 50%;
|
|
border-top: 16px solid #3498db;
|
|
width: 120px;
|
|
height: 120px;
|
|
animation: spin 2s linear infinite;
|
|
display: none;
|
|
}
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
/* .tabulator .tabulator-header .tabulator-col {background-color: #2b9af3;} */
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- {% extends "templates/web.html" %} -->
|
|
|
|
{% block title %}Pricing{% endblock %}
|
|
{% block content %}
|
|
<div id="loader" class="loader"></div>
|
|
<p style="padding-left: 5px;"><strong>Opt In Data </strong> </p>
|
|
|
|
<div style="padding-left: 5px;">
|
|
<button id="download-csv" class="button button1">Download CSV</button>
|
|
<button id="download-xlsx" class="button button2">Download XLSX</button>
|
|
<button id="download-pdf" class="button button3">Download PDF</button>
|
|
</div>
|
|
<div style="padding-left: 5px; padding-bottom: 5px;" id="tabulator-table" class="tabulator-table"></div>
|
|
|
|
{% endblock %}
|
|
|
|
|
|
{% block script %}
|
|
<script src="https://unpkg.com/tabulator-tables@5.4.4/dist/js/tabulator.min.js"></script>
|
|
<script frappe.csrf_token = "{{frappe.session.csrf_token}}"; ></script>
|
|
<script type="text/javascript" src="https://oss.sheetjs.com/sheetjs/xlsx.full.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.20/jspdf.plugin.autotable.min.js"></script>
|
|
<script>
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const loader = document.getElementById('loader');
|
|
const content = document.getElementById('tabulator-table');
|
|
var data = [];
|
|
var table;
|
|
frappe.call({
|
|
method: 'optmanagementprod.www.optanalystview.fetch_data',
|
|
callback: function(r) {
|
|
if (r.message) {
|
|
data = r.message;
|
|
// Render data in the HTML
|
|
console.log(data);
|
|
// You can use the data to populate your table or any other HTML element
|
|
|
|
function loadData() {
|
|
return new Promise((resolve) => {
|
|
setTimeout(() => {
|
|
resolve("Data loaded");
|
|
}, 3000); // Simulate a 3-second loading time
|
|
});
|
|
}
|
|
// Sample data for the table
|
|
var tableData = [];
|
|
for(var rec in data)
|
|
{
|
|
tableData.push({
|
|
kol_id:rec.kol_id, kol_name:rec["kol_name"],project_name: rec["project_name"], client_name:rec["client_name"], client_poc:rec["client_poc"], cs_Assigned_poc:rec["cs_Assigned_poc"],optin_received_date:rec["optin_received_date"],optin_approved_date:rec["optin_approved_date"],status:rec["status"],optin_type:rec["optin_type"],data_processed_date:rec["data_processed_date"]
|
|
});
|
|
}
|
|
console.log(tableData);
|
|
// var tableData = [(
|
|
// {kol_id:1, kol_name:"Oli Bob",project_name: "", client_name:"12", client_poc:"red", cs_Assigned_poc:""} )
|
|
|
|
// ];
|
|
|
|
// Create Tabulator table
|
|
|
|
table = new Tabulator("#tabulator-table", {
|
|
data:data, // Assign data to table
|
|
layout:"fitDataTable",
|
|
// filterMode: "remote",
|
|
pagination:true,
|
|
paginationSize: 20,
|
|
placeholder:"Awaiting Data, Please wait",
|
|
// layout:"fitDataStretch",
|
|
ajaxLoaderLoading:"<span>Loading Data</span>",
|
|
// paginationMode:"remote",
|
|
paginationSizeSelector: [5, 10, 50, 100],
|
|
paginationCounter: "rows",
|
|
columns:[ // Define table columns
|
|
{title:"KOL ID", field:"kol_id",headerFilterPlaceholder: "Search",hozAlign:"center", headerFilter: true,width:2},
|
|
{title:"KOL Name", field:"kol_name",headerFilterPlaceholder: "Search", headerFilter: true,},
|
|
{title:"Project Name", field:"project_name",headerFilterPlaceholder: "Search", headerFilter: true,width:250},
|
|
{title:"Client Name", field:"client_name",headerFilterPlaceholder: "Search", headerFilter: true,},
|
|
{title:"Client POC", field:"client_poc",headerFilterPlaceholder: "Search", headerFilter: true,},
|
|
{title:"CS Assigned POC", field:"cs_assigned_poc",headerFilterPlaceholder: "Search", headerFilter: true,},
|
|
{title:"Requested Date", field:"optin_received_date",headerFilterPlaceholder: "Search", headerFilter: true,},
|
|
{title:"Approved Date", field:"optin_approved_date",headerFilterPlaceholder: "Search", headerFilter: true,},
|
|
{title:"Status", field:"status",headerFilterPlaceholder: "Search", headerFilter: true,},
|
|
{title:"Opt-In Type", field:"optin_type",headerFilterPlaceholder: "Search", headerFilter: true,},
|
|
{title:"Data Processed Date", field:"data_processed_date",headerFilterPlaceholder: "Search", headerFilter: true}
|
|
],
|
|
});
|
|
document.getElementById("download-csv").addEventListener("click", function(){
|
|
table.download("csv", "optInData.csv");
|
|
});
|
|
|
|
|
|
|
|
//trigger download of data.xlsx file
|
|
document.getElementById("download-xlsx").addEventListener("click", function(){
|
|
table.download("xlsx", "optInData.xlsx", {sheetName:"Opt In Data"});
|
|
});
|
|
|
|
|
|
//trigger download of data.xlsx file
|
|
document.getElementById("download-xlsx").addEventListener("click", function(){
|
|
table.download("xlsx", "optInData.xlsx", {sheetName:"Opt In Data"});
|
|
});
|
|
|
|
//trigger download of data.pdf file
|
|
document.getElementById("download-pdf").addEventListener("click", function(){
|
|
table.download("pdf", "optInData.pdf", {
|
|
orientation:"portrait", //set page orientation to portrait
|
|
title:"opt In Data Report", //add title to report
|
|
});
|
|
});
|
|
|
|
|
|
}
|
|
}
|
|
|
|
});
|
|
async function init() {
|
|
// Show loader
|
|
loader.style.display = 'block';
|
|
|
|
// Load data
|
|
const data = await loadData();
|
|
|
|
// Hide loader
|
|
loader.style.display = 'none';
|
|
|
|
// Display content
|
|
content.innerHTML = table;
|
|
content.style.display = 'block';
|
|
}
|
|
|
|
// Initialize the loader and content
|
|
init();
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
</body>
|
|
</html> |