API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jun 19th, 2019
116
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 21.05 KB | None | 0 0
raw download clone embed print report
  1. @extends('admin.template')
  2.  
  3. @section('title', 'Blogs')
  4.  
  5. @section('stylesheets')
  6.     {{ Html::style('public/plugin/mui-trade-template/global/vendor/blueimp-file-upload/jquery.fileupload.css') }}
  7.     {{ Html::style('public/plugin/mui-trade-template/global/vendor/dropify/dropify.css') }}
  8.     <style type="text/css">
  9.         td a img {
  10.             width: 36px;
  11.             height: 36px;
  12.             border-radius: 100%;
  13.         }
  14.         .show-image {
  15.             width: 25%;
  16.             height: auto;
  17.         }
  18.     </style>
  19. @endsection
  20.  
  21. @section('pageheader')
  22.     <div class="page-header">
  23.         <h1 class="page-title">Blogs</h1>
  24.         <ol class="breadcrumb">
  25.             <li class="breadcrumb-item">
  26.                 <a href="{{ route('admin.home') }}">Dashboard</a>
  27.             </li>
  28.             <li class="breadcrumb-item active">Blogs</li>
  29.         </ol>
  30.         <!-- <div class="page-header-actions">
  31.             <button type="button" class="btn btn-sm btn-icon btn-primary btn-round" data-toggle="tooltip" data-original-title="Edit">
  32.                 <i class="icon md-edit" aria-hidden="true"></i>
  33.             </button>
  34.             <button type="button" class="btn btn-sm btn-icon btn-primary btn-round" data-toggle="tooltip" data-original-title="Refresh">
  35.                 <i class="icon md-refresh-alt" aria-hidden="true"></i>
  36.             </button>
  37.             <button type="button" class="btn btn-sm btn-icon btn-primary btn-round" data-toggle="tooltip" data-original-title="Setting">
  38.                 <i class="icon md-settings" aria-hidden="true"></i>
  39.             </button>
  40.         </div> -->
  41.     </div>
  42. @endsection
  43.  
  44. @section('content')
  45.     <!-- Add -->
  46.     <div class="modal fade" id="add-modal" tabindex="-1" role="dialog" aria-labelledby="add-modal-title" aria-hidden="true">
  47.         <div class="modal-dialog modal-lg" role="document">
  48.             <div class="modal-content">
  49.                 <div class="modal-header">
  50.                     <h5 class="modal-title" id="add-modal-title">Modal title</h5>
  51.                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  52.                         <span aria-hidden="true">&times;</span>
  53.                     </button>
  54.                 </div>
  55.                 <div class="modal-body">
  56.                     <form class="form-horizontal" id="add-form" name="blog-form" enctype="multipart/form-data">
  57.                         <div class="row">
  58.                             <div class="col-md-8">
  59.                                 <div class="form-group row">
  60.                                     {{ Form::label('name', 'Title', array('class' => 'col-sm-3 col-form-label form-control-sm')) }}
  61.                                     <div class="col-sm-9">
  62.                                         {{ Form::text('name', null, array('class' => 'form-control form-control-sm', 'id' => 'add-name', 'required' => '', 'placeholder' => 'Title')) }}
  63.                                     </div>
  64.                                 </div>
  65.  
  66.                                 <div class="form-group row">
  67.                                     {{ Form::label('image', 'Image', array('class' => 'col-sm-3 col-form-label form-control-sm')) }}
  68.                                     <div class="input-group col-sm-9">
  69.                                         <input type="file" name="image" id="img-source add-image" data-plugin="dropify" data-default-file="" required="">
  70.                                     </div>
  71.                                 </div>
  72.                             </div>
  73.  
  74.                             <div class="col-md-4">
  75.                                
  76.                             </div>
  77.  
  78.                             <div class="col-md-12">
  79.                                 <div class="form-group row">
  80.                                     {{ Form::label('body', 'Content', array('class' => 'col-sm-2 col-form-label form-control-sm')) }}
  81.                                     <div class="col-sm-10">
  82.                                         {{ Form::textarea('body', null, array('class' => 'form-control form-control-sm', 'id' => 'add-body', 'placeholder' => 'Your Content here...', 'rows' => '3')) }}
  83.                                     </div>
  84.                                 </div>
  85.                             </div>
  86.                         </div>
  87.                     </form>
  88.                 </div>
  89.                 <div class="modal-footer">
  90.                     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
  91.                     <button type="button" class="btn btn-primary add" data-dismiss="modal">Save</button>
  92.                 </div>
  93.             </div>
  94.         </div>
  95.     </div>
  96.  
  97.     <!-- Show -->
  98.     <div class="modal fade" id="show-modal" tabindex="-1" role="dialog" aria-labelledby="show-modal-title" aria-hidden="true">
  99.         <div class="modal-dialog modal-lg" role="document">
  100.             <div class="modal-content">
  101.                 <div class="modal-header">
  102.                     <h5 class="modal-title" id="show-modal-title">Modal title</h5>
  103.                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  104.                         <span aria-hidden="true">&times;</span>
  105.                     </button>
  106.                 </div>
  107.                 <div class="modal-body">
  108.                     <center>
  109.                         <h4 class="show-title font-weight-bold"></h4>
  110.                         <img src="" alt="" class="img-thumbnail img-fluid show-image">
  111.                     </center>
  112.                     <p class="show-body mt-3"></p>
  113.                 </div>
  114.                 <div class="modal-footer">
  115.                     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
  116.                 </div>
  117.             </div>
  118.         </div>
  119.     </div>
  120.  
  121.     <!-- Edit -->
  122.     <div class="modal fade" id="edit-modal" tabindex="-1" role="dialog" aria-labelledby="edit-modal-title" aria-hidden="true">
  123.         <div class="modal-dialog modal-lg" role="document">
  124.             <div class="modal-content">
  125.                 <div class="modal-header">
  126.                     <h5 class="modal-title" id="edit-modal-title">Edit</h5>
  127.                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  128.                         <span aria-hidden="true">&times;</span>
  129.                     </button>
  130.                 </div>
  131.                 <div class="modal-body">
  132.                     <form class="form-horizontal" id="edit-form" name="blog-form" enctype="multipart/form-data">
  133.                         <input type="text" name="" id="id-edit" hidden>
  134.                         <div class="row">
  135.                             <div class="col-md-8">
  136.                                 <div class="form-group row">
  137.                                     {{ Form::label('name', 'Title', array('class' => 'col-sm-3 col-form-label form-control-sm')) }}
  138.                                     <div class="col-sm-9">
  139.                                         {{ Form::text('name', null, array('class' => 'form-control form-control-sm', 'id' => 'edit-name', 'placeholder' => 'Title')) }}
  140.                                     </div>
  141.                                 </div>
  142.  
  143.                                 <div class="form-group row">
  144.                                     {{ Form::label('image', 'Image', array('class' => 'col-sm-3 col-form-label form-control-sm')) }}
  145.                                     <div class="input-group col-sm-9">
  146.                                         <input type="file" name="image" id="img-source" class="edit-image" data-plugin="dropify" data-default-file="">
  147.                                     </div>
  148.                                 </div>
  149.                             </div>
  150.  
  151.                             <div class="col-md-4">
  152.                                 <img src="" alt="" class="old-image img-fluid">
  153.                             </div>
  154.  
  155.                             <div class="col-md-12">
  156.                                 <div class="form-group row">
  157.                                     {{ Form::label('body', 'Content', array('class' => 'col-sm-2 col-form-label form-control-sm')) }}
  158.                                     <div class="col-sm-10">
  159.                                         {{ Form::textarea('body', null, array('class' => 'form-control form-control-sm', 'id' => 'edit-body', 'placeholder' => 'Your Content here...', 'rows' => '3')) }}
  160.                                     </div>
  161.                                 </div>
  162.                             </div>
  163.                         </div>
  164.                     </form>
  165.                 </div>
  166.                 <div class="modal-footer">
  167.                     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
  168.                     <button type="button" class="btn btn-primary edit" data-dismiss="modal">Edit</button>
  169.                 </div>
  170.             </div>
  171.         </div>
  172.     </div>
  173.  
  174.     <!-- Delete -->
  175.     <div class="modal fade" id="delete-modal" tabindex="-1" role="dialog" aria-labelledby="delete-modal-title" aria-hidden="true">
  176.         <div class="modal-dialog modal-sm" role="document">
  177.             <div class="modal-content">
  178.                 <div class="modal-header">
  179.                     <h5 class="modal-title" id="delete-modal-title">Delete</h5>
  180.                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  181.                         <span aria-hidden="true">&times;</span>
  182.                     </button>
  183.                 </div>
  184.                 <div class="modal-body">
  185.                     <h5 class="delete-title text-center font-weight-bold">Are you sure want delete this post?</h5>
  186.                 </div>
  187.                 <div class="modal-footer">
  188.                     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
  189.                     <button type="button" class="btn btn-primary delete" data-dismiss="modal">Delete</button>
  190.                 </div>
  191.             </div>
  192.         </div>
  193.     </div>
  194.  
  195.     <div class="panel">
  196.         <header class="panel-heading">
  197.             <h3 class="panel-title">Posts</h3>
  198.         </header>
  199.  
  200.         <div class="panel-body">
  201.             <div class="row">
  202.                 <div class="col-md-6">
  203.                     <div class="mb-15">
  204.                         <a href="javascript:void(0)" class="btn btn-sm btn-success add-blog">
  205.                             <i class="icon md-plus" aria-hidden="true"></i> Add
  206.                         </a>
  207.                     </div>
  208.                 </div>
  209.             </div>
  210.  
  211.             @if(count($blogs) > 0)
  212.                 <div class="table-responsive">
  213.                     <table class="ui table table-bordered table-striped table-hover" id="datatable">
  214.                         <thead>
  215.                             <tr>
  216.                                 <th>Title</th>
  217.                                 <th>Image</th>
  218.                                 <th>Body</th>
  219.                                 <th>Action</th>
  220.                             </tr>
  221.                         </thead>
  222.                         <tbody id="blogs-crud">
  223.                             @foreach($blogs as $blog)
  224.                                 <tr id="blog-id-{{ $blog->id }}">
  225.                                     <td>{{ $blog->name }}</td>
  226.                                     <td>
  227.                                         <a href="{{ $blog->image }}" data-lightbox="lightbox-image{{ $blog->id }}" data-title="" data-alt="">
  228.                                             <img src="{{ $blog->image }}" alt="">
  229.                                         </a>
  230.                                     </td>
  231.                                     <td>{{ substr(strip_tags($blog->body), 0, 100) }}{{ strlen(strip_tags($blog->body)) > 100 ? "..." : "" }}</td>
  232.                                     <td class="actions">
  233.                                         <a href="javascript:void(0)" data-id="{{ $blog->id }}" data-title="{{ $blog->name }}" data-image="{{ $blog->image }}" data-content="{{ $blog->body }}" class="btn btn-sm btn-icon btn-pure btn-default on-editing save-row show-blog" data-toggle="tooltip" data-original-title="Save">
  234.                                             <i class="icon md-wrench" aria-hidden="true"></i> Show
  235.                                         </a>
  236.                                         <a href="javascript:void(0)" data-id="{{ $blog->id }}" data-title="{{ $blog->name }}" data-image="{{ $blog->image }}" data-content="{{ $blog->body }}" class="btn btn-sm btn-icon btn-pure btn-default on-default edit-row edit-blog" data-toggle="tooltip" data-original-title="Edit">
  237.                                             <i class="icon md-edit" aria-hidden="true"></i> Edit
  238.                                         </a>
  239.                                         <a href="javascript:void(0)" data-id="{{ $blog->id }}" class="btn btn-sm btn-icon btn-pure btn-default on-default remove-row delete-blog" data-toggle="tooltip" data-original-title="Remove">
  240.                                             <i class="icon md-delete" aria-hidden="true"></i> Delete
  241.                                         </a>
  242.                                     </td>
  243.                                 </tr>
  244.                             @endforeach
  245.                         </tbody>
  246.                     </table>
  247.                 </div>
  248.             @else
  249.                 <h3 class="no-result mt-2">No results found</h3>
  250.             @endif
  251.         </div>
  252.     </div>
  253. @endsection
  254.  
  255. @section('scripts')
  256.     {{ Html::script('public/plugin/tinymce/tinymce.min.js') }}
  257.     {{ Html::script('public/plugin/mui-trade-template/global/vendor/jquery-ui/jquery-ui.js') }}
  258.     {{ Html::script('public/plugin/mui-trade-template/global/vendor/blueimp-tmpl/tmpl.js') }}
  259.     {{ Html::script('public/plugin/mui-trade-template/global/vendor/blueimp-canvas-to-blob/canvas-to-blob.js') }}
  260.     {{ Html::script('public/plugin/mui-trade-template/global/vendor/blueimp-load-image/load-image.all.min.js') }}
  261.     {{ Html::script('public/plugin/mui-trade-template/global/vendor/blueimp-file-upload/jquery.fileupload.js') }}
  262.     {{ Html::script('public/plugin/mui-trade-template/global/vendor/blueimp-file-upload/jquery.fileupload-process.js') }}
  263.     {{ Html::script('public/plugin/mui-trade-template/global/vendor/blueimp-file-upload/jquery.fileupload-image.js') }}
  264.     {{ Html::script('public/plugin/mui-trade-template/global/vendor/blueimp-file-upload/jquery.fileupload-video.js') }}
  265.     {{ Html::script('public/plugin/mui-trade-template/global/vendor/blueimp-file-upload/jquery.fileupload-validate.js') }}
  266.     {{ Html::script('public/plugin/mui-trade-template/global/vendor/blueimp-file-upload/jquery.fileupload-ui.js') }}
  267.     {{ Html::script('public/plugin/mui-trade-template/global/vendor/dropify/dropify.min.js') }}
  268.  
  269.     {{ Html::script('public/plugin/mui-trade-template/global/js/Plugin/dropify.js') }}
  270.     {{ Html::script('public/plugin/mui-trade-template/mmenu/assets/examples/js/forms/uploads.js') }}
  271.    
  272.     <script type="text/javascript">
  273.         tinymce.init({
  274.             // selector: '#add-body',
  275.             branding: false,
  276.             theme: "modern",
  277.             plugins: [
  278.                 'advlist autolink lists link image charmap print preview hr anchor pagebreak',
  279.                 'searchreplace wordcount visualblocks visualchars code fullscreen',
  280.                 'insertdatetime media nonbreaking save table contextmenu directionality',
  281.                 'emoticons template paste textcolor colorpicker textpattern imagetools'
  282.             ],
  283.             toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
  284.             toolbar2: 'print preview media | forecolor backcolor emoticons',
  285.             image_advtab: true,
  286.             templates: [
  287.                 {title: 'Test template 1', content: 'Test 1'},
  288.                 {title: 'Test template 2', content: 'Test 2'}
  289.             ]
  290.         });
  291.  
  292.         $(document).ready(function() {
  293.             $.ajaxSetup({
  294.                 headers: {
  295.                     'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
  296.                 }
  297.             });
  298.         });
  299.  
  300.         /* Add */
  301.         $(document).on('click', '.add-blog', function() {
  302.             $('.modal-title').text('Add Blog');
  303.             $('#add-form').trigger('reset');
  304.             $(".dropify-clear").trigger("click");
  305.             $('#add-modal').modal('show');
  306.         });
  307.  
  308.         $('.modal-footer').on('click', '.add', function() {
  309.             var formData = new FormData($('#add-form')[0]);
  310.             console.log(formData);
  311.             $.ajax({
  312.                 type: 'POST',
  313.                 url: 'blog',
  314.                 data: formData,
  315.                 dataType: 'json',
  316.                 // cache: false,
  317.                 processData: false,
  318.                 contentType: false,
  319.                 enctype: 'multipart/form-data',
  320.                 success: function(data) {
  321.                     if (data.errors) {
  322.                         setTimeout(function () {
  323.                             $('#add-modal').modal('show');
  324.                             toastr.error('Validation error!', 'Error Alert', {timeOut: 5000});
  325.                         }, 500);
  326.  
  327.                         if (data.errors.name) {
  328.                             toastr.error('Title error!', 'Error Alert', {timeOut: 5000});
  329.                         }
  330.                         if (data.errors.body) {
  331.                             toastr.error('Content error!', 'Error Alert', {timeOut: 5000});
  332.                         }
  333.                     } else {
  334.                         toastr.success('Successfully added Post!', 'Success Alert', {timeOut: 5000});
  335.                         $('#datatable').append(
  336.                             "<tr id='blog-id-" + data.id + "'>" +
  337.                                 "<td>" + data.name + "</td>" +
  338.                                 "<td>" +
  339.                                     "<a href='" + data.image + "' data-lightbox='lightbox-image" + data.id + "' data-title='' data-alt=''>" +
  340.                                         "<img src='" + data.image + "' alt=''>" +
  341.                                     "</a>" +
  342.                                 "</td>" +
  343.                                 "<td>" + data.body + "</td>" +
  344.                                 "<td class='actions'>" +
  345.                                     "<a href='javascript:void(0)' data-id='" + data.id + "' data-title='" + data.name + "' data-image='" + data.image + "' data-content='" + data.body + "' class='btn btn-sm btn-icon btn-pure btn-default on-editing save-row show-blog' data-toggle='tooltip' data-original-title='Save'>" +
  346.                                         "<i class='icon md-wrench' aria-hidden='true'></i> Show" +
  347.                                     "</a>" +
  348.                                     "<a href='javascript:void(0)' data-id='" + data.id + "' data-title='" + data.name + "' data-image='" + data.image + "' data-content='" + data.body + "' class='btn btn-sm btn-icon btn-pure btn-default on-default edit-row edit-blog' data-toggle='tooltip' data-original-title='Edit'>" +
  349.                                         "<i class='icon md-edit' aria-hidden='true'></i> Edit" +
  350.                                     "</a>" +
  351.                                     "<a href='javascript:void(0)' data-id='" + data.id + "' class='btn btn-sm btn-icon btn-pure btn-default on-default remove-row delete-blog' data-toggle='tooltip' data-original-title='Remove'>" +
  352.                                         "<i class='icon md-delete' aria-hidden='true'></i> Delete" +
  353.                                     "</a>" +
  354.                                 "</td>" +
  355.                             "</tr>");
  356.                     }
  357.                 },
  358.                 error: function(data) {
  359.                     toastr.error(data.errors, 'Error Alert', {timeOut: 5000});
  360.                 }
  361.             });
  362.         });
  363.  
  364.  
  365.         /* Show */
  366.         $(document).on('click', '.show-blog', function() {
  367.             $('.modal-title').text('Show');
  368.             $('.show-title').text($(this).data('title'));
  369.             $('.show-image').attr('src', $(this).data('image'));
  370.             $('.show-body').text($(this).data('content'));
  371.             $('#show-modal').modal('show');
  372.         });
  373.  
  374.         /* Edit */
  375.         $(document).on('click', '.edit-blog', function() {
  376.             $('#id-edit').val($(this).data('id'));
  377.             $('#edit-name').val($(this).data('title'));
  378.             $('.old-image').attr('src', $(this).data('image'));
  379.             $('#edit-body').val($(this).data('content'));
  380.             $('#edit-modal').modal('show');
  381.             console.log($('#id-edit').val());
  382.             id_edit = $(this).data('id');
  383.         });
  384.         $('.modal-footer').on('click', '.edit', function() {
  385.             var form_data = new FormData();
  386.             id = $('#id-edit').val();
  387.             name = $('#edit-name').val();
  388.             image = $('.edit-image')[0].files[0];
  389.             body = $('#edit-body').val();
  390.             form_data.append('id', id);
  391.             form_data.append('name', name);
  392.             form_data.append('image', image);
  393.             form_data.append('body', body);
  394.             form_data.append('_method', 'PUT');
  395.             console.log(id, name, body, image);
  396.             // var form_data_e = $('#edit-form').serialize();
  397.             $.ajax({
  398.                 type: 'POST',
  399.                 url: 'blog/' + id_edit,
  400.                 data: form_data,
  401.                 dataType: 'json',
  402.                 processData: false,
  403.                 contentType: false,
  404.                 enctype: 'multipart/form-data',
  405.                 success: function(data) {
  406.                     if (data.errors) {
  407.                         setTimeout(function() {
  408.                             $('#edit-modal').modal('show');
  409.                             toastr.error('Validation error!', 'Error Alert', {timeOut: 5000});
  410.                         }, 500);
  411.  
  412.                         if (data.errors.name) {
  413.                             toastr.error('Title error!', 'Error Alert', {timeOut: 5000});
  414.                         }
  415.                         if (data.errors.body) {
  416.                             toastr.error('Content error!', 'Error Alert', {timeOut: 5000});
  417.                         }
  418.                     } else {
  419.                         toastr.success('Successfully updated Post!', 'Success Alert', {timeOut: 5000});
  420.                         $('#blog-id-' + data.id).replaceWith(
  421.                             "<tr id='blog-id-" + data.id + "'>" +
  422.                                 "<td>" + data.name + "</td>" +
  423.                                 "<td>" +
  424.                                     "<a href='" + data.image + "' data-lightbox='lightbox-image" + data.id + "' data-title='' data-alt=''>" +
  425.                                         "<img src='" + data.image + "' alt=''>" +
  426.                                     "</a>" +
  427.                                 "</td>" +
  428.                                 "<td>" + data.body + "</td>" +
  429.                                 "<td class='actions'>" +
  430.                                     "<a href='javascript:void(0)' data-id='" + data.id + "' data-title='" + data.name + "' data-image='" + data.image + "' data-content='" + data.body + "' class='btn btn-sm btn-icon btn-pure btn-default on-editing save-row show-blog' data-toggle='tooltip' data-original-title='Save'>" +
  431.                                         "<i class='icon md-wrench' aria-hidden='true'></i> Show" +
  432.                                     "</a>" +
  433.                                     "<a href='javascript:void(0)' data-id='" + data.id + "' data-title='" + data.name + "' data-image='" + data.image + "' data-content='" + data.body + "' class='btn btn-sm btn-icon btn-pure btn-default on-default edit-row edit-blog' data-toggle='tooltip' data-original-title='Edit'>" +
  434.                                         "<i class='icon md-edit' aria-hidden='true'></i> Edit" +
  435.                                     "</a>" +
  436.                                     "<a href='javascript:void(0)' data-id='" + data.id + "' class='btn btn-sm btn-icon btn-pure btn-default on-default remove-row delete-blog' data-toggle='tooltip' data-original-title='Remove'>" +
  437.                                         "<i class='icon md-delete' aria-hidden='true'></i> Delete" +
  438.                                     "</a>" +
  439.                                 "</td>" +
  440.                             "</tr>");
  441.                     }
  442.                 },
  443.                 error: function(data) {
  444.                     toastr.error(data.errors, 'Error Alert', {timeOut: 5000});
  445.                 }
  446.             });
  447.         });
  448.  
  449.         /* Delete */
  450.         $(document).on('click', '.delete-blog', function() {
  451.             $('.modal-title').text('Delete');
  452.             $('#delete-modal').modal('show');
  453.             id = $(this).data('id');
  454.         });
  455.         $('.modal-footer').on('click', '.delete', function() {
  456.             $.ajax({
  457.                 type: 'DELETE',
  458.                 url: 'blog/' + id,
  459.                 success: function(data) {
  460.                     toastr.success('Successfully deleted Post!', 'Success Alert', {timeOut: 5000});
  461.                     $('#blog-id-' + id).remove();
  462.                 }
  463.             });
  464.         });
  465.     </script>
  466. @endsection
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!