usage_dashboard.html

{% extends "/base.html" %}
{% set active_page = "profile" %}
{% set active_link = "admin" %}

{% block content %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
<script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<style>
    .ct-bar {
        stroke: #aae266 !important;
    }
    .ct-line, .ct-point {
        stroke: #3AB0D5 !important;
    }
    .modal-dialog .btn-secondary {
        color: #505050;
    }
    .modal-dialog .btn-secondary:hover {
        color: #000;
    }
    .modal-body {
        max-height: calc(100vh - 210px);
        overflow-y: auto;
    }
    .modal-dialog .modal-content {
        min-width: 900px;
    }
</style>
<div class="container">
    <div class="col-md-12" style="margin-top:30px;">
        <h1><strong>{{ _('Usage Dashboard') }}</strong></h1>

        <label for="timeframe-select">Timeframe:</label>
        <select name="timeframe-select" id="timeframe-select" onchange="redirect()">
            <option disabled value> Select a timeframe </option>
            <option value="30">1 Month</option>
            <option value="90">3 Months</option>
            <option value="183">6 Months</option>
            <option value="365">1 Year</option>
            <option value="all">All Time</option>
        </select>
    </div>
</div>
<div class="container">
    <div class="col-md-12">
        <h2 id ="large-header">{{ _('Platform Totals — ')}}</h2>
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th></th>
                        <th><p class="table-header"><strong></strong></p></th>
                    </tr>
                </thead>
                <tbody>
                    {% for stat, value in stats.items() %}
                    <tr>
                        <th><p class='row-heading'><strong>{{ stat | replace('_', ' ') }}</strong></p></th>
                        <td>
                            <p>
                                {% if value|length and value[0][1] != None %}
                                    {% set ids = value|map(attribute='1')|join(',') %}
                                    {% set count = ids.split(",") | length %}
                                    <a href="#" class="stat-link" data-toggle="modal" data-target="#statsModal" data-ids="{{ ids }}" data-names="{{ value|map(attribute='2')|join(',') }}" data-owner-names="{{ value|map(attribute='4')|join(',') }}" data-owner-emails="{{ value|map(attribute='5')|join(',') }}" data-last-submissions="{{ value|map(attribute='6')|join(',') }}" data-project-published="{{ value|map(attribute='7')|join(',') }}">{{ count }}</a>
                                {% elif value|length %}
                                    {{ value[0][0] }}
                                {% else %}
                                    0
                                {% endif %}
                            </p>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>

            <!-- Modal -->
            <div class="modal fade" id="statsModal" tabindex="-1" role="dialog" aria-labelledby="statsDetailLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h3 class="modal-title" id="statsDetailLabel">Projects Using: <span id='modal-subject'></span></h3>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <table id="project-table" class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>Project ID</th>
                                        <th>Project Name</th>
                                        <th>Owner</th>
                                        <th>Last Submission Date</th>
                                        <th>Published</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- Rows will be added dynamically -->
                                </tbody>
                            </table>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End of Modal -->
    </div>
</div>
<script>

function getFormatedStringFromDays(_days) {
    let text_map = { '30': 'Last Month', '90': 'Last 3 Months', '183': 'Last 6 Months', '365': 'Last Year', 'all': 'All Time' }
    if (_days in text_map) return text_map[_days]

    // calculate estimated date
    let numDays = parseInt(_days)
    let years = Math.floor(numDays / 365);
    let months = Math.floor(numDays % 365 / 30.416667);
    let days = Math.floor(numDays % 365 % 30.416667);

    let res = []
    if (years > 0) res.push(years + " Year" + (years > 1 ? "s" : ""))
    if (months > 0) res.push(months + " Month" + (months > 1 ? "s" : ""))
    if (days > 0) res.push(days + " Day" + (days > 1 ? "s" : ""))
    return 'Last ' + res.join(', ');
}
let timeframe_select = document.getElementById('timeframe-select')

$(document).ready(function() {
    // set select input value
    const urlParams = new URLSearchParams(window.location.search);
    const days = urlParams.get('days').toString()
    timeframe_select.value = { '30': '30', '90': '90', '183': '183', '365': '365', 'all': 'all' }[days] || null;

    // set headers
    const date_text = getFormatedStringFromDays(days)
    document.getElementsByClassName('table-header')[0].textContent = date_text;
    document.getElementById('large-header').textContent += date_text;

    // Initialize count stats.
    $('.stat-link').on('click', function(){
        // Set modal title.
        const title = $(this).closest('tr').find('.row-heading').text();
        $('#modal-subject').text(title);

        // Get data for table rows.
        const ids = `${$(this).data('ids')}`.split(',');
        const names = `${$(this).data('names')}`.split(',');
        const owner_names = `${$(this).data('owner-names')}`.split(',');
        const owner_emails = `${$(this).data('owner-emails')}`.split(',');
        const last_submissions = `${$(this).data('last-submissions')}`.split(',');
        const project_published = `${$(this).data('project-published')}`.split(',');
        const table = document.getElementById('project-table').getElementsByTagName('tbody')[0];

        const formattedSubmissions = last_submissions.map(dateString => {
            dateString = dateString.trim();

            return (dateString === "None" || dateString === "") ? "-" : new Date(dateString).toLocaleDateString('en-US', {
                year: 'numeric',
                month: 'numeric',
                day: 'numeric'
            });
        });

        // Clear the table before adding new rows.
        table.innerHTML = '';
        for (let i = 0; i < ids.length; i++) {
            const row = table.insertRow();
            const cell1 = row.insertCell(0);
            const cell2 = row.insertCell(1);
            const cell3 = row.insertCell(2);
            const cell4 = row.insertCell(3);
            const cell5 = row.insertCell(4);
            cell1.textContent = ids[i].trim();
            cell2.innerHTML = `<a href="/projectid/${ids[i].trim()}" target="_blank">${names[i]}</a>`;
            cell3.innerHTML = `<span title="${owner_emails[i]}">${owner_names[i]}</span>`;
            cell4.innerHTML = `<span title="${formattedSubmissions[i]}">${formattedSubmissions[i]}</span>`;
            cell5.innerHTML = `<span title="${project_published[i]}">${project_published[i]}</span>`;
        }
    });
})

function redirect() {
    let url = window.location.origin + '/admin/usage_dashboard/?days=' + timeframe_select.value
    window.location.replace(url)
}
</script>
{% endblock %}