208 lines
13 KiB
PHP
208 lines
13 KiB
PHP
<table class="table checker-setting" data-toggle="table" id="checker-result" style="display:none;">
|
|
<tbody>
|
|
<tr class="has-link" style="display: none;">
|
|
<th>Data Display Mode</th>
|
|
<td>
|
|
<div class="row mb-3">
|
|
<div class="col-3"><label class="form-label fw-bold mb-0">Initial Display</label></div>
|
|
<div class="col-9">
|
|
<select name="checker[result][initial_display]" class="form-select result-initial-display">
|
|
<option value="hidden" <?= ($checker['result']['initial_display'] ?? 'hidden') == 'hidden' ? 'selected' : '' ?>>Hidden - Show after search</option>
|
|
<option value="all" <?= ($checker['result']['initial_display'] ?? 'hidden') == 'all' ? 'selected' : '' ?>>Show All - Display all records</option>
|
|
<option value="limited" <?= ($checker['result']['initial_display'] ?? 'hidden') == 'limited' ? 'selected' : '' ?>>Show Limited - First 10 records</option>
|
|
</select>
|
|
<small class="text-muted">How to display data on page load</small>
|
|
</div>
|
|
</div>
|
|
<div class="row mb-3">
|
|
<div class="col-3"><label class="form-label fw-bold mb-0">Filter Mode</label></div>
|
|
<div class="col-9">
|
|
<select name="checker[result][filter_mode]" class="form-select result-filter-mode">
|
|
<option value="search" <?= ($checker['result']['filter_mode'] ?? 'search') == 'search' ? 'selected' : '' ?>>Search - Submit to find</option>
|
|
<option value="filter" <?= ($checker['result']['filter_mode'] ?? 'search') == 'filter' ? 'selected' : '' ?>>Filter - Real-time filtering</option>
|
|
</select>
|
|
<small class="text-muted">Search requires submit, Filter updates live as you type</small>
|
|
</div>
|
|
</div>
|
|
<div class="row mb-2">
|
|
<div class="col-3"><label class="form-label fw-bold mb-0">Max Records</label></div>
|
|
<div class="col-9">
|
|
<input type="number" name="checker[result][max_records]" class="form-control" value="<?= $checker['result']['max_records'] ?? 100 ?>" min="10" max="1000">
|
|
<small class="text-muted">Maximum records to display (performance limit)</small>
|
|
</div>
|
|
</div>
|
|
<div class="row mb-2">
|
|
<div class="col-3"><label class="form-label fw-bold mb-0">Cache Control</label></div>
|
|
<div class="col-9">
|
|
<button type="button" class="btn btn-sm btn-outline-warning" id="clear-checker-cache" data-checker-id="<?= $post_id ?>">
|
|
<i class="bi bi-arrow-clockwise"></i> Clear Cache & Refresh Data
|
|
</button>
|
|
<small class="text-muted d-block mt-1">Clear cached data to fetch fresh data from Google Sheet (cached for 5 minutes)</small>
|
|
<div id="cache-clear-message" class="mt-2" style="display:none;"></div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr class="has-link" style="display: none;">
|
|
<th>Result Display Type</th>
|
|
<td>
|
|
<select name="checker[result][display]" class="form-select form-control border result-display-type">
|
|
<option value="standard-table" <?= ($checker['result']['display'] == 'standard-table') ? 'selected' : '' ?>>Standard Table</option>
|
|
<option value="vertical-table" <?= ($checker['result']['display'] == 'vertical-table') ? 'selected' : '' ?>>Vertical Table</option>
|
|
<option value="div" <?= ($checker['result']['display'] == 'div') ? 'selected' : '' ?>>Div</option>
|
|
<option value="cards" <?= ($checker['result']['display'] == 'cards') ? 'selected' : '' ?>>Card</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
<tr class="setting-card-column" <?= ($checker['result']['display'] !== 'cards') ? 'style="display: none;"' : '' ?>>
|
|
<th>Result Display Column</th>
|
|
<td>
|
|
<div class="card-column-settings d-flex gap-2">
|
|
<div class="input-group">
|
|
<span class="input-group-text">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
|
|
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1zm4 15h10m-8-4v4m6-4v4" />
|
|
</svg>
|
|
</span>
|
|
<input type="number" class="form-control border" name="checker[result][card_grid][desktop]" value="<?= ($checker['result']['card_grid']['desktop']) ? $checker['result']['card_grid']['desktop'] : '4' ?>">
|
|
</div>
|
|
<div class="input-group">
|
|
<span class="input-group-text">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
|
|
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
|
|
<path d="M5 4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1z" />
|
|
<path d="M11 17a1 1 0 1 0 2 0a1 1 0 0 0-2 0" />
|
|
</g>
|
|
</svg>
|
|
</span>
|
|
<input type="number" class="form-control border" name="checker[result][card_grid][tablet]" value="<?= ($checker['result']['card_grid']['tablet']) ? $checker['result']['card_grid']['tablet'] : '2' ?>">
|
|
</div>
|
|
<div class="input-group">
|
|
<span class="input-group-text">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
|
|
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2zm5-1h2m-1 13v.01" />
|
|
</svg>
|
|
</span>
|
|
<input type="number" class="form-control border" name="checker[result][card_grid][mobile]" value="<?= ($checker['result']['card_grid']['mobile']) ? $checker['result']['card_grid']['mobile'] : '1' ?>">
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr class="has-link" style="display: none;">
|
|
<th>Content</th>
|
|
<td>
|
|
<div class="row mb-2">
|
|
<div class="col-3"><label class="form-label fw-bold mb-0">Header</label></div>
|
|
<div class="col-9">
|
|
<input type="color" name="checker[result][header]" class="form-control result-header" id="result_header" value="<?php echo esc_attr( $checker['result']['header'] ); ?>" />
|
|
</div>
|
|
</div>
|
|
<div class="row mb-2">
|
|
<div class="col-3"><label class="form-label fw-bold mb-0">Value</label></div>
|
|
<div class="col-9">
|
|
<input type="color" name="checker[result][value]" class="form-control result-value" id="result_value" value="<?php echo esc_attr( $checker['result']['value'] ); ?>" />
|
|
</div>
|
|
</div>
|
|
<div class="row mb-2">
|
|
<div class="col-3"><label class="form-label fw-bold mb-0">Divider</label></div>
|
|
<div class="col-9">
|
|
<input type="color" name="checker[result][divider]" class="form-control result-divider" value="<?php echo esc_attr( $checker['result']['divider'] ); ?>" />
|
|
</div>
|
|
</div>
|
|
<div class="row mb-2">
|
|
<div class="col-3"><label class="form-label fw-bold mb-0">Divider Width</label></div>
|
|
<div class="col-9">
|
|
<div class="input-group">
|
|
<input type="number" name="checker[result][divider_width]" class="form-control border result-divider-width" value="<?php echo esc_attr( $checker['result']['divider_width'] ?? '1' ); ?>" />
|
|
<span class="input-group-text">px</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-3"><label class="form-label fw-bold mb-0">Output Value</label></div>
|
|
<div class="col-9">
|
|
<div class="result-value-output inset bg-light"></div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr class="has-link" style="display: none;">
|
|
<th>Back Button</th>
|
|
<td>
|
|
<div class="row mb-2">
|
|
<div class="col-3"><label class="form-label fw-bold mb-0">"Back"</label></div>
|
|
<div class="col-9">
|
|
<input name="checker[back_button][text]" class="form-control back-btn-text" value="<?php echo esc_attr( $checker['back_button']['text'] ?? 'Back' ); ?>" />
|
|
</div>
|
|
</div>
|
|
<div class="row mb-2">
|
|
<div class="col-3"><label class="form-label fw-bold mb-0">Background</label></div>
|
|
<div class="col-9">
|
|
<input type="color" name="checker[back_button][bg_color]" class="form-control border back-btn-bg-color" value="<?php echo esc_attr( $checker['back_button']['bg_color'] ?? '#333333' ); ?>" />
|
|
</div>
|
|
</div>
|
|
<div class="row mb-2">
|
|
<div class="col-3"><label class="form-label fw-bold mb-0">Text</label></div>
|
|
<div class="col-9">
|
|
<input type="color" name="checker[back_button][text_color]" class="form-control border back-btn-text-color" value="<?php echo esc_attr( $checker['back_button']['text_color'] ?? '#ffffff' ); ?>" />
|
|
</div>
|
|
</div>
|
|
<div class="row mb-2">
|
|
<div class="col-3"><label class="form-label fw-bold mb-0">Position</label></div>
|
|
<div class="col-9">
|
|
<select name="checker[back_button][position]" class="form-select form-control border back-btn-position">
|
|
<option value="flex-start" <?= ($checker['back_button']['position'] == 'flex-start') ? 'selected' : '' ?>>Left</option>
|
|
<option value="center" <?= ($checker['back_button']['position'] == 'center') ? 'selected' : '' ?>>Center</option>
|
|
<option value="flex-end" <?= ($checker['back_button']['position'] == 'flex-end') ? 'selected' : '' ?>>Right</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<script>
|
|
jQuery(document).ready(function($) {
|
|
$('#clear-checker-cache').on('click', function() {
|
|
var btn = $(this);
|
|
var checkerId = btn.data('checkerId');
|
|
var messageDiv = $('#cache-clear-message');
|
|
|
|
btn.prop('disabled', true).html('<i class="bi bi-arrow-clockwise spinner-border spinner-border-sm"></i> Clearing...');
|
|
|
|
$.ajax({
|
|
url: ajaxurl,
|
|
type: 'POST',
|
|
data: {
|
|
action: 'checker_clear_cache',
|
|
checker_id: checkerId,
|
|
security: '<?php echo wp_create_nonce("checker_ajax_nonce"); ?>'
|
|
},
|
|
success: function(response) {
|
|
if (response.success) {
|
|
messageDiv.removeClass('alert-danger').addClass('alert alert-success')
|
|
.html('<i class="bi bi-check-circle"></i> ' + response.data.message)
|
|
.fadeIn();
|
|
} else {
|
|
messageDiv.removeClass('alert-success').addClass('alert alert-danger')
|
|
.html('<i class="bi bi-exclamation-circle"></i> ' + response.data.message)
|
|
.fadeIn();
|
|
}
|
|
|
|
setTimeout(function() {
|
|
messageDiv.fadeOut();
|
|
}, 3000);
|
|
},
|
|
error: function() {
|
|
messageDiv.removeClass('alert-success').addClass('alert alert-danger')
|
|
.html('<i class="bi bi-exclamation-circle"></i> Failed to clear cache')
|
|
.fadeIn();
|
|
},
|
|
complete: function() {
|
|
btn.prop('disabled', false).html('<i class="bi bi-arrow-clockwise"></i> Clear Cache & Refresh Data');
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|