rudeshark.net/src/client/app/common/views/components/profile-editor.vue

229 lines
5.8 KiB
Vue
Raw Normal View History

2018-05-19 13:31:13 +02:00
<template>
2018-06-14 09:48:49 +02:00
<ui-card>
<div slot="title"><fa icon="user"/> {{ $t('title') }}</div>
2018-06-14 07:52:37 +02:00
2018-11-09 10:32:09 +01:00
<section class="esokaraujimuwfttfzgocmutcihewscl">
<div class="header" :style="bannerStyle">
<mk-avatar class="avatar" :user="$store.state.i" :disable-preview="true" :disable-link="true"/>
</div>
2018-09-05 06:47:26 +02:00
<ui-form :disabled="saving">
<ui-input v-model="name" :max="30">
<span>{{ $t('name') }}</span>
2018-09-05 06:47:26 +02:00
</ui-input>
2018-06-14 07:52:37 +02:00
2018-09-05 06:47:26 +02:00
<ui-input v-model="username" readonly>
<span>{{ $t('account') }}</span>
2018-09-05 06:47:26 +02:00
<span slot="prefix">@</span>
<span slot="suffix">@{{ host }}</span>
</ui-input>
2018-06-14 07:52:37 +02:00
2018-09-05 06:47:26 +02:00
<ui-input v-model="location">
<span>{{ $t('location') }}</span>
<span slot="prefix"><fa icon="map-marker-alt"/></span>
2018-09-05 06:47:26 +02:00
</ui-input>
2018-06-14 07:52:37 +02:00
2018-09-05 06:47:26 +02:00
<ui-input v-model="birthday" type="date">
<span>{{ $t('birthday') }}</span>
<span slot="prefix"><fa icon="birthday-cake"/></span>
2018-09-05 06:47:26 +02:00
</ui-input>
2018-06-14 07:52:37 +02:00
2018-09-05 06:47:26 +02:00
<ui-textarea v-model="description" :max="500">
<span>{{ $t('description') }}</span>
2018-09-05 06:47:26 +02:00
</ui-textarea>
2018-06-14 07:52:37 +02:00
2018-09-05 06:47:26 +02:00
<ui-input type="file" @change="onAvatarChange">
<span>{{ $t('avatar') }}</span>
<span slot="icon"><fa icon="image"/></span>
<span slot="desc" v-if="avatarUploading">{{ $t('uploading') }}<mk-ellipsis/></span>
2018-09-05 06:47:26 +02:00
</ui-input>
2018-06-14 07:52:37 +02:00
2018-09-05 06:47:26 +02:00
<ui-input type="file" @change="onBannerChange">
<span>{{ $t('banner') }}</span>
<span slot="icon"><fa icon="image"/></span>
<span slot="desc" v-if="bannerUploading">{{ $t('uploading') }}<mk-ellipsis/></span>
2018-09-05 06:47:26 +02:00
</ui-input>
2018-06-14 07:52:37 +02:00
<ui-button @click="save(true)">{{ $t('save') }}</ui-button>
2018-09-05 06:47:26 +02:00
</ui-form>
</section>
2018-09-13 11:23:44 +02:00
<section>
<header>{{ $t('advanced') }}</header>
2018-09-13 11:23:44 +02:00
<div>
<ui-switch v-model="isCat" @change="save(false)">{{ $t('is-cat') }}</ui-switch>
<ui-switch v-model="isBot" @change="save(false)">{{ $t('is-bot') }}</ui-switch>
<ui-switch v-model="alwaysMarkNsfw">{{ $t('@.always-mark-nsfw') }}</ui-switch>
2018-09-13 11:23:44 +02:00
</div>
</section>
<section>
<header>{{ $t('privacy') }}</header>
2018-09-13 11:23:44 +02:00
<div>
<ui-switch v-model="isLocked" @change="save(false)">{{ $t('is-locked') }}</ui-switch>
<ui-switch v-model="carefulBot" @change="save(false)">{{ $t('careful-bot') }}</ui-switch>
2018-09-13 11:23:44 +02:00
</div>
</section>
2018-06-14 09:48:49 +02:00
</ui-card>
2018-05-19 13:31:13 +02:00
</template>
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../i18n';
import { apiUrl, host } from '../../../config';
2018-11-11 04:35:30 +01:00
import { toUnicode } from 'punycode';
2018-05-19 13:31:13 +02:00
export default Vue.extend({
i18n: i18n('common/views/components/profile-editor.vue'),
2018-05-19 13:31:13 +02:00
data() {
return {
2018-11-11 04:35:30 +01:00
host: toUnicode(host),
2018-05-19 13:31:13 +02:00
name: null,
2018-05-20 10:37:30 +02:00
username: null,
2018-05-19 13:31:13 +02:00
location: null,
description: null,
birthday: null,
2018-05-20 07:01:47 +02:00
avatarId: null,
bannerId: null,
2018-05-21 04:08:08 +02:00
isCat: false,
isBot: false,
2018-09-13 11:23:44 +02:00
isLocked: false,
2018-10-13 13:11:00 +02:00
carefulBot: false,
2018-05-20 07:01:47 +02:00
saving: false,
2018-06-15 00:56:56 +02:00
avatarUploading: false,
bannerUploading: false
2018-05-19 13:31:13 +02:00
};
},
2018-05-20 02:04:48 +02:00
computed: {
alwaysMarkNsfw: {
get() { return this.$store.state.i.settings.alwaysMarkNsfw; },
2018-11-09 00:13:34 +01:00
set(value) { this.$root.api('i/update', { alwaysMarkNsfw: value }); }
},
2018-11-09 10:32:09 +01:00
bannerStyle(): any {
if (this.$store.state.i.bannerUrl == null) return {};
return {
backgroundColor: this.$store.state.i.bannerColor && this.$store.state.i.bannerColor.length == 3 ? `rgb(${ this.$store.state.i.bannerColor.join(',') })` : null,
backgroundImage: `url(${ this.$store.state.i.bannerUrl })`
};
},
},
2018-05-19 13:31:13 +02:00
created() {
2018-05-27 06:49:09 +02:00
this.name = this.$store.state.i.name || '';
this.username = this.$store.state.i.username;
this.location = this.$store.state.i.profile.location;
this.description = this.$store.state.i.description;
this.birthday = this.$store.state.i.profile.birthday;
this.avatarId = this.$store.state.i.avatarId;
this.bannerId = this.$store.state.i.bannerId;
this.isCat = this.$store.state.i.isCat;
this.isBot = this.$store.state.i.isBot;
2018-09-13 11:23:44 +02:00
this.isLocked = this.$store.state.i.isLocked;
2018-10-13 13:11:00 +02:00
this.carefulBot = this.$store.state.i.carefulBot;
2018-05-19 13:31:13 +02:00
},
2018-05-20 02:04:48 +02:00
methods: {
2018-05-20 07:01:47 +02:00
onAvatarChange([file]) {
2018-06-15 00:56:56 +02:00
this.avatarUploading = true;
2018-05-20 07:01:47 +02:00
const data = new FormData();
data.append('file', file);
2018-05-27 06:49:09 +02:00
data.append('i', this.$store.state.i.token);
2018-05-20 07:01:47 +02:00
fetch(apiUrl + '/drive/files/create', {
method: 'POST',
body: data
})
2018-08-19 06:32:02 +02:00
.then(response => response.json())
.then(f => {
this.avatarId = f.id;
this.avatarUploading = false;
})
.catch(e => {
this.avatarUploading = false;
alert('%18n:@upload-failed%');
});
2018-05-20 07:01:47 +02:00
},
onBannerChange([file]) {
2018-06-15 00:56:56 +02:00
this.bannerUploading = true;
2018-05-20 07:01:47 +02:00
const data = new FormData();
data.append('file', file);
2018-05-27 06:49:09 +02:00
data.append('i', this.$store.state.i.token);
2018-05-20 07:01:47 +02:00
fetch(apiUrl + '/drive/files/create', {
method: 'POST',
body: data
})
2018-08-19 06:32:02 +02:00
.then(response => response.json())
.then(f => {
this.bannerId = f.id;
this.bannerUploading = false;
})
.catch(e => {
this.bannerUploading = false;
alert('%18n:@upload-failed%');
});
2018-05-20 07:01:47 +02:00
},
2018-09-13 11:23:44 +02:00
save(notify) {
2018-05-19 13:31:13 +02:00
this.saving = true;
2018-11-09 00:13:34 +01:00
this.$root.api('i/update', {
2018-05-19 13:31:13 +02:00
name: this.name || null,
location: this.location || null,
description: this.description || null,
2018-05-20 07:01:47 +02:00
birthday: this.birthday || null,
avatarId: this.avatarId,
2018-05-21 04:08:08 +02:00
bannerId: this.bannerId,
2018-11-09 00:41:06 +01:00
isCat: !!this.isCat,
isBot: !!this.isBot,
isLocked: !!this.isLocked,
carefulBot: !!this.carefulBot
2018-05-20 07:01:47 +02:00
}).then(i => {
2018-05-19 13:31:13 +02:00
this.saving = false;
2018-05-27 06:49:09 +02:00
this.$store.state.i.avatarId = i.avatarId;
this.$store.state.i.avatarUrl = i.avatarUrl;
this.$store.state.i.bannerId = i.bannerId;
this.$store.state.i.bannerUrl = i.bannerUrl;
2018-05-20 07:01:47 +02:00
2018-09-13 11:23:44 +02:00
if (notify) {
2018-10-10 14:23:38 +02:00
this.$swal({
type: 'success',
text: this.$t('saved')
2018-10-10 14:23:38 +02:00
});
2018-09-13 11:23:44 +02:00
}
2018-05-19 13:31:13 +02:00
});
}
}
});
</script>
2018-11-09 10:32:09 +01:00
<style lang="stylus" scoped>
.esokaraujimuwfttfzgocmutcihewscl
> .header
height 150px
overflow hidden
background-size cover
background-position center
border-radius 4px
> .avatar
position absolute
top 0
bottom 0
left 0
right 0
display block
width 72px
height 72px
margin auto
box-shadow 0 0 16px rgba(0, 0, 0, 0.5)
</style>