lesion/cosette
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

cleaning

Browse source
This commit is contained in:
lesion 2022-08-16 14:43:33 +02:00
parent 9642cdc906
commit cdc2a04ff6
8 changed files with 83 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
TODO.md Normal file
View file

@ -0,0 +1,4 @@
[ ] attach db connection / setup on nuxt listen hook
[x] card @ homepage
[ ] pagination / search @ homepage
[ ] carousel in detail

4
app/router.options.js
View file

@ -1,3 +1,3 @@
export default { export default {
scrollBehavior: () => ({ left: 0, top: 0, behavior: 'smooth' }) scrollBehavior: () => ({ left: 0, top: 0, behavior: 'smooth' })
} }

14
components/cosetta.vue
View file

@ -7,16 +7,18 @@ const { cosetta } = defineProps({
}) })
</script> </script>
<template> <template>
<div class="rounded overflow-hidden shadow-lg"> <div class="rounded overflow-hidden shadow-lg flex flex-col justify-between">
<img class="object-cover w-full h-48" :src="`src/public/${cosetta.images[0]}`" alt="Mountain"> <img class="object-cover w-full h-48" :src="`src/public/${cosetta.images[0]}`" alt="Mountain">
<div class="px-6 py-4"> <div class="px-6 py-4 grow">
<nuxt-link :to="`/c/${cosetta.uuid}`"> <nuxt-link :to="`/c/${cosetta.uuid}`">
<h2 class="text-pink-500 card-title hover:underline uppercase mb-2" v-text='cosetta.name' /> <h2 class="text-pink-500 card-title hover:underline uppercase mb-2 line-clamp-2" v-text='cosetta.name' />
</nuxt-link> </nuxt-link>
<p class="text-gray-700 text-base line-clamp-2" v-text='cosetta.description' /> <p class="text-gray-700 text-base line-clamp-3" v-text='cosetta.description' />
</div> </div>
<div class="px-6 pt-4 pb-2"> <div class="px-6 pt-4 pb-2">
<span v-for='tag in cosetta.tags' :key='tag' class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2" v-text='tag'/> <span v-for='tag in cosetta.tags' :key='tag'
class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2"
v-text='tag' />
</div> </div>
</div> </div>
</template> </template>

52
components/footer.vue
View file

@ -1,29 +1,31 @@
<template> <template>
<footer class="container mx-auto bg-white py-8 border-t border-gray-400"> <footer class="container mx-auto bg-white py-8 border-t border-gray-400">
<div class="container flex px-3 py-8 "> <div class="container flex px-3 py-8 ">
<div class="w-full mx-auto flex flex-wrap"> <div class="w-full mx-auto flex flex-wrap">
<div class="flex w-full lg:w-1/2 "> <div class="flex w-full lg:w-1/2 ">
<div class="px-3 md:px-0"> <div class="px-3 md:px-0">
<h4 class="font-bold text-xl text-gray-900">Cosette</h4> <h4 class="font-bold text-xl text-gray-900">Cosette</h4>
<p class="py-4"> <p class="py-4">
Liberati delle tue cosette Liberati delle tue cosette
</p> </p>
</div> </div>
</div>
<div class="flex w-full lg:w-1/2 lg:justify-end lg:text-right">
<div class="px-3 md:px-0">
<h3 class="font-bold text-xl text-gray-900">Links</h3>
<ul class="list-reset items-center pt-3">
<li>
<a class="inline-block no-underline hover:text-black hover:underline py-1" href="https://it.hackmeeting.org">it.hackmeeting.org</a>
</li>
<li>
<a class="inline-block no-underline hover:text-black hover:underline py-1" href="https://autistici.org/underscore">underscore_TO hacklab</a>
</li>
</ul>
</div>
</div>
</div> </div>
<div class="flex w-full lg:w-1/2 lg:justify-end lg:text-right">
<div class="px-3 md:px-0">
<h3 class="font-bold text-xl text-gray-900">Links</h3>
<ul class="list-reset items-center pt-3">
<li>
<a class="inline-block no-underline hover:text-black hover:underline py-1"
href="https://it.hackmeeting.org">it.hackmeeting.org</a>
</li>
<li>
<a class="inline-block no-underline hover:text-black hover:underline py-1"
href="https://autistici.org/underscore">underscore_TO hacklab</a>
</li>
</ul>
</div>
</div>
</div>
</div> </div>
</footer> </footer>
</template> </template>

9
components/upload.vue
View file

@ -2,7 +2,6 @@
<div class="modal" id="my-modal"> <div class="modal" id="my-modal">
<div class="modal-box"> <div class="modal-box">
<h3 class="font-bold text-lg uppercase">Aggiungo una cosetta</h3> <h3 class="font-bold text-lg uppercase">Aggiungo una cosetta</h3>
<p class="py-4">Ziobilly</p>
<form action="/api/cosette" method="post" enctype="multipart/form-data"> <form action="/api/cosette" method="post" enctype="multipart/form-data">
<label class="label"> <label class="label">
<span class="label-text">Che roba è?</span> <span class="label-text">Che roba è?</span>
@ -18,12 +17,12 @@
<textarea name='description' class='input input-bordered w-full'></textarea> <textarea name='description' class='input input-bordered w-full'></textarea>
<label class="label"> <label class="label">
<span class="label-text-alt">In che stato è? Dove l'hai trovato? </span> <span class="label-text-alt">In che stato è? Dove l'hai trovato? </span>
</label> </label>
<label class="label"> <label class="label">
<span class="label-text">Tag</span> <span class="label-text">Tag</span>
</label> </label>
<input type="text" name='tags' placeholder="Tags" class="input input-bordered w-full" /><br/> <input type="text" name='tags' placeholder="Tags" class="input input-bordered w-full" /><br />
<label class="label"> <label class="label">
@ -38,5 +37,5 @@
</div> </div>
</form> </form>
</div> </div>
</div> </div>
</template> </template>

35
pages/c/[cosetta].vue
View file

@ -1,37 +1,42 @@
<script setup> <script setup>
const route = useRoute() const route = useRoute()
let { cosetta, comments } = reactive(await $fetch(`/api/cosetta/${route.params.cosetta}`)) let { cosetta, comments } = reactive(await $fetch(`/api/cosetta/${route.params.cosetta}`))
const comment = reactive({ cosetta_uuid: route.params.cosetta, message: '' }) const comment = reactive({ cosetta_uuid: route.params.cosetta, message: '' })
const addComment = async () => { const addComment = async () => {
const ret = await $fetch(`/api/comment`, { method: 'POST', body: { ...comment } }) const ret = await $fetch(`/api/comment`, { method: 'POST', body: { ...comment } })
comment.message = '' comment.message = ''
comments.unshift(ret.comment) comments.unshift(ret.comment)
} }
</script> </script>
<template> <template>
<section class="bg-white py-8"> <section class="bg-white py-8">
<div class="container mx-auto pt-4 pb-12"> <div class="container mx-auto pt-4 pb-12">
<img v-if='cosetta.images' :src="`/src/public/${cosetta.images[0]}`"/> <img v-if='cosetta.images' :src="`/src/public/${cosetta.images[0]}`" />
<h3 class='uppercase mt-4 font-bold text-xl'>{{cosetta.name}}</h3><br/> <h2 class="text-pink-500 text-2xl card-title uppercase mb-2 divider" v-text='cosetta.name' />
<p class='pt-1 text-gray-700 text-xl'>{{cosetta.description}}</p> <div class="px-6 pt-4 pb-2">
<span class="badge mr-1" v-for='(tag, idx) in cosetta.tags' :key='idx' v-text='tag'></span> <span v-for='tag in cosetta.tags' :key='tag'
class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2"
v-text='tag' />
</div>
<p class='pt-1 text-gray-700 text-xl'>{{ cosetta.description }}</p>
</div> </div>
<div class="container mx-auto"> <div class="container mx-auto">
<p class="font-bold text-xl uppercase">chiacchiere</p> <p class="font-bold text-xl uppercase">chiacchiere</p>
<div class='form-control'> <div class='form-control'>
<div class='input-group'> <div class='input-group'>
<input v-model='comment.message' class="input input-bordered w-full text-sm" @keypress:enter="addComment"/> <input v-model='comment.message' class="input input-bordered w-full text-sm" @keypress:enter="addComment" />
<button class="btn btn-success" @click='addComment'>Invia</button> <button class="btn btn-success" @click='addComment'>Invia</button>
</div> </div>
<div class='mt-2' v-for='comment in comments' :key='comment.uuid'> <div class='mt-2' v-for='comment in comments' :key='comment.uuid'>
<span class="label-text-alt" v-text='comment.updatedAt'/> <span class="label-text-alt" v-text='comment.updatedAt' />
<div class="alert" v-text='comment.message'/> <div class="alert" v-text='comment.message' />
</div> </div>
</div> </div>
</div> </div>

15
pages/index.vue
View file

