2014-04-28 23:49:38 +02:00
|
|
|
<!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">
|
2014-05-28 12:51:12 +02:00
|
|
|
|
|
|
|
|
<style>
|
2014-05-28 22:16:09 +02:00
|
|
|
body, html{margin: 0;padding: 0;}
|
2014-11-03 16:19:48 +01:00
|
|
|
|
2014-05-28 21:00:11 +02:00
|
|
|
body{
|
|
|
|
|
font-size:20px;
|
2014-05-28 21:38:12 +02:00
|
|
|
text-shadow: 1px 1px orange;
|
2014-05-28 21:00:11 +02:00
|
|
|
font-family: times, 'times new roman', helvetica,serif;
|
|
|
|
|
line-height:1.5em;
|
|
|
|
|
color:#444;
|
2014-11-03 16:19:48 +01:00
|
|
|
background:#fff;
|
|
|
|
|
background-image: url(css/marble.jpg);
|
2014-05-28 21:00:11 +02:00
|
|
|
}
|
2014-05-28 12:51:12 +02:00
|
|
|
|
|
|
|
|
textarea{
|
2014-05-28 21:38:12 +02:00
|
|
|
-webkit-appearance: none; -moz-appearance: none;
|
|
|
|
|
display: block;
|
2014-05-28 22:16:09 +02:00
|
|
|
|
2014-11-03 16:19:48 +01:00
|
|
|
|
2014-05-28 22:16:09 +02:00
|
|
|
margin-left: auto;
|
|
|
|
|
margin-right: auto;
|
|
|
|
|
width: 90%; height: 50px;
|
2014-05-28 21:38:12 +02:00
|
|
|
line-height: 40px; font-size: 17px;
|
|
|
|
|
border: 1px solid #bbb;
|
|
|
|
|
-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
|
2014-11-03 16:19:48 +01:00
|
|
|
background-image: url(css/aqua.jpg);
|
2014-05-28 21:38:12 +02:00
|
|
|
font-family: inherit;
|
|
|
|
|
font-size: inherit;
|
2014-05-28 21:55:27 +02:00
|
|
|
font-size: 20px;
|
2014-05-28 12:51:12 +02:00
|
|
|
}
|
2014-05-28 21:38:12 +02:00
|
|
|
|
|
|
|
|
|
2014-05-28 12:51:12 +02:00
|
|
|
button {
|
2014-05-28 22:16:09 +02:00
|
|
|
display: block;
|
|
|
|
|
margin-left: auto;
|
|
|
|
|
margin-right: auto;
|
2014-05-28 12:51:12 +02:00
|
|
|
margin: 1.5em 0;
|
2014-05-28 21:00:11 +02:00
|
|
|
font-family: inherit;
|
|
|
|
|
font-size: inherit;
|
2014-05-28 21:55:27 +02:00
|
|
|
font-size: 20px;
|
2014-05-28 12:51:12 +02:00
|
|
|
}
|
2014-05-30 16:15:50 +02:00
|
|
|
|
|
|
|
|
select{
|
|
|
|
|
width:100%;
|
|
|
|
|
display: block;
|
|
|
|
|
margin-left: auto;
|
|
|
|
|
margin-right: auto;
|
|
|
|
|
margin: 1.5em 0;
|
|
|
|
|
font-family: inherit;
|
|
|
|
|
font-size: inherit;
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
|
|
|
|
|
}
|
2014-11-03 16:19:48 +01:00
|
|
|
|
2014-05-30 16:15:50 +02:00
|
|
|
|
|
|
|
|
|
2014-05-28 21:00:11 +02:00
|
|
|
h2{
|
|
|
|
|
font-size: 40px;
|
|
|
|
|
}
|
2014-11-03 16:19:48 +01:00
|
|
|
|
2014-05-28 21:00:11 +02:00
|
|
|
hr{
|
|
|
|
|
height:10px;
|
|
|
|
|
border: 10;
|
|
|
|
|
width:87%;
|
2014-11-03 16:19:48 +01:00
|
|
|
background-image: url(css/bg1.gif);
|
2014-05-28 21:00:11 +02:00
|
|
|
|
|
|
|
|
}
|
2014-05-28 21:55:27 +02:00
|
|
|
ul{
|
2014-05-28 22:16:09 +02:00
|
|
|
width:95%;
|
2014-05-28 21:55:27 +02:00
|
|
|
//margin-left: 0px;
|
|
|
|
|
padding-left:30px;
|
|
|
|
|
}
|
2014-05-28 21:00:11 +02:00
|
|
|
li{
|
2014-11-03 16:19:48 +01:00
|
|
|
|
2014-05-28 21:38:12 +02:00
|
|
|
word-wrap:break-word;
|
|
|
|
|
list-style: none;
|
|
|
|
|
overflow: visible;
|
|
|
|
|
padding:30px;
|
2014-05-28 21:00:11 +02:00
|
|
|
-moz-box-shadow:0 0 23px #bbb;
|
|
|
|
|
-webkit-box-shadow:0 0 23px #bbb;
|
2014-05-28 21:38:12 +02:00
|
|
|
box-shadow:0 0 23px #bbb;
|
2014-05-28 21:00:11 +02:00
|
|
|
-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;
|
2014-05-28 21:38:12 +02:00
|
|
|
-moz-border-top-left-radius:123px;
|
|
|
|
|
-moz-border-top-right-radius:123px;
|
|
|
|
|
border-top-left-radius:123px;
|
|
|
|
|
border-top-right-radius:123px;
|
2014-05-28 21:00:11 +02:00
|
|
|
border-bottom-right-radius:123px;
|
|
|
|
|
border-bottom-left-radius:123px;
|
|
|
|
|
left:-35px;
|
2014-11-03 16:19:48 +01:00
|
|
|
|
2014-05-28 21:38:12 +02:00
|
|
|
width:100%;
|
|
|
|
|
//overflow:hidden;
|
2014-05-28 21:00:11 +02:00
|
|
|
position:relative;
|
|
|
|
|
background:#fff;
|
|
|
|
|
//background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
|
|
|
|
|
//background:-moz-linear-gradient(top, #fff, #eee);
|
|
|
|
|
}
|
|
|
|
|
#outbox{
|
2014-11-05 17:42:51 +01:00
|
|
|
display:none;
|
2014-05-28 21:00:11 +02:00
|
|
|
}
|
|
|
|
|
#header{
|
|
|
|
|
width:100%;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
2014-05-28 22:16:09 +02:00
|
|
|
#name{
|
2014-11-03 16:19:48 +01:00
|
|
|
|
2014-11-05 17:42:51 +01:00
|
|
|
}
|
|
|
|
|
.hops .node{
|
|
|
|
|
// display:hidden;
|
2014-05-28 22:16:09 +02:00
|
|
|
}
|
2014-05-28 21:00:11 +02:00
|
|
|
|
|
|
|
|
</style>
|
2014-05-28 12:51:12 +02:00
|
|
|
|
2014-04-28 23:49:38 +02:00
|
|
|
<title>meshed up</title>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
2014-05-28 21:00:11 +02:00
|
|
|
<div id="header">
|
|
|
|
|
<h2>Meshenger</h2>
|
2014-11-03 16:19:48 +01:00
|
|
|
|
|
|
|
|
|
2014-05-28 22:16:09 +02:00
|
|
|
|
2014-05-28 21:00:11 +02:00
|
|
|
</div>
|
|
|
|
|
|
2014-05-28 22:16:09 +02:00
|
|
|
<textarea id="name" rows="1" placeholder="Your Name (leave empty for anonymous)"></textarea>
|
|
|
|
|
<textarea id="message" rows="3" placeholder="Your Message"></textarea>
|
2014-05-28 21:00:11 +02:00
|
|
|
<button style="width:100%" id="send">Send</button>
|
2014-11-03 16:19:48 +01:00
|
|
|
|
2014-05-30 16:15:50 +02:00
|
|
|
<select id="messagesort" name="messageSort">
|
|
|
|
|
<option value="dateReceived">Sort by Date Received</option>
|
|
|
|
|
<option value="dateSend">Sort by Date Send</option>
|
2014-11-03 16:19:48 +01:00
|
|
|
|
2014-05-30 16:15:50 +02:00
|
|
|
</select>
|
2014-04-28 23:49:38 +02:00
|
|
|
<ul id="inbox"></ul>
|
2014-11-03 16:19:48 +01:00
|
|
|
|
2014-05-28 21:00:11 +02:00
|
|
|
<!--<h2>outbox</h2>-->
|
|
|
|
|
<ul id="outbox"></ul>
|
2014-04-28 23:49:38 +02:00
|
|
|
|
2014-11-03 16:19:48 +01:00
|
|
|
|
2014-04-28 23:49:38 +02:00
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
2014-11-05 17:42:51 +01:00
|
|
|
localStorage.clear();
|
2014-04-28 23:49:38 +02:00
|
|
|
/*
|
|
|
|
|
* OUTBOX STUFF
|
|
|
|
|
*/
|
|
|
|
|
document.getElementById( 'send' ).onclick = function() {
|
|
|
|
|
|
|
|
|
|
var outStr = localStorage.getItem( 'outbox' ) || '';
|
2014-05-28 21:22:11 +02:00
|
|
|
if (document.getElementById('name').value == ""){
|
|
|
|
|
var namm= "anonymous";
|
2014-11-03 16:19:48 +01:00
|
|
|
}
|
2014-05-28 21:22:11 +02:00
|
|
|
else{
|
|
|
|
|
var namm= document.getElementById('name').value;
|
|
|
|
|
}
|
2014-05-28 23:30:34 +02:00
|
|
|
var mess = document.getElementById('message').value.replace(/\r?\n/g, "<br />");
|
2014-11-05 17:42:51 +01:00
|
|
|
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) );
|
2014-04-28 23:49:38 +02:00
|
|
|
updateOutboxView();
|
|
|
|
|
checkOutbox();
|
|
|
|
|
document.getElementById('message').value = '';
|
|
|
|
|
};
|
|
|
|
|
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;
|
|
|
|
|
}
|
2014-11-05 17:42:51 +01:00
|
|
|
var obj = JSON.parse(lines[i]);
|
|
|
|
|
var ts = obj.message.time;
|
|
|
|
|
delete obj.message.time;
|
|
|
|
|
var msg = JSON.stringify(obj.message);
|
2014-04-28 23:49:38 +02:00
|
|
|
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 ) {
|
2014-11-05 17:42:51 +01:00
|
|
|
var obj = JSON.parse(lines[i]);
|
|
|
|
|
var ts = obj.message.time;
|
2014-04-28 23:49:38 +02:00
|
|
|
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;
|
|
|
|
|
}
|
2014-11-05 17:42:51 +01:00
|
|
|
var obj = JSON.parse(lines[i]);
|
|
|
|
|
var ts = obj.message.time;
|
|
|
|
|
delete obj.message.time;
|
|
|
|
|
var msg = JSON.stringify(obj.message);
|
|
|
|
|
|
2014-04-28 23:49:38 +02:00
|
|
|
contentString += '<li><b>' + ts + ' </b>' + msg + '</li>';
|
|
|
|
|
}
|
|
|
|
|
document.getElementById( 'outbox' ).innerHTML = contentString;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
* INBOX STUFF
|
|
|
|
|
*/
|
2014-05-28 20:48:08 +02:00
|
|
|
|
|
|
|
|
|
2014-04-28 23:49:38 +02:00
|
|
|
function updateInboxView() {
|
2014-05-28 20:48:08 +02:00
|
|
|
var localStorageArray = new Array();
|
2014-04-28 23:49:38 +02:00
|
|
|
var contentString = '';
|
2014-05-28 20:48:08 +02:00
|
|
|
|
|
|
|
|
if (localStorage.length>0) {
|
|
|
|
|
for (i=0;i<localStorage.length;i++){
|
|
|
|
|
|
2014-11-05 17:42:51 +01:00
|
|
|
element=localStorage.getItem(localStorage.key(i));
|
|
|
|
|
|
|
|
|
|
if ( localStorage.key(i).length < 10 || element === 'outbox' ) {
|
|
|
|
|
continue;
|
2014-05-28 20:48:08 +02:00
|
|
|
}
|
2014-11-06 11:59:54 +01:00
|
|
|
// alert(element);
|
|
|
|
|
try {
|
|
|
|
|
elementj = JSON.parse(element);
|
|
|
|
|
} catch (e) {
|
|
|
|
|
continue;
|
|
|
|
|
}
|
2014-11-05 17:42:51 +01:00
|
|
|
|
|
|
|
|
localStorageArray[i] = { time:localStorage.key(i), user:elementj.name, message:elementj.message, node:elementj.node, hops:elementj.hops };
|
2014-05-28 20:48:08 +02:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
orderStorage = localStorageArray.sort(function(a,b) { return b.time - a.time } );
|
|
|
|
|
|
|
|
|
|
for(var i in orderStorage)
|
2014-04-28 23:49:38 +02:00
|
|
|
{
|
|
|
|
|
if ( i.length === 0 || i === 'outbox' ) {
|
|
|
|
|
continue;
|
|
|
|
|
}
|
2014-05-28 20:48:08 +02:00
|
|
|
var date = new Date(parseInt(orderStorage[i].time));
|
2014-11-03 16:19:48 +01:00
|
|
|
// date.setHours(date.getHours() + 2);
|
|
|
|
|
var datereadable = date.getDate()+"/"+(date.getMonth()+1)+"/"+date.getFullYear()+" "+date.getHours()+":"+date.getMinutes();
|
2014-11-05 17:42:51 +01:00
|
|
|
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>';
|
2014-04-28 23:49:38 +02:00
|
|
|
}
|
|
|
|
|
document.getElementById( 'inbox' ).innerHTML = contentString;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function onMessageDownload( msg, filename ) {
|
|
|
|
|
if ( localStorage.getItem( filename ) === null ) {
|
|
|
|
|
localStorage.setItem( filename, msg );
|
|
|
|
|
}
|
|
|
|
|
updateInboxView();
|
|
|
|
|
}
|
|
|
|
|
function onIndex( index ) {
|
2014-05-28 12:02:01 +02:00
|
|
|
var lines = index.split( /\n/ );
|
2014-05-28 11:09:01 +02:00
|
|
|
|
|
|
|
|
for(var k in localStorage){
|
|
|
|
|
var l = 1;
|
|
|
|
|
for ( var i in lines ) {
|
2014-05-28 12:02:01 +02:00
|
|
|
var f = lines[i];
|
|
|
|
|
if (f == k){ l = 0; }
|
2014-05-28 11:09:01 +02:00
|
|
|
}
|
2014-11-03 16:19:48 +01:00
|
|
|
if (l == 1){
|
2014-05-28 11:09:01 +02:00
|
|
|
localStorage.removeItem(k);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
updateInboxView();
|
|
|
|
|
|
2014-04-28 23:49:38 +02:00
|
|
|
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 );
|
|
|
|
|
}
|
2014-11-03 16:19:48 +01:00
|
|
|
|
2014-04-28 23:49:38 +02:00
|
|
|
}
|
2014-05-28 11:09:01 +02:00
|
|
|
|
2014-04-28 23:49:38 +02:00
|
|
|
}
|
|
|
|
|
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();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
* INIT
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
updateInboxView();
|
|
|
|
|
updateOutboxView();
|
|
|
|
|
window.setInterval( function(){
|
|
|
|
|
checkInbox();
|
|
|
|
|
checkOutbox();
|
2014-11-06 21:34:56 +01:00
|
|
|
}, 7000 );
|
2014-04-28 23:49:38 +02:00
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
