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

76 lines
3.7 KiB
PHP

@extends('themes.base.layout')
@section('title', 'Analysing...')
@section('content')
<div class="container" style="margin-top: 40px;">
<div class="row">
<div class="col-sm-8 offset-sm-2" id="analyse-album">
<div class="card" v-if="!isCompleted">
<div class="card-header">Analysing...</div>
<div class="card-block">
<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-block">
<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