initial commit with collapsible filters and filtering on categories
This commit is contained in:
Dave Lane
parent
a15ad889d1
commit
d2aab294bd
6 changed files with 150 additions and 145 deletions
|
|
@ -6,8 +6,11 @@
|
|||
import { references } from '$lib/references.js';
|
||||
import { colours } from '$lib/colours.js';
|
||||
|
||||
// the filters
|
||||
import { setFilter, getFilter } from '$lib/components/filter.js';
|
||||
import Filterable from '$lib/components/Filterable.svelte';
|
||||
// collapsible sections
|
||||
import CollapsibleSection from '$lib/components/CollapsibleSection.svelte'
|
||||
|
||||
//console.log('colours: ', colours);
|
||||
|
||||
|
|
@ -93,15 +96,9 @@
|
|||
hosts[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);
|
||||
affiliates[key] = affiliate;
|
||||
// if (affiliate.hasOwnProperty('name')) {
|
||||
// affiliate_data[key] = affiliate;
|
||||
// }
|
||||
}
|
||||
|
||||
return {
|
||||
|
|
@ -242,29 +239,38 @@
|
|||
const set2 = new Set(b);
|
||||
|
||||
const intersection = [...set1].filter((element) => set2.has(element));
|
||||
//console.log('intersection = ', intersection);
|
||||
console.log('intersection = ', intersection);
|
||||
return intersection;
|
||||
}
|
||||
|
||||
// converts a filter with id, name, and active fields into an array of names
|
||||
function flattenFilter(filter) {
|
||||
let flat = [];
|
||||
if (filter.constructor === Array) {
|
||||
filter.forEach(function(e) { if (e.active) flat.push(e.name) });
|
||||
}
|
||||
return flat;
|
||||
}
|
||||
|
||||
// filter technologies based on a list of Categories
|
||||
function filterTechnologiesByCategoryList(technologies, list) {
|
||||
console.log('looking for tech in categories: ', list);
|
||||
const included = [];
|
||||
technologies.forEach(function (tech, index) {
|
||||
//console.log('tech(' + index + '): ', tech);
|
||||
technologies.forEach(function (tech) {
|
||||
if (hasInstances(tech)) {
|
||||
const intersection = inCommon(tech.categories, list);
|
||||
//console.log('categories: ', tech.categories);
|
||||
//console.log('list: ', list);
|
||||
//console.log('intersection: ', intersection);
|
||||
console.log('intersection: ', intersection);
|
||||
if (intersection && intersection.constructor === Array) {
|
||||
//console.log('intersection length: '. intersection.length);
|
||||
//console.log('found intersection!', intersection.constructor);
|
||||
console.log('intersection length: ', intersection.length);
|
||||
if (intersection.length > 0) {
|
||||
//console.log('including tech: ', tech);
|
||||
included.push(tech);
|
||||
}
|
||||
} else {
|
||||
//console.log('intersection not array');
|
||||
console.log('intersection not array');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -273,7 +279,6 @@
|
|||
}
|
||||
|
||||
const results = processData(webservices);
|
||||
//console.log('results: ', results);
|
||||
|
||||
//const technologies = webservices.technologies;
|
||||
//console.log(technologies);
|
||||
|
|
@ -312,29 +317,20 @@
|
|||
const affiliate_colours = affiliateColours($affiliateFilter, colours, affiliates);
|
||||
console.log('affiliate_colours:',affiliate_colours);
|
||||
|
||||
//console.log('categories array: ', results.tech_tags.categories);
|
||||
//console.log('categories keys: ', categories);
|
||||
let filteredTechnologies;
|
||||
let technologies;
|
||||
|
||||
//console.log('references: ', references);
|
||||
/*console.log('category_list: ', category_list);
|
||||
//console.log('analogue_list: ', analogue_list);
|
||||
console.log('license_list: ', license_list);
|
||||
console.log('status_list: ', status_list);
|
||||
console.log('affiliate_list: ', affiliate_list);
|
||||
console.log('hosts_list: ', host_list);*/
|
||||
// reactive stuff...
|
||||
$: {
|
||||
console.log('about to filterTechnologiesByCategoryList');
|
||||
filteredTechnologies = filterTechnologiesByCategoryList(results.active_services, flattenFilter($categoryFilter));
|
||||
const technologies = sortTechnologies(filteredTechnologies);
|
||||
}
|
||||
|
||||
|
||||
const filtered_technologies = filterTechnologiesByCategoryList(
|
||||
results.active_services,
|
||||
references.full_category_list,
|
||||
// references.category_filter_list
|
||||
);
|
||||
const technologies = sortTechnologies(filtered_technologies);
|
||||
|
||||
function flipOn(list, id) {
|
||||
/*function flipOn(list, id) {
|
||||
console.log('list: ' + list + ', id: ' + id);
|
||||
return true;
|
||||
}
|
||||
}*/
|
||||
|
||||
</script>
|
||||
|
||||
|
|
@ -354,40 +350,54 @@
|
|||
<li>Total number of services: {results.total_instances}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="filters">
|
||||
<div class="filter categories">
|
||||
<Filterable filterValues={categoryFilter} context={'categories'}>
|
||||
<h2 slot="h2">Categories</h2>
|
||||
</Filterable>
|
||||
<CollapsibleSection headerText={'Show or Hide Filters'}>
|
||||
<div class="filters">
|
||||
<CollapsibleSection headerText={'Show or Hide Software Catergory Filter'}>
|
||||
<div class="filter categories">
|
||||
<Filterable filterValues={categoryFilter} context={'categories'}>
|
||||
<h2 slot="h2">Categories</h2>
|
||||
</Filterable>
|
||||
</div>
|
||||
</CollapsibleSection>
|
||||
<CollapsibleSection headerText={'Show or Hide Software Analogue Filter'}>
|
||||
<div class="filter analogues">
|
||||
<Filterable filterValues={analogueFilter} context={'analogues'}>
|
||||
<h2 slot="h2">Analogues</h2>
|
||||
</Filterable>
|
||||
</div>
|
||||
</CollapsibleSection>
|
||||
<CollapsibleSection headerText={'Show or Hide License Filter'}>
|
||||
<div class="filter licenses">
|
||||
<Filterable filterValues={licenseFilter} context={'licenses'}>
|
||||
<h2 slot="h2">Open Source & Copyleft Licenses</h2>
|
||||
</Filterable>
|
||||
</div>
|
||||
</CollapsibleSection>
|
||||
<CollapsibleSection headerText={'Show or Hide Service Status Filter'}>
|
||||
<div class="filter statuses">
|
||||
<Filterable filterValues={statusFilter} context={'statuses'}>
|
||||
<h2 slot="h2">Statuses</h2>
|
||||
</Filterable>
|
||||
</div>
|
||||
</CollapsibleSection>
|
||||
<CollapsibleSection headerText={'Show or Hide Service Affiliates Filter'}>
|
||||
<div class="filter affilates">
|
||||
<Filterable filterValues={affiliateFilter} context={'affiliates'}>
|
||||
<h2 slot="h2">Affiliates</h2>
|
||||
</Filterable>
|
||||
</div>
|
||||
</CollapsibleSection>
|
||||
<CollapsibleSection headerText={'Show or Hide Service Host filter'}>
|
||||
<div class="filter hosts">
|
||||
<Filterable filterValues={hostFilter} context={'hosts'}>
|
||||
<h2 slot="h2">Hosts</h2>
|
||||
</Filterable>
|
||||
</div>
|
||||
</CollapsibleSection>
|
||||
</div>
|
||||
<div class="filter analogues">
|
||||
<Filterable filterValues={analogueFilter} context={'analogues'}>
|
||||
<h2 slot="h2">Analogues</h2>
|
||||
</Filterable>
|
||||
</div>
|
||||
<div class="filter licenses">
|
||||
<Filterable filterValues={licenseFilter} context={'licenses'}>
|
||||
<h2 slot="h2">Open Source & Copyleft Licenses</h2>
|
||||
</Filterable>
|
||||
</div>
|
||||
<div class="filter statuses">
|
||||
<Filterable filterValues={statusFilter} context={'statuses'}>
|
||||
<h2 slot="h2">Statuses</h2>
|
||||
</Filterable>
|
||||
</div>
|
||||
<div class="filter affilates">
|
||||
<Filterable filterValues={affiliateFilter} context={'affiliates'}>
|
||||
<h2 slot="h2">Affiliates</h2>
|
||||
</Filterable>
|
||||
</div>
|
||||
<div class="filter hosts">
|
||||
<Filterable filterValues={hostFilter} context={'hosts'}>
|
||||
<h2 slot="h2">Hosts</h2>
|
||||
</Filterable>
|
||||
</div>
|
||||
</div>
|
||||
</CollapsibleSection>
|
||||
<div class="tiles">
|
||||
{#each filtered_technologies as technology}
|
||||
{#each filteredTechnologies as technology}
|
||||
<div class="tile technology">
|
||||
<div class="links">
|
||||
{#if technology.repository}<span class="repository"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue