489 lines
15 KiB
PHP
489 lines
15 KiB
PHP
@extends('adminlte::page')
|
|
|
|
@section('title', $general['title'])
|
|
|
|
@section('content_header')
|
|
<h1>{{ $general['title'] }}</h1>
|
|
<div class="h4 pt-2">{{ $general['sub_title'] }}</div>
|
|
@stop
|
|
|
|
@section('content')
|
|
<div id="" class="card col-6">
|
|
<div class="card-body justify-content-center align-items-center">
|
|
Očitavanje: <b>{{ $ocitavanje->godina }} {{ $ocitavanje->j_mesec }} {{ $ocitavanje->naziv }}</b>
|
|
</div>
|
|
</div>
|
|
<div id="main_container">
|
|
<div class="row">
|
|
<div class="col-lg-3 col-6">
|
|
<div class="small-box bg-info">
|
|
<div class="inner">
|
|
<h3>Očitano: {{ $sume['kalorimetar - zbirni']['ocitano'] }}<br>Ukupno: {{ $sume['kalorimetar - zbirni']['prisutno'] }}</h3>
|
|
<p>Zbirni kalorimetri</p>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="fas fa-fw fa-microchip "></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-6">
|
|
<div class="small-box bg-warning">
|
|
<div class="inner">
|
|
<h3>Očitano: {{ $sume['kalorimetar - individualni']['ocitano'] }}<br>Ukupno: {{ $sume['kalorimetar - individualni']['prisutno'] }}</h3>
|
|
<p>Individualni kalorimetri</p>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="fas fa-fw fa-microchip "></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-6">
|
|
<div class="small-box bg-success">
|
|
<div class="inner">
|
|
<h3>Očitano: {{ $sume['alokator']['ocitano'] }}<br>Ukupno: {{ $sume['alokator']['prisutno'] }}</h3>
|
|
<p>Alokatori</p>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="fas fa-fw fa-microchip "></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="action_container" class="card col-12">
|
|
<div class="card-header">
|
|
<div class="card-title">
|
|
Kreirani obračuni
|
|
</div>
|
|
<div class="card-tools hideOnEdit">
|
|
<button class="btn btn-info add_new hideOnCreate">
|
|
Kreiraj novi obračun
|
|
</button>
|
|
<button disabled="" class="btn btn-info showOnCreate">
|
|
<span role="status" aria-hidden="true" class="btnspn spinner-border spinner-border-sm"></span>
|
|
Kreiranje novog obračuna je u toku
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="card-body justify-content-center align-items-center">
|
|
<div class="col-12 d-none pt-2 pb-2" id="editor_div"></div>
|
|
<table class="hiddenAtLoad d-none table-striped"
|
|
id="listing_table"
|
|
data-toggle="table"
|
|
data-pagination="true"
|
|
data-side-pagination="server"
|
|
data-page-size="25"
|
|
data-search="true"
|
|
data-url="/admin/obracun/browse?ocitavanje={{ $ocitavanje->id }}"
|
|
data-unique-id="id"
|
|
data-sort-name="id"
|
|
data-sort-order="desc"
|
|
data-id-field="id"
|
|
data-show-footer="false"
|
|
data-row-style="rowStyle"
|
|
data-row-attributes="rowAttributes"
|
|
data-detail-view="true"
|
|
data-detail-view-icon="true"
|
|
data-detail-formatter="detailFormatter"
|
|
>
|
|
<thead>
|
|
<tr>
|
|
<th data-field="id" data-sortable="true" data-visible="true">
|
|
#
|
|
</th>
|
|
@foreach ($fields as $key => $field)
|
|
@if($field['list'])
|
|
<th data-field="@if(array_key_exists('display_field', $field)){{ $field['display_field'] }}@else{{ $key }}@endif" data-sortable="true">
|
|
{{ $field['label'] }}
|
|
</th>
|
|
@endif
|
|
@endforeach
|
|
<th data-field="godina" data-sortable="true" data-align="center">Godina</th>
|
|
<th data-field="mesec" data-sortable="true" data-align="center">Mesec</th>
|
|
<th data-field="closed" data-sortable="true" data-align="center" data-formatter="statusFormatter">Otvoren</th>
|
|
<th
|
|
data-field="created_at"
|
|
data-sortable="true"
|
|
data-formatter="dateFormatter"
|
|
data-visible="true">
|
|
Kreiran
|
|
</th>
|
|
<th data-align="center"
|
|
data-formatter="optFormatter"
|
|
data-events="optEvents"
|
|
data-sortable="false">
|
|
Akcije
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="spinner_overlay" id="spinner_overlay">
|
|
<div class="w-100 d-flex justify-content-center align-items-center">
|
|
<div class="spinner"></div>
|
|
</div>
|
|
</div>
|
|
@stop
|
|
|
|
@section('css')
|
|
<script src="https://unpkg.com/ionicons@5.4.0/dist/ionicons.js"></script>
|
|
<style type="text/css">
|
|
.spinner {
|
|
height: 60px;
|
|
width: 60px;
|
|
margin: auto;
|
|
display: flex;
|
|
position: absolute;
|
|
-webkit-animation: rotation .6s infinite linear;
|
|
-moz-animation: rotation .6s infinite linear;
|
|
-o-animation: rotation .6s infinite linear;
|
|
animation: rotation .6s infinite linear;
|
|
border-left: 6px solid rgba(0, 174, 239, .15);
|
|
border-right: 6px solid rgba(0, 174, 239, .15);
|
|
border-bottom: 6px solid rgba(0, 174, 239, .15);
|
|
border-top: 6px solid rgba(0, 174, 239, .8);
|
|
border-radius: 100%;
|
|
}
|
|
|
|
@-webkit-keyframes rotation {
|
|
from {
|
|
-webkit-transform: rotate(0deg);
|
|
}
|
|
to {
|
|
-webkit-transform: rotate(359deg);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes rotation {
|
|
from {
|
|
-moz-transform: rotate(0deg);
|
|
}
|
|
to {
|
|
-moz-transform: rotate(359deg);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes rotation {
|
|
from {
|
|
-o-transform: rotate(0deg);
|
|
}
|
|
to {
|
|
-o-transform: rotate(359deg);
|
|
}
|
|
}
|
|
|
|
@keyframes rotation {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(359deg);
|
|
}
|
|
}
|
|
|
|
td.editor, #editor_div {
|
|
background-color: #F5DEB3 !important;
|
|
}
|
|
|
|
#action_container.in_progress {
|
|
|
|
}
|
|
|
|
#action_container.in_editmode .hideOnEdit {
|
|
display: none;
|
|
}
|
|
|
|
#action_container .showOnCreate {
|
|
display: none;
|
|
}
|
|
|
|
#action_container.in_createmode .showOnCreate {
|
|
display: block;
|
|
}
|
|
|
|
#action_container.in_createmode .hideOnCreate {
|
|
display: none;
|
|
}
|
|
|
|
.spinner_overlay {
|
|
position: absolute;
|
|
display: none;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(0,0,0,0.3);
|
|
z-index: 2;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
@stop
|
|
|
|
@section('js')
|
|
<script src="/js/jquery.blockUI.js"></script>
|
|
<script>
|
|
var blocked = [];
|
|
var ajaxUrl = '/admin/obracun';
|
|
var queryStr = '{{ $qstring ?? '' }}';
|
|
|
|
$(document).ready(function() {
|
|
$(".hiddenAtLoad").removeClass('d-none');
|
|
});
|
|
|
|
$('#listing_table').on('load-success.bs.table post-body.bs.table', function(data, status, jqXHR) {
|
|
$('th:first-child, td:first-child', $(this)).addClass('d-none');;
|
|
});
|
|
|
|
function optFormatter(value, row) {
|
|
var t = [];
|
|
t.push('<a class="delete mr-2 hideOnEdit" href="javascript:void(0)" data-id="'+row.id+'" title="Delete"><i class="fa fa-trash"></i></a>');
|
|
t.push('<a class="edit mr-2 hideOnEdit" href="javascript:void(0)" title="Edit"><i class="fa fa-edit"></i></a>');
|
|
return t.join('');
|
|
}
|
|
|
|
function dateFormatter(value, row) {
|
|
if(Date.parse(value)) {
|
|
const date = new Date(value);
|
|
return new Intl.DateTimeFormat("lt-LT", {year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit'}).format(date);
|
|
} else {
|
|
return '-';
|
|
}
|
|
}
|
|
|
|
function statusFormatter(value, row, index) {
|
|
switch(row.closed) {
|
|
case 0:
|
|
return '<div class="badge badge-pill pl-2 pr-2 badge-success">Da</div>';
|
|
break;
|
|
case 1:
|
|
return '<div class="badge badge-pill pl-2 pr-2 badge-danger">Ne</div>';
|
|
break;
|
|
}
|
|
}
|
|
|
|
function detailFormatter(index, row, element) {
|
|
element.addClass('editor').load(ajaxUrl + '/'+row.id+'/edit?'+queryStr, function() {
|
|
openEditor(element, index);
|
|
});
|
|
}
|
|
|
|
$(".add_new").click(function () {
|
|
$("#editor_div").addClass('editor').removeClass('d-none').load(ajaxUrl + '/create?'+queryStr, function() {
|
|
$('#listing_table').removeClass('table-hover');
|
|
openEditor($("#editor_div"), -1);
|
|
});
|
|
})
|
|
|
|
function rowAttributes(row, index) {
|
|
return {
|
|
'data-id': row.id
|
|
}
|
|
}
|
|
|
|
function openEditor(element, index){
|
|
$('#action_container').addClass('in_editmode');
|
|
$('.ui.dropdown').dropdown();
|
|
$(".hiddenAtLoad").removeClass('d-none');
|
|
element.find(':input').first().focus();
|
|
element.keyup(function (e) {
|
|
if (e.which == 13) {
|
|
$('.submit').click();
|
|
return false;
|
|
}
|
|
if(e.which == 27) {
|
|
$('.cancel').click();
|
|
return false;
|
|
}
|
|
});
|
|
$('.submit', element).click(function() {
|
|
var form = $(this).closest("form");
|
|
var formData = form.serializeArray();
|
|
|
|
form.removeClass('was-validated');
|
|
$.each($('.is-invalid'), function(key, value){
|
|
$(value).removeClass('is-invalid').parent().find('.invalid-feedback').remove();
|
|
});
|
|
|
|
formData.push({name:'ocitavanjeID', value: '{{ $ocitavanje->id }}'});
|
|
blockElement($(this).parents('.card'));
|
|
var url = ajaxUrl ;
|
|
if(index == -1) {
|
|
var method = "POST";
|
|
}else {
|
|
var method = "PUT";
|
|
url = url + '/'+form.data('id');
|
|
}
|
|
$.ajax({
|
|
url: url+'?'+queryStr,
|
|
dataType: "json",
|
|
data: formData,
|
|
type: method,
|
|
cache: false,
|
|
success: function (response) {
|
|
unBlockAll();
|
|
if(response.data) {
|
|
if(response.status == 'updated') {
|
|
$("#listing_table").bootstrapTable('updateByUniqueId', {id: response.data.id, row: response.data});
|
|
}else{
|
|
changeStatus({msg: "", running: true}, 'ObracunCreation');
|
|
clearTimeout(pollTimer);
|
|
pollTimer = setTimeout(poll, 5000);
|
|
}
|
|
}
|
|
if(index == -1)
|
|
$("#editor_div").removeClass('editor').addClass('d-none').html('');
|
|
else
|
|
$('#listing_table').addClass('table-hover').bootstrapTable('collapseRow', index);
|
|
$('#listing_table i.noedit').addClass('d-none');
|
|
$('#action_container').removeClass('in_editmode');
|
|
},
|
|
error: function (response) {
|
|
unBlockAll();
|
|
$('#action_container').removeClass('in_editmode');
|
|
if (response.status == 422) {
|
|
$.each(response.responseJSON.errors, function (i, error) {
|
|
var el = $(document).find('#'+i);
|
|
el.addClass('is-invalid');
|
|
el.after($('<div class="invalid-feedback">'+error[0]+'</div>'));
|
|
});
|
|
}else{
|
|
}
|
|
}
|
|
});
|
|
|
|
return false;
|
|
});
|
|
$('.cancel', element).click(function() {
|
|
if(index == -1){
|
|
$("#editor_div").removeClass('editor').addClass('d-none').html('');
|
|
}else{
|
|
$('#listing_table').addClass('table-hover').bootstrapTable('collapseRow', index);
|
|
}
|
|
$('#listing_table i.noedit').addClass('d-none');
|
|
$('#action_container').removeClass('in_editmode');
|
|
return false;
|
|
});
|
|
}
|
|
|
|
|
|
window.optEvents = {
|
|
'click .next': function (e, value, row, index) {
|
|
window.location.href = '/admin/ocitavanje/detalji/'+row.id;
|
|
},
|
|
'click .edit': function (e, value, row, index) {
|
|
$('#listing_table').removeClass('table-hover').bootstrapTable('expandRow', index);
|
|
$('#action_container').addClass('in_editmode');
|
|
$('#listing_table i.noedit').removeClass('d-none');
|
|
},
|
|
'click .delete': function (e, value, row, index) {
|
|
var popOpts={
|
|
placement: 'left',
|
|
title: 'Delete Item',
|
|
html: true,
|
|
trigger: 'focus',
|
|
content: '<a class="btn btn-xs btn-danger decline" href="javascript:void(0)"><i class="fas fa-times"></i> Ne</a> <a class="btn btn-xs btn-success pull-right popover-confirm" href="javascript:void(0)"><i class="fas fa-check"></i> Da</a>',
|
|
}
|
|
$(e.currentTarget).popover(popOpts).popover('show').on('shown.bs.popover', function(e) {
|
|
var pdelete=$(this);
|
|
var pop=$(".popover");
|
|
var popButtons=pop.find('a').click(function(){
|
|
if($(this).is('.popover-confirm')){
|
|
var formData = [];
|
|
formData.push({name:'_token', value: '{{ csrf_token() }}'});
|
|
blockElement($(this).parents('.card'));
|
|
$.ajax({
|
|
url: ajaxUrl + '/' + row.id,
|
|
dataType: "json",
|
|
data: formData,
|
|
type: "DELETE",
|
|
cache: false,
|
|
success: function (response) {
|
|
unBlockAll();
|
|
if(response.error)
|
|
{
|
|
$('#ModalLabel').html(response.error.title);
|
|
$('#ModalBody').html(response.error.msg);
|
|
$("#AlertModal").modal('show');
|
|
}else{
|
|
$("#listing_table").bootstrapTable('removeByUniqueId', response.data.id);
|
|
}
|
|
},
|
|
error: function (response) {
|
|
unBlockAll();
|
|
}
|
|
});
|
|
}
|
|
pdelete.popover('dispose');
|
|
});
|
|
});
|
|
return false;
|
|
}
|
|
}
|
|
|
|
let runningJobs = [];
|
|
let pollTimer;
|
|
poll();
|
|
function poll() {
|
|
$.ajax({
|
|
url: ajaxUrl + '/getCreationStatus',
|
|
type: "GET",
|
|
dataType: "json",
|
|
timeout: 2000,
|
|
success: (data) => {
|
|
parsePollResults(data);
|
|
},
|
|
complete: () => {
|
|
pollTimer = setTimeout(poll, 3000);
|
|
}
|
|
})
|
|
}
|
|
|
|
function parsePollResults(data) {
|
|
var t = Object.entries(data);
|
|
for (var i = t.length - 1; i >= 0; i--) {
|
|
var prop = t[i][0];
|
|
if(typeof runningJobs[prop] === 'undefined'){
|
|
runningJobs[prop] = {};
|
|
changeStatus(data[prop], prop);
|
|
}else if(data[prop].running != runningJobs[prop].running) {
|
|
changeStatus(data[prop], prop);
|
|
}
|
|
if(data[prop].running){
|
|
updateStatus(data[prop], prop);
|
|
}
|
|
}
|
|
}
|
|
|
|
function updateStatus(data, prop) {
|
|
}
|
|
|
|
function changeStatus(data, prop) {
|
|
runningJobs[prop].running = data.running;
|
|
var el = prop;
|
|
if(data.running) {
|
|
$("#action_container").addClass('in_createmode');
|
|
}else{
|
|
$("#action_container").removeClass('in_createmode');
|
|
$("#listing_table").bootstrapTable('refresh');
|
|
}
|
|
}
|
|
|
|
function blockElement(element)
|
|
{
|
|
var bl = $("#spinner_overlay").clone();
|
|
bl.removeAttr('id').appendTo(element);
|
|
bl.css("display","flex");
|
|
blocked.push(bl);
|
|
}
|
|
|
|
function unBlockAll()
|
|
{
|
|
for (var i = blocked.length - 1; i >= 0; i--) {
|
|
blocked[i].remove();
|
|
}
|
|
}
|
|
</script>
|
|
@stop |