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

layout improvements

Browse Source
pull/1/head
Thomas Ballmann 4 years ago
parent 59f90f6ef4
commit 6930a9dac0
7 changed files with 452 additions and 440 deletions
Show Stats Download Patch File Download Diff File

5
app/src/assets/app.css
Unescape Escape View File

@ -1,3 +1,8 @@
.v-icon { .v-icon {
fill: currentColor; fill: currentColor;
}
.v-btn__content .v-icon--left, .v-btn__content .v-icon--right {
width: 24px !important;
height: 24px !important;
} }

39
app/src/components/SetupWifiConnect.vue
Unescape Escape View File

@ -2,8 +2,14 @@
<v-card flat> <v-card flat>
<v-toolbar <v-toolbar
dark dark
color="primary" flat
color="orange darken-2"
class="pr-0 mr-0"
> >
<v-toolbar-title>
{{ ssid }}
</v-toolbar-title>
<v-spacer />
<v-btn <v-btn
icon icon
dark dark
@ -11,38 +17,36 @@
> >
<v-icon>$close</v-icon> <v-icon>$close</v-icon>
</v-btn> </v-btn>
<v-toolbar-title class="pl-0">
Enter the password for "{{ ssid }}"
</v-toolbar-title>
<v-progress-linear <template
:active="isConnecting" #extension
indeterminate >
absolute <div class="text-center align-content-center">
bottom Enter the password
color="deep-orange accent-4" </div>
/> </template>
</v-toolbar> </v-toolbar>
<v-card-text class="pa-5"> <v-card-text class="pa-5">
<v-text-field <v-text-field
v-model="password" v-model="password"
:append-icon="show1 ? '$visibility' : '$visibility_off'" :append-icon="show ? '$visibility' : '$visibility_off'"
:type="show1 ? 'text' : 'password'" :type="show ? 'text' : 'password'"
label="i8n:Password" label="Password"
@click:append="show1 = !show1" @click:append="show = !show"
/> />
</v-card-text> </v-card-text>
<v-card-actions> <v-card-actions>
<v-spacer /> <v-spacer />
<v-btn <v-btn
block
depressed depressed
:disabled="password === ''" :disabled="password === ''"
color="primary" color="primary"
@click="onConnect(ssid, password)" @click="onConnect(ssid, password)"
> >
i8n:Join Join
</v-btn> </v-btn>
</v-card-actions> </v-card-actions>
</v-card> </v-card>
@ -61,9 +65,8 @@
}, },
}, },
data: () => ({ data: () => ({
isConnecting: false,
password: '', password: '',
show1: false, show: false,
}), }),
} }
</script> </script>

135
app/src/views/Device.vue
Unescape Escape View File

@ -1,77 +1,76 @@
<template> <template>
<div class="pa-5"> <v-card
<v-card flat
flat rounded="lg"
> >
<v-card-title class="display-2 mb-12 justify-center text-center"> <v-card-title class="display-2 mb-12 justify-center text-center">
Device settings Device settings
</v-card-title> </v-card-title>
<v-card-text> <div>
<v-text-field <v-text-field
v-model="form.name" v-model="form.name"
label="Name" label="Name"
prepend-icon="$sentiment_satisfied_alt" prepend-icon="$sentiment_satisfied_alt"
/> />
<v-select <v-select
v-model="form.theme" v-model="form.theme"
disabled disabled
:items="optionsTheme" :items="optionsTheme"
label="Appearance" label="Appearance"
prepend-icon="$palette" prepend-icon="$palette"
/> />
<v-select <v-select
v-model="form.language" v-model="form.language"
disabled disabled
:items="getAvailableLanguages" :items="getAvailableLanguages"
item-text="native" item-text="native"
item-value="code" item-value="code"
label="Language" label="Language"
prepend-icon="$translate" prepend-icon="$translate"
/> />
<v-autocomplete <v-autocomplete
v-model="form.timezone" v-model="form.timezone"
:items="getAvailableTimezonesSorted" :items="getAvailableTimezonesSorted"
item-value="name" item-value="name"
item-text="name" item-text="name"
label="Timezone" label="Timezone"
prepend-icon="$access_time" prepend-icon="$access_time"
return-object return-object
> >
<template #item="{ item }"> <template #item="{ item }">
(GMT{{ item.utcOffsetStr }}) {{ item.name }} (GMT{{ item.utcOffsetStr }}) {{ item.name }}
</template> </template>
<template #selection="{item}"> <template #selection="{item}">
(GMT{{ item.utcOffsetStr }}) {{ item.name }} (GMT{{ item.utcOffsetStr }}) {{ item.name }}
</template> </template>
</v-autocomplete> </v-autocomplete>
</v-card-text> </div>
<v-divider class="mt-12" /> <v-divider class="mt-12" />
<v-card-actions> <v-card-actions>
<v-btn <v-btn
text text
@click="resetChanges" @click="resetChanges"
> >
Restore Restore
</v-btn> </v-btn>
<v-spacer /> <v-spacer />
<v-btn <v-btn
:loading="isProcessing" :loading="isProcessing"
depressed depressed
@click="commitChanges" @click="commitChanges"
> >
<v-icon left> <v-icon left>
$done $done
</v-icon> </v-icon>
Save Save
</v-btn> </v-btn>
</v-card-actions> </v-card-actions>
</v-card> </v-card>
</div>
</template> </template>
<script> <script>

