79 lines
1.6 KiB
Vue
79 lines
1.6 KiB
Vue
<template lang="pug">
|
|
.weather(:class="{ selected }" @click.stop.prevent="$emit('select')")
|
|
.main(v-for="main in city.weather")
|
|
p {{ main.description }}
|
|
.ic
|
|
img(:src="`https://openweathermap.org/img/w/${main.icon}.png`" :alt="main.main")
|
|
span.remove(@click.stop.prevent="$emit('remove')") ❌
|
|
.header
|
|
| {{ city.name }}
|
|
img.icon(:src="`https://openweathermap.org/images/flags/${city.sys.country.toLowerCase()}.png`" :alt="city.sys.country" :title="city.sys.country")
|
|
.data
|
|
| {{ city.main.temp }}°C ─ {{ city.main.humidity }}%
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Prop, Vue } from 'vue-property-decorator'
|
|
|
|
export interface IWeather {
|
|
id: number
|
|
main: {
|
|
temp: number
|
|
humidity: number
|
|
}
|
|
weather: Array<{
|
|
description: string
|
|
icon: string
|
|
main: string
|
|
}>
|
|
name: string
|
|
sys: {
|
|
country: string
|
|
}
|
|
}
|
|
|
|
@Component
|
|
export default class Weather extends Vue {
|
|
|
|
@Prop(Object)
|
|
readonly city!: IWeather
|
|
|
|
@Prop(Boolean)
|
|
readonly selected!: boolean
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="sass">
|
|
@import '../../common.sass'
|
|
|
|
.weather
|
|
min-width: 17em
|
|
border: 1px solid $tileColor
|
|
display: grid
|
|
grid-template-columns: auto auto
|
|
grid-template-rows: 1.2em auto
|
|
grid-template-areas: "header main" "data remove"
|
|
&.selected
|
|
border-color: $halfColor
|
|
.header
|
|
grid-area: header
|
|
font-size: 1.2em
|
|
.data
|
|
grid-area: data
|
|
margin-top: .5em
|
|
.main
|
|
grid-area: main
|
|
justify-self: right
|
|
p
|
|
margin: $borderRadius
|
|
display: inline
|
|
vertical-align: top
|
|
.remove
|
|
grid-area: remove
|
|
justify-self: right
|
|
align-self: end
|
|
font-size: .8em
|
|
</style>
|
|
|