mirror of https://github.com/embarklabs/embark.git
update test_app files
This commit is contained in:
Iuri Matias
parent
19d061e5f3
commit
18d6aafd60
|
|
@ -2,6 +2,8 @@
|
|||
<head>
|
||||
<title>Embark - SimpleStorage Demo</title>
|
||||
<link rel="stylesheet" href="css/app.css">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js"></script>
|
||||
<script src="js/bootstrap.js"></script>
|
||||
<script src="js/app.js"></script>
|
||||
</head>
|
||||
<body class="container">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,14 @@
|
|||
/*globals $, SimpleStorage, document*/
|
||||
|
||||
import $ from './_vendor/jquery.min';
|
||||
import EmbarkJS from 'Embark/EmbarkJS';
|
||||
import SimpleStorage from 'Embark/contracts/SimpleStorage';
|
||||
|
||||
window.EmbarkJS = EmbarkJS;
|
||||
window.SimpleStorage = SimpleStorage;
|
||||
|
||||
import './foo.css';
|
||||
|
||||
var addToLog = function(id, txt) {
|
||||
$(id + " .logs").append("<br>" + txt);
|
||||
};
|
||||
|
|
@ -8,6 +17,7 @@ var addToLog = function(id, txt) {
|
|||
// Blockchain example
|
||||
// ===========================
|
||||
$(document).ready(function() {
|
||||
console.log([1,2,3].map(v => v + 1));
|
||||
|
||||
$("#blockchain button.set").click(function() {
|
||||
var value = parseInt($("#blockchain input.text").val(), 10);
|
||||
|
|
@ -48,19 +58,19 @@ $(document).ready(function() {
|
|||
//EmbarkJS.Storage.setProvider('ipfs',{server: 'localhost', port: '5001'});
|
||||
|
||||
$("#storage .error").hide();
|
||||
EmbarkJS.Storage.ipfsConnection.ping()
|
||||
.then(function(){
|
||||
//EmbarkJS.Storage.ipfsConnection.version()
|
||||
// .then(function(){
|
||||
$("#status-storage").addClass('status-online');
|
||||
$("#storage-controls").show();
|
||||
})
|
||||
.catch(function(err) {
|
||||
if(err){
|
||||
console.log("IPFS Connection Error => " + err.message);
|
||||
$("#storage .error").show();
|
||||
$("#status-storage").addClass('status-offline');
|
||||
$("#storage-controls").hide();
|
||||
}
|
||||
});
|
||||
// })
|
||||
// .catch(function(err) {
|
||||
// if(err){
|
||||
// console.log("IPFS Connection Error => " + err.message);
|
||||
// $("#storage .error").show();
|
||||
// $("#status-storage").addClass('status-offline');
|
||||
// $("#storage-controls").hide();
|
||||
// }
|
||||
// });
|
||||
|
||||
$("#storage button.setIpfsText").click(function() {
|
||||
var value = $("#storage input.ipfsText").val();
|
||||
|
|
|
|||
|
|
@ -1,164 +0,0 @@
|
|||
/*globals $, SimpleStorage, document*/
|
||||
|
||||
import $ from './_vendor/jquery.min';
|
||||
//import web3 from 'Embark/web3';
|
||||
import EmbarkJS from 'Embark/EmbarkJS';
|
||||
window.EmbarkJS = EmbarkJS;
|
||||
import SimpleStorage from 'Embark/contracts/SimpleStorage';
|
||||
|
||||
import test3 from './foo';
|
||||
import './foo.css';
|
||||
|
||||
var addToLog = function(id, txt) {
|
||||
$(id + " .logs").append("<br>" + txt);
|
||||
};
|
||||
|
||||
// ===========================
|
||||
// Blockchain example
|
||||
// ===========================
|
||||
$(document).ready(function() {
|
||||
console.log([1,2,3].map(v => v + 1));
|
||||
//alert('hello');
|
||||
|
||||
$("#blockchain button.set").click(function() {
|
||||
var value = parseInt($("#blockchain input.text").val(), 10);
|
||||
|
||||
// If web3.js 1.0 is being used
|
||||
if (EmbarkJS.isNewWeb3()) {
|
||||
SimpleStorage.methods.set(value).send({from: web3.eth.defaultAccount});
|
||||
addToLog("#blockchain", "SimpleStorage.methods.set(value).send({from: web3.eth.defaultAccount})");
|
||||
} else {
|
||||
SimpleStorage.set(value);
|
||||
addToLog("#blockchain", "SimpleStorage.set(" + value + ")");
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
$("#blockchain button.get").click(function() {
|
||||
// If web3.js 1.0 is being used
|
||||
if (EmbarkJS.isNewWeb3()) {
|
||||
SimpleStorage.methods.get().call(function(err, value) {
|
||||
$("#blockchain .value").html(value);
|
||||
});
|
||||
addToLog("#blockchain", "SimpleStorage.methods.get(console.log)");
|
||||
} else {
|
||||
SimpleStorage.get().then(function(value) {
|
||||
$("#blockchain .value").html(value.toNumber());
|
||||
});
|
||||
addToLog("#blockchain", "SimpleStorage.get()");
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
// ===========================
|
||||
// Storage (IPFS) example
|
||||
// ===========================
|
||||
$(document).ready(function() {
|
||||
// automatic set if config/storage.json has "enabled": true and "provider": "ipfs"
|
||||
//EmbarkJS.Storage.setProvider('ipfs',{server: 'localhost', port: '5001'});
|
||||
|
||||
$("#storage .error").hide();
|
||||
//EmbarkJS.Storage.ipfsConnection.version()
|
||||
// .then(function(){
|
||||
$("#status-storage").addClass('status-online');
|
||||
$("#storage-controls").show();
|
||||
// })
|
||||
// .catch(function(err) {
|
||||
// if(err){
|
||||
// console.log("IPFS Connection Error => " + err.message);
|
||||
// $("#storage .error").show();
|
||||
// $("#status-storage").addClass('status-offline');
|
||||
// $("#storage-controls").hide();
|
||||
// }
|
||||
// });
|
||||
|
||||
$("#storage button.setIpfsText").click(function() {
|
||||
var value = $("#storage input.ipfsText").val();
|
||||
EmbarkJS.Storage.saveText(value).then(function(hash) {
|
||||
$("span.textHash").html(hash);
|
||||
$("input.textHash").val(hash);
|
||||
addToLog("#storage", "EmbarkJS.Storage.saveText('" + value + "').then(function(hash) { })");
|
||||
})
|
||||
.catch(function(err) {
|
||||
if(err){
|
||||
console.log("IPFS saveText Error => " + err.message);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$("#storage button.loadIpfsHash").click(function() {
|
||||
var value = $("#storage input.textHash").val();
|
||||
EmbarkJS.Storage.get(value).then(function(content) {
|
||||
$("span.ipfsText").html(content);
|
||||
addToLog("#storage", "EmbarkJS.Storage.get('" + value + "').then(function(content) { })");
|
||||
})
|
||||
.catch(function(err) {
|
||||
if(err){
|
||||
console.log("IPFS get Error => " + err.message);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$("#storage button.uploadFile").click(function() {
|
||||
var input = $("#storage input[type=file]");
|
||||
EmbarkJS.Storage.uploadFile(input).then(function(hash) {
|
||||
$("span.fileIpfsHash").html(hash);
|
||||
$("input.fileIpfsHash").val(hash);
|
||||
addToLog("#storage", "EmbarkJS.Storage.uploadFile($('input[type=file]')).then(function(hash) { })");
|
||||
})
|
||||
.catch(function(err) {
|
||||
if(err){
|
||||
console.log("IPFS uploadFile Error => " + err.message);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$("#storage button.loadIpfsFile").click(function() {
|
||||
var hash = $("#storage input.fileIpfsHash").val();
|
||||
var url = EmbarkJS.Storage.getUrl(hash);
|
||||
var link = '<a href="' + url + '" target="_blank">' + url + '</a>';
|
||||
$("span.ipfsFileUrl").html(link);
|
||||
$(".ipfsImage").attr('src', url);
|
||||
addToLog("#storage", "EmbarkJS.Storage.getUrl('" + hash + "')");
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
// ===========================
|
||||
// Communication (Whisper) example
|
||||
// ===========================
|
||||
$(document).ready(function() {
|
||||
|
||||
$("#communication .error").hide();
|
||||
$("#communication .errorVersion").hide();
|
||||
if (EmbarkJS.Messages.providerName === 'whisper') {
|
||||
EmbarkJS.Messages.getWhisperVersion(function(err, version) {
|
||||
if (err) {
|
||||
$("#communication .error").show();
|
||||
$("#communication-controls").hide();
|
||||
$("#status-communication").addClass('status-offline');
|
||||
} else {
|
||||
EmbarkJS.Messages.setProvider('whisper');
|
||||
$("#status-communication").addClass('status-online');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$("#communication button.listenToChannel").click(function() {
|
||||
var channel = $("#communication .listen input.channel").val();
|
||||
$("#communication #subscribeList").append("<br> subscribed to " + channel + " now try sending a message");
|
||||
EmbarkJS.Messages.listenTo({topic: [channel]}).then(function(message) {
|
||||
$("#communication #messagesList").append("<br> channel: " + channel + " message: " + message);
|
||||
});
|
||||
addToLog("#communication", "EmbarkJS.Messages.listenTo({topic: ['" + channel + "']}).then(function(message) {})");
|
||||
});
|
||||
|
||||
$("#communication button.sendMessage").click(function() {
|
||||
var channel = $("#communication .send input.channel").val();
|
||||
var message = $("#communication .send input.message").val();
|
||||
EmbarkJS.Messages.sendMessage({topic: channel, data: message});
|
||||
addToLog("#communication", "EmbarkJS.Messages.sendMessage({topic: '" + channel + "', data: '" + message + "'})");
|
||||
});
|
||||
|
||||
});
|
||||
|
|
@ -1,109 +0,0 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Embark - SimpleStorage Demo</title>
|
||||
<link rel="stylesheet" href="css/app.css">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js"></script>
|
||||
<script src="js/bootstrap.js"></script>
|
||||
<script src="js/new_app.js"></script>
|
||||
</head>
|
||||
<body class="container">
|
||||
<h3>Embark - Usage Example</h3>
|
||||
|
||||
<ul class="nav nav-tabs" role="tablist" id="myTabs">
|
||||
<li role="presentation" class="active"><a href="#blockchain" aria-controls="blockchain" role="tab" data-toggle="tab">Blockchain</a></li>
|
||||
<li role="presentation"><a href="#storage" aria-controls="storage" role="tab" data-toggle="tab">Decentralized Storage (IPFS)<span class="pull-right" id="status-storage"></a></li>
|
||||
<li role="presentation"><a href="#communication" aria-controls="communication" role="tab" data-toggle="tab">P2P communication (Whisper/Orbit)<span class="pull-right" id="status-communication"></span></a></li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content">
|
||||
<div role="tabpanel" class="tab-pane active" id="blockchain">
|
||||
<h3> 1. Set the value in the blockchain</h3>
|
||||
<div class="form-group form-inline">
|
||||
<input type="text" class="text form-control" value="10">
|
||||
<button class="set btn btn-primary">Set Value</button>
|
||||
<p>Once you set the value, the transaction will need to be mined and then the value will be updated on the blockchain.</p>
|
||||
</div>
|
||||
|
||||
<h3> 2. Get the current value</h3>
|
||||
<div class="form-group">
|
||||
<div>
|
||||
current value is <span class="value"></span>
|
||||
</div>
|
||||
<button class="get btn btn-primary">Get Value</button>
|
||||
<p>Click the button to get the current value. The initial value is 100.</p>
|
||||
</div>
|
||||
|
||||
<h3> 3. Contract Calls </h3>
|
||||
<p>Javascript calls being made: </p>
|
||||
<div class="logs">
|
||||
</div>
|
||||
</div>
|
||||
<div role="tabpanel" class="tab-pane" id="storage">
|
||||
<div class="error alert alert-danger" role="alert">The node you are using does not support IPFS. Please ensure <a href="https://github.com/ipfs/js-ipfs-api#cors" target="_blank">CORS</a> is setup for the IPFS node.</div>
|
||||
<div id="storage-controls">
|
||||
|
||||
<h3>Save text to IPFS</h3>
|
||||
<div class="form-group form-inline">
|
||||
<input type="text" class="ipfsText text form-control" value="hello world!">
|
||||
<button class="setIpfsText btn btn-primary">Save</button>
|
||||
<p>generated Hash: <span class="textHash"></span></p>
|
||||
</div>
|
||||
|
||||
<h3>Load text from IPFS given an hash</h3>
|
||||
<div class="form-group form-inline">
|
||||
<input type="text" class="textHash text form-control" size="60">
|
||||
<button class="loadIpfsHash set btn btn-primary">Load</button>
|
||||
<p>result: <span class="ipfsText"></span></p>
|
||||
</div>
|
||||
|
||||
<h3>upload file to ipfs</h3>
|
||||
<div class="form-group form-inline">
|
||||
<input type="file" class="form-control">
|
||||
<button class="uploadFile set btn btn-primary">upload</button>
|
||||
<p>generated hash: <span class="fileIpfsHash"></span></p>
|
||||
</div>
|
||||
|
||||
<h3>Get file or image from ipfs</h3>
|
||||
<div class="form-group form-inline">
|
||||
<input type="text" class="fileIpfsHash form-control" size="60">
|
||||
<button class="loadIpfsFile set btn btn-primary">Load</button>
|
||||
<p>file available at: <span class="ipfsFileUrl"></span></p>
|
||||
<p><img class="ipfsImage" src=""></p>
|
||||
</div>
|
||||
|
||||
<p>Javascript calls being made: </p>
|
||||
<div class="logs">
|
||||
<br> EmbarkJS.Storage.setProvider('ipfs',{server: 'localhost', port: '5001'})
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="tabpanel" class="tab-pane" id="communication">
|
||||
<div class="error alert alert-danger" role="alert">The node you are using does not support Whisper</div>
|
||||
<div class="errorVersion alert alert-danger" role="alert">The node uses an unsupported version of Whisper</div>
|
||||
<div id="communication-controls">
|
||||
<h3>Listen To channel</h3>
|
||||
<div class="form-group form-inline listen">
|
||||
<input type="text" class="channel text form-control" placeholder="channel">
|
||||
<button class="listenToChannel set btn btn-primary">Start Listening</button>
|
||||
<div id="subscribeList"></div>
|
||||
<p>messages received:<p>
|
||||
<div id="messagesList"></div>
|
||||
</div>
|
||||
|
||||
<h3>Send Message</h3>
|
||||
<div class="form-group form-inline send">
|
||||
<input type="text" class="channel text form-control" placeholder="channel">
|
||||
<input type="text" class="message text form-control" placeholder="message">
|
||||
<button class="sendMessage set btn btn-primary">Send Message</button>
|
||||
</div>
|
||||
|
||||
<p>Javascript calls being made: </p>
|
||||
<div class="logs">
|
||||
<br> EmbarkJS.Messages.setProvider('whisper')
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,16 +1,13 @@
|
|||
{
|
||||
"contracts": ["app/contracts/**"],
|
||||
"app": {
|
||||
"js/webpack_test.js": "app/js/index.js",
|
||||
"js/jquery.js": "app/js/_vendor/jquery.min.js",
|
||||
"js/bootstrap.js": "app/js/_vendor/bootstrap.min.js",
|
||||
"css/app.css": ["app/css/**"],
|
||||
"images/": ["app/images/**"],
|
||||
"js/app.js": ["app/js/_vendor/jquery.min.js", "app/js/_vendor/bootstrap.min.js", "app/js/**", "!app/js/test.js", "!app/js/foo.js", "!app/js/foo.css", "!app/js/new_index.js"],
|
||||
"js/new_app.js": ["app/js/new_index.js"],
|
||||
"js/app.js": ["app/js/index.js"],
|
||||
"js/test.js": ["app/js/_vendor/jquery.min.js", "app/js/_vendor/async.min.js", "app/js/test.js"],
|
||||
"index.html": "app/index.html",
|
||||
"new_index.html": "app/new_index.html",
|
||||
"test.html": "app/test.html",
|
||||
"test2.html": "app/test2.html"
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue