UNPKG

6.08 kBHTMLView Raw
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<!--suppress HtmlUnknownTarget -->
3<html lang="en">
4<head>
5 <!--Note there are copies of this in dweb-transports repo and dweb-transport repo-->
6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7 <title>DWEB Transports example page</title>
8 <script type="text/javascript">localStorage.debug = "dweb-transports dweb-transports:*";</script>
9 <script type="text/javascript" src="./dist/dweb-transports-bundle.js"></script>
10 <script type="text/javascript" src='https://cloud.tinymce.com/stable/tinymce.min.js'></script><!-- TinyMCE -->
11 <script type="text/javascript">
12
13 tinymce.init({
14 selector: '#mytextarea',
15 menubar: "true",
16 plugins: [ "save",
17 'advlist autolink lists link image charmap print preview anchor',
18 'searchreplace visualblocks code fullscreen',
19 'insertdatetime media table contextmenu paste code' ],
20 toolbar: 'save | undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
21 save_onsavecallback: function() {
22 let content = tinyMCE.get('mytextarea').getContent();
23 // alert(content);
24 let el = document.getElementById("retrievalarea");
25 let urls = DwebTransports.p_rawstore(content)
26 .then((urls) => el.value = urls)
27 .catch((err) => {console.error("saveoncallback", err); alert(err)});
28 }
29 });
30
31 async function fetchit() {
32 let el = document.getElementById("retrievalarea");
33 let urls = await DwebTransports.p_urlsFrom(el.value);
34 fetchanddisplay(urls); //asynchronous
35 }
36
37 async function fetchanddisplay(urls) {
38 try {
39 console.log("Fetching urls=", urls);
40 let destn = document.getElementById("retrievaldestn");
41 destn.innerHTML = ""; // Clear it first
42
43 let data = await DwebTransports.p_rawfetch(urls);
44 console.log("Retrieved data length", data.length);
45 destn.innerHTML = data;
46 } catch(err) {
47 console.log("fetchanddisplay: Error",err.message);
48 alert(err.message);
49 throw err;
50 }
51 }
52 async function main(url) {
53 try {
54 // and if not found will use the defaulttransports specified here.
55 await DwebTransports.p_connect({
56 statuselement: document.getElementById("statuselement"), // Where to build status indicator
57 defaulttransports: ["HTTP","IPFS"], // Default transports if not specified
58 transports: searchparams.getAll("transport") // Allow override default from URL parameters
59 });
60 // Any code you want to run after connected to transports goes here.
61 if (url) fetchanddisplay(url);
62 } catch(err) {
63 console.log("App Error:", err);
64 alert(err.message);
65 }
66 }
67
68
69 </script>
70 <style type="text/css">
71 /* Application specific styles */
72 .button { border: 1px black solid; background-color:#dddddd; padding-bottom:0.1em; padding-top:0.1em;}
73 .propval {display:table-cell; background-color:#dddddd;border: 1px dotted grey; padding-left: 0.3em; padding-right: 0.3em;}
74 .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;}
75 /* These are required for Dweb statuses */
76 #statuselement { margin: 0 0 3px 10px; float: right; clear: right; text-align: right; position: relative; } /* "floatright" Grouped in top right corner */
77 #statuselement li {display: table-row; padding-top: 3px; padding-right: 0; margin: 0 0 3px 3px;}
78 .transportstatus0 {color: lawngreen} /*STATUS_CONNECTED*/
79 .transportstatus1 {color: red} /*STATUS_FAILED*/
80 .transportstatus2 {color: yellow} /*STATUS_STARTING*/
81 .transportstatus3 {color: black} /*STATUS_LOADED*/
82 .transportstatus4 {color: purple} /*STATUS_PAUSED*/
83 </style>
84</head>
85<body>
86<!--Network status box - this is standard for any app -->
87<div id="statuselement"></div>
88<h1>Dweb - Transports Example - unstructured data store and retrieval</h1>
89<h2>This example is not maintained - it might not work any more</h2>
90<h4>Create something here, and when its saved its urls will appear below</h4>
91<form method="post">
92 <textarea id="mytextarea" width="60%">Testing</textarea>
93</form>
94
95<h4>Enter a link here and it will be retrieved.</h4>
96<form style="display:inline" onsubmit="fetchit(); return false;">
97 <input type="text" class="propval" id="retrievalarea" placeholder="ipfs:/ipfs/12ab34cd" size="70"/>
98 <input type="submit" class="button" value="Fetch"/>
99</form>
100
101<div class="displayedblock" id="retrievaldestn">retrieved data will go here</div>
102<hr>
103<h2>Explanation</h2>
104
105<ul>
106 <li>As you open the page it tries to connect to the transports, which by default are HTTP and IPFS.</li>
107 <li>These should change to Yellow as they try, and then Green when connected.</li>
108 <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>
109 <li>You can edit text, which is happening entirely locally on your machine.</li>
110 <li>When you hit Save, its stored on the connected transports</li>
111 <li>A link to this is put in the Retrieval box</li>
112 <li>You can click on the Retrieve button and it will be retrieved and displayed for editing.</li>
113 <li>You can also paste that link into a different browser.</li>
114</ul>
115
116<script type="text/javascript">
117 var searchparams = new URL(window.location.href).searchParams;
118 main(searchparams.get("url")); //starts a transport, checks its status, and if appropriate to app opens a URL passed
119</script>
120
121</body>
122</html>