aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorpukkamustard <pukkamustard@posteo.net>2020-06-10 14:44:37 +0200
committerpukkamustard <pukkamustard@posteo.net>2020-06-10 14:44:37 +0200
commit86e7f01770be28a71e305b00fe36057395759de5 (patch)
tree2da9c62826a46027a443989a065a597fb0ae5974
parenta5243a3496457b1a97bef3466f8b3fa802a166ae (diff)
web-demo: success indicator
-rw-r--r--examples/web-demo/index.html32
-rw-r--r--examples/web-demo/src/index.js14
-rw-r--r--examples/web-demo/style.css6
3 files changed, 26 insertions, 26 deletions
diff --git a/examples/web-demo/index.html b/examples/web-demo/index.html
index 7542ec2..66b2650 100644
--- a/examples/web-demo/index.html
+++ b/examples/web-demo/index.html
@@ -11,8 +11,9 @@
<div>
<div id="notes">
- <p>This is a demo of ERIS - An Encoding for Robust Immutable Storage.</p>
+ <p>This is a demo of ERIS - An Encoding for Robust Immutable Storage.</p>
+ <p>ERIS encodes any content into uniformly sized (4kB) encrypted blocks. The original content can only be decoded with the URN (which contains the encryption key). </p>
</div>
@@ -37,7 +38,7 @@
</button>
<h3>RDF</h3>
- <p>RDF data is normalized before it is encoded. This means that the same content always gets the same identifier (URN).</p><p>Load some sample RDF data to see how the normalized form looks (it's not pretty).</p>
+ <p>RDF data is normalized before it is encoded. This means that the same content always gets the same identifier (URN).</p><p>Load some sample RDF data, encode it and then decode it to see how the normalized form looks (it's not pretty).</p>
<button id="input-load-sample-vocabulary">
Load sample vocabulary
@@ -51,7 +52,7 @@
</div>
<div id="controls">
- <button id="controls-encode">Encode</button>
+ <button id="controls-encode">Encode →</button>
<details>
<summary>input format</summary>
<select id="controls-input-type" name="input-type" selected="plain-text">
@@ -61,44 +62,35 @@
</select>
</details>
<br>
- <button id="controls-decode">Decode</button>
+ <button id="controls-decode">← Decode</button>
<br>
<pre id="controls-error"></pre>
+ <pre id="controls-success"></pre>
</div>
<div id="encoded">
<h2>Encoded</h2>
<h3>Read capability</h3>
- <input id="encoded-eris-read-cap" type="url">
+ <input id="encoded-eris-read-cap" type="url"></input>
- </input>
-
- <br>
- <br>
-
- <details>
- <summary>encoded data</summary>
- <pre id="encoded-data"></pre>
- </details>
+ <div id="blocks">
+ <h3>Blocks</h3>
+ <div id="block-container">
+ </div>
+ </div>
</div>
<div class="break">
</div>
- <div id="blocks">
- <h2>Blocks</h2>
- <div id="block-container">
- </div>
- </div>
</main>
<h2>About</h2>
- <p>ERIS encodes any content into uniformly sized (4kB) encrypted blocks. The original content can only be decoded with the URN (which contains the encryption key). </p>
<p>For more information on how ERIS works see TODO.</p>
diff --git a/examples/web-demo/src/index.js b/examples/web-demo/src/index.js
index 18a12d0..61815af 100644
--- a/examples/web-demo/src/index.js
+++ b/examples/web-demo/src/index.js
@@ -93,10 +93,9 @@ async function main () {
const controlsDecode = document.getElementById('controls-decode')
const controlsInputType = document.getElementById('controls-input-type')
const controlsError = document.getElementById('controls-error')
+ const controlsSuccess = document.getElementById('controls-success')
const encodedErisReadCap = document.getElementById('encoded-eris-read-cap')
- const encodedData = document.getElementById('encoded-data')
-
const blockContainer = document.getElementById('block-container')
// a ContentAddressableStorage based on a JavaScipt Map
@@ -163,7 +162,6 @@ async function main () {
async function encode () {
// get input as Uint8Array
const input = await getInputAsUint8Array()
- encodedData.innerHTML = utf8Decoder.decode(input)
return ERIS.put(input, cas)
}
@@ -174,19 +172,22 @@ async function main () {
function setError (err) {
console.error(err)
+ controlsSuccess.innerText = ''
controlsError.innerText = err
}
- function clearError () {
+ function setSuccess (msg) {
controlsError.innerText = ''
+ controlsSuccess.innerText = msg
}
controlsEncode.onclick = async function (e) {
- clearError()
+ setSuccess('')
try {
const urn = await encode()
encodedErisReadCap.value = urn
renderBlocks(cas)
+ setSuccess('Encoded!')
} catch (err) {
console.error(err)
setError(err)
@@ -194,10 +195,11 @@ async function main () {
}
controlsDecode.onclick = async function (e) {
- clearError()
+ setSuccess('')
try {
const decoded = await decode()
inputTextarea.value = utf8Decoder.decode(decoded)
+ setSuccess('Decoded!')
} catch (err) {
setError(err)
}
diff --git a/examples/web-demo/style.css b/examples/web-demo/style.css
index f2693a5..d91edcb 100644
--- a/examples/web-demo/style.css
+++ b/examples/web-demo/style.css
@@ -38,6 +38,12 @@ textarea {
overflow: auto;
}
+#controls-success {
+ background-color: lightgreen;
+ white-space: pre-wrap;
+ overflow: auto;
+}
+
#encoded {
background-color: #EEE;
flex: 3 0;