From 137ecb2f3ae73c9b2aa5e3001d916f813c322b3d Mon Sep 17 00:00:00 2001
From: Alex55 <info@xander.cx.ua>
Date: Wed, 23 Apr 2025 13:58:39 +0300
Subject: [PATCH] =?UTF-8?q?=D0=9E=D0=B1=D0=BD=D0=BE=D0=B2=D0=B8=D1=82?=
 =?UTF-8?q?=D1=8C=20templates/modal.html?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 templates/modal.html | 399 ++++++++++++++++++++++++++++++-------------
 1 file changed, 276 insertions(+), 123 deletions(-)

diff --git a/templates/modal.html b/templates/modal.html
index d92986e..6aad0d0 100644
--- a/templates/modal.html
+++ b/templates/modal.html
@@ -1,123 +1,276 @@
-
-<!-- Модальное окно &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 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">
-                                <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>
-
-                                        <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="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="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 class="text-gray-600">Frontend Engineer</div>
-                                                                </div>
-                                                            </div>
-                                                            
-                                                        </div>
-                                                    </div>
-                                                    <!--<div class="intro-y box col-span-12 lg:col-span-6">
-                                                        <div class="flex items-center p-5 border-b border-gray-200">
-                                                                    <h2 class="font-medium text-base mr-auto">
-                                                                        Top Categories
-                                                                    </h2>
-                                                                    
-                                                        </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>
-                                        </div>
-                                                    
-                                                    
-                                                    
-                                                    
-                            </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);  // Проверяем, что данные пришли
-                    console.log("Перед выборкой элементов DOM");
-                    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;
-
-                    modal.classList.remove("hidden");
-                })
-                .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>
+
+<!-- Модальное окно &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 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">
+                                <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>
+
+                                        <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>
+                                                </div>
+                                                <div class="intro-y box p-4">
+                                                    <div class="font-medium text-lg">Equal Opportunity</div>
+                                                </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>
+                                        </div>
+                                                    
+                                                    
+                                                    
+                                                    
+                            </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>
+
+