added fixed footer

2016-03-10 09:28:41 +01:00
parent b6164a0eae
commit 01d9b85bcf
3 changed files with 234 additions and 47 deletions
--- a/board.html
+++ b/board.html
@@ -2,6 +2,7 @@
 <meta charset="UTF-8">
 <html>
  <head>
+
 <title>SMS Board</title>
  <!--<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />-->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
@@ -9,12 +10,61 @@
 	<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
 	<script src="/socket.io/socket.io.js">
  </script>
+<style>
+/* Sticky footer styles
+-------------------------------------------------- */
+
+html,
+body {
+  height: 100%;
+  /* The html and body elements cannot have any padding or margin. */
+}
+
+/* Wrapper for page content to push down footer */
+#wrap {
+  min-height: 100%;
+  height: auto;
+  /* Negative indent footer by its height */
+  margin: 0 auto -60px;
+  /* Pad bottom by footer height */
+  padding: 0 0 60px;
+}
+
+/* Set the fixed height of the footer here */
+#footer {
+  height: 100px;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+}
+</style>
+

 <script>
  const toDisplay = 4; //define the number of messages to show
  var iosocket;
  var currentMessageCount = 0;
+  var newDiv;

+  function getColor(num){
+    switch(num){
+      case 0:
+      return  "#428bca"; //blue
+      break;
+      case 1:
+      return  "#5cb85c"; //green
+      break;
+      case 2:
+      return  "#5bc0de"; //lightblue
+      break;
+      case 3:
+      return  "#f0ad4e"; //orange
+      break;
+      case 4:
+      return  "#d9534f"; //red
+      break;
+    }
+  }


 	function initSocketIO()
@@ -26,32 +76,37 @@
 		iosocket.on('debugMessage', function(message) {
 			alert(message);
 		});
+     iosocket.on('newMessage', function(time,number,message,color) {
+

-     iosocket.on('newMessage', function(time,number,message) {
       var censoredNumber = number.substring(0,3) + "********" +number.substring(number.length - 3, number.length);
-
       var messages = document.getElementById('messagesBody');
-       var newDiv = document.createElement('div');
+       newDiv = document.createElement('div');
       var newH1 = document.createElement('h1');
       var newP = document.createElement('p');
       newH1.innerHTML = message;
       newP.innerHTML = "by "+censoredNumber+" at "+time;
-       newDiv.style="background:#428bca !important; padding:10px 0;";
+       newDiv.style="background:"+getColor(color)+" !important; padding:10px 0; margin:10px 0;";
       newDiv.className="jumbotron";
       newDiv.appendChild(newH1);
       newDiv.appendChild(newP);
-       messages.appendChild(newDiv);
-
+       //messages.appendChild(newDiv);

       currentMessageCount++;
       if(currentMessageCount > toDisplay)
       {
-         //Remove the top row
-         $('#messagesBody').find('div').first().remove();
+         //Remove the top div
+         $('#messagesBody').find('div').first().slideUp(function() {
+         $(this).remove();
+         document.getElementById('messagesBody').appendChild(newDiv);
+         });
+         //$('#messagesBody').find('div').first().remove();
         //messages.removeChild(messages.firstChild);
-         //mainTable.deleteRow(1);
        currentMessageCount--;
+       }else{
+         document.getElementById('messagesBody').appendChild(newDiv);
       }
+
 	    });
    });
 	}
@@ -79,24 +134,25 @@
 </script>

  </head>
-  <body>
+  <body style="/*background-color: #D4D4D4;*/">
   <div style="text-align:center;" >
 	<!--<h1 style="color:#000066;">SMS Message Board</h1>-->
-
-  <h3>Send an SMS with a message to <span style="color:#3399ff;">+43 681 2033 4015</span></h3>
-  <br>
+  
+  <h2>Send an SMS with a message to <span style="color:#3399ff;">+43 681 2033 4015</span></h2>
+  <div id="wrap">
  <div id="messagesBody">
-
  </div>
-  <h3>Send an SMS with a message to <span style="color:#3399ff;">+43 681 2033 4015</span></h3>

  <br>
  <br>
 	<div style="display:none;" id="btnHolder">
    <h2>Debug functions</h2>
 	  <input type="checkbox" id="check" value="toggle"/><label for="check">Send AT</label>
+    <div id="debugOut"> </div>
 	</div>
-
-   <div id="debugOut"> </div>
+</div>
+<div id="footer">
+<h2>Send an SMS with a message to <span style="color:#3399ff;">+43 681 2033 4015</span></h2>
+</div>
  </body>
 </html>
--- a/db.json
+++ b/db.json
@@ -1,52 +1,172 @@
 {
  "messages": [
    {
-      "numberString": "+CMT: \"002B0034003300360039003900310030003000380038003800380036\",\"\",\"16/03/09,14:26:33+04\"\r",
-      "number": "+4369910088886",
-      "time": "14:26:33",
-      "message": "1"
+      "numberString": "",
+      "number": "+43 681 2033 4015",
+      "time": "now",
+      "message": "SMS MessageBoard",
+      "color": 0
    },
    {
-      "numberString": "+CMT: \"002B0034003300360039003900310030003000380038003800380036\",\"\",\"16/03/09,14:26:37+04\"\r",
+      "numberString": "+CMT: \"002B0034003300360039003900310030003000380038003800380036\",\"\",\"16/03/09,19:19:25+04\"\r",
      "number": "+4369910088886",
-      "time": "14:26:37",
-      "message": "2😉"
+      "time": "19:19:25",
+      "message": "Next",
+      "color": 1
    },
    {
-      "numberString": "+CMT: \"002B003400330036003600340035003300300035003900390036\",\"\",\"16/03/09,14:43:49+04\"\r",
+      "numberString": "+CMT: \"002B0034003300360039003900310030003000380038003800380036\",\"\",\"16/03/09,19:19:43+04\"\r",
+      "number": "+4369910088886",
+      "time": "19:19:43",
+      "message": "Emoji support 😃👍🙈🙊🎉🙉🤑🎁😺🎈",
+      "color": 2
+    },
+    {
+      "numberString": "+CMT: \"002B0034003300360039003900310030003000380038003800380036\",\"\",\"16/03/09,19:19:54+04\"\r",
+      "number": "+4369910088886",
+      "time": "19:19:54",
+      "message": "Multicolor",
+      "color": 3
+    },
+    {
+      "numberString": "+CMT: \"002B0034003300360039003900310030003000380038003800380036\",\"\",\"16/03/09,19:20:18+04\"\r",
+      "number": "+4369910088886",
+      "time": "19:20:18",
+      "message": "...and other tricks! 😉",
+      "color": 4
+    },
+    {
+      "numberString": "+CMT: \"002B003400330036003600340035003300300035003900390036\",\"\",\"16/03/09,19:29:45+04\"\r",
      "number": "+436645305996",
-      "time": "14:43:49",
-      "message": "Spruch des Tages:\n💤😀😇"
+      "time": "19:29:45",
+      "message": "Hi 😁",
+      "color": 0
    },
    {
-      "numberString": "+CMT: \"002B003400330036003600340035003300300035003900390036\",\"\",\"16/03/09,14:42:55+04\"\r",
+      "numberString": "+CMT: \"002B003400330036003600340035003300300035003900390036\",\"\",\"16/03/09,19:30:05+04\"\r",
      "number": "+436645305996",
-      "time": "14:42:55",
-      "message": "Spruch des Tages:\n💤😀😇"
+      "time": "19:30:05",
+      "message": "Animations",
+      "color": 1
    },
    {
-      "numberString": "+CMT: \"002B0034003300360039003900310030003000380038003800380036\",\"\",\"16/03/09,16:03:56+04\"\r",
-      "number": "+4369910088886",
-      "time": "16:03:56",
-      "message": "Test 400"
+      "numberString": "+CMT: \"002B003400330036003600340035003300300035003900390036\",\"\",\"16/03/09,19:32:09+04\"\r",
+      "number": "+436645305996",
+      "time": "19:32:09",
+      "message": "Hallo nici 😇",
+      "color": 2
    },
    {
-      "numberString": "+CMT: \"002B0034003300360039003900310030003000380038003800380036\",\"\",\"16/03/09,16:04:09+04\"\r",
+      "numberString": "+CMT: \"002B0034003300360039003900310030003000380038003800380036\",\"\",\"16/03/09,19:36:27+04\"\r",
      "number": "+4369910088886",
-      "time": "16:04:09",
-      "message": "Haha"
+      "time": "19:36:27",
+      "message": "Hallo Familie 😊🙉🎉",
+      "color": 3
    },
    {
-      "numberString": "+CMT: \"002B0034003300360039003900310030003000380038003800380036\",\"\",\"16/03/09,16:04:47+04\"\r",
-      "number": "+4369910088886",
-      "time": "16:04:47",
-      "message": "Hahi"
+      "numberString": "+CMT: \"002B003400330036003600340035003300300035003900390036\",\"\",\"16/03/09,19:37:44+04\"\r",
+      "number": "+436645305996",
+      "time": "19:37:44",
+      "message": "Emojis funktionieren jetzt auch 😍",
+      "color": 4
    },
    {
-      "numberString": "+CMT: \"002B0034003300360039003900310030003000380038003800380036\",\"\",\"16/03/09,16:05:47+04\"\r",
+      "numberString": "+CMT: \"002B0034003300360036003400370035003000350037003900370032\",\"\",\"16/03/09,20:35:42+04\"\r",
+      "number": "+4366475057972",
+      "time": "20:35:42",
+      "message": "Hey ",
+      "color": 0
+    },
+    {
+      "numberString": "+CMT: \"002B0034003300360039003900310030003000380038003800380036\",\"\",\"16/03/09,20:35:42+04\"\r",
      "number": "+4369910088886",
-      "time": "16:05:47",
-      "message": "W"
+      "time": "20:35:42",
+      "message": "Hallo Timon",
+      "color": 1
+    },
+    {
+      "numberString": "+CMT: \"002B0034003300360039003900310030003000380038003800380036\",\"\",\"16/03/09,20:35:58+04\"\r",
+      "number": "+4369910088886",
+      "time": "20:35:58",
+      "message": "😘👌🎁😉😍😄👌",
+      "color": 2
+    },
+    {
+      "numberString": "+CMT: \"002B0034003300360039003900310030003000380038003800380036\",\"\",\"16/03/09,22:36:42+04\"\r",
+      "number": "+4369910088886",
+      "time": "22:36:42",
+      "message": "Hahahahahah das is lustig",
+      "color": 3
+    },
+    {
+      "numberString": "+CMT: \"002B0034003300360039003900310030003000380038003800380036\",\"\",\"16/03/09,22:36:53+04\"\r",
+      "number": "+4369910088886",
+      "time": "22:36:53",
+      "message": "Ich 😁👍",
+      "color": 4
+    },
+    {
+      "numberString": "+CMT: \"002B0034003300360039003900310030003000380038003800380036\",\"\",\"16/03/09,22:37:08+04\"\r",
+      "number": "+4369910088886",
+      "time": "22:37:08",
+      "message": "Haha fritsch",
+      "color": 0
+    },
+    {
+      "numberString": "+CMT: \"002B0034003300360039003900310030003000380038003800380036\",\"\",\"16/03/09,22:51:08+04\"\r",
+      "number": "+4369910088886",
+      "time": "22:51:08",
+      "message": "😛ahhhhhhh rage!!!!",
+      "color": 1
+    },
+    {
+      "numberString": "+CMT: \"002B0034003300360039003900310030003000380038003800380036\",\"\",\"16/03/09,22:51:19+04\"\r",
+      "number": "+4369910088886",
+      "time": "22:51:19",
+      "message": "Djdndjdcjdosndhf",
+      "color": 2
+    },
+    {
+      "numberString": "+CMT: \"002B0034003300360039003900310030003000380038003800380036\",\"\",\"16/03/09,22:51:33+04\"\r",
+      "number": "+4369910088886",
+      "time": "22:51:33",
+      "message": "Node.js for the win",
+      "color": 3
+    },
+    {
+      "numberString": "+CMT: \"002B0034003300360039003900310030003000380038003800380036\",\"\",\"16/03/09,22:51:53+04\"\r",
+      "number": "+4369910088886",
+      "time": "22:51:53",
+      "message": "Bootstrap ruelz 😛🙈🎉",
+      "color": 4
+    },
+    {
+      "numberString": "+CMT: \"002B0034003300360039003900310030003000380038003800380036\",\"\",\"16/03/09,22:57:20+04\"\r",
+      "number": "+4369910088886",
+      "time": "22:57:20",
+      "message": "I ❤️ Socket.io",
+      "color": 0
+    },
+    {
+      "numberString": "+CMT: \"002B0034003300360039003900310030003000380038003800380036\",\"\",\"16/03/10,09:19:15+04\"\r",
+      "number": "+4369910088886",
+      "time": "09:19:15",
+      "message": "Test",
+      "color": 1
+    },
+    {
+      "numberString": "+CMT: \"002B0034003300360039003900310030003000380038003800380036\",\"\",\"16/03/10,09:19:42+04\"\r",
+      "number": "+4369910088886",
+      "time": "09:19:42",
+      "message": "Test g",
+      "color": 2
+    },
+    {
+      "numberString": "+CMT: \"002B0034003300360039003900310030003000380038003800380036\",\"\",\"16/03/10,09:25:17+04\"\r",
+      "number": "+4369910088886",
+      "time": "09:25:17",
+      "message": "More",
+      "color": 3
    }
  ]
 }
