Add frontend code to query the API

const apiBase = "/api/v1/services"

/**

 * Query the api endpoint /api/v1/services, which returns a list of objects, each representing a service.

 * To see what a service object looks like, check the API documentation (linked below).

 * 

 * @see https://status.fsco.li/api/v1

 * @returns A list of service objects

 */

async function getServices() {

    /*

     * Use fetch to make an HTTPS request to the API. fetch() is an asynchronous function,

     * meaning we have to "wait" for it to return using `await` (the nice thing is that

     * the code doesn't actually have to wait when using `await`, instead it can do something

     * else and will only return here when fetch is completed).

     * 

     * Because we use `await` in this function, the function `getServices()` needs to be marked `async`,

     * and we need to use `await` whenever we want to call `getServices()`.

     */

    const response = await fetch(apiBase)

    return response.json()

}

/**

 * @param {string} serviceHost The host name of a service, e.g. tickets.fachschaft.cl.uni-heidelberg.de

 * @returns The HTTPS URL to that service, e.g. https://tickets.fachschaft.cl.uni-heidelberg.de

 */

function getServiceUrl(serviceHost) {

    // Template strings are a lot like f-strings in Python. 

    // For details, see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

    return `https://${serviceHost}`

}

/**

 * Create an HTML status badge for the given service object. The service object could look like this:

 * 

 * {"name": "Website", "host": "fachschaft.cl.uni-heidelberg.de", "status": "up"}

 *

 * The badge code would then look like this:

 * 

 * <a href="https://fachschaft.cl.uni-heidelberg.de" class="badge" target="_blank"><span>Website</span><span>up</span></a>

 * 

 * @param {object} service A service object

 * @returns A status badge HTML element

 */

function createStatusBadge(service) {

    /* 

     * Create an HTML hyperlink element of the form

     * <a href="https://fachschaft.cl.uni-heidelberg.de" class="badge" target="_blank"></a>

     *

     * The class "badge" is used by some CSS code to style the link. target="_blank" ensures

     * the link will be opened in a new tab.

     */

    const a = document.createElement("a")

    a.href = getServiceUrl(service.host)

    a.target = "_blank"

    a.classList.add("badge")

    const nameEl = document.createElement("span")

    nameEl.textContent = service.name

    const statusEl = document.createElement("span")

    statusEl.textContent = service.status

    a.append(nameEl, statusEl)

    return a

}

// The lines below are run as soon as the file is loaded.

const services = await getServices()

services.forEach(service => {

    const p = document.createElement("p")

    p.appendChild(createStatusBadge(service))

    document.getElementById(service.category).appendChild(p)

})