ekzyis
/
delphi.market
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Create MarketForm component

This commit is contained in:
ekzyis 2023-11-08 23:31:25 +01:00
parent 0ed27167f7
commit 8d5aad5744
2 changed files with 31 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
vue/src/components/MarketForm.vue Normal file
View File

@ -0,0 +1,28 @@
<template>
<form ref="form" class="mx-auto text-left" method="post" action="/api/market" @submit.prevent="submitForm">
<label class="mx-1" for="desc">description</label>
<input v-model="description" class="mx-1" id="desc" name="desc" type="text" placeholder="event description">
<button class="mx-1" type="submit">submit</button>
</form>
</template>
<script setup>
import { ref } from 'vue'
const form = ref(null)
const description = ref(null)
const submitForm = async () => {
const url = window.origin + '/api/market'
const body = JSON.stringify({ description: description.value })
await fetch(url, { method: 'post', body })
}
</script>
<style scoped>
input {
padding: 0 0.3em;
color: #000;
}
</style>

25
vue/src/components/MarketList.vue
View File

@ -5,22 +5,16 @@
</li>
</ul>
<button v-if="!showForm" @click.prevent="toggleForm">+ create market</button>
<div class="flex flex-col justify-center" v-else>
<div class="my-1 text-center">+ create market</div>
<form ref="form" class="mx-auto text-left" method="post" action="/api/market" @submit.prevent="submitForm">
<label class="mx-1" for="desc">description</label>
<input v-model="description" class="mx-1" id="desc" name="desc" type="text">
<button class="mx-1" type="submit">submit</button>
</form>
<div v-else class="flex flex-col justify-center">
<MarketForm />
</div>
</template>
<script setup>
import MarketForm from './MarketForm'
import { ref } from 'vue'
const markets = ref([])
const form = ref(null)
const description = ref(null)
const showForm = ref(false)
// TODO only load markets once per session
@ -31,25 +25,12 @@ await fetch(url).then(async r => {
})
const toggleForm = () => {
description.value = null
showForm.value = !showForm.value
}
const submitForm = async () => {
const url = window.origin + '/api/market'
const body = JSON.stringify({ description: description.value })
await fetch(url, { method: 'post', body })
toggleForm()
}
</script>
<style scoped>
input {
padding: 0 0.3em;
color: #000;
}
a {
padding: 0 1em;
}