127 lines
4.6 KiB
HTML
127 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>RGBWifi</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 v-if="activeTab == 'status'">
|
|
<!--
|
|
|
|
Status tab
|
|
|
|
-->
|
|
</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">
|
|
<span class="hint">{{ $t('connection.hostnameHint') }}</span>
|
|
|
|
<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>
|
|
|
|
<form @submit.prevent="applySystem">
|
|
<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>
|
|
|
|
<h3>{{ $t('system.ledStripTitle') }}</h3>
|
|
|
|
<div class="horizontal">
|
|
<label for="ledCount">{{ $t('system.ledCount') }}</label>
|
|
<input type="number" id="ledCount" v-model.number="system.ledCount">
|
|
</div>
|
|
|
|
<div class="buttons">
|
|
<input type="submit" :disabled="saving" :value="saving ? $t('applyButtonSaving') : $t('applyButton')">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
|
|
<script language="javascript">
|
|
startApp();
|
|
</script>
|
|
</body>
|
|
</html> |