2018-01-01 18:56:07 +00:00
|
|
|
<!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>
|
2018-01-18 16:10:18 +00:00
|
|
|
<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>
|
|
|
|
|
|
2018-01-01 18:56:07 +00:00
|
|
|
<div id="container">
|
|
|
|
|
<div class="header">
|
|
|
|
|
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAXBJREFUeNrsWdENgjAQLcYBcAPcACdQN4AN2MC4gRsYJ9ENdAPYADaADepdUhM1qFjurgp9ScMHgd713V3ftUp5eHgMF1rrGEau6VHD2HMbH5qJOLHra+fkzbsYRshM8pLTgUIgSgvuMMoYw+iMYTr6QhNYMrNiNywILlyVKdcyyPsmcRsyU50kgHtQQu2AdNJFpDkAK4I/LIWMb2AsIBcq0iRGeQGPTZfV6QE0+gDGF2rosGEgMQxIAhnZAiPN84upRf0/OlpsLCBp3yq0chgtCUUZrRw6QDO3EWHSqF9tarZaSKJXeJDdbQlsE0KD6JN/KoRsGhxXKClCKHJIfkThwMWhA6dBSolRijkJOd1ZUv9yQ9OpqbHpiaUVaEbZE7tIIjoBKXysos1c4V8ebLEdbv2bcMsE7gjuBdvXRSJ4F+/wqIXXrIGwmX3zwacLDheNO91OjLQKd14VMDCnYgCxVjI3NTe1mSoPD49x4SrAAG9qPn4eovCMAAAAAElFTkSuQmCC" />
|
|
|
|
|
<h1>{{ $t('title') }}</h1>
|
|
|
|
|
<h2>{{ version.systemID !== null ? $t('systemID') + ': ' + version.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>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div v-if="loading" class="loading">
|
|
|
|
|
{{ $t('loading') }} {{ loadingIndicator }}
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div v-if="!loading">
|
|
|
|
|
<div class="tabs">
|
|
|
|
|
<button class="button" :class="{ 'button-outline': activeTab != 'status' }" @click="activeTab = 'status'">{{ $t('status.tabTitle') }}</button>
|
|
|
|
|
<button class="button" :class="{ 'button-outline': activeTab != 'triggers' }" @click="activeTab = 'triggers'">{{ $t('triggers.tabTitle') }}</button>
|
|
|
|
|
<button class="button" :class="{ 'button-outline': activeTab != 'connection' }" @click="activeTab = 'connection'">{{ $t('connection.tabTitle') }}</button>
|
2018-01-11 20:03:46 +00:00
|
|
|
<button class="button" :class="{ 'button-outline': activeTab != 'system' }" @click="activeTab = 'system'">{{ $t('system.tabTitle') }}</button>
|
2018-01-01 18:56:07 +00:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div v-if="activeTab == 'status'">
|
2018-01-07 22:12:42 +00:00
|
|
|
<!--
|
|
|
|
|
|
|
|
|
|
Status tab
|
|
|
|
|
|
|
|
|
|
-->
|
2018-01-01 18:56:07 +00:00
|
|
|
<h3>{{ $t('status.title') }}</h3>
|
|
|
|
|
|
2018-01-07 22:12:42 +00:00
|
|
|
<div>
|
|
|
|
|
<input type="radio" name="allSteps" :value="true" v-model="allSteps" id="allStepsTrue">
|
|
|
|
|
<label class="label-inline" for="allStepsTrue">{{ $t('status.allStepsTrue') }}</label>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
<input type="radio" name="allSteps" :value="false" v-model="allSteps" id="allStepsFalse">
|
|
|
|
|
<label class="label-inline" for="allStepsFalse">{{ $t('status.allStepsFalse') }}</label>
|
|
|
|
|
</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>
|
2018-01-01 18:56:07 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div v-if="activeTab == 'triggers'">
|
2018-01-07 22:12:42 +00:00
|
|
|
<!--
|
|
|
|
|
|
|
|
|
|
Triggers tab
|
|
|
|
|
|
|
|
|
|
-->
|
2018-01-18 16:10:18 +00:00
|
|
|
<form @submit.prevent="applyTimeTriggers">
|
2018-01-01 18:56:07 +00:00
|
|
|
<fieldset>
|
|
|
|
|
<h3>{{ $t('triggers.timeTitle') }}</h3>
|
2018-01-07 22:12:42 +00:00
|
|
|
|
2018-01-17 22:28:39 +00:00
|
|
|
<input type="checkbox" id="timeEnabled" v-model.boolean="triggers.time.enabled"><label for="timeEnabled" class="label-inline">{{ $t('triggers.timeEnabled') }}</label>
|
2018-01-12 15:20:28 +00:00
|
|
|
|
2018-01-17 22:28:39 +00:00
|
|
|
<div v-if="triggers.time.enabled">
|
|
|
|
|
<div class="warning" v-if="!wifiStatus.station.enabled || wifiStatus.station.status != 3">
|
|
|
|
|
{{ $t('triggers.timeInternet') }}
|
|
|
|
|
</div>
|
2018-01-12 15:20:28 +00:00
|
|
|
|
2018-01-17 22:28:39 +00:00
|
|
|
<label for="timeTransitionTime">{{ $t('triggers.timeTransitionTime') }}</label>
|
|
|
|
|
<input type="number" id="timeTransitionTime" v-model.number="triggers.time.transitionTime">
|
2018-01-17 15:57:14 +00:00
|
|
|
|
2018-01-17 22:28:39 +00:00
|
|
|
<label>Regels</label>
|
|
|
|
|
<div v-if="triggers.time.triggers.length">
|
|
|
|
|
<div v-for="(trigger, index) in triggers.time.triggers" class="panel">
|
|
|
|
|
<div class="panel-header">
|
|
|
|
|
<input type="checkbox" :id="'time' + index + '_enabled'" v-model.boolean="trigger.enabled"><label class="label-inline" :for="'time' + index + '_enabled'">{{ $t('triggers.timeTriggerEnabled') }}</label>
|
|
|
|
|
<span class="actions">
|
|
|
|
|
[ <a href="#" @click.prevent="deleteTimeTrigger(index)">{{ $t('triggers.timeDelete') }}</a> ]
|
2018-01-17 15:57:14 +00:00
|
|
|
</span>
|
2018-01-17 22:28:39 +00:00
|
|
|
<div class="clear"></div>
|
|
|
|
|
</div>
|
2018-01-17 15:57:14 +00:00
|
|
|
|
2018-01-17 22:28:39 +00:00
|
|
|
<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>
|
|
|
|
|
<span class="checkbox weekday">
|
|
|
|
|
<input type="checkbox" v-model.boolean="trigger.monday" :id="index + '_monday'">
|
|
|
|
|
<label :for="index + '_monday'" class="label-inline">{{ $t('triggers.timeMonday') }}</label>
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
|
|
<span class="checkbox weekday">
|
|
|
|
|
<input type="checkbox" v-model.boolean="trigger.tuesday" :id="index + '_tuesday'">
|
|
|
|
|
<label :for="index + '_tuesday'" class="label-inline">{{ $t('triggers.timeTuesday') }}</label>
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
|
|
<span class="checkbox weekday">
|
|
|
|
|
<input type="checkbox" v-model.boolean="trigger.wednesday" :id="index + '_wednesday'">
|
|
|
|
|
<label :for="index + '_wednesday'" class="label-inline">{{ $t('triggers.timeWednesday') }}</label>
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
|
|
<span class="checkbox weekday">
|
|
|
|
|
<input type="checkbox" v-model.boolean="trigger.thursday" :id="index + '_thursday'">
|
|
|
|
|
<label :for="index + '_thursday'" class="label-inline">{{ $t('triggers.timeThursday') }}</label>
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
|
|
<span class="checkbox weekday">
|
|
|
|
|
<input type="checkbox" v-model.boolean="trigger.friday" :id="index + '_friday'">
|
|
|
|
|
<label :for="index + '_friday'" class="label-inline">{{ $t('triggers.timeFriday') }}</label>
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
|
|
<span class="checkbox weekday">
|
|
|
|
|
<input type="checkbox" v-model.boolean="trigger.saturday" :id="index + '_saturday'">
|
|
|
|
|
<label :for="index + '_saturday'" class="label-inline">{{ $t('triggers.timeSaturday') }}</label>
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
|
|
<span class="checkbox weekday">
|
|
|
|
|
<input type="checkbox" v-model.boolean="trigger.sunday" :id="index + '_sunday'">
|
|
|
|
|
<label :for="index + '_sunday'" class="label-inline">{{ $t('triggers.timeSunday') }}</label>
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
2018-01-17 15:57:14 +00:00
|
|
|
|
2018-01-17 22:28:39 +00:00
|
|
|
<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>
|
2018-01-17 15:57:14 +00:00
|
|
|
|
2018-01-17 22:28:39 +00:00
|
|
|
<div v-else class="nodata">
|
|
|
|
|
{{ $t('triggers.timeNoData') }}
|
|
|
|
|
</div>
|
2018-01-17 15:57:14 +00:00
|
|
|
|
2018-01-17 22:28:39 +00:00
|
|
|
<div class="buttons">
|
|
|
|
|
<button class="button-primary button-outline" :disabled="saving" @click.prevent="addTimeTrigger">{{ $t('triggers.timeAdd') }}</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2018-01-18 16:10:18 +00:00
|
|
|
|
|
|
|
|
<div class="buttons">
|
|
|
|
|
<input class="button-primary" type="submit" :disabled="saving" :value="saving ? $t('applyButtonSaving') : $t('applyButton')">
|
|
|
|
|
</div>
|
2018-01-17 22:28:39 +00:00
|
|
|
</fieldset>
|
2018-01-18 16:10:18 +00:00
|
|
|
</form>
|
2018-01-17 22:28:39 +00:00
|
|
|
|
2018-01-18 16:10:18 +00:00
|
|
|
<form @submit.prevent="applyMotionTriggers">
|
2018-01-17 22:28:39 +00:00
|
|
|
<fieldset>
|
|
|
|
|
<h3>{{ $t('triggers.motionTitle') }}</h3>
|
2018-01-17 15:57:14 +00:00
|
|
|
|
2018-01-17 22:28:39 +00:00
|
|
|
<input type="checkbox" id="motionEnabled" v-model.boolean="triggers.motion.enabled"><label for="motionEnabled" class="label-inline">{{ $t('triggers.motionEnabled') }}</label>
|
|
|
|
|
|
|
|
|
|
<div v-if="triggers.motion.enabled">
|
|
|
|
|
<input type="checkbox" id="motionEnabledDuringTimeTrigger" v-model.boolean="triggers.motion.enabledDuringTimeTrigger"><label for="motionEnabledDuringTimeTrigger" class="label-inline">{{ $t('triggers.motionEnabledDuringTimeTrigger') }}</label>
|
|
|
|
|
|
|
|
|
|
<label for="motionTransitionTime">{{ $t('triggers.motionTransitionTime') }}</label>
|
|
|
|
|
<input type="number" id="motionTransitionTime" v-model.number="triggers.motion.transitionTime">
|
|
|
|
|
|
|
|
|
|
<label>Regels</label>
|
|
|
|
|
<div v-if="triggers.motion.triggers.length">
|
|
|
|
|
<div v-for="(trigger, index) in triggers.motion.triggers" class="panel">
|
|
|
|
|
<div class="panel-header">
|
|
|
|
|
<input type="checkbox" :id="'motion' + index + '_enabled'" v-model.boolean="trigger.enabled"><label class="label-inline" :for="'motion' + index + '_enabled'">{{ $t('triggers.motionTriggerEnabled') }}</label>
|
|
|
|
|
<span class="actions">
|
|
|
|
|
[ <a href="#" @click.prevent="deleteMotionTrigger(index)">{{ $t('triggers.motionDelete') }}</a> ]
|
2018-01-17 15:57:14 +00:00
|
|
|
</span>
|
2018-01-17 22:28:39 +00:00
|
|
|
<div class="clear"></div>
|
2018-01-17 15:57:14 +00:00
|
|
|
</div>
|
2018-01-12 15:20:28 +00:00
|
|
|
|
2018-01-17 22:28:39 +00:00
|
|
|
<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>
|
2018-01-17 15:57:14 +00:00
|
|
|
</div>
|
2018-01-12 15:20:28 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2018-01-17 22:28:39 +00:00
|
|
|
<div v-else class="nodata">
|
|
|
|
|
{{ $t('triggers.motionNoData') }}
|
|
|
|
|
</div>
|
2018-01-17 15:57:14 +00:00
|
|
|
|
2018-01-17 22:28:39 +00:00
|
|
|
<div class="buttons">
|
|
|
|
|
<button class="button-primary button-outline" :disabled="saving" @click.prevent="addMotionTrigger">{{ $t('triggers.motionAdd') }}</button>
|
|
|
|
|
</div>
|
2018-01-17 15:57:14 +00:00
|
|
|
</div>
|
2018-01-01 18:56:07 +00:00
|
|
|
|
2018-01-18 16:10:18 +00:00
|
|
|
<div class="buttons">
|
|
|
|
|
<input class="button-primary" type="submit" :disabled="saving" :value="saving ? $t('applyButtonSaving') : $t('applyButton')">
|
|
|
|
|
</div>
|
|
|
|
|
</fieldset>
|
2018-01-01 18:56:07 +00:00
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div v-if="activeTab == 'connection'">
|
2018-01-07 22:12:42 +00:00
|
|
|
<!--
|
|
|
|
|
|
|
|
|
|
Connection tab
|
|
|
|
|
|
|
|
|
|
-->
|
2018-01-01 18:56:07 +00:00
|
|
|
<form @submit.prevent="applyConnection">
|
|
|
|
|
<fieldset>
|
|
|
|
|
<h3>{{ $t('connection.title') }}</h3>
|
|
|
|
|
|
|
|
|
|
<input type="checkbox" id="accesspoint" v-model="connection.accesspoint">
|
|
|
|
|
<label class="label-inline" for="accesspoint">{{ $t('connection.accesspoint') }}</label>
|
|
|
|
|
<span class="hint">{{ $t('connection.accesspointHint') }}</span>
|
|
|
|
|
|
|
|
|
|
<input type="checkbox" id="station" v-model="connection.station">
|
|
|
|
|
<label class="label-inline" for="station">{{ $t('connection.stationmode') }}</label>
|
|
|
|
|
<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">
|
|
|
|
|
|
|
|
|
|
<input type="checkbox" id="dhcp" v-model="connection.dhcp" :disabled="!connection.station">
|
|
|
|
|
<label class="label-inline" for="dhcp">{{ $t('connection.dhcp') }}</label>
|
|
|
|
|
<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 class="button-primary" type="submit" :disabled="saving" :value="saving ? $t('applyButtonSaving') : $t('applyButton')">
|
|
|
|
|
</div>
|
|
|
|
|
</fieldset>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
2018-01-01 20:00:56 +00:00
|
|
|
|
2018-01-11 20:03:46 +00:00
|
|
|
<div v-if="activeTab == 'system'">
|
2018-01-07 22:12:42 +00:00
|
|
|
<!--
|
|
|
|
|
|
2018-01-11 20:03:46 +00:00
|
|
|
System tab
|
2018-01-07 22:12:42 +00:00
|
|
|
|
|
|
|
|
-->
|
2018-01-11 20:03:46 +00:00
|
|
|
<form @submit.prevent="uploadFirmware" id="system">
|
2018-01-01 20:00:56 +00:00
|
|
|
<fieldset>
|
2018-01-11 20:03:46 +00:00
|
|
|
<h3>{{ $t('system.firmwareTitle') }}</h3>
|
2018-01-01 20:00:56 +00:00
|
|
|
|
2018-01-03 20:44:34 +00:00
|
|
|
<input type="file" id="firmwareFile">
|
2018-01-01 20:00:56 +00:00
|
|
|
|
|
|
|
|
<div class="buttons">
|
|
|
|
|
<input class="button-primary" type="submit" :disabled="saving" :value="saving ? $t('applyButtonSaving') : $t('applyButton')">
|
|
|
|
|
</div>
|
2018-01-03 20:44:34 +00:00
|
|
|
|
|
|
|
|
<div v-if="uploadProgress !== false">
|
|
|
|
|
{{ uploadProgress }}%
|
|
|
|
|
</div>
|
2018-01-01 20:00:56 +00:00
|
|
|
</fieldset>
|
|
|
|
|
</form>
|
2018-01-11 20:03:46 +00:00
|
|
|
|
|
|
|
|
<form @submit.prevent="applySystem" id="system">
|
|
|
|
|
<fieldset>
|
|
|
|
|
<h3>{{ $t('system.ntpTitle') }}</h3>
|
|
|
|
|
|
|
|
|
|
<div class="warning" v-if="!wifiStatus.station.enabled || wifiStatus.station.status != 3">
|
|
|
|
|
{{ $t('triggers.timeInternet') }}
|
|
|
|
|
</div>
|
|
|
|
|
|
2018-01-18 16:10:18 +00:00
|
|
|
<label for="ntpServer">{{ $t('system.ntpServer') }}</label>
|
|
|
|
|
<input type="text" id="ntpServer" v-model="system.ntpServer">
|
|
|
|
|
|
|
|
|
|
<label for="ntpInterval">{{ $t('system.ntpInterval') }}</label>
|
|
|
|
|
<input type="number" id="ntpInterval" v-model="system.ntpInterval">
|
|
|
|
|
|
|
|
|
|
<label for="lat">{{ $t('system.ntpLat') }}</label>
|
|
|
|
|
<input type="text" id="lat" v-model="system.lat">
|
|
|
|
|
|
2018-01-11 20:03:46 +00:00
|
|
|
<label for="lat">{{ $t('system.ntpLat') }}</label>
|
|
|
|
|
<input type="text" id="lat" v-model="system.lat">
|
|
|
|
|
|
|
|
|
|
<label for="lng">{{ $t('system.ntpLng') }}</label>
|
|
|
|
|
<input type="text" id="lng" v-model="system.lng">
|
|
|
|
|
|
|
|
|
|
<div class="suboptions">
|
|
|
|
|
<label for="location" class="label-inline">{{ $t('system.ntpLocation') }}</label>
|
|
|
|
|
<input type="text" id="location" v-model="location">
|
|
|
|
|
<button class="button button-outline" @click.prevent="searchLocation" :disabled="searchingLocation">{{ $t('system.ntpLocationSearch') }}</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<h3>{{ $t('system.pinsTitle') }}</h3>
|
|
|
|
|
|
|
|
|
|
<label for="pinLEDAP">{{ $t('system.pinLEDAP') }}</label>
|
|
|
|
|
<input type="number" id="pinLEDAP" v-model.number="system.pins.ledAP">
|
|
|
|
|
|
|
|
|
|
<label for="pinLEDSTA">{{ $t('system.pinLEDSTA') }}</label>
|
|
|
|
|
<input type="number" id="pinLEDSTA" v-model.number="system.pins.ledSTA">
|
|
|
|
|
|
|
|
|
|
<label for="pinAPButton">{{ $t('system.pinAPButton') }}</label>
|
|
|
|
|
<input type="number" id="pinAPButton" v-model.number="system.pins.apButton">
|
|
|
|
|
|
|
|
|
|
<label for="pinPWMDriverSDA">{{ $t('system.pinPWMDriverSDA') }}</label>
|
|
|
|
|
<input type="number" id="pinPWMDriverSDA" v-model.number="system.pins.pwmSDA">
|
|
|
|
|
|
|
|
|
|
<label for="pinPWMDriverSCL">{{ $t('system.pinPWMDriverSCL') }}</label>
|
|
|
|
|
<input type="number" id="pinPWMDriverSCL" v-model.number="system.pins.pwmSCL">
|
|
|
|
|
|
|
|
|
|
<label for="pwmAddress">{{ $t('system.pwmAddress') }}</label>
|
|
|
|
|
<input type="number" id="pwmAddress" v-model.number="system.pwmAddress">
|
|
|
|
|
|
|
|
|
|
<label for="pwmFrequency">{{ $t('system.pwmFrequency') }}</label>
|
|
|
|
|
<input type="number" id="pwmFrequency" v-model.number="system.pwmFrequency">
|
|
|
|
|
|
|
|
|
|
<h3>{{ $t('system.mapsTitle') }}</h3>
|
|
|
|
|
|
|
|
|
|
<label for="mapsAPIKey">{{ $t('system.mapsAPIKey') }}</label>
|
2018-01-17 22:28:39 +00:00
|
|
|
<input type="text" id="mapsAPIKey" v-model.number="system.mapsAPIKey">
|
2018-01-11 20:03:46 +00:00
|
|
|
<span class="hint">{{ $t('system.mapsAPIKeyhint') }}</span>
|
|
|
|
|
|
|
|
|
|
<div class="buttons">
|
|
|
|
|
<input class="button-primary" type="submit" :disabled="saving" :value="saving ? $t('applyButtonSaving') : $t('applyButton')">
|
|
|
|
|
</div>
|
|
|
|
|
</fieldset>
|
|
|
|
|
</form>
|
2018-01-01 20:00:56 +00:00
|
|
|
</div>
|
2018-01-01 18:56:07 +00:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="clearfix"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="version">
|
|
|
|
|
{{ $t('copyright') }}<br>
|
|
|
|
|
{{ version.version !== null ? $t('firmwareVersion') + version.version : '' }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script language="javascript">
|
|
|
|
|
console.log('Initializing...');
|
|
|
|
|
startApp();
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
