126 lines
5.6 KiB
PHP
126 lines
5.6 KiB
PHP
@extends('themes.base.layout')
|
|
@section('title', 'Analysing...')
|
|
|
|
@section('content')
|
|
<div class="container" style="margin-top: 40px;">
|
|
<div class="row">
|
|
<div class="col-xs-12 col-sm-8 col-sm-offset-2">
|
|
<div class="panel panel-default" id="status-panel">
|
|
<div class="panel-heading">Analysing...</div>
|
|
<div class="panel-body">
|
|
<p>Your uploaded photos are now being analysed.</p>
|
|
<div id="progress-bar-container">
|
|
<div class="progress"></div>
|
|
</div>
|
|
|
|
<div id="file-list" style="margin-top: 20px;">
|
|
@foreach ($photos as $photo)
|
|
<p data-photo-id="{{ $photo->id }}">{{ $photo->name }} ... <i class="fa fa-fw"></i></p>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel panel-default" id="complete-panel" style="display: none;">
|
|
<div class="panel-heading">Upload completed</div>
|
|
<div class="panel-body">
|
|
<p>Your upload has completed.</p>
|
|
<div class="btn-toolbar btn-group-sm pull-right">
|
|
<a class="btn btn-default" href="{{ $album->url() }}">View album</a>
|
|
<a class="btn btn-primary" href="{{ route('albums.show', ['id' => $album->id]) }}">Back to album settings</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script type="text/javascript">
|
|
var number_successful = 0;
|
|
var number_error = 0;
|
|
var number_total = 0;
|
|
|
|
function redrawProgressBar()
|
|
{
|
|
var successPercentage = (number_successful / number_total) * 100;
|
|
var failedPercentage = (number_error / number_total) * 100;
|
|
|
|
{{-- Render a Bootstrap-3 compatible progress bar --}}
|
|
var progressBar = $('<div/>').addClass('progress');
|
|
|
|
{{-- Successful --}}
|
|
var progressBarSuccess = $('<div/>')
|
|
.addClass('progress-bar')
|
|
.addClass('progress-bar-success')
|
|
.css('width', parseInt(successPercentage) + '%')
|
|
.appendTo(progressBar);
|
|
var progressBarSuccessSpan = $('<span/>').addClass('sr-only').html(parseInt(successPercentage) + '% successful').appendTo(progressBarSuccess);
|
|
|
|
{{-- Failed --}}
|
|
var progressBarError = $('<div/>')
|
|
.addClass('progress-bar')
|
|
.addClass('progress-bar-warning')
|
|
.css('width', parseInt(failedPercentage) + '%')
|
|
.appendTo(progressBar);
|
|
var progressBarErrorSpan = $('<span/>').addClass('sr-only').html(parseInt(failedPercentage) + '% failed').appendTo(progressBarError);
|
|
|
|
{{-- Add to DOM --}}
|
|
$('#progress-bar-container').html(progressBar[0].outerHTML);
|
|
}
|
|
|
|
$(document).ready(function() {
|
|
number_total = $('#file-list p').length;
|
|
|
|
if (number_total == 0) {
|
|
$('#status-panel').hide();
|
|
$('#complete-panel').show();
|
|
}
|
|
else
|
|
{
|
|
$('#file-list p').each(function (index, element) {
|
|
var photo_id = $(element).data('photo-id');
|
|
var url = '{{ route('photos.analyse', ['id' => 0]) }}';
|
|
url = url.replace(/0$/, photo_id);
|
|
|
|
$.ajax(
|
|
url,
|
|
{
|
|
complete: function () {
|
|
redrawProgressBar();
|
|
|
|
if (number_successful + number_error >= number_total) {
|
|
$('#status-panel').hide();
|
|
$('#complete-panel').show();
|
|
}
|
|
},
|
|
dataType: 'json',
|
|
error: function (xhr, textStatus, errorThrown) {
|
|
$('i', '#file-list p[data-photo-id=' + photo_id + ']')
|
|
.addClass('text-danger')
|
|
.addClass('fa-times');
|
|
number_error++;
|
|
},
|
|
method: 'POST',
|
|
success: function (data) {
|
|
if (data.is_successful) {
|
|
$('i', '#file-list p[data-photo-id=' + photo_id + ']')
|
|
.addClass('text-success')
|
|
.addClass('fa-check');
|
|
number_successful++;
|
|
}
|
|
else {
|
|
$('i', '#file-list p[data-photo-id=' + photo_id + ']')
|
|
.addClass('text-danger')
|
|
.addClass('fa-times');
|
|
number_error++;
|
|
}
|
|
}
|
|
}
|
|
);
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
@endpush |