98 lines
2.8 KiB
Plaintext
Executable File
98 lines
2.8 KiB
Plaintext
Executable File
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>Socket.IO chat</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; text-align: center;}
|
|
body { font: 13px Helvetica, Arial; }
|
|
#lvl3 {height: 20%;background-color: red; color:yellow; padding: 3px; position: fixed; bottom: 0; width: 100%; }
|
|
#lvl2 {height: 30%;}
|
|
#lvl1 {height: 50%;}
|
|
table {
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
table, th, td {
|
|
border: 1px solid black;
|
|
}
|
|
</style>
|
|
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
|
|
<script src="/socket.io/socket.io.js"></script>
|
|
<script>
|
|
$(function () {
|
|
var socket = io();
|
|
socket.on('Communication', function(msg){
|
|
|
|
var CommunicationJSON = JSON.parse(msg);
|
|
console.debug(CommunicationJSON)
|
|
CommunicationJSON.ListeCom.forEach(function(Communication){
|
|
switch (Communication.level) {
|
|
case "1":
|
|
$("#lvl1").html('<div data-idPub="'+Communication.IDPub+'\">'+Communication.html+'</div>')
|
|
break;
|
|
case "2":
|
|
$("#lvl2").html('<div data-idPub="'+Communication.IDPub+'\">'+Communication.html+'</div>')
|
|
break;
|
|
case "3":
|
|
$("#lvl3").html('<div data-idPub="'+Communication.IDPub+'\">'+Communication.html+'</div>')
|
|
break;
|
|
default:
|
|
|
|
}
|
|
})
|
|
});
|
|
|
|
|
|
<% if(typeof zone != 'undefined') { %>
|
|
socket.emit("JoinZone", "<%= zone %>");
|
|
<% } %>
|
|
|
|
|
|
|
|
|
|
|
|
$("#btnJoin").click(function(){
|
|
socket.close().connect();
|
|
socket.emit("JoinZone", $("#zone").val());
|
|
})
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<% if(typeof zone == 'undefined') { %>
|
|
<input type="text" id="zone" /><button id="btnJoin">Joindre</button>
|
|
<% } %>
|
|
<table>
|
|
<tr><td id="lvl1"></td></tr>
|
|
<tr><td id="lvl2"></td></tr>
|
|
<tr><td id="lvl3"></td></tr>
|
|
</table>
|
|
|
|
|
|
<script>
|
|
<% if(typeof pub != 'undefined') {
|
|
for(var i=0;i<pub.length;i++){ %>
|
|
var x = "<%= pub[i].Type%>";
|
|
console.debug(x);
|
|
<%
|
|
switch (pub[i].Type) {
|
|
case 1: %>
|
|
$("#lvl1").html('<div data-idPub="<%=pub[i].ID_Com%>"\><%=pub[i].Texte%></div>')
|
|
<%break;
|
|
case 2: %>
|
|
$("#lvl2").html('<div data-idPub="<%=pub[i].ID_Com%>"\><%=pub[i].Texte%></div>')
|
|
<%break;
|
|
case 3: %>
|
|
$("#lvl3").html('<div data-idPub="<%=pub[i].ID_Com%>"\><%=pub[i].Texte%></div>')
|
|
<%break;%>
|
|
|
|
<% } %>
|
|
|
|
<% } %>
|
|
var x = "<%= pub.length%>";
|
|
console.debug(x);
|
|
<% } %>
|
|
</script>
|
|
</body>
|
|
</html>
|