Merge pull request #18 from IanCStewart/develop

Develop
IanCStewart · Feb 16, 2017 · cc83d01 · cc83d01
2 parents 8e14ab8 + 53442d7
commit cc83d01
Show file tree

Hide file tree

Showing 21 changed files with 573 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -12,5 +12,6 @@ build
 # misc
 .DS_Store
 .env
+.atom-live-server.json
 npm-debug.log
 settings.json
diff --git a/README.md b/README.md
@@ -17,3 +17,16 @@ In the first week we will have the following exercises:
 4. [Refactor CMDAan geo script code](https://github.com/IanCStewart/minor-wafs/blob/develop/assignment4/geo-script.js)
 5. [Set-up basic structure single page web app](https://iancstewart.github.io/wafs/)
 6. Code Review classmates [review 1](https://github.com/rijkvanzanten/minor-wafs/issues/3#event-953969125) [review 2](https://github.com/TuriGuilano/WAFS/issues/2)
+
+## Week 2
+In the second week we will have the following exercises:
+- [x] Get data with AJAX (ended up using aja.js)
+- [x] Implement Routing (ended up using vannilla-js)
+- [x] Implement Templating engine (ended up using Handlebar.js)
+- [x] Manipulate data (map, filter, reduce)
+- [x] Code Review classmates
+- [ ] Implement Web Worker (extra)
+
+#### Links to assignments
+- [Web app](https://github.com/IanCStewart/minor-wafs)
+- Code Review classmates [review 1](https://github.com/rijkvanzanten/minor-wafs/pull/7)
diff --git a/assignment2/jquery-pros-cons.md → week1/assignment2/jquery-pros-cons.md b/assignment2/jquery-pros-cons.md → week1/assignment2/jquery-pros-cons.md
diff --git a/assignment3/spa-pros-cons.md → week1/assignment3/spa-pros-cons.md b/assignment3/spa-pros-cons.md → week1/assignment3/spa-pros-cons.md
diff --git a/assignment4/geo-script.js → week1/assignment4/geo-script.js b/assignment4/geo-script.js → week1/assignment4/geo-script.js
diff --git a/assignment5/assets/fonts/Lato/Lato-Bold.ttf → ...signment5/assets/fonts/Lato/Lato-Bold.ttf b/assignment5/assets/fonts/Lato/Lato-Bold.ttf → ...signment5/assets/fonts/Lato/Lato-Bold.ttf
diff --git a/assignment5/assets/fonts/Lato/Lato-Light.ttf → ...ignment5/assets/fonts/Lato/Lato-Light.ttf b/assignment5/assets/fonts/Lato/Lato-Light.ttf → ...ignment5/assets/fonts/Lato/Lato-Light.ttf
diff --git a/...nment5/assets/fonts/Lato/Lato-Regular.ttf → ...nment5/assets/fonts/Lato/Lato-Regular.ttf b/...nment5/assets/fonts/Lato/Lato-Regular.ttf → ...nment5/assets/fonts/Lato/Lato-Regular.ttf
diff --git a/assignment5/index.html → week1/assignment5/index.html b/assignment5/index.html → week1/assignment5/index.html
diff --git a/assignment5/static/app.js → week1/assignment5/static/app.js b/assignment5/static/app.js → week1/assignment5/static/app.js
diff --git a/assignment5/static/style.css → week1/assignment5/static/style.css b/assignment5/static/style.css → week1/assignment5/static/style.css
diff --git a/week2/index.html b/week2/index.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>WAFS // Week 2</title>
+  <link rel="stylesheet" href="./static/styles.css">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.min.js" charset="utf-8" defer></script>
+  <script src="./static/aja/aja.min.js" charset="utf-8" defer></script>
+  <script src="./static/app.js" charset="utf-8" defer></script>
+</head>
+<body>
+  <main>
+    <nav>
+      <h1>Weather api</h1>
+      <a href="#current">current</a>
+      <a href="#hourly">hourly</a>
+    </nav>
+    <section id="current"></section>
+    <section id="hourly">
+      <div class="filter-station">
+        <label class="label"><input type="checkbox" name="Clear"><img src="http://icons.wxug.com/i/c/v4/clear.svg" alt="Clear"></label>
+        <label class="label"><input type="checkbox" name="Overcast"><img src="http://icons.wxug.com/i/c/v4/cloudy.svg" alt="Overcast"></label>
+        <label class="label"><input type="checkbox" name="Partly Cloudy"><img src="http://icons.wxug.com/i/c/v4/mostlysunny.svg" alt="Partly Cloudy"></label>
+        <label class="label"><input type="checkbox" name="Fog"><img src="http://icons.wxug.com/i/c/v4/hazy.svg" alt="Fog"></label>
+        <label class="label"><input type="checkbox" name="Chance of Rain"><img src="http://icons.wxug.com/i/c/v4/chancerain.svg" alt="Chance of Rain"></label>
+        <label class="label"><input type="checkbox" name="Rain"><img src="http://icons.wxug.com/i/c/v4/rain.svg" alt="Rain"></label>
+        <label class="label"><input type="checkbox" name="Snow"><img src="http://icons.wxug.com/i/c/v4/snow.svg" alt="Snow"></label>
+        <label class="label"><input type="checkbox" name="Tstorm"><img src="http://icons.wxug.com/i/c/v4/tstorms.svg" alt="Tstorm"></label>
+      </div>
+      <section class="hourly-container"></section>
+    </section>
+    <!-- Handlebars script template -->
+    <script id="template-current" type="text/x-handlebars-template">
+      <article class="current-data">
+        <dl>
+          <dt>Temprature</dt>
+          <dd>{{current.temp_c}}<sup>˚C</sup></dd>
+        </dl>
+        <dl>
+          <dt>Location</dt>
+          <dd>{{current.observation_location.city}}, {{current.observation_location.country}}</dd>
+          <dt>Time</dt>
+          <dd>{{timestamp}}</dd>
+          <dt>Date</dt>
+          <dd>{{datestamp}}</dd>
+        </dl>
+        <dl>
+          <dt>Wind speed</dt>
+          <dd><img src="./static/img/plane.svg" alt="wind-icon"><em>{{current.wind_kph}}km/h</em></dd>
+          <dt>Humidity</dt>
+          <dd><img src="./static/img/drop-silhouette.svg" alt="humidity-icon"><em>{{current.relative_humidity}}</em></dd>
+          <dt>Condition</dt>
+          <dd><img src="{{current.icon_url}}" alt="{{current.icon}}"></dd>
+        </dl>
+      </article>
+    </script>
+    <script id="template-hourly" type="text/x-handlebars-template">
+      <article class="hourly-data">
+        <h1><time>{{FCTTIME.pretty}}</time></h1>
+        <ul>
+          <li>Condition: {{condition}}</li>
+          <li>Temprature: {{temp.metric}}<sup>˚C</sup></li>
+          <li>Feels like: {{feelslike.metric}}<sup>˚C</sup></li>
+          <li>Wind speed: {{wspd.metric}}km/h</li>
+        </ul>
+        <img src="{{icon_url}}" alt="weather condition {{icon}}">
+      </article>
+    </script>
+  </main>
+</body>
+</html>
diff --git a/week2/static/aja/aja.min.js b/week2/static/aja/aja.min.js
diff --git a/week2/static/app.js b/week2/static/app.js
@@ -0,0 +1,137 @@
+/*global window, document, aja, Handlebars*/
+(function(){
+  'use strict';
+
+  const appSettings = {
+    current: document.querySelector('#current'),
+    hourly: document.querySelector('.hourly-container'),
+    detail: document.querySelector('#hourly-detail'),
+    templateCurrent: Handlebars.compile(document.querySelector('#template-current').innerHTML),
+    templateHourly: Handlebars.compile(document.querySelector('#template-hourly').innerHTML),
+    urlHourly: 'http://api.wunderground.com/api/7f0aee996268ea76/hourly/q/autoip.json',
+    urlCurrent: 'http://api.wunderground.com/api/7f0aee996268ea76/conditions/q/autoip.json',
+    html: ''
+  };
+
+  const weatherData = {
+    datestamp: '',
+    timestamp: '',
+    current: '',
+    hourly: ''
+  };
+
+  const app = {
+    init() {
+      routes.init();
+      filter.init();
+      getData.current();
+      getData.hourly();
+    },
+    render() {
+      weatherData.current && weatherData.hourly ? render.init(weatherData) : null;
+    }
+  };
+
+  const routes = {
+    pages: ['#current', '#hourly'],
+    init() {
+      section.toggle(window.location.hash);
+      window.addEventListener('hashchange', () => section.toggle(window.location.hash), false);
+    }
+  };
+
+  const section = {
+    toggle(route) {
+      route === '' ? route = '#current' : null;
+      routes.pages.forEach(function (page) {
+        page === route
+        ? document.querySelector(page).classList.remove('invisible')
+        : document.querySelector(page).classList.add('invisible');
+      });
+    }
+  };
+
+  const storeData = {
+    current(data) {
+      const date = new Date();
+      const minutes = '0' + date.getMinutes();
+      const seconds = '0' + date.getSeconds();
+      const month = '0' + date.getMonth();
+      const formattedTime = `${date.getHours()}:${minutes.substr(-2)}:${seconds.substr(-2)}`;
+      const formattedDate = `${date.getDate()}-${month.substr(-2)}-${date.getFullYear()}`;
+      weatherData.current = data.current_observation;
+      weatherData.datestamp = formattedTime;
+      weatherData.timestamp = formattedDate;
+      app.render();
+    },
+    hourly(data) {
+      weatherData.hourly = data.hourly_forecast;
+      app.render();
+    }
+  };
+
+  const render = {
+    init(data) {
+      appSettings.html = appSettings.templateCurrent(data);
+      appSettings.current.innerHTML += appSettings.html;
+      data.hourly.forEach(function (item) {
+        appSettings.html = appSettings.templateHourly(item);
+        appSettings.hourly.innerHTML += appSettings.html;
+      });
+    },
+    filteredData(data) {
+      console.log(data);
+      appSettings.hourly.innerHTML = '';
+      data.map(function (item) {
+        appSettings.html = appSettings.templateHourly(item);
+        appSettings.hourly.innerHTML += appSettings.html;
+      });
+    },
+    clearedFilter(data) {
+      appSettings.hourly.innerHTML = '';
+      data.hourly.forEach(function (item) {
+        appSettings.html = appSettings.templateHourly(item);
+        appSettings.hourly.innerHTML += appSettings.html;
+      });
+    }
+  };
+
+  const filter = {
+    init() {
+      document.querySelector('.filter-station').addEventListener('click', () => getData.filter(), false);
+    }
+  };
+
+  const getData = {
+    current() {
+      aja()
+      .url(appSettings.urlCurrent)
+      .on('success', function(data){
+         storeData.current(data);
+      })
+      .go();
+    },
+    hourly() {
+      aja()
+      .url(appSettings.urlHourly)
+      .on('success', function(data){
+         storeData.hourly(data);
+      })
+      .go();
+    },
+    // TODO: filter station doesn't seem to stack the data :(
+    filter() {
+      const filteredData = [];
+      document.querySelectorAll('input[type="checkbox"]').forEach(function (checkbox) {
+        checkbox.checked
+        ? checkbox.name === 'Partly Cloudy'
+        ? filteredData.push(weatherData.hourly.filter((d) => d.condition.includes('Cloudy')))
+        : filteredData.push(weatherData.hourly.filter((d) => d.condition === checkbox.name))
+        : null;
+      });
+      filteredData.length === 0 ? render.clearedFilter(weatherData) : render.filteredData(...filteredData);
+    }
+  };
+
+  app.init();
+})();
diff --git a/week2/static/fonts/Lato/Lato-Bold.ttf b/week2/static/fonts/Lato/Lato-Bold.ttf
diff --git a/week2/static/fonts/Lato/Lato-Light.ttf b/week2/static/fonts/Lato/Lato-Light.ttf
diff --git a/week2/static/fonts/Lato/Lato-Regular.ttf b/week2/static/fonts/Lato/Lato-Regular.ttf
diff --git a/week2/static/img/background.jpg b/week2/static/img/background.jpg
diff --git a/week2/static/img/drop-silhouette.svg b/week2/static/img/drop-silhouette.svg
diff --git a/week2/static/img/plane.svg b/week2/static/img/plane.svg