CSCI 465 - Information Visualization

Code

marked = require("marked");
dateFns = import("https://cdn.jsdelivr.net/npm/date-fns@4.1.0/+esm");

function md2html(text){
  const template = document.createElement("template");
  template.innerHTML = marked.parseInline(text);
  return template.content.cloneNode(true);
}

Upcoming due dates

Code

function formatDistance(date) {
  let isClassStart = new Date(date).toTimeString().slice(0, 5) == "08:15";
  const distanceStr = dateFns.formatDistanceToNow(date);

  if (isClassStart && distanceStr.match(/hour/g)) {
    return "before class";
  } else {
    return distanceStr;
  }
}

function getDueDates(calendar){
  let dueDates = [];
  calendarData.forEach((week)=>{
    week.days.forEach((day)=>{
      day.due.forEach((entry)=>{
        dueDates.push({date: entry.due, link:entry.link});
      });
    });
  });

  dueDates = dueDates.filter((item)=>! dateFns.isPast(item.date));

  const items = dueDates.map((entry)=>htl.html`<tr><td>${dateFns.format(entry.date, 'MMM dd')}</td><td><em>${formatDistance(entry.date)}</em></td><td>${md2html(entry.link)}</td></tr>`);
  return items;

}


dueDateDisplay =  htl.html`<div class="dueDates"><table><tbody>${getDueDates(calendarData)}</tbody></table></div>`

Schedule

This is a living schedule and subject to change

Code

function generateDay(day){
  // deconstruct the date so it doesn't think it is in UTC
  const [year, month, date] = day.date.split('-').map(Number);
  const d = new Date(year, month-1, date); 

  const label = htl.html`<strong>${dateFns.format(d, "iiii, MMM d")}</strong>`;
  const messages = day.entries.map(e=>htl.html`<li>${md2html(e)}</li>`);
  const reading = day.reading.length > 0 ? htl.html`<li>📚 ${md2html(day.reading.join(", "))}</li>` : '';

  const due = day.due.map(e=>htl.html`<li><strong>Due</strong> ${md2html(e.link)}</li>`);


  return htl.html`<li class="entry">${label} <ul>${messages} ${reading} ${due}</ul></li>`;
}


function generateWeek(week, number){
  const undatedItems = week.undated.map(entry=>htl.html`<li>${md2html(entry)}</li>`);
  const days = week.days.filter(d=>d.entries.length + d.due.length > 0);
  const dayItems = days.map(d=>generateDay(d));

  return htl.html` <div class="weekBlock">
      <div class="weekHeader">
        <div>Week</div>
    <div class="weekNumber">${number}</div>
      </div>
      <div class="entries">
      ${undatedItems.length > 0 ? htl.html`<ul>${undatedItems}</ul>` : ''}
      ${undatedItems.length > 0 && dayItems.length > 0 ? htl.html`<hr />` : ''}
      ${dayItems.length > 0 ? htl.html`<ul>${dayItems}</ul>` : ''}
      ${dayItems.length > 0 ? htl.html`<ul>${dayItems}</ul>` : ''}
      </div>
    </div>`
}


calendar = htl.html`<div class="calendar">${calendarData.map((w, index)=>generateWeek(w, index+1))}</div>`