91 lines
3.1 KiB
Vue
91 lines
3.1 KiB
Vue
|
<template>
|
||
|
|
<BaseSetting title="Vereins-Auftritt Einstellungen" :submit-function="submit" v-slot="{ enableEdit }">
|
||
|
|
<div class="w-full">
|
||
|
|
<p>Vereins-Icon</p>
|
||
|
|
<AppIcon v-if="clubSettings['club.icon'] != '' && !overwriteIcon" class="h-10! max-w-full mx-auto" />
|
||
|
|
<img v-else-if="overwriteIcon" ref="icon_img" class="hidden w-full h-20 object-contain" />
|
||
|
|
<div
|
||
|
|
v-else
|
||
|
|
class="flex h-10 w-full border-2 border-gray-300 rounded-md items-center justify-center text-sm cursor-pointer"
|
||
|
|
@click="($refs.icon as HTMLInputElement).click()"
|
||
|
|
>
|
||
|
|
Kein eigenes Icon ausgewählt
|
||
|
|
</div>
|
||
|
|
<input class="hidden!" type="file" ref="icon" accept="image/*" @change="previewImage('icon')" />
|
||
|
|
</div>
|
||
|
|
<div class="w-full">
|
||
|
|
<p>Vereins-Logo</p>
|
||
|
|
<AppLogo v-if="clubSettings['club.logo'] != '' && !overwriteLogo" class="h-10! max-w-full mx-auto" />
|
||
|
|
<img v-else-if="overwriteLogo" ref="logo_img" class="hidden w-full h-20 object-contain" />
|
||
|
|
<div
|
||
|
|
v-else
|
||
|
|
class="flex h-10 w-full border-2 border-gray-300 rounded-md items-center justify-center text-sm cursor-pointer"
|
||
|
|
@click="($refs.logo as HTMLInputElement).click()"
|
||
|
|
>
|
||
|
|
Kein eigenes Logo ausgewählt
|
||
|
|
</div>
|
||
|
|
<input class="hidden!" type="file" ref="logo" accept="image/*" @change="previewImage('logo')" /></div
|
||
|
|
></BaseSetting>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { defineComponent } from "vue";
|
||
|
|
import { mapActions, mapState } from "pinia";
|
||
|
|
import { useSettingStore } from "@/stores/admin/management/setting";
|
||
|
|
import AppIcon from "@/components/AppIcon.vue";
|
||
|
|
import AppLogo from "@/components/AppLogo.vue";
|
||
|
|
import { useAbilityStore } from "@/stores/ability";
|
||
|
|
import type { SettingString } from "@/types/settingTypes";
|
||
|
|
import BaseSetting from "./BaseSetting.vue";
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
export default defineComponent({
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
overwriteIcon: false as boolean,
|
||
|
|
overwriteLogo: false as boolean,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
...mapState(useSettingStore, ["readByTopic"]),
|
||
|
|
...mapState(useAbilityStore, ["can"]),
|
||
|
|
clubSettings() {
|
||
|
|
return this.readByTopic("club");
|
||
|
|
},
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
...mapActions(useSettingStore, ["updateSettings", "uploadImage"]),
|
||
|
|
previewImage(inputname: "icon" | "logo") {
|
||
|
|
let input = this.$refs[inputname] as HTMLInputElement;
|
||
|
|
let previewElement = this.$refs[inputname + "_img"] as HTMLImageElement;
|
||
|
|
if (input.files && input.files[0]) {
|
||
|
|
const reader = new FileReader();
|
||
|
|
|
||
|
|
reader.onload = function (e) {
|
||
|
|
previewElement.src = e.target?.result as string;
|
||
|
|
previewElement.style.display = "block";
|
||
|
|
};
|
||
|
|
|
||
|
|
reader.readAsDataURL(input.files[0]);
|
||
|
|
} else {
|
||
|
|
previewElement.src = "";
|
||
|
|
previewElement.style.display = "none";
|
||
|
|
}
|
||
|
|
},
|
||
|
|
submit(e: any) {
|
||
|
|
return this.uploadImage([
|
||
|
|
{
|
||
|
|
key: "club.icon" as SettingString,
|
||
|
|
value: (this.$refs.icon as HTMLInputElement).files?.[0],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: "club.logo" as SettingString,
|
||
|
|
value: (this.$refs.logo as HTMLInputElement).files?.[0],
|
||
|
|
},
|
||
|
|
]);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|