blue-twilight/resources/views/themes/base/admin/album_analyse_progress.blade.php

126 lines
5.6 KiB
PHP
Raw Normal View History

@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