From 25a0014d21658a57719c270b1988326dda2124d7 Mon Sep 17 00:00:00 2001
From: Ilia Miheev <imiheev774@gmail.com>
Date: Tue, 2 Jun 2026 23:32:44 +0300
Subject: [PATCH] =?UTF-8?q?=D0=A3=D0=B1=D1=80=D0=B0=D0=BB=20=D0=BF=D1=80?=
 =?UTF-8?q?=D0=BE=D1=88=D0=BB=D1=8B=D0=B9=20=D1=84=D1=83=D0=BD=D0=BA=D1=86?=
 =?UTF-8?q?=D0=B8=D0=BE=D0=BD=D0=B0=D0=BB=20=D0=97=D0=B0=D0=BF=D1=87=D0=B0?=
 =?UTF-8?q?=D1=81=D1=82=D0=B5=D0=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                   |  44 +---
 src/components/DroneParts.vue | 452 ----------------------------------
 2 files changed, 2 insertions(+), 494 deletions(-)
 delete mode 100644 src/components/DroneParts.vue

diff --git a/src/App.vue b/src/App.vue
index ab626c2..b41ce8e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,26 +1,15 @@
 <script setup>
 import { ref, provide } from "vue";
-import DroneParts from "@/components/DroneParts.vue";
 import MyDropMenu from "@/components/MyDropMenu.vue";
 
-const showDroneParts = ref(false);
 const dropMenu = ref(null);
 
 provide('dropMenu', dropMenu);
 </script>
 
 <template>
-    <button
-        v-if="!showDroneParts"
-        @click="showDroneParts = true"
-        class="show-parts-btn"
-    >
-        <img src="/images/drone.png" alt="menu" class="btn-icon" />
-    </button>
-
-    <MyDropMenu v-if="!showDroneParts" ref="dropMenu" />
-    <DroneParts v-if="showDroneParts" @back="showDroneParts = false" />
-    <router-view v-if="!showDroneParts" />
+    <MyDropMenu ref="dropMenu" />
+    <router-view />
 </template>
 
 <style>
@@ -36,33 +25,4 @@ body {
     font-size: 18px;
     margin: 0;
 }
-
-.show-parts-btn {
-    position: fixed;
-    top: 20px;
-    right: 20px;
-    z-index: 9999;
-    width: 50px;
-    height: 50px;
-    padding: 0;
-    background: rgba(12, 12, 12, 0.034);
-    border: none;
-    cursor: pointer;
-    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
-    transition: transform 0.2s;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-}
-
-.btn-icon {
-    width: 90%;
-    height: 90%;
-    object-fit: cover;
-}
-
-.show-parts-btn:hover {
-    transform: scale(1.05);
-}
 </style>
