path: root/modules-available/locationinfo/templates/config.html

<div>
  <form method="post" action="?do=locationinfo" id="configForm">
    <input type="hidden" name="token" value="{{token}}">
    <input type="hidden" name="action" value="updateConfig">
    <input type="hidden" name="id" value="{{id}}">

    <div style="float: left;">
      <Label>{{lang_language}}</Label><br>
      <select name="language">
        <option value="en" id="en">{{lang_languageEn}}</option>
        <option value="de" id="de">{{lang_languageDe}}</option>
        <option value="pt" id="pt">{{lang_languagePt}}</option>
      </select>
    </div>
    <div style="float: left; margin-left: 15px;">
      <Label>{{lang_mode}}</Label><br>
      <select name="mode" onchange=vertical_cb(this.value);>
        <option value="1" id="mode1">{{lang_mode1}}</option>
        <option value="2" id="mode2">{{lang_mode2}}</option>
        <option value="3" id="mode3">{{lang_mode3}}</option>
        <option value="4" id="mode4">{{lang_mode4}}</option>
      </select>
    </div>
    <div style="float: left; margin-left: 15px;">
      <input name="vertical" id="cb_vertical" type="checkbox"/> {{lang_vertical}}<br>
      <input name="eco" id="cb_eco" type="checkbox"/> {{lang_ecoMode}}
    </div>

    <div style="float: left; margin-left: 15px;">
      <Label data-toggle="tooltip" title="{{lang_daysToShowTooltip}}">{{lang_daysToShow}}</Label><br>
      <select name="daystoshow">
        <option value="1" id="day1">1</opton>
        <option value="2" id="day2">2</option>
        <option value="3" id="day3">3</option>
        <option value="4" id="day4">4</option>
        <option value="5" id="day5">5</option>
        <option value="6" id="day6">6</option>
        <option value="7" id="day7">7</option>
      </select>
    </div>

    <div style="float: left; margin-left: 15px;">
      <Label>{{lang_rotation}}</Label><br>
      <select name="rotation">
        <option value="0" id="rotation0">{{lang_rotation0}}</option>
        <option value="3" id="rotation3">{{lang_rotation3}}</option>
        <option value="2" id="rotation2">{{lang_rotation2}}</option>
        <option value="1" id="rotation1">{{lang_rotation1}}</option>
      </select>
    </div>

    <br><br><br><br>

    <Label data-toggle="tooltip" title="{{lang_scaleTooltip}}">{{lang_scale}}</Label><br>
    <span id="scale">50 %</span><input name="scale" id="sl_scale" type="range" step="1" min="10" max="90" value="50" style="width: 300px;" oninput="showScaleValue(this.value)"/>

    <br><br>

    <Label data-toggle="tooltip" title="{{lang_switchTimeTooltip}}">{{lang_switchTime}}</Label><br>
    <span id="switch">20 {{lang_sec}}</span><input name="switchtime" id="sl_switch" type="range" step="1" min="1" max="120" value="20" style="width: 300px;" oninput="showSwitchValue(this.value)"/>

    <br><br>

    <div>
      <div style="float: left;">
        <Label data-toggle="tooltip" title="{{lang_calupdateTooltip}}">{{lang_calupdate}}</Label><br>
        <input id="updateCalendar" name="calupdate" type="number" style="width: 50px; text-align: center;" min="0" max="1440"/> {{lang_min}}
      </div>
      <div style="float: left; margin-left: 15px;">
        <Label data-toggle="tooltip" title="{{lang_roomupdateTooltip}}">{{lang_roomupdate}}</Label><br>
        <input id="updateRoom" name="roomupdate" type="number" style="width: 50px; text-align: center;" min="0" max="86400"/> {{lang_sec}}
      </div>
      <div style="float: left; margin-left: 15px;">
        <Label data-toggle="tooltip" title="{{lang_configupdateTooltip}}">{{lang_configupdate}}</Label><br>
        <input id="updateConfig" name="configupdate" type="number" style="width: 50px; text-align: center;" min="0" max="1440"/> {{lang_min}}
      </div>
    </div>

    <br><br><br><br>

    <button type="submit" class="btn btn-primary">{{lang_save}}</button>

  </form>
</div>

<script type="text/javascript">
loadValues();

function loadValues() {
  $("#{{language}}").attr("selected","selected");

  var mode = $("#{{mode}}");
  if (!mode.length) {
    mode = $("#mode1");
  }
  mode.attr("selected","selected");
  vertical_cb(mode.val());
  if('{{vertical}}' == true){
    $("#cb_vertical").prop("checked", true);
  }
  if('{{eco}}' == true){
    $("#cb_eco").prop("checked", true);
  }

  var day = $("#{{daystoshow}}");
  if (!day.length) {
    day = $("#day7");
  }
  day.attr("selected","selected");

  var rotation = $("#{{rotation}}");
  if (!rotation.length) {
    rotation = $("#rotation0");
  }
  rotation.attr("selected","selected");

  var scaleVal = '{{scale}}';
  if (scaleVal == '') {
    scaleVal = 50;
  }
  $('#sl_scale').attr('value', '{{scale}}');
  showScaleValue(scaleVal);

  var switchVal = '{{switchtime}}';
  if (switchVal == '') {
    switchVal = 20;
  }
  $("#sl_switch").attr('value', switchVal);
  showSwitchValue(switchVal);

  $("#updateCalendar").attr("value", '{{calupdate}}');
  $("#updateRoom").attr("value", '{{roomupdate}}');
  $("#updateConfig").attr("value", '{{configupdate}}');
}

function showScaleValue(newValue) {
	$("#scale").text(newValue + " %");
}

function showSwitchValue(newValue) {
	$("#switch").text(newValue + " " + '{{lang_sec}}');
}

function vertical_cb(value) {
  if (value == 1) {
    $("#cb_vertical").prop("disabled", false);
  } else {
    $("#cb_vertical").prop("disabled", true);
    $("#cb_vertical").prop("checked", false);
  }
}
</script>