Alex55
/
linkedin2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Обновить templates/modal.html

This commit is contained in:
Alex55 2025-04-23 17:36:11 +03:00
parent 0a34a3b935
commit 9c3eb2fa95
1 changed files with 152 additions and 192 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

144
templates/modal.html
View File

@ -1,30 +1,21 @@
<!-- Модальное окно -->
<!-- Модальное окно &times;--> <div id="client-modal" class="fixed inset-0 hidden bg-gray-800 bg-opacity-75 flex items-center justify-center z-50 overflow-y-auto">
<div class="bg-white rounded-lg p-6 w-11/12 max-w-6xl h-5/6 max-h-screen relative shadow-2xl flex flex-col">
<span id="close-modal" class="absolute top-2 right-4 text-xl cursor-pointer">&times;</span>
<!-- Модальное окно &times;--> <h2 class="modal__content text-xl font-bold mb-4">Client Details</h2>
<div id="client-modal" class="fixed inset-0 hidden bg-gray-800 bg-opacity-75 flex items-center justify-center z-50"> <div class="post intro-y overflow-hidden box mt-2 flex-1 overflow-y-auto">
<div class="bg-white rounded-lg p-6 w-4/5 relative shadow-2xl">
<span id="close-modal" class="absolute top-2 right-4 text-xl cursor-pointer"></span>
<h2 class="modal__content">Client Details</h2>
<div class="post intro-y overflow-hidden box mt-5">
<div class="post__tabs nav-tabs flex flex-col sm:flex-row bg-gray-200 text-gray-600"> <div class="post__tabs nav-tabs flex flex-col sm:flex-row bg-gray-200 text-gray-600">
<a title="Main" data-toggle="tab" data-target="#content" href="javascript:;" class="tooltip w-full sm:w-40 py-4 text-center flex justify-center items-center active"> <i data-feather="file-text" class="w-4 h-4 mr-2"></i> Main </a> <a title="Main" data-toggle="tab" data-target="#content" href="javascript:;" class="tooltip w-full sm:w-40 py-4 text-center flex justify-center items-center active"> <i data-feather="file-text" class="w-4 h-4 mr-2"></i> Main </a>
<a title="Profile" data-toggle="tab" data-target="#prom" href="javascript:;" class="tooltip w-full sm:w-40 py-4 text-center flex justify-center items-center"> <i data-feather="code" class="w-4 h-4 mr-2"></i> Profile </a> <a title="Profile" data-toggle="tab" data-target="#prom" href="javascript:;" class="tooltip w-full sm:w-40 py-4 text-center flex justify-center items-center"> <i data-feather="code" class="w-4 h-4 mr-2"></i> Profile </a>
<a title="Knowledge Base" data-toggle="tab" data-target="#rozetka" href="javascript:;" class="tooltip w-full sm:w-40 py-4 text-center flex justify-center items-center"> <i data-feather="align-left" class="w-4 h-4 mr-2"></i> Knowledge Base </a> <a title="Knowledge Base" data-toggle="tab" data-target="#rozetka" href="javascript:;" class="tooltip w-full sm:w-40 py-4 text-center flex justify-center items-center"> <i data-feather="align-left" class="w-4 h-4 mr-2"></i> Knowledge Base </a>
</div> </div>
<div class="post__content tab-content"> <div class="post__content tab-content">
<div class="tab-content__pane p-5 active" id="content"> <div class="tab-content__pane p-5 active" id="content">
<h2 class="font-medium text-base mr-auto"> INFO</h2> <h2 class="font-medium text-base mr-auto"> INFO</h2>
<div class="border border-gray-200 rounded-md p-5 mt-5"> <div class="border border-gray-200 rounded-md p-5 mt-5">
<p class="font-medium"><strong>Name:</strong> <span id="client-name"></span></p> <p class="font-medium"><strong>Name:</strong> <span id="client-name"></span></p>
<p class="font-medium"><strong>Email:</strong> <span id="client-email"></span></p> <p class="font-medium"><strong>Email:</strong> <span id="client-email"></span></p>
<p class="font-medium"><strong>Phone:</strong> <span id="client-phone"></span></p> <p class="font-medium"><strong>Phone:</strong> <span id="client-phone"></span></p>
</div> </div>
<div class="border border-gray-200 rounded-md p-5 mt-5"> <div class="border border-gray-200 rounded-md p-5 mt-5">
@ -37,7 +28,6 @@
<p id="question-response" class="mt-1 text-gray-700">—</p> <p id="question-response" class="mt-1 text-gray-700">—</p>
</div> </div>
</div> </div>
</div> </div>
<div class="tab-content__pane p-5" id="prom"> <div class="tab-content__pane p-5" id="prom">
@ -78,7 +68,6 @@
<div class="font-medium text-lg">Volunteering</div> <div class="font-medium text-lg">Volunteering</div>
<span id="volunteering_list"></span> <span id="volunteering_list"></span>
</div> </div>
</div> </div>
<div class="col-span-12 lg:col-span-4 flex flex-col space-y-4"> <div class="col-span-12 lg:col-span-4 flex flex-col space-y-4">
@ -92,8 +81,6 @@
<span id="contactinfo"></span> <span id="contactinfo"></span>
</div> </div>
<div class="intro-y box p-4"> <div class="intro-y box p-4">
<div class="font-medium text-lg">Resume</div> <div class="font-medium text-lg">Resume</div>
<span id="resume_url"></span> <span id="resume_url"></span>
@ -101,7 +88,6 @@
<div class="intro-y box p-4"> <div class="intro-y box p-4">
<div class="font-medium text-lg">Languages</div> <div class="font-medium text-lg">Languages</div>
<span id="languages"></span> <span id="languages"></span>
</div> </div>
<div class="intro-y box p-4"> <div class="intro-y box p-4">
<div class="font-medium text-lg">Website</div> <div class="font-medium text-lg">Website</div>
@ -118,31 +104,16 @@
</div> </div>
</div> </div>
<div class="tab-content__pane p-5" id="rozetka"> <div class="tab-content__pane p-5" id="rozetka">
<div class="border border-gray-200 rounded-md p-5 mt-5"> <div class="border border-gray-200 rounded-md p-5 mt-5">
<div id="knows-container"></div> <div id="knows-container"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- END: Post Content -->
<!-- BEGIN: Post Info -->
</div>
</div>
</div> </div>
<!-- JS только для модалки -->
<script> <script>
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
const modal = document.getElementById("client-modal"); const modal = document.getElementById("client-modal");
@ -157,64 +128,58 @@ document.addEventListener("DOMContentLoaded", () => {
fetch(`/get_client/${clientId}`) fetch(`/get_client/${clientId}`)
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
console.log("Ответ от сервера:", data); // Проверяем, что данные пришли education_list user_statement websites console.log("Ответ от сервера:", data);
console.log("Перед выборкой элементов DOM");
const education = data.education_list.map(item => { const education = data.education_list?.map(item => {
return ` return `
<div> <div class="mb-4">
<strong>University Name:</strong> ${item.university_name} <br> <strong>University Name:</strong> ${item.university_name} <br>
<strong>Course:</strong> ${item.course} <br> <strong>Course:</strong> ${item.course} <br>
<strong>Period:</strong> ${item.start_date_month}/${item.start_date_year} - ${item.end_date_month}/${item.end_date_year} <br> <strong>Period:</strong> ${item.start_date_month}/${item.start_date_year} - ${item.end_date_month}/${item.end_date_year} <br>
<strong>Description:</strong> ${item.description} <br> <strong>Description:</strong> ${item.description} <br>
</div> </div>
`; `;
}).join(''); }).join('') || "No education information";
const volunt = data.volunteering_list?.map(item => {
const volunt = data.volunteering_list.map(item => {
return ` return `
<div> <div class="mb-4">
<strong>Compan Name:</strong> ${item.volunteering_organisation_name} <br> <strong>Compan Name:</strong> ${item.volunteering_organisation_name} <br>
<strong>Course:</strong> ${item.volunteering_position} <br> <strong>Course:</strong> ${item.volunteering_position} <br>
<strong>Period:</strong> ${item.volunteering_start_date_month}/${item.volunteering_start_date_year} - ${item.volunteering_end_date_month}/${item.volunteering_end_date_year} <br> <strong>Period:</strong> ${item.volunteering_start_date_month}/${item.volunteering_start_date_year} - ${item.volunteering_end_date_month}/${item.volunteering_end_date_year} <br>
<strong>Description:</strong> ${item.volunteering_description} <br> <strong>Description:</strong> ${item.volunteering_description} <br>
</div> </div>
`; `;
}).join(''); }).join('') || "No volunteering information";
const experience = data.experience_list.map(item => { const experience = data.experience_list?.map(item => {
return ` return `
<div> <div class="mb-4">
<strong>Company Name:</strong> ${item.company_name} <br> <strong>Company Name:</strong> ${item.company_name} <br>
<strong>Title:</strong> ${item.title} <br> <strong>Title:</strong> ${item.title} <br>
<strong>Employment type:</strong> ${item.employment_type} <br> <strong>Employment type:</strong> ${item.employment_type} <br>
<strong>Period:</strong> ${item.start_date_month}/${item.start_date_year} - ${item.end_date_month}/${item.end_date_year} <br> <strong>Period:</strong> ${item.start_date_month}/${item.start_date_year} - ${item.end_date_month}/${item.end_date_year} <br>
<strong>Description:</strong> ${item.description} <br> <strong>Description:</strong> ${item.description} <br>
<br>
</div> </div>
`; `;
}).join(''); }).join('') || "No experience information";
document.getElementById("token").textContent = data.token;
document.getElementById("client-name").textContent = data.first_name+ ' ' + data.last_name; document.getElementById("token").textContent = data.token || "";
document.getElementById("client-email").textContent = data.email_addr; document.getElementById("client-name").textContent = `${data.first_name || ''} ${data.last_name || ''}`;
document.getElementById("client-phone").textContent = data.phone_num; document.getElementById("client-email").textContent = data.email_addr || "No email";
document.getElementById("client-name2").textContent = data.first_name+ ' ' + data.last_name+ ' ' +data.additional_name+ ' ' + data.pronouns ; document.getElementById("client-phone").textContent = data.phone_num || "No phone";
document.getElementById("user_statement").innerHTML = data.user_statement; document.getElementById("client-name2").textContent = `${data.first_name || ''} ${data.last_name || ''} ${data.additional_name || ''} ${data.pronouns || ''}`;
document.getElementById("skills").innerHTML = data.skills.join(', '); document.getElementById("user_statement").innerHTML = data.user_statement || "No statement";
document.getElementById("skills").innerHTML = data.skills?.join(', ') || "No skills";
document.getElementById("education_list").innerHTML = education; document.getElementById("education_list").innerHTML = education;
document.getElementById("volunteering_list").innerHTML = volunt; document.getElementById("volunteering_list").innerHTML = volunt;
document.getElementById("experience_list").innerHTML = experience; document.getElementById("experience_list").innerHTML = experience;
document.getElementById("job-title").innerHTML = data["job-title"]; document.getElementById("job-title").innerHTML = data["job-title"] || "No job title";
document.getElementById("resume_url").innerHTML = `<a href="${data["resume_url"]}" target="_blank">${data["resume_url"]}</a>`; document.getElementById("resume_url").innerHTML = data["resume_url"] ? `<a href="${data["resume_url"]}" target="_blank">${data["resume_url"]}</a>` : "No resume";
document.getElementById("languages").innerHTML = data.languages?.map(lang => `${lang.language_label}: ${lang.level_label}`).join('<br>') || "No languages";
document.getElementById("languages").innerHTML = data.languages
.map(lang => `${lang.language_label}: ${lang.level_label}`)
.join('<br>');
//document.getElementById("contactinfo").textContent = data.email_addr + '<br>' + data.phone_num ;
if (data.websites && data.websites.length > 0) { if (data.websites && data.websites.length > 0) {
document.getElementById("websites").innerHTML = data.websites document.getElementById("websites").innerHTML = data.websites
.map(web => `${web.type}: <a href="${web.url}" target="_blank">${web.url}</a>`) .map(web => `${web.type}: <a href="${web.url}" target="_blank">${web.url}</a>`)
@ -223,53 +188,45 @@ document.addEventListener("DOMContentLoaded", () => {
document.getElementById("websites").innerHTML = "No websites available."; document.getElementById("websites").innerHTML = "No websites available.";
} }
document.getElementById("contactinfo").innerHTML = (data.email_addr || "No email") + '<br>' + (data.phone_num || "No phone");
document.getElementById("contactinfo").innerHTML = data.email_addr + '<br>' + data.phone_num;+
modal.classList.remove("hidden");
// Отображаем знания (knows) // Отображаем знания (knows)
const knows = data.knows?.result || []; const knows = data.knows?.result || [];
const knowsContainer = document.getElementById("knows-container"); const knowsContainer = document.getElementById("knows-container");
knowsContainer.innerHTML = ""; // Очистка контейнера перед добавлением новых данных knowsContainer.innerHTML = "";
knows.forEach(item => { knows.forEach(item => {
const block = document.createElement("div"); const block = document.createElement("div");
block.className = "intro-y box p-4"; block.className = "intro-y box p-4 mb-4";
block.innerHTML = ` block.innerHTML = `
<div class="font-medium text-lg">${item.title}</div> <div class="font-medium text-lg">${item.title || 'No title'}</div>
<span>${item.text}</span> <span>${item.text || 'No content'}</span>
`; `;
knowsContainer.appendChild(block); knowsContainer.appendChild(block);
}); });
modal.classList.remove("hidden");
document.body.style.overflow = "hidden"; // Блокируем скролл страницы
}) })
.catch(err => console.error("Error fetching client data:", err)); .catch(err => {
console.error("Error fetching client data:", err);
alert("Error loading client data");
});
}); });
}); });
// Закрытие модалки // Закрытие модалки
closeModal.addEventListener("click", () => { closeModal.addEventListener("click", () => {
modal.classList.add("hidden"); modal.classList.add("hidden");
document.body.style.overflow = "auto"; // Восстанавливаем скролл страницы
clearModalFields(); clearModalFields();
}); });
// Закрытие по клику вне модалки // Закрытие по клику вне модалки
modal.addEventListener("click", (e) => { modal.addEventListener("click", (e) => {
if (e.target === modal) { if (e.target === modal) {
modal.classList.add("hidden"); modal.classList.add("hidden");
document.body.style.overflow = "auto"; // Восстанавливаем скролл страницы
clearModalFields(); clearModalFields();
} }
}); });
@ -283,7 +240,12 @@ function clearModalFields() {
document.getElementById("send-question").addEventListener("click", () => { document.getElementById("send-question").addEventListener("click", () => {
const question = document.getElementById("user-question").value; const question = document.getElementById("user-question").value;
const clientName = document.getElementById("client-name").textContent; const clientName = document.getElementById("client-name").textContent;
const token = document.getElementById("token").textContent;; const token = document.getElementById("token").textContent;
if (!question.trim()) {
alert("Please enter a question");
return;
}
fetch("/ask_question", { fetch("/ask_question", {
method: "POST", method: "POST",
@ -292,19 +254,17 @@ document.getElementById("send-question").addEventListener("click", () => {
}, },
body: JSON.stringify({ body: JSON.stringify({
question: question, question: question,
client_name: clientName, // или передай ID клиента, если удобнее client_name: clientName,
token: token token: token
}) })
}) })
.then(res => res.json()) .then(res => res.json())
.then(data => { .then(data => {
document.getElementById("question-response").textContent = data.answer || "Нет ответа."; document.getElementById("question-response").textContent = data.answer || "No answer received.";
}) })
.catch(err => { .catch(err => {
document.getElementById("question-response").textContent = "Ошибка при получении ответа."; document.getElementById("question-response").textContent = "Error getting response.";
console.error("Ошибка:", err); console.error("Error:", err);
}); });
}); });
</script> </script>