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

handle different screen sizes

Browse Source
pull/1/head
Thomas Ballmann 4 years ago
parent 27b0ad0fbe
commit 0cd0e6970a
6 changed files with 291 additions and 254 deletions
Show Stats Download Patch File Download Diff File

39
app/src/views/Setup/Appearance.vue
Unescape Escape View File

@ -1,24 +1,27 @@
<template> <template>
<v-container fluid _fill-height> <v-container fluid _fill-height>
<v-card flat class="mx-auto" width="520"> <v-row no-gutters justify="center">
<v-card-title class="display-2 mb-12 justify-center text-center">Appearance</v-card-title> <v-col lg="5" md="6" sm="8">
<v-card flat>
<v-radio-group v-model="settings.device.theme" row> <v-card-title class="display-2 mb-12 justify-center text-center">Appearance</v-card-title>
<v-radio label="Light" value="white"></v-radio>
<v-radio label="Dark" value="black"></v-radio> <v-radio-group v-model="settings.device.theme" row>
</v-radio-group> <v-radio label="Light" value="white"></v-radio>
<v-radio label="Dark" value="black"></v-radio>
<v-card-actions> </v-radio-group>
<v-btn depressed block color="primary" @click="commitStep()">Continue</v-btn>
</v-card-actions> <v-card-actions>
</v-card> <v-btn depressed block color="primary" @click="commitStep()">Continue</v-btn>
</v-card-actions>
</v-card>
</v-col>
</v-row>
</v-container> </v-container>
</template> </template>
<script> <script>
import apiDevice from "@/api/device"; import apiDevice from "@/api/device";
export default { export default {
data: () => ({ data: () => ({
isLoading: true, isLoading: true,
@ -31,20 +34,20 @@ export default {
this.isLoading = false; this.isLoading = false;
}); });
}, },
methods: { methods: {
commitStep() { commitStep() {
this.isSaving = true; this.isSaving = true;
apiDevice.putSettings({device: this.settings.device}, () => { apiDevice.putSettings({ device: this.settings.device }, () => {
this.isSaving = false; this.isSaving = false;
this.nextStep(); this.nextStep();
}); });
}, },
nextStep() { nextStep() {
this.$router.push("/setup/done"); this.$router.push("/setup/done");
} }
} }
} };
</script> </script>

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

@ -1,54 +1,58 @@
<template> <template>
<v-container fluid _fill-height> <v-container fluid _fill-height>
<template v-if="currentStep === 0"> <v-row no-gutters justify="center">
<!-- country --> <v-col lg="5" md="6" sm="8">
<v-card flat class="mx-auto" width="520"> <template v-if="currentStep === 0">
<v-card-title <!-- country -->
class="display-2 mb-12 justify-center text-center" <v-card flat>
>Select Your Country or Region</v-card-title> <v-card-title
class="display-2 mb-12 justify-center text-center"
<v-list class="ml-5 pa-0"> >Select Your Country or Region</v-card-title>
<template v-for="(country, code) in availableCountries">
<div :key="code"> <v-list class="ml-5 pa-0">
<template v-for="(country, code) in availableCountries">
<div :key="code">
<v-divider></v-divider>
<v-list-item class="pl-1" @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-else-if="currentStep === 1">
<!-- timezone if needed -->
<v-card flat>
<v-card-title class="display-2 mb-12 justify-center text-center">Select Your Timezone</v-card-title>
<v-list class="ml-5 pa-0">
<template v-for="(zone, i) in availableTimeZones">
<div :key="i">
<v-divider></v-divider>
<v-list-item class="pl-1" @click="commitTimezone(zone)">
<v-list-item-content>{{ zone }}</v-list-item-content>
<v-list-item-action>
<v-icon>$next</v-icon>
</v-list-item-action>
</v-list-item>
</div>
</template>
<v-divider></v-divider> <v-divider></v-divider>
</v-list>
<v-list-item class="pl-1" @click="commitCountry(code, country)"> </v-card>
<!--<v-list-item-icon>{{ country.emoji }}</v-list-item-icon>--> </template>
<v-list-item-content>{{ country.native }}</v-list-item-content> </v-col>
</v-row>
<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-else-if="currentStep === 1">
<!-- timezone if needed -->
<v-card flat class="mx-auto" width="520">
<v-card-title class="display-2 mb-12 justify-center text-center">Select Your Timezone</v-card-title>
<v-list class="ml-5 pa-0">
<template v-for="(zone, i) in availableTimeZones">
<div :key="i">
<v-divider></v-divider>
<v-list-item class="pl-1" @click="commitTimezone(zone)">
<v-list-item-content>{{ zone }}</v-list-item-content>
<v-list-item-action>
<v-icon>$next</v-icon>
</v-list-item-action>
</v-list-item>
</div>
</template>
<v-divider></v-divider>
</v-list>
</v-card>
</template>
</v-container> </v-container>
</template> </template>
@ -111,4 +115,12 @@ export default {
} }
} }
}; };
</script> </script>
<style scoped>
/* issue https://github.com/vuetifyjs/vuetify/issues/9130 */
>>> .v-card__text,
.v-card__title {
word-break: normal;
}
</style>

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

