feat: update register alert

competitions/templates/index.html

@@ -9,13 +9,102 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.1/flowbite.min.css" rel="stylesheet" />
     <script>
-        document.addEventListener('DOMContentLoaded', function () {
-            function showSubmissionModal() {
-                const modal = document.getElementById('submission-modal');
-                modal.classList.add('flex');
-                modal.classList.remove('hidden');
-            }
+        function fetchAndDisplaySubmissionInfo() {
+            const articleLoadingSpinner = document.getElementById('articleLoadingSpinner');
+            articleLoadingSpinner.classList.remove('hidden');
+            fetch('/submission_info')
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error('Network response was not ok');
+                    }
+                    return response.json(); // Parse the JSON response
+                })
+                .then(data => {
+                    // Populate the 'content' div with the HTML from the response
+                    const contentDiv = document.getElementById('content');
+                    contentDiv.innerHTML = marked.parse(data.response);
+                    addTargetBlankToLinks();
+                    articleLoadingSpinner.classList.add('hidden');
+                })
+                .catch(error => {
+                    console.error('There has been a problem with your fetch operation:', error);
+                    articleLoadingSpinner.classList.add('hidden');
+                });
+        }
+
+        function fetchAndDisplaySubmissions() {
+            const apiEndpoint = '/my_submissions';
+            const articleLoadingSpinner = document.getElementById('articleLoadingSpinner');
+            articleLoadingSpinner.classList.remove('hidden');
+
+            const requestOptions = {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                }
+            };
+
+            fetch(apiEndpoint, requestOptions)
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error('Network response was not ok');
+                    }
+                    return response.json();
+                })
+                .then(data => {
+                    const contentDiv = document.getElementById('content');
+                    const teamNameDiv = `
+                        <div class="flex items-center">
+                            <input type="text" name="team_name" id="team_name" class="mt-1 mb-1 block me-2" value="${data.response.team_name}">
+                            <button id="updateTeamNameButton" type="button" class="confirm text-white bg-green-600 hover:bg-green-800 focus:ring-4 focus:outline-none focus:ring-green-300 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center me-2">Update Team Name</button>
+                        </div>`;
+                    // console.log(data.response.submissions);
+                    // contentDiv.innerHTML = marked.parse(data.response.submission_text) + data.response.submissions;
+                    if (data.response.submissions && data.response.submissions.length > 0 && data.response.error.length == 0) {
+                        // Start building the table HTML
+                        let tableHTML = teamNameDiv;
+                        tableHTML += '<table border="1"><tr><th width: 17%;>Datetime</th><th style="width: 40%;">Submission ID</th><th style="width: 20%;">Score</th><th style="width: 8%;">Status</th><th style="width: 15%;">Error</th></tr>';
+
+                        // Iterate over each submission and add it to the table
+                        data.response.submissions.forEach(submission => {
+                            tableHTML += `<tr>
+                                <td>${submission.datetime}</td>
+                                <td>${submission.submission_id}</td>
+                                <td>${submission.score}</td>
+                                <td>${submission.status}</td>
+                                <td>${submission.error_message}</td>
+                                </tr>`;
+                        });
+
+                        // Close the table HTML and set it as the content
+                        tableHTML += '</table>';
+                        // add a text field which displays team name and a button to update team name
+                        contentDiv.innerHTML = marked.parse(data.response.submission_text) + tableHTML;
+                        document.getElementById('updateSelectedSubmissionsButton').addEventListener('click', function () {
+                            updateSelectedSubmissions();
+                        });
+                    } else {
+                        // Display message if there are no submissions
+                        contentDiv.innerHTML = teamNameDiv + marked.parse(data.response.submission_text) + marked.parse(data.response.error);
+                    }
+                    document.getElementById('updateTeamNameButton').addEventListener('click', function () {
+                        updateTeamName();
+                    });
+                    articleLoadingSpinner.classList.add('hidden');
+                })
+                .catch(error => {
+                    console.error('There was a problem with the fetch operation:', error);
+                    articleLoadingSpinner.classList.add('hidden');
+                });
+        }
 
