Commit 0f2b11d0efd8dc4cde44051f12dec5031017237e

Authored by Андрей Ларионов
1 parent 3d2b3895b0
Exists in master

Коммит диалоговых окон

Showing 3 changed files with 111 additions and 4 deletions Side-by-side Diff

resources/views/admin/employer/index.blade.php
... ... @@ -43,7 +43,7 @@
43 43 console.log('click button');
44 44 let id = e.target.id;
45 45 let form = document.getElementById("form_modal_del");
46   - form.action = "<?=$_SERVER['HTTP_REFERER']?>/delete/"+e.target.getAttribute('data-employer')+'/'+e.target.getAttribute('data-user');
  46 + form.action = "<?=$_SERVER['APP_URL']?>admin/employers/delete/"+e.target.getAttribute('data-employer')+'/'+e.target.getAttribute('data-user');
47 47 //document.getElementById("title_modal").innerHTML = id;
48 48 console.log(e.target.getAttribute('data-employer'));
49 49 console.log(e.target.getAttribute('data-user'));
resources/views/admin/reclames/index.blade.php
... ... @@ -29,6 +29,26 @@
29 29 });
30 30 });
31 31 </script>
  32 +
  33 + <script>
  34 + const btns = document.querySelectorAll('.btn_del');
  35 + btns.forEach(btn => {
  36 + btn.addEventListener('click', (e) => {
  37 + console.log('click button');
  38 + //let id = e.target.id;
  39 + let form = document.getElementById("form_modal_del");
  40 + form.action = "<?=$_SERVER['APP_URL'];?>admin/reclames/delete/"+e.target.getAttribute('data-reclame');
  41 + //document.getElementById("title_modal").innerHTML = id;
  42 + console.log(e.target.getAttribute('data-employer'));
  43 + console.log(e.target.getAttribute('data-user'));
  44 +
  45 + });
  46 + });
  47 + </script>
  48 +@endsection
  49 +
  50 +@section('modal')
  51 +@include('admin.reclames.modal')
32 52 @endsection
33 53  
34 54 @section('search')
... ... @@ -41,6 +61,7 @@
41 61 Добавить рекламу
42 62 </a>
43 63 <br>
  64 + <pre><? //print_r($_SERVER);?></pre>
44 65 <div class="w-full overflow-hidden rounded-lg shadow-xs" id="ajax_block">
45 66  
46 67 <div class="w-full overflow-x-auto">
... ... @@ -91,13 +112,12 @@
91 112 @method('DELETE')
92 113 @if ($reclame->is_hidden)
93 114 <img class="btn-eye" name="btn_close_{{$reclame->id}}" data-status="close" data-id="{{$reclame->id}}" src="{{asset('/assets/img/close-eye.png')}}" style="width:25px; float:left; margin: 0px 5px 0px 5px; cursor: pointer;" />
94   - <p style="float:left">|</p>
95 115 @else
96 116 <img class="btn-eye" name="btn_open_{{$reclame->id}}" data-status="open" data-id="{{$reclame->id}}" src="{{asset('/assets/img/open-eye.png')}}" style="width:25px; float: left; margin: 0px 5px 0px 5px; cursor: pointer;"/>
97   - <p style="float:left">|</p>
98 117 @endif
99 118  
100   - <input class="btn btn-danger" type="submit" style="float:left" value="Удалить"/>
  119 + <a @click="openModal" style="cursor: pointer;" data-reclame="{{$reclame->id}}" class="btn_del btn btn-danger">| Удалить</a>
  120 + <!--<input class="btn btn-danger" type="submit" style="float:left" value="Удалить"/>-->
101 121 </form>
102 122 </td>
103 123 </tr>
resources/views/admin/reclames/modal.blade.php
... ... @@ -0,0 +1,87 @@
  1 +<!-- Modal backdrop. This what you want to place close to the closing body tag -->
  2 +<div
  3 + x-show="isModalOpen"
  4 + x-transition:enter="transition ease-out duration-150"
  5 + x-transition:enter-start="opacity-0"
  6 + x-transition:enter-end="opacity-100"
  7 + x-transition:leave="transition ease-in duration-150"
  8 + x-transition:leave-start="opacity-100"
  9 + x-transition:leave-end="opacity-0"
  10 + class="fixed inset-0 z-30 flex items-end bg-black bg-opacity-50 sm:items-center sm:justify-center"
  11 +>
  12 + <!-- Modal -->
  13 + <div
  14 + x-show="isModalOpen"
  15 + x-transition:enter="transition ease-out duration-150"
  16 + x-transition:enter-start="opacity-0 transform translate-y-1/2"
  17 + x-transition:enter-end="opacity-100"
  18 + x-transition:leave="transition ease-in duration-150"
  19 + x-transition:leave-start="opacity-100"
  20 + x-transition:leave-end="opacity-0 transform translate-y-1/2"
  21 + @click.away="closeModal"
  22 + @keydown.escape="closeModal"
  23 + class="w-full px-6 py-4 overflow-hidden bg-white rounded-t-lg dark:bg-gray-800 sm:rounded-lg sm:m-4 sm:max-w-xl"
  24 + role="dialog"
  25 + id="modal"
  26 + >
  27 + <!-- Remove header if you don't want a close icon. Use modal body to place modal tile. -->
  28 + <header class="flex justify-end">
  29 + <button
  30 + class="inline-flex items-center justify-center w-6 h-6 text-gray-400 transition-colors duration-150 rounded dark:hover:text-gray-200 hover: hover:text-gray-700"
  31 + aria-label="close"
  32 + @click="closeModal"
  33 + >
  34 + <svg
  35 + class="w-4 h-4"
  36 + fill="currentColor"
  37 + viewBox="0 0 20 20"
  38 + role="img"
  39 + aria-hidden="true"
  40 + >
  41 + <path
  42 + d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
  43 + clip-rule="evenodd"
  44 + fill-rule="evenodd"
  45 + ></path>
  46 + </svg>
  47 + </button>
  48 + </header>
  49 + <!-- Modal body -->
  50 + <div class="mt-4 mb-6">
  51 + <!-- Modal title -->
  52 + <p
  53 + class="mb-2 text-lg font-semibold text-gray-700 dark:text-gray-300"
  54 + >
  55 + Вы действительно хотите удалить данную рекламу?
  56 + </p>
  57 + <!-- Modal description -->
  58 + <p class="text-sm text-gray-700 dark:text-gray-400">
  59 + Это приведет к удалению всей информации о рекламе<br>
  60 + на данном проекте.
  61 + </p>
  62 + </div>
  63 + <footer
  64 + class="flex flex-col items-center justify-end px-6 py-3 -mx-6 -mb-4 space-y-4 sm:space-y-0 sm:space-x-6 sm:flex-row bg-gray-50 dark:bg-gray-800"
  65 + >
  66 + <button
  67 + @click="closeModal"
  68 + class="w-full px-5 py-3 text-sm font-medium leading-5 text-white text-gray-700 transition-colors duration-150 border border-gray-300 rounded-lg dark:text-gray-400 sm:px-4 sm:py-2 sm:w-auto active:bg-transparent hover:border-gray-500 focus:border-gray-500 active:text-gray-500 focus:outline-none focus:shadow-outline-gray"
  69 + >
  70 + Отмена
  71 + </button>
  72 + <form id="form_modal_del" name="form_modal_del" action="/employer-profile/delete/{employer}/{user}" method="POST">
  73 + @csrf
  74 + @method('DELETE')
  75 + <p id="url"></p>
  76 + <button
  77 + type="submit"
  78 + class="w-full px-5 py-3 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg sm:w-auto sm:px-4 sm:py-2 active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
  79 + >
  80 + Удалить
  81 + </button>
  82 + </form>
  83 +
  84 + </footer>
  85 + </div>
  86 +</div>
  87 +<!-- End of modal backdrop -->