389 lines
11 KiB
PHP
389 lines
11 KiB
PHP
@extends('adminlte::page')
|
|
|
|
@section('title', $general['title'])
|
|
|
|
@section('content_header')
|
|
<h1>{{ $general['title'] }}</h1>
|
|
@stop
|
|
|
|
@section('content')
|
|
@php
|
|
$ajaxUrl = "/admin/" . $general['cont_name'] . "/" . $parent. "/detalji";
|
|
@endphp
|
|
<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="progress" class="d-none card col-6 p-3">
|
|
<div class="justify-content-center align-items-center">
|
|
<b>Progress:</b>
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-animated bg-success progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="hiddenAtLoad d-none">
|
|
<div id="" class="card col-6">
|
|
<div class="card-header">
|
|
<div class="card-title">
|
|
{{ $general['sub_title'] }}
|
|
</div>
|
|
<div class="card-tools">
|
|
</div>
|
|
</div>
|
|
<div class="card-body justify-content-center align-items-center">
|
|
<form id="xmlUploadForm">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="form-grp">
|
|
<div class="form-grp-label">
|
|
U slučaju već postojećih vrednosti:
|
|
</div>
|
|
<div class="form-group">
|
|
<input class="form-check-input" type="radio" name="overwrite" id="overwrite1" value="1" checked>
|
|
<label class="form-check-label" for="overwrite1">
|
|
Prepiši postojeće
|
|
</label>
|
|
</div>
|
|
<div class="form-group">
|
|
<input class="form-check-input" type="radio" name="overwrite" id="overwrite2" value="0">
|
|
<label class="form-check-label" for="overwrite2">
|
|
Preskoči postojeće
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="uploadContainer col border">
|
|
<div class="row">
|
|
<div class="imgWrapper col-12 p-2">
|
|
<div data-type="upload" class="dropzone upl-dropzone dz-clickable" id="upl-dropzone">
|
|
<div class="dz-message d-flex flex-column">
|
|
<i class="fa fa-cloud-upload-alt"></i>
|
|
Drag and drop or click
|
|
</div>
|
|
<div class="fallback">
|
|
<input name="file" type="file" multiple />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="submit_container" class="d-none form-row pt-2">
|
|
<div class="col-12">
|
|
@csrf
|
|
<button type="submit" class="btn-sm btn-primary submit float-right">Učitavanje</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</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>
|
|
<div class="d-none">
|
|
<div id="previewTPL" class="dz-preview dz-file-preview">
|
|
<div class="dz-details">
|
|
<div class="dz-error-message"><span data-dz-errormessage></span></div>
|
|
</div>
|
|
<div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
|
|
</div>
|
|
</div>
|
|
@stop
|
|
|
|
@section('css')
|
|
<style type="text/css">
|
|
.upl-dropzone {
|
|
border: 2px dashed #dedede;
|
|
border-radius: 5px;
|
|
background: #f5f5f5;
|
|
}
|
|
.upl-dropzone.dz-clickable .dz-message, .upl-dropzone.dz-clickable .dz-message * {
|
|
cursor: pointer;
|
|
}
|
|
.upl-dropzone i{
|
|
font-size: 5rem;
|
|
}
|
|
.dz-message i{
|
|
font-size: 5rem;
|
|
padding-top: 1rem;
|
|
}
|
|
.upl-dropzone .dz-message {
|
|
color: rgba(0,0,0,.54);
|
|
font-weight: 500;
|
|
font-size: initial;
|
|
text-transform: uppercase;
|
|
}
|
|
.dz-drag-hover {
|
|
border: 2px solid #dedede !important;
|
|
}
|
|
.dz-drag-hover .dz-message {
|
|
opacity: 0.5 !important;
|
|
}
|
|
.dz-error-message span {
|
|
color: red;
|
|
font-weight: 400;
|
|
}
|
|
.imgWrapper {
|
|
text-align: center;
|
|
}
|
|
.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);
|
|
}
|
|
}
|
|
|
|
.spinner_overlay {
|
|
position: absolute;
|
|
display: none;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(0,0,0,0.3);
|
|
z-index: 500;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.form-grp .form-group{
|
|
padding-left: 1rem;
|
|
}
|
|
.form-grp .form-group label{
|
|
margin-left: 0.5rem;
|
|
}
|
|
.form-grp-label {
|
|
font-size: 1.1rem;
|
|
font-weight: bold;
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
</style>
|
|
<link href="/vendor/icheck/skins/all.css" rel="stylesheet">
|
|
<link href="/vendor/dropzone/dropzone.css" rel="stylesheet">
|
|
@stop
|
|
|
|
@section('js')
|
|
<script src="/js/jquery.blockUI.js"></script>
|
|
<script src="/vendor/icheck/icheck.js"></script>
|
|
<script src="/vendor/dropzone/dropzone.js"></script>
|
|
<script>
|
|
var blocked = [];
|
|
var ajaxUrl = '{{ $ajaxUrl }}';
|
|
var queryStr = '{{ $qstring ?? '' }}';
|
|
var dropzone;
|
|
|
|
Dropzone.autoDiscover = false;
|
|
|
|
$(document).ready(function() {
|
|
|
|
$('input').iCheck({
|
|
checkboxClass: 'icheckbox_square-red',
|
|
radioClass: 'iradio_square-red',
|
|
increaseArea: '30%' // optional
|
|
});
|
|
|
|
$(".hiddenAtLoad").removeClass('d-none');
|
|
|
|
dropzone = new Dropzone(".upl-dropzone", {
|
|
url: "{{ $ajaxUrl.'/uploadXML' }}",
|
|
addRemoveLinks: true,
|
|
uploadMultiple: false,
|
|
paramName: 'file',
|
|
acceptedFiles: '.xml',
|
|
accept: function(file, done) {
|
|
blockElement($("#xmlUploadForm"));
|
|
done();
|
|
},
|
|
init: function() {
|
|
this.on("removedfile", function(file) {
|
|
if(this.files.length == 0) {
|
|
$("#submit_container").addClass('d-none');
|
|
}
|
|
});
|
|
this.on("addedfile", function(file) {
|
|
});
|
|
this.on("sending", function(file, xhr, formData) {
|
|
formData.append("_token", '{{ csrf_token() }}');
|
|
formData.append("type", $(this.element).data('type'));
|
|
});
|
|
this.on("complete", function(file) {
|
|
unBlockAll();
|
|
});
|
|
this.on("success", function(file, response) {
|
|
file.id = response.id;
|
|
$("#submit_container").removeClass('d-none');
|
|
});
|
|
this.on("error", function(file, errorMessage) {
|
|
});
|
|
},
|
|
});
|
|
});
|
|
|
|
$(document).on( 'submit', '#xmlUploadForm', function (e) {
|
|
e.preventDefault();
|
|
blockElement($(this));
|
|
$("#submit_container .submit").attr('disabled','disabled');
|
|
|
|
var formData = [];
|
|
formData.push({name:'_token', value: '{{ csrf_token() }}'});
|
|
formData.push({name:'files', value: JSON.stringify(dropzone.files)});
|
|
formData.push({name:'overwrite', value: $("input[name='overwrite']:checked").val()});
|
|
// var status = data.msg.status;
|
|
// var percent = status.current/status.max * 100;
|
|
|
|
var data = {msg: null, running: true};
|
|
changeStatus(data, 'ImportOcitavanje');
|
|
$.ajax({
|
|
url: ajaxUrl + '/processXML',
|
|
dataType: "json",
|
|
data: formData,
|
|
type: "POST",
|
|
cache: false,
|
|
success: function (response) {
|
|
if(response.error)
|
|
{
|
|
}else{
|
|
}
|
|
},
|
|
error: function (response) {
|
|
unBlockAll();
|
|
}
|
|
});
|
|
|
|
});
|
|
|
|
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();
|
|
}
|
|
}
|
|
|
|
// var runningJobs = JSON.parse('{!! $runningJobsJS !!}');
|
|
var runningJobs = [];
|
|
(function poll() {
|
|
$.ajax({
|
|
url: ajaxUrl + '/getImportStatus',
|
|
type: "GET",
|
|
success: function(data) {
|
|
parsePollResults(data);
|
|
},
|
|
dataType: "json",
|
|
complete: setTimeout(() => poll(), 3000),
|
|
timeout: 2000
|
|
})
|
|
})();
|
|
|
|
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) {
|
|
var el = prop;
|
|
if(data.msg) {
|
|
var status = data.msg.status;
|
|
var percent = status.current/status.max * 100;
|
|
}else{
|
|
var percent = 0;
|
|
}
|
|
|
|
$('#progress').find('.progress-bar').css('width', percent+'%');
|
|
}
|
|
|
|
function changeStatus(data, prop) {
|
|
runningJobs[prop].running = data.running;
|
|
var el = prop;
|
|
if(data.running) {
|
|
blockElement($("#xmlUploadForm"));
|
|
$("#progress").removeClass('d-none');
|
|
$("#submit_container .submit").attr('disabled','disabled');
|
|
}else{
|
|
$('#progress').find('.progress-bar').css('width', '100%');
|
|
sleep(500).then(() => {
|
|
dropzone.removeAllFiles();
|
|
$("#progress").addClass('d-none');
|
|
unBlockAll();
|
|
$("#submit_container .submit").removeAttr('disabled');
|
|
});
|
|
// await new Promise(r => setTimeout(r, 500));
|
|
}
|
|
}
|
|
|
|
function sleep (time) {
|
|
return new Promise((resolve) => setTimeout(resolve, time));
|
|
}
|
|
|
|
</script>
|
|
@stop |