Prvi commit
This commit is contained in:
David Štaleker
627
EveryThing/Pages/Index.cshtml
Normal file
627
EveryThing/Pages/Index.cshtml
Normal file
@@ -0,0 +1,627 @@
|
||||
@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>
|
||||
}
|
||||
Reference in New Issue
Block a user