Ian's Burndown List

[Im2008]

Checklist (Team) [From Daksha]

• Database Functionality: Ensure that data used in the system is persistent and dynamic.
• Deployment Functional: Ensure backend and database are public and available for group updates.
• Make sure project meets the CPT requirements
• Tables made
• Working Model
• Working API
• ./scripts commands all work
• CRUD operations working for every individual

Checklist (Individual) [me]

• Fetch competition API
• Fix Authentication Token error with PythonURI
• Add Delete func in Competition inside of an Admin Panel on Backend.
• Create and Overview of Deployment Blog To Team
• Fixed Ruby Version Error (Minor)
• Fix Readability of personal Repo
• Add and fix navigation to different pages.

[Im2008]

Feature w/ CPT Requirements

Timer Status (started, or stopped) Fetch:

Procedure Steps

1. Initialize Repeated Execution:

   • Start a recurring interval (setInterval) that executes every 1000ms (1 second).

2. Perform API Request:

   • Send an asynchronous HTTP GET request to the competition timer API endpoint (/api/competition/timer).
   • Include credentials ('include') for authentication/session handling.

3. Process API Response:

   • Await the API response and parse it into JSON format.
   • If the response status is not OK (!response.ok), throw an error with the server-provided message.

4. Update Timer Display:

   • Extract time_remaining from the API response.
   • Modify the DOM element with ID timerDisplay to display the remaining time.

