From 61b4542f3f05cd92955884749d8f9951094dbc85 Mon Sep 17 00:00:00 2001
From: Joel Addison <joel@addison.net.au>
Date: Sun, 12 Jan 2020 23:48:52 +1000
Subject: [PATCH] Update checkin system

Improve functionality on badge preview. Add styles to make status of workflow clear.
Improve buttons to allow badge reprinting and preview.
Reinstate exception logging and bulk process mode.

Update DataTables styling and components to match other parts of website.
---
 .../regidesk/boardingpass_overview.html       | 186 ++++++++---------
 .../templates/regidesk/ci_overview.html       | 187 ++++++++++--------
 2 files changed, 201 insertions(+), 172 deletions(-)

diff --git a/vendor/regidesk/regidesk/templates/regidesk/boardingpass_overview.html b/vendor/regidesk/regidesk/templates/regidesk/boardingpass_overview.html
index da32ad3b..86f2f147 100644
--- a/vendor/regidesk/regidesk/templates/regidesk/boardingpass_overview.html
+++ b/vendor/regidesk/regidesk/templates/regidesk/boardingpass_overview.html
@@ -89,98 +89,108 @@
 {% endblock %}
 
 {% block extra_script %}
-<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/jszip-2.5.0/dt-1.10.16/b-1.4.2/b-colvis-1.4.2/b-flash-1.4.2/b-html5-1.4.2/b-print-1.4.2/cr-1.4.1/fc-3.2.3/fh-3.1.3/r-2.2.0/rg-1.0.2/datatables.min.css"/>
-<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
-<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
-<script type="text/javascript" src="https://cdn.datatables.net/v/bs/jszip-2.5.0/dt-1.10.16/b-1.4.2/b-colvis-1.4.2/b-html5-1.4.2/b-print-1.4.2/cr-1.4.1/fc-3.2.3/fh-3.1.3/r-2.2.0/rg-1.0.2/datatables.min.js"></script>
-    <script type="text/javascript">
-        (function($) {
-            $.fn.actions = function(opts) {
-                var options = $.extend({}, $.fn.actions.defaults, opts);
-                var actionCheckboxes = $(this);
-                checker = function(checked) {
-                    $(actionCheckboxes).prop("checked", checked)
-                        .parent().parent().toggleClass(options.selectedClass, checked);
-                }
-                updateCounter = function() {
-                    var sel = $(actionCheckboxes).filter(":checked").length;
-                    $(options.counterContainer).html(sel);
-                    $(options.allToggle).prop("checked", function() {
-                        if (sel == actionCheckboxes.length) {
-                            value = true;
-                        } else {
-                            value = false;
-                        }
-                        return value;
-                    });
-                    if (sel == 0) {
-                        $("#next-button").prop("disabled", true);
+<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.20/b-1.6.0/b-colvis-1.6.0/b-html5-1.6.0/b-print-1.6.0/cr-1.5.2/fc-3.3.0/fh-3.1.6/r-2.2.3/rg-1.1.1/datatables.min.css"/>
+
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
+<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.20/b-1.6.0/b-colvis-1.6.0/b-html5-1.6.0/b-print-1.6.0/cr-1.5.2/fc-3.3.0/fh-3.1.6/r-2.2.3/rg-1.1.1/datatables.min.js"></script>
+
+<script type="text/javascript">
+    (function($) {
+        $.fn.actions = function(opts) {
+            var options = $.extend({}, $.fn.actions.defaults, opts);
+            var actionCheckboxes = $(this);
+            checker = function(checked) {
+                $(actionCheckboxes).prop("checked", checked)
+                    .parent().parent().toggleClass(options.selectedClass, checked);
+            }
+            updateCounter = function() {
+                var sel = $(actionCheckboxes).filter(":checked").length;
+                $(options.counterContainer).html(sel);
+                $(options.allToggle).prop("checked", function() {
+                    if (sel == actionCheckboxes.length) {
+                        value = true;
                     } else {
-                        $("#next-button").prop("disabled", false);
+                        value = false;
                     }
+                    return value;
+                });
+                if (sel == 0) {
+                    $("#next-button").prop("disabled", true);
+                } else {
+                    $("#next-button").prop("disabled", false);
                 }
-                // Check state of checkboxes and reinit state if needed
-                $(this).filter(":checked").each(function(i) {
-                    $(this).parent().parent().toggleClass(options.selectedClass);
-                    updateCounter();
-                });
-                $(options.allToggle).click(function() {
-                    checker($(this).prop("checked"));
-                    updateCounter();
-                });
-                lastChecked = null;
-                $(actionCheckboxes).click(function(event) {
-                    if (!event) { var event = window.event; }
-                    var target = event.target ? event.target : event.srcElement;
-                    if (lastChecked && $.data(lastChecked) != $.data(target) && event.shiftKey == true) {
-                        var inrange = false;
-                        $(lastChecked).prop("checked", target.checked)
-                            .parent().parent().toggleClass(options.selectedClass, target.checked);
-                        $(actionCheckboxes).each(function() {
-                            if ($.data(this) == $.data(lastChecked) || $.data(this) == $.data(target)) {
-                                inrange = (inrange) ? false : true;
-                            }
-                            if (inrange) {
-                                $(this).prop("checked", target.checked)
-                                    .parent().parent().toggleClass(options.selectedClass, target.checked);
-                            }
-                        });
-                    }
-                    $(target).parent().parent().toggleClass(options.selectedClass, target.checked);
-                    lastChecked = target;
-                    updateCounter();
-                });
             }
-            /* Setup plugin defaults */
-            $.fn.actions.defaults = {
-                counterContainer: "span.action-counter",
-                allToggle: "#action-toggle",
-                selectedClass: "selected"
+            // Check state of checkboxes and reinit state if needed
+            $(this).filter(":checked").each(function(i) {
+                $(this).parent().parent().toggleClass(options.selectedClass);
+                updateCounter();
+            });
+            $(options.allToggle).click(function() {
+                checker($(this).prop("checked"));
+                updateCounter();
+            });
+            lastChecked = null;
+            $(actionCheckboxes).click(function(event) {
+                if (!event) { var event = window.event; }
+                var target = event.target ? event.target : event.srcElement;
+                if (lastChecked && $.data(lastChecked) != $.data(target) && event.shiftKey == true) {
+                    var inrange = false;
+                    $(lastChecked).prop("checked", target.checked)
+                        .parent().parent().toggleClass(options.selectedClass, target.checked);
+                    $(actionCheckboxes).each(function() {
+                        if ($.data(this) == $.data(lastChecked) || $.data(this) == $.data(target)) {
+                            inrange = (inrange) ? false : true;
+                        }
+                        if (inrange) {
+                            $(this).prop("checked", target.checked)
+                                .parent().parent().toggleClass(options.selectedClass, target.checked);
+                        }
+                    });
+                }
+                $(target).parent().parent().toggleClass(options.selectedClass, target.checked);
+                lastChecked = target;
+                updateCounter();
+            });
+        }
+        /* Setup plugin defaults */
+        $.fn.actions.defaults = {
+            counterContainer: "span.action-counter",
+            allToggle: "#action-toggle",
+            selectedClass: "selected"
+        }
+    })($);
+    $(function() {
+        $("tr input.action-select").actions();
+    });
+    $('.dataTable').dataTable({
+        "dom":
+            "<'row'<'col-sm-12 col-md-3'l><'col-sm-12 col-md-5'B><'col-sm-12 col-md-4'f>>" +
+            "<'row'<'col-sm-12'tr>>" +
+            "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
+        "stateSave": true,
+        "lengthMenu": [[10, 50, 100, -1], [10, 50, 100, "All"]],
+        "pageLength": 100,
+        "buttons": [
+            "csv",
+            "print",
+            {
+                extend: 'copy',
+                text: 'Copy',
+                exportOptions: {
+                    columns: ':visible'
+                }
+            },
+            {
+                extend: 'collection',
+                text: 'Columns',
+                buttons: [ 'columnsToggle']
             }
-        })($);
-        $(function() {
+        ],
+        "colReorder": true,
+        "drawCallback": function( settings ) {
             $("tr input.action-select").actions();
-        });
-        $('.dataTable').dataTable({
-            "dom": "<'container-fluid'<'row'<'col-md-3'l><'col-md-3'B><'col-md-4'f>r>t<'row'<'col-md-3'i><'col-md-5'p>>>",
-            "stateSave": true,
-            "lengthMenu": [[10, 50, 100, -1], [10, 50, 100, "All"]],
-            "drawCallback": function( settings ) {
-                $("tr input.action-select").actions();
-            },
-            "pageLength": 100,
-            "colReorder": true,
-            "buttons": [ {
-              extend: 'collection',
-              text: 'Export',
-              buttons: ["copy", "csv", "print"]
-            },
-            { extend: 'collection',
-              text: 'Columns',
-              buttons: [
-                { extend: 'columnsToggle',
-                  columns: '.toggle' },
-            ]
-        }]});
-    </script>
+        }
+    });
+</script>
 {% endblock %}
diff --git a/vendor/regidesk/regidesk/templates/regidesk/ci_overview.html b/vendor/regidesk/regidesk/templates/regidesk/ci_overview.html
index d985476c..4aba4d40 100644
--- a/vendor/regidesk/regidesk/templates/regidesk/ci_overview.html
+++ b/vendor/regidesk/regidesk/templates/regidesk/ci_overview.html
@@ -1,8 +1,7 @@
 {% extends "regidesk/base.html" %}
-{% block header_title %}
-<h3>Pre-print check</h3>
-{% endblock %}
 
+{% block head_title %}Checkin - {{ user.attendee.attendeeprofilebase.attendeeprofile.name }}{% endblock head_title %}
+{% block page_title %}Pre-print check{% endblock page_title %}
 
 {% block body %}
 {% load registrasion_tags %}
@@ -15,10 +14,11 @@
 {% total_items_purchased 4 as speakers_dinner_count %}
 {% total_items_purchased 5 as pdns_count %}
 {% ticket_type as ticket_type %}
+
+<a type="button" class="btn btn-outline-primary" href="{% url 'regidesk:check_in_scanner' %}">Return to scanning page</a>
+
 <div class="card my-3">
-    <div class="card-header">
-        <h2 class="card-title">Content Check</h2>
-    </div>
+    <div class="card-header">Content Check</div>
     <div class="card-body">
         <dl class="card-text row">
             <dt class="col-sm-3">Ticket type</dt>
@@ -46,95 +46,114 @@
             <dd class="col-sm-9">{{ pdns_count }}</dd>
 
             <dt class="col-sm-3">Over 18 years</dt>
-            <dd class="col-sm-9">{% if user.attendee.attendeeprofilebase.attendeeprofile.of_legal_age %}yes{% else %}<strong
-                class="red">NO</strong>{% endif %}</dd>
+            <dd class="col-sm-9">{% if user.attendee.attendeeprofilebase.attendeeprofile.of_legal_age %}Yes{% else %}<strong class="red">NO</strong>{% endif %}</dd>
 
             <dt class="col-sm-3">Username</dt>
             <dd class="col-sm-9">{{ user.username }}</dd>
         </dl>
 
-            <h4>Shirts ordered</h4>
-            <table class="table card-text">
-                {% for shirt in shirts%}
-                <tr>
-                    <td>{{ shirt.product }}</td>
-                    <td>{{ shirt.quantity }}</td>
-                </tr>
-                {% endfor %}
-            </table>
-        </div>
+        <h4>Shirts ordered</h4>
+        <table class="table card-text">
+            {% for shirt in shirts%}
+            <tr>
+                <td>{{ shirt.product }}</td>
+                <td>{{ shirt.quantity }}</td>
+            </tr>
+            {% endfor %}
+        </table>
     </div>
-    <div class="card my-3">
-        <div class="card-header">
-            <h2 class="card-title">Badge Preview</h2>
-        </div>
-        <div class="card-body">
-            <img src="{% url 'badge' user.id %}.png" style="max-width: 500px;">
+</div>
 
-        </div>
+<div class="card my-3">
+    <div class="card-header">Badge Preview</div>
+    <div class="card-body">
+        <img src="{% url 'badge' user.id %}.png" style="max-width: 500px;">
     </div>
+</div>
 
-    <div class="card my-3">
-        <div class="card-header">
-            <h2 class="card-title">Check In</h2>
-        </div>
-        <div class="card-body">
-            <dl class="row card-text">
-                <dt class="col-sm-3">Status</dt>
-                <dd class="col-sm-9">{% if check_in.checked_in_bool %}Checked in{% else %}Not checked in{% endif %}</dd>
-            </dl>
-            <p>If an attendee sees an error with their contents, please instruct them to change their profile and come
-                back before checking them in.</p>
-                <p>The attendee will be unable to edit their profile after they have been checked in.</p>
-                <form method="post">
-                    <input type="checkbox" name="checkin" value="checkin" checked hidden>
-                    <input class="btn" type="submit" value="Submit">
-                </form>
-            </div>
-        </div>
-
-
-        <div class="card my-3">
-            <div class="card-header">
-                <h2 class="card-title">Badge</h2>
-            </div>
-            <div class="card-body">
-                <dl class="row card-text">
-                    <dt class="col-sm-3">Status</dt>
-                    <dd class="col-sm-9">{% if check_in.badge_printed %}Marked{% else %}Not marked{% endif %} as printed</dd>
-                </dl>
-                <form method="post" hidden>
-                    <input type="checkbox" name="badge" value="badge" checked hidden>
-                    <a type="button" class="btn btn-primary" href="badge">Show Badge</a>
-                    <input class="btn" type="submit" value="Submit">
-                </form>
-                <p><strong><a href="{% url 'badge_print' user.id %}" target="_blank">Show badge for printing</a></strong></p>
-                <form method="post">
-                    <input type="checkbox" name="badge" value="badge" checked hidden>
-                    <input class="btn" type="submit" value="Print Badge">
-                </form>
-            </div>
-        </div>
+<div class="card {% if check_in.checked_in_bool %}border-danger{% else %}border-success{% endif %} my-3">
+    <div class="card-header {% if check_in.checked_in_bool %}text-white bg-success{% endif %}">Check In</div>
+    <div class="card-body">
+        <dl class="row card-text">
+            <dt class="col-sm-3">Status</dt>
+            <dd class="col-sm-9">{% if check_in.checked_in_bool %}Checked in{% else %}Not checked in{% endif %}</dd>
+        </dl>
+        <p>If an attendee sees an error with their contents, please instruct them to change their profile and come back before checking them in.</p>
+        <p>The attendee will be unable to edit their profile after they have been checked in.</p>
+        <form method="post">
+            <input type="checkbox" name="checkin" value="checkin" checked hidden>
+            <input class="btn {% if check_in.checked_in_bool %}btn-warning{% else %}btn-primary{% endif %}" type="submit" value="Check In">
+        </form>
     </div>
+</div>
 
-
-    <div class="card my-3">
-        <div class="card-header">
-            <h2 class="card-title">Schwag</h2>
-        </div>
-        <div class="card-body">
-            <dl class="row card-text">
-                <dt class="col-sm-3">Status</dt>
-                <dd class="col-sm-9">{% if check_in.schwag_given %}Marked{% else %}Not marked{% endif %} as given</dd>
-            </dl>
-            <form method="post">
-                <input type="checkbox" name="schwag" value="schwag" checked hidden>
-                <input class="btn" type="submit"
-                value="Give Schwag">
-            </form>
-        </div>
+<div class="card {% if check_in.badge_printed %}border-success{% else %}border-danger{% endif %} my-3">
+    <div class="card-header {% if check_in.badge_printed %}text-white bg-success{% endif %}">Badge</div>
+    <div class="card-body">
+        <dl class="row card-text">
+            <dt class="col-sm-3">Status</dt>
+            <dd class="col-sm-9">{% if check_in.badge_printed %}Marked{% else %}Not marked{% endif %} as printed</dd>
+        </dl>
+        <form method="post" class="d-inline-block">
+            <input type="checkbox" name="badge" value="badge" checked hidden>
+            <input class="btn btn-secondary" type="submit" value="Mark Badge as Printed">
+        </form>
+        <form method="post" class="d-inline-block">
+            <input type="checkbox" name="unbadge" value="unbadge" checked hidden>
+            <input class="btn btn-danger pull-right" type="submit" value="Reprint Badge">
+        </form>
+        <p class="d-inline-block">
+            <a class="btn btn-outline-info" href="{% url 'badge_print' user.id %}" target="_blank">Preview Badge for Printing</a>
+        </p>
     </div>
+</div>
 
-    <a type="button" class="btn btn-primary btn-lg" href="{% url 'regidesk:check_in_scanner' %}">Return to scanning page</a>
+<div class="card {% if check_in.schwag_given %}border-success{% else %}border-danger{% endif %} my-3">
+    <div class="card-header {% if check_in.schwag_given %}text-white bg-success{% endif %}">Schwag</div>
+    <div class="card-body">
+        <dl class="row card-text">
+            <dt class="col-sm-3">Status</dt>
+            <dd class="col-sm-9">{% if check_in.schwag_given %}Marked{% else %}Not marked{% endif %} as given</dd>
+        </dl>
+        <form method="post">
+            <input type="checkbox" name="schwag" value="schwag" checked hidden>
+            <input class="btn {% if check_in.schwag_given %}btn-warning{% else %}btn-primary{% endif %}" type="submit" value="Give Schwag">
+        </form>
+    </div>
+</div>
 
-    {% endblock %}
+<div class="card my-3">
+    <div class="card-header">Log Exception</div>
+    <div class="card-body">
+        <form method="post" class="card-text">
+            <textarea class="form-control" rows="3" name="exception">{{ check_in.review_text }}</textarea>
+            <p class="help-block">Reminder: Please tell attendee to email the conference team with the details as well.</p>
+            <input class="btn btn-primary" type="submit" value="Log Information">
+        </form>
+    </div>
+</div>
+
+<div class="card my-3 {% if check_in.checked_in_bool and check_in.schwag_given %}border-success{% elif check_in.checked_in_bool or check_in.schwag_given %}card-warning{% else %}card-danger{% endif %}">
+    <div class="card-header {% if check_in.checked_in_bool and check_in.schwag_given %}text-white bg-success{% elif check_in.checked_in_bool or check_in.schwag_given %}bg-warning{% endif %}">Bulk actions</div>
+    <div class="card-body">
+        <p>Mark attendee as checked in and schwag given</p>
+        <dl class="row card-text">
+            <dt class="col-sm-3">Status</dt>
+            <dd class="col-sm-9">
+                {% if check_in.checked_in_bool or check_in.schwag_given %}
+                One of the items in bulk action is marked as given already
+                {% else %}
+                Both items are marked as unreceived
+                {% endif %}
+            </dd>
+        </dl>
+        <form method="post">
+            <input type="checkbox" name="bulk" value="bulk" checked hidden>
+            <input class="btn btn-primary" type="submit" value="Check In and Give Schwag">
+        </form>
+    </div>
+</div>
+
+<a type="button" class="btn btn-outline-primary" href="{% url 'regidesk:check_in_scanner' %}">Return to scanning page</a>
+
+{% endblock %}