EVOLUTION-NINJA

Edit File: sketch_mapping.php

<?php echo view('includes/header');?>

<section class="content-header">
    <h1> Hobli Sketch</h1>               
</section>

<div class="row">

<div class="col-md-3">
    <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#access_modal">
      Add Mapping
    </button>
</div>

<div class="modal fade" id="access_modal" role="dialog">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">Add Mapping Code</h4>
            </div>

<div class="modal-body">
             
             <form id="land_owner" class="form-inline mapping_form" enctype="multipart/form-data">
                
                <input type="hidden" name="project_id" value="<?php echo $sketch->project_id;?>">
                <button type="button" class="btn btn-primary center-block add_field_button">Add Fields</button>                                         
        
                <table class="table">
                    <tbody id="mapping_div"></tbody>
                </table>

<div class="row land_owner_a">
                    <div class="col-sm-4 col-md-4"></div>
                    <div class="col-sm-4 col-md-4">
                        <button type="submit" class="btn btn-primary center-block submit mapping_btn">Submit</button>
                    </div>
                    <div class="col-sm-4 col-md-4"></div>                                                   
                </div>

</form>

</div>

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

<div id="image-container">
    
    <img id="drag-image" border="0" width="" src="<?php echo base_url('public/mapping_image')?>/<?php echo $sketch->image;?>" usemap="#<?php echo $sketch->image;?>" class="appr_plan mapify">

</div>
    
    <MAP NAME="<?php echo $sketch->image;?>" id="area_tags">
        
    </MAP>

</div>

</section>

/*#image-container{
    overflow: scroll;
}  */
#image-container {
    display: block;
    height: 500px;
    width: 1200px;
    margin: 40px auto;
    overflow: scroll;
    border: 1px solid #cccccc;
    box-sizing: border-box;
    position: relative;
    cursor: move;
}

#drag-image {
    left: 0;
   // pointer-events: none;
    position: relative;
    top: 0;
    -moz-user-select: none;
}

.mapify-popOver strong{
        font-weight: 400;
        font-size:24px;
        line-height: 1em;
        display: block;
        margin-bottom: 10px;
        color: #000;
    }
    .mapify-popOver{
        color: #999;
        font-size: 16px;
        height: 130px;
    }
    .mapify-popOver-content{
        position: relative;
        top:50%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
    }
    
    .mapify-popOver.customPopOver{
        background: #09f;
    }
    
    /* Custom hovering style */
    .mapify-hover{
        fill:rgba(0,0,0,0.15);
        stroke: #fff;
        stroke-width: 2;
    }
    
    .customHover{
        fill:#09f;
        stroke: #fff;
        stroke-width: 2;
    }

</style>
<?php echo view('includes/footer');?>

