141 lines
5.0 KiB
HTML
141 lines
5.0 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;}
|
||
|
|
/* .tabulator .tabulator-header .tabulator-col {background-color: #2b9af3;} */
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<!-- {% extends "templates/web.html" %} -->
|
||
|
|
|
||
|
|
{% block title %}Pricing{% endblock %}
|
||
|
|
{% block content %}
|
||
|
|
<h4>Opt In Data</h4>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<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 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() {
|
||
|
|
var data = [];
|
||
|
|
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
|
||
|
|
|
||
|
|
|
||
|
|
// 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
|
||
|
|
|
||
|
|
var table = new Tabulator("#tabulator-table", {
|
||
|
|
data:data, // Assign data to table
|
||
|
|
// layout:"fitColumns",
|
||
|
|
// filterMode: "remote",
|
||
|
|
pagination:true,
|
||
|
|
paginationSize: 20,
|
||
|
|
// 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", headerFilter: true,},
|
||
|
|
{title:"KOL Name", field:"kol_name",headerFilterPlaceholder: "Search", headerFilter: true,},
|
||
|
|
{title:"Project Name", field:"project_name",headerFilterPlaceholder: "Search", headerFilter: true,},
|
||
|
|
{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.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
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
{% endblock %}
|
||
|
|
</body>
|
||
|
|
</html>
|