Add private messaging (closes #12).

master
Skylar Ittner 7 years ago
parent 46cb98aa7c
commit beca9dfa96

@ -167,7 +167,7 @@ body {
font-weight: bold;
}
#namedisp {
#namecontainer {
float: left;
}
@ -233,14 +233,8 @@ body {
}
.chat-username {
color: green;
font-weight: bold;
}
.chat-username-admin {
color: red;
color: white;
font-weight: bold;
font-style: italic;
}
#buttons {
@ -296,6 +290,29 @@ body {
width: fit-content;
}
#privmsg-header {
padding-top: 5px;
border-top: 1px solid white;
border-right: 1px solid white;
}
#privmsgs {
padding-top: 10px;
margin-top: -10px;
}
#loading-privmsgs {
border-right: 1px solid white;
padding-top: 10px;
margin-top: -10px;
}
#privmsg-container {
border-right: 1px solid white;
padding-top: 10px;
margin-top: -10px;
}
#badge-header {
padding-top: 5px;
border-top: 1px solid white;

@ -62,17 +62,36 @@ function getChat() {
data = sortResults(data, 'time', true);
var content = "";
data.forEach(function (msg) {
var usernameclass = "chat-username";
if (msg.nickname === 'skylarmt') {
usernameclass = "chat-username-admin";
var usernamecolor = "green";
var usernamecss = "";
if (msg.color) {
usernamecolor = msg.color;
}
content += "<span class='" + usernameclass + "' onclick='openProfile(\"" + msg.nickname + "\");'>" + msg.nickname + "</span> " + msg.message + "<br />";
if (msg.css) {
usernamecss = msg.css;
}
content += "<span class='chat-username' style='color: " + usernamecolor + "; " + usernamecss + "' onclick='openProfile(\"" + msg.nickname + "\");'>" + msg.nickname + "</span> " + msg.message + "<br />";
});
$('#chatmsgs').html(content);
});
}
}
function privMsgSync() {
$.getJSON(
mkApiUrl('privmsgs') + "?filter=unread",
function (data) {
if (data.status === 'OK') {
if (data.msgs.length > 0) {
$('#gotprivmsg').css('display', '');
} else {
$('#gotprivmsg').css('display', 'none');
}
}
}
);
}
var skycons = new Skycons({"color": "black", "resizeClear": true});
skycons.add("weathericon", "clear-day");
@ -116,12 +135,16 @@ function weatherLoadWait() {
}
syncStats();
privMsgSync();
setInterval(function () {
syncStats();
}, 10 * 1000);
setInterval(function () {
getChat();
}, 3000);
}, 3 * 1000);
setInterval(function () {
privMsgSync();
}, 15 * 1000);
setInterval(function () {
getWeather();
getTerrain();

@ -42,7 +42,14 @@
<div id="overlay-top">
<p id="topbar">
<span id="namedisp" onclick="openMenu('profile')"></span>
<span id="namecontainer" onclick="openMenu('profile')">
<span id="namedisp">
</span>
<span id="gotprivmsg" style='display: none;'>
<i class="fa fa-envelope" style="color: red;"></i>
</span>
</span>
<span id="worldinfo" onclick="popDiagData()">
<canvas id="weathericon" width="22" height="22"></canvas>
<img id="terrainicon" src="assets/terrain/-1.png" />

@ -26,6 +26,17 @@
</div>
</div>
<div style="display: none;" id="privmsg-box">
<div class="h5" id="privmsg-header">Messages</div>
<div id="loading-privmsgs">
<i class="fa fa-spinner fa-pulse"></i> Loading...
</div>
<div class="container" id="privmsg-container">
<div class="list-group" id="privmsgs">
</div>
</div>
</div>
<script>
function popBadge(name, desc) {
navigator.notification.alert(desc, null, name, "Close");
@ -35,6 +46,9 @@
$('#player-name').text(user);
loadBadges(user);
loadPlayerStats(user);
if (user == username) {
loadPrivmsgs();
}
}
function loadPlayerStats(user) {
@ -53,6 +67,9 @@
$('#badge-header').css('border-color', '#' + getTeamColorFromId(data.stats.teamid));
$('#badges').css('border-color', '#' + getTeamColorFromId(data.stats.teamid));
$('.badge-img').css('border-color', '#' + getTeamColorFromId(data.stats.teamid));
$('#privmsg-header').css('border-color', '#' + getTeamColorFromId(data.stats.teamid));
$('#privmsg-container').css('border-color', '#' + getTeamColorFromId(data.stats.teamid));
$('#loading-privmsgs').css('border-color', '#' + getTeamColorFromId(data.stats.teamid));
} else {
$('#player-level').text('Cannot load player stats.');
}
@ -82,7 +99,58 @@
}
).fail(
function (err) {
$('#loading-badges').html('Loading failed. <a onclick="loadProfile(\'' + user + '\')">Reload</a>"');
$('#loading-badges').html('Loading failed, <a onclick="loadProfile(\'' + user + '\')">reload</a>"');
}
);
}
function loadPrivmsgs() {
$('#loading-privmsgs').html('<i class="fa fa-spinner fa-pulse"></i> Loading...');
$('#loading-privmsgs').css('display', 'block');
$('#privmsg-box').css('display', 'block');
$('#privmsgs').css('display', 'block');
$.getJSON(
mkApiUrl('privmsgs'),
function (data) {
if (data.status === 'OK') {
$('#privmsgs').html("");
data.msgs.forEach(function (item) {
var privmsghtml = '<div class="list-group-item" '
+ (item.msg_read == 0 ? 'onclick="markMsgRead(\'' + item.id + '\')"' : '') + '>'
+ '<button class="btn btn-danger pull-right" onclick="deleteMsg(\'' + item.id + '\')"><i class="fa fa-trash"></i></button>'
+ (item.msg_read == 0 ? '<b>' : '') + item.message + (item.msg_read == 0 ? '</b>' : '')
+ '<br />' + (item.msg_read == 0 ? '<b>' : '') + "From: " + item.nickname + (item.msg_read == 0 ? '</b>' : '')
+ '</div>';
$('#privmsgs').append(privmsghtml);
});
$('#loading-privmsgs').css('display', 'none');
} else {
$('#loading-privmsgs').html('Loading failed. <a onclick="loadPrivmsgs()">Reload</a>');
}
}
).fail(
function (err) {
$('#loading-privmsgs').html('Loading failed, <a onclick="loadPrivmsgs()">reload</a>"');
}
);
}
function markMsgRead(id) {
$.getJSON(
mkApiUrl('privmsgs') + "?markread=" + id,
function () {
loadPrivmsgs();
privMsgSync();
}
);
}
function deleteMsg(id) {
$.getJSON(
mkApiUrl('privmsgs') + "?delete=" + id,
function () {
loadPrivmsgs();
privMsgSync();
}
);
}