111 lines
3.2 KiB
PHP
111 lines
3.2 KiB
PHP
|
<!doctype html>
|
||
|
|
<html class="no-js" lang="fr">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>IRC</title>
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
background: #ecf0f1;
|
||
|
|
}
|
||
|
|
table {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
td {
|
||
|
|
font-size: 12px;
|
||
|
|
font-family: Monaco, Consolas, monospace;
|
||
|
|
}
|
||
|
|
.timestamp {
|
||
|
|
width: 50px;
|
||
|
|
}
|
||
|
|
.nickname {
|
||
|
|
text-align: right;
|
||
|
|
padding-right: 20px;
|
||
|
|
padding-left: 20px;
|
||
|
|
}
|
||
|
|
button {
|
||
|
|
position: fixed;
|
||
|
|
bottom: 50px;
|
||
|
|
right: 50px;
|
||
|
|
vertical-align: top;
|
||
|
|
padding: 0 20px;
|
||
|
|
/*width: 100%;*/
|
||
|
|
height: 60px;
|
||
|
|
/*padding: 0;*/
|
||
|
|
font-size: 22px;
|
||
|
|
color: white;
|
||
|
|
text-align: center;
|
||
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
|
||
|
|
background: #2980b9;
|
||
|
|
border: 0;
|
||
|
|
border-bottom: 2px solid #2475ab;
|
||
|
|
cursor: pointer;
|
||
|
|
-webkit-box-shadow: inset 0 -2px #2475ab;
|
||
|
|
box-shadow: inset 0 -2px #2475ab;
|
||
|
|
}
|
||
|
|
button:active {
|
||
|
|
outline: none;
|
||
|
|
-webkit-box-shadow: none;
|
||
|
|
box-shadow: none;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<table>
|
||
|
|
<tbody data-bind="foreach: logs">
|
||
|
|
<tr>
|
||
|
|
<td class="timestamp" data-bind="text: timestamp"></td>
|
||
|
|
<td class="nickname" data-bind="text: nickname, style: { color: color }"></td>
|
||
|
|
<td class="message" data-bind="text: message"></td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
<button data-bind="text: autoRefreshEnabled() ? 'Désactiver le direct' : 'Voir en direct', click: function() { autoRefreshEnabled(!autoRefreshEnabled()); }"></button>
|
||
|
|
|
||
|
|
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
|
||
|
|
<script src="http://knockoutjs.com/downloads/knockout-3.4.0.js"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
var viewerModel = function () {
|
||
|
|
var self = this;
|
||
|
|
var colors = ['#3498db', '#1abc9c', '#2ecc71', '#9b59b6', '#34495e', '#16a085', '#8e44ad', '#2c3e50', '#e74c3c', '#e67e22', '#f1c40f', '#c0392b', '#f39c12'];
|
||
|
|
var colorIdx = parseInt(Math.random() * (colors.length));
|
||
|
|
var users = {};
|
||
|
|
self.logs = ko.observableArray([]);
|
||
|
|
self.autoRefreshEnabled = ko.observable(true);
|
||
|
|
var parseLog = function (log) {
|
||
|
|
var rgx = /([0-9:]{5}) ([A-Za-z0-9_ <]+)> (.*)/.exec(log);
|
||
|
|
var groups = {'timestamp': 1, 'nickname': 2, 'message': 3};
|
||
|
|
var nickname = (rgx && rgx[groups.nickname]) ? rgx[groups.nickname] + '>' : null;
|
||
|
|
var color = null;
|
||
|
|
if (users[nickname]) {
|
||
|
|
color = users[nickname];
|
||
|
|
} else {
|
||
|
|
colorIdx = (colorIdx >= colors.length) ? 0 : colorIdx;
|
||
|
|
color = colors[colorIdx];
|
||
|
|
users[nickname] = color;
|
||
|
|
colorIdx++;
|
||
|
|
}
|
||
|
|
return {
|
||
|
|
'timestamp': (rgx && rgx[groups.timestamp]) ? rgx[groups.timestamp] : null,
|
||
|
|
'nickname': nickname,
|
||
|
|
'message': (rgx && rgx[groups.message]) ? rgx[groups.message] : log,
|
||
|
|
'color': color,
|
||
|
|
};
|
||
|
|
};
|
||
|
|
var updateLogs = function () {
|
||
|
|
if (!self.autoRefreshEnabled()) {
|
||
|
|
return ;
|
||
|
|
}
|
||
|
|
$.get(document.location.href, function (data) {
|
||
|
|
self.logs(data.map(parseLog));
|
||
|
|
window.scrollTo(0,document.body.scrollHeight);
|
||
|
|
});
|
||
|
|
};
|
||
|
|
/* update logs */
|
||
|
|
updateLogs();
|
||
|
|
setInterval(updateLogs, 5000);
|
||
|
|
};
|
||
|
|
ko.applyBindings(new viewerModel());
|
||
|
|
</script>
|