{% extends "base.html" %}

{% block extra_header %}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.15.0/css/mdb.min.css">
{% endblock %}

{% block title%}Data Analysis{% endblock %}

{% block center_content %}
    <script>
        function getMultipleSelectValues(selectElement){
            let r = new Array();
            let options = selectElement.options;
            for(let i=0; i<options.length; i++){
                if(options[i].selected && options[i].value.trim().length > 0){
                    r.push(options[i].value);
                }
            }
            return r;
        }

        window.addEventListener('DOMContentLoaded', (event) => {
           let socket = io.connect(window.location.protocol + "//" + window.location.host + "/" + '{{uuid}}');

           let trans_empty_chart = Highcharts.chart('trans_m2_plot', options);
           let trans_sample_chart = Highcharts.chart('trans_m3_plot', options);
           let trans_calc_chart = Highcharts.chart('trans_calc_plot', options);

            document.getElementById('trans_plot').addEventListener('click', (event) => {
                let elem_sample = document.getElementById('Trans_SampleTransRun');
                let runs_sample = getMultipleSelectValues(elem_sample);

                let elem_empty = document.getElementById('Trans_EmptyTransRun');
                let runs_empty = getMultipleSelectValues(elem_empty);

                let trans_elem = document.getElementById('trans');
                let input_elems = trans_elem.querySelectorAll('input');

                if(runs_sample.length && runs_empty.length){
                    let job={};
                    job["action"] = "transPlot";
                    job.facility = facility;
                    job.instrument = instrument;
                    job.proposal = proposal;
                    job['Trans_SampleTransRun'] = runs_sample;
                    job['Trans_EmptyTransRun'] = runs_empty;
                    job['event'] = 'trans_plot' 
                    input_elems.forEach((elem) => {
                        job[elem.name]=elem.value;
                    });

                   socket.emit('trans_plot', job);
                } 
                else if(!runs_sample.length){
                    elem_sample.focus();
                }
                else if(!runs_empty.length){
                    elem_empty.focus();
                }
            });

            document.getElementById('trans_calc').addEventListener('click', (event) => {
                let job={};
                let trans_elem = document.getElementById('trans');
                let input_elems = trans_elem.querySelectorAll('input');
                let select_elems = trans_elem.querySelectorAll('select');

                job["action"] = "transCalc";
                job.facility = facility;
                job.instrument = instrument;
                job.proposal = proposal;

                input_elems.forEach((elem) => {
                    job[elem.name]=elem.value;
                });

                select_elems.forEach((elem) => {
                    if(elem.multiple){
                        let runs = getMultipleSelectValues(elem);
                        if(runs.length){
                            job[elem.name] = runs;
                        }
                    }else{
                        job[elem.name]=elem.options[elem.options.selectedIndex].value;
                    }
                });

                if(!('Trans_EmptyTransRun' in job)){
                    document.getElementById('Trans_EmptyTransRun').focus();
                    return false;
                }

                if(!('Trans_SampleTransRun' in job)){
                    document.getElementById('Trans_SampleTransRun').focus();
                    return false;
                }

                job['event'] = 'trans_calc' 

                socket.emit('trans_calc', job);
                //console.log(job);

            });

           socket.on('connect', function(){
              //socket.emit('update');
           });
           
           socket.on('trans_plot', function(data){
               trans_empty_chart.update(data['series1'], true, true);
               trans_sample_chart.update(data['series2'], true, true);
               //console.log(data);
           });
                       
           socket.on('trans_calc', function(data){
               trans_calc_chart.update(data, true, true);
               console.log(data);
           });
        });
	</script>
    <h1 class="text-center mb-2">Analyze Data</h1>
    {{uuid}}
    
    <div class="row">
        <div class="col-md-6">
            <div id="trans">
                <div class="row text-info mb-2">Transmission</div>
                <div class="row mb-2">
                    <div class="col">
                        <label class="pl-2">Empty Trans Run(s)</label>
                    </div>
                    <div class="col-md-6">
                        <select id="Trans_EmptyTransRun" name="Trans_EmptyTransRun" class="custom-select" multiple>
                            <option value="" selected>Please select a run</option>
                        </select>
                    </div>
                    <div class="col">
                        <button id="trans_plot_empty" type="button" class="btn btn-primary">Plot</button>
                    </div>
                </div>
                <div class="row mb-2">
                    <div class="col">
                        <label class="pl-2">Sample Trans Run(s)</label>
                    </div>
                    <div class="col-md-6">
                        <select id="Trans_SampleTransRun" name="Trans_SampleTransRun" class="custom-select" multiple>
                            <option value="" selected>Please select a run</option>
                        </select>
                    </div>
                    <div class="col">
                        <button id="trans_plot" type="button" class="btn btn-primary">Plot</button>
                    </div>
                </div>
                <div class="row mb-2">
                    <div class="col">
                        <label class="pl-2">Fitting Method</label>
                    </div>
                    <div class="col-md-6">
                        <select name="Trans_TransFittingMethod" class="custom-select">
                            <option value="Linear" selected>Linear</option>
                            <option value="Raw">Raw</option>
                            <option value="Smooth">Smooth</option>
                        </select>
                    </div>
                    <div class="col"></div>
                </div>
                <div class="row mb-2">
                    <div class="col">
                        <label class="pl-2">Wave Length Min</label>
                    </div>
                    <div class="col-md-6">
                        <input type="number" name="Trans_Wavelength_Min" value="1.5" class="w-100"/>
                    </div>
                    <div class="col">&#8491;</div>
                </div>
                <div class="row mb-2">
                    <div class="col">
                        <label class="pl-2">Wave Length Max</label>
                    </div>
                    <div class="col-md-6">
                        <input type="number" name="Trans_Wavelength_Max" value="8.0" class="w-100"/>
                    </div>
                    <div class="col">&#8491;</div>
                </div>
                <div class="row mb-2">
                    <div class="col">
                        <label class="pl-2">Wave Length Step</label>
                    </div>
                    <div class="col-md-6">
                        <input type="number" name="Trans_Wavelength_Step" value="0.2" class="w-100"/>
                    </div>
                    <div class="col">&#8491;</div>
                </div>
                <div class="row mb-2">
                    <div class="col-md-4"></div>
                    <div class="col">
                        <button id="trans_calc" type="button" class="btn btn-primary">Calculate</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col">
            <div id="trans_m2_plot" class="mb-2" style="height: 200px;"></div>
            <div id="trans_m3_plot" class="mb-2" style="height: 200px;"></div>
            <div id="trans_calc_plot" class="mb-2" style="height: 200px;"></div>
        </div>
    </div> 
	

{% endblock %}

{% block scripts %}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/highcharts-more.js"></script>
    <script src="https://code.highcharts.com/modules/heatmap.js"></script>
    <script src="https://code.highcharts.com/modules/boost.js"></script>
    <script src="https://code.highcharts.com/modules/data.js"></script>
    <script src="https://code.highcharts.com/modules/series-label.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/export-data.js"></script>
    <script src="https://code.highcharts.com/modules/accessibility.js"></script>
{% endblock %}