Cosmetic changes in realtime-advanced

This commit is contained in:
Manu Mtz-Almeida 2015-05-14 04:39:17 +02:00
parent 3948dac8c4
commit e7adcaf591
2 changed files with 18 additions and 18 deletions

View File

@ -32,15 +32,6 @@
</style> </style>
</head> </head>
<body> <body>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-62943585-1', 'auto');
ga('send', 'pageview');
</script>
<nav class="navbar navbar-fixed-top navbar-inverse"> <nav class="navbar navbar-fixed-top navbar-inverse">
<div class="container"> <div class="container">
<div class="navbar-header"> <div class="navbar-header">
@ -72,23 +63,23 @@
<div class="row"> <div class="row">
<div class="col-md-8"> <div class="col-md-8">
<div id="chat-scroll" style="overflow-y:scroll; overflow-x:scroll; height:270px"> <div id="chat-scroll" style="overflow-y:scroll; overflow-x:scroll; height:270px">
<table id="table-style" class="table"> <table id="table-style" class="table" data-show-header="false">
<thead> <thead>
<tr> <tr>
<th data-field="id" class="col-md-2">Nick</th> <th data-field="nick" class="col-md-2">Nick</th>
<th data-field="name" class="col-md-8">Message</th> <th data-field="message" class="col-md-8">Message</th>
</tr> </tr>
</thead> </thead>
<tbody id="chat"></tbody> <tbody id="chat"></tbody>
</table> </table>
</div> </div>
{{if .nick}} {{if .nick}}
<form class="form-inline" id="chat-form" action="/room-post/{{.roomid}}?nick={{.nick}}" method="post"> <form autocomplete="off" class="form-inline" id="chat-form" action="/room-post/{{.roomid}}?nick={{.nick}}" method="post">
<div class="form-group"> <div class="form-group">
<label class="sr-only" for="chat-message">Message</label> <label class="sr-only" for="chat-message">Message</label>
<div class="input-group"> <div class="input-group">
<div class="input-group-addon">{{.nick}}</div> <div class="input-group-addon">{{.nick}}</div>
<input name="message" id="chat-message" placeholder="a message" type="text" class="form-control" /> <input type="text" name="message" id="chat-message" class="form-control" placeholder="a message" value="" />
</div> </div>
</div> </div>
<input type="submit" class="btn btn-primary" value="Send" /> <input type="submit" class="btn btn-primary" value="Send" />

View File

@ -110,10 +110,10 @@ function parseJSONStats(e) {
function newChatMessage(e) { function newChatMessage(e) {
var data = jQuery.parseJSON(e.data); var data = jQuery.parseJSON(e.data);
var nick = escapeHtml(data.nick); var nick = data.nick;
var message = escapeHtml(data.message); var message = data.message;
var style = rowStyle(nick);
var html = "<tr><td>"+nick+"</td><td>"+message+"</td></tr>"; var html = "<tr class=\""+style+"\"><td>"+nick+"</td><td>"+message+"</td></tr>";
$('#chat').append(html); $('#chat').append(html);
$("#chat-scroll").scrollTop($("#chat-scroll")[0].scrollHeight); $("#chat-scroll").scrollTop($("#chat-scroll")[0].scrollHeight);
@ -136,6 +136,15 @@ var entityMap = {
"/": '&#x2F;' "/": '&#x2F;'
}; };
function rowStyle(nick) {
var classes = ['active', 'success', 'info', 'warning', 'danger'];
var index = hashCode(nick)%5;
return classes[index];
}
function hashCode(s){
return Math.abs(s.split("").reduce(function(a,b){a=((a<<5)-a)+b.charCodeAt(0);return a&a},0));
}
function escapeHtml(string) { function escapeHtml(string) {
return String(string).replace(/[&<>"'\/]/g, function (s) { return String(string).replace(/[&<>"'\/]/g, function (s) {