EVOLUTION-NINJA

Edit File: download_all_sites_page.php

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

<!--<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>

-->
<section class="content-header">
      <button class="btn btn-sm btn-primary download_sketch_descp" id="download_both" type="button">Download PDF</button>
     
    <h4>
    <?php foreach ($project as $key => $value) { 
        # code...

if(empty($value))
        {
            echo "Site not found";
        }
        else
        {
            if(strtoupper($value->status) == "RECEIVED" ||  strtoupper($value->status) == "RELEASED")
            {
                $north_in_mtrs = $value->north_in_mtrs;
                $value1 = floatval($north_in_mtrs) * 3.2808399;
                $north_in_mtrs_to_ft =  round($value1,2);

$east_in_mtrs = $value->east_in_mtrs;
                $value2 = floatval($east_in_mtrs) * 3.2808399;
                $east_in_mtrs_to_ft =  round($value2,2);

$south_in_mtrs = $value->south_in_mtrs;
                $value3 = floatval($south_in_mtrs) * 3.2808399;
                $south_in_mtrs_to_ft =  round($value3,2);

$west_in_mtrs = $value->west_in_mtrs;
                $value4 = floatval($west_in_mtrs) * 3.2808399;
                $west_in_mtrs_to_ft =   round($value4,2);

/* echo 'Site number '.$value->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;
            }
        }

if(empty($value))
        {
            echo "";
        }
        else if(strtoupper($value->status) == "RECEIVED" ||  strtoupper($value->status) == "RELEASED")
        {
            
            
                         $total_sq_mtrs = (($value->north_in_mtrs + $value->south_in_mtrs)/2) * (($value->east_in_mtrs + $value->west_in_mtrs)/2);
                            $sq_mtrs       = round($total_sq_mtrs,2);

</h4>

</section>

<div id="page" class="wrapper export_div" style="background-color:white !important;">
    <input type="hidden" class="can" value="<?php echo $key;?>"/>
    
    <input type="hidden" class="site_no" value="<?php echo $value->site_number;?>"/>
    <input type="hidden" class="nor_mtr" value="<?php echo $value->north_in_mtrs;?>"/>
    <input type="hidden" class="sou_mtr" value="<?php echo $value->south_in_mtrs;?>"/>
    <input type="hidden" class="eas_mtr" value="<?php echo $value->east_in_mtrs;?>"/>
    <input type="hidden" class="wes_mtr" value="<?php echo $value->west_in_mtrs;?>"/>
    <input type="hidden" class="nor_ft" value="<?php echo $north_in_mtrs_to_ft;?>"/>
    <input type="hidden" class="eas_ft" value="<?php echo $east_in_mtrs_to_ft;?>"/>
    <input type="hidden" class="sou_ft" value="<?php echo $south_in_mtrs_to_ft;?>"/>
    <input type="hidden" class="wes_ft" value="<?php echo $west_in_mtrs_to_ft;?>"/>
     
    <input type="hidden" class="west_facing" value="<?php echo $value->west_facing;?>"/>
    <input type="hidden" class="north_facing" value="<?php echo $value->north_facing;?>"/>
    <input type="hidden" class="east_facing" value="<?php echo $value->east_facing;?>"/>
    <input type="hidden" class="south_facing" value="<?php echo $value->south_facing;?>"/>
    
    
   
    
                 <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 $value->project_name;?></b></td>
                                </tr>
                                <tr>                  
                                    <td>SITE NO</td>
                                    <td><?php echo $value->site_number;?></td>
                                </tr>
                                <tr> 
                                    <td>NORTH(in mtrs)</td>
                                    <td><?php echo $value->north_in_mtrs;?></td>
                                </tr>
                                <tr>  
                                    <td>SOUTH(in mtrs)</td>
                                    <td><?php echo $value->south_in_mtrs;?></td>
                                </tr> 
                                <tr> 
                                    <td>EAST(IN MTRS)</td>
                                    <td><?php echo $value->east_in_mtrs;?></td>
                                </tr> 
                                <tr>
                                    <td>WEST(IN MTRS)</td>
                                    <td><?php echo $value->west_in_mtrs;?></td>
                                </tr>
                                <tr>  
                                    <td>TOTAL IN  SQ MTRS</td>
                                    <td><?php echo $value->total_in_sqmtrs;?></td>
                                </tr> 
                                <tr> 
                                    <td>TOTAL IN SFT</td>
                                    <td><?php echo $value->total_in_sqft;?></td>
                                </tr> 
                                <tr> 
                                    <td>EAST FACING</td>
                                    <td><?php echo $value->east_facing;?></td>
                                </tr> 
                                <tr> 
                                    <td>WEST FACING</td>
                                    <td><?php echo $value->west_facing;?></td>
                                </tr> 
                                <tr> 
                                    <td>NORTH FACING</td>
                                    <td><?php echo $value->north_facing;?></td>
                                </tr> 
                                <tr> 
                                    <td>SOUTH FACING</td>
                                    <td><?php echo $value->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 $value->site_number;?> - sketch </b></u>
                        <canvas id="myCanvas<?php echo $key;?>" 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 = (($value->north_in_mtrs + $value->south_in_mtrs)/2) * (($value->east_in_mtrs + $value->west_in_mtrs)/2);
                            $sq_mtrs       = round($total_sq_mtrs,2);

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

?>
                    </div>

</div>
 </div>

<?php
            
        }
    }
     ?>
    
<input type="hidden" value="<?php echo count($project);?>" id="total_count">

</section>

<?php

</style>

$(document).ready(function(){
    
    
    west_facing  = "";
    north_facing = "";
    east_facing  = "";
    south_facing = "";
     $.each($('.wrapper'), function(){
     
     $this = $(this);
       var k = $this.find('.can').val();
        var site_number = $this.find('.site_no').val();
        
        var north_in_mtrs = $this.find('.nor_mtr').val();
    var east_in_mtrs  = $this.find('.eas_mtr').val();
    var west_in_mtrs  = $this.find('.wes_mtr').val();
    var south_in_mtrs = $this.find('.sou_mtr').val();

var north_in_mtrs_to_ft = $this.find('.nor_ft').val();
    var east_in_mtrs_to_ft  = $this.find('.eas_ft').val();
    var south_in_mtrs_to_ft = $this.find('.sou_ft').val();
    var west_in_mtrs_to_ft  = $this.find('.wes_ft').val();

<?php //foreach ($project as $key => $value) 
// { ?>
   
 
    var west_facing1  =$this.find('.west_facing').val();
    var north_facing1 =$this.find('.north_facing').val();
    var east_facing1 =$this.find('.east_facing').val();
    var south_facing1 =$this.find('.south_facing').val();
    
     var west_facing  =west_facing1.toUpperCase();
    var north_facing =north_facing1.toUpperCase();
    var east_facing  =east_facing1.toUpperCase();
    var south_facing =south_facing1.toUpperCase();

//alert(south_facing);
    var c = document.getElementById("myCanvas"+k);
    var ctx = c.getContext("2d");
    
  
    
    if(west_facing == 'ROAD')
    {
        var west_facing = "ROAD";

// West verticle line

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

//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);

}
     if(north_facing == 'ROAD')
    {
       var north_facing = "ROAD";

//North vertical line

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

}
    if(east_facing == 'ROAD')
    {
        var east_facing = 'ROAD';

//East vertcile line
       ctx.beginPath();
        ctx.moveTo(350, 2);
        ctx.lineTo(350, 300);
        ctx.lineWidth = 2;
        ctx.stroke();
        // 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);

}
    
    
    
 if(south_facing == 'ROAD')
    {
        var south_facing = "ROAD";

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

}

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(east_facing, 155, 20);
    ctx.fillText(west_facing, 155, 290);*/
    //ctx.fillText(west_facing, 0, 160);
     if(north_facing == 'ROAD')
    {
    ctx.fillText(north_facing, 155, 20);
    }
    //ctx.fillText(east_facing, 316, 160);
    if(south_facing == 'ROAD')
    {
    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"+k);
        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"+k);
        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"+k);
        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"+k);
        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(54,257,125,257);
        // draw the line
        line.drawWithArrowheads(context);
//-------------------------------------------------------------------------//

var canvas=document.getElementById("myCanvas"+k);
        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"+k);
        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"+k);
        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"+k);
        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"+k);
        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);
//--------------------------------------------------------------------//

});

$('#download_both').click(function() {
           /*  var len=$("#total_count").val();
          var options = {
              pagesplit: true
          };
         
          var pdf = new jsPDF('p', 'pt', 'a4');
           for (var k = 0; k <= len; k++) { 
          pdf.addHTML($(".export_div"+k), options, function() {
            pdf.save('Site-details.pdf');
          });
           }*/
           
           var len=$("#total_count").val();
        
        var pdf = new jsPDF('p', 'pt', 'a4');
        var pdfName = 'site-details.pdf';

var options = {
             pagesplit: true
        };

var $divs = $(".export_div")                
        var numRecursionsNeeded = $divs.length -1;    
        var currentRecursion=0;

pdf.addHTML($(".export_div")[currentRecursion], 15, 20, options, function(){
            recursiveAddHtmlAndSave(currentRecursion, numRecursionsNeeded);
        });
           
           
           
           
           
        
        });

});
    
    
    $('#download_word').click(function() {
         /*var pdf = new jsPDF('p', 'pt',  [PDF_Width, PDF_Height]);
         var len=$("#total_count").val();
         
         for (var k = 0; k <= len; k++) { 
          if(k < len)    
          {
             
        var HTML_Width = $(".export_div").width();
        var HTML_Height = $(".export_div").height();
        var top_left_margin = 15;
        var PDF_Width = HTML_Width+(top_left_margin*2);
        var PDF_Height = (PDF_Width*1.5)+(top_left_margin*2);
        var canvas_image_width = HTML_Width;
        var canvas_image_height = HTML_Height;
        var totalPDFPages = Math.ceil(HTML_Height/PDF_Height)-1;
     
    html2canvas($(".export_div")[k],{allowTaint:true}).then(function(canvas) {      
      canvas.getContext('2d');
       var options = {
              pagesplit: true
          };
      var imgData = canvas.toDataURL("image/jpeg", 1.0);
      var pdf = new jsPDF('p', 'pt',  [PDF_Width, PDF_Height]);
        pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin,canvas_image_width,canvas_image_height);
     for (var i = 1; i <= totalPDFPages; i++) { 
        pdf.addPage(PDF_Width, PDF_Height);
        pdf.addImage(imgData, 'JPG', top_left_margin, -(PDF_Height*i)+(top_left_margin*4),canvas_image_width,canvas_image_height);
      }
        pdf.save('sample-file.pdf');
        });
          }
        
          }*/
          
          $(".export_div").wordExport();

});

</script>

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