resimler.blade.php

resimler.blade.php | 13.1 KB | Satir: 0 | php Geri

@extends('backend.app')
@section("content")
    <div class="content-header row">
        <div class="content-header-left col-md-6 col-12 mb-2 breadcrumb-new">
            <h3 class="content-header-title mb-0 d-block">{{$galeri->baslik}} Resimleri</h3>
            <div class="row breadcrumbs-top d-inline-block">
                <div class="breadcrumb-wrapper col-12">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{url('panel')}}">Anasayfa</a>
                        </li>
                        <li class="breadcrumb-item"><a href="{{url('panel/galeriler')}}">Galeriler</a>
                        </li>
                        <li class="breadcrumb-item active">{{$galeri->baslik}}
                        </li>
                    </ol>
                </div>
            </div>
        </div>
        <div class="content-header-right col-md-6 col-12">
            <div class="dropdown float-md-right">
                <a href="{{url('panel/galeriler')}}" class="btn btn-dark round btn-glow px-2">Geri Dön</a>
            </div>
        </div>
    </div>

<div class="content-body">
        <div class="row">
            <div id="recent-sales" class="col-12 col-md-12">
                <div class="card">
                    <div class="card-content">
                        <div class="card-body">
                                <div class="form-body">
                                    <div class="card-content">
                                        <button id="select-files" class="btn btn-primary mb-1 d-none"><i class="ft-plus-circle"></i> Galeri Resimlerini Seç</button>
                                        <form method="post" action="{{route('panel.galeriler.galeri.resimler.kaydet',['id' => $galeri->id])}}" enctype="multipart/form-data" class="dropzone" id="my-dropzone">
                                            @csrf
                                            <div class="dz-message">Yüklemek için tıklayın veya resimleri buraya sürükleyin.</div>
                                            <input type="hidden" name="galeri" value="{{$galeri->id}}">
                                        </form>
                                    </div>
                                </div>
                                <div class="form-actions text-right mt-1">
                                    <div class="d-md-inline-block mr-2 d-sm-none text-muted">
                                        Resimleri seçtikten sonra sağdaki Kaydet butonuna tıklayın.
                                    </div>
                                    <button type="submit" id="resimkaydet" class="btn btn-success">
                                        <i class="la la-check"></i> Kaydet
                                    </button>
                                </div>

</div>
                    </div>
                </div>
            </div>
        </div>
        <h4 class="form-section mb-1"><i class="la la-photo"></i> {{$galeri->baslik}} Resimleri (<small class="text-muted">Resimleri sürükle bırak yöntemi ile sıralayabilirsiniz.</small>)</h4>
        <div class="row" id="card-drag-area">
            @foreach($resimler as $resim)
            <div id="{{$resim->id}}" class="col-xl-3 col-lg-6 col-sm-12 drag">
                <div class="card">
                    <div class="card-content">
                        <img class="img-fluid" src="{{asset('images/galeriresim/'.$resim->resim)}}" alt="">
                        <button data-id="{{$resim->resim}}" style="position: absolute;top:10px;right: 10px;" type="button" class="btn btn-icon btn-sm btn-danger"><i class="la la-trash"></i></button>
                        <div class="card-body p-1">
                            <textarea data-id="{{$resim->id}}" class="form-control ic-title-field" style="padding: 5px" rows="4">{{$resim->metadesc}}</textarea>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach

</div>
    </div>
@endsection

@push("customJs")
    <script src="{{asset('assets/backend/app-assets/vendors/js/ui/jquery-ui.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('assets/backend/app-assets/vendors/js/extensions/dropzone.min.js')}}" type="text/javascript"></script>
    <script>
        Dropzone.options.myDropzone =
            {
                paramName: "file",
                renameFile: function(file) {
                    let dt = new Date();
                    let time = dt.getTime();
                    let extension = file.name.substr( (file.name.lastIndexOf('.') +1) );
                    return time+'.'+extension;
                },
                autoProcessQueue : false,
                uploadMultiple: false,
                parallelUploads : 25,
                previewsContainer: "#my-dropzone", // Define the container to display the previews
                //clickable: "#select-files", // Define the element that should be used as click trigger to select files.
                maxFilesize: 10, // MB
                addRemoveLinks: true,
                dictRemoveFile: " Sil",
                dictFileTooBig: 'Resim boyutu 10 MB tan büyük',
                dictCancelUpload: 'İptal Et',
                acceptedFiles: 'image/*',
                resizeQuality: 1,
                resizeWidth: 800,
                removedfile: function(file)
                {
                    let name = file.upload.filename;
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': '{{csrf_token()}}'
                        },
                        type: 'POST',
                        url: "/panel/galeriler/resimler/sil/"+name,
                        data: {filename: name,},
                        success: function (data){
                            console.log("Resim silindi.");
                        },
                        error: function(e) {
                            console.log(e);
                        }});
                    let fileRef;
                    return (fileRef = file.previewElement) != null ?
                        fileRef.parentNode.removeChild(file.previewElement) : void 0;
                },
                init: function() {
                    let submitButton = document.querySelector("#resimkaydet")
                    let myDropzone = this;
                    submitButton.addEventListener("click", function() {
                        myDropzone.processQueue();
                    });

},
                queuecomplete: function() {
                    swal({
                            title: "İşlem Tamam!",
                            text: "<strong>Resimler Başarıyla Eklendi.</strong>",
                            type: "success",
                            html: true,
                            timer: 1500},
                        function(){
                            location.reload();
                        }
                    );
                },
                success: function(file, response)
                {
                    console.log(response);
                },
                error: function(file, response)
                {
                    return false;
                }
            };

