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

    function toOxfordCommaString(arr) {
        if (arr.length == 1) return arr;
        else {
            var last = arr.pop();
            return arr.join(', ') + ', and ' + last;
        }
    }

    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).sort();
    //const categories = results.tech_tags.categories);
    const analogues = getKeys(results.tech_tags.analogues).sort();
    const licenses = getKeys(results.tech_tags.licenses).sort();
    const statuses = getKeys(results.instance_tags.statuses).sort();
    const affiliates = getKeys(results.instance_tags.affiliates).sort();
    const hosts = getKeys(results.instance_tags.hosts).sort();

    //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">{category}</span> {/each}</div>
            <!--<div class="tags tech analogues">{#each analogues as analogue}<span class="tag analogue">{analogue}</span> {/each}</div>-->
            <div class="tags tech licenses">{#each licenses as license}<span class="tag license">{license}</span> {/each}</div>
        </div>
        <div class="tag-list instance">
            <div class="tags instance statuses">{#each statuses as status}<span class="tag status">{status}</span> {/each}</div>            <div class="tags instance affiliates">{#each affiliates as affiliate}<span class="tag affilate">{affiliate}</span> {/each}</div>
            <div class="tags instance hosts">{#each hosts as host}<span class="tag host">{host}</span> {/each}</div>
        </div>
    </div>
    <div class="tiles">
        {#each technologies as technology}
        <div class="tile technology">
            <div class="tile-inner">
                <div class="tile-front">
                    <h2><a href="{technology.website}">{technology.name}</a></h2>
                    {#if (technology.license)}<p class="license" title="The libre license for this project">License: <span class="value">{technology.license}</span></p>{/if}
                    {#if (technology.analogues)}<p class="analogues">Alternative to <span class="value">{toOxfordCommaString(technology.analogues)}</span></p>{/if}
                    <p class="description">{technology.description}</p>
                </div>
                <div class="tile-back">
                    {#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>
            </div>
        </div>
        {/each}
    </div>
</div>

<style>
    .webservices {
        display: grid;
        width: 90%;
        margin: 0 auto 3em auto;
        padding: 0;
    }
    .summary {
    }
    .filters {
        /*background-color: #f1ff94;
        padding: 0.5em;
        border: 3px solid #cbea77;
        margin: 1em 0;*/
        margin-bottom: 1em;
    }
    .filters .tags {
        /*padding: 0.5em;*/
        margin: 1em 0;
        display: block;
    }
    .tag-list {
        white-space: normal;
        word-break: normal;
        display: inline;
    }
    .tag {
        font-size: 80%;
        color: #777;
        margin-right: 0.5em;
        line-height: 2;
        background-color: #a369a2;
        color: #fff;
        padding: 4px 8px;
        border-radius: 10px;
        white-space: nowrap;
        word-break: keep-all;
    }
    .tag:after { content: "\00a0"; }
    .tiles {
        display: grid;
        grid-gap: 15px;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
    /* flip card stuff: https://www.w3schools.com/howto/howto_css_flip_card.asp */
    .tile {
        height: 460px;
        min-width: 250px;
        max-width: 400px;
        /*padding: 0.8em 1.2em;*/
        overflow: hidden;
        perspective: 1000px; /* remove to remove 3D effect */
    }
    .tile-inner {
        position: relative;
        width: 100%;
        height: 100%;
        transition: transform 0.8s;
        transform-style: preserve-3d;
    }
  /*  .tile:hover .tile-inner {
        transform: rotateY(180deg);
    } */
    .tile-front, .tile-back {
        position: absolute;
        top: 30px;
        width: 100%;
        height: 90%;
        -webkit-backface-visibility: hidden; /* Safari */
        backface-visibility: hidden;
        box-sizing: border-box;
        box-shadow: 5px 5px 3px #71ba71;
        border: solid 3px #1e6831;
        background-color: #fff;
    }
    .tile-front {
        background-color: #ddd;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    .tile-back {
        background-color: #3b559;
        transform: rotateY(180deg);
    }
    .tile-front h2 {
        background-color: #999;
        text-align: center;
        padding: 0.5em;
        margin: 0;
    }
    .tile-front h2 a { color: #eee; }
    .tile-front h2 a:visited { color: #ddd; }
    .tile-front .description {
        text-overflow: ellipsis;
        overflow: hidden;
        height: 100%;
    }
    .tile-front p {
        padding: 0 1em 0.2em 1em;
    }
    .webservices li { list-style-type: none; }
    .value { font-weight: bold; }
</style>