Merge pull request #3 from rscmbbng/new-ui

New ui
2014-11-07 16:22:38 +01:00 · 2014-11-07 16:22:38 +01:00 · a37b519ddf
commit a37b519ddf
parent df281b3fa9 3b07132282
7 changed files with 492 additions and 1 deletions
--- a/main.py
+++ b/main.py
@ -22,6 +22,8 @@ class Meshenger:
    os.chdir(os.path.dirname(__file__)) # change present working directory to the one where this file is

    self.own_ip = self.get_ip_adress().strip()
+    # this hash is needed in clientserve, so client can generate color
+    self.own_hash = self.hasj(self.own_ip)

    if not os.path.exists(self.msg_dir):
      os.mkdir(self.msg_dir)
--- a/meshenger_clientserve.py
+++ b/meshenger_clientserve.py
@ -24,6 +24,14 @@ Serve index and messages

    if self.path == '/index' or self.path.startswith( "/"+self.messageDir ):
      return SimpleHTTPServer.SimpleHTTPRequestHandler.do_GET(self)
+    elif self.path == '/id':
+      if meshenger and meshenger.own_hash:
+        self.send_response(200)
+        self.send_header('Content-type', 'text-html')
+        self.end_headers()
+        self.wfile.write(meshenger.own_hash)
+      else:
+        self.send_error(404,'Id not yet available')
    elif self.path == '/log':
      self.send_response(200)
      self.send_header('Content-type', 'text-html')
@ -31,7 +39,15 @@ Serve index and messages
      f = os.path.relpath('log/meshenger.log')
      with open( f, 'r') as the_file:
        self.wfile.write(the_file.read())
-    else:
+    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)
+    elif self.path == '/old':
      self.send_response(200) #serve the webapp on every url requested
      self.send_header('Content-type', 'text/html')
      self.end_headers()
@ -39,6 +55,10 @@ Serve index and messages
      with open( f, 'r') as the_file:
        self.wfile.write(the_file.read())

+    else:
+      self.path = '/' + os.path.join('web', 'index.html')
+      return SimpleHTTPServer.SimpleHTTPRequestHandler.do_GET(self)
+

  def do_POST(self):
    """
--- a/web/.index.html.swo
+++ b/web/.index.html.swo
--- a/web/index.html
+++ b/web/index.html
@ -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&#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>
+    <!--
+    <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>
--- a/web/lib/jquery-2.1.1.min.js
+++ b/web/lib/jquery-2.1.1.min.js
--- a/web/main.js
+++ b/web/main.js
@ -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 );
+
--- a/web/style.css
+++ b/web/style.css
@ -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;
+}
+