Cleanup code & make sure it has a common code style
This commit is contained in:
kolaente
@ -8,57 +8,57 @@
|
||||
<div class="card-content">
|
||||
<div class="control mb-4">
|
||||
<label class="radio">
|
||||
<input type="radio" name="avatarProvider" v-model="avatarProvider" value="default"/>
|
||||
<input name="avatarProvider" type="radio" v-model="avatarProvider" value="default"/>
|
||||
Default
|
||||
</label>
|
||||
<label class="radio">
|
||||
<input type="radio" name="avatarProvider" v-model="avatarProvider" value="initials"/>
|
||||
<input name="avatarProvider" type="radio" v-model="avatarProvider" value="initials"/>
|
||||
Initials
|
||||
</label>
|
||||
<label class="radio">
|
||||
<input type="radio" name="avatarProvider" v-model="avatarProvider" value="gravatar"/>
|
||||
<input name="avatarProvider" type="radio" v-model="avatarProvider" value="gravatar"/>
|
||||
Gravatar
|
||||
</label>
|
||||
<label class="radio">
|
||||
<input type="radio" name="avatarProvider" v-model="avatarProvider" value="upload"/>
|
||||
<input name="avatarProvider" type="radio" v-model="avatarProvider" value="upload"/>
|
||||
Upload
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<template v-if="avatarProvider === 'upload'">
|
||||
<input
|
||||
type="file"
|
||||
ref="avatarUploadInput"
|
||||
@change="cropAvatar"
|
||||
class="is-hidden"
|
||||
accept="image/*"
|
||||
@change="cropAvatar"
|
||||
accept="image/*"
|
||||
class="is-hidden"
|
||||
ref="avatarUploadInput"
|
||||
type="file"
|
||||
/>
|
||||
<a
|
||||
v-if="!isCropAvatar"
|
||||
class="button is-primary"
|
||||
@click="$refs.avatarUploadInput.click()"
|
||||
:class="{ 'is-loading': avatarService.loading || loading}">
|
||||
:class="{ 'is-loading': avatarService.loading || loading}"
|
||||
@click="$refs.avatarUploadInput.click()"
|
||||
class="button is-primary"
|
||||
v-if="!isCropAvatar">
|
||||
Upload Avatar
|
||||
</a>
|
||||
<template v-else>
|
||||
<cropper
|
||||
:src="avatarToCrop"
|
||||
class="mb-4"
|
||||
@ready="() => loading = false"
|
||||
:stencil-props="{aspectRatio: 1}"
|
||||
ref="cropper"/>
|
||||
:src="avatarToCrop"
|
||||
:stencil-props="{aspectRatio: 1}"
|
||||
@ready="() => loading = false"
|
||||
class="mb-4"
|
||||
ref="cropper"/>
|
||||
<a
|
||||
class="button is-primary"
|
||||
@click="uploadAvatar"
|
||||
:class="{ 'is-loading': avatarService.loading || loading}">
|
||||
:class="{ 'is-loading': avatarService.loading || loading}"
|
||||
@click="uploadAvatar"
|
||||
class="button is-primary">
|
||||
Upload Avatar
|
||||
</a>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<div class="bigbuttons" v-if="avatarProvider !== 'upload'">
|
||||
<button @click="updateAvatarStatus()" class="button is-primary is-fullwidth"
|
||||
:class="{ 'is-loading': avatarService.loading || loading}">
|
||||
<button :class="{ 'is-loading': avatarService.loading || loading}" @click="updateAvatarStatus()"
|
||||
class="button is-primary is-fullwidth">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
@ -67,83 +67,83 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {Cropper} from 'vue-advanced-cropper'
|
||||
import {Cropper} from 'vue-advanced-cropper'
|
||||
|
||||
import AvatarService from '../../services/avatar'
|
||||
import AvatarModel from '../../models/avatar'
|
||||
import AvatarService from '../../services/avatar'
|
||||
import AvatarModel from '../../models/avatar'
|
||||
|
||||
export default {
|
||||
name: 'avatar-settings',
|
||||
data() {
|
||||
return {
|
||||
avatarProvider: '',
|
||||
avatarService: AvatarService,
|
||||
isCropAvatar: false,
|
||||
avatarToCrop: null,
|
||||
loading: false, // Seperate variable because some things we're doing in browser take a bit
|
||||
export default {
|
||||
name: 'avatar-settings',
|
||||
data() {
|
||||
return {
|
||||
avatarProvider: '',
|
||||
avatarService: AvatarService,
|
||||
isCropAvatar: false,
|
||||
avatarToCrop: null,
|
||||
loading: false, // Seperate variable because some things we're doing in browser take a bit
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.avatarService = new AvatarService()
|
||||
this.avatarStatus()
|
||||
},
|
||||
components: {
|
||||
Cropper,
|
||||
},
|
||||
methods: {
|
||||
avatarStatus() {
|
||||
this.avatarService.get({})
|
||||
.then(r => {
|
||||
this.avatarProvider = r.avatarProvider
|
||||
})
|
||||
.catch(e => this.error(e, this))
|
||||
},
|
||||
updateAvatarStatus() {
|
||||
const avatarStatus = new AvatarModel({avatarProvider: this.avatarProvider})
|
||||
this.avatarService.update(avatarStatus)
|
||||
.then(() => {
|
||||
this.success({message: 'Avatar status was updated successfully!'}, this)
|
||||
this.$store.commit('auth/reloadAvatar')
|
||||
})
|
||||
.catch(e => this.error(e, this))
|
||||
},
|
||||
uploadAvatar() {
|
||||
this.loading = true
|
||||
const {canvas} = this.$refs.cropper.getResult()
|
||||
|
||||
if (canvas) {
|
||||
canvas.toBlob(blob => {
|
||||
this.avatarService.create(blob)
|
||||
.then(() => {
|
||||
this.success({message: 'The avatar has been set successfully!'}, this)
|
||||
this.$store.commit('auth/reloadAvatar')
|
||||
})
|
||||
.catch(e => this.error(e, this))
|
||||
.finally(() => {
|
||||
this.loading = false
|
||||
this.isCropAvatar = false
|
||||
})
|
||||
})
|
||||
} else {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.avatarService = new AvatarService()
|
||||
this.avatarStatus()
|
||||
},
|
||||
components: {
|
||||
Cropper,
|
||||
},
|
||||
methods: {
|
||||
avatarStatus() {
|
||||
this.avatarService.get({})
|
||||
.then(r => {
|
||||
this.avatarProvider = r.avatarProvider
|
||||
})
|
||||
.catch(e => this.error(e, this))
|
||||
},
|
||||
updateAvatarStatus() {
|
||||
const avatarStatus = new AvatarModel({avatarProvider: this.avatarProvider})
|
||||
this.avatarService.update(avatarStatus)
|
||||
.then(() => {
|
||||
this.success({message: 'Avatar status was updated successfully!'}, this)
|
||||
this.$store.commit('auth/reloadAvatar')
|
||||
})
|
||||
.catch(e => this.error(e, this))
|
||||
},
|
||||
uploadAvatar() {
|
||||
this.loading = true
|
||||
const {canvas} = this.$refs.cropper.getResult()
|
||||
cropAvatar() {
|
||||
const avatar = this.$refs.avatarUploadInput.files
|
||||
|
||||
if (canvas) {
|
||||
canvas.toBlob(blob => {
|
||||
this.avatarService.create(blob)
|
||||
.then(() => {
|
||||
this.success({message: 'The avatar has been set successfully!'}, this)
|
||||
this.$store.commit('auth/reloadAvatar')
|
||||
})
|
||||
.catch(e => this.error(e, this))
|
||||
.finally(() => {
|
||||
this.loading = false
|
||||
this.isCropAvatar = false
|
||||
})
|
||||
})
|
||||
} else {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
cropAvatar() {
|
||||
const avatar = this.$refs.avatarUploadInput.files
|
||||
if (avatar.length === 0) {
|
||||
return
|
||||
}
|
||||
|
||||
if (avatar.length === 0) {
|
||||
return
|
||||
}
|
||||
|
||||
this.loading = true
|
||||
const reader = new FileReader()
|
||||
reader.onload = e => {
|
||||
this.avatarToCrop = e.target.result
|
||||
this.isCropAvatar = true
|
||||
}
|
||||
reader.onloadend = () => this.loading = false
|
||||
reader.readAsDataURL(avatar[0])
|
||||
},
|
||||
this.loading = true
|
||||
const reader = new FileReader()
|
||||
reader.onload = e => {
|
||||
this.avatarToCrop = e.target.result
|
||||
this.isCropAvatar = true
|
||||
}
|
||||
reader.onloadend = () => this.loading = false
|
||||
reader.readAsDataURL(avatar[0])
|
||||
},
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user