blue-twilight/resources/views/themes/base/admin/analyse_album.blade.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" data-bind="visible: !isCompleted()">
                    <div class="panel-heading">Analysing...</div>
                    <div class="panel-body">
                        <p>Your uploaded photos are now being analysed.</p>

                        <div class="progress">
                            <div class="progress-bar progress-bar-success" data-bind="style: { width: successfulPercentage() }">
                                <span class="sr-only"><span class="percentage-success" data-bind="text: successfulPercentage"></span></span>
                            </div>
                            <div class="progress-bar progress-bar-danger" data-bind="style: { width: failedPercentage() }">
                                <span class="sr-only"><span class="percentage-danger" data-bind="text: failedPercentage"></span></span>
                            </div>
                        </div>

                        {{-- We display a queue of 3 recently completed items, and 5 up-next items, as well as a counter saying "... and XYZ more" --}}
                        {{-- That's what the 3's and 5's are in the next couple of blocks --}}
                        <div data-bind="foreach: imagesRecentlyCompleted.slice((imagesRecentlyCompleted().length - 3 < 0) ? 0 : imagesRecentlyCompleted().length - 3, 3)" style="margin-top: 20px;">
                            <p class="text-success"><span data-bind="text: name"></span> ... <i class="fa fa-fw fa-check"></i></p>
                        </div>
                        <div data-bind="foreach: imagesInProgress.slice(0, 5)" style="margin-top: 20px;">
                            <p><span data-bind="text: name"></span> ... <i data-bind="css: iconClass()"></i></p>
                        </div>

                        <div data-bind="visible: imagesInProgress().length > 5">
                            <p>@lang('admin.analyse_and_more.and') <span data-bind="text: imagesInProgress().length - 5"></span> @lang('admin.analyse_and_more.others')</p>
                        </div>
                    </div>
                </div>

                <div class="panel panel-default" data-bind="visible: isCompleted">
                    <div class="panel-heading">Upload completed</div>
                    <div class="panel-body">
                        <p>Your upload has completed.</p>
                        <div data-bind="visible: numberFailed() > 0">
                            <p class="text-danger">@lang('admin.analyse_photos_failed')</p>
                            <ul class="text-danger" data-bind="foreach: imagesFailed">
                                <li><span data-bind="text: name"></span>: <span data-bind="text: reason"></span></li>
                            </ul>
                        </div>

                        <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 viewModel = new AnalyseAlbumViewModel();

        {{-- For each photo to analyse, push an instance of AnalyseImageViewModel to our master view model --}}
        @foreach ($photos as $photo)
        viewModel.imagesToAnalyse.push(new AnalyseImageViewModel({
            'id': '{{  $photo->id }}',
            'name': '{!! addslashes($photo->name) !!}',
            'url': '{{ route('photos.analyse', ['id' => $photo->id, 'queue_token' => $queue_token]) }}'
        }));
        @endforeach

        ko.applyBindings(viewModel);
    </script>
@endpush