@ -1,42 +1,46 @@
<template> <template>
<v-container fluid _fill-height> <v-container fluid _fill-height>
<v-card flat class="mx-auto" width="520"> <v-row no-gutters justify="center">
<div class="justify-center text-center"> <v-col lg="5" md="6" sm="8">
<v-icon viewBox="0 0 24 24" style="width: 64px; height: 64px; fill: #FF9800">$face</v-icon> <v-card flat>
</div> <div class="justify-center text-center">
<v-card-title class="display-2 mb-12 justify-center text-center">Give it a name</v-card-title> <v-icon viewBox="0 0 24 24" style="width: 64px; height: 64px; fill: #FF9800">$face</v-icon>
</div>
<v-card-title class="display-2 mb-12 justify-center text-center">Give it a name</v-card-title>
<p <p
class="text-center" class="text-center"
>TODO:Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p> >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"></v-skeleton-loader> <v-skeleton-loader v-if="isLoading" type="list-item-two-line" class="mx-auto"></v-skeleton-loader>
<template v-else> <template v-else>
<v-card-text> <v-card-text>
<v-text-field label="i8n:My paperdash name" v-model="settings.device.name"> <v-text-field label="i8n:My paperdash name" v-model="settings.device.name">
<template v-slot:append-outer> <template v-slot:append-outer>
<v-icon <v-icon
viewBox="0 0 24 24" viewBox="0 0 24 24"
style="width: 48px; height: 48px;" style="width: 48px; height: 48px;"
@click="setRandomeName()" @click="setRandomeName()"
>$autorenew</v-icon> >$autorenew</v-icon>
</template> </template>
</v-text-field> </v-text-field>
</v-card-text> </v-card-text>
<v-card-actions class="flex-column"> <v-card-actions class="flex-column">
<v-btn <v-btn
:disabled="!isStepValid" :disabled="!isStepValid"
:loading="isSaving" :loading="isSaving"
depressed depressed
block block
color="primary" color="primary"
@click="commitStep()" @click="commitStep()"
>Continue</v-btn> >Continue</v-btn>
</v-card-actions> </v-card-actions>
</template> </template>
</v-card> </v-card>
</v-col>
</v-row>
</v-container> </v-container>
</template> </template>
@ -71,13 +75,13 @@ export default {
}, },
methods: { methods: {
commitStep() { commitStep() {
this.isSaving = true; this.isSaving = true;
apiDevice.putSettings({device: this.settings.device}, () => { apiDevice.putSettings({ device: this.settings.device }, () => {
this.isSaving = false; this.isSaving = false;
this.nextStep(); this.nextStep();
}); });
}, },
nextStep() { nextStep() {
this.$router.push("/setup/appearance"); this.$router.push("/setup/appearance");

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

@ -1,61 +1,65 @@
<template> <template>
<v-container fluid _fill-height> <v-container fluid _fill-height>
<v-card flat class="mx-auto" width="520"> <v-row no-gutters justify="center">
<v-card-title class="display-2 mt-12 justify-center text-center">Hello paperdash</v-card-title> <v-col lg="5" md="6" sm="8">
<v-card flat>
<v-card-title class="display-2 mt-12 justify-center text-center">Hello paperdash</v-card-title>
<Case <Case
v-if="0" v-if="0"
id="device_" id="device_"
:class="[device.theme, device.case, device.front, 'case_orange', 'my-12']" :class="[device.theme, device.case, device.front, 'case_orange', 'my-12']"
/> />
<svg <svg
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"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
_width="561px" _width="561px"
_height="527px" _height="527px"
viewBox="0 0 5610 5270" viewBox="0 0 5610 5270"
preserveAspectRatio="xMidYMid meet" preserveAspectRatio="xMidYMid meet"
width="400" width="400"
> >
<!-- <!--
<defs> <defs>
<pattern id="pattern_b" width="100%" height="100%"> <pattern id="pattern_b" width="100%" height="100%">
<image x="0" y="0" height="84%" href="/face-weather-b.png"/> <image x="0" y="0" height="84%" href="/face-weather-b.png"/>
</pattern> </pattern>
<pattern id="pattern_w" width="100%" height="100%"> <pattern id="pattern_w" width="100%" height="100%">
<image x="0" y="0" height="84%" href="/face-weather-w.png"/> <image x="0" y="0" height="84%" href="/face-weather-w.png"/>
</pattern> </pattern>
</defs> </defs>
--> -->
<g id="border" fill="#262626" stroke="none"> <g id="border" fill="#262626" stroke="none">
<path <path
d="M442 5110 c-227 -86 -417 -161 -422 -166 -4 -5 -12 -1063 -16 -2350 -7 -2292 -6 -2342 12 -2352 31 -16 817 -242 844 -242 14 0 1086 158 2383 352 l2358 353 6 25 c9 35 -66 3683 -76 3693 -4 4 -1049 194 -2322 422 -1273 228 -2323 416 -2334 419 -11 2 -206 -67 -433 -154z" d="M442 5110 c-227 -86 -417 -161 -422 -166 -4 -5 -12 -1063 -16 -2350 -7 -2292 -6 -2342 12 -2352 31 -16 817 -242 844 -242 14 0 1086 158 2383 352 l2358 353 6 25 c9 35 -66 3683 -76 3693 -4 4 -1049 194 -2322 422 -1273 228 -2323 416 -2334 419 -11 2 -206 -67 -433 -154z"
/> />
</g> </g>
<g fill="#f3f3f3" stroke="none"> <g fill="#f3f3f3" stroke="none">
<path <path
id="front" id="front"
d="M860 2630 l0 -2611 33 6 c17 3 1080 163 2360 355 1281 191 2330 350 2332 352 6 6 -70 3666 -76 3672 -4 4 -4627 836 -4645 836 -2 0 -4 -1175 -4 -2610z m2378 1721 c1217 -175 2214 -320 2216 -322 7 -6 69 -3179 63 -3185 -8 -9 -4489 -624 -4499 -618 -10 6 -11 4444 0 4444 4 0 1003 -144 2220 -319z m2249 2 c-4 -3 -7 0 -7 7 0 7 3 10 7 7 3 -4 3 -10 0 -14z m60 -2890 c-4 -3 -7 0 -7 7 0 7 3 10 7 7 3 -4 3 -10 0 -14z" d="M860 2630 l0 -2611 33 6 c17 3 1080 163 2360 355 1281 191 2330 350 2332 352 6 6 -70 3666 -76 3672 -4 4 -4627 836 -4645 836 -2 0 -4 -1175 -4 -2610z m2378 1721 c1217 -175 2214 -320 2216 -322 7 -6 69 -3179 63 -3185 -8 -9 -4489 -624 -4499 -618 -10 6 -11 4444 0 4444 4 0 1003 -144 2220 -319z m2249 2 c-4 -3 -7 0 -7 7 0 7 3 10 7 7 3 -4 3 -10 0 -14z m60 -2890 c-4 -3 -7 0 -7 7 0 7 3 10 7 7 3 -4 3 -10 0 -14z"
/> />
<path <path
id="image" id="image"
d="M1022 4642 c-7 -19 5 -4393 13 -4400 5 -5 4465 605 4472 611 4 4 -59 3161 -63 3166 -3 3 -3200 465 -4387 634 -19 2 -31 -1 -35 -11z" d="M1022 4642 c-7 -19 5 -4393 13 -4400 5 -5 4465 605 4472 611 4 4 -59 3161 -63 3166 -3 3 -3200 465 -4387 634 -19 2 -31 -1 -35 -11z"
/> />
<path <path
id="case" id="case"
d="M438 5081 c-214 -81 -390 -150 -393 -153 -7 -6 -28 -4658 -22 -4664 2 -2 182 -56 400 -119 218 -64 403 -118 412 -121 13 -6 15 259 15 2600 0 2078 -3 2606 -12 2605 -7 0 -187 -67 -400 -148z" d="M438 5081 c-214 -81 -390 -150 -393 -153 -7 -6 -28 -4658 -22 -4664 2 -2 182 -56 400 -119 218 -64 403 -118 412 -121 13 -6 15 259 15 2600 0 2078 -3 2606 -12 2605 -7 0 -187 -67 -400 -148z"
/> />
</g> </g>
</svg> </svg>
<v-card-actions> <v-card-actions>
<v-btn depressed block color="primary" @click="commitStep()">Continue</v-btn> <v-btn depressed block color="primary" @click="commitStep()">Continue</v-btn>
</v-card-actions> </v-card-actions>
</v-card> </v-card>
</v-col>
</v-row>
</v-container> </v-container>
</template> </template>

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

@ -1,45 +1,55 @@
<template> <template>
<v-container fluid _fill-height> <v-container fluid _fill-height>
<v-card flat class="mx-auto" width="520"> <v-row no-gutters justify="center">
<div class="justify-center text-center"> <v-col lg="5" md="6" sm="8">
<v-icon viewBox="0 0 24 24" style="width: 64px; height: 64px; fill: #FF9800">$wb_sunny</v-icon> <v-card flat>
</div> <div class="justify-center text-center">
<v-card-title class="display-2 mb-12 justify-center text-center">Weather</v-card-title> <v-icon viewBox="0 0 24 24" style="width: 64px; height: 64px; fill: #FF9800">$wb_sunny</v-icon>
</div>
<v-card-title class="display-2 mb-12 justify-center text-center">Weather</v-card-title>
<v-skeleton-loader <v-skeleton-loader
v-if="isLoading" v-if="isLoading"
type="list-item-two-line,list-item-two-line" type="list-item-two-line,list-item-two-line"
class="mx-auto" class="mx-auto"
></v-skeleton-loader> ></v-skeleton-loader>
<template v-else> <template v-else>
<v-card-text> <v-card-text>
<v-text-field label="i8n:OpenWeatherMap API key" v-model="settings.weather.api"> <v-text-field label="i8n:OpenWeatherMap API key" v-model="settings.weather.api">
<template v-slot:append-outer> <template v-slot:append-outer>
<v-icon @click="registerApiKey()">$open_in_new</v-icon> <v-icon @click="registerApiKey()">$open_in_new</v-icon>
</template> </template>
</v-text-field> </v-text-field>
<weather-find-location <weather-find-location
:api="settings.weather.api" :api="settings.weather.api"
:location.sync="settings.weather.location" :location.sync="settings.weather.location"
:lang="lang" :lang="lang"
:unit="unit" :unit="unit"
></weather-find-location> ></weather-find-location>
</v-card-text> </v-card-text>
<v-card-actions class="flex-column"> <v-card-actions class="flex-column">
<v-btn :disabled="!isLocationValid" depressed block color="primary" @click="commitStep()">Continue</v-btn> <v-btn
<v-btn :disabled="!isLocationValid"
class="ma-0 mt-3" depressed
text block
block color="primary"
color="primary" @click="commitStep()"
@click="nextStep()" >Continue</v-btn>
>Set Up Later in Settings</v-btn> <v-btn
</v-card-actions> class="ma-0 mt-3"
</template> text
</v-card> block
color="primary"
@click="nextStep()"
>Set Up Later in Settings</v-btn>
</v-card-actions>
</template>
</v-card>
</v-col>
</v-row>
</v-container> </v-container>
</template> </template>
@ -68,21 +78,21 @@ export default {
}, },
unit() { unit() {
return this.settings.language === "EN" ? "" : "metric"; return this.settings.language === "EN" ? "" : "metric";
}, },
isLocationValid() { isLocationValid() {
return this.settings.weather.location > 0; return this.settings.weather.location > 0;
} }
}, },
methods: { methods: {
commitStep() { commitStep() {
// TODO sav // TODO sav
this.nextStep(); this.nextStep();
}, },
nextStep() { nextStep() {
this.$router.push("/setup/name"); this.$router.push("/setup/name");
}, },
registerApiKey() { registerApiKey() {
window.open("http://openweathermap.org/"); window.open("http://openweathermap.org/");
} }

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

@ -1,62 +1,66 @@
<template> <template>
<v-container fluid _fill-height> <v-container fluid _fill-height>
<v-card flat class="mx-auto" width="520"> <v-row no-gutters justify="center">
<v-card-title class="display-2 mb-12 justify-center text-center"> <v-col lg="5" md="6" sm="8">
Choose a <v-card flat>
<br />Wi-Fi Network <v-card-title class="display-2 mb-12 justify-center text-center">
</v-card-title> Choose a
<br />Wi-Fi Network
<v-skeleton-loader </v-card-title>
v-if="isLoading"
type="list-item-two-line,list-item-two-line,list-item-two-line" <v-skeleton-loader
class="mx-auto" v-if="isLoading"
></v-skeleton-loader> type="list-item-two-line,list-item-two-line,list-item-two-line"
class="mx-auto"
<v-list v-else> ></v-skeleton-loader>
<template v-for="(wifi, i) in wifiAvailable">
<div :key="i"> <v-list v-else>
<v-divider v-if="i > 0"></v-divider> <template v-for="(wifi, i) in wifiAvailable">
<div :key="i">
<v-list-item class="px-1" @click="onWifiSelect(wifi)"> <v-divider v-if="i > 0"></v-divider>
<v-list-item-icon class="mr-2 ml-2">
<v-icon v-if="wifi.ssid === settings.system.wifi">$check</v-icon> <v-list-item class="px-1" @click="onWifiSelect(wifi)">
<v-list-item-icon class="mr-2 ml-2">
<v-progress-circular <v-icon v-if="wifi.ssid === settings.system.wifi">$check</v-icon>
v-if="wifi.ssid === connectingSSID"
:size="24" <v-progress-circular
:width="2" v-if="wifi.ssid === connectingSSID"
color="grey " :size="24"
indeterminate :width="2"
></v-progress-circular> color="grey "
</v-list-item-icon> indeterminate
></v-progress-circular>
<v-list-item-content dark> </v-list-item-icon>
<v-list-item-title v-text="wifi.ssid"></v-list-item-title>
<v-list-item-subtitle v-text="wifi.bssid"></v-list-item-subtitle> <v-list-item-content dark>
</v-list-item-content> <v-list-item-title v-text="wifi.ssid"></v-list-item-title>
<v-list-item-subtitle v-text="wifi.bssid"></v-list-item-subtitle>
<v-list-item-icon> </v-list-item-content>
<v-icon class="mx-2" v-if="wifi.secure">$lock</v-icon>
<v-icon class="mx-2">{{ wifi.rssi | wifiIcon(0) }}</v-icon> <v-list-item-icon>
<v-icon class="ml-3">$next</v-icon> <v-icon class="mx-2" v-if="wifi.secure">$lock</v-icon>
</v-list-item-icon> <v-icon class="mx-2">{{ wifi.rssi | wifiIcon(0) }}</v-icon>
</v-list-item> <v-icon class="ml-3">$next</v-icon>
</div> </v-list-item-icon>
</template> </v-list-item>
</div>
<v-divider></v-divider> </template>
<v-btn text color="primary" class="_px-0 my-2">Choose Another Network</v-btn> <v-divider></v-divider>
</v-list>
<v-btn text color="primary" class="_px-0 my-2">Choose Another Network</v-btn>
<v-dialog v-model="wifiPasswordModal" max-width="450"> </v-list>
<setup-wifi-connect
:ssid="connectSSID" <v-dialog v-model="wifiPasswordModal" max-width="450">
:onConnect="onWifiConnect" <setup-wifi-connect
@cancel="wifiPasswordModal = false" :ssid="connectSSID"
></setup-wifi-connect> :onConnect="onWifiConnect"
</v-dialog> @cancel="wifiPasswordModal = false"
</v-card> ></setup-wifi-connect>
</v-dialog>
</v-card>
</v-col>
</v-row>
</v-container> </v-container>
</template> </template>

Write Preview
Loading…
Cancel
Save