eorg_oz/nodeMessageBoard
1
0
Fork 0
forked from lbsadmin/nodeMessageBoard
Code

added fixed footer

Browse Source
This commit is contained in:
Lukas Bachschwell 2016-03-10 09:28:41 +01:00
parent b6164a0eae
commit 01d9b85bcf
3 changed files with 234 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
board.html
View File

@ -2,6 +2,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<html> <html>
<head> <head>
<title>SMS Board</title> <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="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" /> <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="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="/socket.io/socket.io.js"> <script src="/socket.io/socket.io.js">
</script> </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> <script>
const toDisplay = 4; //define the number of messages to show const toDisplay = 4; //define the number of messages to show
var iosocket; var iosocket;
var currentMessageCount = 0; 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() function initSocketIO()
@ -26,32 +76,37 @@
iosocket.on('debugMessage', function(message) { iosocket.on('debugMessage', function(message) {
alert(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 censoredNumber = number.substring(0,3) + "********" +number.substring(number.length - 3, number.length);
var messages = document.getElementById('messagesBody'); var messages = document.getElementById('messagesBody');
var newDiv = document.createElement('div'); newDiv = document.createElement('div');
var newH1 = document.createElement('h1'); var newH1 = document.createElement('h1');
var newP = document.createElement('p'); var newP = document.createElement('p');
newH1.innerHTML = message; newH1.innerHTML = message;
newP.innerHTML = "by "+censoredNumber+" at "+time; 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.className="jumbotron";
newDiv.appendChild(newH1); newDiv.appendChild(newH1);
newDiv.appendChild(newP); newDiv.appendChild(newP);
messages.appendChild(newDiv); //messages.appendChild(newDiv);
currentMessageCount++; currentMessageCount++;
if(currentMessageCount > toDisplay) if(currentMessageCount > toDisplay)
{ {
//Remove the top row //Remove the top div
$('#messagesBody').find('div').first().remove(); $('#messagesBody').find('div').first().slideUp(function() {
$(this).remove();
document.getElementById('messagesBody').appendChild(newDiv);
});
//$('#messagesBody').find('div').first().remove();
//messages.removeChild(messages.firstChild); //messages.removeChild(messages.firstChild);
//mainTable.deleteRow(1);
currentMessageCount--; currentMessageCount--;
}else{
document.getElementById('messagesBody').appendChild(newDiv);
} }
}); });
}); });
} }
@ -79,24 +134,25 @@
</script> </script>
</head> </head>
<body> <body style="/*background-color: #D4D4D4;*/">
<div style="text-align:center;" > <div style="text-align:center;" >
<!--<h1 style="color:#000066;">SMS Message Board</h1>--> <!--<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> <h2>Send an SMS with a message to <span style="color:#3399ff;">+43 681 2033 4015</span></h2>
<br> <div id="wrap">
<div id="messagesBody"> <div id="messagesBody">
</div> </div>
<h3>Send an SMS with a message to <span style="color:#3399ff;">+43 681 2033 4015</span></h3>
<br> <br>
<br> <br>
<div style="display:none;" id="btnHolder"> <div style="display:none;" id="btnHolder">
<h2>Debug functions</h2> <h2>Debug functions</h2>
<input type="checkbox" id="check" value="toggle"/><label for="check">Send AT</label> <input type="checkbox" id="check" value="toggle"/><label for="check">Send AT</label>
</div>
<div id="debugOut"> </div> <div id="debugOut"> </div>
</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> </body>
</html> </html>

174
db.json
View File

@ -1,52 +1,172 @@
{ {
"messages": [ "messages": [
{ {
"numberString": "+CMT: \"002B0034003300360039003900310030003000380038003800380036\",\"\",\"16/03/09,14:26:33+04\"\r", "numberString": "",
"number": "+4369910088886", "number": "+43 681 2033 4015",
"time": "14:26:33", "time": "now",
"message": "1" "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", "number": "+4369910088886",
"time": "14:26:37", "time": "19:19:25",
"message": "2😉" "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", "number": "+436645305996",
"time": "14:43:49", "time": "19:29:45",
"message": "Spruch des Tages:\n💤😀😇" "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", "number": "+436645305996",
"time": "14:42:55", "time": "19:30:05",
"message": "Spruch des Tages:\n💤😀😇" "message": "Animations",
"color": 1
}, },
{ {
"numberString": "+CMT: \"002B0034003300360039003900310030003000380038003800380036\",\"\",\"16/03/09,16:03:56+04\"\r", "numberString": "+CMT: \"002B003400330036003600340035003300300035003900390036\",\"\",\"16/03/09,19:32:09+04\"\r",
"number": "+4369910088886", "number": "+436645305996",
"time": "16:03:56", "time": "19:32:09",
"message": "Test 400" "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", "number": "+4369910088886",
"time": "16:04:09", "time": "19:36:27",
"message": "Haha" "message": "Hallo Familie 😊🙉🎉",
"color": 3
}, },
{ {
"numberString": "+CMT: \"002B0034003300360039003900310030003000380038003800380036\",\"\",\"16/03/09,16:04:47+04\"\r", "numberString": "+CMT: \"002B003400330036003600340035003300300035003900390036\",\"\",\"16/03/09,19:37:44+04\"\r",
"number": "+4369910088886", "number": "+436645305996",
"time": "16:04:47", "time": "19:37:44",
"message": "Hahi" "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", "number": "+4369910088886",
"time": "16:05:47", "time": "20:35:42",
"message": "W" "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
} }
] ]
} }

17
server.js
View File

@ -16,6 +16,7 @@ var portName = '/dev/tty.usbmodemFD121'; //change this to your Arduino port
var numberStringRecieved = ""; var numberStringRecieved = "";
var numberRecieved = ""; var numberRecieved = "";
var timeRecieved = ""; var timeRecieved = "";
var color = 0;
// utility function for ucs2 decode // utility function for ucs2 decode
function ucs2Parse(ucs2){ function ucs2Parse(ucs2){
@ -31,6 +32,10 @@ function ucs2Parse(ucs2){
// handle contains locations to browse to (vote and poll); pathnames. // handle contains locations to browse to (vote and poll); pathnames.
function startServer(route,handle,debug) 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 // on request event
function onRequest(request, response) { function onRequest(request, response) {
// parse the requested url into pathname. pathname will be compared // 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 times = db('messages').chain().takeRight(number).map('time').value();
var numbers = db('messages').chain().takeRight(number).map('number').value(); var numbers = db('messages').chain().takeRight(number).map('number').value();
var messages = db('messages').chain().takeRight(number).map('message').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++){ 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){ if(numberRecieved){
//console.log("emit"); //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); 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 //add a new message to the board directly
socketServer.emit('newMessage', timeRecieved, numberRecieved, messageRecieved); socketServer.emit('newMessage', timeRecieved, numberRecieved, messageRecieved,color);
numberStringRecieved = null; numberStringRecieved = null;
numberRecieved = null; numberRecieved = null;
timeRecieved = null; timeRecieved = null;