Sindbad~EG File Manager

{% extends 'badge/badge_layout.html' %}

 <title>{% block title %}Empty List{% endblock %}</title>

{% block content %}

   {% for mesg in get_flashed_messages(category_filter=["successMsg"]) %} 
  <div class="row"> 
      <div class="col-sm-4"></div>
        <div class="col-sm-4">
    <div class=" text-center" id="successMsg" >
      <h6 class="alert alert-success  alert-dismissible">
        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>{{ mesg }}</h6>
    </div>
     <div class="col-sm-4"></div>
      </div>
    </div>
  {% endfor %} 
  {% for mesg in get_flashed_messages(category_filter=["errorMsg"]) %} 
     <div class="row"> 
      <div class="col-sm-4"></div>
        <div class="col-sm-4">
          <div class="text-center" id="successMsg" >
          <h6 class="alert alert-danger  alert-dismissible">
           <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>{{ mesg }}</h6>
          </div>
          <div class="col-sm-4"></div>
      </div>
    </div>
  {% endfor %}     


<form id="empty_list" action="{{url_for('badge.EmptyListPirnt')}}" method="POST" > 
<input type="hidden" name="header_json" id="header_json" value="">    
<div class="container mt-3">

  <!-- <h5 class="text-center">EMPTY  LIST</h5> -->
  <div class="row">
    <div class="col-lg-1 col-md-1 col-sm-12"></div>

    <div class="col-lg-10 col-md-10 col-sm-12" >
      <div class="card-header" style=" background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);"> EMPTY  LIST</div>
      <div class="card" style=" ">
        <div class="card-body">
          <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-12">
                      <label>Del. No From</label><br>
                      <input type="text"  name="del_no_from" id="del_no_from"  class="form-control" required>
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-12">
                        <label>Del. No To</label><br>
                      <input type="text"  name="del_no_to" id="del_no_to"  class="form-control" required>
                    </div>
            
              <div class="col-lg-6 col-md-6 col-sm-12 mt-2">
                <label >Role:</label><br>
                <input type="text"  name="role" id="role"  class="form-control" required>

              </div>
              <div class="col-lg-6 col-md-6 col-sm-12 mt-2">
                <label >Enter records count per set :</label><br>
                <input type="number" name="count_per_set" class="form-control w-75" id="count_per_set" value="25" required>
              </div>
                <div class="col-lg-12 col-md-12 col-sm-12 mt-3">
                    <label >Print Title:</label><br>
                      <input type="text" class="form-control " name="print_title" value="{{conf_name}} - REGISTRATION COUNTER CHECKLIST" ><br>
                </div>
                    <div class="col-sm-12">
                          <label>Column Names:</label><div class="btn btn-sm btn-warning my-2" id="item_add" onclick="addHeaderNew()"> 
                                 Add +
                          </div>
                          <br>
                          <div id="itemContainer_1" >
                            {% for c in galley_headers %}
                                <label id="lbl_{{c.column_name }}"> 
                                  <div class="item btn btn-outline-dark header_option mr-1 {% if c.is_show|int == 1 %} active {% endif %}"  id="item_{{c.column_name }}" for="h_{{c.column_name }}"> 
                                <input type="checkbox" class="column_name mx-2 header_option_checkbox" name="column_name" onchange="chnage_checkbox(this)" data-value="{{c.column_name }}" id="h_{{c.column_name }}" value="{{c.column_name }}" {% if c.is_show|int == 1 %} checked {% endif %} /> 

                                  <input type="text" class="custom_name" name="custom_name" data-value="{{c.column_name }}" onchange="custom_name_change(this)" id="i_{{c.column_name}}" value="{{ c.header_name }}">
                                  <input type="text" class="g_width" style="width: 50px" name="g_width" data-value="{{c.column_name }}" onchange="change_width(this)" id="g_{{c.column_name}}" value="{{ c.g_width }}" >
                                  <br/>

                                  <span style="font-size: small;float: left;margin-left: 5px;">Order No: <span id="order_no_{{c.column_name }}" >{{ c.order_no }}</span></span> <br/>
                                  <span style="font-size: small;float: left;margin-left: 5px;">col : <span id="col_name_{{c.column_name }}" >{{ c.column_name }}</span></span>
                                  <!-- <label>Width :</label> -->
                                  
                                  
                                </div>
                              </label>
                              {% endfor %}
                               
                          </div>
                          
                        </div>
                  </div>
                  <br>
                  <div class="row">
                     <div class="col-lg-12 col-md-12 col-sm-12 d-flex justify-content-center">
                        <input type="hidden" name="conf_id" id="conf_id" value={{conf_id}} >
                        <input type="hidden" name="conf_key" id="conf_key" value={{conf_key}} >
                        <button type="submit" class="btn btn-md btn-info" onclick="setJson_1()"><i class="glyphicon glyphicon-filter"  title="Filter"></i>  Filter</button>
                     
                    </div>
                  </div>
                </div>
      </div>
   </div>
   <div class="col-lg-1 col-md-1 col-sm-12"></div>
  </div>
