Zipline: Show the Local Weather

index.html

<div class="container text-center">
  <h3 class="text-primary">WeatherMe</h3>
  <hr>
  <div id="local-weather-wrapper"> Please enable your Location/GPS sensor and refresh this page. It is required to gather Weather information. Thanks!</div>
  <hr>
  <br>
  <br>
  <p>This is a front-end project from FreeCodeCamp built with Backbone.js, http://openweathermap.org, and HTML5 Geolocation</p>
</div>

<script type="text/template" id="local-weather-app">
  <button class="btn btn-primary" id="toggleTemp" unit='metric'></button>
  <button class="btn btn-primary" id="refreshData">Refresh</button>
  <div id="local-weather-content-wrapper"></div>
</script>

<script type="text/template" id="btnToggleUnit">
  View on <%= unitName %>
</script>
  
<script type="text/template" id="tempWrapperContent">
  <h1><img src="http://openweathermap.org/img/w/<%= weatherIcon %>.png"/><%= mainTemp %> <%= unitIcon %></h1>
  <b>Min:</b> <%= minTemp %> <%= unitIcon %> - <b>Max:</b> <%= maxTemp %> <%= unitIcon %>
</script>

<script type="text/template" id="local-weather-content">
  <div id="tempWrapper"></div>
  <br>
  <%= weatherLocation %>, <%= country %> | <%= weatherTitle %> - <%= weatherDesc %>
  <br>
  <br>
    <h3>Detail</h3>
    <ul class="list-unstyled">
      <li>
        <b>Atmospheric Pressure:</b> <%= mainPressure %> hPa
      </li>
      <li>
        <b>Humidity:</b> <%= humidity %>%
      </li>
      <li>
        <b>Cloudiness:</b> <%= cloudiness %>%
      </li>
      <li>
        <b>Wind Speed:</b> <%= windSpeed %> m/sec
      </li>
      <li>
        <b>Wind Direction:</b> <%= windDirection %> &#176;
      </li>
      <li>
        <b>Sunrise time:</b> <%= sunriseTime %>
      </li>
      <li>
        <b>Sunset time:</b> <%= sunsetTime %>
      </li>
    </ul>
    <br>
    <br>
    <i>Updated on <%= timeDataCalc %></i>
</script>

script.js

/*
NOTE:
seems like navigator.geolocation is loading last.
check out this article for initializing a backbone.js app
- http://rjzaworski.com/2012/12/initializing-backbone-applications
- https://cdnjs.com/libraries/backbone.js/tutorials/organizing-backbone-using-modules
- http://codebeerstartups.com/2012/12/11-namespacing-in-backbone-js-learning-backbonejs/
First issue i came across was how these objects where loaded,
thats when i figure how navigator.geolocation values arent being passed to url 
Then, i came across with passing these values to url parameter via fetch/jquery ajax
*/

console.log('0 outside');

var vent = _.extend({}, Backbone.Events);
  
var currentWeather = Backbone.Model.extend({
  url: function() {
    console.log('3 model url req');
    return 'http://api.openweathermap.org/data/2.5/weather?units=imperial&lat=&lon=';
  }
});

var btnToggleUnit = Backbone.View.extend({
  el: '#toggleTemp',
  template: _.template( $('#btnToggleUnit').html() ),
  initialize: function() {
    // initial set values
    this.unitName = 'Celsius';
    this.$el.html( this.template({ unitName: this.unitName }) );
    this.flagToggle = this.$el.attr('unit');
  },
  events: {
    'click': 'toggleTemp'
  },
  updateView: function() {
    this.$el.html( this.template({ unitName: this.unitName }) );
  },
  toggleTemp: function(e) {
    e.preventDefault();
    
    if (this.flagToggle === 'metric') {
      this.flagToggle = 'imperial';
      this.$el.attr('unit', this.flagToggle);
      this.unitName = 'Farenheit';
      this.cIcon = '℃';
      vent.trigger("convertTemp", { unitFlag: this.flagToggle, unitIcon: this.cIcon });
    } else {
      this.flagToggle = 'metric';
      this.$el.attr('unit', this.flagToggle);
      this.unitName = 'Celsius';
      this.fIcon = '℉';
      vent.trigger("convertTemp", { unitFlag: this.flagToggle, unitIcon: this.fIcon });
    }
    
    this.updateView();
    /*var defaultUnit = 'imperial',
        metricUnit = 'metric',
        url = this.model.url(),
        tempMetric = url.match(/units=(.*)&lat/)[1];*/
  }
});

