juggl/juggl-server/js/helper.js

const PROJECT_OBJECT = "div";
const PROJECT_TITLE = "h1";
const PROJECT_META = "p";

function loadProjectList() {
  api.getProjects().then((projects) => {
    var container = u(u("#project-list").first());
    Object.values(projects).forEach((project) => {
      var obj = createNode(PROJECT_OBJECT);
      var data = undefined;

      data = createNode(PROJECT_TITLE);
      append(obj, data);
      u(data).text(project["name"]);

      var duration = parseFloat(project["duration"]) / 60 / 60;
      var unit = "hours";
      data = createNode(PROJECT_META);
      append(obj, data);
      u(data).text(duration + " " + unit);

      data = createNode(PROJECT_META);
      append(obj, data);
      u(data).text(project["record_count"] + " records");

      obj = u(obj);
      obj.data("project-id", project["project_id"]);
      obj.on("click", projectClicked);

      container.append(obj);
    });
  });
}

// Created new DOM object
// element: Type of DOM object (div, p, ...)
function createNode(element) {
  return document.createElement(element);
}

// Appends child to parent
// parent: DOM to append child to
// el: DOM child to append to parent
function append(parent, el) {
  return parent.appendChild(el);
}

function projectClicked(event) {
  console.log(event);
}