60 lines
2.1 KiB
Vue
60 lines
2.1 KiB
Vue
<template>
|
|
<article class='card inline-block'>
|
|
<h3 class='text-xl font-bold'>Add source</h3>
|
|
<span>Aggiungi una sorgente, un sito, un feed rss/atom/json, un account mastodon, twitter, facebook</span>
|
|
<p>{{search}} {{items.length}}</p>
|
|
<input type="text" v-model='url' placeholder="Feed URL" @keydown.enter="addSource">
|
|
<span v-if='error' class="text-red-500">{{error}}</span>
|
|
<span v-else class="font-light">Add your feed</span>
|
|
<!-- <ul>
|
|
<li class="p-2 bg-slate-700 " v-for='source, id in sources' :key="id">
|
|
<div class="font-bold text-xl">{{ source.name }}</div>
|
|
<span class="text-red-500">{{source.description}}</span>
|
|
</li>
|
|
</ul> -->
|
|
<button @click='addCohort' class="p-2 text-xl font-bold border-2 rounded mt-5">Create +</button>
|
|
</article>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
// emits: ['update:modelValue', 'addSource'],
|
|
// async function runSearch() {
|
|
// console.error('sono dentro run search', search.value)
|
|
// items.value = await $fetch('/api/source/search', { params: { search: search.value }})
|
|
// console.error(items)
|
|
// }
|
|
|
|
// let items = reactive([])
|
|
// return { source, url, error, search, items }
|
|
// },
|
|
// asyncComputed: {
|
|
// async items () {
|
|
// console.error('dentro items vado di search', this.search)
|
|
// return await $fetch('/api/source/search', { search: this.search })
|
|
// }
|
|
// },
|
|
methods: {
|
|
async addSource() {
|
|
console.error('dentro add source', this.url, this.name)
|
|
this.error = ''
|
|
// invio un url al backend
|
|
// se e' un feed valido, lo aggiungo ai sources e all cohort appena creata
|
|
// se non e' valido provo a cercare il feed dentro quell'url
|
|
try {
|
|
const source = await $fetch('/api/source', { method: 'POST', body: { URL: this.url } })
|
|
this.source.push( source )
|
|
// this.$emit('addCohort', { id: 1, title: this.title })
|
|
this.url = ''
|
|
} catch (e) {
|
|
this.error = String(e)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.card {
|
|
@apply w-full rounded-md border-2 border-dashed p-2 mt-3
|
|
max-w-sm border-pink-500;
|
|
}
|
|
</style>
|