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

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

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

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

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

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

@ -1,171 +1,170 @@
<template>
<div class="pa-5">
<v-card
flat
>
<v-card-title class="display-2 mb-12 justify-center text-center">
System info
</v-card-title>
<v-card
flat
rounded="lg"
>
<v-card-title class="display-2 mb-12 justify-center text-center">
System info
</v-card-title>
<v-list-item>
<v-list-item-icon class="mr-3">
<v-icon>$info</v-icon>
</v-list-item-icon>
<v-list-item>
<v-list-item-icon class="mr-3">
<v-icon>$info</v-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-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-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-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-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 three-line>
<v-list-item-content>
<v-list-item-title>Storage</v-list-item-title>
</v-list-item-content>
<v-list-item-avatar>
<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-title>App</v-list-item-title>
<v-list-item-subtitle class="text--disabled">
Rev: {{ stats.app.rev }}
</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">
{{ fs.free | prettyBytes }}
<v-list-item-subtitle class="text--disabled">
Build: {{ new Date(stats.app.created * 1000).toLocaleString() }}
</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-avatar>
<v-progress-circular
:rotate="-90"
:value="memoryUsage"
class="caption"
>
{{ memoryUsage }}
</v-progress-circular>
</v-list-item-avatar>
</v-list-item>
</v-list>
<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 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-title>Storage</v-list-item-title>
</v-list-item-content>
<v-list-item-avatar>
<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>
<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-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>
</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-divider class="mt-12" />
<v-card-actions>
<v-btn
depressed
disabled
<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-avatar>
<v-progress-circular
:rotate="-90"
:value="memoryUsage"
class="caption"
>
factory reset
</v-btn>
</v-card-actions>
</v-card>
</div>
{{ memoryUsage }}
</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">
{{ 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>
<script>

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

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

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

@ -1,136 +1,136 @@
<template>
<div class="pa-5">
<v-card
flat
>
<v-card-title class="display-2 mb-12 justify-center text-center">
Wifi settings
</v-card-title>
<v-list>
<template v-if="stats.wifi.connected">
<v-list-item
class="px-1"
>
<v-list-item-icon class="mr-2 ml-2">
<v-card
flat
rounded="lg"
>
<v-card-title class="display-2 mb-12 justify-center text-center">
Wifi settings
</v-card-title>
<v-list>
<template v-if="stats.wifi.connected">
<v-list-item
class="px-1"
>
<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>
$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
$info
</v-icon>
<v-icon class="mx-2">
{{ stats.wifi.rssi | wifiIcon(0) }}
</v-icon>
<v-btn
icon
disabled
>
<v-icon>
$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>
</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
<template v-if="!isLoading">
<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-if="wifi.ssid !== settings.system.wifi"
:key="i"
<v-divider v-if="i > 0" />
<v-list-item
class="px-1"
@click="onWifiSelect(wifi)"
>
<v-divider v-if="i > 0" />
<v-list-item
class="px-1"
@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-list-item-icon class="mr-2 ml-2">
<v-icon v-if="wifi.ssid === settings.system.wifi">
$check
</v-icon>
<v-skeleton-loader
v-else
type="list-item-two-line,list-item-two-line,list-item-two-line"
/>
<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-divider />
<v-skeleton-loader
v-else
type="list-item-two-line,list-item-two-line,list-item-two-line"
/>
<v-btn
text
color="primary"
class="_px-0 my-2"
disabled
>
Choose Another Network
</v-btn>
</v-list>
<v-divider />
<v-dialog
v-model="wifiPasswordModal"
max-width="450"
<v-btn
text
color="primary"
class="_px-0 my-2"
disabled
>
<setup-wifi-connect
:ssid="connectSSID"
:on-connect="onWifiConnect"
@cancel="wifiPasswordModal = false"
/>
</v-dialog>
</v-card>
</div>
Choose Another Network
</v-btn>
</v-list>
<v-dialog
v-model="wifiPasswordModal"
max-width="450"
_:fullscreen="$vuetify.breakpoint.mobile"
>
<setup-wifi-connect
:ssid="connectSSID"
:on-connect="onWifiConnect"
@cancel="wifiPasswordModal = false"
/>
</v-dialog>
</v-card>
</template>
<script>
@ -174,7 +174,13 @@
this.connectingSSID = ssid
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