modified: main_dc/yalarba/easySite/easySite/app/components/ImageGallery.vue

modified: main_dc/yalarba/easySite/easySite/app/components/ObjectForm.vue modified: main_dc/yalarba/easySite/easySite/app/components/layout/HamburgerMenu.vue modified: main_dc/yalarba/easySite/easySite/app/components/layout/ObjectsNavigation.vue modified: main_dc/yalarba/easySite/easySite/app/pages/objects/[id]/index.vue modified: main_dc/yalarba/easySite/easySite/app/pages/objects/index.vue modified: main_dc/yalarba/easySite/easySite/app/pages/objects/my-objects.vue fix problems
2025-11-16 04:15:15 +05:00
parent 8b7ca0c120
commit 2d29f7ecd9
7 changed files with 111 additions and 57 deletions
@@ -2,7 +2,7 @@
    <div class="gallery-overlay" @click="$emit('close')">
        <div class="gallery-content" @click.stop>
            <button class="gallery-close" @click="$emit('close')">✕</button>
-            <img :src="currentImage" :alt="`Image ${currentIndex + 1}`" class="gallery-image" />
+            <img :src="currentImage" :alt="`Image ${currentIndex + 1}`" class="gallery-image" >
            <button class="gallery-nav prev" @click="prevImage">‹</button>
            <button class="gallery-nav next" @click="nextImage">›</button>
        </div>
@@ -1,6 +1,6 @@
 <!-- components/ObjectForm.vue -->
 <template>
-    <form @submit.prevent="handleSubmit" class="space-y-6">
+    <form class="space-y-6" @submit.prevent="handleSubmit">
        <!-- Основная информация -->
        <div class="card">
            <div class="card-header">
@@ -10,7 +10,11 @@
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="form-group">
                        <label class="form-label">Название объекта *</label>
-                        <input v-model="formData.title" type="text" class="form-input" required
+                        <input
+                        v-model="formData.title" 
+                        type="text" 
+                        class="form-input" 
+                        required
                        placeholder="Введите название">
                    </div>
                    <div class="form-group">
@@ -29,8 +33,9 @@

                <div class="form-group">
                    <label class="form-label">Описание *</label>
-                    <textarea v-model="formData.description" class="form-input" rows="4" required
-                        placeholder="Подробное описание объекта"></textarea>
+                    <textarea
+v-model="formData.description" class="form-input" rows="4" required
+                        placeholder="Подробное описание объекта"/>
                </div>
            </div>
        </div>
@@ -48,7 +53,8 @@
                    </div>
                    <div class="form-group">
                        <label class="form-label">Адрес *</label>
-                        <input v-model="formData.address" type="text" class="form-input" required
+                        <input
+v-model="formData.address" type="text" class="form-input" required
                            placeholder="Полный адрес">
                    </div>
                </div>
@@ -68,14 +74,16 @@
                    </div>
                    <div class="form-group">
                        <label class="form-label">Телефон *</label>
-                        <input v-model="formData.contact.phone" type="tel" class="form-input" required
+                        <input
+v-model="formData.contact.phone" type="tel" class="form-input" required
                            placeholder="+7 (XXX) XXX-XX-XX">
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label">Email</label>
-                    <input v-model="formData.contact.email" type="email" class="form-input"
+                    <input
+v-model="formData.contact.email" type="email" class="form-input"
                        placeholder="email@example.com">
                </div>
            </div>
@@ -89,7 +97,8 @@
            <div class="card-body">
                <div class="grid grid-cols-2 md:grid-cols-4 gap-2">
                    <label v-for="amenity in availableAmenities" :key="amenity" class="flex items-center space-x-2">
-                        <input type="checkbox" :value="amenity" v-model="formData.amenities"
+                        <input
+v-model="formData.amenities" type="checkbox" :value="amenity"
                            class="rounded border-gray-300">
                        <span class="text-sm">{{ amenity }}</span>
                    </label>
@@ -99,7 +108,7 @@

        <!-- Кнопки действий -->
        <div class="flex gap-4 justify-end">
