nodered_cfg/node_modules/node-red-contrib-suncron/suncron.html

<script type="text/javascript">
  ;(function () {
    const calcDuration = (eventType) => {
      // eventType can be 'sunset', 'dusk' etc.
      let hours = Number($(`#node-input-${eventType}OffsetHours`).val())
      let minutes = Number($(`#node-input-${eventType}OffsetMinutes`).val())
      return hours * 3600 + minutes * 60
    }

    const eventTypes = [
      'sunrise',
      'sunriseEnd',
      'goldenHourEnd',
      'solarNoon',
      'goldenHour',
      'sunsetStart',
      'sunset',
      'dusk',
      'nauticalDusk',
      'night',
      'nadir',
      'nightEnd',
      'nauticalDawn',
      'dawn',
    ]

    let defaults = {
      name: { value: '' },
      lat: { value: '', required: true, validate: RED.validators.number() },
      lon: { value: '', required: true, validate: RED.validators.number() },
      replay: { value: false },
      ejectScheduleOnUpdate: { value: false },
    }

    eventTypes.forEach((eventType) => {
      defaults[`${eventType}Payload`] = {
        value: '',
        validate: RED.validators.typedInput('payloadType'),
      }
      defaults[`${eventType}PayloadType`] = { value: 'string' }
      defaults[`${eventType}Topic`] = { value: '', required: false }
      defaults[`${eventType}OffsetType`] = { value: 1, required: true }
      defaults[`${eventType}OffsetHours`] = { value: 0, required: true }
      defaults[`${eventType}OffsetMinutes`] = { value: 0, required: true }
      defaults[`${eventType}Offset`] = { value: 0 }
    })

    RED.nodes.registerType('suncron', {
      category: 'smart home',
      color: '#FFCC66',
      defaults: defaults,
      inputs: 1,
      outputs: 1,
      icon: 'font-awesome/fa-sun-o',
      label: function () {
        return this.name || 'suncron'
      },
      oneditprepare: function () {
        $('#geolocate').click(() => {
          if ('geolocation' in navigator) {
            $('#node-input-lat').val('???')
            $('#node-input-lon').val('???')
            $('#geolocate > i').removeClass('fa-location-arrow')
            $('#geolocate > i').addClass('fa-hourglass')
            navigator.geolocation.getCurrentPosition((position) => {
              $('#node-input-lat').val(position.coords.latitude)
              $('#node-input-lon').val(position.coords.longitude)
              $('#geolocate > i').removeClass('fa-hourglass')
              $('#geolocate > i').addClass('fa-location-arrow')
            })
          } else {
            alert('Sorry, your browser does not support geolocation')
          }
        })

        eventTypes.forEach((eventType) => {
          const payloadName = `${eventType}Payload`
          const payloadType = `${eventType}PayloadType`

          if (this[payloadType] == null) {
            if (this[payloadType] == '') {
              this[payloadType] = 'date'
            } else {
              this[payloadType] = 'str'
            }
          } else if (
            this[payloadType] === 'string' ||
            this[payloadType] === 'none'
          ) {
            this[payloadType] = 'str'
          }
          $(`#node-input-${payloadType}`).val(this[payloadType])
          $(`#node-input-${payloadName}`).typedInput({
            default: 'str',
            typeField: $(`#node-input-${payloadType}`),
            types: ['str', 'num', 'bool', 'json'],
          })
          $(`#node-input-${payloadName}`).typedInput('type', this[payloadType])
        })
      },
      oneditsave: function () {
        eventTypes.forEach((eventType) => {
          $(`#node-input-${eventType}Offset`).val(calcDuration(eventType))
        })
      },
    })
  })()
</script>
<style>
  .form-row label {
    width: 130px !important;
  }
</style>

