Сергей П / rekamore.su

Download as
Browse Code »

Commit b1a7d3c76c9a0334ebf122d966eb7367a65760b7

Authored by Андрей Ларионов
1 parent c9a440a1d1
Exists in master and in 1 other branch usloviya-razmeschniya

Баг в форме-табов образования

Showing 2 changed files with 2 additions and 2 deletions Inline Diff

resources/views/admin/education/form.blade.php
Diff comments   View file @ b1a7d3c
1 @csrf 1 @csrf
2 2
3 @isset($education) 3 @isset($education)
4 @method('PUT') 4 @method('PUT')
5 @endisset 5 @endisset
6 6
7 <div class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800"> 7 <div class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
8 <form method="POST" action="{{ route('admin.education.update', ['education' => $education->id]) }}" enctype="multipart/form-data"> 8 <form method="POST" action="{{ route('admin.education.update', ['education' => $education->id]) }}" enctype="multipart/form-data">
9 <label class="block text-sm"> 9 <label class="block text-sm">
10 <span class="text-gray-700 dark:text-gray-400">Название учебного заведения</span> 10 <span class="text-gray-700 dark:text-gray-400">Название учебного заведения</span>
11 <input name="name" id="name" 11 <input name="name" id="name"
12 class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input" 12 class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
13 placeholder="Название учебного заведения" value="{{ old('name') ?? $education->name ?? '' }}" 13 placeholder="Название учебного заведения" value="{{ old('name') ?? $education->name ?? '' }}"
14 /> 14 />
15 @error('name') 15 @error('name')
16 <span class="text-xs text-red-600 dark:text-red-400"> 16 <span class="text-xs text-red-600 dark:text-red-400">
17 {{ $message }} 17 {{ $message }}
18 </span> 18 </span>
19 @enderror 19 @enderror
20 </label><br> 20 </label><br>
21 21
22 <label class="block text-sm"> 22 <label class="block text-sm">
23 <span class="text-gray-700 dark:text-gray-400">Текст</span> 23 <span class="text-gray-700 dark:text-gray-400">Текст</span>
24 <textarea class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 form-textarea focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray ckeditor_" name="text" placeholder="Текст (html)" required 24 <textarea class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 form-textarea focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray ckeditor_" name="text" placeholder="Текст (html)" required
25 rows="10">{{ old('text') ?? $education->text ?? '' }}</textarea> 25 rows="10">{{ old('text') ?? $education->text ?? '' }}</textarea>
26 @error('text') 26 @error('text')
27 <span class="text-xs text-red-600 dark:text-red-400"> 27 <span class="text-xs text-red-600 dark:text-red-400">
28 {{ $message }} 28 {{ $message }}
29 </span> 29 </span>
30 @enderror 30 @enderror
31 </label><br> 31 </label><br>
32 32
33 <label class="block text-sm"> 33 <label class="block text-sm">
34 <span class="text-gray-700 dark:text-gray-400">Картинка</span> 34 <span class="text-gray-700 dark:text-gray-400">Картинка</span>
35 <input type="file" class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 35 <input type="file" class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700
36 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple 36 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple
37 dark:text-gray-300 dark:focus:shadow-outline-gray form-input" 37 dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
38 id="image" name="image" accept="image/png, image/jpeg"> 38 id="image" name="image" accept="image/png, image/jpeg">
39 @error('image') 39 @error('image')
40 <span class="text-xs text-red-600 dark:text-red-400"> 40 <span class="text-xs text-red-600 dark:text-red-400">
41 {{ $message }} 41 {{ $message }}
42 </span> 42 </span>
43 @enderror 43 @enderror
44 @isset($education->image) 44 @isset($education->image)
45 <img src="{{asset(Storage::url($education->image))}}" width="100px"/> 45 <img src="{{asset(Storage::url($education->image))}}" width="100px"/>
46 @endisset 46 @endisset
47 </label><br> 47 </label><br>
48 48
49 <hr> 49 <hr>
50 <h5 class="text-gray-700 dark:text-gray-400">Контакты: </h5> 50 <h5 class="text-gray-700 dark:text-gray-400">Контакты: </h5>
51 <label class="block text-sm"> 51 <label class="block text-sm">
52 <span class="text-gray-700 dark:text-gray-400">Адрес</span> 52 <span class="text-gray-700 dark:text-gray-400">Адрес</span>
53 <input name="address" id="address" 53 <input name="address" id="address"
54 class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input" 54 class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
55 placeholder="Адрес" value="{{ old('address') ?? $education->address ?? '' }}" 55 placeholder="Адрес" value="{{ old('address') ?? $education->address ?? '' }}"
56 /> 56 />
57 @error('address') 57 @error('address')
58 <span class="text-xs text-red-600 dark:text-red-400"> 58 <span class="text-xs text-red-600 dark:text-red-400">
59 {{ $message }} 59 {{ $message }}
60 </span> 60 </span>
61 @enderror 61 @enderror
62 </label><br> 62 </label><br>
63 63
64 <label class="block text-sm"> 64 <label class="block text-sm">
65 <span class="text-gray-700 dark:text-gray-400">Email</span> 65 <span class="text-gray-700 dark:text-gray-400">Email</span>
66 <input name="email" id="email" 66 <input name="email" id="email"
67 class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input" 67 class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
68 placeholder="Email" value="{{ old('email') ?? $education->email ?? '' }}" 68 placeholder="Email" value="{{ old('email') ?? $education->email ?? '' }}"
69 /> 69 />
70 @error('email') 70 @error('email')
71 <span class="text-xs text-red-600 dark:text-red-400"> 71 <span class="text-xs text-red-600 dark:text-red-400">
72 {{ $message }} 72 {{ $message }}
73 </span> 73 </span>
74 @enderror 74 @enderror
75 </label><br> 75 </label><br>
76 76
77 <label class="block text-sm"> 77 <label class="block text-sm">
78 <span class="text-gray-700 dark:text-gray-400">Телефон</span> 78 <span class="text-gray-700 dark:text-gray-400">Телефон</span>
79 <input name="telephone" id="telephone" 79 <input name="telephone" id="telephone"
80 class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input" 80 class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
81 placeholder="Телефон" value="{{ old('telephone') ?? $education->telephone ?? '' }}" 81 placeholder="Телефон" value="{{ old('telephone') ?? $education->telephone ?? '' }}"
82 /> 82 />
83 @error('telephone') 83 @error('telephone')
84 <span class="text-xs text-red-600 dark:text-red-400"> 84 <span class="text-xs text-red-600 dark:text-red-400">
85 {{ $message }} 85 {{ $message }}
86 </span> 86 </span>
87 @enderror 87 @enderror
88 </label><br> 88 </label><br>
89 89
90 <div class="flex flex-col flex-wrap mb-4 space-y-4 md:flex-row md:items-end md:space-x-4"> 90 <div class="flex flex-col flex-wrap mb-4 space-y-4 md:flex-row md:items-end md:space-x-4">
91 <div> 91 <div>
92 <button type="submit" class="px-3 py-1 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-md active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"> 92 <button type="submit" class="px-3 py-1 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-md active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">
93 Сохранить 93 Сохранить
94 </button> 94 </button>
95 <a href="{{ route('admin.education.index') }}" 95 <a href="{{ route('admin.education.index') }}"
96 class="px-3 py-1 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-md active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple" 96 class="px-3 py-1 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-md active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
97 style="display: -webkit-inline-box; height: 30px!important;" 97 style="display: -webkit-inline-box; height: 30px!important;"
98 >Назад</a> 98 >Назад</a>
99 </div> 99 </div>
100 </div> 100 </div>
101 </form> 101 </form>
102 102
103 @isset($education) 103 @isset($education)
104 <div class="tabs_ js_tabs px-4 py-3 bg-white rounded-lg shadow-md dark:bg-gray-800"> 104 <div class="tabs_ js_tabs px-4 py-3 bg-white rounded-lg shadow-md dark:bg-gray-800">
105 <h2 class="my-6 text-2xl font-semibold text-gray-700 dark:text-gray-200"> 105 <h2 class="my-6 text-2xl font-semibold text-gray-700 dark:text-gray-200">
106 Программы образования 106 Программы образования
107 </h2> 107 </h2>
108 <form class="tabs__form js_tabs_form" method="GET" action="{{ route('admin.add-program-education') }}"> 108 <form class="tabs__form js_tabs_form" method="GET" action="{{ route('admin.add-program-education') }}">
109 <label class="tabs__label block mt-4 text-sm"> 109 <label class="tabs__label block mt-4 text-sm">
110 <div class="relative text-gray-500 focus-within:text-purple-600"> 110 <div class="relative text-gray-500 focus-within:text-purple-600">
111 <input type="hidden" name="id" value="{{ $education->id }}"/> 111 <input type="hidden" name="id" value="{{ $education->id }}"/>
112 <input name="level" class="tabs__input js_tabs_input block w-full pr-20 text-sm text-black dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input" placeholder="Введите название таба"/> 112 <input name="level" class="tabs__input js_tabs_input block w-full pr-20 text-sm text-black dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input" placeholder="Введите название таба"/>
113 <!-- For disabled buttons ADD these classes: opacity-50 cursor-not-allowed 113 <!-- For disabled buttons ADD these classes: opacity-50 cursor-not-allowed
114 And REMOVE these classes: active:bg-purple-600 hover:bg-purple-700 focus:shadow-outline-purple --> 114 And REMOVE these classes: active:bg-purple-600 hover:bg-purple-700 focus:shadow-outline-purple -->
115 <button class="tabs__submit-btn js_tabs_submit_btn absolute inset-y-0 right-0 px-4 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-r-md focus:outline-none opacity-50 cursor-not-allowed" disabled>+</button> 115 <button class="tabs__submit-btn js_tabs_submit_btn absolute inset-y-0 right-0 px-4 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-r-md focus:outline-none opacity-50 cursor-not-allowed" disabled>+</button>
116 <!-- <button class="tabs__submit-btn js_tabs_submit_btn absolute inset-y-0 right-0 px-4 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-r-md active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">+</button> --> 116 <!-- <button class="tabs__submit-btn js_tabs_submit_btn absolute inset-y-0 right-0 px-4 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-r-md active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">+</button> -->
117 </div> 117 </div>
118 </label> 118 </label>
119 </form> 119 </form>
120 <div class="tabs__buttons js_tabs_buttons flex flex-col flex-wrap mb-4 md:flex-row md:space-x-4"> 120 <div class="tabs__buttons js_tabs_buttons flex flex-col flex-wrap mb-4 md:flex-row md:space-x-4">
121 @if ($program->count()) 121 @if ($program->count())
122 @php $bool = true; 122 @php $bool = true;
123 $i = 1; 123 $i = 1;
124 $level = ""; 124 $level = "";
125 @endphp 125 @endphp
126 126
127 @foreach ($program as $pro) 127 @foreach ($program as $pro)
128 @if ((!empty($level)) && ($level <> $pro->level )) 128 @if ((!empty($level)) && ($level <> $pro->level ))
129 @php $bool = true; $i++; @endphp 129 @php $bool = true; $i++; @endphp
130 @endif 130 @endif
131 @if ($bool == true) 131 @if ($bool == true)
132 <div> 132 <div>
133 <button class="tabs__btn js_tabs_btn mt-4 px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple" data-btn="{{ $pro->level }}" data-id="{{$i}}">{{ $pro->level }}</button> 133 <button class="tabs__btn js_tabs_btn mt-4 px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple" data-btn="{{ $pro->level }}" data-id="{{$i}}">{{ $pro->level }}</button>
134 </div> 134 </div>
135 @php $bool = false; 135 @php $bool = false;
136 $level = $pro->level; 136 $level = $pro->level;
137 @endphp 137 @endphp
138 @endif 138 @endif
139 @endforeach 139 @endforeach
140 @endif 140 @endif
141 </div> 141 </div>
142 <div class="tabs__content js_tabs_content"> 142 <div class="tabs__content js_tabs_content">
143 @if ($program->count()) 143 @if ($program->count())
144 @php $bool = true; 144 @php $bool = true;
145 $i = 1; 145 $i = 1;
146 $level = ""; 146 $level = "";
147 @endphp 147 @endphp
148 148
149 @foreach ($program as $pro) 149 @foreach ($program as $pro)
150 @php $name_tab = $pro->level; @endphp 150 @php $name_tab = $pro->level; @endphp
151 @if ((!empty($level)) && ($level <> $pro->level)) 151 @if ((!empty($level)) && ($level <> $pro->level))
152 </tbody> 152 </tbody>
153 </table> 153 </table>
154 </div> 154 </div>
155 @php $bool = true; $i++; @endphp 155 @php $bool = true; $i++; @endphp
156 @endif 156 @endif
157 157
158 @if ($bool == true) 158 @if ($bool == true)
159 <div class="tabs__item js_tabs_item @php echo($i>1) ? 'hidden' : ''; @endphp" data-id="{{$i}}"> 159 <div class="tabs__item js_tabs_item @php echo($i>1) ? 'hidden' : ''; @endphp" data-id="{{$i}}">
160 <form action="{{ route('admin.add-program-education') }}" method="GET" class="flex flex-col flex-wrap mb-4 md:flex-row md:space-x-4"> 160 <form action="{{ route('admin.add-program-education') }}" method="GET" class="flex flex-col flex-wrap mb-4 md:flex-row md:space-x-4">
161 <div> 161 <div>
162 <input type="hidden" name="id" value="{{ $education->id }}"/> 162 <input type="hidden" name="id" value="{{ $education->id }}"/>
163 <input type="hidden" name="level" value="{{$name_tab}}"/> 163 <input type="hidden" name="level" value="{{$name_tab}}"/>
164 <button type="submit" class="mt-4 px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">Добавить</button> 164 <button type="submit" class="mt-4 px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">Добавить</button>
165 </div> 165 </div>
166 </form> 166 </form>
167 <table class="mb-4 w-full whitespace-no-wrap"> 167 <table class="mb-4 w-full whitespace-no-wrap">
168 <thead> 168 <thead>
169 <tr 169 <tr
170 class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800" 170 class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800"
171 > 171 >
172 <th class="px-4 py-3">Специализация</th> 172 <th class="px-4 py-3">Специализация</th>
173 <th class="px-4 py-3">Описание</th> 173 <th class="px-4 py-3">Описание</th>
174 <th class="px-4 py-3">Редактирование</th> 174 <th class="px-4 py-3">Редактирование</th>
175 175
176 </tr> 176 </tr>
177 </thead> 177 </thead>
178 <tbody 178 <tbody
179 class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800" 179 class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800"
180 > 180 >
181 @php $bool = false; 181 @php $bool = false;
182 $level = $pro->level; 182 $level = $pro->level;
183 @endphp 183 @endphp
184 @endif 184 @endif
185 <tr class="text-gray-700 dark:text-gray-400"> 185 <tr class="text-gray-700 dark:text-gray-400">
186 <td class="px-4 py-3"> 186 <td class="px-4 py-3">
187 <div class="flex items-center text-sm"> 187 <div class="flex items-center text-sm">
188 <div> 188 <div>
189 <p class="font-semibold">Специальность: </p> 189 <p class="font-semibold">Специальность: </p>
190 <p class="text-xs text-gray-600 dark:text-gray-400"> 190 <p class="text-xs text-gray-600 dark:text-gray-400">
191 {{ mb_strimwidth($pro->name, 0, 50, "...") }} 191 {{ mb_strimwidth($pro->name, 0, 50, "...") }}
192 </p> 192 </p>
193 </div> 193 </div>
194 </div> 194 </div>
195 </td> 195 </td>
196 <td class="px-4 py-3 text-sm"> 196 <td class="px-4 py-3 text-sm">
197 <span class="text-gray-700 dark:text-gray-400">Описание: {{ mb_strimwidth($pro->text, 0, 100, "...")}}</span> 197 <span class="text-gray-700 dark:text-gray-400">Описание: {{ mb_strimwidth($pro->text, 0, 100, "...")}}</span>
198 </td> 198 </td>
199 <td class="px-4 py-3 text-xs"> 199 <td class="px-4 py-3 text-xs">
200 <a href="{{ route('admin.edit-program-education', ['program' => $pro->id, 'education' => $education->id]) }}">Изменить</a> | 200 <a href="{{ route('admin.edit-program-education', ['program' => $pro->id, 'education' => $education->id]) }}">Изменить</a> |
201 <a href="{{ route('admin.delete-program-education', ['program' => $pro->id, 'education' => $education->id]) }}">Удалить</a> 201 <a href="{{ route('admin.delete-program-education', ['program' => $pro->id, 'education' => $education->id]) }}">Удалить</a>
202 </td> 202 </td>
203 </tr> 203 </tr>
204 @endforeach 204 @endforeach
205 @endif 205 @endif
206 </div> 206 </div>
207 </div> 207 </div>
208 @endisset 208 @endisset
209 </div> 209 </div>
210 210
211 <!--<script src="//cdn.ckeditor.com/4.14.0/standard/ckeditor.js"></script>--> 211 <!--<script src="//cdn.ckeditor.com/4.14.0/standard/ckeditor.js"></script>-->
212 212
213 <script src="{{ asset('./ckeditor/ckeditor.js') }}"></script> 213 <script src="{{ asset('./ckeditor/ckeditor.js') }}"></script>
214 <script> 214 <script>
215 CKEDITOR.replace( 'text', { 215 CKEDITOR.replace( 'text', {
216 filebrowserUploadUrl: "{{route('ckeditor.image-upload', ['_token' => csrf_token() ])}}", 216 filebrowserUploadUrl: "{{route('ckeditor.image-upload', ['_token' => csrf_token() ])}}",
217 filebrowserImageUploadUrl: "{{ route('ckeditor.image-upload', ['_token' => csrf_token() ])}}", 217 filebrowserImageUploadUrl: "{{ route('ckeditor.image-upload', ['_token' => csrf_token() ])}}",
218 filebrowserUploadMethod: 'form' 218 filebrowserUploadMethod: 'form'
219 }); 219 });
220 </script> 220 </script>
221 <script> 221 <script>
222 window.addEventListener('DOMContentLoaded', () => { 222 window.addEventListener('DOMContentLoaded', () => {
223 223
224 setTabs(3); 224 setTabs(3);
225 225
226 function setTabs(qty) { 226 function setTabs(qty) {
227 227
228 const tabs = document.querySelector('.js_tabs'); 228 const tabs = document.querySelector('.js_tabs');
229 const tabsForm = tabs.querySelector('.js_tabs_form'); 229 const tabsForm = tabs.querySelector('.js_tabs_form');
230 const tabsInput = tabs.querySelector('.js_tabs_input'); 230 const tabsInput = tabs.querySelector('.js_tabs_input');
231 const tabsSubmitBtn = tabs.querySelector('.js_tabs_submit_btn'); 231 const tabsSubmitBtn = tabs.querySelector('.js_tabs_submit_btn');
232 const tabsButtons = tabs.querySelector('.js_tabs_buttons'); 232 const tabsButtons = tabs.querySelector('.js_tabs_buttons');
233 const tabsContent = tabs.querySelector('.js_tabs_content'); 233 const tabsContent = tabs.querySelector('.js_tabs_content');
234 234
235 tabsForm.addEventListener('submit', (e) => { 235 tabsForm.addEventListener('submit', (e) => {
236 236
237 //e.preventDefault(); 237 //e.preventDefault();
238 238
239 const tabsInputValue = tabsInput.value; 239 const tabsInputValue = tabsInput.value;
240 const tabsBtns = tabsButtons.querySelectorAll('.js_tabs_btn'); 240 const tabsBtns = tabsButtons.querySelectorAll('.js_tabs_btn');
241 const id = Date.now(); 241 const id = Date.now();
242 242
243 243
244 if (tabsBtns.length >= qty) { 244 if (tabsBtns.length >= qty) {
245 console.log('Ветка выполнена'); 245 console.log('Ветка выполнена');
246 e.preventDefault(); 246 e.preventDefault();
247 } 247 }
248 248
249 /*if (tabsInput.dataset.edit) { 249 /*if (tabsInput.dataset.edit) {
250 250
251 tabsBtns.forEach(btn => { 251 tabsBtns.forEach(btn => {
252 if (tabsInput.dataset.edit === btn.dataset.id) { 252 if (tabsInput.dataset.edit === btn.dataset.id) {
253 btn.textContent = tabsInputValue; 253 btn.textContent = tabsInputValue;
254 btn.dataset.btn = tabsInputValue; 254 btn.dataset.btn = tabsInputValue;
255 } 255 }
256 }); 256 });
257 console.log('Эта ветка выполнилась'); 257 console.log('Эта ветка выполнилась');
258 tabsInput.removeAttribute('data-edit'); 258 tabsInput.removeAttribute('data-edit');
259 259
260 } else { 260 } else {
261 261
262 if (!tabsBtns.length) { 262 if (!tabsBtns.length) {
263 tabsButtons.innerHTML += getTabsBtnTemplate(tabsInputValue, id); 263 tabsButtons.innerHTML += getTabsBtnTemplate(tabsInputValue, id);
264 tabsContent.innerHTML += getTabsItemTemplate(id); 264 tabsContent.innerHTML += getTabsItemTemplate(id);
265 } 265 }
266 266
267 if (tabsBtns.length && tabsBtns.length < qty) { 267 if (tabsBtns.length && tabsBtns.length < qty) {
268 268
269 let isMatch = false; 269 let isMatch = false;
270 270
271 tabsBtns.forEach(btn => { 271 tabsBtns.forEach(btn => {
272 if (tabsInputValue === btn.dataset.btn) { 272 if (tabsInputValue === btn.dataset.btn) {
273 isMatch = true; 273 isMatch = true;
274 } 274 }
275 }); 275 });
276 276
277 console.log('Альтернативная ветка!'); 277 console.log('Альтернативная ветка!');
278 if (!isMatch) { 278 if (!isMatch) {
279 tabsButtons.innerHTML += getTabsBtnTemplate(tabsInputValue, id); 279 tabsButtons.innerHTML += getTabsBtnTemplate(tabsInputValue, id);
280 tabsContent.innerHTML += getTabsItemTemplate(id, 'hidden'); 280 tabsContent.innerHTML += getTabsItemTemplate(id, 'hidden');
281 } 281 }
282 } 282 }
283 }*/ 283 }*/
284 284
285 tabsInput.value = ''; 285 //tabsInput.value = '';
286 addDisabledBtnStatus(tabsSubmitBtn); 286 addDisabledBtnStatus(tabsSubmitBtn);
287 287
288 }); 288 });
289 289
290 tabsInput.addEventListener('input', () => { 290 tabsInput.addEventListener('input', () => {
291 if (tabsInput.value !== '') { 291 if (tabsInput.value !== '') {
292 removeDisabledBtnStatus(tabsSubmitBtn); 292 removeDisabledBtnStatus(tabsSubmitBtn);
293 } else { 293 } else {
294 addDisabledBtnStatus(tabsSubmitBtn); 294 addDisabledBtnStatus(tabsSubmitBtn);
295 } 295 }
296 }); 296 });
297 297
298 tabsButtons.addEventListener('click', (e) => { 298 tabsButtons.addEventListener('click', (e) => {
299 299
300 const target = e.target.closest('.js_tabs_btn'); 300 const target = e.target.closest('.js_tabs_btn');
301 301
302 if (target) { 302 if (target) {
303 303
304 const tabsItems = tabs.querySelectorAll('.js_tabs_item'); 304 const tabsItems = tabs.querySelectorAll('.js_tabs_item');
305 305
306 tabsItems.forEach(item => { 306 tabsItems.forEach(item => {
307 307
308 item.classList.add('hidden'); 308 item.classList.add('hidden');
309 309
310 if (target.dataset.id === item.dataset.id) { 310 if (target.dataset.id === item.dataset.id) {
311 item.classList.remove('hidden'); 311 item.classList.remove('hidden');
312 } 312 }
313 }); 313 });
314 } 314 }
315 315
316 }); 316 });
317 317
318 tabsButtons.addEventListener('dblclick', (e) => { 318 tabsButtons.addEventListener('dblclick', (e) => {
319 const target = e.target.closest('.js_tabs_btn'); 319 const target = e.target.closest('.js_tabs_btn');
320 320
321 if (target) { 321 if (target) {
322 tabsInput.value = target.dataset.btn; 322 tabsInput.value = target.dataset.btn;
323 tabsInput.dataset.edit = target.dataset.id; 323 tabsInput.dataset.edit = target.dataset.id;
324 removeDisabledBtnStatus(tabsSubmitBtn); 324 removeDisabledBtnStatus(tabsSubmitBtn);
325 } 325 }
326 }); 326 });
327 327
328 function getTabsBtnTemplate(btnName, id) { 328 function getTabsBtnTemplate(btnName, id) {
329 return ` 329 return `
330 <div> 330 <div>
331 <button class="tabs__btn js_tabs_btn mt-4 px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple" data-btn="${btnName}" data-id="${id}">${btnName}</button> 331 <button class="tabs__btn js_tabs_btn mt-4 px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple" data-btn="${btnName}" data-id="${id}">${btnName}</button>
332 </div> 332 </div>
333 `; 333 `;
334 } 334 }
335 335
336 function getTabsItemTemplate(id, className = '') { 336 function getTabsItemTemplate(id, className = '') {
337 return ` 337 return `
338 <div class="tabs__item js_tabs_item ${className}" data-id="${id}"> 338 <div class="tabs__item js_tabs_item ${className}" data-id="${id}">
339 <div class="mb-4">${id}</div> 339 <div class="mb-4">${id}</div>
340 <table class="mb-4 w-full whitespace-no-wrap"> 340 <table class="mb-4 w-full whitespace-no-wrap">
341 <thead> 341 <thead>
342 <tr 342 <tr
343 class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800" 343 class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800"
344 > 344 >
345 <th class="px-4 py-3">Client</th> 345 <th class="px-4 py-3">Client</th>
346 <th class="px-4 py-3">Amount</th> 346 <th class="px-4 py-3">Amount</th>
347 <th class="px-4 py-3">Status</th> 347 <th class="px-4 py-3">Status</th>
348 <th class="px-4 py-3">Date</th> 348 <th class="px-4 py-3">Date</th>
349 </tr> 349 </tr>
350 </thead> 350 </thead>
351 <tbody 351 <tbody
352 class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800" 352 class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800"
353 > 353 >
354 <tr class="text-gray-700 dark:text-gray-400"> 354 <tr class="text-gray-700 dark:text-gray-400">
355 <td class="px-4 py-3"> 355 <td class="px-4 py-3">
356 <div class="flex items-center text-sm"> 356 <div class="flex items-center text-sm">
357 <!-- Avatar with inset shadow --> 357 <!-- Avatar with inset shadow -->
358 <div 358 <div
359 class="relative hidden w-8 h-8 mr-3 rounded-full md:block" 359 class="relative hidden w-8 h-8 mr-3 rounded-full md:block"
360 > 360 >
361 <img 361 <img
362 class="object-cover w-full h-full rounded-full" 362 class="object-cover w-full h-full rounded-full"
363 src="https://images.unsplash.com/flagged/photo-1570612861542-284f4c12e75f?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&ixid=eyJhcHBfaWQiOjE3Nzg0fQ" 363 src="https://images.unsplash.com/flagged/photo-1570612861542-284f4c12e75f?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&ixid=eyJhcHBfaWQiOjE3Nzg0fQ"
364 alt="" 364 alt=""
365 loading="lazy" 365 loading="lazy"
366 /> 366 />
367 <div 367 <div
368 class="absolute inset-0 rounded-full shadow-inner" 368 class="absolute inset-0 rounded-full shadow-inner"
369 aria-hidden="true" 369 aria-hidden="true"
370 ></div> 370 ></div>
371 </div> 371 </div>
372 <div> 372 <div>
373 <p class="font-semibold">Hans Burger</p> 373 <p class="font-semibold">Hans Burger</p>
374 <p class="text-xs text-gray-600 dark:text-gray-400"> 374 <p class="text-xs text-gray-600 dark:text-gray-400">
375 10x Developer 375 10x Developer
376 </p> 376 </p>
377 </div> 377 </div>
378 </div> 378 </div>
379 </td> 379 </td>
380 <td class="px-4 py-3 text-sm"> 380 <td class="px-4 py-3 text-sm">
381 $ 863.45 381 $ 863.45
382 </td> 382 </td>
383 <td class="px-4 py-3 text-xs"> 383 <td class="px-4 py-3 text-xs">
384 <span 384 <span
385 class="px-2 py-1 font-semibold leading-tight text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100" 385 class="px-2 py-1 font-semibold leading-tight text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100"
386 > 386 >
387 Approved 387 Approved
388 </span> 388 </span>
389 </td> 389 </td>
390 <td class="px-4 py-3 text-sm"> 390 <td class="px-4 py-3 text-sm">
391 6/10/2020 391 6/10/2020
392 </td> 392 </td>
393 </tr> 393 </tr>
394 394
395 <tr class="text-gray-700 dark:text-gray-400"> 395 <tr class="text-gray-700 dark:text-gray-400">
396 <td class="px-4 py-3"> 396 <td class="px-4 py-3">
397 <div class="flex items-center text-sm"> 397 <div class="flex items-center text-sm">
398 <!-- Avatar with inset shadow --> 398 <!-- Avatar with inset shadow -->
399 <div 399 <div
400 class="relative hidden w-8 h-8 mr-3 rounded-full md:block" 400 class="relative hidden w-8 h-8 mr-3 rounded-full md:block"
401 > 401 >
402 <img 402 <img
403 class="object-cover w-full h-full rounded-full" 403 class="object-cover w-full h-full rounded-full"
404 src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&facepad=3&fit=facearea&s=707b9c33066bf8808c934c8ab394dff6" 404 src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&facepad=3&fit=facearea&s=707b9c33066bf8808c934c8ab394dff6"
405 alt="" 405 alt=""
406 loading="lazy" 406 loading="lazy"
407 /> 407 />
408 <div 408 <div
409 class="absolute inset-0 rounded-full shadow-inner" 409 class="absolute inset-0 rounded-full shadow-inner"
410 aria-hidden="true" 410 aria-hidden="true"
411 ></div> 411 ></div>
412 </div> 412 </div>
413 <div> 413 <div>
414 <p class="font-semibold">Jolina Angelie</p> 414 <p class="font-semibold">Jolina Angelie</p>
415 <p class="text-xs text-gray-600 dark:text-gray-400"> 415 <p class="text-xs text-gray-600 dark:text-gray-400">
416 Unemployed 416 Unemployed
417 </p> 417 </p>
418 </div> 418 </div>
419 </div> 419 </div>
420 </td> 420 </td>
421 <td class="px-4 py-3 text-sm"> 421 <td class="px-4 py-3 text-sm">
422 $ 369.95 422 $ 369.95
423 </td> 423 </td>
424 <td class="px-4 py-3 text-xs"> 424 <td class="px-4 py-3 text-xs">
425 <span 425 <span
426 class="px-2 py-1 font-semibold leading-tight text-orange-700 bg-orange-100 rounded-full dark:text-white dark:bg-orange-600" 426 class="px-2 py-1 font-semibold leading-tight text-orange-700 bg-orange-100 rounded-full dark:text-white dark:bg-orange-600"
427 > 427 >
428 Pending 428 Pending
429 </span> 429 </span>
430 </td> 430 </td>
431 <td class="px-4 py-3 text-sm"> 431 <td class="px-4 py-3 text-sm">
432 6/10/2020 432 6/10/2020
433 </td> 433 </td>
434 </tr> 434 </tr>
435 </tbody> 435 </tbody>
436 </table> 436 </table>
437 437
438 <div class="flex flex-col flex-wrap mb-4 md:flex-row md:space-x-4"> 438 <div class="flex flex-col flex-wrap mb-4 md:flex-row md:space-x-4">
439 <div> 439 <div>
440 <a href="#" class="mt-4 px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">Редактировать</a> 440 <a href="#" class="mt-4 px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">Редактировать</a>
441 </div> 441 </div>
442 <div> 442 <div>
443 <a href="#" class="mt-4 px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">Удалить</a> 443 <a href="#" class="mt-4 px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">Удалить</a>
444 </div> 444 </div>
445 </div> 445 </div>
446 </div> 446 </div>
447 `; 447 `;
448 } 448 }
449 449
450 function addDisabledBtnStatus(btn) { 450 function addDisabledBtnStatus(btn) {
451 btn.disabled = true; 451 btn.disabled = true;
452 btn.classList.add('opacity-50', 'cursor-not-allowed'); 452 btn.classList.add('opacity-50', 'cursor-not-allowed');
453 btn.classList.remove('active:bg-purple-600', 'hover:bg-purple-700', 'focus:shadow-outline-purple'); 453 btn.classList.remove('active:bg-purple-600', 'hover:bg-purple-700', 'focus:shadow-outline-purple');
454 } 454 }
455 455
456 function removeDisabledBtnStatus(btn) { 456 function removeDisabledBtnStatus(btn) {
457 btn.disabled = false; 457 btn.disabled = false;
458 btn.classList.remove('opacity-50', 'cursor-not-allowed'); 458 btn.classList.remove('opacity-50', 'cursor-not-allowed');
459 btn.classList.add('active:bg-purple-600', 'hover:bg-purple-700', 'focus:shadow-outline-purple'); 459 btn.classList.add('active:bg-purple-600', 'hover:bg-purple-700', 'focus:shadow-outline-purple');
460 } 460 }
461 461
462 } 462 }
463 console.log('main.js init'); 463 console.log('main.js init');
464 464
465 }); 465 });
466 466
467 </script> 467 </script>
468 468
469 469
resources/views/layout/authorize.blade.php
Diff comments   View file @ b1a7d3c
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html :class="{ 'theme-dark': dark }" x-data="data()" lang="{{ str_replace('_', '-', app()->getLocale()) }}"> 2 <html :class="{ 'theme-dark': dark }" x-data="data()" lang="{{ str_replace('_', '-', app()->getLocale()) }}">
3 <head> 3 <head>
4 <meta charset="UTF-8" /> 4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <!-- CSRF Token --> 6 <!-- CSRF Token -->
7 <meta name="csrf-token" content="{{ csrf_token() }}"> 7 <meta name="csrf-token" content="{{ csrf_token() }}">
8 <title>{{$title}}</title> 8 <title>{{$title}}</title>
9 <link 9 <link
10 href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" 10 href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
11 rel="stylesheet" 11 rel="stylesheet"
12 /> 12 />
13 <link rel="stylesheet" href="{{ asset('assets/css/tailwind.output.css') }}" /> 13 <link rel="stylesheet" href="{{ asset('assets/css/tailwind.output_new.css') }}" />
14 <!--<script 14 <!--<script
15 src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" 15 src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"
16 defer 16 defer
17 ></script>--> 17 ></script>-->
18 <script src="{{ asset('assets/js/init-alpine.js') }}"></script> 18 <script src="{{ asset('assets/js/init-alpine.js') }}"></script>
19 </head> 19 </head>
20 <body> 20 <body>
21 <div class="flex items-center min-h-screen p-6 bg-gray-50 dark:bg-gray-900"> 21 <div class="flex items-center min-h-screen p-6 bg-gray-50 dark:bg-gray-900">
22 <div 22 <div
23 class="flex-1 h-full max-w-4xl mx-auto overflow-hidden bg-white rounded-lg shadow-xl dark:bg-gray-800" 23 class="flex-1 h-full max-w-4xl mx-auto overflow-hidden bg-white rounded-lg shadow-xl dark:bg-gray-800"
24 > 24 >
25 <div class="flex flex-col overflow-y-auto md:flex-row"> 25 <div class="flex flex-col overflow-y-auto md:flex-row">
26 <div class="h-32 md:h-auto md:w-1/2"> 26 <div class="h-32 md:h-auto md:w-1/2">
27 @yield('image') 27 @yield('image')
28 </div> 28 </div>
29 <div class="flex items-center justify-center p-6 sm:p-12 md:w-1/2"> 29 <div class="flex items-center justify-center p-6 sm:p-12 md:w-1/2">
30 <div class="w-full"> 30 <div class="w-full">
31 @if ($message = Session::get('success')) 31 @if ($message = Session::get('success'))
32 <section> 32 <section>
33 <div class="alert alert-success alert-dismissible mt-0" role="alert"> 33 <div class="alert alert-success alert-dismissible mt-0" role="alert">
34 <button type="button" class="close" data-dismiss="alert" aria-label="Закрыть"> 34 <button type="button" class="close" data-dismiss="alert" aria-label="Закрыть">
35 <span aria-hidden="true">&times;</span> 35 <span aria-hidden="true">&times;</span>
36 </button> 36 </button>
37 {{ $message }} 37 {{ $message }}
38 </div> 38 </div>
39 </section> 39 </section>
40 @endif 40 @endif
41 41
42 @if ($errors->any()) 42 @if ($errors->any())
43 <section> 43 <section>
44 <div class="alert alert-danger alert-dismissible mt-4" role="alert"> 44 <div class="alert alert-danger alert-dismissible mt-4" role="alert">
45 <button type="button" class="close" data-dismiss="alert" aria-label="Закрыть"> 45 <button type="button" class="close" data-dismiss="alert" aria-label="Закрыть">
46 <span aria-hidden="true">&times;</span> 46 <span aria-hidden="true">&times;</span>
47 </button> 47 </button>
48 <ul class="mb-0"> 48 <ul class="mb-0">
49 @foreach ($errors->all() as $error) 49 @foreach ($errors->all() as $error)
50 <li>{{ $error }}</li> 50 <li>{{ $error }}</li>
51 @endforeach 51 @endforeach
52 </ul> 52 </ul>
53 </div> 53 </div>
54 </section> 54 </section>
55 @endif 55 @endif
56 56
57 @yield('content') 57 @yield('content')
58 </div> 58 </div>
59 </div> 59 </div>
60 60
61 </div> 61 </div>
62 </div> 62 </div>
63 </div> 63 </div>
64 </body> 64 </body>
65 </html> 65 </html>
66 66