Андрей Ларионов / rekamore.su

Download as
Browse Code »

Commit 049e0c124207008eefc2780adc2f92827ec086d6

Authored by Сергей П
1 parent ec6778aa2e
Exists in master

Фиксы для страниц редактирвоания образования

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

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