From fbee80474baf3bfc41656268e22395983811f2f7 Mon Sep 17 00:00:00 2001 From: Roger Braun Date: Mon, 4 Dec 2017 19:08:33 +0100 Subject: Basic frontend changes for chat. --- src/components/nav_panel/nav_panel.vue | 5 +++++ src/i18n/messages.js | 4 ++++ src/main.js | 7 +++++-- src/modules/users.js | 14 +++++++++++++- 4 files changed, 27 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue index aea841e9..fa4000b0 100644 --- a/src/components/nav_panel/nav_panel.vue +++ b/src/components/nav_panel/nav_panel.vue @@ -7,6 +7,11 @@ {{ $t("nav.timeline") }} +
  • + + {{ $t("nav.chat") }} + +
  • {{ $t("nav.mentions") }} diff --git a/src/i18n/messages.js b/src/i18n/messages.js index 9aeffdfa..ecb3557c 100644 --- a/src/i18n/messages.js +++ b/src/i18n/messages.js @@ -179,7 +179,11 @@ const fi = { } const en = { + chat: { + title: 'Chat' + }, nav: { + chat: 'Local Chat', timeline: 'Timeline', mentions: 'Mentions', public_tl: 'Public Timeline', diff --git a/src/main.js b/src/main.js index 6c5bf83e..ca3bb955 100644 --- a/src/main.js +++ b/src/main.js @@ -12,6 +12,7 @@ import UserProfile from './components/user_profile/user_profile.vue' import Settings from './components/settings/settings.vue' import Registration from './components/registration/registration.vue' import UserSettings from './components/user_settings/user_settings.vue' +import Chat from './components/chat/chat.vue' import statusesModule from './modules/statuses.js' import usersModule from './modules/users.js' @@ -60,7 +61,8 @@ const store = new Vuex.Store({ config: configModule }, plugins: [createPersistedState(persistedStateOptions)], - strict: process.env.NODE_ENV !== 'production' + strict: false // Socket modifies itself, let's ignore this for now. + // strict: process.env.NODE_ENV !== 'production' }) const i18n = new VueI18n({ @@ -90,7 +92,8 @@ window.fetch('/static/config.json') { name: 'mentions', path: '/:username/mentions', component: Mentions }, { name: 'settings', path: '/settings', component: Settings }, { name: 'registration', path: '/registration', component: Registration }, - { name: 'user-settings', path: '/user-settings', component: UserSettings } + { name: 'user-settings', path: '/user-settings', component: UserSettings }, + { name: 'chat', path: '/chat', component: Chat } ] const router = new VueRouter({ diff --git a/src/modules/users.js b/src/modules/users.js index 30f8dc27..a75271a4 100644 --- a/src/modules/users.js +++ b/src/modules/users.js @@ -1,6 +1,7 @@ import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js' import { compact, map, each, merge } from 'lodash' import { set } from 'vue' +import { Socket } from 'phoenix' // TODO: Unify with mergeOrAdd in statuses.js export const mergeOrAdd = (arr, obj, item) => { @@ -19,6 +20,9 @@ export const mergeOrAdd = (arr, obj, item) => { } export const mutations = { + setSocket (state, socket) { + state.socket = socket + }, setMuted (state, { user: {id}, muted }) { const user = state.usersObject[id] set(user, 'muted', muted) @@ -50,7 +54,8 @@ export const defaultState = { currentUser: false, loggingIn: false, users: [], - usersObject: {} + usersObject: {}, + socket: null } const users = { @@ -97,6 +102,13 @@ const users = { // Set our new backend interactor commit('setBackendInteractor', backendInteractorService(userCredentials)) + if (user.token) { + // Set up websocket connection + let socket = new Socket('/socket', {params: {token: user.token}}) + socket.connect() + store.commit('setSocket', socket) + } + // Start getting fresh tweets. store.dispatch('startFetching', 'friends') -- cgit v1.2.3-70-g09d2 From 0e51fac2b24c752513afe65736e98eb5fb5ec3af Mon Sep 17 00:00:00 2001 From: Roger Braun Date: Tue, 5 Dec 2017 11:02:41 +0100 Subject: Add missing component code. --- src/components/chat/chat.js | 26 +++++++++++++++++++++++ src/components/chat/chat.vue | 49 ++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 75 insertions(+) create mode 100644 src/components/chat/chat.js create mode 100644 src/components/chat/chat.vue (limited to 'src') diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js new file mode 100644 index 00000000..3b84bd3d --- /dev/null +++ b/src/components/chat/chat.js @@ -0,0 +1,26 @@ +const chat = { + data () { + return { + messages: [], + currentMessage: '', + socket: this.$store.state.users.socket, + channel: null + } + }, + created () { + this.channel = this.socket.channel('chat:public') + this.channel.on('new_msg', (msg) => { + this.messages.push(msg) + this.messages = this.messages.slice(-19, 20) + }) + this.channel.join() + }, + methods: { + submit(message) { + this.channel.push('new_msg', {text: message}, 10000) + this.currentMessage = ''; + } + } +} + +export default chat; diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue new file mode 100644 index 00000000..9d3ab39c --- /dev/null +++ b/src/components/chat/chat.vue @@ -0,0 +1,49 @@ + + + + + + -- cgit v1.2.3-70-g09d2 From 27be1e0fa3a9779a624012a8528801679721cb40 Mon Sep 17 00:00:00 2001 From: Roger Braun Date: Tue, 5 Dec 2017 11:47:10 +0100 Subject: Move chat to own module. --- src/components/chat/chat.js | 15 +++++---------- src/main.js | 4 +++- src/modules/api.js | 13 ++++++++++++- src/modules/chat.js | 33 +++++++++++++++++++++++++++++++++ src/modules/users.js | 12 ++---------- 5 files changed, 55 insertions(+), 22 deletions(-) create mode 100644 src/modules/chat.js (limited to 'src') diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js index 3b84bd3d..fc942a30 100644 --- a/src/components/chat/chat.js +++ b/src/components/chat/chat.js @@ -1,23 +1,18 @@ const chat = { data () { return { - messages: [], currentMessage: '', - socket: this.$store.state.users.socket, channel: null } }, - created () { - this.channel = this.socket.channel('chat:public') - this.channel.on('new_msg', (msg) => { - this.messages.push(msg) - this.messages = this.messages.slice(-19, 20) - }) - this.channel.join() + computed: { + messages () { + return this.$store.state.chat.messages + } }, methods: { submit(message) { - this.channel.push('new_msg', {text: message}, 10000) + this.$store.state.chat.channel.push('new_msg', {text: message}, 10000) this.currentMessage = ''; } } diff --git a/src/main.js b/src/main.js index ca3bb955..72b75a52 100644 --- a/src/main.js +++ b/src/main.js @@ -18,6 +18,7 @@ import statusesModule from './modules/statuses.js' import usersModule from './modules/users.js' import apiModule from './modules/api.js' import configModule from './modules/config.js' +import chatModule from './modules/chat.js' import VueTimeago from 'vue-timeago' import VueI18n from 'vue-i18n' @@ -58,7 +59,8 @@ const store = new Vuex.Store({ statuses: statusesModule, users: usersModule, api: apiModule, - config: configModule + config: configModule, + chat: chatModule }, plugins: [createPersistedState(persistedStateOptions)], strict: false // Socket modifies itself, let's ignore this for now. diff --git a/src/modules/api.js b/src/modules/api.js index e61382eb..ccd6cfb7 100644 --- a/src/modules/api.js +++ b/src/modules/api.js @@ -1,10 +1,12 @@ import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js' import {isArray} from 'lodash' +import { Socket } from 'phoenix' const api = { state: { backendInteractor: backendInteractorService(), - fetchers: {} + fetchers: {}, + socket: null }, mutations: { setBackendInteractor (state, backendInteractor) { @@ -15,6 +17,9 @@ const api = { }, removeFetcher (state, {timeline}) { delete state.fetchers[timeline] + }, + setSocket (state, socket) { + state.socket = socket } }, actions: { @@ -37,6 +42,12 @@ const api = { const fetcher = store.state.fetchers[timeline] window.clearInterval(fetcher) store.commit('removeFetcher', {timeline}) + }, + initializeSocket (store, token) { + // Set up websocket connection + let socket = new Socket('/socket', {params: {token: token}}) + socket.connect() + store.dispatch('initializeChat', socket) } } } diff --git a/src/modules/chat.js b/src/modules/chat.js new file mode 100644 index 00000000..b1244ebe --- /dev/null +++ b/src/modules/chat.js @@ -0,0 +1,33 @@ +const chat = { + state: { + messages: [], + channel: null + }, + mutations: { + setChannel (state, channel) { + state.channel = channel + }, + addMessage (state, message) { + state.messages.push(message) + state.messages = state.messages.slice(-19, 20) + }, + setMessages (state, messages) { + state.messages = messages.slice(-19, 20) + } + }, + actions: { + initializeChat (store, socket) { + const channel = socket.channel('chat:public') + channel.on('new_msg', (msg) => { + store.commit('addMessage', msg) + }) + channel.on('messages', ({messages}) => { + store.commit('setMessages', messages) + }) + channel.join() + store.commit('setChannel', channel) + } + } +} + +export default chat diff --git a/src/modules/users.js b/src/modules/users.js index a75271a4..8303ecc1 100644 --- a/src/modules/users.js +++ b/src/modules/users.js @@ -1,7 +1,6 @@ import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js' import { compact, map, each, merge } from 'lodash' import { set } from 'vue' -import { Socket } from 'phoenix' // TODO: Unify with mergeOrAdd in statuses.js export const mergeOrAdd = (arr, obj, item) => { @@ -20,9 +19,6 @@ export const mergeOrAdd = (arr, obj, item) => { } export const mutations = { - setSocket (state, socket) { - state.socket = socket - }, setMuted (state, { user: {id}, muted }) { const user = state.usersObject[id] set(user, 'muted', muted) @@ -54,8 +50,7 @@ export const defaultState = { currentUser: false, loggingIn: false, users: [], - usersObject: {}, - socket: null + usersObject: {} } const users = { @@ -103,10 +98,7 @@ const users = { commit('setBackendInteractor', backendInteractorService(userCredentials)) if (user.token) { - // Set up websocket connection - let socket = new Socket('/socket', {params: {token: user.token}}) - socket.connect() - store.commit('setSocket', socket) + store.dispatch('initializeSocket', user.token) } // Start getting fresh tweets. -- cgit v1.2.3-70-g09d2 From 6ad27959a696ea0e4f6fe43a98daf4b99bb973ff Mon Sep 17 00:00:00 2001 From: Roger Braun Date: Tue, 5 Dec 2017 11:49:40 +0100 Subject: Linting. --- src/components/chat/chat.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js index fc942a30..ef326d4a 100644 --- a/src/components/chat/chat.js +++ b/src/components/chat/chat.js @@ -11,11 +11,11 @@ const chat = { } }, methods: { - submit(message) { + submit (message) { this.$store.state.chat.channel.push('new_msg', {text: message}, 10000) - this.currentMessage = ''; + this.currentMessage = '' } } } -export default chat; +export default chat -- cgit v1.2.3-70-g09d2 From a03b92e252406a8469a9ffe871a6882b3aedb366 Mon Sep 17 00:00:00 2001 From: Roger Braun Date: Tue, 5 Dec 2017 12:09:54 +0100 Subject: Post on submit, not on enter. --- src/components/chat/chat.vue | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue index 9d3ab39c..0c397472 100644 --- a/src/components/chat/chat.vue +++ b/src/components/chat/chat.vue @@ -18,7 +18,9 @@
    - +
    + +
    @@ -41,9 +43,12 @@ } .chat-input { display: flex; - input { + form { flex: auto; - margin: 0.5em; + input { + margin: 0.5em; + width: 100%; + } } } -- cgit v1.2.3-70-g09d2 From 6c4e3a509a23a4f683aee02fcd0b186813ae3de0 Mon Sep 17 00:00:00 2001 From: Roger Braun Date: Tue, 5 Dec 2017 14:20:34 +0100 Subject: Don't display if we don't have a chat. --- src/components/chat/chat.vue | 2 +- src/components/nav_panel/nav_panel.js | 3 +++ src/components/nav_panel/nav_panel.vue | 2 +- 3 files changed, 5 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue index 0c397472..488faf9a 100644 --- a/src/components/chat/chat.vue +++ b/src/components/chat/chat.vue @@ -7,7 +7,7 @@
    -
    +
    {{message.author.username}}: diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js index baeaaede..ea5d7ea4 100644 --- a/src/components/nav_panel/nav_panel.js +++ b/src/components/nav_panel/nav_panel.js @@ -2,6 +2,9 @@ const NavPanel = { computed: { currentUser () { return this.$store.state.users.currentUser + }, + chat () { + return this.$store.state.chat.channel } } } diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue index fa4000b0..ccc772a8 100644 --- a/src/components/nav_panel/nav_panel.vue +++ b/src/components/nav_panel/nav_panel.vue @@ -7,7 +7,7 @@ {{ $t("nav.timeline") }}
    • -
  • +
  • {{ $t("nav.chat") }} -- cgit v1.2.3-70-g09d2 From 612fb183671783c3ac3eeea21428c024a47713b1 Mon Sep 17 00:00:00 2001 From: eal Date: Thu, 7 Dec 2017 18:20:44 +0200 Subject: Add option for disabling chat. --- src/main.js | 3 +++ src/modules/api.js | 17 +++++++++++++---- static/config.json | 3 ++- 3 files changed, 18 insertions(+), 5 deletions(-) (limited to 'src') diff --git a/src/main.js b/src/main.js index 72b75a52..a8ee5fda 100644 --- a/src/main.js +++ b/src/main.js @@ -82,6 +82,9 @@ window.fetch('/static/config.json') store.dispatch('setOption', { name: 'background', value: background }) store.dispatch('setOption', { name: 'logo', value: logo }) store.dispatch('setOption', { name: 'registrationOpen', value: registrationOpen }) + if (data['chatDisabled']) { + store.dispatch('disableChat') + } const routes = [ { name: 'root', path: '/', redirect: data['defaultPath'] || '/main/all' }, diff --git a/src/modules/api.js b/src/modules/api.js index ccd6cfb7..c91fb97b 100644 --- a/src/modules/api.js +++ b/src/modules/api.js @@ -6,7 +6,8 @@ const api = { state: { backendInteractor: backendInteractorService(), fetchers: {}, - socket: null + socket: null, + chatDisabled: false }, mutations: { setBackendInteractor (state, backendInteractor) { @@ -20,6 +21,9 @@ const api = { }, setSocket (state, socket) { state.socket = socket + }, + setChatDisabled (state, value) { + state.chatDisabled = value } }, actions: { @@ -45,9 +49,14 @@ const api = { }, initializeSocket (store, token) { // Set up websocket connection - let socket = new Socket('/socket', {params: {token: token}}) - socket.connect() - store.dispatch('initializeChat', socket) + if (!store.state.chatDisabled) { + let socket = new Socket('/socket', {params: {token: token}}) + socket.connect() + store.dispatch('initializeChat', socket) + } + }, + disableChat (store) { + store.commit('setChatDisabled', true) } } } diff --git a/static/config.json b/static/config.json index b186246b..880efca8 100644 --- a/static/config.json +++ b/static/config.json @@ -4,5 +4,6 @@ "background": "/static/bg.jpg", "logo": "/static/logo.png", "registrationOpen": false, - "defaultPath": "/main/all" + "defaultPath": "/main/all", + "chatDisabled": false } -- cgit v1.2.3-70-g09d2 From ecb8acb155a77092b0661854b0ca4cf3c19ff56e Mon Sep 17 00:00:00 2001 From: eal Date: Thu, 7 Dec 2017 19:03:26 +0200 Subject: Some css fixes. Scale chat panel size to viewport height, fit message field to width. --- src/components/chat/chat.vue | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue index 488faf9a..6c1e2c38 100644 --- a/src/components/chat/chat.vue +++ b/src/components/chat/chat.vue @@ -30,6 +30,11 @@