</div>
</form>

{% endblock %}

{% block bottomscript %}

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript">

  var header_json = {{ galley_headers|tojson }}

  // console.log(header_json);

  var conf_id = "{{conf_id}}"
  

$(function() {
      $("#itemContainer_1").sortable({
        update: function(event, ui) {
                $('#itemContainer_1 .item .column_name').each(function(index,element) {
                  console.log("test"+index)
                    var column_name = $(this).data('value');
                    console.log(column_name)
                    var item = header_json.find(item => item.column_name === column_name);
                    if (item) {        
                      item.order_no = index+1;
                      $("#order_no_"+column_name).html(item.order_no)
                    }
                    
                });
                console.log(header_json);
            }
        });
      $("#itemContainer_1").disableSelection();
  });

$(document).ready(function(){

});


function chnage_checkbox(e) {
   column_name = $(e).data('value')
    // alert(column_name)
    checkbox_vale = $("#h_"+column_name).prop('checked')
    var item = header_json.find(item => item.column_name === column_name);
    if (item) {        
      if(checkbox_vale)
      {
        $("#item_"+column_name).addClass('active')
        item.is_show = 1;
      }
      else
      {
        $("#item_"+column_name).removeClass('active')
        item.is_show = 0;
      }
    }
}


function custom_name_change(e){

  column_name = $(e).data('value')
    custom_name = $("#i_"+column_name).val()
    console.log(custom_name)


    var item = header_json.find(item => item.column_name === column_name);
    if (item) {        
        item.header_name = custom_name;


    }

}

function change_width(e){

  column_name = $(e).data('value')
    
    g_width     = $("#g_"+column_name).val()

    var item = header_json.find(item => item.column_name === column_name);
    if (item) {        
        item.g_width = g_width;

    }

}


function setJson_1() {
  console.log("yes")
  var jsonString = JSON.stringify(header_json);
  console.log(jsonString)
  $('#header_json').val(jsonString);
}

function addHeaderNew(){
  var replace_column_name = "an_delegate_no";

  var maxNo =  getMaxOrderNo();
  var new_order_no  =  maxNo ? maxNo+1 : 1;
  var new_column_name = "col_"+new_order_no;
  var new_header_name = "Column " + new_order_no;

  let new_item = {
                    "column_name": new_column_name,
                    "conf_id":conf_id,
                    "gsh_id": null,
                    "header_name": new_header_name,
                    "is_show": 1,
                    "order_no": new_order_no,
                    "g_width": 10
                  }
            // Add the new item to the galley_headers array
  header_json.push(new_item);
  console.log(header_json)
  
  var copy_data =   $("#lbl_"+replace_column_name).html();

  var regex = new RegExp(replace_column_name, 'g');  
  var replace_data     = copy_data.replace(regex,new_column_name)
  var new_data =  $('<label id="lbl_'+new_column_name+'" style="display:none"></label').append(replace_data)


  $('#itemContainer_1').append(new_data)

  $("#i_"+new_column_name).val(new_header_name);
  $("#order_no_"+new_column_name).html(new_order_no);
  $("#lbl_"+new_column_name).show();
  $("#g_"+new_column_name).val(10);

}

function getMaxOrderNo() {
  let orderNos = $.map(header_json, function(item) {
                      return item.order_no;
                  });

            // Find the maximum order_no
 let maxOrderNo = Math.max.apply(null, orderNos);
 return maxOrderNo;

}

  
</script>

{% endblock %}