You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
69 lines
1.8 KiB
JavaScript
69 lines
1.8 KiB
JavaScript
export default {
|
|
setup() {
|
|
const { ref, computed } = Vue;
|
|
|
|
const title = ref("");
|
|
const link = ref("");
|
|
const overview = ref("");
|
|
const categories = ref([""]);
|
|
const date = ref(null);
|
|
|
|
const sent = ref(false);
|
|
const disabled = computed(() => {
|
|
return [title, overview, overview, categories].some((input) => input.value == "");
|
|
});
|
|
|
|
const newPad = function () {
|
|
let name = title.value.trim().replaceAll(" ", "_");
|
|
let url = `https://pad.xpub.nl/p/${name}`;
|
|
window.open(url);
|
|
return url;
|
|
};
|
|
|
|
const submit = function () {
|
|
if (link.value == "") {
|
|
link.value = newPad();
|
|
}
|
|
|
|
fetch("api", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
title: title.value.trim(),
|
|
link: link.value,
|
|
overview: overview.value,
|
|
categories: categories.value.join(", "),
|
|
date: date.value,
|
|
}),
|
|
});
|
|
sent.value = true;
|
|
|
|
title.value = "";
|
|
link.value = "";
|
|
overview.value = "";
|
|
categories.value = [""];
|
|
date.value = null;
|
|
};
|
|
|
|
return { title, link, overview, categories, date, submit, newPad, sent, disabled };
|
|
},
|
|
|
|
template: `
|
|
|
|
<div class='app-form'>
|
|
<h2>Add a new pad</h2>
|
|
<input class='title' type="text" v-model="title" placeholder="Title" />
|
|
<input class='link' type="text" v-model="link" placeholder="URL" />
|
|
|
|
<input class='overview' type="text" v-model="overview" placeholder="Overview" />
|
|
<input class='categories' type="text" v-model="categories[index]" placeholder="Category" v-for="(category, index) in categories" :key="index"/>
|
|
<button class="add" @click="categories.push('')">+</button>
|
|
<input class='date' type="date" v-model="date" placeholder="Date" />
|
|
|
|
<button @click="submit" class="submit">Insert</button>
|
|
</div>
|
|
|
|
|
|
`,
|
|
};
|