Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save bmx269/f020db888cedfd6a6eab09bf7bd0d8ce to your computer and use it in GitHub Desktop.
Save bmx269/f020db888cedfd6a6eab09bf7bd0d8ce to your computer and use it in GitHub Desktop.
Weather Config Pages Vue App in Paragraph
{# string wrapper is to prevent Twig processing the Vue vars #}
<div id="weatherForecast">
<div id="current-weather">
<div class="header">
<h4 class="underline-left">Current Conditions</h4>
<div class="temp-toggle">
<input type="radio" id="f-temp" value="F" v-model="tempF" class="toggle">
<label for="f-temp">ºF</label>
<input type="radio" id="c-temp" value="C" v-model="tempF" class="toggle">
<label for="c-temp">ºC</label>
</div>
</div>
<div class="current-weather" v-if="isLoaded" v-bind:class="{loaded : isLoaded}">
<div class="current-condition item">
<div v-if="iconOverride" class="value overridden">
<span :class="'condition condition--' + iconOverride"></span>
</div>
<div v-else class="value">
<span :class="'condition condition--' + weatherCondition.icon"></span>
</div>
<div v-if="weatherDescOverride" class="label overridden">
<span v-html="weatherDescOverride"></span>
</div>
<div v-else class="label">
<span v-html="weatherCondition.description"></span>
</div>
</div>
<div class="current-temp item">
<div v-if="tempF === 'F'" class="temp value fahrenheit">
<div v-if="tempOverride" class="overridden">
<span v-html="tempOverride"></span>ºF
</div>
<div v-else class="default">
<span v-html="snow.current.temp"></span>
</div>
</div>
<div v-else-if="tempF === 'C'" class="temp value celsius">
<div v-if="tempOverride" class="overridden">
{{" {{ Math.round((tempOverride - 32) * .5556) }}ºC "}}
</div>
<div v-else class="default">
{{" {{ Math.round((snow.current.temp.replace(RegExp('ºF', 'gi'), '') - 32) * .5556) }}ºC "}}
</div>
</div>
<div class="label">
Temperature
</div>
</div>
<div class="current-wind item">
<div v-if="windSpeedOverride" class="speed value overridden">
<div v-if="tempF === 'F'" class="imperial">
<span v-html="windSpeedOverride"></span>
</div>
<div v-else-if="tempF === 'C'" class="metric">
{{" {{ Math.round(windSpeedOverride.replace(RegExp('mph', 'gi'), '') * 1.609344) }} km/h "}}
</div>
</div>
<div v-else class="speed value default">
<div v-if="tempF === 'F'" class="imperial">
<span v-html="snow.current.wind.speed"></span>
</div>
<div v-else-if="tempF === 'C'" class="metric">
{{" {{ Math.round(snow.current.wind.speed.replace(RegExp('mph', 'gi'), '') * 1.609344) }} km/h "}}
</div>
</div>
<div class="label">
Wind
</div>
</div>
</div>
<div v-else>Loading...</div>
<div class="reported" v-if="isLoaded" v-bind:class="{loaded : isLoaded}">
<div v-if="weatherReportedOverride" class="overridden">
<span v-html="weatherReportedOverride"></span>
</div>
<div v-else class="default">
<span v-html="snow.current.location"></span> <span v-html="snow.name"></span> at {{" {{ moment(snow.current.updated_at).format('dddd MMM Do @ h:mm a') }} "}}
</div>
</div>
<div v-else></div>
</div>
<div id="forecast">
<div class="header">
<h4 class="underline-left">Forecasts</h4>
</div>
<div class="weather-forecasts" v-if="isLoaded" v-bind:class="{loaded : isLoaded}">
<div class="five-day">
<div class="headings">
<div class="heading date"></div>
<div class="heading">Snowfall</div>
<div class="heading"></div>
<div class="heading">Temperature</div>
<div class="heading">Snow Level</div>
<div class="heading">Wind Speed</div>
<div class="heading">Wind Gusts</div>
</div>
<div class="forecast-body">
<div class="daily-row" v-for="daily in snow.forecast.daily">
<div class="item date">
<div class="weekday">{{" {{ moment(daily.date).format('ddd') }} "}}</div>
<div class="month">{{" {{ moment(daily.date).format('M/D') }} "}}</div>
</div>
<div class="days-wrapper">
<div class="day">
<div class="item snow">
<span v-html="daily.day.snow"></span>
</div>
<div class="item icon">
<div class="condition" :data="daily.day.icon"></div>
</div>
<div v-if="tempF === 'F'" class="item temp fahrenheit">
<div v-if="daily.day.temp">
<span v-html="daily.day.temp"></span>
</div>
<div v-else></div>
</div>
<div v-else-if="tempF === 'C'" class="item temp celsius">
<div v-if="daily.day.temp">
{{ " {{ Math.round((daily.day.temp.replace(RegExp('ºF', 'gi'), '') - 32) * .5556) }}ºC "}}
</div>
<div v-else></div>
</div>
<div v-if="tempF === 'F'" class="item level imperial">
<div v-if="daily.day.snow_level">
<span v-html="daily.day.snow_level"></span>
</div>
<div v-else></div>
</div>
<div v-else-if="tempF === 'C'" class="item level metric">
<div v-if="daily.day.snow_level">
{{" {{ Math.round(daily.day.snow_level.replace(RegExp(',', 'gi'), '').replace(RegExp('ft', 'gi'), '') / 3.2808399) }}m "}}
</div>
<div v-else></div>
</div>
<div v-if="tempF === 'F'" class="item wind imperial">
<div v-if="daily.day.temp">
<span v-html="daily.day.wind.direction"></span> <span v-html="daily.day.wind.speed"></span>
</div>
<div v-else></div>
</div>
<div v-else-if="tempF === 'C'" class="item wind metric">
<div v-if="daily.day.temp">
<span v-html="daily.day.wind.direction"></span> {{" {{ Math.round(daily.day.wind.speed.replace(RegExp('mph', 'gi'), '') * 1.609344) }} km/h "}}
</div>
<div v-else></div>
</div>
<div v-if="tempF === 'F'" class="item gusts imperial">
<div v-if="daily.day.temp">
<span v-html="daily.day.wind.gust"></span>
</div>
<div v-else></div>
</div>
<div v-else-if="tempF === 'C'" class="item gusts metric">
<div v-if="daily.day.temp">
{{" {{ Math.round(daily.day.wind.gust.replace(RegExp('mph', 'gi'), '') * 1.609344) }} km/h "}}
</div>
<div v-else></div>
</div>
</div>
<div class="night">
<div class="item snow">
<span v-html="daily.night.snow"></span>
</div>
<div class="item icon">
<div class="condition" :data="daily.day.icon"></div>
</div>
<div v-if="tempF === 'F'" class="item temp fahrenheit">
<div v-if="daily.night.temp">
<span v-html="daily.night.temp"></span>
</div>
<div v-else></div>
</div>
<div v-else-if="tempF === 'C'" class="item temp celsius">
<div v-if="daily.night.temp">{{" {{ Math.round((daily.night.temp.replace(RegExp('ºF', 'gi'), '') - 32) * .5556) }}ºC "}}</div>
<div v-else></div>
</div>
<div v-if="tempF === 'F'" class="item level imperial">
<div v-if="daily.night.snow_level">
<span v-html="daily.night.snow_level"></span>
</div>
<div v-else></div>
</div>
<div v-else-if="tempF === 'C'" class="item level metric">
<div v-if="daily.night.snow_level">
{{" {{ Math.round(daily.night.snow_level.replace(RegExp(',', 'gi'), '').replace(RegExp('ft', 'gi'), '') / 3.2808399) }}m "}}
</div>
<div v-else></div>
</div>
<div v-if="tempF === 'F'" class="item wind imperial">
<div v-if="daily.night.temp">
<span v-html="daily.night.wind.direction"></span> <span v-html="daily.night.wind.speed"></span>
</div>
<div v-else></div>
</div>
<div v-else-if="tempF === 'C'" class="item wind metric">
<div v-if="daily.night.temp">
{{" {{ daily.night.wind.direction }} {{ Math.round(daily.night.wind.speed.replace(RegExp('mph', 'gi'), '') * 1.609344) }} km/h "}}
</div>
<div v-else></div>
</div>
<div v-if="tempF === 'F'" class="item gusts imperial">
<div v-if="daily.night.temp">
<span v-html="daily.night.wind.gust"></span>
</div>
<div v-else></div>
</div>
<div v-else-if="tempF === 'C'" class="item gusts metric">
<div v-if="daily.night.temp">
{{" {{ Math.round(daily.night.wind.gust.replace(RegExp('mph', 'gi'), '') * 1.609344) }} km/h "}}
</div>
<div v-else></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div v-else></div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.24.0/moment.min.js"></script>
<script>
"use strict";
var weatherForecastApp = new Vue({
el: '#weatherForecast',
data: function data() {
return {
snow: [],
weather: [],
forecastToday: [],
weatherCondition: [],
isLoaded: false,
tempF: 'F',
tempOverride: '{{ content.field_temp_f|field_value }}',
iconOverride: '{{ content.field_weather_icon|field_value }}',
weatherDescOverride: '{{ content.field_weather_description|field_value }}',
windSpeedOverride: '{{ content.field_wind_speed|field_value }}',
weatherReportedOverride: '{{ content.field_reported_details|field_value }}'
};
},
methods: {
moment: function (_moment) {
function moment() {
return _moment.apply(this, arguments);
}
moment.toString = function () {
return _moment.toString();
};
return moment;
}(function () {
moment.updateLocale('en', {
invalidDate: ''
});
return moment.apply(void 0, arguments);
}),
getSnow: function getSnow() {
var _this = this;
var url = '{{ content.field_api_url|field_value }}';
axios.get(url, {
method: 'get',
responseType: 'json'
}).then(function (resp) {
_this.snow = resp.data[0];
_this.forecastToday = _this.snow.forecast.daily[0];
_this.isLoaded = true;
}).catch(function (err) {
console.log(err);
_this.errored = true;
});
},
getOpenWeather: function getOpenWeather() {
var _this2 = this;
var url = '/sites/default/files/feeds/open-weather.json';
axios.get(url, {
method: 'get',
responseType: 'json'
}).then(function (weatherResp) {
_this2.weather = weatherResp.data;
_this2.weatherCondition = _this2.weather.weather[0];
}).catch(function (err) {
console.log(err);
_this2.errored = true;
});
}
},
mounted: function mounted() {
this.getSnow();
this.getOpenWeather();
}
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment