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

@extends('themes.base.layout')
@section('title', $album->name)

@section('breadcrumb')
    <div class="breadcrumb">
        <div class="container">
            <ol class="breadcrumb">
                <li><a href="{{ route('home') }}">@lang('navigation.breadcrumb.home')</a></li>
                <li><a href="{{ route('admin') }}">@lang('navigation.breadcrumb.admin')</a></li>
                <li><a href="{{ route('albums.index') }}">@lang('navigation.breadcrumb.albums')</a></li>
                <li class="active">{{ $album->name }}</li>
            </ol>
        </div>
    </div>
@endsection

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <a class="pull-right btn btn-default" href="{{ $album->url() }}" target="_blank"><i class="fa fa-fw fa-eye"></i> @lang('admin.open_album')</a>

                <h1 class="page-title">{{ $album->name }}</h1>
                <p>{{ $album->description }}</p>
                <hr/>

                <div>
                    <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active"><a href="#photos-tab" aria-controls="photos-tab" role="tab" data-toggle="tab"><i class="fa fa-fw fa-photo"></i> @lang('admin.album_photos_tab')</a></li>
                        <li role="presentation"><a href="#upload-tab" aria-controls="upload-tab" role="tab" data-toggle="tab"><i class="fa fa-fw fa-upload"></i> @lang('admin.album_upload_tab')</a></li>
                        <li role="presentation"><a href="#settings-tab" aria-controls="settings-tab" role="tab" data-toggle="tab"><i class="fa fa-fw fa-cog"></i> @lang('admin.album_settings_tab')</a></li>
                    </ul>

                    <div class="tab-content">
                        {{-- Photos --}}
                        <div role="tabpanel" class="tab-pane active" id="photos-tab">
                            @if (count($photos) == 0)
                                <div class="text-center" style="margin-top: 30px;">
                                    <h4 class="text-danger"><b>@lang('admin.album_no_photos_p1')</b></h4>
                                    <p>@lang('admin.album_no_photos_p2')</p>
                                    <p style="margin-top: 30px;"><button id="upload-button" class="btn btn-lg btn-success">@lang('admin.album_no_photos_button')</button></p>
                                </div>
                            @else
                                {!! Form::open(['route' => ['photos.updateBulk', $album->id], 'method' => 'PUT']) !!}

                                @foreach ($photos as $photo)
                                    @include (Theme::viewName('partials.single_photo_admin'))
                                @endforeach

                                <div class="pull-left">
                                    <p>{!! Form::label('bulk-action', trans('forms.bulk_edit_photos_label'), ['class' => 'control-label']) !!}</p>
                                    {!! Form::select('bulk-action', $bulk_actions, null, ['placeholder' => trans('forms.bulk_edit_photos_placeholder'), 'id' => 'bulk-action-apply']) !!}
                                    <button type="submit" class="btn btn-sm btn-success" name="bulk-apply" value="clicked">@lang('forms.apply_action')</button>
                                </div>
                                <div class="pull-right">
                                    <button type="submit" class="btn btn-success">@lang('forms.save_action')</button>
                                </div>
                                <div class="clearfix"></div>

                                {!! Form::close() !!}

                                <div class="text-center">
                                    {{ $photos->links() }}
                                </div>
                            @endif
                        </div>

                        {{-- Upload --}}
                        <div role="tabpanel" class="tab-pane" id="upload-tab">
                            <h4>Upload images</h4>

                            <div class="row">
                                <div class="col-sm-5">
                                    {!! Form::open(['route' => 'photos.store', 'method' => 'POST', 'files' => true, 'id' => 'single-upload-form']) !!}
                                    {!! Form::hidden('album_id', $album->id) !!}

                                    <div class="form-group">
                                        {!! Form::file('photo[]', ['class' => 'control-label', 'multiple' => 'multiple', 'id' => 'single-upload-files']) !!}
                                    </div>

                                    <div>
                                        <button type="submit" class="btn btn-success">@lang('forms.upload_action')</button>
                                    </div>
                                    {!! Form::close() !!}
                                </div>

                                <div class="col-sm-5 text-center" id="upload-progress-bar" style="display: none;">
                                    <p><b>Uploading...</b></p>
                                    <div class="progress">
                                        <div class="progress-bar progress-bar-success" style="width: 0%">
                                            <span class="sr-only"><span class="percentage-success">0%</span> Complete (success)</span>
                                        </div>
                                        <div class="progress-bar progress-bar-danger" style="width: 0%">
                                            <span class="sr-only"><span class="percentage-danger">0%</span> Complete (warning)</span>
                                        </div>
                                    </div>
                                    <p id="upload-status-text"></p>
                                </div>
                            </div>

                            <hr/>
                            <h4>Bulk upload</h4>

                            {!! Form::open(['route' => 'photos.storeBulk', 'method' => 'POST', 'files' => true]) !!}
                            {!! Form::hidden('album_id', $album->id) !!}

                            <div class="form-group">
                                {!! Form::file('archive', ['class' => 'control-label']) !!}
                            </div>

                            <div>
                                {!! Form::submit(trans('forms.upload_action'), ['class' => 'btn btn-success']) !!}
                            </div>
                            {!! Form::close() !!}
                        </div>

                        {{-- Settings --}}
                        <div role="tabpanel" class="tab-pane" id="settings-tab">
                            <div class="btn-toolbar">
                                <a href="{{ route('albums.edit', ['id' => $album->id]) }}" class="btn btn-default">@lang('forms.edit_action')</a>
                                <a href="{{ route('albums.delete', ['id' => $album->id]) }}" class="btn btn-danger">@lang('forms.delete_action')</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script type="text/javascript">
    var images_failed = 0;
    var images_uploaded = 0;
    var images_total = 0;

    function deletePhoto(photo_id, parent)
    {
        var url = '{{ route('photos.destroy', ['id' => 0]) }}';
        url = url.replace(/\/0$/, '/' + photo_id);

        $('.loading', parent).show();

        $.post(url, {'_method': 'DELETE'}, function(data)
        {
            window.location.reload();
        });
    }

    function regenerateThumbnails(photo_id, parent)
    {
        var url = '{{ route('photos.regenerateThumbnails', ['id' => 0]) }}';
        url = url.replace(/\/0$/, '/' + photo_id);

        $('.loading', parent).show();
        $.post(url, function()
        {
            var image = $('img.photo-thumbnail', parent);
            var originalUrl = image.data('original-src');
            image.attr('src', originalUrl + "&_=" + new Date().getTime());

            $('.loading', parent).hide();
        });
    }

    function rotatePhoto(photo_id, angle, parent)
    {
        var url = '{{ route('photos.rotate', ['id' => 0, 'angle' => 1]) }}';
        url = url.replace('/0/', '/' + photo_id + '/');
        url = url.replace(/\/1$/, '/' + angle);

        $('.loading', parent).show();
        $.post(url, function()
        {
            var image = $('img.photo-thumbnail', parent);
            var originalUrl = image.data('original-src');
            image.attr('src', originalUrl + "&_=" + new Date().getTime());

            $('.loading', parent).hide();
        });
    }

    function updateProgressBar()
    {
        if ((images_uploaded > 0 && images_uploaded + images_failed) == images_total)
        {
            window.location = '{{ route('albums.analyse', ['id' => $album->id]) }}';
        }

        var failed_percentage = ((images_failed / images_total) * 100).toFixed(2);
        var success_percentage = ((images_uploaded / images_total) * 100).toFixed(2);

        $('#upload-progress-bar').show();
        $('.progress-bar-success', '#upload-progress-bar').css('width', success_percentage + '%');
        $('.progress-bar-danger', '#upload-progress-bar').css('width', failed_percentage + '%');
        $('.percentage-success', '#upload-progress-bar').html(success_percentage);
        $('.percentage-danger', '#upload-progress-bar').html(failed_percentage);
    }

    function uploadImageFile(formObject, imageFile)
    {
        var formData = new FormData();
        formData.append('album_id', '{{ $album->id }}');
        formData.append('photo[]', imageFile, imageFile.name);

        $.ajax(
            {
                complete: function() {
                    updateProgressBar();
                },
                contentType: false,
                data: formData,
                error: function() {
                    images_failed++;
                    $('#upload-status-text').html('@lang('admin.upload_file_status_failed')'.replace(':file_name', imageFile.name));
                },
                method: $(formObject).attr('method'),
                processData: false,
                success: function() {
                    images_uploaded++;
                    $('#upload-status-text').html('@lang('admin.upload_file_status_success')'.replace(':file_name', imageFile.name));
                },
                url: $(formObject).attr('action')
            }
        );
    }

    $(document).ready(function() {
        $('#upload-button').click(function() {
            $('.nav-tabs a[href="#upload-tab"]').tab('show');
        });

        {{-- Photo editing tasks - the buttons beneath the photos in partials/single_photo_admin --}}
        $('a.delete-photo').click(function() {
            var parent = $(this).parents('.photo');
            var photo_id = $(parent).data('photo-id');

            $(this).dropdown('toggle');

            bootbox.dialog({
                message: 'Are you sure you want to delete this photo? This cannot be undone!',
                title: 'Delete photo',
                buttons: {
                    cancel: {
                        label: "Cancel",
                        className: "btn-default"
                    },
                    confirm: {
                        label: "Delete",
                        className: "btn-danger",
                        callback: function() {
                            deletePhoto(photo_id, parent);
                        }
                    }
                }
            });

            return false;
        });
        $('a.regenerate-thumbnails').click(function() {
            var parent = $(this).parents('.photo');
            var photo_id = $(parent).data('photo-id');

            regenerateThumbnails(photo_id, parent);
            $(this).dropdown('toggle');
            return false;
        });
        $('a.rotate-photo-left').click(function() {
            var parent = $(this).parents('.photo');
            var photo_id = $(parent).data('photo-id');

            rotatePhoto(photo_id, 90, parent);
            $(this).dropdown('toggle');
            return false;
        });
        $('a.rotate-photo-right').click(function() {
            var parent = $(this).parents('.photo');
            var photo_id = $(parent).data('photo-id');

            rotatePhoto(photo_id, 270, parent);
            $(this).dropdown('toggle');
            return false;
        });

        {{-- Photo uploads using AJAX --}}
        if (window.FormData)
        {
            $('#single-upload-form').submit(function(event) {
                var fileSelect = $('#single-upload-files', this);
                var uploadButton = $('button[type=submit]', this);

                var currentText = uploadButton.html();

                // Update button text
                uploadButton.attr('disabled', 'disabled');
                uploadButton.html('Uploading...');

                // Get the selected files
                var notImageString = '{!! addslashes(trans('admin.upload_file_not_image_messages')) !!}';
                var files = fileSelect[0].files;

                // Reset statistics
                images_total = files.length;
                images_failed = 0;
                images_uploaded = 0;
                updateProgressBar();

                // Loop through each of the selected files and upload them individually
                for (var i = 0; i < files.length; i++)
                {
                    var file = files[i];

                    // We're only interested in image files
                    if (!file.type.match('image.*'))
                    {
                        alert(notImageString.replace(':file_name', file.name));
                        continue;
                    }

                    // Upload the file
                    uploadImageFile($(this), file);
                }

                // Prevent standard form upload
                event.preventDefault();
                return false;
            })
        }
    })
</script>
@endpush