{"id":3853,"date":"2024-12-10T15:21:29","date_gmt":"2024-12-10T19:21:29","guid":{"rendered":"https:\/\/vrai-dev.johnabbott.qc.ca\/?page_id=3853"},"modified":"2024-12-12T15:33:51","modified_gmt":"2024-12-12T19:33:51","slug":"student-list","status":"publish","type":"page","link":"https:\/\/vrai-dev.johnabbott.qc.ca\/fr\/student-list\/","title":{"rendered":"Liste des \u00e9tudiants"},"content":{"rendered":"<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\" style=\"border-bottom-color:#008000;border-bottom-width:3px;padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40)\">\n    \n    <h2 class=\"wp-block-heading alignfull has-text-align-center\">Liste des \u00e9tudiants<\/h2>\n    \n<\/div>\n\n\n\n<style>\n    \/* General Page Styling *\/\n    .page-container {\n        max-width: 1200px;\n        margin: 40px auto;\n        padding: 20px;\n        background: #f9f9f9;\n        border-radius: 12px;\n        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);\n        font-family: 'Roboto', sans-serif;\n    }\n\n    .page-container h2 {\n        font-size: 32px;\n        color: #333;\n        margin-bottom: 20px;\n        text-align: center;\n    }\n\n    .page-container select {\n        width: 100%;\n        max-width: 400px;\n        margin: 20px auto;\n        padding: 10px;\n        border: 1px solid #ccc;\n        border-radius: 5px;\n        font-size: 16px;\n        display: block;\n    }\n\n    \/* Table Styling *\/\n    table {\n        width: 100%;\n        border-collapse: collapse;\n        margin: 20px 0;\n        background: #ffffff;\n        border-radius: 8px;\n        overflow: hidden;\n        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n    }\n\n    table th, table td {\n        padding: 12px 15px;\n        text-align: left;\n    }\n\n    table th {\n        background-color: #008000;\n        color: white;\n        font-weight: bold;\n        font-size: 16px;\n    }\n\n    table tr:nth-child(even) {\n        background-color: #f2f2f2;\n    }\n\n    table tr:hover {\n        background-color: #e6ffe6;\n    }\n\n    table td {\n        color: #333;\n        font-size: 14px;\n    }\n\n    \/* Message Container *\/\n    .message-container {\n        max-width: 600px;\n        margin: 20px auto;\n        padding: 15px;\n        border-radius: 8px;\n        font-size: 16px;\n        text-align: center;\n        font-weight: bold;\n    }\n\n    .error-message {\n        background-color: #ffdddd;\n        color: #d8000c;\n        border: 1px solid #d8000c;\n    }\n\n    .success-message {\n        background-color: #ddffdd;\n        color: #008000;\n        border: 1px solid #008000;\n    }\n\n    \/* Button Styling *\/\n    .back-button {\n        display: inline-block;\n        font-weight: bold;\n        border-radius: 8px;\n        color: white;\n        background-color: #008000;\n        padding: 12px 20px;\n        border: none;\n        cursor: pointer;\n        font-size: 16px;\n        transition: background-color 0.3s ease, transform 0.2s ease;\n    }\n\n    .back-button:hover {\n        background-color: #006400;\n    }\n\n    .back-button:active {\n        transform: scale(0.96);\n    }\n\n    .button-container {\n        text-align: center;\n        margin-top: 30px;\n    }\n<\/style>\n\n<div class=\"page-container\">\n    <h2>Liste des \u00e9tudiants<\/h2>\n\n    <!-- Message Container -->\n    <div id=\"message-container\" class=\"message-container\"><\/div>\n\n    <!-- Course Selector -->\n    <select id=\"course-select\">\n        <option value=\"\">\u2014 S\u00e9lectionnez un cours \u2014<\/option>\n        <!-- Dynamically populated options -->\n    <\/select>\n\n    <!-- Teacher Information -->\n    <h3>Professeur<\/h3>\n    <table>\n        <thead>\n            <tr>\n                <th>Nom d'utilisateur<\/th>\n                <th>Pr\u00e9nom<\/th>\n                <th>Nom de famille<\/th>\n            <\/tr>\n        <\/thead>\n        <tbody>\n            <tr>\n                <td id=\"teacher-username\"><\/td>\n                <td id=\"teacher-firstname\"><\/td>\n                <td id=\"teacher-lastname\"><\/td>\n            <\/tr>\n        <\/tbody>\n    <\/table>\n\n    <!-- Students Information -->\n    <h3>\u00c9tudiants<\/h3>\n    <table>\n        <thead>\n            <tr>\n                <th>Nom d'utilisateur<\/th>\n                <th>Pr\u00e9nom<\/th>\n                <th>Nom de famille<\/th>\n            <\/tr>\n        <\/thead>\n        <tbody id=\"students-container\"><\/tbody>\n    <\/table>\n\n    <!-- Back Button -->\n    <div class=\"button-container\">\n        <button class=\"back-button\" onclick=\"window.location.href='\/account'\">Retourner au tableau de bord<\/button>\n    <\/div>\n<\/div>\n\n<script>\n    const authToken = localStorage.getItem('authToken');\n    let previousTimeout;\n    let coursesData = {};\n\n    function displayMessage(message, isError) {\n        const messageContainer = document.getElementById('message-container');\n        messageContainer.textContent = message;\n        messageContainer.className = isError ? 'message-container error-message' : 'message-container success-message';\n        clearTimeout(previousTimeout);\n        previousTimeout = setTimeout(() => messageContainer.textContent = '', 5000);\n    }\n\n    function populateCoursesDropdown(courses) {\n        const courseDropdown = document.getElementById('course-select');\n        courses.forEach(course => {\n            const option = document.createElement('option');\n            option.value = course.id;\n            option.textContent = course.name;\n            courseDropdown.appendChild(option);\n        });\n    }\n\n    async function fetchCourses() {\n        try {\n            const response = await fetch(`${API_URL}\/courses`, {\n                method: 'GET',\n                headers: {\n                    'Authorization': 'Bearer ' + authToken,\n                },\n            });\n            if (response.ok) {\n                const courses = await response.json();\n                courses.forEach(course => {\n                    coursesData[course.id] = course;\n                });\n                populateCoursesDropdown(courses);\n            } else {\n                displayMessage('Failed to fetch courses', true);\n            }\n        } catch (error) {\n            displayMessage('An error occurred while fetching courses', true);\n        }\n    }\n\n    document.getElementById('course-select').addEventListener('change', () => {\n        const courseId = document.getElementById('course-select').value;\n        if (!courseId) return;\n\n        const course = coursesData[courseId];\n        if (course) {\n            document.getElementById('teacher-username').textContent = course.teacher.username || '-';\n            document.getElementById('teacher-firstname').textContent = course.teacher.firstName || '-';\n            document.getElementById('teacher-lastname').textContent = course.teacher.lastName || '-';\n\n            const studentsContainer = document.getElementById('students-container');\n            studentsContainer.innerHTML = '';\n\n            course.students.forEach(student => {\n                const row = `<tr>\n                    <td>${student.username}<\/td>\n                    <td>${student.firstName}<\/td>\n                    <td>${student.lastName}<\/td>\n                <\/tr>`;\n                studentsContainer.innerHTML += row;\n            });\n        }\n    });\n\n    document.addEventListener('DOMContentLoaded', fetchCourses);\n<\/script>","protected":false},"excerpt":{"rendered":"<p>Students List Students List &#8212; Select a course &#8212; Teacher Username First Name Last Name Students Username First Name Last Name Back to Dashboard<\/p>","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3853","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/vrai-dev.johnabbott.qc.ca\/fr\/wp-json\/wp\/v2\/pages\/3853","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vrai-dev.johnabbott.qc.ca\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vrai-dev.johnabbott.qc.ca\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vrai-dev.johnabbott.qc.ca\/fr\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/vrai-dev.johnabbott.qc.ca\/fr\/wp-json\/wp\/v2\/comments?post=3853"}],"version-history":[{"count":11,"href":"https:\/\/vrai-dev.johnabbott.qc.ca\/fr\/wp-json\/wp\/v2\/pages\/3853\/revisions"}],"predecessor-version":[{"id":3888,"href":"https:\/\/vrai-dev.johnabbott.qc.ca\/fr\/wp-json\/wp\/v2\/pages\/3853\/revisions\/3888"}],"wp:attachment":[{"href":"https:\/\/vrai-dev.johnabbott.qc.ca\/fr\/wp-json\/wp\/v2\/media?parent=3853"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}