-            <button type="button" @click="$emit('cancel')" class="btn btn-outline" :disabled="loading">
+            <button type="button" class="btn btn-outline" :disabled="loading" @click="$emit('cancel')">
                Отмена
            </button>
            <button type="submit" class="btn btn-primary" :disabled="loading">
@@ -1,21 +1,25 @@
 <template>
  <div class="hamburger-menu">
    <!-- Кнопка гамбургера -->
-    <button @click="toggleMenu" class="hamburger-button" :class="{ 'active': isOpen }" aria-label="Меню">
-      <span class="hamburger-line"></span>
-      <span class="hamburger-line"></span>
-      <span class="hamburger-line"></span>
+    <button 
+    class="hamburger-button" 
+    :class="{ 'active': isOpen }" 
+    aria-label="Меню" 
+    @click="toggleMenu">
+      <span class="hamburger-line"/>
+      <span class="hamburger-line"/>
+      <span class="hamburger-line"/>
    </button>

    <!-- Затемнение фона -->
-    <div v-if="isOpen" class="menu-overlay" @click="closeMenu"></div>
+    <div v-if="isOpen" class="menu-overlay" @click="closeMenu"/>

    <!-- Само меню -->
    <transition name="slide-left">
      <div v-if="isOpen" class="menu-content">
        <!-- Заголовок меню -->
        <div class="menu-header">
-          <div class="user-info" v-if="false"> <!-- Можно добавить позже -->
+          <div v-if="false" class="user-info"> <!-- Можно добавить позже -->
            <div class="user-avatar">👤</div>
            <div class="user-details">
              <div class="user-name">Гость</div>
@@ -23,7 +27,7 @@
            </div>
          </div>
          <h3 class="menu-title">Меню</h3>
-          <button @click="closeMenu" class="close-button" aria-label="Закрыть">
+          <button class="close-button" aria-label="Закрыть" @click="closeMenu">
            ✕
          </button>
        </div>
@@ -38,9 +42,12 @@
              <span class="toggle-icon">🌙</span>
              <span class="toggle-text">Темная тема</span>
            </div>
-            <button @click="toggleTheme" class="theme-toggle" :class="{ 'active': theme === 'dark' }"
-              aria-label="Переключить тему">
-              <span class="toggle-slider"></span>
+            <button 
+            aria-label="Переключить тему"
+            class="theme-toggle" 
+            :class="{ 'active': theme === 'dark' }" 
+            @click="toggleTheme">
+              <span class="toggle-slider"/>
            </button>
          </div>

@@ -50,9 +57,12 @@
              <span class="toggle-icon">🔤</span>
              <span class="toggle-text">Элегантный шрифт</span>
            </div>
-            <button @click="toggleFontSet" class="font-toggle" :class="{ 'active': fontSet === 'elegant' }"
-              aria-label="Переключить шрифт">
-              <span class="toggle-slider"></span>
+            <button 
+            class="font-toggle" 
+            :class="{ 'active': fontSet === 'elegant' }" 
+            aria-label="Переключить шрифт"
+            @click="toggleFontSet">
+              <span class="toggle-slider"/>
            </button>
          </div>
        </div>
@@ -7,7 +7,9 @@
                <NuxtLink to="/objects" class="nav-link" :class="{ active: $route.path === '/objects' }">
                    🏢 Все объекты
                </NuxtLink>
-                <NuxtLink to="/objects/my-objects" class="nav-link"
+                <NuxtLink 
+                to="/objects/my-objects" 
+                class="nav-link"
                :class="{ active: $route.path === '/objects/my-objects' }">
                    📝 Мои объекты
                </NuxtLink>
@@ -18,7 +18,10 @@
                <span class="object-type">{{ getTypeLabel(object?.type) }}</span>
                <div class="rating">
                  <div class="rating-stars">
-                    <span v-for="star in 5" :key="star" class="rating-star"
+                    <span 
+                    v-for="star in 5" 
+                    :key="star" 
+                    class="rating-star"
                    :class="{ empty: star > Math.round(object?.rating || 0) }">
                      ★
                    </span>
