Fixed price field and added timeout for creation toast

src/assets/toast.css

@@ -0,0 +1,10 @@
+/* we will explain what these classes do next! */
+.toast-fade-enter-active,
+.toast-fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.toast-fade-enter-from,
+.toast-fade-leave-to {
+  opacity: 0;
+}

src/components/CreateRestaurantModal.vue

@@ -35,7 +35,7 @@ const submit = handleSubmit((values) => {
   try {
     pb.collection("restaurants").create({
       name: values.name,
-      price_range: values.price,
+      price: values.price,
       tags: tags,
       latitude: position.value?.lat,
       longitude: position.value?.lng,

src/views/CreateView.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import "@/assets/form.css";
+import "@/assets/toast.css";
 
 import RestaurantsMap from "../components/RestaurantsMap.vue";
 import { ref } from "vue";
@@ -15,27 +16,36 @@ function onMapClicked(latlng) {
   createRestaurantModal.value?.show();
 }
 
+function resetToast() {
+  successMessage.value = undefined;
+  errorMessage.value = undefined;
+}
+
 function onRestaurantCreationSucceeded(message: string) {
   successMessage.value = message;
   errorMessage.value = undefined;
   createRestaurantModal.value?.hide();
+  setTimeout(resetToast, 5000);
 }
 
 function onRestaurantCreationFailed(message: string) {
   successMessage.value = undefined;
   errorMessage.value = message;
   createRestaurantModal.value?.hide();
+  setTimeout(resetToast, 5000);
 }
 </script>
 
 <template>
-  <div class="toast toast-top toast-end">
-    <div v-if="errorMessage" class="alert alert-error">
-      <span>{{ errorMessage }}</span>
-    </div>
-    <div v-if="successMessage" class="alert alert-success">
-      <span>{{ successMessage }}</span>
-    </div>
+  <div class="toast toast-top toast-end z-[10000]">
+    <Transition name="toast-fade">
+      <div v-if="errorMessage" class="alert alert-error">
+        <span>{{ errorMessage }}</span>
+      </div>
+      <div v-else-if="successMessage" class="alert alert-success">
+        <span>{{ successMessage }}</span>
+      </div>
+    </Transition>
   </div>
 
   <RestaurantsMap @clicked="onMapClicked" />