init project
This commit is contained in:
411
resources/views/home.blade.php
Normal file
411
resources/views/home.blade.php
Normal file
@@ -0,0 +1,411 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
|
||||
<head>
|
||||
@include('layout.header')
|
||||
<style>
|
||||
.content-wrapper .card {
|
||||
border: 0px !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="row" id="x" style="display: none;">
|
||||
<div class="col-12">
|
||||
<span class="d-flex align-items-center purchase-popup">
|
||||
<i class="typcn typcn-delete-outline" id="bannerClose"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-scroller">
|
||||
@include('layout.navbar')
|
||||
<!-- partial -->
|
||||
@include('layout.breadscrum')
|
||||
<div class="container-fluid page-body-wrapper">
|
||||
|
||||
@include('layout.sidebar')
|
||||
|
||||
<!-- partial -->
|
||||
<div class="main-panel">
|
||||
<div class="content-wrapper">
|
||||
<div class="row">
|
||||
<div class="col-xl-12 mb-0 grid-margin stretch-card flex-column">
|
||||
<div class="row">
|
||||
|
||||
<div class="col-md-3 grid-margin stretch-card">
|
||||
<div class="card " style="border-left: 5px solid #33db40 !important;" >
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-uppercase mb-1"> {{ __('general.today_sample') }}</div>
|
||||
<div class="h5 mb-0 font-weight-bold">{{$todaySamples}}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-flask fa-2x text-gray"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3 grid-margin stretch-card">
|
||||
<div class="card" style="border-left: 5px solid #5881dd !important;" >
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-uppercase mb-1"> {{ __('general.this_month_sample') }}</div>
|
||||
<div class="h5 mb-0 font-weight-bold">{{$thisMonthSamples}}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-flask fa-2x text-gray"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 grid-margin stretch-card">
|
||||
<div class="card" style="border-left: 5px solid #f39915 !important;" >
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-uppercase mb-1">{{ __('general.last_month_sample') }}</div>
|
||||
<div class="h5 mb-0 font-weight-bold">{{$previousMonthSamples}}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-flask fa-2x text-gray"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3 grid-margin stretch-card">
|
||||
<div class="card" style="border-left: 5px solid #555 !important;" >
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-uppercase mb-1">{{ __('general.average_sample') }} <span class="small">({{date('Y',strtotime("-1 year"))}})</span></div>
|
||||
<div class="h5 mb-0 font-weight-bold ">{{$averageSamples}}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-flask fa-2x text-gray"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row h-100">
|
||||
<div class="col-md-3 grid-margin stretch-card">
|
||||
<div class="card" style="border-left: 5px solid #5881dd !important;" >
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-uppercase mb-1"> {{ __('general.today_income') }}</div>
|
||||
<div class="h5 mb-0 font-weight-bold ">{{$labSettings->currency==1 ? number_format(ceil($todayIncome / 100) * 100) : number_format($todayIncome,2)}}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-2x text-gray">
|
||||
{{$labSettings->currency==1 ? '៛' : '$'}}
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 grid-margin stretch-card">
|
||||
<div class="card" style="border-left: 5px solid #33db40 !important;" >
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-uppercase mb-1">{{ __('general.this_month_income') }}</div>
|
||||
<div class="h5 mb-0 font-weight-bold ">{{$labSettings->currency==1 ? number_format(ceil($thisMonthIncome / 100) * 100) : number_format($thisMonthIncome,2)}}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-2x text-gray">
|
||||
{{$labSettings->currency==1 ? '៛' : '$'}}
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 grid-margin stretch-card">
|
||||
<div class="card" style="border-left: 5px solid #dc3545 !important;" >
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-uppercase mb-1"> {{ __('general.last_month_income') }}</div>
|
||||
<div class="h5 mb-0 font-weight-bold ">{{$labSettings->currency==1 ? number_format(ceil($lastMonthIncome / 100) * 100) : number_format($lastMonthIncome,2)}}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-2x text-gray">
|
||||
{{$labSettings->currency==1 ? '៛' : '$'}}
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 grid-margin stretch-card">
|
||||
<div class="card" style="border-left: 5px solid #f39915 !important;" >
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-uppercase mb-1">{{ __('general.last_year_income') }}</div>
|
||||
<div class="h5 mb-0 font-weight-bold ">{{$labSettings->currency==1 ? number_format(ceil($lastYearIncome / 100) * 100) : number_format($lastYearIncome,2)}}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-2x text-gray">
|
||||
{{$labSettings->currency==1 ? '៛' : '$'}}
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-xl-6 grid-margin stretch-card">
|
||||
<div class="card bg-inverse-light">
|
||||
<div class="card-body border-bottom">
|
||||
<div class="d-flex justify-content-between align-items-center flex-wrap">
|
||||
<h6 class="mb-2 mb-md-0 text-uppercase font-weight-medium">{{ __('general.sample_statistic') }}</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<canvas id="sales-chart-d" height="150"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-xl-6 grid-margin stretch-card">
|
||||
<div class="card bg-inverse-light">
|
||||
<div class="card-body border-bottom">
|
||||
<div class="d-flex justify-content-between align-items-center flex-wrap">
|
||||
<div class="dropdown">
|
||||
<button class="btn bg-white p-0 pb-1 text-muted btn-sm dropdown-toggle" type="button" id="dropdownMenuSizeButton4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Bar Chart
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuSizeButton4">
|
||||
<a class="dropdown-item" href="javascript:;">Bar Chart</a>
|
||||
<a class="dropdown-item" href="javascript:;">Pie Chart</a>
|
||||
</div>
|
||||
</div>
|
||||
<h6 class="mb-2 mb-md-0 text-uppercase font-weight-medium">{{ __('general.sample_source_statistic') }}</h6>
|
||||
<div class="dropdown">
|
||||
<button class="btn bg-white p-0 pb-1 text-muted btn-sm dropdown-toggle" type="button" id="dropdownMenuSizeButton4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
{{__('general.chart_filter_this_month')}}
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuSizeButton4">
|
||||
<a class="dropdown-item" href="javascript:;">{{__('general.chart_filter_today')}}</a>
|
||||
<a class="dropdown-item" href="javascript:;">{{__('general.chart_filter_this_month')}}</a>
|
||||
<a class="dropdown-item" href="javascript:;">{{__('general.chart_filter_this_year')}}</a>
|
||||
<a class="dropdown-item" href="javascript:;">{{__('general.chart_filter_last_year')}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<canvas id="sales-chart-b" height="150"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
@include('layout.footer')
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@include('layout.common_script')
|
||||
|
||||
<script src="{{url(env("APP_URL").'storage/assets/libs/chart.js/Chart.min.js')}}"></script>
|
||||
|
||||
<script>
|
||||
|
||||
$(document).ready(function () {
|
||||
// Set interval to reload the page every 2 minutes (120000 milliseconds)
|
||||
setInterval(function () {
|
||||
location.reload();
|
||||
}, 120000);
|
||||
});
|
||||
|
||||
function generateColorCodeByYear(year) {
|
||||
const seed = parseInt(year.toString().slice(-2));
|
||||
const red = (Math.sin(seed * 1) * 127 + 128) | 0;
|
||||
const green = (Math.sin(seed * 2) * 127 + 128) | 0;
|
||||
const blue = (Math.sin(seed * 3) * 127 + 128) | 0;
|
||||
|
||||
return `#${red.toString(16).padStart(2, '0')}${green.toString(16).padStart(2, '0')}${blue.toString(16).padStart(2, '0')}`;
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
|
||||
let sampleSourceData = <?php echo json_encode($sampleSourceChart);?>;
|
||||
let sampleYearData = Object.values(<?php echo json_encode($sampleYear);?>);
|
||||
|
||||
let preparedSampleChartData = [];
|
||||
let maxYear = Math.ceil((parseInt("<?php echo $maxYear?>"))/50) * 50;
|
||||
let maxSampleSource = Math.ceil((parseInt("<?php echo $maxSampleSource?>"))/20) * 20;
|
||||
|
||||
let arrLabel = [];
|
||||
sampleYearData.map(item=>{
|
||||
|
||||
let years = Object.values(item.year);
|
||||
let singleSampleChart = {
|
||||
label : years[0],
|
||||
data : Object.values(item.data),
|
||||
backgroundColor: generateColorCodeByYear(years[0])
|
||||
};
|
||||
arrLabel = Object.values(item.month);
|
||||
preparedSampleChartData.push(singleSampleChart);
|
||||
});
|
||||
|
||||
(function($) {
|
||||
'use strict';
|
||||
$(function() {
|
||||
// sales-chart-d start
|
||||
if ($("#sales-chart-d").length) {
|
||||
var SalesChartDCanvas = $("#sales-chart-d").get(0).getContext("2d");
|
||||
var SalesChartD = new Chart(SalesChartDCanvas, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: arrLabel,
|
||||
datasets: preparedSampleChartData
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: true,
|
||||
layout: {
|
||||
padding: {
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
yAxes: [{
|
||||
display: true,
|
||||
gridLines: {
|
||||
display: true,
|
||||
drawBorder: true
|
||||
},
|
||||
ticks: {
|
||||
display: true,
|
||||
min: 0,
|
||||
max: maxYear,
|
||||
stepSize: 50,
|
||||
fontSize: 10,
|
||||
fontColor: "#001737",
|
||||
}
|
||||
}],
|
||||
xAxes: [{
|
||||
stacked: false,
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
fontColor: "#001737",
|
||||
fontSize: 10
|
||||
},
|
||||
gridLines: {
|
||||
color: "rgba(0, 0, 0, 0)",
|
||||
display: true
|
||||
},
|
||||
barPercentage: .3
|
||||
}]
|
||||
},
|
||||
legend: {
|
||||
display: true
|
||||
},
|
||||
elements: {
|
||||
point: {
|
||||
radius: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
// sales-chart-d end
|
||||
|
||||
if ($("#sales-chart-b").length) {
|
||||
var SalesChartDCanvas = $("#sales-chart-b").get(0).getContext("2d");
|
||||
var SalesChartD = new Chart(SalesChartDCanvas, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: sampleSourceData.sample_source,
|
||||
datasets: [
|
||||
{
|
||||
label: sampleSourceData.period_type[0]+' Samples',
|
||||
data: sampleSourceData.total_samples,
|
||||
backgroundColor: '#3b86d1'
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: true,
|
||||
layout: {
|
||||
padding: {
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
yAxes: [{
|
||||
display: true,
|
||||
gridLines: {
|
||||
display: true,
|
||||
drawBorder: true
|
||||
},
|
||||
ticks: {
|
||||
display: true,
|
||||
min: 0,
|
||||
max: maxSampleSource,
|
||||
stepSize: 20,
|
||||
fontSize: 10,
|
||||
fontColor: "#001737",
|
||||
}
|
||||
}],
|
||||
xAxes: [{
|
||||
stacked: false,
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
fontColor: "#001737",
|
||||
fontSize: 10
|
||||
},
|
||||
gridLines: {
|
||||
color: "rgba(0, 0, 0, 0)",
|
||||
display: false
|
||||
},
|
||||
barPercentage: .3
|
||||
}]
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
elements: {
|
||||
point: {
|
||||
radius: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
});
|
||||
})(jQuery);
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user