@extends('themes.base.layout') @section('title', 'Analysing...') @section('content') <div class="container" style="margin-top: 40px;"> <div class="row"> <div class="col-sm-8 mr-sm-auto ml-sm-auto" id="analyse-album"> <div class="card" v-if="!isCompleted"> <div class="card-header">Analysing...</div> <div class="card-body"> <p>Your uploaded photos are now being analysed.</p> <div class="progress"> <div class="progress-bar bg-success" v-bind:style="{ width: successfulPercentage }"> </div> <div class="progress-bar bg-danger" v-bind:style="{ width: failedPercentage }"> </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 v-for="image in latestCompletedImages" style="margin-top: 20px;"> <p class="text-success"><span v-text="image.name"></span> ... <i class="fa fa-fw fa-check"></i></p> </div> <div v-for="image in imagesInProgress.slice(0, 5)" style="margin-top: 20px;"> <p><span v-text="image.name"></span> ... <i class="fa fa-fw fa-refresh"></i></p> </div> <div v-if="imagesInProgress.length > 5"> <p>@lang('admin.analyse_and_more.and') <span v-text="imagesInProgress.length - 5"></span> @lang('admin.analyse_and_more.others')</p> </div> <div v-for="image in imagesFailed" style="margin-top: 20px;"> <p class="text-danger"><span v-text="image.name"></span> ... <i class="fa fa-fw fa-times"></i></p> </div> </div> </div> <div class="card" v-if="isCompleted"> <div class="card-header">Upload completed</div> <div class="card-body"> <p>Your upload has completed.</p> <div v-if="numberFailed > 0"> <p class="text-danger">@lang('admin.analyse_photos_failed')</p> <ul class="text-danger" v-for="image in imagesFailed"> <li><span v-text="image.name"></span>: <span v-text="image.reason"></span></li> </ul> </div> <div class="text-right"> <a class="btn btn-link" href="{{ $album->url() }}">View album</a> <a class="btn btn-primary" href="{{ route('albums.show', ['id' => $album->id]) }}"><i class="fa fa-fw fa-chevron-left"></i> Back to album settings</a> </div> </div> </div> </div> </div> </div> @endsection @push('scripts') <script type="text/javascript"> var viewModel = new AnalyseAlbumViewModel(); var app = new Vue(viewModel); {{-- For each photo to analyse, push an instance of AnalyseImageViewModel to our master view model --}} @foreach ($photos as $photo) app.analyseImage(new AnalyseImageViewModel({ 'id': '{{ $photo->id }}', 'name': '{!! addslashes($photo->name) !!}', 'url': '{{ route('photos.analyse', ['id' => $photo->id, 'queue_token' => $queue_token]) }}' })); @endforeach </script> @endpush