suggestion form development

resources/js/pages/HomeView.vue

@@ -2,7 +2,7 @@
   import axios from 'axios';
   import GuessWord from '../components/GuessWord.vue';
   import Modal from '../components/Modal.vue';
-import Review from '../components/Review.vue';
+  import Review from '../components/Review.vue';
 </script>
 
 <script lang="ts">
@@ -38,7 +38,6 @@ import Review from '../components/Review.vue';
       onSubmit() {
 
         if (this.words.length == 3 && this.guesses.length < this.maxGuesses) {
-          console.log(this.words)
           axios
           .post("/api/check_tla/en", {
             guess: this.words,

resources/js/pages/SuggestionView.vue

@@ -1,24 +1,36 @@
 <template>
     <h1>TLA suggestion form</h1>
-    <UCard>
-    <UForm class="space-y-4" style="text-align: left;"  action="/api/suggestion" method="post"> 
+    <UCard class="w-140 align-center">
+
+    <UForm @submit="onSubmit"  class="space-y-4" action="/api/suggestion" method="post"> 
         <UFormField class="form-field" label="Acronym" required>
-            <UInput class="w-80" placeholder="Enter your TLA" name="tla"></UInput>
+            <UInput v-model="form.acronym" class="w-80" placeholder="Enter your TLA" name="tla"></UInput>
         </UFormField>
         <UFormField label="Motto" required>
-            <UInput class="w-80" placeholder="Enter the motto for your TLA"></UInput>
+            <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" 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>
+            <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>
-            <URadioGroup orientation="horizontal" variant="table" size="xs" default-value="en" :items="['en', 'hu']" />
+        <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>
     
 </template>
 
@@ -32,5 +44,33 @@
 </style>
 
 <script lang="ts">
+import axios from 'axios';
+
+    export default {
+        data() {
+            return {
+                form: {
+                    acronym: '',
+                    hint: '',
+                    context: '', 
+                    language: '', 
+                    submitter: '',
+                },
+                submited: false,
+
+            };
+        },
+        methods: {
+            onSubmit() {
+                axios.post('/api/suggestion/en', this.form);
+                this.form.acronym = '';
+                this.form.hint = '';
+                this.form.context = '';
+                this.form.submitter = '';
+                this.form.language = 'en';
+                this.submited = true;
+            }
+        }
+    }
 
 </script>