webservices-app/src/routes/+page.svelte

<script>
    export let data;
    const { webservices } = data;
    //console.log(webservices);


    function processData(webservices) {
        let instances = 0;
        let current = {};
        let current_status = [];
        let future = {};
        let affiliates = [];
        let analogues = []
        //
        // just a trivial reassignment
        let hosts = webservices.hosts;
        //
        // pull out relevant info in useful chunks.
        webservices.technologies.forEach(function(tech, i) {
            if (hasInstances(tech)) {
                console.log(tech.name + ': ' + tech.instances.length + ' instances...');
                tech.instances.forEach(function(instance, i) {
                    if (hasAffiliation(instance)) {
                        let tag = instance.affiliation;
                        affiliates[tag] += 1;
                        console.log('added tag: ' + tag);
                    }
                });
            }
           /* getAnalogues(analogues, tech) {
                single =
                if
                analogues = analogues.concat(local);
            }*/
        });
        /*affiliates.forEach(function(num, tag) {
            console.log(tag + ': ' + num);
        });*/
        console.log('affiliates: ', affiliates);

        return {
            total_instances: instances,
            active_services: current,
            candidate_services: future,
            affiliates: affiliates,
            hosts: hosts
        };
    }

//    console.log(technologies);
    function hasInstances(tech) {
        if (tech.hasOwnProperty('instances') && tech.instances.constructor === Array) return true;
        return false;
    }
    function hasAffiliation(instance) {
        if (instance.hasOwnProperty('affiliation')) return true;
        return false;
    }
    function hasStatus(instance) {
        if (instance.hasOwnProperty('status')) return true;
        return false;
    }

    let stats = processData(webservices);
    console.log('stats = ' + stats.total_instances);

    const technologies = webservices.technologies;
    const hosts = webservices.hosts;

</script>

<div class="webservices">
    <h1>Dave Web Services</h1>

    <div class="summary cell-2">
        <ul>
            <li>Total number of services: {stats.total_instances}</li>
        </ul>
    </div>

    {#each technologies as technology}
    <div class="technology cell">
        <h2><a href="{technology.website}">{technology.name}</a></h2>
        <p>{technology.description}</p>
    </div>
    {#if hasInstances(technology)}
    <div class="instances cell">
        <ul class="instances">
            {#each technology.instances as instance}
            <li><a href="https://{instance.domain}">{instance.domain}</a> <span class="affiliation {instance.affiliation}">{instance.affiliation}</span></li>
            {/each}
        </ul>
    </div>
    {:else}
    <div class="instances cell">
        <ul class="instances">
            <li>Nothing here yet...</li>
        </ul>
    </div>
    {/if}
    {/each}
</div>

<style lang="scss">
    html { background-color: #eee; }
    body {
        background-color: #fff;
        box-sizing: border-box;
        margin: 0 auto;
        min-height: 100%;
        padding: 2em;
        max-width: 800px;
        font-size: 1.2em;
        border: double 3px #ddd;
        border-top: none;
        border-bottom: none;
    }
    h1 { padding-left: 0.5em; }
    a { text-decoration: none; }
    .webservices {
        display: flex;
        flex-wrap: wrap;
        background-color: #efefef;
        width: 60%;
        margin: 0 auto 3em auto;
        padding: 0;
    }
    .cell {
        box-sizing: border-box;
        flex-grow: 1;
        width: 100%;
        padding: 0.8em 1.2em;
        overflow: hidden;
        border: solid 3px white;
    }
    .webservices > .cell {
        width: 50%;
    }
    .technology {
        background-color: #efefef;
    }
    .instances {
        background-color: #eee;
    }
    .webservices li { list-style-type: none; }
    .cell > h1, .cell > h2, .cell > h3, .cell > h4, .cell > h5 { margin: 0; }
    /*
     * Breakpoints
     */
    @media all and (max-width: 500px) {
        .collapse { display: block; }
        .collapse > .cell { width: 100% !important; }
    }
    .no-flexbox .webservices {
        display: block;
        .no-flexbox .webservices > cell { width: 100%; }
    }
    div {
        h2 {
            color: green;
        }
    }

</style>