activist/src/views/StickerView.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 uuid = ref<string>(route.params.uuid as string);
const { getSticker } = stickersStore;
let sticker = ref<StickerType>();

onBeforeMount(async () => {
  await stickersStore.fetch(uuid.value);
  sticker.value = getSticker(uuid.value);
});

const first = computed(() => {
  const parts = uuid.value.split('-')
  return [parts[0], parts[1], parts[2]].join('-');
})
const second = computed(() => {
  const parts = uuid.value.split('-')
  return [parts[3], parts[4]].join('-');
})

function claimSticker() {
  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"
          />
        </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>
      </div>
    </Panel>
  </div>
</template>

<style scoped>
#StickerWrapper {
  background-color: #DDD;
  padding: 12px;
  @media (screen(sm)) {
    .sticker {
      zoom: 250%;
    }
  }
}
</style>