$(document).ready(function(){

var project_id = '<?php echo $project_id;?>';

var image_is_loaded = false;
    // $('.appr_plan').load(function() {

$(this).data('width', $(this).attr('width')).data('height', $(this).attr('height'));
        $($(this).attr('usemap')+" area").each(function(){
            $(this).data('coords', $(this).attr('coords'));
        });

$(this).css('width', '100%').css('height','auto').show();

image_is_loaded = true;
        $(window).trigger('resize');
    // });

function ratioCoords (coords, ratio) {

coord_arr = coords.split(",");
        
        for(i=0; i < coord_arr.length; i++) {
            coord_arr[i] = Math.round(ratio * coord_arr[i]);
        }

return coord_arr.join(',');
    }
    $(window).on('resize', function(){
        if (image_is_loaded) {
            var img = $('.appr_plan');

var ratio = img.width()/img.data('width');

$(img.attr('usemap')+" area").each(function(){
                console.log('1: '+$(this).attr('coords'));
                $(this).attr('coords', ratioCoords($(this).data('coords'), ratio));
            });
        }
    });

$(".add_field_button").click(function(){

var content = '';

content += '<tr>';
    content += '<td><input style="width:510px" placeholder="Area Tag" class="form-control" type="text" name="area_tag[]" required="required"/> </td>';
    content += '<td><select style="width:100%" class="form-control" type="text" name="project_status[]" required="required"> <option value="">Select Status</opion><option value="BOOKED">BOOKED</opion><option value="RELEASED">RELEASED</opion><option value="NOT RELEASED">NOT RELEASED</opion></select></td>';
    content += '<td><select style="width:100%" class="form-control" type="text" name="site_ids[]" required="required"> <option value="">Select site No</opion><?php foreach($site as $sites){?><option value="<?php echo $sites->site_id;?>"><?php echo $sites->site_number;?> (<?php echo $sites->site_id;?>)</opion><?php } ?></select></td>';
    content += '<td><a class="remove" href="javascript:void(0);"><span class="glyphicon glyphicon-remove"></span></a></td>';
    content += '</tr>';

$("#mapping_div").append(content);

$(".remove").click(function(){
        $(this).closest('tr').remove();
    });
});

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

$(".mapping_btn").attr('disabled', 'disabled');
        $(".mapping_btn").text("Submitting...");

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

$.ajax({

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

if(response.result==1)
                {
                    // ReadHobliMap();
                    $("#mapping_div").empty();
                    toastr["success"](response.message);
                    $('.mapping_form')[0].reset();
                    $(".mapping_btn").text("Submit");    
                    $(".mapping_btn").removeAttr('disabled');
                    $("#access_modal").modal('hide');              
                }
                else if(response.result==2)
                {
                    toastr["error"](response.message);                       
                    $(".mapping_btn").text("Submit");    
                    $(".mapping_btn").removeAttr('disabled');                       
                }
                else 
                {
                    toastr["error"](response.message);                       
                    $(".mapping_btn").text("Submit");    
                    $(".mapping_btn").removeAttr('disabled');                      
                }
               
            }
                
        });

});

GetMappingTags(project_id);
    function GetMappingTags(project_id)
    {
    	
        $.ajax({
            type   : 'post',
            url    : '<?php echo site_url('get_sketch_mapping_tags');?>',
            data   : {project_id:project_id},

success:function(response){
            // response=jQuery.parseJSON(response);

if(response.result==1)
            {
                
                var content = '';            
                    
                $.each(response.mapping_tags,function(key,val){

content += val.area_tag;
                });

$("#area_tags").html(content);

$.each(response.mapping_tags,function(key,val){
                
                   
                  
                        if(val.project_status == "BOOKED")
                            {
                                $("."+val.site_id).attr('data-maphilight', '{"strokeColor":"ffcccc","strokeWidth":0,"fillColor":"eb7b18","fillOpacity":0.6}');
                                var data = $("."+val.site_id).mouseout().data('maphilight') || {};
                                data.alwaysOn = !data.alwaysOn;
                                $("."+val.site_id).data('maphilight', data).trigger('alwaysOn.maphilight');
                            }

if(val.project_status == "RELEASED")
                            {
                                $("."+val.site_id).attr('data-maphilight', '{"strokeColor":"ffcccc","strokeWidth":0,"fillColor":"00e673","fillOpacity":0.6}');
                                var data = $("."+val.site_id).mouseout().data('maphilight') || {};
                                data.alwaysOn = !data.alwaysOn;
                                $("."+val.site_id).data('maphilight', data).trigger('alwaysOn.maphilight');
                            }

if(val.project_status == "NOT RELEASED")
                            {
                                $("."+val.site_id).attr('data-maphilight', '{"strokeColor":"ffcccc","strokeWidth":0,"fillColor":"ff1a1a","fillOpacity":0.6}');
                                var data = $("."+val.site_id).mouseout().data('maphilight') || {};
                                data.alwaysOn = !data.alwaysOn;
                                $("."+val.site_id).data('maphilight', data).trigger('alwaysOn.maphilight');
                            }

});

$('.appr_plan').maphilight();
            }
            else
            {

}
            
          }

});

}

});
</script>