rra
/
meshenger
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

setup for new web ui

pull/3/head
jngrt 10 years ago
parent
df281b3fa9
commit
d19179cbf8
6 changed files with 362 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 9
      meshenger_clientserve.py
  2. BIN
      web/.index.html.swo
  3. 33
      web/index.html
  4. 4
      web/lib/jquery-2.1.1.min.js
  5. 204
      web/main.js
  6. 112
      web/style.css

9
meshenger_clientserve.py
View File

@ -31,6 +31,15 @@ Serve index and messages
f = os.path.relpath('log/meshenger.log') f = os.path.relpath('log/meshenger.log')
with open( f, 'r') as the_file: with open( f, 'r') as the_file:
self.wfile.write(the_file.read()) self.wfile.write(the_file.read())
elif self.path.startswith('/web'):
f = os.path.relpath(self.path[1:])
if not os.path.exists( f ) or os.path.isdir( f ):
f = os.path.join('web', 'index.html')
self.path = '/'+f
return SimpleHTTPServer.SimpleHTTPRequestHandler.do_GET(self)
else: else:
self.send_response(200) #serve the webapp on every url requested self.send_response(200) #serve the webapp on every url requested
self.send_header('Content-type', 'text/html') self.send_header('Content-type', 'text/html')

BIN
web/.index.html.swo
View File

Binary file not shown.

33
web/index.html
View File

@ -0,0 +1,33 @@
<!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&#45;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>
<textarea id="name" rows="1" placeholder="Your Name (leave empty for anonymous)"></textarea>
<textarea id="message" rows="3" placeholder="Your Message"></textarea>
<button style="width:100%" id="send">Send</button>
<select id="messagesort" name="messageSort">
<option value="dateReceived">Sort by Date Received</option>
<option value="dateSend">Sort by Date Send</option>
</select>
<ul id="inbox"></ul>
<ul id="outbox"></ul>
<script src="/web/main.js"></script>
</body>
</html>

4
web/lib/jquery-2.1.1.min.js
View File

File diff suppressed because one or more lines are too long

204
web/main.js
View File

@ -0,0 +1,204 @@
localStorage.clear();
/*
* OUTBOX STUFF
*/
document.getElementById( 'send' ).onclick = 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 = '';
};
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;
}
// alert(element);
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 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>';
}
document.getElementById( 'inbox' ).innerHTML = contentString;
}
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();
}
/*
* INIT
*/
updateInboxView();
updateOutboxView();
window.setInterval( function(){
checkInbox();
checkOutbox();
}, 7000 );

112
web/style.css
View File

@ -0,0 +1,112 @@
body, html{
margin: 0;
padding: 0;
}
body{
font-size:20px;
text-shadow: 1px 1px orange;
font-family: times, 'times new roman', helvetica,serif;
line-height:1.5em;
color:#444;
background:#fff;
//background-image: url(css/marble.jpg);
}
textarea{
-webkit-appearance: none;
-moz-appearance: none;
display: block;
margin-left: auto;
margin-right: auto;
width: 90%; height: 50px;
line-height: 40px; font-size: 17px;
border: 1px solid #bbb;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
//background-image: url(css/aqua.jpg);
font-family: inherit;
font-size: inherit;
font-size: 20px;
}
button {
display: block;
margin-left: auto;
margin-right: auto;
margin: 1.5em 0;
font-family: inherit;
font-size: inherit;
font-size: 20px;
}
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{
font-size: 40px;
}
hr{
height:10px;
border: 10;
width:87%;
background-image: url(css/bg1.gif);
}
ul{
width:95%;
padding-left:30px;
}
li{
word-wrap:break-word;
list-style: none;
overflow: visible;
padding:30px;
-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;
left:-35px;
width:100%;
//overflow:hidden;
position:relative;
background:#fff;
//background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
//background:-moz-linear-gradient(top, #fff, #eee);
}
#outbox{
display:none;
}
#header{
width:100%;
text-align: center;
}
Write Preview
Loading…
Cancel
Save