WIP commit - just about to set up new 'tile' approach to formatting
This commit is contained in:
parent
3101bdc033
commit
4c68329850
2 changed files with 107 additions and 58 deletions
|
@ -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,
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue