@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> @foreach ($album->albumParentTree() as $parentAlbum) @if ($parentAlbum->id == $album->id) <li class="breadcrumb-item active">{{ $album->name }}</li> @else <li class="breadcrumb-item"><a href="{{ route('albums.show', ['id' => $parentAlbum->id]) }}">{{ $parentAlbum->name }}</a></li> @endif @endforeach @endsection @section('content') <div class="container"> <div class="row"> <div class="col"> <a class="pull-right btn btn-secondary" href="{{ $album->url() }}"><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.no_file_selected = '{!! addslashes(trans('admin.upload_no_file')) !!}'; 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 ($g_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'); } }); appUpload.$watch('statusMessages', function($value) { $('#upload-progress-modal').modal('handleUpdate'); }) }); </script> @endpush