benjamin.harris
/
soil-report-ai


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258
							<!doctype html>
<html lang="en">

    <head>
        <title>Soil Test Analysis Report | [[++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="container">
                                <h3 id="forms-example" class="">[[*longtitle]]</h3>

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

                                [[!clientDetailsFORM]]

                                <form method="post" action="#" id="SoilcsvForm" class="needs-validation" novalidate > <!-- ~[*id*]~] [~34~]] -->

                                    [[!Personalize?
                                    &yesChunk=`analysisLogged_Clientdetails`
                                    &noChunk=`analysis_Clientdetails`
                                    ]]

                                    <hr>

                                    [[$soilAnalysisForm]]

                                    <button form="SoilcsvForm" type="submit" name="SoilcsvForm" class="btn btn-success">Submit</button>
                                </form>

                                <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>


                                [[!soilformSubmit]]

                                [[!newClientDetails]]


                                <!-- ************************ 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("#SoilcsvForm 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 csvname = fname+".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>

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