mirror of
https://github.com/fluencelabs/dweb-transports
synced 2025-03-15 18:30:49 +00:00
122 lines
5.7 KiB
HTML
122 lines
5.7 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>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||
|
|
<title>DWEB Transports example page</title>
|
||
|
|
|
||
|
|
<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 -->
|
||
|
|
<!--TODO What parts of example_styles.css, htmlutils.js and loginutils.js are needed ?-->
|
||
|
|
<link rel='stylesheet' href='example_styles.css'>
|
||
|
|
<script type="text/javascript" src="htmlutils.js"></script><!--objectbrowser functionality for debugging-->
|
||
|
|
<script type="text/javascript" src="loginutils.js"></script><!--Login tools (used for p_connect) -->
|
||
|
|
<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 verbose = true; // See commentary in console.log
|
||
|
|
let content = tinyMCE.get('mytextarea').getContent();
|
||
|
|
// alert(content);
|
||
|
|
let el = document.getElementById("retrievalarea");
|
||
|
|
let urls = DwebTransports.p_rawstore(content, verbose)
|
||
|
|
.then((urls) => el.value = urls)
|
||
|
|
.catch((err) => {console.error("saveoncallback", err); alert(err)});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
function fetchit() {
|
||
|
|
let el = document.getElementById("retrievalarea");
|
||
|
|
let urls = urlsFrom(el.value);
|
||
|
|
fetchanddisplay(urls);
|
||
|
|
}
|
||
|
|
|
||
|
|
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, {verbose});
|
||
|
|
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) {
|
||
|
|
//This is the "main()", starts a transport, checks its status, and if appropriate to app opens a URL passed
|
||
|
|
try {
|
||
|
|
// p_connect will look in searchparams for e.g.: ?transport=HTTP&transport=WEBTORRENT
|
||
|
|
// and if not found will use the defaulttransports specified here.
|
||
|
|
await p_connect({
|
||
|
|
defaulttransports: ["HTTP","IPFS"],
|
||
|
|
statuselement: document.getElementById("statuselement")
|
||
|
|
}); // Default startup beavior from loginutils.js // {http: {urlbase: "http://localhost:4244"}} for local
|
||
|
|
// 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>
|
||
|
|
<script type="text/css">
|
||
|
|
.button { border: 1px black solid; background-color:#dddddd; padding-bottom:0.1em; padding-top:0.1em;}
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<!--Network status box - this is standard for any app -->
|
||
|
|
<!--TODO replace next div with following-->
|
||
|
|
<div class="floatright" style="position:relative;">
|
||
|
|
<ul id="transportstatuses"><li class='template vertical_li' onclick="transportclick(this);"><span name='name'></span></li></ul>
|
||
|
|
</div><!--End of standard network status and login panel-->
|
||
|
|
|
||
|
|
<div class="floatright statuselement" style="position:relative;" 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;
|
||
|
|
var verbose = searchparams.get("verbose") || false; // Anything specified for verbose is true (could truthify buy no need)
|
||
|
|
main(searchparams.get("url")); //starts a transport, checks its status, and if appropriate to app opens a URL passed
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|