{% 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;
        }
        
        let facility = '{{proposal.Investigation.facility.id}}|{{proposal.Investigation.facility.name}}';
        let proposal = '{{proposal.Investigation.id}}|{{proposal.Investigation.name}}';
        let instrument = '{{proposal.Investigation.investigationInstruments[0].instrument.id}}|{{proposal.Investigation.investigationInstruments[0].instrument.name}}'
        
        
        let options = {
            credits: {
                enabled: false
            }
        };

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

           let trans_m2_chart = Highcharts.chart('trans_m2_plot', options);
           let trans_m3_chart = Highcharts.chart('trans_m3_plot', options);
           let cal_trans_chart = Highcharts.chart('cal_trans_plot', options);
           
            document.getElementById('plot_trans_empty_trans').addEventListener('click', (event) => {
                let elem_sample = document.getElementById('trans_sample_trans_runno');
                let runs_sample = getMultipleSelectValues(elem_sample);

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

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

                if(runs_empty.length){
                    let job={};
                    job["action"] = "plot_trans_empty_trans";
                    job.facility = facility;
                    job.instrument = instrument;
                    job.proposal = proposal;
                    //job['trans_sample_trans_runno'] = runs_sample;
                    job['trans_empty_trans_runno'] = runs_empty;
                    job['event'] = 'plot_trans_empty_trans' 
                    input_elems.forEach((elem) => {
                        job[elem.name]=elem.value;
                    });

                   socket.emit('plot_trans_empty_trans', job);
                } 
                //else if(!runs_sample.length){
                //    elem_sample.focus();
                //}
                else if(!runs_empty.length){
                    elem_empty.focus();
                }
            });
            
            document.getElementById('plot_trans_sample_trans').addEventListener('click', (event) => {
                let elem_sample = document.getElementById('trans_sample_trans_runno');
                let runs_sample = getMultipleSelectValues(elem_sample);

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

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

                if(runs_sample.length){
                    let job={};
                    job["action"] = "plot_trans_sample_trans";
                    job.facility = facility;
                    job.instrument = instrument;
                    job.proposal = proposal;
                    job['trans_sample_trans_runno'] = runs_sample;
                    //job['trans_empty_trans_runno'] = runs_empty;
                    job['event'] = 'plot_trans_sample_trans' 
                    input_elems.forEach((elem) => {
                        job[elem.name]=elem.value;
                    });

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

            document.getElementById('cal_trans').addEventListener('click', (event) => {
                let job={};
                let trans_elem = document.getElementById('Tab_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_empty_trans_runno' in job)){
                    document.getElementById('trans_empty_trans_runno').focus();
                    return false;
                }

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

                job['event'] = 'cal_trans' 

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

            });

           socket.on('connect', function(){
              //socket.emit('update');
           });
           
           socket.on('plot_trans_empty_trans', function(data){
               trans_m2_chart.update(data['series1'], true, true);
               trans_m3_chart.update(data['series2'], true, true);
               //console.log(data);
           });
           
           socket.on('plot_trans_sample_trans', function(data){
               trans_m2_chart.update(data['series1'], true, true);
               trans_m3_chart.update(data['series2'], true, true);
               //console.log(data);
           });
                       
           socket.on('cal_trans', function(data){
               cal_trans_chart.update(data, true, true);
               console.log(data);
           });
        });
	</script>
    <h1 class="text-center mb-2">Analyze Data</h1>
    {{uuid}}
    <div class="border border-info mb-2">
        <div class="text-center font-weight-bold border border-info">Proposal Info</div>
        <div class="row">
            <div class="col-md-3">
                <label class="pl-2">ID </label>
            </div>
            <div class="col">{{ proposal.Investigation.id}}</div>
        </div>
        <div class="row">
            <div class="col-md-3">
                <label class="pl-2">Name </label>
            </div>
            <div class="col">{{ proposal.Investigation.name}}</div>
        </div>
        <div class="row">
            <div class="col-md-3">
                <label class="pl-2">Datasets Count </label>
            </div>
            <div class="col">{{ proposal.Investigation.datasets | length}}</div>
        </div>
        <div class="row">
            <div class="col-md-3">
                <label class="pl-2">Title </label>
            </div>
            <div class="col">{{ proposal.Investigation.title }}</div>
        </div>
        <div class="row">
            <div class="col-md-3">
                <label class="pl-2">Facility</label>
            </div>
            <div class="col">{{ proposal.Investigation.facility.name }}</div>
        </div>
        <div class="row">
            <div class="col-md-3">
                <label class="pl-2">Instrument</label>
            </div>
            <div class="col">
                {% for ii in proposal.Investigation.investigationInstruments %}
                    {{ii.instrument.name}} - {{ii.instrument.fullName}} {% if not loop.last %}, {% endif %} 
                {% endfor %}
            </div>
        </div>
        <div class="row">
            <div class="col-md-3">
                <label class="pl-2">User </label>
            </div>
            <div class="col">
                {% for iu in proposal.Investigation.investigationUsers %}
                    {{iu.user.fullName}} {% if not loop.last %}, {% endif %} 
                {% endfor %}
            </div>
        </div>
        <div class="row">
            <div class="col-md-3">
                <label class="pl-2">Start Date </label>
            </div>
            <div class="col">{{ proposal.Investigation.startDate }}</div>
        </div>
        <div class="row">
            <div class="col-md-3">
                <label class="pl-2">End Date </label>
            </div>
            <div class="col">{{ proposal.Investigation.endDate}}</div>
        </div>
        <div class="row">
            <div class="col-md-3">
                <label class="pl-2">Summary </label>
            </div>
            <div class="col text-truncate">{{ proposal.Investigation.summary }}</div>
        </div>
    </div>
    
    <!--
    <ul class="nav nav-tabs">
      <li class="nav-item">
        <a class="nav-link" href="#Tab_Conf">Configuration</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#Tab_Trans">Transmission</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#Tab_IQ">IQ</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#Tab_IQ2D">IQ2D</a>
      </li>
    </ul>
    -->
    
    
    <ul class="nav nav-tabs">
      <li class="nav-item active">
        <a class="nav-link" href="#Tab_Conf" data-toggle="tab">Configuration</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#Tab_Trans" data-toggle="tab">Transmission</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#Tab_IQ" data-toggle="tab">IQ</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#Tab_IQ2D" data-toggle="tab">IQ2D</a>
      </li>
    </ul>
    
    
    <div class="tab-content">
    	
		<div class="tab-pane active" id="Tab_Conf">
			<div class="col-md-6">
			<div class="checkbox" id="is_emptycell">
				<label>
					<input type="checkbox">Emptycell
				</label>
			</div>
			</div>
			<div class="col-md-6">
			<div class="checkbox" id="is_solvent">
				<label>
					<input type="checkbox">Solvent
				</label>
			</div>
			</div>
			<div class="col-md-6">
           <select id="calibration_file" name="calibration_file" class="custom-select">
                 <option value="" selected>Please select a calibration file</option>
                     {% for cal_file in cal_files %}
                         <option value="{{cal_file}}">({{cal_file}})</option> 
                     {% endfor %}
                       <!--{% for dataset in proposal.Investigation.datasets %}
                           <option value="{{dataset.name.strip('__csns__')}}">{{ dataset.name.strip('__csns__RUN') }} ({{dataset.description}})</option> 
                       {% endfor %}-->
           </select>
      </div>
			
			<div class="col-md-6">
           <select id="mask_file" name="mask_file" class="custom-select">
                 <option value="" selected>Please select a mask file</option>
                     {% for mask_file in mask_files %}
                         <option value="{{mask_file}}">({{mask_file}})</option> 
                     {% endfor %}
                       <!--{% for dataset in proposal.Investigation.datasets %}
                           <option value="{{dataset.name.strip('__csns__')}}">{{ dataset.name.strip('__csns__RUN') }} ({{dataset.description}})</option> 
                       {% endfor %}-->
           </select>
      </div>
			
		</div>
		<div class="tab-pane" id="Tab_Trans">
    <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_empty_trans_runno" name="trans_empty_trans_runno" class="custom-select" multiple>
                            <option value="" selected>Please select a run</option>
                            {% for dataset in proposal.Investigation.datasets %}
                                <option value="{{dataset.name.strip('__csns__')}}">{{ dataset.name.strip('__csns__RUN') }} ({{dataset.description}})</option> 
                            {% endfor %}
                        </select>
                    </div>
                    
                    <div class="col">
                        <button id="plot_trans_empty_trans" type="button" class="btn btn-primary">Plot</button>
                    </div>
		    <div class="col"></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_sample_trans_runno" name="trans_sample_trans_runno" class="custom-select" multiple>
                            <option value="" selected>Please select a run</option>
                            {% for dataset in proposal.Investigation.datasets %}
                                <option value="{{dataset.name.strip('__csns__')}}">{{ dataset.name.strip('__csns__RUN') }} ({{dataset.description}})</option> 
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col">
                        <button id="plot_trans_sample_trans" 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="cal_trans" type="button" class="btn btn-primary">Calculate</button>
                    </div>
                </div>
            <!--</div>-->
        </div>
    </div> 
    </div> 
    
		<div class="tab-pane" id="Tab_IQ">
			
		</div>
		
		<div class="tab-pane" id="Tab_IQ2D">
			
		</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="cal_trans_plot" class="mb-2" style="height: 200px;"></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 %}