EVOLUTION-NINJA

Edit File: Site_list_old.php

<?php $this->load->view('includes/header.php')?>

<div class="content-wrapper">   
      <section class="content-header">
        <h1 style="text-align: center; padding-top: 1%;">Site List<small></small> </h1>
      </section>
      <section class="content">
        <div class="row" class="regis-block">
          <div class="col-md-offset-2 col-sm-offset-1 col-sm-10 col-md-8">
            
             </div>
          </div>  
        
          <div class="col-sm-1"></div>
              <div class="col-sm-10">
                <div id="jaytab3" style="margin-top:6%;" >
                  <div class="grid_div"></div>
                  <table id="list2">
                  </table>
                  <div id="pager3"></div>
                  <div id="dialogSelectRow3" title="Warning" style="display:none">
                  <p>Please select row</p>
                  </div>
                </div>
              </div>
          <div class="col-sm-5"></div>
        </div> 
      </section>

<div class="modal fade" id="edit_modal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="ModalLabel">Edit Sites</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>

<div class="row">
                  <div class="col-sm-4">
                    <div class="form-group" >
                        <label for="exampleInputUsername1">Layout</label>
                        <select name="layout" class="form-control layout" id="layout" required>
                            <option value="">Select</option>
                            <?php foreach ($layout as $key => $value) {?>
                              <option value="<?php echo $value->id;?>"><?php echo $value->layout_name;?></option>
                            <?php } ?>
                        </select> 
                    </div>
                  </div>
                  <div class="col-sm-4">
                    <div class="form-group" >
                        <label for="exampleInputUsername1"> Site No</label>
                        <input type="text" class="form-control site_no" name="site_no" required>
                    </div> 
                  </div>
                  <div class="col-sm-4">
                    <div class="form-group" >
                    <label for="exampleInputUsername1">Facing</label>
                    <select  name="facing" class="form-control facing" id="facing" required>
                          <option value="">Select</option>
                          <option value="South">South</option>
                          <option value="North">North</option>
                          <option value="East">East</option>
                          <option value="West">West</option>
                          
                      </select> 
                    </div>
                  </div>
                </div>

<div class="row">
                  <div class="col-sm-4">
                    <div class="form-group" >
                    <label for="exampleInputUsername1">Purch For</label>
                  <select  name="purch_for" class="form-control purch_for" id="purch_for" required>
                          <option value="">Select</option>
                          <option value="Company">Company</option>
                          <option value="Customer">Customer</option>
                        
                          
                        </select>     
                </div>
                  </div>
                  <div class="col-sm-4">
                    <div class="form-group" >
                     <label for="exampleInputUsername1">Site Type</label>
                  <select  name="site_type" class="form-control site_type" id="site_types" required>
                          <option value="">Select</option>
                          <option value="General">General</option>
                          <option value="Premium">Premium</option>
                          <option value="Corner">Corner</option>
                          
                        </select>     
                </div>
                  </div>
                  <div class="col-sm-4">
                    <div class="form-group" >
                    <label for="exampleInputUsername1">Remarks</label>
                  <input type="text" class="form-control remarks" name="remarks" required>
                </div>
                  </div>
                </div>
                
                <div class="row">
                  <div class="col-sm-6">
                    <div class="form-group" >
                      <label for="exampleInputUsername1">North</label>
                      <div class="row">
                          <div class="col-sm-5">
                            <input type="text" class="form-control north" name="north" id="north" required>
                          </div>
                        
                          <div class="col-sm-5">
                            <input type="number" class="form-control north_mtrs" name="north_mtrs" id="north_mtrs" required>
                          </div>
                          <div class="col-sm-2" style="padding-left: 0px;">
                            <p style="padding-top: 10px;">Mtrs</p>
                          </div>
                        </div>
                    </div>
                  </div>
                  <div class="col-sm-6">
                      <div class="form-group" >
                      <label for="exampleInputUsername1">South</label>
                      <div class="row">
                            <div class="col-sm-5">
                              <input type="text" class="form-control south" name="south" id="south" required>
                            </div>
                          
                            <div class="col-sm-5">
                              <input type="number" class="form-control south_mtrs" name="south_mtrs" id="south_mtrs"required>
                            </div>
                            <div class="col-sm-2" style="padding-left: 0px;">
                              <p style="padding-top: 10px;">Mtrs</p>
                            </div>
                          </div>
                    </div>
                  </div>
                </div>

