#42 migration to new design
Thomas Ballmann
4 years ago
parent
7fc22e0969
commit
a99b9c8816
@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<v-snackbar
|
||||
v-model="snackbar"
|
||||
timeout="-1"
|
||||
>
|
||||
{{ notifications }}
|
||||
|
||||
<!--
|
||||
<template v-slot:action="{ attrs }">
|
||||
<v-btn
|
||||
color="pink"
|
||||
text
|
||||
v-bind="attrs"
|
||||
@click="snackbar = false"
|
||||
>
|
||||
Close
|
||||
</v-btn>
|
||||
</template>
|
||||
-->
|
||||
</v-snackbar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations } from 'vuex'
|
||||
|
||||
export default {
|
||||
data: () => ({
|
||||
snackbar: false,
|
||||
timeoutHandler: null,
|
||||
}),
|
||||
computed: {
|
||||
...mapState(['notifications']),
|
||||
},
|
||||
watch: {
|
||||
notifications (newVal) {
|
||||
if (newVal !== null) {
|
||||
this.snackbar = true
|
||||
this.resetTimeout()
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['notification']),
|
||||
resetTimeout () {
|
||||
clearTimeout(this.timeoutHandler)
|
||||
|
||||
this.timeoutHandler = setTimeout(() => {
|
||||
this.snackbar = false
|
||||
// clear notification
|
||||
this.notification(null)
|
||||
}, 3 * 1000)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,224 @@
|
||||
<template>
|
||||
<v-dialog
|
||||
v-model="dialog"
|
||||
max-width="400"
|
||||
>
|
||||
<template #activator="{ on }">
|
||||
<slot
|
||||
name="activator"
|
||||
:on="on"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<v-card
|
||||
:disabled="updateProgress > 0"
|
||||
>
|
||||
<v-toolbar
|
||||
dark
|
||||
color="orange darken-2"
|
||||
flat
|
||||
class="mb-5"
|
||||
>
|
||||
<v-toolbar-title>
|
||||
System update
|
||||
</v-toolbar-title>
|
||||
<v-spacer />
|
||||
<v-btn
|
||||
icon
|
||||
dark
|
||||
@click="dialog = false"
|
||||
>
|
||||
<v-icon>$close</v-icon>
|
||||
</v-btn>
|
||||
</v-toolbar>
|
||||
|
||||
<v-card-text>
|
||||
<v-file-input
|
||||
v-model="file"
|
||||
show-size
|
||||
accept="application/octet-stream"
|
||||
label="File"
|
||||
/>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-text v-if="updateType">
|
||||
<v-alert
|
||||
border="left"
|
||||
icon="$info"
|
||||
outlined
|
||||
type="info"
|
||||
>
|
||||
Update: {{ updateType }}<br>
|
||||
Version: {{ file.lastModifiedDate.toLocaleString() }}<br>
|
||||
Current: {{ currentApp.toLocaleString() }}<br>
|
||||
</v-alert>
|
||||
</v-card-text>
|
||||
<v-card-text v-else-if="file">
|
||||
<v-alert
|
||||
border="left"
|
||||
icon="$error"
|
||||
outlined
|
||||
type="error"
|
||||
>
|
||||
Invalid file
|
||||
</v-alert>
|
||||
</v-card-text>
|
||||
|
||||
<v-divider />
|
||||
|
||||
<v-card-actions>
|
||||
<template v-if="!updateProgress">
|
||||
<v-btn
|
||||
text
|
||||
href="https://github.com/paperdash"
|
||||
target="_blank"
|
||||
>
|
||||
Get firmware
|
||||
</v-btn>
|
||||
<v-spacer />
|
||||
<v-btn
|
||||
:disabled="!updateType"
|
||||
outlined
|
||||
color="warning"
|
||||
@click="onSystemUpdate()"
|
||||
>
|
||||
Update system
|
||||
</v-btn>
|
||||
</template>
|
||||
<template v-else>
|
||||
<v-progress-linear
|
||||
v-model="updateProgress"
|
||||
:indeterminate="updateProgress === 100"
|
||||
height="10"
|
||||
color="orange darken-1"
|
||||
rounded
|
||||
/>
|
||||
</template>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
|
||||
<v-dialog
|
||||
:value="updateResult !== null"
|
||||
persistent
|
||||
max-width="400"
|
||||
>
|
||||
<v-card class="pt-1">
|
||||
<div class="ma-5">
|
||||
<v-alert
|
||||
v-if="updateResult"
|
||||
outlined
|
||||
border="left"
|
||||
icon="$success"
|
||||
type="success"
|
||||
>
|
||||
update result...
|
||||
</v-alert>
|
||||
<v-alert
|
||||
v-if="!updateResult"
|
||||
outlined
|
||||
border="left"
|
||||
icon="$error"
|
||||
type="error"
|
||||
>
|
||||
update result...
|
||||
</v-alert>
|
||||
</div>
|
||||
|
||||
<v-divider />
|
||||
|
||||
<v-card-actions>
|
||||
<v-spacer />
|
||||
<v-btn
|
||||
text
|
||||
@click="onUpdateDone()"
|
||||
>
|
||||
OK
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'UpdateDialog',
|
||||
props: {
|
||||
currentFirmware: {
|
||||
type: Date,
|
||||
required: true,
|
||||
},
|
||||
currentApp: {
|
||||
type: Date,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data: () => ({
|
||||
dialog: false,
|
||||
file: null,
|
||||
updateProgress: null,
|
||||
updateResult: null,
|
||||
}),
|
||||
computed: {
|
||||
updateType () {
|
||||
if (this.file) {
|
||||
switch (this.file.name) {
|
||||
case 'firmware.bin':
|
||||
return 'Firmware'
|
||||
case 'spiffs.bin':
|
||||
return 'APP'
|
||||
}
|
||||
}
|
||||
return null
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onSystemUpdate () {
|
||||
const self = this
|
||||
self.updateProgress = 0
|
||||
|
||||
const config = {
|
||||
onUploadProgress: function (progressEvent) {
|
||||
self.updateProgress = Math.round(
|
||||
(progressEvent.loaded * 100) / progressEvent.total,
|
||||
)
|
||||
},
|
||||
}
|
||||
|
||||
const formData = new FormData()
|
||||
formData.append('update', this.file)
|
||||
|
||||
axios
|
||||
.post('/update', formData, config)
|
||||
.then(response => {
|
||||
console.log(response.data)
|
||||
|
||||
self.updateProgress = null
|
||||
self.updateResult = response.data.success
|
||||
})
|
||||
.catch(response => {
|
||||
console.log(response)
|
||||
|
||||
self.updateProgress = null
|
||||
self.updateResult = false
|
||||
})
|
||||
},
|
||||
|
||||
onUpdateDone () {
|
||||
if (this.updateResult === true) {
|
||||
window.location = '/'
|
||||
} else {
|
||||
this.file = null
|
||||
this.updateProgress = 0
|
||||
this.updateResult = null
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<div class="pa-5">
|
||||
<v-card
|
||||
flat
|
||||
width="400"
|
||||
class="mx-auto"
|
||||
>
|
||||
<v-card-title class="display-2 mb-12 justify-center text-center">
|
||||
Wifi settings
|
||||
</v-card-title>
|
||||
|
||||
<v-skeleton-loader
|
||||
v-if="isLoading"
|
||||
type="list-item-two-line,list-item-two-line,list-item-two-line"
|
||||
class="mx-auto"
|
||||
/>
|
||||
|
||||
<v-list v-else>
|
||||
<template v-for="(wifi, i) in wifiAvailable">
|
||||
<div :key="i">
|
||||
<v-divider v-if="i > 0" />
|
||||
|
||||
<v-list-item
|
||||
class="px-1"
|
||||
@click="onWifiSelect(wifi)"
|
||||
>
|
||||
<v-list-item-icon class="mr-2 ml-2">
|
||||
<v-icon v-if="wifi.ssid === settings.system.wifi">
|
||||
$check
|
||||
</v-icon>
|
||||
|
||||
<v-progress-circular
|
||||
v-if="wifi.ssid === connectingSSID"
|
||||
:size="24"
|
||||
:width="2"
|
||||
color="grey "
|
||||
indeterminate
|
||||
/>
|
||||
</v-list-item-icon>
|
||||
|
||||
<v-list-item-content dark>
|
||||
<v-list-item-title v-text="wifi.ssid" />
|
||||
<v-list-item-subtitle v-text="wifi.bssid" />
|
||||
</v-list-item-content>
|
||||
|
||||
<v-list-item-icon>
|
||||
<v-icon
|
||||
v-if="wifi.secure"
|
||||
class="mx-2"
|
||||
>
|
||||
$lock
|
||||
</v-icon>
|
||||
<v-icon class="mx-2">
|
||||
{{ wifi.rssi | wifiIcon(0) }}
|
||||
</v-icon>
|
||||
<v-icon class="ml-3">
|
||||
$next
|
||||
</v-icon>
|
||||
</v-list-item-icon>
|
||||
</v-list-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<v-divider />
|
||||
|
||||
<v-btn
|
||||
text
|
||||
color="primary"
|
||||
class="_px-0 my-2"
|
||||
disabled
|
||||
>
|
||||
Choose Another Network
|
||||
</v-btn>
|
||||
</v-list>
|
||||
|
||||
<v-dialog
|
||||
v-model="wifiPasswordModal"
|
||||
max-width="450"
|
||||
>
|
||||
<setup-wifi-connect
|
||||
:ssid="connectSSID"
|
||||
:on-connect="onWifiConnect"
|
||||
@cancel="wifiPasswordModal = false"
|
||||
/>
|
||||
</v-dialog>
|
||||
</v-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import setupWifiConnect from '@/components/SetupWifiConnect'
|
||||
import apiDevice from '@/api/device'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
setupWifiConnect,
|
||||
},
|
||||
data: () => ({
|
||||
isLoading: true,
|
||||
|
||||
connectSSID: null,
|
||||
connectingSSID: '',
|
||||
|
||||
wifiAvailable: [],
|
||||
wifiPasswordModal: false,
|
||||
}),
|
||||
computed: {
|
||||
...mapState(['stats', 'settings']),
|
||||
},
|
||||
created () {
|
||||
apiDevice.wifiScan(list => {
|
||||
this.wifiAvailable = list
|
||||
|
||||
this.isLoading = false
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
onWifiSelect (wifi) {
|
||||
if (wifi.secure) {
|
||||
this.connectSSID = wifi.ssid
|
||||
this.wifiPasswordModal = true
|
||||
} else {
|
||||
this.onWifiConnect(wifi.ssid, '')
|
||||
}
|
||||
},
|
||||
onWifiConnect (ssid, password) {
|
||||
this.connectingSSID = ssid
|
||||
this.wifiPasswordModal = false
|
||||
|
||||
apiDevice.wifiConnect(ssid, password, () => {})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
Loading…
Reference in New Issue