<script type="text/x-red" data-template-name="suncron">
  <div class="form-row">
      <label for="node-input-name"><i class="icon-tag"></i> Name</label>
      <input type="text" id="node-input-name" placeholder="Name">
  </div>

  <div class="form-row">
    <label for="node-input-lat"><i class="fa fa-globe"></i> Location</label>
    lat: <input type="text" id="node-input-lat" placeholder="latitude" style="width:100px">
    lon: <input type="text" id="node-input-lon" placeholder="longitude" style="width:100px">
    <button id="geolocate"><i class="fa fa-location-arrow"></i></button>
  </div>

  <div class="form-row">
    <label for="node-input-replay"><i class="fa fa-rocket"></i> Startup</label>
    <input type="checkbox" id="node-input-replay" style="width:30px; margin:0px"> Emit preceding event on startup
  </div>

  <div class="form-row">
    <label for="node-input-ejectScheduleOnUpdate"><i class="fa fa-repeat"></i> Schedule</label>
    <input type="checkbox" id="node-input-ejectScheduleOnUpdate" style="width:30px; margin:0px"> Emit schedule when updated <i class="fa fa-info-circle" title="When enabled, this will emit a message with the topic &quot;suncron:schedule&quot; and the schedule object as payload"></i>
  </div>

  <hr />

  <!-- sunrise -->
  <div class="form-row">
    <label for="node-input-sunrise"><i class="fa fa-clock-o"></i> Sunrise</label>
    <span>Top edge of the sun appears over the horizon</span>
  </div>

  <div class="form-row">
    <label for="node-input-sunrisePayload"><i class="fa fa-envelope"></i> <span data-i18n="common.label.payload">Payload</span></label>
    <input type="text" id="node-input-sunrisePayload" style="width:70%">
    <input type="hidden" id="node-input-sunrisePayloadType">
  </div>

  <div class="form-row">
    <label for="node-input-sunriseTopic"><i class="fa fa-tasks"></i> <span>Topic</span></label>
    <input type="text" id="node-input-sunriseTopic">
  </div>

  <div class="form-row">
    <label for="node-input-sunriseOffsetType"><i class="fa fa-sliders"></i> <span>Offset</span></label>
    <select style="width:50px; margin-left:0px;" id="node-input-sunriseOffsetType">
      <option value="1">+</option>
      <option value="-1">-</option>
    </select>&nbsp;
    <select style="width:50px; margin-left:0px;" id="node-input-sunriseOffsetHours">
      <option value="0">00</option>
      <option value="1">01</option>
      <option value="2">02</option>
      <option value="3">03</option>
      <option value="4">04</option>
      <option value="5">05</option>
      <option value="6">06</option>
      <option value="7">07</option>
      <option value="8">08</option>
      <option value="9">09</option>
      <option value="10">10</option>
      <option value="11">11</option>
      <option value="12">12</option>
      <option value="13">13</option>
      <option value="14">14</option>
      <option value="15">15</option>
      <option value="16">16</option>
      <option value="17">17</option>
      <option value="18">18</option>
      <option value="19">19</option>
      <option value="20">20</option>
      <option value="21">21</option>
      <option value="22">22</option>
      <option value="23">23</option>
    </select>&nbsp;hours
    <select style="width:50px; margin-left:0px;" id="node-input-sunriseOffsetMinutes">
      <option value="0">00</option>
      <option value="1">01</option>
      <option value="2">02</option>
      <option value="3">03</option>
      <option value="4">04</option>
      <option value="5">05</option>
      <option value="6">06</option>
      <option value="7">07</option>
      <option value="8">08</option>
      <option value="9">09</option>
      <option value="10">10</option>
      <option value="15">15</option>
      <option value="20">20</option>
      <option value="25">25</option>
      <option value="30">30</option>
      <option value="35">35</option>
      <option value="40">40</option>
      <option value="45">45</option>
      <option value="50">50</option>
      <option value="55">55</option>
    </select>&nbsp;minutes
    <input type="hidden" id="node-input-sunriseOffset">
  </div>

  <hr />

  <!-- sunriseEnd -->
  <div class="form-row">
    <label for="node-input-sunriseEnd"><i class="fa fa-clock-o"></i> Sunrise End</label>
    <span>Bottom edge of the sun touches the horizon</span>
  </div>

  <div class="form-row">
    <label for="node-input-sunriseEndPayload"><i class="fa fa-envelope"></i> <span data-i18n="common.label.payload">Payload</span></label>
    <input type="text" id="node-input-sunriseEndPayload" style="width:70%">
    <input type="hidden" id="node-input-sunriseEndPayloadType">
  </div>

  <div class="form-row">
    <label for="node-input-sunriseEndTopic"><i class="fa fa-tasks"></i> <span>Topic</span></label>
    <input type="text" id="node-input-sunriseEndTopic">
  </div>

  <div class="form-row">
    <label for="node-input-sunriseEndOffsetType"><i class="fa fa-sliders"></i> <span>Offset</span></label>
    <select style="width:50px; margin-left:0px;" id="node-input-sunriseEndOffsetType">
      <option value="1">+</option>
      <option value="-1">-</option>
    </select>&nbsp;
    <select style="width:50px; margin-left:0px;" id="node-input-sunriseEndOffsetHours">
      <option value="0">00</option>
      <option value="1">01</option>
      <option value="2">02</option>
      <option value="3">03</option>
      <option value="4">04</option>
      <option value="5">05</option>
      <option value="6">06</option>
      <option value="7">07</option>
      <option value="8">08</option>
      <option value="9">09</option>
      <option value="10">10</option>
      <option value="11">11</option>
      <option value="12">12</option>
      <option value="13">13</option>
      <option value="14">14</option>
      <option value="15">15</option>
      <option value="16">16</option>
      <option value="17">17</option>
      <option value="18">18</option>
      <option value="19">19</option>
      <option value="20">20</option>
      <option value="21">21</option>
      <option value="22">22</option>
      <option value="23">23</option>
    </select>&nbsp;hours
    <select style="width:50px; margin-left:0px;" id="node-input-sunriseEndOffsetMinutes">
      <option value="0">00</option>
      <option value="1">01</option>
      <option value="2">02</option>
      <option value="3">03</option>
      <option value="4">04</option>
      <option value="5">05</option>
      <option value="6">06</option>
      <option value="7">07</option>
      <option value="8">08</option>
      <option value="9">09</option>
      <option value="10">10</option>
      <option value="15">15</option>
      <option value="20">20</option>
      <option value="25">25</option>
      <option value="30">30</option>
      <option value="35">35</option>
      <option value="40">40</option>
      <option value="45">45</option>
      <option value="50">50</option>
      <option value="55">55</option>
    </select>&nbsp;minutes
    <input type="hidden" id="node-input-sunriseEndOffset">
  </div>

  <hr />

  <!-- goldenHourEnd -->
  <div class="form-row">
    <label for="node-input-goldenHourEnd"><i class="fa fa-clock-o"></i> Golden Hour End</label>
    <span>Morning golden hour (soft light, best time for photography) ends</span>
  </div>

  <div class="form-row">
    <label for="node-input-goldenHourEndPayload"><i class="fa fa-envelope"></i> <span data-i18n="common.label.payload">Payload</span></label>
    <input type="text" id="node-input-goldenHourEndPayload" style="width:70%">
    <input type="hidden" id="node-input-goldenHourEndPayloadType">
  </div>

  <div class="form-row">
    <label for="node-input-goldenHourEndTopic"><i class="fa fa-tasks"></i> <span>Topic</span></label>
    <input type="text" id="node-input-goldenHourEndTopic">
  </div>

  <div class="form-row">
    <label for="node-input-goldenHourEndOffsetType"><i class="fa fa-sliders"></i> <span>Offset</span></label>
    <select style="width:50px; margin-left:0px;" id="node-input-goldenHourEndOffsetType">
      <option value="1">+</option>
      <option value="-1">-</option>
    </select>&nbsp;
    <select style="width:50px; margin-left:0px;" id="node-input-goldenHourEndOffsetHours">
      <option value="0">00</option>
      <option value="1">01</option>
      <option value="2">02</option>
      <option value="3">03</option>
      <option value="4">04</option>
      <option value="5">05</option>
      <option value="6">06</option>
      <option value="7">07</option>
      <option value="8">08</option>
      <option value="9">09</option>
      <option value="10">10</option>
      <option value="11">11</option>
      <option value="12">12</option>
      <option value="13">13</option>
      <option value="14">14</option>
      <option value="15">15</option>
      <option value="16">16</option>
      <option value="17">17</option>
      <option value="18">18</option>
      <option value="19">19</option>
      <option value="20">20</option>
      <option value="21">21</option>
      <option value="22">22</option>
      <option value="23">23</option>
    </select>&nbsp;hours
    <select style="width:50px; margin-left:0px;" id="node-input-goldenHourEndOffsetMinutes">
      <option value="0">00</option>
      <option value="1">01</option>
      <option value="2">02</option>
      <option value="3">03</option>
      <option value="4">04</option>
      <option value="5">05</option>
      <option value="6">06</option>
      <option value="7">07</option>
      <option value="8">08</option>
      <option value="9">09</option>
      <option value="10">10</option>
      <option value="15">15</option>
      <option value="20">20</option>
      <option value="25">25</option>
      <option value="30">30</option>
      <option value="35">35</option>
      <option value="40">40</option>
      <option value="45">45</option>
      <option value="50">50</option>
      <option value="55">55</option>
    </select>&nbsp;minutes
    <input type="hidden" id="node-input-goldenHourEndOffset">
  </div>

  <hr />

  <!-- solarNoon -->
  <div class="form-row">
    <label for="node-input-solarNoon"><i class="fa fa-clock-o"></i> Solar Noon</label>
    <span>Sun is in the highest position</span>
  </div>

  <div class="form-row">
    <label for="node-input-solarNoonPayload"><i class="fa fa-envelope"></i> <span data-i18n="common.label.payload">Payload</span></label>
    <input type="text" id="node-input-solarNoonPayload" style="width:70%">
    <input type="hidden" id="node-input-solarNoonPayloadType">
  </div>

  <div class="form-row">
    <label for="node-input-solarNoonTopic"><i class="fa fa-tasks"></i> <span>Topic</span></label>
    <input type="text" id="node-input-solarNoonTopic">
  </div>

  <div class="form-row">
    <label for="node-input-solarNoonOffsetType"><i class="fa fa-sliders"></i> <span>Offset</span></label>
    <select style="width:50px; margin-left:0px;" id="node-input-solarNoonOffsetType">
      <option value="1">+</option>
      <option value="-1">-</option>
    </select>&nbsp;
    <select style="width:50px; margin-left:0px;" id="node-input-solarNoonOffsetHours">
      <option value="0">00</option>
      <option value="1">01</option>
      <option value="2">02</option>
      <option value="3">03</option>
      <option value="4">04</option>
      <option value="5">05</option>
      <option value="6">06</option>
      <option value="7">07</option>
      <option value="8">08</option>
      <option value="9">09</option>
      <option value="10">10</option>
      <option value="11">11</option>
      <option value="12">12</option>
      <option value="13">13</option>
      <option value="14">14</option>
      <option value="15">15</option>
      <option value="16">16</option>
      <option value="17">17</option>
      <option value="18">18</option>
      <option value="19">19</option>
      <option value="20">20</option>
      <option value="21">21</option>
      <option value="22">22</option>
      <option value="23">23</option>
    </select>&nbsp;hours
    <select style="width:50px; margin-left:0px;" id="node-input-solarNoonOffsetMinutes">
      <option value="0">00</option>
      <option value="1">01</option>
      <option value="2">02</option>
      <option value="3">03</option>
      <option value="4">04</option>
      <option value="5">05</option>
      <option value="6">06</option>
      <option value="7">07</option>
      <option value="8">08</option>
      <option value="9">09</option>
      <option value="10">10</option>
      <option value="15">15</option>
      <option value="20">20</option>
      <option value="25">25</option>
      <option value="30">30</option>
      <option value="35">35</option>
      <option value="40">40</option>
      <option value="45">45</option>
      <option value="50">50</option>
      <option value="55">55</option>
    </select>&nbsp;minutes
    <input type="hidden" id="node-input-solarNoonOffset">
  </div>

  <hr />

  <!-- goldenHour -->
  <div class="form-row">
    <label for="node-input-goldenHour"><i class="fa fa-clock-o"></i> Golden Hour</label>
    <span>Evening golden hour starts</span>
  </div>

  <div class="form-row">
    <label for="node-input-goldenHourPayload"><i class="fa fa-envelope"></i> <span data-i18n="common.label.payload">Payload</span></label>
    <input type="text" id="node-input-goldenHourPayload" style="width:70%">
    <input type="hidden" id="node-input-goldenHourPayloadType">
  </div>

  <div class="form-row">
    <label for="node-input-goldenHourTopic"><i class="fa fa-tasks"></i> <span>Topic</span></label>
    <input type="text" id="node-input-goldenHourTopic">
  </div>

  <div class="form-row">
    <label for="node-input-goldenHourOffsetType"><i class="fa fa-sliders"></i> <span>Offset</span></label>
    <select style="width:50px; margin-left:0px;" id="node-input-goldenHourOffsetType">
      <option value="1">+</option>
      <option value="-1">-</option>
    </select>&nbsp;
    <select style="width:50px; margin-left:0px;" id="node-input-goldenHourOffsetHours">
      <option value="0">00</option>
      <option value="1">01</option>
      <option value="2">02</option>
      <option value="3">03</option>
      <option value="4">04</option>
      <option value="5">05</option>
      <option value="6">06</option>
      <option value="7">07</option>
      <option value="8">08</option>
      <option value="9">09</option>
      <option value="10">10</option>
      <option value="11">11</option>
      <option value="12">12</option>
      <option value="13">13</option>
      <option value="14">14</option>
      <option value="15">15</option>
      <option value="16">16</option>
      <option value="17">17</option>
      <option value="18">18</option>
      <option value="19">19</option>
      <option value="20">20</option>
      <option value="21">21</option>
      <option value="22">22</option>
      <option value="23">23</option>
    </select>&nbsp;hours
    <select style="width:50px; margin-left:0px;" id="node-input-goldenHourOffsetMinutes">
      <option value="0">00</option>
      <option value="1">01</option>
      <option value="2">02</option>
      <option value="3">03</option>
      <option value="4">04</option>
      <option value="5">05</option>
      <option value="6">06</option>
      <option value="7">07</option>
      <option value="8">08</option>
      <option value="9">09</option>
      <option value="10">10</option>
      <option value="15">15</option>
      <option value="20">20</option>
      <option value="25">25</option>
      <option value="30">30</option>
      <option value="35">35</option>
      <option value="40">40</option>
      <option value="45">45</option>
      <option value="50">50</option>
      <option value="55">55</option>
    </select>&nbsp;minutes
    <input type="hidden" id="node-input-goldenHourOffset">
  </div>

  <hr />

  <!-- sunsetStart -->
  <div class="form-row">
    <label for="node-input-sunsetStart"><i class="fa fa-clock-o"></i> Sunset Start</label>
    <span>Bottom edge of the sun touches the horizon</span>
  </div>

  <div class="form-row">
    <label for="node-input-sunsetStartPayload"><i class="fa fa-envelope"></i> <span data-i18n="common.label.payload">Payload</span></label>
    <input type="text" id="node-input-sunsetStartPayload" style="width:70%">
    <input type="hidden" id="node-input-sunsetStartPayloadType">
  </div>

  <div class="form-row">
    <label for="node-input-sunsetStartTopic"><i class="fa fa-tasks"></i> <span>Topic</span></label>
    <input type="text" id="node-input-sunsetStartTopic">
  </div>

  <div class="form-row">
    <label for="node-input-sunsetStartOffsetType"><i class="fa fa-sliders"></i> <span>Offset</span></label>
    <select style="width:50px; margin-left:0px;" id="node-input-sunsetStartOffsetType">
      <option value="1">+</option>
      <option value="-1">-</option>
    </select>&nbsp;
    <select style="width:50px; margin-left:0px;" id="node-input-sunsetStartOffsetHours">
      <option value="0">00</option>
      <option value="1">01</option>
      <option value="2">02</option>
      <option value="3">03</option>
      <option value="4">04</option>
      <option value="5">05</option>
      <option value="6">06</option>
      <option value="7">07</option>
      <option value="8">08</option>
      <option value="9">09</option>
      <option value="10">10</option>
      <option value="11">11</option>
      <option value="12">12</option>
      <option value="13">13</option>
      <option value="14">14</option>
      <option value="15">15</option>
      <option value="16">16</option>
      <option value="17">17</option>
      <option value="18">18</option>
      <option value="19">19</option>
      <option value="20">20</option>
      <option value="21">21</option>
      <option value="22">22</option>
      <option value="23">23</option>
    </select>&nbsp;hours
    <select style="width:50px; margin-left:0px;" id="node-input-sunsetStartOffsetMinutes">
      <option value="0">00</option>
      <option value="1">01</option>
      <option value="2">02</option>
      <option value="3">03</option>
      <option value="4">04</option>
      <option value="5">05</option>
      <option value="6">06</option>
      <option value="7">07</option>
      <option value="8">08</option>
      <option value="9">09</option>
      <option value="10">10</option>
      <option value="15">15</option>
      <option value="20">20</option>
      <option value="25">25</option>
      <option value="30">30</option>
      <option value="35">35</option>
      <option value="40">40</option>
      <option value="45">45</option>
      <option value="50">50</option>
      <option value="55">55</option>
    </select>&nbsp;minutes
    <input type="hidden" id="node-input-sunsetStartOffset">
  </div>

  <hr />

  <!-- sunset -->
  <div class="form-row">
    <label for="node-input-sunset"><i class="fa fa-clock-o"></i> Sunset</label>
    <span>Sun disappears below the horizon, evening civil twilight starts</span>
  </div>

  <div class="form-row">
    <label for="node-input-sunsetPayload"><i class="fa fa-envelope"></i> <span data-i18n="common.label.payload">Payload</span></label>
    <input type="text" id="node-input-sunsetPayload" style="width:70%">
    <input type="hidden" id="node-input-sunsetPayloadType">
  </div>

  <div class="form-row">
    <label for="node-input-sunsetTopic"><i class="fa fa-tasks"></i> <span>Topic</span></label>
    <input type="text" id="node-input-sunsetTopic">
  </div>

  <div class="form-row">
    <label for="node-input-sunsetOffsetType"><i class="fa fa-sliders"></i> <span>Offset</span></label>
    <select style="width:50px; margin-left:0px;" id="node-input-sunsetOffsetType">
      <option value="1">+</option>
      <option value="-1">-</option>
    </select>&nbsp;
    <select style="width:50px; margin-left:0px;" id="node-input-sunsetOffsetHours">
      <option value="0">00</option>
      <option value="1">01</option>
      <option value="2">02</option>
      <option value="3">03</option>
      <option value="4">04</option>
      <option value="5">05</option>
      <option value="6">06</option>
      <option value="7">07</option>
      <option value="8">08</option>
      <option value="9">09</option>
      <option value="10">10</option>
      <option value="11">11</option>
      <option value="12">12</option>
      <option value="13">13</option>
      <option value="14">14</option>
      <option value="15">15</option>
      <option value="16">16</option>
      <option value="17">17</option>
      <option value="18">18</option>
      <option value="19">19</option>
      <option value="20">20</option>
      <option value="21">21</option>
      <option value="22">22</option>
      <option value="23">23</option>
    </select>&nbsp;hours
    <select style="width:50px; margin-left:0px;" id="node-input-sunsetOffsetMinutes">
      <option value="0">00</option>
      <option value="1">01</option>
      <option value="2">02</option>
      <option value="3">03</option>
      <option value="4">04</option>
      <option value="5">05</option>
      <option value="6">06</option>
      <option value="7">07</option>
      <option value="8">08</option>
      <option value="9">09</option>
      <option value="10">10</option>
      <option value="15">15</option>
      <option value="20">20</option>
      <option value="25">25</option>
      <option value="30">30</option>
      <option value="35">35</option>
      <option value="40">40</option>
      <option value="45">45</option>
      <option value="50">50</option>
      <option value="55">55</option>
    </select>&nbsp;minutes
    <input type="hidden" id="node-input-sunsetOffset">
  </div>

  <hr />

  <!-- dusk -->
  <div class="form-row">
    <label for="node-input-dusk"><i class="fa fa-clock-o"></i> Dusk</label>
    <span>Evening nautical twilight starts</span>
  </div>

  <div class="form-row">
    <label for="node-input-duskPayload"><i class="fa fa-envelope"></i> <span data-i18n="common.label.payload">Payload</span></label>
    <input type="text" id="node-input-duskPayload" style="width:70%">
    <input type="hidden" id="node-input-duskPayloadType">
  </div>

  <div class="form-row">
    <label for="node-input-duskTopic"><i class="fa fa-tasks"></i> <span>Topic</span></label>
    <input type="text" id="node-input-duskTopic">
  </div>

  <div class="form-row">
    <label for="node-input-duskOffsetType"><i class="fa fa-sliders"></i> <span>Offset</span></label>
    <select style="width:50px; margin-left:0px;" id="node-input-duskOffsetType">
      <option value="1">+</option>
      <option value="-1">-</option>
    </select>&nbsp;
    <select style="width:50px; margin-left:0px;" id="node-input-duskOffsetHours">
      <option value="0">00</option>
      <option value="1">01</option>
      <option value="2">02</option>
      <option value="3">03</option>
      <option value="4">04</option>
      <option value="5">05</option>
      <option value="6">06</option>
      <option value="7">07</option>
      <option value="8">08</option>
      <option value="9">09</option>
      <option value="10">10</option>
      <option value="11">11</option>
      <option value="12">12</option>
      <option value="13">13</option>
      <option value="14">14</option>
      <option value="15">15</option>
      <option value="16">16</option>
      <option value="17">17</option>
      <option value="18">18</option>
      <option value="19">19</option>
      <option value="20">20</option>
      <option value="21">21</option>
      <option value="22">22</option>
      <option value="23">23</option>
    </select>&nbsp;hours
    <select style="width:50px; margin-left:0px;" id="node-input-duskOffsetMinutes">
      <option value="0">00</option>
      <option value="1">01</option>
      <option value="2">02</option>
      <option value="3">03</option>
      <option value="4">04</option>
      <option value="5">05</option>
      <option value="6">06</option>
      <option value="7">07</option>
      <option value="8">08</option>
      <option value="9">09</option>
      <option value="10">10</option>
      <option value="15">15</option>
      <option value="20">20</option>
      <option value="25">25</option>
      <option value="30">30</option>
      <option value="35">35</option>
      <option value="40">40</option>
      <option value="45">45</option>
      <option value="50">50</option>
      <option value="55">55</option>
    </select>&nbsp;minutes
    <input type="hidden" id="node-input-duskOffset">
  </div>

  <hr />

  <!-- nauticalDusk -->
  <div class="form-row">
    <label for="node-input-nauticalDusk"><i class="fa fa-clock-o"></i> Nautical Dusk</label>
    <span>Evening astronomical twilight starts</span>
  </div>

  <div class="form-row">
    <label for="node-input-nauticalDuskPayload"><i class="fa fa-envelope"></i> <span data-i18n="common.label.payload">Payload</span></label>
    <input type="text" id="node-input-nauticalDuskPayload" style="width:70%">
    <input type="hidden" id="node-input-nauticalDuskPayloadType">
  </div>

  <div class="form-row">
    <label for="node-input-nauticalDuskTopic"><i class="fa fa-tasks"></i> <span>Topic</span></label>
    <input type="text" id="node-input-nauticalDuskTopic">
  </div>

  <div class="form-row">
    <label for="node-input-nauticalDuskOffsetType"><i class="fa fa-sliders"></i> <span>Offset</span></label>
    <select style="width:50px; margin-left:0px;" id="node-input-nauticalDuskOffsetType">
      <option value="1">+</option>
      <option value="-1">-</option>
    </select>&nbsp;
    <select style="width:50px; margin-left:0px;" id="node-input-nauticalDuskOffsetHours">
      <option value="0">00</option>
      <option value="1">01</option>
      <option value="2">02</option>
      <option value="3">03</option>
      <option value="4">04</option>
      <option value="5">05</option>
      <option value="6">06</option>
      <option value="7">07</option>
      <option value="8">08</option>
      <option value="9">09</option>
      <option value="10">10</option>
      <option value="11">11</option>
      <option value="12">12</option>
      <option value="13">13</option>
      <option value="14">14</option>
      <option value="15">15</option>
      <option value="16">16</option>
      <option value="17">17</option>
      <option value="18">18</option>
      <option value="19">19</option>
      <option value="20">20</option>
      <option value="21">21</option>
      <option value="22">22</option>
      <option value="23">23</option>
    </select>&nbsp;hours
    <select style="width:50px; margin-left:0px;" id="node-input-nauticalDuskOffsetMinutes">
      <option value="0">00</option>
      <option value="1">01</option>
      <option value="2">02</option>
      <option value="3">03</option>
      <option value="4">04</option>
      <option value="5">05</option>
      <option value="6">06</option>
      <option value="7">07</option>
      <option value="8">08</option>
      <option value="9">09</option>
      <option value="10">10</option>
      <option value="15">15</option>
      <option value="20">20</option>
      <option value="25">25</option>
      <option value="30">30</option>
      <option value="35">35</option>
      <option value="40">40</option>
      <option value="45">45</option>
      <option value="50">50</option>
      <option value="55">55</option>
    </select>&nbsp;minutes
    <input type="hidden" id="node-input-nauticalDuskOffset">
  </div>

  <hr />

  <!-- night -->
  <div class="form-row">
    <label for="node-input-night"><i class="fa fa-clock-o"></i> Night</label>
    <span>Dark enough for astronomical observations</span>
  </div>

  <div class="form-row">
    <label for="node-input-nightPayload"><i class="fa fa-envelope"></i> <span data-i18n="common.label.payload">Payload</span></label>
    <input type="text" id="node-input-nightPayload" style="width:70%">
    <input type="hidden" id="node-input-nightPayloadType">
  </div>

  <div class="form-row">
    <label for="node-input-nightTopic"><i class="fa fa-tasks"></i> <span>Topic</span></label>
    <input type="text" id="node-input-nightTopic">
  </div>

  <div class="form-row">
    <label for="node-input-nightOffsetType"><i class="fa fa-sliders"></i> <span>Offset</span></label>
    <select style="width:50px; margin-left:0px;" id="node-input-nightOffsetType">
      <option value="1">+</option>
      <option value="-1">-</option>
    </select>&nbsp;
    <select style="width:50px; margin-left:0px;" id="node-input-nightOffsetHours">
      <option value="0">00</option>
      <option value="1">01</option>
      <option value="2">02</option>
      <option value="3">03</option>
      <option value="4">04</option>
      <option value="5">05</option>
      <option value="6">06</option>
      <option value="7">07</option>
      <option value="8">08</option>
      <option value="9">09</option>
      <option value="10">10</option>
      <option value="11">11</option>
      <option value="12">12</option>
      <option value="13">13</option>
      <option value="14">14</option>
      <option value="15">15</option>
      <option value="16">16</option>
      <option value="17">17</option>
      <option value="18">18</option>
      <option value="19">19</option>
      <option value="20">20</option>
      <option value="21">21</option>
      <option value="22">22</option>
      <option value="23">23</option>
    </select>&nbsp;hours
    <select style="width:50px; margin-left:0px;" id="node-input-nightOffsetMinutes">
      <option value="0">00</option>
      <option value="1">01</option>
      <option value="2">02</option>
      <option value="3">03</option>
      <option value="4">04</option>
      <option value="5">05</option>
      <option value="6">06</option>
      <option value="7">07</option>
      <option value="8">08</option>
      <option value="9">09</option>
      <option value="10">10</option>
      <option value="15">15</option>
      <option value="20">20</option>
      <option value="25">25</option>
      <option value="30">30</option>
      <option value="35">35</option>
      <option value="40">40</option>
      <option value="45">45</option>
      <option value="50">50</option>
      <option value="55">55</option>
    </select>&nbsp;minutes
    <input type="hidden" id="node-input-nightOffset">
  </div>

  <hr />

  <!-- nadir -->
  <div class="form-row">
    <label for="node-input-nadir"><i class="fa fa-clock-o"></i> Nadir</label>
    <span>Darkest moment of the night, sun is in the lowest position</span>
  </div>

  <div class="form-row">
    <label for="node-input-nadirPayload"><i class="fa fa-envelope"></i> <span data-i18n="common.label.payload">Payload</span></label>
    <input type="text" id="node-input-nadirPayload" style="width:70%">
    <input type="hidden" id="node-input-nadirPayloadType">
  </div>

  <div class="form-row">
    <label for="node-input-nadirTopic"><i class="fa fa-tasks"></i> <span>Topic</span></label>
    <input type="text" id="node-input-nadirTopic">
  </div>

  <div class="form-row">
    <label for="node-input-nadirOffsetType"><i class="fa fa-sliders"></i> <span>Offset</span></label>
    <select style="width:50px; margin-left:0px;" id="node-input-nadirOffsetType">
      <option value="1">+</option>
      <option value="-1">-</option>
    </select>&nbsp;
    <select style="width:50px; margin-left:0px;" id="node-input-nadirOffsetHours">
      <option value="0">00</option>
      <option value="1">01</option>
      <option value="2">02</option>
      <option value="3">03</option>
      <option value="4">04</option>
      <option value="5">05</option>
      <option value="6">06</option>
      <option value="7">07</option>
      <option value="8">08</option>
      <option value="9">09</option>
      <option value="10">10</option>
      <option value="11">11</option>
      <option value="12">12</option>
      <option value="13">13</option>
      <option value="14">14</option>
      <option value="15">15</option>
      <option value="16">16</option>
      <option value="17">17</option>
      <option value="18">18</option>
      <option value="19">19</option>
      <option value="20">20</option>
      <option value="21">21</option>
      <option value="22">22</option>
      <option value="23">23</option>
    </select>&nbsp;hours
    <select style="width:50px; margin-left:0px;" id="node-input-nadirOffsetMinutes">
      <option value="0">00</option>
      <option value="1">01</option>
      <option value="2">02</option>
      <option value="3">03</option>
      <option value="4">04</option>
      <option value="5">05</option>
      <option value="6">06</option>
      <option value="7">07</option>
      <option value="8">08</option>
      <option value="9">09</option>
      <option value="10">10</option>
      <option value="15">15</option>
      <option value="20">20</option>
      <option value="25">25</option>
      <option value="30">30</option>
      <option value="35">35</option>
      <option value="40">40</option>
      <option value="45">45</option>
      <option value="50">50</option>
      <option value="55">55</option>
    </select>&nbsp;minutes
    <input type="hidden" id="node-input-nadirOffset">
  </div>

  <hr />

  <!-- nightEnd -->
  <div class="form-row">
    <label for="node-input-nightEnd"><i class="fa fa-clock-o"></i> Night End</label>
    <span>Morning astronomical twilight starts</span>
  </div>

  <div class="form-row">
    <label for="node-input-nightEndPayload"><i class="fa fa-envelope"></i> <span data-i18n="common.label.payload">Payload</span></label>
    <input type="text" id="node-input-nightEndPayload" style="width:70%">
    <input type="hidden" id="node-input-nightEndPayloadType">
  </div>

  <div class="form-row">
    <label for="node-input-nightEndTopic"><i class="fa fa-tasks"></i> <span>Topic</span></label>
    <input type="text" id="node-input-nightEndTopic">
  </div>

  <div class="form-row">
    <label for="node-input-nightEndOffsetType"><i class="fa fa-sliders"></i> <span>Offset</span></label>
    <select style="width:50px; margin-left:0px;" id="node-input-nightEndOffsetType">
      <option value="1">+</option>
      <option value="-1">-</option>
    </select>&nbsp;
    <select style="width:50px; margin-left:0px;" id="node-input-nightEndOffsetHours">
      <option value="0">00</option>
      <option value="1">01</option>
      <option value="2">02</option>
      <option value="3">03</option>
      <option value="4">04</option>
      <option value="5">05</option>
      <option value="6">06</option>
      <option value="7">07</option>
      <option value="8">08</option>
      <option value="9">09</option>
      <option value="10">10</option>
      <option value="11">11</option>
      <option value="12">12</option>
      <option value="13">13</option>
      <option value="14">14</option>
      <option value="15">15</option>
      <option value="16">16</option>
      <option value="17">17</option>
      <option value="18">18</option>
      <option value="19">19</option>
      <option value="20">20</option>
      <option value="21">21</option>
      <option value="22">22</option>
      <option value="23">23</option>
    </select>&nbsp;hours
    <select style="width:50px; margin-left:0px;" id="node-input-nightEndOffsetMinutes">
      <option value="0">00</option>
      <option value="1">01</option>
      <option value="2">02</option>
      <option value="3">03</option>
      <option value="4">04</option>
      <option value="5">05</option>
      <option value="6">06</option>
      <option value="7">07</option>
      <option value="8">08</option>
      <option value="9">09</option>
      <option value="10">10</option>
      <option value="15">15</option>
      <option value="20">20</option>
      <option value="25">25</option>
      <option value="30">30</option>
      <option value="35">35</option>
      <option value="40">40</option>
      <option value="45">45</option>
      <option value="50">50</option>
      <option value="55">55</option>
    </select>&nbsp;minutes
    <input type="hidden" id="node-input-nightEndOffset">
  </div>

  <hr />

  <!-- nauticalDawn -->
  <div class="form-row">
    <label for="node-input-nauticalDawn"><i class="fa fa-clock-o"></i> Nautical Dawn</label>
    <span>Morning nautical twilight starts</span>
  </div>

  <div class="form-row">
    <label for="node-input-nauticalDawnPayload"><i class="fa fa-envelope"></i> <span data-i18n="common.label.payload">Payload</span></label>
    <input type="text" id="node-input-nauticalDawnPayload" style="width:70%">
    <input type="hidden" id="node-input-nauticalDawnPayloadType">
  </div>

  <div class="form-row">
    <label for="node-input-nauticalDawnTopic"><i class="fa fa-tasks"></i> <span>Topic</span></label>
    <input type="text" id="node-input-nauticalDawnTopic">
  </div>

  <div class="form-row">
    <label for="node-input-nauticalDawnOffsetType"><i class="fa fa-sliders"></i> <span>Offset</span></label>
    <select style="width:50px; margin-left:0px;" id="node-input-nauticalDawnOffsetType">
      <option value="1">+</option>
      <option value="-1">-</option>
    </select>&nbsp;
    <select style="width:50px; margin-left:0px;" id="node-input-nauticalDawnOffsetHours">
      <option value="0">00</option>
      <option value="1">01</option>
      <option value="2">02</option>
      <option value="3">03</option>
      <option value="4">04</option>
      <option value="5">05</option>
      <option value="6">06</option>
      <option value="7">07</option>
      <option value="8">08</option>
      <option value="9">09</option>
      <option value="10">10</option>
      <option value="11">11</option>
      <option value="12">12</option>
      <option value="13">13</option>
      <option value="14">14</option>
      <option value="15">15</option>
      <option value="16">16</option>
      <option value="17">17</option>
      <option value="18">18</option>
      <option value="19">19</option>
      <option value="20">20</option>
      <option value="21">21</option>
      <option value="22">22</option>
      <option value="23">23</option>
    </select>&nbsp;hours
    <select style="width:50px; margin-left:0px;" id="node-input-nauticalDawnOffsetMinutes">
      <option value="0">00</option>
      <option value="1">01</option>
      <option value="2">02</option>
      <option value="3">03</option>
      <option value="4">04</option>
      <option value="5">05</option>
      <option value="6">06</option>
      <option value="7">07</option>
      <option value="8">08</option>
      <option value="9">09</option>
      <option value="10">10</option>
      <option value="15">15</option>
      <option value="20">20</option>
      <option value="25">25</option>
      <option value="30">30</option>
      <option value="35">35</option>
      <option value="40">40</option>
      <option value="45">45</option>
      <option value="50">50</option>
      <option value="55">55</option>
    </select>&nbsp;minutes
    <input type="hidden" id="node-input-nauticalDawnOffset">
  </div>

  <hr />

  <!-- dawn -->
  <div class="form-row">
    <label for="node-input-dawn"><i class="fa fa-clock-o"></i> Dawn</label>
    <span>Morning nautical twilight ends, morning civil twilight starts</span>
  </div>

  <div class="form-row">
    <label for="node-input-dawnPayload"><i class="fa fa-envelope"></i> <span data-i18n="common.label.payload">Payload</span></label>
    <input type="text" id="node-input-dawnPayload" style="width:70%">
    <input type="hidden" id="node-input-dawnPayloadType">
  </div>

  <div class="form-row">
    <label for="node-input-dawnTopic"><i class="fa fa-tasks"></i> <span>Topic</span></label>
    <input type="text" id="node-input-dawnTopic">
  </div>

  <div class="form-row">
    <label for="node-input-dawnOffsetType"><i class="fa fa-sliders"></i> <span>Offset</span></label>
    <select style="width:50px; margin-left:0px;" id="node-input-dawnOffsetType">
      <option value="1">+</option>
      <option value="-1">-</option>
    </select>&nbsp;
    <select style="width:50px; margin-left:0px;" id="node-input-dawnOffsetHours">
      <option value="0">00</option>
      <option value="1">01</option>
      <option value="2">02</option>
      <option value="3">03</option>
      <option value="4">04</option>
      <option value="5">05</option>
      <option value="6">06</option>
      <option value="7">07</option>
      <option value="8">08</option>
      <option value="9">09</option>
      <option value="10">10</option>
      <option value="11">11</option>
      <option value="12">12</option>
      <option value="13">13</option>
      <option value="14">14</option>
      <option value="15">15</option>
      <option value="16">16</option>
      <option value="17">17</option>
      <option value="18">18</option>
      <option value="19">19</option>
      <option value="20">20</option>
      <option value="21">21</option>
      <option value="22">22</option>
      <option value="23">23</option>
    </select>&nbsp;hours
    <select style="width:50px; margin-left:0px;" id="node-input-dawnOffsetMinutes">
      <option value="0">00</option>
      <option value="1">01</option>
      <option value="2">02</option>
      <option value="3">03</option>
      <option value="4">04</option>
      <option value="5">05</option>
      <option value="6">06</option>
      <option value="7">07</option>
      <option value="8">08</option>
      <option value="9">09</option>
      <option value="10">10</option>
      <option value="15">15</option>
      <option value="20">20</option>
      <option value="25">25</option>
      <option value="30">30</option>
      <option value="35">35</option>
      <option value="40">40</option>
      <option value="45">45</option>
      <option value="50">50</option>
      <option value="55">55</option>
    </select>&nbsp;minutes
    <input type="hidden" id="node-input-dawnOffset">
  </div>

  <hr />
