90 lines
2.4 KiB
Vue
90 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import SpecsForm from "@/components/SpecsForm.vue";
|
|
import {ref, watch} from "vue";
|
|
import Btn from "@/components/Btn.vue";
|
|
import Copyable from "@/components/Copyable.vue";
|
|
import EditUrlModal from "@/components/EditUrlModal.vue";
|
|
import {decodePreset, decodeUrl, encodePreset, encodeUrl, getScreenshotUrl} from "@/urlmaker";
|
|
import {useWizardStore} from "@/stores/wizard.ts";
|
|
import {debounce} from "es-toolkit";
|
|
import {validatePreset, validateUrl} from "@/urlmaker/validators.ts";
|
|
|
|
const store = useWizardStore();
|
|
const existingLink = ref("");
|
|
const resultLink = ref("");
|
|
const resultPreset = ref("");
|
|
const editModalVisible = ref(false);
|
|
|
|
watch(existingLink, async (value) => {
|
|
if(!value) return;
|
|
existingLink.value = "";
|
|
try {
|
|
if(validateUrl(value)) store.updateSpecs(await decodeUrl(value));
|
|
else if (validatePreset(value)) store.updateSpecs(await decodePreset(value));
|
|
} catch (e) {
|
|
console.log(e);
|
|
alert(`Decoding error: ${e}`);
|
|
}
|
|
});
|
|
|
|
watch(store.specs, debounce(() => {
|
|
if (store.formValid) {
|
|
generate();
|
|
} else {
|
|
resultLink.value = "";
|
|
resultPreset.value = "";
|
|
}
|
|
}, 100),
|
|
{immediate: true}
|
|
);
|
|
|
|
async function generate() {
|
|
try {
|
|
resultLink.value = await encodeUrl(store.specs);
|
|
resultPreset.value = await encodePreset(store.specs);
|
|
console.debug(JSON.stringify(store.specs));
|
|
} catch (e) {
|
|
console.log(e);
|
|
alert(`Encoding error: ${e}`);
|
|
}
|
|
}
|
|
|
|
function screenshot() {
|
|
if(store.formValid) {
|
|
window.open(getScreenshotUrl(store.specs.url));
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="wrapper">
|
|
<SpecsForm class="specs-form"></SpecsForm>
|
|
<Btn :active="store.formValid" @click="screenshot">Screenshot</Btn>
|
|
<Btn @click="editModalVisible = true">Edit existing task / import preset</Btn>
|
|
<Btn @click="store.reset">Reset Form</Btn>
|
|
<div v-if="resultLink" class="link-label">Link for RSS reader:</div>
|
|
<Copyable v-if="resultLink" :contents="resultLink" class="link-view"></Copyable>
|
|
<div v-if="resultPreset" class="link-label">Preset for sharing:</div>
|
|
<Copyable v-if="resultPreset" :contents="resultPreset" class="link-view"></Copyable>
|
|
<EditUrlModal v-model:visible="editModalVisible" v-model="existingLink"></EditUrlModal>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
div.wrapper {
|
|
width: 100%;
|
|
max-width: 600px;
|
|
margin: auto;
|
|
padding-bottom: 50px;
|
|
}
|
|
|
|
.specs-form {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.link-label {
|
|
margin-top: 15px;
|
|
}
|
|
</style>
|