dweb-transports/example_block.html

122 lines
5.7 KiB
HTML
Raw Normal View History

2018-04-08 14:53:19 +10:00
<!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>