benjamin.harris
/
soil-report-ai


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507
							<!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]]">
	<link rel="icon" href="client-assets/images/favicon.ico?v=2" type="image/x-icon"> [[!Profile]]
	
	<script type="text/javascript">
    	window.dataLayer = window.dataLayer || [];
    
    	function gtag() {
    		dataLayer.push(arguments);
    	}
    	gtag('js', new Date());
    	gtag('set', {
    		'user_id': '[[+modx.user.id]]'
    	}); // Set the user ID using signed-in user_id.
    	gtag('config', 'UA-133963301-1');
	</script>
	
	<link href="https://cdn.jsdelivr.net/npm/simple-datatables@latest/dist/style.css" rel="stylesheet" />
	<link href="client-assets/css/dashboard-2021.css" rel="stylesheet" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js" crossorigin="anonymous"></script>
	<link href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" rel="stylesheet" crossorigin="anonymous" />
	<script src="client-assets/js/skycons.js"></script>
	<style>
    	.btn-append {
    		color: #495057;
    		background-color: #e9ecef;
    		border: 1px solid #ced4da;
    	}
    	.footer {
    		position: absolute;
    		bottom: 0;
    		width: 100%;
    		height: 60px;
    		line-height: 60px;
    	}
	</style>
</head>

<body class="sb-nav-fixed" id="page-top"> 
    [[!Personalize?
        &yesChunk=`navHeaderLogged`
        &noChunk=`navHeader`
        &allowedGroups=`basicClients,bacicAdmin,companyClients,companyManagers`
    ]]
    
	<div id="layoutSidenav">
	    <div id="layoutSidenav_nav">
    		<!-- Sidebar -->
    		[[Wayfinder?
    		    &startId=`2` 
        		&displayStart=`0` 
        		&startitemTpl=`startitemTpl` 
        		&selfClass=`show` 
        		&level=`2`
        		&outerTpl=`outer`
        		    &outerClass=`sb-sidenav accordion sb-sidenav-dark`
        		&rowTpl=`row`
        		    &rowClass=`nav-link`
        		&parentRowTpl=`parentRow`
        		    &parentClass=`nav-link collapsed`
        		&innerTpl=`inner`
        		    &innerClass=`collapse`
        		&innerRowTpl=`secondInner`
        		    &innerRowClass=`nav-link`
    		]]
        </div>
		
		<div id="layoutSidenav_content">
			<main>

				<div class="container-fluid px-4">
				    <h1 class="mt-4">[[*pagetitle]]</h1>

					<ol class="breadcrumb mb-4"> [[$dash-breadcrumbs]] </ol>
					
					<div class="row">
					    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js" integrity="sha256-gfQwA6PlkZsLqWu4bU4hXPrbTqzixm0B5MdvBLI+Oas=" crossorigin="anonymous"></script>

<div class="grid-form1">
<h3 id="forms-example" class="">[[*longtitle]]</h3>

<span class="error">* required fields.</span>

<form method="post" action="[[~34~]]" id="WatercsvForm"class="needs-validation" novalidate >

    [[!Personalize?
        &yesChunk=`analysisLogged_Clientdetails`
        &noChunk=`analysis_Clientdetails`
    ]]
    
    <hr>
    
    <div class="row">
    
    <div class="col ">
        <small id="lab_no" class="form-text text-muted">Lab No</small>
        <div class="input-group input-group-sm mb-3">
            <input type="text" class="form-control form-control-sm" name="lab_no" id="lab_no" placeholder="Lab No"></input>
        
        </div>
    </div>
    
    <div class="col ">
        <small id="batch_no" class="form-text text-muted">Batch No</small>
        <div class="input-group input-group-sm mb-3">
            <input type="text" class="form-control form-control-sm" name="batch_no" id="batch_no" placeholder="Batch No"></input>
            
        </div>
    </div>
    <div class="col ">
        <small id="date_sampled" class="form-text text-muted">Date Sampled</small>
        <input data-provide="datepicker" class="form-control form-control-sm" name="date_sampled" id="datepicker" placeholder="Date Sampled" data-date-format="dd/mm/yyyy" data-date-end-date="0d" ></input>
        <script>
            $('#datepicker').datepicker({
                uiLibrary: 'bootstrap4',
                calendarWeeks: 'true',
                todayHighlight: 'true'
            });
        </script>
    </div>
    
    <!-- Hidden Fields for Database -->
    <input type="hidden" class="form-control form-control-sm" name="m_user" id="m_user" placeholder="[[+modx.user.id]]" required>
    <input type="hidden" class="form-control form-control-sm" name="client_id" id="client_id" placeholder="[[+modx.user.username]]" required>

    <div class="col ">
        <small id="lab_no" class="form-text text-muted">Sample ID<span class="error">*</span></small>
        <input type="text" class="form-control form-control-sm" name="sample_id" id="sample_id" placeholder="Sample Id" required></input>
    </div>
    
    <div class="col ">
        <small id="lab_no" class="form-text text-muted">Site ID</small>
        <input type="text" class="form-control form-control-sm" name="site_id" id="site_id" placeholder="Paddock Id"></input>
    </div>

</div>

<hr>

<label class="col"><b>Analysis Inputs</b></label>
		
<div class="row">
	<div class=" col-md-2">
	<small id="phSmall" class="form-text text-muted">pH</small>
        <div class="input-group input-group-sm mb-3">
            <input type="text" class="form-control form-control-sm" name="ph" id="ph" placeholder="pH" required></input>
	    <div class="input-group-append">
                <input class="btn btn-append" type="button" value="pH" ></input>
            </div>
        </div>
    </div>
    
    <div class=" col-md-2">
	<small id="phSmall" class="form-text text-muted">Conductivity</small>
        <div class="input-group input-group-sm mb-3">
            <input type="text" class="form-control form-control-sm" name="ph" id="ph" placeholder="pH" required></input>
	    <div class="input-group-append">
                <input class="btn btn-append" type="button" value="pH" ></input>
            </div>
        </div>
    </div>
</div>

<div class="row">    
	<div class=" col-md-2">
	<small id="nSmall" class="form-text text-muted">Nitrogen</small>
        <div class="input-group input-group-sm mb-3">
            <input type="text" class="form-control form-control-sm" name="n" id="n" placeholder="N - Nitrogen" required></input>
	    <div class="input-group-append">
                <input class="btn btn-append" type="button" id="nitrogen" value="ppm" onClick="conversion(this, nitrogen, n, 10000)" ></input>
            </div>
        </div>
    </div>

	<div class=" col-md-2">
	<small id="p" class="form-text text-muted">Phosphorus</small>
        <div class="input-group input-group-sm mb-3">
            <input type="text" class="form-control form-control-sm" name="p" id="p" placeholder="P - Phosphorus" required></input>
	    <div class="input-group-append">
                <input class="btn btn-append" type="button" id="phosphorus" value="ppm" onClick="conversion(this, phosphorus, p, 10000)" ></input>
            </div>
        </div>
    </div>
	
	<div class=" col-md-2">
	<small id="k" class="form-text text-muted">Postassium</small>
        <div class="input-group input-group-sm mb-3">
            <input type="text" class="form-control form-control-sm" name="k" id="k" placeholder="K - Postassium" required></input>
	    <div class="input-group-append">
                <input class="btn btn-append" type="button" id="postassium" value="ppm" onClick="conversion(this, postassium, k, 10000)" ></input>
            </div>
        </div>
    </div>
	
	<div class=" col-md-2">
	<small id="s" class="form-text text-muted">Sulphur</small>
        <div class="input-group input-group-sm mb-3">
            <input type="text" class="form-control form-control-sm" name="s" id="s" placeholder="S - Sulphur"></input>
	    <div class="input-group-append">
                <input class="btn btn-append" type="button" id="sulphur" value="ppm" onClick="conversion(this, sulphur, s, 10000)" ></input>
            </div>
        </div>
    </div>
	
	<div class=" col-md-2">
	<small id="mg" class="form-text text-muted">Magnesium</small>
        <div class="input-group input-group-sm mb-3">
            <input type="text" class="form-control form-control-sm" name="mg" id="mg" placeholder="Mg - Magnesium"></input>
	    <div class="input-group-append">
                <input class="btn btn-append" type="button" id="magnesium" value="ppm" onClick="conversion(this, magnesium, mg, 10000)" ></input>
            </div>
        </div>
    </div>
	
	<div class=" col-md-2">
    	<small id="ca" class="form-text text-muted">Calcium</small>
        <div class="input-group input-group-sm mb-3">
            <input type="text" class="form-control form-control-sm" name="ca" id="ca" placeholder="Ca - Calcium"></input>
	    <div class="input-group-append">
                <input class="btn btn-append" type="button" id="calcium" value="ppm" onClick="conversion(this, calcium, ca, 10000)" ></input>
            </div>
        </div>
    </div>
</div>


<div class="row">
	<div class=" col-md-2">
		<small id="na" class="form-text text-muted">Soduim</small>
        <div class="input-group input-group-sm mb-3">
            <input type="text" class="form-control form-control-sm" name="na" id="na" placeholder="Na - Soduim"></input>
    	<div class="input-group-append">
                <input class="btn btn-append" type="button" id="soduim" value="ppm" onClick="conversion(this, soduim, na, 10000)" ></input>
            </div>
        </div>
    </div>
	
	<div class=" col-md-2">
		<small id="fe" class="form-text text-muted">Iron</small>
        <div class="input-group input-group-sm mb-3">
            <input type="text" class="form-control form-control-sm" name="fe" id="fe" placeholder="Fe - Iron"></input>
    	<div class="input-group-append">
                <input class="btn btn-append" type="button" id="iron" value="ppm" onClick="conversion(this, iron, fe, 10000)" ></input>
            </div>
        </div>
    </div>
	
	<div class=" col-md-2">
		<small id="mn" class="form-text text-muted">Manganese</small>
        <div class="input-group input-group-sm mb-3">
            <input type="text" class="form-control form-control-sm" name="mn" id="mn" placeholder="Mn - Manganese"></input>
    	<div class="input-group-append">
                <input class="btn btn-append" type="button" id="manganese" value="ppm" onClick="conversion(this, manganese, mn, 10000)" ></input>
            </div>
        </div>
    </div>
	
	<div class=" col-md-2">
		<small id="zn" class="form-text text-muted">Zinc</small>
        <div class="input-group input-group-sm mb-3">
            <input type="text" class="form-control form-control-sm" name="zn" id="zn" placeholder="Zn - Zinc"></input>
    	<div class="input-group-append">
                <input class="btn btn-append" type="button" id="zinc" value="ppm" onClick="conversion(this, zinc, zn, 10000)" ></input>
            </div>
        </div>
    </div>
	
	<div class=" col-md-2">
		<small id="cu" class="form-text text-muted">Copper</small>
        <div class="input-group input-group-sm mb-3">
            <input type="text" class="form-control form-control-sm" name="cu" id="cu" placeholder="Cu - Copper"></input>
    	<div class="input-group-append">
                <input class="btn btn-append" type="button" id="copper" value="ppm" onClick="conversion(this, copper, cu, 10000)" ></input>
            </div>
        </div>
    </div>
	
	<div class=" col-md-2">
		<small id="b" class="form-text text-muted">Boron</small>
        <div class="input-group input-group-sm mb-3">
            <input type="text" class="form-control form-control-sm" name="b" id="b" placeholder="B - Boron"></input>
    	<div class="input-group-append">
                <input class="btn btn-append" type="button" id="boron" value="ppm" onClick="conversion(this, boron, b, 10000)" ></input>
            </div>
        </div>
    </div>
</div>

<div class="row">
	<div class=" col-md-2">
		<small id="m" class="form-text text-muted">Molybdenum</small>
        <div class="input-group input-group-sm mb-3">
            <input type="text" class="form-control form-control-sm" name="m" id="m" placeholder="M - Molybdenum"></input>
     	<div class="input-group-append">
                <input class="btn btn-append" type="button" id="molybdenum" value="ppm" onClick="conversion(this, molybdenum, m, 10000)" ></input>
            </div>
        </div>
    </div>
	
	<div class=" col-md-2">
		<small id="co" class="form-text text-muted">Cobalt</small>
        <div class="input-group input-group-sm mb-3">
            <input type="text" class="form-control form-control-sm" name="co" id="co" placeholder="Co - Cobalt"></input>
	 	<div class="input-group-append">
                <input class="btn btn-append" type="button" id="cobalt" value="ppm" onClick="conversion(this, cobalt, co, 10000)" ></input>
            </div>
        </div>
    </div>
	
	<div class=" col-md-2">
		<small id="se" class="form-text text-muted">Selenium</small>
        <div class="input-group input-group-sm mb-3">
            <input type="text" class="form-control form-control-sm" name="se" id="se" placeholder="Se - Selenium"></input>
	 	<div class="input-group-append">
                <input class="btn btn-append" type="button" id="selenium" value="ppm" onClick="conversion(this, selenium, se, 10000)" ></input>
            </div>
        </div>
    </div>
	
	<div class=" col-md-2">
		<small id="ch" class="form-text text-muted">Chloride</small>
        <div class="input-group input-group-sm mb-3">
            <input type="text" class="form-control form-control-sm" name="ch" id="ch" placeholder="Ch - Chloride" required></input>
	 	<div class="input-group-append">
                <input class="btn btn-append" type="button" id="chloride" value="ppm" onClick="conversion(this, chloride, cg, 10000)" ></input>
            </div>
        </div>
    </div>
    
</div>


<script type="text/javascript">
    function conversion(value, input, element, conversion) {
        var Nvalue = document.getElementById(element.id).value;
        var el = document.getElementById(input.id);
        if ( el.value === "%" ) {
            el.value = "ppm";
            document.getElementById(element.id).value = Nvalue*conversion;
        } else {
            el.value = "%";
            document.getElementById(element.id).value = Nvalue/conversion;
        }
    }
</script>
		
 <button id="WatercsvForm" type="submit" class="btn btn-success">Submit</button>
</form>

    [[$waterAnalysisUpload]]

<hr>

<div class="card">
    <div class="card-body">
        <h5 class="card-title">Excel/CSV Upload</h5>
        <p class="card-text">Download a csv of this form for easy filling or upload a filled form to pre-populate.</p>
        <div class="input-group mt-3">
            <div class="custom-file">
                <input type="file" class="custom-file-input" id="upload">
                <label class="custom-file-label border-success" for="upload">Choose file</label>
            </div>
            <div class="input-group-append">
                <button class="btn btn-success" type="button" id="download">Download</button>
            </div>
        </div>
    </div>
</div>

</div>


<!-- ************************ Download Form as CSV ************************ -->
<script>
    document.getElementById("upload").addEventListener("change", upload, false);
    document.getElementById("download").addEventListener("click", download, false);
    
    function upload(e) {
        var data = null;
        var file = e.target.files[0];
        var reader = new FileReader();
        reader.readAsText(file);
        reader.onload = function (event) {
            var csvData = event.target.result;
            var parsedCSV = d3.csv.parseRows(csvData);
            parsedCSV.forEach(function (d, i) {
                if (i == 0) return true; // skip the header
                document.getElementById(d[0]).value = d[1];
            });
        }
    }
    
    function download(e) {
        data = [ ["id","value"]];
        var f = d3.selectAll("#WatercsvForm input, select")[0];
        f.forEach(function(d,i){
          	data.push([d.id, d.value]);
        });
        console.log(data);
        var csvContent = "data:text/csv;charset=utf-8,";
        data.forEach(function (d, i) {
            dataString = d.join(",");
            csvContent += i < data.length ? dataString + "\n" : dataString;
        });
        var url = window.location.pathname;
        var filename = url.substring(url.lastIndexOf('/')+1);
        var fname = filename.split(".")[0];
        var today = new Date();
        var date = today.getDate()+''+(today.getMonth()+1)+''+today.getFullYear();
        var csvname = date+''+"-water.csv";
    
        var encodedUri = encodeURI(csvContent);
        var link = document.createElement("a");
        link.setAttribute("href", encodedUri);
        link.setAttribute("download", csvname);
        link.click();
    }
</script>
<script type="text/javascript">
    // JavaScript for disabling form submission if there are invalid fields
    (function() {
      'use strict';
      window.addEventListener('load', function() {
        // Fetch all the forms we want to apply custom Bootstrap validation styles to
        var forms = document.getElementsByClassName('needs-validation');
        // Loop over them and prevent submission
        var validation = Array.prototype.filter.call(forms, function(form) {
          form.addEventListener('submit', function(event) {
            if (form.checkValidity() === false) {
              event.preventDefault();
              event.stopPropagation();
            }
            form.classList.add('was-validated');
          }, false);
        });
      }, false);
    })();
    
</script>
					</div>

				</div>

			</main>
			
			<footer class="py-4 bg-light mt-auto">
                <div class="container-fluid px-4">
                    <div class="d-flex align-items-center justify-content-between small">
                        <div class="text-muted">[[SimpleCopyright? &startYear=`2003`]]. All Rights Reserved <a href="[[~1]]"></a></div>
                        <div>
                            <a href="[[~39~]]">Privacy Policy</a>
                            &middot;
                            <a href="[[~39~]]">Terms &amp; Conditions</a>
                        </div>
                    </div>
                </div>
            </footer>
            
		</div>

	</div>

	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
	<script>
    	/*!
            * Start Bootstrap - SB Admin v7.0.3 (https://startbootstrap.com/template/sb-admin)
            * Copyright 2013-2021 Start Bootstrap
            * Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-sb-admin/blob/master/LICENSE)
            */
            // 
        // Scripts
        // 
        
        window.addEventListener('DOMContentLoaded', event => {
        
            // Toggle the side navigation
            const sidebarToggle = document.body.querySelector('#sidebarToggle');
            if (sidebarToggle) {
                // Uncomment Below to persist sidebar toggle between refreshes
                // if (localStorage.getItem('sb|sidebar-toggle') === 'true') {
                //     document.body.classList.toggle('sb-sidenav-toggled');
                // }
                sidebarToggle.addEventListener('click', event => {
                    event.preventDefault();
                    document.body.classList.toggle('sb-sidenav-toggled');
                    localStorage.setItem('sb|sidebar-toggle', document.body.classList.contains('sb-sidenav-toggled'));
                });
            }
        
        });

	</script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest" crossorigin="anonymous"></script>
</body>
</html>