mirror of
https://github.com/s00500/nodeMessageBoard.git
synced 2024-12-17 21:00:49 +00:00
added fixed footer
This commit is contained in:
parent
b6164a0eae
commit
01d9b85bcf
88
board.html
88
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>
|
||||
|
||||
<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>
|
||||
</html>
|
||||
|
||||
174
db.json
174
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
|
||||
}
|
||||
]
|
||||
}
|
||||
17
server.js
17
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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user