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

84 lines
3.5 KiB
PHP
Raw Normal View History

@extends('themes.base.layout')
@section('title', 'Processing...')
@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">Processing...</div>
<div class="panel-body">
<p>Your upload is now being processed.</p>
<div id="progress-bar-container">
<div class="progress"></div>
</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 refreshInterval = null;
function refreshStatus()
{
$.get('{{ route('albums.monitorUploadJson', ['id' => $album->id, 'upload_id' => $upload->id]) }}', function(data)
{
var total = data.number_photos;
if (data.is_completed)
{
// Stop the refresh
window.clearInterval(refreshInterval);
// Display the complete box
$('#status-panel').hide();
$('#complete-panel').show();
}
var successPercentage = (data.number_successful / data.number_photos) * 100;
var failedPercentage = (data.number_failed / data.number_photos) * 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() {
refreshInterval = window.setInterval(refreshStatus, 1000);
});
</script>
@endpush