395 lines
18 KiB
JavaScript
395 lines
18 KiB
JavaScript
Handlebars.registerHelper('ifCond', function (v1, operator, v2, options) {
|
|
switch (operator) {
|
|
case '==':
|
|
return (v1 == v2) ? options.fn(this) : options.inverse(this);
|
|
case '===':
|
|
return (v1 === v2) ? options.fn(this) : options.inverse(this);
|
|
case '!=':
|
|
return (v1 != v2) ? options.fn(this) : options.inverse(this);
|
|
case '!==':
|
|
return (v1 !== v2) ? options.fn(this) : options.inverse(this);
|
|
case '<':
|
|
return (v1 < v2) ? options.fn(this) : options.inverse(this);
|
|
case '<=':
|
|
return (v1 <= v2) ? options.fn(this) : options.inverse(this);
|
|
case '>':
|
|
return (v1 > v2) ? options.fn(this) : options.inverse(this);
|
|
case '>=':
|
|
return (v1 >= v2) ? options.fn(this) : options.inverse(this);
|
|
default:
|
|
return options.inverse(this);
|
|
}
|
|
});
|
|
|
|
jQuery(document).ready(function($){
|
|
|
|
function get_the_header(data) {
|
|
var link_format = $('.sheet-url').val();
|
|
if (link_format === '') {
|
|
return false;
|
|
}
|
|
|
|
// Determine the format by checking the last few characters
|
|
var the_format = link_format.slice(-3);
|
|
var lines = data.split("\n");
|
|
var result = [];
|
|
var delimiter = ',';
|
|
|
|
// Set the correct delimiter based on the format
|
|
if (the_format === 'csv') {
|
|
delimiter = ',';
|
|
} else if (the_format === 'tsv') {
|
|
delimiter = "\t";
|
|
}
|
|
|
|
// Read headers
|
|
var headers = lines[0].split(delimiter).map(header => header.trim()); // Trim any whitespace
|
|
|
|
// Process each line and create objects
|
|
for (var i = 1; i < lines.length; i++) {
|
|
var obj = {};
|
|
var currentLine = lines[i].split(delimiter);
|
|
|
|
// Only process if the line has data
|
|
if (currentLine.length > 1 || currentLine[0] !== '') {
|
|
for (var j = 0; j < headers.length; j++) {
|
|
obj[headers[j]] = (currentLine[j] !== undefined) ? currentLine[j].trim() : null; // Handle missing values
|
|
}
|
|
result.push(obj);
|
|
}
|
|
}
|
|
|
|
setfields(result);
|
|
|
|
// Append the result as a JSON string in a textarea
|
|
$('.checker-preview').append(`
|
|
<textarea id="link_data" class="form-control w-100 d-none">${JSON.stringify(result)}</textarea>
|
|
`);
|
|
append_fields_to_preview();
|
|
}
|
|
|
|
function setfields(data){
|
|
|
|
$.each(data, function(i, j){
|
|
if(i == 0){
|
|
var options = '';
|
|
$.each(j, function(k,l){
|
|
var id = 'checker-item-'+k.replace(' ', '_').replace('.', '_').toLowerCase();
|
|
options += '<option value="'+k+'">'+k+'</option>';
|
|
});
|
|
var exist = $('.repeater-card');
|
|
if(!$('#post_id').val()){
|
|
$('.repeater-form-field').append($('#repeater-template-empty').html());
|
|
$('.select-kolom, .field-placeholder').trigger('change');
|
|
append_fields_to_preview();
|
|
}else{
|
|
setTimeout(() => {
|
|
$.ajax({
|
|
type: 'post',
|
|
url: '/wp-admin/admin-ajax.php',
|
|
data: {
|
|
action: 'load_repeater_field_card',
|
|
pid: $('#post_id').val(),
|
|
json: $('#link_data').val()
|
|
},
|
|
success: function (response) {
|
|
console.log(response);
|
|
// renderRepeaterFields(response);
|
|
// Ambil template dari script di atas
|
|
var source = $("#repeater-template").html();
|
|
var template = Handlebars.compile(source);
|
|
|
|
// Render template dengan data respons dari server
|
|
var html = template({ fields: response });
|
|
|
|
// Masukkan hasil render ke dalam DOM
|
|
$('.repeater-form-field').html(html);
|
|
append_fields_to_preview(); // Panggil fungsi tambahan setelah render
|
|
}
|
|
});
|
|
}, 2500);
|
|
}
|
|
$('.checker-preview > *').removeClass('d-none');
|
|
|
|
setTimeout(() => {
|
|
$.ajax({
|
|
type: 'post',
|
|
url: '/wp-admin/admin-ajax.php',
|
|
data: {
|
|
action: 'load_output_setting',
|
|
pid: $('#post_id').val(),
|
|
json: $('#link_data').val()
|
|
},
|
|
success: function (response) {
|
|
if (response.success) {
|
|
// Compile the Handlebars template
|
|
var source = $("#output-template").html();
|
|
var template = Handlebars.compile(source);
|
|
|
|
// Pass data to the template
|
|
var html = template(response.data);
|
|
|
|
// Append the rendered HTML
|
|
$('.result-value-output').html(html);
|
|
|
|
// You can call other functions after the template is rendered
|
|
append_fields_to_preview();
|
|
} else {
|
|
console.log('Error: ', response.data);
|
|
}
|
|
}
|
|
});
|
|
|
|
}, 2500);
|
|
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
$('.sheet-url').on('change', function(){
|
|
if($(this).is(':valid') && $(this).val() !== ''){
|
|
$('tr.has-link').slideDown();
|
|
$('#checker_preview.postbox').slideDown();
|
|
$('#dummy').hide();
|
|
$.ajax({
|
|
type: "GET",
|
|
url: $(this).val(),
|
|
dataType: "text",
|
|
beforeSend: function(){
|
|
$('.checker-preview').append(`
|
|
<textarea id="link_data" class="form-control w-100">Loading Data....</textarea>
|
|
`);
|
|
},
|
|
success: function(data) {
|
|
console.log(data);
|
|
$('.checker-preview textarea').remove();
|
|
get_the_header(data);
|
|
}
|
|
});
|
|
}else{
|
|
$('tr.has-link').slideUp();
|
|
$('#dummy').show();
|
|
$('#checker_preview.postbox').slideUp();
|
|
}
|
|
});
|
|
|
|
$('.sheet-url').trigger('change');
|
|
|
|
function append_fields_to_preview() {
|
|
var form_card = $('.repeater-card');
|
|
|
|
$('.dw-checker-form-fields').html('');
|
|
if(form_card.length > 0){
|
|
$.each(form_card, function(o,p){
|
|
if($(p).find('.select-field-type').val() == 'text'){
|
|
$('.dw-checker-form-fields').append(`
|
|
<div class="dw-checker-field">
|
|
<label for="`+$(p).find('.field-id').val()+`" style="color: `+$('.field-label-color').val()+`;display: `+$('.field-display-label').val()+`;">`+$(p).find('.field-label').val()+`</label>
|
|
<input name="`+$(p).find('field-id').val()+`" placeholder="`+$(p).find('.field-placeholder').val()+`"/>
|
|
</div>
|
|
`);
|
|
}else if($(p).find('.select-field-type').val() == 'select') {
|
|
var jsonData = JSON.parse($('#link_data').val());
|
|
var uniqueValues = [];
|
|
$.each(jsonData, function(index, item) {
|
|
var skema = item[$(p).find('.select-kolom').val()];
|
|
if ($.inArray(skema, uniqueValues) === -1) {
|
|
uniqueValues.push(skema);
|
|
}
|
|
});
|
|
// console.log(uniqueValues);
|
|
var options = '';
|
|
$.each(uniqueValues, function(q, r){
|
|
options += '<option value="'+r+'">'+r+'</option>';
|
|
});
|
|
var exist = $('.dw-checker-field');
|
|
$('.dw-checker-form-fields').append(`
|
|
<div class="dw-checker-field">
|
|
<label for="`+$(p).find('field-id').val()+`" style="color: `+$('.field-label-color').val()+`;display: `+$('.field-display-label').val()+`;">`+$(p).find('.field-label').val()+`</label>
|
|
<select name="`+$(p).find('field-id').val()+`" placeholder="`+$(p).find('.field-placeholder').val()+`">
|
|
<option value="">`+$(p).find('.field-placeholder').val()+`</option>
|
|
`+options+`
|
|
</select>
|
|
</div>
|
|
`);
|
|
}
|
|
});
|
|
}
|
|
$('.dw-checker-wrapper').attr('style', 'background-color:'+$('.card-background').val()+$('.card-bg-opacity').val()+'; padding: '+$('.card-padding').val()+'em; border-radius: '+$('.card-border-radius').val()+'em; width: '+$('.card-width').val()+'px; box-shadow: '+$('.card-box-shadow').val()+' '+$('.card-box-shadow-color').val()+';');
|
|
$('.dw-checker-title').attr('style', 'color: '+$('.card-title').val()+';text-align: '+$('.card-title-align').val()+';').text($('#title').val());
|
|
$('.dw-checker-description').attr('style', 'color: '+$('.card-description').val()+';text-align: '+$('.card-description-align').val()+';').html($('#description').val());
|
|
$('.dw-checker-divider').attr('style', 'opacity: .25; border-color: '+$('.card-divider').val()+'; border-width: '+$('.card-divider-width').val()+';');
|
|
|
|
$('.search-button').text($('.search-btn-text').val()).attr('style', 'background-color: '+$('.search-btn-bg-color').val()+'; color: '+$('.search-btn-text-color').val()+';');
|
|
$('.dw-checker-form-button').attr('style', 'justify-content: '+$('.search-btn-position').val() );
|
|
|
|
$('.back-button').text($('.back-btn-text').val()).attr('style', 'background-color: '+$('.back-btn-bg-color').val()+'; color: '+$('.back-btn-text-color').val()+';');
|
|
$('.dw-checker-result-button').attr('style', 'justify-content: '+$('.back-btn-position').val() );
|
|
|
|
if($('#link_data').val()){
|
|
var jsonData = JSON.parse($('#link_data').val());
|
|
var resultData = [];
|
|
|
|
var resultDiv = '';
|
|
if($('.result-display-type').val() == 'table'){
|
|
$.each(jsonData, function(index, item) {
|
|
if(index == 0){
|
|
resultData = item;
|
|
resultDiv += '<table class="dw-checker-result-table" style="border-color: '+$('.result-divider').val()+'; border-width: '+$('.result-divider-width').val()+'px;"><tbody>';
|
|
var header_color = $('#result_header').val();
|
|
var value_color = $('#result_value').val();
|
|
$.each(item, function(q,r){
|
|
var id = q.replace(' ', '_').replace('.', '_').toLowerCase();
|
|
var prefix = '';
|
|
if($('#output-prefix-'+id).val()){
|
|
prefix = $('#output-prefix-'+id).val();
|
|
}
|
|
if($('#output-visibility-'+id).val() == 'yes'){
|
|
return;
|
|
}
|
|
if($('#output-type-'+id).val() == 'link_button'){
|
|
r = '<button href="'+r+'" class="dw-checker-value-button">'+$('#output-buttontext-'+id).val()+'</button>';
|
|
}
|
|
resultDiv += '<tr>';
|
|
resultDiv += '<th style="border-color: '+$('.result-divider').val()+'; border-width: '+$('.result-divider-width').val()+'px;"><span class="dw-checker-result-header" style="color:'+header_color+'">'+q+'</span></th>';
|
|
resultDiv += '<td style="border-color: '+$('.result-divider').val()+'; border-width: '+$('.result-divider-width').val()+'px;"><span class="dw-checker-result-value" style="color:'+value_color+'">'+prefix+r+'</span></td>';
|
|
resultDiv += '</tr>';
|
|
});
|
|
resultDiv += '</tbody></table>';
|
|
}
|
|
});
|
|
}else if($('.result-display-type').val() == 'div') {
|
|
$.each(jsonData, function(index, item) {
|
|
if(index == 0){
|
|
resultData = item;
|
|
var header_color = $('#result_header').val();
|
|
var value_color = $('#result_value').val();
|
|
$.each(item, function(q,r){
|
|
var id = q.replace(' ', '_').replace('.', '_').toLowerCase();
|
|
var prefix = '';
|
|
if($('#output-prefix-'+id).val()){
|
|
prefix = $('#output-prefix-'+id).val();
|
|
}
|
|
if($('#output-visibility-'+id).val() == 'yes'){
|
|
return;
|
|
}
|
|
if($('#output-type-'+id).val() == 'link_button'){
|
|
r = '<a href="'+r+'" class="dw-checker-value-button">'+$('#output-buttontext-'+id).val()+'</a>';
|
|
}
|
|
resultDiv += '<div class="dw-checker-result-div" style="border-bottom-color: '+$('.result-divider').val()+'; border-bottom-width: '+$('.result-divider-width').val()+'px;">';
|
|
resultDiv += '<div class="result-header"><span class="dw-checker-result-header" style="color:'+header_color+';">'+q+'</span></div>';
|
|
resultDiv += '<div class="result-value"><span class="dw-checker-result-value" style="color:'+value_color+';">'+prefix+r+'</span></div>';
|
|
resultDiv += '</div>';
|
|
});
|
|
}
|
|
});
|
|
}
|
|
$('.dw-checker-results').html(resultDiv);
|
|
}
|
|
|
|
$('.dw-checker-value-button').attr('style', 'background-color: '+$('.search-btn-bg-color').val()+'; color: '+$('.search-btn-text-color').val()+';');
|
|
|
|
}
|
|
|
|
setInterval(() => {
|
|
if($('#link').val() !== '' && $('#link_data').val() !== ''){
|
|
append_fields_to_preview();
|
|
}
|
|
}, $('#preview-interval').val() * 1000);
|
|
|
|
$('.set-preview').on('click', function(e){
|
|
e.preventDefault();
|
|
append_fields_to_preview();
|
|
});
|
|
|
|
$(document).on('click', '.add-form-card', function(e){
|
|
e.preventDefault();
|
|
// var content = $(this).parents('.card').html();
|
|
var content = $('#repeater-template').html();
|
|
$('.repeater-form-field').append('<div class="card shadow repeater-card gap-2">'+content+'</div>');
|
|
$('.select-kolom').trigger('change');
|
|
});
|
|
|
|
$(document).on('click', '.delete-form-card', function(e){
|
|
e.preventDefault();
|
|
$(this).parents('.card').remove();
|
|
});
|
|
|
|
$(document).on('change', '.select-kolom', function(){
|
|
$(this).parents('.card').find('.field-id').val('_'+$(this).val().replace(' ', '_').replace('.', '_').toLowerCase()).trigger('change');
|
|
$(this).parents('.card').find('.field-label').val($(this).val());
|
|
$(this).parents('.card').find('.field-placeholder').val($(this).val());
|
|
});
|
|
|
|
$(document).on('change', '.field-id', function(){
|
|
var value = $(this).val();
|
|
var card = $(this).parents('.card');
|
|
card.find('.select-kolom').attr('name', 'checker[fields]['+value+'][kolom]');
|
|
card.find('.select-field-type').attr('name', 'checker[fields]['+value+'][type]');
|
|
card.find('.field-label').attr('name', 'checker[fields]['+value+'][label]');
|
|
card.find('.field-placeholder').attr('name', 'checker[fields]['+value+'][placeholder]');
|
|
card.find('.select-match-type').attr('name', 'checker[fields]['+value+'][match]');
|
|
});
|
|
|
|
$(".repeater-form-field").sortable({
|
|
change: function(event, ui) {
|
|
ui.placeholder.css({
|
|
visibility: 'visible',
|
|
border : '2px dashed #cccccc',
|
|
borderRadius: '5px',
|
|
height: '15rem'
|
|
});
|
|
}
|
|
});
|
|
|
|
$('#title').on('input', function(){
|
|
$('.dw-checker-title').text($(this).val());
|
|
});
|
|
|
|
$('#description').on('input', function(){
|
|
$('.dw-checker-description').html($(this).val());
|
|
});
|
|
|
|
$(document).on('click', '.output-value-visibility', function(){
|
|
if($(this).is(':checked')){
|
|
$(this).val('yes');
|
|
}else{
|
|
$(this).val('no');
|
|
}
|
|
});
|
|
|
|
$(document).on('change', '.output-type', function(){
|
|
if($(this).val().includes('button')){
|
|
$(this).closest('.row').siblings('.type-button-link').show();
|
|
}else{
|
|
$(this).closest('.row').siblings('.type-button-link').hide();
|
|
}
|
|
});
|
|
|
|
$('.option-nav-menu').on('click', function(){
|
|
var table = $(this).data('table');
|
|
$('.option-nav-menu').removeClass('active');
|
|
$(this).addClass('active');
|
|
|
|
$('.checker-settings-table').hide();
|
|
|
|
if(table == '#checker-card'){
|
|
$('#checker-card').show();
|
|
}else if(table == '#checker-result'){
|
|
$('#checker-result').show();
|
|
}else if(table == '#checker-security'){
|
|
$('#checker-security').show();
|
|
}else if(table == '#checker-form'){
|
|
$('#checker-form').show();
|
|
}
|
|
|
|
});
|
|
|
|
$('.result-display-type').on('change', function(){
|
|
$('tr.setting-card-column').hide();
|
|
if($(this).val() == 'card'){
|
|
$('tr.setting-card-column').show();
|
|
}
|
|
});
|
|
}); |