initial commit
This commit is contained in:
@@ -0,0 +1,389 @@
|
||||
@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
|
||||
Reference in New Issue
Block a user