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 future = {};
        let affiliates = {};
        //
        // 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...');
                instances += tech.instances.length;
            }
        })

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

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

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

</script>

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

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

    {#each technologies as technology}
    <div class="row">
        <div class="technology">
            <h2><a href="{technology.website}">{technology.name}</a></h2>
        </div>
        {#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">
            <ul class="instances">
                <li>Nothing here yet...</li>
            </ul>
        </div>
        {/if}
    </div>
    {/each}
</div>

<style>
  body { bg-color: #eee; }
  h1 { padding-left: 0.5em; }
  a { text-decoration: none; }
  .webservices {
      display: table;
      gap: 6px;
      background-color: #efefef;
      width: 90%;
      margin: 0 auto;
  }
  .row {
      display: table-row;
      box-shadow: 5px 5px 4px #ccc;
      padding: 5px;
      margin-bottom: 10px;
  }
  .technology {
      background-color: #fff;
      display: table-cell;
  }
  .instances {
      background-color: #fff;
      display: table-cell;
  }
  .webservices li { list-style-type: none; }
</style>