From 5308987b82fd183d657885a014a9d82ff16299fb Mon Sep 17 00:00:00 2001
From: kaotisk <kaotisk@arching-kaos.org>
Date: Sat, 28 Dec 2024 07:38:52 +0200
Subject: Visual feedback for download
---
src/js/arching-kaos-file-system.js | 48 ++++++++++++++++++++++++++++++++++++++
src/js/arching-kaos-generator.js | 19 +++++++++++++--
2 files changed, 65 insertions(+), 2 deletions(-)
(limited to 'src')
diff --git a/src/js/arching-kaos-file-system.js b/src/js/arching-kaos-file-system.js
index 39ef5ed..77189e9 100644
--- a/src/js/arching-kaos-file-system.js
+++ b/src/js/arching-kaos-file-system.js
@@ -8,6 +8,8 @@
import { akfsGetChunkURL, akfsGetLeafURL, akfsGetMapURL } from "./url-generators.js";
import { archingKaosFetchBlob } from "./arching-kaos-fetch.js";
import { offerDownloadableData } from "./utils.js";
+import {archingKaosLog} from "./arching-kaos-log.js";
+import { makeElement } from "./arching-kaos-generator.js";
var thingy = {};
var leafs_counter = 0;
@@ -16,8 +18,26 @@ var first_chunk_spotted = 0;
var first_chunk_size = 0;
var final_array_seq = [];
var status = [];
+var workspace = [];
var output = "";
+function drawWorkSpace()
+{
+ var ele = {
+ element:"svg",
+ className: "akfsmap",
+ viewBox: "0 0 700 50",
+ version: "1.1",
+ width: 700,
+ height:50,
+ style:"background-color:#333;width: 100%;height:100%;",
+ xmlns: "http://www.w3.org/2000/svg",
+ innerHTML:[
+ ]
+ };
+ if ( document.querySelector('svg') === null ) makeElement(ele, document.querySelector('.results-area'));
+}
+
function akfsReset()
{
thingy = null;
@@ -31,11 +51,13 @@ function akfsReset()
status = [];
workspace = [];
output = "";
+ if ( document.querySelector('svg') !== null ) document.querySelector('svg').remove();
}
export function akfsGetMap(hash)
{
akfsReset();
+ drawWorkSpace();
archingKaosFetchBlob(akfsGetMapURL(hash), akfsFromMapGetLevelOneMapHash, [hash])
return hash;
}
@@ -159,6 +181,14 @@ function akfsChunkOrLeaf(reply, params)
else if ( hash === thingy.root_hash )
{
console.log("Current is a root_hash");
+ makeElement({
+ element:"circle",
+ id:`c-${hash}`,
+ fill:"red",
+ cx:1+(workspace[wsn].length+1)*3,
+ cy:2+((wsn-1)*3),
+ r:"1"
+ }, document.querySelector('svg'));
}
// if ( thingy[hash] !== undefined )
// {
@@ -172,17 +202,34 @@ function akfsChunkOrLeaf(reply, params)
tail: reply.split('\n')[1]
};
thingy.leafs[leaf.hash] = leaf;
+ document.querySelector(`#c-${leaf.hash}`).setAttribute("fill", "lightgreen");
status[leaf.hash] = 'ready';
status[leaf.head] = 'working';
archingKaosFetchBlob(akfsGetLeafURL(leaf.head), akfsChunkOrLeaf, [leaf.head, hash, wsn]);
archingKaosFetchBlob(akfsGetChunkURL(leaf.head), akfsChunkOrLeaf, [leaf.head, hash, wsn]);
workspace[wsn].push(leaf.head);
+ makeElement({
+ element:"circle",
+ id:`c-${leaf.head}`,
+ fill:"red",
+ cx:1+(workspace[wsn].length*3),
+ cy:2+((wsn)*3),
+ r:"1"
+ }, document.querySelector('svg'));
if ( leaf.head !== leaf.tail )
{
status[leaf.tail] = 'working';
archingKaosFetchBlob(akfsGetLeafURL(leaf.tail), akfsChunkOrLeaf, [leaf.tail, hash, wsn]);
archingKaosFetchBlob(akfsGetChunkURL(leaf.tail), akfsChunkOrLeaf, [leaf.tail, hash, wsn]);
workspace[wsn].push(leaf.tail);
+ makeElement({
+ element:"circle",
+ id:`c-${leaf.tail}`,
+ fill:"red",
+ cx:1+(workspace[wsn].length*3),
+ cy:2+((wsn)*3),
+ r:"1"
+ }, document.querySelector('svg'));
}
}
else if ( base64regexp.test(reply.replaceAll('\n', '')) && ( thingy.chunks[hash] === undefined ) )
@@ -197,6 +244,7 @@ function akfsChunkOrLeaf(reply, params)
hash: hash,
data: reply
};
+ document.querySelector(`#c-${chunk.hash}`).setAttribute("fill", "lightgreen");
archingKaosLog(`${hash} is a chunk`);
status[chunk.hash] = 'ready';
thingy.chunks[chunk.hash] = chunk;
diff --git a/src/js/arching-kaos-generator.js b/src/js/arching-kaos-generator.js
index d8f2f2b..a39a77b 100644
--- a/src/js/arching-kaos-generator.js
+++ b/src/js/arching-kaos-generator.js
@@ -7,10 +7,14 @@
export function makeElement(obj, attachTo)
{
- if (obj.element !== 'head' && obj.element !== 'body' )
+ if (obj.element !== 'head' && obj.element !== 'body' && obj.element !== 'svg' && obj.element !== 'circle')
{
var temp = document.createElement(obj.element);
}
+ else if ( obj.element === 'svg' || obj.element === 'circle' )
+ {
+ var temp = document.createElementNS("http://www.w3.org/2000/svg", obj.element);
+ }
else if ( obj.id !== null && document.querySelector('#'+obj.id) )
{
var temp = document.querySelector('#'+obj.id);
@@ -24,7 +28,7 @@ export function makeElement(obj, attachTo)
if ( obj.type !== undefined ) temp.type = obj.type;
if ( obj.content !== undefined ) temp.content = obj.content;
if ( obj.property !== undefined ) temp.property = obj.property;
- if ( obj.className !== undefined ) temp.className = obj.className;
+ if ( obj.className !== undefined && obj.element !== 'svg') temp.className = obj.className;
if ( obj.rel !== undefined ) temp.rel = obj.rel;
if ( obj.href !== undefined ) temp.href = obj.href;
if ( obj.style !== undefined ) temp.style = obj.style;
@@ -40,6 +44,17 @@ export function makeElement(obj, attachTo)
if ( obj.placeholder !== undefined ) temp.placeholder = obj.placeholder;
if ( obj.classes !== undefined ) temp.classList = obj.classes;
if ( obj.innerText !== undefined ) temp.innerText = obj.innerText;
+ if ( obj.viewBox !== undefined ) temp.setAttribute("viewBox", obj.viewBox);
+ if ( obj.cx !== undefined ) temp.setAttribute("cx", obj.cx);
+ if ( obj.cy !== undefined ) temp.setAttribute("cy", obj.cy);
+ if ( obj.r !== undefined ) temp.setAttribute("r", obj.r);
+ if ( obj.xmlns !== undefined ) temp.setAttribute("xmlns", obj.xmlns);
+ if ( obj.fill !== undefined ) temp.setAttribute("fill", obj.fill);
+ if ( obj.stroke !== undefined ) temp.setAttribute("stroke", obj.stroke);
+ if ( obj.strokeWidth !== undefined ) temp.setAttribute("stroke-width", obj.strokeWidth);
+ if ( obj.version !== undefined ) temp.setAttribute("version", obj.version);
+ if ( obj.width !== undefined ) temp.setAttribute("width", obj.width);
+ if ( obj.height !== undefined ) temp.setAttribute("height", obj.height);
if ( obj.innerHTML !== undefined && Array.isArray(obj.innerHTML) )
{
obj.innerHTML.forEach((value)=>{makeElement(value, temp)});
--
cgit v1.2.3