website_jukni/irc/templates/index.php
2017-12-29 15:51:59 +01:00

110 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>