Add timeline and countdown

This commit adds timeline with countdown.

Closes coala#51

lib/generate.js

@@ -2,11 +2,15 @@ const fs = require('fs')
 const Mustache = require('mustache')
 const ncp = require('ncp').ncp
 const orgs = require('../out/data.json')
+const dates = require('../out/dates.json')
 
 const time = fs.statSync(`${__dirname}/../out/data.json`).mtime
 const datetime = new Date(time).toUTCString()
 const rootURL = process.env.URL
 
+const competitionOpen = new Date(dates.competition_open_starts)
+const noClaims = new Date(dates.competition_open_ends)
+
 ncp('static', 'out/static', err => {
   if (err) {
     console.error(err)
@@ -26,5 +30,7 @@ fs.writeFileSync(
     datetime,
     rootURL,
     noLeader,
+    competitionOpen,
+    noClaims,
   })
 )

lib/scrape.js

@@ -113,13 +113,20 @@ async function fetchOrgsWithData() {
   )
 }
 
+async function fetchDates() {
+  const res = await fetch('https://codein.withgoogle.com/api/program/current/')
+  return res.json()
+}
+
 ;(async () => {
   const data = await fetchOrgsWithData()
+  const dates = await fetchDates()
 
   // sort data by completed_task_instance_count
   data.sort(
     (a, b) => b.completed_task_instance_count - a.completed_task_instance_count
   )
 
   fs.writeFileSync(`${__dirname}/../out/data.json`, JSON.stringify(data))
+  fs.writeFileSync(`${__dirname}/../out/dates.json`, JSON.stringify(dates))
 })()

static/css/main.css

@@ -85,3 +85,21 @@ footer {
     width: 100%;
   }
 }
+
+.progress-outer {
+  display: inline-block;
+  width: 100%;
+}
+
+.progress-inner {
+  background-color: #f5f5f5;
+}
+
+.progress-bar {
+  background-color: #1890ff;
+}
+
+.progress-text {
+  color: grey;
+  display: inline-block;
+}

static/js/app.js

@@ -35,3 +35,26 @@ allLeaders.forEach(function(orgList) {
     orgList.appendChild(orgList.children[(Math.random() * i) | 0])
   }
 })
+
+document.getElementById('progress').textContent = gciProgress()
+
+function gciProgress() {
+  const progress = document.getElementById('progress').dataset
+  const competitionOpen = new Date(progress.competitionopen)
+  const noClaims = new Date(progress.noclaims)
+  const current = new Date()
+  const percentagePassed =
+    100 - (noClaims - current) / (noClaims - competitionOpen) * 100
+  document
+    .getElementsByClassName('progress-bar')[0]
+    .setAttribute(
+      'style',
+      'width:' + percentagePassed + '%;height: 8px;border-radius: 100px;'
+    )
+  return (
+    Math.round(percentagePassed) +
+    '% passed, ' +
+    timeDifference(noClaims, current).slice(0, -4) +
+    ' before task claiming ends'
+  )
+}

templates/main.html

@@ -17,6 +17,15 @@
       <h1>Google Code-in 2017 Current Leaders</h1>
     </div>
     <small id="time" data-time="{{datetime}}">Last updated: {{datetime}} <span id="ago"></span></small>
+    <div>
+      <div class="progress-outer">
+        <div class="progress-inner">
+          <div class="progress-bar">
+          </div>
+        </div>
+      </div>
+      <span class="progress-text"><i id="progress" data-noclaims="{{noClaims}}" data-competitionopen="{{competitionOpen}}"></i></span>
+    </div>
     <hr>
     <i>
       The leading participants for each organization are listed randomly.