2020-11-21 01:12:08 +01:00
|
|
|
<template>
|
|
|
|
<div class="date-time-weather">
|
2020-11-22 12:57:28 +01:00
|
|
|
<div class="row date-time-container">
|
2020-11-26 00:26:10 +01:00
|
|
|
<DateTime :show-date="_showDate" :show-time="_showTime" :show-seconds="_showSeconds" :animate="animate"
|
2020-11-22 12:57:28 +01:00
|
|
|
v-if="_showDate || _showTime" />
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="row weather-container">
|
|
|
|
<Weather :show-summary="_showSummary" :animate="_animate" :icon-size="iconSize"
|
|
|
|
:refresh-seconds="weatherRefreshSeconds" v-if="showWeather"/>
|
|
|
|
</div>
|
2020-11-21 01:12:08 +01:00
|
|
|
|
2020-11-22 12:57:28 +01:00
|
|
|
<div class="row sensors-container">
|
|
|
|
<div class="row" v-if="_showSensors && Object.keys(sensors).length">
|
|
|
|
<div class="col-3">
|
|
|
|
<Sensor icon-class="fas fa-thermometer-half" :value="sensors.temperature" unit="°"
|
|
|
|
v-if="sensors.temperature != null" />
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="col-6"> </div>
|
|
|
|
|
|
|
|
<div class="col-3">
|
|
|
|
<Sensor icon-class="fas fa-tint" :value="sensors.humidity" unit="%"
|
|
|
|
v-if="sensors.humidity != null" />
|
|
|
|
</div>
|
2020-11-21 01:12:08 +01:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import Utils from "@/Utils";
|
2020-11-26 00:26:10 +01:00
|
|
|
import DateTime from "@/components/widgets/DateTime/Index";
|
|
|
|
import Weather from "@/components/widgets/Weather/Index";
|
2020-11-22 12:57:28 +01:00
|
|
|
import Sensor from "@/components/Sensor";
|
2020-11-21 01:12:08 +01:00
|
|
|
|
|
|
|
// Widget to show date, time, weather and temperature information
|
|
|
|
export default {
|
|
|
|
name: 'DateTimeWeather',
|
|
|
|
mixins: [Utils],
|
2020-11-22 12:57:28 +01:00
|
|
|
components: {Sensor, DateTime, Weather},
|
2020-11-21 01:12:08 +01:00
|
|
|
props: {
|
|
|
|
// If false then the weather icon will be animated.
|
|
|
|
// Otherwise, it will be a static image.
|
2020-11-22 12:57:28 +01:00
|
|
|
animate: {
|
2020-11-21 01:12:08 +01:00
|
|
|
required: false,
|
2020-11-26 00:26:10 +01:00
|
|
|
default: true,
|
2020-11-21 01:12:08 +01:00
|
|
|
},
|
|
|
|
|
2020-11-22 12:57:28 +01:00
|
|
|
// Size of the weather icon in pixels.
|
2020-11-21 01:12:08 +01:00
|
|
|
iconSize: {
|
|
|
|
type: Number,
|
|
|
|
required: false,
|
|
|
|
default: 50,
|
|
|
|
},
|
|
|
|
|
2020-11-22 12:57:28 +01:00
|
|
|
// If false then don't display the date.
|
|
|
|
showDate: {
|
|
|
|
required: false,
|
|
|
|
default: true,
|
2020-11-21 01:12:08 +01:00
|
|
|
},
|
|
|
|
|
2020-11-22 12:57:28 +01:00
|
|
|
// If false then don't display the time.
|
|
|
|
showTime: {
|
|
|
|
required: false,
|
|
|
|
default: true,
|
|
|
|
},
|
|
|
|
|
|
|
|
// If false then don't display the weather.
|
|
|
|
showWeather: {
|
|
|
|
required: false,
|
|
|
|
default: true,
|
|
|
|
},
|
|
|
|
|
|
|
|
// If false then the weather summary won't be displayed.
|
|
|
|
showSummary: {
|
|
|
|
required: false,
|
|
|
|
default: true,
|
|
|
|
},
|
|
|
|
|
|
|
|
// If false then temperature/humidity sensor data won't be shown.
|
|
|
|
showSensors: {
|
|
|
|
required: false,
|
|
|
|
default: true,
|
|
|
|
},
|
|
|
|
|
2020-11-26 00:26:10 +01:00
|
|
|
// If false then don't display the seconds.
|
|
|
|
showSeconds: {
|
|
|
|
required: false,
|
|
|
|
default: true,
|
|
|
|
},
|
|
|
|
|
2020-11-22 12:57:28 +01:00
|
|
|
// Name of the attribute on a received SensorDataChangeEvent that
|
|
|
|
// represents the temperature value to be rendered.
|
|
|
|
sensorTemperatureAttr: {
|
|
|
|
type: String,
|
|
|
|
required: false,
|
|
|
|
default: 'temperature',
|
|
|
|
},
|
|
|
|
|
|
|
|
// Name of the attribute on a received SensorDataChangeEvent that
|
|
|
|
// represents the humidity value to be rendered.
|
|
|
|
sensorHumidityAttr: {
|
|
|
|
type: String,
|
|
|
|
required: false,
|
|
|
|
default: 'humidity',
|
|
|
|
},
|
|
|
|
|
|
|
|
// Weather refresh interval in seconds.
|
|
|
|
weatherRefreshSeconds: {
|
|
|
|
type: Number,
|
|
|
|
required: false,
|
|
|
|
default: 900,
|
|
|
|
},
|
2020-11-21 01:12:08 +01:00
|
|
|
},
|
|
|
|
|
2020-11-22 12:57:28 +01:00
|
|
|
computed: {
|
|
|
|
_showDate() {
|
|
|
|
return this.parseBoolean(this.showDate)
|
2020-11-21 01:12:08 +01:00
|
|
|
},
|
|
|
|
|
2020-11-22 12:57:28 +01:00
|
|
|
_showTime() {
|
|
|
|
return this.parseBoolean(this.showTime)
|
2020-11-21 01:12:08 +01:00
|
|
|
},
|
|
|
|
|
2020-11-26 00:26:10 +01:00
|
|
|
_showSeconds() {
|
|
|
|
return this.parseBoolean(this.showSeconds)
|
|
|
|
},
|
|
|
|
|
2020-11-22 12:57:28 +01:00
|
|
|
_showWeather() {
|
|
|
|
return this.parseBoolean(this.showWeather)
|
2020-11-21 01:12:08 +01:00
|
|
|
},
|
|
|
|
|
2020-11-22 12:57:28 +01:00
|
|
|
_showSummary() {
|
|
|
|
return this.parseBoolean(this.showSummary)
|
2020-11-21 01:12:08 +01:00
|
|
|
},
|
|
|
|
|
2020-11-22 12:57:28 +01:00
|
|
|
_showSensors() {
|
|
|
|
return this.parseBoolean(this.showSensors)
|
|
|
|
},
|
2020-11-21 01:12:08 +01:00
|
|
|
|
2020-11-22 12:57:28 +01:00
|
|
|
_animate() {
|
|
|
|
return this.parseBoolean(this.animate)
|
2020-11-21 01:12:08 +01:00
|
|
|
},
|
2020-11-22 12:57:28 +01:00
|
|
|
},
|
|
|
|
|
|
|
|
data: function() {
|
|
|
|
return {
|
|
|
|
sensors: {},
|
|
|
|
};
|
|
|
|
},
|
2020-11-21 01:12:08 +01:00
|
|
|
|
2020-11-22 12:57:28 +01:00
|
|
|
methods: {
|
2020-11-21 01:12:08 +01:00
|
|
|
onSensorData(event) {
|
2020-11-22 12:57:28 +01:00
|
|
|
if (this.sensorTemperatureAttr in event.data)
|
2020-11-21 01:12:08 +01:00
|
|
|
this.sensors.temperature = event.data.temperature
|
|
|
|
|
2020-11-22 12:57:28 +01:00
|
|
|
if (this.sensorHumidityAttr in event.data)
|
|
|
|
this.sensors.humidity = event.data.humidity
|
2020-11-21 01:12:08 +01:00
|
|
|
},
|
|
|
|
},
|
|
|
|
|
2020-11-22 12:57:28 +01:00
|
|
|
mounted() {
|
2020-12-15 00:01:28 +01:00
|
|
|
this.subscribe(this.onSensorData, null, 'platypush.message.event.sensor.SensorDataChangeEvent');
|
2020-11-21 01:12:08 +01:00
|
|
|
},
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.date-time-weather {
|
|
|
|
height: 100%;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
align-items: center;
|
2022-03-28 13:10:58 +02:00
|
|
|
padding-top: 0.5em;
|
2020-11-21 01:12:08 +01:00
|
|
|
|
2020-11-22 12:57:28 +01:00
|
|
|
.row {
|
|
|
|
text-align: center;
|
2020-11-21 01:12:08 +01:00
|
|
|
}
|
|
|
|
|
2020-11-22 12:57:28 +01:00
|
|
|
.date-time-container {
|
2021-02-14 15:18:29 +01:00
|
|
|
height: 35%;
|
2020-11-21 01:12:08 +01:00
|
|
|
}
|
|
|
|
|
2020-11-22 12:57:28 +01:00
|
|
|
.weather-container {
|
2021-02-14 15:18:29 +01:00
|
|
|
height: 45%;
|
2020-11-21 01:12:08 +01:00
|
|
|
}
|
|
|
|
|
2020-11-22 12:57:28 +01:00
|
|
|
.sensors-container {
|
2020-11-21 01:12:08 +01:00
|
|
|
width: 100%;
|
2020-11-22 12:57:28 +01:00
|
|
|
height: 20%;
|
|
|
|
position: relative;
|
2020-11-21 01:12:08 +01:00
|
|
|
|
2020-11-22 12:57:28 +01:00
|
|
|
.row {
|
|
|
|
width: 100%;
|
|
|
|
position: absolute;
|
|
|
|
bottom: 0;
|
2020-11-21 01:12:08 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|