From cf57db496390c535ce908dc5b27c75b2e435ca13 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Mon, 15 May 2023 18:47:50 +0200
Subject: [PATCH] Added accuracy warning to Geoloc button

---
 src/components/GeolocButton.vue |  7 +++++++
 src/components/RepInfo.vue      | 23 +++++++++++++++++++++--
 src/models/org.ts               | 33 +++++++++++++++++++++++++++++++++
 3 files changed, 61 insertions(+), 2 deletions(-)
 create mode 100644 src/models/org.ts

diff --git a/src/components/GeolocButton.vue b/src/components/GeolocButton.vue
index ac1ce43..6ceb3e5 100644
--- a/src/components/GeolocButton.vue
+++ b/src/components/GeolocButton.vue
@@ -41,6 +41,13 @@ async function handleGeolocClick() {
     />
     <span>Géolocalisation</span>
   </RepButton>
+  <div
+    v-if="!lastError && coords.accuracy > 1000"
+    class="mt-4 max-w-lg mx-auto text-sm text-red-400"
+  >
+    Position peu précise ; votre député sera peut être différement de notre
+    résultat
+  </div>
   <div v-if="lastError" class="mt-4 max-w-lg mx-auto text-sm text-red-400">
     {{ lastError }}
   </div>
diff --git a/src/components/RepInfo.vue b/src/components/RepInfo.vue
index 3790968..7386603 100644
--- a/src/components/RepInfo.vue
+++ b/src/components/RepInfo.vue
@@ -1,13 +1,28 @@
 <script lang="ts" setup>
+import type { Organisation } from "@/models/org";
 import RepButton from "./RepButton.vue";
 
 import type { Depute } from "@/models/rep";
-import { computed } from "vue";
+import { computed, onMounted, ref } from "vue";
+
+const apiUrl = import.meta.env.VITE_API_URL;
 
 const props = defineProps<{
   rep: Depute;
 }>();
 
+const politicalPartyId = props.rep.acteur.mandats.mandat.find(
+  (m) => m.typeOrgane === "GP" && !m.dateFin
+)?.organes.organeRef;
+
+const repPoliticalParty = ref<Organisation | null>(null);
+
+onMounted(async () => {
+  repPoliticalParty.value = await fetch(
+    `${apiUrl}/org?id=${politicalPartyId}`
+  ).then((t) => t.json());
+});
+
 const repImage = computed(() => {
   const imageRef = props.rep.acteur.uid["#text"].replace("PA", "");
   return `https://www2.assemblee-nationale.fr/static/tribun/16/photos/carre/${imageRef}.jpg`;
@@ -88,6 +103,10 @@ const regionBgFile = computed(() => {
       <h1 class="mt-4 text-center font-bold text-3xl">
         {{ repFullName }}
       </h1>
+      <div class="text-center text-xl font-bold" v-if="repPoliticalParty">
+        {{ repPoliticalParty.organe.libelle }}
+      </div>
+      <hr class="my-5 opacity-10" />
       <h2 class="text-center font-bold text-xl">
         {{ repMandate?.election?.lieu.departement }} -
         {{ repMandate?.election?.lieu.numCirco }}e circonscription
@@ -99,7 +118,7 @@ const regionBgFile = computed(() => {
       />
     </header>
 
-    <h3 class="mt-2 text-center font-medium text-lg">
+    <h3 class="text-center font-medium text-lg">
       {{ rep.acteur.profession.libelleCourant }}
     </h3>
 
diff --git a/src/models/org.ts b/src/models/org.ts
new file mode 100644
index 0000000..5f1368c
--- /dev/null
+++ b/src/models/org.ts
@@ -0,0 +1,33 @@
+export interface Organisation {
+  organe: {
+    "@xmlns": string;
+    "@xmlns:xsi": string;
+    "@xsi:type": string;
+    uid: string;
+    codeType: string;
+    libelle: string;
+    libelleEdition: string;
+    libelleAbrege: string;
+    libelleAbrev: string;
+    viMoDe: ViMoDe;
+    organeParent: null;
+    chambre: null;
+    regime: string;
+    legislature: string;
+    secretariat: Secretariat;
+    positionPolitique: string;
+    preseance: string;
+    couleurAssociee: string;
+  };
+}
+
+export interface Secretariat {
+  secretaire01: null;
+  secretaire02: null;
+}
+
+export interface ViMoDe {
+  dateDebut: Date;
+  dateAgrement: null;
+  dateFin: null;
+}