-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
162 lines (146 loc) · 6.11 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width,initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
<meta name="x5-fullscreen" content="true">
<meta name="full-screen" content="yes">
<title>Note</title>
<link rel="stylesheet" href="lib/bootstrap-4.0.0-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<h3 style="margin-top: 50px">区块链笔记本，重要事项记录后不再丢失~</h1>
<form class="form-inline" style="margin-top: 100px">
<div class="form-group">
<label for="search_value"> 你的署名 </label>
<input type="text" class="form-control" id="search_value" style="margin-left: 10px" placeholder="ethanhua">
</div>
<span class="btn btn-primary" id="search" style="margin-left: 10px">查询笔记</span>
</form>
<div id="noteList" class="note-list">
</div>
<textarea id="add_value" class="form-control" rows="3" style="margin-top: 20px" placeholder="记点什么呢~" maxlength="64" oninput="textAreaOnInputChanged()"></textarea>
<p id="limitNum" class="limit-num">0/64</p>
<span class="btn btn-primary" style="margin-top: 10px;" id="add">新增笔记</span>
</div>
<script src=lib/jquery-3.3.1.min.js></script>
<script src=lib/nebPay.js></script>
<script src=lib/bootstrap-4.0.0-dist/js/bootstrap.min.js></script>
<script src="lib/artTemplate.js"></script>
<script id="noteCards" type="text/html">
<div class="card">
<ul class="list-group list-group-flush">
<%for(var i=0;i<contentItems.length;i++){%>
<li class="list-group-item"><%= contentItems[i].content%>
<p class="item-date"><%= contentItems[i].time%></p>
</li>
<%}%>
</ul>
</div>
</script>
<script src=lib/nebulas.js></script>
<script>
var noteData;
var dappAddress = "n1vx4oqrrJ7JTJHw62YroN2ek8aehTFEdBN";
var nebulas = require("nebulas"),
Account = nebulas.Account,
neb = new nebulas.Neb();
neb.setRequest(new nebulas.HttpRequest("https://mainnet.nebulas.io"));
var NebPay = require("nebpay"); //https://github.com/nebulasio/nebPay
var nebPay = new NebPay();
var serialNumber
var intervalQuery
$("#search").click(function () {
searchData();
})
$("#add").click(function () {
var key = $("#search_value").val().trim();
var content = $("#add_value").val().trim();
if (key == "") {
alert("请输入署名！")
return
}
if (content == "") {
alert("请填写笔记！")
return
}
var contentItem = {
time: new Date().toLocaleString(),
content: $("#add_value").val()
}
if (noteData == null) {
noteData = { "key": key, "contentItems": [] };
}
noteData.contentItems.push(contentItem);
renderNoteListView(noteData)
addData(key, content);
})
function textAreaOnInputChanged(){
debugger
var content = $("#add_value").val().trim();
$("#limitNum").html(content.length+"/64")
}
function funcIntervalQuery() {
nebPay.queryPayInfo(serialNumber) //search transaction result from server (result upload to server by app)
.then(function (resp) {
console.log("tx result: " + resp) //resp is a JSON string
var respObject = JSON.parse(resp)
if (respObject.code === 0) {
alert("保存成功")
clearInterval(intervalQuery)
}
})
.catch(function (err) {
console.log(err);
});
}
function addData(key, content) {
var to = dappAddress;
var value = "0";
var callFunction = "save"
var callArgs = "[\"" + key + "\",\"" + content + "\"]"
serialNumber = nebPay.call(to, value, callFunction, callArgs, { //使用nebpay的call接口去调用合约,
listener: function (resp) { } //设置listener, 处理交易返回信息
});
intervalQuery = setInterval(function () {
funcIntervalQuery();
}, 5000);
}
function searchData() {
var key = $("#search_value").val().trim() //搜索框内的值
if (key == "") {
alert("请输入署名！")
return
}
var from = Account.NewAccount().getAddressString();
var value = "0";
var nonce = "0"
var gas_price = "1000000"
var gas_limit = "2000000"
var callFunction = "get";
var callArgs = "[\"" + $("#search_value").val() + "\"]"; //in the form of ["args"]
var contract = {
"function": callFunction,
"args": callArgs
}
neb.api.call(from, dappAddress, value, nonce, gas_price, gas_limit, contract).then(function (resp) {
renderNoteListView(JSON.parse(resp.result))
}).catch(function (err) {
console.log("error:" + err.message)
})
}
function renderNoteListView(data) {
if (data == null) {
document.getElementById('noteList').innerHTML = "<p>没有结果，添加一条笔记吧~</p>";
return
}
noteData = data;
var html = template('noteCards', data);
document.getElementById('noteList').innerHTML = html;
}
</script>
</body>
</html>