[fs] Adds AKFS GET form

10 files changed, 326 insertions, 167 deletions

diff --git a/src/js/ui/components/akfsGet/index.js b/src/js/ui/components/akfsGet/index.js
new file mode 100644
index 0000000..9fe0a9e
--- /dev/null
+++ b/src/js/ui/components/akfsGet/index.js
@@ -0,0 +1,46 @@
+// Arching Kaos Welcome Section
+//
+// Kaotisk Hund - 2024
+//
+// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0
+//
+
+const label = {
+    element : "h3",
+    innerText: "Get a file via AKFS"
+};
+
+const input = {
+    element: "input",
+    id:"hash-field",
+    type:"text",
+    name:"search",
+    placeholder:"Enter a hash"
+};
+
+const button = {
+    element:"button",
+    onclick:"akfsGetMap(this.parentElement.querySelector('#hash-field').value)",
+    innerText:"Get!"
+}
+
+const container = {
+    element: "div",
+    style:"padding: 1vh 1vw; display: flex; flex-direction: row; align-items: center; gap: 10px;",
+    innerHTML: [
+        input,
+        button
+    ]
+};
+
+
+export const akfsGetForm = {
+    element: "div",
+    style:"padding: 1vh 1vw; display: flex; flex-direction: column; align-items: center; gap: 10px;",
+    innerHTML: [
+        label,
+        container
+    ]
+}
+
+// @license-end
diff --git a/src/js/ui/components/homeGrid/index.js b/src/js/ui/components/homeGrid/index.js
new file mode 100644
index 0000000..004057c
--- /dev/null
+++ b/src/js/ui/components/homeGrid/index.js
@@ -0,0 +1,51 @@
+// Arching Kaos Welcome Section
+//
+// Kaotisk Hund - 2024
+//
+// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0
+//
+
+export const homeGrid = {
+    element: "div",
+    id: "home-grid",
+    innerHTML: [
+        {
+            element:"button",
+            className:"menu-clickable",
+            id:"#/mixtapes-section",
+            onclick:"menusel(this)",
+            style:"background-image: url(img/mixtapes-logo.png); background-repeat: round;"
+        },
+        {
+            element:"button",
+            className:"menu-clickable",
+            id:"#/news-section",
+            onclick:"menusel(this)",
+            style:"background-image: url(img/news-logo.png); background-repeat: round;"
+        },
+        {
+            element:"button",
+            className:"menu-clickable",
+            id:"#/chat-section",
+            onclick:"menusel(this)",
+            style:"background-image: url(img/chat-logo.png); background-repeat: round;"
+        },
+        {
+            element:"button",
+            className:"menu-clickable",
+            id:"#/radio-section",
+            onclick:"menusel(this)",
+            style:"background-image: url(img/radio-logo.png); background-repeat: round; background-size: cover;"
+        },
+        {
+            element:"button",
+            className:"menu-clickable",
+            id:"#/stats-section",
+            onclick:"menusel(this)",
+            // innerText:"Stats",
+            style:"background-image: url(img/stats-logo.png); background-repeat: round; background-size: cover;"
+        }
+    ]
+};
+
+// @license-end
diff --git a/src/js/ui/components/logsArea/index.js b/src/js/ui/components/logsArea/index.js
new file mode 100644
index 0000000..5782b87
--- /dev/null
+++ b/src/js/ui/components/logsArea/index.js
@@ -0,0 +1,24 @@
+// Arching Kaos Welcome Section
+//
+// Kaotisk Hund - 2024
+//
+// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0
+//
+
+export const logsArea = {
+    element: "details",
+    id: "logs-area",
+    innerHTML: [
+        {
+            element: "summary",
+            innerText: "Logs (click to expand)"
+        },
+        {
+            element: "div",
+            style: "font-size: 9px;",
+            id: "logs-area-element"
+        }
+    ]
+};
+
+// @license-end
diff --git a/src/js/ui/components/manualPeer/index.js b/src/js/ui/components/manualPeer/index.js
new file mode 100644
index 0000000..6a78f71
--- /dev/null
+++ b/src/js/ui/components/manualPeer/index.js
@@ -0,0 +1,45 @@
+// Arching Kaos Welcome Section
+//
+// Kaotisk Hund - 2024
+//
+// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0
+//
+
+const label = {
+    element : "h3",
+    innerText: "Connect to specific peer manually"
+};
+
+const input = {
+    element: "input",
+    id:"peer-field",
+    type:"text",
+    name:"search",
+    placeholder:"Enter an arching-kaos node address"
+};
+
+const button = {
+    element:"button",
+    onclick:"seekPeer(this.parentElement.querySelector('#peer-field').value, ['search', false])",
+    innerText:"Try"
+};
+
+const container = {
+    element: "div",
+    style:"padding: 1vh 1vw; display: flex; flex-direction: row; align-items: center; gap: 10px;",
+    innerHTML: [
+        input,
+        button
+    ]
+};
+
+export const manualPeerForm = {
+    element: "div",
+    style:"padding: 1vh 1vw; display: flex; flex-direction: column; align-items: center; gap: 10px;",
+    innerHTML: [
+        label,
+        container
+    ]
+};
+
+// @license-end
diff --git a/src/js/ui/components/previewArea/index.js b/src/js/ui/components/previewArea/index.js
new file mode 100644
index 0000000..153fe6f
--- /dev/null
+++ b/src/js/ui/components/previewArea/index.js
@@ -0,0 +1,13 @@
+// Arching Kaos Welcome Section
+//
+// Kaotisk Hund - 2024
+//
+// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0
+//
+
+export const previewArea = {
+    element: "div",
+    className: "preview"
+};
+
+// @license-end
diff --git a/src/js/ui/components/progressArea/index.js b/src/js/ui/components/progressArea/index.js
new file mode 100644
index 0000000..428481b
--- /dev/null
+++ b/src/js/ui/components/progressArea/index.js
@@ -0,0 +1,33 @@
+// Arching Kaos Welcome Section
+//
+// Kaotisk Hund - 2024
+//
+// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0
+//
+
+export const progressArea = {
+    element: "div",
+    className: "dialog",
+    innerHTML: [
+        {
+            element: "h3",
+            innerText: "Progress"
+        },
+        {
+            element: "progress",
+            id: "total-progress",
+            value: 0
+        },
+        {
+            element: "progress",
+            id: "http-progress",
+            value: 0
+        },
+        {
+            element: "pre",
+            id: "current-log-message"
+        }
+    ]
+};
+
+// @license-end
diff --git a/src/js/ui/components/renderForm/index.js b/src/js/ui/components/renderForm/index.js
new file mode 100644
index 0000000..ed9e4b7
--- /dev/null
+++ b/src/js/ui/components/renderForm/index.js
@@ -0,0 +1,45 @@
+// Arching Kaos Welcome Section
+//
+// Kaotisk Hund - 2024
+//
+// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0
+//
+
+const label = {
+    element : "h3",
+    innerText: "Render explicit zblock"
+};
+
+const input = {
+    element: "input",
+    id:"search-field",
+    type:"text",
+    name:"search",
+    placeholder:"Enter a zblock hash"
+};
+
+const button = {
+    element:"button",
+    onclick:"seekZblock(this.parentElement.querySelector('#search-field').value, ['search', false])",
+    innerText:"Render"
+}
+
+const container = {
+    element: "div",
+    style:"padding: 1vh 1vw; display: flex; flex-direction: row; align-items: center; gap: 10px;",
+    innerHTML: [
+        input,
+        button
+    ]
+};
+
+export const renderForm = {
+    element: "div",
+    style:"padding: 1vh 1vw; display: flex; flex-direction: column; align-items: center; gap: 10px;",
+    innerHTML: [
+        label,
+        container
+    ]
+};
+
+// @license-end
diff --git a/src/js/ui/components/resultsArea/index.js b/src/js/ui/components/resultsArea/index.js
new file mode 100644
index 0000000..58b72ca
--- /dev/null
+++ b/src/js/ui/components/resultsArea/index.js
@@ -0,0 +1,19 @@
+// Arching Kaos Welcome Section
+//
+// Kaotisk Hund - 2024
+//
+// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0
+//
+
+export const resultsArea = {
+    element: "div",
+    className: "results-area",
+    innerHTML: [
+        {
+            element: "h3",
+            innerText: "Results"
+        }
+    ]
+};
+
+// @license-end
diff --git a/src/js/ui/components/scanButtons/index.js b/src/js/ui/components/scanButtons/index.js
new file mode 100644
index 0000000..2e7d33b
--- /dev/null
+++ b/src/js/ui/components/scanButtons/index.js
@@ -0,0 +1,35 @@
+// Arching Kaos Welcome Section
+//
+// Kaotisk Hund - 2024
+//
+// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0
+//
+
+export const scanMethodsArea = {
+    element: "div",
+    id: "scan-methods-area",
+    innerHTML: [
+        {
+            element: "h3",
+            innerText: "Manual scan"
+        },
+        {
+            element: "div",
+            id: "manual-scan-section",
+            innerHTML: [
+                {
+                    element: "div",
+                    className: "manual-scan",
+                    innerHTML: [
+                        { element:"button", onclick:"scanStellarNetworkForPeers()", innerText:"Check Stellar Network"},
+                        { element:"button", onclick:"checkLocalNodeInfo()", innerText:"Check local Node"},
+                        { element:"button", onclick:"checkLocalPeers()", innerText:"Check local Peers"},
+                        { element:"button", onclick:"checkLocalSchain()", innerText:"Check Local Schain"}
+                    ]
+                }
+            ]
+        },
+    ]
+}
+
+// @license-end
diff --git a/src/js/ui/sections/welcomeSection.js b/src/js/ui/sections/welcomeSection.js
index cfa6816..72c9646 100644
--- a/src/js/ui/sections/welcomeSection.js
+++ b/src/js/ui/sections/welcomeSection.js
@@ -6,6 +6,15 @@
 //
 
 import { makeElement } from "../../arching-kaos-generator.js";
