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

@extends(Theme::viewName('layout'))
@section('title', $album->name)

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

@section('content')
    <div class="container">
        <div class="row">
            <div class="col">
                <a class="pull-right btn btn-secondary" 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>{!! nl2br(e($album->description)) !!}</p>

                <div class="mt-4">
                    <ul class="nav nav-tabs" role="tablist">
                        @include(Theme::viewName('partials.tab'), ['tab_name' => 'photos', 'tab_icon' => 'photo', 'tab_text' => trans('admin.album_photos_tab')])
                        @can('upload-photos', $album)
                            @include(Theme::viewName('partials.tab'), ['tab_name' => 'upload', 'tab_icon' => 'upload', 'tab_text' => trans('admin.album_upload_tab')])
                        @endcan
                        @include(Theme::viewName('partials.tab'), ['tab_name' => 'cameras', 'tab_icon' => 'camera', 'tab_text' => trans('admin.album_cameras_tab')])
                        @can('change-permissions', $album)
                            @include(Theme::viewName('partials.tab'), ['tab_name' => 'permissions', 'tab_icon' => 'lock', 'tab_text' => trans('admin.album_security_tab')])
                        @endcan
                        @include(Theme::viewName('partials.tab'), ['tab_name' => 'redirects', 'tab_icon' => 'retweet', 'tab_text' => trans('admin.album_redirects_tab')])
                        @include(Theme::viewName('partials.tab'), ['tab_name' => 'settings', 'tab_icon' => 'cog', 'tab_text' => trans('admin.album_settings_tab')])
                    </ul>

                    <div class="tab-content">
                        {{-- Photos --}}
                        @include(Theme::viewName('partials.album_photos_tab'))
                        @can('upload-photos', $album)
                            {{-- Upload --}}
                            @include(Theme::viewName('partials.album_upload_tab'))
                        @endcan
                        {{-- Cameras --}}
                        @include(Theme::viewName('partials.album_cameras_tab'))
                        @can('change-permissions', $album)
                            {{-- Permissions --}}
                            @include(Theme::viewName('partials.album_permissions_tab'))
                        @endcan
                        {{-- Redirects --}}
                        @include(Theme::viewName('partials.album_redirects_tab'))
                        {{-- Settings --}}
                        @include(Theme::viewName('partials.album_settings_tab'))
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Form used for the replace image popup -->
    <form id="replace-image-form" method="post" action="{{ route('photos.store') }}" enctype="multipart/form-data" style="display: none;">
        {{ csrf_field() }}
        <input type="hidden" name="album_id" value="{{ $album->id }}"/>
        <input type="hidden" name="photo_id" value=""/>
        <input type="hidden" name="queue_token" value="{{ $queue_token }}"/>
        <div class="form-group">
            <input type="file" class="form-control" name="photo[]"/>
        </div>
    </form>
@endsection

@push('scripts')
<script type="text/javascript">
    var language = [];
    language.action_cancel = '{!! addslashes(trans('forms.cancel_action')) !!}';
    language.action_continue = '{!! addslashes(trans('forms.continue_action')) !!}';
    language.action_delete = '{!! addslashes(trans('forms.delete_action')) !!}';
    language.change_album_message = '{!! addslashes(trans('admin.change_album_message')) !!}';
    language.change_album_title = '{!! addslashes(trans('admin.change_album_title')) !!}';
    language.delete_bulk_confirm_message = '{!! addslashes(trans('admin.delete_bulk_photos_message')) !!}';
    language.delete_bulk_confirm_title = '{!! addslashes(trans('admin.delete_bulk_photos_title')) !!}';
    language.delete_confirm_message = '{!! addslashes(trans('admin.delete_photo_message')) !!}';
    language.delete_confirm_title = '{!! addslashes(trans('admin.delete_photo_title')) !!}';
    language.not_an_image_file = '{!! addslashes(trans('admin.upload_file_not_image_messages')) !!}';
    language.select_all_choice_all_action = '{!! addslashes(trans('admin.select_all_choice.all_action')) !!}';
    language.select_all_choice_message = '{!! addslashes(trans('admin.select_all_choice.message')) !!}';
    language.select_all_choice_title = '{!! addslashes(trans('admin.select_all_choice.title')) !!}';
    language.select_all_choice_visible_action = '{!! addslashes(trans('admin.select_all_choice.visible_action')) !!}';
    language.image_failed = '{!! addslashes(trans('admin.upload_file_status_failed')) !!}';
    language.image_uploaded = '{!! addslashes(trans('admin.upload_file_status_success')) !!}';
    language.replace_image_message = '{!! addslashes(trans('admin.replace_image_message')) !!}';
    language.replace_image_title = '{!! addslashes(trans('admin.replace_image_title')) !!}';
    language.upload_status = '{!! addslashes(trans('admin.upload_file_status_progress')) !!}';

    var urls = [];
    urls.analyse = '{{ route('albums.analyse', ['id' => $album->id, 'queue_token' => $queue_token]) }}';
    urls.delete_photo = '{{ route('photos.destroy', ['id' => 0]) }}';
    urls.flip_photo = '{{ route('photos.flip', ['id' => 0, 'horizontal' => -1, 'vertical' => -2]) }}';
    urls.move_photo = '{{ route('photos.move', ['photoId' => 0]) }}';
    urls.regenerate_thumbnails = '{{ route('photos.regenerateThumbnails', ['photoId' => 0]) }}';
    urls.rotate_photo = '{{ route('photos.rotate', ['id' => 0, 'angle' => 1]) }}';

    var viewModel = new UploadPhotosViewModel('{{ $album->id }}', '{{ $queue_token }}', language, urls);
    var editViewModel = new EditPhotosViewModel('{{ $album->id }}', language, urls);

    @foreach ($photos as $photo)
        editViewModel.data.photoIDsAvailable.push({{ $photo->id }});
    @endforeach

    // Populate the list of albums in the view model
    @foreach ($albums as $album)
        @if(Gate::check('edit', $album) && Gate::check('upload-photos', $album))
            editViewModel.data.albums.push({
                'id': '{{ $album->id }}',
                'name': '{!! addslashes($album->name) !!}'
            });
        @endif
    @endforeach

    function renderLabelsFields()
    {
        $('.labels-field').selectize({
            plugins: ['remove_button'],
            delimiter: ',',
            persist: false,
            options: [
                @foreach ($labels as $label)
                {
                    value: '{{ $label->id }}',
                    text: '{{ $label->name}}'
                },
                @endforeach
            ],
            create: function(input) {
                return {
                    value: input,
                    text: input
                }
            }
        });
    }

    $(document).ready(function() {
        {{-- Photo uploads using AJAX --}}
        if (window.FormData)
        {
            $('#bulk-upload-form').submit(function(event) {
                // Set the in progress flag - no need to unset it as this is a synchronous process so the browser
                // will reload the page in some way after completion
                if (!viewModel.isBulkUploadInProgress())
                {
                    viewModel.isBulkUploadInProgress(true);

                    // Wait a minute to give KnockoutJS chance to update the UI
                    window.setTimeout(function() {
                        $('#bulk-upload-form').submit();
                    }, 1000);

                    return false;
                }

                // Already set the flag, let the upload commence
                return true;
            });
        }

        {{-- Select All/None links on the permissions tab --}}
        $('a.select-all').click(function() {
            $('input:checkbox', $(this).closest('.card-body')).prop('checked', true);
            return false;
        });
        $('a.select-none').click(function() {
            $('input:checkbox', $(this).closest('.card-body')).prop('checked', false);
            return false;
        });

        {{-- Type-ahead support for users textbox on the permissions tab --}}
        var userDataSource = new Bloodhound({
            datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
            queryTokenizer: Bloodhound.tokenizers.whitespace,
            remote: {
                url: '{{ route('users.searchJson') }}?q=%QUERY',
                wildcard: '%QUERY'
            }
        });

        $('#user-search-textbox').typeahead(null, {
            name: 'user-search',
            display: 'name',
            source: userDataSource
        });
        $('#user-search-textbox').bind('typeahead:select', function(ev, suggestion) {
            $('#user-id-field').val(suggestion.id);
        });

        {{-- Selectize support for photo labelling --}}
        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e)
        {
            var target = $(e.target).attr('href');
            if (target === '#photos-tab') {
                renderLabelsFields();
            }
        });
        window.setTimeout(renderLabelsFields, 500);

        // Bind the view models to the relevant tab
        var appEdit = new Vue(editViewModel);

        var appUpload = new Vue(viewModel);
        appUpload.$watch('isUploadInProgress', function(value) {
            if (value)
            {
                $('#upload-progress-modal').modal('show');
            }
            else if (this.statusMessages.length === 0)
            {
                $('#upload-progress-modal').modal('hide');
            }
        });
    });
</script>
@endpush