Implemented the admin tools - regenerate thumbnails and delete photo. Also added the nice loading indicator

This commit is contained in:
Andy Heathershaw 2016-09-09 09:45:11 +01:00
parent 56cfade23c
commit 71f6ed8979
7 changed files with 168 additions and 15 deletions

View File

@ -47,6 +47,7 @@ class PhotoController extends Controller
$result['is_successful'] = false; $result['is_successful'] = false;
$result['message'] = $ex->getMessage(); $result['message'] = $ex->getMessage();
// Remove the photo if it cannot be analysed
$photo->delete(); $photo->delete();
} }
@ -73,6 +74,59 @@ class PhotoController extends Controller
// //
} }
/**
* Remove the specified resource from storage.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function destroy($id)
{
$this->authorize('admin-access');
/** @var Photo $photo */
$photo = Photo::where('id', intval($id))->first();
if (is_null($photo))
{
App::abort(404);
return null;
}
$photo->delete();
return back();
}
public function regenerateThumbnails($photoId)
{
$this->authorize('admin-access');
/** @var Photo $photo */
$photo = Photo::where('id', intval($photoId))->first();
if (is_null($photo))
{
App::abort(404);
return null;
}
$result = ['is_successful' => false, 'message' => ''];
try
{
$photoService = new PhotoService($photo);
$photoService->regenerateThumbnails();
$result['is_successful'] = true;
}
catch (\Exception $ex)
{
$result['is_successful'] = false;
$result['message'] = $ex->getMessage();
}
return response()->json($result);
}
public function rotate($photoId, $angle) public function rotate($photoId, $angle)
{ {
$this->authorize('admin-access'); $this->authorize('admin-access');
@ -270,17 +324,6 @@ class PhotoController extends Controller
return redirect(route('albums.show', array('id' => $albumId))); return redirect(route('albums.show', array('id' => $albumId)));
} }
/**
* Remove the specified resource from storage.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function destroy($id)
{
//
}
/** /**
* @param $id * @param $id
* @return Album * @return Album

6
public/themes/base/js/bootbox.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -36,6 +36,27 @@ ol.breadcrumb {
margin-bottom: 0; margin-bottom: 0;
} }
.photo {
position: relative;
}
.photo .loading {
background-color: #ffffff;
display: none;
height: 100%;
left: 0;
opacity: 0.8;
position: absolute;
text-align: center;
top: 0;
width: 100%;
z-index: 1000;
}
.photo .loading img {
margin-top: 40px;
}
.photo-metadata .metadata_name .photo-metadata .metadata_name
{ {
font-weight: bold; font-weight: bold;

View File

@ -93,17 +93,49 @@
@push('scripts') @push('scripts')
<script type="text/javascript"> <script type="text/javascript">
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) function rotatePhoto(photo_id, angle, parent)
{ {
var url = '{{ route('photos.rotate', ['id' => 0, 'angle' => 1]) }}'; var url = '{{ route('photos.rotate', ['id' => 0, 'angle' => 1]) }}';
url = url.replace('/0/', '/' + photo_id + '/'); url = url.replace('/0/', '/' + photo_id + '/');
url = url.replace(/\/1$/, '/' + angle); url = url.replace(/\/1$/, '/' + angle);
$('.loading', parent).show();
$.post(url, function() $.post(url, function()
{ {
var image = $('img.photo-thumbnail', parent); var image = $('img.photo-thumbnail', parent);
var originalUrl = image.data('original-src'); var originalUrl = image.data('original-src');
image.attr('src', originalUrl + "&_=" + new Date().getTime()); image.attr('src', originalUrl + "&_=" + new Date().getTime());
$('.loading', parent).hide();
}); });
} }
@ -112,6 +144,41 @@
$('.nav-tabs a[href="#upload-tab"]').tab('show'); $('.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() { $('a.rotate-photo-left').click(function() {
var parent = $(this).parents('.photo'); var parent = $(this).parents('.photo');
var photo_id = $(parent).data('photo-id'); var photo_id = $(parent).data('photo-id');

View File

@ -60,6 +60,7 @@
{{-- As these files are shipped with core (not a theme) use the main app.version instead of the current theme's version --}} {{-- As these files are shipped with core (not a theme) use the main app.version instead of the current theme's version --}}
<script src="themes/base/js/jquery.min.js?v={{ urlencode(config('app.version')) }}"></script> <script src="themes/base/js/jquery.min.js?v={{ urlencode(config('app.version')) }}"></script>
<script src="themes/base/bootstrap/js/bootstrap.min.js?v={{ urlencode(config('app.version')) }}"></script> <script src="themes/base/bootstrap/js/bootstrap.min.js?v={{ urlencode(config('app.version')) }}"></script>
<script src="themes/base/js/bootbox.min.js?v={{ urlencode(config('app.version')) }}"></script>
<script src="themes/base/js/app.js?v={{ urlencode(config('app.version')) }}"></script> <script src="themes/base/js/app.js?v={{ urlencode(config('app.version')) }}"></script>
<script type="text/javascript"> <script type="text/javascript">
$.ajaxSetup({ $.ajaxSetup({

View File

@ -1,20 +1,34 @@
@php ($field_prefix = sprintf('photo[%d]', $photo->id)) @php ($field_prefix = sprintf('photo[%d]', $photo->id))
<hr/> <hr/>
<div class="photo row" data-photo-id="{{ $photo->id }}" style="position: relative;"> <div class="photo row" data-photo-id="{{ $photo->id }}">
<div class="col-xs-12 col-sm-2 text-center"> <div class="col-xs-12 col-sm-2">
<div class="loading"><img src="{{ asset('ripple.svg') }}" /></div>
<a href="{{ $photo->thumbnailUrl() }}" target="_blank"> <a href="{{ $photo->thumbnailUrl() }}" target="_blank">
<img class="photo-thumbnail" src="{{ $photo->thumbnailUrl('admin-preview') }}" data-original-src="{{ $photo->thumbnailUrl('admin-preview') }}" style="max-width: 100%;"/> <img class="photo-thumbnail" src="{{ $photo->thumbnailUrl('admin-preview') }}" data-original-src="{{ $photo->thumbnailUrl('admin-preview') }}" style="max-width: 100%;"/>
</a><br/> </a><br/>
{{-- Photo editing tasks - these are hooked up using Javascript in admin/show_album --}}
<div class="btn-toolbar" role="toolbar" style="margin-top: 5px;"> <div class="btn-toolbar" role="toolbar" style="margin-top: 5px;">
<div class="btn-group" role="group"> <div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-fw fa-rotate-right"></i> <span class="caret"></span> <i class="fa fa-fw fa-pencil"></i> <span class="caret"></span>
</button> </button>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a href="#" class="rotate-photo-left"><i class="fa fa-fw fa-rotate-left"></i> Rotate left</a></li> <li><a href="#" class="rotate-photo-left"><i class="fa fa-fw fa-rotate-left"></i> Rotate left</a></li>
<li><a href="#" class="rotate-photo-right"><i class="fa fa-fw fa-rotate-right"></i> Rotate right</a></li> <li><a href="#" class="rotate-photo-right"><i class="fa fa-fw fa-rotate-right"></i> Rotate right</a></li>
</ul> </ul>
</div> </div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-fw fa-cog"></i> <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#" class="regenerate-thumbnails"><i class="fa fa-fw fa-picture-o"></i> Refresh thumbnails</a></li>
<li><a href="#" class="delete-photo"><i class="fa fa-fw fa-trash text-danger"></i> <span class="text-danger">Delete photo</span></a></li>
</ul>
</div>
</div> </div>
</div> </div>
<div class="col-xs-12 col-sm-10"> <div class="col-xs-12 col-sm-10">

View File

@ -27,6 +27,7 @@ Route::group(['prefix' => 'admin'], function () {
// Photo management // Photo management
Route::post('photos/analyse/{id}', 'Admin\PhotoController@analyse')->name('photos.analyse'); Route::post('photos/analyse/{id}', 'Admin\PhotoController@analyse')->name('photos.analyse');
Route::post('photos/regenerate-thumbnails/{id}', 'Admin\PhotoController@regenerateThumbnails')->name('photos.regenerateThumbnails');
Route::post('photos/rotate/{photoId}/{angle}', 'Admin\PhotoController@rotate')->name('photos.rotate'); Route::post('photos/rotate/{photoId}/{angle}', 'Admin\PhotoController@rotate')->name('photos.rotate');
Route::post('photos/store-bulk', 'Admin\PhotoController@storeBulk')->name('photos.storeBulk'); Route::post('photos/store-bulk', 'Admin\PhotoController@storeBulk')->name('photos.storeBulk');
Route::put('photos/update-bulk/{albumId}', 'Admin\PhotoController@updateBulk')->name('photos.updateBulk'); Route::put('photos/update-bulk/{albumId}', 'Admin\PhotoController@updateBulk')->name('photos.updateBulk');