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

Commit

Permalink
UI modification (#103)
Browse files Browse the repository at this point in the history 
* 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]>
  • Loading branch information
@Juliia-b
Juliia-b authored Jan 31, 2021
1 parent e5d7193 commit 2ee1128
Show file tree
Hide file tree
Showing 3 changed files with 153 additions and 116 deletions.
111 changes: 52 additions & 59 deletions ui/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,8 @@
<script src="https://use.fontawesome.com/bc7671744e.js"></script>
<script src="https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"></script>

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

<!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script> -->

<script src="index.js"></script>
<link rel="stylesheet" href="styles.css">

Expand All @@ -37,8 +33,8 @@
<div class="modal-footer">
<slot name="footer">
<button class="modal-default-button" @click="$emit('close')">
OK
</button>
OK
</button>
</slot>
</div>
</div>
Expand All @@ -50,72 +46,69 @@

<body>

<div class="search-block">
<div class="search-block">

<div id="checkbox">
<select v-model="block" @change="onChange($event)" type="checkbox" class="dropdown">
<div id="checkbox">
<select v-model="block" @change="onChange($event)" type="checkbox" class="dropdown">
<!-- <option disabled value="">Выберите один из вариантов</option> -->
<option>Block number</option> // 0
<option>Tx ID</option> // af589062d2e699c9b0ba38663c6df3b6e07d8701320336e831609876f0ebae99
<option>WriteSet key</option> // payload key name
</select>
</div>

<br/>
<option>Block number</option>
// 0
<option>Tx ID</option>
// af589062d2e699c9b0ba38663c6df3b6e07d8701320336e831609876f0ebae99
</select>
</div>

<div id="input">
<input v-model="message" :placeholder="placeholder" type="input" class="form-control">
</div>
<br/>

<br/>
<div id="input">
<input v-model="message" :placeholder="placeholder" type="input" class="form-control">
</div>

<div id="button">
<button v-on:click="getAns()" class="search-button">Get block</button>
</div>
<br/>

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

<br/><br/>
</div>

<div class="center">
<br/><br/>

<script type="text/x-template" id="item-template">
<li>
<div :class="{bold: isFolder}" @click="toggle">
{{ item.name }}
<span v-if="isFolder">[{{ isOpen ? '-' : '+' }}]</span>
</div>
<ul v-show="isOpen" v-if="isFolder">
<tree-item class="item" v-for="(child, index) in item.children" :key="index" :item="child" @add-item="$emit('add-item', $event)"></tree-item>
</ul>
</li>
</script>
<div class="center">

<script type="text/x-template" id="item-template">
<li>
<div :class="{bold: isFolder}" @click="toggle">
{{ item.name }}
<span v-if="isFolder">[{{ isOpen ? '-' : '+' }}]</span>
</div>
<ul v-show="isOpen" v-if="isFolder">
<tree-item class="item" v-for="(child, index) in item.children" :key="index" :item="child"
@add-item="$emit('add-item', $event)"></tree-item>
</ul>
</li>
</script>

<ul id="demo">
<tree-item class="item" :item="treeData" @make-folder="makeFolder" @add-item="addItem"></tree-item>
</ul>
<ul id="demo">
<tree-item class="item" :item="treeData" @make-folder="makeFolder" @add-item="addItem"></tree-item>
</ul>

</div>
</div>

<a onclick="GetNewBlock('left');" class="arrows left" style="display: inline;">
<i class="fa fa-angle-double-left" aria-hidden="true"></i>
</a>

<a onclick="GetNewBlock('right');" class="arrows right" style="display: inline;">
<i class="fa fa-angle-double-right" aria-hidden="true"></i>
</a>

<div id="app">
<!-- <button id="show-modal" @click="showModal = true">Show Modal</button> -->
<!-- use the modal component, pass in the prop -->
<modal v-if="showModal" @close="showModal = false" v-model="httpCode">
<!--you can use custom content here to overwrite default content
-->
<h3 slot="header">{{ httpCode }}</h3>
<h3 slot="body">{{ error }}</h3>
<!-- <h3 slot="footer">Error {{ httpCode }}</h3> -->
</modal>
</div>
<a onclick="GetNewBlock('left');" class="arrows left" style="display: inline;">
<i class="fa fa-angle-double-left" aria-hidden="true"></i>
</a>

<a onclick="GetNewBlock('right');" class="arrows right" style="display: inline;">
<i class="fa fa-angle-double-right" aria-hidden="true"></i>
</a>

<div id="app">
<modal v-if="showModal" @close="showModal = false" v-model="httpCode">
<h3 slot="header">{{ httpCode }}</h3>
<h3 slot="body">{{ error }}</h3>
</modal>
</div>

</body>

Expand Down
151 changes: 101 additions & 50 deletions ui/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
let currentBlock;
let action;
let search;

