Welcome! Share code as fast as possible.
- Use the language picker to change the language manually.
- The previous link will get modified. You can then share this new link with others.
- Visit
https://code-dump.vercel.app/<extension>
- For example, to create a link which for a JavaScript code you will visit
https://code-dump.vercel.app/js
Any link generated does not have an expiry.
GitHub
<!DOCTYPE html>
<head>
<style>
input.services{-webkit-appearance: none;appearance: none;padding: 16px 30px;border-radius: 16px;background: radial-gradient(circle 12px, white 100%, transparent calc(100% 1px)) #ccc -14px;transition: 0.3s ease-in-out}.services:checked{background-color: dodgerBlue;background-position: 14px}#cover{position: fixed;width: 100%;height: 100%;top: 0;left: 0;background: rgba(255, 255, 255, 0.8) center no-repeat}#spinner{background: white;z-index: 999999999999999;display: block;margin: 0 auto;position: absolute;width: 100px;height: 100px;left: 0;right: 0;top: 50%;border-radius: 50%;border-top: 25px solid #002a5e;border-right: 25px solid white;border-bottom: 25px solid #002a5e;border-left: 25px solid white;-webkit-animation: spin 2s linear infinite;animation: spin 2s linear infinite}@keyframes spin{0%{transform: rotate(0deg)}100%{transform: rotate(360deg)}}.recipient-blacklisted{background: #ff0000a8;border-radius: 5px;padding: 5px;color: white}.recipient-notblacklisted{background: #000;border-radius: 5px;padding: 5px;color: white}
</style>
<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/searchpanes/2.1.0/css/searchPanes.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedcolumns/4.2.1/css/fixedColumns.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.5.0/css/select.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.3.2/css/buttons.dataTables.min.css">
</head>
<body style="" class="">
<!--filters-->
<div id="cover">
<div id="spinner"></div>
</div>
<div class="container-fluid">
<h1>Subscriptions</h1>
<form autocomplete="off">
<table class="display responsive nowrap" id="recipients" style="width: 100%;"></table>
</form></div>
<!-- JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.js" type="text/javascript" crossorigin="anonymous" referrerpolicy="no-referrer" integrity="sha512-CX7sDOp7UTAq+i1FYIlf9Uo27x4os+kGeoT7rgwvY+4dmjqV0IuE/Bl5hVsjnQPQiTOhAX1O2r2j5bjsFBvv/A=="></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" type="text/javascript" crossorigin="anonymous" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"></script>
<script src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.js" type="text/javascript" charset="utf8"></script>
<script src="https://cdn.datatables.net/searchpanes/2.1.0/js/dataTables.searchPanes.min.js" type="text/javascript" charset="utf8"></script>
<script src="https://cdn.datatables.net/fixedcolumns/4.2.1/js/dataTables.fixedColumns.min.js" type="text/javascript" charset="utf8"></script>
<script src="https://cdn.datatables.net/select/1.5.0/js/dataTables.select.min.js" type="text/javascript" charset="utf8"></script>
<script src="https://cdn.datatables.net/buttons/2.3.2/js/dataTables.buttons.min.js" type="text/javascript" charset="utf8"></script>
<script type="text/javascript">// <![CDATA[
function next() {
document.controller.submit('next','_self','subscription');
}
$(window).on('load', function(){
$('#cover').fadeOut(1000);
})
function checkbox (id) {
return function (data, type, row, meta) {
if (! data) {
return 0;
}
var subs = data.subscriptions.split(',');
if (subs.includes(id)) {
return type === 'display'
? '<input class="services" value="'+data.id+'-'+id+'" type="checkbox" checked/>'
: 1;
}
return type === 'display'
? '<input class="services" value="'+data.id+'-'+id+'" type="checkbox"/>'
: 1;
};
}
function blacklistCheck(row) {
if (row.blackList == 1) {
return '<span class="recipient-blacklisted">' + row.name + '</span>'
} else {
return '<span class="recipient-notblacklisted">' + row.name + '</span>'
}
}
jQuery( document ).ready(function() {
var colsDef = [
{data: null, defaultContent:'', orderable: false, className: 'select-checkbox',title:'<input type="checkbox" id="select_all" class="" title="Select All" />'},
{data: null ,defaultContent:'',render: function (data, type, row, meta) {return meta.row;}},
{data: 'id', title: 'id' },
{data: 'cmOneID', title: 'cmOneID' },
{data: 'email', title: 'Email' },
{data: 'name', title: 'Recipient',render: function (data, type, row, meta) {return blacklistCheck(row)}},
{data: 'jurisdiction', title: 'Jurisdiction' },
{data: 'blackList', title: ' Blacklist'},
{data: 'rm', title: 'Manager' },
{data: 'lawfulBasis', title: 'Consent'}
];
var servicesObj = JSON.parse(document.controller.getValue('ctx/vars/services'));
for (let i = 0; i < servicesObj.length; i++) {
servicesObj[i].render = checkbox(servicesObj[i].id);
}
const columns = [...colsDef, ...servicesObj];
/** datatables **/
var table= $('#recipients').DataTable({
serverSide: true,
processing:true,
ajax: {
url: '/sch/subscriptionAPI_v15.jssp',
type: 'POST'
},
stateSave: false,
responsive: true,
select: true,
dom: 'PBfrtip',
deferRender: true,
paging: true,
scrollY: 500,
scrollX: true,
scrollCollapse: true,
fixedColumns:{left: 2},
buttons: [{
text: 'Submit Subscriptions',
action: function(e, dt, node, config) {
/****************TESTING ****************/
var sub = [];
var unsub = [];
table.rows({ selected: true } ).every( function ( rowIdx, tableLoop, rowLoop ) {
var data = this.data();
$( 'td input:checkbox:checked', this.node() ).each( function () {
sub.push({recipient:data.id,services:$(this).val().split('-')[1]})
});
$( 'td input:checkbox:not(:checked)', this.node() ).each( function () {
unsub.push({recipient:data.id,services:$(this).val().split('-')[1]})
});
} );
//console.log(sub);
//console.log(unsub);
document.controller.setValue('/ctx/vars/sub',JSON.stringify(sub));
document.controller.setValue('/ctx/vars/unsub',JSON.stringify(unsub));
next();
/***************************************/
}
}, ],
columns:columns,
searchPanes: {cascadePanes: false, viewTotal: false, viewCount: false},
columnDefs: [
{ targets: [1,2,3,4,6,7,8,9], visible:false},
{ searchPanes: {show: true, initCollapsed: false},targets: [3,4,6,7,8,9] },
{ searchPanes: {show: false}, targets: [10] }
],
select: {style:'multi', selector: 'td:first-child'}, order: [[ 1, 'asc' ]],
});//table ini
/**JS: Select All ***/
$('#select_all').on('click', function() {
if ($('#select_all:checked').val() === 'on') {
table.rows().select();
} else {
table.rows().deselect();
}
});
//$('#recipients').DataTable().state.clear();
});
// ]]></script>
</body>
</html>