EVOLUTION-NINJA

Edit File: new_site_details.php

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

<h4>
    <?php 
    // $meters ="9.14";
    // $value = floatval($meters) * 3.2808399;
    // echo sprintf('%0.2f',$value);

if(empty($project))
        {
           
            echo "Site not found";
        }
        else
        {
           
            if(strtoupper($project->status) == "RECEIVED" ||  strtoupper($project->status) == "RELEASED")
            {
               
                $north_in_mtrs = $project->north_in_mtrs;
                $value1 = floatval($north_in_mtrs) * 3.2808399;
                $north_in_mtrs_to_ft =  sprintf('%0.2f',$value1);

$east_in_mtrs = $project->east_in_mtrs;
                $value2 = floatval($east_in_mtrs) * 3.2808399;
                $east_in_mtrs_to_ft =  sprintf('%0.2f',$value2);

$south_in_mtrs = $project->south_in_mtrs;
                $value3 = floatval($south_in_mtrs) * 3.2808399;
                $south_in_mtrs_to_ft =  sprintf('%0.2f',$value3);

$west_in_mtrs = $project->west_in_mtrs;
                $value4 = floatval($west_in_mtrs) * 3.2808399;
                $west_in_mtrs_to_ft =  sprintf('%0.2f',$value4);

echo 'Site number '.$site_number.' details';
            }
            else
            {
                echo "Site not found";
                $north_in_mtrs_to_ft = 0.0;
                $east_in_mtrs_to_ft  = 0.0;
                $south_in_mtrs_to_ft = 0.0;
                $west_in_mtrs_to_ft  = 0.0;
            }
        }
     ?>

<?php 
        if(empty($project))
        {
            echo "";
        }
        else if(strtoupper($project->status) == "RECEIVED" ||  strtoupper($project->status) == "RELEASED")
        {
            ?>

<?php 
            if(isset($booking_status))
            {
                ?>
                     - <span class="label label-danger"><?php echo $booking_status;?></span>
                <?php
            }
            ?>
    </h4>

</section>

<div id="page" style="background-color:white !important;">
<div>
                    <h4><b><u>Note:</u></b></h4>
                    <p style="margin-left: 35px;">1 Mtr   - 3.281 ft</p>
                    <p style="margin-left: 35px;">1 SqMtr - 10.764 sft</p>
                    </div>
                <div class="row" id="print_sketch_div" style="padding-left:20px; padding-top:25px;">
                    
                    <div class="col-sm-12 col-md-4">
                        <table class="table table-striped table-hover sites_table" style="">
                                <tr>                  
                                    <td><b>PROJECT</b></td>
                                    <td><b><?php echo $project->project_name;?></b></td>
                                </tr>
                                <tr>                  
                                    <td>SITE NO</td>
                                    <td><?php echo $project->site_number;?></td>
                                </tr>
                                <tr> 
                                    <td>NORTH(in mtrs)</td>
                                    <td><?php echo $project->north_in_mtrs;?></td>
                                </tr>
                                <tr>  
                                    <td>SOUTH(in mtrs)</td>
                                    <td><?php echo $project->south_in_mtrs;?></td>
                                </tr> 
                                <tr> 
                                    <td>EAST(IN MTRS)</td>
                                    <td><?php echo $project->east_in_mtrs;?></td>
                                </tr> 
                                <tr>
                                    <td>WEST(IN MTRS)</td>
                                    <td><?php echo $project->west_in_mtrs;?></td>
                                </tr>
                                <tr>  
                                    <td>TOTAL IN  SQ MTRS</td>
                                    <td><?php echo $project->total_in_sqmtrs;?></td>
                                </tr> 
                                <tr> 
                                    <td>TOTAL IN SFT</td>
                                    <td><?php echo $project->total_in_sqft;?></td>
                                </tr> 
                                <tr> 
                                    <td>EAST FACING</td>
                                    <td><?php echo $project->east_facing;?></td>
                                </tr> 
                                <tr> 
                                    <td>WEST FACING</td>
                                    <td><?php echo $project->west_facing;?></td>
                                </tr> 
                                <tr> 
                                    <td>NORTH FACING</td>
                                    <td><?php echo $project->north_facing;?></td>
                                </tr> 
                                <tr> 
                                    <td>SOUTH FACING</td>
                                    <td><?php echo $project->south_facing;?></td>
                                </tr>

</table>
                                                            
                    </div>

<div class="col-sm-12 col-md-5" style="padding-left: 7%;" id="mysketch">
                        <b><u style="margin-left: 22%;">Site number <?php echo $project->site_number;?> - sketch </b></u>
                        <canvas id="myCanvas" width="550" height="304" style="border:0px solid #d3d3d3;margin-top: 47px;"></canvas>
                    </div>

<div class="col-sm-12 col-md-5" style="padding-left:13%;">
                            <?php
                            //$total_sq_mtrs = $project->west_in_mtrs * $project->north_in_mtrs;
                            //$sq_mtrs       = sprintf('%f',$total_sq_mtrs);
                            
                            $total_sq_mtrs = (($project->north_in_mtrs + $project->south_in_mtrs)/2) * (($project->east_in_mtrs + $project->west_in_mtrs)/2);
                            $sq_mtrs       = sprintf('%f',$total_sq_mtrs);

/*$total_sq_ft = $west_in_mtrs_to_ft * $north_in_mtrs_to_ft;
                            $sq_ft       = sprintf('%.2f',$total_sq_ft);*/
                            
                            $total_sq_ft=((($project->north_in_mtrs + $project->south_in_mtrs)/2) * (($project->east_in_mtrs + $project->west_in_mtrs)/2))*10.764;
							$sq_ft       = sprintf('%.2f',$total_sq_ft);
                            echo '<p>'.$project->west_in_mtrs.' m * '.$project->north_in_mtrs.' m '.' = '.sprintf('%.2f',$sq_mtrs).' sq mtrs'.'</p>';
                            echo '<p>'.$west_in_mtrs_to_ft.' ft * '.$north_in_mtrs_to_ft.' ft '.' = '.$sq_ft.' sq ft'.'</p>';

?>
                    </div>

</div>
 </div>

<div class="row">
                <div class="col-md-5"></div>
                
            
            <div id="print_button_div"></div>
            </div>

<div class="row" style="padding-left:20px; padding-top:25px;">
                <div class="col-md-2"></div>    
                <?php 
                if($project->site_image != '')
                {
                ?>
                    <img src ="<?php echo base_url("project_uploads/9_and_11");?>/<?php echo $project->site_image;?>" style="width: 394px;height: 280px;" alt=""/>              
                <?php
                }    
                ?>  
                    
                </div>

<?php
        }
     ?>

<button class="btn btn-sm btn-primary download" id="download" type="button">Download Description</button>
    <button class="btn btn-sm btn-primary download_sketch" id="download_sketch" type="button">Download Sketch</button>
	<button class="btn btn-sm btn-primary download_sketch_descp" id="download_both" type="button">Download Sketch And Description</button>

</section>

<?php

</style>

$(document).ready(function(){

west_facing  = "";
    north_facing = "";
    east_facing  = "";
    south_facing = "";

var site_number   = '<?php echo $project->site_number;?>';
    var north_in_mtrs = '<?php echo $project->north_in_mtrs;?>';
    var east_in_mtrs  = '<?php echo $project->east_in_mtrs;?>';
    var west_in_mtrs  = '<?php echo $project->west_in_mtrs;?>';
    var south_in_mtrs = '<?php echo $project->south_in_mtrs;?>';

var north_in_mtrs_to_ft = '<?php echo $north_in_mtrs_to_ft;?>';
    var east_in_mtrs_to_ft  = '<?php echo $east_in_mtrs_to_ft;?>';
    var south_in_mtrs_to_ft = '<?php echo $south_in_mtrs_to_ft;?>';
    var west_in_mtrs_to_ft  = '<?php echo $west_in_mtrs_to_ft;?>';

var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");

<?php

if(strpos(strtoupper($project->west_facing) , "ROAD") !== false)
    {
    ?>
        var west_facing = "ROAD";

// West verticle line

// ctx.beginPath();
        // ctx.moveTo(35, 2);
        // ctx.lineTo(35, 300);
        // ctx.stroke();

ctx.beginPath();
        ctx.moveTo(0, 2);
        ctx.lineTo(0, 300);
        ctx.lineWidth = 4;
        ctx.stroke();

// var x = new Array("Road");
        //     for(var i = 0; i < x.length; i++){
        //         var size = ctx.measureText(x[i]);
        //         ctx.save();
        //         var tx = (i*50+20) + (size.width/2);
        //         var ty = (50);
        //         ctx.translate(tx,ty);
        //         ctx.rotate(Math.PI / 10);
        //         ctx.translate(-tx,-ty);
        //         ctx.font = "14px Arial";
        //         ctx.fillText(x[i],i*50+30,150);
        //         ctx.restore();
        //      }

//West facing
        ctx.font = "14px Arial";
        ctx.fillText('R', 10, 130);
        ctx.fillText('O', 10, 145);
        ctx.fillText('A', 10, 160);
        ctx.fillText('D', 10, 175);

<?php
    }

if(strpos(strtoupper($project->north_facing) , "ROAD") !== false)
    {
    ?>
        var north_facing = "ROAD";

//North vertical line

// ctx.beginPath();
        // ctx.moveTo(10, 30);
        // ctx.lineTo(343, 30);
        // ctx.stroke();

ctx.beginPath();
        ctx.moveTo(10, 0);
        ctx.lineTo(343, 0);
        ctx.lineWidth = 4;
        ctx.stroke();

<?php
    }

if(strpos(strtoupper($project->east_facing) , "ROAD") !== false)
    {
    ?>
        var east_facing = 'ROAD';

//East vertcile line

// ctx.beginPath();
        // ctx.moveTo(315, 2);
        // ctx.lineTo(315, 300);
        // ctx.stroke();

ctx.beginPath();
        ctx.moveTo(350, 2);
        ctx.lineTo(350, 300);
        ctx.lineWidth = 2;
        ctx.stroke();

// var x = new Array("ROAD");
           // for(var i = 0; i < x.length; i++){
           //      var size = ctx.measureText(x[i]);
           //      ctx.save();
           //      var tx = (i*50+20) + (size.width/2);
           //      var ty = (50);
           //      ctx.translate(tx,ty);
           //      ctx.rotate(Math.PI / 10);
           //      ctx.translate(-tx,-ty);
           //      ctx.font = "14px Arial";
           //              ctx.fillText(x[i],i*50+333,60);
           //      ctx.restore();
           //   }

// East facing
        ctx.font = "14px Arial";
        ctx.fillText('R', 325, 128);
        ctx.fillText('O', 325, 142);
        ctx.fillText('A', 325, 157);
        ctx.fillText('D', 325, 170);

<?php
    }

if(strpos(strtoupper($project->south_facing) , "ROAD") !== false)
    {
    ?>
        var south_facing = "ROAD";

// South verticle line

ctx.beginPath();
        ctx.moveTo(10, 304);
        ctx.lineTo(343, 304);
        ctx.lineWidth = 4;
        ctx.stroke();

// ctx.beginPath();
        // ctx.moveTo(10, 270);
        // ctx.lineTo(343, 270);
        // ctx.stroke();

<?php
    }

ctx.rect(35, 30, 280, 240);
    ctx.font = "30px Arial";
    ctx.fillText(site_number, 160, 160);
    ctx.lineWidth = 1;
    ctx.stroke();

ctx.font = "14px Arial";

//ctx.fillText(west_facing, 0, 160);
    ctx.fillText(north_facing, 155, 20);
    //ctx.fillText(east_facing, 316, 160);
    ctx.fillText(south_facing, 155, 290);

/* ctx.fillText(north_in_mtrs+' m ', 150, 57);
    ctx.fillText('('+north_in_mtrs_to_ft+' ft)', 142, 75);

ctx.fillText(east_in_mtrs+' m ', 250, 145);
    ctx.fillText('('+east_in_mtrs_to_ft+' ft)', 250, 165);

ctx.fillText(west_in_mtrs+' m ', 50, 145);
    ctx.fillText('('+west_in_mtrs_to_ft+' ft)', 50, 165);

// ctx.fillText(south_in_mtrs+ 'm ', 155, 255);
    //ctx.fillText('('+south_in_mtrs_to_ft+' ft)', 148, 235);
     ctx.fillText(south_in_mtrs+ ' m ', 155, 235);
    ctx.fillText('('+south_in_mtrs_to_ft+' ft)', 148, 255);*/

ctx.fillText(west_in_mtrs+' m ', 150, 57);
    ctx.fillText('('+west_in_mtrs_to_ft+' ft)', 142, 75);
    ctx.fillText(south_in_mtrs+' m ', 250, 145);
    ctx.fillText('('+south_in_mtrs_to_ft+' ft)', 250, 165);
    ctx.fillText(north_in_mtrs+' m ', 50, 145);
    ctx.fillText('('+north_in_mtrs_to_ft+' ft)', 50, 165);
    ctx.fillText(east_in_mtrs+ ' m ', 155, 235);
    ctx.fillText('('+east_in_mtrs_to_ft+' ft)', 148, 255);

//----------------------------------------------------------// 
        var canvas=document.getElementById("myCanvas");
        var context=canvas.getContext("2d");

function Line(x1,y1,x2,y2){
            this.x1=x1;
            this.y1=y1;
            this.x2=x2;
            this.y2=y2;
        }
        Line.prototype.drawWithArrowheads=function(ctx){

// arbitrary styling
            ctx.strokeStyle="blue";
            ctx.fillStyle="blue";
            ctx.lineWidth=1;
            
            // draw the line
            ctx.beginPath();
            ctx.moveTo(this.x1,this.y1);
            ctx.lineTo(this.x2,this.y2);
            ctx.stroke();

}
        Line.prototype.drawArrowhead=function(ctx,x,y,radians){
            ctx.save();
            ctx.beginPath();
            ctx.translate(x,y);
            ctx.rotate(radians);
            ctx.moveTo(0,0);
            ctx.lineTo(5,20);
            ctx.lineTo(-5,20);
            ctx.closePath();
            ctx.restore();
            ctx.fill();
        }

// create a new line object
        var line=new Line(50,45,120,45);
        // draw the line
        line.drawWithArrowheads(context);

//----------------------------------------------------------// 
        
        var canvas=document.getElementById("myCanvas");
        var context=canvas.getContext("2d");

function Line(x1,y1,x2,y2){
            this.x1=x1;
            this.y1=y1;
            this.x2=x2;
            this.y2=y2;
        }
        Line.prototype.drawWithArrowheads=function(ctx){

// create a new line object
        var line=new Line(50,48,51,110);
        // draw the line
        line.drawWithArrowheads(context);
 //----------------------------------------------------------// 
        var canvas=document.getElementById("myCanvas");
        var context=canvas.getContext("2d");

function Line(x1,y1,x2,y2){
            this.x1=x1;
            this.y1=y1;
            this.x2=x2;
            this.y2=y2;
        }
        Line.prototype.drawWithArrowheads=function(ctx){

}

Line.prototype.drawArrowhead=function(ctx,x,y,radians){
            ctx.save();
            ctx.beginPath();
            ctx.translate(x,y);
            ctx.rotate(radians);
            ctx.moveTo(0,0);
            ctx.lineTo(5,20);
            ctx.lineTo(-5,20);
            ctx.closePath();
            ctx.restore();
            ctx.fill();
        }

// create a new line object
        var line=new Line(50,260,51,197);
        // draw the line
        line.drawWithArrowheads(context);
 //----------------------------------------------------------//

var canvas=document.getElementById("myCanvas");
        var context=canvas.getContext("2d");

function Line(x1,y1,x2,y2){
            this.x1=x1;
            this.y1=y1;
            this.x2=x2;
            this.y2=y2;
        }
        Line.prototype.drawWithArrowheads=function(ctx){

}
        
        Line.prototype.drawArrowhead=function(ctx,x,y,radians){
            ctx.save();
            ctx.beginPath();
            ctx.translate(x,y);
            ctx.rotate(radians);
            ctx.moveTo(0,0);
            ctx.lineTo(5,20);
            ctx.lineTo(-5,20);
            ctx.closePath();
            ctx.restore();
            ctx.fill();
        }

// create a new line object
        var line=new Line(54,257,125,257);
        // draw the line
        line.drawWithArrowheads(context);
//-------------------------------------------------------------------------//

var canvas=document.getElementById("myCanvas");
        var context=canvas.getContext("2d");

function Line(x1,y1,x2,y2){
            this.x1=x1;
            this.y1=y1;
            this.x2=x2;
            this.y2=y2;
        }
        Line.prototype.drawWithArrowheads=function(ctx){

}
        
        Line.prototype.drawArrowhead=function(ctx,x,y,radians){
            ctx.save();
            ctx.beginPath();
            ctx.translate(x,y);
            ctx.rotate(radians);
            ctx.moveTo(0,0);
            ctx.lineTo(5,20);
            ctx.lineTo(-5,20);
            ctx.closePath();
            ctx.restore();
            ctx.fill();
        }

// create a new line object
        var line=new Line(303,258,239,258);
        // draw the line
        line.drawWithArrowheads(context);
//----------------------------------------------------------------------------//

var canvas=document.getElementById("myCanvas");
        var context=canvas.getContext("2d");

function Line(x1,y1,x2,y2){
            this.x1=x1;
            this.y1=y1;
            this.x2=x2;
            this.y2=y2;
        }
        Line.prototype.drawWithArrowheads=function(ctx){

}
        
        Line.prototype.drawArrowhead=function(ctx,x,y,radians){
            ctx.save();
            ctx.beginPath();
            ctx.translate(x,y);
            ctx.rotate(radians);
            ctx.moveTo(0,0);
            ctx.lineTo(5,20);
            ctx.lineTo(-5,20);
            ctx.closePath();
            ctx.restore();
            ctx.fill();
        }

// create a new line object
        var line=new Line(302,254,301,197);
        // draw the line
        line.drawWithArrowheads(context);
//--------------------------------------------------------------------//

var canvas=document.getElementById("myCanvas");
        var context=canvas.getContext("2d");

function Line(x1,y1,x2,y2){
            this.x1=x1;
            this.y1=y1;
            this.x2=x2;
            this.y2=y2;
        }
        Line.prototype.drawWithArrowheads=function(ctx){

}
        
        Line.prototype.drawArrowhead=function(ctx,x,y,radians){
            ctx.save();
            ctx.beginPath();
            ctx.translate(x,y);
            ctx.rotate(radians);
            ctx.moveTo(0,0);
            ctx.lineTo(5,20);
            ctx.lineTo(-5,20);
            ctx.closePath();
            ctx.restore();
            ctx.fill();
        }

// create a new line object
        var line=new Line(302,46,301,109);
        // draw the line
        line.drawWithArrowheads(context);

//-----------------------------------------------------------------------//

var canvas=document.getElementById("myCanvas");
        var context=canvas.getContext("2d");

function Line(x1,y1,x2,y2){
            this.x1=x1;
            this.y1=y1;
            this.x2=x2;
            this.y2=y2;
        }
        Line.prototype.drawWithArrowheads=function(ctx){

}
        
        Line.prototype.drawArrowhead=function(ctx,x,y,radians){
            ctx.save();
            ctx.beginPath();
            ctx.translate(x,y);
            ctx.rotate(radians);
            ctx.moveTo(0,0);
            ctx.lineTo(5,20);
            ctx.lineTo(-5,20);
            ctx.closePath();
            ctx.restore();
            ctx.fill();
        }

// create a new line object
        var line=new Line(299,46,233,46);
        // draw the line
        line.drawWithArrowheads(context);

//-------------------------------------------------------------------------//
        //verticle direction

var canvas=document.getElementById("myCanvas");
        var context=canvas.getContext("2d");

function Line(x1,y1,x2,y2){
            this.x1=x1;
            this.y1=y1;
            this.x2=x2;
            this.y2=y2;
        }
        Line.prototype.drawWithArrowheads=function(ctx){

// draw the starting arrowhead
            var startRadians=Math.atan((this.y2-this.y1)/(this.x2-this.x1));
            startRadians+=((this.x2>this.x1)?-90:90)*Math.PI/180;
            this.drawArrowhead(ctx,this.x1,this.y1,startRadians);
            // draw the ending arrowhead
            var endRadians=Math.atan((this.y2-this.y1)/(this.x2-this.x1));
            endRadians+=((this.x2>this.x1)?90:-90)*Math.PI/180;
            this.drawArrowhead(ctx,this.x2,this.y2,endRadians);

}

// create a new line object
        //var line=new Line(90,10,91,150);
        var line=new Line(460,10,461,150);
        // draw the line
        line.drawWithArrowheads(context);

//-------------------------------------------------------------------------//

//horizontal direction

var context=canvas.getContext("2d");

function Line(x1,y1,x2,y2){
            this.x1=x1;
            this.y1=y1;
            this.x2=x2;
            this.y2=y2;
        }
        Line.prototype.drawWithArrowheads=function(ctx){

// create a new line object
        //var line=new Line(20,80,160,80);
        var line=new Line(390,80,530,80);
        // draw the line
        line.drawWithArrowheads(context);
//--------------------------------------------------------------------//

// Print sketch

var div = document.createElement("button");
        div.setAttribute("class", "center-block" );
        div.setAttribute("id", "print_sketch" );
        div.style.width = "100px";
        div.style.height = "30px";
        div.style.background = "#3c8dbc";
        div.style.color = "white";
        div.innerHTML = 'Print sketch';

document.getElementById("print_button_div").appendChild(div);

div.addEventListener('click', function () {
        	 var ButtonControl = document.getElementById("download");
             ButtonControl.style.visibility = "hidden";
             var ButtonControl1 = document.getElementById("download_sketch");
             ButtonControl1.style.visibility = "hidden";
			 var ButtonControl2 = document.getElementById("download_both");
             ButtonControl2.style.visibility = "hidden";
             var ButtonControl3 = document.getElementById("print_sketch");
             ButtonControl3.style.visibility = "hidden";
        	  window.print();
        });

$(".download").click(function(event) {

$("#print_sketch_div").wordExport();
           
        });

$(".download_sketch").click(function(event) {
             var canvas = document.getElementById("myCanvas");                
         
            canvas.toBlob(function(blob) {
                saveAs(blob, "sitesketch.png");
            }, "image/png");

});

$('#download_both').click(function() {
      	  var options = {
      	  };
      	 
      	  var pdf = new jsPDF('p', 'pt', 'a4');
      	  pdf.addHTML($("#page"), 0, 0, options, function() {
      		pdf.save('Site-details.pdf');
      	  });
        
      	});

});

</script>

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