kf-trombi/directory.js

const C = document.createElement;
// const G = document.getElementById;

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

function appendLink() {
  if (document.getElementById("kf-trombi_row")) return;

  var row_header = document.createElement("th");
  row_header.textContent = "Trombi";

  var link = document.createElement("a");
  link.textContent = "Toggle";
  link.href="#";
  link.addEventListener("click", toggleTrombi);

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

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

  slider.addEventListener("input", (event) => {
    column_nr.textContent = slider.value;
    const trombi = document.getElementById("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}`);
  })

  var row_links = document.createElement("td");
  row_links.append(link, slider, column_nr, column_label);

  var tr = document.createElement("tr");
  tr.classList.add("coNavdocument.getElementByIdroup");
  tr.append(row_header, row_links);
  tr.id = "kf-trombi_row";

  const nav = document.getElementById("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 = document.createElement("div");
  d.classList.add("kf-trombi_card");

  const img = document.createElement("img");
  img.classList.add("kf-trombi_trombi_img");
  img.src = url;

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

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

function toggleTrombi() {
  const trombi = document.getElementById("kf-trombi_trombi");
  const form = document.getElementById("idTNListe");
  trombi.classList.toggle("hidden");
  form.classList.toggle("hidden");
}

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

  const table_body = document.getElementById("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);
}

appendLink();
generateTrombi();