Archives/device-epd
2
0
Fork 0
mirror of https://github.com/paperdash/device-epd.git synced 2024-11-10 07:10:32 +00:00
Code Issues Projects Releases Wiki Activity

#31 improve setup wizard base

Browse Source
This commit is contained in:
Thomas Ballmann 2020-12-03 20:49:38 +01:00
parent 94339ea160
commit 1ad74f7664
8 changed files with 419 additions and 308 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
app/src/components/SetupPanel.vue Normal file
View File

@ -0,0 +1,83 @@
<template>
<v-container
class="_fill-height"
fluid
>
<div v-if="back">
<v-btn
text
color="primary"
class="px-0"
@click="$emit('back')"
>
<v-icon>$prev</v-icon>
Back
</v-btn>
</div>
<v-row
no-gutters
justify="center"
>
<v-col
lg="5"
md="6"
sm="8"
>
<v-card flat>
<div
v-if="hasIconSlot"
class="justify-center text-center"
>
<v-icon
class="my-icon ma-10"
>
<slot name="icon" />
</v-icon>
</div>
<v-card-title
class="display-1 font-weight-bold mb-12 px-0 justify-center text-center"
>
<slot name="headline" />
</v-card-title>
</v-card>
<slot />
<v-card-actions
v-if="hasActionsSlot"
class="flex-column mt-16"
>
<slot name="actions" />
</v-card-actions>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: 'SetupPanel',
props: {
back: {
type: Boolean,
default: false,
},
},
computed: {
hasIconSlot () {
return !!this.$slots.icon
},
hasActionsSlot () {
return !!this.$slots.actions
},
},
}
</script>
<style scoped>
>>> .my-icon > .v-icon__svg {
transform: scale(3);
}
</style>

77
app/src/views/Setup/Appearance.vue
View File

@ -1,24 +1,15 @@
<template> <template>
<v-container <setup-panel
class="_fill-height" back
fluid @back="stepBack"
> >
<v-row <template #icon />
no-gutters <template #headline>
justify="center"
>
<v-col
lg="5"
md="6"
sm="8"
>
<v-card flat>
<v-card-title class="display-2 mb-12 justify-center text-center">
Appearance Appearance
</v-card-title> </template>
<v-radio-group <v-radio-group
v-model="settings.device.theme" v-model="form.theme"
row row
> >
<v-radio <v-radio
@ -31,7 +22,7 @@
/> />
</v-radio-group> </v-radio-group>
<v-card-actions> <template #actions>
<v-btn <v-btn
depressed depressed
block block
@ -40,42 +31,60 @@
> >
Continue Continue
</v-btn> </v-btn>
</v-card-actions> </template>
</v-card> </setup-panel>
</v-col>
</v-row>
</v-container>
</template> </template>
<script> <script>
import apiDevice from '@/api/device' import { mapState, mapMutations, mapActions } from 'vuex'
import SetupPanel from '@/components/SetupPanel'
export default { export default {
components: { SetupPanel },
data: () => ({ data: () => ({
isLoading: true, isProcessing: false,
isSaving: false, form: {
settings: null, theme: '',
},
}), }),
computed: {
...mapState([
'settings',
]),
},
created () { created () {
apiDevice.getSettings(settings => { this.resetChanges()
this.settings = settings
this.isLoading = false
})
}, },
methods: { methods: {
...mapMutations(['updateSettings']),
...mapActions(['saveSettings']),
commitStep () { commitStep () {
this.isSaving = true this.isProcessing = true
apiDevice.putSettings({ device: this.settings.device }, () => { this.updateSettings({
this.isSaving = false device: {
theme: this.form.theme,
},
})
/*
this.saveSettings().then(() => {
this.nextStep() this.nextStep()
}) })
*/
this.nextStep()
},
resetChanges () {
this.form.theme = this.settings.device.theme
}, },
nextStep () { nextStep () {
this.$router.push('/setup/done') this.$router.push('/setup/done')
}, },
stepBack () {
this.$router.push('/setup/weather')
},
}, },
} }
</script> </script>

27
app/src/views/Setup/Country.vue
View File

@ -3,6 +3,18 @@
class="_fill-height" class="_fill-height"
fluid fluid
> >
<div>
<v-btn
text
color="primary"
class="px-0"
@click="stepBack"
>
<v-icon>$prev</v-icon>
Back
</v-btn>
</div>
<v-row <v-row
no-gutters no-gutters
justify="center" justify="center"
@ -16,18 +28,18 @@
<!-- country --> <!-- country -->
<v-card flat> <v-card flat>
<v-card-title <v-card-title
class="display-2 mb-12 justify-center text-center" class="display-1 font-weight-bold mb-12 px-0 justify-center text-center"
> >
Select Your Country or Region Select Your Country or Region
</v-card-title> </v-card-title>
<v-list class="ml-5 pa-0"> <v-list class="pa-0">
<template v-for="(country, code) in availableCountries"> <template v-for="(country, code) in availableCountries">
<div :key="code"> <div :key="code">
<v-divider /> <v-divider />
<v-list-item <v-list-item
class="pl-1" class="px-0"
@click="commitCountry(code, country)" @click="commitCountry(code, country)"
> >
<!--<v-list-item-icon>{{ country.emoji }}</v-list-item-icon>--> <!--<v-list-item-icon>{{ country.emoji }}</v-list-item-icon>-->
@ -46,17 +58,17 @@
<template v-else-if="currentStep === 1"> <template v-else-if="currentStep === 1">
<!-- timezone if needed --> <!-- timezone if needed -->
<v-card flat> <v-card flat>
<v-card-title class="display-2 mb-12 justify-center text-center"> <v-card-title class="display-1 font-weight-bold mb-12 px-0 justify-center text-center">
Select Your Timezone Select Your Timezone
</v-card-title> </v-card-title>
<v-list class="ml-5 pa-0"> <v-list class="pa-0">
<template v-for="(zone, i) in availableTimeZones"> <template v-for="(zone, i) in availableTimeZones">
<div :key="i"> <div :key="i">
<v-divider /> <v-divider />
<v-list-item <v-list-item
class="pl-1" class="px-0"
@click="commitTimezone(zone)" @click="commitTimezone(zone)"
> >
<v-list-item-content>{{ zone }}</v-list-item-content> <v-list-item-content>{{ zone }}</v-list-item-content>
@ -133,6 +145,9 @@
this.$router.push('/setup/wifi') this.$router.push('/setup/wifi')
}) })
}, },
stepBack () {
this.$router.push('/setup/start')
},
}, },
} }
</script> </script>

