переход на бд в настройках

src/components/Authe.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, onUnmounted } from "vue";
+import { ref, onMounted, onUnmounted, watch } from "vue";
 import axios from "axios";
 
 // Получение props
@@ -13,20 +13,44 @@ const emit = defineEmits(["update"]);
 const login = ref("");
 const password = ref("");
 const authError = ref(false);
+const isLoggedIn = ref(false);
+
+// Показать badge reCAPTCHA
+const showRecaptchaBadge = () => {
+  setTimeout(() => {
+    const badge = document.querySelector(".grecaptcha-badge");
+    if (badge) {
+      badge.style.display = "block";
+    }
+  }, 100);
+};
+
+// Скрыть badge reCAPTCHA
+const hideRecaptchaBadge = () => {
+  const badge = document.querySelector(".grecaptcha-badge");
+  if (badge) {
+    badge.style.display = "none";
+  }
+};
 
 // Функция авторизации
 const auth_my = async () => {
   try {
     // Получение токена reCAPTCHA
-    const recaptchaToken = await grecaptcha.execute("6LdfSo8sAAAAAGGhbgIGO51nHgMUALYjcAMOxnOg", { action: "login" });
+    const recaptchaToken = await grecaptcha.execute(
+      "6LdfSo8sAAAAAGGhbgIGO51nHgMUALYjcAMOxnOg",
+      { action: "login" },
+    );
 
-    const response = await axios.post("http://127.0.0.1:8004/login", { 
+    const response = await axios.post("https://allowlgroup.ru/api/8004/login", {
       username: login.value,
       password: password.value,
       recaptcha_token: recaptchaToken,
     });
     if (response.data.message === "Login successful") {
       authError.value = false;
+      isLoggedIn.value = true;
+      hideRecaptchaBadge();
       emit("update", "rezylt");
     } else {
       authError.value = true;
@@ -39,7 +63,7 @@ const auth_my = async () => {
 
 // Обработка глобального нажатия Enter
 const handleKeyDown = (event) => {
-  if (event.key === "Enter") {
+  if (event.key === "Enter" && !isLoggedIn.value) {
     auth_my();
   }
 };
@@ -47,6 +71,7 @@ const handleKeyDown = (event) => {
 // Добавляем глобальный слушатель при монтировании
 onMounted(() => {
   window.addEventListener("keydown", handleKeyDown);
+  showRecaptchaBadge();
 });
 
 // Удаляем при размонтировании
@@ -60,8 +85,17 @@ function showStartPage() {
   login.value = "";
   password.value = "";
   authError.value = false;
+  isLoggedIn.value = false;
+  // Показываем badge reCAPTCHA
+  showRecaptchaBadge();
 }
 
+// Отслеживание перехода на страницу admin-panel
+watch(() => props.currentPage, (newPage) => {
+  if (newPage === 'admin-panel' && !isLoggedIn.value) {
+    showRecaptchaBadge();
+  }
+});
 </script>
 
 <template>
@@ -94,5 +128,10 @@ function showStartPage() {
       Неверный логин или пароль
     </div>
   </div>
-  
-</template>
+</template>
+
+<style scoped>
+.grecaptcha-badge {
+  display: block !important;
+}
+</style>

src/components/Section.vue

@@ -1,4 +1,3 @@
-<!-- AdminLogin.vue -->
 <template>
   <div class="w-full sm:w-4/5 dark:text-neutral-300">
     <div class="bg-white flex justify-between p-3 lg:p-5 dark:bg-gray-800">
@@ -34,12 +33,11 @@
       <Time />
     </div>
 
-    <div class="p-4">
+    <!-- Контейнер с рефом для отслеживания скролла -->
+    <div ref="scrollContainer" class="p-4">
       <Stat
         v-for="item in items"
         :key="item.url"
-        :translation_text="item.translation_text"
-        :original_text="item.original_text"
         :url="item.url"
         :title="item.title"
         :article_date="item.article_date"
@@ -48,7 +46,11 @@
         :parsed_at="item.parsed_at"
         :status="item.status"
         :viewed="item.viewed"
+        :original_text="item.original_text"
+        :translation_text="item.translation_text"
         :other="item.other"
+        @update:viewed="handleViewedChange"
+        @update:status="handleStatusChange"
       />
       <!-- Sentinel для бесконечного скролла -->
       <div ref="sentinel" class="h-4"></div>
@@ -61,41 +63,50 @@
 </template>
 
 <script setup>
-import { ref, onMounted, watch, nextTick } from "vue";
+import { ref, onMounted, onUnmounted, watch, nextTick } from "vue";
 import Stat from "./Stat.vue";
 import Time from "./Time.vue";
 import axios from "axios";
 
+const props = defineProps({
+  filter: { type: String, default: "all" },
+});
+
+// Константы
+const LIMIT = 50;
+const POLL_INTERVAL = 10000; // 10 секунд
+
+// Состояния
 const isDarkMode = ref(document.documentElement.classList.contains("dark"));
 const sentinel = ref(null);
+const scrollContainer = ref(null); // Реф контейнера скролла
 const isLoading = ref(false);
 const hasMore = ref(true);
-
-// Состояния для пагинации
-let currentFilter = "default";
-let currentOffset = 0;
-const LIMIT = 50;
-
-// Состояния страницы и данные для входа
 const items = ref([]);
 const poisk = ref("");
 
-// Универсальная функция для получения данных
+// Пагинация
+let currentFilter = "default";
+let currentOffset = 0;
+let pollTimer = null;
+let lastScrollTop = 0; // Сохраняем позицию скролла
+
+// === API ===
+
 const fetchData = async (url) => {
   try {
     const { data } = await axios.get(url);
     return data;
   } catch (err) {
-    console.error(`Ошибка при получении данных с ${url}:`, err);
+    console.error(`Ошибка при получении данных:`, err);
     return [];
   }
 };
 
-// Получение общего количества записей
 const fetchTotalCount = async (filterValue) => {
   try {
     const { data } = await axios.get(
-      `http://45.129.78.228:8002/records_all/count?item=${filterValue}`,
+      `https://allowlgroup.ru/api/8002/records_all/count?item=${filterValue}`
     );
     return data.count;
   } catch (err) {
@@ -107,7 +118,7 @@ const fetchTotalCount = async (filterValue) => {
 const fetchSearchCount = async (query, filterValue) => {
   try {
     const { data } = await axios.get(
-      `http://45.129.78.228:8002/poisk/count?query=${query}&item=${filterValue}`,
+      `https://allowlgroup.ru/api/8002/poisk/count?query=${query}&item=${filterValue}`
     );
     return data.count;
   } catch (err) {
@@ -116,84 +127,38 @@ const fetchSearchCount = async (query, filterValue) => {
   }
 };
 
-// Начальная загрузка (первые 50 записей)
-const loadItems = async (filterValue) => {
+// === Загрузка данных ===
+
+const loadItems = async (filterValue, append = false) => {
   if (isLoading.value) return;
 
   isLoading.value = true;
-  items.value = [];
-  currentFilter = filterValue;
-  currentOffset = 0;
-  hasMore.value = true;
-
-  try {
-    const totalCount = await fetchTotalCount(filterValue);
-    const data = await fetchData(
-      `http://45.129.78.228:8002/records_all?item=${filterValue}&offset=0&limit=${LIMIT}`,
-    );
-    items.value = data;
-    currentOffset = LIMIT;
-    hasMore.value = currentOffset < totalCount;
-  } finally {
-    isLoading.value = false;
-  }
-};
-
-// Подгрузка следующих записей (бесконечный скролл)
-const loadMore = async () => {
-  if (isLoading.value || !hasMore.value) return;
-
-  isLoading.value = true;
-
-  try {
-    // Если есть поисковый запрос - используем поиск с фильтром
-    if (poisk.value.trim()) {
-      const totalCount = await fetchSearchCount(poisk.value, currentFilter);
-      const data = await fetchData(
-        `http://45.129.78.228:8002/poisk?query=${poisk.value}&item=${currentFilter}&offset=${currentOffset}&limit=${LIMIT}`,
-      );
-      items.value = [...items.value, ...data];
-      currentOffset += LIMIT;
-      hasMore.value = currentOffset < totalCount;
-    } else {
-      // Иначе обычная загрузка с фильтром
-      const totalCount = await fetchTotalCount(currentFilter);
-      const data = await fetchData(
-        `http://45.129.78.228:8002/records_all?item=${currentFilter}&offset=${currentOffset}&limit=${LIMIT}`,
-      );
-      items.value = [...items.value, ...data];
-      currentOffset += LIMIT;
-      hasMore.value = currentOffset < totalCount;
-    }
-  } finally {
-    isLoading.value = false;
-  }
-};
-
-// Поиск с пагинацией
-const searchItems = async (query, filterValue, loadMoreFlag = false) => {
-  if (isLoading.value && !loadMoreFlag) return;
-
-  if (!loadMoreFlag) {
+  
+  if (!append) {
     items.value = [];
     currentOffset = 0;
     hasMore.value = true;
   }
 
-  isLoading.value = true;
+  currentFilter = filterValue;
 
   try {
-    const totalCount = await fetchSearchCount(query, filterValue);
-    const data = await fetchData(
-      `http://45.129.78.228:8002/poisk?query=${query}&item=${filterValue}&offset=${currentOffset}&limit=${LIMIT}`,
-    );
-
-    if (loadMoreFlag) {
+    const url = poisk.value.trim()
+      ? `https://allowlgroup.ru/api/8002/poisk?query=${poisk.value}&item=${filterValue}&offset=${currentOffset}&limit=${LIMIT}`
+      : `https://allowlgroup.ru/api/8002/records_all?item=${filterValue}&offset=${currentOffset}&limit=${LIMIT}`;
+    
+    const totalCount = poisk.value.trim()
+      ? await fetchSearchCount(poisk.value, filterValue)
+      : await fetchTotalCount(filterValue);
+    
+    const data = await fetchData(url);
+    
+    if (append) {
       items.value = [...items.value, ...data];
     } else {
       items.value = data;
     }
-
+    
     currentOffset += LIMIT;
     hasMore.value = currentOffset < totalCount;
   } finally {
@@ -201,41 +166,110 @@ const searchItems = async (query, filterValue, loadMoreFlag = false) => {
   }
 };
 
-// Debounce для поиска
-let debounceTimer = null;
-watch(poisk, async (newVal) => {
-  clearTimeout(debounceTimer);
-  debounceTimer = setTimeout(async () => {
-    if (newVal && newVal.trim()) {
-      currentOffset = 0;
-      await searchItems(newVal, currentFilter);
-    } else {
-      // При пустом поиске - загружаем все записи
-      await loadItems(currentFilter);
+// === Polling - проверка новых данных ===
+
+const checkForUpdates = async () => {
+  // Не проверяем при активном поиске или загрузке
+  if (isLoading.value || (poisk.value && poisk.value.trim())) {
+    return;
+  }
+
+  try {
+    const totalCount = await fetchTotalCount(currentFilter);
+    const data = await fetchData(
+      `https://allowlgroup.ru/api/8002/records_all?item=${currentFilter}&offset=0&limit=${LIMIT}`
+    );
+
+    if (!data.length) return;
+
+    // Создаём Map существующих URL для быстрого поиска
+    const existingUrls = new Map(items.value.map(item => [item.url, item]));
+    
+    const newItems = [];
+    let hasNew = false;
+
+    for (const item of data) {
+      const existing = existingUrls.get(item.url);
+      
+      if (!existing) {
+        // Новая запись - добавляем в начало
+        newItems.push(item);
+        hasNew = true;
+      } else if (existing.viewed !== item.viewed || existing.status !== item.status) {
+        // Изменились viewed/status - обновляем
+        const index = items.value.indexOf(existing);
+        items.value[index] = { ...item };
+        hasNew = true;
+      }
     }
+
+    // Добавляем новые записи в начало
+    if (newItems.length > 0) {
+      items.value = [...newItems, ...items.value];
+    }
+    
+  } catch (err) {
+    console.error("Ошибка при проверке обновлений:", err);
+  }
+};
+
+const startPolling = () => {
+  stopPolling();
+  pollTimer = setInterval(checkForUpdates, POLL_INTERVAL);
+};
+
+const stopPolling = () => {
+  if (pollTimer) {
+    clearInterval(pollTimer);
+    pollTimer = null;
+  }
+};
+
+// === Обработчики событий от Stat ===
+
+const handleViewedChange = ({ url, viewed }) => {
+  const item = items.value.find(i => i.url === url);
+  if (item) item.viewed = viewed;
+};
+
+const handleStatusChange = ({ url, status }) => {
+  const item = items.value.find(i => i.url === url);
+  if (item) item.status = status;
+};
+
+// === Watch ===
+
+let debounceTimer = null;
+watch(poisk, (newVal) => {
+  clearTimeout(debounceTimer);
+  debounceTimer = setTimeout(() => {
+    currentOffset = 0;
+    loadItems(currentFilter);
   }, 800);
 });
 
+watch(
+  () => props.filter,
+  (newFilter) => {
+    const filterValue = newFilter === "all" ? "default" : newFilter;
+    currentFilter = filterValue;
+    poisk.value = "";
+    loadItems(filterValue);
+  }
+);
+
 const onfilterItems = (filterValue) => {
   const filter = filterValue === "all" ? "default" : filterValue;
-  currentFilter = filter;
   loadItems(filter);
 };
 
-const props = defineProps({
-  filter: {
-    type: String,
-    default: "all",
-  },
-});
+// === Lifecycle ===
 
-// Observer для бесконечного скролла
 let observer = null;
 
 onMounted(() => {
-  // Инициализация при загрузке
+  // Тема
   isDarkMode.value = document.documentElement.classList.contains("dark");
-
   const mutationObserver = new MutationObserver(() => {
     isDarkMode.value = document.documentElement.classList.contains("dark");
   });
@@ -244,20 +278,23 @@ onMounted(() => {
     attributeFilter: ["class"],
   });
 
-  // Загружаем данные при монтировании
+  // Загрузка данных
   const initialFilter = props.filter === "all" ? "default" : props.filter;
   currentFilter = initialFilter;
   loadItems(initialFilter);
+  
+  // Запускаем polling
+  startPolling();
 
-  // Настройка Intersection Observer для бесконечного скролла
+  // Observer для бесконечного скролла
   nextTick(() => {
     observer = new IntersectionObserver(
       (entries) => {
         if (entries[0].isIntersecting && hasMore.value) {
-          loadMore();
+          loadItems(currentFilter, true); // append = true
         }
       },
-      { rootMargin: "100px" },
+      { rootMargin: "100px" }
     );
 
     if (sentinel.value) {
@@ -265,4 +302,9 @@ onMounted(() => {
     }
   });
 });
-</script>
+
+onUnmounted(() => {
+  stopPolling();
+  if (observer) observer.disconnect();
+});
+</script>

src/components/Setings.vue

@@ -146,13 +146,12 @@ import { ref, onMounted } from "vue";
 import axios from "axios";
 
 const sources = ref([
-  { name: "source1", url: "eee", prompt: "" },
-  { name: "source2", url: "https://example2.com/api", prompt: "" },
+  { url: "", name: "", promt: "" },
 ]);
 
 const currentSource = ref(sources.value[0]);
-const time = ref("");
 const promt = ref("Начальный текст");
+const promt_url = ref("https://");
 const logs = ref([]);
 const tasks = ref([]);
 const showLogs = ref(false); // скрыто по умолчанию
@@ -165,10 +164,9 @@ function toggleLogs() {
     load_log();
   }
 }
-
 const load_log = async () => {
   try {
-    const response = await axios.get("http://45.129.78.228:8001/logs");
+    const response = await axios.get("https://allowlgroup.ru/api/8001/logs");
     logs.value = response.data.logs;
   } catch (error) {
     console.error("Ошибка при загрузке настроек:", error);
@@ -186,7 +184,7 @@ function toggletask() {
 const loadTasks = async () => {
   try {
     const response = await axios.get(
-      "http://45.129.78.228:8001/get_tasks_offset",
+      "https://allowlgroup.ru/api/8001/get_tasks_offset",
     );
     // Предположим, что ответ уже массив задач
     tasks.value = response.data; // или response.data если это массив
@@ -198,7 +196,7 @@ const loadTasks = async () => {
 const delete_row = async (id) => {
   try{
     const response = await axios.delete(
-      `http://45.129.78.228:8001/delete_task/${id}`,
+      `https://allowlgroup.ru/api/8001/delete_task/${id}`,
     );
     console.log(response.data);
     loadTasks();
@@ -215,10 +213,11 @@ onMounted(() => {
 // Получение настроек с сервера
 const loadSettings = async () => {
   try {
-    const response = await axios.get("http://45.129.78.228:8001/settings");
+    const response = await axios.get("https://allowlgroup.ru/api/8001/settings");
     sources.value = response.data.sources;
     currentSource.value = sources.value[0];
-    promt.value = currentSource.value.prompt;
+    promt.value = currentSource.value.promt;
+    promt_url.value = currentSource.value.url;
   } catch (error) {
     console.error("Ошибка при загрузке настроек:", error);
   }
@@ -227,16 +226,17 @@ const loadSettings = async () => {
 // Выбор источника
 const selectSource = (index) => {
   currentSource.value = sources.value[index];
-  promt.value = currentSource.value.prompt;
+  promt.value = currentSource.value.promt;
+  promt_url.value = currentSource.value.url;
 };
 
 // Сохранение источников
 const saveSources = async () => {
   try {
-    await axios.post("http://45.129.78.228:8001/settings", {
+    await axios.post("https://allowlgroup.ru/api/8001/settings", {
+      url: currentSource.value.url,
       name: currentSource.value.name,
-      url: "",
-      prompt: promt.value,
+      promt: promt.value,
     });
     // Здесь можно отправить на сервер, если нужно
     loadSettings();
@@ -248,7 +248,7 @@ const saveSources = async () => {
 // Запуск парсинга 1
 const start_parser_1 = async () => {
   try {
-    await axios.post("http://45.129.78.228:8001/parser_1", {
+    await axios.post("https://allowlgroup.ru/api/8001/parser_1", {
       time: time.value,
     });
   } catch (error) {
@@ -259,7 +259,7 @@ const start_parser_1 = async () => {
 // Запуск парсинга 2
 const start_parser_2 = async () => {
   try {
-    await axios.post("http://45.129.78.228:8001/parser_2");
+    await axios.post("https://allowlgroup.ru/api/8001/parser_2");
   } catch (error) {
     console.error("Ошибка запроса parser_2:", error);
   }

src/components/Stat.vue

@@ -2,22 +2,8 @@
 import { ref, onMounted, onBeforeUnmount } from "vue";
 import axios from "axios";
 
-// Реактивная проверка темной темы
-const isDarkMode = ref(document.documentElement.classList.contains("dark"));
-
-// Следим за изменениями класса dark на html
-onMounted(() => {
-  // Инициализация при загрузке (если класс ещё не установлен)
-  isDarkMode.value = document.documentElement.classList.contains("dark");
-  
-  const observer = new MutationObserver(() => {
-    isDarkMode.value = document.documentElement.classList.contains("dark");
-  });
-  observer.observe(document.documentElement, {
-    attributes: true,
-    attributeFilter: ["class"],
-  });
-});
+// Добавляем emit для уведомления родителя об изменениях
+const emit = defineEmits(["update:viewed", "update:status"]);
 
 const props = defineProps({
   url: String,
@@ -33,12 +19,45 @@ const props = defineProps({
   status: Boolean,
 });
 
-//Код для раскрытия/скрытия карточки
+// Делаем viewed и status реактивными для локального обновления
+const localViewed = ref(props.viewed);
+const localStatus = ref(props.status);
+
+// Следим за изменениями props и обновляем локальные значения
+import { watch } from "vue";
+watch(
+  () => props.viewed,
+  (val) => {
+    localViewed.value = val;
+  },
+);
+watch(
+  () => props.status,
+  (val) => {
+    localStatus.value = val;
+  },
+);
+
+// Тема
+const isDarkMode = ref(document.documentElement.classList.contains("dark"));
+
+onMounted(() => {
+  isDarkMode.value = document.documentElement.classList.contains("dark");
+  const observer = new MutationObserver(() => {
+    isDarkMode.value = document.documentElement.classList.contains("dark");
+  });
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["class"],
+  });
+});
+
+// Карточка
 const isOpen = ref(false);
 const cardRef = ref(null);
 
 function toggle() {
-  isOpen.value = true; //!isOpen.value;
+  isOpen.value = true;
 }
 
 function handleClickOutside(event) {
@@ -47,62 +66,74 @@ function handleClickOutside(event) {
   }
 }
 
+// Обновляем локально + отправляем emit
 const viewed_b = async () => {
+  const newValue = !localViewed.value;
+  localViewed.value = newValue; // Локальное обновление сразу
+  emit("update:viewed", { url: props.url, viewed: newValue });
+
   try {
     await axios.post(
-      "http://45.129.78.228:8002/update_viewed_status",
+      "https://allowlgroup.ru/api/8002/update_viewed_status",
       null,
-      {
-        params: {
-          url: props.url,
-          viewed: !props.viewed,
-        },
-      },
+      { params: { url: props.url, viewed: newValue } },
     );
   } catch (err) {
     console.log(err);
+    // При ошибке откатываем локальное значение
+    localViewed.value = !newValue;
   }
 };
 
 const status_b = async () => {
+  const newValue = !localStatus.value;
+  localStatus.value = newValue; // Локальное обновление сразу
+  emit("update:status", { url: props.url, status: newValue });
+
   try {
     await axios.post(
-      "http://45.129.78.228:8002/update_status_status",
+      "https://allowlgroup.ru/api/8002/update_status_status",
       null,
-      {
-        params: {
-          url: props.url,
-          status: !props.status,
-        },
-      },
+      { params: { url: props.url, status: newValue } },
     );
   } catch (err) {
     console.log(err);
+    localStatus.value = !newValue;
   }
 };
+
 const download = async () => {
   try {
-    const rez = await axios.get("http://45.129.78.228:8001/file_download", {
-      params: {
-        path: props.article_date.split(" ")[0],
-        title: props.title,
+    const rez = await axios.get(
+      "https://allowlgroup.ru/api/8001/file_download",
+      {
+        params: {
+          path: props.article_date.split(" ")[0],
+          title: props.title,
+        },
+        responseType: "blob",
       },
-      responseType: "blob",
-    });
+    );
     const blobUrl = window.URL.createObjectURL(
       new Blob([rez.data], {
         type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
       }),
     );
     const link = document.createElement("a");
-    // Принудительно добавляем .docx к имени файла
     let filename = props.title + ".docx";
     try {
-      const disposition = rez.headers && rez.headers["content-disposition"];
+      const disposition = rez.headers?.["content-disposition"];
       if (disposition) {
         const match = disposition.match(/filename\*?=([^;\n]+)/i);
         if (match) {
-          let name = match[1].replace(/UTF-8''/, "").replace(/"/g, "");
+          let name = match[1];
+          // Убираем префикс utf-8'' (case insensitive)
+          const prefix = "utf-8''";
+          if (name.toLowerCase().startsWith(prefix)) {
+            name = name.substring(prefix.length);
+          }
+          // Убираем кавычки и декодируем
+          name = decodeURIComponent(name.replace(/"/g, ""));
           if (!name.endsWith(".docx")) name += ".docx";
           filename = name;
         }
@@ -124,6 +155,7 @@ const download = async () => {
 onMounted(() => {
   document.addEventListener("click", handleClickOutside);
 });
+
 onBeforeUnmount(() => {
   document.removeEventListener("click", handleClickOutside);
 });
@@ -132,9 +164,8 @@ onBeforeUnmount(() => {
 <template>
   <div
     class="bg-white dark:bg-gray-800 hover:-translate-y-2 hover:shadow-2xl rounded-xl transition pb-1 mb-3"
-    :class="{ 'opacity-50': props.viewed }"
+    :class="{ 'opacity-50': localViewed }"
   >
-    <!--:class="{ 'opacity-50': props.viewed }" обработчик прочитанности-->
     <div ref="cardRef" class="cursor-pointer" @click="toggle">
       <div class="flex justify-between p-3">
         <p>{{ article_date }}</p>
@@ -152,7 +183,6 @@ onBeforeUnmount(() => {
         <p>{{ title }}</p>
       </div>
 
-      <!-- Вариант с Tailwind: показывать/скрывать по состоянию -->
       <div v-show="isOpen" class="transition-all">
         <div class="m-3 dark:bg-gray-900 shadow rounded-xl p-3">
           <p>{{ short_text }}</p>
@@ -172,7 +202,7 @@ onBeforeUnmount(() => {
       <div class="ml-4 mb-4">
         <button class="cursor-pointer" @click="viewed_b">
           <img
-            v-if="props.viewed"
+            v-if="localViewed"
             src="https://img.icons8.com/?size=100&id=IJNt9jGwqy9N&format=png&color=000000"
             class="h-12 hover:opacity-75 active:opacity-75"
           />
@@ -190,7 +220,7 @@ onBeforeUnmount(() => {
 
         <button class="cursor-pointer" @click="status_b">
           <img
-            v-if="props.status"
+            v-if="localStatus"
             src="https://img.icons8.com/?size=100&id=fiJBCEhvIMyT&format=png&color=000000"
             class="h-12 hover:opacity-75 active:opacity-75"
           />