wip, all messy

2024-08-18 22:56:20 +12:00 · 2024-08-18 22:56:20 +12:00 · 29c3d48da6
commit 29c3d48da6
parent 83b028f881
4 changed files with 222 additions and 85 deletions
--- 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" ];
--- 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",
--- 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"
 	},
--- 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 @@
    </div>
    <div class="filters">
        <div class="tag-list tech">
-            <div class="tags tech categories">{#each categories as category}<span class="tag category">{category}</span> {/each}</div>
+            <div class="tags tech categories">Categories: {#each categories as category}<span class="tag category">{category}</span> {/each}</div>
            <!--<div class="tags tech analogues">{#each analogues as analogue}<span class="tag analogue">{analogue}</span> {/each}</div>-->
-            <div class="tags tech licenses">{#each licenses as license}<span class="tag license">{license}</span> {/each}</div>
+            <div class="tags tech licenses">Licenses: {#each licenses as license}<span class="tag license">{license}</span> {/each}</div>
        </div>
        <div class="tag-list instance">
-            <div class="tags instance statuses">{#each statuses as status}<span class="tag status">{status}</span> {/each}</div>            <div class="tags instance affiliates">{#each affiliates as affiliate}<span class="tag affilate">{affiliate}</span> {/each}</div>
-            <div class="tags instance hosts">{#each hosts as host}<span class="tag host">{host}</span> {/each}</div>
+            <div class="tags instance statuses">Statuses: {#each statuses as status}<span class="tag status">{status}</span> {/each}</div>            <div class="tags instance affiliates">Affiliates: {#each affiliates as affiliate}<span class="tag affilate">{affiliate}</span> {/each}</div>
+            <div class="tags instance hosts">Hosts: {#each hosts as host}<span class="tag host">{host}</span> {/each}</div>
        </div>
    </div>
    <div class="tiles">
        {#each technologies as technology}
        <div class="tile technology">
-            <div class="tile-inner">
-                <div class="tile-front">
-                    <h2><a href="{technology.website}">{technology.name}</a></h2>
-                    {#if (technology.license)}<p class="license" title="The libre license for this project">License: <span class="value">{technology.license}</span></p>{/if}
-                    {#if (technology.analogues)}<p class="analogues">Alternative to <span class="value">{toOxfordCommaString(technology.analogues)}</span></p>{/if}
-                    <p class="description">{technology.description}</p>
-                </div>
-                <div class="tile-back">
-                    {#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 cell">
-                        <ul class="instances">
-                            <li>Nothing here yet...</li>
-                        </ul>
-                    </div>
-                    {/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}
+            {#if (technology.analogues)}<p class="analogues">Alternative to <span class="value">{toOxfordCommaString(technology.analogues)}</span></p>{/if}
+            <p class="description">{technology.description}</p>
+            {#if hasInstances(technology)}
+            <div class="instances">
+                <ul class="instances">
+                    {#each technology.instances as instance}
+                    <li><a href="https://{instance.domain}"><span style="{affiliate_colours[instance.affiliate]}.colour"></span></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}
        </div>
        {/each}
    </div>
@ -194,7 +259,7 @@
 <style>
    .webservices {
        display: grid;
-        width: 90%;
+        width: 96%;
        margin: 0 auto 3em auto;
        padding: 0;
    }
@ -237,60 +302,64 @@
    }
    /* flip card stuff: https://www.w3schools.com/howto/howto_css_flip_card.asp */
    .tile {
-        height: 460px;
+        height: 400px;
        min-width: 250px;
        max-width: 400px;
-        /*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;
+        position: relative;
    }
-    .tile-back {
-        background-color: #3b559;
-        transform: rotateY(180deg);
-    }
-    .tile-front h2 {
+    .tile 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 {
+    .tile h2 a { color: #e6c4fc; }
+    .tile h2 a:visited { color: #ced0ff; }
+    .tile h2 a:hover { color: #fff; }
+    .tile .description {
+        height: 200px;
        text-overflow: ellipsis;
        overflow: hidden;
-        height: 100%;
    }
-    .tile-front p {
+    .tile p {
        padding: 0 1em 0.2em 1em;
+        font-size: 80%;
+        color: #555;
+    }
+    .tile .instances {
+        background-color: #c2e6c2;
+        position: absolute;
+        bottom: 0;
+        height: 3em;
+        width: 100%;
+    }
+    .tile .instances ul {
+        margin-bottom: 0px;
    }
    .webservices li { list-style-type: none; }
-    .value { font-weight: bold; }
+    .value { font-weight: bold; color: #000; }
+    .triangle {
+        --side-size: 20px;
+        border-left: var(--side-size) solid transparent;
+        border-right: var(--side-size) solid transparent;
+        border-bottom: calc(2 * var(--side-size) * 0.866) solid green;
+        border-top: var(--side-size) solid transparent;
+        display: inline-block;
+    }
+    .circle {
+        height: 20px;
+        width: 50px;
+        background-color: #555;
+        border-radius: 50%;
+    }
+    .square {
+        height: 20px;
+        width: 50px;
+    }
 </style>