Сергей П / rekamore.su

Download as
Browse Code »

Commit 8018b079503aa01fce021d8de2a8631691fbe310

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

Баг в ckeditor

Showing 1 changed file with 2 additions and 2 deletions Inline Diff

resources/views/admin/education/form.blade.php
Diff comments   View file @ 8018b07
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 console.log('oldname: '+btn.textContent+' newname: '+tabsInputValue+' id_education: '+<?=$education->id?>+''); 253 console.log('oldname: '+btn.textContent+' newname: '+tabsInputValue+' id_education: '+<?=$education->id?>+'');
254 $.ajax({ 254 $.ajax({
255 url: '{{ route('admin.rename-program-education') }}', 255 url: '{{ route('admin.rename-program-education') }}',
256 method: 'get', /* Метод запроса (post или get) */ 256 method: 'get', /* Метод запроса (post или get) */
257 dataType: 'html', /* Тип данных в ответе (xml, json, script, html). */ 257 dataType: 'html', /* Тип данных в ответе (xml, json, script, html). */
258 data: {oldname: btn.textContent, newname:tabsInputValue, id_education: <?=$education->id?>}, /* Данные передаваемые в массиве */ 258 data: {oldname: btn.textContent, newname:tabsInputValue, id_education: <?=$education->id?>}, /* Данные передаваемые в массиве */
259 success: function(data){ /* функция которая будет выполнена после успешного запроса. */ 259 success: function(data){ /* функция которая будет выполнена после успешного запроса. */
260 console.log(data); /* В переменной data содержится ответ от index.php. */ 260 console.log(data); /* В переменной data содержится ответ от index.php. */
261 } 261 }
262 }); 262 });
263 263
264 btn.textContent = tabsInputValue; 264 btn.textContent = tabsInputValue;
265 btn.dataset.btn = tabsInputValue; 265 btn.dataset.btn = tabsInputValue;
266 } 266 }
267 }); 267 });
268 console.log('Эта ветка выполнилась'); 268 console.log('Эта ветка выполнилась');
269 tabsInput.removeAttribute('data-edit'); 269 tabsInput.removeAttribute('data-edit');
270 270
271 } else { 271 } else {
272 272
273 if (!tabsBtns.length) { 273 if (!tabsBtns.length) {
274 tabsButtons.innerHTML += getTabsBtnTemplate(tabsInputValue, id); 274 tabsButtons.innerHTML += getTabsBtnTemplate(tabsInputValue, id);
275 //tabsContent.innerHTML += getTabsItemTemplate(id); 275 //tabsContent.innerHTML += getTabsItemTemplate(id);
276 } 276 }
277 277
278 if (tabsBtns.length && tabsBtns.length < qty) { 278 if (tabsBtns.length && tabsBtns.length < qty) {
279 279
280 let isMatch = false; 280 let isMatch = false;
281 281
282 tabsBtns.forEach(btn => { 282 tabsBtns.forEach(btn => {
283 if (tabsInputValue === btn.dataset.btn) { 283 if (tabsInputValue === btn.dataset.btn) {
284 isMatch = true; 284 isMatch = true;
285 } 285 }
286 }); 286 });
287 287
288 console.log('Альтернативная ветка!'); 288 console.log('Альтернативная ветка!');
289 if (!isMatch) { 289 if (!isMatch) {
290 tabsButtons.innerHTML += getTabsBtnTemplate(tabsInputValue, id); 290 tabsButtons.innerHTML += getTabsBtnTemplate(tabsInputValue, id);
291 tabsContent.innerHTML += getTabsItemTemplate(id, 'hidden'); 291 tabsContent.innerHTML += getTabsItemTemplate(id, 'hidden');
292 } 292 }
293 } 293 }
294 } 294 }
295 295
296 //tabsInput.value = ''; 296 //tabsInput.value = '';
297 addDisabledBtnStatus(tabsSubmitBtn); 297 addDisabledBtnStatus(tabsSubmitBtn);
298 298
299 }); 299 });
300 300
301 tabsInput.addEventListener('input', () => { 301 tabsInput.addEventListener('input', () => {
302 if (tabsInput.value !== '') { 302 if (tabsInput.value !== '') {
303 removeDisabledBtnStatus(tabsSubmitBtn); 303 removeDisabledBtnStatus(tabsSubmitBtn);
304 } else { 304 } else {
305 addDisabledBtnStatus(tabsSubmitBtn); 305 addDisabledBtnStatus(tabsSubmitBtn);
306 } 306 }
307 }); 307 });
308 308
309 tabsButtons.addEventListener('click', (e) => { 309 tabsButtons.addEventListener('click', (e) => {
310 310
311 const target = e.target.closest('.js_tabs_btn'); 311 const target = e.target.closest('.js_tabs_btn');
312 312
313 if (target) { 313 if (target) {
314 314
315 const tabsItems = tabs.querySelectorAll('.js_tabs_item'); 315 const tabsItems = tabs.querySelectorAll('.js_tabs_item');
316 316
317 tabsItems.forEach(item => { 317 tabsItems.forEach(item => {
318 318
319 item.classList.add('hidden'); 319 item.classList.add('hidden');
320 320
321 if (target.dataset.id === item.dataset.id) { 321 if (target.dataset.id === item.dataset.id) {
322 item.classList.remove('hidden'); 322 item.classList.remove('hidden');
323 } 323 }
324 }); 324 });
325 } 325 }
326 326
327 }); 327 });
328 328
329 tabsButtons.addEventListener('dblclick', (e) => { 329 tabsButtons.addEventListener('dblclick', (e) => {
330 const target = e.target.closest('.js_tabs_btn'); 330 const target = e.target.closest('.js_tabs_btn');
331 331
332 if (target) { 332 if (target) {
333 tabsInput.value = target.dataset.btn; 333 tabsInput.value = target.dataset.btn;
334 tabsInput.dataset.edit = target.dataset.id; 334 tabsInput.dataset.edit = target.dataset.id;
335 removeDisabledBtnStatus(tabsSubmitBtn); 335 removeDisabledBtnStatus(tabsSubmitBtn);
336 } 336 }
337 }); 337 });
338 338
339 function getTabsBtnTemplate(btnName, id) { 339 function getTabsBtnTemplate(btnName, id) {
340 return ` 340 return `
341 <div> 341 <div>
342 <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> 342 <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>
343 </div> 343 </div>
344 `; 344 `;
345 } 345 }
346 346
347 function getTabsItemTemplate(id, className = '') { 347 function getTabsItemTemplate(id, className = '') {
348 return ` 348 return `
349 <div class="tabs__item js_tabs_item ${className}" data-id="${id}"> 349 <div class="tabs__item js_tabs_item ${className}" data-id="${id}">
350 <div class="mb-4">${id}</div> 350 <div class="mb-4">${id}</div>
351 <table class="mb-4 w-full whitespace-no-wrap"> 351 <table class="mb-4 w-full whitespace-no-wrap">
352 <thead> 352 <thead>
353 <tr 353 <tr
354 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" 354 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"
355 > 355 >
356 <th class="px-4 py-3">Client</th> 356 <th class="px-4 py-3">Client</th>
357 <th class="px-4 py-3">Amount</th> 357 <th class="px-4 py-3">Amount</th>
358 <th class="px-4 py-3">Status</th> 358 <th class="px-4 py-3">Status</th>
359 <th class="px-4 py-3">Date</th> 359 <th class="px-4 py-3">Date</th>
360 </tr> 360 </tr>
361 </thead> 361 </thead>
362 <tbody 362 <tbody
363 class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800" 363 class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800"
364 > 364 >
365 <tr class="text-gray-700 dark:text-gray-400"> 365 <tr class="text-gray-700 dark:text-gray-400">
366 <td class="px-4 py-3"> 366 <td class="px-4 py-3">
367 <div class="flex items-center text-sm"> 367 <div class="flex items-center text-sm">
368 <!-- Avatar with inset shadow --> 368 <!-- Avatar with inset shadow -->
369 <div 369 <div
370 class="relative hidden w-8 h-8 mr-3 rounded-full md:block" 370 class="relative hidden w-8 h-8 mr-3 rounded-full md:block"
371 > 371 >
372 <img 372 <img
373 class="object-cover w-full h-full rounded-full" 373 class="object-cover w-full h-full rounded-full"
374 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" 374 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"
375 alt="" 375 alt=""
376 loading="lazy" 376 loading="lazy"
377 /> 377 />
378 <div 378 <div
379 class="absolute inset-0 rounded-full shadow-inner" 379 class="absolute inset-0 rounded-full shadow-inner"
380 aria-hidden="true" 380 aria-hidden="true"
381 ></div> 381 ></div>
382 </div> 382 </div>
383 <div> 383 <div>
384 <p class="font-semibold">Hans Burger</p> 384 <p class="font-semibold">Hans Burger</p>
385 <p class="text-xs text-gray-600 dark:text-gray-400"> 385 <p class="text-xs text-gray-600 dark:text-gray-400">
386 10x Developer 386 10x Developer
387 </p> 387 </p>
388 </div> 388 </div>
389 </div> 389 </div>
390 </td> 390 </td>
391 <td class="px-4 py-3 text-sm"> 391 <td class="px-4 py-3 text-sm">
392 $ 863.45 392 $ 863.45
393 </td> 393 </td>
394 <td class="px-4 py-3 text-xs"> 394 <td class="px-4 py-3 text-xs">
395 <span 395 <span
396 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" 396 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"
397 > 397 >
398 Approved 398 Approved
399 </span> 399 </span>
400 </td> 400 </td>
401 <td class="px-4 py-3 text-sm"> 401 <td class="px-4 py-3 text-sm">
402 6/10/2020 402 6/10/2020
403 </td> 403 </td>
404 </tr> 404 </tr>
405 405
406 <tr class="text-gray-700 dark:text-gray-400"> 406 <tr class="text-gray-700 dark:text-gray-400">
407 <td class="px-4 py-3"> 407 <td class="px-4 py-3">
408 <div class="flex items-center text-sm"> 408 <div class="flex items-center text-sm">
409 <!-- Avatar with inset shadow --> 409 <!-- Avatar with inset shadow -->
410 <div 410 <div
411 class="relative hidden w-8 h-8 mr-3 rounded-full md:block" 411 class="relative hidden w-8 h-8 mr-3 rounded-full md:block"
412 > 412 >
413 <img 413 <img
414 class="object-cover w-full h-full rounded-full" 414 class="object-cover w-full h-full rounded-full"
415 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" 415 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"
416 alt="" 416 alt=""
417 loading="lazy" 417 loading="lazy"
418 /> 418 />
419 <div 419 <div
420 class="absolute inset-0 rounded-full shadow-inner" 420 class="absolute inset-0 rounded-full shadow-inner"
421 aria-hidden="true" 421 aria-hidden="true"
422 ></div> 422 ></div>
423 </div> 423 </div>
424 <div> 424 <div>
425 <p class="font-semibold">Jolina Angelie</p> 425 <p class="font-semibold">Jolina Angelie</p>
426 <p class="text-xs text-gray-600 dark:text-gray-400"> 426 <p class="text-xs text-gray-600 dark:text-gray-400">
427 Unemployed 427 Unemployed
428 </p> 428 </p>
429 </div> 429 </div>
430 </div> 430 </div>
431 </td> 431 </td>
432 <td class="px-4 py-3 text-sm"> 432 <td class="px-4 py-3 text-sm">
433 $ 369.95 433 $ 369.95
434 </td> 434 </td>
435 <td class="px-4 py-3 text-xs"> 435 <td class="px-4 py-3 text-xs">
436 <span 436 <span
437 class="px-2 py-1 font-semibold leading-tight text-orange-700 bg-orange-100 rounded-full dark:text-white dark:bg-orange-600" 437 class="px-2 py-1 font-semibold leading-tight text-orange-700 bg-orange-100 rounded-full dark:text-white dark:bg-orange-600"
438 > 438 >
439 Pending 439 Pending
440 </span> 440 </span>
441 </td> 441 </td>
442 <td class="px-4 py-3 text-sm"> 442 <td class="px-4 py-3 text-sm">
443 6/10/2020 443 6/10/2020
444 </td> 444 </td>
445 </tr> 445 </tr>
446 </tbody> 446 </tbody>
447 </table> 447 </table>
448 448
449 <div class="flex flex-col flex-wrap mb-4 md:flex-row md:space-x-4"> 449 <div class="flex flex-col flex-wrap mb-4 md:flex-row md:space-x-4">
450 <div> 450 <div>
451 <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> 451 <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>
452 </div> 452 </div>
453 <div> 453 <div>
454 <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> 454 <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>
455 </div> 455 </div>
456 </div> 456 </div>
457 </div> 457 </div>
458 `; 458 `;
459 } 459 }
460 460
461 function addDisabledBtnStatus(btn) { 461 function addDisabledBtnStatus(btn) {
462 btn.disabled = true; 462 btn.disabled = true;
463 btn.classList.add('opacity-50', 'cursor-not-allowed'); 463 btn.classList.add('opacity-50', 'cursor-not-allowed');
464 btn.classList.remove('active:bg-purple-600', 'hover:bg-purple-700', 'focus:shadow-outline-purple'); 464 btn.classList.remove('active:bg-purple-600', 'hover:bg-purple-700', 'focus:shadow-outline-purple');
465 } 465 }
466 466
467 function removeDisabledBtnStatus(btn) { 467 function removeDisabledBtnStatus(btn) {
468 btn.disabled = false; 468 btn.disabled = false;
469 btn.classList.remove('opacity-50', 'cursor-not-allowed'); 469 btn.classList.remove('opacity-50', 'cursor-not-allowed');
470 btn.classList.add('active:bg-purple-600', 'hover:bg-purple-700', 'focus:shadow-outline-purple'); 470 btn.classList.add('active:bg-purple-600', 'hover:bg-purple-700', 'focus:shadow-outline-purple');
471 } 471 }
472 472
473 } 473 }
474 console.log('main.js init'); 474 console.log('main.js init');
475 475
476 }); 476 });
477 477
478 </script> 478 </script>
479 479
480 480