#42 migration to new design
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