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

WIP just need to fix the filtering of technologies based on instance properties

Browse source
This commit is contained in:
Dave Lane 2024-11-19 10:59:01 +13:00
parent ccd493148f
commit d9361fe85c
6 changed files with 157 additions and 149 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/routes/+page.js
View file

@ -1,15 +1,17 @@
// 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,
affiliates: webservicesData.affiliates,
hosts: webservicesData.hosts
}
};
}
const webservicesResult = await fetch(
'https://static.magnificent.nz/webservices/webservices.json'
);
const webservicesData = await webservicesResult.json();
//console.log(webservicesData);
return {
webservices: {
technologies: webservicesData.technologies,
affiliates: webservicesData.affiliates,
hosts: webservicesData.hosts,
licenses: webservicesData.licenses
}
};
};

50
src/routes/+page.svelte
View file

@ -17,7 +17,7 @@
import { page } from '$app/stores';
let tabindex = 0; // a counter which facilitates keyboard navigation.
let showModal = true; // use to make a technology modal show when rendered
// return the % a is of b
function percent(a, b) {
@ -43,6 +43,7 @@
// actual objects
let hosts = [];
let affiliates = [];
let licenses = [];
//
// just a trivial reassignment
@ -119,6 +120,10 @@
let affiliate = webservices.affiliates[key];
affiliates[key] = affiliate;
}
for (let key in webservices.licenses) {
let license = webservices.licenses[key];
licenses[key] = license;
}
// assign stats based on gathered data...
stats.current = current.length;
@ -150,7 +155,8 @@
host_list: host_list
},
hosts: hosts,
affiliates: affiliates
affiliates: affiliates,
licenses: licenses
};
}
@ -281,6 +287,8 @@
return technologies.sort((a, b) => a.name.localeCompare(b.name));
}
// set previous and next on each technology
// generic function to find the intersection of two arrays
// approach ref: https://bobbyhadz.com/blog/javascript-get-intersection-of-two-arrays
function inCommon(a, b) {
@ -391,6 +399,7 @@
//
// process the data received by the web request!
const results = processData(webservices);
const licenses = results.licenses;
//const technologies = webservices.technologies;
//console.log(technologies);
@ -424,10 +433,12 @@
const affiliates = results.affiliates;
//console.log('affiliate_data: ', results.affiliates);
const host_colours = hostColours($hostFilter, colours, hosts);
console.log('host_colours:', host_colours);
//console.log('host_colours:', host_colours);
colours.sort();
const affiliate_colours = affiliateColours($affiliateFilter, colours, affiliates);
console.log('affiliate_colours:',affiliate_colours);
//console.log('affiliate_colours:',affiliate_colours);
//console.log('licenses:',licenses );
let filteredTechnologies;
let technologies;
@ -466,16 +477,16 @@
'license',
flattenFilter($licenseFilter)
);
/*console.log(
'about to sort technologies alphabetically - starting with ' +
console.log(
'about to filter technologies by instance status - starting with ' +
filteredTechnologies.length +
' technologies...'
);*/
);
/*filteredTechnologies = filterTechnologiesByInstanceValue(
filteredTechnologies,
'status',
flattenFilter($statusFilter)
)*/
)
/*filteredTechnologies = filterTechnologiesByInstanceValue(
filteredTechnologies,
'affiliate',
@ -488,8 +499,13 @@
)*/
//filteredTechnologies = filterTechnologiesByCategoryList(results.all_services, flattenFilter($categoryFilter));
console.log(
'about to sort technologies alphabetically - starting with ' +
filteredTechnologies.length +
' technologies...'
);
const technologies = sortTechnologies(filteredTechnologies);
console.log('finally have ' + technologies.length + ' technologies left to show...');
//console.log('finally have ' + technologies.length + ' technologies left to show...');
}
</script>
@ -597,9 +613,7 @@
context={'categories'}>
<h2 slot="title">Categories</h2>
<p slot="description">
You can These are general categories of software which help you understand the
sort of software you're looking at, as well as identifying functionally similar
software for comparison.
These are general categories of software which help you understand the sort of software you're looking at, as well as identifying functionally similar software for comparison.
</p>
</Filterable>
</div>
@ -691,10 +705,16 @@
</Accordion>
</Accordions>
<p>Showing {filteredTechnologies.length} technology tiles.</p>
<p>Current URL: {$page.url}...</p>
<!--<p>Current URL: {$page.url}...</p>-->
<div class="tiles">
{#each filteredTechnologies as technology}
<TechnologyTile {technology} {affiliate_colours} />
{#each filteredTechnologies as technology, index}
<!--{#if (index != 1) }-->
<TechnologyTile {technology} {affiliate_colours} {licenses}/>
<!--{:else}
<TechnologyTile {technology} {affiliate_colours} {licenses} {showModal}/>
{/if}-->
{:else}
<p class='no-tiles'>No technologies are selected</p>
{/each}
</div>
</div>