benjamin.harris
/
soil-report-ai


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
							<!doctype html>
<html lang="en">
	<head>
		<title>[[*longtitle]] | [[++site_name]]</title>
		<base href="[[!++site_url]]" >
		<meta charset="[[++modx_charset]]" >
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" >
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
		<meta name="keywords" content="[[*introtext]]" >
		<meta name="description" content="[[*description]]" >

		[[!Profile]]
		
		[[$dash-header]]
		
		<link href="/client-assets/css/dashboard.css" rel="stylesheet" type="text/css" />
		<script src="https://unpkg.com/gijgo@1.9.11/js/gijgo.min.js" type="text/javascript"></script>
		<link href="https://unpkg.com/gijgo@1.9.11/css/gijgo.min.css" rel="stylesheet" type="text/css" />
		<script src="client-assets/js/skycons.js" type="text/javascript"></script>
    
        <link href="client-assets/home/css/graphing.css" rel="stylesheet" type="text/css" media="screen" />
        <link href="client-assets/home/css/alux.min.css" rel="stylesheet" type="text/css" media="screen" />
        
        <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.3/html2pdf.bundle.min.js" integrity="sha512-YcsIPGdhPK4P/uRW6/sruonlYj+Q7UHWeKfTAkBW+g83NKM+jMJFJ4iAPfSnVp7BKD4dKMHmVSvICUbE/V1sSw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

        <style>
            @media print {
                @page {
                    size: A4 portrait;
                }
                @page :left {
                    margin-left: 0.5cm;
                }
                @page :right {
                    margin-right: 0.5cm;
                }
                @page :top {
                    margin-top: 0cm;
                }
                @page :bottom {
                    margin-bottom: 0cm;
                }
            }
        </style>

    </head>
<body>

<div class="container pagebreak">
    <div class="row">
        [[!logoHeader]]
    </div>
    
    <div class="row">
        <div class="col-md-12 text-center font-weight-bold h4" >ANALYSIS RESULTS</div>
    </div>
    
    <hr class="p-1 m-1">
    
    <div class="row p-3">
        <div class="col-md-6 border ">
            <div class="row h4 text-center">Base Saturation</div>
            <div class="row">Body</div>
        </div>
        <div class="col-md-6 border ">
            <div class="row h4 text-center">Header</div>
            <div class="row">Body</div>
        </div>
    </div>
    
    <hr class="p-1 m-1">
    
    <table class="chart">
        <tbody>
          <tr class="chart-header">
            <th colspan=3 class="text-center col-md-6 border-left border-right border-top">ELEMENT</th>
            <th colspan=3 class="text-center col-md-6 border-right border-top">STATUS</th>
          </tr>
          
          <tr class="chart-header-sub">
            <th class="text-center col-18 border-left"></th>
            <th class="text-center col-15">DESIRED</th>
            <th class="text-center col-15">FOUND</th>
            <th class="text-center col-16 stripe-1">LIGHT</th>
            <th class="text-center col-16 stripe-1">MEDIUM</th>
            <th class="text-center col-16 border-right stripe-1">HEAVY</th>
          </tr>
          
          <tr>
            <td class="border-left"></td>
            <td class="border-left"></td>
            <td class="border-left nutrient-balance"></td>
            <td class="border-left"></td>
            <td class="border-left"></td>
            <td class="border-left border-right"></td>
          </tr>
          
          <tr class="chart-header-sub">
            <th colspan=3 class="col-16 border-left text-center lightblue">RATIOS</th>
            <th class="text-center col-16 stripe-1"></th>
            <th class="text-center col-16 stripe-1"></th>
            <th class="text-center col-16 border-right stripe-1"></th>
          </tr>
          
          
          <!-- Ca : Mg -->
          [[!soilAnalysisRatio? &element=`ca_mehlick3` &elementTwo=`mg_mehlick3` &sbl=`` &rec=`ca_mg_ratio` &nutrient=`Ca:Mg Ratio` &min=`` &max=`` &text=`y` &rec_text=`r` &decimal=`1` &graph=lightblueGraph]]
          <!-- Mg : K -->
          [[!soilAnalysisRatio? &element=`mg_mehlick3` &elementTwo=`k_mehlick3` &sbl=`` &rec=`c_n_ratio` &nutrient=`Mg:K Ratio `&type=`:1` &min=`` &max=`` &text=`y` &rec_text=`r` &decimal=`1` &graph=lightblueGraph]]
          <!-- K : Na -->
          [[!soilAnalysisRatio? &element=`k_mehlick3` &elementTwo=`na_mehlick3` &sbl=`` &rec=`c_n_ratio` &nutrient=`K:Na Ratio `&type=`:1` &min=`` &max=`` &text=`y` &rec_text=`r` &decimal=`1` &graph=lightblueGraph]]
          
          <!-- P : S -->
          [[!soilAnalysisRatio? &element=`k_mehlick3` &elementTwo=`na_mehlick3` &sbl=`` &rec=`c_n_ratio` &nutrient=`P:S Ratio `&type=`:1` &min=`` &max=`` &text=`y` &rec_text=`r` &decimal=`1` &graph=lightblueGraph]]
          <!-- P : Zn -->
          [[!soilAnalysisRatio? &element=`k_mehlick3` &elementTwo=`na_mehlick3` &sbl=`` &rec=`c_n_ratio` &nutrient=`P:Zn Ratio `&type=`:1` &min=`` &max=`` &text=`y` &rec_text=`r` &decimal=`1` &graph=lightblueGraph]]
          <!-- Fe : Mn -->
          [[!soilAnalysisRatio? &element=`k_mehlick3` &elementTwo=`na_mehlick3` &sbl=`` &rec=`c_n_ratio` &nutrient=`Fe:Mn Ratio `&type=`:1` &min=`` &max=`` &text=`y` &rec_text=`r` &decimal=`1` &graph=lightblueGraph]]
          <!-- Ca : Mg -->
          [[!soilAnalysisRatio? &element=`ocarbon` &elementTwo=`NO3_N` &sbl=`` &rec=`c_n_ratio` &nutrient=`C:N Ratio `&type=`:1` &min=`` &max=`` &text=`y` &rec_text=`r` &decimal=`1` &graph=lightblueGraph]]
          
          [[!soilAnalysisCalcs? &element=`NH3_N` &sbl=`` &nutrient=`Total Nitrogen` &type=`%` &min=`` &max=`` &text=`c` &rec_text=`r` &decimal=`1` &graph=lightblueGraph]]
          [[!soilAnalysisCalcs? &element=`ocarbon` &sbl=`` &nutrient=`Total Carbon` &type=`%` &min=`` &max=`` &text=`c` &rec_text=`r` &decimal=`1` &graph=lightblueGraph]]
          
          
          <tr>
            <td class="border-bottom border-left"></td>
            <td class="border-bottom border-left"></td>
            <td class="border-bottom border-left nutrient-balance"></td>
            <td class="border-bottom border-left"></td>
            <td class="border-bottom border-left"></td>
            <td class="border-bottom border-left border-right"></td>
          </tr>
        </tbody>
    </table>
</div>

</div>

    <!-- 
    <script src="https://cloud.tinymce.com/stable/tinymce.min.js?apiKey=xcotawi18mg1imp8im144buq68h9g3ndd3c9c8215w8qu3ld"></script>
    <script>
        tinymce.init({
            selector: 'textarea',
            menubar: false,
            toolbar: 'bold italic  | alignleft aligncenter alignright alignjustify | bullist numlist | removeformat',
            plugins: 'autosave',
            autosave_interval: '20s'
        });
    </script>
    -->
    
    [[$dash-footer]]
    
    <script>
        //https://github.com/eKoopmans/html2pdf.js
        $('.downloadPDF').click(function () {
        	var element = document.getElementById('content'); //document.createElement("body");
        	element.classList.remove('screen');
        	element.classList.add('print');
        	var opt = {
        		margin:       3,
        		filename:     'soil-analysis.pdf',
        		image:        { type: 'jpeg', quality: 1.0 },
        		html2canvas:  { scale: 2, letterRendering: true, windowWidth: 1024 },  //, windowWidth: 1024
        		jsPDF:        { orientation: 'portrait', unit: 'mm', format: 'a4', putOnlyUsedFonts: true, floatPrecision: 'smart', }
        	};
        	html2pdf()
        	    .from(element)
        	    .toPdf()
        	    .set(opt)
        	    .save()
        	    .then(function(){
        		    element.classList.remove('print');
        		    element.classList.add('screen');
        	});
        	
        });
    </script>
</body>
</html>