Display all the status changes in UI

This commit is contained in:
Pavel Djundik 2017-08-28 18:03:27 +03:00
parent 0c0df1efc9
commit 05fc00d9be
10 changed files with 59 additions and 68 deletions

View File

@ -1483,6 +1483,15 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
}
#connection-error {
font-size: 12px;
line-height: 36px;
font-weight: bold;
letter-spacing: 1px;
word-spacing: 3px;
text-transform: uppercase;
background: #e74c3c;
color: #fff;
text-align: center;
display: none;
}

View File

@ -63,7 +63,7 @@
</div>
<div id="chat-container" class="window">
<div id="chat"></div>
<button id="connection-error" class="btn btn-reconnect">Client connection lost &mdash; Click here to reconnect</button>
<div id="connection-error"></div>
<form id="form" method="post" action="">
<div class="input">
<span id="nick">

View File

@ -35,6 +35,10 @@ function buildChannelMessages(chanId, chanType, messages) {
}
function appendMessage(container, chanId, chanType, msg) {
if (utils.lastMessageId < msg.id) {
utils.lastMessageId = msg.id;
}
let lastChild = container.children(".msg, .date-marker-container").last();
const renderedMessage = buildChatMessage(msg);

View File

@ -10,6 +10,7 @@ socket.on("auth", function(data) {
// And we will reload the page to grab the latest version
if (utils.serverHash > -1 && data.serverHash > -1 && data.serverHash !== utils.serverHash) {
socket.disconnect();
$("#connection-error").text("Server restarted, reloading…");
location.reload(true);
return;
}
@ -40,7 +41,7 @@ socket.on("auth", function(data) {
token = storage.get("token");
if (token) {
$("#loading-page-message").text("Authorizing…");
$("#loading-page-message, #connection-error").text("Authorizing…");
socket.emit("auth", {
user: user,

View File

@ -6,11 +6,22 @@ const render = require("../render");
const webpush = require("../webpush");
const sidebar = $("#sidebar");
const storage = require("../localStorage");
const utils = require("../utils");
socket.on("init", function(data) {
$("#loading-page-message").text("Rendering…");
$("#loading-page-message, #connection-error").text("Rendering…");
const lastMessageId = utils.lastMessageId;
// TODO: this is hacky
if (lastMessageId > -1) {
sidebar.find(".networks").empty();
$("#chat").empty();
}
if (data.networks.length === 0) {
sidebar.find(".empty").show();
$("#footer").find(".connect").trigger("click", {
pushState: false,
});
@ -18,16 +29,22 @@ socket.on("init", function(data) {
render.renderNetworks(data);
}
if (data.token) {
storage.set("token", data.token);
if (lastMessageId > -1) {
$("#connection-error").removeClass("shown");
$(".show-more-button, #input").prop("disabled", false);
$("#submit").show();
} else {
if (data.token) {
storage.set("token", data.token);
}
webpush.configurePushNotifications(data.pushSubscription, data.applicationServerKey);
$("body").removeClass("signed-out");
$("#loading").remove();
$("#sign-in").remove();
}
webpush.configurePushNotifications(data.pushSubscription, data.applicationServerKey);
$("body").removeClass("signed-out");
$("#loading").remove();
$("#sign-in").remove();
const id = data.active;
const target = sidebar.find("[data-id='" + id + "']").trigger("click", {
replaceHistory: true

View File

@ -3,6 +3,7 @@
const $ = require("jquery");
const io = require("socket.io-client");
const path = window.location.pathname + "socket.io/";
const status = $("#loading-page-message, #connection-error");
const socket = io({
transports: $(document.body).data("transports"),
@ -11,37 +12,16 @@ const socket = io({
reconnection: !$(document.body).hasClass("public")
});
window.lounge_socket = socket; // TODO: Remove later, this is for debugging
socket.on("disconnect", handleDisconnect);
socket.on("connect_error", handleDisconnect);
socket.on("error", handleDisconnect);
[
"connect_error",
"connect_failed",
"disconnect",
"error",
].forEach(function(e) {
socket.on(e, function(data) {
$("#loading-page-message").text("Connection failed: " + data);
$("#connection-error").addClass("shown").one("click", function() {
window.onbeforeunload = null;
window.location.reload();
});
// Disables sending a message by pressing Enter. `off` is necessary to
// cancel `inputhistory`, which overrides hitting Enter. `on` is then
// necessary to avoid creating new lines when hitting Enter without Shift.
// This is fairly hacky but this solution is not permanent.
$("#input").off("keydown").on("keydown", function(event) {
if (event.which === 13 && !event.shiftKey) {
event.preventDefault();
}
});
// Hides the "Send Message" button
$("#submit").hide();
});
socket.on("reconnecting", function(attempt) {
status.text(`Reconnecting… (attempt ${attempt})`);
});
socket.on("connecting", function() {
$("#loading-page-message").text("Connecting…");
status.text("Connecting…");
});
socket.on("connect", function() {
@ -54,7 +34,15 @@ socket.on("connect", function() {
});
socket.on("authorized", function() {
$("#loading-page-message").text("Loading messages…");
status.text("Loading messages…");
});
function handleDisconnect(data) {
const message = data.message || data;
status.text(`Waiting to reconnect… (${message})`).addClass("shown");
$(".show-more-button, #input").prop("disabled", true);
$("#submit").hide();
}
module.exports = socket;

View File

@ -65,12 +65,8 @@ a:hover,
background: #00ff0e;
}
.btn-reconnect {
#connection-error {
background: #f00;
color: #fff;
border: 0;
border-radius: 0;
margin: 0;
}
#settings .opt {

View File

@ -46,14 +46,6 @@ body {
border-radius: 2px;
}
.btn-reconnect {
background: #e74c3c;
color: #fff;
border: 0;
border-radius: 0;
margin: 0;
}
@media (max-width: 768px) {
#sidebar {
left: -220px;

View File

@ -205,14 +205,6 @@ body {
color: #99a2b4;
}
.btn-reconnect {
background: #e74c3c;
color: #fff;
border: 0;
border-radius: 0;
margin: 0;
}
/* Form elements */
#chat-container ::-moz-placeholder {

View File

@ -232,14 +232,6 @@ body {
color: #d2d39b;
}
.btn-reconnect {
background: #e74c3c;
color: #fff;
border: 0;
border-radius: 0;
margin: 0;
}
/* Form elements */
#chat-container ::-moz-placeholder {