актуальное обновление и отображение

2026-03-28 17:31:30 +10:00
parent ea641e4bd4
commit 28bb2b6ead
2 changed files with 188 additions and 151 deletions
--- a/src/components/Section.vue
+++ b/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,49 +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";

-// Перенесли props в начало
 const props = defineProps({
-  filter: {
-    type: String,
-    default: "all",
-  },
+  filter: { type: String, default: "all" },
 });

+// Константы
+const LIMIT = 50;
+const POLL_INTERVAL = 5000; // 5 секунд
+
+// Состояния
 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(
-      `https://allowlgroup.ru/api/8002/records_all/count?item=${filterValue}`,
+      `https://allowlgroup.ru/api/8002/records_all/count?item=${filterValue}`
    );
    return data.count;
  } catch (err) {
@@ -115,7 +118,7 @@ const fetchTotalCount = async (filterValue) => {
 const fetchSearchCount = async (query, filterValue) => {
  try {
    const { data } = await axios.get(
-      `https://allowlgroup.ru/api/8002/poisk/count?query=${query}&item=${filterValue}`,
+      `https://allowlgroup.ru/api/8002/poisk/count?query=${query}&item=${filterValue}`
    );
    return data.count;
  } catch (err) {
@@ -124,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(
-      `https://allowlgroup.ru/api/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(
-        `https://allowlgroup.ru/api/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(
-        `https://allowlgroup.ru/api/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(
-      `https://allowlgroup.ru/api/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 {
@@ -209,46 +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 для обновления данных при изменении filter
 watch(
  () => props.filter,
-  async (newFilter) => {
+  (newFilter) => {
    const filterValue = newFilter === "all" ? "default" : newFilter;
    currentFilter = filterValue;
-    // Очищаем поиск при смене фильтра
    poisk.value = "";
-    await loadItems(filterValue);
-  },
+    loadItems(filterValue);
+  }
 );

 const onfilterItems = (filterValue) => {
  const filter = filterValue === "all" ? "default" : filterValue;
-  currentFilter = filter;
  loadItems(filter);
 };

-// Observer для бесконечного скролла
+// === Lifecycle ===
+
 let observer = null;

 onMounted(() => {
-  // Инициализация при загрузке
+  // Тема
  isDarkMode.value = document.documentElement.classList.contains("dark");
-
  const mutationObserver = new MutationObserver(() => {
    isDarkMode.value = document.documentElement.classList.contains("dark");
  });
@@ -257,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) {
@@ -278,4 +302,9 @@ onMounted(() => {
    }
  });
 });
-</script>
+
+onUnmounted(() => {
+  stopPolling();
+  if (observer) observer.disconnect();
+});
+</script>
--- a/src/components/Stat.vue
+++ b/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,35 @@ 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,39 +56,42 @@ 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(
      "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(
      "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("https://allowlgroup.ru/api/8001/file_download", {
@@ -95,10 +107,9 @@ const download = async () => {
      }),
    );
    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) {
@@ -107,9 +118,7 @@ const download = async () => {
          filename = name;
        }
      }
-    } catch (e) {
-      /* ignore */
-    }
+    } catch (e) { /* ignore */ }
    link.href = blobUrl;
    link.setAttribute("download", filename);
    document.body.appendChild(link);
@@ -124,6 +133,7 @@ const download = async () => {
 onMounted(() => {
  document.addEventListener("click", handleClickOutside);
 });
+
 onBeforeUnmount(() => {
  document.removeEventListener("click", handleClickOutside);
 });
@@ -132,9 +142,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 +161,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 +180,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 +198,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"
          />