{% extends "base.html" %}

{% block title %}Home{% endblock %}

{% block styles %}
    {{ super() }}
    <link href="{{ url_for('static', filename='styles/home.css') }}" rel="stylesheet">
{% endblock %}

{% block scripts %}
    {{super()}}
    <script src="{{ url_for('static', filename='lib/plotly.min.js') }}"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <script src="{{ url_for('static', filename='home.js') }}"></script>
{% endblock %}

{% block station_state %}
    <h3 id='station-state' style="display: inline"> - Uninitialized - </h3>
{% endblock %}

{% block init %}
<button onclick="initialize_hardware()" type="button" id="hardware_init" disabled="false" class="btn btn-success">Initialize Hardware</button>
<button onclick="shut_down_system()" type="button" id="shut_down_system" disabled="false" class="btn btn-outline-danger">Shut Down</button>
{% endblock %}

{% block content %}
<div>
    <div class="columns_section">
    
        <div id="shutdown_modal" class="modal">
            <div class="modal-content">
                <h5>Are you sure you want to shut down the system?</h5><br>
                <div class="button-container">
                    <button id="yes_shutdown_btn" class="btn btn-outline-danger">Yes</button>
                    <button id="no_shutdown_btn" class="btn btn-outline-info">No</button>
                </div>
            </div>
        </div>

        <div id="popupOverlay">
            <div id="popupWindow">
                <h3 style="text-align: center;">Script Execution Notes</h3>
                <h5>[Save Notes]</h5>
                <span> All notes entered before the test finishes will automatically be saved to the data file (.zip). You can also add more notes after the test finishes, until you press [Download Data (.zip)]. You cannot include any additional notes after you download the data file.</span><br><br>
                <textarea id="script_execution_notes_text_input" placeholder="Type your text here. Press [Enter] for new lines..."></textarea>
                <div class="button-container">
                    <button class="btn btn-secondary" id="cancel_text_input_btn">Cancel</button>
                    <button class="btn btn-outline-success" id="save_notes_btn">Save Notes</button>
                </div>
            </div>
        </div>
    
        <div id="pressure_controller_inputs_div">
            <h3 class="centered_section">Pressure Control</h3>
            <br>
            <div class="column_container">

                <div class="left_div">
                    <div id="pressure_input_1_div" class="pressure_controller_div">
                        <span>Pressure Controller #1: </span><input type="number" onkeydown="if (event.key === 'Enter') { update_pressure_controller1(this.value); }" title="press [ENTER] when ready to set pressure value" class="text-input pressure_input_txt" id="pressure_input_1_value" value="0" min="0" max="80"> PSI
                        <div class="spaced_out">
                            <button onmousedown="start_priming1()" onmouseup="stop_priming1()" type="button" id="prime_btn1" disabled="true" title="Keep button pressed to start priming, release button to stop" class="btn btn-outline-info priming_btn">Prime #1</button>
                            <input type="range" min="0" max="80" value="0" id="pressure_input_1_slider" disabled="true" class="pressure_slider">
                        </div>
                    </div>

                    <div id="pressure_input_3_div" class="pressure_controller_div">
                        <span>Pressure Controller #3: </span><input type="number" onkeydown="if (event.key === 'Enter') { update_pressure_controller3(this.value); }" title="press [ENTER] when ready to set pressure value" class="text-input pressure_input_txt" id="pressure_input_3_value" value="0" min="0" max="345"> mbar
                        <div class="spaced_out">
                            <button onmousedown="start_priming3()" onmouseup="stop_priming3()" type="button" id="prime_btn3" disabled="true" title="Keep button pressed to start priming, release button to stop" class="btn btn-outline-info priming_btn">Prime #3</button>
                            <input type="range" min="0" max="345" value="0" id="pressure_input_3_slider" disabled="true" class="pressure_slider">
                        </div>
                    </div>
                </div>

                <div class="separator"></div>
    
                <div class="right_div">
                    <div id="pressure_input_2_div" class="pressure_controller_div">
                        <span>Pressure Controller #2: </span><input type="number" onkeydown="if (event.key === 'Enter') { update_pressure_controller2(this.value); }" title="press [ENTER] when ready to set pressure value" class="text-input pressure_input_txt" id="pressure_input_2_value" value="0" min="0" max="80"> PSI
                        <div class="spaced_out">
                            <button onmousedown="start_priming2()" onmouseup="stop_priming2()" type="button" id="prime_btn2" disabled="true" title="Keep button pressed to start priming, release button to stop" class="btn btn-outline-info priming_btn">Prime #2</button>
                            <input type="range" min="0" max="80" value="0" id="pressure_input_2_slider" disabled="true" class="pressure_slider">
                        </div>
                    </div>
                
                    <div id="pressure_input_4_div" class="pressure_controller_div">
                        <span>Pressure Controller #4: </span><input type="number" onkeydown="if (event.key === 'Enter') { update_pressure_controller4(this.value); }" title="press [ENTER] when ready to set pressure value" class="text-input pressure_input_txt" id="pressure_input_4_value" value="0" min="-800" max="0"> mbar
                        <div class="spaced_out">
                            <button onmousedown="start_priming4()" onmouseup="stop_priming4()" type="button" id="prime_btn4" disabled="true" title="Keep button pressed to start priming, release button to stop" class="btn btn-outline-info priming_btn">Prime #4</button>
                            <input type="range" min="0" max="800" value="0" id="pressure_input_4_slider" disabled="true" class="pressure_slider">
                        </div>
                    </div>
                </div>

            </div>
            
        </div>
        
        <div id="script_execution_div">
            <h3 class="centered_section">Script Execution</h3>

            <div class="progress-container">
                <div class="progress" style="flex-grow: 1;">
                    <div id="progress-bar" class="progress-bar progress-bar-striped progress-bar-animated glow" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
                <div class="progress-label" id="progress_bar_percent_text"> 0 %</div>
            </div>
            
            <div class="centered_section">
                <select id="scripts_dropdown" disabled="true" class="form-select dropdown_looks">
                    <option value="default" selected>- Select Script -</option>
                </select>
                <div>
                    <button id="playButton" class="icon-button" disabled="true">
                        <i class="fa fa-play"></i>
                    </button>
                    <button id="pauseButton" class="icon-button" disabled="true">
                        <i class="fa fa-pause"></i>
                    </button>
                    <button id="stopButton" class="icon-button" disabled="true">
                        <i class="fa fa-stop"></i>
                    </button>
                </div>
            </div>
            <br>
            
            
            <div class="columns_section">
                <strong>Save To: </strong>
                <select id="destination_folders_dropdown" class="form-select dropdown_looks">
                </select>
            </div>
            <br>

            <div class="opposite_sides_section">
                <div>
                    <strong>Runtime Estimate: </strong>
                </div>
                <div>
                    <span id="execution_time_estimate"></span>
                </div>
            </div>

            <div class="opposite_sides_section">
                <div>
                    <strong>File </strong><strong id="data_file_index"></strong>
                </div>
                <div>
                    <span id="data_file_status"></span>
                </div>
            </div>

            <div class="left_section">
                <button id="add_notes_btn" hidden="true" class="btn btn-outline-info">+ Add Notes</button>
                <button id="downloadButton" hidden="true" class="btn btn-outline-success">Download Data (.zip)</button>
            </div>
            
        </div>
    </div>
    
    <br>

    <div class="main_section_div">
        <div class="centered_section">
            <h2>Sensor Plots</h2>
        </div><br>
        
        <div class="columns_section" id="plot_switches_div">
            
            <div class="form-check form-switch">
                <input class="form-check-input red-switch" type="checkbox" checked id="high_liquid_flowrate_sensors_plot_switch" onclick="toggle_sensors_plot_visibility(this)">
                <label class="form-check-label" for="high_liquid_flowrate_sensor_plot_switch">High Liquid Flowrate</label>
            </div>
            
            <div class="form-check form-switch">
                <input class="form-check-input red-switch" type="checkbox" checked id="air_flowrate_sensors_plot_switch" onclick="toggle_sensors_plot_visibility(this)">
                <label class="form-check-label" for="air_flowrate_sensor_plot_switch">Air Flowrate</label>
            </div>
            
            <div class="form-check form-switch">
                <input class="form-check-input red-switch" type="checkbox" id="low_liquid_flowrate_sensors_plot_switch" onclick="toggle_sensors_plot_visibility(this)">
                <label class="form-check-label" for="low_liquid_flowrate_sensor_plot_switch">Low Liquid Flowrate</label>
            </div>

            <div class="form-check form-switch">
                <input class="form-check-input red-switch" type="checkbox" checked id="pressure_sensors_plot_switch" onclick="toggle_sensors_plot_visibility(this)">
                <label class="form-check-label" for="pressure_sensor_plot_switch">Pressure Sensors</label>
            </div>
        </div><br><br>
        
        <div id="high_liquid_flowrate_sensors_plot_div">
            <h4>High Liquid Flowrate Sensors</h4>
            <div class="spaced_out" >
                <div class="sensors_plot" id="high_liqFlowrate_sensors_plot"></div>
                <div>
                    <br><br>
                    <div class="form-check form-switch">
                        <div class="spaced_out">
                            <input class="form-check-input switch_btn" type="checkbox" checked="true" role="switch" id="switch_flowrate_sensor1" onclick="switch_input_high_liqFlowrate_plot_traces()">
                            <label class="form-check-label" for="switch_flowrate_sensor1">Sensor #1: </label>
                            <div class="sensor_value_container">
                                <span class="sensor_reading" id="liqFlowrate_sensor1_reading">0</span>
                                <span class="units_indicator"> [uL/min]</span>
                            </div>
                        </div>
                    </div>
                
                    <div class="form-check form-switch">
                        <div class="spaced_out">
                            <input class="form-check-input switch_btn" type="checkbox" checked="true" role="switch" id="switch_flowrate_sensor2" onclick="switch_input_high_liqFlowrate_plot_traces()">
                            <label class="form-check-label" for="switch_flowrate_sensor2">Sensor #2: </label>
                            <div class="sensor_value_container">
                                <span class="sensor_reading" id="liqFlowrate_sensor2_reading">0</span>
                                <span class="units_indicator"> [uL/min]</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div hidden id="low_liquid_flowrate_sensors_plot_div">
            <h4>Low Liquid Flowrate Sensors</h4>
            <div class="spaced_out">
                <div class="sensors_plot" id="low_liqFlowrate_sensors_plot"></div>
                <div>
                    <br><br>
                    <div class="form-check form-switch">
                        <div class="spaced_out">
                            <input class="form-check-input switch_btn" type="checkbox" checked="true" role="switch" id="switch_flowrate_sensor3" onclick="switch_input_low_liqFlowrate_plot_traces()">
                            <label class="form-check-label" for="switch_flowrate_sensor3">Sensor #3: </label>
                            <div class="sensor_value_container">
                                <span class="sensor_reading" id="liqFlowrate_sensor3_reading">0</span>
                                <span class="units_indicator"> [uL/min]</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-check form-switch">
                        <div class="spaced_out">
                            <input class="form-check-input switch_btn" type="checkbox" checked="true" role="switch" id="switch_flowrate_sensor4" onclick="switch_input_low_liqFlowrate_plot_traces()">
                            <label class="form-check-label" for="switch_flowrate_sensor4">Sensor #4: </label>
                            <div class="sensor_value_container">
                                <span class="sensor_reading" id="liqFlowrate_sensor4_reading">0</span>
                                <span class="units_indicator"> [uL/min]</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div id="air_flowrate_sensors_plot_div">
            <h4>Air Flowrate Sensors</h4>
            <div class="spaced_out">
                <div class="sensors_plot" id="air_flowrate_sensors_plot"></div>
                <div>
                    <br><br>
                    <div class="form-check form-switch">
                        <div class="spaced_out">
                            <input class="form-check-input switch_btn" type="checkbox" checked="true" role="switch" id="switch_air_flowrate_sensor1" onclick="switch_input_air_flowrate_plot_traces()">
                            <label class="form-check-label" for="switch_air_flowrate_sensor1">Sensor #1: </label>
                            <div class="sensor_value_container">
                                <span class="sensor_reading" id="airFlowrate_sensor1_reading">0</span>
                                <span class="units_indicator"> [sccm]</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-check form-switch">
                        <div class="spaced_out">
                            <input class="form-check-input switch_btn" type="checkbox" checked="true" role="switch" id="switch_air_flowrate_sensor2" onclick="switch_input_air_flowrate_plot_traces()">
                            <label class="form-check-label" for="switch_air_flowrate_sensor2">Sensor #2: </label>
                            <div class="sensor_value_container">
                                <span class="sensor_reading" id="airFlowrate_sensor2_reading">0</span>
                                <span class="units_indicator"> [sccm]</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div id="pressure_sensors_plot_div"> 
            <div id="abs_pressure_sensors_plot_div">
                <h4>Pressure Sensors - Absolute (0-150 PSI) </h4>
                <div class="spaced_out">
                    <div class="sensors_plot" id="pressure_sensors_plot"></div>
                    <div>
                        <br><br>
                        <div class="form-check form-switch">
                            <div class="spaced_out">
                                <input class="form-check-input switch_btn" type="checkbox" checked="true" role="switch" id="switch_pressure_sensor1" onclick="switch_input_pressure_plot_traces()">
                                <label class="form-check-label" for="switch_pressure_sensor1">Sensor #1: </label>
                                <div class="sensor_value_container">
                                    <span class="sensor_reading" id="pressure_sensor_1_reading">0</span>
                                    <span class="units_indicator"> [PSI]</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-check form-switch">
                            <div class="spaced_out">
                                <input class="form-check-input switch_btn" type="checkbox" checked="true" role="switch" id="switch_pressure_sensor2" onclick="switch_input_pressure_plot_traces()">
                                <label class="form-check-label" for="switch_pressure_sensor2">Sensor #2: </label>
                                <div class="sensor_value_container">
                                    <span class="sensor_reading" id="pressure_sensor_2_reading">0</span>
                                    <span class="units_indicator"> [PSI]</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-check form-switch">
                            <div class="spaced_out">
                                <input class="form-check-input switch_btn" type="checkbox" checked="true" role="switch" id="switch_pressure_sensor3" onclick="switch_input_pressure_plot_traces()">
                                <label class="form-check-label" for="switch_pressure_sensor3">Sensor #3: </label>
                                <div class="sensor_value_container">
                                    <span class="sensor_reading" id="pressure_sensor_3_reading">0</span>
                                    <span class="units_indicator"> [PSI]</span>
                                </div>
                            </div>
                        </div>
        
                    </div>
                </div>
            </div>

        <div id="diff_pressure_sensors_plot_div">
                <h4>Pressure Sensors - Differential (+-15 PSI) </h4>
                <div class="spaced_out">
                    <div class="sensors_plot" id="diff_pressure_sensors_plot"></div>
                    <div>
                        <br><br>
                        <div class="form-check form-switch">
                            <div class="spaced_out">
                                <input class="form-check-input switch_btn" type="checkbox" checked="true" role="switch" id="switch_pressure_sensor4" onclick="switch_input_diff_pressure_plot_traces()">
                                <label class="form-check-label" for="switch_pressure_sensor4">Sensor #4: </label>
                                <div class="sensor_value_container">
                                    <span class="sensor_reading" id="pressure_sensor_4_reading">0</span>
                                    <span class="units_indicator"> [PSI]</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-check form-switch">
                            <div class="spaced_out">
                                <input class="form-check-input switch_btn" type="checkbox" checked="true" role="switch" id="switch_pressure_sensor5" onclick="switch_input_diff_pressure_plot_traces()">
                                <label class="form-check-label" for="switch_pressure_sensor5">Sensor #5: </label>
                                <div class="sensor_value_container">
                                    <span class="sensor_reading" id="pressure_sensor_5_reading">0</span>
                                    <span class="units_indicator"> [PSI]</span>
                                </div>
                            </div>
                        </div>
        
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
{% endblock %}