Sticker builder is now bound to the sticker in the store.
This commit is contained in:
parent
79a996a2cc
commit
5ef2072f8a
5 changed files with 77 additions and 46 deletions
|
|
@ -18,14 +18,14 @@ const users = {
|
|||
|
||||
const stickers = {
|
||||
"88ae126f-b19a-4287-abe0-a8f5ac763cb7": {
|
||||
color: "#780606",
|
||||
color: "780606",
|
||||
layout: "layout1",
|
||||
message1: "I ♥ Medicare all All",
|
||||
owner: null,
|
||||
uuid: "88ae126f-b19a-4287-abe0-a8f5ac763cb7",
|
||||
},
|
||||
"38dafe9b-5563-4112-afa8-c895adc68e5b": {
|
||||
color: "#008800",
|
||||
color: "008800",
|
||||
layout: "layout1",
|
||||
message1: "I am a treehugger!",
|
||||
owner: null,
|
||||
|
|
|
|||
|
|
@ -27,6 +27,10 @@ const layout4Class = computed(() => ({
|
|||
hidden: layout !== 'layout4',
|
||||
layout4: layout === 'layout4',
|
||||
}))
|
||||
|
||||
const color2 = computed(() => {
|
||||
return '#' + color;
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<div class="sticker">
|
||||
|
|
@ -66,7 +70,7 @@ const layout4Class = computed(() => ({
|
|||
.sticker {
|
||||
width: 256px;
|
||||
aspect-ratio: 6 / 1;
|
||||
background-color: v-bind(color);
|
||||
background-color: v-bind(color2);
|
||||
display: flex;
|
||||
.content {
|
||||
//font-size: calc(1.5vw + 1.5vh);
|
||||
|
|
|
|||
33
src/composables/sticker.ts
Normal file
33
src/composables/sticker.ts
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
import { onBeforeMount, ref } from 'vue'
|
||||
import type { Ref } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
import {
|
||||
activist,
|
||||
type Sticker as StickerType,
|
||||
useStickersStore,
|
||||
} from '@/stores/stickersStore'
|
||||
|
||||
|
||||
export function useSticker() {
|
||||
let sticker: Ref<StickerType> = ref<StickerType>(activist);
|
||||
const route = useRoute();
|
||||
if (!("uuid" in route.params)) {
|
||||
return sticker;
|
||||
}
|
||||
const uuid = ref<string>(route.params.uuid as string);
|
||||
const stickersStore = useStickersStore();
|
||||
const { getSticker } = stickersStore;
|
||||
|
||||
onBeforeMount(async () => {
|
||||
await stickersStore.fetch(uuid.value);
|
||||
let sticker2 = getSticker(uuid.value);
|
||||
if (!sticker2) {
|
||||
return
|
||||
}
|
||||
sticker.value = sticker2;
|
||||
stickersStore.activeSticker = uuid.value
|
||||
});
|
||||
|
||||
return sticker;
|
||||
}
|
||||
|
|
@ -6,11 +6,28 @@ import { useUserStore } from '@/stores/userStore'
|
|||
|
||||
export interface Sticker {
|
||||
color: string,
|
||||
layout: string,
|
||||
message1: string | null,
|
||||
message2: string | null,
|
||||
message3: string | null,
|
||||
message4: string | null,
|
||||
owner: string | null,
|
||||
uuid: string,
|
||||
}
|
||||
|
||||
export const activist: Sticker = {
|
||||
color: 'FF0000',
|
||||
layout: 'layout1',
|
||||
message1: 'I AM AN ACTIVIST',
|
||||
message2: null,
|
||||
message3: null,
|
||||
message4: null,
|
||||
owner: null,
|
||||
uuid: '6dcd2dae-7be2-4f79-8b10-caeb379452fc',
|
||||
};
|
||||
|
||||
export interface State {
|
||||
activeSticker: string | null; // uuid
|
||||
stickers: Sticker[];
|
||||
}
|
||||
|
||||
|
|
@ -59,6 +76,7 @@ export const useStickersStore = defineStore('stickers', {
|
|||
},
|
||||
state: (): State => {
|
||||
return {
|
||||
activeSticker: null,
|
||||
stickers: [],
|
||||
};
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import {computed, ref} from 'vue';
|
||||
import { ref } from 'vue'
|
||||
|
||||
import Button from 'primevue/button';
|
||||
import Card from 'primevue/card';
|
||||
|
|
@ -17,6 +17,10 @@ import IconLayout2Vue from '@/components/layouts/IconLayout2.vue';
|
|||
import IconLayout3Vue from '@/components/layouts/IconLayout3.vue';
|
||||
import IconLayout4Vue from '@/components/layouts/IconLayout4.vue';
|
||||
import Sticker from '@/components/Sticker.vue';
|
||||
import { useSticker } from '@/composables/sticker'
|
||||
|
||||
|
||||
const sticker = useSticker();
|
||||
|
||||
|
||||
const checked = ref(true);
|
||||
|
|
@ -45,22 +49,6 @@ const resolver = () => {
|
|||
return {};
|
||||
};
|
||||
|
||||
const layout = defineModel<string>('layout');
|
||||
layout.value = 'layout1';
|
||||
const message1 = defineModel<string>('message1');
|
||||
message1.value = "I SUPPORT M4A";
|
||||
const message2 = defineModel<string>('message2');
|
||||
message2.value = "m2";
|
||||
const message3 = defineModel<string>('message3');
|
||||
message3.value = "m3";
|
||||
const message4 = defineModel<string>('message4');
|
||||
message4.value = "";
|
||||
const color = defineModel<string>('background-color');
|
||||
color.value = '000088';
|
||||
|
||||
const color2 = computed(() => {
|
||||
return '#' + color.value;
|
||||
})
|
||||
|
||||
function onFormSubmit() {
|
||||
return {};
|
||||
|
|
@ -69,48 +57,36 @@ function onFormSubmit() {
|
|||
|
||||
<template>
|
||||
<div id="StickerPage">
|
||||
<h1>Sticker</h1>
|
||||
<!-- <Button class="w-20" type="submit" severity="secondary" label="Take a snapshot" />-->
|
||||
<div id="StickerWrapper" class="sticky top-0 z-10">
|
||||
<Sticker
|
||||
id="Sticker1"
|
||||
v-bind:layout v-bind:color="color2"
|
||||
v-bind:message1 v-bind:message2
|
||||
v-bind:message3 v-bind:message4
|
||||
/>
|
||||
<Sticker id="Sticker1" v-bind="sticker" />
|
||||
<!-- <p>8-inch sticker</p>-->
|
||||
<!-- <Sticker-->
|
||||
<!-- id="Sticker2"-->
|
||||
<!-- v-bind:layout v-bind:color="color2"-->
|
||||
<!-- v-bind:message1 v-bind:message2-->
|
||||
<!-- v-bind:message3 v-bind:message4-->
|
||||
<!-- />-->
|
||||
<!-- <Sticker id="Sticker2" v-bind="sticker2" />-->
|
||||
</div>
|
||||
<Card>
|
||||
<template #content>
|
||||
<Form v-slot="$form"
|
||||
v-bind:initialValues
|
||||
<Form v-bind:initialValues
|
||||
v-bind:resolver="resolver"
|
||||
@submit="onFormSubmit">
|
||||
<div class="bg-surface-50 dark:bg-surface-950 px-3 py-5 md:px-12 lg:px-5">
|
||||
<div class="grid grid-cols-12 gap-4">
|
||||
<div class="col-span-12">
|
||||
<label for="nickname2">Layout {{layout}}</label>
|
||||
<label for="nickname2">Layout {{sticker.layout}}</label>
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<RadioButton v-model="layout" inputId="layout1" name="layout" value="layout1" />
|
||||
<RadioButton v-model="sticker.layout" inputId="layout1" name="layout" value="layout1" />
|
||||
<label for="layout1"><IconLayout1Vue /></label>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<RadioButton v-model="layout" inputId="layout2" name="layout" value="layout2" />
|
||||
<RadioButton v-model="sticker.layout" inputId="layout2" name="layout" value="layout2" />
|
||||
<label for="layout2"><IconLayout2Vue /></label>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<RadioButton v-model="layout" inputId="layout3" name="layout" value="layout3" />
|
||||
<RadioButton v-model="sticker.layout" inputId="layout3" name="layout" value="layout3" />
|
||||
<label for="layout3"><IconLayout3Vue /></label>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<RadioButton v-model="layout" inputId="layout4" name="layout" value="layout4" />
|
||||
<RadioButton v-model="sticker.layout" inputId="layout4" name="layout" value="layout4" />
|
||||
<label for="layout4"><IconLayout4Vue /></label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -120,27 +96,27 @@ function onFormSubmit() {
|
|||
|
||||
<div class="col-span-12 md:col-span-6">
|
||||
<label for="message1">Message 1</label>
|
||||
<InputText class="w-full" id="message1" name="message1" type="text" v-model="message1" fluid />
|
||||
<InputText class="w-full" id="message1" name="message1" type="text" v-model="sticker.message1" fluid />
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-6">
|
||||
<label for="message2">Message 2</label>
|
||||
<InputText class="w-full" id="message2" name="message2" type="text" v-model="message2" fluid />
|
||||
<InputText class="w-full" id="message2" name="message2" type="text" v-model="sticker.message2" fluid />
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 md:col-span-6">
|
||||
<label for="message1">Message 3</label>
|
||||
<InputText class="w-full" id="message3" name="message3" type="text" v-model="message3" fluid />
|
||||
<InputText class="w-full" id="message3" name="message3" type="text" v-model="sticker.message3" fluid />
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-6">
|
||||
<label for="message4">Message 4</label>
|
||||
<InputText class="w-full" id="message4" name="message4" type="text" v-model="message4" fluid />
|
||||
<InputText class="w-full" id="message4" name="message4" type="text" v-model="sticker.message4" fluid />
|
||||
</div>
|
||||
|
||||
<div class="divider" />
|
||||
|
||||
<div class="col-span-12 md:col-span-6">
|
||||
<label for="email2">Background Color {{color}}</label>
|
||||
<ColorPicker v-model="color" />
|
||||
<label>Background Color {{sticker.color}}</label>
|
||||
<ColorPicker v-model="sticker.color" />
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-6">
|
||||
<label for="country2">Country</label>
|
||||
|
|
|
|||
Loading…
Reference in a new issue