|
|
|
@ -1,35 +1,43 @@ |
|
|
|
localStorage.clear(); |
|
|
|
|
|
|
|
|
|
|
|
//These need to be obtained from the node
|
|
|
|
var ownId, ownColor; |
|
|
|
|
|
|
|
/* |
|
|
|
* OUTBOX STUFF |
|
|
|
*/ |
|
|
|
document.getElementById( 'send' ).onclick = function() { |
|
|
|
document.getElementById('message-form').onsubmit = function(){ |
|
|
|
var outStr = localStorage.getItem( 'outbox' ) || ''; |
|
|
|
|
|
|
|
var outStr = localStorage.getItem( 'outbox' ) || ''; |
|
|
|
if (document.getElementById('name').value == ""){ |
|
|
|
var namm= "anonymous"; |
|
|
|
} |
|
|
|
else{ |
|
|
|
var namm= document.getElementById('name').value; |
|
|
|
} |
|
|
|
var mess = document.getElementById('message').value.replace(/\r?\n/g, "<br />"); |
|
|
|
var newMsgs ={}; |
|
|
|
var ddata= new Date().getTime(); |
|
|
|
var contento = { |
|
|
|
"time" : ddata, |
|
|
|
"message" : mess, |
|
|
|
"name" : namm, |
|
|
|
"node" : "local", |
|
|
|
"hops" : "0" |
|
|
|
} |
|
|
|
newMsgs.message = contento; |
|
|
|
if (document.getElementById('name').value == ""){ |
|
|
|
var namm = "anonymous"; |
|
|
|
} |
|
|
|
else{ |
|
|
|
var namm = document.getElementById('name').value; |
|
|
|
} |
|
|
|
var mess = document.getElementById('message').value.replace(/\r?\n/g, "<br />"); |
|
|
|
var newMsgs = {}; |
|
|
|
var ddata = new Date().getTime(); |
|
|
|
var contento = { |
|
|
|
"time" : ddata, |
|
|
|
"message" : mess, |
|
|
|
"name" : namm, |
|
|
|
"node" : "local", |
|
|
|
"hops" : "0" |
|
|
|
} |
|
|
|
newMsgs.message = contento; |
|
|
|
|
|
|
|
localStorage.setItem( 'outbox', JSON.stringify(newMsgs) ); |
|
|
|
updateOutboxView(); |
|
|
|
checkOutbox(); |
|
|
|
document.getElementById('message').value = ''; |
|
|
|
|
|
|
|
return false; |
|
|
|
} |
|
|
|
|
|
|
|
localStorage.setItem( 'outbox', JSON.stringify(newMsgs) ); |
|
|
|
updateOutboxView(); |
|
|
|
checkOutbox(); |
|
|
|
document.getElementById('message').value = ''; |
|
|
|
}; |
|
|
|
function checkOutbox() { |
|
|
|
var outStr = localStorage.getItem( 'outbox' ); |
|
|
|
var outStr = localStorage.getItem( 'outbox' ); |
|
|
|
if ( ! outStr ) { |
|
|
|
return; |
|
|
|
} |
|
|
|
@ -102,40 +110,86 @@ function updateOutboxView() { |
|
|
|
|
|
|
|
|
|
|
|
function updateInboxView() { |
|
|
|
var localStorageArray = new Array(); |
|
|
|
var contentString = ''; |
|
|
|
var localStorageArray = new Array(); |
|
|
|
var contentString = ''; |
|
|
|
|
|
|
|
if (localStorage.length>0) { |
|
|
|
for (i=0;i<localStorage.length;i++){ |
|
|
|
if (localStorage.length>0) { |
|
|
|
for (i=0;i<localStorage.length;i++){ |
|
|
|
|
|
|
|
element=localStorage.getItem(localStorage.key(i)); |
|
|
|
element=localStorage.getItem(localStorage.key(i)); |
|
|
|
|
|
|
|
if ( localStorage.key(i).length < 10 || element === 'outbox' ) { |
|
|
|
continue; |
|
|
|
} |
|
|
|
// alert(element);
|
|
|
|
try { |
|
|
|
if ( localStorage.key(i).length < 10 || element === 'outbox' ) { |
|
|
|
continue; |
|
|
|
} |
|
|
|
try { |
|
|
|
elementj = JSON.parse(element); |
|
|
|
} catch (e) { |
|
|
|
} catch (e) { |
|
|
|
continue; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
localStorageArray[i] = { time:localStorage.key(i), user:elementj.name, message:elementj.message, node:elementj.node, hops:elementj.hops }; |
|
|
|
} |
|
|
|
localStorageArray[i] = { |
|
|
|
time:localStorage.key(i), |
|
|
|
user:elementj.name, |
|
|
|
message:elementj.message, |
|
|
|
node:elementj.node, |
|
|
|
hops:elementj.hops |
|
|
|
}; |
|
|
|
} |
|
|
|
} |
|
|
|
orderStorage = localStorageArray.sort(function(a,b) { return b.time - a.time } ); |
|
|
|
|
|
|
|
for(var i in orderStorage) { |
|
|
|
if ( i.length === 0 || i === 'outbox' ) { |
|
|
|
continue; |
|
|
|
} |
|
|
|
var datereadable = getReadableDate( new Date(parseInt(orderStorage[i].time)) ); |
|
|
|
var color = getNodeColor( orderStorage[i].node ); |
|
|
|
contentString += '<li><div class="message-block" style="background-color:'+color+'">'+ |
|
|
|
'<div class="date-sender">On ' + datereadable + |
|
|
|
' <b>' + orderStorage[i].user +'</b> wrote:</div>' + |
|
|
|
'<div class="message-text">' + orderStorage[i].message + '</div>' + |
|
|
|
' <span class="node '+orderStorage[i].node+'">from '+orderStorage[i].node + '</span>' + |
|
|
|
' <span class="hops '+orderStorage[i].hops+'">via '+orderStorage[i].hops+' nodes</span></div></li>'; |
|
|
|
} |
|
|
|
document.getElementById( 'inbox' ).innerHTML = contentString; |
|
|
|
} |
|
|
|
function getReadableDate( date ) { |
|
|
|
var day = date.getDate(); |
|
|
|
if (day < 10) day = '0' + day; |
|
|
|
var month = date.getMonth()+1; |
|
|
|
if (month < 10) month = '0' + month; |
|
|
|
var year = date.getFullYear(); |
|
|
|
var hrs = date.getHours(); |
|
|
|
if (hrs < 10) hrs = '0' + hrs; |
|
|
|
var min = date.getMinutes(); |
|
|
|
if (min < 10) min = '0' + min; |
|
|
|
|
|
|
|
return day + '/' + month + '/' + year + ' ' + hrs + ':' + min; |
|
|
|
} |
|
|
|
function getNodeColor( nodeId ) { |
|
|
|
if( nodeId === 'local' ) { |
|
|
|
return ownColor || '#fff'; |
|
|
|
} |
|
|
|
return colorLuminance(nodeId.substr(0,6), 0.5); |
|
|
|
} |
|
|
|
function colorLuminance(hex, lum) { |
|
|
|
|
|
|
|
// validate hex string
|
|
|
|
hex = String(hex).replace(/[^0-9a-f]/gi, ''); |
|
|
|
if (hex.length < 6) { |
|
|
|
hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2]; |
|
|
|
} |
|
|
|
orderStorage = localStorageArray.sort(function(a,b) { return b.time - a.time } ); |
|
|
|
lum = lum || 0; |
|
|
|
|
|
|
|
for(var i in orderStorage) |
|
|
|
{ |
|
|
|
if ( i.length === 0 || i === 'outbox' ) { |
|
|
|
continue; |
|
|
|
} |
|
|
|
var date = new Date(parseInt(orderStorage[i].time)); |
|
|
|
// date.setHours(date.getHours() + 2);
|
|
|
|
var datereadable = date.getDate()+"/"+(date.getMonth()+1)+"/"+date.getFullYear()+" "+date.getHours()+":"+date.getMinutes(); |
|
|
|
contentString += '<li><b>' + datereadable + ' </b>' + ' <i>'+ orderStorage[i].user +'</i><br/> '+orderStorage[i].message+' <span class="node '+orderStorage[i].node+'">'+orderStorage[i].node+'</span> <span class="hops '+orderStorage[i].hops+'">'+orderStorage[i].hops+'</span></li>'; |
|
|
|
// convert to decimal and change luminosity
|
|
|
|
var rgb = "#", c, i; |
|
|
|
for (i = 0; i < 3; i++) { |
|
|
|
c = parseInt(hex.substr(i*2,2), 16); |
|
|
|
c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16); |
|
|
|
rgb += ("00"+c).substr(c.length); |
|
|
|
} |
|
|
|
document.getElementById( 'inbox' ).innerHTML = contentString; |
|
|
|
|
|
|
|
return rgb; |
|
|
|
} |
|
|
|
|
|
|
|
function onMessageDownload( msg, filename ) { |
|
|
|
@ -170,35 +224,58 @@ updateInboxView(); |
|
|
|
|
|
|
|
} |
|
|
|
function downloadMessage(filename) { |
|
|
|
var xhr = new XMLHttpRequest(); |
|
|
|
xhr.onreadystatechange = function(){ |
|
|
|
if (xhr.readyState == 4 && xhr.status == 200){ |
|
|
|
onMessageDownload( xhr.responseText, filename ); |
|
|
|
} |
|
|
|
} |
|
|
|
xhr.open( "GET", 'msg/'+filename, true); |
|
|
|
xhr.send(); |
|
|
|
var xhr = new XMLHttpRequest(); |
|
|
|
xhr.onreadystatechange = function(){ |
|
|
|
if (xhr.readyState == 4 && xhr.status == 200){ |
|
|
|
onMessageDownload( xhr.responseText, filename ); |
|
|
|
} |
|
|
|
} |
|
|
|
xhr.open( "GET", 'msg/'+filename, true); |
|
|
|
xhr.send(); |
|
|
|
|
|
|
|
} |
|
|
|
function checkInbox() { |
|
|
|
var xhr = new XMLHttpRequest(); |
|
|
|
xhr.onreadystatechange = function(){ |
|
|
|
if (xhr.readyState == 4 && xhr.status == 200){ |
|
|
|
onIndex( xhr.responseText ); |
|
|
|
} |
|
|
|
var xhr = new XMLHttpRequest(); |
|
|
|
xhr.onreadystatechange = function(){ |
|
|
|
if (xhr.readyState == 4 && xhr.status == 200){ |
|
|
|
onIndex( xhr.responseText ); |
|
|
|
} |
|
|
|
} |
|
|
|
xhr.open( "GET", 'index', true); |
|
|
|
xhr.send(); |
|
|
|
} |
|
|
|
function getOwnId() { |
|
|
|
var xhr = new XMLHttpRequest(); |
|
|
|
xhr.onreadystatechange = function(){ |
|
|
|
if (xhr.readyState == 4 && xhr.status == 200){ |
|
|
|
ownId = xhr.responseText; |
|
|
|
ownColor = getNodeColor( ownId ); |
|
|
|
} |
|
|
|
xhr.open( "GET", 'index', true); |
|
|
|
xhr.send(); |
|
|
|
} |
|
|
|
xhr.open( "GET", 'id', true); |
|
|
|
xhr.send(); |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/* |
|
|
|
* INIT |
|
|
|
*/ |
|
|
|
|
|
|
|
function update(){ |
|
|
|
if ( !ownId ){ |
|
|
|
getOwnId(); |
|
|
|
} |
|
|
|
checkInbox(); |
|
|
|
// also check for outbox items on interval,
|
|
|
|
// necessary in case connection is lost and messages are not yet sent
|
|
|
|
checkOutbox(); |
|
|
|
} |
|
|
|
|
|
|
|
//update everything to initialize
|
|
|
|
updateInboxView(); |
|
|
|
updateOutboxView(); |
|
|
|
window.setInterval( function(){ |
|
|
|
checkInbox(); |
|
|
|
checkOutbox(); |
|
|
|
}, 7000 ); |
|
|
|
update(); |
|
|
|
|
|
|
|
//check for new messages every 7 seconds
|
|
|
|
window.setInterval( update, 7000 ); |
|
|
|
|
|
|
|
|
jngrt
10 years ago