first commit
This commit is contained in:
118
templates/products/main_view.php
Normal file
118
templates/products/main_view.php
Normal file
@@ -0,0 +1,118 @@
|
||||
<div class="admin-form theme-primary">
|
||||
<div class="panel heading-border panel-primary">
|
||||
<div class="panel-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<label class="field select">
|
||||
<select id="client_id" name="client_id">
|
||||
<option value="">--- wybierz klienta ---</option>
|
||||
<? foreach ( $this -> clients as $client ):?>
|
||||
<option value="<?= $client['id'];?>"><?= $client['name'];?></option>
|
||||
<? endforeach;?>
|
||||
</select>
|
||||
<i class="arrow double"></i>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="admin-form theme-primary">
|
||||
<div class="panel heading-border panel-primary">
|
||||
<div class="panel-body">
|
||||
<table class="table table-sm" id="products">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Id</th>
|
||||
<th scope="col">Tytuł</th>
|
||||
<th scope="col">Wyśw.</th>
|
||||
<th scope="col">Wyśw. (30 dni)</th>
|
||||
<th scope="col">Klik.</th>
|
||||
<th scope="col">Klik. (30 dni)</th>
|
||||
<th scope="col">CTR</th>
|
||||
<th scope="col">Koszt</th>
|
||||
<th scope="col">CPC</th>
|
||||
<th scope="col">Konw.</th>
|
||||
<th scope="col">Wartość konw.</th>
|
||||
<th scope="col">ROAS</th>
|
||||
<th scope="col">CL3</th>
|
||||
<th scope="col">CL4</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$( function()
|
||||
{
|
||||
$( 'body' ).on( 'change', '#client_id', function()
|
||||
{
|
||||
var client_id = $( this ).val();
|
||||
|
||||
table = $( '#products' ).DataTable();
|
||||
table.destroy();
|
||||
|
||||
new DataTable( '#products', {
|
||||
ajax: {
|
||||
type: 'POST',
|
||||
url: '/products/get_products/client_id=' + client_id,
|
||||
},
|
||||
processing: true,
|
||||
serverSide: true,
|
||||
columns: [
|
||||
{ width: '6.25rem', orderable: false },
|
||||
{ width: 'auto', name: 'title', render: function( data, type, row ) {
|
||||
return `
|
||||
<div class="table-product-title">
|
||||
<a href="/products/product_history/client_id=${client_id}&product_id=${row[0]}" target="_blank">
|
||||
${data}
|
||||
</a>
|
||||
<span class="edit-product-title" offer-id="${row[0]}">
|
||||
<i class="bi bi-pencil-square"></i>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
}},
|
||||
{ width: 'auto', name: 'impressions' },
|
||||
{ width: 'auto', name: 'impressions_30' },
|
||||
{ width: 'auto', name: 'clicks' },
|
||||
{ width: 'auto', name: 'clicks_30' },
|
||||
{ width: 'auto', name: 'ctr' },
|
||||
{ width: 'auto', name: 'cost', className: "dt-type-numeric" },
|
||||
{ width: 'auto', name: 'cpc', className: "dt-type-numeric" },
|
||||
{ width: 'auto', name: 'conversions' },
|
||||
{ width: 'auto', name: 'conversions_value', className: "dt-type-numeric" },
|
||||
{ width: 'auto', name: 'roas' },
|
||||
{ width: 'auto', name: 'cl3', orderable: false },
|
||||
{ width: '200px', orderable: false }],
|
||||
order: [ [0, false], [ 4, 'desc'] ]
|
||||
});
|
||||
});
|
||||
|
||||
$( 'body' ).on( 'change', '.custom_label_4', function()
|
||||
{
|
||||
var input = $( this );
|
||||
var product_id = $( this ).attr( 'product_id' );
|
||||
var custom_label_4 = $( this ).val();
|
||||
|
||||
input.addClass('saving');
|
||||
$.ajax({
|
||||
url: '/products/save_custom_label_4/',
|
||||
type: 'POST',
|
||||
data: {
|
||||
product_id: product_id,
|
||||
custom_label_4: custom_label_4
|
||||
},
|
||||
success: function( response ) {
|
||||
},
|
||||
complete: function() {
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
192
templates/products/product_history.php
Normal file
192
templates/products/product_history.php
Normal file
@@ -0,0 +1,192 @@
|
||||
<div class="admin-form theme-primary">
|
||||
<div class="panel heading-border panel-primary">
|
||||
<div class="panel-body">
|
||||
<figure class="highcharts-figure">
|
||||
<div id="container"></div>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="admin-form theme-primary">
|
||||
<div class="panel heading-border panel-primary">
|
||||
<div class="panel-body">
|
||||
<table class="table" id="products">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Id</th>
|
||||
<th scope="col">Wyświetlenia</th>
|
||||
<th scope="col">Kliknięcia</th>
|
||||
<th scope="col">CTR</th>
|
||||
<th scope="col">Koszt</th>
|
||||
<th scope="col">Konwersje</th>
|
||||
<th scope="col">Wartość konwersji</th>
|
||||
<th scope="col">ROAS</th>
|
||||
<th scope="col">Data</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://code.highcharts.com/highcharts.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$( function() {
|
||||
var client_id = <?= $this -> client_id;?>;
|
||||
var product_id = <?= $this -> product_id;?>;
|
||||
|
||||
table = $( '#products' ).DataTable();
|
||||
table.destroy();
|
||||
|
||||
new DataTable( '#products', {
|
||||
ajax: {
|
||||
type: 'POST',
|
||||
url: '/products/get_product_history_table/client_id=' + client_id + '&product_id=' + product_id,
|
||||
},
|
||||
processing: true,
|
||||
serverSide: true,
|
||||
searching: false,
|
||||
columns: [{
|
||||
width: '100px',
|
||||
orderable: false
|
||||
},
|
||||
{
|
||||
width: '100px',
|
||||
name: 'impressions'
|
||||
},
|
||||
{
|
||||
width: '100px',
|
||||
name: 'clicks'
|
||||
},
|
||||
{
|
||||
width: '100px',
|
||||
name: 'ctr',
|
||||
className: "dt-type-numeric"
|
||||
},
|
||||
{
|
||||
width: '100px',
|
||||
name: 'cost',
|
||||
className: "dt-type-numeric"
|
||||
},
|
||||
{
|
||||
width: '100px',
|
||||
name: 'conversions'
|
||||
},
|
||||
{
|
||||
width: '175px',
|
||||
name: 'conversions_value',
|
||||
className: "dt-type-numeric"
|
||||
},
|
||||
{
|
||||
width: '100px',
|
||||
name: 'roas',
|
||||
className: "dt-type-numeric",
|
||||
orderable: false
|
||||
},
|
||||
{
|
||||
width: '100px',
|
||||
name: 'date_add'
|
||||
},
|
||||
],
|
||||
order: [
|
||||
[ 0, false],
|
||||
[ 8, 'desc']
|
||||
]
|
||||
});
|
||||
|
||||
$.ajax({
|
||||
url: '/products/get_product_history_table_chart/',
|
||||
method: 'POST',
|
||||
data: {
|
||||
client_id: client_id,
|
||||
product_id: product_id,
|
||||
},
|
||||
success: function(response) {
|
||||
const parsedData = JSON.parse(response);
|
||||
|
||||
let plotLines = [];
|
||||
|
||||
parsedData.comments.forEach(function(comment) {
|
||||
plotLines.push({
|
||||
color: '#333333',
|
||||
width: 1,
|
||||
value: parsedData.dates.indexOf(comment.date_add.split(' ')[0]),
|
||||
dashStyle: 'Solid',
|
||||
label: {
|
||||
text: comment.comment,
|
||||
align: 'left',
|
||||
style: {
|
||||
color: '#333333',
|
||||
fontSize: '14px'
|
||||
}
|
||||
},
|
||||
zIndex: 5
|
||||
});
|
||||
});
|
||||
|
||||
Highcharts.chart('container', {
|
||||
title: {
|
||||
text: ``,
|
||||
},
|
||||
subtitle: {
|
||||
text: ``,
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: ''
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
categories: parsedData.dates,
|
||||
labels: {
|
||||
style: {
|
||||
fontSize: '14px'
|
||||
},
|
||||
formatter: function() {
|
||||
var date = new Date(Date.parse(this.value));
|
||||
var day = date.getDate();
|
||||
var month = date.getMonth() + 1;
|
||||
var year = date.getFullYear();
|
||||
|
||||
if (day === 1 || this.isLast) {
|
||||
return `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
plotLines: plotLines
|
||||
},
|
||||
legend: {
|
||||
layout: 'vertical',
|
||||
align: 'right',
|
||||
verticalAlign: 'middle',
|
||||
itemStyle: {
|
||||
fontSize: '14px'
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
series: {
|
||||
label: {
|
||||
connectorAllowed: false
|
||||
},
|
||||
pointStart: 0
|
||||
},
|
||||
},
|
||||
series: parsedData.chart_data,
|
||||
tooltip: {
|
||||
style: {
|
||||
fontSize: '14px'
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
error: function (jqXHR, textStatus, errorThrown) {
|
||||
console.error('Error AJAX:', textStatus, errorThrown);
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user