🐕

Author: cocotime

src/App.vue

@@ -17,28 +17,8 @@
 </template>
 
 <script>
-import { getDatabase, ref, onValue } from "firebase/database";
 export default {
   name: "app",
-  data() {
-    return {
-      name: "",
-      pets: [],
-    };
-  },
-  methods: {
-    getPets() {
-      const db = getDatabase();
-      const petsRef = ref(db, "pets");
-      onValue(petsRef, (snapshot) => {
-        const data = snapshot.val();
-        this.pets = Object.keys(data).map((key) => ({
-          id: key,
-          ...data[key],
-        }));
-      });
-    },
-  },
 };
 </script>
 
@@ -94,6 +74,18 @@ p {
   text-align: left;
 }
 
+input,
+select {
+  border: 1px solid #ff738c;
+  border-radius: 4px;
+  padding: 5px;
+  box-sizing: border-box;
+
+  &:focus-visible {
+    outline: 2px solid #ff738c;
+  }
+}
+
 .primary-btn {
   font-family: "Barlow Semi Condensed", sans-serif;
   background-color: #ff738c;

src/components/ChoosePet.vue

@@ -20,18 +20,21 @@
 <script>
 export default {
   name: "ChoosePet",
-  data() {
-    return {
-      pets: this.$store.state.pets,
-    };
+  computed: {
+    pets() {
+      return this.$store.state.pets;
+    },
+  },
+  beforeMount() {
+    this.$store.dispatch("getPets");
   },
   methods: {
     goToBrowse(id) {
-      this.$store.commit("setPetId", id);
+      this.$store.dispatch("getPetData", id);
       this.$router.push({ name: "browse", params: { petId: id } });
     },
     goToAddPet() {
-      this.$store.commit("clearPetId");
+      this.$store.commit("clearPetData");
       this.$router.push({ name: "new" });
     },
   },
@@ -53,6 +56,7 @@ export default {
   column-gap: 20px;
   box-sizing: border-box;
   padding-inline: 20px;
+  row-gap: 20px;
 }
 .pet {
   border: 2px solid #ff738c;

src/components/NewPet.vue

@@ -42,7 +42,7 @@
         <input type="text" name="color" v-model="form.color" />
       </div>
       <div class="block">
-        <label class="label" for="weight">Weight</label>
+        <label class="label" for="weight">Weight (kg)</label>
         <input type="number" name="weight" v-model="form.weight" />
       </div>
       <div class="block">
@@ -53,6 +53,10 @@
         <label class="label" for="birthday">Birthday</label>
         <input type="date" name="birthday" v-model="form.birthday" />
       </div>
+      <div class="block">
+        <label class="label" for="image">Image url</label>
+        <input type="text" name="image" v-model="form.image" />
+      </div>
       <button type="button" @click="checkForm" class="primary-btn">Save</button>
     </form>
   </div>
@@ -80,13 +84,16 @@ export default {
           ? this.$store.state.currentPet.color
           : "",
         weight: this.$store.state.currentPet
-          ? this.$store.state.currentPet.currentWeight
+          ? this.$store.state.currentPet.weight
           : "",
         chipNumber: this.$store.state.currentPet
           ? this.$store.state.currentPet.chipNumber
           : "",
         birthday: this.$store.state.currentPet
-          ? this.$store.state.currentPet.birthDate
+          ? this.$store.state.currentPet.birthday
+          : "",
+        image: this.$store.state.currentPet
+          ? this.$store.state.currentPet.image
           : "",
       },
       error: "",
@@ -96,8 +103,7 @@ export default {
     checkForm() {
       if (this.form.name) {
         this.error = "";
-        // save form
-        console.log(this.form);
+        this.$store.dispatch("savePet", this.form);
         this.$router.push({ name: "choose-pet" });
       } else {
         this.error = "Name is required.";
@@ -127,17 +133,6 @@ export default {
   inline-size: 100%;
   text-align: left;
 }
-input,
-select {
-  border: 1px solid #ff738c;
-  border-radius: 4px;
-  padding: 5px;
-  box-sizing: border-box;
-
-  &:focus-visible {
-    outline: 2px solid #ff738c;
-  }
-}
 .primary-btn {
   inline-size: 100%;
 }

src/components/PetInfo.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="main-container">
-    <ul>
+    <ul v-if="currentPet">
       <li>
         <div class="label">Name</div>
         <div class="value">{{ currentPet.name }}</div>
@@ -23,15 +23,15 @@
       </li>
       <li>
         <div class="label">Weight</div>
-        <div class="value">{{ currentPet.currentWeight }}kg</div>
+        <div class="value">{{ currentPet.weight }}kg</div>
       </li>
       <li>
         <div class="label">Chip number</div>
         <div class="value">{{ currentPet.chipNumber }}</div>
       </li>
       <li>
         <div class="label">Birthday</div>
-        <div class="value">{{ currentPet.birthDate }}</div>
+        <div class="value">{{ currentPet.birthday }}</div>
       </li>
     </ul>
     <router-link to="/new" class="primary-btn">Edit info</router-link>

src/components/WeightData.vue

@@ -3,25 +3,81 @@
     <ul>
       <li>
         <div class="label">Date</div>
-        <div class="value">Weight</div>
+        <div class="label">Weight</div>
       </li>
       <li v-for="weight in weightData" :key="weight.id">
-        <div class="label">{{ weight.date }}</div>
+        <div class="value">{{ weight.date }}</div>
         <div class="value">{{ weight.weight }}kg</div>
       </li>
     </ul>
-    <button type="button" class="primary-btn">Add weight</button>
+    <form class="form" v-if="showForm">
+      <div class="block">
+        <label class="label hide" for="date">Birthday</label>
+        <input type="date" name="date" v-model="form.date" />
+      </div>
+      <div class="block">
+        <label class="label hide" for="weight">Weight *</label>
+        <input type="number" name="weight" v-model="form.weight" required />
+        <div v-if="error" class="error">
+          <p>{{ error }}</p>
+        </div>
+      </div>
+    </form>
+    <button
+      v-if="!showForm"
+      type="button"
+      class="primary-btn"
+      @click="toggleForm()"
+    >
+      Add weight
+    </button>
+    <button
+      v-if="showForm"
+      type="button"
+      class="primary-btn"
+      @click="addWeight()"
+    >
+      Save
+    </button>
   </div>
 </template>
 
 <script>
 export default {
   name: "PetInfo",
+  computed: {
+    weightData() {
+      return this.$store.state.currentPetWeight;
+    },
+  },
   data() {
     return {
-      weightData: this.$store.state.weightData,
+      form: {
+        date: new Date().toISOString().slice(0, 10),
+        weight: "",
+      },
+      showForm: false,
+      error: "",
     };
   },
+  methods: {
+    toggleForm() {
+      this.showForm = !this.showForm;
+    },
+    addWeight() {
+      if (this.form.weight) {
+        this.$store.dispatch("saveWeight", {
+          date: this.form.date,
+          weight: this.form.weight,
+        });
+        this.toggleForm();
+        this.form.date = new Date().toISOString().slice(0, 10);
+        this.form.weight = "";
+      } else {
+        this.error = "Weight is required";
+      }
+    },
+  },
 };
 </script>
 
@@ -47,6 +103,19 @@ li {
 }
 .label {
   font-weight: bold;
+
+  &.hide {
+    position: absolute;
+    top: -9999px;
+  }
+}
+.form {
+  display: flex;
+  justify-content: space-between;
+  inline-size: 100%;
+  padding-inline: 20px;
+  box-sizing: border-box;
+  margin-block-start: 10px;
 }
 .primary-btn {
   inline-size: calc(100% - 40px);

src/firebaseInit.js

@@ -2,10 +2,12 @@ import { initializeApp } from "firebase/app";
 
 // Your web app's Firebase configuration
 export const firebaseApp = initializeApp({
-  apiKey: xx,
-  authDomain: xx,
-  projectId: xx,
-  storageBucket: xx,
-  messagingSenderId: xx,
-  appId: xx,
+  apiKey: XX,
+  authDomain: XX,
+  projectId: XX,
+  storageBucket: XX,
+  messagingSenderId: XX,
+  appId: XX,
+  databaseURL:
+    XX,
 });

src/main.js

@@ -5,10 +5,6 @@ import store from "./store/index.ts";
 import { VueFire } from "vuefire";
 import { firebaseApp } from "./firebaseInit";
 
-const app = createApp(App)
-  .use(VueFire, { firebaseApp })
-  .use(store)
-  .use(router)
-  .mount("#app");
+const app = createApp(App).use(VueFire, { firebaseApp }).use(store).use(router);
 
 app.mount("#app");