admin.html

{% extends "_admin_base.html" %}

{% load i18n coderdojochi_extras %}

{% block title %}We All Code Admin{% endblock %}

{% block body_class %}page-cdc-admin{% endblock %}

{% block extra_head %}
<style>
    col.success { background-color: #dff0d8; }
    col.error{ background-color: #f2dede; }
    col.warning { background-color: #fcf8e3; }
    col.info { background-color: #d9edf7; }
    .table tbody > tr > td.vert-align { vertical-align: middle; }
</style>

<!-- Google Charts -->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    google.charts.load('current', {packages: ['corechart', 'bar']});
    google.charts.setOnLoadCallback(drawBasic);
    function drawBasic() {
        var gender_data = google.visualization.arrayToDataTable([
          ['Gender', 'Students'],
          {% for key, value in gender_count %}
          ['{{ key.title }}', {{ value }}],
          {% endfor %}
          ]);

        var gender_options = {
            legend: {
                position: 'bottom',
            }
        };

        var gender_chart = new google.visualization.PieChart(document.getElementById('gender_chart'));
        gender_chart.draw(gender_data, gender_options);

        var age_data = google.visualization.arrayToDataTable([
          ['Age', 'Students'],
          {% for key, value in age_count %}
          ['{{ key }}', {{ value }}],
          {% endfor %}
          ]);

        // var age_options = {
        //   legend: {
        //     position: 'bottom',
        // }

        var age_options = {
            // chart: {
            //   title: 'Genders of Registered Students',
            // },
            // bars: 'horizontal', // Required for Material Bar Charts.
            // hAxis: { format: 'short' },
            legend: {
                position: 'none'
            },
            annotations: {
                alwaysOutside: true,
            },
        };

        // var age_chart = new google.visualization.BarChart(document.getElementById('age_chart'));
        // age_chart.draw(age_data, age_options);

        var age_chart = new google.charts.Bar(document.getElementById('age_chart'));
        age_chart.draw(age_data, age_options);
    };
</script>
{% endblock %}

{% block topnav %}
<nav class="navbar navbar-default navbar-static-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="{% url 'cdc-admin' %}">We All Code Admin</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a class="pull-right" href="{% url 'admin:index' %}">Django Admin</a></li>
            </ul>
        </div>
    </div>
</nav>
{% endblock %}

{% block content %}
<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="col-xs-12 panel panel-default">
                <h3 class="title">Average Age: <strong>{{ average_age }}</strong></h3>
                <div id="age_chart"></div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="col-xs-12 panel panel-default">
                <h3 class="title">Genders:</h3>
                <div id="gender_chart" style="height: 200px;"></div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="col-xs-12 panel panel-default">
                <h3 class="title">Total Attendance:</h3>
                <h2 class="title">{{ total_checked_in_orders_count }} of {{ total_past_orders_count }}</h2>
                <div class="progress">
                    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="{% widthratio total_checked_in_orders_count total_past_orders_count 100 %}" aria-valuemin="0" aria-valuemax="100" style="width: {% widthratio total_checked_in_orders_count total_past_orders_count 100 %}%">
                        {% widthratio total_checked_in_orders_count total_past_orders_count 100 %}%
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% load admin_urls %}
<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <h2 class="title text-left">Classes <span class="badge">{{ sessions|length }}</span></h2>
        </div>
        <div class="col-sm-6 text-right h2">
            <a href="{% url 'admin:coderdojochi_session_add' %}" class="button" role="button">Create New Session</a>
        </div>
    </div>

    {% if sessions %}
    <table class="table table-striped">
        <colgroup>
            <col>
            <col>
            <col>
            <col>
            <col>
            <col>
            <col span="3" class="info">
            <col>
            <col span="3" class="info">
            <col>
        </colgroup>
        <thead>
            <tr>
                <th rowspan="2" class="col-sm-2">Date</th>
                <th rowspan="2" class="col-sm-1 text-right">S. Time</th>
                <th rowspan="2" class="col-sm-1 text-right">E. Time</th>
                <th rowspan="2" class="col-sm-3 hidden-xs hidden-sm">Course</th>
                <th rowspan="2" class="col-sm-3 hidden-xs hidden-sm">Instructor</th>
                <th rowspan="2" class="col-sm-3 hidden-xs hidden-sm">Location</th>
                <th rowspan="2" class="hidden-xs hidden-sm"></th>
                <th colspan="3" class="text-center">Students</th>
                <th rowspan="2" class=""></th>
                <th colspan="3" class="text-center">Volunteers</th>
                <th rowspan="2" class=""></th>
            </tr>
            <tr>
                <th class="text-center"><abbr title="Attended">A</abbr></th>
                <th class="text-center"><abbr title="Orders">O</abbr></th>
                <th class="text-center"><abbr title="Capacity">C</abbr></th>

                <th class="text-center"><abbr title="Attended">A</abbr></th>
                <th class="text-center"><abbr title="Orders">O</abbr></th>
                <th class="text-center"><abbr title="Capacity">C</abbr></th>
            </tr>
        </thead>
        <tbody id="sessions-tbody">
            {% for session in sessions %}
            <tr class="
                {% if session.is_active == False %}
                    danger
                {% else %}
                    {% if session.is_future == 1 %}
                    success
                    {% endif %}
                {% endif %}
                "
            >
                <td>{{ session.start_date|date:"M j, Y" }}</td>
                <td class="text-right">{{ session.start_date|time:"H:i" }}</td>
                <td class="text-right">{{ session.end_date|time:"H:i" }}</td>
                <td class="hidden-xs hidden-sm"><a href="{{ session.get_absolute_url }}">{{ session.course.title }}</a></td>
                <td>{{ session.instructor }}</td>
                <td class="hidden-xs hidden-sm">{{ session.location.name }}</td>
                <td class="text-center hidden-xs hidden-sm">
                    {% if session.announced_date_guardians|yesno:'yes,no' == 'yes' %}
                        <i class="fa fa-calendar-check-o" title="{{ session.announced_date_guardians }}" aria-hidden="true"></i>
                    {% endif %}
                </td>
                <td class="text-right">
                    {% if not session.external_enrollment_url %}
                        {{ session.num_attended|default:'-' }}
                    {% else %}
                        &times;
                    {% endif %}
                </td>
                <td class="text-right">
                    {% if not session.external_enrollment_url %}
                        {{ session.num_orders|default:'-' }}
                    {% else %}
                        &times;
                    {% endif %}
                </td>
                <td class="text-right">
                    {% if not session.external_enrollment_url %}
                        {{ session.capacity|default:'-' }}
                    {% else %}
                        &times;
                    {% endif %}
                </td>
                <td class="text-center">
                    {% if not session.external_enrollment_url %}
                        <a href="{% url 'student-check-in' session.id %}"><span class="glyphicon glyphicon-check"></span></a>
                    {% else %}
                        &times;
                    {% endif %}
                </td>
                <td class="text-center">
                    {% if not session.external_enrollment_url %}
                        {{ session.get_checked_in_mentor_orders|length|default:'-' }}
                    {% else %}
                        &times;
                    {% endif %}
                </td>
                <td class="text-center">
                    {% if not session.external_enrollment_url %}
                        {{ session.get_mentor_orders|length|default:'-' }}
                    {% else %}
                        &times;
                    {% endif %}
                </td>
                <td class="text-center">
                    {% if not session.external_enrollment_url %}
                        {{ session.mentor_capacity|default:'-' }}
                    {% else %}
                        &times;
                    {% endif %}
                </td>
                <td>
                    {% if not session.external_enrollment_url %}
                        <a href="{% url 'mentor-check-in' session.id %}"><span class="glyphicon glyphicon-check"></span></a>
                    {% else %}
                        &times;
                    {% endif %}
                </td>
            </tr>
            {% endfor %}
        </tbody>
        {% if has_more_sessions %}
        <tfoot id="load-more-section">
            <tr>
                <td colspan="100" class="text-center">
                    <button id="load-more-btn" class="button" type="button">Load More Classes</button>
                    <div id="loading-indicator" style="display: none;">Loading...</div>
                </td>
            </tr>
        </tfoot>
        {% endif %}
    </table>
    {% else %}
    <p>No past sessions.</p>
    {% endif %}
</div>

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <h2 class="title text-left">Meetings <span class="badge">{{ meetings|length }}</span></h2>
        </div>
        <div class="col-sm-6 text-right h2">
            <a href="{% url 'admin:coderdojochi_meeting_add' %}" class="button" role="button">Create New Meeting</a>
        </div>
    </div>

    {% if meetings %}
    <table class="table table-striped">
        <colgroup>
            <col>
            <col>
            <col>
            <col>
            <col>
            <col>
            <col span="2" class="info">
            <col>
        </colgroup>
        <thead>
            <tr>
                <th rowspan="2" class="col-sm-2">Date</th>
                <th rowspan="2" class="col-sm-1 text-right">S. Time</th>
                <th rowspan="2" class="col-sm-1 text-right">E. Time</th>
                <th rowspan="2" class="col-sm-3 hidden-xs hidden-sm">Meeting Name</th>
                <th rowspan="2" class="col-sm-4 hidden-xs hidden-sm">Location</th>
                <th rowspan="2" class="hidden-xs hidden-sm">Annon.</th>
                <th colspan="2" class="col-sm-1 text-center">Volunteers</th>
                <th rowspan="2" class=""></th>
            </tr>
            <tr>
                <th class="text-center"><abbr title="Attended">A</abbr></th>
                <th class="text-center"><abbr title="Orders">O</abbr></th>
            </tr>
        </thead>
        <tbody>
            {% for meeting in meetings %}
            <tr class="
                {% if meeting.is_active == False %}
                    danger
                {% else %}
                    {% if meeting.is_future == 1 %}
                    success
                    {% endif %}
                {% endif %}
                {% if forloop.counter > 5 %}
                    collapse meeting-collapse
                {% endif %}
                "
            >
                <td>{{ meeting.start_date|date:"M j, Y" }}</td>
                <td class="text-right">{{ meeting.start_date|time:"H:i" }}</td>
                <td class="text-right">{{ meeting.end_date|time:"H:i" }}</td>
                <td><a href="{{ meeting.get_absolute_url }}">{{ meeting.meeting_type.title }}</a></td>
                <td>{{ meeting.location.name }}</td>
                <td class="text-center">
                    {% if meeting.announced_date|yesno:'yes,no' == 'yes' %}
                        <i class="fa fa-calendar-check-o" title="{{ meeting.announced_date }}" aria-hidden="true"></i>
                    {% endif %}
                </td>
                <td class="text-right">
                    {% if not meeting.external_enrollment_url %}
                        {{ meeting.num_attended|default:'-' }}
                    {% else %}
                        &times;
                    {% endif %}
                </td>
                <td class="text-right">
                    {% if not meeting.external_enrollment_url %}
                        {{ meeting.num_orders|default:'-' }}
                    {% else %}
                        &times;
                    {% endif %}
                </td>
                <td class="text-center">
                    {% if not meeting.external_enrollment_url %}
                        <a href="{% url 'meeting-check-in' meeting.id %}"><span class="glyphicon glyphicon-check"></span></a>
                    {% endif %}
                </td>
            </tr>
            {% endfor %}
        </tbody>
        {% if meetings.count > 5 %}
        <tfoot>
            <tr>
                <td colspan="100" class="text-center">
                    <button class="button" type="button" data-toggle="collapse" data-target=".meeting-collapse">Show/Hide</button>
                </td>
            </tr>
        </tfoot>
        {% endif %}
    </table>
    {% else %}
    <p>No upcoming meetings.</p>
    {% endif %}
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const loadMoreBtn = document.getElementById('load-more-btn');
    const loadingIndicator = document.getElementById('loading-indicator');
    const sessionTable = document.getElementById('sessions-tbody');
    let currentOffset = 5; // Start after the initial 5 sessions
    
    if (loadMoreBtn && sessionTable) {
        loadMoreBtn.addEventListener('click', function() {
            // Show loading indicator and hide button
            loadMoreBtn.style.display = 'none';
            loadingIndicator.style.display = 'block';
            
            // Make AJAX request
            fetch(`/admin/load-more-sessions/?offset=${currentOffset}&limit=10`)
                .then(response => response.json())
                .then(data => {
                    if (data.error) {
                        alert('Error loading more sessions: ' + data.error);
                        return;
                    }
                    
                    // Append new session rows
                    sessionTable.insertAdjacentHTML('beforeend', data.html);
                    
                    // Update offset for next request
                    currentOffset = data.next_offset;
                    
                    // Hide loading indicator
                    loadingIndicator.style.display = 'none';
                    
                    // Show button again if there are more sessions
                    if (data.has_more) {
                        loadMoreBtn.style.display = 'block';
                    } else {
                        // Replace button text to indicate no more sessions
                        const loadMoreSection = document.getElementById('load-more-section');
                        loadMoreSection.innerHTML = '<tr><td colspan="100" class="text-center text-muted">All sessions from the last 365 days have been loaded</td></tr>';
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('Error loading more sessions. Please try again.');
                    // Reset UI state
                    loadingIndicator.style.display = 'none';
                    loadMoreBtn.style.display = 'block';
                });
        });
    }
});
</script>

{% endblock %}

{% block footer_base %}{% endblock %}