var appCurrentWeather = Backbone.View.extend({
  el: '#local-weather-wrapper',
  template: _.template( $('#local-weather-app').html() ),
  model: new currentWeather(),
  initialize: function(options) {
    /*
    NOTE:
    http://ianstormtaylor.com/break-apart-your-backbonejs-render-methods/
    http://stackoverflow.com/questions/26046474/celsius-and-fahrenheit-converter-javascript
    */
    // values
    this.geoloc = options.geoloc;
    //this.unitIcon = '℃';
    
    console.log('1 app wrapper');
    this.render();
  },
  render: function() {
    // render parent view template
    this.$el.html( this.template );
    
    this.loadToggleUnitBtn = new btnToggleUnit();
    
    // load displayWeather view
    this.displayWeather = new displayCurrentWeather({coords: this.geoloc, model: this.model });
  },
  events: {
    'click #refreshData': 'refreshData'
  },
  refreshData: function() {
    this.displayWeather.remove();
    this.render();
  }
});

/*
Note on triggering this view from another view
http://stackoverflow.com/questions/9984859/backbone-js-can-one-view-trigger-updates-in-other-views
*/
var mainTempView = Backbone.View.extend({
  el: '#tempWrapper',
  template: _.template( $('#tempWrapperContent').html() ),
  initialize: function() {
    this.$el.html( this.template(this.model) );
  }
});

var displayCurrentWeather = Backbone.View.extend({
  el: '#local-weather-content-wrapper',
  template: _.template( $('#local-weather-content').html() ),
  initialize: function(options) {
    this.lat = options.coords.lat;
    this.lon = options.coords.lon;
    console.log('2 display view');
    vent.bind('convertTemp', this.convertTemp, this);
    /* 
      NOTE:
      http://stackoverflow.com/questions/6659283/backbone-js-fetch-with-parameters
    */
    this.model.fetch(
      { data: $.param({ 
        lat: this.lat,
        lon: this.lon
       })
    });
    this.listenTo(this.model, 'sync', this.render);
  },
  render: function() {
    console.log('4 render view');
    // we'll end up breaking up this render function
    var m = this.model.attributes,
        data = {
          weatherLocation: m.name,
          weatherTitle: m.weather[0].main,
          weatherDesc: m.weather[0].description,
          mainPressure: m.main.pressure,
          humidity: m.main.humidity,
          windSpeed: m.wind.speed,
          windDirection: m.wind.deg,
          cloudiness: m.clouds.all,
          country: m.sys.country,
          timeDataCalc: this.formatDate(m.dt),
          sunriseTime: this.formatDate(m.sys.sunrise),
          sunsetTime: this.formatDate(m.sys.sunset)
        },
        tempData = {
          weatherIcon: m.weather[0].icon,
          unitIcon: '℉',
          mainTemp: m.main.temp,
          minTemp: m.main.temp_min,
          maxTemp: m.main.temp_max
        }
    this.$el.html( this.template( data ) );
    this.renderMainTempTpl = new mainTempView({ model: tempData });
  },
  convertTemp: function(arg) {
    var m = vent._events.convertTemp[0].context.model.toJSON(),
        tempData = {
          weatherIcon: m.weather[0].icon,
          mainTemp: m.main.temp,
          minTemp: m.main.temp_min,
          maxTemp: m.main.temp_max
        };
    
    if (arg.unitFlag === 'imperial') {
      console.log('cnvert to celsius');
      // formula to convert f to c: Math.round((f.value - 32) * 5 / 9)
      var tempCelsius = {
        weatherIcon: m.weather[0].icon,
        unitIcon: arg.unitIcon,
        mainTemp: Math.round((m.main.temp - 32) * 5 / 9),
        minTemp: Math.round((m.main.temp_min - 32) * 5 / 9),
        maxTemp: Math.round((m.main.temp_max - 32) * 5 / 9)
      }
      var renderTempC = new mainTempView({ model: tempCelsius });
    } else {
      console.log('convert to farenheit');
      // formula to convert f to c: Math.round(c.value * 9 / 5 + 32);
      var tempF = {
        weatherIcon: m.weather[0].icon,
        unitIcon: arg.unitIcon,
        mainTemp: Math.round((m.main.temp - 32) * 9 / 5 + 32),
        minTemp: Math.round((m.main.temp_min - 32) * 9 / 5 + 32),
        maxTemp: Math.round((m.main.temp_max - 32) * 9 / 5 + 32)
      }
      var renderMainTempTpls = new mainTempView({ model: tempF });
    }
  },
  formatDate: function(ut) {
    var unixTime = new Date(ut*1000);
    var formatDateTime = (unixTime.getMonth() + 1) + '/' + unixTime.getDate() + '/' + unixTime.getFullYear() + ' - ' + unixTime.getHours() + ':' + unixTime.getMinutes();
    
    return formatDateTime;
  }
});

navigator.geolocation.getCurrentPosition(function(position){
  var coords = {
    lat: position.coords.latitude,
    lon: position.coords.longitude
  }
  var ac = new appCurrentWeather({ geoloc: coords });
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>

style.css

@import url(https://fonts.googleapis.com/css?family=Cantarell);

body {
  font-family: 'Cantarell', sans-serif;
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

Zipline: Show the Local Weather.markdown

Zipline: Show the Local Weather

A Pen by rlynjb on CodePen.

License.