Demo Weather Widgets - Vue
This is a sample custom element library that contains some simple weather related elements. This library contains the following custom elements:
- Simple
- csdemo-temperature - takes a temperature in Kelvin and displays the value in either Celsius or Fahrenheit
- csdemo-uv-index - takes a UV Index value and displays the value with a description and color coding
- csdemo-condition - given a mapping of condition types to image URLs and a condition code, determines which code to use and displays the image with a label
- Compound
- csdemo-daily-forecast - condition, date, low, high
Usage
npm i @ionic-enterprise/cs-demo-weather-widgets-vueHandling Icons
This library includes a set of images under node_modules/@ionic-enterprise/cs-demo-weather-widgets/dist/images. If you copy all of these images to public/assets/images they will be automatically loaded by the components that need them.
You are also free to use your own images, copy them to a different location, and/or name some of the images differently.
If you use a different location or name, you need to let the components know the proper paths or names through a mapping. For example:
const icons = {
sunny: 'alt-location/images/sunny.png',
cloudy: 'alt-location/images/cloudy.png',
lightRain: 'alt-location/images/light-rain.png',
shower: 'alt-location/images/shower.png',
sunnyThunderstorm: 'alt-location/images/sunny-tstorm.png',
thunderstorm: 'alt-location/images/tstorm.png',
fog: 'alt-location/images/fog.png',
snow: 'alt-location/images/snow.png',
unknown: 'alt-location/images/unknown.png',
};You can also use a partial mapping if only a couple of names have changed:
const icons = {
sunnyThunderstorm: 'assets/images/partial-tstorm.png',
unknown: 'assets/images/dunno.png',
};The overrides can be specified on any component that has a iconPaths property:
<csdemo-condition :condition="condition" :iconPaths="icons"></csdemo-condition>
<csdemo-daily-forecast :scale="scale" :forecast="forecast" :iconPaths="icons"></csdemo-daily-forecast>csdemo-temperature
Displays the temperature, supplied in Kelvin, in the specified scale (C or F).
<template>
<csdemo-temperature
:scale="scale"
:temperature="temperature"
@click="toggleScale"
></csdemo-temperature>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { CsdemoTemperature } from '@ionic-enterprise/cs-demo-weather-widgets-vue';
export default defineComponent({
name: 'SomePage',
components: { CsdemoTemperature },
setup() {
const scale = ref('F');
const temperature = ref(297);
const toggleScale = () => {
scale.value = scale.value === 'F' ? 'C' : 'F';
};
return { scale, temperature, toggleScale };
},
});
</script>csdemo-condition
Displays the current condition in both text and icon form. The condition is one of the condition codes used by OpenWeatherMap.org.
<template>
<csdemo-condition :condition="condition"></csdemo-condition>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { CsdemoCondition } from '@ionic-enterprise/cs-demo-weather-widgets-vue';
export default defineComponent({
name: 'SomePage',
components: { CsdemoCondition },
setup() {
const condition = ref(200);
return { condition };
},
});csdemo-uv-index
Displays the UV index along with a risk level, in a color appropriate for the level of risk.
<template>
<csdemo-uv-index :uvIndex="uvIndex"></csdemo-uv-index>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { CsdemoUvIndex } from '@ionic-enterprise/cs-demo-weather-widgets-vue';
export default defineComponent({
name: 'SomePage',
components: { CsdemoUvIndex },
setup() {
const uvIndex = ref(2.5);
return { uvIndex };
},
});csdemo-daily-forecast
Displays the forecast for a given day.
<template>
<csdemo-daily-forecast :scale="scale" :forecast="forecast"></csdemo-daily-forecast>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { CsdemoDailyForecast } from '@ionic-enterprise/cs-demo-weather-widgets-vue';
export default defineComponent({
name: 'SomePage',
components: { CsdemoDailyForecast },
setup() {
const forecasts = ref([ array-of-forecasts-for-day ]);
const scale = ref('F');
return { forecasts, scale };
},
});The forecast property is a forecast data object in the following format:
export interface Forecast {
date: Date;
condition: number;
low: number;
high: number;
}The low and high temperatures are specified in Kelvin.
The condition is one of the condition codes used by OpenWeatherMap.org.
Conclusion
That is it. We also have a demo application you can check out if you would like to.
Happy Coding!!