Merge branch 'dev' into main

src/assets/main.css

@@ -10,7 +10,7 @@ body {
 
 @layer components {
   .btn-red {
-    @apply bg-red-600 outline-red-700 hover:bg-red-700
+    @apply bg-red-600 outline-red-700 hover:bg-red-700 disabled:bg-slate-400 disabled:outline-slate-400 disabled:hover:bg-slate-400
   }
   .btn-twitter {
     @apply bg-twitter-500 outline-twitter-600 hover:bg-twitter-600

src/components/GeolocButton.vue

@@ -4,9 +4,11 @@ import { useGeolocation } from "@vueuse/core";
 import RepButton from "./RepButton.vue";
 import { computed, ref } from "vue";
 
-const { coords } = useGeolocation();
 const { getRep, setRep } = useRepStore();
 
+const { coords } = useGeolocation({
+  enableHighAccuracy: true,
+});
 const isFetching = ref<boolean>(false);
 const lastError = ref<string>("");
 
@@ -31,22 +33,15 @@ async function handleGeolocClick() {
 </script>
 
 <template>
-  <section class="text-center">
-    <header class="mb-4">
-      <h1 class="mt-4 text-center font-bold text-3xl">
-        Qui me représente à l'Assemblée Nationale ?
-      </h1>
-    </header>
-    <RepButton @click="handleGeolocClick" :style="'btn-red'">
-      <font-awesome-icon
-        :icon="['fass', buttonIcon]"
-        size="lg"
-        :class="{ 'fa-spin': isFetching }"
-      />
-      <span>Géolocalisation</span>
-    </RepButton>
-    <div v-if="lastError" class="mt-4 max-w-lg mx-auto text-sm text-red-400">
-      {{ lastError }}
-    </div>
-  </section>
+  <RepButton @click="handleGeolocClick" :style="'btn-red'">
+    <font-awesome-icon
+      :icon="['fass', buttonIcon]"
+      size="lg"
+      :class="{ 'fa-spin': isFetching }"
+    />
+    <span>Géolocalisation</span>
+  </RepButton>
+  <div v-if="lastError" class="mt-4 max-w-lg mx-auto text-sm text-red-400">
+    {{ lastError }}
+  </div>
 </template>

src/components/RepButton.vue

@@ -11,6 +11,7 @@ const props = defineProps<{
     | "btn-facebook"
     | "btn-instagram"
     | "btn-linkedin";
+  disabled?: boolean;
 }>();
 
 const elementTag = computed(() => (props.href ? "a" : "button"));

src/components/RepForm.vue

@@ -0,0 +1,64 @@
+<script lang="ts" setup>
+import { onMounted, ref } from "vue";
+import GeolocButton from "./GeolocButton.vue";
+import RepButton from "./RepButton.vue";
+
+const hasAcceptedGeoloc = ref(false);
+const hasRefusedGeoloc = ref(false);
+
+onMounted(() => {
+  navigator.permissions.query({ name: "geolocation" }).then((result) => {
+    if (result.state === "granted") {
+      hasAcceptedGeoloc.value = true;
+      hasRefusedGeoloc.value = false;
+    } else if (result.state === "denied") {
+      hasAcceptedGeoloc.value = false;
+      hasRefusedGeoloc.value = true;
+    }
+
+    result.addEventListener("change", () => {
+      if (result.state === "granted") {
+        hasAcceptedGeoloc.value = true;
+        hasRefusedGeoloc.value = false;
+      } else if (result.state === "denied") {
+        hasAcceptedGeoloc.value = false;
+        hasRefusedGeoloc.value = true;
+      }
+    });
+  });
+});
+
+function acceptGeoloc() {
+  navigator.permissions.query({ name: "geolocation" }).then((result) => {
+    console.log(result.state);
+    if (result.state === "granted" || result.state === "prompt") {
+      hasAcceptedGeoloc.value = true;
+      hasRefusedGeoloc.value = false;
+    } else if (result.state === "denied") {
+      hasAcceptedGeoloc.value = false;
+      hasRefusedGeoloc.value = true;
+    }
+  });
+}
+</script>
+
+<template>
+  <section class="text-center">
+    <header class="mb-4">
+      <h1 class="mt-4 text-center font-bold text-3xl">
+        Qui me représente à l'Assemblée Nationale ?
+      </h1>
+    </header>
+
+    <RepButton
+      @click="acceptGeoloc"
+      :style="'btn-red'"
+      :disabled="hasRefusedGeoloc"
+      v-if="!hasAcceptedGeoloc"
+    >
+      <font-awesome-icon :icon="['fas', 'square']" size="lg" />
+      <span>Me géolocaliser</span>
+    </RepButton>
+    <GeolocButton v-else />
+  </section>
+</template>

src/main.ts

@@ -19,6 +19,8 @@ import {
   faLandmark,
   faLocationDot,
   faSpinner,
+  faSquare,
+  faSquareCheck,
 } from "@fortawesome/free-solid-svg-icons";
 
 library.add(
@@ -28,7 +30,9 @@ library.add(
   faInstagram,
   faLandmark,
   faLocationDot,
-  faSpinner
+  faSpinner,
+  faSquare,
+  faSquareCheck
 );
 
 const app = createApp(App);

src/views/HomeView.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import GeolocRequest from "@/components/GeolocRequest.vue";
+import RepForm from "@/components/RepForm.vue";
 import RepInfo from "@/components/RepInfo.vue";
 import { useRepStore } from "@/stores/repStore";
 import { storeToRefs } from "pinia";
@@ -11,7 +11,7 @@ const { currentRep } = storeToRefs(useRepStore());
   <div>
     <main class="container py-4">
       <Transition name="fade" mode="out-in">
-        <GeolocRequest v-if="!currentRep" />
+        <RepForm v-if="!currentRep" />
         <Suspense v-else>
           <RepInfo :rep="currentRep" />
         </Suspense>