157
app/src/views/Playlist.vue
Unescape Escape View File

@ -1,88 +1,87 @@
<template> <template>
<div class="pa-5"> <v-card
<v-card flat
flat rounded="lg"
> >
<v-card-title class="display-2 mb-12 justify-center text-center"> <v-card-title class="display-2 mb-12 justify-center text-center">
Playlist settings Playlist settings
</v-card-title> </v-card-title>
<v-card-text class="pb-0"> <v-card-text class="pb-0">
<v-row> <v-row>
<v-col <v-col
cols="3" cols="3"
class="text-center mt-2 pb-0" class="text-center mt-2 pb-0"
> >
<v-icon>$wb_sunny</v-icon> <v-icon>$wb_sunny</v-icon>
<br>Forecast <br>Forecast
</v-col> </v-col>
<v-col <v-col
cols="6" cols="6"
class="text-center pb-0" class="text-center pb-0"
> >
<v-text-field <v-text-field
v-model="form.timer" v-model="form.timer"
:disabled="!isSettingSupported('playlist.timer')" :disabled="!isSettingSupported('playlist.timer')"
label="Switch every" label="Switch every"
:rules="[rules.minValue]" :rules="[rules.minValue]"
type="number" type="number"
dense dense
rounded rounded
filled filled
suffix="seconds" suffix="seconds"
class="text--right" class="text--right"
/> />
</v-col> </v-col>
<v-col <v-col
cols="3" cols="3"
class="text-center mt-2 pb-0" class="text-center mt-2 pb-0"
> >
<v-icon>$calendar_today</v-icon> <v-icon>$calendar_today</v-icon>
<br>Calendar <br>Calendar
</v-col> </v-col>
</v-row> </v-row>
</v-card-text> </v-card-text>
<v-divider class="mt-12 mx-3" /> <v-divider class="mt-12 mx-3" />
<v-card-subtitle> <v-card-subtitle>
Service Service
</v-card-subtitle> </v-card-subtitle>
<v-card-text> <v-card-text>
<v-combobox <v-combobox
v-model="form.images" v-model="form.images"
:disabled="!isSettingSupported('playlist.images')" :disabled="!isSettingSupported('playlist.images')"
:items="['https://api.paperdash.io/image/']" :items="['https://api.paperdash.io/image/']"
label="Image provider" label="Image provider"
prepend-icon="$link" prepend-icon="$link"
append-outer-icon="$help" append-outer-icon="$help"
/> />
</v-card-text> </v-card-text>
<v-divider class="mt-12" /> <v-divider class="mt-12" />
<v-card-actions> <v-card-actions>
<v-btn <v-btn
text text
@click="resetChanges" @click="resetChanges"
>
Restore
</v-btn>
<v-spacer />
<v-btn
:loading="isProcessing"
depressed
@click="commitChanges"
>
<v-icon
left
> >
Restore $done
</v-btn> </v-icon>
<v-spacer /> Save
<v-btn </v-btn>
:loading="isProcessing" </v-card-actions>
depressed </v-card>
@click="commitChanges"
>
<v-icon left>
$done
</v-icon>
Save
</v-btn>
</v-card-actions>
</v-card>
- rename playlist to faces?
</div>
</template> </template>
<script> <script>

305
app/src/views/System.vue
Unescape Escape View File

@ -1,171 +1,170 @@
<template> <template>
<div class="pa-5"> <v-card
<v-card flat
flat rounded="lg"
> >
<v-card-title class="display-2 mb-12 justify-center text-center"> <v-card-title class="display-2 mb-12 justify-center text-center">
System info System info
</v-card-title> </v-card-title>
<v-list-item> <v-list-item>
<v-list-item-icon class="mr-3"> <v-list-item-icon class="mr-3">
<v-icon>$info</v-icon> <v-icon>$info</v-icon>
</v-list-item-icon> </v-list-item-icon>
<v-list-item-content>
<v-list-item-title>Software</v-list-item-title>
</v-list-item-content>
<v-list-item-action>
<update-dialog
:current-firmware="new Date(stats.firmware.created *1000)"
:current-app="new Date(stats.app.created *1000)"
>
<template #activator="{ on }">
<v-btn
outlined
color="primary"
v-on="on"
>
Update
</v-btn>
</template>
</update-dialog>
</v-list-item-action>
</v-list-item>
<v-divider class="mx-4" />
<v-list
class="pb-0"
>
<v-list-item three-line>
<v-list-item-content> <v-list-item-content>
<v-list-item-title>Software</v-list-item-title> <v-list-item-title>Firmware</v-list-item-title>
<v-list-item-subtitle class="text--disabled">
Rev: {{ stats.firmware.rev }}
</v-list-item-subtitle>
<v-list-item-subtitle class="text--disabled">
Build: {{ new Date(stats.firmware.created * 1000).toLocaleString() }}
</v-list-item-subtitle>
</v-list-item-content> </v-list-item-content>
<v-list-item-action>
<update-dialog
:current-firmware="new Date(stats.firmware.created *1000)"
:current-app="new Date(stats.app.created *1000)"
>
<template #activator="{ on }">
<v-btn
outlined
color="primary"
v-on="on"
>
Update
</v-btn>
</template>
</update-dialog>
</v-list-item-action>
</v-list-item> </v-list-item>
<v-divider class="mx-4" />
<v-list
class="pb-0"
>
<v-list-item three-line>
<v-list-item-content>
<v-list-item-title>Firmware</v-list-item-title>
<v-list-item-subtitle class="text--disabled">
Rev: {{ stats.firmware.rev }}
</v-list-item-subtitle>
<v-list-item-subtitle class="text--disabled">
Build: {{ new Date(stats.firmware.created * 1000).toLocaleString() }}
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-list-item three-line> <v-list-item three-line>
<v-list-item-content>
<v-list-item-title>App</v-list-item-title>
<v-list-item-subtitle class="text--disabled">
Rev: {{ stats.app.rev }}
</v-list-item-subtitle>
<v-list-item-subtitle class="text--disabled">
Build: {{ new Date(stats.app.created * 1000).toLocaleString() }}
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</v-list>
<v-list-item class="mt-10">
<v-list-item-icon class="mr-3">
<v-icon>$storage</v-icon>
</v-list-item-icon>
<v-list-item-content> <v-list-item-content>
<v-list-item-title>Storage</v-list-item-title> <v-list-item-title>App</v-list-item-title>
</v-list-item-content> <v-list-item-subtitle class="text--disabled">
<v-list-item-avatar> Rev: {{ stats.app.rev }}
<v-progress-circular
:rotate="-90"
:value="fsUsage"
class="caption"
>
{{ fsUsage }}
</v-progress-circular>
</v-list-item-avatar>
</v-list-item>
<v-divider class="mx-4" />
<v-list
class="pb-0"
>
<v-list-item>
<v-list-item-title>Total</v-list-item-title>
<v-list-item-subtitle class="text-right">
{{ fs.total | prettyBytes }}
</v-list-item-subtitle> </v-list-item-subtitle>
</v-list-item> <v-list-item-subtitle class="text--disabled">
Build: {{ new Date(stats.app.created * 1000).toLocaleString() }}
<v-list-item>
<v-list-item-title>Free</v-list-item-title>
<v-list-item-subtitle class="text-right">
{{ fs.free | prettyBytes }}
</v-list-item-subtitle> </v-list-item-subtitle>
</v-list-item>
</v-list>
<v-progress-linear
v-if="0"
height="25"
:value="fsUsage"
dark
rounded
>
<template #default="{ value }">
<strong>{{ Math.ceil(value) }}%</strong>
</template>
</v-progress-linear>
<v-list-item class="mt-10">
<v-list-item-icon class="mr-3">
<v-icon>$memory</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>Memory</v-list-item-title>
</v-list-item-content> </v-list-item-content>
<v-list-item-avatar>
<v-progress-circular
:rotate="-90"
:value="memoryUsage"
class="caption"
>
{{ memoryUsage }}
</v-progress-circular>
</v-list-item-avatar>
</v-list-item> </v-list-item>
</v-list>
<v-divider class="mx-4" /> <v-list-item class="mt-10">
<v-list <v-list-item-icon class="mr-3">
class="pb-0" <v-icon>$storage</v-icon>
> </v-list-item-icon>
<v-list-item> <v-list-item-content>
<v-list-item-title>Total</v-list-item-title> <v-list-item-title>Storage</v-list-item-title>
<v-list-item-subtitle class="text-right"> </v-list-item-content>
{{ memory.total | prettyBytes }} <v-list-item-avatar>
</v-list-item-subtitle> <v-progress-circular
</v-list-item> :rotate="-90"
:value="fsUsage"
class="caption"
>
{{ fsUsage }}
</v-progress-circular>
</v-list-item-avatar>
</v-list-item>
<v-divider class="mx-4" />
<v-list
class="pb-0"
>
<v-list-item>
<v-list-item-title>Total</v-list-item-title>
<v-list-item-subtitle class="text-right">
{{ fs.total | prettyBytes }}
</v-list-item-subtitle>
</v-list-item>
<v-list-item> <v-list-item>
<v-list-item-title>Free</v-list-item-title> <v-list-item-title>Free</v-list-item-title>
<v-list-item-subtitle class="text-right"> <v-list-item-subtitle class="text-right">
{{ memory.free | prettyBytes }} {{ fs.free | prettyBytes }}
</v-list-item-subtitle> </v-list-item-subtitle>
</v-list-item> </v-list-item>
</v-list> </v-list>
<v-progress-linear <v-progress-linear
v-if="0" v-if="0"
height="25" height="25"
:value="memoryUsage" :value="fsUsage"
dark dark
rounded rounded
> >
<template #default="{ value }"> <template #default="{ value }">
<strong>{{ Math.ceil(value) }}%</strong> <strong>{{ Math.ceil(value) }}%</strong>
</template> </template>
</v-progress-linear> </v-progress-linear>
<v-divider class="mt-12" /> <v-list-item class="mt-10">
<v-card-actions> <v-list-item-icon class="mr-3">
<v-btn <v-icon>$memory</v-icon>
depressed </v-list-item-icon>
disabled <v-list-item-content>
<v-list-item-title>Memory</v-list-item-title>
</v-list-item-content>
<v-list-item-avatar>
<v-progress-circular
:rotate="-90"
:value="memoryUsage"
class="caption"
> >
factory reset {{ memoryUsage }}
</v-btn> </v-progress-circular>
</v-card-actions> </v-list-item-avatar>
</v-card> </v-list-item>
</div>
<v-divider class="mx-4" />
<v-list
class="pb-0"
>
<v-list-item>
<v-list-item-title>Total</v-list-item-title>
<v-list-item-subtitle class="text-right">
{{ memory.total | prettyBytes }}
</v-list-item-subtitle>
</v-list-item>
<v-list-item>
<v-list-item-title>Free</v-list-item-title>
<v-list-item-subtitle class="text-right">
{{ memory.free | prettyBytes }}
</v-list-item-subtitle>
</v-list-item>
</v-list>
<v-progress-linear
v-if="0"
height="25"
:value="memoryUsage"
dark
rounded
>
<template #default="{ value }">
<strong>{{ Math.ceil(value) }}%</strong>
</template>
</v-progress-linear>
<v-divider class="mt-12" />
<v-card-actions>
<v-btn
depressed
disabled
>
factory reset
</v-btn>
</v-card-actions>
</v-card>
</template> </template>
<script> <script>

