session_check_in.html

{% extends "_admin_base.html" %}

{% load i18n humanize coderdojochi_extras %}

{% block title %}Student Check In - We All Code{% 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; }

        /* to override bootstrap*/
        .table > tbody > tr > td { vertical-align: middle; }

        /* Custom styles */
        .student-name,
        .parent-name {
            min-width: 150px;
            width: 10%;
        }

        .parent-email {
            min-width: 150px;
            width: 10%;
        }

        .parent-phone {
            min-width: 100px;
            width: 10%;
        }

        .student-school {
            min-width: 200px;
            width: 10%;
        }

        .cancellation-reason {
            min-width: 150px;
            width: 15%;
            max-width: 200px;
        }

        .order-date {}

        .student-gender {
            width: 50px;
            text-align: center;
        }

        .order-num,
        .student-age,
        .num-attended,
        .num-missed {
            box-sizing: border-box;
            width: 50px;
            text-align: right;
        }
    </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',
          },
          // pieSliceText: 'label',
          // title: 'Genders of Registered Students',
          // pieStartAngle: 100,
        };

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

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

        // var age_options = {
        //   legend: {
        //     position: 'bottom',
        //   },
        //   pieSliceText: 'label',
        //   title: 'Genders of Registered Students',
        //   // pieStartAngle: 100,
        // };

        // var age_options = {
          // title: 'Population of Largest U.S. Cities',
          // chartArea: {width: '50%'},
          // hAxis: {
          //   title: 'Total Population',
          //   minValue: 0
          // },
          // vAxis: {
          //   title: 'City'
          // }
        // };

        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 %}

    {% if active_orders.count %}
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-4">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <div class="row">
                            <div class="col-sm-6">Student Age</div>
                            <div class="col-sm-6 text-right">Average Age: <strong>{{ average_age }}</strong></div>
                        </div>
                    </div>
                    <div class="panel-body">
                        <div id="age_chart"></div>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="panel panel-default">
                    <div class="panel-heading">Student Gender</div>
                    <div class="panel-body">
                        <div id="gender_chart"></div>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <div class="row">
                            <div class="col-sm-6">Attendance</div>
                            <div class="col-sm-6 text-right">{{ checked_in_orders.count }} of {{ active_orders.count }}</div>
                        </div>
                    </div>
                    <div class="panel-body">
                        <h4 class="title text-center"></h4>
                        <div class="progress">
                            <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="{% widthratio checked_in_orders.count active_orders.count 100 %}" aria-valuemin="0" aria-valuemax="100" style="width: {% widthratio checked_in_orders.count active_orders.count 100 %}%">
                                {% widthratio checked_in_orders.count active_orders.count 100 %}%
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}

    {% if active_orders.count %}
    <div class="container-fluid">
        <div class="row">

        </div>
    </div>
    {% endif %}

    {% if active_orders.count %}
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
                {% if active_session %}
                    <h2 class="title">Attending Students <span class="badge">{{ active_orders.count }}</span></h2>
                {% else %}
                    <h2 class="title">Attended Students <span class="badge">{{ active_orders.count }}</span></h2>
                {% endif %}

                {% if active_orders.count %}
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th class="order-num"></th>
                                <th class="student-name">Student</th>
                                <th class="student-age">Age</th>
                                <th class="student-gender">Gender</th>
                                <th class="parent-name">Guardian</th>
                                <th class="parent-email">Parent Email</th>
                                <th class="parent-phone">Parent Phone</th>
                                <th class="student-school">School</th>
                                <th class="order-date">{% if not active_session %}Checkin Date{% endif %}</th>
                                <th class="text-right num-attended"><abbr title="Number Attended">#A</abbr></th>
                                <th class="text-right num-missed"><abbr title="Number Missed">#M</abbr></th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for order in active_orders %}
                            <tr class="{% if order.check_in %}success{% endif %}">
                                <form method="post" action=".">
                                    {% csrf_token %}
                                    <input type="hidden" name="order_id" value="{{ order.id }}">
                                    <td class="vert-align">{{ forloop.counter|stringformat:"02d" }}</td>
                                    <td class="vert-align">
                                      <strong>{{ order.student.first_name }}</strong> {{ order.student.last_name }}
                                    </td>
                                    <td class="text-right vert-align">{{ order.student | student_age:session.start_date }}</td>
                                    <td class="student-gender">{{ order.student.get_clean_gender_short | upper }}</td>
                                    <td>
                                        {% if active_session %}
                                            <input type="text" name="order_alternate_guardian" class="form-control" value="{% if order.alternate_guardian %}{{ order.alternate_guardian }}{% else %}{{ order.guardian.full_name }}{% endif %}">
                                        {% else %}
                                            {% if order.alternate_guardian %}
                                                {{ order.alternate_guardian }}
                                            {% else %}
                                                {{ order.guardian.full_name }}
                                            {% endif %}
                                        {% endif %}
                                    </td>
                                    <td>{{ order.guardian.email }}</td>
                                    <td>{{ order.guardian.phone | phone_number }}</td>
                                    <td>{{ order.student.school_name }}</td>
                                    <td>
                                        {% if active_session %}
                                            {% if not order.check_in %}
                                                <button class="button small">Check In</button>
                                            {% else %}
                                                <button class="button tertiary small">Undo</button>
                                            {% endif %}
                                        {% else %}
                                            {{ order.check_in | date:"M j, g:i A" }}
                                        {% endif %}
                                    </td>
                                    <td class="text-right vert-align">{{ order.num_attended }}</td>
                                    <td class="text-right vert-align {% if order.num_missed >= 3 %}danger{% endif %}">{{ order.num_missed }}</td>
                                </form>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                {% else %}
                    <p>No students registered.</p>
                {% endif %}
            </div>
        </div>
    </div>
    {% endif %}

    {% if active_session != True %}
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <h2 class="title">No Shows <span class="badge">{{ no_show_orders.count }}</span></h2>
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th class="order-num"></th>
                            <th class="student-name">Student</th>
                            <th class="student-age">Age</th>
                            <th class="student-gender">Gender</th>
                            <th class="parent-name">Guardian</th>
                            <th class="parent-email">Parent Email</th>
                            <th class="parent-phone">Parent Phone</th>
                            <th class="student-school">School</th>
                            <th class="order-date">Last Update Date</th>
                            <th class="cancellation-reason">Reason</th>
                            <th class="text-right num-attended"><abbr title="Number Attended">#A</abbr></th>
                            <th class="text-right num-missed"><abbr title="Number Missed">#M</abbr></th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for order in no_show_orders %}
                        <tr class="{% if order.check_in %}success{% endif %}">
                            <td class="vert-align">{{ forloop.counter|stringformat:"02d" }}</td>
                            <td class="vert-align"><strong>{{ order.student.first_name }}</strong> {{ order.student.last_name }}</td>
                            <td class="text-right vert-align">{{ order.student | student_age:session.start_date }}</td>
                            <td class="student-gender">{{ order.student.get_clean_gender_short | upper }}</td>
                            <td>{% if order.alternate_guardian %}{{ order.alternate_guardian }}{% else %}{{ order.guardian.full_name }}{% endif %}</td>
                            <td>{{ order.guardian.email }}</td>
                            <td>{{ order.guardian.phone | phone_number }}</td>
                            <td>{{ order.student.school_name }}</td>
                            <td>{{ order.updated_at | date:"M j, g:i A" }}</td>
                            <td class="cancellation-reason">
                                {% if order.cancellation_reason %}
                                    {{ order.cancellation_reason|truncatewords:10 }}
                                {% else %}
                                    <em>No reason given</em>
                                {% endif %}
                            </td>
                            <td class="text-right vert-align">{{ order.num_attended }}</td>
                            <td class="text-right vert-align {% if order.num_missed >= 3 %}danger{% endif %}">{{ order.num_missed }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    {% endif %}

    {% if inactive_orders.count %}
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <h2 class="title">Cancelled Tickets <span class="badge">{{ inactive_orders.count }}</span></h2>
                <table class="table">
                    <thead>
                        <tr>
                            <th class="order-num"></th>
                            <th class="student-name">Student</th>
                            <th class="student-age">Age</th>
                            <th class="student-gender">Gender</th>
                            <th class="parent-name">Parent</th>
                            <th class="parent-email">Parent Email</th>
                            <th class="parent-phone">Parent Phone</th>
                            <th class="student-school">School</th>
                            <th class="order-date">Cancelled Date</th>
                            <th class="cancellation-reason">Reason</th>
                            <th class="text-right num-attended"><abbr title="Number Attended">#A</abbr></th>
                            <th class="text-right num-missed"><abbr title="Number Missed">#M</abbr></th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for order in inactive_orders %}
                        <tr>
                            <td>{{ forloop.counter|stringformat:"02d" }}</td>
                            <td><strong>{{ order.student.first_name }}</strong> {{ order.student.last_name }}</td>
                            <td class="text-right">{{ order.student | student_age:session.start_date }}</td>
                            <td class="student-gender">{{ order.student.get_clean_gender_short | upper }}</td>
                            <td>{{ order.guardian.full_name }}</td>
                            <td>{{ order.guardian.email }}</td>
                            <td>{{ order.guardian.phone | phone_number }}</td>
                            <td>{{ order.student.school_name }}</td>
                            <td>{{ order.updated_at | date:"M j, g:i A" }}</td>
                            <td class="cancellation-reason">
                                {% if order.cancellation_reason %}
                                    {{ order.cancellation_reason|truncatewords:10 }}
                                {% else %}
                                    <em>No reason given</em>
                                {% endif %}
                            </td>
                            <td class="text-right">{{ order.num_attended }}</td>
                            <td class="text-right {% if order.num_missed >= 3 %}danger{% endif %}">{{ order.num_missed }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}