Modal with Cookies in Django.html

Modal with Cookies in Django.html

<!--

VIEWS.PY

#Check for of Get Cookie
ps_cookie_value = request.COOKIES.get('ps_cookie') 

#Construct Initial Cookie Value or Join
if not ps_cookie_value:
    ps_cookie_value = str(packing_slip.id)
else: 
    ps_cookie_value = '|'.join([ps_cookie_value, str(packing_slip.id)])

#Set Cookie Value from Construct
response.set_cookie('ps_cookie', ps_cookie_value)

#Django Return Cookie
response = HttpResponse(status=204)    
response.set_cookie('ps_cookie', ps_cookie_value)
return response

-->

{% extends 'core_app/base.html' %}
{% block title %}{{ page_title }}{% endblock %}
{% load static %}
{% block extra_css %}
<style>
  .third_table_width{
    width: 33%;
  }
  .bold_text{
    font-weight: bold;
  }
</style>
{% endblock %}
{% block content %}
{% include "core_app/_page_header.html" %}
<div class="row">
  <div class="col-md-12">
    <div class="panel panel-default">
      <div class="panel-body">          
        <div class="row">
          <div class="col-sm-6">

            {% if page_title == 'Gaffney' %}
            <a href="{% url 'forecast_report_view' 'gaf' %}" class="site_name btn btn-sm btn-primary">
              <span class="glyphicon glyphicon-print"></span> Print {{ page_title }} 862 Report
            </a>
            {% endif %}

            {% if page_title == 'Mount Holly' %}
            <a href="{% url 'forecast_report_view' 'mth' %}" class="site_name btn btn-sm btn-primary">
              <span class="glyphicon glyphicon-print"></span> Print {{ page_title }} 862 Report
            </a>
            {% endif %}

            {% if page_title == 'Santiago' %}
            <a href="{% url 'forecast_report_view' 'san' %}" class="site_name btn btn-sm btn-primary">
              <span class="glyphicon glyphicon-print"></span> Print {{ page_title }} 862 Report
            </a>
            {% endif %}

            <button id="generate_psi" class="btn btn-sm btn-success">
              <span class="glyphicon glyphicon-print"></span> Create Packing Slips & Invoice
            </button>

          </div>
        </div>

        <br/>
	      <div class="table-responsive">
          <table class="table table-striped table-condensed" id="forecast_table" width="100%">
            <thead>
              <tr>                
                <th>Part Number</th>                                   
                <th>Total Parts Requested</th>
                <th>Add Part to Shipment</th>         
              </tr>
            </thead>
            <tbody>
              {% for part in results %}
              <tr>
                <td class="part_no bold_text third_table_width" value="{{ part.part }}">
                    {{ part.part }}
                </td>
                <td class="third_table_width">
                  {{ part.total }}
                </td>
                <td class="third_table_width">
                  <input class="part_qty form-control input-sm" placeholder="Add parts to shipment..." autocomplete="off">
                </td>              
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Modal -->
<div class="container">
  <button id="modal_button" data-toggle="modal" data-target="#myModal" style="visibility: hidden;"></button>
  <div class="modal fade" id="myModal" role="dialog">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <button id="modal_close" type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Links to Packing Slip & Invoice</h4>
          </div>
          <div class="modal-body">
            <h4>Packing Slips</h4>
            <span id="ps_link"></span>
            <h4>Invoices</h4>
            <span id="in_link"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}

{% block extra_js %}{{ block.super }}
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<script>
$(document).ready(function(){

  {% if page_title == 'Gaffney' %}
    site_abbr = 'GAF'
  {% endif %}
  {% if page_title == 'Mount Holly' %}
    site_abbr = 'MTH'
  {% endif %}
  {% if page_title == 'Santiago' %}
    site_abbr = 'SAN'
  {% endif %}  

  var part_qty_array = []
  $('.part_qty').on('change', function(){  
    var qty = $(this).val();
    var part = $(this).closest('tr').find('.part_no').html().trim()      
    if(qty == ''){
      var part_to_remove = part_qty_array.find(x => x.part === part);
      part_qty_array.splice(part_qty_array.indexOf(part_to_remove), 1);
      console.log(part_qty_array)
    }else{    
      var temp_obj = {'part': part, 'qty': qty}
      part_qty_array.push(temp_obj)
      console.log(part_qty_array)
    }
  });

  $('#generate_psi').on('click', function(){
    $.post('{% url "create_psi" %}', 
    {
      site_abbr: site_abbr, 
      part_qty_array: JSON.stringify(part_qty_array), 
      csrfmiddlewaretoken: '{{csrf_token}}'
    }).done(function(){
      var ps_cookie_values = Cookies.get('ps_cookie')
      var in_cookie_values = Cookies.get('in_cookie')
      if(ps_cookie_values != 'None' || in_cookie_values != 'None'){        
        var ps_cookie_array = ps_cookie_values.split('|');
        var in_cookie_array = in_cookie_values.split('|');        
        ps_cookie_array.forEach(element => {
          console.log(element);
          $("#ps_link").append("<a href='/packingslips/" + element + "'>"
                                + "Packing Slip " + element + "</a><br/>");          
        });
        in_cookie_array.forEach(element => {
          console.log(element);
          $("#in_link").append("<a href='/invoices/" + element + "'>"
                                + "Invoice " + element + "</a><br/>");          
        });
        $('#modal_button').click();
      }else{
        Cookies.remove('ps_cookie');
        Cookies.remove('in_cookie');
      };     
    });
  });  

  $('#myModal').on('hidden.bs.modal', function(){
    Cookies.remove('ps_cookie');
    Cookies.remove('in_cookie');
    location.reload();    
  });

  $(window).on("unload", function() {
    Cookies.remove('ps_cookie');
    Cookies.remove('in_cookie');
  });

});
</script>
{% endblock %}