Skip to content
This repository was archived by the owner on Mar 5, 2023. It is now read-only.

Commit 2ee1128

Browse files
authored
UI modification (#103)
* delete redundant staff Signed-off-by: Julia Bezrukova <[email protected]> * added decoding of json fields Signed-off-by: Julia Bezrukova <[email protected]> * removed unnecessary comments Signed-off-by: Julia Bezrukova <[email protected]> * changed requests processing Signed-off-by: Julia Bezrukova <[email protected]>
1 parent e5d7193 commit 2ee1128

File tree

3 files changed

+153
-116
lines changed

3 files changed

+153
-116
lines changed

ui/index.html

Lines changed: 52 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,8 @@
99
<script src="https://use.fontawesome.com/bc7671744e.js"></script>
1010
<script src="https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"></script>
1111

12-
<!-- версия для разработки, отображает полезные предупреждения в консоли -->
1312
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
1413

15-
<!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
16-
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script> -->
17-
1814
<script src="index.js"></script>
1915
<link rel="stylesheet" href="styles.css">
2016

@@ -37,8 +33,8 @@
3733
<div class="modal-footer">
3834
<slot name="footer">
3935
<button class="modal-default-button" @click="$emit('close')">
40-
OK
41-
</button>
36+
OK
37+
</button>
4238
</slot>
4339
</div>
4440
</div>
@@ -50,72 +46,69 @@
5046

5147
<body>
5248

53-
<div class="search-block">
49+
<div class="search-block">
5450

55-
<div id="checkbox">
56-
<select v-model="block" @change="onChange($event)" type="checkbox" class="dropdown">
51+
<div id="checkbox">
52+
<select v-model="block" @change="onChange($event)" type="checkbox" class="dropdown">
5753
<!-- <option disabled value="">Выберите один из вариантов</option> -->
58-
<option>Block number</option> // 0
59-
<option>Tx ID</option> // af589062d2e699c9b0ba38663c6df3b6e07d8701320336e831609876f0ebae99
60-
<option>WriteSet key</option> // payload key name
61-
</select>
62-
</div>
63-
64-
<br/>
54+
<option>Block number</option>
55+
// 0
56+
<option>Tx ID</option>
57+
// af589062d2e699c9b0ba38663c6df3b6e07d8701320336e831609876f0ebae99
58+
</select>
59+
</div>
6560

66-
<div id="input">
67-
<input v-model="message" :placeholder="placeholder" type="input" class="form-control">
68-
</div>
61+
<br/>
6962

70-
<br/>
63+
<div id="input">
64+
<input v-model="message" :placeholder="placeholder" type="input" class="form-control">
65+
</div>
7166

72-
<div id="button">
73-
<button v-on:click="getAns()" class="search-button">Get block</button>
74-
</div>
67+
<br/>
7568

69+
<div id="button">
70+
<button v-on:click="getAns()" class="search-button">Get block</button>
7671
</div>
7772

78-
<br/><br/>
73+
</div>
7974

80-
<div class="center">
75+
<br/><br/>
8176

82-
<script type="text/x-template" id="item-template">
83-
<li>
84-
<div :class="{bold: isFolder}" @click="toggle">
85-
{{ item.name }}
86-
<span v-if="isFolder">[{{ isOpen ? '-' : '+' }}]</span>
87-
</div>
88-
<ul v-show="isOpen" v-if="isFolder">
89-
<tree-item class="item" v-for="(child, index) in item.children" :key="index" :item="child" @add-item="$emit('add-item', $event)"></tree-item>
90-
</ul>
91-
</li>
92-
</script>
77+
<div class="center">
78+
79+
<script type="text/x-template" id="item-template">
80+
<li>
81+
<div :class="{bold: isFolder}" @click="toggle">
82+
{{ item.name }}
83+
<span v-if="isFolder">[{{ isOpen ? '-' : '+' }}]</span>
84+
</div>
85+
<ul v-show="isOpen" v-if="isFolder">
86+
<tree-item class="item" v-for="(child, index) in item.children" :key="index" :item="child"
87+
@add-item="$emit('add-item', $event)"></tree-item>
88+
</ul>
89+
</li>
90+
</script>
9391

94-
<ul id="demo">
95-
<tree-item class="item" :item="treeData" @make-folder="makeFolder" @add-item="addItem"></tree-item>
96-
</ul>
92+
<ul id="demo">
93+
<tree-item class="item" :item="treeData" @make-folder="makeFolder" @add-item="addItem"></tree-item>
94+
</ul>
9795

98-
</div>
96+
</div>
9997

100-
<a onclick="GetNewBlock('left');" class="arrows left" style="display: inline;">
101-
<i class="fa fa-angle-double-left" aria-hidden="true"></i>
102-
</a>
103-
104-
<a onclick="GetNewBlock('right');" class="arrows right" style="display: inline;">
105-
<i class="fa fa-angle-double-right" aria-hidden="true"></i>
106-
</a>
107-
108-
<div id="app">
109-
<!-- <button id="show-modal" @click="showModal = true">Show Modal</button> -->
110-
<!-- use the modal component, pass in the prop -->
111-
<modal v-if="showModal" @close="showModal = false" v-model="httpCode">
112-
<!--you can use custom content here to overwrite default content
113-
-->
114-
<h3 slot="header">{{ httpCode }}</h3>
115-
<h3 slot="body">{{ error }}</h3>
116-
<!-- <h3 slot="footer">Error {{ httpCode }}</h3> -->
117-
</modal>
118-
</div>
98+
<a onclick="GetNewBlock('left');" class="arrows left" style="display: inline;">
99+
<i class="fa fa-angle-double-left" aria-hidden="true"></i>
100+
</a>
101+
102+
<a onclick="GetNewBlock('right');" class="arrows right" style="display: inline;">
103+
<i class="fa fa-angle-double-right" aria-hidden="true"></i>
104+
</a>
105+
106+
<div id="app">
107+
<modal v-if="showModal" @close="showModal = false" v-model="httpCode">
108+
<h3 slot="header">{{ httpCode }}</h3>
109+
<h3 slot="body">{{ error }}</h3>
110+
</modal>
111+
</div>
119112

120113
</body>
121114

ui/index.js

Lines changed: 101 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
let currentBlock;
21
let action;
32
let search;
43

@@ -9,31 +8,32 @@ let treeData = {
98
let errorModal,
109
input;
1110

12-
window.onload = function() {
11+
// Initialization of Vuew.js components
12+
window.onload = function () {
1313

1414
// define the tree-item component
1515
Vue.component("tree-item", {
1616
template: "#item-template",
1717
props: {
1818
item: Object
1919
},
20-
data: function() {
20+
data: function () {
2121
return {
2222
isOpen: true
2323
};
2424
},
2525
computed: {
26-
isFolder: function() {
26+
isFolder: function () {
2727
return this.item.children && this.item.children.length;
2828
}
2929
},
3030
methods: {
31-
toggle: function() {
31+
toggle: function () {
3232
if (this.isFolder) {
3333
this.isOpen = !this.isOpen;
3434
}
3535
},
36-
makeFolder: function() {
36+
makeFolder: function () {
3737
if (!this.isFolder) {
3838
this.$emit("make-folder", this.item);
3939
this.isOpen = true;
@@ -49,16 +49,16 @@ window.onload = function() {
4949
treeData: treeData
5050
},
5151
methods: {
52-
makeFolder: function(item) {
52+
makeFolder: function (item) {
5353
let folder = Vue.set(item, "children", []);
5454
return folder
5555
},
56-
addItem: function(item, name) {
56+
addItem: function (item, name) {
5757
item.children.push({
5858
name: name
5959
});
6060

61-
// возвращает внесённый элемент
61+
// returns the inserted item
6262
return item
6363
}
6464
}
@@ -67,7 +67,7 @@ window.onload = function() {
6767
let button = new Vue({
6868
el: '#button',
6969
methods: {
70-
getAns: async function() {
70+
getAns: async function () {
7171

7272
action = checkbox.block;
7373
search = input.message;
@@ -95,9 +95,6 @@ window.onload = function() {
9595
case "Tx ID":
9696
input.placeholder = 'af589062d2e699c9b0ba36e831609876f0ebae99'
9797
break;
98-
case "WriteSet key":
99-
input.placeholder = 'payload key name'
100-
break;
10198
default:
10299
input.placeholder = '1'
103100
}
@@ -130,18 +127,12 @@ window.onload = function() {
130127
};
131128

132129
function GetNewBlock(param) {
133-
let min = 200000000;
134-
let max = -200000000;
135-
136-
for (let i = 0; i < currentBlock.data.msg.length; i++) {
137-
if (currentBlock.data.msg[i].blocknum > max) max = currentBlock.data.msg[i].blocknum;
138-
if (currentBlock.data.msg[i].blocknum < min) min = currentBlock.data.msg[i].blocknum
139-
}
130+
var newBlockNum;
140131

141-
let newBlockNum;
132+
if (param == 'left') newBlockNum = parseInt(input.message) - 1;
133+
if (param == 'right') newBlockNum = parseInt(input.message) + 1;
142134

143-
if (param == 'left') newBlockNum = min - 1;
144-
if (param == 'right') newBlockNum = max + 1;
135+
if (newBlockNum < 0) newBlockNum = 0
145136

146137
action = 'Block number';
147138
search = newBlockNum;
@@ -153,54 +144,114 @@ function GetNewBlock(param) {
153144

154145
async function GetBlockAndMakeTree() {
155146

147+
if (parseInt(search) < 0) {
148+
input.message = 0
149+
search = 0
150+
}
151+
156152
treeData.children = [];
157153

154+
var err = false;
155+
158156
try {
159157
if (action == "Block number") {
160-
var block = await axios.get(`http://localhost:5252/byblocknum/${search}`);
158+
var ans = await axios.get(`http://localhost:5252/byblocknum/${search}`);
161159
} else if (action == "Tx ID") {
162-
var block = await axios.get(`http://localhost:5252/bytxid/${search}`);
163-
} else if (action == "WriteSet key") {
164-
var block = await axios.get(`http://localhost:5252/bykey/${search}`);
160+
var ans = await axios.get(`http://localhost:5252/bytxid/${search}`);
165161
}
166162
} catch (e) {
167163
errorModal.showModal = true;
168164
errorModal.httpCode = e;
169165
errorModal.error = e.response.data.error;
166+
err = true;
167+
}
168+
169+
if (err) {
170170
return
171171
}
172172

173-
currentBlock = block;
173+
block = ans.data.msg;
174174

175-
block = block.data.msg;
175+
console.log(block)
176176

177-
for (let i = 0; i < block.length; i++) {
178-
treeData.children.push({ name: "Block " + block[i].blocknum, children: [] });
179-
let folder = treeData.children[i].children;
180-
folder.push({ name: "channelid: " + block[i].channelid });
181-
folder.push({ name: "blockhash: " + block[i].blockhash });
182-
folder.push({ name: "previoushash: " + block[i].previoushash });
183-
folder.push({ name: "blocknum: " + block[i].blocknum });
177+
// parsing json into a tree
178+
treeData.children.push({name: "Block " + block.blocknum, children: []});
179+
let folder = treeData.children[0].children;
180+
folder.push({name: "channelid: " + block.channelid});
181+
folder.push({name: "blockhash: " + block.blockhash});
182+
folder.push({name: "previoushash: " + block.previoushash});
183+
folder.push({name: "blocknum: " + block.blocknum});
184184

185-
folder.push({ name: "txs", children: [] });
186-
folder = folder[4].children;
185+
folder.push({name: "txs", children: []});
186+
folder = folder[4].children;
187187

188-
for (let j = 0; j < block[i].txs.length; j++) {
189-
folder.push({ name: j, children: [] });
190-
let element = folder[j].children;
191-
element.push({ name: "txid: " + block[i].txs[j].txid });
192-
element.push({ name: "validationcode: " + block[i].txs[j].validationcode });
193-
element.push({ name: "time: " + block[i].txs[j].time });
188+
for (let j = 0; j < block.txs.length; j++) {
189+
folder.push({name: j, children: []});
190+
let element = folder[j].children;
191+
element.push({name: "txid: " + block.txs[j].txid});
192+
element.push({name: "validationcode: " + block.txs[j].validationcode});
193+
element.push({name: "time: " + block.txs[j].time});
194194

195-
element.push({ name: "KV", children: [] });
196-
for (let x = 0; x < block[i].txs[j].KV.length; x++) {
195+
element.push({name: "KV", children: []});
197196

198-
let kvFolder = element[3].children;
199-
kvFolder.push({ name: "key: " + block[i].txs[j].KV[x].key, children: [] });
200-
kvFolder = kvFolder[x].children;
197+
var isConfig = false;
201198

202-
kvFolder.push({ name: "value: " + block[i].txs[j].KV[x].value });
199+
for (let x = 0; x < block.txs[j].KV.length; x++) {
200+
var value = window.atob(block.txs[j].KV[x].value)
201+
if (block.txs[j].KV[x].key == "Type" && value == "Config") {
202+
isConfig = true;
203+
break;
203204
}
204205
}
206+
207+
for (let x = 0; x < block.txs[j].KV.length; x++) {
208+
let kvFolder = element[3].children;
209+
kvFolder.push({name: "key: " + block.txs[j].KV[x].key, children: []});
210+
kvFolder = kvFolder[x].children;
211+
212+
var value = window.atob(block.txs[j].KV[x].value)
213+
214+
if (isConfig) {
215+
var key = block.txs[j].KV[x].key
216+
if (key == "Groups" || key == "Values" || key == "Policies") {
217+
value = JSON.parse(value);
218+
GoDeep(value)
219+
value = JSON.stringify(value)
220+
}
221+
}
222+
223+
kvFolder.push({name: "value: " + value});
224+
}
205225
}
226+
}
227+
228+
function HasNesting(jsonData) {
229+
if (typeof jsonData == "object") {
230+
return true
231+
}
232+
233+
return false
234+
}
235+
236+
function GoDeep(jsonData) {
237+
Object.keys(jsonData).forEach(function (key) {
238+
var value = jsonData[key];
239+
240+
if (HasNesting(value)) {
241+
GoDeep(value)
242+
return
243+
}
244+
245+
if (key !== "value") {
246+
return
247+
}
248+
249+
try {
250+
var dec = window.atob(value)
251+
jsonData[key] = dec
252+
} catch (e) {
253+
// do nothing
254+
}
255+
256+
});
206257
}

0 commit comments

Comments
 (0)