<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/renatoat/pen/xhBDt?depth=everything&order=popularity&page=18&q=ionic&show_forks=false" />
<style class="cp-pen-styles">/* this is just an example - don't use !important */
.item-header {
font-size: 12px !important;
font-weight: bold;
}
.item-footer {
font-size: 12px !important;
font-weight: bold;
/* the workaround below "fixes" the scrolling */
margin-bottom: 28px !important;
}
.col-right {
text-align: right;
padding: 3px 5px 3px 5px !important;
}
.col-sep {
border-left: 1px solid lightgray;
}
.col-left {
padding: 3px 5px 3px 5px !important;
}
.min-75 { min-width: 75px; }
.min-50 { min-width: 50px; }
.min-180 { min-width: 180px; }
.min-705 { min-width: 705px; }
.row-item {
padding: 0px !important;
margin-left: 0 !important;
font-size: 12px !important;
}
</style></head><body>
<link href="https://code.ionicframework.com/1.0.0-beta.8/css/ionic.css" rel="stylesheet">
<script src="https://code.ionicframework.com/1.0.0-beta.8/js/ionic.js"></script>
<script src="https://code.ionicframework.com/1.0.0-beta.8/js/angular/angular.js"></script>
<script src="https://code.ionicframework.com/1.0.0-beta.8/js/angular/angular-animate.js"></script>
<script src="https://code.ionicframework.com/1.0.0-beta.8/js/angular-ui/angular-ui-router.js"></script>
<script src="https://code.ionicframework.com/1.0.0-beta.8/js/angular/angular-sanitize.js"></script>
<script src="https://code.ionicframework.com/1.0.0-beta.8/js/angular/angular-resource.js"></script>
<script src="https://code.ionicframework.com/1.0.0-beta.8/js/ionic-angular.js"></script>
<ion-side-menus ng-app="app">
<ion-side-menu-content scroll="true" drag-content="false" ng-controller="AppCtrl">
<ion-header-bar class="bar bar-header bar-positive">
<a class="button button-icon icon ion-navicon" ng-click="toggleLeft()"></a>
<a class="button button-icon icon ion-refresh" ng-click="toggleLeft()"></a>
<a class="button button-icon pull-right icon ion-search" ng-click="toggleLeft()"></a>
<h1 class="title">
Something here
</h1>
</ion-header-bar>
<ion-content has-header="true" scroll="false">
<ion-scroll direction="x" style="width: 100%" scrollbar-x="false" delegate-handle="head" zooming="true" on-scroll="scrollMirror('head', 'list')">
<div class="item item-header item-positive row row-item min-705">
<div class="col col-left col-20 min-180" ng-click="sort('descricao')">Estabelecimento</div>
<div class="col col-right min-75" ng-click="sort('valorLiquido')">Líquido (R$)</div>
<div class="col col-right min-75" ng-click="sort('valorBruto')">Bruto (R$)</div>
<div class="col col-right min-75" ng-click="sort('valorDesconto')">Desc. (R$)</div>
<div class="col col-right min-50" ng-click="sort('vendas')">Tickets</div>
<div class="col col-right min-50" ng-click="sort('ticketMedio')">T.M.</div>
<div class="col col-right min-50" ng-click="sort('quantidade')">Peças</div>
<div class="col col-right min-50" ng-click="sort('quantidadeMedia')">P.A.</div>
<div class="col col-right min-50" ng-click="sort('precoMedio')">P.M.V.</div>
<div class="col col-right min-50" ng-click="sort('markup')">Mkp(%)</div>
</div>
</ion-scroll>
<ion-scroll direction="xy" style="height: 100%" zooming="true" on-scroll="scrollMirror('list', 'head')" delegate-handle="list">
<div class="item row row-item min-705" ng-repeat="row in data | orderBy:predicate:desc">
<div class="col col-left col-20 min-180">{{ row.descricao }}</div>
<div class="col col-right col-sep min-75">{{ row.valorLiquido | number: 2 }}</div>
<div class="col col-right col-sep min-75">{{ row.valorBruto | number: 2 }}</div>
<div class="col col-right col-sep min-75">{{ row.valorDesconto | number: 2 }}</div>
<div class="col col-right col-sep min-50">{{ row.vendas | number: 0 }}</div>
<div class="col col-right col-sep min-50">{{ row.ticketMedio | number: 2 }}</div>
<div class="col col-right col-sep min-50">{{ row.quantidade | number: 0 }}</div>
<div class="col col-right col-sep min-50">{{ row.quantidadeMedia | number: 2 }}</div>
<div class="col col-right col-sep min-50">{{ row.precoMedio | number: 2 }}</div>
<div class="col col-right col-sep min-50">{{ row.markup | number: 2 }}</div>
</div>
<div class="item item-footer item-positive row row-item min-705">
<div class="col col-left col-20 min-180"></div>
<div class="col col-right min-75">{{ sum.valorLiquido | number: 2 }}</div>
<div class="col col-right min-75">{{ sum.valorBruto | number: 2 }}</div>
<div class="col col-right min-75">{{ sum.valorDesconto | number: 2 }}</div>
<div class="col col-right min-50">{{ sum.vendas | number: 0 }}</div>
<div class="col col-right min-50">{{ sum.ticketMedio | number: 2 }}</div>
<div class="col col-right min-50">{{ sum.quantidade | number: 0 }}</div>
<div class="col col-right min-50">{{ sum.quantidadeMedia | number: 2 }}</div>
<div class="col col-right min-50">{{ sum.precoMedio | number: 2 }}</div>
<div class="col col-right min-50">{{ sum.markup | number: 2 }}</div>
</div>
</ion-scroll>
</ion-content>
</ion-side-menu-content>
</ion-side-menus>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script>
<script >angular.module('app', ['ionic', 'ngAnimate']).controller('AppCtrl', function($scope, $ionicScrollDelegate, $ionicSideMenuDelegate) {$scope.data = [
{"id":1,"descricao":"TEST1","valorLiquido":22003.06,"valorBruto":22807.63,"vendas":209,
"quantidade":567,"custo":11104.06,"valorDesconto":804.57,"markup":98.15,"ticketMedio":105.28,"quantidadeMedia":2.71,"precoMedio":38.81
},{"id":6,"descricao":"TEST2","valorLiquido":10351.62,"valorBruto":10458.54,"vendas":109,"quantidade":286,
"custo":4778.04,"valorDesconto":106.92,"markup":116.65,"ticketMedio":94.97,"quantidadeMedia":2.62,"precoMedio":36.19
},{"id":7,"descricao":"TEST3","valorLiquido":16517.80,"valorBruto":16935.61,"vendas":129,"quantidade":464,"custo":8092.04, "valorDesconto":417.81,"markup":104.12,"ticketMedio":128.05,"quantidadeMedia":3.6,"precoMedio":35.6
},{"id":8,"descricao":"TEST11","valorLiquido":4559.11,"valorBruto":4741.61,"vendas":62,"quantidade":160,"custo":2245.48,
"valorDesconto":182.5,"markup":103.04,"ticketMedio":73.53,"quantidadeMedia":2.58,"precoMedio":28.49
},{"id":10,"descricao":"TEST4","valorLiquido":7998.88,"valorBruto":9047.07,"vendas":58,"quantidade":171,
"custo":4428.38,"valorDesconto":1048.19,"markup":80.63,"ticketMedio":137.91,"quantidadeMedia":2.95,"precoMedio":46.78
},{"id":14,"descricao":"TEST11","valorLiquido":12517.09,"valorBruto":12766.19,"vendas":98,"quantidade":294,"custo":5546.59,
"valorDesconto":249.1,"markup":125.67,"ticketMedio":127.73,"quantidadeMedia":3.0,"precoMedio":42.58
},{"id":321,"descricao":"TEST6","valorLiquido":10352.53,"valorBruto":10846.78,"vendas":135,"quantidade":399,
"custo":4873.04,"valorDesconto":494.25,"markup":112.45,"ticketMedio":76.69,"quantidadeMedia":2.96,"precoMedio":25.95
},{"id":123,"descricao":"TEST5","valorLiquido":494.91,"valorBruto":494.91,"vendas":5,"quantidade":18,"custo":222.61,
"valorDesconto":0.0,"markup":122.33,"ticketMedio":98.98,"quantidadeMedia":3.6,"precoMedio":27.5
},{"id":333,"descricao":"TEST7","valorLiquido":2480.96,"valorBruto":2867.50,
"vendas":50,"quantidade":118,"custo":1311.31,"valorDesconto":386.54,"markup":89.2,"ticketMedio":49.62,"quantidadeMedia":2.36,"precoMedio":21.03
},{"id":112,"descricao":"TEST8","valorLiquido":1535.33,"valorBruto":1645.22,"vendas":12,"quantidade":35,"custo":696.28,
"valorDesconto":109.89,"markup":120.5,"ticketMedio":127.94,"quantidadeMedia":2.92,"precoMedio":43.87
},{"id":259770,"descricao":"TEST10","valorLiquido":2880.78,"valorBruto":2944.22,"vendas":20,"quantidade":66,
"custo":1351.83,"valorDesconto":63.44,"markup":113.1,"ticketMedio":144.04,"quantidadeMedia":3.3,"precoMedio":43.65
},{"id":1212,"descricao":"TEST9","valorLiquido":2552.77,"valorBruto":2616.48,"vendas":21,"quantidade":58,
"custo":863.53,"valorDesconto":63.72,"markup":195.62,"ticketMedio":121.56,"quantidadeMedia":2.76,"precoMedio":44.01}
];
// calculating the summary
$scope.sum = {
valorLiquido: 0, valorBruto: 0, vendas: 0, quantidade: 0, custo: 0, valorDesconto: 0
};
for (var idx = 0; idx < $scope.data.length-1; idx++) {if (window.CP.shouldStopExecution(2)){break;}
for (var key in $scope.sum) {if (window.CP.shouldStopExecution(1)){break;}
$scope.sum[key] += $scope.data[idx][key];
}
window.CP.exitedLoop(1);
}
window.CP.exitedLoop(2);
$scope.sum.markup = ($scope.sum.valorLiquido / $scope.sum.custo - 1) * 100;
$scope.sum.ticketMedio = $scope.sum.valorLiquido / $scope.sum.vendas;
$scope.sum.quantidadeMedia = $scope.sum.quantidade / $scope.sum.vendas;
$scope.sum.precoMedio = $scope.sum.valorLiquido / $scope.sum.quantidade;
// table sorting
$scope.predicate = 'descricao';
$scope.desc = false;
$scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
};
$scope.sort = function(key) {
if ($scope.predicate == key)
$scope.desc = !$scope.desc;
else
$scope.predicate = key;
}
var adjusting = false;
$scope.scrollMirror = function(from, to) {
if (adjusting) {
adjusting = false;
} else {
// Mirroring zoom level
var zoomFrom = $ionicScrollDelegate.$getByHandle(from).getScrollView().getValues().zoom;
var zoomTo = $ionicScrollDelegate.$getByHandle(to).getScrollView().getValues().zoom;
if (zoomFrom != zoomTo) {
$ionicScrollDelegate.$getByHandle(to).getScrollView().zoomTo(zoomFrom);
}
// Mirroring left position
$ionicScrollDelegate.$getByHandle(to).scrollTo($ionicScrollDelegate.$getByHandle(from).getScrollPosition().left,
$ionicScrollDelegate.$getByHandle(to).getScrollPosition().top);
adjusting = true;
}
}
});
//# sourceURL=pen.js
</script>
</body></html>
