627 lines
23 KiB
Plaintext
627 lines
23 KiB
Plaintext
@page
|
|
@model IndexModel
|
|
|
|
@{
|
|
ViewData["Title"] = "Pregled";
|
|
Layout = "~/Pages/Layouts/_Layout.cshtml";
|
|
}
|
|
|
|
<h4 class="d-flex justify-content-between align-items-center w-100 font-weight-bold py-1 mb-4">
|
|
<span>
|
|
<span class="text-muted font-weight-light">EveryThing /</span> Pregled
|
|
</span>
|
|
</h4>
|
|
|
|
<div class="row">
|
|
<div class="col-sm-6 col-xl-3">
|
|
<div class="card mb-4">
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center">
|
|
<div class="lnr lnr-exit-up display-4 text-success"></div>
|
|
<div class="ml-3">
|
|
<div class="text-muted small">Prodaja zadnjih 30 dni</div>
|
|
<div id="divLblSales" class="text-large">2362</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-xl-3">
|
|
<div class="card mb-4">
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center">
|
|
<div class="lnr lnr-enter-down display-4 text-info"></div>
|
|
<div class="ml-3">
|
|
<div class="text-muted small">Stroški zadnjih 30 dni</div>
|
|
<div id="divLblExpenses" class="text-large">687,123</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-xl-2">
|
|
<div class="card mb-4">
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center">
|
|
<div class="lnr lnr-highlight display-4 text-info"></div>
|
|
<div class="ml-3">
|
|
<div class="text-muted small">RVC zadnjih 30 dni</div>
|
|
<div id="divLblDifferenceInPrice" class="text-large">687,123</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-xl-2">
|
|
<div class="card mb-4">
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center">
|
|
<div class="lnr lnr-screen display-4 text-danger"></div>
|
|
<div class="ml-3">
|
|
<div class="text-muted small">Aktivni projekti</div>
|
|
<div id="divLblActiveProjects" class="text-large">985</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-xl-2">
|
|
<div class="card mb-4">
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center">
|
|
<div class="lnr lnr-screen display-4 text-danger"></div>
|
|
<div class="ml-3">
|
|
<div class="text-muted small">Leto</div>
|
|
<select asp-for="Year" class="form-control sel-year" asp-items="ViewBag.Years"></select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-sm-6 col-xl-6">
|
|
<div class="card mb-4">
|
|
<div class="card-body">
|
|
<canvas id="chartDiferenceInPriceMonth" height="400"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-xl-6">
|
|
<div class="card mb-4">
|
|
<div class="card-body">
|
|
<canvas id="chartDiferenceInPriceYear" height="400"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-sm-12 col-xl-12">
|
|
<div class="card mb-4">
|
|
<div class="card-body">
|
|
<canvas id="chartDiferenceInPricePartnersYear" height="500"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-sm-12 col-xl-12">
|
|
<div class="card mb-4">
|
|
<div class="card-body">
|
|
<canvas id="chartDiferenceInPriceProjectsYear" height="500"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@*<hr class="container-m-nx mt-0 mb-4">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="card mb-4">
|
|
<h6 class="card-header">Prihajajoči dogodki</h6>
|
|
<div style="height: 500px" id="upcomming-events">
|
|
<div class="card-body">
|
|
<div class="media">
|
|
<div class="ui-icon ui-activity-icon far fa-sticky-note text-secondary"></div>
|
|
<div class="media-body ml-3">
|
|
Zapiski <a href="#">Preveri dobavo materiala</a>
|
|
<div class="text-muted small"><b>Danes</b> - 3.3.2020 14:30 (sreda) - še 15 minut</div>
|
|
</div>
|
|
</div>
|
|
<hr class=" mt-0 mb-2 mt-2">
|
|
<div class="media">
|
|
<div class="ui-icon ui-activity-icon fas fa-exclamation text-secondary"></div>
|
|
<div class="media-body ml-3">
|
|
Napaka <a href="#">MAN (SG-AB-123)</a> (Napaka na motorju - Prižiga se lučka za olje)
|
|
<div class="text-muted small">20.2.2020 (petek) - zamujeno 2 uri</div>
|
|
</div>
|
|
</div>
|
|
<hr class=" mt-0 mb-2 mt-2">
|
|
<div class="media">
|
|
<div class="ui-icon ui-activity-icon fas fa-truck text-secondary"></div>
|
|
<div class="media-body ml-3">
|
|
Tehnični pregled <a href="#">MAN (SG-CD-234)</a>
|
|
<div class="text-muted small">8.5.2020 (ponedeljek) - še 30 dni</div>
|
|
</div>
|
|
</div>
|
|
<hr class=" mt-0 mb-2 mt-2">
|
|
<div class="media">
|
|
<div class="ui-icon ui-activity-icon fas fa-users text-secondary"></div>
|
|
<div class="media-body ml-3">
|
|
Zdravniški pregled <a href="#">Janez Novak</a>
|
|
<div class="text-muted small">1.4.2020 (torek) - še 10 dni</div>
|
|
</div>
|
|
</div>
|
|
<hr class=" mt-0 mb-2 mt-2">
|
|
<div class="media">
|
|
<div class="ui-icon ui-activity-icon far fa-cogs text-secondary"></div>
|
|
<div class="media-body ml-3">
|
|
Servis <a href="#">Prikolica Krone (SG-GH-321)</a> (Menjava gum)
|
|
<div class="text-muted small">8.4.2020 (torek) - še 10 dni</div>
|
|
</div>
|
|
</div>
|
|
<hr class=" mt-0 mb-2 mt-2">
|
|
<div class="media">
|
|
<div class="ui-icon ui-activity-icon fas fa-tasks text-secondary"></div>
|
|
<div class="media-body ml-3">
|
|
Pregled <a href="#">MAN (SG-EF-789)</a> (Mesečna kontrola nivoja olja)
|
|
<div class="text-muted small">10.4.2020 (sreda) - še 12 dni</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card mb-4">
|
|
<h6 class="card-header">Weather</h6>
|
|
<div class="row no-gutters row-bordered text-center">
|
|
|
|
<div class="col-lg-3">
|
|
<div class="py-2">Sunday</div>
|
|
<hr class="m-0">
|
|
<div class="py-4">
|
|
<div class="ion ion-md-sunny display-3 text-warning mb-3"></div>
|
|
<div class="text-xlarge mb-3">+20°</div>
|
|
<div class="text-muted">Sunny day</div>
|
|
</div>
|
|
<hr class="m-0">
|
|
<div class="text-muted py-2">
|
|
May 21
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3">
|
|
<div class="py-2">Monday</div>
|
|
<hr class="m-0">
|
|
<div class="py-4">
|
|
<div class="ion ion-md-rainy display-3 text-info mb-3"></div>
|
|
<div class="text-xlarge mb-3">+15°</div>
|
|
<div class="text-muted">Rainy day</div>
|
|
</div>
|
|
<hr class="m-0">
|
|
<div class="text-muted py-2">
|
|
May 22
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3">
|
|
<div class="py-2">Tuesday</div>
|
|
<hr class="m-0">
|
|
<div class="py-4">
|
|
<div class="ion ion-md-partly-sunny display-3 text-secondary mb-3"></div>
|
|
<div class="text-xlarge mb-3">+18°</div>
|
|
<div class="text-muted">Cloudy day</div>
|
|
</div>
|
|
<hr class="m-0">
|
|
<div class="text-muted py-2">
|
|
May 23
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3">
|
|
<div class="py-2">Wednesday</div>
|
|
<hr class="m-0">
|
|
<div class="py-4">
|
|
<div class="ion ion-md-rainy display-3 text-info mb-3"></div>
|
|
<div class="text-xlarge mb-3">+17°</div>
|
|
<div class="text-muted">Rainy day</div>
|
|
</div>
|
|
<hr class="m-0">
|
|
<div class="text-muted py-2">
|
|
May 24
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card mb-4">
|
|
<h6 class="card-header">Podjetje</h6>
|
|
<ul class="list-group list-group-flush">
|
|
<li class="list-group-item py-3">
|
|
<div class="media">
|
|
<div class="far fa-building ui-w-30 text-center text-lighter mt-1"></div>
|
|
<div class="media-body ml-2">
|
|
Moje podjetje d.o.o.
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="list-group-item py-3">
|
|
<div class="media">
|
|
<div class="far fa-map-marker-alt ui-w-30 text-center text-lighter mt-1"></div>
|
|
<div class="media-body ml-2">
|
|
Ulica 110, 1234 Pošta v Sloveniji
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="list-group-item py-3">
|
|
<div class="media">
|
|
<div class="far fa-info-circle ui-w-30 text-center text-lighter mt-1"></div>
|
|
<div class="media-body ml-2">
|
|
Davčna številka: SI321654987
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>*@
|
|
|
|
@section Scripts {
|
|
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
|
|
<script src="~/vendor/libs/chartjs/chartjs.js" asp-append-version="true"></script>
|
|
<script src="~/vendor/libs/chartjs/chartjs-plugin-colorschemes.min.js" asp-append-version="true"></script>
|
|
<script>
|
|
let graphDifferenceInPriceMonth;
|
|
let graphDifferenceInPriceYear;
|
|
let graphDifferenceInPricePartnersYear;
|
|
let graphDifferenceInPriceProjectsYear;
|
|
//new PerfectScrollbar(document.getElementById('upcomming-events'));
|
|
|
|
$(document).ready(function () {
|
|
refreshData();
|
|
$('.sel-year').on('change', function() {
|
|
refreshData();
|
|
});
|
|
});
|
|
|
|
function refreshData() {
|
|
let year = parseInt($('.sel-year').val());
|
|
|
|
$.blockUI();
|
|
$.ajax({
|
|
type: "GET",
|
|
url: "Index/?handler=Data",
|
|
data: { year },
|
|
success: function (data) {
|
|
$.unblockUI();
|
|
if (data.successful) {
|
|
setData(data.data);
|
|
} else {
|
|
Swal.fire('Napaka pri osveževanju grafov!',
|
|
data.error,
|
|
'warning');
|
|
}
|
|
|
|
},
|
|
error: function (xhr, ajaxOptions, thrownError) {
|
|
alert(xhr.responseText);
|
|
$.unblockUI();
|
|
}
|
|
});
|
|
}
|
|
|
|
function setData(data) {
|
|
//Graf Mesec
|
|
if (graphDifferenceInPriceMonth != null) {
|
|
graphDifferenceInPriceMonth.destroy();
|
|
}
|
|
|
|
graphDifferenceInPriceMonth = new Chart($('#chartDiferenceInPriceMonth'), {
|
|
type: 'bar',
|
|
data: {
|
|
labels: data.month.xAxis,
|
|
datasets: [
|
|
{
|
|
data: data.month.diferenceInPrice,
|
|
label: "Rvc",
|
|
type: "line",
|
|
fill: false,
|
|
order: 1
|
|
},
|
|
{
|
|
data: data.month.expenses,
|
|
label: "Stroški",
|
|
type: "bar",
|
|
order: 2
|
|
}, {
|
|
data: data.month.sales,
|
|
label: "Prodaja",
|
|
type: "bar",
|
|
order: 3
|
|
},
|
|
]
|
|
},
|
|
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
legend: {
|
|
text: 'test123',
|
|
display: true,
|
|
position: 'bottom'
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: 'Odprema pozicij delov projektov po dnevih za preteklih 30 dni'
|
|
},
|
|
scales: {
|
|
yAxes: [{
|
|
ticks: {
|
|
beginAtZero: true,
|
|
// min: yMinVal,
|
|
suggestedMin: 0,
|
|
},
|
|
|
|
}],
|
|
xAxis: [{
|
|
type: 'time',
|
|
}]
|
|
},
|
|
plugins: {
|
|
|
|
colorschemes: {
|
|
|
|
scheme: 'brewer.PastelOne3'
|
|
|
|
}
|
|
|
|
},
|
|
tooltips: {
|
|
callbacks: {
|
|
title: function(tooltipItems, data) {
|
|
return data.datasets[tooltipItems[0].datasetIndex].data[tooltipItems[0].index].x;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
//Graf Leto
|
|
if (graphDifferenceInPriceYear!= null) {
|
|
graphDifferenceInPriceYear.destroy();
|
|
}
|
|
|
|
graphDifferenceInPriceYear = new Chart($('#chartDiferenceInPriceYear'), {
|
|
type: 'bar',
|
|
data: {
|
|
labels: data.year.xAxis,
|
|
datasets: [
|
|
{
|
|
data: data.year.diferenceInPrice,
|
|
label: "Rvc",
|
|
type: "line",
|
|
fill: false,
|
|
order: 1
|
|
},
|
|
{
|
|
data: data.year.expenses,
|
|
label: "Stroški",
|
|
type: "bar",
|
|
order: 2
|
|
}, {
|
|
data: data.year.sales,
|
|
label: "Prodaja",
|
|
type: "bar",
|
|
order: 3
|
|
},
|
|
]
|
|
},
|
|
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
legend: {
|
|
text: 'test123',
|
|
display: true,
|
|
position: 'bottom'
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: 'Odprema pozicij delov projektov po dnevih za izbrano leto'
|
|
},
|
|
scales: {
|
|
yAxes: [{
|
|
ticks: {
|
|
beginAtZero: true,
|
|
// min: yMinVal,
|
|
suggestedMin: 0,
|
|
},
|
|
|
|
}],
|
|
xAxis: [{
|
|
type: 'time',
|
|
}]
|
|
},
|
|
plugins: {
|
|
|
|
colorschemes: {
|
|
|
|
scheme: 'brewer.PastelOne3'
|
|
|
|
}
|
|
|
|
},
|
|
tooltips: {
|
|
callbacks: {
|
|
title: function (tooltipItems, data) {
|
|
return data.datasets[tooltipItems[0].datasetIndex].data[tooltipItems[0].index].x;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
//Napisi - Labels
|
|
$('#divLblActiveProjects').text(data.labels.activeProjects);
|
|
$('#divLblDifferenceInPrice').text(data.labels.diferenceInPrice + ' €');
|
|
$('#divLblExpenses').text(data.labels.expenses + ' €');
|
|
$('#divLblSales').text(data.labels.sales + ' €');
|
|
|
|
//Graf partnerji leto
|
|
if (graphDifferenceInPricePartnersYear != null) {
|
|
graphDifferenceInPricePartnersYear.destroy();
|
|
}
|
|
|
|
graphDifferenceInPricePartnersYear = new Chart($('#chartDiferenceInPricePartnersYear'), {
|
|
type: 'bar',
|
|
data: {
|
|
labels: data.partnersYear.xAxis,
|
|
datasets: [
|
|
{
|
|
data: data.partnersYear.diferenceInPrice,
|
|
label: "Rvc",
|
|
type: "line",
|
|
fill: false,
|
|
order: 1
|
|
},
|
|
{
|
|
data: data.partnersYear.expenses,
|
|
label: "Stroški",
|
|
type: "bar",
|
|
order: 2
|
|
}, {
|
|
data: data.partnersYear.sales,
|
|
label: "Prodaja",
|
|
type: "bar",
|
|
order: 3
|
|
},
|
|
]
|
|
},
|
|
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
legend: {
|
|
text: 'test123',
|
|
display: true,
|
|
position: 'bottom'
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: 'Odprema pozicij delov projektov po partnerjih za izbrano leto'
|
|
},
|
|
scales: {
|
|
yAxes: [{
|
|
ticks: {
|
|
beginAtZero: true,
|
|
// min: yMinVal,
|
|
suggestedMin: 0,
|
|
},
|
|
|
|
}],
|
|
xAxis: [{
|
|
type: 'time',
|
|
}]
|
|
},
|
|
plugins: {
|
|
|
|
colorschemes: {
|
|
|
|
scheme: 'brewer.PastelOne3'
|
|
|
|
}
|
|
|
|
},
|
|
tooltips: {
|
|
callbacks: {
|
|
title: function (tooltipItems, data) {
|
|
return data.datasets[tooltipItems[0].datasetIndex].data[tooltipItems[0].index].x;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
//Graf projekti leto
|
|
if (graphDifferenceInPriceProjectsYear != null) {
|
|
graphDifferenceInPriceProjectsYear.destroy();
|
|
}
|
|
|
|
graphDifferenceInPriceProjectsYear = new Chart($('#chartDiferenceInPriceProjectsYear'), {
|
|
type: 'bar',
|
|
data: {
|
|
labels: data.projectsYear.xAxis,
|
|
datasets: [
|
|
{
|
|
data: data.projectsYear.diferenceInPrice,
|
|
label: "Rvc",
|
|
type: "line",
|
|
fill: false,
|
|
order: 1
|
|
},
|
|
{
|
|
data: data.projectsYear.expenses,
|
|
label: "Stroški",
|
|
type: "bar",
|
|
order: 2
|
|
}, {
|
|
data: data.projectsYear.sales,
|
|
label: "Prodaja",
|
|
type: "bar",
|
|
order: 3
|
|
},
|
|
]
|
|
},
|
|
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
legend: {
|
|
text: 'test123',
|
|
display: true,
|
|
position: 'bottom'
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: 'Odprema pozicij delov projektov po projektih za izbrano leto'
|
|
},
|
|
scales: {
|
|
yAxes: [{
|
|
ticks: {
|
|
beginAtZero: true,
|
|
// min: yMinVal,
|
|
suggestedMin: 0,
|
|
},
|
|
|
|
}],
|
|
xAxis: [{
|
|
type: 'time',
|
|
}]
|
|
},
|
|
plugins: {
|
|
|
|
colorschemes: {
|
|
|
|
scheme: 'brewer.PastelOne3'
|
|
|
|
}
|
|
|
|
},
|
|
tooltips: {
|
|
callbacks: {
|
|
title: function (tooltipItems, data) {
|
|
return data.datasets[tooltipItems[0].datasetIndex].data[tooltipItems[0].index].x;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
} |