90 lines
3.2 KiB
Vue
90 lines
3.2 KiB
Vue
<script setup lang="ts">
|
|
import Modal from '../components/Modal.vue';
|
|
</script>
|
|
|
|
<template>
|
|
<h1>TLA suggestion form</h1>
|
|
<br>
|
|
<UCard class="align-center">
|
|
|
|
<UForm @submit="onSubmit" class="space-y-4" action="/api/suggestion" method="post">
|
|
<UFormField class="form-field" label="Acronym" required>
|
|
<UInput v-model="form.acronym" class="w-80" placeholder="Enter your TLA" name="tla"></UInput>
|
|
</UFormField>
|
|
<UFormField label="Motto" required>
|
|
<UInput class="w-80" v-model="form.hint" placeholder="Enter the motto for your TLA" name="hint"></UInput>
|
|
</UFormField>
|
|
<UFormField label="Contex" required>
|
|
<UTextarea class="w-80" v-model="form.context" name="context" rows=5 placeholder="Provide context for your TLA. This will be displayed upon completing the riddle of the day, either by guessing it correctly, or by running out of guesses."></UTextarea>
|
|
</UFormField>
|
|
<UFormField required>
|
|
<URadioGroup orientation="horizontal" v-model="form.language" name="language" variant="table" size="xs" default-value="en" :items="['en', 'hu']" />
|
|
</UFormField>
|
|
<UFormField class="form-field" label="Submitter (your name)">
|
|
<UInput v-model="form.submitter" class="w-80" placeholder="Anonymus" name="submitter"></UInput>
|
|
</UFormField>
|
|
<UButton type="submit">
|
|
Submit suggestion
|
|
</UButton>
|
|
</UForm>
|
|
<br>
|
|
Disclaimer: I'm going through these manually, approving them or even changing the context or motto for them, if I feel it's necessary. I don't guarantee, that your suggestion will be approved and even if it is, it may not be next days TLA.
|
|
</UCard>
|
|
|
|
<Modal v-model:open="submited">
|
|
<b>Your suggestion has been submitted!</b><br>
|
|
If you wish, you can submit adnother TLA by exiting this alert. <br><br>
|
|
<UButton to="/">Main page</UButton>
|
|
</Modal>
|
|
<Modal v-model:open="missing_fields">
|
|
<b>Please fill out all required fields (marked with *)</b>
|
|
</Modal>
|
|
|
|
</template>
|
|
|
|
<style>
|
|
.flex-container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
</style>
|
|
|
|
<script lang="ts">
|
|
import axios from 'axios';
|
|
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
form: {
|
|
acronym: '',
|
|
hint: '',
|
|
context: '',
|
|
language: '',
|
|
submitter: '',
|
|
},
|
|
missing_fields: false,
|
|
submited: false,
|
|
|
|
};
|
|
},
|
|
methods: {
|
|
onSubmit() {
|
|
axios.post('/api/suggestion/en', this.form).then( response => {
|
|
if (response.status == 200)
|
|
{
|
|
this.form.acronym = '';
|
|
this.form.hint = '';
|
|
this.form.context = '';
|
|
this.form.submitter = '';
|
|
this.form.language = 'en';
|
|
this.submited = true;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
</script> |