+import { homeGrid } from "../components/homeGrid/index.js";
+import { scanMethodsArea } from "../components/scanButtons/index.js";
+import { akfsGetForm } from "../components/akfsGet/index.js";
+import { renderForm } from "../components/renderForm/index.js";
+import { manualPeerForm } from "../components/manualPeer/index.js";
+import { progressArea } from "../components/progressArea/index.js";
+import { logsArea } from "../components/logsArea/index.js";
+import { previewArea } from "../components/previewArea/index.js";
+import { resultsArea } from "../components/resultsArea/index.js";
 
 var whereAmI = {
     element: "div",
@@ -22,180 +31,20 @@ var greeting = {
     innerText: "Welcome to Arching Kaos project."
 };
 
-var homeGrid = {
-    element: "div",
-    id: "home-grid",
-    innerHTML: [
-        {
-            element:"button",
-            className:"menu-clickable",
-            id:"#/mixtapes-section",
-            onclick:"menusel(this)",
-            style:"background-image: url(img/mixtapes-logo.png); background-repeat: round;"
-        },
-        {
-            element:"button",
-            className:"menu-clickable",
-            id:"#/news-section",
-            onclick:"menusel(this)",
-            style:"background-image: url(img/news-logo.png); background-repeat: round;"
-        },
-        {
-            element:"button",
-            className:"menu-clickable",
-            id:"#/chat-section",
-            onclick:"menusel(this)",
-            style:"background-image: url(img/chat-logo.png); background-repeat: round;"
-        },
-        {
-            element:"button",
-            className:"menu-clickable",
-            id:"#/radio-section",
-            onclick:"menusel(this)",
-            style:"background-image: url(img/radio-logo.png); background-repeat: round; background-size: cover;"
-        },
-        {
-            element:"button",
-            className:"menu-clickable",
-            id:"#/stats-section",
-            onclick:"menusel(this)",
-            // innerText:"Stats",
-            style:"background-image: url(img/stats-logo.png); background-repeat: round; background-size: cover;"
-        }
-    ]
-};
-
-var renderTitle = {
-    element : "h3",
-    innerText: "Render explicit zblock"
-};
-
-var renderForm = {
-    element: "div",
-    style:"padding: 1vh 1vw; display: flex; flex-direction: row; align-items: center; gap: 10px;",
-    innerHTML: [
-        {
-            element: "input",
-            id:"search-field",
-            type:"text",
-            name:"search",
-            placeholder:"Enter a zblock hash"
-        },
-        {
-            element:"button",
-            onclick:"seekZblock(this.parentElement.querySelector('#search-field').value, ['search', false])",
-            innerText:"Render"
-        }
-    ]
-};
-
-var manualPeerTitle = {
-    element : "h3",
-    innerText: "Connect to specific peer manually"
-};
-
-var manualPeerForm = {
-    element: "div",
-    style:"padding: 1vh 1vw; display: flex; flex-direction: row; align-items: center; gap: 10px;",
-    innerHTML: [
-        {
-            element: "input",
-            id:"peer-field",
-            type:"text",
-            name:"search",
-            placeholder:"Enter an arching-kaos node address"
-        },
-        {
-            element:"button",
-            onclick:"seekPeer(this.parentElement.querySelector('#peer-field').value, ['search', false])",
-            innerText:"Try"
-        }
-    ]
-};
-
 var content = {
     element : "div",
     className: "content",
     innerHTML: [
         greeting,
         homeGrid,
-        renderTitle,
         renderForm,
-        manualPeerTitle,
+        akfsGetForm,
         manualPeerForm,
-        {
-            element: "div",
-            className: "results-area",
-            innerHTML: [
-                {
-                    element: "h3",
-                    innerText: "Results"
-                }
-            ]
-        },
-        {
-            element: "h3",
-            innerText: "Manual scan"
-        },
-        {
-            element: "div",
-            id: "manual-scan-section",
-            innerHTML: [
-                {
-                    element: "div",
-                    className: "manual-scan",
-                    innerHTML: [
-                        { element:"button", onclick:"scanStellarNetworkForPeers()", innerText:"Check Stellar Network"},
-                        { element:"button", onclick:"checkLocalNodeInfo()", innerText:"Check local Node"},
-                        { element:"button", onclick:"checkLocalPeers()", innerText:"Check local Peers"},
-                        { element:"button", onclick:"checkLocalSchain()", innerText:"Check Local Schain"}
-                    ]
-                }
-            ]
-        },
-        {
-            element: "div",
-            className: "preview"
-        },
-        {
-            element: "div",
-            className: "dialog",
-            innerHTML: [
-                {
-                    element: "h3",
-                    innerText: "Progress"
-                },
-                {
-                    element: "progress",
-                    id: "total-progress",
-                    value: 0
-                },
-                {
-                    element: "progress",
-                    id: "http-progress",
-                    value: 0
-                },
-                {
-                    element: "pre",
-                    id: "current-log-message"
-                }
-            ]
-        },
-        {
-            element: "details",
-            id: "logs-area",
-            innerHTML: [
-                {
-                    element: "summary",
-                    innerText: "Logs (click to expand)"
-                },
-                {
-                    element: "div",
-                    style: "font-size: 9px;",
-                    id: "logs-area-element"
-                }
-            ]
-        }
+        resultsArea,
+        scanMethodsArea,
+        previewArea,
+        progressArea,
+        logsArea
     ]
 };
 
@@ -209,7 +58,6 @@ export function welcomeSection()
             content
         ]
     };
-
     makeElement(welcomeSection, document.querySelector('.main'));
 }
 // @license-end