Stairs/web/index.html

139 lines
6.5 KiB
HTML
Raw Normal View History

<!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 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-01 20:00:56 +00:00
<button class="button" :class="{ 'button-outline': activeTab != 'firmware' }" @click="activeTab = 'firmware'">{{ $t('firmware.tabTitle') }}</button>
</div>
<div v-if="activeTab == 'status'">
<h3>{{ $t('status.title') }}</h3>
<div class="slidecontainer" v-for="(step, index) in steps">
{{ index + 1 }}
<input type="range" min="0" max="100" class="slider" v-model="step.value">
{{ step.value }}
</div>
</div>
<div v-if="activeTab == 'triggers'">
<form @submit.prevent="applyTriggers">
<fieldset>
<h3>{{ $t('triggers.timeTitle') }}</h3>
</fieldset>
<fieldset>
<h3>{{ $t('triggers.motionTitle') }}</h3>
</fieldset>
</form>
</div>
<div v-if="activeTab == 'connection'">
<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
<div v-if="activeTab == 'firmware'">
<form @submit.prevent="uploadFirmware">
<fieldset>
<h3>{{ $t('firmware.title') }}</h3>
<input type="file">
<div class="buttons">
<input class="button-primary" type="submit" :disabled="saving" :value="saving ? $t('applyButtonSaving') : $t('applyButton')">
</div>
</fieldset>
</form>
</div>
</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>