добавил сводку и тп.

src/components/News_section/One_kard.vue

@@ -1,9 +1,16 @@
 <script setup>
-import { ref, onMounted, onBeforeUnmount } from "vue";
+import { ref, onMounted, onBeforeUnmount, watch } from "vue";
 import axios from "axios";
 
 // Добавляем emit для уведомления родителя об изменениях
-const emit = defineEmits(["update:viewed", "update:status"]);
+const emit = defineEmits([
+  "update:viewed",
+  "update:status",
+  "update:tematik",
+  "update:svodka",
+  "update:donesenie",
+  "update:bilutene",
+]);
 
 const props = defineProps({
   url: String,
@@ -17,14 +24,23 @@ const props = defineProps({
   other: String,
   viewed: Boolean,
   status: Boolean,
+  tematik: Boolean,
+  svodka: Boolean,
+  donesenie: Boolean,
+  bilutene: Boolean,
 });
 
 // Делаем viewed и status реактивными для локального обновления
 const localViewed = ref(props.viewed);
 const localStatus = ref(props.status);
 
+// Делаем tematik, svodka, donesenie, bilutene реактивными для локального обновления
+const localTematik = ref(props.tematik);
+const localSvodka = ref(props.svodka);
+const localDonesenie = ref(props.donesenie);
+const localBilutene = ref(props.bilutene);
+
 // Следим за изменениями props и обновляем локальные значения
-import { watch } from "vue";
 watch(
   () => props.viewed,
   (val) => {
@@ -37,6 +53,30 @@ watch(
     localStatus.value = val;
   },
 );
+watch(
+  () => props.tematik,
+  (val) => {
+    localTematik.value = val;
+  },
+);
+watch(
+  () => props.svodka,
+  (val) => {
+    localSvodka.value = val;
+  },
+);
+watch(
+  () => props.donesenie,
+  (val) => {
+    localDonesenie.value = val;
+  },
+);
+watch(
+  () => props.bilutene,
+  (val) => {
+    localBilutene.value = val;
+  },
+);
 
 // Тема
 const isDarkMode = ref(document.documentElement.classList.contains("dark"));
@@ -102,6 +142,74 @@ const status_b = async () => {
   }
 };
 
+const tematik_b = async () => {
+  const newValue = !localTematik.value;
+  localTematik.value = newValue;
+  emit("update:tematik", { url: props.url, tematik: newValue });
+
+  try {
+    await axios.post(
+      "https://allowlgroup.ru/api/8002/update_tematik_status",
+      null,
+      { params: { url: props.url, tematik: newValue } },
+    );
+  } catch (err) {
+    console.log(err);
+    localTematik.value = !newValue;
+  }
+};
+
+const svodka_b = async () => {
+  const newValue = !localSvodka.value;
+  localSvodka.value = newValue;
+  emit("update:svodka", { url: props.url, svodka: newValue });
+
+  try {
+    await axios.post(
+      "https://allowlgroup.ru/api/8002/update_svodka_status",
+      null,
+      { params: { url: props.url, svodka: newValue } },
+    );
+  } catch (err) {
+    console.log(err);
+    localSvodka.value = !newValue;
+  }
+};
+
+const donesenie_b = async () => {
+  const newValue = !localDonesenie.value;
+  localDonesenie.value = newValue;
+  emit("update:donesenie", { url: props.url, donesenie: newValue });
+
+  try {
+    await axios.post(
+      "https://allowlgroup.ru/api/8002/update_donesenie_status",
+      null,
+      { params: { url: props.url, donesenie: newValue } },
+    );
+  } catch (err) {
+    console.log(err);
+    localDonesenie.value = !newValue;
+  }
+};
+
+const bilutene_b = async () => {
+  const newValue = !localBilutene.value;
+  localBilutene.value = newValue;
+  emit("update:bilutene", { url: props.url, bilutene: newValue });
+
+  try {
+    await axios.post(
+      "https://allowlgroup.ru/api/8002/update_bilutene_status",
+      null,
+      { params: { url: props.url, bilutene: newValue } },
+    );
+  } catch (err) {
+    console.log(err);
+    localBilutene.value = !newValue;
+  }
+};
+
 const download = async () => {
   try {
     const rez = await axios.get(
@@ -226,7 +334,7 @@ onBeforeUnmount(() => {
       </div>
     </div>
     <div class="flex justify-between">
-      <div class="ml-4 mb-4">
+      <div class="ml-4 mb-4 flex items-end gap-2">
         <button class="cursor-pointer" @click="viewed_b">
           <img
             v-if="localViewed"
@@ -262,6 +370,55 @@ onBeforeUnmount(() => {
             class="h-12 hover:opacity-75 active:opacity-75"
           />
         </button>
+
+        <!-- Кнопки Т, С, Д, Б -->
+        <button
+          @click="tematik_b"
+          class="w-10 h-10 rounded-lg font-bold text-sm hover:opacity-75 active:opacity-75 transition-colors"
+          :class="
+            localTematik
+              ? 'bg-green-500 text-white'
+              : 'bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
+          "
+        >
+          Т
+        </button>
+
+        <button
+          @click="svodka_b"
+          class="w-10 h-10 rounded-lg font-bold text-sm hover:opacity-75 active:opacity-75 transition-colors"
+          :class="
+            localSvodka
+              ? 'bg-blue-500 text-white'
+              : 'bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
+          "
+        >
+          С
+        </button>
+
+        <button
+          @click="donesenie_b"
+          class="w-10 h-10 rounded-lg font-bold text-sm hover:opacity-75 active:opacity-75 transition-colors"
+          :class="
+            localDonesenie
+              ? 'bg-yellow-500 text-white'
+              : 'bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
+          "
+        >
+          Д
+        </button>
+
+        <button
+          @click="bilutene_b"
+          class="w-10 h-10 rounded-lg font-bold text-sm hover:opacity-75 active:opacity-75 transition-colors"
+          :class="
+            localBilutene
+              ? 'bg-purple-500 text-white'
+              : 'bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
+          "
+        >
+          Б
+        </button>
       </div>
       <button
         class="hover:opacity-75 active:opacity-75 mr-10 rounded-xl cursor-pointer"