merge with chart
This commit is contained in:
Yan
@@ -1,164 +1,56 @@
|
||||
|
||||
<!-- Page Content -->
|
||||
<div class="row">
|
||||
<div class="col-md-9 col-lg-9">
|
||||
<h4><strong>Role Features</strong></h4>
|
||||
<!-- <p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p> -->
|
||||
<div class="panel-group" id="accordion">
|
||||
<% if current_user.role == 'administrator' %>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h4 class="panel-title">
|
||||
Administrator
|
||||
</h4>
|
||||
</div>
|
||||
<div id="admin" class="panel-collapse collapse in">
|
||||
<div class="panel-body">
|
||||
<ul class="col-md-4">
|
||||
<li><strong>All Settings</strong></li>
|
||||
<ul>
|
||||
<li>Zone</li>
|
||||
<li>OQS</li>
|
||||
<li>Menu</li>
|
||||
<li>Cashier Terminal</li>
|
||||
<li>Payment</li>
|
||||
<li>Merbership</li>
|
||||
<li>Print</li>
|
||||
<li>Employees</li>
|
||||
<li>Accounts</li>
|
||||
</ul>
|
||||
</ul>
|
||||
<ul class="col-md-4">
|
||||
<li><strong>Transactions</strong></li>
|
||||
<ul class="">
|
||||
<li>Order</li>
|
||||
<li>Sale</li>
|
||||
<li>Credit Note</li>
|
||||
</ul><br>
|
||||
<li><strong>Reports</strong></li>
|
||||
<ul class="">
|
||||
<li>Daily Sale</li>
|
||||
<li>Sale Item</li>
|
||||
<li>Receipt</li>
|
||||
<li>Shift Sale</li>
|
||||
<li>Credit Sale</li>
|
||||
<li>Void Sale</li>
|
||||
</ul>
|
||||
</ul>
|
||||
<ul class="col-md-4">
|
||||
<li><strong>OQS</strong></li><br>
|
||||
<li><strong>Cashier</strong></li><br>
|
||||
<li><strong>CRM</strong></li>
|
||||
</ul>
|
||||
<div class="row">
|
||||
<div class="col-md-9 col-lg-9">
|
||||
<div class="panel-group" id="accordion">
|
||||
<% if current_user.role == 'administrator' || current_user.role == 'manager' %>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="panel">
|
||||
<div class="panel-heading"><h4>Top Products</h4></div>
|
||||
<div class="panel-body">
|
||||
<canvas id="top_products" width="400" height="200"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="panel">
|
||||
<div class="panel-heading"><h4>Inventory</h4></div>
|
||||
<div class="panel-body">
|
||||
<canvas id="inventory" width="400" height="200"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% elsif current_user.role == 'manager' %>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h4 class="panel-title">
|
||||
Manager
|
||||
</h4>
|
||||
</div>
|
||||
<div id="admin" class="panel-collapse collapse in">
|
||||
<div class="panel-body">
|
||||
<ul class="col-md-4">
|
||||
<li class="">All Settings</li>
|
||||
<ul class="">
|
||||
<li>Zone</li>
|
||||
<li>OQS</li>
|
||||
<li>Menu</li>
|
||||
<li>Cashier Terminal</li>
|
||||
<li>Print</li>
|
||||
<li>Employees</li>
|
||||
<li>Accounts</li>
|
||||
</ul>
|
||||
</ul>
|
||||
<ul class="col-md-4">
|
||||
<li class="">Transactions</li>
|
||||
<ul class="">
|
||||
<li>Order</li>
|
||||
<li>Sale</li>
|
||||
<li>Credit Note</li>
|
||||
</ul><br>
|
||||
<li>Reports</li>
|
||||
<ul class="">
|
||||
<li>Daily Sale</li>
|
||||
<li>Sale Item</li>
|
||||
<li>Receipt</li>
|
||||
<li>Shift Sale</li>
|
||||
<li>Credit Sale</li>
|
||||
<li>Void Sale</li>
|
||||
</ul>
|
||||
</ul>
|
||||
<ul class="col-md-4">
|
||||
<li>OQS</li><br>
|
||||
<li>Cashier</li><br>
|
||||
<li>CRM</li>
|
||||
</ul>
|
||||
<br><br>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="panel">
|
||||
<div class="panel-heading"><h4>Hourly Sales</h4></div>
|
||||
<div class="panel-body">
|
||||
<canvas id="hourly_sales" width="400" height="200"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="panel">
|
||||
<div class="panel-heading"><h4>Employee Sales</h4></div>
|
||||
<div class="panel-body">
|
||||
<canvas id="employee_sales" width="400" height="200"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% elsif current_user.role == 'supervisour' %>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h4 class="panel-title">
|
||||
Supervisor
|
||||
</h4>
|
||||
</div>
|
||||
<div id="supervisor" class="panel-collapse collapse in">
|
||||
<div class="panel-body">
|
||||
<ul class="">
|
||||
<li>OQS</li>
|
||||
<ul>
|
||||
<li class="">Void</li>
|
||||
<li class="">FOC</li>
|
||||
<li class="">Edit</li>
|
||||
<li class="">Credit</li>
|
||||
<li class="">Payment</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% elsif current_user.role == 'cashier' %>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h4 class="panel-title">
|
||||
Cashier
|
||||
</h4>
|
||||
</div>
|
||||
<div id="cashier" class="panel-collapse collapse in">
|
||||
<div class="panel-body">
|
||||
<ul class="">
|
||||
<li class="">Cashier Panel except Edit and Void</li>
|
||||
<li class="">Sale and Order</li>
|
||||
<li class="">and Queue in CRM</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% elsif current_user.role == 'account' %>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h4 class="panel-title">
|
||||
Accountant
|
||||
</h4>
|
||||
</div>
|
||||
<div id="accountant" class="panel-collapse collapse in">
|
||||
<div class="panel-body">
|
||||
<ul class="">
|
||||
<li class="">Daily Sale Report</li>
|
||||
<li class="">Sale Item Report</li>
|
||||
<li class="">Receipt No Report</li>
|
||||
<li class="">ShiftSale Report</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<% elsif current_user.role == 'manager' %>
|
||||
|
||||
<% elsif current_user.role == 'supervisour' %>
|
||||
|
||||
<% elsif current_user.role == 'cashier' %>
|
||||
|
||||
|
||||
<% elsif current_user.role == 'account' %>
|
||||
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<div class="card" id="oqs" onclick="location.href='<%= oqs_root_path %>'">
|
||||
@@ -177,22 +69,196 @@
|
||||
<div class="card-content dashboard-nav">Inventory</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="" style="background-color: inherit;">
|
||||
<div class="">
|
||||
<div class="page-header center-text">
|
||||
<h4 class="footer-header">
|
||||
<%= @shop.name %>
|
||||
</h4>
|
||||
</div>
|
||||
<div class="center-text">
|
||||
<%= @shop.address %>
|
||||
</div>
|
||||
<div class="center-text">
|
||||
<%= @shop.phone_no %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="js/Chart.js"></script>
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
var top_products = JSON.parse('<%= @top_products.to_json.html_safe %>');
|
||||
var hourly_sales = JSON.parse('<%= @hourly_sales.to_json.html_safe %>');
|
||||
var employee_sales = JSON.parse('<%= @employee_sales.to_json.html_safe %>');
|
||||
var inventories = JSON.parse('<%= @inventories.to_json.html_safe %>');
|
||||
showTopProductsChartData(top_products);
|
||||
showHourlySalesChartData(hourly_sales);
|
||||
showEmployeeSalesChartData(employee_sales);
|
||||
showInventoryChartData(inventories);
|
||||
});
|
||||
|
||||
function randomColorGenerator () {
|
||||
return '#' + (Math.random().toString(16) + '0000000').slice(2, 8);
|
||||
};
|
||||
|
||||
function showTopProductsChartData(top_products) {
|
||||
var labels = [];
|
||||
var datasets = [];
|
||||
var backgroundColor = [];
|
||||
|
||||
if(top_products!=undefined && top_products!=''){
|
||||
if(top_products.length>0){
|
||||
$.each(top_products,function(k,val){
|
||||
labels.push(val.product_name);
|
||||
datasets.push(val.total_item);
|
||||
backgroundColor.push(randomColorGenerator());
|
||||
});
|
||||
|
||||
var chart = new Chart("top_products", {
|
||||
type: 'pie',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
data: datasets,
|
||||
backgroundColor: backgroundColor
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
legend: {
|
||||
labels: {
|
||||
fontColor: 'black'
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function showHourlySalesChartData(hourly_sales) {
|
||||
var labels = [];
|
||||
var datasets = [];
|
||||
var backgroundColor = [];
|
||||
|
||||
if(hourly_sales!=undefined && hourly_sales!=''){
|
||||
if(Object.keys(hourly_sales).length > 0){
|
||||
$.each(hourly_sales,function(k,val){
|
||||
labels.push(k.toString());
|
||||
datasets.push(val);
|
||||
backgroundColor.push(randomColorGenerator());
|
||||
});
|
||||
|
||||
|
||||
var myChart = new Chart("hourly_sales", {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
label: '',
|
||||
data: datasets,
|
||||
backgroundColor: backgroundColor,
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
legend: {
|
||||
display:false
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
stacked: true,
|
||||
categorySpacing: 0,
|
||||
barPercentage: 0.5
|
||||
}],
|
||||
yAxes: [{
|
||||
stacked: true,
|
||||
ticks: {
|
||||
beginAtZero:true
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function showEmployeeSalesChartData(employee_sales) {
|
||||
var labels = [];
|
||||
var datasets = [];
|
||||
var backgroundColor = [];
|
||||
|
||||
if(employee_sales!=undefined && employee_sales!=''){
|
||||
if(Object.keys(employee_sales).length > 0){
|
||||
$.each(employee_sales,function(k,val){
|
||||
labels.push(k.toString());
|
||||
datasets.push(val);
|
||||
backgroundColor.push(randomColorGenerator());
|
||||
});
|
||||
|
||||
var myChart = new Chart("employee_sales", {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
label: '',
|
||||
data: datasets,
|
||||
backgroundColor: backgroundColor,
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
legend: {
|
||||
display:false
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
stacked: true,
|
||||
categorySpacing: 0,
|
||||
barPercentage: 0.5
|
||||
}],
|
||||
yAxes: [{
|
||||
stacked: true,
|
||||
ticks: {
|
||||
beginAtZero:true
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function showInventoryChartData(inventories) {
|
||||
var labels = [];
|
||||
var datasets = [];
|
||||
var borderColor = [];
|
||||
|
||||
if(inventories!=undefined && inventories!=''){
|
||||
if(Object.keys(inventories).length > 0){
|
||||
$.each(inventories,function(k,val){
|
||||
labels.push(k.toString());
|
||||
datasets.push(val);
|
||||
borderColor.push(randomColorGenerator());
|
||||
});
|
||||
|
||||
var myChart = new Chart("inventory", {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
fill: false,
|
||||
data: datasets,
|
||||
borderColor: borderColor
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
legend: {
|
||||
display:false
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
stacked: true
|
||||
}],
|
||||
yAxes: [{
|
||||
stacked: false,
|
||||
ticks: {
|
||||
beginAtZero:true
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user