@@ -54,7 +57,7 @@
        <!-- Галерея изображений -->
        <div class="gallery-section">
          <div class="main-image">
-            <img :src="object?.images[0]" :alt="object?.title" class="gallery-image" @click="openGallery(0)" />
+            <img :src="object?.images[0]" :alt="object?.title" class="gallery-image" @click="openGallery(0)" >
          </div>
          <div v-if="object?.images && object.images.length > 1" class="thumbnails">
            <div 
@@ -121,7 +124,10 @@
                  <div class="average-rating">{{ object?.rating }}</div>
                  <div class="reviews-stats">
                    <div class="rating-stars small">
-                      <span v-for="star in 5" :key="star" class="rating-star"
+                      <span 
+                      v-for="star in 5" 
+                      :key="star" 
+                      class="rating-star"
                      :class="{ empty: star > Math.round(object?.rating || 0) }">
                        ★
                      </span>
@@ -145,7 +151,10 @@
                    </div>
                    <div class="review-rating">
                      <div class="rating-stars small">
-                        <span v-for="star in 5" :key="star" class="rating-star"
+                        <span 
+                        v-for="star in 5" 
+                        :key="star" 
+                        class="rating-star"
                        :class="{ empty: star > review.rating }">
                          ★
                        </span>
@@ -187,7 +196,9 @@
                      <option value="4">4 гостя</option>
                    </select>
                  </div>
-                  <button class="btn btn-primary btn-large" :disabled="!bookingDates.checkIn || !bookingDates.checkOut"
+                  <button 
+                  class="btn btn-primary btn-large" 
+                  :disabled="!bookingDates.checkIn || !bookingDates.checkOut"
                  @click="showBookingModal = true">
                    Забронировать
                  </button>
@@ -225,7 +236,9 @@
                    <span>✏️</span>
                    Редактировать
                  </NuxtLink>
-                  <button class="btn btn-outline btn-with-icon" :class="{ 'btn-primary': !object?.isActive }"
+                  <button 
+                  class="btn btn-outline btn-with-icon" 
+                  :class="{ 'btn-primary': !object?.isActive }"
                  @click="toggleObjectStatus">
                    <span>{{ object?.isActive ? '⏸️' : '▶️' }}</span>
                    {{ object?.isActive ? 'Деактивировать' : 'Активировать' }}
@@ -240,11 +253,19 @@


    <!-- Модальное окно бронирования -->
-    <BookingModal v-if="showBookingModal" :object="object" :dates="bookingDates" :guests="bookingGuests"
-      @close="showBookingModal = false" @confirm="handleBooking" />
+    <BookingModal 
+    v-if="showBookingModal" 
+    :object="object" 
+    :dates="bookingDates" 
+    :guests="bookingGuests"
+    @close="showBookingModal = false" 
+    @confirm="handleBooking" />

    <!-- Галерея изображений -->
-    <ImageGallery v-if="showGallery" :images="object?.images || []" :initial-index="galleryIndex"
+    <ImageGallery 
+    v-if="showGallery" 
+    :images="object?.images || []" 
+    :initial-index="galleryIndex"
    @close="showGallery = false" />
  </div>
 </template>
@@ -11,7 +11,7 @@
              <p class="page-subtitle">Найдено {{ filteredObjects.length }} объектов</p>
            </div>
            <div class="header-actions">
-              <button @click="showFilters = !showFilters" class="btn btn-outline btn-with-icon">
+              <button class="btn btn-outline btn-with-icon" @click="showFilters = !showFilters">
                <span>🔍</span>
                Фильтры
                <span v-if="activeFiltersCount > 0" class="badge badge-primary">
@@ -27,8 +27,12 @@

          <!-- Быстрые фильтры -->
          <div class="quick-filters">
