Форматирование таблицы, колонка содержимого корзины заказа

parent 2248dbff
......@@ -44,9 +44,9 @@ return [
'type' => 'feed_transactions',
'fields' => ['Views','Clicks','Orders','OrderSum'],
'cats' => [
'Timestamp' => 'Дата и время',
'Timestamp' => 'Время<br />Дата',
'Basket' => 'Состав корзины',
'OrderSum' => 'Сумма',
'BasketCount' => 'Количество товаров'
]
/*
$cats => [
......
......@@ -163,30 +163,146 @@ input[type="checkbox"]
margin-top: 30px;
}
.table.table-striped.admin
.table.table-striped.admin.common
{
font-family: monospace;
}
.table.table-striped.admin.transaction
{
font-size: 13px;
}
.table.table-striped.admin.transaction thead
{
color: #337ab7;
line-height: 14px;
font-weight: bold;
}
table.table-striped.admin.transaction tbody
{
font-size: 12px;
}
.table.table-striped.admin thead.metric.sortable tr b
{
cursor: pointer;
}
.table.table-striped.admin thead.metric.sortable tr b.selected
.table.table-striped.admin thead.metric.sortable tr b.not-sorted
{
cursor: default;
}
.table.table-striped.admin.common thead.metric.sortable tr b.selected
{
color: #2CA02C;
}
.table.table-striped.admin thead.metric.sortable tr span
.table.table-striped.admin.common thead.metric.sortable tr span
{
display: inline-block;
border-bottom: 2px solid red;
}
.table.table-striped.admin.transaction thead tr th.OrderSum
{
text-align: right;
}
/* .b-basket-content */
.table.table-striped.admin.transaction thead tr th.period
{
width: 100px;
}
.table.table-striped.admin thead tr th.Timestamp
{
width: 100px;
line-height: 14px;
}
.table.table-striped.admin tbody td.Timestamp
{
line-height: 13px;
}
.table.table-striped.admin thead tr th.Basket
{
/*width: 500px;*/
line-height: 14px;
}
.table.table-striped.admin thead tr th.Basket .basket-link,
.table.table-striped.admin thead tr th.Basket .quantity,
.table.table-striped.admin thead tr th.Basket .price
{
display: inline-block;
}
.table.table-striped.admin thead tr th.Basket .basket-link
{
width: 520px;
}
.table.table-striped.admin thead tr th.Basket .quantity
{
width: 60px;
}
.table.table-striped.admin.transaction thead tr th.OrderSum
{
width: 100px;
}
.table.table-striped.admin td.Basket
{
padding: 2px;
}
.table.table-striped.admin.transaction td.OrderSum
{
font-weight: bold;
text-align: right;
}
.b-basket-content
{
margin: 4px;
padding: 2px;
/*max-width: 450px;*/
font-size: 12px;
line-height: 14px;
}
.b-basket-content .basket-link
{
display: inline-block;
width: 540px;
}
.b-basket-content .quantity
{
display: inline-block;
width: 50px;
}
.b-basket-content .price
{
display: inline-block;
width: 100px;
}
/*
.table.table-striped.admin thead.metric tr b .arrow
{
display: none;
......@@ -203,4 +319,4 @@ input[type="checkbox"]
{
display: none;
}
*/
\ No newline at end of file
\ No newline at end of file
......@@ -6,16 +6,42 @@ $(document).ready(function(){
$tableBody = $table.find('tbody').first(),
activeLines = [],
currentActiveLine,
dataTable;
dataTable,
currencyFields = ['admoney', 'salemoney', 'usdollarmoney', 'localmoney', 'AdMoney', 'OrderSum'],
notFormatFields = ['Timestamp', 'Basket'];
// Шаблон содержимого ячейки Basket
var templateBasketContent = _.template('\n'+
' <div class="b-basket-content"> \n' +
' <table> \n' +
' <tbody> \n' +
' <% _.each(data, function(item) { %> \n' +
' <tr> \n' +
' <td><a class="basket-link" href="<%=item.URL %>" target="_blank"><%=item.Title %></a></td> \n' +
' <td><span class="quantity"><%=item.Quantity %></span></td> \n' +
' <td><span class="price"><%=item.Price %> грн.</span></td> \n' +
' </tr> \n' +
' <% }) %> \n' +
' </tbody> \n' +
' </table> \n' +
' </div> \n' +
'');
var templateTimestampContent = _.template('\n'+
' <span style="font-weight: bold;"><%=data.time %></span><br /> \n' +
' <span><%=data.date %></span><br /> \n' +
'');
function valueFormat(value)
{
var
currencyFields = ['admoney', 'salemoney', 'usdollarmoney', 'localmoney', 'AdMoney', 'OrderSum'],
nonFormatFields = ['Timestamp'],
isCurrencyValue = currencyFields.indexOf(currentActiveLine) > -1,
isNonFormatValue = nonFormatFields.indexOf(currentActiveLine) > -1,
//format = (isCurrencyValue) ? d3.format(',.2f') : d3.format(',.0f');
isNonFormatValue = notFormatFields.indexOf(currentActiveLine) > -1,
format = (isCurrencyValue) ? d3.format(',.0f') : d3.format(',.0f');
if (isNonFormatValue) {
......@@ -27,25 +53,23 @@ $(document).ready(function(){
} else {
return format(value);
}
}
function RenderInterval(dataLineChartStat)
{
var dataPeriod = dataLineChartStat['period'];
var notSumFields = ['Timestamp'];
dataTable = dataLineChartStat;
// Добавляем строку "Итого":
if (!dataLineChartStat.report == 'transaction') {
$row = $('<tr style="font-weight: bold;">');
$row.append($('<td>').html("Итого"));
activeLines.forEach(function(item){
currentActiveLine = item;
var isNotSumValue = notSumFields.indexOf(currentActiveLine) > -1;
var isNotSumValue = notFormatFields.indexOf(currentActiveLine) > -1;
if (!isNotSumValue) {
var totalValue = 0;
......@@ -60,10 +84,12 @@ $(document).ready(function(){
});
$row.appendTo($tableContent);
}
// Сортировка строк в таблице:
var
sortField = false,
$selectedField = $('#table-line thead th b.selected'),
sortField = false,
isDesc = true;
if ($selectedField.length > 0) {
......@@ -73,7 +99,7 @@ $(document).ready(function(){
if (sortField) {
//console.log('AAA sortField = ', sortField);
//console.log('AAA sortField = ', sortField, ' isDesc = ', isDesc);
//console.log('AAA dataTable = ', dataTable);
var dataTableForSort = [];
......@@ -82,36 +108,60 @@ $(document).ready(function(){
var dataTableSortItem = {};
dataTableSortItem['period'] = dataTableItem;
activeLines.forEach(function(activeLine){
currentActiveLine = activeLine;
dataTableSortItem[activeLine] = valueFormat(dataTable[activeLine][ind]);
dataTableSortItem[activeLine] = dataTable[activeLine][ind];
});
dataTableForSort.push(dataTableSortItem);
});
//console.log('AAA dataTableForSort 111= ', dataTableForSort);
dataTableForSort.sort(function(a,b){
if (sortField == 'Timestamp') {
var
aT = new Date(a[sortField]),
bT = new Date(b[sortField]);
return (isDesc) ? bT-aT : aT-bT;
} else {
if (isDesc) {
return b[sortField]-a[sortField];
} else {
return a[sortField]-b[sortField];
}
}
});
//console.log('AAA dataTableForSort = ', dataTableForSort);
dataTableForSort.forEach(function(item){
$row = $('<tr>');
$row.append($('<td>').html(item['period']));
activeLines.forEach(function(line){
$row.append($('<td>').html(item[line]));
if (line == 'Basket') {
$row.append($('<td class="'+ line +'">').append(templateBasketContent({data: item[line]})));
} else if (line == 'Timestamp') {
var
dateTimeValue = item[line].split(' '),
dateVal = dateTimeValue[0],
timeVal = dateTimeValue[1].split(':'),
timeValCorrected = timeVal[0]+':'+timeVal[1];
$row.append($('<td class="'+ line +'">').append(templateTimestampContent({
data: {date: dateVal, time: timeValCorrected}
})));
} else {
currentActiveLine = line;
$row.append($('<td class="'+ line +'">').html(valueFormat(item[line])));
}
});
$row.appendTo($tableContent);
});
} else {
for(var i = dataPeriod.length-1; i >= 0; i--) {
//for(var i = 0; i < dataPeriod.length; i++) {
var
date = dataPeriod[i],
......@@ -125,7 +175,21 @@ $(document).ready(function(){
$row = $('<tr>');
$row.append($('<td>').html(date));
activeLines.forEach(function(item){
$row.append($('<td>').html(values[item]));
if (item == 'Basket') {
$row.append($('<td class="'+ item +'">').append(templateBasketContent({data: values[item]})));
} else if (item == 'Timestamp') {
var
dateTimeValue = values[item].split(' '),
dateVal = dateTimeValue[0],
timeVal = dateTimeValue[1].split(':'),
timeValCorrected = timeVal[0]+':'+timeVal[1];
$row.append($('<td class="'+ item +'">').append(templateTimestampContent({
data: {date: dateVal, time: timeValCorrected}
})));
} else {
$row.append($('<td class="'+ item +'">').html(values[item]));
}
});
$row.appendTo($tableContent);
}
......@@ -143,8 +207,8 @@ $(document).ready(function(){
activeLines.push($(this).attr('id'));
});
console.log('AAA TableStat render: ', dataLineChartStat);
console.log('AAA activeLines: ', activeLines);
//console.log('AAA TableStat render: ', dataLineChartStat);
//console.log('AAA activeLines: ', activeLines);
dataTable = {};
activeLines.forEach(function(item){
......
......@@ -141,7 +141,14 @@ $(document).ready(function(){
// Сортировка по колонкам внутри таблицы:
var $tableHeadCols = $('#table-line thead.metric.sortable th b');
$tableHeadCols.on('click', function(){
var $this = $(this);
var
$this = $(this),
$parent = $this.parent(),
categoryName = $parent.data('id');
if (['period', 'Basket'].indexOf(categoryName)>-1) {
return false;
}
$tableHeadCols.removeClass('selected');
$this.addClass('selected').toggleClass('desc');
......
......@@ -65,7 +65,6 @@ class Statistics
);
}
//return $dataRequest;
$stats = $this->apiRequest($dataRequest);
//return $stats;
......@@ -82,6 +81,7 @@ class Statistics
$dataStats = array();
$dataStats['report'] = $report_type;
// Данные для отчета 'common':
if ($report_type == 'common') {
$period = array();
......@@ -228,32 +228,20 @@ class Statistics
$dataStats['period'] = $period;
}
// Данные для отчета 'transaction':
if ($report_type == 'transaction') {
$period = array();
//$data = [];
$dataStats['period'] = [];
$dataStats['Timestamp'] = [];
$dataStats['OrderSum'] = [];
$dataStats['BasketCount'] = [];
$dataStats['Basket'] = [];
foreach ($stats['data'] as $item) {
$period[] = $item['TransactionID'];
$dataStats['period'][] = $item['ForeignID'];
$dataStats['Timestamp'][] = $item['Timestamp'];
$dataStats['OrderSum'][] = $item['OrderSum'];
$dataStats['BasketCount'][] = count($item['Basket']);
/*
$data[] = array(
'Timestamp' => $item['Timestamp'],
'OrderSum' => $item['OrderSum'],
'BasketCount' => count($item['Basket']),
);
*/
$dataStats['Basket'][] = $item['Basket'];
}
$dataStats['period'] = $period;
//$dataStats['data'] = $data;
}
$stats = $dataStats;
......
......@@ -164,25 +164,31 @@ if (!$error) {
<?php /* Таблица */ ?>
<div id="table-stat" class="b-table_wrapp">
<div class="b-content__loading"></div>
<table id="table-line" class="table table-striped admin">
<table id="table-line" class="table table-striped admin <?= $current_report ?>">
<thead class="metric sortable">
<tr>
<th>
<th class="period" data-id="period">
<?php if($current_report == 'common'): ?>
<b class="main-cat date selected"><?= _t('Дата')?></b>
<?php /* ?>/ <b class="main-cat campaign"><?= _t('Кампания')?></b><?php */ ?>
<?php else: ?>
<b class="main-cat date selected"><?= _t('Транзакция')?></b>
<b class="main-cat date selected not-sorted"><?= _t('#OrderID')?></b>
<?php endif; ?>
</th>
<?php foreach($report_cats as $name => $title): ?>
<th>
<th class="<?= $name ?>" data-id="<?= $name ?>">
<?php if ($name == 'Basket'): ?>
<b class="cat not-sorted" id="<?= $name ?>"><?= _t($title)?></b><br />
<b class="basket-link not-sorted">Товар</b> <b class="quantity not-sorted">Кол-во</b> <b class="price not-sorted">Цена</b>
<?php else: ?>
<?php if ($current_report == 'common'): ?>
<span style="border-color: <?= $colors_active_lines[$name] ?>;">
<input type="checkbox" data-field="<?= $name ?>" checked />
</span>
<?php endif; ?>
<b class="cat" id="<?= $name ?>"><?= _t($title)?><!--<b class="arrow asc">&and;</b><b class="arrow desc">&or;</b>--></b>
<b class="cat" id="<?= $name ?>"><?= _t($title)?><?php if ($current_report == 'transaction'): ?><b class="arrow asc">&#9650;</b><b class="arrow desc">&#9660;</b><?php endif; ?></b>
<?php endif; ?>
</th>
<?php endforeach; ?>
</tr>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment