<!DOCTYPE html>
<html lang="en">

<head>
    <title>ackl.gui</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/static/bootstrap.css">
    <script src="/static/jquery-3.3.1.min.js"></script>
    <script src="/static/bootstrap.js"></script>
    <script src="/static/jquery.blockUI.js"></script>
    <script src="/static/jquery.form.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

    <script>
        $(function () {
            $("#form_main").submit(function () {

            // use sample dataset
            var use_sample = $('#use_sample').val();
            if (use_sample) {
                $.blockUI({ message: '<h4>' + 'Processing' + '</h4>', fadeIn: 0 });
                return true;
            }

            var filepath = $("input[name='dataFile']").val();
            var extStart = filepath.lastIndexOf(".");
            var ext = filepath.substring(extStart, filepath.length).toUpperCase();
            if (ext != ".CSV") {
                alert('Only support CSV file!');
                return false;
            }

            $.blockUI({ message: '<h4>' + 'Analyzing' + '</h4>', fadeIn: 0 });
            });

            var options = {
            type: 'POST',
            success: function (obj) {
                // console.log(obj);
                if (obj && obj["html"]) {
                    $('#cla_result').html(obj["html"]);
                }
                else if (obj && obj["message"]) {
                    $('#cla_result').html(obj["message"]);
                }
                else {
                    $('#cla_result').html(obj);
                }
                $.unblockUI();
            }
            };

            $('#form_main').ajaxForm(options);

            $('#dataFile').change(function () {
            $('#dataFileCover').val($(this).val());
            });
        });


    </script>

    <style>
        td {
            text-align: center;
            vertical-align: middle;
        }

        img {
            max-width: 100%;
            max-height: 100%;
        }

        .slider {
            -webkit-appearance: none;
            width: 100%;
            height: 15px;
            border-radius: 5px;
            background: #d3d3d3;
            outline: none;
            opacity: 0.7;
            -webkit-transition: .2s;
            transition: opacity .2s;
        }

        .slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background: #4CAF50;
            cursor: pointer;
        }

        .slider::-moz-range-thumb {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background: #4CAF50;
            cursor: pointer;
        }

        footer {
            display: none;
        }
    </style>

</head>

<body>
    <div>
        <br />
        <div class="row p-2 m-2">
            <div class="col-3">
                <form id="form_main" class="form-horizontal" action="/submit" method="post" enctype="multipart/form-data">

                    <div class="card">
                        <h6 class="card-header">
                            Analyze the built-in Dataset
                        </h6>                        
                        
                        <div class="card-body">
                            <h6>
                                Use the table salt Raman dataset.
                                <br/>Select a kernel type
                            </h6>
                            <select name="kernel_type" class="form-control">
                                <option value="linear">linear</option>
                                <option value="poly">poly</option>
                                <option value="sigmoid">sigmoid</option>
                                <option value="gaussian">gaussian</option>
                                <option value="laplace">laplace</option>
                                <option value="matern">matern</option>
                                <option value="chi2">chi2</option>
                                <option value="achi2">achi2</option>
                                <option value="wave">wave</option>
                                <option value="ess">ess</option>
                                <option value="rq">rq</option>
                                <option value="imq">imq</option>
                                <option value="cauchy">cauchy</option>
                                <option value="ts">ts</option>
                                <option value="anova">anova</option>
                                <option value="min">min</option>
                                <option value="minmax">minmax</option>
                                <option value="expmin">expmin</option>
                                <option value="ghi">ghi</option>
                                <option value="spline">spline</option>
                                <option value="sorensen">sorensen</option>
                                <option value="tanimoto">tanimoto</option>
                                <option value="fourier">fourier</option>
                                <option value="wavelet">wavelet</option>
                                <option value="circular">circular</option>
                                <option value="spherical">spherical</option>
                                <option value="log">log</option>
                                <option value="power">power</option>
                                <option value="bessel">bessel</option>
                                <option value="fejer">fejer</option>
                                <option value="all">all</option>
                            </select>

                            <br />

                            <input type="hidden" id="use_sample" name="use_sample" value="false" />
                            <input type="submit" class="btn btn-default btn-outline-dark"
                                onclick="$('#use_sample').val(true);" value="Submit" />
                        </div>
                    </div>

                    <br />

                    <div class="card">
                        <h6 class="card-header">
                            Analyze Your Own Dataset
                        </h6>

                        <div class="card-body">

                            <h6 onclick="$('#dataFile').click();">Upload Data File</h6>
                            <p>
                                The file should use the csv
                                <a href="#modelDatasets" data-toggle="modal">format</a>.
                                Check this <a href="/static/sample.csv">example</a>.
                            </p>

                            <input type="file" name="dataFile" id="dataFile" style="display:none" />
                            <input type="text" id="dataFileCover" onclick="$('#dataFile').click();" class="input-large"
                                style="height:30px; width: 100%; color: lightgray" value="click here to upload ...">
                            <br /><br />


                            <div class="btn-group">
                                <input class="btn btn-default btn-outline-dark" type="submit"
                                    onclick="$('#use_sample').val(false);" value="Submit" />
                                <!--input class="btn btn-default btn-outline-dark" type="submit" value="Test with sample file" -->
                            </div>

                        </div>
                    </div>

                </form>

                <hr />
                <p>
                    © ackl.gui (oo@zju.edu.cn)
                </p>
            </div>
            <div class="col-6">
                <div class="card">
                    <h6 class="card-header">Result</h6>
                    <div class="card-body">
                        <div id="cla_result">
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-3">
                <div class="card">
                    <h6 class="card-header">QuickStart</h6>
                    <div class="card-body" id="div_instruction">

                        <table class="table table-light">
                            <tbody>
                                <tr>
                                    <th>Mode 1 - Use the built-in dataset (table salt dataset)</th>
                                </tr>

                                <tr>

                                    <td>
                                        1.
                                        Choose a kernel type.
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        2.
                                        Click "Submit". The server will analyze the built-in dataset using the selected kernel.
                                    </td>
                                </tr>
                                <tr>
                                    <th>Mode 2 - Upload and analyze your own dataset</th>
                                </tr>
                                <tr>

                                    <td>
                                        1.
                                        Prepare a dataset in the required <a href="#modelDatasets"
                                            data-toggle="modal">format</a>.
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        2.
                                        Click "Submit". The server will analyze the dataset and send back the result.
                                    </td>
                                </tr>

                            </tbody>
                        </table>
                    </div>

                </div>



            </div>

            <a href="https://github.com/zhangys11/cla" class="github-corner" aria-label="View source on Github">
                <svg width="60" height="60" viewBox="0 0 250 250"
                    style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
                    <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
                    <path
                        d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
                        fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
                    <path
                        d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
                        fill="currentColor" class="octo-body"></path>
                </svg>
            </a>
        </div>
    </div>


    <!-- Modal -->
    <div class="modal fade" id="modelDatasets" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Data File Format Specification</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>The file should be in csv format. Example:</p>

                    <div>
                        <pre>Label,X1,X2,X3
1,190.99,153.095,81.492
1,202.975,157.018,67.032
0,244.156,198.137,118.996
0,461.43,413.972,345.92                            
</pre>
                    </div>
                    Note: <i>1. Use comma delimiter. 2. The first column is Y(label). All others are X features. </i>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

</body>

</html>