diff --git a/src/components/DroneParts.vue b/src/components/DroneParts.vue
deleted file mode 100644
index ad14b28..0000000
--- a/src/components/DroneParts.vue
+++ /dev/null
@@ -1,452 +0,0 @@
-<template>
-  <div class="drone-parts-container">
-    <!-- Кнопка возврата в левом верхнем углу -->
-    <button class="back-btn" @click="$emit('back')">
-      ← Вернуться к маршруту
-    </button>
-
-    <!-- Левая панель - список компонентов -->
-    <div class="parts-list scroll-strip">
-      <ListCard
-        v-for="part in parts"
-        :key="part.id"
-        :title="part.name"
-        :subtitle="part.category"
-        :image="part.image"
-        :active="selectedPart?.id === part.id"
-        @click="selectPart(part)"
-      />
-    </div>
-
-    <!-- Правая часть - детали -->
-    <div class="main-area">
-      <div v-if="selectedPart" class="part-detail">
-        <div class="detail-image">
-          <img :src="selectedPart.image" :alt="selectedPart.name" />
-        </div>
-        
-        <div class="detail-info">
-          <h2>{{ selectedPart.name }}</h2>
-          <p class="description">{{ selectedPart.description }}</p>
-        </div>
-        
-        <div class="comments-section">
-          <div class="comments-header">
-            <h3>📝 Мой комментарий</h3>
-          </div>
-          
-          <div v-if="myComment" class="existing-comment">
-            <div class="comment-text">{{ myComment.text }}</div>
-            <div class="comment-meta">
-              <span class="comment-date">{{ myComment.date }}</span>
-              <button class="edit-comment" @click="editComment">✏️ Редактировать</button>
-              <button class="delete-comment" @click="deleteComment">🗑️ Удалить</button>
-            </div>
-          </div>
-          
-          <div v-else class="add-comment">
-            <textarea 
-              v-model="commentText" 
-              :placeholder="`Мой комментарий к «${selectedPart.name}»...`"
-              rows="3"
-            ></textarea>
-            <div class="comment-actions">
-              <button class="save-btn" @click="saveComment" :disabled="!commentText.trim()">
-                💾 Сохранить комментарий
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      
-      <div v-else class="empty-state">
-        <div class="empty-icon">🛸</div>
-        <h3>Выберите компонент дрона</h3>
-        <p>Нажмите на любой компонент из списка слева</p>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue'
-import ListCard from '@/components/UI/ListCard.vue'
-
-const emit = defineEmits(['back'])
-let db = null
-
-const openDB = () => {
-  return new Promise((resolve, reject) => {
-    const request = indexedDB.open('DroneCommentsDB', 1)
-    
-    request.onerror = () => reject(request.error)
-    request.onsuccess = () => resolve(request.result)
-    
-    request.onupgradeneeded = (event) => {
-      const database = event.target.result
-      if (!database.objectStoreNames.contains('comments')) {
-        const store = database.createObjectStore('comments', { keyPath: 'id', autoIncrement: true })
-        store.createIndex('part_id', 'part_id', { unique: false })
-      }
-    }
-  })
-}
-
-const saveCommentToDB = async (partId, text) => {
-  return new Promise((resolve, reject) => {
-    const transaction = db.transaction(['comments'], 'readwrite')
-    const store = transaction.objectStore('comments')
-    
-    const comment = {
-      part_id: partId,
-      user_id: 'me',
-      text: text,
-      date: new Date().toLocaleString('ru-RU'),
-      timestamp: Date.now()
-    }
-    
-    const request = store.add(comment)
-    request.onsuccess = () => resolve(request.result)
-    request.onerror = () => reject(request.error)
-  })
-}
-
-const loadCommentFromDB = async (partId) => {
-  return new Promise((resolve, reject) => {
-    const transaction = db.transaction(['comments'], 'readonly')
-    const store = transaction.objectStore('comments')
-    const index = store.index('part_id')
-    const request = index.getAll(partId)
-    
-    request.onsuccess = () => {
-      const comments = request.result
-      const myComment = comments.length > 0 ? comments[comments.length - 1] : null
-      resolve(myComment)
-    }
-    request.onerror = () => reject(request.error)
-  })
-}
-
-const updateCommentInDB = async (id, newText) => {
-  return new Promise((resolve, reject) => {
-    const transaction = db.transaction(['comments'], 'readwrite')
-    const store = transaction.objectStore('comments')
-    
-    const request = store.get(id)
-    request.onsuccess = () => {
-      const comment = request.result
-      if (comment) {
-        comment.text = newText
-        comment.date = new Date().toLocaleString('ru-RU')
-        comment.timestamp = Date.now()
-        
-        const updateRequest = store.put(comment)
-        updateRequest.onsuccess = () => resolve()
-        updateRequest.onerror = () => reject(updateRequest.error)
-      } else {
-        reject('Comment not found')
-      }
-    }
-    request.onerror = () => reject(request.error)
-  })
-}
-
-const deleteCommentFromDB = async (id) => {
-  return new Promise((resolve, reject) => {
-    const transaction = db.transaction(['comments'], 'readwrite')
-    const store = transaction.objectStore('comments')
-    const request = store.delete(id)
-    
-    request.onsuccess = () => resolve()
-    request.onerror = () => reject(request.error)
-  })
-}
-const parts = ref([])
-const selectedPart = ref(null)
-const myComment = ref(null)
-const commentText = ref('')
-const dbReady = ref(false)
-const loadParts = async () => {
-  try {
-    const response = await fetch('/droneComponents/components.json')
-    if (response.ok) {
-      parts.value = await response.json()
-    } else {
-      console.error('Файл components.json не найден')
-      parts.value = []
-    }
-  } catch (error) {
-    console.error('Ошибка загрузки компонентов:', error)
-    parts.value = []
-  }
-}
-
-
-const selectPart = async (part) => {
-  selectedPart.value = part
-  if (dbReady.value) {
-    const comment = await loadCommentFromDB(part.id)
-    myComment.value = comment
-    commentText.value = ''
-  }
-}
-
-// ========== КОММЕНТАРИИ ==========
-const saveComment = async () => {
-  if (!commentText.value.trim() || !selectedPart.value) return
-  
-  try {
-    await saveCommentToDB(selectedPart.value.id, commentText.value.trim())
-    const comment = await loadCommentFromDB(selectedPart.value.id)
-    myComment.value = comment
-    commentText.value = ''
-  } catch (error) {
-    console.error('Ошибка сохранения:', error)
-  }
-}
-
-const editComment = () => {
-  if (myComment.value) {
-    commentText.value = myComment.value.text
-    myComment.value = null
-  }
-}
-
-const deleteComment = async () => {
-  if (!confirm('Удалить комментарий?')) return
-  
-  try {
-    await deleteCommentFromDB(myComment.value.id)
-    myComment.value = null
-    commentText.value = ''
-  } catch (error) {
-    console.error('Ошибка удаления:', error)
-  }
-}
-onMounted(async () => {
-  try {
-    db = await openDB()
-    dbReady.value = true
-    await loadParts()
-  } catch (error) {
-    console.error('Ошибка открытия IndexedDB:', error)
-  }
-})
-</script>
-
-<style scoped>
-.drone-parts-container {
-  display: flex;
-  height: 100vh;
-  width: 100%;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-  position: relative;
-}
-
-/* Кнопка возврата */
-.back-btn {
-    position: fixed;
-    top: 20px;
-    right: 20px;  
-    z-index: 9999;
-    padding: 12px 20px;
-    background: linear-gradient(135deg, #ff6b6b, #c92a2a); 
-    border: none;
-    border-radius: 10px;
-    color: white;
-    font-weight: bold;
-    cursor: pointer;
-    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
-    transition: transform 0.2s;
-}
-
-.back-btn:hover {
-    transform: scale(1.02);
-}
-
-/* Левая панель с отступом сверху, чтобы не перекрывалась кнопкой */
-.parts-list {
-  width: 300px;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.4);
-  backdrop-filter: blur(10px);
-  border-right: 1px solid rgba(255, 255, 255, 0.1);
-  margin-top: 0;
-}
-
-/* Правая область */
-.main-area {
-  flex: 1;
-  overflow-y: auto;
-  padding: 20px;
-}
-
-.part-detail {
-  max-width: 800px;
-  margin: 0 auto;
-  background: rgba(0, 0, 0, 0.5);
-  border-radius: 24px;
-  padding: 30px;
-  backdrop-filter: blur(5px);
-}
-
-.detail-image {
-  text-align: center;
-  margin-bottom: 30px;
-}
-
-.detail-image img {
-  max-width: 100%;
-  max-height: 350px;
-  border-radius: 20px;
-  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-}
-
-.detail-info h2 {
-  font-size: 28px;
-  color: #fff;
-  margin-bottom: 15px;
-  text-align: center;
-}
-
-.description {
-  font-size: 16px;
-  line-height: 1.6;
-  color: rgba(255, 255, 255, 0.85);
-  text-align: center;
-  margin-bottom: 30px;
-  white-space: pre-wrap;
-}
-
-.comments-section {
-  border-top: 1px solid rgba(255, 255, 255, 0.2);
-  padding-top: 25px;
-}
-
-.comments-header h3 {
-  font-size: 18px;
-  color: #fff;
-  margin: 0 0 20px 0;
-}
-
-.existing-comment {
-  background: rgba(35, 170, 227, 0.15);
-  border-radius: 12px;
-  padding: 15px;
-  border-left: 3px solid #23aae3;
-}
-
-.comment-text {
-  color: #fff;
-  font-size: 15px;
-  line-height: 1.5;
-  margin-bottom: 10px;
-  white-space: pre-wrap;
-}
-
-.comment-meta {
-  display: flex;
-  gap: 15px;
-  align-items: center;
-  font-size: 11px;
-  color: rgba(255, 255, 255, 0.5);
-}
-
-.comment-meta button {
-  background: none;
-  border: none;
-  cursor: pointer;
-  font-size: 12px;
-  padding: 4px 8px;
-  border-radius: 6px;
-  transition: 0.2s;
-}
-
-.edit-comment {
-  color: #23aae3;
-}
-
-.edit-comment:hover {
-  background: rgba(35, 170, 227, 0.2);
-}
-
-.delete-comment {
-  color: #ff6b6b;
-}
-
-.delete-comment:hover {
-  background: rgba(255, 107, 107, 0.2);
-}
-
-.add-comment textarea {
-  width: 100%;
-  padding: 12px;
-  background: rgba(255, 255, 255, 0.08);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 12px;
-  color: #fff;
-  font-size: 14px;
-  font-family: inherit;
-  resize: vertical;
-}
-
-.add-comment textarea:focus {
-  outline: none;
-  border-color: #23aae3;
-}
-
-.add-comment textarea::placeholder {
-  color: rgba(255, 255, 255, 0.4);
-}
-
-.comment-actions {
-  margin-top: 10px;
-}
-
-.save-btn {
-  background: linear-gradient(135deg, #23aae3, #1a6d8f);
-  border: none;
-  padding: 10px 24px;
-  border-radius: 24px;
-  color: white;
-  font-size: 14px;
-  cursor: pointer;
-  transition: 0.2s;
-}
-
-.save-btn:hover:not(:disabled) {
-  transform: scale(1.02);
-  box-shadow: 0 2px 10px rgba(35, 170, 227, 0.4);
-}
-
-.save-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  text-align: center;
-}
-
-.empty-icon {
-  font-size: 80px;
-  margin-bottom: 20px;
-  opacity: 0.5;
-}
-
-.empty-state h3 {
-  font-size: 24px;
-  color: #fff;
-  margin-bottom: 10px;
-}
-
-.empty-state p {
-  color: rgba(255, 255, 255, 0.6);
-}
-</style>
\ No newline at end of file