1
app/src/views/Weather.vue
Unescape Escape View File

@ -1,6 +1,7 @@
<template> <template>
<v-card <v-card
flat flat
rounded="lg"
> >
<v-card-title class="display-2 mb-12 justify-center text-center"> <v-card-title class="display-2 mb-12 justify-center text-center">
Weather settings Weather settings

250
app/src/views/Wifi.vue
Unescape Escape View File

@ -1,136 +1,136 @@
<template> <template>
<div class="pa-5"> <v-card
<v-card flat
flat rounded="lg"
> >
<v-card-title class="display-2 mb-12 justify-center text-center"> <v-card-title class="display-2 mb-12 justify-center text-center">
Wifi settings Wifi settings
</v-card-title> </v-card-title>
<v-list> <v-list>
<template v-if="stats.wifi.connected"> <template v-if="stats.wifi.connected">
<v-list-item <v-list-item
class="px-1" class="px-1"
> >
<v-list-item-icon class="mr-2 ml-2"> <v-list-item-icon class="mr-2 ml-2">
<v-icon>
$check
</v-icon>
</v-list-item-icon>
<v-list-item-content dark>
<v-list-item-title v-text="stats.wifi.ssid" />
<v-list-item-subtitle v-text="stats.wifi.mac" />
</v-list-item-content>
<v-list-item-icon>
<v-icon
v-if="stats.wifi.secure"
class="mx-2"
>
$lock
</v-icon>
<v-icon class="mx-2">
{{ stats.wifi.rssi | wifiIcon(0) }}
</v-icon>
<v-btn
icon
disabled
>
<v-icon> <v-icon>
$check $info
</v-icon>
</v-list-item-icon>
<v-list-item-content dark>
<v-list-item-title v-text="stats.wifi.ssid" />
<v-list-item-subtitle v-text="stats.wifi.mac" />
</v-list-item-content>
<v-list-item-icon>
<v-icon
v-if="stats.wifi.secure"
class="mx-2"
>
$lock
</v-icon> </v-icon>
<v-icon class="mx-2"> </v-btn>
{{ stats.wifi.rssi | wifiIcon(0) }} </v-list-item-icon>
</v-icon> </v-list-item>
<v-btn <v-divider />
icon </template>
disabled <v-subheader class="pl-0 mt-5">
> Networks
<v-icon> </v-subheader>
$info
</v-icon>
</v-btn>
</v-list-item-icon>
</v-list-item>
<v-divider />
</template>
<v-subheader class="pl-0 mt-5">
Networks
</v-subheader>
<template v-if="!isLoading"> <template v-if="!isLoading">
<template <template
v-for="(wifi, i) in wifiAvailable" v-for="(wifi, i) in wifiAvailable"
>
<div
v-if="wifi.ssid !== settings.system.wifi || !stats.wifi.connected"
:key="i"
> >
<div <v-divider v-if="i > 0" />
v-if="wifi.ssid !== settings.system.wifi"
:key="i" <v-list-item
class="px-1"
@click="onWifiSelect(wifi)"
> >
<v-divider v-if="i > 0" /> <v-list-item-icon class="mr-2 ml-2">
<v-icon v-if="wifi.ssid === settings.system.wifi">
<v-list-item $check
class="px-1" </v-icon>
@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>
</template>
<v-skeleton-loader <v-progress-circular
v-else v-if="wifi.ssid === connectingSSID"
type="list-item-two-line,list-item-two-line,list-item-two-line" :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>
</template>
<v-divider /> <v-skeleton-loader
v-else
type="list-item-two-line,list-item-two-line,list-item-two-line"
/>
<v-btn <v-divider />
text
color="primary"
class="_px-0 my-2"
disabled
>
Choose Another Network
</v-btn>
</v-list>
<v-dialog <v-btn
v-model="wifiPasswordModal" text
max-width="450" color="primary"
class="_px-0 my-2"
disabled
> >
<setup-wifi-connect Choose Another Network
:ssid="connectSSID" </v-btn>
:on-connect="onWifiConnect" </v-list>
@cancel="wifiPasswordModal = false"
/> <v-dialog
</v-dialog> v-model="wifiPasswordModal"
</v-card> max-width="450"
</div> _:fullscreen="$vuetify.breakpoint.mobile"
>
<setup-wifi-connect
:ssid="connectSSID"
:on-connect="onWifiConnect"
@cancel="wifiPasswordModal = false"
/>
</v-dialog>
</v-card>
</template> </template>
<script> <script>
@ -174,7 +174,13 @@
this.connectingSSID = ssid this.connectingSSID = ssid
this.wifiPasswordModal = false this.wifiPasswordModal = false
apiDevice.wifiConnect(ssid, password, () => {}) apiDevice.wifiConnect(ssid, password, () => {
setTimeout(() => {
// phone should be back in regular wifi
// search for device via mDNS
window.location = 'http://paperdash-display.local'
}, 3000)
})
}, },
}, },
} }

Write Preview
Loading…
Cancel
Save