Jacek Pyziak
fd0db9b145
- Implemented the main view for Supplemental Feeds, displaying clients with Merchant Account IDs and their associated feed files. - Added styling for the feeds page and its components, including headers, empty states, and dropdown menus for syncing actions. - Created backend logic to generate supplemental feeds for clients, including file handling and data sanitization. - Integrated new routes and views for managing feeds, ensuring proper data retrieval and display. - Updated navigation to include the new Supplemental Feeds section. - Added necessary documentation for CRON job management related to feed generation.
433 lines
16 KiB
PHP
433 lines
16 KiB
PHP
<div class="clients-page">
|
|
<div class="clients-header">
|
|
<h2><i class="fa-solid fa-building"></i> Klienci</h2>
|
|
<button type="button" class="btn btn-success" onclick="openClientForm()">
|
|
<i class="fa-solid fa-plus mr5"></i>Dodaj klienta
|
|
</button>
|
|
</div>
|
|
|
|
<div class="clients-table-wrap">
|
|
<table class="table" id="clients-table">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 60px;">#ID</th>
|
|
<th>Nazwa klienta</th>
|
|
<th style="width: 120px;">Status</th>
|
|
<th>Google Ads Customer ID</th>
|
|
<th>Facebook Ads Account ID</th>
|
|
<th>Merchant Account ID</th>
|
|
<th>Dane od</th>
|
|
<th style="width: 190px;">Sync</th>
|
|
<th style="width: 250px; text-align: center;">Akcje</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<?php if ( $this -> clients ): ?>
|
|
<?php foreach ( $this -> clients as $client ): ?>
|
|
<?php $is_client_active = (int) ( $client['active'] ?? 0 ) === 1; ?>
|
|
<tr data-id="<?= $client['id']; ?>" data-active="<?= $is_client_active ? 1 : 0; ?>">
|
|
<td class="client-id"><?= $client['id']; ?></td>
|
|
<td class="client-name"><?= htmlspecialchars( $client['name'] ); ?></td>
|
|
<td data-status-for="<?= $client['id']; ?>">
|
|
<?php if ( $is_client_active ): ?>
|
|
<span class="text-success"><strong>Aktywny</strong></span>
|
|
<?php else: ?>
|
|
<span class="text-danger"><strong>Nieaktywny</strong></span>
|
|
<?php endif; ?>
|
|
</td>
|
|
<td>
|
|
<?php if ( $client['google_ads_customer_id'] ): ?>
|
|
<span class="badge-id"><?= htmlspecialchars( $client['google_ads_customer_id'] ); ?></span>
|
|
<?php else: ?>
|
|
<span class="text-muted">— brak —</span>
|
|
<?php endif; ?>
|
|
</td>
|
|
<td>
|
|
<?php if ( !empty( $client['facebook_ads_account_id'] ) ): ?>
|
|
<span class="badge-id"><?= htmlspecialchars( $client['facebook_ads_account_id'] ); ?></span>
|
|
<?php else: ?>
|
|
<span class="text-muted">— brak —</span>
|
|
<?php endif; ?>
|
|
</td>
|
|
<td>
|
|
<?php if ( !empty( $client['google_merchant_account_id'] ) ): ?>
|
|
<span class="badge-id"><?= htmlspecialchars( $client['google_merchant_account_id'] ); ?></span>
|
|
<?php else: ?>
|
|
<span class="text-muted">— brak —</span>
|
|
<?php endif; ?>
|
|
</td>
|
|
<td>
|
|
<?php if ( $client['google_ads_start_date'] ): ?>
|
|
<?= $client['google_ads_start_date']; ?>
|
|
<?php else: ?>
|
|
<span class="text-muted">— brak —</span>
|
|
<?php endif; ?>
|
|
</td>
|
|
<td class="client-sync" data-sync-id="<?= $client['id']; ?>"><span class="text-muted">—</span></td>
|
|
<td class="actions-cell">
|
|
<button type="button" class="btn-icon btn-icon-sync" onclick="toggleClientActive(<?= $client['id']; ?>, this)" title="<?= $is_client_active ? 'Dezaktywuj klienta' : 'Aktywuj klienta'; ?>">
|
|
<i class="fa-solid <?= $is_client_active ? 'fa-toggle-on' : 'fa-toggle-off'; ?>"></i>
|
|
</button>
|
|
<div class="sync-dropdown" data-client-id="<?= $client['id']; ?>">
|
|
<button type="button" class="btn-icon btn-icon-sync client-sync-action" onclick="toggleSyncMenu(this)" title="Odswiez dane" <?= $is_client_active ? '' : 'disabled'; ?>>
|
|
<i class="fa-solid fa-arrows-rotate"></i>
|
|
</button>
|
|
<div class="sync-dropdown-menu">
|
|
<?php if ( $client['google_ads_customer_id'] ): ?>
|
|
<button type="button" onclick="syncFromMenu(<?= $client['id']; ?>, 'campaigns', this)">
|
|
<i class="fa-solid fa-bullhorn"></i> Kampanie
|
|
</button>
|
|
<button type="button" onclick="syncFromMenu(<?= $client['id']; ?>, 'products', this)">
|
|
<i class="fa-solid fa-box-open"></i> Produkty
|
|
</button>
|
|
<?php if ( !empty( $client['google_merchant_account_id'] ) ): ?>
|
|
<button type="button" onclick="syncFromMenu(<?= $client['id']; ?>, 'campaigns_product_alerts_merchant', this)">
|
|
<i class="fa-solid fa-store"></i> Walidacja Merchant
|
|
</button>
|
|
<button type="button" onclick="syncFromMenu(<?= $client['id']; ?>, 'supplemental_feed', this)">
|
|
<i class="fa-solid fa-file-csv"></i> Supplemental Feed
|
|
</button>
|
|
<?php endif; ?>
|
|
<?php endif; ?>
|
|
<?php if ( !empty( $client['facebook_ads_account_id'] ) ): ?>
|
|
<button type="button" onclick="syncFromMenu(<?= $client['id']; ?>, 'facebook_ads', this)">
|
|
<i class="fa-brands fa-facebook-f"></i> Facebook Ads
|
|
</button>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
<button type="button" class="btn-icon btn-icon-edit" onclick="editClient(<?= $client['id']; ?>)" title="Edytuj">
|
|
<i class="fa-solid fa-pen"></i>
|
|
</button>
|
|
<button type="button" class="btn-icon btn-icon-delete" onclick="deleteClient(<?= $client['id']; ?>, '<?= htmlspecialchars( addslashes( $client['name'] ) ); ?>')" title="Usuń">
|
|
<i class="fa-solid fa-trash"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<?php endforeach; ?>
|
|
<?php else: ?>
|
|
<tr>
|
|
<td colspan="9" class="empty-state">
|
|
<i class="fa-solid fa-building"></i>
|
|
<p>Brak klientów. Dodaj pierwszego klienta.</p>
|
|
</td>
|
|
</tr>
|
|
<?php endif; ?>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal: Dodaj / Edytuj klienta -->
|
|
<div class="default_popup" id="client-modal">
|
|
<div class="popup_content" style="max-width: 520px;">
|
|
<div class="popup_header">
|
|
<div class="title" id="client-modal-title">Dodaj klienta</div>
|
|
<div class="close"><i class="fa-solid fa-xmark"></i></div>
|
|
</div>
|
|
<div class="popup_body">
|
|
<form method="POST" id="client-form" action="/clients/save">
|
|
<input type="hidden" name="id" id="client-id" value="" />
|
|
<div class="settings-field">
|
|
<label for="client-name">Nazwa klienta</label>
|
|
<input type="text" id="client-name" name="name" class="form-control" required placeholder="np. Firma XYZ" />
|
|
</div>
|
|
<div class="settings-field">
|
|
<label for="client-active">Status klienta</label>
|
|
<select id="client-active" name="active" class="form-control">
|
|
<option value="1">Aktywny</option>
|
|
<option value="0">Nieaktywny</option>
|
|
</select>
|
|
<small class="text-muted">Nieaktywny klient nie jest synchronizowany.</small>
|
|
</div>
|
|
<div class="settings-field">
|
|
<label for="client-gads-id">Google Ads Customer ID</label>
|
|
<input type="text" id="client-gads-id" name="google_ads_customer_id" class="form-control" placeholder="np. 123-456-7890 (opcjonalnie)" />
|
|
</div>
|
|
<div class="settings-field">
|
|
<label for="client-fbads-id">Facebook Ads Account ID</label>
|
|
<input type="text" id="client-fbads-id" name="facebook_ads_account_id" class="form-control" placeholder="np. act_123456789012345 (opcjonalnie)" />
|
|
<small class="text-muted">Mozesz podac act_... albo same cyfry</small>
|
|
</div>
|
|
<div class="settings-field">
|
|
<label for="client-gmc-id">Merchant Account ID</label>
|
|
<input type="text" id="client-gmc-id" name="google_merchant_account_id" class="form-control" placeholder="np. 123456789 (opcjonalnie)" />
|
|
<small class="text-muted">ID konta Merchant Center przypisane do klienta</small>
|
|
</div>
|
|
<div class="settings-field">
|
|
<label for="client-gads-start">Pobieraj dane od</label>
|
|
<input type="date" id="client-gads-start" name="google_ads_start_date" class="form-control" />
|
|
<small class="text-muted">Data od której CRON zacznie pobierać dane z Google Ads API</small>
|
|
</div>
|
|
<div style="margin-top: 20px; display: flex; gap: 10px;">
|
|
<button type="submit" class="btn btn-success"><i class="fa-solid fa-check mr5"></i>Zapisz</button>
|
|
<button type="button" class="btn btn-secondary" onclick="closeClientForm()">Anuluj</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
function openClientForm()
|
|
{
|
|
$( '#client-modal-title' ).text( 'Dodaj klienta' );
|
|
$( '#client-id' ).val( '' );
|
|
$( '#client-name' ).val( '' );
|
|
$( '#client-active' ).val( '1' );
|
|
$( '#client-gads-id' ).val( '' );
|
|
$( '#client-fbads-id' ).val( '' );
|
|
$( '#client-gmc-id' ).val( '' );
|
|
$( '#client-gads-start' ).val( '' );
|
|
$( '#client-modal' ).fadeIn();
|
|
}
|
|
|
|
function closeClientForm()
|
|
{
|
|
$( '#client-modal' ).fadeOut();
|
|
}
|
|
|
|
function editClient( id )
|
|
{
|
|
$.getJSON( '/clients/get/id=' + id, function( data ) {
|
|
$( '#client-modal-title' ).text( 'Edytuj klienta' );
|
|
$( '#client-id' ).val( data.id );
|
|
$( '#client-name' ).val( data.name );
|
|
$( '#client-active' ).val( parseInt( data.active, 10 ) === 0 ? '0' : '1' );
|
|
$( '#client-gads-id' ).val( data.google_ads_customer_id || '' );
|
|
$( '#client-fbads-id' ).val( data.facebook_ads_account_id || '' );
|
|
$( '#client-gmc-id' ).val( data.google_merchant_account_id || '' );
|
|
$( '#client-gads-start' ).val( data.google_ads_start_date || '' );
|
|
$( '#client-modal' ).fadeIn();
|
|
} );
|
|
}
|
|
|
|
function updateClientStatusUI( id, active, $btn )
|
|
{
|
|
var isActive = parseInt( active, 10 ) === 1;
|
|
var statusHtml = isActive
|
|
? '<span class="text-success"><strong>Aktywny</strong></span>'
|
|
: '<span class="text-danger"><strong>Nieaktywny</strong></span>';
|
|
|
|
$( 'tr[data-id="' + id + '"]' ).attr( 'data-active', isActive ? '1' : '0' );
|
|
$( 'td[data-status-for="' + id + '"]' ).html( statusHtml );
|
|
|
|
if ( $btn && $btn.length )
|
|
{
|
|
$btn.attr( 'title', isActive ? 'Dezaktywuj klienta' : 'Aktywuj klienta' );
|
|
$btn.find( 'i' ).attr( 'class', 'fa-solid ' + ( isActive ? 'fa-toggle-on' : 'fa-toggle-off' ) );
|
|
}
|
|
|
|
$( 'tr[data-id="' + id + '"] .client-sync-action' ).prop( 'disabled', !isActive );
|
|
|
|
var $syncCell = $( '.client-sync[data-sync-id="' + id + '"]' );
|
|
if ( !isActive )
|
|
{
|
|
$syncCell.html( '<span class="text-muted">nieaktywny</span>' );
|
|
}
|
|
else
|
|
{
|
|
loadSyncStatus();
|
|
}
|
|
}
|
|
|
|
function toggleClientActive( id, btn )
|
|
{
|
|
var $row = $( 'tr[data-id="' + id + '"]' );
|
|
var currentActive = parseInt( $row.attr( 'data-active' ), 10 ) === 1 ? 1 : 0;
|
|
var nextActive = currentActive === 1 ? 0 : 1;
|
|
var $btn = $( btn );
|
|
var $icon = $btn.find( 'i' );
|
|
var originalClass = $icon.attr( 'class' );
|
|
|
|
$btn.prop( 'disabled', true );
|
|
$icon.attr( 'class', 'fa-solid fa-spinner fa-spin' );
|
|
|
|
$.post( '/clients/set_active', { id: id, active: nextActive }, function( response ) {
|
|
var data = JSON.parse( response || '{}' );
|
|
|
|
$btn.prop( 'disabled', false );
|
|
$icon.attr( 'class', originalClass );
|
|
|
|
if ( data.success )
|
|
{
|
|
updateClientStatusUI( id, data.active, $btn );
|
|
return;
|
|
}
|
|
|
|
$.alert( {
|
|
title: 'Blad',
|
|
content: data.message || 'Nie udalo sie zmienic statusu klienta.',
|
|
type: 'red'
|
|
} );
|
|
} );
|
|
}
|
|
|
|
// --- Sync dropdown menu ---
|
|
function toggleSyncMenu( btn )
|
|
{
|
|
var $dropdown = $( btn ).closest( '.sync-dropdown' );
|
|
var wasOpen = $dropdown.hasClass( 'is-open' );
|
|
$( '.sync-dropdown.is-open' ).removeClass( 'is-open' );
|
|
if ( !wasOpen ) $dropdown.addClass( 'is-open' );
|
|
}
|
|
|
|
$( document ).on( 'click', function( e ) {
|
|
if ( !$( e.target ).closest( '.sync-dropdown' ).length )
|
|
{
|
|
$( '.sync-dropdown.is-open' ).removeClass( 'is-open' );
|
|
}
|
|
});
|
|
|
|
function syncFromMenu( id, pipeline, btn )
|
|
{
|
|
$( '.sync-dropdown.is-open' ).removeClass( 'is-open' );
|
|
var $btn = $( btn );
|
|
var $icon = $btn.find( 'i' );
|
|
var origClass = $icon.attr( 'class' );
|
|
|
|
$btn.prop( 'disabled', true );
|
|
$icon.attr( 'class', 'fa-solid fa-spinner fa-spin' );
|
|
|
|
var labels = {
|
|
campaigns: 'kampanii',
|
|
products: 'produktow',
|
|
campaigns_product_alerts_merchant: 'walidacji Merchant',
|
|
supplemental_feed: 'supplemental feed',
|
|
facebook_ads: 'Facebook Ads'
|
|
};
|
|
|
|
$.post( '/clients/force_sync', { id: id, pipeline: pipeline }, function( response )
|
|
{
|
|
var data = JSON.parse( response );
|
|
|
|
$btn.prop( 'disabled', false );
|
|
$icon.attr( 'class', origClass );
|
|
|
|
if ( data.success )
|
|
{
|
|
var msg = data.immediate
|
|
? 'Supplemental feed wygenerowany pomyslnie.'
|
|
: 'Synchronizacja ' + labels[ pipeline ] + ' zostala zakolejkowana. Dane zostana pobrane przy najblizszym uruchomieniu CRON.';
|
|
|
|
$.alert({
|
|
title: data.immediate ? 'Gotowe' : 'Zakolejkowano',
|
|
content: msg,
|
|
type: 'green',
|
|
autoClose: 'ok|3000'
|
|
});
|
|
|
|
loadSyncStatus();
|
|
}
|
|
else
|
|
{
|
|
$.alert({
|
|
title: 'Blad',
|
|
content: data.message || 'Nie udalo sie oznaczyc klienta.',
|
|
type: 'red'
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
function deleteClient( id, name )
|
|
{
|
|
$.confirm( {
|
|
title: 'Potwierdzenie',
|
|
content: 'Czy na pewno chcesz usunąć klienta <strong>' + name + '</strong>?',
|
|
type: 'red',
|
|
onContentReady: function() {
|
|
if ( this['$$confirm'] && this['$$confirm'].length )
|
|
{
|
|
this['$$confirm'].trigger( 'focus' );
|
|
}
|
|
},
|
|
buttons: {
|
|
confirm: {
|
|
text: 'Usuń',
|
|
btnClass: 'btn-red',
|
|
keys: [ 'enter' ],
|
|
action: function() {
|
|
$.post( '/clients/delete', { id: id }, function( response ) {
|
|
var data = JSON.parse( response );
|
|
if ( data.success ) {
|
|
$( 'tr[data-id="' + id + '"]' ).fadeOut( 300, function() { $( this ).remove(); } );
|
|
}
|
|
} );
|
|
}
|
|
},
|
|
cancel: {
|
|
text: 'Anuluj'
|
|
}
|
|
}
|
|
} );
|
|
}
|
|
|
|
// Zamknij modal klawiszem Escape
|
|
$( document ).on( 'keydown', function( e ) {
|
|
if ( e.key === 'Escape' ) closeClientForm();
|
|
} );
|
|
|
|
// Zamknij modal kliknięciem w tło
|
|
$( '#client-modal' ).on( 'click', function( e ) {
|
|
if ( e.target === this ) closeClientForm();
|
|
} );
|
|
|
|
// --- Sync status bars ---
|
|
function renderSyncBar( label, done, total )
|
|
{
|
|
var pct = total > 0 ? Math.round( done / total * 100 ) : 0;
|
|
var cls = pct >= 100 ? 'is-done' : ( pct > 0 ? 'is-active' : '' );
|
|
|
|
return '<div class="client-sync-row">' +
|
|
'<span class="client-sync-label">' + label + '</span>' +
|
|
'<div class="client-sync-track"><div class="client-sync-fill ' + cls + '" style="width:' + pct + '%"></div></div>' +
|
|
'<span class="client-sync-pct">' + pct + '%</span>' +
|
|
'</div>';
|
|
}
|
|
|
|
function loadSyncStatus()
|
|
{
|
|
$.getJSON( '/clients/sync_status', function( resp )
|
|
{
|
|
if ( resp.status !== 'ok' ) return;
|
|
|
|
$( '.client-sync' ).each( function()
|
|
{
|
|
var $cell = $( this );
|
|
var isActive = parseInt( $cell.closest( 'tr' ).attr( 'data-active' ), 10 ) === 1;
|
|
if ( !isActive )
|
|
{
|
|
$cell.html( '<span class="text-muted">nieaktywny</span>' );
|
|
return;
|
|
}
|
|
|
|
var id = $cell.data( 'sync-id' );
|
|
var info = resp.data[ id ];
|
|
|
|
if ( !info )
|
|
{
|
|
$cell.html( '<span class="text-muted">—</span>' );
|
|
return;
|
|
}
|
|
|
|
var html = '<div class="client-sync-bars">';
|
|
if ( info.campaigns ) html += renderSyncBar( 'K:', info.campaigns[0], info.campaigns[1] );
|
|
if ( info.products ) html += renderSyncBar( 'P:', info.products[0], info.products[1] );
|
|
if ( info.merchant ) html += renderSyncBar( 'M:', info.merchant[0], info.merchant[1] );
|
|
if ( info.feed ) html += renderSyncBar( 'F:', info.feed[0], info.feed[1] );
|
|
if ( info.facebook_ads ) html += renderSyncBar( 'FB:', info.facebook_ads[0], info.facebook_ads[1] );
|
|
html += '</div>';
|
|
|
|
$cell.html( html );
|
|
} );
|
|
} );
|
|
}
|
|
|
|
$( document ).ready( function() {
|
|
loadSyncStatus();
|
|
setInterval( loadSyncStatus, 15000 );
|
|
} );
|
|
</script>
|
|
|