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 13:58:39 +03:00
parent c296ee8caa
commit 137ecb2f3a
1 changed files with 276 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

399
templates/modal.html
View File

@ -1,123 +1,276 @@
<!-- Модальное окно &times;--> <!-- Модальное окно &times;-->
<!-- Модальное окно &times;--> <!-- Модальное окно &times;-->
<div id="client-modal" class="fixed inset-0 hidden bg-gray-800 bg-opacity-75 flex items-center justify-center z-50"> <div id="client-modal" class="fixed inset-0 hidden bg-gray-800 bg-opacity-75 flex items-center justify-center z-50">
<div class="bg-white rounded-lg p-6 w-4/5 relative shadow-2xl"> <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> <span id="close-modal" class="absolute top-2 right-4 text-xl cursor-pointer"></span>
<h2 class="modal__content">Client Details</h2> <h2 class="modal__content">Client Details</h2>
<div class="post intro-y overflow-hidden box mt-5"> <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> </div>
<div class="tab-content__pane p-5 " id="prom"> <div class="tab-content__pane p-5" id="prom">
<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 class="grid grid-cols-12 gap-6"> <div class="grid grid-cols-12 gap-6">
<div class="intro-y box px-5 pt-5 mt-5"> <!-- Основной блок -->
<div class="flex flex-col lg:flex-row border-b border-gray-200 pb-5 -mx-5"> <div class="col-span-12 lg:col-span-8 space-y-5">
<div class="flex flex-1 px-5 items-center justify-center lg:justify-start"> <div class="intro-y box px-5 pt-5 mt-5 col-span-12">
<div class="ml-5"> <div class="flex flex-col lg:flex-row border-b border-gray-200 pb-5 -mx-5">
<div class="w-24 sm:w-40 truncate sm:whitespace-normal font-medium text-lg"><span id="client-name2"></span></div> <div class="flex flex-1 px-5 items-center justify-center lg:justify-start">
<div class="text-gray-600">Frontend Engineer</div> <div class="ml-5">
</div> <div class="w-24 sm:w-40 truncate sm:whitespace-normal font-medium text-lg">
</div> <span id="client-name2"></span>
</div>
</div> </div>
</div> </div>
<!--<div class="intro-y box col-span-12 lg:col-span-6"> </div>
<div class="flex items-center p-5 border-b border-gray-200"> </div>
<h2 class="font-medium text-base mr-auto">
Top Categories <!-- Дополнительные блоки один под другим education_list -->
</h2> <div class="intro-y box px-5 pt-5 mt-5 col-span-12">
<div class="font-medium text-lg">Statement</div>
</div> <span id="user_statement"></span>
</div>--> </div>
</div> <div class="intro-y box px-5 pt-5 mt-5 col-span-12">
</div> <div class="font-medium text-lg">Education</div>
</div> <span id="education_list"></span>
</div>
<div class="tab-content__pane p-5" id="rozetka"> <div class="intro-y box px-5 pt-5 mt-5 col-span-12">
<div class="border border-gray-200 rounded-md p-5 mt-5"> <div class="font-medium text-lg">Experience</div>
<span id="experience_list"></span>
</div>
<div class="intro-y box px-5 pt-5 mt-5 col-span-12">
</div> <div class="font-medium text-lg">Skills</div>
</div> <span id="skills"></span>
</div>
<div class="intro-y box px-5 pt-5 mt-5 col-span-12">
<div class="font-medium text-lg">Volunteering</div>
<span id="volunteering_list"></span>
</div> </div>
</div>
</div> </div>
<!-- END: Post Content -->
<!-- BEGIN: Post Info --> <div class="col-span-12 lg:col-span-4 flex flex-col space-y-4">
<div class="intro-y box p-4">
</div> <div class="font-medium text-lg">Job Preferences</div>
</div> <span id="job-title"></span>
</div>
</div>
<div class="intro-y box p-4">
<div class="font-medium text-lg">Contact Info</div>
<!-- JS только для модалки --> <span id="contactinfo"></span>
<script> </div>
document.addEventListener("DOMContentLoaded", () => {
const modal = document.getElementById("client-modal");
const closeModal = document.getElementById("close-modal");
<div class="intro-y box p-4">
// Открытие модалки по клику на имя клиента <div class="font-medium text-lg">Resume</div>
document.querySelectorAll(".client-link").forEach(link => { <span id="resume_url"></span>
link.addEventListener("click", (e) => { </div>
e.preventDefault(); <div class="intro-y box p-4">
const clientId = link.getAttribute("data-client-id"); <div class="font-medium text-lg">Languages</div>
<span id="languages"></span>
fetch(`/get_client/${clientId}`)
.then(response => response.json()) </div>
.then(data => { <div class="intro-y box p-4">
console.log("Ответ от сервера:", data); // Проверяем, что данные пришли <div class="font-medium text-lg">Website</div>
console.log("Перед выборкой элементов DOM"); <span id="websites"></span>
document.getElementById("client-name").textContent = data.first_name+ ' ' + data.last_name; </div>
document.getElementById("client-email").textContent = data.email_addr; <div class="intro-y box p-4">
document.getElementById("client-phone").textContent = data.phone_num; <div class="font-medium text-lg">Legal Status</div>
document.getElementById("client-name2").textContent = data.first_name+ ' ' + data.last_name; </div>
<div class="intro-y box p-4">
modal.classList.remove("hidden"); <div class="font-medium text-lg">Equal Opportunity</div>
}) </div>
.catch(err => console.error("Error fetching client data:", err)); </div>
}); </div>
}); </div>
</div>
// Закрытие модалки
closeModal.addEventListener("click", () => {
modal.classList.add("hidden"); <div class="tab-content__pane p-5" id="rozetka">
}); <div class="border border-gray-200 rounded-md p-5 mt-5">
// Закрытие по клику вне модалки
modal.addEventListener("click", (e) => {
if (e.target === modal) { </div>
modal.classList.add("hidden"); </div>
}
});
});
</script>
</div>
</div>
</div>
<!-- END: Post Content -->
<!-- BEGIN: Post Info -->
</div>
</div>
</div>
<!-- JS только для модалки -->
<script>
document.addEventListener("DOMContentLoaded", () => {
const modal = document.getElementById("client-modal");
const closeModal = document.getElementById("close-modal");
// Открытие модалки по клику на имя клиента
document.querySelectorAll(".client-link").forEach(link => {
link.addEventListener("click", (e) => {
e.preventDefault();
const clientId = link.getAttribute("data-client-id");
fetch(`/get_client/${clientId}`)
.then(response => response.json())
.then(data => {
console.log("Ответ от сервера:", data); // Проверяем, что данные пришли education_list user_statement websites
console.log("Перед выборкой элементов DOM");
const education = data.education_list.map(item => {
return `
<div>
<strong>University Name:</strong> ${item.university_name} <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>Description:</strong> ${item.description} <br>
</div>
`;
}).join('');
const volunt = data.volunteering_list.map(item => {
return `
<div>
<strong>Compan Name:</strong> ${item.volunteering_organisation_name} <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>Description:</strong> ${item.volunteering_description} <br>
</div>
`;
}).join('');
const experience = data.experience_list.map(item => {
return `
<div>
<strong>Company Name:</strong> ${item.company_name} <br>
<strong>Title:</strong> ${item.title} <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>Description:</strong> ${item.description} <br>
<br>
</div>
`;
}).join('');
document.getElementById("client-name").textContent = data.first_name+ ' ' + data.last_name;
document.getElementById("client-email").textContent = data.email_addr;
document.getElementById("client-phone").textContent = data.phone_num;
document.getElementById("client-name2").textContent = data.first_name+ ' ' + data.last_name+ ' ' +data.additional_name+ ' ' + data.pronouns ;
document.getElementById("user_statement").innerHTML = data.user_statement;
document.getElementById("skills").innerHTML = data.skills.join(', ');
document.getElementById("education_list").innerHTML = education;
document.getElementById("volunteering_list").innerHTML = volunt;
document.getElementById("experience_list").innerHTML = experience;
document.getElementById("job-title").innerHTML = data["job-title"];
document.getElementById("resume_url").innerHTML = `<a href="${data["resume_url"]}" target="_blank">${data["resume_url"]}</a>`;
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) {
document.getElementById("websites").innerHTML = data.websites
.map(web => `${web.type}: <a href="${web.url}" target="_blank">${web.url}</a>`)
.join('<br>');
} else {
document.getElementById("websites").innerHTML = "No websites available.";
}
document.getElementById("contactinfo").innerHTML = data.email_addr + '<br>' + data.phone_num;+
modal.classList.remove("hidden");
// Потом работаем с getKnows
const token = data.token;
console.log("Токен:", token);
if (token) {
fetch("https://devnet.turboapply.ai/api/getKnows", {
method: "GET",
headers: {
"token": token
}
})
.then(response => {
if (!response.ok) throw new Error("Network error");
return response.json();
})
.then(result => {
console.log("Результат запроса getKnows:", result);
// Тут можно вставить в DOM
})
.catch(error => {
console.error("Ошибка запроса getKnows:", error);
});
} else {
console.warn("Токен отсутствует, getKnows не запрашивается");
}
})
.catch(err => console.error("Error fetching client data:", err));
});
});
// Закрытие модалки
closeModal.addEventListener("click", () => {
modal.classList.add("hidden");
});
// Закрытие по клику вне модалки
modal.addEventListener("click", (e) => {
if (e.target === modal) {
modal.classList.add("hidden");
}
});
});
</script>