Weather Config Pages Vue App in Paragraph

config-pages--weather-configuration--full.html.twig

{# 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/[email protected]/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>