From c3a1c77447bb8d8a81ec8f7d19f5b990866613f5 Mon Sep 17 00:00:00 2001 From: Pavel Djundik Date: Mon, 3 Sep 2018 10:58:33 +0300 Subject: [PATCH] Rebase image uploading to Vue --- client/components/Chat.vue | 4 +- client/components/ChatInput.vue | 24 +++++++++ client/index.html.tpl | 66 ++++-------------------- client/js/socket-events/configuration.js | 8 +-- client/js/upload.js | 7 +-- client/js/vue.js | 1 + 6 files changed, 43 insertions(+), 67 deletions(-) diff --git a/client/components/Chat.vue b/client/components/Chat.vue index f607c3ac..7836ef21 100644 --- a/client/components/Chat.vue +++ b/client/components/Chat.vue @@ -69,7 +69,9 @@
{{ this.$root.connectionError }}
+ id="connection-error" + @click="this.$root.connectionError = null">{{ this.$root.connectionError }} + diff --git a/client/components/ChatInput.vue b/client/components/ChatInput.vue index 1cb5412d..b523f3df 100644 --- a/client/components/ChatInput.vue +++ b/client/components/ChatInput.vue @@ -14,6 +14,22 @@ class="mousetrap" @input="setPendingMessage" @keypress.enter.exact.prevent="onSubmit" /> + + + - - - - - - -
-
- -
-

This is taking longer than it should, there might be connectivity issues.

- -
- -
-
-
-
- -
- - - - - - - - - -
-
-
-
-
-
-
-
+
+ +
+

This is taking longer than it should, there might be connectivity issues.

+ +
+
diff --git a/client/js/socket-events/configuration.js b/client/js/socket-events/configuration.js index 2cb14ae2..2f48af5a 100644 --- a/client/js/socket-events/configuration.js +++ b/client/js/socket-events/configuration.js @@ -8,6 +8,7 @@ const webpush = require("../webpush"); const connect = $("#connect"); const utils = require("../utils"); const upload = require("../upload"); +const {vueApp} = require("../vue"); window.addEventListener("beforeinstallprompt", (installPromptEvent) => { $("#webapp-install-button") @@ -24,11 +25,7 @@ window.addEventListener("beforeinstallprompt", (installPromptEvent) => { }); socket.on("configuration", function(data) { - if (data.fileUpload) { - $("#upload").show(); - } else { - $("#upload").hide(); - } + vueApp.fileUploadEnabled = data.fileUpload; if (options.initialized) { // Likely a reconnect, request sync for possibly missed settings. @@ -52,7 +49,6 @@ socket.on("configuration", function(data) { }); if (data.fileUpload) { - upload.initialize(); upload.setMaxFileSize(data.fileUploadMaxFileSize); } diff --git a/client/js/upload.js b/client/js/upload.js index 4abb0a16..cccfdc24 100644 --- a/client/js/upload.js +++ b/client/js/upload.js @@ -4,15 +4,12 @@ const $ = require("jquery"); const socket = require("./socket"); const SocketIOFileUpload = require("socketio-file-upload/client"); const instance = new SocketIOFileUpload(socket); +const {vueApp} = require("./vue"); function initialize() { instance.listenOnInput(document.getElementById("upload-input")); instance.listenOnDrop(document); - $("#upload").on("click", () => { - $("#upload-input").trigger("click"); - }); - instance.addEventListener("complete", () => { // Reset progressbar $("#upload-progressbar").width(0); @@ -26,7 +23,7 @@ function initialize() { instance.addEventListener("error", (event) => { // Reset progressbar $("#upload-progressbar").width(0); - $("#connection-error").addClass("shown").text(event.message); + vueApp.connectionError = event.message; }); const $form = $(document); diff --git a/client/js/vue.js b/client/js/vue.js index 844c6821..beb31374 100644 --- a/client/js/vue.js +++ b/client/js/vue.js @@ -24,6 +24,7 @@ const vueApp = new Vue({ initialized: false, connected: false, connectionError: false, + fileUploadEnabled: false, appName: document.title, activeChannel: null, networks: [],