Brian DeRocher
929f22abeb
Use user_id in places we were using username. Still debating this. Start getting this working with API backend, until there were calls to /api/sticker which don't exist in the API yet. Then I rediscovered the local json-server. So now there are 2 api backends. We'll incrementally migrate from the first version to the second. SCSS and tailwind weren't working for nav-items.css. The browser just saw the raw version. So for now, just inlined that. Probably these nav items will become components (if they are shared).
105 lines
2.6 KiB
Vue
105 lines
2.6 KiB
Vue
<script setup lang="ts">
|
|
import {computed, onBeforeMount, ref} from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
|
|
import Button from 'primevue/button';
|
|
import Panel from 'primevue/panel';
|
|
|
|
import Sticker from "@/components/Sticker.vue";
|
|
import { type User } from "@/stores/types";
|
|
import { useSessionStore } from "@/stores/sessionStore";
|
|
import {
|
|
type Sticker as StickerType,
|
|
useStickersStore
|
|
} from "@/stores/stickersStore";
|
|
|
|
|
|
const sessionStore = useSessionStore();
|
|
const stickersStore = useStickersStore();
|
|
|
|
const route = useRoute();
|
|
const id = ref<string>(route.params.id as string);
|
|
const { getSticker } = stickersStore;
|
|
let sticker = ref<StickerType>();
|
|
|
|
onBeforeMount(async () => {
|
|
await stickersStore.fetch(id.value);
|
|
sticker.value = getSticker(id.value);
|
|
});
|
|
|
|
const first = computed(() => {
|
|
const parts = id.value.split('-')
|
|
return [parts[0], parts[1], parts[2]].join('-');
|
|
})
|
|
const second = computed(() => {
|
|
const parts = id.value.split('-')
|
|
return [parts[3], parts[4]].join('-');
|
|
})
|
|
|
|
function claimSticker() {
|
|
if (!sticker.value) {
|
|
console.error("No sticker to set owner");
|
|
return;
|
|
}
|
|
stickersStore.setOwner(sticker.value, sessionStore.user as User);
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="profilePage">
|
|
<Panel>
|
|
<div class="flex flex-row content-end">
|
|
<div>
|
|
<div class="font-mono text-sn tracking-wider col">
|
|
{{ first }}
|
|
</div>
|
|
<div class="font-mono text-sn tracking-wider col">
|
|
{{ second }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Panel>
|
|
<Panel header="Sticker">
|
|
<div class="flex flex-col gap-5">
|
|
<div id="StickerWrapper">
|
|
<Sticker
|
|
class="sticker"
|
|
v-bind="sticker"
|
|
v-if="sticker"
|
|
id="Sticker"
|
|
/>
|
|
</div>
|
|
<Button
|
|
v-bind:disabled="sessionStore.isAnonymous"
|
|
v-if="sticker?.owner == null"
|
|
v-on:click="claimSticker">
|
|
This is my sticker!
|
|
</Button>
|
|
<span v-if="sessionStore.isAnonymous">
|
|
Log in to claim your sticker.
|
|
</span>
|
|
<Button
|
|
as="router-link"
|
|
:to="{ name: 'stickerbuilder', params: { id: stickersStore.activeSticker }}"
|
|
v-bind:disabled="sessionStore.isAnonymous"
|
|
v-if="sticker?.owner == sessionStore.user.username">
|
|
Customize my sticker!
|
|
</Button>
|
|
</div>
|
|
</Panel>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
#StickerWrapper {
|
|
background-color: #DDD;
|
|
padding: 10px;
|
|
#Sticker {
|
|
width: 300px;
|
|
@media (min-width: 640px) {
|
|
zoom: 250%;
|
|
}
|
|
}
|
|
}
|
|
</style>
|