<div class="row">
                  <div class="col-sm-6">
                    <div class="form-group" >
                      <label for="exampleInputUsername1">East</label>
                      <div class="row">
                            <div class="col-sm-5">
                              <input type="text" class="form-control east" name="east" id="east" required>
                            </div>
                          
                            <div class="col-sm-5">
                              <input type="number" class="form-control east_mtrs" name="east_mtrs" id="east_mtrs" required>
                            </div>
                            <div class="col-sm-2" style="padding-left: 0px;">
                              <p style="padding-top: 10px;">Mtrs</p>
                            </div>
                          </div>
                    </div>
                  </div>
                  <div class="col-sm-6">
                    <div class="form-group" >
                        <label for="exampleInputUsername1">West</label>
                      <div class="row">
                            <div class="col-sm-5">
                              <input type="text" class="form-control west" name="west" id="west" required>
                            </div>
                          
                            <div class="col-sm-5">
                              <input type="number" class="form-control west_mtrs" name="west_mtrs" id="west_mtrs" required>
                            </div>
                            <div class="col-sm-2" style="padding-left: 0px;">
                              <p style="padding-top: 10px;">Mtrs</p>
                            </div>
                          </div>
                    </div>
                  </div>
                </div>
                
                <div class="row">
                  <div class="col-sm-6">
                    <div class="form-group" >
                    
                      <div class="row">
                        
                        <div class="col-sm-5">
                          <label for="exampleInputUsername1">North to South</label>
                          <input type="number" class="form-control north_south" step="any" name="north_south" id="north_south" readonly="">
                        </div>
                      
                      
                        <div class="col-sm-5">
                          <label for="exampleInputUsername1">East to West</label>
                          <input type="number" class="form-control east_west" step="any" name="east_west" id="east_west" readonly="">
                        </div>
                      </div>
                      
                      </div>
                  </div>
                  <div class="col-sm-6">
                    <div class="form-group" >
                    
                      <div class="row">
                        
                        <div class="col-sm-5">
                          <label for="exampleInputUsername1">Sq Mt</label>
                          <input type="number" class="form-control sq_mt" step="any" name="sq_mt" id="sq_mt" readonly="">
                        </div>
                      
                      
                        <div class="col-sm-5">
                          <label for="exampleInputUsername1">Sq Ft</label>
                          <input type="number" class="form-control sq_ft" step="any" name="sq_ft" id="sq_ft" readonly="">
                        </div>
                      </div>
                       
                      </div>
                  </div>
                </div>

</div>

<div class="modal-footer">
              <button type="submit" class="btn btn-primary submit">Submit</button>
              <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
            </div>
        </form>
      </div>
    </div>
  </div>
</div>

CallGrid();

