mirror of
https://github.com/fluencelabs/dweb-transports
synced 2025-03-14 18:10:49 +00:00
122 lines
5.9 KiB
HTML
122 lines
5.9 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
<!--suppress HtmlUnknownTarget -->
|
|
<html lang="en">
|
|
<head>
|
|
<!--Note there are copies of this in dweb-transports repo and dweb-transport repo-->
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<title>DWEB Transports example page</title>
|
|
<script type="text/javascript">localStorage.debug = "dweb-transports dweb-transports:*";</script>
|
|
<script type="text/javascript" src="./dist/dweb-transports-bundle.js"></script>
|
|
<script type="text/javascript" src='https://cloud.tinymce.com/stable/tinymce.min.js'></script><!-- TinyMCE -->
|
|
<script type="text/javascript">
|
|
|
|
tinymce.init({
|
|
selector: '#mytextarea',
|
|
menubar: "true",
|
|
plugins: [ "save",
|
|
'advlist autolink lists link image charmap print preview anchor',
|
|
'searchreplace visualblocks code fullscreen',
|
|
'insertdatetime media table contextmenu paste code' ],
|
|
toolbar: 'save | undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
|
|
save_onsavecallback: function() {
|
|
let content = tinyMCE.get('mytextarea').getContent();
|
|
// alert(content);
|
|
let el = document.getElementById("retrievalarea");
|
|
let urls = DwebTransports.p_rawstore(content)
|
|
.then((urls) => el.value = urls)
|
|
.catch((err) => {console.error("saveoncallback", err); alert(err)});
|
|
}
|
|
});
|
|
|
|
async function fetchit() {
|
|
let el = document.getElementById("retrievalarea");
|
|
let urls = await DwebTransports.p_urlsFrom(el.value);
|
|
fetchanddisplay(urls); //asynchronous
|
|
}
|
|
|
|
async function fetchanddisplay(urls) {
|
|
try {
|
|
console.log("Fetching urls=", urls);
|
|
let destn = document.getElementById("retrievaldestn");
|
|
destn.innerHTML = ""; // Clear it first
|
|
|
|
let data = await DwebTransports.p_rawfetch(urls);
|
|
console.log("Retrieved data length", data.length);
|
|
destn.innerHTML = data;
|
|
} catch(err) {
|
|
console.log("fetchanddisplay: Error",err.message);
|
|
alert(err.message);
|
|
throw err;
|
|
}
|
|
}
|
|
async function main(url) {
|
|
try {
|
|
// and if not found will use the defaulttransports specified here.
|
|
await DwebTransports.p_connect({
|
|
statuselement: document.getElementById("statuselement"), // Where to build status indicator
|
|
defaulttransports: ["HTTP","IPFS"], // Default transports if not specified
|
|
transports: searchparams.getAll("transport") // Allow override default from URL parameters
|
|
});
|
|
// Any code you want to run after connected to transports goes here.
|
|
if (url) fetchanddisplay(url);
|
|
} catch(err) {
|
|
console.log("App Error:", err);
|
|
alert(err.message);
|
|
}
|
|
}
|
|
|
|
|
|
</script>
|
|
<style type="text/css">
|
|
/* Application specific styles */
|
|
.button { border: 1px black solid; background-color:#dddddd; padding-bottom:0.1em; padding-top:0.1em;}
|
|
.propval {display:table-cell; background-color:#dddddd;border: 1px dotted grey; padding-left: 0.3em; padding-right: 0.3em;}
|
|
.displayedblock {border: 1px #e0e0e0 solid; background-color:#f0f0f0; box-shadow: 1px 1px 2px #cccccc; padding-top:0.1em; padding-bottom: 0.1em; margin-top: 10px; margin-bottom: 5px; display:inline-block;}
|
|
/* These are required for Dweb statuses */
|
|
#statuselement { margin: 0 0 3px 10px; float: right; clear: right; text-align: right; position: relative; } /* "floatright" Grouped in top right corner */
|
|
#statuselement li {display: table-row; padding-top: 3px; padding-right: 0; margin: 0 0 3px 3px;}
|
|
.transportstatus0 {color: lawngreen} /*STATUS_CONNECTED*/
|
|
.transportstatus1 {color: red} /*STATUS_FAILED*/
|
|
.transportstatus2 {color: yellow} /*STATUS_STARTING*/
|
|
.transportstatus3 {color: black} /*STATUS_LOADED*/
|
|
.transportstatus4 {color: purple} /*STATUS_PAUSED*/
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!--Network status box - this is standard for any app -->
|
|
<div id="statuselement"></div>
|
|
<h1>Dweb - Transports Example - unstructured data store and retrieval</h1>
|
|
<h4>Create something here, and when its saved its urls will appear below</h4>
|
|
<form method="post">
|
|
<textarea id="mytextarea" width="60%">Testing</textarea>
|
|
</form>
|
|
|
|
<h4>Enter a link here and it will be retrieved.</h4>
|
|
<form style="display:inline" onsubmit="fetchit(); return false;">
|
|
<input type="text" class="propval" id="retrievalarea" placeholder="ipfs:/ipfs/12ab34cd" size="70"/>
|
|
<input type="submit" class="button" value="Fetch"/>
|
|
</form>
|
|
|
|
<div class="displayedblock" id="retrievaldestn">retrieved data will go here</div>
|
|
<hr>
|
|
<h2>Explanation</h2>
|
|
|
|
<ul>
|
|
<li>As you open the page it tries to connect to the transports, which by default are HTTP and IPFS.</li>
|
|
<li>These should change to Yellow as they try, and then Green when connected.</li>
|
|
<li>If it goes Red, it means it failed to connect - e.g. to get an "info" response from HTTP, or to conenct to IPFS.</li>
|
|
<li>You can edit text, which is happening entirely locally on your machine.</li>
|
|
<li>When you hit Save, its stored on the connected transports</li>
|
|
<li>A link to this is put in the Retrieval box</li>
|
|
<li>You can click on the Retrieve button and it will be retrieved and displayed for editing.</li>
|
|
<li>You can also paste that link into a different browser.</li>
|
|
</ul>
|
|
|
|
<script type="text/javascript">
|
|
var searchparams = new URL(window.location.href).searchParams;
|
|
main(searchparams.get("url")); //starts a transport, checks its status, and if appropriate to app opens a URL passed
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|