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

refactor country setup page to use setup panel component

Browse Source
pull/1/head
Thomas Ballmann 3 years ago
parent 223c89fff7
commit aeb36b69dc
1 changed files with 61 additions and 83 deletions
Show Stats Download Patch File Download Diff File

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

@ -1,100 +1,78 @@
<template> <template>
<v-container <setup-panel
class="_fill-height" back
fluid @back="stepBack"
> >
<div> <template #icon>
<v-btn $language
text </template>
color="primary"
class="px-0" <template #headline>
@click="stepBack" <template v-if="currentStep === 0">
> Select Your Country or Region
<v-icon>$prev</v-icon> </template>
Back <template v-else-if="currentStep === 1">
</v-btn> Select Your Timezone
</div> </template>
</template>
<v-row
no-gutters <template v-if="currentStep === 0">
justify="center" <!-- country -->
> <v-list class="pa-0">
<v-col <template v-for="(country, code) in availableCountries">
lg="5" <div :key="code">
md="6" <v-divider />
sm="8"
> <v-list-item
<template v-if="currentStep === 0"> class="px-0"
<!-- country --> @click="commitCountry(code, country)"
<v-card flat>
<v-card-title
class="display-1 font-weight-bold mb-12 px-0 justify-center text-center"
> >
Select Your Country or Region <!--<v-list-item-icon>{{ country.emoji }}</v-list-item-icon>-->
</v-card-title> <v-list-item-content>{{ country.native }}</v-list-item-content>
<v-list class="pa-0"> <v-list-item-action>
<template v-for="(country, code) in availableCountries"> <v-icon>$next</v-icon>
<div :key="code"> </v-list-item-action>
<v-divider /> </v-list-item>
</div>
<v-list-item
class="px-0"
@click="commitCountry(code, country)"
>
<!--<v-list-item-icon>{{ country.emoji }}</v-list-item-icon>-->
<v-list-item-content>{{ country.native }}</v-list-item-content>
<v-list-item-action>
<v-icon>$next</v-icon>
</v-list-item-action>
</v-list-item>
</div>
</template>
</v-list>
</v-card>
</template> </template>
</v-list>
</template>
<template v-else-if="currentStep === 1"> <template v-else-if="currentStep === 1">
<!-- timezone if needed --> <!-- timezone if needed -->
<v-card flat>
<v-card-title class="display-1 font-weight-bold mb-12 px-0 justify-center text-center"> <v-list class="pa-0">
Select Your Timezone <template v-for="(zone, i) in availableTimeZones">
</v-card-title> <div :key="i">
<v-divider />
<v-list class="pa-0">
<template v-for="(zone, i) in availableTimeZones"> <v-list-item
<div :key="i"> class="px-0"
<v-divider /> @click="commitTimezone(zone)"
>
<v-list-item <v-list-item-content>{{ zone }}</v-list-item-content>
class="px-0"
@click="commitTimezone(zone)" <v-list-item-action>
> <v-icon>$next</v-icon>
<v-list-item-content>{{ zone }}</v-list-item-content> </v-list-item-action>
</v-list-item>
<v-list-item-action> </div>
<v-icon>$next</v-icon>
</v-list-item-action>
</v-list-item>
</div>
</template>
<v-divider />
</v-list>
</v-card>
</template> </template>
</v-col> <v-divider />
</v-row> </v-list>
</v-container> </template>
</setup-panel>
</template> </template>
<script> <script>
import { mapState, mapActions, mapMutations } from 'vuex' import { mapState, mapActions, mapMutations } from 'vuex'
// import apiDevice from '@/api/device'
import { countries } from 'countries-list' import { countries } from 'countries-list'
import timezones from 'countries-and-timezones' import timezones from 'countries-and-timezones'
import SetupPanel from '@/components/Setup/BasePanel'
export default { export default {
components: { SetupPanel },
data: () => ({ data: () => ({
currentStep: 0, currentStep: 0,

Write Preview
Loading…
Cancel
Save