function CallGrid()
{
  jQuery("#list2").jqGrid({
    url:"<?php echo site_url('get-site-list')?>",  
  mtype : "get",   
  datatype: "json", 
    colNames:['ID','Layout','Site No','Facing','Purch For','Site Type','Remarks','North','Mtrs','South','Mtrs','East','Mtrs','West','Mtrs','Sq Mt','Sq Ft','Created By','Created At','Action'],
  colModel:[
        {name:'id',index:'id', width:100, hidden:true,editable:false},
        {name:'layout_name',index:'layout_name', width:150, hidden:false,editable:false},
        {name:'site_no',index:'site_no', width:100, hidden:false,editable:false},
        {name:'facing',index:'facing', width:100, hidden:false,editable:false},
        {name:'purch_for',index:'purch_for',editable:false, width:100},
        {name:'site_type',index:'site_type',editable:false, width:100},
        {name:'remarks',index:'remarks',editable:false, width:100},
        {name:'north',index:'north', width:100, hidden:false,editable:false},
        {name:'north_mtrs',index:'north_mtrs', width:100, hidden:false,editable:false},
        {name:'south',index:'south',editable:false,hidden:false, width:100},
        {name:'south_mtrs',index:'north_mtrs', width:100, hidden:false,editable:false},
        {name:'east',index:'east',editable:false,hidden:false, width:100},
        {name:'east_mtrs',index:'east_mtrs', width:100, hidden:false,editable:false},
        {name:'west',index:'west',editable:false,hidden:false, width:100},
        {name:'west_mtrs',index:'west_mtrs', width:100, hidden:false,editable:false},
        {name:'sq_mt',index:'sq_mt',editable:false,hidden:false, width:100},
        {name:'sq_ft',index:'sq_ft', width:100, hidden:false,editable:false},
        {name:'created_by',index:'created_by',editable:false,hidden:false, width:100},
        {name:'created_on',index:'created_on', width:100, hidden:false,editable:false},

{name:'',index:'',search:false, 
                  width:100, editable:false,formatter: function (cellvalue, options, rowObject) {
                      var retVal = "";
                        var retVal = ' <a data-toggle="tooltip" title="Edit" class="" href="javascript:void(0);"><span class="fa fa-pencil" onclick="fun_edit($(this))"  style="color:blue;"></span></a><a data-toggle="tooltip" title="Delete" onclick="fun_delete($(this))"; href="javascript:void(0);"><span class="fa fa-trash" style="color:red;"></span></a>';
                        return retVal;

}},
             
           ],

rowNum:20,
          rowTotal: 2000,
          rowList : [20,30],
          rownumbers: true,
          //rownumWidth: 60,
          pager:"#pager2", 
          sortname:'id', 
          viewrecords: true,
          gridview: true,
          autowidth: true,
          sortorder:"asc",
          shrinkToFit: true,
          loadonce:true,
          autoencode: true,
      caption:"Site List",
      //Subgrid1...
        subGrid: false,

});

$("#list2").jqGrid("setLabel", "rn", "SL");
    $("#list2").jqGrid('filterToolbar',{searchOperators : false}); //for multisearch code,remove if not required

$("#list2").jqGrid('navGrid','#pager2',
      {edit:false,add:false,del:false,search:false,refreshstate:"current"},
      { },
          { },
          { }, 
      {
          sopt:['eq', 'ne', 'lt', 'gt', 'cn', 'bw', 'ew'],
            closeOnEscape: true, 
              multipleSearch: true, 
              closeAfterSearch: true,
              closeAfterDelete:true,
              closeAfterEdit:true
               },

);
}

function fun_edit(rowId)
  {
    var id = rowId.closest('tr').attr('id');
      $.ajax({

url:"<?php echo site_url("Edit-site-list")?>",
            type:"POST",
            data:{id:id},
            success:function(response)
            {
                response=jQuery.parseJSON(response);
                console.log(response);
                if(response.result == 1) 
                {
                  $("#edit_modal").modal("show");

$(".id").val(response.message.id);
                  $(".layout").val(response.message.layout);
                  $(".site_no").val(response.message.site_no);
                  $(".facing").val(response.message.facing);
                  $(".purch_for").val(response.message.purch_for);
                  $(".site_type").val(response.message.site_type);
                  $(".remarks").val(response.message.remarks);
                  $(".north").val(response.message.north);
                  $(".north_mtrs").val(response.message.north_mtrs);
                  $(".south").val(response.message.south);
                  $(".south_mtrs").val(response.message.south_mtrs);
                  $(".east").val(response.message.east);
                  $(".east_mtrs").val(response.message.east_mtrs);
                  $(".west").val(response.message.west);
                  $(".west_mtrs").val(response.message.west_mtrs);
                  $(".north_south").val(response.message.north_south);
                  $(".east_west").val(response.message.east_west);
                  $(".sq_mt").val(response.message.sq_mt);
                  $(".sq_ft").val(response.message.sq_ft);

}
                else 
                {
                  toastr["error"](response.message);
                
                  $(".update").attr("disabled", true);
                }
            }
        });
  }

function fun_delete(rowId)
{
  var id = rowId.closest('tr').attr('id');
  var id = id;
 
   swal({

title: "Are you sure?",
      text: "You will not be able to recover this data!",
      type: "warning",   showCancelButton: true,
      confirmButtonColor: "#DD6B55",
      confirmButtonText: "Yes, delete it!",
      cancelButtonText: "No, cancel plz!",
      closeOnConfirm: false,
      closeOnCancel: false 
      },
  
    function(isConfirm){

if (isConfirm) {

$(".sweet-alert").hide();
          $(".sweet-overlay").hide();
        $.ajax({
          
          url:"<?php echo site_url("delete-site-list")?>",
          type:"POST",
          data:{id:id},
          success:function(response) {
            response=jQuery.parseJSON(response);
                console.log(response);

if(response.result == 1) 
              {
                  toastr["success"]("Deleted successfully");
                  $("#list2").jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid');
                    
              }
            }

});  
        
         } 
        else {

$(".sweet-alert").hide();
              $(".sweet-overlay").hide();
        }

});
}

