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

autocomplete for weather location search #23

Browse Source
pull/1/head
Thomas Ballmann 4 years ago
parent d45c978b61
commit 54ed1b27fd
2 changed files with 352 additions and 209 deletions
Show Stats Download Patch File Download Diff File

107
app/src/components/WeatherFindLocation.vue
Unescape Escape View File

@ -0,0 +1,107 @@
<template>
<v-autocomplete
:disabled="!api"
v-model="model"
:items="entries"
:loading="isLoading"
:search-input.sync="search"
hide-no-data
hide-selected
item-text="name"
item-value="id"
label="i8n:Location"
placeholder="i8n:Start typing to Search"
_return-object
>
<template v-slot:item="{ item }">
<v-list-item two-line class="pa-0">
<v-list-item-icon class="ma-0">
<img width="64" :src="getConditionIcon(item.weather[0].icon)" />
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>
{{ item.name }}, {{ item.sys.country }}
<img :src="getCountryFlag(item.sys.country)" />
<strong>{{ item.weather[0].description }}</strong>
</v-list-item-title>
<v-list-item-subtitle>
<v-chip class="font-weight-bold" small>{{ item.main.temp }}°С</v-chip>
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-list-item></v-list-item>
</template>
</v-autocomplete>
</template>
<script>
export default {
props: {
location: {
type: Number,
required: true
},
api: {
type: String,
required: true
},
lang: {
type: String,
required: true
},
unit: {
type: String,
required: true
}
},
data: () => ({
entries: [],
isLoading: false,
model: null,
search: null
}),
watch: {
model(val) {
this.$emit("update:location", val);
},
search(val) {
if (!val || val.length < 3) return;
// Items have already been requested
if (this.isLoading) return;
this.isLoading = true;
// search
let url = "https://api.openweathermap.org/data/2.5/find?appid=";
url += this.api;
url += "&lang=" + this.lang;
url += "&units=" + this.unit;
url += "&type=like&sort=population&cnt=10";
url += "&q=" + val;
fetch(url)
.then(res => res.json())
.then(res => {
this.count = res.count;
this.entries = res.list;
})
.catch(err => {
console.log(err);
})
.finally(() => (this.isLoading = false));
}
},
methods: {
getCountryFlag(code) {
return (
"http://openweathermap.org/images/flags/" + code.toLowerCase() + ".png"
);
},
getConditionIcon(code) {
return "http://openweathermap.org/img/wn/" + code + "@2x.png";
}
}
};
</script>

176
app/src/views/Settings.vue
Unescape Escape View File

@ -7,26 +7,28 @@
</template> </template>
<v-container> <v-container>
<v-snackbar <v-snackbar v-model="isSnackbar" :timeout="3000" color="success">i8n:saved</v-snackbar>
v-model="isSnackbar"
:timeout="3000"
color="success"
>
i8n:saved
</v-snackbar>
<v-tabs v-model="tab" centered icons-and-text> <v-tabs v-model="tab" centered icons-and-text>
<v-tab>Device <v-icon>$tv</v-icon></v-tab> <v-tab>
<v-tab>Playlist <v-icon>$playlist</v-icon></v-tab> Device
<v-tab>Weather <v-icon>$wb_sunny</v-icon></v-tab> <v-icon>$tv</v-icon>
<v-tab>Cloud <v-icon>$cloud</v-icon></v-tab> </v-tab>
<v-tab>
Playlist
<v-icon>$playlist</v-icon>
</v-tab>
<v-tab>
Weather
<v-icon>$wb_sunny</v-icon>
</v-tab>
<v-tab>
Cloud
<v-icon>$cloud</v-icon>
</v-tab>
</v-tabs> </v-tabs>
<v-card <v-card v-if="settings" class="mx-auto" width="400">
v-if="settings"
class="mx-auto"
width="400"
>
<v-tabs-items v-model="tab"> <v-tabs-items v-model="tab">
<v-tab-item> <v-tab-item>
<v-card-text> <v-card-text>
@ -34,14 +36,14 @@
:items="deviceOrientation" :items="deviceOrientation"
v-model="settings.device.angle" v-model="settings.device.angle"
label="i8n:Orientation" label="i8n:Orientation"
placeholder="" placeholder
></v-select> ></v-select>
<v-select <v-select
:items="deviceTheme" :items="deviceTheme"
v-model="settings.device.theme" v-model="settings.device.theme"
label="i8n:Theme" label="i8n:Theme"
placeholder="" placeholder
></v-select> ></v-select>
</v-card-text> </v-card-text>
</v-tab-item> </v-tab-item>
@ -49,8 +51,8 @@
<v-card-text class="pb-0"> <v-card-text class="pb-0">
<v-row> <v-row>
<v-col cols="3" class="text-center mt-2 pb-0"> <v-col cols="3" class="text-center mt-2 pb-0">
<v-icon>$wb_sunny</v-icon><br/> <v-icon>$wb_sunny</v-icon>
Forecast <br />Forecast
</v-col> </v-col>
<v-col cols="6" class="text-center pb-0"> <v-col cols="6" class="text-center pb-0">
<v-text-field <v-text-field
@ -65,8 +67,8 @@
></v-text-field> ></v-text-field>
</v-col> </v-col>
<v-col cols="3" class="text-center mt-2 pb-0"> <v-col cols="3" class="text-center mt-2 pb-0">
<v-icon>$calendar_today</v-icon><br/> <v-icon>$calendar_today</v-icon>
Calendar <br />Calendar
</v-col> </v-col>
</v-row> </v-row>
@ -84,22 +86,25 @@
v-model="settings.weather.api" v-model="settings.weather.api"
placeholder="###" placeholder="###"
></v-text-field> ></v-text-field>
<v-text-field
label="i8n:Location" <weather-find-location
v-model="settings.weather.location" :api="settings.weather.api"
placeholder="" :location.sync="settings.weather.location"
></v-text-field> :lang="settings.weather.lang"
:unit="settings.weather.unit"
></weather-find-location>
<v-select <v-select
:items="weatherLang" :items="weatherLang"
v-model="settings.weather.lang" v-model="settings.weather.lang"
label="i8n:Lang" label="i8n:Lang"
placeholder="" placeholder
></v-select> ></v-select>
<v-select <v-select
:items="weatherUnit" :items="weatherUnit"
v-model="settings.weather.unit" v-model="settings.weather.unit"
label="i8n:Units" label="i8n:Units"
placeholder="" placeholder
></v-select> ></v-select>
</v-card-text> </v-card-text>
</v-tab-item> </v-tab-item>
@ -109,7 +114,7 @@
:items="deviceMode" :items="deviceMode"
v-model="settings.cloud.mode" v-model="settings.cloud.mode"
label="i8n:Device mode" label="i8n:Device mode"
placeholder="" placeholder
></v-select> ></v-select>
<v-text-field <v-text-field
@ -130,13 +135,7 @@
<v-card-actions> <v-card-actions>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn <v-btn text color="primary" @click="onSave()">i8n:Save</v-btn>
text
color="primary"
@click="onSave()"
>
i8n:Save
</v-btn>
</v-card-actions> </v-card-actions>
</v-card> </v-card>
</v-container> </v-container>
@ -144,10 +143,14 @@
</template> </template>
<script> <script>
import apiDevice from '../api/device' import apiDevice from "../api/device";
import weatherFindLocation from "./../components/WeatherFindLocation";
export default { export default {
name: "Settings", name: "Settings",
components: {
weatherFindLocation
},
data: () => ({ data: () => ({
isLoading: true, isLoading: true,
isSnackbar: false, isSnackbar: false,
@ -157,59 +160,92 @@
// 0 thru 3 corresponding to 4 cardinal rotations // 0 thru 3 corresponding to 4 cardinal rotations
deviceOrientation: [ deviceOrientation: [
{text: 'Nord', value: 0}, { text: "Nord", value: 0 },
{text: 'East', value: 1}, { text: "East", value: 1 },
{text: 'South', value: 2}, { text: "South", value: 2 },
{text: 'West', value: 3}, { text: "West", value: 3 }
], ],
deviceTheme: [ deviceTheme: [
{text: 'Black', value: 'black'}, { text: "Black", value: "black" },
{text: 'White', value: 'white'}, { text: "White", value: "white" }
], ],
deviceMode: [ deviceMode: [
{text: 'Active', value: 'active'}, { text: "Active", value: "active" },
{text: 'Passive', value: 'passive'} { text: "Passive", value: "passive" }
], ],
// @see https://openweathermap.org/current#multi // @see https://openweathermap.org/current#multi
weatherLang: [ weatherLang: [
{text: 'Deutsch', value: 'de'}, { text: "English", value: "en" },
{text: 'English', value: 'en'} { text: "Deutsch", value: "de" }
], ],
weatherUnit: [ weatherUnit: [
{text: 'Metrisch', value: 'metric'}, { text: "Imperial", value: "" },
{text: 'Imperial', value: ''} { text: "Metrisch", value: "metric" }
], ]
}), }),
created() { created() {
this.$vuetify.icons.values.tv = {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/tv/baseline.svg')} this.$vuetify.icons.values.tv = {
this.$vuetify.icons.values.playlist = {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/live_tv/baseline.svg')} // slideshow | playlist_play | live_tv | queue_play_next component: () =>
this.$vuetify.icons.values.keys = {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/insert_link/baseline.svg')} import(
this.$vuetify.icons.values.cloud = {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/cloud/baseline.svg')} /* webpackChunkName: "icons" */ "!vue-svg-loader!@material-icons/svg/svg/tv/baseline.svg"
this.$vuetify.icons.values.calendar_today = {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/calendar_today/baseline.svg')} )
this.$vuetify.icons.values.wb_sunny = {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/wb_sunny/baseline.svg')} };
this.$vuetify.icons.values.update = {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/update/baseline.svg')} this.$vuetify.icons.values.playlist = {
component: () =>
import(
/* webpackChunkName: "icons" */ "!vue-svg-loader!@material-icons/svg/svg/live_tv/baseline.svg"
)
}; // slideshow | playlist_play | live_tv | queue_play_next
this.$vuetify.icons.values.keys = {
component: () =>
import(
/* webpackChunkName: "icons" */ "!vue-svg-loader!@material-icons/svg/svg/insert_link/baseline.svg"
)
};
this.$vuetify.icons.values.cloud = {
component: () =>
import(
/* webpackChunkName: "icons" */ "!vue-svg-loader!@material-icons/svg/svg/cloud/baseline.svg"
)
};
this.$vuetify.icons.values.calendar_today = {
component: () =>
import(
/* webpackChunkName: "icons" */ "!vue-svg-loader!@material-icons/svg/svg/calendar_today/baseline.svg"
)
};
this.$vuetify.icons.values.wb_sunny = {
component: () =>
import(
/* webpackChunkName: "icons" */ "!vue-svg-loader!@material-icons/svg/svg/wb_sunny/baseline.svg"
)
};
this.$vuetify.icons.values.update = {
component: () =>
import(
/* webpackChunkName: "icons" */ "!vue-svg-loader!@material-icons/svg/svg/update/baseline.svg"
)
};
apiDevice.getSettings(settings => { apiDevice.getSettings(settings => {
this.settings = settings this.settings = settings;
this.isLoading = false this.isLoading = false;
}) });
}, },
methods: { methods: {
onSave() { onSave() {
this.isLoading = true this.isLoading = true;
apiDevice.putSettings(this.settings, (data) => { apiDevice.putSettings(this.settings, data => {
console.log(data) console.log(data);
this.isLoading = false this.isLoading = false;
this.isSnackbar = true this.isSnackbar = true;
}) });
}
} }
} }
};
</script> </script>
<style scoped> <style scoped>

Write Preview
Loading…
Cancel
Save