jngrt
10 years ago
7 changed files with 492 additions and 1 deletions
Binary file not shown.
@ -0,0 +1,49 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html> |
||||
|
<head> |
||||
|
<meta http-equiv="cache-control" content="max-age=0" /> |
||||
|
<meta http-equiv="cache-control" content="no-cache" /> |
||||
|
<meta http-equiv="expires" content="0" /> |
||||
|
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" /> |
||||
|
<meta http-equiv="pragma" content="no-cache" /> |
||||
|
<meta name="viewport" content="width=device-width, user-scalable=no"> |
||||
|
<!-- <script src="/web/lib/jquery-2.1.1.min.js"></script> --> |
||||
|
<link href="/web/style.css" rel="stylesheet" type="text/css"> |
||||
|
<title>meshed up</title> |
||||
|
</head> |
||||
|
<body> |
||||
|
<div id="header"> |
||||
|
<h2>Meshenger</h2> |
||||
|
</div> |
||||
|
<!-- |
||||
|
<form id="message-form" action=""> |
||||
|
<table width="100%" style="padding :10px;"> |
||||
|
<tr> |
||||
|
<td width="100px"> |
||||
|
<input style="width:100%" id="new-sender" type="text" placeholder="Your name"> |
||||
|
</td> |
||||
|
<td> |
||||
|
<input style="width:100%" id="new-message" type="text" placeholder="Your message"> |
||||
|
</td> |
||||
|
<td width="50px"> |
||||
|
<input class="send-button" style="width:50px" type="button" value="Send"> |
||||
|
</td> |
||||
|
</tr> |
||||
|
</table> |
||||
|
</form> |
||||
|
--> |
||||
|
|
||||
|
<form id="message-form" action=""> |
||||
|
<textarea id="name" rows="1" placeholder="Your Name"></textarea> |
||||
|
<textarea id="message" rows="2" placeholder="Your Message"></textarea> |
||||
|
<input type="submit" class="send-button" value="Send"> |
||||
|
</form> |
||||
|
|
||||
|
<div class="messages"> |
||||
|
<ul id="inbox"></ul> |
||||
|
|
||||
|
<ul id="outbox"></ul> |
||||
|
</div> |
||||
|
<script src="/web/main.js"></script> |
||||
|
</body> |
||||
|
</html> |
File diff suppressed because one or more lines are too long
@ -0,0 +1,281 @@ |
|||||
|
localStorage.clear(); |
||||
|
|
||||
|
|
||||
|
//These need to be obtained from the node
|
||||
|
var ownId, ownColor; |
||||
|
|
||||
|
/* |
||||
|
* OUTBOX STUFF |
||||
|
*/ |
||||
|
document.getElementById('message-form').onsubmit = function(){ |
||||
|
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; |
||||
|
|
||||
|
localStorage.setItem( 'outbox', JSON.stringify(newMsgs) ); |
||||
|
updateOutboxView(); |
||||
|
checkOutbox(); |
||||
|
document.getElementById('message').value = ''; |
||||
|
|
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
function checkOutbox() { |
||||
|
var outStr = localStorage.getItem( 'outbox' ); |
||||
|
if ( ! outStr ) { |
||||
|
return; |
||||
|
} |
||||
|
var lines = outStr.split( /\n/ ); |
||||
|
for ( var i in lines ) { |
||||
|
if ( lines[i].length === 0 ) { |
||||
|
continue; |
||||
|
} |
||||
|
var obj = JSON.parse(lines[i]); |
||||
|
var ts = obj.message.time; |
||||
|
delete obj.message.time; |
||||
|
var msg = JSON.stringify(obj.message); |
||||
|
sendMessage( ts, msg ); |
||||
|
} |
||||
|
} |
||||
|
function sendMessage( timestamp, message ) { |
||||
|
var xhr = new XMLHttpRequest(); |
||||
|
var data = 'time=' + encodeURIComponent( timestamp ) + |
||||
|
'&message=' + encodeURIComponent( message ); |
||||
|
|
||||
|
xhr.onreadystatechange = function(){ |
||||
|
if ( xhr.readyState == 4){ |
||||
|
if ( xhr.status == 200 ) { |
||||
|
removeOutboxItem( timestamp ); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
xhr.open('POST', 'send', true); |
||||
|
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); |
||||
|
xhr.setRequestHeader('If-Modified-Since', 'Sat, 1 Jan 2005 00:00:00 GMT'); |
||||
|
xhr.send(data); |
||||
|
} |
||||
|
function removeOutboxItem( timestamp ) { |
||||
|
var outStr = localStorage.getItem( 'outbox' ) || ''; |
||||
|
var lines = outStr.split( /\n/ ); |
||||
|
for ( var i in lines ) { |
||||
|
var obj = JSON.parse(lines[i]); |
||||
|
var ts = obj.message.time; |
||||
|
if ( ts === timestamp ) { |
||||
|
lines.splice( i, 1 ); |
||||
|
break; |
||||
|
} |
||||
|
} |
||||
|
var newOutStr = lines.join('\n'); |
||||
|
localStorage.setItem('outbox', newOutStr); |
||||
|
updateOutboxView(); |
||||
|
} |
||||
|
function updateOutboxView() { |
||||
|
var contentString = ''; |
||||
|
var outStr = localStorage.getItem( 'outbox' ) || ''; |
||||
|
var lines = outStr.split( /\n/ ); |
||||
|
for ( var i in lines ) { |
||||
|
if ( lines[ i ].length === 0 ) { |
||||
|
continue; |
||||
|
} |
||||
|
var obj = JSON.parse(lines[i]); |
||||
|
var ts = obj.message.time; |
||||
|
delete obj.message.time; |
||||
|
var msg = JSON.stringify(obj.message); |
||||
|
|
||||
|
contentString += '<li><b>' + ts + ' </b>' + msg + '</li>'; |
||||
|
} |
||||
|
document.getElementById( 'outbox' ).innerHTML = contentString; |
||||
|
} |
||||
|
|
||||
|
/* |
||||
|
* INBOX STUFF |
||||
|
*/ |
||||
|
|
||||
|
|
||||
|
function updateInboxView() { |
||||
|
var localStorageArray = new Array(); |
||||
|
var contentString = ''; |
||||
|
|
||||
|
if (localStorage.length>0) { |
||||
|
for (i=0;i<localStorage.length;i++){ |
||||
|
|
||||
|
element=localStorage.getItem(localStorage.key(i)); |
||||
|
|
||||
|
if ( localStorage.key(i).length < 10 || element === 'outbox' ) { |
||||
|
continue; |
||||
|
} |
||||
|
try { |
||||
|
elementj = JSON.parse(element); |
||||
|
} catch (e) { |
||||
|
continue; |
||||
|
} |
||||
|
|
||||
|
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]; |
||||
|
} |
||||
|
lum = lum || 0; |
||||
|
|
||||
|
// 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); |
||||
|
} |
||||
|
|
||||
|
return rgb; |
||||
|
} |
||||
|
|
||||
|
function onMessageDownload( msg, filename ) { |
||||
|
if ( localStorage.getItem( filename ) === null ) { |
||||
|
localStorage.setItem( filename, msg ); |
||||
|
} |
||||
|
updateInboxView(); |
||||
|
} |
||||
|
function onIndex( index ) { |
||||
|
var lines = index.split( /\n/ ); |
||||
|
|
||||
|
for(var k in localStorage){ |
||||
|
var l = 1; |
||||
|
for ( var i in lines ) { |
||||
|
var f = lines[i]; |
||||
|
if (f == k){ l = 0; } |
||||
|
} |
||||
|
if (l == 1){ |
||||
|
localStorage.removeItem(k); |
||||
|
} |
||||
|
} |
||||
|
updateInboxView(); |
||||
|
|
||||
|
for ( var i in lines ) { |
||||
|
var fname = lines[i]; |
||||
|
if ( localStorage.getItem( fname ) === null ) { |
||||
|
//localStorage.setItem( ts, lines[i].substr(lines[i].indexOf(' ')) );
|
||||
|
downloadMessage( fname ); |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
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(); |
||||
|
|
||||
|
} |
||||
|
function checkInbox() { |
||||
|
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", '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(); |
||||
|
update(); |
||||
|
|
||||
|
//check for new messages every 7 seconds
|
||||
|
window.setInterval( update, 7000 ); |
||||
|
|
@ -0,0 +1,135 @@ |
|||||
|
body, html{ |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
} |
||||
|
|
||||
|
body{ |
||||
|
font-size:20px; |
||||
|
text-shadow: 1px 1px #ddd; |
||||
|
font-family: times, 'times new roman', helvetica,serif; |
||||
|
line-height:1.5em; |
||||
|
color:#444; |
||||
|
background:#fff; |
||||
|
padding:20px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
#message-form textarea{ |
||||
|
-webkit-appearance: none; |
||||
|
-moz-appearance: none; |
||||
|
|
||||
|
display: block; |
||||
|
outline:none; |
||||
|
width: 98%; |
||||
|
margin: 0 auto; |
||||
|
line-height: 40px; |
||||
|
border:none; |
||||
|
-webkit-border-radius: 13px; |
||||
|
-moz-border-radius: 13px; |
||||
|
border-radius: 13px; |
||||
|
font-family: inherit; |
||||
|
font-size: 20px; |
||||
|
|
||||
|
-moz-box-shadow:0 0 23px #bbb; |
||||
|
-webkit-box-shadow:0 0 23px #bbb; |
||||
|
box-shadow:0 0 23px #bbb; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
#message-form .send-button { |
||||
|
-webkit-appearance: none; |
||||
|
-moz-appearance: none; |
||||
|
outline: none; |
||||
|
//border: 1px solid #bbb; |
||||
|
border:0; |
||||
|
-webkit-border-radius: 13px; |
||||
|
-moz-border-radius: 13px; |
||||
|
border-radius: 13px; |
||||
|
height:40px; |
||||
|
width:100%; |
||||
|
display: block; |
||||
|
font-family: inherit; |
||||
|
font-size: 20px; |
||||
|
font-weight:bold; |
||||
|
text-shadow: 0 0 23px #888; |
||||
|
background-color:#fff; |
||||
|
|
||||
|
-moz-box-shadow:0 0 23px #bbb; |
||||
|
-webkit-box-shadow:0 0 23px #bbb; |
||||
|
box-shadow:0 0 23px #bbb; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
select{ |
||||
|
width:100%; |
||||
|
display: block; |
||||
|
margin-left: auto; |
||||
|
margin-right: auto; |
||||
|
margin: 1.5em 0; |
||||
|
font-family: inherit; |
||||
|
font-size: inherit; |
||||
|
font-size: 20px; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
h2{ |
||||
|
margin: 0 0 20px; |
||||
|
font-size: 40px; |
||||
|
text-shadow: 0px 0px 23px #bbb; |
||||
|
} |
||||
|
|
||||
|
hr{ |
||||
|
height:10px; |
||||
|
border: 10; |
||||
|
width:87%; |
||||
|
background-image: url(css/bg1.gif); |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.messages ul{ |
||||
|
width:100%; |
||||
|
padding:0px; |
||||
|
} |
||||
|
.messages li{ |
||||
|
list-style: none; |
||||
|
width:100%; |
||||
|
} |
||||
|
.messages .message-block { |
||||
|
padding:30px; |
||||
|
word-wrap:break-word; |
||||
|
overflow: visible; |
||||
|
-moz-box-shadow:0 0 23px #bbb; |
||||
|
-webkit-box-shadow:0 0 23px #bbb; |
||||
|
box-shadow:0 0 23px #bbb; |
||||
|
-webkit-border-top-left-radius:123px; |
||||
|
-webkit-border-top-right-radius:123px; |
||||
|
-webkit-border-bottom-right-radius:123px; |
||||
|
-webkit-border-bottom-left-radius:123px; |
||||
|
-moz-border-radius-bottomright:123px; |
||||
|
-moz-border-radius-bottomleft:123px; |
||||
|
-moz-border-top-left-radius:123px; |
||||
|
-moz-border-top-right-radius:123px; |
||||
|
border-top-left-radius:123px; |
||||
|
border-top-right-radius:123px; |
||||
|
border-bottom-right-radius:123px; |
||||
|
border-bottom-left-radius:123px; |
||||
|
background:#fff; |
||||
|
} |
||||
|
.node, .hops { |
||||
|
font-size:10px; |
||||
|
} |
||||
|
.message-text { |
||||
|
font-size: 25px; |
||||
|
} |
||||
|
.date-sender { |
||||
|
font-size: 15px; |
||||
|
} |
||||
|
#outbox{ |
||||
|
display:none; |
||||
|
} |
||||
|
#header{ |
||||
|
width:100%; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
Loading…
Reference in new issue