first

2025-08-21 11:31:16 +00:00 · 2025-02-12 01:05:18 +07:00
commit c867c9e730
9 changed files with 604 additions and 0 deletions
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -0,0 +1,116 @@
+$(document).ready(function () {
+    $('#upload-form').submit(function (event) {
+        event.preventDefault();
+        $('#error-message').text('');
+        $('.loading-spinner').show();
+
+        var response = grecaptcha.getResponse();
+        if (!response) {
+            $('.loading-spinner').hide();
+            alert("Please complete the reCAPTCHA verification.");
+            return;
+        }
+
+        var formData = new FormData(this);
+        formData.append('csrf_token', $('#csrf_token').val());
+
+        $.ajax({
+            url: '/',
+            type: 'POST',
+            data: formData,
+            contentType: false,
+            processData: false,
+            beforeSend: function (xhr) {
+                xhr.setRequestHeader('X-CSRFToken', $('#csrf_token').val());
+            },
+            success: function (response) {
+                $('.loading-spinner').hide();
+
+                if (response.error) {
+                    $('#error-message').text(response.error);
+                } else {
+                    let scoreSectionHtml = '';
+                    let resultSectionHtml = '';
+
+                    if (response.score !== null) {
+                        scoreSectionHtml = `
+                            <div class="score-container" id="score-section">
+                                <canvas id="scoreChart"></canvas>
+                                <div>
+                                    <p class="score-text">Your CV compatibility score is <span id="score-text">${response.score}</span>/100</p>
+                                </div>
+                            </div>`;
+                    }
+
+                    if (response.summary) {
+                        resultSectionHtml = `
+                            <div class="mt-4" id="result-section">
+                                <h4>Summary:</h4>
+                                <div id="summary-text">${response.summary}</div>
+                                <button class="btn btn-secondary" id="clear-form">Upload Another</button>
+                            </div>`;
+                    }
+
+                    // Remove previous sections before inserting new ones
+                    $('#score-section, #result-section').remove();
+
+                    // Append score section first, then summary section
+                    if (scoreSectionHtml) {
+                        $('#upload-form').after(scoreSectionHtml);
+                        updateScoreChart(response.score);
+                    }
+                    if (resultSectionHtml) {
+                        $('#score-section').after(resultSectionHtml); // Ensure summary is BELOW score
+                    }
+
+                    // Attach event listener to new "Upload Another" button
+                    $('#clear-form').click(function () {
+                        $('#score-section, #result-section').remove();
+                        $('#upload-form')[0].reset();
+                        grecaptcha.reset(); // Reset reCAPTCHA
+                    });
+                }
+            },
+            error: function (xhr) {
+                $('.loading-spinner').hide();
+                let errorMessage = 'An error occurred. Please try again.';
+                if (xhr.responseJSON && xhr.responseJSON.error) {
+                    errorMessage = xhr.responseJSON.error;
+                }
+                $('#error-message').text(errorMessage);
+            }
+        });
+    });
+});
+
+function updateScoreChart(score) {
+    let ctx = document.getElementById('scoreChart').getContext('2d');
+
+    if (window.scoreChartInstance) {
+        window.scoreChartInstance.destroy();
+    }
+
+    // Set color based on score
+    let scoreColor = "#4caf50"; // Green (default)
+    if (score < 75) scoreColor = "#ffeb3b"; // Yellow (below 75)
+    if (score < 50) scoreColor = "#f44336"; // Red (below 50)
+
+    window.scoreChartInstance = new Chart(ctx, {
+        type: 'doughnut',
+        data: {
+            labels: ["Score", "Remaining"],
+            datasets: [{
+                data: [score, 100 - score],
+                backgroundColor: [scoreColor, "#e0e0e0"],
+                borderWidth: 1
+            }]
+        },
+        options: {
+            responsive: false,
+            cutout: '60%',
+            plugins: {
+                legend: { display: false }
+            }
+        }
+    });
+}