@ -2,12 +2,12 @@
const page = ref(0) const page = ref(0)
let { data, refresh } = await useFetch(() => `/api/cosette?page=${page.value}`) let { data, refresh } = await useFetch(() => `/api/cosette?page=${page.value}`)
function next () { function next() {
page.value++ page.value++
refresh() refresh()
} }
function prev () { function prev() {
page.value-- page.value--
refresh() refresh()
} }
@ -18,16 +18,19 @@ function prev () {
<Upload /> <Upload />
<Hero /> <Hero />
<div class="container mx-auto flex items-center flex-wrap pt-4 pb-12 px-2"> <div class="container mx-auto flex items-center flex-wrap pt-4 pb-12 px-2">
<p>Ci sono <strong>{{data.details.count}}</strong> cosette in tutto, sei a pagina {{data.details.page+1}} di {{data.details.n_page}}. Se vuoi puoi</p> <p>Ci sono <strong>{{ data.details.count }}</strong> cosette in tutto, sei a pagina {{ data.details.page + 1 }} di
<a class="text-orange-700 hover:underline flex" href="#my-modal"><Icon-ic:baseline-add/> aggiungere una cosetta</a> {{ data.details.n_page }}. Se vuoi puoi</p>
<a class="text-orange-700 hover:underline flex" href="#my-modal">
<Icon-ic:baseline-add /> aggiungere una cosetta
</a>
</div> </div>
<div class='container mx-auto'> <div class='container mx-auto'>
<nav> <nav>
<button v-if='data.details.prev' @click='prev'> <button v-if='data.details.prev' @click='prev'>
<Icon-ic:baseline-chevron-left style='font-size: 40px'/> <Icon-ic:baseline-chevron-left style='font-size: 40px' />
</button> </button>
<button v-if='data.details.next' @click='next'> <button v-if='data.details.next' @click='next'>
<Icon-ic:baseline-chevron-right style='font-size: 40px'/> <Icon-ic:baseline-chevron-right style='font-size: 40px' />
</button> </button>
</nav> </nav>

17
server/controller.js
View file

@ -2,7 +2,8 @@ import Database from 'better-sqlite3'
import { v4 } from 'uuid' import { v4 } from 'uuid'
const db = new Database('./cosette.db') const db = new Database('./cosette.db')
function load () {
function load() {
db.pragma('journal_mode = WAL') db.pragma('journal_mode = WAL')
db.exec('CREATE TABLE IF NOT EXISTS cosette (uuid TEXT PRIMARY KEY, name TEXT NOT NULL, description TEXT, tags TEXT, images TEXT, updatedAt DATETIME DEFAULT CURRENT_TIMESTAMP)') db.exec('CREATE TABLE IF NOT EXISTS cosette (uuid TEXT PRIMARY KEY, name TEXT NOT NULL, description TEXT, tags TEXT, images TEXT, updatedAt DATETIME DEFAULT CURRENT_TIMESTAMP)')
db.exec('CREATE INDEX cosette_updated_at_index ON cosette (updatedAt)') db.exec('CREATE INDEX cosette_updated_at_index ON cosette (updatedAt)')
@ -11,7 +12,7 @@ function load () {
// TODO: da gestire in qualche modo all'avvio // TODO: da gestire in qualche modo all'avvio
// load() // load()
export function add (cosetta) { export function add(cosetta) {
const q = db.prepare('INSERT INTO cosette (uuid, name, description, tags, images) VALUES(:uuid, :name, :description, :tags, :imgs)') const q = db.prepare('INSERT INTO cosette (uuid, name, description, tags, images) VALUES(:uuid, :name, :description, :tags, :imgs)')
cosetta.uuid = v4() cosetta.uuid = v4()
cosetta.tags = JSON.stringify(cosetta.tags.split(',').map(t => t.toLowerCase().trim())) cosetta.tags = JSON.stringify(cosetta.tags.split(',').map(t => t.toLowerCase().trim()))
@ -20,7 +21,7 @@ export function add (cosetta) {
return cosetta return cosetta
} }
export function get (uuid) { export function get(uuid) {
let q = db.prepare('SELECT * from cosette WHERE uuid = ?') let q = db.prepare('SELECT * from cosette WHERE uuid = ?')
const cosetta = q.get(uuid) const cosetta = q.get(uuid)
cosetta.tags = cosetta.tags ? JSON.parse(cosetta.tags) : [] cosetta.tags = cosetta.tags ? JSON.parse(cosetta.tags) : []
@ -32,7 +33,7 @@ export function get (uuid) {
return { cosetta, comments } return { cosetta, comments }
} }
export function getAll ({ page }) { export function getAll({ page }) {
page = Number(page || 0) page = Number(page || 0)
const perPage = 3 const perPage = 3
let query = 'SELECT * FROM cosette ORDER BY updatedAt DESC LIMIT ? OFFSET ?' let query = 'SELECT * FROM cosette ORDER BY updatedAt DESC LIMIT ? OFFSET ?'
@ -46,18 +47,18 @@ export function getAll ({ page }) {
const count = db.prepare('SELECT COUNT(*) count from cosette').get().count const count = db.prepare('SELECT COUNT(*) count from cosette').get().count
return { cosette, details: { page, count, prev: page !== 0, next: count > perPage*(page+1), n_page: Math.ceil(count / perPage) } } return { cosette, details: { page, count, prev: page !== 0, next: count > perPage * (page + 1), n_page: Math.ceil(count / perPage) } }
} }
export function addComment (comment) { export function addComment(comment) {
const q = db.prepare('INSERT INTO chan (uuid, cosetta_uuid, message) VALUES(:uuid, :cosetta_uuid, :message)') const q = db.prepare('INSERT INTO chan (uuid, cosetta_uuid, message) VALUES(:uuid, :cosetta_uuid, :message)')
comment.uuid = v4() comment.uuid = v4()
q.run(comment) q.run(comment)
return comment return comment
} }
export function getComments (cosetta_uuid) { export function getComments(cosetta_uuid) {
const q = db.prepare('SELECT * from chan WHERE cosetta_uuid = ?') const q = db.prepare('SELECT * from chan WHERE cosetta_uuid = ?')
return q.all(cosetta_uuid) return q.all(cosetta_uuid)
} }