cctimer-plugin.html

<!-- *
 * WEB Plugin Module Install from Config>Web Plugins
 * 
 * Module plugin:
 *  Climate Control Timer module with Web Plugin for controlling the preheat function in addition to OEM timer.
 * 
 * Version 1.4.1   Jaunius Kapkan <jaunius@gmx.com>
 * 
 * Enable:
 *  - install the backend script using instructions in it
 *  - Add this file to Web Plugins as Page.
 * 
 * Usage:
 *  - Timers can be added in GUI or with a command in shell. For example, the following command will add a new 
 *    timer in enabled state that will be active from 7AM to 8AM on Monday and Wednesday:
 *    "config set vehicle.cctimer 1-0700-0800-13"
 * Behavior:
 *  - Script will check metrics for matching timers each 10 seconds as specified in checkIntervalMs variable 
 *    and then will activate the remote heating/cooling using climatecontrol command. 
 * NOTE: Never remove an active timer as the script will keep turning on the CC until you reboot the unit or reload js engine. 
 * -->


 <style>
  html {
    scroll-behavior: smooth;
  }
  h2 {
    font-size: 12px;
  }
  h3 {
    margin-top: 40px;
    margin-bottom: 20px;
  }
  .btn-off {
    color: rgb(100, 100, 100);
  }
  .monitored {
    text-shadow: none;
    font-weight: bold;
    cursor: default;
  }
  #monitored {
    text-shadow: none;
    font-weight: bold;
    cursor: default;
  }

  </style>
  
  <div class="panel panel-primary">
    <div class="panel-heading">Climate Control Status</div>
    <div class="panel-body">
      <div class="container-fluid" id="climate-status">
        <div class="row" id="temperature-info">
          <div style="margin-top:0.5em" class="col-lg-2 col-md-4 col-xs-12">
            <label class="btn btn-default col-lg-12 col-md-12 col-xs-12 disabled monitored" id="climate-control-state" actvstl="btn-success"><strong>CLIMATE CONTROL OFF</strong></label>
          </div>
          <div style="margin-top:0.5em" class="col-lg-1 col-md-4 col-xs-6">
            <label class="btn btn-default col-lg-12 col-md-8 col-xs-12 monitored" id="climate-heating" actvstl="btn-warning"><strong>HEAT OFF</strong></label>
          </div>
          <!-- <div style="margin-top:0.5em" class="col-lg-1 col-md-4 col-xs-6">
            <label class="btn btn-default col-lg-12 col-md-8 col-xs-12 monitored" id="climate-heating-ptc" actvstl="btn-warning"><strong>PTC HEAT OFF</strong></label>
          </div> -->
          <div class="col-lg-1 col-md-4 col-xs-6" style="margin-top:0.5em">
            <label class="btn btn-default col-lg-12 col-md-8 col-xs-12" id="climate-cooling" actvstl="btn-info"><strong>A/C OFF</strong></label>
          </div>
          <div style="margin-top:0.5em; margin-left:-1em" class="col-lg-2 col-md-4 col-xs-12">
            <div class="btn-group col-lg-12 col-md-12 col-xs-12"> <label class="btn btn-default col-lg-8 col-md-8 col-xs-7 disabled" id="monitored"><strong>CABIN TEMP.</strong></label><label class="btn btn-default col-xs-3 col-md-3 col-lg-4 active monitored">
              <span class="value" id="temperature-cabin">-</span>
              <span class="unit">C°</span>
            </label></div>
          </div>
          <div style="margin-top:0.5em; margin-left:-1em" class="col-lg-3 col-md-4 col-xs-12">
            <div class="btn-group col-lg-12 col-md-12 col-xs-12"> <label class="btn btn-default col-lg-9 col-md-8 col-xs-7 disabled" id="monitored"><strong>SETPOINT TEMP.</strong></label><label class="btn btn-default col-xs-3 col-md-3 active monitored" data-toggle="tooltip" data-original-title="Available when Climate Control is ON only">
              <span class="value" id="temperature-setpoint">-</span>
              <span class="unit">C°</span>
            </label></div>
          </div>
          <div style="margin-top:0.5em; margin-left:-1em" class="col-lg-2 col-md-3 col-xs-12">
            <div class="btn-group col-lg-12 col-md-12 col-xs-12"> <label class="btn btn-default col-lg-9 col-md-8 col-xs-7 disabled" id="monitored"><strong>FAN SPEED</strong></label><label class="btn btn-default col-xs-3 col-md-3 active monitored">
              <span class="value" id="fan-speed">-</span>
            </label></div>
          </div>
      </div>
      <div class="row" id="air-info">
        <div style="margin-top:0.5em; margin-left:-1em" class="col-lg-3 col-md-4 col-xs-12">
          <div class="btn-group col-lg-12 col-md-12 col-xs-12"> <label class="btn btn-default col-lg-6 col-md-6 col-xs-6 disabled" id="monitored"><strong>VENTILATION</strong></label><label class="btn btn-default text-uppercase col-lg-6 col-md-6 col-xs-6 active monitored">
            <span class="value" id="air-vent">-</span>
          </label></div>
        </div>
        <div style="margin-top:0.5em; margin-left:-1em" class="col-lg-3 col-md-4 col-xs-12">
          <div class="btn-group col-lg-12 col-md-12 col-xs-12"> <label class="btn btn-default col-lg-6 col-md-6 col-xs-6 disabled" id="monitored"><strong>AIR INTAKE</strong></label><label class="btn btn-default text-uppercase col-lg-6 col-md-6 col-xs-6 active monitored">
            <span class="value" id="air-intake">-</span>
          </label></div>
        </div>
    </div>

    </div>
  </div>
  </div>

  <div class="panel panel-primary">
    <div class="panel-heading">Climate Controls</div>
    <div class="panel-body">
      <div class="container-fluid" id="climate-controls">
        <div class="row" id="action-buttons">
          <div style="margin:0.5em" class="col-xs-12">
            <div class="btn-group" data-toggle="buttons"> 
              <label class="btn btn-default disabled" id="monitored" data-toggle="tooltip" data-original-title="Control disbaled while Timer is active. Turn off active Timer instead.">
                <input type="radio" name="pre-heat"><strong>PRE-HEAT</strong></label>
              <label class="btn btn-default disabled" id="stop-preheat" data-target="#vehicle-cmdres" stored-cmd="climatecontrol off">
                <input type="radio" name="stop">STOP</label>
              <label class="btn btn-default disabled" id="start-preheat" data-target="#vehicle-cmdres" stored-cmd="climatecontrol on">
                <input type="radio" name="start">START</label>
                </div>
          </div>
      </div>

    </div>
  </div>
  </div>


  <div class="panel panel-primary">
    <div class="panel-heading" id=timer-section >Climate Control Timers</div>
    <div class="panel-body">
  
    <!-- <pre class="monitor" id=fetched_timers data-updcmd="config list vehicle" data-updcnt="1">Fetching Timer List...</pre> -->
    <div id=load-info >
      <pre class="alert alert-info" id=reload-info >Fetching Timer List...</pre>
    </div>

    <div class="list-items">
          <table id="cctimers" class="table form-table">
              <colgroup>
                  <col style="width:20%">
                  <col style="width:10%">
                  <col style="width:17.5%">
                  <col style="width:17%">
                  <col style="width:30.5%">
                  <col style="width:5%">
                  </colgroup>
              </table>
      </div>
    <button type="button" class="btn btn-success list-item-add" data-toggle="tooltip" data-original-title="Add new Timer"><strong>✚</strong></button>
  
  
    <div class="text-center">
          <button id="fetch_all" class="btn btn-default">Refresh</button>
          <button id="save_all" class="btn btn-primary">Save</button>
          </div>
  
  
    </div>
  </div>
  
  
  <script>
  (function(){

    window.newTimers = []

    function contains(item,string) {
      if (item.indexOf(string) > -1) {
          return true
      }
      else {
          return false
      }
    }

    function replaceAll (itemString,stringList,replaceWith) {
      var newString = itemString
      for (let stringToReplace of stringList) {
        var currentRegex = new RegExp("\\" + stringToReplace, "g")
        newString = newString.replace(currentRegex,replaceWith)
      }
      return newString
    }

    function appendToHtml (trargetId,htmlContent) {
      var currentHtml = $(trargetId).html()
      $(trargetId).html(currentHtml + htmlContent)
    }

    function saveGetStatus (cmd) {
            window.savePending.push(loadcmd(cmd))
          }
          
    function sendConfigCmds(execList) {
      var delayIncreaser = 0
      for (itemnum in execList) {
        setTimeout(saveGetStatus,300*delayIncreaser,execList[itemnum])
        delayIncreaser++
      };
    }

    function showtempInfo (divTarget,divId,infoContents,timeoutInSec) {
        $(divTarget).append('<pre class="alert" id="' + divId + '" >' + infoContents + '</pre>')
        if (divId.includes("error")) {
          $("#" + divId).addClass("alert-danger")
        }
        else if (divId.includes("success")) {
          $("#" + divId).addClass("alert-success")
        }
        else {
          $("#" + divId).addClass("alert-info")
        }
        if (timeoutInSec) {
          var timeoutCounter = 0
          function infoTimeout(divId,timeoutCounter,timeoutInSec){
            timeoutCounter += 1
            if (timeoutCounter == timeoutInSec) {
              var divToRemove = "#" + divId
              $(divToRemove).remove()
            }
            else{
                setTimeout( function() {
                  infoTimeout(divId,timeoutCounter,timeoutInSec)
                }, 1000)
            }
          }
          infoTimeout(divId,timeoutCounter,timeoutInSec)
        }
      }

    function removeFromList(itemList,item) {
        var updatedList = itemList.filter(function(e) { return e !== item })
        return updatedList
    }

    function parseTimer(timerText,timerDict) {
        if (contains(timerText,'cctimer.')) {
            var timerParams = timerText.split(':')
            var timerLabel = timerParams[0].split('.')[1]
            var timePeriodText = timerParams[1].trim()
            var timePeriodarray = timePeriodText.split('-')
            if (timePeriodarray[0] == 1) {
                var timerEnabled = true
            }
            else {
                var timerEnabled = false
            }
            var startTime = timePeriodarray[1]
            var endTime = timePeriodarray[2]
            if (timePeriodarray.length > 3) {
                var weekDays = timePeriodarray[3].split("")
            }
            else {
                var weekDays = []
            }
            
            var startHours = startTime.split('').slice(0,2).join('')
            var startMinutes = startTime.split('').slice(2,4).join('')
            var startTimeParsed = startHours + ":" + startMinutes
            var endHours = endTime.split('').slice(0,2).join('')
            var endMinutes = endTime.split('').slice(2,4).join('')
            var endTimeParsed = endHours + ":" + endMinutes
            timerDict[timerLabel] = {
                'Start': startTimeParsed,
                'End': endTimeParsed,
                'Enabled': timerEnabled,
                'Weekdays': weekDays,
            }
            return timerDict
    
        }
        else {
            return false
        }
    }
    function getActiveTimer (timerText,timerDict) {
        if (contains(timerText,'cctimer-')) {
            var timerParams = timerText.split(':')
            var activeTimer = timerParams[1].trim()
            if (activeTimer == undefined || activeTimer == "no") {
              window.activeTimer = false
            }
            else {
              window.activeTimer = activeTimer
            }
            if (contains(Object.keys(timerDict),activeTimer)) {
              timerDict[activeTimer]['Active'] = true
            }
    
        }
        else {
            return false
        }
    }

    function monitorActiveTimer (refreshIntervalMs) {
      var timerRaw = loadcmd("config list vehicle")
      waitForTimers(timerRaw,"responseText",true)
      window.monitoring["ActiveTimer"] = setTimeout( function() {
        monitorActiveTimer(refreshIntervalMs)
      }, refreshIntervalMs)

    }

    function testSend (turnOn,refreshIntervalMs) {
      if (turnOn) {
        loadcmd("climatecontrol on")
      }
      else {
        loadcmd("climatecontrol off")
        setTimeout( function() {
          testSend(true,refreshIntervalMs)
        }, refreshIntervalMs)
      }
      

    }

  // Multi Purpose code part starts
 function waitForMetricResponseAndRender (waitDict,waitElement,metricValue,metricID,timeoutMs,waitInterval,boolValue,reversedLogic,numDecimals,pgBar,pgMax,metricUnit,customText){
        if(typeof waitDict[waitElement]  != "undefined" || timeoutMs < 0){
            var metricRaw = waitDict[waitElement]
            var metricText = ""
            if (metricRaw != undefined && metricRaw && !contains(metricRaw,"Unrecognised metric name") && !contains(metricRaw,"Usage:")) {
              metricText = metricRaw.split(metricValue)[1]
              if (metricText == undefined) {
                metricText = metricRaw
              }
              metricText = metricText.split(/\r?\n/)[0].trim().replace("°C","").replace("%","") /* :) */
              if (boolValue != undefined && boolValue) {
                if (contains(metricText,"yes") || contains(metricText,"on")) {
                  metricText = true
                }
                else {
                  metricText = false
                }
              }
              renderMetric (metricText,metricID,boolValue,reversedLogic,numDecimals,pgBar,pgMax,metricUnit,customText)
            }
            

        }
        else{
            timeoutMs -= waitInterval
            setTimeout( function() {
              waitForMetricResponseAndRender(waitDict,waitElement,metricValue,metricID,timeoutMs,waitInterval,boolValue,reversedLogic,numDecimals,pgBar,pgMax,metricUnit,customText)
            }, waitInterval)
        }
    }

  function waitForTimers(waitDict,waitElement,fetchActiveOnly){
        if(typeof waitDict[waitElement]  !== "undefined"){
            
            if (fetchActiveOnly == undefined) {
              window.timerDictList = loadTimers(waitDict,waitElement,fetchActiveOnly)
              flushTimers(window.timerDictList)
              renderTimers(window.timerDictList)
              $("#reload-info").remove()
            }
            else {
              loadTimers(waitDict,waitElement,fetchActiveOnly)
              updateActiveTimer(window.timerDictList)
              if (metrics["v.e.hvac"] && !window.activeTimer) {
                window.remoteHeat = true
              }
              else (
                window.remoteHeat = false
              )
            }
            

        }
        else{
            setTimeout( function() {
              if (fetchActiveOnly == undefined) {
                appendToHtml("#reload-info",".")
              }
              waitForTimers(waitDict,waitElement,fetchActiveOnly)
            }, 100)
        }
    }

  function getMetricAndRender (metricValue,metricID,boolValue,reversedLogic,numDecimals,pgBar,pgMax,metricUnit,customText,customCommand) {
    var metricText = ''
    if (Object.keys(window).includes(metricValue)) {
      // console.log('Getting window metric:', metricValue)
      metricText = window[metricValue]
      renderMetric (metricText,metricID,boolValue,reversedLogic,numDecimals,pgBar,pgMax,metricUnit,customText)
    }
    else if (Object.keys(metrics).includes(metricValue)) {
      // console.log('Getting default metric:', metricValue)
      metricText = metrics[metricValue]
      renderMetric (metricText,metricID,boolValue,reversedLogic,numDecimals,pgBar,pgMax,metricUnit,customText)
    }
    else if (window.usrMetrics != undefined && Object.keys(window.usrMetrics).includes(metricValue)) {
      // console.log('Getting user metric:', metricValue)
      metricText = window.usrMetrics[metricValue]
      renderMetric (metricText,metricID,boolValue,reversedLogic,numDecimals,pgBar,pgMax,metricUnit,customText)
    }
    else if (customCommand) {
      // console.log('Getting custom metric:', metricValue)
      waitForMetricResponseAndRender(loadcmd(metricValue),"responseText",metricValue,metricID,2000,100,boolValue,reversedLogic,numDecimals,pgBar,pgMax,metricUnit,customText)
    }
    return metricText
  }

  function monitorMetric (metricValue,metricID,boolValue,reversedLogic,numDecimals,pgBar,pgMax,metricUnit,customText,customCommand){
    getMetricAndRender(metricValue,metricID,boolValue,reversedLogic,numDecimals,pgBar,pgMax,metricUnit,customText,customCommand)

    window.monitoring[metricValue] = setTimeout( function() {
      monitorMetric(metricValue,metricID,boolValue,reversedLogic,numDecimals,pgBar,pgMax,metricUnit,customText,customCommand)
    }, 1000)
  }

  function renderMetric (metricText,metricID,boolValue,reversedLogic,numDecimals,pgBar,pgMax,metricUnit,customText){
    var metricIDVal = "#" + metricID
    if ((boolValue == undefined || !boolValue) && metricText == '') {
      return
    }
    if (boolValue == undefined || !boolValue) {
      if (numDecimals != undefined) {
        metricText = parseFloat(metricText).toFixed(numDecimals)
        if (reversedLogic != undefined && reversedLogic) {
          metricText = metricText * -1
        }
      }
      
      if (pgBar) {
        var metricPct = metricText
        if (pgMax != undefined && pgMax) {
          metricPct = parseFloat(metricText)*100/pgMax
        }
        metricPct = metricPct + "%"
        $(metricIDVal).attr('aria-valuenow',metricPct)
        $(metricIDVal).attr('style',"width: " + metricPct + ";")
      }

      if (metricUnit != undefined && metricUnit) {
        metricText = metricText + " " + metricUnit
      }

      $(metricIDVal).text(metricText)
    }
    else {
      if (reversedLogic != undefined && reversedLogic) {
        metricText = !metricText
      }
      var disabledStyle = "color:grey"
      var oldText = $(metricIDVal).html()
      if (metricText) {
        if (oldText != undefined) {
          if (customText != undefined && customText) {
            $(metricIDVal).html(oldText.replace(customText,""))
          }
          else{
            $(metricIDVal).html(oldText.replace(" OFF"," ON"))
          }
        }
        $(metricIDVal).removeClass("disabled btn-off")
        $(metricIDVal).addClass($(metricIDVal).attr('actvstl'))
        if ($(metricIDVal).attr('stored-cmd') != undefined) {
          $(metricIDVal).attr('data-cmd',$(metricIDVal).attr('stored-cmd'))
        }
        $(metricIDVal).addClass("active")
        if ($(metricIDVal).attr('style') != undefined) {
          $(metricIDVal).attr('style',$(metricIDVal).attr('style').replace(disabledStyle,""))
        }
        
        
      }
      else {
        if (oldText != undefined) {
          if (customText != undefined && customText) {
            $(metricIDVal).html(customText + oldText.replace(customText,""))
          }
          else{
            $(metricIDVal).html(oldText.replace(" ON"," OFF"))
          }
        }
        $(metricIDVal).off("click")
        $(metricIDVal).removeClass($(metricIDVal).attr('actvstl'))
        $(metricIDVal).removeClass("active")
        $(metricIDVal).addClass("disabled btn-off")
        if ($(metricIDVal).attr('data-cmd') != undefined) {
          $(metricIDVal).removeAttr('data-cmd')
        }
        if ($(metricIDVal).attr('style') != undefined) {
          $(metricIDVal).attr('style',$(metricIDVal).attr('style') + disabledStyle)
        }
      }
    }
  }

  // Multi Purpose code part ends

    function loadTimers(confDict,confElement,fetchActiveOnly) {
        var timerDict = {}
      //   var timerList = $('#fetched_timers').html()
        var timerConf = confDict[confElement]
        var configList = timerConf.split("\n")
        
        for (var config in configList) {
            var timerText = configList[config].trim()
            var timerParsed = parseTimer(timerText,timerDict)
        }
        for (var config in configList) {
            var timerText = configList[config].trim()
            var activeTimer = getActiveTimer(timerText,timerDict)
        }
        if (fetchActiveOnly == undefined) {
          return timerDict
        }
        else {
          return activeTimer
        }
    }
    
    function updateActiveTimer(ccTimers) {
      for (var currentTimer in ccTimers) {
        var labelStyle = 'default'
        if (ccTimers[currentTimer]['Enabled']) {
            labelStyle = 'primary'
        }

        if (currentTimer == window.activeTimer) {
          if (!$("#timer-label-" + currentTimer).hasClass('label-success')) {
            timerActive = ' <span class="progress-bar-default text-success" style="font-size:0.7em">ACTIVE NOW</span>'
            $("#timer-label-" + currentTimer).append(timerActive)
            $("#timer-label-" + currentTimer).removeClass('label-' + labelStyle)
            $("#timer-label-" + currentTimer).addClass('label-success')
          }
        }
        else {
          if ($("#timer-label-" + currentTimer).hasClass('label-success')) {
            $("#timer-label-" + currentTimer).find('span').remove()
            $("#timer-label-" + currentTimer).removeClass('label-success')
            $("#timer-label-" + currentTimer).addClass('label-' + labelStyle)
          }
        }
      }
    }

    function renderTimers(ccTimers,addOnly) {
      if (window.mobilecheck()) {
        colSeparator = 'div'
        rowSeparator = 'class="container-fluid timer-item"'
        gridSize = 'col-xs-'
        gridStyle = 'style="margin-top:1.5em"'
      }
      else {
        colSeparator = 'td'
        rowSeparator = 'class="list-item timer-item"'
        gridSize = 'dsk'
        gridStyle = ''
      }
      if (addOnly == undefined) {
        window.removalsPending = []
      }
      for (var currentTimer in ccTimers) {
        $('#cctimers').append('<tr ' + rowSeparator + ' id="' + currentTimer + '"></tr>')
        if (window.mobilecheck()) {
          $('#' + currentTimer).append("<hr>")
        }
        var timerActive = ''
        var enabled = ''
        var disabled = 'active'
        var labelStyle = 'default'
        if (ccTimers[currentTimer]['Enabled']) {
            enabled = 'active'
            disabled = ''
            labelStyle = 'primary'
        }

        if (contains(Object.keys(ccTimers[currentTimer]),'Active')) {
            timerActive = ' <span class="progress-bar-default text-success" style="font-size:0.7em">ACTIVE NOW</span>'
            labelStyle = 'success'
        }
        if (addOnly) {
          $('#' + currentTimer).append('<' + colSeparator + '><input type="text" class="form-control ' + gridSize + '12" id="timer-label-' + currentTimer + '" required="" pattern="^[a-zA-Z0-9._-]+$" placeholder="Unique name (letters: a-z/A-Z/0-9/./_/-)"  title="Letters: a-z/A-Z/0-9/./_/-" value=""></' + colSeparator + '>')
        }
        else {
          $('#' + currentTimer).append('<' + colSeparator + '><span style="font-size:16px;" data-toggle="tooltip" title="Name can be set only when adding new timer." class="label ' + gridSize + '12 label-' + labelStyle + '" id="timer-label-' + currentTimer + '" value="' + currentTimer.toUpperCase() + '">' + currentTimer.toUpperCase() + timerActive + '</' + colSeparator + '>')
        }

        $('#' + currentTimer).append('<' + colSeparator + '><div class="btn-group ' + gridSize + '12" ' + gridStyle + ' data-toggle="buttons"> <label class="btn btn-default ' + gridSize + '6 instasave ' + disabled + '"><input type="radio" name="disabled"> OFF</label><label class="btn btn-default ' + gridSize + '6 instasave ' + enabled + '" id="' + currentTimer + '-enabled"><input type="radio" name="enabled"> ON</label></div></' + colSeparator + '>')
        
        $('#' + currentTimer).append('<' + colSeparator + '><div ' + gridStyle + ' class="btn-group ' + gridSize + '12"> \
                                    <label class="btn btn-default disabled ' + gridSize + '6" style="font-weight:bold; height:2.5em;">\
                                                    <span class="value" style="font-size:16px; height:100%;">Start</span>\
                                                  </label>\
                                    <label class="btn btn-clear ' + gridSize + '6" style="height:2.5em;">\
                                        <input type="time" class="form-control rounded-0" id="' + currentTimer + '-start" name="time_from" required="" pattern="^[0-2][0-9]:[0-5][0-9]" placeholder="HH:MM" title="Start Time" value="' + ccTimers[currentTimer]['Start'] + '" style="margin-top:-0.5em; border-radius: 0 0.25em 0.25em 0 !important; margin-left:-1em; margin-right:1em; height:2.5em;">\
                                                  </label>\
                                      </div></' + colSeparator + '>')
        $('#' + currentTimer).append('<' + colSeparator + '><div ' + gridStyle + ' class="btn-group ' + gridSize + '12"> \
                                    <label class="btn btn-default disabled ' + gridSize + '6" style="font-weight:bold; height:2.5em;">\
                                                    <span class="value" style="font-size:16px; height:100%;">End</span>\
                                                  </label>\
                                    <label class="btn btn-clear ' + gridSize + '6" style="height:2.5em;">\
                                        <input type="time" class="form-control rounded-0" id="' + currentTimer + '-end" name="time_to" required="" pattern="^[0-2][0-9]:[0-5][0-9]" placeholder="HH:MM" title="End Time" value="' + ccTimers[currentTimer]['End'] + '" style="margin-top:-0.5em; border-radius: 0 0.25em 0.25em 0 !important; margin-left:-1em; margin-right:1em; height:2.5em;">\
                                                  </label>\
                                      </div></' + colSeparator + '>')

        $('#' + currentTimer).append('<' + colSeparator + '><div ' + gridStyle + ' class="btn-group ' + gridSize + '12" data-toggle="buttons">\
                                        <label class="btn btn-default " id="' + currentTimer + '-weekday1"><input type="checkbox" name="monday" > MON</label>\
                                        <label class="btn btn-default " id="' + currentTimer + '-weekday2"><input type="checkbox" name="tuesday" > TUE</label>\
                                        <label class="btn btn-default " id="' + currentTimer + '-weekday3">   <input type="checkbox" name="wednesday" > WED</label>\
                                        <label class="btn btn-default " id="' + currentTimer + '-weekday4">   <input type="checkbox" name="thursday" > THU</label>\
                                        <label class="btn btn-default " id="' + currentTimer + '-weekday5">   <input type="checkbox" name="friday" > FRI</label>\
                                        </div> <div class="btn-group ' + gridSize + '9" ' + gridStyle + ' data-toggle="buttons">\
                                        <label class="btn btn-default " id="' + currentTimer + '-weekday6">   <input type="checkbox" name="saturday" > SAT</label>\
                                        <label class="btn btn-default " id="' + currentTimer + '-weekday0">   <input type="checkbox" name="sunday" > SUN</label>\
                                      </div></div></' + colSeparator + '>')
        function showActiveDays(weekday) {
              $('#' + currentTimer + '-weekday' + weekday).addClass('active')
          }
        ccTimers[currentTimer]['Weekdays'].forEach(showActiveDays)
        if (timerActive || addOnly) {
          $('#' + currentTimer).append('<' + colSeparator + '><button type="label" ' + gridStyle + ' class="btn btn-danger list-item-del disabled ' + gridSize + '2" data-toggle="tooltip" title="Active/Not-Saved Timers can not be removed" ><strong>✖</strong></button></' + colSeparator + '>')
        }
        else {
          $('#' + currentTimer).append('<' + colSeparator + '><button type="label" ' + gridStyle + ' class="btn btn-danger list-item-del ' + gridSize + '2"><strong>✖</strong></button></' + colSeparator + '>')
        }
        
      }
      $('[data-toggle="tooltip"]').tooltip()
      $('.instasave').off("click")
      $('.instasave').on('click', function() {
        if (!$(this).hasClass("active")) {
          var selectedTimer = $(this).closest('.timer-item').attr('id')
          var timerStateId = "#" + selectedTimer + "-enabled"
          if ($(timerStateId).hasClass("active")) {
            $(timerStateId).removeClass('active')
            $("#timer-label-" + selectedTimer).removeClass('label-primary')
            $("#timer-label-" + selectedTimer).addClass('label-default')
          }
          else {
            $(timerStateId).addClass('active')
            $("#timer-label-" + selectedTimer).removeClass('label-default')
            $("#timer-label-" + selectedTimer).addClass('label-primary')
          }
          saveTimers(selectedTimer)
        }

      })
      $('.list-item-del').off("click")
      $('.list-item-del').on('click', function() {
        var selectedTimer = $(this).closest('.timer-item').attr('id')
        var timerId = "#" + selectedTimer
        $(timerId).remove()
        window.removalsPending.push("config rm vehicle cctimer." + selectedTimer)
      })
      $('.disabled').off("click")
      
      appendToHtml("#reload-info",".")
    }

    function flushTimers (ccTimers) {
      for (var currentTimer in ccTimers) {
        appendToHtml("#reload-info",".")
        $('#' + currentTimer).remove()
      }
      for (var currentTimer of window.newTimers) {
        appendToHtml("#reload-info",".")
        $('#' + currentTimer).remove()
      }
      window.newTimers = []
    }

    function addNewTimer () {
      var defaultTimers = {}
      var defaultTimerLabel = "default" + parseInt(window.newTimers.length)
      var newNum = 0
      var newTimerLabel = defaultTimerLabel + parseInt(newNum)
      while (Object.keys(window.timerDictList).includes(newTimerLabel)) {
        newNum += 1
        newTimerLabel = defaultTimerLabel + parseInt(newNum)
      }
      if (Object.keys(window.timerDictList).includes(newTimerLabel)) {
        
      }
      window.newTimers.push(newTimerLabel)
      parseTimer("cctimer." + newTimerLabel + ": 0-1000-1001-12345",defaultTimers)
      window.timerDictList = Object.assign({}, window.timerDictList, defaultTimers)

      renderTimers(defaultTimers,true)

    }


    
    function saveTimers (specifiedOnly) {
      $("#load-info").empty()
      showtempInfo("#load-info","save-info","Saving Timer List...")
      window.saveReady = []
      window.savePending = []
      window.saveDone = []
      for (var currentTimer in cctimers.tBodies[0].rows) {
        var label = cctimers.tBodies[0].rows[currentTimer].id
        if (label && (!specifiedOnly || specifiedOnly == label)) {
          var timerCmdOptions = []
          var timerWeekdays = ""
          var timerEnabled = "0"

          if ($("#" + label + "-enabled.active")[0]) {
            timerEnabled = "1"
            window.timerDictList[label]['Enabled'] = true
          }
          else {
            window.timerDictList[label]['Enabled'] = false
          }
          timerCmdOptions.push(timerEnabled)
          timerCmdOptions.push($("#" + label + "-start")[0].value.replace(":",""))
          timerCmdOptions.push($("#" + label + "-end")[0].value.replace(":",""))

          for  (var timerWeekday in [0,1,2,3,4,5,6]) {
            if ($("#" + label + "-weekday" + parseInt(timerWeekday) + ".active")[0]) {
              timerWeekdays += parseInt(timerWeekday)
            }
          }
          if (timerWeekdays) {
            timerCmdOptions.push(timerWeekdays)
          }

          var changedLabel = $("#timer-label-" + label)[0].value
          if (changedLabel) {
            // window.saveReady.push("config rm vehicle cctimer." + label)
            label = changedLabel.toLowerCase().replace("/ /g,","_").replace("/-/g,","_").replace("/./g,","_")
            label = replaceAll(label,["-","."," ","+"],"_")
          }
          var timerSaveCmd = "config set vehicle cctimer." + label + " " + timerCmdOptions.join("-")
          
          window.saveReady.push(timerSaveCmd)
          
        }
      }
      
      for (var timerRemoveCmd in window.removalsPending) {
        window.saveReady.push(window.removalsPending[timerRemoveCmd])
      }

      sendConfigCmds(window.saveReady)

      function waitForStatus(waitDict,waitElement){
          if(typeof waitDict[waitElement]  !== "undefined"){
            window.saveDone.push(waitDict[waitElement])
          }
          else{
              setTimeout( function() {
                appendToHtml("#save-info",".")
                waitForStatus(waitDict,waitElement)
              }, 100)
          }
      }
      
      function waitForAllStatus(){
        window.savedOk = []
        if(window.savePending.length == window.saveDone.length){
          var allSaved = true
          for (let saveResult in window.saveDone) {
            if (window.saveDone[saveResult].includes("has been")) {
              window.savedOk.push(window.saveDone[saveResult])
            }
            else {
              showtempInfo("#load-info","save-info-error-child",'Command Failed: "' + window.saveReady[saveResult])
              allSaved = false
            }
          }
          if (allSaved) {
            $("#save-info").remove()
            showtempInfo("#load-info","save-info-success","Saved!",15)
            
          }
          else if (window.savedOk.length > 0) {
            showtempInfo("#load-info","save-info-error","ERROR: Saved " + parseInt(window.savedOk.length) + " out of " + parseInt(window.savePending.length) + " Changes. Refresh & Retry.")
          }
          else {
            showtempInfo("#load-info","save-info-error","ERROR: Failed to Save Changes!")
          }
          
        }
        else{
            setTimeout( function() {
              waitForAllStatus()
            }, 100)
        }
      }

      function waitForSendCompletion(){
        if(window.saveReady.length == window.savePending.length){
          appendToHtml("#save-info","All Sent")
          for (var cctimerNum in window.savePending) {
            waitForStatus(window.savePending[cctimerNum],"responseText")
          }
          waitForAllStatus()

        }
        else{
            setTimeout( function() {
              appendToHtml("#save-info",".")
              waitForSendCompletion()
            }, 100)
        }
      }
      
      waitForSendCompletion()
      
    }

    window.mobilecheck = function() {
      var check = false;
      (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
      return check;
    };

    if (!window.loggedin) {
      login()
    }
    else {
      // clear monitoring
      if (window.monitoring != undefined) {
          for (let metricMon in window.monitoring) {
            clearTimeout(window.monitoring[metricMon])
            
        }
        }
        else {
          window.monitoring = {}
        }
      // start monitors
      monitorMetric("v.e.cabintemp","temperature-cabin",undefined,undefined,1)
      monitorMetric("v.e.cabinsetpoint","temperature-setpoint",undefined,undefined,1)
      monitorMetric("v.e.cabinvent","air-vent")
      monitorMetric("v.e.cabinintake","air-intake")
      monitorMetric("v.e.cabinfan","fan-speed")
      monitorMetric("v.e.hvac","climate-control-state",true)
      monitorMetric("v.e.heating","climate-heating",true)
      // monitorMetric("power ext12v status","climate-heating-ptc",true,undefined," ON",undefined,undefined,undefined,undefined,true)
      monitorMetric("v.e.cooling","climate-cooling",true)
      monitorMetric("remoteHeat","stop-preheat",true)
      monitorMetric("v.e.heating","start-preheat",true,true)
      monitorActiveTimer(5000)


      function reloadTimers () {
      $("#load-info").empty()
      showtempInfo("#load-info","reload-info","Fetching Timer List...")
      var timerRaw = loadcmd("config list vehicle")
      waitForTimers(timerRaw,"responseText")

      }
      
      $('#fetch_all').on('click', function() {
        reloadTimers()
        $(window).scrollTop($('#timer-section').offset().top - 50);
        })

      $('#save_all').on('click', function() {
        saveTimers()
        $(window).scrollTop($('#timer-section').offset().top - 50);
        })
      
      $('.list-item-add').on('click', function() {
        addNewTimer()
        
        })
        
      
      var timerRaw = loadcmd("config list vehicle")
      waitForTimers(timerRaw,"responseText")
      
      $('#timer_label').css ({
          "min-width": "80px"
      })
    }

    
    

  })();
  </script>