175 lines
8.2 KiB
PHP
175 lines
8.2 KiB
PHP
@extends('layout/template')
|
|
|
|
@section('content')
|
|
<div class="row" style="margin-top: 20px;">
|
|
<div class="col-md-12">
|
|
<a class="btn btn-outline-primary" style="float:right;" data-toggle="modal" data-target="#uploadModal">Upload Images</a>
|
|
<a class="btn btn-outline-primary" style="float:right;margin-right: 10px;" href="/g/{{$gallery->url}}/edit">Edit</a>
|
|
<h1>Images</h1>
|
|
</div>
|
|
</div>
|
|
<div class="row" style="margin-top: 10px;" >
|
|
<div class="col-md-12">
|
|
@foreach($images as $image)
|
|
<div class="card col-md-2 editImage" data-name="{{ $image->name }}" data-description="{{ $image->description }}" data-rating="{{ $image->rating }}" x-id="{{ $image->id }}" x-name="{{ $image->filename }}" x-image-url="/{{ $tenant->url }}/{{ $gallery->url }}/{{ $image->id }}/file?size=medium" style="float:left;cursor: pointer;" >
|
|
|
|
<div class="card-body" style="text-align: center;">
|
|
<img class="card-img-top" src="/{{ $tenant->url }}/{{ $gallery->url }}/{{ $image->id }}/file?size=small" style="height: 200px;width: auto; max-width: 100%;">
|
|
<h5 class="card-title">
|
|
{{ $image->filename }}
|
|
|
|
</h5>
|
|
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Button trigger modal -->
|
|
|
|
<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="exampleModalLabel">Upload Images</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form action="php/upload.html" method="post" enctype="multipart/form-data">
|
|
<input type="file" name="files[]" id="filer_input" multiple="multiple">
|
|
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="exampleModalLabel">Bild bearbeiten</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<form method="post" id="imageEditForm">
|
|
@csrf
|
|
<div class="modal-body">
|
|
<img src="" id="imagePreview" style="width: 100%;">
|
|
<input style="display: none;" name="name" id="edit-name" placeholder="Name" class="form-control">
|
|
<input style="display: none;" name="edit-id" id="edit-id" placeholder="ID" class="form-control">
|
|
<b>Name</b>
|
|
<input name="name" id="name" class="form-control">
|
|
<b>Beschreibung</b>
|
|
<textarea name="description" class="form-control" id="description"></textarea>
|
|
<b>Sorting</b>
|
|
<input name="rating" class="form-control" id="rating">
|
|
<hr>
|
|
<button type="button" id="makeGalleryDefault" class="btn btn-warning" style="width: 100%;" data-dismiss="modal">Make Gallery Preview Image</button>
|
|
<button type="button" id="deleteImage" class="btn btn-danger" style="width: 100%;" data-dismiss="modal">Delete</button>
|
|
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
|
<button type="button" id="saveForm" class="btn btn-success" data-dismiss="modal">Save</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@endsection
|
|
@section('js')
|
|
<script>
|
|
var g = null;
|
|
$(".editImage").click(function () {
|
|
g = this
|
|
$("#imagePreview").attr("src", $(this).attr("x-image-url"));
|
|
$("#edit-name").val($(this).attr("x-name"));
|
|
$("#edit-id").val($(this).attr("x-id"));
|
|
$('#exampleModal').modal('show');
|
|
$("#name").val($(this).attr("data-name"));
|
|
$("#rating").val($(this).attr("data-rating"));
|
|
$("#description").val($(this).attr("data-description"));
|
|
});
|
|
$("#makeGalleryDefault").click(function () {
|
|
$.ajax("/g/{{ $gallery->url }}/setDefault?id="+$("#edit-id").val()).done(function () {
|
|
alert("Set as Main Image");
|
|
});
|
|
});
|
|
$("#deleteImage").click(function () {
|
|
$.ajax("/g/{{ $gallery->url }}/delete?id="+$("#edit-id").val()).done(function () {
|
|
alert("Image deleted");
|
|
});
|
|
});
|
|
$("#saveForm").click(function () {
|
|
var form = $("#imageEditForm").serialize();
|
|
$.post("/g/{{ $gallery->url }}/save?id="+$("#edit-id").val(), form, function () {
|
|
$(g).attr("data-name", $("#name").val());
|
|
$(g).attr("data-rating", $("#rating").val());
|
|
$(g).attr("data-description", $("#description").val());
|
|
alert("Saved");
|
|
});
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<!-- UPLOAD !-->
|
|
<link href="/css/jquery.filer.css" type="text/css" rel="stylesheet" />
|
|
<link href="/css/themes/jquery.filer-dragdropbox-theme.css" type="text/css" rel="stylesheet" />
|
|
|
|
|
|
<script src="/js/jquery.filer.min.js"></script>
|
|
<script>
|
|
$(document).ready(function() {
|
|
$('#filer_input').filer({
|
|
addMore: true,
|
|
showThumbs: true,
|
|
fileMaxSize: 60,
|
|
uploadFile: {
|
|
url: '/g/{{ $gallery->url }}/upload', //URL to which the request is sent {String}
|
|
data: null, //Data to be sent to the server {Object}
|
|
type: 'POST', //The type of request {String}
|
|
enctype: 'multipart/form-data', //Request enctype {String}
|
|
synchron: false, //Upload synchron the files
|
|
beforeSend: null, //A pre-request callback function {Function}
|
|
success: null, //A function to be called if the request succeeds {Function}
|
|
error: null, //A function to be called if the request fails {Function}
|
|
statusCode: null, //An object of numeric HTTP codes {Object}
|
|
onProgress: null, //A function called while uploading file with progress percentage {Function}
|
|
onComplete: null, //A function called when all files were uploaded {Function},
|
|
error: function (e, r) {
|
|
console.log(r)
|
|
toastr.error(e[0].textContent, 'Failed Uploading Image', {timeOut: 0})
|
|
},
|
|
success: function (e, g) {
|
|
console.log("Success")
|
|
console.log(e)
|
|
console.log(g)
|
|
//alert("Upload Success");
|
|
toastr.success(g[0].textContent, 'Upload successful', {timeOut: 2000})
|
|
}
|
|
},
|
|
onRemove: function () {
|
|
alert("ToDo this feature dont work");
|
|
return false;
|
|
}
|
|
});
|
|
});
|
|
|
|
$('#uploadModal').on('hidden.bs.modal', function (e) {
|
|
location.reload();
|
|
})
|
|
</script>
|
|
@endsection
|