@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