api/request.js

@@ -9,11 +9,18 @@ const RequestedWine = require(path.join(
 const Wine = require(path.join(
   __dirname + "/../schemas/Wine"
 ));
+const mustBeAuthenticated = require(path.join(
+  __dirname + "/../middleware/mustBeAuthenticated"
+));
 
 router.use((req, res, next) => {
   next();
 });
 
+router.route("/request/").delete(mustBeAuthenticated, async (req, res) => {
+  await RequestedWine.deleteOne({wineId: req.body.id})
+  res.json(true);
+})
 
 router.route("/request").get(async (req, res) => {
   const rWines = await RequestedWine.find({}).populate("wine")

src/api.js

@@ -100,6 +100,21 @@ const winners = () => {
   return fetch(url.href).then(resp => resp.json());
 };
 
+const deleteRequestedWine = wineToBeDeleted => {
+  console.log("when do i get here", wineToBeDeleted)
+  const url = new URL("api/request", BASE_URL);
+
+  const options = {
+    headers: {
+      "Content-Type": "application/json"
+    },
+    method: "DELETE",
+    body: JSON.stringify(wineToBeDeleted)
+  };
+
+  return fetch(url.href, options).then(resp => resp.json())
+}
+
 const deleteWinners = () => {
   const url = new URL("/api/virtual/winners", BASE_URL);
 
@@ -302,6 +317,7 @@ export {
   winnersSecure,
   deleteWinners,
   deleteAttendees,
+  deleteRequestedWine,
   getChatHistory,
   finishedDraw,
   getAmIWinner,

src/components/AllRequestedWines.vue

@@ -1,10 +1,10 @@
 <template>
   <main>
     <h1>
-      Alle viner foreslåtte viner
+      Alle foreslåtte viner
     </h1>
     <section class="requested-wines-container">
-      <RequestedWineCard v-for="requestedEl in wines" :key="requestedEl.id" :requestedElement="requestedEl" />
+      <RequestedWineCard v-for="requestedEl in wines" :key="requestedEl.id" :requestedElement="requestedEl" @deletedOne="refreshData" />
     </section>
   </main>
 </template>
@@ -22,9 +22,14 @@ export default {
       canRequest: true
     }
   },
-  async mounted() {
-    const wines = await allRequestedWines();
-    this.wines = wines
+  methods: {
+    async refreshData(){
+      const wines = await allRequestedWines()
+      this.wines = wines
+    }
+  },
+  mounted() {
+    this.refreshData()
   }
 }
 </script>

src/ui/RequestedWineCard.vue

@@ -19,11 +19,16 @@
           class="wine-link"
         >Les mer på polet</a>
         </section>
+        <button @click="deleteWine(wine)">
+          Slett vinen
+        </button>
       </section>
     </div>
 </template>
 
 <script>
+import { deleteRequestedWine } from "@/api";
+
 export default {
   data(){
     return {
@@ -40,7 +45,6 @@ export default {
   methods: {
     request(wine){
       this.locallyRequested = true
-      // wine.requested = true
       this.requestedElement.count = this.requestedElement.count +1
       const options = {
         body: JSON.stringify({
@@ -55,6 +59,16 @@ export default {
       fetch("http://localhost:30030/api/request", options)
         .then(res => res.json())
     },
+    async deleteWine(wine) {
+      if (window.confirm("Er du sikker på at du vil slette vinen?")) {
+        let response = await deleteRequestedWine(wine);
+        if (response) {
+          this.$emit('deletedOne');
+        } else {
+          alert("Klarte ikke hente ut vinnere");
+        }
+      }
+    },
   },
 }
 </script>