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

Download as
Browse Code »

Commit 5280c1e304efe869ff636ccebe37dd23b5b27e05

Authored by Андрей Ларионов
2 parents 17e4404c9f b1a7d3c76c
Exists in master

Merge branch 'master' of http://gitlab.nologostudio.ru/alarionov/rekamore-su

Showing 2 changed files Inline Diff

resources/views/admin/education/form.blade.php
Diff comments   View file @ 5280c1e
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 211
212 <!--<script src="{{ asset('/ckeditor/ckeditor.js') }}"></script>--> 212 <!--<script src="{{ asset('/ckeditor/ckeditor.js') }}"></script>-->
213 213
214 <script src="//cdn.ckeditor.com/4.14.0/standard/ckeditor.js"></script> 214 <script src="//cdn.ckeditor.com/4.14.0/standard/ckeditor.js"></script>
215 215
216 <!--<script src="{{ asset('./ckeditor/ckeditor.js') }}"></script>--> 216 <!--<script src="{{ asset('./ckeditor/ckeditor.js') }}"></script>-->
217 217
218 <script> 218 <script>
219 CKEDITOR.replace( 'text', { 219 CKEDITOR.replace( 'text', {
220 filebrowserUploadUrl: "{{route('ckeditor.image-upload', ['_token' => csrf_token() ])}}", 220 filebrowserUploadUrl: "{{route('ckeditor.image-upload', ['_token' => csrf_token() ])}}",
221 filebrowserImageUploadUrl: "{{ route('ckeditor.image-upload', ['_token' => csrf_token() ])}}", 221 filebrowserImageUploadUrl: "{{ route('ckeditor.image-upload', ['_token' => csrf_token() ])}}",
222 filebrowserUploadMethod: 'form' 222 filebrowserUploadMethod: 'form'
223 }); 223 });
224 </script> 224 </script>
225 <script> 225 <script>
226 window.addEventListener('DOMContentLoaded', () => { 226 window.addEventListener('DOMContentLoaded', () => {
227 227
228 setTabs(3); 228 setTabs(3);
229 229
230 function setTabs(qty) { 230 function setTabs(qty) {
231 231
232 const tabs = document.querySelector('.js_tabs'); 232 const tabs = document.querySelector('.js_tabs');
233 const tabsForm = tabs.querySelector('.js_tabs_form'); 233 const tabsForm = tabs.querySelector('.js_tabs_form');
234 const tabsInput = tabs.querySelector('.js_tabs_input'); 234 const tabsInput = tabs.querySelector('.js_tabs_input');
235 const tabsSubmitBtn = tabs.querySelector('.js_tabs_submit_btn'); 235 const tabsSubmitBtn = tabs.querySelector('.js_tabs_submit_btn');
236 const tabsButtons = tabs.querySelector('.js_tabs_buttons'); 236 const tabsButtons = tabs.querySelector('.js_tabs_buttons');
237 const tabsContent = tabs.querySelector('.js_tabs_content'); 237 const tabsContent = tabs.querySelector('.js_tabs_content');
238 238
239 tabsForm.addEventListener('submit', (e) => { 239 tabsForm.addEventListener('submit', (e) => {
240 240
241 //e.preventDefault(); 241 //e.preventDefault();
242 242
243 const tabsInputValue = tabsInput.value; 243 const tabsInputValue = tabsInput.value;
244 const tabsBtns = tabsButtons.querySelectorAll('.js_tabs_btn'); 244 const tabsBtns = tabsButtons.querySelectorAll('.js_tabs_btn');
245 const id = Date.now(); 245 const id = Date.now();
246 246
247 247
248 if (tabsBtns.length >= qty) { 248 if (tabsBtns.length >= qty) {
249 console.log('Ветка выполнена'); 249 console.log('Ветка выполнена');
250 e.preventDefault(); 250 e.preventDefault();
251 } 251 }
252 252
253 /*if (tabsInput.dataset.edit) { 253 /*if (tabsInput.dataset.edit) {
254 254
255 tabsBtns.forEach(btn => { 255 tabsBtns.forEach(btn => {
256 if (tabsInput.dataset.edit === btn.dataset.id) { 256 if (tabsInput.dataset.edit === btn.dataset.id) {
257 btn.textContent = tabsInputValue; 257 btn.textContent = tabsInputValue;
258 btn.dataset.btn = tabsInputValue; 258 btn.dataset.btn = tabsInputValue;
259 } 259 }
260 }); 260 });
261 console.log('Эта ветка выполнилась'); 261 console.log('Эта ветка выполнилась');
262 tabsInput.removeAttribute('data-edit'); 262 tabsInput.removeAttribute('data-edit');
263 263
264 } else { 264 } else {
265 265
266 if (!tabsBtns.length) { 266 if (!tabsBtns.length) {
267 tabsButtons.innerHTML += getTabsBtnTemplate(tabsInputValue, id); 267 tabsButtons.innerHTML += getTabsBtnTemplate(tabsInputValue, id);
268 tabsContent.innerHTML += getTabsItemTemplate(id); 268 tabsContent.innerHTML += getTabsItemTemplate(id);
269 } 269 }
270 270
271 if (tabsBtns.length && tabsBtns.length < qty) { 271 if (tabsBtns.length && tabsBtns.length < qty) {
272 272
273 let isMatch = false; 273 let isMatch = false;
274 274
275 tabsBtns.forEach(btn => { 275 tabsBtns.forEach(btn => {
276 if (tabsInputValue === btn.dataset.btn) { 276 if (tabsInputValue === btn.dataset.btn) {
277 isMatch = true; 277 isMatch = true;
278 } 278 }
279 }); 279 });
280 280
281 console.log('Альтернативная ветка!'); 281 console.log('Альтернативная ветка!');
282 if (!isMatch) { 282 if (!isMatch) {
283 tabsButtons.innerHTML += getTabsBtnTemplate(tabsInputValue, id); 283 tabsButtons.innerHTML += getTabsBtnTemplate(tabsInputValue, id);
284 tabsContent.innerHTML += getTabsItemTemplate(id, 'hidden'); 284 tabsContent.innerHTML += getTabsItemTemplate(id, 'hidden');
285 } 285 }
286 } 286 }
287 }*/ 287 }*/
288 288
289 //tabsInput.value = ''; 289 //tabsInput.value = '';
290 addDisabledBtnStatus(tabsSubmitBtn); 290 addDisabledBtnStatus(tabsSubmitBtn);
291 291
292 }); 292 });
293 293
294 tabsInput.addEventListener('input', () => { 294 tabsInput.addEventListener('input', () => {
295 if (tabsInput.value !== '') { 295 if (tabsInput.value !== '') {
296 removeDisabledBtnStatus(tabsSubmitBtn); 296 removeDisabledBtnStatus(tabsSubmitBtn);
297 } else { 297 } else {
298 addDisabledBtnStatus(tabsSubmitBtn); 298 addDisabledBtnStatus(tabsSubmitBtn);
299 } 299 }
300 }); 300 });
301 301
302 tabsButtons.addEventListener('click', (e) => { 302 tabsButtons.addEventListener('click', (e) => {
303 303
304 const target = e.target.closest('.js_tabs_btn'); 304 const target = e.target.closest('.js_tabs_btn');
305 305
306 if (target) { 306 if (target) {
307 307
308 const tabsItems = tabs.querySelectorAll('.js_tabs_item'); 308 const tabsItems = tabs.querySelectorAll('.js_tabs_item');
309 309
310 tabsItems.forEach(item => { 310 tabsItems.forEach(item => {
311 311
312 item.classList.add('hidden'); 312 item.classList.add('hidden');
313 313
314 if (target.dataset.id === item.dataset.id) { 314 if (target.dataset.id === item.dataset.id) {
315 item.classList.remove('hidden'); 315 item.classList.remove('hidden');
316 } 316 }
317 }); 317 });
318 } 318 }
319 319
320 }); 320 });
321 321
322 tabsButtons.addEventListener('dblclick', (e) => { 322 tabsButtons.addEventListener('dblclick', (e) => {
323 const target = e.target.closest('.js_tabs_btn'); 323 const target = e.target.closest('.js_tabs_btn');
324 324
325 if (target) { 325 if (target) {
326 tabsInput.value = target.dataset.btn; 326 tabsInput.value = target.dataset.btn;
327 tabsInput.dataset.edit = target.dataset.id; 327 tabsInput.dataset.edit = target.dataset.id;
328 removeDisabledBtnStatus(tabsSubmitBtn); 328 removeDisabledBtnStatus(tabsSubmitBtn);
329 } 329 }
330 }); 330 });
331 331
332 function getTabsBtnTemplate(btnName, id) { 332 function getTabsBtnTemplate(btnName, id) {
333 return ` 333 return `
334 <div> 334 <div>
335 <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> 335 <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>
336 </div> 336 </div>
337 `; 337 `;
338 } 338 }
339 339
340 function getTabsItemTemplate(id, className = '') { 340 function getTabsItemTemplate(id, className = '') {
341 return ` 341 return `
342 <div class="tabs__item js_tabs_item ${className}" data-id="${id}"> 342 <div class="tabs__item js_tabs_item ${className}" data-id="${id}">
343 <div class="mb-4">${id}</div> 343 <div class="mb-4">${id}</div>
344 <table class="mb-4 w-full whitespace-no-wrap"> 344 <table class="mb-4 w-full whitespace-no-wrap">
345 <thead> 345 <thead>
346 <tr 346 <tr
347 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" 347 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"
348 > 348 >
349 <th class="px-4 py-3">Client</th> 349 <th class="px-4 py-3">Client</th>
350 <th class="px-4 py-3">Amount</th> 350 <th class="px-4 py-3">Amount</th>
351 <th class="px-4 py-3">Status</th> 351 <th class="px-4 py-3">Status</th>
352 <th class="px-4 py-3">Date</th> 352 <th class="px-4 py-3">Date</th>
353 </tr> 353 </tr>
354 </thead> 354 </thead>
355 <tbody 355 <tbody
356 class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800" 356 class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800"
357 > 357 >
358 <tr class="text-gray-700 dark:text-gray-400"> 358 <tr class="text-gray-700 dark:text-gray-400">
359 <td class="px-4 py-3"> 359 <td class="px-4 py-3">
360 <div class="flex items-center text-sm"> 360 <div class="flex items-center text-sm">
361 <!-- Avatar with inset shadow --> 361 <!-- Avatar with inset shadow -->
362 <div 362 <div
363 class="relative hidden w-8 h-8 mr-3 rounded-full md:block" 363 class="relative hidden w-8 h-8 mr-3 rounded-full md:block"
364 > 364 >
365 <img 365 <img
366 class="object-cover w-full h-full rounded-full" 366 class="object-cover w-full h-full rounded-full"
367 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" 367 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"
368 alt="" 368 alt=""
369 loading="lazy" 369 loading="lazy"
370 /> 370 />
371 <div 371 <div
372 class="absolute inset-0 rounded-full shadow-inner" 372 class="absolute inset-0 rounded-full shadow-inner"
373 aria-hidden="true" 373 aria-hidden="true"
374 ></div> 374 ></div>
375 </div> 375 </div>
376 <div> 376 <div>
377 <p class="font-semibold">Hans Burger</p> 377 <p class="font-semibold">Hans Burger</p>
378 <p class="text-xs text-gray-600 dark:text-gray-400"> 378 <p class="text-xs text-gray-600 dark:text-gray-400">
379 10x Developer 379 10x Developer
380 </p> 380 </p>
381 </div> 381 </div>
382 </div> 382 </div>
383 </td> 383 </td>
384 <td class="px-4 py-3 text-sm"> 384 <td class="px-4 py-3 text-sm">
385 $ 863.45 385 $ 863.45
386 </td> 386 </td>
387 <td class="px-4 py-3 text-xs"> 387 <td class="px-4 py-3 text-xs">
388 <span 388 <span
389 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" 389 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"
390 > 390 >
391 Approved 391 Approved
392 </span> 392 </span>
393 </td> 393 </td>
394 <td class="px-4 py-3 text-sm"> 394 <td class="px-4 py-3 text-sm">
395 6/10/2020 395 6/10/2020
396 </td> 396 </td>
397 </tr> 397 </tr>
398 398
399 <tr class="text-gray-700 dark:text-gray-400"> 399 <tr class="text-gray-700 dark:text-gray-400">
400 <td class="px-4 py-3"> 400 <td class="px-4 py-3">
401 <div class="flex items-center text-sm"> 401 <div class="flex items-center text-sm">
402 <!-- Avatar with inset shadow --> 402 <!-- Avatar with inset shadow -->
403 <div 403 <div
404 class="relative hidden w-8 h-8 mr-3 rounded-full md:block" 404 class="relative hidden w-8 h-8 mr-3 rounded-full md:block"
405 > 405 >
406 <img 406 <img
407 class="object-cover w-full h-full rounded-full" 407 class="object-cover w-full h-full rounded-full"
408 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" 408 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"
409 alt="" 409 alt=""
410 loading="lazy" 410 loading="lazy"
411 /> 411 />
412 <div 412 <div
413 class="absolute inset-0 rounded-full shadow-inner" 413 class="absolute inset-0 rounded-full shadow-inner"
414 aria-hidden="true" 414 aria-hidden="true"
415 ></div> 415 ></div>
416 </div> 416 </div>
417 <div> 417 <div>
418 <p class="font-semibold">Jolina Angelie</p> 418 <p class="font-semibold">Jolina Angelie</p>
419 <p class="text-xs text-gray-600 dark:text-gray-400"> 419 <p class="text-xs text-gray-600 dark:text-gray-400">
420 Unemployed 420 Unemployed
421 </p> 421 </p>
422 </div> 422 </div>
423 </div> 423 </div>
424 </td> 424 </td>
425 <td class="px-4 py-3 text-sm"> 425 <td class="px-4 py-3 text-sm">
426 $ 369.95 426 $ 369.95
427 </td> 427 </td>
428 <td class="px-4 py-3 text-xs"> 428 <td class="px-4 py-3 text-xs">
429 <span 429 <span
430 class="px-2 py-1 font-semibold leading-tight text-orange-700 bg-orange-100 rounded-full dark:text-white dark:bg-orange-600" 430 class="px-2 py-1 font-semibold leading-tight text-orange-700 bg-orange-100 rounded-full dark:text-white dark:bg-orange-600"
431 > 431 >
432 Pending 432 Pending
433 </span> 433 </span>
434 </td> 434 </td>
435 <td class="px-4 py-3 text-sm"> 435 <td class="px-4 py-3 text-sm">
436 6/10/2020 436 6/10/2020
437 </td> 437 </td>
438 </tr> 438 </tr>
439 </tbody> 439 </tbody>
440 </table> 440 </table>
441 441
442 <div class="flex flex-col flex-wrap mb-4 md:flex-row md:space-x-4"> 442 <div class="flex flex-col flex-wrap mb-4 md:flex-row md:space-x-4">
443 <div> 443 <div>
444 <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 <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>
445 </div> 445 </div>
446 <div> 446 <div>
447 <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> 447 <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>
448 </div> 448 </div>
449 </div> 449 </div>
450 </div> 450 </div>
451 `; 451 `;
452 } 452 }
453 453
454 function addDisabledBtnStatus(btn) { 454 function addDisabledBtnStatus(btn) {
455 btn.disabled = true; 455 btn.disabled = true;
456 btn.classList.add('opacity-50', 'cursor-not-allowed'); 456 btn.classList.add('opacity-50', 'cursor-not-allowed');
457 btn.classList.remove('active:bg-purple-600', 'hover:bg-purple-700', 'focus:shadow-outline-purple'); 457 btn.classList.remove('active:bg-purple-600', 'hover:bg-purple-700', 'focus:shadow-outline-purple');
458 } 458 }
459 459
460 function removeDisabledBtnStatus(btn) { 460 function removeDisabledBtnStatus(btn) {
461 btn.disabled = false; 461 btn.disabled = false;
462 btn.classList.remove('opacity-50', 'cursor-not-allowed'); 462 btn.classList.remove('opacity-50', 'cursor-not-allowed');
463 btn.classList.add('active:bg-purple-600', 'hover:bg-purple-700', 'focus:shadow-outline-purple'); 463 btn.classList.add('active:bg-purple-600', 'hover:bg-purple-700', 'focus:shadow-outline-purple');
464 } 464 }
465 465
466 } 466 }
467 console.log('main.js init'); 467 console.log('main.js init');
468 468
469 }); 469 });
470 470
471 </script> 471 </script>
472 472
473 473
resources/views/layout/authorize.blade.php
Diff comments   View file @ 5280c1e
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_new.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