From b4e6e27d0ad03f7e9e7b11df2c5262aff95d377b Mon Sep 17 00:00:00 2001 From: Dave Lane Date: Sun, 18 Aug 2024 13:56:25 +1200 Subject: [PATCH 1/4] WIP --- src/routes/+page.svelte | 45 ++++++++++++++++++++++++++++++++--------- 1 file changed, 35 insertions(+), 10 deletions(-) diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index c3c4f3c..8d3d774 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -125,7 +125,7 @@ const hosts = getKeys(results.instance_tags.hosts); //console.log('categories array: ', results.tech_tags.categories); - console.log('categories keys: ', categories); + //console.log('categories keys: ', categories); @@ -140,25 +140,33 @@
- {#each categories as category} - {category} + {#each categories as category}{category} {/each} +
+
+ {#each analogues as analogue} + {analogue} + {/each} +
+
+ {#each licenses as license} + {license} {/each}
{#each statuses as status} - {status} + {status} {/each}
{#each affiliates as affiliate} - {affiliate} + {affiliate} {/each}
{#each hosts as host} - {host} + {host} {/each}
@@ -198,18 +206,35 @@ .summary { } .filters { - } - .filters .tags { - background-color: #f1ff94; + /*background-color: #f1ff94; padding: 0.5em; border: 3px solid #cbea77; + margin: 1em 0;*/ + margin-bottom: 1em; + } + .filters .tags { + /*padding: 0.5em;*/ margin: 1em 0; + display: block; + } + .tag-list { + white-space: normal; + word-break: normal; + display: inline; } .tag { font-size: 80%; color: #777; - margin-right: 1em; + margin-right: 0.5em; + line-height: 2; + background-color: #a369a2; + color: #fff; + padding: 4px 8px; + border-radius: 10px; + white-space: nowrap; + word-break: keep-all; } + .tag:after { content: "\00a0"; } .tiles { display: grid; grid-gap: 15px; From 83b028f88199f98a7c597af445d7b9a1bfb612ad Mon Sep 17 00:00:00 2001 From: Dave Lane Date: Sun, 18 Aug 2024 16:07:34 +1200 Subject: [PATCH 2/4] WIP - new content in tiles, with flipping disabled... about to change the flip behaviour to require a click --- src/routes/+page.svelte | 160 +++++++++++++++++++++++++--------------- 1 file changed, 101 insertions(+), 59 deletions(-) diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 8d3d774..ff1481a 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -2,6 +2,8 @@ export let data; const { webservices } = data; + + function processData(webservices) { let instances = 0; let current = {}; @@ -63,12 +65,12 @@ } }); - /*console.log('categories: ', categories); - console.log('analogues: ', analogues); - console.log('licenses: ', licenses); - console.log('statuses: ', statuses); - console.log('affiliates: ', affiliates); - console.log('hosts: ', hosts); */ + //console.log('categories: ', categories); + //console.log('analogues: ', analogues); + //console.log('licenses: ', licenses); + //console.log('statuses: ', statuses); + //console.log('affiliates: ', affiliates); + //console.log('hosts: ', hosts); return { total_instances: instances, @@ -102,6 +104,14 @@ return keys; } + function toOxfordCommaString(arr) { + if (arr.length == 1) return arr; + else { + var last = arr.pop(); + return arr.join(', ') + ', and ' + last; + } + } + const results = processData(webservices); // console.log('results: ', results); /*console.log('stats = ' + results.total_instances); @@ -116,13 +126,13 @@ const statuses = results.instance_tags.statuses); const affiliates = results.instance_tags.affiliates); const hosts = results.instance_tags.hosts);*/ - const categories = getKeys(results.tech_tags.categories); + const categories = getKeys(results.tech_tags.categories).sort(); //const categories = results.tech_tags.categories); - const analogues = getKeys(results.tech_tags.analogues); - const licenses = getKeys(results.tech_tags.licenses); - const statuses = getKeys(results.instance_tags.statuses); - const affiliates = getKeys(results.instance_tags.affiliates); - const hosts = getKeys(results.instance_tags.hosts); + const analogues = getKeys(results.tech_tags.analogues).sort(); + const licenses = getKeys(results.tech_tags.licenses).sort(); + const statuses = getKeys(results.instance_tags.statuses).sort(); + const affiliates = getKeys(results.instance_tags.affiliates).sort(); + const hosts = getKeys(results.instance_tags.hosts).sort(); //console.log('categories array: ', results.tech_tags.categories); //console.log('categories keys: ', categories); @@ -139,58 +149,43 @@
-
- {#each categories as category}{category} {/each} -
-
- {#each analogues as analogue} - {analogue} - {/each} -
-
- {#each licenses as license} - {license} - {/each} -
+
{#each categories as category}{category} {/each}
+ +
{#each licenses as license}{license} {/each}
-
- {#each statuses as status} - {status} - {/each} -
-
- {#each affiliates as affiliate} - {affiliate} - {/each} -
-
- {#each hosts as host} - {host} - {/each} -
+
{#each statuses as status}{status} {/each}
{#each affiliates as affiliate}{affiliate} {/each}
+
{#each hosts as host}{host} {/each}
{#each technologies as technology}
-

{technology.name}

- - {#if hasInstances(technology)} -
-
    - {#each technology.instances as instance} -
  • {instance.domain} {instance.affiliation}
    • - {/each} -
+
+
+

{technology.name}

+ {#if (technology.license)}

License: {technology.license}

{/if} + {#if (technology.analogues)}

Alternative to {toOxfordCommaString(technology.analogues)}

{/if} +

{technology.description}

+
+
+ {#if hasInstances(technology)} +
+
    + {#each technology.instances as instance} +
  • {instance.domain} {instance.affiliation}
    • + {/each} +
+
+ {:else} +
+
    +
  • Nothing here yet...
    • +
+
+ {/if} +
- {:else} -
-
    -
  • Nothing here yet...
    • -
-
- {/if}
{/each}
@@ -240,15 +235,62 @@ grid-gap: 15px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } + /* flip card stuff: https://www.w3schools.com/howto/howto_css_flip_card.asp */ .tile { - box-sizing: border-box; - box-shadow: 5px 5px 3px #71ba71; + height: 460px; min-width: 250px; max-width: 400px; - padding: 0.8em 1.2em; + /*padding: 0.8em 1.2em;*/ overflow: hidden; + perspective: 1000px; /* remove to remove 3D effect */ + } + .tile-inner { + position: relative; + width: 100%; + height: 100%; + transition: transform 0.8s; + transform-style: preserve-3d; + } + /* .tile:hover .tile-inner { + transform: rotateY(180deg); + } */ + .tile-front, .tile-back { + position: absolute; + top: 30px; + width: 100%; + height: 90%; + -webkit-backface-visibility: hidden; /* Safari */ + backface-visibility: hidden; + box-sizing: border-box; + box-shadow: 5px 5px 3px #71ba71; border: solid 3px #1e6831; background-color: #fff; } + .tile-front { + background-color: #ddd; + text-overflow: ellipsis; + overflow: hidden; + } + .tile-back { + background-color: #3b559; + transform: rotateY(180deg); + } + .tile-front h2 { + background-color: #999; + text-align: center; + padding: 0.5em; + margin: 0; + } + .tile-front h2 a { color: #eee; } + .tile-front h2 a:visited { color: #ddd; } + .tile-front .description { + text-overflow: ellipsis; + overflow: hidden; + height: 100%; + } + .tile-front p { + padding: 0 1em 0.2em 1em; + } .webservices li { list-style-type: none; } + .value { font-weight: bold; } From 29c3d48da60590646422e3fe95c784b3f8f7f04e Mon Sep 17 00:00:00 2001 From: Dave Lane Date: Sun, 18 Aug 2024 22:56:20 +1200 Subject: [PATCH 3/4] wip, all messy --- Notes.md | 59 ++++++++++ package-lock.json | 8 ++ package.json | 1 + src/routes/+page.svelte | 239 ++++++++++++++++++++++++++-------------- 4 files changed, 222 insertions(+), 85 deletions(-) diff --git a/Notes.md b/Notes.md index ad10a68..8d1b9f1 100644 --- a/Notes.md +++ b/Notes.md @@ -1,2 +1,61 @@ # My notes... +colours20 = { + "dimgray": "#696969", + "seagreen": "#2e8b57", + "darkred": "#8b0000", + "olive": "#808000", + "darkblue": "#00008b", + "maroon3": "#b03060", + "orangered": "#ff4500", + "orange": "#ffa500", + "lime": "#00ff00", + "mediumorchid": "#ba55d3", + "darksalmon": "#e9967a", + "aqua": "#00ffff", + "blue": "#0000ff", + "fuchsia": "#ff00ff", + "dodgerblue": "#1e90ff", + "palegoldenrod": "#eee8aa", + "laserlemon": "#ffff54", + "plum": "#dda0dd", + "palegreen": "#98fb98", + "lightskyblue": "#87cefa" +} +const colours20 = [ "#696969", "#2e8b57", "#8b0000", "#808000", "#00008b", "#b03060", "#ff4500", "#ffa500", "#00ff00", "#ba55d3", "#e9967a", "#00ffff", "#0000ff", "#ff00ff", "#1e90ff", "#eee8aa", "#ffff54", "#dda0dd", "#98fb98", "#87cefa" ]; + + +colours30 = { + "gray": "#808080", + "maroon2": "#7f0000", + "darkgreen": "#006400", + "olive": "#808000", + "darkslateblue": "#483d8b", + "darkcyan": "#008b8b", + "peru": "#cd853f", + "darkblue": "#00008b", + "purple2": "#7f007f", + "darkseagreen": "#8fbc8f", + "maroon3": "#b03060", + "red": "#ff0000", + "darkorange": "#ff8c00", + "lime": "#00ff00", + "darkviolet": "#9400d3", + "springgreen": "#00ff7f", + "crimson": "#dc143c", + "aqua": "#00ffff", + "deepskyblue": "#00bfff", + "blue": "#0000ff", + "lightcoral": "#f08080", + "greenyellow": "#adff2f", + "dodgerblue": "#1e90ff", + "laserlemon": "#ffff54", + "lightgreen": "#90ee90", + "lightblue": "#add8e6", + "deeppink": "#ff1493", + "mediumslateblue": "#7b68ee", + "violet": "#ee82ee", + "moccasin": "#ffe4b5" +} + +const colours30 = [ "#808080", "#7f0000", "#006400", "#808000", "#483d8b", "#008b8b", "#cd853f", "#00008b", "#7f007f", "#8fbc8f", "#b03060", "#ff0000", "#ff8c00", "#00ff00", "#9400d3", "#00ff7f", "#dc143c", "#00ffff", "#00bfff", "#0000ff", "#f08080", "#adff2f", "#1e90ff", "#ffff54", "#90ee90", "#add8e6", "#ff1493", "#7b68ee", "#ee82ee", "#ffe4b5" ]; diff --git a/package-lock.json b/package-lock.json index 726980c..0582eab 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,6 +23,7 @@ "prettier": "^3.1.1", "prettier-plugin-svelte": "^3.1.2", "svelte": "^4.2.7", + "svelte-popover": "^2.0.8", "vite": "^5.0.3", "vitest": "^2.0.0" } @@ -3111,6 +3112,13 @@ "svelte": "^3.19.0 || ^4.0.0" } }, + "node_modules/svelte-popover": { + "version": "2.0.8", + "resolved": "https://registry.npmjs.org/svelte-popover/-/svelte-popover-2.0.8.tgz", + "integrity": "sha512-Yvz4FpvvXc5aBGyIE/TlGlqULLKkcfc7N0MoaqNXHMRVXxla+sc7G1xSCCURP3VqP0nZ5cIyPWOLLWFXuJjTRA==", + "dev": true, + "license": "ISC" + }, "node_modules/svelte-preprocess": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-6.0.2.tgz", diff --git a/package.json b/package.json index a8e66a4..7c8dcdc 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "prettier": "^3.1.1", "prettier-plugin-svelte": "^3.1.2", "svelte": "^4.2.7", + "svelte-popover": "^2.0.8", "vite": "^5.0.3", "vitest": "^2.0.0" }, diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index ff1481a..4f26a81 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -2,13 +2,17 @@ export let data; const { webservices } = data; + console.log('orig affiliates:', webservices.affiliates); + console.log('orig hosts:', webservices.hosts); + // source: https://mokole.com/palette.html 20 colors with default settings otherwise + const colours30 = [ "#808080", "#7f0000", "#006400", "#808000", "#483d8b", "#008b8b", "#cd853f", "#00008b", "#7f007f", "#8fbc8f", "#b03060", "#ff0000", "#ff8c00", "#00ff00", "#9400d3", "#00ff7f", "#dc143c", "#00ffff", "#00bfff", "#0000ff", "#f08080", "#adff2f", "#1e90ff", "#ffff54", "#90ee90", "#add8e6", "#ff1493", "#7b68ee", "#ee82ee", "#ffe4b5" ]; function processData(webservices) { let instances = 0; - let current = {}; + let current = []; let current_status = []; - let future = {}; + let future = []; // properties of technologies let categories = []; let analogues = []; @@ -18,12 +22,15 @@ let affiliates = []; let hosts = []; + let host_data = []; + let affiliate_data = []; // // just a trivial reassignment //let hosts = webservices.hosts; // // pull out relevant info in useful chunks. - webservices.technologies.forEach(function(tech, i) { + for (let key in webservices.technologies) { + let tech = webservices.technologies[key]; if (tech.hasOwnProperty('categories') && tech.categories.constructor === Array ) { tech.categories.forEach(function(category, index) { if (categories.hasOwnProperty(category)) categories[category]++; @@ -43,6 +50,8 @@ } if (hasInstances(tech)) { + tech['name'] = key; + current.push(tech); //console.log(tech.name + ': ' + tech.instances.length + ' instances...'); tech.instances.forEach(function(instance, i) { instances++; @@ -62,9 +71,30 @@ else hosts[tag] = 1; } }); + } else { + future[key] = tech; } - }); + }; + for (let key in webservices.hosts) { + //console.log('key: ', key); + let host = webservices.hosts[key]; + host['name'] = key; + //console.log('host: ', host); + if (host.hasOwnProperty('domain') && !(host.hasOwnProperty('status') && host.status == 'retired')) { + host_data[key] = host; + } + } + console.log('webservices.affiliates: ', webservices.affiliates); + for (let key in webservices.affiliates) { + console.log('key: ', key); + let affiliate = webservices.affiliates[key]; + console.log('affiliate assignment: ', affiliate); + affiliate_data[key] = affiliate; + // if (affiliate.hasOwnProperty('name')) { + // affiliate_data[key] = affiliate; + // } + } //console.log('categories: ', categories); //console.log('analogues: ', analogues); //console.log('licenses: ', licenses); @@ -85,13 +115,15 @@ statuses: statuses, affiliates: affiliates, hosts: hosts - } + }, + hosts: host_data, + affiliates: affiliate_data }; } // console.log(technologies); function hasInstances(tech) { - if (tech.hasOwnProperty('instances') && tech.instances.constructor === Array) return true; + if (tech.hasOwnProperty('instances') && tech.instances.constructor === Array && tech.instances.length) return true; return false; } @@ -112,28 +144,67 @@ } } - const results = processData(webservices); - // console.log('results: ', results); - /*console.log('stats = ' + results.total_instances); - console.log('tech_tags: ', results.tech_tags); - console.log('instance_tags: ', results.instance_tags);*/ + function hostColours(hosts, colours, host_data) { + let host_array = {}; + let i = 0; + + //console.log('host_data:', host_data); + + hosts.forEach(function(host) { + //console.log(host); + if (host_data[host].hasOwnProperty('domain') && host_data[host].hasOwnProperty('affiliation')) { + host_array[host] = { + "colour": colours[i++], + "domain": host_data[host].domain, + "affiliation": host_data[host].affiliation + } + } + }); + return host_array; + } + + function affiliateColours(affiliates, colours, affiliate_data) { + let affiliate_array = {}; + + console.log('affiliate_data_full:', affiliate_data); + + for (const affiliate of affiliates) { + console.log('affiliate:', affiliate); + if (affiliate_data[affiliate].hasOwnProperty('name') && affiliate_data[affiliate].hasOwnProperty('website')) { + affiliate_array[affiliate] = { + "colour": colours[i++], + "name": affiliate_data[affiliate].name, + "website": affiliate_data[affiliate].website + } + } + } + return affiliate_array; + } + + + const results = processData(webservices); + //console.log('results: ', results); + + //const technologies = webservices.technologies; + const technologies = results.active_services; + //console.log(technologies); - const technologies = webservices.technologies; - //const hosts = webservices.hosts; - /*const categories = results.tech_tags.categories); - const analogues = results.tech_tags.analogues); - const licenses = results.tech_tags.licenses); - const statuses = results.instance_tags.statuses); - const affiliates = results.instance_tags.affiliates); - const hosts = results.instance_tags.hosts);*/ const categories = getKeys(results.tech_tags.categories).sort(); - //const categories = results.tech_tags.categories); const analogues = getKeys(results.tech_tags.analogues).sort(); const licenses = getKeys(results.tech_tags.licenses).sort(); const statuses = getKeys(results.instance_tags.statuses).sort(); const affiliates = getKeys(results.instance_tags.affiliates).sort(); const hosts = getKeys(results.instance_tags.hosts).sort(); + const host_data = results.hosts; + //console.log('host_data: ', results.hosts); + const affiliate_data = results.affiliates; + console.log('affiliate_data: ', results.affiliates); + const host_colours = hostColours(hosts, colours30, host_data); + //console.log('host_colours:', host_colours); + const affiliate_colours = affiliateColours(affiliates, colours30, affiliate_data); + console.log('affiliate_colours:',affiliate_colours); + //console.log('categories array: ', results.tech_tags.categories); //console.log('categories keys: ', categories); @@ -149,43 +220,37 @@
-
{#each categories as category}{category} {/each}
+
Categories: {#each categories as category}{category} {/each}
-
{#each licenses as license}{license} {/each}
+
Licenses: {#each licenses as license}{license} {/each}
-
{#each statuses as status}{status} {/each}
{#each affiliates as affiliate}{affiliate} {/each}
-
{#each hosts as host}{host} {/each}
+
Statuses: {#each statuses as status}{status} {/each}
Affiliates: {#each affiliates as affiliate}{affiliate} {/each}
+
Hosts: {#each hosts as host}{host} {/each}
{#each technologies as technology}
-
-
-

{technology.name}

- {#if (technology.license)}

License: {technology.license}

{/if} - {#if (technology.analogues)}

Alternative to {toOxfordCommaString(technology.analogues)}

{/if} -

{technology.description}

-
-
- {#if hasInstances(technology)} -
-
    - {#each technology.instances as instance} -
  • {instance.domain} {instance.affiliation}
    • - {/each} -
-
- {:else} -
-
    -
  • Nothing here yet...
    • -
-
- {/if} -
+

{technology.name}

+ {#if (technology.license)}

License: {technology.license}

{/if} + {#if (technology.analogues)}

Alternative to {toOxfordCommaString(technology.analogues)}

{/if} +

{technology.description}

+ {#if hasInstances(technology)} +
+
    + {#each technology.instances as instance} +
  • {instance.affiliation}
    • + {/each} +
+ {:else} +
+
    +
  • Nothing here yet...
    • +
+
+ {/if}
{/each}
@@ -194,7 +259,7 @@ From e0fd7714bef2a4eec697ac48dd2978bf6f5fa287 Mon Sep 17 00:00:00 2001 From: Dave Lane Date: Mon, 19 Aug 2024 00:26:47 +1200 Subject: [PATCH 4/4] added circle and square markers, coloured tags --- src/routes/+page.js | 1 + src/routes/+page.svelte | 194 ++++++++++++++++++++++------------------ 2 files changed, 106 insertions(+), 89 deletions(-) diff --git a/src/routes/+page.js b/src/routes/+page.js index 951d6a5..880a3ea 100644 --- a/src/routes/+page.js +++ b/src/routes/+page.js @@ -7,6 +7,7 @@ export const load = async ({ fetch }) => { return { webservices: { technologies: webservicesData.technologies, + affiliates: webservicesData.affiliates, hosts: webservicesData.hosts } }; diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 4f26a81..9bcb3c5 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -2,8 +2,9 @@ export let data; const { webservices } = data; - console.log('orig affiliates:', webservices.affiliates); - console.log('orig hosts:', webservices.hosts); + //console.log('orig:', webservices); + //console.log('orig affiliates:', webservices.affiliates); + //console.log('orig hosts:', webservices.hosts); // source: https://mokole.com/palette.html 20 colors with default settings otherwise const colours30 = [ "#808080", "#7f0000", "#006400", "#808000", "#483d8b", "#008b8b", "#cd853f", "#00008b", "#7f007f", "#8fbc8f", "#b03060", "#ff0000", "#ff8c00", "#00ff00", "#9400d3", "#00ff7f", "#dc143c", "#00ffff", "#00bfff", "#0000ff", "#f08080", "#adff2f", "#1e90ff", "#ffff54", "#90ee90", "#add8e6", "#ff1493", "#7b68ee", "#ee82ee", "#ffe4b5" ]; @@ -11,19 +12,19 @@ function processData(webservices) { let instances = 0; let current = []; - let current_status = []; let future = []; // properties of technologies - let categories = []; - let analogues = []; - let licenses = []; + let category_list = []; + let analogue_list = []; + let license_list = []; // properties of instances - let statuses = []; - let affiliates = []; + let status_list = []; + let affiliate_list = []; + let host_list = []; + // actual objects let hosts = []; - let host_data = []; - let affiliate_data = []; + let affiliates = []; // // just a trivial reassignment //let hosts = webservices.hosts; @@ -33,20 +34,20 @@ let tech = webservices.technologies[key]; if (tech.hasOwnProperty('categories') && tech.categories.constructor === Array ) { tech.categories.forEach(function(category, index) { - if (categories.hasOwnProperty(category)) categories[category]++; - else categories[category] = 1; + if (category_list.hasOwnProperty(category)) category_list[category]++; + else category_list[category] = 1; }); } if (tech.hasOwnProperty('analogues') && tech.analogues.constructor === Array ) { tech.analogues.forEach(function(analogue, index) { - if (analogues.hasOwnProperty(analogue)) analogues[analogue]++; - else analogues[analogue] = 1; + if (analogue_list.hasOwnProperty(analogue)) analogue_list[analogue]++; + else analogue_list[analogue] = 1; }); } if (tech.hasOwnProperty('license')) { let license = tech.license; - if (licenses.hasOwnProperty(license)) licenses[license]++; - else licenses[license] = 1; + if (license_list.hasOwnProperty(license)) license_list[license]++; + else license_list[license] = 1; } if (hasInstances(tech)) { @@ -57,18 +58,18 @@ instances++; if (instance.hasOwnProperty('status')) { let tag = instance.status; - if (statuses.hasOwnProperty(tag)) statuses[tag]++; - else statuses[tag] = 1; + if (status_list.hasOwnProperty(tag)) status_list[tag]++; + else status_list[tag] = 1; } if (instance.hasOwnProperty('affiliation')) { let tag = instance.affiliation; - if (affiliates.hasOwnProperty(tag)) affiliates[tag]++; - else affiliates[tag] = 1; + if (affiliate_list.hasOwnProperty(tag)) affiliate_list[tag]++; + else affiliate_list[tag] = 1; } if (instance.hasOwnProperty('host')) { let tag = instance.host; - if (hosts.hasOwnProperty(tag)) hosts[tag]++; - else hosts[tag] = 1; + if (host_list.hasOwnProperty(tag)) host_list[tag]++; + else host_list[tag] = 1; } }); } else { @@ -82,15 +83,15 @@ host['name'] = key; //console.log('host: ', host); if (host.hasOwnProperty('domain') && !(host.hasOwnProperty('status') && host.status == 'retired')) { - host_data[key] = host; + hosts[key] = host; } } - console.log('webservices.affiliates: ', webservices.affiliates); + //console.log('webservices.affiliates: ', webservices.affiliates); for (let key in webservices.affiliates) { - console.log('key: ', key); + //console.log('key: ', key); let affiliate = webservices.affiliates[key]; - console.log('affiliate assignment: ', affiliate); - affiliate_data[key] = affiliate; + //console.log('affiliate assignment: ', affiliate); + affiliates[key] = affiliate; // if (affiliate.hasOwnProperty('name')) { // affiliate_data[key] = affiliate; // } @@ -106,18 +107,18 @@ total_instances: instances, active_services: current, candidate_services: future, - tech_tags: { - categories: categories, - analogues: analogues, - licenses: licenses + tech_lists: { + category_list: category_list, + analogue_list: analogue_list, + license_list: license_list }, - instance_tags: { - statuses: statuses, - affiliates: affiliates, - hosts: hosts + instance_lists: { + status_list: status_list, + affiliate_list: affiliate_list, + host_list: host_list }, - hosts: host_data, - affiliates: affiliate_data + hosts: hosts, + affiliates: affiliates }; } @@ -131,7 +132,6 @@ let keys = []; for (let key in ob) { keys.push(key); - //console.log('pushing key ' + key); }; return keys; } @@ -144,37 +144,38 @@ } } - function hostColours(hosts, colours, host_data) { + function hostColours(host_list, colours, hosts) { let host_array = {}; let i = 0; - //console.log('host_data:', host_data); + //console.log('hosts:', hosts); - hosts.forEach(function(host) { + host_list.forEach(function(host) { //console.log(host); - if (host_data[host].hasOwnProperty('domain') && host_data[host].hasOwnProperty('affiliation')) { + if (hosts[host].hasOwnProperty('domain') && hosts[host].hasOwnProperty('affiliation')) { host_array[host] = { "colour": colours[i++], - "domain": host_data[host].domain, - "affiliation": host_data[host].affiliation + "domain": hosts[host].domain, + "affiliation": hosts[host].affiliation } } }); return host_array; } - function affiliateColours(affiliates, colours, affiliate_data) { + function affiliateColours(affiliate_list, colours, affiliates) { let affiliate_array = {}; + let i = 0; - console.log('affiliate_data_full:', affiliate_data); + //console.log('affiliates:', affiliates); - for (const affiliate of affiliates) { - console.log('affiliate:', affiliate); - if (affiliate_data[affiliate].hasOwnProperty('name') && affiliate_data[affiliate].hasOwnProperty('website')) { + for (const affiliate of affiliate_list) { + //console.log('affiliate:', affiliate); + if (affiliates[affiliate].hasOwnProperty('name') && affiliates[affiliate].hasOwnProperty('website')) { affiliate_array[affiliate] = { "colour": colours[i++], - "name": affiliate_data[affiliate].name, - "website": affiliate_data[affiliate].website + "name": affiliates[affiliate].name, + "website": affiliates[affiliate].website } } } @@ -189,21 +190,21 @@ const technologies = results.active_services; //console.log(technologies); - const categories = getKeys(results.tech_tags.categories).sort(); - const analogues = getKeys(results.tech_tags.analogues).sort(); - const licenses = getKeys(results.tech_tags.licenses).sort(); - const statuses = getKeys(results.instance_tags.statuses).sort(); - const affiliates = getKeys(results.instance_tags.affiliates).sort(); - const hosts = getKeys(results.instance_tags.hosts).sort(); + const category_list = getKeys(results.tech_lists.category_list).sort(); + const analogue_list = getKeys(results.tech_lists.analogue_list).sort(); + const license_list = getKeys(results.tech_lists.license_list).sort(); + const status_list = getKeys(results.instance_lists.status_list).sort(); + const affiliate_list = getKeys(results.instance_lists.affiliate_list).sort(); + const host_list = getKeys(results.instance_lists.host_list).sort(); - const host_data = results.hosts; + const hosts = results.hosts; //console.log('host_data: ', results.hosts); - const affiliate_data = results.affiliates; - console.log('affiliate_data: ', results.affiliates); - const host_colours = hostColours(hosts, colours30, host_data); + const affiliates = results.affiliates; + //console.log('affiliate_data: ', results.affiliates); + const host_colours = hostColours(host_list, colours30, hosts); //console.log('host_colours:', host_colours); - const affiliate_colours = affiliateColours(affiliates, colours30, affiliate_data); - console.log('affiliate_colours:',affiliate_colours); + const affiliate_colours = affiliateColours(affiliate_list, colours30, affiliates); + //console.log('affiliate_colours:',affiliate_colours); //console.log('categories array: ', results.tech_tags.categories); //console.log('categories keys: ', categories); @@ -220,13 +221,13 @@
-
Categories: {#each categories as category}{category} {/each}
+
Categories: {#each category_list as category}{category} {/each}
-
Licenses: {#each licenses as license}{license} {/each}
+
Licenses: {#each license_list as license}{license} {/each}
-
Statuses: {#each statuses as status}{status} {/each}
Affiliates: {#each affiliates as affiliate}{affiliate} {/each}
-
Hosts: {#each hosts as host}{host} {/each}
+
Statuses: {#each status_list as status}{status} {/each}
Affiliates: {#each affiliate_list as affiliate} {affiliate} {/each}
+
Hosts: {#each host_list as host} {host} {/each}
@@ -237,18 +238,12 @@ {#if (technology.analogues)}

Alternative to {toOxfordCommaString(technology.analogues)}

{/if}

{technology.description}

{#if hasInstances(technology)} -
-
    - {#each technology.instances as instance} -
  • {instance.affiliation}
    • - {/each} -
+

{#each technology.instances as instance} + {/each}

{:else} -
-
    -
  • Nothing here yet...
    • -
+
+ Nothing here yet...
{/if}
@@ -284,17 +279,34 @@ } .tag { font-size: 80%; - color: #777; margin-right: 0.5em; - line-height: 2; - background-color: #a369a2; - color: #fff; - padding: 4px 8px; - border-radius: 10px; + line-height: 2.5; + padding: 6px 8px; + border-radius: 14px; white-space: nowrap; word-break: keep-all; } .tag:after { content: "\00a0"; } + .tag.category { + background-color: #a369a2; + color: #fff; + } + .tag.license { + background-color: #a369a2; + color: #fff; + } + .tag.status { + background-color: #a369a2; + color: #fff; + } + .tag.affiliate { + background-color: #fff; + color: #000; + } + .tag.host { + background-color: #fff; + color: #000; + } .tiles { display: grid; grid-gap: 15px; @@ -332,18 +344,19 @@ font-size: 80%; color: #555; } - .tile .instances { - background-color: #c2e6c2; + .instances { + background-color: #eee; position: absolute; bottom: 0; height: 3em; width: 100%; } - .tile .instances ul { - margin-bottom: 0px; + .instances .marker { + margin-right: 3px; } .webservices li { list-style-type: none; } .value { font-weight: bold; color: #000; } + .marker { vertical-align: middle; } .triangle { --side-size: 20px; border-left: var(--side-size) solid transparent; @@ -354,12 +367,15 @@ } .circle { height: 20px; - width: 50px; + width: 20px; background-color: #555; border-radius: 50%; + display: inline-block; } .square { height: 20px; - width: 50px; + width: 20px; + background-color: #555; + display: inline-block; }