wip for laying out and processing webservices.json data

This commit is contained in:
Dave Lane 2024-08-12 14:53:19 +12:00
parent fd06b9eb94
commit e33f2dce3b
2 changed files with 124 additions and 2 deletions

14
src/routes/+page.js Normal file
View file

@ -0,0 +1,14 @@
// for multiple async fetches: https://youtu.be/EQy-AYhZIlE?si=FwyAPUjbixSUlc9q&t=490
export const load = async ({ fetch }) => {
const webservicesResult = await fetch('https://static.magnificent.nz/webservices/webservices.json');
const webservicesData = await webservicesResult.json();
console.log(webservicesData);
return {
webservices: {
technologies: webservicesData.technologies,
hosts: webservicesData.hosts
}
};
}

View file

@ -1,2 +1,110 @@
<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
<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>