1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
2 |
|
3 | <html lang="en">
|
4 | <head>
|
5 |
|
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>
|
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 |
|
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);
|
35 | }
|
36 |
|
37 | async function fetchanddisplay(urls) {
|
38 | try {
|
39 | console.log("Fetching urls=", urls);
|
40 | let destn = document.getElementById("retrievaldestn");
|
41 | destn.innerHTML = "";
|
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 |
|
55 | await DwebTransports.p_connect({
|
56 | statuselement: document.getElementById("statuselement"),
|
57 | defaulttransports: ["HTTP","IPFS"],
|
58 | transports: searchparams.getAll("transport")
|
59 | });
|
60 |
|
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 |
|
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 |
|
76 | #statuselement { margin: 0 0 3px 10px; float: right; clear: right; text-align: right; position: relative; }
|
77 | #statuselement li {display: table-row; padding-top: 3px; padding-right: 0; margin: 0 0 3px 3px;}
|
78 | .transportstatus0 {color: lawngreen}
|
79 | .transportstatus1 {color: red}
|
80 | .transportstatus2 {color: yellow}
|
81 | .transportstatus3 {color: black}
|
82 | .transportstatus4 {color: purple}
|
83 | </style>
|
84 | </head>
|
85 | <body>
|
86 |
|
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"));
|
119 | </script>
|
120 |
|
121 | </body>
|
122 | </html>
|