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

<script>
    export let data;
    const { webservices } = data;

    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;
    }

    function getKeys(ob) {
        let keys = [];
        for (let key in ob) {
            keys.push(key);
            //console.log('pushing key ' + key);
        };
        return keys;
    }

    const results = processData(webservices);
   // console.log('results: ', results);
    /*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;
    /*const categories = results.tech_tags.categories);
    const analogues = results.tech_tags.analogues);
    const licenses = results.tech_tags.licenses);
    const statuses = results.instance_tags.statuses);
    const affiliates = results.instance_tags.affiliates);
    const hosts = results.instance_tags.hosts);*/
    const categories = getKeys(results.tech_tags.categories);
    //const categories = results.tech_tags.categories);
    const analogues = getKeys(results.tech_tags.analogues);
    const licenses = getKeys(results.tech_tags.licenses);
    const statuses = getKeys(results.instance_tags.statuses);
    const affiliates = getKeys(results.instance_tags.affiliates);
    const hosts = getKeys(results.instance_tags.hosts);

    //console.log('categories array: ', results.tech_tags.categories);
    console.log('categories keys: ', categories);

</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="tag-list tech">
            <div class="tags tech categories">
            {#each categories as category}
                <span class="tag">{category}</span>
            {/each}
            </div>
        </div>
        <div class="tag-list instance">
            <div class="tags instance statuses">
            {#each statuses as status}
                <span class="tag">{status}</span>
            {/each}
            </div>
            <div class="tags instance affiliates">
            {#each affiliates as affiliate}
                <span class="tag">{affiliate}</span>
            {/each}
            </div>
            <div class="tags instance hosts">
            {#each hosts as host}
                <span class="tag">{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 {
    }
    .filters .tags {
        background-color: #f1ff94;
        padding: 0.5em;
        border: 3px solid #cbea77;
        margin: 1em 0;
    }
    .tag {
        font-size: 80%;
        color: #777;
        margin-right: 1em;
    }
    .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;
    }
    .webservices li { list-style-type: none; }
</style>