42
app/src/views/Setup/Done.vue
View File

@ -1,19 +1,13 @@
<template> <template>
<v-container <setup-panel
class="_fill-height" back
fluid @back="stepBack"
> >
<v-card <template #headline>
flat
class="mx-auto"
width="540"
>
<!--<v-card-title class="display-2 mb-12 justify-center text-center">Welcome to paperdash</v-card-title>-->
<v-card-title class="display-2 mb-12 justify-center text-center">
Hello {{ settings.device.name }} Hello {{ settings.device.name }}
</v-card-title> </template>
<v-card-actions> <template #actions>
<v-btn <v-btn
outlined outlined
block block
@ -22,31 +16,33 @@
> >
Let's start Let's start
</v-btn> </v-btn>
</v-card-actions> </template>
</v-card> </setup-panel>
</v-container>
</template> </template>
<script> <script>
import apiDevice from '@/api/device' import { mapState } from 'vuex'
import SetupPanel from '@/components/SetupPanel'
export default { export default {
components: { SetupPanel },
data: () => ({ data: () => ({
isLoading: true,
isSaving: false,
settings: null,
}), }),
computed: {
...mapState([
'settings',
]),
},
created () { created () {
apiDevice.getSettings(settings => {
this.settings = settings
this.isLoading = false
})
}, },
methods: { methods: {
onStart () { onStart () {
this.$router.push('/') this.$router.push('/')
}, },
stepBack () {
this.$router.push('/setup/appearance')
},
}, },
} }
</script> </script>

111
app/src/views/Setup/Name.vue
View File

