Archives
/
device-epd
mirror of https://github.com/paperdash/device-epd
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

#31 improve setup wizard base

Browse Source
pull/1/head
Thomas Ballmann 4 years ago
parent 94339ea160
commit 1ad74f7664
8 changed files with 418 additions and 307 deletions
Show Stats Download Patch File Download Diff File

83
app/src/components/SetupPanel.vue
Unescape Escape 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
Unescape Escape View File

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

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

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

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

@ -1,19 +1,13 @@
<template>
<v-container
class="_fill-height"
fluid
<setup-panel
back
@back="stepBack"
>
<v-card
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">
<template #headline>
Hello {{ settings.device.name }}
</v-card-title>
</template>
<v-card-actions>
<template #actions>
<v-btn
outlined
block
@ -22,31 +16,33 @@
>
Let's start
</v-btn>
</v-card-actions>
</v-card>
</v-container>
</template>
</setup-panel>
</template>
<script>
import apiDevice from '@/api/device'
import { mapState } from 'vuex'
import SetupPanel from '@/components/SetupPanel'
export default {
components: { SetupPanel },
data: () => ({
isLoading: true,
isSaving: false,
settings: null,
}),
computed: {
...mapState([
'settings',
]),
},
created () {
apiDevice.getSettings(settings => {
this.settings = settings
this.isLoading = false
})
},
methods: {
onStart () {
this.$router.push('/')
},
stepBack () {
this.$router.push('/setup/appearance')
},
},
}
</script>

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

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

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

@ -1,7 +1,6 @@
<template>
<v-container
class="_fill-height"
fluid
class="_fill-height fluid_"
>
<v-row
no-gutters
@ -13,7 +12,7 @@
sm="8"
>
<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
</v-card-title>
@ -23,7 +22,9 @@
:class="[device.theme, device.case, device.front, 'case_orange', 'my-12']"
/>
<v-responsive>
<svg
v-if="1"
id="device"
:class="[device.theme, device.case, device.front, 'case_orange front_orange', 'my-12 mx-auto']"
version="1.0"
@ -62,6 +63,7 @@
/>
</g>
</svg>
</v-responsive>
<v-card-actions>
<v-btn

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

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

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

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

Write Preview
Loading…
Cancel
Save