@mobiage/homescreen
Version:
cp-mbg-homescreen
247 lines (221 loc) • 7.51 kB
HTML
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"
content="ie=edge">
<title>Demo in Angular.js</title>
<link rel="stylesheet"
href="../dist/mobiage-homescreen.css" />
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,700"
rel="stylesheet">
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.1.0/css/all.css"
integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt"
crossorigin="anonymous">
<style>
.testeContainer {
width: 100%;
height: 100vh;
background-color: #f8f8f8;
}
.testeBarraTopo {
width: 100%;
height: 80px;
background-color: #ffffff;
border-bottom: 1px solid rgb(235, 235, 235);
}
.testeMenuLateral {
width: 220px;
height: calc(100vh - 80px);
background-color: #f8f8f8;
display: inline-block;
vertical-align: top;
}
.testeConteudo {
height: calc(100vh - 80px);
width: calc(100% - 230px);
background-color: #f8f8f8;
display: inline-block;
vertical-align: top;
overflow-y: auto;
}
.testeConteudoTop {
height: 200px;
width: 100%;
margin-top: 10px;
background-color: #f8f8f8;
}
body {
font-family: 'Montserrat', sans-serif;
}
</style>
</head>
<body ng-app="app"
ng-controller="ctrl">
<div class="testeContainer">
<div class="testeBarraTopo"></div>
<div class="testeMenuLateral"></div>
<div class="testeConteudo">
<mbg-homescreen config="homeConfig"></mbg-homescreen>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="../dist/mobiage-homescreen.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.4.2/firebase.js"></script>
<script>
angular.module('app', []).controller('ctrl', function ($scope) {
const organizationCode = '2.';
var config = {
apiKey: "AIzaSyCpNjqpFQJ-ptCOMsqZjyDUx33vB_j_yOk",
authDomain: "mobiage-ac405.firebaseapp.com",
databaseURL: "https://mobiage-ac405.firebaseio.com",
projectId: "mobiage-ac405",
storageBucket: "mobiage-ac405.appspot.com",
messagingSenderId: "224462853887"
};
firebase.initializeApp(config);
const db = firebase.firestore();
db.settings({ timestampsInSnapshots: true });
const getTotal = (homeScreenCallback) => {
db.collection('metadata')
.doc(organizationCode)
.collection('dashboard')
.doc(new Date().getDate() + ':' + (Number(new Date().getMonth()) + 1) + ':' + new Date().getFullYear())
.collection('sales')
.onSnapshot((response) => {
const total = response.docs.reduce((value, doc) => {
const data = doc.data();
return value + Number(data.value);
}, 0);
homeScreenCallback('R$' + (total).toLocaleString('pt-BR'));
});
}
const getTotalItens = (homeScreenCallback) => {
db.collection('metadata')
.doc(organizationCode)
.collection('dashboard')
.doc(new Date().getDate() + ':' + (Number(new Date().getMonth()) + 1) + ':' + new Date().getFullYear())
.collection('sales')
.onSnapshot((response) => {
const total = response.docs.reduce((value, doc) => {
const data = doc.data();
return value + Number(data.itemsCount);
}, 0);
homeScreenCallback(total);
});
}
const getCountSales = (homeScreenCallback) => {
db.collection('metadata')
.doc(organizationCode)
.collection('dashboard')
.doc(new Date().getDate() + ':' + (Number(new Date().getMonth()) + 1) + ':' + new Date().getFullYear())
.collection('sales')
.onSnapshot((response) => {
homeScreenCallback(response.size);
});
}
const getTicketMedio = (homeScreenCallback) => {
db.collection('metadata')
.doc(organizationCode)
.collection('dashboard')
.doc(new Date().getDate() + ':' + (Number(new Date().getMonth()) + 1) + ':' + new Date().getFullYear())
.collection('sales')
.onSnapshot((response) => {
const ticketMedio = response.docs.reduce((value, doc) => {
const data = doc.data();
return value + Number(data.value);
}, 0) / response.size;
homeScreenCallback('R$' + (ticketMedio).toLocaleString('pt-BR'));
});
}
const getChart = (homeScreenCallback) => {
db.collection('metadata')
.doc(organizationCode)
.collection('dashboard')
.orderBy('createdAt', 'asc')
.limit(7)
.onSnapshot((response) => {
Promise.all(response.docs.map((doc) => doc.ref.collection('sales').get()))
.then((docsSnapshot) => {
const data = [];
docsSnapshot.forEach((docSnapshot, i) => {
const total = docSnapshot.docs.reduce((value, doc) => {
const data = doc.data();
return value + Number(data.value);
}, 0);
data[i] = total;
});
homeScreenCallback([10000, 12000, 30000]);
});
});
}
$scope.homeConfig = {
tabs: [
{
name: 'Geral',
chart: {
format: 'money',
series: [
{
name: 'Realizado',
sync: (context) => {
getChart((value) => {
context.setValue(value);
})
}
}
]
},
cards: [
{
icon: 'far fa-smile',
text: 'Só hoje, sua loja vendeu:',
color: '#d3e000',
sync: (context) => {
getTotal((value) => {
context.setValue(value);
})
}
},
{
icon: 'far fa-calendar-alt',
text: 'Quantidade de vendas hoje:',
color: '#7e39c5',
sync: (context) => {
getCountSales((value) => {
context.setValue(value);
})
}
},
{
icon: 'fas fa-chart-bar',
text: 'Ticket médio do dia:',
color: '#00c7c4',
sync: (context) => {
getTicketMedio((value) => {
context.setValue(value);
})
}
},
{
icon: 'far fa-money-bill-alt',
text: 'Quantidade de itens vendidos:',
color: '#ff1057',
dark: true,
sync: (context) => {
getTotalItens((value) => {
context.setValue(value);
})
}
}
]
}
]
};
});
</script>
</body>
</html>