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

120 lines
5.6 KiB
PHP
Raw Normal View History

@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>
<div data-bind="foreach: imagesToAnalyse" style="margin-top: 20px;">
<p><span data-bind="text: name"></span> ... <i data-bind="css: iconClass"></i></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]) }}'
}));
@endforeach
ko.applyBindings(viewModel);
/*
$(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