// List with handle
        /*var el = document.getElementById('card-drag-area');
        Sortable.create(el, {
            draggable: ".drag",
            ghostClass: 'ghost',
            animation: 150
        });*/
        $("#my-dropzone").sortable({
            items:'.dz-preview',
            cursor: 'move',
            opacity: 0.5,
            containment: "parent",
            distance: 20,
            tolerance: 'pointer',
            update: function(e, ui){
                // do what you want
            },
            change: function (event, ui) {
                ui.placeholder.css({visibility: 'visible', border: '1px solid #535BE2' });
            }
        });

$("#card-drag-area").sortable({
            items:'.drag',
            revert: true,
            cursor: 'move',
            opacity: 0.5,
            distance: 20,
            tolerance: 'pointer',
            update: function(event, ui){
                /*var order = $('#card-drag-area').sortable('serialize');
                console.log(order);*/

},
            change: function (event, ui) {
                ui.placeholder.css({visibility: 'visible', border: '1px solid #29C5FF',backgroundColor: '#C5D3E2'});
            },
            stop: function(event, ui) {
                let itemOrder = $('#card-drag-area').sortable("toArray");
                for (let i = 0; i < itemOrder.length; i++) {
                    //console.log("Position: " + (i +1) + " ID: " + itemOrder[i]);
                    let id = itemOrder[i];
                    let order = (i+1);
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': '{{csrf_token()}}'
                        },
                        type: 'POST',
                        url: "/panel/galeriler/resimler/order/"+id,
                        data: {id: id,order:order},
                        success: function (data){
                            console.log(data.success + "id li resim sıralama yapıldı.");
                        },
                        error: function(e) {
                            console.log(e);
                        }
                    });
                }
            }
        });

$(".btn-danger").on("click",function () {
            let id = $(this).data('id').split('/');
            let idName = id[2];
            let imageCard = $(this).parent().parent().parent();
            swal({
                    title: "Emin misiniz?",
                    text: "<strong>Bu Resim silinecektir!</strong>",
                    type: "warning",
                    html: true,
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "Evet, silinsin!",
                    cancelButtonText: "Hayır, vazgeç!",
                    closeOnConfirm: false,
                    closeOnCancel: true
                },
                function(isConfirm){
                    if (isConfirm) {
                        swal.close();
                        $.ajax({
                            headers: {
                                'X-CSRF-TOKEN': '{{csrf_token()}}'
                            },
                            type: "POST",
                            url: "/panel/galeriler/resimler/sil/"+idName,
                            data: {
                                "id": idName
                            },
                            success: function(response)
                            {
                                imageCard.fadeOut(300, function() { $(this).remove(); });
                                console.log(response);
                            },
                            error: function(e) {
                                console.log(e);
                            }
                        });
                        /*swal({
                                title: "Silindi!",
                                text: "<strong>Resim Başarıyla Silindi.</strong>",
                                type: "success",
                                html: true,
                                timer: 1000},
                            function(){
                                imageCard.fadeOut().remove();
                            }
                        );*/
                    }
                });
        });
        $(function() {
            $('.ic-title-field').keyup(function (e) {
                if (e.keyCode == 13) {
                    let data_id = $(this).attr('data-id');
                    let data_title = $(this).val();

saveTitle(data_id, data_title);
                }
            });

$('.ic-title-field').bind({
                blur: function () {
                    let data_id = $(this).attr('data-id');
                    let data_title = $(this).val();

saveTitle(data_id, data_title);
                }
            });
        });
        function saveTitle(data_id, data_title)
        {
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': '{{csrf_token()}}'
                },
                url: "/panel/galeriler/resimler/metadesc/"+data_id,
                type: 'post',
                data: {primary_key: data_id, value: data_title},
                complete: function()
                {
                    console.log('açıklama kaydedildi.')
                }
            });
        }

</script>
@endpush

@push("customCss")
    <link rel="stylesheet" type="text/css" href="{{asset('assets/backend/app-assets/vendors/css/file-uploaders/dropzone.min.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('assets/backend/app-assets/css/plugins/file-uploaders/dropzone.css')}}">
    <style>
        .dropzone{
            min-height: 200px;
        }
        .dropzone .dz-message{
            top: 30%;
        }
    </style>
@endpush

Ctrl+S ile kaydet