From 37c10be5e29815057b4b1adcd268b9f4cb5b415e Mon Sep 17 00:00:00 2001 From: Roger Braun Date: Sun, 16 Apr 2017 13:44:11 +0200 Subject: [PATCH] Add basic avatar changing. --- src/components/settings/settings.js | 22 +++++++++++++++ src/components/settings/settings.vue | 7 +++++ src/services/api/api.service.js | 27 ++++++++++++++++++- .../backend_interactor_service.js | 4 ++- 4 files changed, 58 insertions(+), 2 deletions(-) diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js index 4d0528b6..347dd8f2 100644 --- a/src/components/settings/settings.js +++ b/src/components/settings/settings.js @@ -13,6 +13,28 @@ const settings = { components: { StyleSwitcher }, + computed: { + user () { + return this.$store.state.users.currentUser + } + }, + methods: { + uploadAvatar ({target}) { + const file = target.files[0] + const reader = new FileReader() + reader.onload = ({target}) => { + const img = target.result + + this.$store.state.api.backendInteractor.updateAvatar({params: {img}}).then((user) => { + if (!user.error) { + this.$store.commit('addNewUsers', [user]) + this.$store.commit('setCurrentUser', user) + } + }) + } + reader.readAsDataURL(file) + } + }, watch: { hideAttachmentsLocal (value) { this.$store.dispatch('setOption', { name: 'hideAttachments', value }) diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue index 33d46e7e..7ceac828 100644 --- a/src/components/settings/settings.vue +++ b/src/components/settings/settings.vue @@ -8,6 +8,13 @@

Theme

+
+

Avatar

+ +
+ +
+

Filtering

All notices containing these words will be muted, one per line

diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js index afbd144c..b0e8dd87 100644 --- a/src/services/api/api.service.js +++ b/src/services/api/api.service.js @@ -18,6 +18,7 @@ const FOLLOWING_URL = '/api/friendships/create.json' const UNFOLLOWING_URL = '/api/friendships/destroy.json' const QVITTER_USER_PREF_URL = '/api/qvitter/set_profile_pref.json' const REGISTRATION_URL = '/api/account/register.json' +const AVATAR_UPDATE_URL = '/api/qvitter/update_avatar.json' // const USER_URL = '/api/users/show.json' import { each } from 'lodash' @@ -30,6 +31,29 @@ let fetch = (url, options) => { return oldfetch(fullUrl, options) } +// Params +// cropH +// cropW +// cropX +// cropY +// img (base 64 encodend data url) +const updateAvatar = ({credentials, params}) => { + let url = AVATAR_UPDATE_URL + + const form = new FormData() + + each(params, (value, key) => { + if (value) { + form.append(key, value) + } + }) + return fetch(url, { + headers: authHeaders(credentials), + method: 'POST', + body: form + }).then((data) => data.json()) +} + // Params needed: // nickname // email @@ -228,7 +252,8 @@ const apiService = { fetchAllFollowing, setUserMute, fetchMutes, - register + register, + updateAvatar } export default apiService diff --git a/src/services/backend_interactor_service/backend_interactor_service.js b/src/services/backend_interactor_service/backend_interactor_service.js index 9684e7f3..ceb559b6 100644 --- a/src/services/backend_interactor_service/backend_interactor_service.js +++ b/src/services/backend_interactor_service/backend_interactor_service.js @@ -37,6 +37,7 @@ const backendInteractorService = (credentials) => { const fetchMutes = () => apiService.fetchMutes({credentials}) const register = (params) => apiService.register(params) + const updateAvatar = ({params}) => apiService.updateAvatar({credentials, params}) const backendInteractorServiceInstance = { fetchStatus, @@ -49,7 +50,8 @@ const backendInteractorService = (credentials) => { startFetching, setUserMute, fetchMutes, - register + register, + updateAvatar } return backendInteractorServiceInstance