kf-trombi/directory.js

const $C = (e) => document.createElement(e);
const $G = (e) => document.getElementById(e);

const ordNrRegex = /.*pOrgNr=([0-9]+).*/gm;
const personalIDRegex = /.*pStPersonNr=([0-9]+).*/gm;

function appendLink(nonEmptyGroup) {
  if ($G("kf-trombi_row")) return;

  var row_header = $C("th");
  row_header.textContent = "Trombi";
  row_header.classList.add("kf-trombi_row_header");

  var row_links = $C("td");

  if (nonEmptyGroup) {

    var link = $C("a");
    link.id = "kf-trombi_link";
    link.textContent = "Show";
    link.href="#";
    link.addEventListener("click", toggleTrombi);

    const inputContainer = $C("span");
    inputContainer.id = "kf-trombi_input_container";
    inputContainer.classList.add("hidden");

    const sliderContainer = $C("span");
    sliderContainer.id = "kf-trombi_slider_container";

    var slider = $C("input");
    slider.id = "kf-trombi_columns_slider";
    slider.type = "range";
    slider.value = 5;
    slider.min = 3;
    slider.max = 8;

    var column_nr = $C("span");
    column_nr.id = "kf-trombi_column_nr";
    column_nr.textContent = slider.value;
    var column_label = $C("span");
    column_label.textContent = " columns";

    slider.addEventListener("input", (event) => {
      column_nr.textContent = slider.value;
      const trombi = $G("kf-trombi_trombi");
      trombi.classList.remove( "kf-trombi_trombi_3", "kf-trombi_trombi_4", "kf-trombi_trombi_5", "kf-trombi_trombi_6", "kf-trombi_trombi_7", "kf-trombi_trombi_8" );
      trombi.classList.add(`kf-trombi_trombi_${slider.value}`);
    })

    sliderContainer.append(slider, column_nr, column_label);

    enhanced_checkbox = $C("input");
    enhanced_checkbox.id = "kf-trombi_enhanced_checkbox";
    enhanced_checkbox.type = "checkbox";
    enhanced_checkbox.checked = true;

    var enhance_label = $C("label");
    enhance_label.textContent = " Enhance for printing";
    enhance_label.htmlFor = "kf-trombi_enhanced_checkbox";

    enhanced_checkbox.addEventListener("input", (event) => {
      const trombi = $G("kf-trombi_trombi");
      trombi.classList.toggle('kf-trombi_enhanced');
    })
    inputContainer.append(sliderContainer, enhanced_checkbox, enhance_label);
    row_links.append(link, inputContainer);
  } else {
    row_links.textContent = "empty group!"
  }

  var tr = $C("tr");
  tr.classList.add("coNavGroup");
  tr.append(row_header, row_links);
  tr.id = "kf-trombi_row";

  const nav = $G("idPageNavi");
  nav.tBodies[0].append(tr);
}

function extractIDs(url) {
  return {
    org: url.replace(ordNrRegex, "$1"),
    perso: url.replace(personalIDRegex, "$1"),
  }
}

function generateCard(student, col) {
  const url = `/kfu_online/pl/ui/$ctx/wbstudkart.wbShowImage?pOrgNr=${student.ids.org}&pStPersonNr=${student.ids.perso}&pType=U`

  const d = $C("div");
  d.classList.add("kf-trombi_card");

  const img = $C("img");
  img.classList.add("kf-trombi_trombi_img");
  img.src = url;

  const name_div = $C("div");
  name_div.textContent = `${student.firstname} ${student.lastname}`;

  d.append(img, name_div);
  return d;
}

function toggleTrombi() {
  const trombi = $G("kf-trombi_trombi");
  const form = $G("idTNListe");
  const link = $G("kf-trombi_link");
  const inputContainer = $G("kf-trombi_input_container");
  trombi.classList.toggle("hidden");
  form.classList.toggle("hidden");
  if(inputContainer.classList.toggle("hidden")) {
    link.textContent = "Show";
  } else {
    link.textContent = "Hide";
  }
}

function generateTrombi() {
  var trombi = $G("kf-trombi_trombi");
  if (trombi) { trombi.remove(); }
  const slider = $G("kf-trombi_columns_slider");
  trombi = $C("div");
  trombi.id = "kf-trombi_trombi";
  trombi.classList.add("hidden");
  trombi.classList.add(`kf-trombi_trombi_${slider.value}`);
  trombi.classList.add("kf-trombi_enhanced");
  const form = $G("idTNListe");

  const table_body = $G("idTNVWTable").tBodies[0];

  const student_list = [];
  for (let row of table_body.children) {
    student_list.push({
      lastname: row.children[1].textContent,
      firstname: row.children[2].textContent,
      ids: extractIDs(row.children[1].children[1].href)
    })
  };

  student_list.forEach((student, idx) => {
    trombi.append(generateCard(student, 1 + idx % 5));
  });

  form.after(trombi);
}

// reset
if ($G("kf-trombi_trombi")) {
  $G("idTNListe").classList.remove("hidden");
  $G("kf-trombi_trombi").remove();
  $G("kf-trombi_row").remove();
}

// only enable on non-empty groups
const nonEmptyGroup = (document.getElementsByClassName("cNoEntry").length == 0);
appendLink(nonEmptyGroup);
if (nonEmptyGroup) {
  generateTrombi();
}