изменил правила хранения промтов
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
248
src/components/Istochnik_one_kard.vue
Normal file
248
src/components/Istochnik_one_kard.vue
Normal file
@@ -0,0 +1,248 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, onBeforeUnmount } from "vue";
|
||||
import axios from "axios";
|
||||
|
||||
// Добавляем emit для уведомления родителя об изменениях
|
||||
const emit = defineEmits(["update:viewed", "update:status"]);
|
||||
|
||||
const props = defineProps({
|
||||
url: String,
|
||||
parsed_at: String,
|
||||
title: String,
|
||||
category: String,
|
||||
short_text: String,
|
||||
article_date: String,
|
||||
original_text: String,
|
||||
translation_text: String,
|
||||
other: String,
|
||||
viewed: Boolean,
|
||||
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;
|
||||
}
|
||||
|
||||
function handleClickOutside(event) {
|
||||
if (cardRef.value && !cardRef.value.contains(event.target)) {
|
||||
isOpen.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// Обновляем локально + отправляем 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: 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: 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",
|
||||
// "http://127.0.0.1:8001/file_download",
|
||||
{
|
||||
params: {
|
||||
path: props.article_date.split(" ")[0],
|
||||
title: props.title,
|
||||
},
|
||||
responseType: "blob",
|
||||
},
|
||||
);
|
||||
const blobUrl = window.URL.createObjectURL(
|
||||
new Blob([rez.data], {
|
||||
type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
|
||||
}),
|
||||
);
|
||||
const link = document.createElement("a");
|
||||
let filename = props.title + ".docx";
|
||||
try {
|
||||
const disposition = rez.headers?.["content-disposition"];
|
||||
if (disposition) {
|
||||
const match = disposition.match(/filename\*?=([^;\n]+)/i);
|
||||
if (match) {
|
||||
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;
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
/* ignore */
|
||||
}
|
||||
link.href = blobUrl;
|
||||
link.setAttribute("download", filename);
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
link.remove();
|
||||
window.URL.revokeObjectURL(blobUrl);
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener("click", handleClickOutside);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
document.removeEventListener("click", handleClickOutside);
|
||||
});
|
||||
</script>
|
||||
|
||||
<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': localViewed }"
|
||||
>
|
||||
<div ref="cardRef" class="cursor-pointer" @click="toggle">
|
||||
<div class="flex justify-between p-3">
|
||||
<p>{{ article_date }}</p>
|
||||
<a
|
||||
:href="url"
|
||||
class="max-w-100 text-blue-600 dark:text-gray-400 hover:text-blue-800 active:text-blue-800 underline flex"
|
||||
style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis"
|
||||
>
|
||||
<img src="/src/assets/href.webp" class="w-5 h-6 mr-2" />
|
||||
{{ url }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="m-3 dark:bg-gray-900 shadow rounded-xl p-3">
|
||||
<p>{{ title }}</p>
|
||||
</div>
|
||||
|
||||
<div v-show="isOpen" class="transition-all">
|
||||
<div class="m-3 dark:bg-gray-900 shadow rounded-xl p-3">
|
||||
<p>{{ short_text }}</p>
|
||||
</div>
|
||||
<div class="m-3 dark:bg-gray-900 shadow rounded-xl p-3">
|
||||
<p>{{ translation_text }}</p>
|
||||
</div>
|
||||
<div class="m-3 dark:bg-gray-900 shadow rounded-xl p-3">
|
||||
<p>{{ category }}</p>
|
||||
</div>
|
||||
<div class="m-3 dark:bg-gray-900 shadow rounded-xl p-3">
|
||||
<p>{{ original_text }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<div class="ml-4 mb-4">
|
||||
<button class="cursor-pointer" @click="viewed_b">
|
||||
<img
|
||||
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"
|
||||
/>
|
||||
<img
|
||||
v-else-if="isDarkMode"
|
||||
src="https://img.icons8.com/?size=100&id=qliQ29ghmkZh&format=png&color=000000"
|
||||
class="h-12 hover:opacity-75 active:opacity-75"
|
||||
/>
|
||||
<img
|
||||
v-else
|
||||
src="https://img.icons8.com/?size=100&id=KDfrR4UXlVPn&format=png&color=000000"
|
||||
class="h-12 hover:opacity-75 active:opacity-75"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<button class="cursor-pointer" @click="status_b">
|
||||
<img
|
||||
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"
|
||||
/>
|
||||
<img
|
||||
v-else-if="isDarkMode"
|
||||
src="https://img.icons8.com/?size=100&id=BmD1kkH92ppy&format=png&color=000000"
|
||||
class="h-12 hover:opacity-75 active:opacity-75"
|
||||
/>
|
||||
<img
|
||||
v-else
|
||||
src="https://img.icons8.com/?size=100&id=wVQaONwgqX8h&format=png&color=000000"
|
||||
class="h-12 hover:opacity-75 active:opacity-75"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
class="hover:opacity-75 active:opacity-75 mr-10 rounded-xl cursor-pointer"
|
||||
@click="download"
|
||||
>
|
||||
<img src="/src/assets/word.png" class="h-10 mb-2" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user