script.js

const serviceUrl = 'https://jupyter.rwth-aachen.de/services';
const spawnBaseUrl = "https://jupyter.rwth-aachen.de/hub/spawn";
const badgeURL = "https://jupyter.pages.rwth-aachen.de/documentation/images/badge-launch-rwth-jupyter.svg";

// taken from https://stackoverflow.com/questions/6234773/can-i-escape-html-special-chars-in-javascript
function escapeHtml(unsafe) {
  return unsafe
    .replace(/&/g, "&")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#039;");
}

function getProfiles() {
    window.fetch(serviceUrl + '/profile/all', { mode: 'no-cors' })
        .then((response) => response.json())
        .then((json) => {
            this.console.log(json);
            for (const i in json.jobs) {
                let job = json.jobs[i];
                elm = this.document.getElementById('build-' + job.name);
                
                if (elm) {
                    elm.classList.add(job.status);
                    elm.innerText = job.status;
                    elm.insertAdjacentHTML('afterend', '<span class="build-log">(open <a href="' + job.web_url + '">build log</a> #' + job.id + ' from ' + new Date(job.created_at).toLocaleString() + ')</span>');
                }
            }
        });

    return [
        {
            slug: "pti",
            display_name: "[PTI] Praktikum Technische Informatik"
        },
        {
            slug: "gdet3",
            display_name: "[GDET3] Grundgebiete der Elektrotechnik 3"
        }
    ]
}

function updateLink(event) {
    var profileSlug = document.getElementById("link-wizard-profile");
    var filePath = document.getElementById("link-wizard-path");
    var outputDiv = document.getElementById("link-wizard-output");
    var directLink = document.getElementById("link-wizard-direct-link");
    var badgePre_md = document.getElementById("link-wizard-badge-md");
    var badgePreHtml = document.getElementById("link-wizard-badge-html");

    // Strip leading slash
    var path = filePath.value.replace(/^\//, '');
    var slug = profileSlug.value;

    if (profileSlug.length > 0) {
        var link = updateDirectLink(slug, path);

        // Link
        directLink.innerHTML = link;

        // Badges
        var badge_md = '[![](' + badgeURL + ')](' + link +')';
        var badgeHtml = '<a href="' + link + '"><img src="' + badgeURL + '" /></a>';

        badgePre_md.innerHTML = badge_md;
        badgePreHtml.innerHTML = escapeHtml(badgeHtml);

        outputDiv.style.display = 'block';
    }
}

function generateProfileDropdown(profilesSelect) {
    // Fill profiles select
    var profiles = getProfiles();

    for(var i = 0; i < profiles.length; i++) {
        var o = document.createElement("option");

        o.value = profiles[i].slug;
        o.textContent = profiles[i].display_name;

        profilesSelect.appendChild(o);
    }
}

function updateDirectLink(profileSlug, path) {
    var url = spawnBaseUrl + '?profile=' + profileSlug;

    if (path && path.length > 0)
        url = url + '&next=/user-redirect/lab/tree/' + encodeURIComponent(path);

    return url;
}

function loadBuildStatus() {
    window.fetch(serviceUrl + '/profile/all')
        .then((response) => response.json())
        .then((json) => {
            this.console.log(json);
            for (const i in json.jobs) {
                let job = json.jobs[i];
                elm = this.document.getElementById('build-' + job.name);
                
                if (elm) {
                    elm.classList.add(job.status);
                    elm.innerText = job.status;
                    elm.insertAdjacentHTML('afterend', '<span class="build-log">(open <a href="' + job.web_url + '">build log</a> #' + job.id + ' from ' + new Date(job.created_at).toLocaleString() + ')</span>');
                }
            }
        });
}

function insertVersionCollapsibles() {
    let seps = this.document.getElementsByClassName('profile-sep');
    for (const sep of seps) {
        let slug = sep.getAttribute('data-slug');

        sep.insertAdjacentHTML('beforebegin', '<h4>Package Versions</h4>');

        repos = {
            pip: 'PyPI / pip',
            conda: 'Anaconda',
            'jupyter-labextensions': 'Jupyter Lab Extensions',
            'jupyter-serverextensions': 'Jupyter Server / Notebook Extensions',
            'jupyter-kernelspecs': 'Jupyter Kernel'
        }

        for (const i in repos) {
            let repo = i;
            let name = repos[i];

            sep.insertAdjacentHTML('beforebegin', '<div data-display-name="' + name + '" data-repo="' + repo + '" data-slug="' + slug + '" class="collapsible-content"></div>');
        }
    }

    var colls = document.getElementsByClassName('collapsible-content');
    for (const coll of colls) {
        let btn = this.document.createElement('button');

        let slug = coll.getAttribute('data-slug');
        let repo = coll.getAttribute('data-repo');
        let displayName = coll.getAttribute('data-display-name');

        btn.classList.add('collapsible');
        btn.innerText = displayName;

        coll.insertAdjacentElement('beforebegin', btn)

        btn.addEventListener('click', () => {
            window.fetch(apiBaseUrl + '/versions/' + slug + '/' + repo)
                .then((response) => response.json())
                .then((pkgs) => {
                    tbl = document.createElement('table');
                    tbl.classList.add('versions')
                    tbl.insertAdjacentHTML('afterbegin', '<th>Name</th><th>Version</th>');

                    for (const i in pkgs) {
                        let pkg = pkgs[i];

                        let url;
                        switch (repo) {
                            case 'pip': url = 'https://pypi.org/project/' + pkg.name + '/' + pkg.version + '/'; break;
                            case 'conda': url = 'https://anaconda.org/anaconda/' + pkg.name; break;
                            case 'jupyter-labextensions': url = 'https://www.npmjs.com/package/' + pkg.name + '/v/' + pkg.version; break;
                            case 'jupyter-serverextensions': url = 'https://pypi.org/project/' + pkg.name + (pkg.version ? '/' + pkg.version + '/' : ''); break;
                        }

                        let name = url
                            ? '<a href="' + url + '">' + pkg.name + '</a>'
                            : pkg.name;

                        let row;
                        switch (repo) {
                            case 'pip':
                            case 'conda':
                            case 'jupyter-labextensions':
                            case 'jupyter-serverextensions':
                                row = '<tr><td>' + name + '</td><td>' + pkg.version + '</td></tr>';
                                break;

                            case 'jupyter-kernelspecs':
                                row = '<tr><td>' + pkg.spec.display_name + '</td></tr>';
                                break;

                            default:
                                row = '<tr><td>' + pkg.name + '</td></tr>';
                        }

                        tbl.insertAdjacentHTML('beforeend', row);
                    }

                    coll.innerHTML = '';
                    coll.appendChild(tbl);
                });

            btn.classList.toggle('collapsible-active');
            if (coll.style.display === 'block')
                coll.style.display = 'none';
            else
                coll.style.display = 'block';
        });
    }
}

window.addEventListener('load', function () {
    if (window.location.pathname.endsWith('/Profiles.html')) {
        loadBuildStatus();
        insertVersionCollapsibles();
    }

    if (window.location.pathname.endsWith('/Links.html')) {
        var profileSelect = document.getElementById("link-wizard-profile");
        generateProfileDropdown(profileSelect);
    }
});