<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="theme-color" content="#000000">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bundle.css">
<script src="bundle.js"></script>
</head>
<body>
  <div id="app">
    <div v-cloak>
      <div class="notificationContainer">
        <div class="notification" :class="{ error: notification != null && notification.error }" v-if="notification != null" @click.prevent="hideNotification">
          <span class="message">{{ notification.message }}</span>
        </div>
      </div>

      <div id="container">
        <div class="header">
          <img src="data:image/png;base64, " />
          <h1>{{ $t('title') }}</h1>
          <h2>{{ status.systemID !== null ? $t('systemID') + ': ' + status.systemID : '' }}</h2>

          <div class="wifistatus">
            <div class="connection">
              <div class="indicator" :data-status="wifiStatus.ap.enabled ? 'connected' : 'disconnected'"></div> {{ $t('wifiStatus.accesspoint.title') }} {{ wifiStatus.ap.enabled ? wifiStatus.ap.ip : $t('wifiStatus.accesspoint.disabled') }}
            </div>
            <div class="connection">
              <div class="indicator" :data-status="getWiFiStationStatus()"></div> {{ $t('wifiStatus.stationmode.title') }} {{ getWiFiStationStatusText() }}
            </div>
            <div class="connection">
              <div class="indicator" data-status="disconnected"></div> {{ $t('deviceTime') }}{{ getDeviceTime }}
            </div>
          </div>
        </div>

        <div v-if="loading" class="loading">
          {{ $t('loading') }} {{ loadingIndicator }}
        </div>

        <div v-if="!loading && calibration === null">
          <div class="warning" v-if="hasResetError">
            <p>
              {{ $t('error.resetError') }}
            </p>

            <p class="resetReason">
              {{ $t('error.resetReason.' + status.resetReason) }}
            </p>

            <p v-if="status.stackTrace">
              {{ $t('error.stackTrace') }}
            </p>

            <div v-if="status.stackTrace">
              <a class="button button-primary" href="/api/stacktrace/get">{{ $t('error.stackTraceDownload') }}</a>
              <a class="button" @click="deleteStackTrace">{{ $t('error.stackTraceDelete') }}</a>
            </div>
          </div>


          <div class="navigation tabs">
            <a class="button" :class="{ 'active': activeTab == 'status' }" @click="activeTab = 'status'">{{ $t('status.tabTitle') }}</a><a class="button" :class="{ 'active': activeTab == 'triggers' }" @click="activeTab = 'triggers'">{{ $t('triggers.tabTitle') }}</a><a class="button" :class="{ 'active': activeTab == 'connection' }" @click="activeTab = 'connection'">{{ $t('connection.tabTitle') }}</a><a class="button" :class="{ 'active': activeTab == 'system' }" @click="activeTab = 'system'">{{ $t('system.tabTitle') }}</a>
          </div>

          <div v-if="activeTab == 'status'">
            <!--

              Status tab

            -->
            <h3>{{ $t('status.title') }}</h3>

            <div><radio :title="$t('status.allStepsTrue')" v-model="allSteps" :id="true"></radio></div>
            <div><radio :title="$t('status.allStepsFalse')" v-model="allSteps" :id="false"></radio></div>

            <div class="sliders">
              <div class="step" v-if="allSteps">
                <span class="value">{{ Math.floor(allStepsValue / 255 * 100) }}%</span>
                <div class="slidercontainer">
                  <input type="range" min="0" max="255" class="slider" v-model.number="allStepsValue">
                </div>
              </div>

              <div class="step" v-if="!allSteps" v-for="(step, index) in steps">
                <span class="value">{{ Math.floor(step.value / 255 * 100) }}%</span>
                <div class="slidercontainer">
                  <input type="range" min="0" max="255" class="slider" v-model.number="step.value">
                </div>
              </div>
            </div>
          </div>

          <div v-if="activeTab == 'triggers'">
            <!--

              Triggers tab

            -->
            <form @submit.prevent="applyTimeTriggers">
              <h3>{{ $t('triggers.timeTitle') }}</h3>

              <check v-model.boolean="triggers.time.enabled" :title="$t('triggers.timeEnabled')"></check>

              <div v-if="triggers.time.enabled">
                <div class="warning" v-if="!wifiStatus.station.enabled || wifiStatus.station.status != 3">
                  {{ $t('triggers.timeInternet') }}
                </div>

                <label for="timeTransitionTime">{{ $t('triggers.timeTransitionTime') }}</label>
                <input type="number" id="timeTransitionTime" v-model.number="triggers.time.transitionTime">

                <h4>Regels</h4>
                <div v-if="triggers.time.triggers.length">
                  <div v-for="(trigger, index) in triggers.time.triggers" class="panel" :class="{ active: trigger.enabled }">
                    <div class="panel-header">
                      <check v-model.boolean="trigger.enabled" :title="$t('triggers.timeTriggerEnabled')"></check>

                      <span class="actions">
                        <a href="#" @click.prevent="deleteTimeTrigger(index)">{{ $t('triggers.timeDelete') }}</a>
                      </span>
                      <div class="clear"></div>
                    </div>

                    <div class="panel-body">
                      <select v-model.number="trigger.triggerType" class="inline">
                        <option value="0">{{ $t('triggers.timeFixedTime') }}</option>
                        <option value="1">{{ $t('triggers.timeSunrise') }}</option>
                        <option value="2">{{ $t('triggers.timeSunset') }}</option>
                      </select>

                      <select v-model.number="trigger.fixedTime" class="inline" v-if="trigger.triggerType == 0">
                        <option v-for="time in fixedTimes" :value="time">{{ getDisplayTime(time, false) }}</option>
                      </select>
                      <select v-model.number="trigger.relativeTime" class="inline" v-else>
                        <option v-for="time in relativeTimes" :value="time">{{ getDisplayTime(time, true) }}</option>
                      </select>

                      <div class="weekdays">
                        <check v-model.boolean="trigger.monday" :title="$t('triggers.timeMonday')"></check>
                        <check v-model.boolean="trigger.tuesday" :title="$t('triggers.timeTuesday')"></check>
                        <check v-model.boolean="trigger.wednesday" :title="$t('triggers.timeWednesday')"></check>
                        <check v-model.boolean="trigger.thursday" :title="$t('triggers.timeThursday')"></check>
                        <check v-model.boolean="trigger.friday" :title="$t('triggers.timeFriday')"></check>
                        <check v-model.boolean="trigger.saturday" :title="$t('triggers.timeSaturday')"></check>
                        <check v-model.boolean="trigger.sunday" :title="$t('triggers.timeSunday')"></check>
                      </div>

                      <div class="step">
                        <span class="value">{{ Math.floor(trigger.brightness / 255 * 100) }}%</span>
                        <div class="slidercontainer">
                          <input type="range" min="0" max="255" class="slider" v-model.number="trigger.brightness">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div v-else class="nodata">
                  {{ $t('triggers.timeNoData') }}
                </div>

                <div class="buttons">
                  <button :disabled="saving" @click.prevent="addTimeTrigger">{{ $t('triggers.timeAdd') }}</button>
                </div>
              </div>

              <div class="buttons">
                <input type="submit" :disabled="saving" :value="saving ? $t('applyButtonSaving') : $t('applyButton')">
              </div>
            </form>

            <form @submit.prevent="applyMotionTriggers">
              <h3>{{ $t('triggers.motionTitle') }}</h3>

              <check v-model.boolean="triggers.motion.enabled" :title="$t('triggers.motionEnabled')"></check>

              <div v-if="triggers.motion.enabled">
                <label for="motionEnabledDuringTimeTrigger">{{ $t('triggers.motionEnabledDuringTimeTrigger') }}</label>
                <select v-model="triggers.motion.enabledDuringTimeTrigger" id="motionEnabledDuringTimeTrigger">
                  <option value="0">{{ $t('triggers.motionEnabledDuringTimeTriggerNever') }}</option>
                  <option value="1">{{ $t('triggers.motionEnabledDuringTimeTriggerAlways') }}</option>
                  <option value="2">{{ $t('triggers.motionEnabledDuringTimeTriggerOnly') }}</option>
                </select>

                <check v-model.boolean="triggers.motion.enabledDuringDay" :title="$t('triggers.motionEnabledDuringDay')"></check>

                <label for="motionTransitionTime">{{ $t('triggers.motionTransitionTime') }}</label>
                <input type="number" id="motionTransitionTime" v-model.number="triggers.motion.transitionTime">

                <label for="motionDelay">{{ $t('triggers.motionDelay') }}</label>
                <input type="number" id="motionDelay" v-model.number="triggers.motion.delay">

                <h4>Regels</h4>
                <div v-if="triggers.motion.triggers.length">
                  <div v-for="(trigger, index) in triggers.motion.triggers" class="panel" :class="{ active: trigger.enabled }">
                    <div class="panel-header">
                      <check v-model.boolean="trigger.enabled" :title="$t('triggers.motionTriggerEnabled')"></check>
                      <span class="actions">
                        <a href="#" @click.prevent="deleteMotionTrigger(index)">{{ $t('triggers.motionDelete') }}</a>
                      </span>
                      <div class="clear"></div>
                    </div>

                    <div class="panel-body">
                      <label :for="'motion' + index + '_pin'">{{ $t('triggers.motionPin') }}</label>
                      <input type="number" :id="'motion' + index + '_pin'" v-model.number="trigger.pin">

                      <label :for="'motion' + index + '_direction'">{{ $t('triggers.motionDirection') }}</label>
                      <select :id="'motion' + index + '_direction'" v-model.number="trigger.direction">
                        <option value="1">{{ $t('triggers.motionDirectionNonDirectional') }}</option>
                        <option value="2">{{ $t('triggers.motionDirectionTopDown') }}</option>
                        <option value="3">{{ $t('triggers.motionDirectionBottomUp') }}</option>
                      </select>

                      <div class="step">
                        <span class="value">{{ Math.floor(trigger.brightness / 255 * 100) }}%</span>
                        <div class="slidercontainer">
                          <input type="range" min="0" max="255" class="slider" v-model.number="trigger.brightness">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div v-else class="nodata">
                  {{ $t('triggers.motionNoData') }}
                </div>

                <div class="buttons">
                  <button :disabled="saving" @click.prevent="addMotionTrigger">{{ $t('triggers.motionAdd') }}</button>
                </div>
              </div>

              <div class="buttons">
                <input type="submit" :disabled="saving" :value="saving ? $t('applyButtonSaving') : $t('applyButton')">
              </div>
            </form>
          </div>

          <div v-if="activeTab == 'connection'">
            <!--

              Connection tab

            -->
            <form @submit.prevent="applyConnection">
              <h3>{{ $t('connection.title') }}</h3>

              <check v-model.boolean="connection.accesspoint" :title="$t('connection.accesspoint')"></check>
              <span class="hint">{{ $t('connection.accesspointHint') }}</span>

              <check v-model.boolean="connection.station" :title="$t('connection.stationmode')"></check>
              <span class="hint">{{ $t('connection.stationmodeHint') }}</span>

              <label for="ssid">{{ $t('connection.ssid') }}</label>
              <input type="text" id="ssid" v-model="connection.ssid" :disabled="!connection.station">

              <label for="password">{{ $t('connection.password') }}</label>
              <input type="password" id="password" v-model="connection.password" :disabled="!connection.station">

              <check v-model.boolean="connection.dhcp" :disabled="!connection.station" :title="$t('connection.dhcp')" class="form-control"></check>
              <span class="hint">{{ $t('connection.dhcpHint') }}</span>


              <div class="suboptions">
                <label for="ip">{{ $t('connection.ipaddress') }}</label>
                <input type="text" id="ip" v-model="connection.ip" :disabled="!connection.station || connection.dhcp">

                <label for="subnetmask">{{ $t('connection.subnetmask') }}</label>
                <input type="text" id="subnetmask" v-model="connection.subnetmask" :disabled="!connection.station || connection.dhcp">

                <label for="gateway">{{ $t('connection.gateway') }}</label>
                <input type="text" id="gateway" v-model="connection.gateway" :disabled="!connection.station || connection.dhcp">
              </div>


              <label for="hostname">{{ $t('connection.hostname') }}</label>
              <input type="text" :placeholder="$t('connection.hostnamePlaceholder')" id="hostname" v-model="connection.hostname" :disabled="!connection.station">

              <div class="buttons">
                <input type="submit" :disabled="saving" :value="saving ? $t('applyButtonSaving') : $t('applyButton')">
              </div>
            </form>
          </div>

          <div v-if="activeTab == 'system'">
            <!--

              System tab

            -->
            <form @submit.prevent="uploadFirmware">
              <h3>{{ $t('system.firmwareTitle') }}</h3>

              <input type="file" id="firmwareFile">

              <div class="buttons">
                <input type="submit" :disabled="saving" :value="saving ? $t('applyButtonSaving') : $t('applyButton')">
              </div>

              <div v-if="uploadProgress !== false">
                {{ uploadProgress }}%
              </div>
            </form>

            <h3>{{ $t('system.calibrateTitle') }}</h3>

            <span class="hint">{{ $t('system.calibrateHint') }}</span>

            <div class="buttons">
              <a class="button button-primary" @click.prevent="startCalibration">{{ $t('system.calibrateButton') }}</a>
            </div>

            <form @submit.prevent="applySystem">
              <h3>{{ $t('system.ntpTitle') }}</h3>

              <div class="warning" v-if="!wifiStatus.station.enabled || wifiStatus.station.status != 3">
                {{ $t('triggers.timeInternet') }}
              </div>

              <div class="horizontal">
                <label for="ntpServer">{{ $t('system.ntpServer') }}</label>
                <input type="text" id="ntpServer" v-model="system.ntpServer">
              </div>

              <div class="horizontal">
                <label for="ntpInterval">{{ $t('system.ntpInterval') }}</label>
                <input type="number" id="ntpInterval" v-model="system.ntpInterval">
              </div>

              <div class="horizontal">
                <label for="lat">{{ $t('system.ntpLat') }}</label>
                <input type="text" id="lat" v-model="system.lat">
              </div>

              <div class="horizontal">
                <label for="lng">{{ $t('system.ntpLng') }}</label>
                <input type="text" id="lng" v-model="system.lng">
              </div>

              <div class="suboptions">
                <label for="location" class="label-inline">{{ $t('system.ntpLocation') }}</label>
                <input type="text" id="location" v-model="location">
                <button @click.prevent="searchLocation" :disabled="searchingLocation">{{ $t('system.ntpLocationSearch') }}</button>
              </div>

              <h3>{{ $t('system.pinsTitle') }}</h3>

              <div class="horizontal">
                <label for="pinLEDAP">{{ $t('system.pinLEDAP') }}</label>
                <input type="number" id="pinLEDAP" v-model.number="system.pins.ledAP">
              </div>

              <div class="horizontal">
                <label for="pinLEDSTA">{{ $t('system.pinLEDSTA') }}</label>
                <input type="number" id="pinLEDSTA" v-model.number="system.pins.ledSTA">
              </div>

              <div class="horizontal">
                <label for="pinAPButton">{{ $t('system.pinAPButton') }}</label>
                <input type="number" id="pinAPButton" v-model.number="system.pins.apButton">
              </div>

              <div class="horizontal">
                <label for="pinPWMDriverSDA">{{ $t('system.pinPWMDriverSDA') }}</label>
                <input type="number" id="pinPWMDriverSDA" v-model.number="system.pins.pwmSDA">
              </div>

              <div class="horizontal">
                <label for="pinPWMDriverSCL">{{ $t('system.pinPWMDriverSCL') }}</label>
                <input type="number" id="pinPWMDriverSCL" v-model.number="system.pins.pwmSCL">
              </div>

              <div class="horizontal">
                <label for="pwmAddress">{{ $t('system.pwmAddress') }}</label>
                <input type="number" id="pwmAddress" v-model.number="system.pwmAddress">
              </div>

              <div class="horizontal">
                <label for="pwmFrequency">{{ $t('system.pwmFrequency') }}</label>
                <input type="number" id="pwmFrequency" v-model.number="system.pwmFrequency">
              </div>

              <h3>{{ $t('system.mapsTitle') }}</h3>

              <label for="mapsAPIKey">{{ $t('system.mapsAPIKey') }}</label>
              <input type="text" id="mapsAPIKey" v-model.number="system.mapsAPIKey">
              <span class="hint">{{ $t('system.mapsAPIKeyhint') }}</span>

              <div class="buttons">
                <input type="submit" :disabled="saving" :value="saving ? $t('applyButtonSaving') : $t('applyButton')">
              </div>
            </form>
          </div>
        </div>

        <!--

          Calibration

        -->
        <div v-if="!loading && calibration !== null">
          <div class="navigation">
            <a class="button" @click.prevent="stopCalibration">&laquo; {{ $t('calibration.backButton') }}</a>
          </div>

          <h3>{{ $t('calibration.title') }}</h3>

          <div class="horizontal">
            <label for="stepCount">{{ $t('calibration.count') }}</label>
            <input type="number" id="stepCount" v-model.number="calibration.count" min="1" max="16" :disabled="calibration.wizardStep >= 1">
          </div>

          <div v-if="calibration.wizardStep >= 1">
            <h4>{{ $t('calibration.allStepsValue') }}</h4>
            <div class="slidercontainer">
              <input type="range" min="0" max="255" class="slider" v-model.number="allStepsValue">
            </div>

            <check v-model.boolean="calibration.useCurve" :title="$t('calibration.useCurve')" class="form-control"></check>

            <h4>{{ $t('calibration.ranges') }}</h4>
            <div class="range" v-for="(step, index) in calibration.ranges">
              <range v-model="step"></range>
            </div>
          </div>

          <div class="buttons">
            <a class="button button-primary" @click.prevent="nextCalibrationStep">{{ $t(hasNextCalibrationStep() ? 'calibration.nextButton' : 'calibration.applyButton') }}</a>
          </div>
        </div>

        <div class="clearfix"></div>
      </div>
      <div class="version">
        {{ $t('copyright') }}<br>
        {{ status.version !== null ? $t('firmwareVersion') + status.version : '' }}
      </div>
    </div>
  </div>

  <script language="javascript">
    startApp();
  </script>
</body>
</html>