diff options
Diffstat (limited to 'src/components/user_settings')
| -rw-r--r-- | src/components/user_settings/user_settings.js | 145 | ||||
| -rw-r--r-- | src/components/user_settings/user_settings.vue | 90 |
2 files changed, 235 insertions, 0 deletions
diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js new file mode 100644 index 00000000..c22411dd --- /dev/null +++ b/src/components/user_settings/user_settings.js @@ -0,0 +1,145 @@ +import StyleSwitcher from '../style_switcher/style_switcher.vue' +import { filter, trim } from 'lodash' + +const UserSettings = { + data () { + return { + newname: this.$store.state.users.currentUser.name, + newbio: this.$store.state.users.currentUser.description, + previewavatar: null, + previewbanner: null, + previewbg: null, + uploadingavatar: false, + uploadingbanner: false, + uploadingbg: false + } + }, + components: { + StyleSwitcher + }, + computed: { + user () { + return this.$store.state.users.currentUser + } + }, + methods: { + updateProfile () { + const name = this.newname + const description = this.newbio + this.$store.state.api.backendInteractor.updateProfile({params: {name, description}}).then((user) => { + if(!user.error) { + this.$store.commit('addNewUsers', [user]) + this.$store.commit('setCurrentUser', user) + } + }) + }, + uploadAvatar ({target}) { + const file = target.files[0] + // eslint-disable-next-line no-undef + const reader = new FileReader() + reader.onload = ({target}) => { + const img = target.result + this.previewavatar = img + } + reader.readAsDataURL(file) + }, + uploadBanner ({target}) { + const file = target.files[0] + // eslint-disable-next-line no-undef + const reader = new FileReader() + reader.onload = ({target}) => { + const img = target.result + this.previewbanner = img + } + reader.readAsDataURL(file) + }, + uploadBg ({target}) { + const file = target.files[0] + // eslint-disable-next-line no-undef + const reader = new FileReader() + reader.onload = ({target}) => { + const img = target.result + this.previewbg = img + } + reader.readAsDataURL(file) + }, + submitAvatar () { + if (!this.previewavatar) { return } + + let img = this.previewavatar + // eslint-disable-next-line no-undef + let imginfo = new Image() + let cropX, cropY, cropW, cropH + imginfo.src = img + if (imginfo.height > imginfo.width) { + cropX = 0 + cropW = imginfo.width + cropY = Math.floor((imginfo.height - imginfo.width) / 2) + cropH = imginfo.width + } else { + cropY = 0 + cropH = imginfo.height + cropX = Math.floor((imginfo.width - imginfo.height) / 2) + cropW = imginfo.height + } + this.uploadingavatar = true + this.$store.state.api.backendInteractor.updateAvatar({params: {img, cropX, cropY, cropW, cropH}}).then((user) => { + if (!user.error) { + this.$store.commit('addNewUsers', [user]) + this.$store.commit('setCurrentUser', user) + this.previewavatar = null + } + this.uploadingavatar = false + }) + }, + submitBanner () { + if (!this.previewbanner) { return } + + let banner = this.previewbanner + let imginfo = new Image() + let offset_top, offset_left, width, height + imginfo.src = banner + width = imginfo.width + height = imginfo.height + offset_top = 0 + offset_left = 0 + this.uploadingbanner = true + this.$store.state.api.backendInteractor.updateBanner({params: {banner, offset_top, offset_left, width, height}}).then((data) => { + if (!data.error) { + let clone = JSON.parse(JSON.stringify(this.$store.state.users.currentUser)) + clone.cover_photo = data.url + this.$store.commit('addNewUsers', [clone]) + this.$store.commit('setCurrentUser', clone) + this.previewbanner = null + } + this.uploadingbanner = false + }) + }, + submitBg () { + if (!this.previewbg) { return } + let img = this.previewbg + let imginfo = new Image() + let cropX, cropY, cropW, cropH + imginfo.src = img + cropX = 0 + cropY = 0 + cropW = imginfo.width + cropH = imginfo.width + this.uploadingbg = true + this.$store.state.api.backendInteractor.updateBg({params: {img, cropX, cropY, cropW, cropH}}).then((data) => { + if (!data.error) { + let clone = JSON.parse(JSON.stringify(this.$store.state.users.currentUser)) + clone.background_image = data.url + this.$store.commit('addNewUsers', [clone]) + this.$store.commit('setCurrentUser', clone) + this.previewbg = null + } + this.uploadingbg = false + }) + } + }, + watch: { + } +} + +export default UserSettings diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue new file mode 100644 index 00000000..b7521a32 --- /dev/null +++ b/src/components/user_settings/user_settings.vue @@ -0,0 +1,90 @@ +<template> + <div class="settings panel panel-default base00-background"> + <div class="panel-heading base01-background base04"> + User Settings + </div> + <div class="panel-body profile-edit"> + <div class="setting-item"> + <h3>Name & Bio</h3> + <p>Name</p> + <input class='name-changer base03-border' id='username' v-model="newname" :value="user.screen_name"></input> + <p>Bio</p> + <textarea class="bio base03-border" v-model="newbio"></textarea> + <button :disabled='newname.length <= 0' class="btn btn-default base05 base01-background" @click="updateProfile">Submit</button> + </div> + <div class="setting-item"> + <h3>Avatar</h3> + <p>Your current avatar:</p> + <img :src="user.profile_image_url_original" class="old-avatar"></img> + <p>Set new avatar:</p> + <img class="new-avatar" v-bind:src="previewavatar" v-if="previewavatar"> + </img> + <div> + <input type="file" @change="uploadAvatar" ></input> + </div> + <i class="fa icon-spin4 animate-spin" v-if="uploadingavatar"></i> + <button class="btn btn-default base05 base01-background" v-else-if="previewavatar" @click="submitAvatar">Submit</button> + </div> + <div class="setting-item"> + <h3>Profile Banner</h3> + <p>Your current profile banner:</p> + <img :src="user.cover_photo" class="banner"></img> + <p>Set new profile banner:</p> + <img class="banner" v-bind:src="previewbanner" v-if="previewbanner"> + </img> + <div> + <input type="file" @change="uploadBanner" ></input> + </div> + <i class="fa icon-spin4 animate-spin uploading" v-if="uploadingbanner"></i> + <button class="btn btn-default base05 base01-background" v-else-if="previewbanner" @click="submitBanner">Submit</button> + </div> + <div class="setting-item"> + <h3>Profile Background</h3> + <p>Set new profile background:</p> + <img class="bg" v-bind:src="previewbg" v-if="previewbg"> + </img> + <div> + <input type="file" @change="uploadBg" ></input> + </div> + <i class="fa icon-spin4 animate-spin uploading" v-if="uploadingbg"></i> + <button class="btn btn-default base05 base01-background" v-else-if="previewbg" @click="submitBg">Submit</button> + </div> + </div> + </div> +</template> + +<script src="./user_settings.js"> +</script> + +<style lang="scss"> +.profile-edit { + .name-changer { + border-width: 1px; + border-style: solid; + border-radius: 5px; + padding: 0.2em 0.2em 0.2em 0.2em; + } + .name-submit { + padding: 0.2em 0.5em 0.2em 0.5em; + } + .bio { + border-width: 1px; + border-style: solid; + border-radius: 5px; + margin: 0; + } + .banner { + max-width: 400px; + border-radius: 5px; + } + + .bg { + max-width: 400px; + border-radius: 5px; + } + .uploading { + font-size: 1.5em; + margin: 0.25em; + } +} +</style> |