gamebrary/src/components/WallpaperUpload.vue

200 lines
4.2 KiB
Vue
Raw Normal View History

2019-10-18 04:37:35 +00:00
<!-- TODO: refactor to live in platform settings -->
2019-04-09 04:17:26 +00:00
<template>
2019-11-08 20:34:06 +00:00
<div class="setting wallpaper-upload">
<template v-if="wallpaperUrl">
<div class="current-wallpaper">
<i class="far fa-image" />
2019-12-02 18:21:23 +00:00
<h5>{{ $t('settings.wallpaper.wallpaper') }}</h5>
2019-11-08 20:34:06 +00:00
</div>
<div/>
<div>
<modal
ref="addList"
:title="$t('settings.wallpaper.currentWallpaper')"
large
action-text="Remove wallpaper"
@action="removeWallpaper"
>
<img
v-if="wallpaperUrl"
:src="wallpaperUrl"
class="preview"
alt="Uploaded wallpaper"
>
<div
slot="content"
2019-11-14 21:10:10 +00:00
class="wallpaper-preview"
>
2019-11-08 20:34:06 +00:00
<img
v-if="wallpaperUrl"
:src="wallpaperUrl"
alt="Uploaded wallpaper"
>
</div>
</modal>
</div>
</template>
<template v-else>
<i class="far fa-image" />
<h5>{{ $t('settings.wallpaper.title') }}</h5>
<button
class="primary small"
2019-11-14 21:10:10 +00:00
@click="triggerUpload"
>
2019-11-08 20:34:06 +00:00
<i
v-if="loading"
2019-11-14 21:10:10 +00:00
class="fas fa-sync-alt fast-spin"
/>
2019-11-08 20:34:06 +00:00
<i
v-else
2019-11-14 21:10:10 +00:00
class="fas fa-cloud-upload-alt"
/>
2019-11-08 20:34:06 +00:00
Upload file
</button>
<input
ref="fileInput"
hidden
class="file-input"
type="file"
accept="image/*"
@change="handleUpload"
>
</template>
</div>
2019-04-09 04:17:26 +00:00
</template>
<script>
2019-08-07 22:40:32 +00:00
import Modal from '@/components/Modal';
2019-04-09 04:17:26 +00:00
import firebase from 'firebase/app';
import 'firebase/firestore';
import { mapState } from 'vuex';
export default {
2019-11-08 19:56:03 +00:00
components: {
Modal,
},
data() {
return {
progressUpload: 0,
file: File,
uploadTask: '',
wallpapers: {},
loading: false,
};
},
computed: {
...mapState(['user', 'settings', 'platform', 'wallpaperUrl']),
},
mounted() {
this.wallpapers = this.settings && this.settings.wallpapers
? JSON.parse(JSON.stringify(this.settings.wallpapers))
: {};
if (!this.wallpapers[this.platform.code]) {
this.wallpapers[this.platform.code] = {};
}
},
2019-08-07 22:47:57 +00:00
2019-11-08 19:56:03 +00:00
methods: {
triggerUpload() {
this.$refs.fileInput.click();
2019-04-09 04:17:26 +00:00
},
2019-11-08 19:56:03 +00:00
removeWallpaper() {
delete this.wallpapers[this.platform.code].url;
2019-04-09 04:17:26 +00:00
2019-11-08 19:56:03 +00:00
this.saveSettings();
},
2019-11-08 19:56:03 +00:00
saveSettings() {
const settings = {
...this.settings,
wallpapers: this.wallpapers,
};
this.$store.dispatch('SAVE_SETTINGS', settings)
.then(() => {
this.$bus.$emit('TOAST', { message: 'Settings saved' });
this.loading = false;
})
.catch(() => {
this.$bus.$emit('TOAST', { message: 'There was an error saving your settings', type: 'error' });
this.loading = false;
});
2019-04-09 04:17:26 +00:00
},
2019-11-08 19:56:03 +00:00
handleUpload(e) {
this.loading = true;
const file = e.target.files[0];
const extenstion = file.name.split('.')[1];
firebase.storage().ref(`${this.user.uid}/wallpapers/${this.platform.code}.${extenstion}`).put(file)
.then(({ state, metadata }) => {
if (state === 'success') {
if (!this.wallpapers[this.platform.code]) {
this.wallpapers[this.platform.code] = {};
}
this.wallpapers[this.platform.code].url = metadata.fullPath;
this.saveSettings({
...this.settings,
wallpapers: this.wallpapers,
});
}
});
2019-04-09 04:17:26 +00:00
},
2019-11-08 19:56:03 +00:00
},
2019-04-09 04:17:26 +00:00
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
2019-11-08 20:34:06 +00:00
@import "~styles/styles";
2019-04-09 04:17:26 +00:00
2019-11-08 20:34:06 +00:00
img.preview {
max-width: 100px;
cursor: pointer;
height: auto;
border: 1px solid transparent;
border-radius: $border-radius;
2019-08-07 22:40:32 +00:00
2019-11-08 20:34:06 +00:00
&:hover {
border-color: var(--accent-color);
2019-08-07 22:40:32 +00:00
}
2019-11-08 20:34:06 +00:00
}
2019-08-07 22:40:32 +00:00
2019-11-08 20:34:06 +00:00
.current-wallpaper {
display: grid;
grid-template-columns: auto auto;
grid-gap: $gp / 2;
margin-right: $gp;
}
2019-08-07 22:40:32 +00:00
2019-11-08 20:34:06 +00:00
.file-input {
display: none;
}
.wallpaper-preview {
2019-08-07 22:40:32 +00:00
2019-11-08 20:34:06 +00:00
img {
width: 100%;
2019-04-09 04:17:26 +00:00
}
2019-11-08 20:34:06 +00:00
}
.remove-wallpaper {
position: absolute;
right: 36px;
margin-top: 4px;
width: 20px;
}
2019-04-09 04:17:26 +00:00
</style>