@ -1,29 +1,14 @@
<template> <template>
<v-container <setup-panel
class="_fill-height" back
fluid @back="stepBack"
>
<v-row
no-gutters
justify="center"
>
<v-col
lg="5"
md="6"
sm="8"
>
<v-card flat>
<div class="justify-center text-center">
<v-icon
view-box="0 0 24 24"
style="width: 64px; height: 64px; fill: #FF9800"
> >
<template #icon>
$face $face
</v-icon> </template>
</div> <template #headline>
<v-card-title class="display-2 mb-12 justify-center text-center">
Give it a name Give it a name
</v-card-title> </template>
<p <p
class="text-center" class="text-center"
@ -31,23 +16,15 @@
TODO:Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam TODO:Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
</p> </p>
<v-skeleton-loader
v-if="isLoading"
type="list-item-two-line"
class="mx-auto"
/>
<template v-else>
<v-card-text> <v-card-text>
<v-text-field <v-text-field
v-model="settings.device.name" v-model="form.name"
label="i8n:My paperdash name" label="Name of the device"
> >
<template #append-outer> <template #append-outer>
<v-icon <v-icon
view-box="0 0 24 24" class="random-icon mt-5 ml-5"
style="width: 48px; height: 48px;" @click="setRandomName()"
@click="setRandomeName()"
> >
$autorenew $autorenew
</v-icon> </v-icon>
@ -55,10 +32,9 @@
</v-text-field> </v-text-field>
</v-card-text> </v-card-text>
<v-card-actions class="flex-column"> <template #actions>
<v-btn <v-btn
:disabled="!isStepValid" :disabled="!isStepValid"
:loading="isSaving"
depressed depressed
block block
color="primary" color="primary"
@ -66,60 +42,75 @@
> >
Continue Continue
</v-btn> </v-btn>
</v-card-actions>
</template> </template>
</v-card> </setup-panel>
</v-col>
</v-row>
</v-container>
</template> </template>
<script> <script>
import apiDevice from '@/api/device' import { mapState, mapMutations, mapActions } from 'vuex'
import randomNames from '@/assets/fantasyNames.json' import randomNames from '@/assets/fantasyNames.json'
import SetupPanel from '@/components/SetupPanel'
export default { export default {
components: { SetupPanel },
data: () => ({ data: () => ({
isLoading: true, isProcessing: false,
isSaving: false, form: {
settings: null, name: '',
},
}), }),
computed: { computed: {
...mapState([
'settings',
]),
isStepValid () { isStepValid () {
return ( return (
this.settings.device.name !== undefined && this.form.name !== ''
this.settings.device.name !== ''
) )
}, },
}, },
created () { created () {
apiDevice.getSettings(settings => { this.resetChanges()
this.settings = settings
if (!this.isStepValid) { if (!this.isStepValid) {
this.setRandomeName() this.setRandomName()
} }
this.isLoading = false
})
}, },
methods: { methods: {
...mapMutations(['updateSettings']),
...mapActions(['saveSettings']),
commitStep () { commitStep () {
this.isSaving = true this.isProcessing = true
apiDevice.putSettings({ device: this.settings.device }, () => { this.updateSettings({
this.isSaving = false device: {
name: this.form.name,
},
})
/*
this.saveSettings().then(() => {
this.nextStep() this.nextStep()
}) })
*/
this.nextStep()
},
resetChanges () {
this.form.name = this.settings.device.name
}, },
nextStep () { nextStep () {
this.$router.push('/setup/appearance') this.$router.push('/setup/appearance')
}, },
setRandomeName () { setRandomName () {
this.settings.device.name = this.form.name =
randomNames[Math.floor(Math.random() * randomNames.length)] randomNames[Math.floor(Math.random() * randomNames.length)]
}, },
stepBack () {
this.$router.push('/setup/weather')
},
}, },
} }
</script> </script>
@ -129,4 +120,8 @@
font-size: 2.2em; font-size: 2.2em;
max-height: inherit; max-height: inherit;
} }
>>> .random-icon > .v-icon__svg {
transform: scale(2);
}
</style> </style>

8
app/src/views/Setup/Start.vue
View File

@ -1,7 +1,6 @@
<template> <template>
<v-container <v-container
class="_fill-height" class="_fill-height fluid_"
fluid
> >
<v-row <v-row
no-gutters no-gutters
@ -13,7 +12,7 @@
sm="8" sm="8"
> >
<v-card flat> <v-card flat>
<v-card-title class="display-2 mt-12 justify-center text-center"> <v-card-title class="display-1 font-weight-bold mb-12 px-0 justify-center text-center">
Hello paperdash Hello paperdash
</v-card-title> </v-card-title>
@ -23,7 +22,9 @@
:class="[device.theme, device.case, device.front, 'case_orange', 'my-12']" :class="[device.theme, device.case, device.front, 'case_orange', 'my-12']"
/> />
<v-responsive>
<svg <svg
v-if="1"
id="device" id="device"
:class="[device.theme, device.case, device.front, 'case_orange front_orange', 'my-12 mx-auto']" :class="[device.theme, device.case, device.front, 'case_orange front_orange', 'my-12 mx-auto']"
version="1.0" version="1.0"
@ -62,6 +63,7 @@
/> />
</g> </g>
</svg> </svg>
</v-responsive>
<v-card-actions> <v-card-actions>
<v-btn <v-btn

100
app/src/views/Setup/Weather.vue
View File