Expand All @@ -9,31 +8,32 @@ let treeData = {
let errorModal,
input;

window.onload = function() {
// Initialization of Vuew.js components
window.onload = function () {

// define the tree-item component
Vue.component("tree-item", {
template: "#item-template",
props: {
item: Object
},
data: function() {
data: function () {
return {
isOpen: true
};
},
computed: {
isFolder: function() {
isFolder: function () {
return this.item.children && this.item.children.length;
}
},
methods: {
toggle: function() {
toggle: function () {
if (this.isFolder) {
this.isOpen = !this.isOpen;
}
},
makeFolder: function() {
makeFolder: function () {
if (!this.isFolder) {
this.$emit("make-folder", this.item);
this.isOpen = true;
Expand All @@ -49,16 +49,16 @@ window.onload = function() {
treeData: treeData
},
methods: {
makeFolder: function(item) {
makeFolder: function (item) {
let folder = Vue.set(item, "children", []);
return folder
},
addItem: function(item, name) {
addItem: function (item, name) {
item.children.push({
name: name
});

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

action = checkbox.block;
search = input.message;
Expand Down Expand Up @@ -95,9 +95,6 @@ window.onload = function() {
case "Tx ID":
input.placeholder = 'af589062d2e699c9b0ba36e831609876f0ebae99'
break;
case "WriteSet key":
input.placeholder = 'payload key name'
break;
default:
input.placeholder = '1'
}
Expand Down Expand Up @@ -130,18 +127,12 @@ window.onload = function() {
};

function GetNewBlock(param) {
let min = 200000000;
let max = -200000000;

for (let i = 0; i < currentBlock.data.msg.length; i++) {
if (currentBlock.data.msg[i].blocknum > max) max = currentBlock.data.msg[i].blocknum;
if (currentBlock.data.msg[i].blocknum < min) min = currentBlock.data.msg[i].blocknum
}
var newBlockNum;

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

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

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

async function GetBlockAndMakeTree() {

if (parseInt(search) < 0) {
input.message = 0
search = 0
}

treeData.children = [];

var err = false;

try {
if (action == "Block number") {
var block = await axios.get(`http://localhost:5252/byblocknum/${search}`);
var ans = await axios.get(`http://localhost:5252/byblocknum/${search}`);
} else if (action == "Tx ID") {
var block = await axios.get(`http://localhost:5252/bytxid/${search}`);
} else if (action == "WriteSet key") {
var block = await axios.get(`http://localhost:5252/bykey/${search}`);
var ans = await axios.get(`http://localhost:5252/bytxid/${search}`);
}
} catch (e) {
errorModal.showModal = true;
errorModal.httpCode = e;
errorModal.error = e.response.data.error;
err = true;
}

if (err) {
return
}

currentBlock = block;
block = ans.data.msg;

block = block.data.msg;
console.log(block)

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

folder.push({ name: "txs", children: [] });
folder = folder[4].children;
folder.push({name: "txs", children: []});
folder = folder[4].children;

for (let j = 0; j < block[i].txs.length; j++) {
folder.push({ name: j, children: [] });
let element = folder[j].children;
element.push({ name: "txid: " + block[i].txs[j].txid });
element.push({ name: "validationcode: " + block[i].txs[j].validationcode });
element.push({ name: "time: " + block[i].txs[j].time });
for (let j = 0; j < block.txs.length; j++) {
folder.push({name: j, children: []});
let element = folder[j].children;
element.push({name: "txid: " + block.txs[j].txid});
element.push({name: "validationcode: " + block.txs[j].validationcode});
element.push({name: "time: " + block.txs[j].time});

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

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

kvFolder.push({ name: "value: " + block[i].txs[j].KV[x].value });
for (let x = 0; x < block.txs[j].KV.length; x++) {
var value = window.atob(block.txs[j].KV[x].value)
if (block.txs[j].KV[x].key == "Type" && value == "Config") {
isConfig = true;
break;
}
}

for (let x = 0; x < block.txs[j].KV.length; x++) {
let kvFolder = element[3].children;
kvFolder.push({name: "key: " + block.txs[j].KV[x].key, children: []});
kvFolder = kvFolder[x].children;

var value = window.atob(block.txs[j].KV[x].value)

if (isConfig) {
var key = block.txs[j].KV[x].key
if (key == "Groups" || key == "Values" || key == "Policies") {
value = JSON.parse(value);
GoDeep(value)
value = JSON.stringify(value)
}
}

kvFolder.push({name: "value: " + value});
}
}
}

function HasNesting(jsonData) {
if (typeof jsonData == "object") {
return true
}

return false
}

function GoDeep(jsonData) {
Object.keys(jsonData).forEach(function (key) {
var value = jsonData[key];

if (HasNesting(value)) {
GoDeep(value)
return
}

if (key !== "value") {
return
}

try {
var dec = window.atob(value)
jsonData[key] = dec
} catch (e) {
// do nothing
}

});
}
Loading

0 comments on commit 2ee1128

Please sign in to comment.