<!--
// © Copyright CERN, Riga Technical University and University of Liverpool 2020.
// All rights not expressly granted are reserved. 
// 
// This file is part of hev-sw.
// 
// hev-sw is free software: you can redistribute it and/or modify it under
// the terms of the GNU General Public Licence as published by the Free
// Software Foundation, either version 3 of the Licence, or (at your option)
// any later version.
// 
// hev-sw is distributed in the hope that it will be useful, but WITHOUT
// ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
// FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public Licence
// for more details.
// 
// You should have received a copy of the GNU General Public License along
// with hev-sw. If not, see <http://www.gnu.org/licenses/>.
// 
// The authors would like to acknowledge the much appreciated support
// of all those involved with the High Energy Ventilator project
// (https://hev.web.cern.ch/).
-->
{% set settings_active = True %}
{% extends 'base.html' %}

{% block content %}
<div class="container text-white">
  
  
  <!-- Tab content -->
  <div id = "mode" class = "tabcontent align-items-center justify-content-center">
    <div class="menu">
      <h1>Select Settings To Edit</h1>
      <!--<button class="tablinks" onclick="openSetting(this, 'mode')">Mode</button>-->
      <button class="tablinks lockable" onclick="openSetting('personal')" disabled>Personal Details</button>
      <button class="tablinks lockable" onclick="openSetting('pcac')" disabled>PC-A/C</button>
      <button class="tablinks lockable" onclick="openSetting('prvc')" disabled>PC-A/C-PRVC</button>
      <button class="tablinks lockable" onclick="openSetting('psv')" disabled>PC-PSV</button>
      <button class="tablinks lockable" onclick = "openSetting('test')" disabled>TEST</options>
    </div>
  </div>
  <div id="personal" class="tabcontent align-items-center justify-content-center">
    <form method="post" id = "personal-settings-form">

        <table class = "ml-auto mr-auto">
          <th colspan="2">Personal Details</th>
      <tr><td><label class="small" for="personal_name">Name</label></td><td><input class="form-control py-1 lockable" id="personal_name" type="name" value="John Smith" name="name" disabled/></td></tr>
      <tr><td><label class="small" for="personal_age">Age</label></td><td><input class="form-control py-1 lockable" id="personal_age" type="number" value=87 name="age" disabled/></td></tr>
      <tr><td><label class="small" for="personal_sex">Sex</label></td><td>
                      <select class="form-control py-1 lockable" id="personal_sex" name="sex" disabled >
                              <option value='M' selected>M</option>
                              <option value='F'>F</option>
                      </select>
              </td></tr>
      <tr><td><label class="small" for="personal_height">Height (cm)</label></td><td><input class="form-control py-1 lockable" id="personal_height" type="number" value=180 name="height" disabled/></td></tr>
      <tr><td><label class="small" for="personal_weight">Weight (kg)</label></td><td><input class="form-control py-1 lockable" id="personal_weight" type="number" value=80 name="weight" disabled/></td></tr>
        </table>
        <input class="form-button py-2 float-bottom-right" type="submit" value="Update Settings">
        <div class="float-top-right px-2" onclick="openSetting('mode');reset_settings('PC_AC')">
          <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times" class="svg-inline--fa fa-times fa-w-11" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path></svg>
        </div>
    </form>
  </div>

  <div id="pcac" class="tabcontent justify-content-center align-items-center">
  <form id="pcac-settings-form" class="settings-forms">
    <table class = "ml-auto mr-auto">
      <tr>
      <th colspan="3">PC-A/C Settings</th>
    </tr>
      <tr>
        <td></td>
        <td><label class="small">Respiratory Rate</label></td>
        <td><input class="form-control py-1 lockable" id="pcac_setting_respiratory_rate" type="number" step = "any" value=""" name="Respiratory Rate"  disabled/>&nbsp; /min</td>
      </tr>
      <tr>
        <td><input type="radio" name="time_or_ie" id = "pcac_radio_inhale_time" onclick = "edit_inhale_time(this)" checked></td>
        <td><label class="small" for="pcac_radio_inhale_time">Inhale Time </label></td>
	<td><input class="form-control py-1 lockable" id="pcac_setting_inhale_time" type="number" step = "any"  value="" disabled name='Inhale Time' />&nbsp; s</td>
      </tr>
        <tr>
        <td><input type="radio" name="time_or_ie" id = "pcac_radio_ie_ratio" onclick="edit_ie_ratio(this)"></td>
        <td><label class="small" for="pcac_radio_ie_ratio">I:E Ratio</label></td>
        <td><input class="form-control py-1 lockOnly" id="pcac_setting_ie_ratio" type="number" step = "any"  value="" disabled name='Inhale:Exhale Ratio' /></td>
      </tr>
      <tr>
        <td></td>
        <td><label class="small">Inhale Trigger Sensitivity </label></td>
        <td><input class="form-control py-1 lockable" id="pcac_setting_inhale_trigger_threshold" step = "any"  type="number" value="" name = "Inhale Trigger Sensitivity" disabled />&nbsp; cmH2O</td>
      </tr>
      <tr>
        <td></td>
        <td><label class="small">Exhale Trigger Sensitivity </label></td>
        <td><input class="form-control py-1 lockable" id="pcac_setting_exhale_trigger_threshold" step = "any" type="number" value="" disabled name = "Exhale Trigger Sensitivity" />&nbsp; %</td>
      </tr>
      <tr>
        <td></td>
        <td><label class="small">Inhale Pressure </label></td>
        <td><input name="Inhale Pressure" class="form-control py-1 lockable" id="pcac_setting_inspiratory_pressure" step = "any" type="number" value="" disabled />&nbsp; cmH2O</td>
      </tr>
      <tr>
        <td></td>
        <td><label class="small">Inhale Volume</label></td>
        <td><input class="form-control py-1 lockable" id="pcac_setting_volume" type="number" step = "any" value="" disabled name="Inhale Volume"/>&nbsp; ml</td>
      </tr>
      <tr>
        <td></td>
        <td><label class="small">Inhale Rise Time</label></td>
        <td><input name="Inhale Rise Time" class="form-control py-1 lockable" id="pcac_setting_pid_gain" step = "any" type="number" value="" disabled />&nbsp; ms</td>
      </tr>
      <tr>
        <td></td>
        <td><label class="small">PEEP </label></td>
        <td><input class="form-control py-1 lockable" id="pcac_setting_peep" type="number" step = "any" value="" disabled name = "PEEP"/>&nbsp; cmH2O</td>
      </tr>
      <tr>
        <td></td>
        <td><label class="small">FIO2</label></td>
        <td><input class="form-control py-1 lockable" id="pcac_setting_fiO2_percent" type="number" step = "any" value="" disabled name = "FIO2"/>&nbsp; %</td>
      </tr>
    </table>
      <input class="form-button py-2 float-bottom-right" type="submit" value="Update Settings">
      <div class="float-top-right px-2" onclick="openSetting('mode');reset_settings('PC_AC_PRVC')">
        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times" class="svg-inline--fa fa-times fa-w-11" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path></svg>
      </div>
</form>
    </div>

    <div id="prvc" class="tabcontent align-items-center justify-content-center">
      <form id="prvc-settings-form" class="settings-forms">
        <table class = "ml-auto mr-auto">
      <tr>
        <th colspan="3">PC-A/C-PRVC Settings</th>
      </tr>
          <tr>
            <td></td>
            <td><label class="small">Respiratory Rate</label></td>
            <td><input class="form-control py-1 lockable" id="prvc_setting_respiratory_rate" type="number" step = "any" value="" name="Respiratory Rate" disabled/>&nbsp; /min</td>
          </tr>
          <tr>
            <td><input type="radio" name="time_or_ie" id = "prvc_radio_inhale_time" onclick = "edit_inhale_time(this)" checked></td>
            <td><label class="small" for="prvc_radio_inhale_time">Inhale Time</label></td>
            <td><input class="form-control py-1 lockable" id="prvc_setting_inhale_time" type="number" step = "any"  value="" disabled name='Inhale Time' />&nbsp; s</td>
          </tr>
            <tr>
            <td><input type="radio" name="time_or_ie" id = "prvc_radio_ie_ratio" onclick="edit_ie_ratio(this)"></td>
            <td><label class="small" for="prvc_radio_ie_ratio">I:E Ratio</label></td>
            <td><input class="form-control py-1 lockOnly" id="prvc_setting_ie_ratio" type="number" step = "any"  value="" disabled name='Inhale:Exhale Ratio' /></td>
          </tr>
          <tr>
            <td></td>
            <td><label class="small">Inhale Trigger Sensitivity </label></td>
            <td><input class="form-control py-1 lockable" id="prvc_setting_inhale_trigger_threshold" step = "any"  type="number" value="" name = "Inhale Trigger Sensitivity" disabled />&nbsp; cmH2O</td>
          </tr>
          <tr>
            <td></td>
            <td><label class="small">Exhale Trigger Sensitivity </label></td>
            <td><input class="form-control py-1 lockable" id="prvc_setting_exhale_trigger_threshold" step = "any" type="number" value="" disabled name = "Exhale Trigger Sensitivity" />&nbsp; %</td>
          </tr>
          <tr>
            <td></td>
            <td><label class="small">Inhale Pressure </label></td>
            <td><input name="Inhale Pressure" class="form-control py-1 lockable" id="prvc_setting_inspiratory_pressure" step = "any" type="number" value="" disabled />&nbsp; cmH2O</td>
          </tr>
          <tr>
            <td></td>
            <td><label class="small">Inhale Volume</label></td>
            <td><input class="form-control py-1 lockable" id="prvc_setting_volume" type="number" step = "any" value="" disabled name="Inhale Volume"/>&nbsp; ml</td>
          </tr>
          <tr>
            <td></td>
            <td><label class="small">Inhale Rise Time </label></td>
            <td><input name="Inhale Rise Time" class="form-control py-1 lockable" id="prvc_setting_pid_gain" step = "any" type="number" value="" disabled />&nbsp; ms</td>
          </tr>
          <tr>
            <td></td>
            <td><label class="small">PEEP </label></td>
            <td><input class="form-control py-1 lockable" id="prvc_setting_peep" type="number" step = "any" value="" disabled name = "PEEP"/>&nbsp; cmH2O</td>
          </tr>
          <tr>
            <td></td>
            <td><label class="small">FIO2 </label></td>
            <td><input class="form-control py-1 lockable" id="prvc_setting_fiO2_percent" type="number" step = "any" value="" disabled name = "FIO2"/>&nbsp; %</td>
          </tr>
        </table>
          <input class="form-button py-2 float-bottom-right" type="submit" value="Update Settings">
          <div class="float-top-right px-2" onclick="openSetting('mode');reset_settings('PC_AC_PRVC')">
            <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times" class="svg-inline--fa fa-times fa-w-11" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path></svg>
          </div>
    </form>
        </div>
  
        <div id="psv" class="tabcontent justify-content-center align-items-center">
          <form id="psv-settings-form" class="settings-forms">
            <table class = "ml-auto mr-auto">
            <tr>
              <th colspan="3">PC-PSV Settings</th>
            </tr>
              <tr>
                <td></td>
                <td><label class="small">Respiratory Rate</label></td>
                <td><input class="form-control py-1 lockable" id="psv_setting_respiratory_rate" type="number" step = "any" value="" name="Respiratory Rate" disabled/>&nbsp; /min</td>
              </tr>
              <tr>
                <td><input type="radio" name="time_or_ie" id = "psv_radio_inhale_time" onclick = "edit_inhale_time(this)" checked></td>
                <td><label class="small" for="psv_radio_inhale_time">Inhale Time</label></td>
                <td><input class="form-control py-1 lockable" id="psv_setting_inhale_time" type="number" step = "any"  value="" disabled name='Inhale Time' />&nbsp; s</td>
              </tr>
                <tr>
                <td><input type="radio" name="time_or_ie" id = "psv_radio_ie_ratio" onclick="edit_ie_ratio(this)"></td>
                <td><label class="small" for="psv_radio_ie_ratio">I:E Ratio</label></td>
                <td><input class="form-control py-1 lockOnly" id="psv_setting_ie_ratio" type="number" step = "any"  value="" disabled name='Inhale:Exhale Ratio' /></td>
              </tr>
              <tr>
                <td></td>
                <td><label class="small">Inhale Trigger Sensitivity </label></td>
                <td><input class="form-control py-1 prvc-edit psv-edit psv-edit lockable" id="psv_setting_inhale_trigger_threshold" step = "any"  type="number" value="" name = "Inhale Trigger Sensitivity" disabled />&nbsp; cmH2O</td>
              </tr>
              <tr>
                <td></td>
                <td><label class="small">Exhale Trigger Sensitivity </label></td>
                <td><input class="form-control py-1 psv-edit lockable" id="psv_setting_exhale_trigger_threshold" step = "any" type="number" value="" disabled name = "Exhale Trigger Sensitivity" />&nbsp; %</td>
              </tr>
              <tr>
                <td></td>
                <td><label class="small">Inhale Pressure </label></td>
                <td><input name="Inhale Pressure" class="form-control py-1 psv-edit psv-edit lockable" id="psv_setting_inspiratory_pressure" step = "any" type="number" value="" disabled />&nbsp; cmH2O</td>
              </tr>
              <tr>
                <td></td>
                <td><label class="small">Inhale Volume</label></td>
                <td><input class="form-control py-1 prvc-edit lockable" id="psv_setting_volume" type="number" step = "any" value="" disabled name="Inhale Volume"/>&nbsp; ml</td>
              </tr>
              <tr>
                <td></td>
                <td><label class="small">Inhale Rise Time </label></td>
                <td><input name="Inhale Rise Time" class="form-control py-1 lockable" id="psv_setting_pid_gain" step = "any" type="number" value="" disabled />&nbsp; ms</td>
              </tr>
              <tr>
                <td></td>
                <td><label class="small">PEEP </label></td>
                <td><input class="form-control py-1 prvc-edit psv-edit psv-edit lockable" id="psv_setting_peep" type="number" step = "any" value="" disabled name = "PEEP"/>&nbsp; cmH2O</td>
              </tr>
              <tr>
                <td></td>
                <td><label class="small">FIO2 </label></td>
                <td><input class="form-control py-1 lockable" id="psv_setting_fiO2_percent" type="number" step = "any" value="" disabled name = "FIO2"/>&nbsp; %</td>
              </tr>
            </table>
              <input class="form-button py-2 float-bottom-right" type="submit" value="Update Settings">
              <div class="float-top-right px-2" onclick="openSetting('mode');reset_settings('PC_PSV')">
                <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times" class="svg-inline--fa fa-times fa-w-11" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path></svg>
              </div>
        </form>
            </div>
            <div id="test" class="tabcontent justify-content-center align-items-center">
              <form id="test-settings-form" class="settings-forms">
                <table class = "ml-auto mr-auto">
                <tr>
                  <th colspan="3">TEST Settings</th>
                </tr>
                  <tr>
                    <td></td>
                    <td><label class="small">Respiratory Rate</label></td>
                    <td><input class="form-control py-1 lockable" id="test_setting_respiratory_rate" type="number" step = "any" value="" name="Respiratory Rate" disabled/>&nbsp; /min</td>
                  </tr>
                  <tr>
                    <td><input type="radio" name="time_or_ie" id = "test_radio_inhale_time" onclick = "edit_inhale_time(this)" checked></td>
                    <td><label class="small" for="test_radio_inhale_time">Inhale Time </label></td>
                    <td><input class="form-control py-1 lockable" id="test_setting_inhale_time" type="number" step = "any"  value="" disabled name='Inhale Time' />&nbsp; s</td>
                  </tr>
                    <tr>
                    <td><input type="radio" name="time_or_ie" id = "test_radio_ie_ratio" onclick="edit_ie_ratio(this)"></td>
                    <td><label class="small" for="test_radio_ie_ratio">I:E Ratio</label></td>
                    <td><input class="form-control py-1 lockOnly" id="test_setting_ie_ratio" type="number" step = "any"  value="" disabled name='Inhale:Exhale Ratio' /></td>
                  </tr>
                  <tr>
                    <td></td>
                    <td><label class="small">Inhale Trigger Sensitivity</label></td>
                    <td><input class="form-control py-1 lockable" id="test_setting_inhale_trigger_threshold" step = "any"  type="number" value="" name = "Inhale Trigger Sensitivity" disabled />&nbsp; cmH2O</td>
                  </tr>
                  <tr>
                    <td></td>
                    <td><label class="small">Exhale Trigger Sensitivity</label></td>
                    <td><input class="form-control py-1 lockable" id="test_setting_exhale_trigger_threshold" step = "any" type="number" value="" disabled name = "Exhale Trigger Sensitivity" />&nbsp; %</td>
                  </tr>
                  <tr>
                    <td></td>
                    <td><label class="small">Inhale Pressure </label></td>
                    <td><input name="Inhale Pressure" class="form-control py-1 lockable" id="test_setting_inspiratory_pressure" step = "any" type="number" value="" disabled />&nbsp; cmH2O</td>
                  </tr>
                  <tr>
                    <td></td>
                    <td><label class="small">Inhale Volume</label></td>
                    <td><input class="form-control py-1 lockable" id="test_setting_volume" type="number" step = "any" value="" disabled name="Inhale Volume"/>&nbsp; ml</td>
                  </tr>
                  <tr>
                    <td></td>
                    <td><label class="small">Inhale Rise Time </label></td>
                    <td><input name="Inhale Rise Time" class="form-control py-1 lockable" id="test_setting_pid_gain" step = "any" type="number" value="" disabled />&nbsp; ms</td>
                  </tr>
                  <tr>
                    <td></td>
                    <td><label class="small">PEEP </label></td>
                    <td><input class="form-control py-1 lockable" id="test_setting_peep" type="number" step = "any" value="" disabled name = "PEEP"/>&nbsp; cmH2O</td>
                  </tr>
                  <tr>
                    <td></td>
                    <td><label class="small">FIO2 </label></td>
                    <td><input class="form-control py-1 lockable" id="test_setting_fiO2_percent" type="number" step = "any" value="" disabled name = "FIO2"/>&nbsp; %</td>
                  </tr>
                </table>
                  <input class="form-button py-2 float-bottom-right" type="submit" value="Update Settings">
                  <div class="float-top-right px-2" onclick="openSetting('mode');reset_settings('TEST')">
                    <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times" class="svg-inline--fa fa-times fa-w-11" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path></svg>
                  </div>
            </form>
                </div>
            
            
          </div>

{% endblock %}

{% block body_scripts %}
<script type=text/javascript>
function edit_ie_ratio(element){
  if (unlocked){
    var radio_id = element.id;
    var ie_ratio_id    = radio_id.replace("radio","setting");
    var inhale_time_id = radio_id.replace("radio_ie_ratio", "setting_inhale_time");
    var ie_ratio_input = document.getElementById(ie_ratio_id);
    var inhale_time_input    = document.getElementById(inhale_time_id);
    ie_ratio_input.disabled = false;
    inhale_time_input.disabled = true;
  }
}
function edit_inhale_time(element){
  if (unlocked){
    var radio_id = element.id;
    var ie_ratio_id    = radio_id.replace("radio_inhale_time","setting_ie_ratio");
    var inhale_time_id = radio_id.replace("radio", "setting");
    var ie_ratio_input = document.getElementById(ie_ratio_id);
    var inhale_time_input    = document.getElementById(inhale_time_id);
    ie_ratio_input.disabled = true;
    inhale_time_input.disabled = false;
  }
}

function updateSettings(event, name, cmd_name){
  var mode = name;
  var cmd_mode = cmd_name;
  var message = "You are about to update the following settings for "+name+" mode";
  var jsonForm = {};
  $("input[type=number]:enabled", $(event.target)).each(function(index){
    if(this.value!="") {
      jsonForm[$(this).attr("id")] = this.value;
      message += "<br> "+this.name + " " + this.value;
    }
  });
  if (Object.keys(jsonForm).length == 0){
    $.dialog("No New Settings Chosen, Not Updating");
    event.preventDefault();
    return;
  }
  //ask for confirmation
  $.confirm({
  	title: 'Confirmation',
		content: message,
	  buttons: {
	    confirm: function () {
        //before confirming we tell the page to await an update
        wait_update(cmd_mode);
        // now send command to change
        $.ajax({
          url: "/target_handler",
          type: 'POST',
          data : jsonForm,
          success: function(response){
            if (response == true){
              $.dialog('Settings Updated');
            }
            else{
              $.dialog("Problem updating settings, please try again");
            }
          }
        });
      },
	    cancel: function () {
	      $.dialog('Canceled!');
	    },
	  }
  });
  event.preventDefault();

}

function updatePersonal(event){
  //update personal details
  var message = "You are about to update the following personal details";
  var jsonForm = {};
  $("input", $(event.target)).not(':input[type=submit]').each(function(index){
    if(this.value!="") {
      jsonForm[$(this).attr("id")] = this.value;
      message += "<br> "+this.name + " " + this.value;
    }
  });
  $("select", $(event.target)).each(function(index){
    if(this.value!="") {
      jsonForm[$(this).attr("id")] = this.value;
      message += "<br> "+this.name + " " + this.value;
    }
  });
  if (Object.keys(jsonForm).length == 0){
    $.dialog("No New Details Chosen, Not Updating");
    event.preventDefault();
    return;
  }
  // ask for confirmation and then send
  $.confirm({
  	title: 'Confirmation',
		content: message,
	  buttons: {
	    confirm: function () {
        console.log('about to wait for the personal updates');
        wait_update_personal();
        $.ajax({
          url: "/personal_data_handler",
          type: 'POST',
          data : jsonForm,
          success: function(response){
            if (response == true){
              $.dialog('Personal Details Updated');
            }
            else{
              $.dialog("Problem updating settings, please try again");
            }
          }
        });
      },
	    cancel: function () {
	      $.dialog('Canceled!');
	    },
	  }
  });
  event.preventDefault();

}

// set the correct functions to call on submit of each form
$('#personal-settings-form').submit(event, function(){
  updatePersonal(event);
});
$('#pcac-settings-form').submit(event, function(){
  updateSettings(event,"PC-AC", "PC_AC");
});
$('#prvc-settings-form').submit(event, function(){
  updateSettings(event,"PC-PR/VC", "PC_PRVC");
});
$('#psv-settings-form').submit(event, function(){
  updateSettings(event,"PC-PSV", "PC_PSV");
});
$('#test-settings-form').submit(event, function(){
  updateSettings(event,"TEST", "TEST");
});

// this will open which setting we want
function openSetting(cityName) {
  // Declare all variables
  var i, tabcontent;

  // Get all elements with class="tabcontent" and hide them
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  // Show the current tab, and add an "active"
  document.getElementById(cityName).style.display = "flex";
  // Get all elements with class="tablinks" and remove the class "active"
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
}



// fill when we open the page
$(document).ready(function(){
  var tablinks = document.getElementsByClassName("tablinks");
  if (tablinks.length > 0){
    openSetting("mode");
  }
});

//function to wait for the update
function wait_update(mode){
  var mode = mode;
  var updateInterval;
  var lastrow = 0;
  //first get the most recent entry so we can recognise new ones
  $.ajax({
	  url: '/last-targets',
	  success: function(data) {
  		if (data.length == 0) {
        // we've not got any targets
        console.log("Got no targets");
      } else
	    {
        for (let i = 0 ; i < data.length; i++){
          var target = data[i];
          if (target["mode"] != mode) continue;
          lastrow = target["rowid"];
        }
      }
    },
	  cache: false
  });
  // now we define the function used to update
  function updateTargets(){
    var short_name = short_names[mode];
    var got_update = false;
    var targetmode = mode;
    var row = lastrow;
    // call for last targets and see if they're new
    $.ajax({
  	  url: '/last-targets',
  	  success: function(data) {
    		if (data.length == 0) {
          // we've not got any targets
          console.log("Got no new targets for upate");
        } else
  	    {
          for (let i = 0 ; i < data.length; i++){
            var target = data[i];
            if (target["mode"] != mode || target['ROWID'] <= lastrow) continue;
            // if we're here we've managed to update
            got_update = true;
            for (let j = 0 ; j < settings.length; j++){
              var element = document.getElementById(short_name + "_setting_"+settings[j]);
              if (settings[j] in target && element){
                element.value = target[settings[j]].toPrecision(4);
                //update our initials if we exit
                initial_targets[mode][settings[j]] = target[settings[j]].toPrecision(4);
                //remove any red text
                element.classList.remove('text-red');
              }
            }
          }
        }
        // if we don't have an update we just try again
        if (got_update == false) setTimeout(updateTargets, 200);
      },
	  cache: false
    });
  }
  //initial start to look for new updated targets
  setTimeout(updateTargets, 200);
}
//function to wait for the update
function wait_update_personal(){
  console.log('in waiting function');
  var updateInterval;
  var lastrow = 0;
  //first get the most recent entry so we can recognise new ones
  $.ajax({
	  url: '/last-personal',
	  success: function(data) {
  		if (data.length == 0) {
        // we've not got any details
        console.log("Got no personal details");
      } else
	    {
        for (let i = 0 ; i < data.length; i++){
          var personal = data[i];
          lastrow = personal["rowid"];
        }
      } 
    },
	  cache: false
  });
  // now we define the function used to update
  function updatePersonals(){
    var got_update = false;
    var row = lastrow;
    // call for last targets and see if they're new
    $.ajax({
  	  url: '/last-personal',
  	  success: function(personal) {
        if (personal['ROWID'] > row) {
          got_update = true;
          for (let j = 0 ; j < personals.length; j++){
            var element = document.getElementById("personal_"+personals[j]);
            if (personals[j] in personal && element){
            element.value = personal[personals[j]];
            initial_targets['PERSONAL'][personals[j]] = personal[personals[j]];
            //remove any red text
            element.classList.remove('text-red');
            }
          }
        }
        // if we don't have an update we just try again
        if (got_update == false) setTimeout(updatePersonals, 200);
      },
	  cache: false
    });
  }
  //initial start to look for new updated targets
  setTimeout(updatePersonals, 200);
}

//everything should go red when it's changed
$( ".form-control" ).change(function() {
  $(this).addClass('text-red');
});
// we should get a number pad when we click on inputs of type number only
$( "input.form-control[type=number]").click(function(event){
  show_easy_numpad($(event.target)[0],null);
})
// reset when we leave the page, back to initial value and black
// this does nothing if we have no initial values;
function reset_settings(mode){
  var short_name = short_names[mode];
  for (let j = 0 ; j < settings.length; j++){
    var element = document.getElementById(short_name + "_setting_"+settings[j]);
    if (settings[j] in initial_targets[mode] && element){
      //remove any red text we might have;
      element.classList.remove('text-red');
      element.value = initial_targets[mode][settings[j]];
      element.style.color="black";
    }
  }
}

</script>

{% endblock %}
