um-cseg/chez-betty

View on GitHub
chezbetty/templates/terminal/terminal.jinja2

Summary

Maintainability
Test Coverage
{% extends "base.jinja2" %}

{% block content %}

{# Display large banners if this user owes us money. #}
<div id="user-alert-balance-large" class="alert alert-danger user-alert-balance" role="alert" {% if user.balance >= -50 %}style="display:none;"{% endif %}>
  <div class="container">
    <h2 style="font-size:125%;">{{ _('Hi %(name)s,')|format(name=user.name) }}</h2>
    <h3 style="font-size:175%;"><b>{{ _("You currently owe Betty %(big_debt)s. That's a lot of money!")|
             format(big_debt='<span class="current-formatted-balance">'~user.balance|format_currency~'</span>')|safe }}</b></h3>
    <p style="font-size:150%;">{{ _("We're glad you like Betty. We're happy to extend a small line "
    "of credit, but if people owe Betty lots of money, it's hard to keep "
    "things in stock.") }}</p>
    <p style="font-size:150%;"><b>{{ _("Remember, Betty is NOT linked to your UM account! The only ways to add funds are the bill acceptor and through the web portal using your credit card.") }}</b></p>
    <p style="font-size:125%;">{{ _("Please try to pay Betty back soon!") }}</p>
  </div>
</div>
<div id="user-alert-balance-medium" class="alert alert-warning user-alert-balance" role="alert" {% if user.balance >= -15 or user.balance < -50 %}style="display:none;"{% endif %}>
  <div class="container">
    <h2 style="font-size:125%;">{{ _('Hi %(name)s,')|format(name=user.name) }}</h2>
    <p style="font-size:150%;"><b>{{ _("You currently owe Betty %(debt)s.")|format(debt='<span class="current-formatted-balance">'~user.balance|format_currency~'</span>')|safe }}</b></p>
    <p style="font-size:150%;"><b>{{ _("Remember, Betty is NOT linked to your UM account! The only ways to add funds are the bill acceptor and through the web portal using your credit card.") }}</b></p>
    <p style="font-size:125%;">{{ _('Please try to pay Betty back soon!') }}</p>
  </div>
</div>
<div id="user-zero-purchases" class="alert user-zero-purchase-popup" role="alert" {% if user.purchase_threshold_check(limit=3) or user.deposit_threshold_check(limit=0) %}{% else %}style="display:none;"{% endif %}>
  <div class="container">
    <h2 style="font-size:125%;">{{ _('Hi %(name)s,')|format(name=user.name) }}</h2>
    <p style="font-size:150%;"><b>{{ _("Welcome to Chez Betty!") }}</b></p>
  </div>
</div>

<div id="dialog-confirm" class="dialog-test alert alert-danger user-alert-balance" role="alert" style="display:none;">
  <center><p style="font-size:200%;"><b>{{ _("Your Betty balance is currently") }}</b></p></center>
  <center><p style="font-size:500%;"><b>{{ _("%(debt)s")|format(debt='<span class="current-formatted-balance">'~user.balance|format_currency~'</span>')|safe }}</b></p></center>
  <center><p style="font-size:200%;"><b>{{ _("Which incurs a penalty fee of ") }}</b><b style="color:red;">{{ _("%(debt)s&#37")|format(debt='<span class="current-formatted-balance">'~purchase_fee_percent~'</span>')|safe }}</b></p></center>
  <center><p style="font-size:200%;"><b>Remember that Betty is run and financed entirely by student volunteers, and is NOT linked to your UM student account for payments. Please help support Betty operations by paying back your debt either online via credit card or using the bill machine next to the terminal. Thank you for your continued business.</b></p></center>
</div>

<div id="dialog-new-user" class="dialog-test alert user-zero-purchase-popup" role="alert" style="display:none;">
  <center><p style="font-size:200%;"><b>Hello new user! Please read the below instructions before using Betty:</b></p></center>
  <p style="font-size:150%;"><b>1. Load money onto your account (your current balance is {{ _("%(debt)s")|format(debt='<span class="current-formatted-balance">'~user.balance|format_currency~'</span>')|safe }}).</b></p>
  <p style="font-size:150%;"><b>2. Scan items you wish to purchase.</b></p>
  <p style="font-size:150%;"><b>3. Click Pay and Logout. You're done!</b></p>
  <br>
  <center><p style="font-size:200%;"><b>Remember: Betty is NOT linked to your UM student account or Blue Bucks for payments.</b></p></center>
  <center><p style="font-size:200%;"><b>Fund your account using the bill acceptor for cash or using the online portal for credit cards.</b></p></center>
</div>


<div class="row">

  {# Sidebar with logo, user name, and balance #}
  <div class="col-md-2">
    <div class="row well">
      <img src="/static/chezbetty_1000px.jpg" class="pull-left" style="margin-top:5px;width:100px;" />
      <h4 class="pull-right" style="width: 100px;">{{ user.name }}</h4>
    </div>

    <div id="user-info-current-balance" class="row well balance-box {% if user.balance < -5 %}big-debt{% endif %}">
      <h4>{{ _('Your Current Balance') }}</h4>
      <span class="current-formatted-balance">{{ user.balance|format_currency|safe }}</span>
    </div>

    <div id="user-info-new-balance" class="row well balance-box {% if user.balance < -5 %}big-debt{% endif %}">
      <h4>{{ _('Balance after Purchase or Deposit') }}</h4>
      <span>{{ user.balance|format_currency|safe }}</span>
    </div>

    <div id="pool-info-current-balance" class="row well balance-box" style="display:none;">
      <h4>{{ _('Selected Pool Balance') }}</h4>
      <span></span>
    </div>

    <div id="user-balance" class="hidden">{{ user.balance }}</div>
    <div id="user-umid" class="hidden">{{ user.umid }}</div>
    <div id="user-role" class="hidden">{{ user.role }}</div>

    {% for pool in purchase_pools %}
    <div id="pool-balance-{{ pool.id }}" class="hidden">{{ pool.balance }}</div>
    {% endfor %}


    {# Deposit Box #}
    <div class="panel panel-default row">
      <div class="panel-heading">
        <h3 class="panel-title" style="font-size:150%;">{{ _('Cash Deposit') }}</h3>
      </div>
      <div class="panel-body">

        <div id="deposit-alerts"></div>

        <div id="deposit-main" {% if deposit %}style="display:none;"{% endif %}>
          <div class="row">
            <div class="col-md-12">
              <h5 style="font-size:150%;">{{ _('To make a cash deposit, put money in the bill acceptor. It will automatically be added to your account.') }}</h5>
            </div>
          </div>
        </div>

        <div id="deposit-complete" {% if not deposit %}style="display:none;"{% endif %}>
          <div class="row">
            <div class="col-md-12">

              <div style="text-align:center;">
                <span class="deposit-thankyou">{{ _("Thank you!") }}</span>
              </div>

              <p>
                <span id="deposit-complete-user">
                  {% if deposit %}
                  {{ _("You successfully deposited %(amount)s into your account.")|
                   format(amount='<span class="deposit-amount">'~deposit.amount|format_currency~'</span>')|safe }}
                  {% else %}
                  {{ _("You successfully deposited %(amount)s into your account.")|
                   format(amount='<span class="deposit-amount"></span>')|safe }}
                  {% endif %}
                </span>
              </p>

              <p>
                You can continue to insert bills into the bill acceptor.
                They will be added to your deposit.
              </p>

            </div>
          </div>
        </div>

        <div id="deposit-counting" class="row" style="display:none;">
          <div class="col-md-12">
            <h3>Processing the inserted bill...</h3>
          </div>
        </div>

      </div>
    </div>

  </div>

  {# Purchase panel #}
  <div class="col-md-10">

    <div id="panel-purchase" class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">{{ _('Purchase') }}</h3>
      </div>
      <div class="panel-body">

        <div id="purchase-alerts"></div>

        <div id="purchase-entry" class="row">

          <div class="col-md-9">

            {% if demo and request.has_permission("admin") %}
            <div class="well">
              <h4>Demo Mode</h4>
              {% for item in items %}
              <a class="btn btn-default btn-small btn-bordered" href="#" onclick='add_item("{{ item.barcode }}");'>{{ item.name }}</a>
              {% endfor %}
            </div>
            {% endif %}

            <table class="table table-bordered" id="purchase-table">
              <thead>
                <tr>
                  <th style="width: 6%">&nbsp;</th>
                  <th>{{ _('Item') }}</th>
                  <th style="width: 20%" colspan="3">{{ _('Quantity') }}</th>
                  <th style="width: 10%">{{ _('Item Price') }}</th>
                  <th style="width: 10%">{{ _('Total Price') }}</th>
                </tr>
              </thead>

              <tbody>
                <tr id="purchase-empty">
                  <td colspan="7">
                    <h3>{{ _('Order Empty') }}</h3>
                    {{ _('Scan an item to begin') }}
                  </td>
                </tr>
              </tbody>

              <tfoot>
                {# todo: parameterize this. note the JS has to change too #}
                <tr id="purchase-row-subtotal" {% if user.balance <= 20 and user.balance > -5 %}style="display:none;"{% endif %}>
                  <td colspan="6"><b>{{ _('Subtotal') }}</b></td>
                  <td id="purchase-subtotal">$0.00</td>
                </tr>
                <tr id="purchase-row-goodstanding" {% if user.balance <= 20 and user.role != "administrator" %}style="display:none;"{% endif %}>
                  <td colspan="2"><b>{{ _('Good Standing Discount') }}</b></td>
                  <td id="purchase-discount-percent" colspan="4">({% if user.role == "administrator" %}{{ admin_discount }}{% elif user.role == "manager" %}{{ good_standing_manager_discount }}{% elif user.role == "volunteer" %}{{ good_standing_volunteer_discount }}{% else %}{{ good_standing_discount }}{% endif %}%)</td>
                  <td id="purchase-discount">($0.00)</td>
                </tr>
                <tr id="purchase-row-wallshame"
                        {% if user.balance >= -5 or user.role == "administrator"  %}style="display:none;"{% endif %}
                        {% if user.balance < -5 %}class="big-debt"{% endif %}
                        >
                  <td colspan="2"><b>{{ _("Debtor's Fee") }}</b></td>
                  <td id="purchase-fee-percent" colspan="4"><span id="purchase-fee-percent-amount">{{ purchase_fee_percent }}</span>%</td>
                  <td id="purchase-fee">$0.00</td>
                </tr>
                <tr>
                  <td colspan="6"><b>{{ _('Total') }}</b></td>
                  <td id="purchase-total">$0.00</td>
                </tr>
              </tfoot>
            </table>

          </div>

          <div class="col-md-3">
            {# Payment options #}
            <div class="list-group">
              <button type="button" class="list-group-item list-group-item-info list-group-item-header">Select Payment</button>
              <button type="button" id="payment-user" class="list-group-item purchase-payment active">Your Account</button>
              {% for pool in purchase_pools %}
              <button type="button" id="payment-pool-{{ pool.id }}" class="list-group-item purchase-payment">{{ _('%(pool_name)s Pool')|format(pool_name=pool.name) }}</button>
              {% endfor %}
            </div>

            {# Choose item without barcode #}
            <div style="margin-bottom: 10px;">
              <button type="button" id="btn-nobarcode" class="btn btn-default btn-lg btn-primary" style="width: 100%; height: 150px">
                {{ _('Item Without Barcode') }}
              </button>
            </div>
          </div>

        </div>

        <div id="purchase-complete" class="row" style="display:none;">
          <div class="col-md-12">

            <div id="purchase-complete-table"></div>
            <div id="purchase-eventid" class="hidden"></div>

          </div>
        </div>

        {# Recently purchased items #}
        <hr />
        <h4>Quick-Select Some Recently Purchased Items</h4>
        <div id="recently-purchased" class="row">
          <div class="col-md-1"></div>
          {% for item in user.iterate_recent_items(limit=5) %}
          <div class="col-md-2">
            <div class="tag-item" data-item-id="{{ item.id }}">
              {% if item.img %}
              <div class="item-img-boundingbox" style="background-image: url('/dynamic/item/{{item.id}}.jpg');"></div>
              {% else %}
              <img src="{{'chezbetty:static/placeholder_300px.png'|static_url}}" width="150px" />
              {% endif %}
              <div class="tag-item-name">
                {{ item.name }}
              </div>
            </div>
          </div>
          {% endfor %}
        </div>

        <hr />

        {# Purchase buttons #}
        <div id="purchase-buttons" class="row">
          <div class="col-md-12">
            <button type="button" id="purchase-button-logout" class="btn btn-success btn-lg btn-submit btn-submit-purchase">{{ _('Logout') }}</button>
            <button type="button" id="purchase-button-purchaselogout" class="btn btn-success btn-lg btn-submit btn-submit-purchase" style="display:none;">{{ _('Purchase & Logout') }}</button>
            <button type="button" id="purchase-button-purchase" class="btn btn-success btn-lg btn-submit btn-submit-purchase" style="display:none;">{{ _('Purchase') }}</button>
          </div>
        </div>

      </div>
    </div>

    {# Hidden items without barcodes chooser panel #}
    <div id="panel-nobarcode" class="panel panel-default" style="display:none;">
      <div class="panel-heading">
        <h3 class="panel-title">{{ _('Select Item Without Barcode') }}</h3>
      </div>
      <div class="panel-body">
        <div id="tags">
          <h3>Choose an Item Category</h3>
          {% for tag in tags_with_nobarcode_items %}
          <button type="button" class="btn btn-nobarcode-tag btn-default" data-tagid="{{ tag.id }}">{{ tag.name }}</button>
          {% endfor %}
          {% if nobarcode_notag_items %}
          <button type="button" class="btn btn-nobarcode-tag btn-default" data-tagid="other">Other</button>
          {% endif %}

          <div>
            <button type="button" id="btn-nobarcode-tags-back" class="btn btn-warning btn-back">Back</button>
          </div>
        </div>

        <div id="tag-items" style="display:none;">
          <div id="tag-items-content"></div>
          <div style="clear:left;">
            <button type="button" id="btn-nobarcode-tag-items-back" class="btn btn-warning btn-back">Back</button>
          </div>
        </div>
      </div>
    </div>


  </div>

</div>

<script>
  if(document.getElementById("user-alert-balance-medium").style.display != "none" || document.getElementById("user-alert-balance-large").style.display != "none") {
    $( function() {
      var wWidth = $(window).width();
      var dWidth = wWidth * 0.5;
      $( "#dialog-confirm" ).dialog({
        resizable: false,
        height: "auto",
        width: dWidth,
        modal: true,
        draggable: false,
        buttons: {
          "I Have Read and Understand": function() {
            $( this ).dialog( "close" );
          }
        }
      });
    } );
  }
  </script>

<script>
  if(document.getElementById("user-zero-purchases").style.display != "none") {
    $( function() {
      var wWidth = $(window).width();
      var dWidth = wWidth * 0.75;
      $( "#dialog-new-user" ).dialog({
        resizable: false,
        height: "auto",
        width: dWidth,
        modal: true,
        draggable: false,
        buttons: {
          "Continue to Betty": function() {
            $( this ).dialog( "close" );
          }
        }
      });
    } );
  }
  </script>

{% endblock %}

{% block timeout %}60*1000*50{% endblock %}