</script>

<script type="text/x-red" data-help-name="suncron">
    <p>This node emits configurable outgoing messages based on the position of the sun.</p>
    <h3>Sun event outputs</h3>
      <dl class="message-properties">
        <dt>msg.payload
            <span class="property-type">string | bool | number | obj</span>
        </dt>
        <dt>msg.topic
          <span class="property-type">string</span>
        </dt>
        <dt>msg.schedule
          <span class="property-type">obj</span>
        </dt>
        <dt>msg.next
          <span class="property-type">obj</span>
        </dt>
      </dl>
    <h4>Details</h4>
    <p>
      For each significant sun event (e.g. sunrise, noon, dusk etc.) a <code>msg.payload</code> and <code>msg.topic</code> can be
      specified which the node will emit once the event fires.
    </p>
    <p>
      You can configure a positive or negative offset to adjust each event.
    </p>
    <h4>Schedule</h4>
    <p>
      The <code>msg.schedule</code> attribute contains an object with details about the
      schedule of the current date. The schedule contains only events which have been configured with a payload.
      Each event has the following attributes:
      <ul>
        <li><code>event</code> is the name of the sun event</li>
        <li><code>sunEventTime</code> refers to the unadjusted time of the respective sun event.</li>
        <li><code>cronTime</code> refers to the adjusted time, i.e. taking the offset into account.</li>
      </ul>
    </p>
    <h5>Example <code>msg.schedule</code> object</h5>
    <pre>
  {
    "sunrise": {
        "event": "sunrise",
        "sunEventTime": "2019-09-08T06:29:51",
        "cronTime": "2019-09-08T07:31:51"
    },
    "sunriseEnd": {
        "event": "sunriseEnd",
        "sunEventTime": "2019-09-08T06:33:24",
        "cronTime": "2019-09-08T03:33:24"
    },
    "dawn": {
        "event": "dawn",
        "sunEventTime": "2019-09-08T05:54:49",
        "cronTime": "2019-09-08T06:54:49"
    }
    ...
  }
    </pre>
    <h4>Next</h4>
    <p>
      The <code>msg.next</code> attribute contains the event object of the schedule which is coming up next.
    </p>
    <h3>Schedule event outputs</h3>
    <p>
      If the checkbox &quot;Emit schedule when updated&quot; is ticked, the node will emit additional messages whenever
      the schedule gets updated. This happens on startup, when offsets are overridden at runtime, and shortly
      after midnight. Those messages will contain the schedule object as <code>msg.payload</code> (same structure as above)
      and the string &quot;suncron:schedule&quot; as <code>msg.topic</code>.
    </p>
    <dl class="message-properties">
      <dt>msg.payload
          <span class="property-type">obj</span>
      </dt>
      <dt>msg.topic
        <span class="property-type">&quot;suncron:schedule&quot;</span>
      </dt>
    </dl>
</script>