avancement connexion d'un événement avec Mapado

site/plugins/mapado-check/src/components/MapadoCheckButton.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="k-number-field k-field k-field-name-mapadoid">
+    <k-button variant="filled" :theme="theme" :icon="icon" @click="connect"
+      >Vérifier</k-button
+    >
+    <footer class="k-field-footer">
+      <div class="k-help k-field-help k-text">
+        <p v-html="text"></p>
+      </div>
+    </footer>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const { mapadoToken } = defineProps({
+  mapadoToken: String,
+});
+
+const id = ref(null);
+
+const icon = ref("search");
+const theme = ref(null);
+const text = ref("Vérifie si Mapado contient bien un événement correspondant.");
+
+setTimeout(() => {
+  const idInput = document.querySelector(".k-field-name-mapadoid input");
+
+  id.value = idInput.value;
+
+  idInput.addEventListener("input", () => {
+    id.value = idInput.value;
+  });
+}, 100);
+
+function formatDateString(inputString) {
+  const splitString = inputString.split(" ");
+
+  const startDay = splitString[2];
+  const startMonth = splitString[3];
+  const startYear = splitString[4];
+
+  const endDay = splitString[9];
+  const endMonth = splitString[10];
+  const endYear = splitString[11];
+
+  const formattedString = `du ${startDay} ${startMonth} ${startYear} au ${endDay} ${endMonth} ${endYear}`;
+
+  return formattedString;
+}
+
+function connect() {
+  icon.value = "loader";
+  theme.value = "yellow";
+  const myHeaders = new Headers();
+  myHeaders.append("Authorization", "Bearer " + mapadoToken);
+
+  const requestOptions = {
+    method: "GET",
+    headers: myHeaders,
+    redirect: "follow",
+  };
+
+  fetch(
+    "https://ticketing.mapado.net/v1/ticketings/" +
+      id.value +
+      "?fields=title,slug,sellingDeviceSchedule",
+    requestOptions
+  )
+    .then((response) => {
+      console.log(response);
+      if (response.status === 404) {
+        throw new Error(
+          "Aucun événement ne correspond à l'identifiant : " + id.value + "."
+        );
+      }
+      if (response.status === 500) {
+        throw new Error(
+          "Impossible de joindre le serveur Mapado. Veuillez réessayer plus tard."
+        );
+      }
+      return response.json();
+    })
+    .then((result) => {
+      icon.value = "check";
+      theme.value = "green";
+      const scheduleFirstKey = Object.keys(result.sellingDeviceSchedule)[0];
+      const schedule = formatDateString(
+        result.sellingDeviceSchedule[scheduleFirstKey].fr.toLowerCase()
+      );
+      console.log(result);
+      text.value = `<strong>Événement correspondant sur Mapado : <em>${result.title}</em>, ${schedule}.</strong> <a href="https://desk.mapado.com/activity/${result.slug}/events" target="_blank">Gérer sur Mapado.</a>`;
+    })
+    .catch((error) => {
+      icon.value = "alert";
+      theme.value = "red";
+      text.value = "<strong>" + error + "</strong>";
+      console.log(error);
+
+      setTimeout(() => {
+        icon.value = "search";
+        theme.value = null;
+      }, 2000);
+    });
+}
+</script>
+
+<style scoped>
+button {
+  margin-top: 2rem;
+}
+</style>