-            <button v-for="type in quickTypes" :key="type.value" @click="toggleQuickFilter(type.value)"
-              class="quick-filter" :class="{ active: filters.type === type.value }">
+            <button
+            v-for="type in quickTypes" 
+            :key="type.value" 
+            class="quick-filter"
+            :class="{ active: filters.type === type.value }" 
+            @click="toggleQuickFilter(type.value)">
              {{ type.icon }} {{ type.label }}
            </button>
          </div>
@@ -89,18 +93,20 @@
              <option value="rating">По рейтингу</option>
              <option value="city">По городу</option>
            </select>
-            <button @click="sortOrder = sortOrder === 'asc' ? 'desc' : 'asc'" class="btn btn-outline btn-sm">
+            <button class="btn btn-outline btn-sm" @click="sortOrder = sortOrder === 'asc' ? 'desc' : 'asc'">
              {{ sortOrder === 'asc' ? '↑' : '↓' }}
            </button>
          </div>

          <div class="view-toggle">
-            <button @click="viewMode = 'grid'" class="btn btn-outline btn-sm"
-              :class="{ 'btn-primary': viewMode === 'grid' }">
+            <button
+            class="btn btn-outline btn-sm" :class="{ 'btn-primary': viewMode === 'grid' }"
+              @click="viewMode = 'grid'">
              ▦
            </button>
-            <button @click="viewMode = 'list'" class="btn btn-outline btn-sm"
-              :class="{ 'btn-primary': viewMode === 'list' }">
+            <button
+            class="btn btn-outline btn-sm" :class="{ 'btn-primary': viewMode === 'list' }"
+              @click="viewMode = 'list'">
              ☰
            </button>
          </div>
@@ -108,7 +114,7 @@

        <!-- Результаты -->
        <div v-if="loading" class="loading-state">
-          <div class="loading-spinner"></div>
+          <div class="loading-spinner"/>
          <p class="loading-text">Загрузка объектов...</p>
        </div>

@@ -116,7 +122,7 @@
          <div class="empty-icon">🏢</div>
          <h3 class="empty-title">Объекты не найдены</h3>
          <p class="empty-description">Попробуйте изменить параметры поиска</p>
-          <button @click="resetFilters" class="btn btn-primary">
+          <button class="btn btn-primary" @click="resetFilters">
            Сбросить фильтры
          </button>
        </div>
@@ -73,7 +73,7 @@
          <!-- Карточки объектов -->
          <div v-for="object in myObjects" :key="object.id" class="object-card">
            <div class="card-image">
-              <img :src="object.image || '/images/placeholder.jpg'" :alt="object.title" />
+              <img :src="object.image || '/images/placeholder.jpg'" :alt="object.title" >
              <div class="card-badge" :class="object.isActive ? 'badge-success' : 'badge-secondary'">
                {{ object.isActive ? 'Активен' : 'Неактивен' }}
              </div>
@@ -92,19 +92,25 @@

            <div class="card-actions">
              <!-- Кнопка просмотра объекта -->
-              <NuxtLink :to="`/objects/${object.id}`" class="btn btn-outline btn-sm btn-with-icon view-btn"
+              <NuxtLink
+              :to="`/objects/${object.id}`" 
+              class="btn btn-outline btn-sm btn-with-icon view-btn"
              title="Просмотреть объект">
                <span>👁️</span>
                Просмотр
              </NuxtLink>

              <div class="action-buttons">
-                <NuxtLink :to="`/objects/${object.id}/edit`" class="btn btn-outline btn-sm btn-with-icon"
+                <NuxtLink
+                :to="`/objects/${object.id}/edit`" 
+                class="btn btn-outline btn-sm btn-with-icon"
                  title="Редактировать">
                  <span>✏️</span>
                </NuxtLink>
-                <button @click="deleteObject(object.id)" class="btn btn-outline btn-sm btn-with-icon delete-btn"
-                  title="Удалить">
+                <button
+                class="btn btn-outline btn-sm btn-with-icon delete-btn" 
+                title="Удалить"
+                  @click="deleteObject(object.id)">
                  <span>🗑️</span>
                </button>
              </div>