liftie/lib/client/resort/weather.js

Clean, simple, easy to read, fast ski resort lift status

const day = 24 * 60 * 60 * 1000;

render.section = 1;
render.type = 'weather';

// .weather
//   .weather-icon
//     ul
//       li(class=#{resort.weather.icon[0]}
//       li(class=#{resort.weather.icon[1]}
//   .snowforecast!= resort.weather.snow + '"'
//   .temperature!= resort.weather.temperature.max + '°F'
//   .conditions= resort.weather.conditions
//   .text= resort.weather.text
//   .notice Forecast by 
//     a(target="_blank")
//       img

function renderIcon(li, icon) {
  if (Array.isArray(icon)) {
    icon.forEach((cl, i) => li.item(i).setAttribute('class', cl));
  }
}

function renderNotice(el, notice) {
  if (!notice) {
    return el.classList.add('hidden');
  }
  el.classList.remove('hidden');
  el = el.querySelector('a');
  el.setAttribute('href', notice.href);
  el.setAttribute('title', `Go to ${notice.site}`);
  el = el.querySelector('img');
  el.setAttribute('src', notice.img);
  el.setAttribute('style', `width:${notice.width}px;`);
  el.setAttribute('alt', notice.site);
}

export default function render(div, weather) {
  if (Date.now() - weather.timestamp > day) {
    return false;
  }
  renderIcon(div.querySelectorAll('.weather-icon > ul > li'), weather.icon);
  div.querySelector('.temperature').innerHTML = `${weather.temperature.max}°F`;
  const snowforecast = div.querySelector('.snowforecast');
  snowforecast.classList.toggle('hidden', !weather.snow);
  if (weather.snow) {
    snowforecast.innerHTML = `${weather.snow}"`;
  }
  div.querySelector('.conditions').innerHTML = weather.conditions;
  div.querySelector('.text').innerHTML = weather.text;
  renderNotice(div.querySelector('.notice'), weather.notice);
  return true;
}