lightweight/webservices-app
Template
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

WIP commit - just about to set up new 'tile' approach to formatting

Browse source
This commit is contained in:
Dave Lane 2024-08-15 09:49:01 +12:00
parent 3101bdc033
commit 4c68329850
2 changed files with 107 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/routes/+page.js
View file

@ -3,7 +3,7 @@ export const load = async ({ fetch }) => {
const webservicesResult = await fetch('https://static.magnificent.nz/webservices/webservices.json');
const webservicesData = await webservicesResult.json();
console.log(webservicesData);
//console.log(webservicesData);
return {
webservices: {
technologies: webservicesData.technologies,

163
src/routes/+page.svelte
View file

@ -7,8 +7,10 @@
function processData(webservices) {
let instances = 0;
let current = {};
let current_status = [];
let future = {};
let affiliates = {};
let affiliates = [];
let analogues = []
//
// just a trivial reassignment
let hosts = webservices.hosts;
@ -17,9 +19,24 @@
webservices.technologies.forEach(function(tech, i) {
if (hasInstances(tech)) {
console.log(tech.name + ': ' + tech.instances.length + ' instances...');
instances += tech.instances.length;
tech.instances.forEach(function(instance, i) {
if (hasAffiliation(instance)) {
let tag = instance.affiliation;
affiliates[tag] += 1;
console.log('added tag: ' + tag);
}
});
}
})
getAnalogues(analogues, tech) {
single =
if
analogues = analogues.concat(local);
}
});
/*affiliates.forEach(function(num, tag) {
console.log(tag + ': ' + num);
});*/
console.log('affiliates: ', affiliates);
return {
total_instances: instances,
@ -32,9 +49,15 @@
// console.log(technologies);
function hasInstances(tech) {
if (tech.hasOwnProperty('instances') && tech.instances.constructor === Array) {
return true;
}
if (tech.hasOwnProperty('instances') && tech.instances.constructor === Array) return true;
return false;
}
function hasAffiliation(instance) {
if (instance.hasOwnProperty('affiliation')) return true;
return false;
}
function hasStatus(instance) {
if (instance.hasOwnProperty('status')) return true;
return false;
}
@ -47,64 +70,90 @@
</script>
<div class="webservices">
<div class="row">
<h1>Dave Web Services</h1>
<h1>Dave Web Services</h1>
<div class="summary">
<ul>
<li>Total number of services: {stats.total_instances}</li>
</ul>
</div>
<div class="summary cell-2">
<ul>
<li>Total number of services: {stats.total_instances}</li>
</ul>
</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 class="technology cell">
<h2><a href="{technology.website}">{technology.name}</a></h2>
<p>{technology.description}</p>
</div>
{#if hasInstances(technology)}
<div class="instances cell">
<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}
{/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; }
html { background-color: #eee; }
body {
background-color: #fff;
box-sizing: border-box;
margin: 0 auto;
min-height: 100%;
padding: 2em;
max-width: 800px;
font-size: 1.2em;
border: double 3px #ddd;
border-top: none;
border-bottom: none;
}
h1 { padding-left: 0.5em; }
a { text-decoration: none; }
.webservices {
display: flex;
flex-wrap: wrap;
background-color: #efefef;
width: 60%;
margin: 0 auto 3em auto;
padding: 0;
}
.cell {
box-sizing: border-box;
flex-grow: 1;
width: 100%;
padding: 0.8em 1.2em;
overflow: hidden;
border: solid 3px white;
}
.webservices > .cell {
width: 50%;
}
.technology {
background-color: #efefef;
}
.instances {
background-color: #eee;
}
.webservices li { list-style-type: none; }
.cell > h1, .cell > h2, .cell > h3, .cell > h4, .cell > h5 { margin: 0; }
/*
* Breakpoints
*/
@media all and (max-width: 500px) {
.collapse { display: block; }
.collapse > .cell { width: 100% !important; }
}
/* .no-flexbox .webservices {
display: block;
.no-flexbox .webservices > cell { width: 100%; }
} */
</style>