+        function showSubmissionModal() {
+            const modal = document.getElementById('submission-modal');
+            modal.classList.add('flex');
+            modal.classList.remove('hidden');
+        }
+        
+        document.addEventListener('DOMContentLoaded', function () {
             function hideSubmissionModal() {
                 const modal = document.getElementById('submission-modal');
                 modal.classList.remove('flex');
@@ -119,95 +208,6 @@
             //     fetchAndDisplayLeaderboard('private');
             // }
 
-            function fetchAndDisplaySubmissions() {
-                const apiEndpoint = '/my_submissions';
-                const articleLoadingSpinner = document.getElementById('articleLoadingSpinner');
-                articleLoadingSpinner.classList.remove('hidden');
-
-                const requestOptions = {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    }
-                };
-
-                fetch(apiEndpoint, requestOptions)
-                    .then(response => {
-                        if (!response.ok) {
-                            throw new Error('Network response was not ok');
-                        }
-                        return response.json();
-                    })
-                    .then(data => {
-                        const contentDiv = document.getElementById('content');
-                        const teamNameDiv = `
-                            <div class="flex items-center">
-                                <input type="text" name="team_name" id="team_name" class="mt-1 mb-1 block me-2" value="${data.response.team_name}">
-                                <button id="updateTeamNameButton" type="button" class="confirm text-white bg-green-600 hover:bg-green-800 focus:ring-4 focus:outline-none focus:ring-green-300 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center me-2">Update Team Name</button>
-                            </div>`;
-                        // console.log(data.response.submissions);
-                        // contentDiv.innerHTML = marked.parse(data.response.submission_text) + data.response.submissions;
-                        if (data.response.submissions && data.response.submissions.length > 0 && data.response.error.length == 0) {
-                            // Start building the table HTML
-                            let tableHTML = teamNameDiv;
-                            tableHTML += '<table border="1"><tr><th width: 17%;>Datetime</th><th style="width: 40%;">Submission ID</th><th style="width: 20%;">Score</th><th style="width: 8%;">Status</th><th style="width: 15%;">Error</th></tr>';
-
-                            // Iterate over each submission and add it to the table
-                            data.response.submissions.forEach(submission => {
-                                tableHTML += `<tr>
-                                    <td>${submission.datetime}</td>
-                                    <td>${submission.submission_id}</td>
-                                    <td>${submission.score}</td>
-                                    <td>${submission.status}</td>
-                                    <td>${submission.error_message}</td>
-                                  </tr>`;
-                            });
-
-                            // Close the table HTML and set it as the content
-                            tableHTML += '</table>';
-                            // add a text field which displays team name and a button to update team name
-                            contentDiv.innerHTML = marked.parse(data.response.submission_text) + tableHTML;
-                            document.getElementById('updateSelectedSubmissionsButton').addEventListener('click', function () {
-                                updateSelectedSubmissions();
-                            });
-                        } else {
-                            // Display message if there are no submissions
-                            contentDiv.innerHTML = teamNameDiv + marked.parse(data.response.submission_text) + marked.parse(data.response.error);
-                        }
-                        document.getElementById('updateTeamNameButton').addEventListener('click', function () {
-                            updateTeamName();
-                        });
-                        articleLoadingSpinner.classList.add('hidden');
-                    })
-                    .catch(error => {
-                        console.error('There was a problem with the fetch operation:', error);
-                        articleLoadingSpinner.classList.add('hidden');
-                    });
-            }
-
-            function fetchAndDisplaySubmissionInfo() {
-                const articleLoadingSpinner = document.getElementById('articleLoadingSpinner');
-                articleLoadingSpinner.classList.remove('hidden');
-                fetch('/submission_info')
-                    .then(response => {
-                        if (!response.ok) {
-                            throw new Error('Network response was not ok');
-                        }
-                        return response.json(); // Parse the JSON response
-                    })
-                    .then(data => {
-                        // Populate the 'content' div with the HTML from the response
-                        const contentDiv = document.getElementById('content');
-                        contentDiv.innerHTML = marked.parse(data.response);
-                        addTargetBlankToLinks();
-                        articleLoadingSpinner.classList.add('hidden');
-                    })
-                    .catch(error => {
-                        console.error('There has been a problem with your fetch operation:', error);
-                        articleLoadingSpinner.classList.add('hidden');
-                    });
-            }
-
             function fetchAndDisplayTeamInfo() {
                 const apiEndpoint = '/team_info';
                 const articleLoadingSpinner = document.getElementById('articleLoadingSpinner');
@@ -295,9 +295,6 @@
             const datasetLink = document.getElementById('dataset');
             // const publicLBLink = document.getElementById('public_lb');
             // const privateLBLink = document.getElementById('private_lb');
-            const newSubmission = document.getElementById('new_submission');
-            const mySubmissions = document.getElementById('my_submissions');
-            const submissionInfo = document.getElementById('submission_info');
             const rulesLink = document.getElementById('rules');
             const leaderBoardLink = document.getElementById('leaderboard');
 
@@ -326,19 +323,6 @@
             //     event.preventDefault(); // Prevent the default link behavior
             //     fetchAndDisplayPrivateLeaderboard(); // Fetch and display info on click
             // });
-
-            newSubmission.addEventListener('click', function (event) {
-                event.preventDefault(); // Prevent the default link behavior
-                showSubmissionModal(); // Fetch and display info on click
-            });
-            mySubmissions.addEventListener('click', function (event) {
-                event.preventDefault(); // Prevent the default link behavior
-                fetchAndDisplaySubmissions(); // Fetch and display info on click
-            });
-            submissionInfo.addEventListener('click', function (event) {
-                event.preventDefault(); // Prevent the default link behavior
-                fetchAndDisplaySubmissionInfo(); // Fetch and display info on click
-            });
             rulesLink.addEventListener('click', function (event) {
                 event.preventDefault(); // Prevent the default link behavior
                 fetchAndDisplayRules(); // Fetch and display info on click
@@ -370,6 +354,9 @@
 
         function checkOAuth() {
             var url = "/login_status";
+            const submissionInfo = document.getElementById('submission_info');
+            const mySubmissions = document.getElementById('my_submissions');
+            const newSubmission = document.getElementById('new_submission');
             makeApiRequest(url, function ({is_login, is_admin, is_registered, is_white_team}) {
                 const registerRemoveStyle = ["pointer-events-none", "text-gray-400", "cursor-not-allowed"];
                 const registerNewStyle = ["ext-gray-900", "hover:bg-gray-100"]
@@ -383,19 +370,33 @@
                 if (is_admin) {
                     document.getElementById("admin").classList.remove("hidden");
                 }
-                if (is_registered) {
-                    document.getElementById("submission_info").classList.remove(...registerRemoveStyle);
-                    document.getElementById("submission_info").classList.add(...registerNewStyle);
-                }
+                submissionInfo.addEventListener('click', function (event) {
+                    event.preventDefault(); // Prevent the default link behavior
+                    if (is_registered) {
+                        fetchAndDisplaySubmissionInfo(); // Fetch and display info on click
+                    } else {
+                        alert(`You need to register to access the "Submission Information."`)
+                    }
+                });
+                mySubmissions.addEventListener('click', function (event) {
+                    event.preventDefault(); // Prevent the default link behavior
+                    if (is_white_team) {
+                        fetchAndDisplaySubmissions(); // Fetch and display info on click
+                    } else {
+                        alert(`Access to the "Submit" will be granted after we manually review your registration. This process usually takes up to 24 hours.`)
+                    }
+                });
+                newSubmission.addEventListener('click', function (event) {
+                    event.preventDefault(); // Prevent the default link behavior
+                    if (is_white_team) {
+                        showSubmissionModal(); // Show the submission modal
+                    } else {
+                        alert(`Access to the "Submit" will be granted after we manually review your registration. This process usually takes up to 24 hours.`)
+                    }
+                });
                 if (is_login && !is_registered) {
                     document.getElementById("registerButton").style.display = "block";
                 }
-                if (is_white_team) {
-                    document.getElementById("my_submissions").classList.remove(...registerRemoveStyle);
-                    document.getElementById("my_submissions").classList.add(...registerNewStyle);
-                    document.getElementById("new_submission").classList.remove(...registerRemoveStyle);
-                    document.getElementById("new_submission").classList.add(...registerNewStyle);
-                }
             });
         }
         window.onload = checkOAuth;
@@ -485,17 +486,17 @@
                     <ul id="submissions-dropdown" class="py-2 space-y-2">
                         <li>
                             <a href="#" id="submission_info"
-                                class="flex items-center w-full p-2 transition duration-75 rounded-lg pl-11 group pointer-events-none text-gray-400 cursor-not-allowed">Submission
+                                class="flex items-center w-full p-2 transition duration-75 rounded-lg pl-11 group ext-gray-900 hover:bg-gray-100">Submission
                                 information</a>
                         </li>
                         <li>
                             <a href="#" id="my_submissions"
-                                class="flex items-center w-full p-2 transition duration-75 rounded-lg pl-11 group pointer-events-none text-gray-400 cursor-not-allowed">My
+                                class="flex items-center w-full p-2 transition duration-75 rounded-lg pl-11 group ext-gray-900 hover:bg-gray-100">My
                                 submissions</a>
                         </li>
                         <li>
                             <a href="#" id="new_submission"
-                                class="flex items-center w-full p-2 transition duration-75 rounded-lg pl-11 group pointer-events-none text-gray-400 cursor-not-allowed">New
+                                class="flex items-center w-full p-2 transition duration-75 rounded-lg pl-11 group ext-gray-900 hover:bg-gray-100">New
                                 submission</a>
                         </li>
                     </ul>