Skip to content

Commit

Permalink
added UI for marble history
Browse files Browse the repository at this point in the history
  • Loading branch information
dshuffma-ibm committed Mar 25, 2017
1 parent f8fd0be commit 8015899
Show file tree
Hide file tree
Showing 14 changed files with 370 additions and 53 deletions.
2 changes: 1 addition & 1 deletion busters_css.json
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"public/css/singlecsshash":"a7f6ed6cb5b7daa0fc96b3a52153a172"}
{"public/css/singlecsshash":"9fa1df6032cb9ec5d60ab2623c8bc052"}
2 changes: 1 addition & 1 deletion busters_js.json
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"public/js/singlejshash":"a627a973b792f95b47a07d761ffab313"}
{"public/js/singlejshash":"8fbecd4868ae758e1c80755b3208a36b"}
120 changes: 109 additions & 11 deletions public/css/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ table {
border-spacing: 0; }

html {
min-height: 100%;
height: 100%;
position: relative;
min-width: 350px; }

Expand Down Expand Up @@ -552,16 +552,6 @@ strong {
font-weight: bold;
color: #646B73; }

#viewBCWrap {
color: #fff;
padding: 22px;
background: #222832;
font-size: 12px;
cursor: pointer;
width: 180px;
text-align: center;
margin-left: 25px; }

#footerWrap {
height: 235px;
background: #222832;
Expand Down Expand Up @@ -1074,6 +1064,114 @@ strong {
animation-duration: 2s;
animation-iteration-count: infinite; }

#auditWrap {
position: absolute;
bottom: 60px;
border-top: #646B73 solid 1px;
width: 100%;
border: 1px #fff solid;
border-left: 0;
border-right: 0;
background: #646B73;
color: #fff; }

#auditLegend {
color: #E5EBEF;
padding: 0 0 10px 0;
bottom: 13px;
font-size: 18px; }

#auditContentWrap {
display: none;
padding: 10px;
max-height: 210px;
min-height: 145px;
overflow-x: hidden;
overflow-y: auto; }

#marbleIdWrap {
font-size: 12px;
margin-bottom: 15px; }

#auditHandle {
width: 50px;
background: #fff;
position: absolute;
left: 48.5%;
top: -16px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
color: #000;
text-align: center;
cursor: pointer; }

.txHistoryWrap {
display: inline-block;
vertical-align: bottom;
width: calc(99% - 175px);
margin-left: 175px; }

.leftTxWrap {
width: 175px;
display: inline-block;
vertical-align: top;
text-align: center;
position: fixed; }

.biggerLeft {
margin-bottom: 50px; }

.txDetails {
position: relative;
vertical-align: bottom;
font-size: 14px;
display: inline-block;
margin-left: 20px;
padding-right: 20px;
border-right: 2px #fff solid;
height: 96px;
left: 100%;
margin-top: 5px; }

.marbleLegend {
width: 85px;
display: inline-block;
font-weight: 700; }

.marbleName {
display: inline-block;
margin-left: 10px; }

.txId, .marbleName {
background: #343D48;
font-size: 12px;
font-family: monospace;
padding: 3px 10px; }

.txCount {
text-align: center;
margin-bottom: 10px; }

#marbleIdWrap {
font-weight: 700; }

.auditMarble {
line-height: 75px;
font-size: 30px;
text-align: center;
margin: 0;
padding: 0; }

.auditMarble:hover {
border-color: transparent;
cursor: default; }

.auditHint {
font-size: 20px;
font-weight: 100;
color: #a1a7ad;
margin-top: 55px; }

#blockWrap {
position: relative;
margin: 15px 25px; }
Expand Down
2 changes: 1 addition & 1 deletion public/css/main.min.css

Large diffs are not rendered by default.

44 changes: 44 additions & 0 deletions public/js/ui_building.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
/* global bag, $, ws*/
/* global escapeHtml, toTitleCase, formatDate, known_companies, transfer_marble, record_company, show_tx_step, refreshHomePanel*/
/* exported build_marble, record_company, build_user_panels, build_company_panel, build_notification, populate_users_marbles*/
/* exported build_a_tx, marbles */

var marbles = {};

// =================================================================================
// UI Building
Expand All @@ -11,6 +14,8 @@ function build_marble(marble) {
var colorClass = '';
var size = 'largeMarble';

marbles[marble.name] = marble;

marble.name = escapeHtml(marble.name);
marble.color = escapeHtml(marble.color);
marble.owner.username = escapeHtml(marble.owner.username);
Expand Down Expand Up @@ -114,6 +119,22 @@ function build_user_panels(data) {
});
}

// ------------ Audit Marble ------------ //
else if ($(event.target).attr('id') === 'auditContentWrap') {
console.log('audit marble', marble_id);
return false;
/*show_tx_step({ state: 'building_proposal' }, function () {
var obj = {
type: 'delete_marble',
name: marble_id,
v: 1
};
ws.send(JSON.stringify(obj));
$(ui.draggable).addClass('invalid bounce');
refreshHomePanel();
});*/
}

// ------------ Transfer Marble ------------ //
else {
var dragged_user = $(ui.draggable).attr('username').toLowerCase();
Expand Down Expand Up @@ -184,3 +205,26 @@ function build_notification(error, msg) {
html += '</div>';
return html;
}


//build a tx history div
function build_a_tx(data, pos) {
var html = '';

html += '<div class="txDetails">';
html += '<div class="txCount">TX ' + (Number(pos) + 1) + '</div>';
html += '<p>';
html += '<div class="marbleLegend">Transaction: </div>';
html += '<div class="marbleName txId">' + data.TxId.substring(0, 14) + '...</div>';
html += '</p>';
html += '<p>';
html += '<div class="marbleLegend">Owner: </div>';
html += '<div class="marbleName">' + data.Value.owner.username + '</div>';
html += '</p>';
html += '<p>';
html += '<div class="marbleLegend">Company: </div>';
html += '<div class="marbleName">' + data.Value.owner.company + '</div>';
html += '</p>';
html += '</div>';
return html;
}
44 changes: 36 additions & 8 deletions public/js/ui_events.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/* global $, window, document */
/* global randStr, toTitleCase, connect_to_server, refreshHomePanel, closeNoticePanel, openNoticePanel, show_tx_step*/
/* global randStr, toTitleCase, connect_to_server, refreshHomePanel, closeNoticePanel, openNoticePanel, show_tx_step, marbles*/
/* exported record_company, autoCloseNoticePanel, start_up, block_ui_delay*/
var ws = {};
var bgcolors = ['whitebg', 'blackbg', 'redbg', 'greenbg', 'bluebg', 'purplebg', 'pinkbg', 'orangebg', 'yellowbg'];
Expand Down Expand Up @@ -214,15 +214,43 @@ $(document).on('ready', function () {

//right click opens audit on marble
$(document).on('contextmenu', '.ball', function () {
var id = $(this).attr('id');
console.log('user clicked on marble', id);
var obj = {
type: 'audit',
id: id
};
ws.send(JSON.stringify(obj));
auditMarble(this, true);
return false;
});

//left click audits marble
$(document).on('click', '.ball', function () {
auditMarble(this, false);
});

function auditMarble(that, open){
var id = $(that).attr('id');
console.log('user clicked on marble', id);
if(open || $('#auditContentWrap').is(':visible')) {
$('#auditContentWrap').fadeIn();
$('#marbleId').html(id);
var color = marbles[id].color;
for (var i in bgcolors) $('.auditMarble').removeClass(bgcolors[i]); //reset
$('.auditMarble').addClass(color.toLowerCase() + 'bg');

var obj = {
type: 'audit',
id: id
};
ws.send(JSON.stringify(obj));
}
}

$('#auditHandle').click(function(){
if ($('#auditContentWrap').is(':visible')) {
$('#auditContentWrap').fadeOut(300);
$('#auditHandle').children().removeClass('fa-angle-down').addClass('fa-angle-up');
}
else {
$('#auditContentWrap').fadeIn(300);
$('#auditHandle').children().removeClass('fa-angle-up').addClass('fa-angle-down');
}
});
});

//toggle story mode
Expand Down
49 changes: 45 additions & 4 deletions public/js/websocket.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/* global new_block, $, document, WebSocket, escapeHtml, ws:true, start_up:true, known_companies:true, autoCloseNoticePanel:true */
/* global show_start_up_step, build_notification, build_user_panels, build_company_panel, populate_users_marbles, show_tx_step*/
/* global getRandomInt, block_ui_delay:true*/
/* global getRandomInt, block_ui_delay:true, build_a_tx*/
/* exported transfer_marble, record_company, connect_to_server, refreshHomePanel*/

var getEverythingWatchdog = null;
Expand All @@ -16,7 +16,7 @@ function connect_to_server() {

function connect() {
var wsUri = null;
if(document.location.protocol === 'https:') {
if (document.location.protocol === 'https:') {
wsTxt = '[wss]';
wsUri = 'wss://' + document.location.hostname + ':' + document.location.port;
} else {
Expand Down Expand Up @@ -78,7 +78,7 @@ function connect_to_server() {
// block
else if (msgObj.msg === 'block') {
console.log(wsTxt + ' rec', msgObj.msg, ': ledger blockheight', msgObj.block_height);
if(msgObj.block_delay) block_ui_delay = msgObj.block_delay * 2; // should be longer than block delay
if (msgObj.block_delay) block_ui_delay = msgObj.block_delay * 2; // should be longer than block delay
new_block(msgObj.block_height); // send to blockchain.js
}

Expand Down Expand Up @@ -127,6 +127,29 @@ function connect_to_server() {
show_tx_step(msgObj);
}

//tx history
else if (msgObj.msg === 'history') {
console.log(wsTxt + ' rec', msgObj.msg, msgObj);
$('.txHistoryWrap').html(''); //clear
fixCss();
var built = 0;
/*var showMax = 12;
for (var x in msgObj.data.parsed) {
if(msgObj.data.parsed.length > showMax) {
var firstValid = msgObj.data.parsed.length - showMax;
if(x < firstValid) {
continue;
}
}
built++;
slowBuildtx(msgObj.data.parsed[x], x, built);
}*/
for (var x=msgObj.data.parsed.length-1; x >= 0; x--) {
built++;
slowBuildtx(msgObj.data.parsed[x], x, built);
}
}

//unknown
else console.log(wsTxt + ' rec', msgObj.msg, msgObj);
}
Expand Down Expand Up @@ -248,4 +271,22 @@ function clear_trash() {
setTimeout(function () {
$('#trashbin .ball').remove();
}, 500);
}
}

// delay build each transaction
function slowBuildtx(data, txNumber, built){
setTimeout(function () {
var html = build_a_tx(data, txNumber);
$('.txHistoryWrap').append(html);
$('.txDetails:last').animate({ opacity: 1, left: 0 }, 600, function () {
//after animate
});
fixCss();
}, (built * 300));
}

function fixCss() {
var height = $('#auditContentWrap').height();
if(height >= 150) $('.leftTxWrap').css('margin-top', '35px');
else $('.leftTxWrap').css('margin-top', 0);
}
2 changes: 1 addition & 1 deletion scss/2_base.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@import 'color_theme';
html{min-height:100%; position:relative; min-width:350px;}
html{height:100%; position:relative; min-width:350px;}
body{margin:0 auto;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
padding:0;
Expand Down
10 changes: 0 additions & 10 deletions scss/3_global.scss
Original file line number Diff line number Diff line change
Expand Up @@ -338,16 +338,6 @@
font-weight:bold;
color:$acc_color2;
}
#viewBCWrap{
color:$main_color;
padding:22px;
background: $acc_color1;
font-size:12px;
cursor:pointer;
width:180px;
text-align: center;
margin-left:25px;
}
#footerWrap{
height: 235px;
background: $acc_color1;
Expand Down
Loading

0 comments on commit 8015899

Please sign in to comment.