--- a/server.js
+++ b/server.js
@@ -16,6 +16,7 @@ var portName = '/dev/tty.usbmodemFD121'; //change this to your Arduino port
 var numberStringRecieved = "";
 var numberRecieved = "";
 var timeRecieved = "";
+var color = 0;

 // utility function for ucs2 decode
 function ucs2Parse(ucs2){
@@ -31,6 +32,10 @@ function ucs2Parse(ucs2){
 // handle contains locations to browse to (vote and poll); pathnames.
 function startServer(route,handle,debug)
 {
+
+  db('messages').size(); //call this once to establish the db if there is nothing in the json file
+  if(db('messages').size() == 0)db('messages').push({ numberString: "",number: "+43 681 2033 4015", time: "now", message: "SMS MessageBoard",color: 0 });
+
 	// on request event
 	function onRequest(request, response) {
 	  // parse the requested url into pathname. pathname will be compared
@@ -69,9 +74,10 @@ function initSocketIO(httpServer,debug)
 	var times = db('messages').chain().takeRight(number).map('time').value();
 	var numbers = db('messages').chain().takeRight(number).map('number').value();
 	var messages = db('messages').chain().takeRight(number).map('message').value();
+	var colors = db('messages').chain().takeRight(number).map('color').value();

 	for(var i = 0; i < messages.length; i++){
-	socket.emit('newMessage',times[i],numbers[i],messages[i]);
+	socket.emit('newMessage',times[i],numbers[i],messages[i],colors[i]);
  }
 	});

@@ -104,10 +110,15 @@ function serialListener(debug)

 					if(numberRecieved){
 						//console.log("emit");
+						var color = db('messages').chain().takeRight(1).map('color').value();
+						console.log(JSON.stringify(color));
+						if (color == null)color = 0;//no messages yet
+						color++;
+						if(color > 4) color = 0;
          var messageRecieved = ucs2Parse(data);
-					 db('messages').push({ numberString: numberStringRecieved,number: numberRecieved, time: timeRecieved, message: messageRecieved });
+					 db('messages').push({ numberString: numberStringRecieved,number: numberRecieved, time: timeRecieved, message: messageRecieved,color: color });
 					 //add a new message to the board directly
-           socketServer.emit('newMessage', timeRecieved, numberRecieved, messageRecieved);
+           socketServer.emit('newMessage', timeRecieved, numberRecieved, messageRecieved,color);
 					 numberStringRecieved = null;
 					 numberRecieved = null;
 					 timeRecieved = null;