5. Evaluate Timer State:

   • If is_active is false, execute the following actions:
     • Stop the interval (clearInterval(timerInterval)).
     • Enable the "Start Timer" button (#startTimer).
     • Disable the "Stop Timer" button (#stopTimer).

6. Error Handling:

   • If any error occurs, log the error to the console.
   • Stop the interval (clearInterval(timerInterval)) to prevent redundant API calls.

Code Implementation

async function updateTimerDisplay() {
    timerInterval = setInterval(async () => {
        try {
            const response = await fetch(`${pythonURI}/api/competition/timer`, {
                method: 'GET',
                credentials: 'include'
            });

            const data = await response.json();
            if (!response.ok) throw new Error(data.message);

            document.getElementById('timerDisplay').textContent = 
                `Time: ${data.time_remaining}s`;

            if (!data.is_active) {
                clearInterval(timerInterval);
                document.getElementById('startTimer').disabled = false;
                document.getElementById('stopTimer').disabled = true;
            }

        } catch (error) {
            console.error('Error:', error);
            clearInterval(timerInterval);
        }
    }, 1000);
}

Requirements & Constraints

• The function must be executed in a browser environment.
• The API endpoint (/api/competition/timer) must be accessible and return a valid JSON response.
• The target DOM elements (#timerDisplay, #startTimer, #stopTimer) must exist before function execution.
• The function must handle network errors and API failures gracefully.
• setInterval must be cleared when is_active is false to prevent unnecessary API calls.

---

User Results

Objective

To fetch competition result data from an API and update the user interface dynamically.

Procedure Steps

1. Perform API Request:

   • Send an asynchronous HTTP GET request to the competition results API endpoint (/api/competition/times).
   • Include credentials ('include') for authentication/session handling.

2. Validate API Response:

   • Check if the response status is OK (response.ok).
   • If not, throw an error with the message 'Failed to fetch results'.

3. Process API Data:

   • Parse the JSON response and extract the list of result entries.
   • Select the target table body element (#resultsBody).
   • Clear any existing content in the table body.

4. Populate Table with Results:

   • Iterate through each entry in the response data.
   • Create a new table row (<tr>) for each entry.
   • Insert the following data into the corresponding cells (<td>):
     • User's Name (users_name) or 'Unknown' if not available.
     • Time Taken (time_taken) or '0' if not available.
     • Drawn Word (drawn_word) or 'Unknown' if not available.

5. Error Handling:

   • If any error occurs during execution:
     • Log the error message to the console.
     • Display an alert to inform the user that the fetch operation failed.

async function fetchResults() {
    try {
        const response = await fetch(`${pythonURI}/api/competition/times`, {
            credentials: 'include'
        });

        if (!response.ok) {
            throw new Error('Failed to fetch results');
        }

        const entries = await response.json();
        const tbody = document.getElementById('resultsBody');
        tbody.innerHTML = '';

        entries.forEach(entry => {
            const row = tbody.insertRow();
            row.insertCell().textContent = entry.users_name || 'Unknown'; // Changed from profile_name
            row.insertCell().textContent = entry.time_taken || '0';
            row.insertCell().textContent = entry.drawn_word || 'Unknown'; // Changed from word_drawn
        });

    } catch (error) {
        console.error('Error:', error);
        alert('Failed to fetch results: ' + error.message);
    }
}

// Initial fetch of results
document.addEventListener('DOMContentLoaded', fetchResults);

Requirements & Constraints

• The function must be executed in a browser environment.
• The API endpoint (/api/competition/times) must be accessible and return a valid JSON response.
• The target DOM element (#resultsBody) must exist before function execution.
• The function must handle network errors and API failures gracefully.
• Data fields (users_name, time_taken, drawn_word) must be validated to prevent rendering issues.

Admin Panel, Delete Records & restore:

Objective

To display and manage competition data in a structured table, allowing admins to delete entries.

Procedure Steps

1. Template Inheritance & Styling

• Extend the base template (layouts/base.html).
• Apply CSS styles to improve the UI, including:
  • White background with padding and shadow for the container.
  • Speed factor color coding based on performance.

2. Render Competition Data in a Table

• Create a responsive HTML table (#competitionTable).
• Populate rows dynamically using competition_data.
• Display the following fields:
  • ID
  • Player Name (users_name)
  • Drawing Word (drawn_word)
  • Timer Duration (timer_duration)
  • Time Taken (time_taken)
  • Speed Factor (timer_duration / time_taken)
  • Date Created (date_created)
• Conditionally display the Delete button for Admin users.

3. Admin-Only Delete Functionality

• If the user role is 'Admin', enable the Delete button.
• Use JavaScript to:
  • Attach click events to .delete-btn.
  • Confirm deletion before sending an API request.
  • Send a DELETE request to /api/competition/times with the entry ID.
  • Reload the page upon success or show an error message upon failure.

4. Initialize DataTable (for Enhanced Table Management)

• Use jQuery DataTables to:
  • Enable sorting (default: by speed factor descending).
  • Set pagination (pageLength: 25).

5. Error Handling

• If API deletion fails:
  • Log the error to the console.
  • Show an alert to notify the user.
• If the request is successful:
  • Display a success message.
  • Refresh the page to reflect changes.

{% extends "layouts/base.html" %}

{% block body %}
<style>
.container {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.table {
    background: white;
}

.speed-factor {
    font-weight: bold;
    color: #2196F3;
}

.speed-high {
    color: #4CAF50;
}

.speed-medium {
    color: #FFC107;
}

.speed-low {
    color: #FF5722;
}
</style>

<div class="container">
    <h1 class="mb-4">Competition Management</h1>
    <table class="table table-striped" id="competitionTable">
        <thead>
            <tr>
                <th>ID</th>
                <th>Player</th>
                <th>Drawing Word</th>
                <th>Timer Duration</th>
                <th>Time Taken</th>
                <th>Speed Factor</th>
                <th>Date Created</th>
                {% if current_user.role == 'Admin' %}
                <th>Actions</th>
                {% endif %}
            </tr>
        </thead>
        <tbody>
            {% for entry in competition_data %}
            <tr>
                <td>{{ entry.id }}</td>
                <td>{{ entry.users_name }}</td>
                <td>{{ entry.drawn_word }}</td>
                <td>{{ entry.timer_duration }}s</td>
                <td>{{ entry.time_taken }}s</td>
                <td class="speed-factor">{{ "%.2f"|format(entry.timer_duration/entry.time_taken) }}x</td>
                <td>{{ entry.date_created }}</td>
                {% if current_user.role == 'Admin' %}
                <td>
                    <button class="btn btn-danger delete-btn" data-id="{{ entry.id }}">
                        Delete
                    </button>
                </td>
                {% endif %}
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

{% if current_user.role == 'Admin' %}
<script>
$(document).ready(function() {
    // Initialize DataTable
    $("#competitionTable").DataTable({
        order: [[5, 'desc']], // Sort by speed factor by default
        pageLength: 25
    });

    // Handle delete button clicks
    $(document).on("click", ".delete-btn", function() {
        var id = $(this).data("id");
        
        if (!confirm("Are you sure you want to delete this competition entry?")) {
            return;
        }

        fetch("/api/competition/times", {
            method: "DELETE",
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ id: id })
        })
        .then(response => response.json())
        .then(data => {
            if (data.message) {
                alert(data.message);
                location.reload();
            } else {
                alert(data.error || "Operation failed");
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert("Failed to process request");
        });
    });
});
</script>
{% endif %}
{% endblock %}

{% block background %}
{% endblock %}

Requirements & Constraints

• Must be used within a Flask/Jinja templating environment.
• The competition_data variable must be populated before rendering.
• The current_user.role variable must be available to determine Admin access.
• JavaScript/jQuery must be enabled for table sorting and delete functionality.
• The API endpoint /api/competition/times must support DELETE requests with an entry ID.