@ -1,41 +1,18 @@
<template> <template>
<v-container <setup-panel
class="_fill-height" back
fluid @back="stepBack"
>
<v-row
no-gutters
justify="center"
>
<v-col
lg="5"
md="6"
sm="8"
>
<v-card flat>
<div class="justify-center text-center">
<v-icon
view-box="0 0 24 24"
style="width: 64px; height: 64px; fill: #FF9800"
> >
<template #icon>
$wb_sunny $wb_sunny
</v-icon> </template>
</div> <template #headline>
<v-card-title class="display-2 mb-12 justify-center text-center">
Weather Weather
</v-card-title> </template>
<v-skeleton-loader
v-if="isLoading"
type="list-item-two-line,list-item-two-line"
class="mx-auto"
/>
<template v-else>
<v-card-text>
<v-text-field <v-text-field
v-model="settings.weather.api" v-model="form.api"
label="i8n:OpenWeatherMap API key" label="OpenWeatherMap API key"
> >
<template #append-outer> <template #append-outer>
<v-icon @click="registerApiKey()"> <v-icon @click="registerApiKey()">
@ -45,14 +22,14 @@
</v-text-field> </v-text-field>
<weather-find-location <weather-find-location
:api="settings.weather.api" :api="form.api"
:location.sync="settings.weather.location" :location.sync="form.location"
:search.sync="form.name"
:lang="lang" :lang="lang"
:unit="unit" :unit="unit"
/> />
</v-card-text>
<v-card-actions class="flex-column"> <template #actions>
<v-btn <v-btn
:disabled="!isLocationValid" :disabled="!isLocationValid"
depressed depressed
@ -71,57 +48,76 @@
> >
Set Up Later in Settings Set Up Later in Settings
</v-btn> </v-btn>
</v-card-actions>
</template> </template>
</v-card> </setup-panel>
</v-col>
</v-row>
</v-container>
</template> </template>
<script> <script>
import apiDevice from '@/api/device' import { mapState, mapMutations, mapActions } from 'vuex'
import weatherFindLocation from '@/components/WeatherFindLocation' import weatherFindLocation from '@/components/WeatherFindLocation'
import SetupPanel from '@/components/SetupPanel'
export default { export default {
components: { components: {
SetupPanel,
weatherFindLocation, weatherFindLocation,
}, },
data: () => ({ data: () => ({
isLoading: true, form: {
settings: null, api: '',
name: '',
location: 0,
},
}), }),
computed: { computed: {
...mapState([
'settings',
]),
lang () { lang () {
return this.settings.language || 'EN' return this.settings.weather.language || 'EN'
}, },
unit () { unit () {
return this.settings.language === 'EN' ? '' : 'metric' return this.lang === 'EN' ? '' : 'metric'
}, },
isLocationValid () { isLocationValid () {
return this.settings.weather.location > 0 return this.settings.weather.location > 0
}, },
}, },
created () { created () {
apiDevice.getSettings(settings => { this.resetChanges()
this.settings = settings
this.isLoading = false
})
}, },
methods: { methods: {
...mapMutations(['updateSettings']),
...mapActions(['saveSettings']),
commitStep () { commitStep () {
// TODO sav this.updateSettings({
weather: {
api: this.form.api,
name: this.form.name,
location: this.form.location,
lang: this.lang,
unit: this.unit,
},
})
this.nextStep() this.nextStep()
}, },
resetChanges () {
this.form.api = this.settings.weather.api
this.form.location = this.settings.weather.location
this.form.name = this.settings.weather.name
},
nextStep () { nextStep () {
this.$router.push('/setup/name') this.$router.push('/setup/name')
}, },
registerApiKey () { registerApiKey () {
window.open('http://openweathermap.org/') window.open('http://openweathermap.org/')
}, },
stepBack () {
this.$router.push('/setup/')
},
}, },
} }
</script> </script>

17
app/src/views/Setup/Wifi.vue
View File

@ -3,6 +3,18 @@
class="_fill-height" class="_fill-height"
fluid fluid
> >
<div>
<v-btn
text
color="primary"
class="px-0"
@click="stepBack"
>
<v-icon>$prev</v-icon>
Back
</v-btn>
</div>
<v-row <v-row
no-gutters no-gutters
justify="center" justify="center"
@ -13,7 +25,7 @@
sm="8" sm="8"
> >
<v-card flat> <v-card flat>
<v-card-title class="display-2 mb-12 justify-center text-center"> <v-card-title class="display-1 font-weight-bold mb-12 px-0 justify-center text-center">
Choose a Choose a
<br>Wi-Fi Network <br>Wi-Fi Network
</v-card-title> </v-card-title>
@ -142,6 +154,9 @@
apiDevice.wifiConnect(ssid, password, () => {}) apiDevice.wifiConnect(ssid, password, () => {})
}, },
stepBack () {
this.$router.push('/setup/country')
},
}, },
} }
</script> </script>