wip for laying out and processing webservices.json data
This commit is contained in:
parent
fd06b9eb94
commit
e33f2dce3b
2 changed files with 124 additions and 2 deletions
14
src/routes/+page.js
Normal file
14
src/routes/+page.js
Normal 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
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue