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 = {};
        // properties of technologies
        let categories = [];
        let analogues = [];
        let licenses = [];
        // properties of instances
        let statuses = [];
        let affiliates = [];
        let hosts = [];
        //
        // just a trivial reassignment
        //let hosts = webservices.hosts;
        //
        // pull out relevant info in useful chunks.
        webservices.technologies.forEach(function(tech, i) {
            if (tech.hasOwnProperty('categories') && tech.categories.constructor === Array ) {
                tech.categories.forEach(function(category, index) {
                    if (categories.hasOwnProperty(category)) categories[category]++;
                    else categories[category] = 1;
                });
            }
            if (tech.hasOwnProperty('analogues') && tech.analogues.constructor === Array ) {
                tech.analogues.forEach(function(analogue, index) {
                    if (analogues.hasOwnProperty(analogue)) analogues[analogue]++;
                    else analogues[analogue] = 1;
                });
            }
            if (tech.hasOwnProperty('license')) {
                let license = tech.license;
                if (licenses.hasOwnProperty(license)) licenses[license]++;
                else licenses[license] = 1;
            }

            if (hasInstances(tech)) {
                console.log(tech.name + ': ' + tech.instances.length + ' instances...');
                tech.instances.forEach(function(instance, i) {
                    instances++;
                    if (instance.hasOwnProperty('status')) {
                        let tag = instance.status;
                        if (statuses.hasOwnProperty(tag)) statuses[tag]++;
                        else statuses[tag] = 1;
                    }
                    if (instance.hasOwnProperty('affiliation')) {
                        let tag = instance.affiliation;
                        if (affiliates.hasOwnProperty(tag)) affiliates[tag]++;
                        else affiliates[tag] = 1;
                    }
                    if (instance.hasOwnProperty('host')) {
                        let tag = instance.host;
                        if (hosts.hasOwnProperty(tag)) hosts[tag]++;
                        else hosts[tag] = 1;
                    }
                });
            }

        });
        /*console.log('categories: ', categories);
        console.log('analogues: ', analogues);
        console.log('licenses: ', licenses);
        console.log('statuses: ', statuses);
        console.log('affiliates: ', affiliates);
        console.log('hosts: ', hosts); */

        return {
            total_instances: instances,
            active_services: current,
            candidate_services: future,
            tech_tags: {
               categories: categories,
               analogues: analogues,
               licenses: licenses
            },
            instance_tags: {
                statuses: statuses,
                affiliates: affiliates,
                hosts: hosts
            }
        };
    }

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

    const results = processData(webservices);
    console.log('stats = ' + results.total_instances);
    console.log('tech_tags: ', results.tech_tags);
    console.log('instance_tags: ', results.instance_tags);

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

</script>

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

    <div class="summary">
        <ul>
            <li>Total number of services: {results.total_instances}</li>
        </ul>
    </div>
    <div class="filters">
        <div class="tags tech">
            <div class="tags tech catergories">
            {#each results.tech_tags.categories as category}
                <span>{category}</span>
            {/each}
            </div>
        </div>
        <div class="tags instance">
            <div class="tags instance statuses">
            {#each results.instance_tags.statuses as status}
                <span>{status}</span>
            {/each}
            </div>
            <div class="tags instance affiliates">
            {#each results.instance_tags.affiliates as affiliate}
                <span>{affiliate}</span>
            {/each}
            </div>
            <div class="tags instance hosts">
            {#each results.instance_tags.hosts as host}
                <span>{host}</span>
            {/each}
            </div>
        </div>
    </div>
    <div class="tiles">
        {#each technologies as technology}
        <div class="tile technology">
            <h2><a href="{technology.website}">{technology.name}</a></h2>
            <!--<p>{technology.description}</p>-->
            {#if hasInstances(technology)}
            <div class="instances">
                <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}
        </div>
        {/each}
    </div>
</div>

<style>
    .webservices {
        display: grid;
        width: 90%;
        margin: 0 auto 3em auto;
        padding: 0;
    }
    .summary {
    }
    .filters {
    }
    .tiles {
        display: grid;
        grid-gap: 15px;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
    .tile {
        box-sizing: border-box;
        box-shadow: 5px 5px 3px #71ba71;
        min-width: 250px;
        max-width: 400px;
        padding: 0.8em 1.2em;
        overflow: hidden;
        border: solid 3px #1e6831;
        background-color: #fff;
    }
/*    .technology {
        background-color: #fff;
    }
    .instances {
        background-color: #ddd;
    } */
    .webservices li { list-style-type: none; }
    /*
     * 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>