From 0301de94cf4a274f3baaf08163de000057b6bbf6 Mon Sep 17 00:00:00 2001 From: undefined Date: Thu, 26 Aug 2021 22:54:40 +0800 Subject: [PATCH] ui: better disconnect notification --- packages/hydrooj/package.json | 2 +- packages/hydrooj/src/service/server.ts | 2 +- packages/ui-default/.eslintrc.js | 3 +- .../ui-default/components/socket/index.js | 48 +++++++++---------- packages/ui-default/package.json | 4 +- 5 files changed, 30 insertions(+), 29 deletions(-) diff --git a/packages/hydrooj/package.json b/packages/hydrooj/package.json index 9ab733153..aff8f19d2 100644 --- a/packages/hydrooj/package.json +++ b/packages/hydrooj/package.json @@ -1,6 +1,6 @@ { "name": "hydrooj", - "version": "2.33.11", + "version": "2.33.12", "bin": "bin/hydrooj.js", "main": "src/loader", "module": "src/loader", diff --git a/packages/hydrooj/src/service/server.ts b/packages/hydrooj/src/service/server.ts index 1da71cf03..446aee8b9 100644 --- a/packages/hydrooj/src/service/server.ts +++ b/packages/hydrooj/src/service/server.ts @@ -649,7 +649,7 @@ export class Handler extends HandlerCommon { if (!error.msg) error.msg = () => error.message; if (error instanceof UserFacingError && !process.env.DEV) error.stack = ''; if (!(error instanceof NotFoundError)) { - logger.error(`User: ${this.user._id}(${this.user.uname}) Path: ${this.request.path}`, error.msg(), error.params); + logger.error(`User: ${this.user._id}(${this.user.uname}) ${this.request.method}: ${this.request.path}`, error.msg(), error.params); if (error.stack) logger.error(error.stack); } if (this.user?._id === 0 && (error instanceof PermissionError || error instanceof PrivilegeError)) { diff --git a/packages/ui-default/.eslintrc.js b/packages/ui-default/.eslintrc.js index 0a3c191c8..199c1df05 100644 --- a/packages/ui-default/.eslintrc.js +++ b/packages/ui-default/.eslintrc.js @@ -58,6 +58,8 @@ module.exports = { // Note: must disable the base rule as it can report incorrect errors 'no-use-before-define': 'off', '@typescript-eslint/no-use-before-define': ['error'], + 'no-unused-vars': 'off', + '@typescript-eslint/no-unused-vars': 'warn', 'comma-dangle': [ 'error', @@ -80,7 +82,6 @@ module.exports = { 'import/no-extraneous-dependencies': 'off', 'max-classes-per-file': 'off', 'no-empty': ['warn', { allowEmptyCatch: true }], - 'no-unused-vars': 'warn', 'no-console': 'off', 'no-continue': 'off', 'no-mixed-operators': 'off', diff --git a/packages/ui-default/components/socket/index.js b/packages/ui-default/components/socket/index.js index 9d24176fd..96986a9dc 100644 --- a/packages/ui-default/components/socket/index.js +++ b/packages/ui-default/components/socket/index.js @@ -1,50 +1,48 @@ import SockJS from 'sockjs-client'; +import $ from 'jquery'; import Notification from 'vj/components/notification/index'; import i18n from 'vj/utils/i18n'; +import tpl from 'vj/utils/tpl'; + +const notification = tpl`
${i18n('Disconnected from the server, trying to reconnect...')}
`; + +const $el = $(notification); +$el.appendTo('body'); +function create() { + $el.animate({ bottom: 0 }, 500); +} +function remove() { + $el.animate({ bottom: -30 }, 300); +} export default class Sock { constructor(url, showNotification = true) { this.url = url; this.isreconnect = false; this.init(); - this.notification = null; - this.showNotification = false; - setTimeout(() => { - this.showNotification = showNotification; - }, 10000); + this.showNotification = showNotification; } onauth() { - // SockJS wouldn't send cookie. hack. - if (this.isreconnect) { - this.notification.hide(); - if (this.showNotification) Notification.info(i18n('Reconnected to the server.')); - } + remove(); if (this.onopen) this.onopen(this.sock); } init() { this.sock = new SockJS(this.url); - this.sock.onopen = () => { - this.send(document.cookie); - }; + // SockJS wouldn't send cookie. hack. + this.sock.onopen = () => this.send(document.cookie); this.sock.onclose = ({ code, reason }) => { console.warn('Connection closed, ', code, reason); if (code >= 4000) this.closed = true; if (!this.closed) { - if (this.showNotification && !this.notification) { - this.notification = new Notification({ - message: i18n('Disconnected from the server. Reconnecting...'), - type: 'warn', - duration: 0, - action: this.init.bind(this), - }); - } + if (this.showNotification) create(); this.isreconnect = setTimeout(this.init.bind(this), 3000); - } else { - if (this.notification) this.notification.hide(); - if (this.showNotification) Notification.warn(i18n('Disconnected from the server.')); - } + } else if (this.showNotification) create(); if (this.onclose) this.onclose(code, reason); }; this.sock.onmessage = (message) => { diff --git a/packages/ui-default/package.json b/packages/ui-default/package.json index a3eae3f63..93bcc96c1 100644 --- a/packages/ui-default/package.json +++ b/packages/ui-default/package.json @@ -1,6 +1,6 @@ { "name": "@hydrooj/ui-default", - "version": "4.18.7", + "version": "4.18.8", "author": "undefined ", "license": "AGPL-3.0", "main": "hydro.js", @@ -15,8 +15,10 @@ "@blueprintjs/icons": "^3.27.0", "@blueprintjs/select": "^3.16.6", "@hydrooj/utils": "workspace:*", + "@types/jquery": "^3.5.6", "@types/json-schema": "^7.0.9", "@types/katex": "^0.11.1", + "@types/sockjs-client": "^1.5.1", "@undefined-moe/monaco-yaml": "^2.5.0", "ansi_up": "^5.0.1", "autoprefixer": "^9.8.6",