initial commit of new code to manage filters
This commit is contained in:
Dave Lane
parent
78dcd84341
commit
a15ad889d1
3 changed files with 334 additions and 86 deletions
|
|
@ -6,11 +6,12 @@
|
|||
import { references } from '$lib/references.js';
|
||||
import { colours } from '$lib/colours.js';
|
||||
|
||||
import { setFilter, getFilter } from '$lib/components/filter.js';
|
||||
import Filterable from '$lib/components/Filterable.svelte';
|
||||
|
||||
//console.log('colours: ', colours);
|
||||
|
||||
//
|
||||
//function
|
||||
|
||||
//
|
||||
// digest and return useful info from the Webservices JSON feed
|
||||
function processData(webservices) {
|
||||
let instances = 0;
|
||||
|
|
@ -129,19 +130,26 @@
|
|||
tech.hasOwnProperty('instances') &&
|
||||
tech.instances.constructor === Array &&
|
||||
tech.instances.length
|
||||
)
|
||||
return true;
|
||||
) return true;
|
||||
return false;
|
||||
}
|
||||
|
||||
// return an array of keys from an object
|
||||
function getKeys(ob) {
|
||||
// return an object with ob's keys ordered alphabetically, with an idfrom an object
|
||||
function getSortedFilter(ob) {
|
||||
let keys = [];
|
||||
let i = 0;
|
||||
let key_array = [];
|
||||
// first create a flat array.
|
||||
for (let key in ob) {
|
||||
//keys.push(key.replace(/ /g, '\u00a0'));
|
||||
keys.push(key);
|
||||
}
|
||||
return keys;
|
||||
// sort the array alphabetically
|
||||
keys.sort();
|
||||
// then create a dictionary of them
|
||||
keys.forEach(function(name) {
|
||||
key_array.push({ "id": i++, "name": name, "active": true });
|
||||
});
|
||||
return key_array;
|
||||
}
|
||||
|
||||
// get intersection: ref https://bobbyhadz.com/blog/javascript-get-intersection-of-two-arrays
|
||||
|
|
@ -173,22 +181,26 @@
|
|||
|
||||
// assign colours from a set of differentiated colours to a list of tags...
|
||||
// this one is for 'hosts'
|
||||
//
|
||||
// host_list is in the form of
|
||||
function hostColours(host_list, colours, hosts) {
|
||||
let host_array = {};
|
||||
let i = 0;
|
||||
|
||||
//console.log('hosts:', hosts);
|
||||
console.log('hosts:', hosts);
|
||||
console.log('host_list:', host_list);
|
||||
|
||||
host_list.forEach(function (host) {
|
||||
//console.log(host);
|
||||
if (hosts[host].hasOwnProperty('domain') && hosts[host].hasOwnProperty('affiliation')) {
|
||||
host_array[host] = {
|
||||
for (let index in host_list) {
|
||||
console.log(host_list[index]);
|
||||
let hostname = host_list[index].name;
|
||||
if (hosts[hostname].hasOwnProperty('domain') && hosts[hostname].hasOwnProperty('affiliation')) {
|
||||
host_array[hostname] = {
|
||||
colour: colours[i++],
|
||||
domain: hosts[host].domain,
|
||||
affiliation: hosts[host].affiliation
|
||||
domain: hosts[hostname].domain,
|
||||
affiliation: hosts[hostname].affiliation
|
||||
};
|
||||
}
|
||||
});
|
||||
}
|
||||
return host_array;
|
||||
}
|
||||
|
||||
|
|
@ -201,8 +213,9 @@
|
|||
//console.log('affiliates:', affiliates);
|
||||
console.log('affiliate_list:', affiliate_list);
|
||||
|
||||
for (const affiliate of affiliate_list) {
|
||||
for (let index in affiliate_list) {
|
||||
//console.log('affiliate:', affiliate);
|
||||
let affiliate = affiliate_list[index].name;
|
||||
if (
|
||||
affiliates[affiliate].hasOwnProperty('name') &&
|
||||
affiliates[affiliate].hasOwnProperty('website')
|
||||
|
|
@ -229,7 +242,7 @@
|
|||
const set2 = new Set(b);
|
||||
|
||||
const intersection = [...set1].filter((element) => set2.has(element));
|
||||
console.log('intersection = ', intersection);
|
||||
//console.log('intersection = ', intersection);
|
||||
return intersection;
|
||||
}
|
||||
|
||||
|
|
@ -241,17 +254,17 @@
|
|||
//console.log('tech(' + index + '): ', tech);
|
||||
if (hasInstances(tech)) {
|
||||
const intersection = inCommon(tech.categories, list);
|
||||
console.log('categories: ', tech.categories);
|
||||
//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);
|
||||
if (intersection.length > 0) {
|
||||
console.log('including tech: ', tech);
|
||||
//console.log('including tech: ', tech);
|
||||
included.push(tech);
|
||||
}
|
||||
} else {
|
||||
console.log('intersection not array');
|
||||
//console.log('intersection not array');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -265,33 +278,50 @@
|
|||
//const technologies = webservices.technologies;
|
||||
//console.log(technologies);
|
||||
|
||||
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();
|
||||
// set up filters for each type
|
||||
setFilter('categories');
|
||||
setFilter('analogues');
|
||||
setFilter('licenses');
|
||||
setFilter('statuses');
|
||||
setFilter('affiliates');
|
||||
setFilter('hosts');
|
||||
|
||||
// define the handle for each writable
|
||||
const categoryFilter = getFilter('categories');
|
||||
const analogueFilter = getFilter('analogues');
|
||||
const licenseFilter = getFilter('licenses');
|
||||
const statusFilter = getFilter('statuses');
|
||||
const affiliateFilter = getFilter('affiliates');
|
||||
const hostFilter = getFilter('hosts');
|
||||
|
||||
// populate the writable with actual data
|
||||
$categoryFilter = getSortedFilter(results.tech_lists.category_list);
|
||||
$analogueFilter = getSortedFilter(results.tech_lists.analogue_list);
|
||||
$licenseFilter = getSortedFilter(results.tech_lists.license_list);
|
||||
$statusFilter = getSortedFilter(results.instance_lists.status_list);
|
||||
$affiliateFilter = getSortedFilter(results.instance_lists.affiliate_list);
|
||||
$hostFilter = getSortedFilter(results.instance_lists.host_list);
|
||||
|
||||
const hosts = results.hosts;
|
||||
//console.log('host_data: ', results.hosts);
|
||||
console.log('host_data: ', results.hosts);
|
||||
const affiliates = results.affiliates;
|
||||
//console.log('affiliate_data: ', results.affiliates);
|
||||
const host_colours = hostColours(host_list, colours, hosts);
|
||||
//console.log('host_colours:', host_colours);
|
||||
console.log('affiliate_data: ', results.affiliates);
|
||||
const host_colours = hostColours($hostFilter, colours, hosts);
|
||||
console.log('host_colours:', host_colours);
|
||||
colours.sort();
|
||||
const affiliate_colours = affiliateColours(affiliate_list, colours, affiliates);
|
||||
//console.log('affiliate_colours:',affiliate_colours);
|
||||
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);
|
||||
|
||||
console.log('references: ', references);
|
||||
console.log('category_list: ', category_list);
|
||||
//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);
|
||||
console.log('hosts_list: ', host_list);*/
|
||||
|
||||
|
||||
const filtered_technologies = filterTechnologiesByCategoryList(
|
||||
|
|
@ -300,6 +330,12 @@
|
|||
// references.category_filter_list
|
||||
);
|
||||
const technologies = sortTechnologies(filtered_technologies);
|
||||
|
||||
function flipOn(list, id) {
|
||||
console.log('list: ' + list + ', id: ' + id);
|
||||
return true;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<div class="webservices">
|
||||
|
|
@ -319,25 +355,35 @@
|
|||
</ul>
|
||||
</div>
|
||||
<div class="filters">
|
||||
<div class="tag-list tech">
|
||||
<div class="tags tech categories">
|
||||
Categories<br/> {#each category_list as category}<span class="tag on category" style="white-space: nowrap; word-break: normal;">{category}</span><wbr/>{/each}
|
||||
</div>
|
||||
<!--<div class="tags tech analogues">{#each analogues as analogue}<span class="tag analogue">{analogue}</span> {/each}</div>-->
|
||||
<div class="tags tech licenses">
|
||||
Licenses<br/> {#each license_list as license}<span class="tag on license">{license}</span><wbr/>{/each}
|
||||
</div>
|
||||
<div class="filter categories">
|
||||
<Filterable filterValues={categoryFilter} context={'categories'}>
|
||||
<h2 slot="h2">Categories</h2>
|
||||
</Filterable>
|
||||
</div>
|
||||
<div class="tag-list instance">
|
||||
<div class="tags instance statuses">
|
||||
Statuses<br/> {#each status_list as status}<span class="tag on status">{status}</span><wbr/>{/each}
|
||||
</div>
|
||||
<div class="tags instance affiliates">
|
||||
Affiliates<br/> {#each affiliate_list as affiliate}<span class="tag on affiliate"><span class="marker circle" style="background-color: {affiliate_colours[affiliate].colour}"></span> {affiliate}</span><wbr/>{/each}
|
||||
</div>
|
||||
<div class="tags instance hosts">
|
||||
Hosts<br/> {#each host_list as host}<span class="tag on host"><span class="marker square" style="background-color: {host_colours[host].colour}"></span> {host}</span><wbr/>{/each}
|
||||
</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>
|
||||
<div class="tiles">
|
||||
|
|
@ -356,12 +402,11 @@
|
|||
>{/if}
|
||||
</div>
|
||||
<h2><a href={technology.website}>{technology.name}</a></h2>
|
||||
{#if technology.license}<p
|
||||
class="license"
|
||||
title="The libre license for this project is {technology.license}"
|
||||
>
|
||||
License: <span class="value">{technology.license}</span>
|
||||
</p>{/if}
|
||||
<p class="description">
|
||||
{technology.description}{#if technology.extended_description}<span
|
||||
title={technology.extended_description}>i</span
|
||||
>{/if}
|
||||
</p>
|
||||
{#if technology.categories}<p class="categories">
|
||||
{pluraliser('Category', 'Categories', technology.categories.length)}:
|
||||
<span class="value">{toOxfordCommaString(technology.categories)}</span>
|
||||
|
|
@ -369,11 +414,12 @@
|
|||
{#if technology.analogues}<p class="analogues">
|
||||
Alternative to <span class="value">{toOxfordCommaString(technology.analogues)}</span>
|
||||
</p>{/if}
|
||||
<p class="description">
|
||||
{technology.description}{#if technology.extended_description}<span
|
||||
title={technology.extended_description}>i</span
|
||||
>{/if}
|
||||
</p>
|
||||
{#if technology.license}<p
|
||||
class="license"
|
||||
title="The libre license for this project is {technology.license}"
|
||||
>
|
||||
License: <span class="value">{technology.license}</span>
|
||||
</p>{/if}
|
||||
{#if hasInstances(technology)}
|
||||
<div class="instances">
|
||||
<p>
|
||||
|
|
@ -482,7 +528,7 @@
|
|||
/*width: 290px;*/
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 5px 5px 3px #71ba71;
|
||||
box-shadow: 5px 5px 3px #6a6d6a;
|
||||
border: solid 3px #1e6831;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
|
@ -497,7 +543,7 @@
|
|||
font-size: 90%;
|
||||
}
|
||||
.tile:hover {
|
||||
box-shadow: 10px 10px 6px #71ba71;
|
||||
box-shadow: 10px 10px 6px #727372;
|
||||
}
|
||||
.tile .links h2 a {
|
||||
color: #e6c4fc;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue