305 lines
17 KiB
HTML
305 lines
17 KiB
HTML
<!-- Модальное окно -->
|
|
<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"></span>
|
|
<h2 class="modal__content text-xl font-bold mb-4">Client Details</h2>
|
|
<div class="post intro-y overflow-hidden box mt-2 flex-1 overflow-y-auto">
|
|
<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="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>
|
|
</div>
|
|
<div class="post__content tab-content">
|
|
<div class="tab-content__pane p-5 active" id="content">
|
|
<h2 class="font-medium text-base mr-auto"> INFO</h2>
|
|
<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>Email:</strong> <span id="client-email"></span></p>
|
|
<p class="font-medium"><strong>Phone:</strong> <span id="client-phone"></span></p>
|
|
</div>
|
|
|
|
<div class="border border-gray-200 rounded-md p-5 mt-5">
|
|
<span id="token" style="display: none;"></span>
|
|
<h2 class="font-medium text-base mb-2">Ask a question</h2>
|
|
<textarea id="user-question" rows="3" class="form-control w-full mb-2" placeholder="Enter a question..."></textarea>
|
|
<button id="send-question" class="btn button w-24 mr-1 mb-2 bg-theme-9 text-white">Send</button>
|
|
<div class="mt-4">
|
|
<strong>Answer:</strong>
|
|
<p id="question-response" class="mt-1 text-gray-700">—</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-content__pane p-5" id="prom">
|
|
<div class="border border-gray-200 rounded-md p-5 mt-5">
|
|
<div class="grid grid-cols-12 gap-6">
|
|
<!-- Основной блок -->
|
|
<div class="col-span-12 lg:col-span-8 space-y-5">
|
|
<div class="intro-y box px-5 pt-5 mt-5 col-span-12">
|
|
<div class="flex flex-col lg:flex-row border-b border-gray-200 pb-5 -mx-5">
|
|
<div class="flex flex-1 px-5 items-center justify-center lg:justify-start">
|
|
<div class="ml-5">
|
|
<div class="w-24 sm:w-40 truncate sm:whitespace-normal font-medium text-lg">
|
|
<span id="client-name2"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Дополнительные блоки один под другим education_list -->
|
|
<div class="intro-y box px-5 pt-5 mt-5 col-span-12">
|
|
<div class="font-medium text-lg">Statement</div>
|
|
<span id="user_statement"></span>
|
|
</div>
|
|
<div class="intro-y box px-5 pt-5 mt-5 col-span-12">
|
|
<div class="font-medium text-lg">Education</div>
|
|
<span id="education_list"></span>
|
|
</div>
|
|
<div class="intro-y box px-5 pt-5 mt-5 col-span-12">
|
|
<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 class="font-medium text-lg">Skills</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 class="col-span-12 lg:col-span-4 flex flex-col space-y-4">
|
|
<div class="intro-y box p-4">
|
|
<div class="font-medium text-lg">Job Preferences</div>
|
|
<span id="job-title"></span>
|
|
</div>
|
|
|
|
<div class="intro-y box p-4">
|
|
<div class="font-medium text-lg">Contact Info</div>
|
|
<span id="contactinfo"></span>
|
|
</div>
|
|
|
|
<div class="intro-y box p-4">
|
|
<div class="font-medium text-lg">Resume</div>
|
|
<span id="resume_url"></span>
|
|
</div>
|
|
<div class="intro-y box p-4">
|
|
<div class="font-medium text-lg">Languages</div>
|
|
<span id="languages"></span>
|
|
</div>
|
|
<div class="intro-y box p-4">
|
|
<div class="font-medium text-lg">Website</div>
|
|
<span id="websites"></span>
|
|
</div>
|
|
<div class="intro-y box p-4">
|
|
<div class="font-medium text-lg">Legal Status</div>
|
|
<span id="output"></span>
|
|
</div>
|
|
<div class="intro-y box p-4">
|
|
<div class="font-medium text-lg">Equal Opportunity</div>
|
|
<span id="equal"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-content__pane p-5" id="rozetka">
|
|
<div class="border border-gray-200 rounded-md p-5 mt-5">
|
|
<div id="knows-container"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<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);
|
|
|
|
|
|
const getYesNo = val => val === "autorization-yes" ? "yes" : "no";
|
|
|
|
const lines = [
|
|
`Are you authorized to work in the US? ${getYesNo(data.autorization)}`,
|
|
`Will you now or in the future require sponsorship for employment visa status? ${getYesNo(data.sponsorship)}`,
|
|
`Are you authorized to work in Canada? ${getYesNo(data.autorization_canada)}`,
|
|
];
|
|
|
|
if (data.autorization_canada === "autorization-yes") {
|
|
lines.push(`(If Yes) What is your status in Canada? ${data["status-Canada"]}`);
|
|
}
|
|
|
|
lines.push(`Are you authorized to work in the United Kingdom? ${getYesNo(data.autorization_uk)}`);
|
|
|
|
document.getElementById("output").innerHTML = lines.join("<br>");
|
|
|
|
const equalLines = [];
|
|
|
|
if (data["ethnicity-no-answer"] !== "on") {
|
|
equalLines.push(`What's your ethnicity? ${data.ethnicity}`);
|
|
}
|
|
|
|
if (data["gender-no-answer"] !== "on") {
|
|
equalLines.push(`What's your gender? ${data.gender}`);
|
|
}
|
|
|
|
equalLines.push(`Do you have a disability? ${data.disability}`);
|
|
equalLines.push(`Are you a veteran? ${data.veteran}`);
|
|
|
|
document.getElementById("equal").innerHTML = equalLines.join("<br>");
|
|
|
|
|
|
const education = data.education_list?.map(item => {
|
|
return `
|
|
<div class="mb-4">
|
|
<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('') || "No education information";
|
|
|
|
const volunt = data.volunteering_list?.map(item => {
|
|
return `
|
|
<div class="mb-4">
|
|
<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('') || "No volunteering information";
|
|
|
|
const experience = data.experience_list?.map(item => {
|
|
return `
|
|
<div class="mb-4">
|
|
<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>
|
|
</div>
|
|
`;
|
|
}).join('') || "No experience information";
|
|
|
|
document.getElementById("token").textContent = data.token || "";
|
|
document.getElementById("client-name").textContent = `${data.first_name || ''} ${data.last_name || ''}`;
|
|
document.getElementById("client-email").textContent = data.email_addr || "No email";
|
|
document.getElementById("client-phone").textContent = data.phone_num || "No phone";
|
|
document.getElementById("client-name2").textContent = `${data.first_name || ''} ${data.last_name || ''} ${data.additional_name || ''} ${data.pronouns || ''}`;
|
|
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("volunteering_list").innerHTML = volunt;
|
|
document.getElementById("experience_list").innerHTML = experience;
|
|
|
|
document.getElementById("job-title").innerHTML = data["job-title"] || "No job title";
|
|
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";
|
|
|
|
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 || "No email") + '<br>' + (data.phone_num || "No phone");
|
|
|
|
// Отображаем знания (knows)
|
|
const knows = data.knows?.result || [];
|
|
const knowsContainer = document.getElementById("knows-container");
|
|
knowsContainer.innerHTML = "";
|
|
|
|
knows.forEach(item => {
|
|
const block = document.createElement("div");
|
|
block.className = "intro-y box p-4 mb-4";
|
|
block.innerHTML = `
|
|
<div class="font-medium text-lg">${item.title || 'No title'}</div>
|
|
<span>${item.text || 'No content'}</span>
|
|
`;
|
|
knowsContainer.appendChild(block);
|
|
});
|
|
|
|
modal.classList.remove("hidden");
|
|
document.body.style.overflow = "hidden"; // Блокируем скролл страницы
|
|
})
|
|
.catch(err => {
|
|
console.error("Error fetching client data:", err);
|
|
alert("Error loading client data");
|
|
});
|
|
});
|
|
});
|
|
|
|
// Закрытие модалки
|
|
closeModal.addEventListener("click", () => {
|
|
modal.classList.add("hidden");
|
|
document.body.style.overflow = "auto"; // Восстанавливаем скролл страницы
|
|
clearModalFields();
|
|
});
|
|
|
|
// Закрытие по клику вне модалки
|
|
modal.addEventListener("click", (e) => {
|
|
if (e.target === modal) {
|
|
modal.classList.add("hidden");
|
|
document.body.style.overflow = "auto"; // Восстанавливаем скролл страницы
|
|
clearModalFields();
|
|
}
|
|
});
|
|
});
|
|
|
|
function clearModalFields() {
|
|
document.getElementById("user-question").value = "";
|
|
document.getElementById("question-response").textContent = "";
|
|
}
|
|
|
|
document.getElementById("send-question").addEventListener("click", () => {
|
|
const question = document.getElementById("user-question").value;
|
|
const clientName = document.getElementById("client-name").textContent;
|
|
const token = document.getElementById("token").textContent;
|
|
|
|
if (!question.trim()) {
|
|
alert("Please enter a question");
|
|
return;
|
|
}
|
|
|
|
fetch("/ask_question", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json"
|
|
},
|
|
body: JSON.stringify({
|
|
question: question,
|
|
client_name: clientName,
|
|
token: token
|
|
})
|
|
})
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
document.getElementById("question-response").textContent = data.answer || "No answer received.";
|
|
})
|
|
.catch(err => {
|
|
document.getElementById("question-response").textContent = "Error getting response.";
|
|
console.error("Error:", err);
|
|
});
|
|
});
|
|
</script> |