$('.update_form').submit(function(e){  
        e.preventDefault();

formdata = new FormData($(this)[0]);
      swal({

title: "Are you sure?",
        text: "You want to Save this?",
        type: "warning",   showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Yes!",
        cancelButtonText: "No, cancel plz!",
        closeOnConfirm: false,
        closeOnCancel: false 
        },
      function(isConfirm){

if (isConfirm) {

$(".sweet-alert").hide();
        $(".sweet-overlay").hide();
      
            $.ajax({
                type : 'post',
                url  : "<?php echo site_url('update-site-details');?>",
                data : formdata,
                contentType: false,
                processData: false,
                success:function(response) {
                  response=jQuery.parseJSON(response);
                  console.log(response);
                  if(response.result == 1)
                  {
                    toastr["success"](response.message);
                    setTimeout(function wait(){
                     window.location = '<?php echo site_url("site-list")?>';
                      }, 1000);
                  } 
                  else
                  {
                    toastr["error"](response.message);
                  }

}
            });
        } 
        else 
        {
          $(".sweet-alert").hide();
          $(".sweet-overlay").hide();
        }
      });
         /*formdata = new FormData($(this)[0]);
            $(".update").text("Updating...");
            $(".update").attr("disabled", true);
            $.ajax({

type   : 'post',
                url    : '<?php echo site_url("update-site-details")?>',
                data   : formdata,
                contentType: false,
                processData: false,
                                          
                  success:function(response){
                  response=jQuery.parseJSON(response);
                  console.log(response);

if(response.result==1)
                    {

swal({

title: "Are you sure?",
                                text: "Updated Succesfully",
                                type: "warning",   showCancelButton: true,
                                confirmButtonColor: "#DD6B55",
                                confirmButtonText: "Yes, Upadte it!",
                                closeOnConfirm: true,
                                closeOnCancel: false 
                                },
                                 function(isConfirm)
                                 {

if (isConfirm) 
                                  {

$(".sweet-alert").hide();
                                    $(".sweet-overlay").hide(); 
                                    $('.update').removeAttr("disabled");
                                    $(".update").text("Update");    
                                    $("#edit_modal").modal("hide");
                                    location.reload();
                                  } 
                                  else 
                                  {
                                    $(".sweet-alert").hide();
                                    $(".sweet-overlay").hide();
                                  }
                              });  
                      
                    }
                    else 
                    {
                       
                        $('.update').removeAttr("disabled");
                        $(".update").text("Update");  
                                      
                    }
                }
           });*/
  });

$('#north_mtrs').focusout(function(e){
      e.preventDefault(); 
      dimension();
  });

$('#south_mtrs').focusout(function(e){
      e.preventDefault(); 
      dimension();
  });

$('#west_mtrs').focusout(function(e){
      e.preventDefault(); 
      dimension();
  });

$('#east_mtrs').focusout(function(e){
      e.preventDefault(); 
      dimension();
  });

function dimension()
{
    var west_mtrs=$('#west_mtrs').val();
    var north_mtrs=$('#north_mtrs').val();
    var south_mtrs=$('#south_mtrs').val();
    var east_mtrs=$('#east_mtrs').val();
    var ns_mtrs=(parseFloat(north_mtrs)+parseFloat(south_mtrs))/2;
    var ew_mtrs=(parseFloat(east_mtrs)+parseFloat(west_mtrs))/2;
    var sq_mt= parseFloat(ns_mtrs)*parseFloat(ew_mtrs);
    var sq_ft = sq_mt*parseFloat(10.76);
    sq_ft = (sq_ft).toFixed(2);
    $('.north_south').val(ns_mtrs);
    $('.east_west').val(ew_mtrs);
    $('.sq_mt').val(sq_mt);
    $('.sq_ft').val(sq_ft);
}

</script>

<?php $this->load->view('includes/footer.php')?>
<style type="text/css">
  .regis-block{
    padding: 15px;
    background: #fff;
  }
  .regist-button{
    text-align: center;
    padding-top: 20px;
  }
</style>