Merge branch 'main' into chart

frontend/src/App.vue

@@ -1,20 +1,41 @@
 <template>
-  <HeaderComponent />
-  <MainComponent />
+  <div id="app">
+    <MobileMessage v-if="isMobile" />
+    <div v-else>
+      <HeaderComponent />
+      <MainComponent />
+    </div>
+  </div>
 </template>
 
 <script lang="ts">
-import { type DefineComponent, defineComponent } from "vue";
+import { defineComponent, ref, onMounted } from "vue";
 import HeaderComponent from "./components/HeaderComponent.vue";
 import MainComponent from "./components/MainComponent.vue";
+import MobileMessage from "./components/MobileMessage.vue"; // Assurez-vous que ce fichier existe
 
 export default defineComponent({
-	name: "App",
-	components: {
-		HeaderComponent,
-		MainComponent,
-	},
-}) as DefineComponent;
+  name: "App",
+  components: {
+    HeaderComponent,
+    MainComponent,
+    MobileMessage,
+  },
+  setup() {
+    const isMobile = ref(false);
+
+    // Détecter si l'utilisateur est sur un appareil mobile
+    onMounted(() => {
+      const userAgent = window.navigator.userAgent.toLowerCase();
+      isMobile.value =
+        /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/.test(
+          userAgent
+        );
+    });
+
+    return { isMobile };
+  },
+});
 </script>
 
 <style>
@@ -24,4 +45,36 @@ body, html, #app {
   height: 100%;
   overflow: hidden;
 }
-</style>
+
+/* Ajuster l'affichage pour le mobile */
+.mobile-message {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  text-align: center;
+  background-color: #f8f5f1;
+  color: #020817;
+  font-family: 'Geist', sans-serif;
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+.mobile-message img {
+  width: 150px;
+  height: auto;
+  margin-bottom: 20px;
+}
+
+.mobile-message h1 {
+  font-size: 1.8rem;
+  margin: 0;
+  font-weight: bold;
+}
+
+.mobile-message p {
+  font-size: 1rem;
+  margin: 10px 0 0;
+}
+</style>

frontend/src/assets/json/parcelles.json

@@ -0,0 +1 @@
+{}

frontend/src/components/HeaderComponent.vue

@@ -71,94 +71,95 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, ref } from "vue";
+import { useAppStore } from "@/store/appStore.ts";
+import { computed, defineComponent, ref } from "vue";
 import { useRoute } from "vue-router";
-import { useAppStore } from '@/store/appStore.ts';
 
+import lightBlackIcon from "@/assets/lightblack.svg";
+import lightGreyIcon from "@/assets/lightgrey.svg";
 /* Importation des icônes */
 import mapBlackIcon from "@/assets/mapblack.svg";
 import mapGreyIcon from "@/assets/mapgrey.svg";
 import tableBlackIcon from "@/assets/tableblack.svg";
 import tableGreyIcon from "@/assets/tablegrey.svg";
-import lightBlackIcon from "@/assets/lightblack.svg";
-import lightGreyIcon from "@/assets/lightgrey.svg";
 
 interface AddressFeature {
-  banId: string;
-  label: string;
+	banId: string;
+	label: string;
 }
 
-interface Geometry{
-  coordinates: Array<number>
+interface Geometry {
+	coordinates: Array<number>;
 }
 
-interface Feature{
-  properties: AddressFeature
-  geometry: Geometry
+interface Feature {
+	properties: AddressFeature;
+	geometry: Geometry;
 }
 
 interface ResultsAdresses {
-  features: Feature[];
+	features: Feature[];
 }
 
 export default defineComponent({
-  setup() {
-    const route = useRoute();
-    const appStore = useAppStore();
-
-    const isMapRoute = computed(() => route.path === "/" || route.path === "/map");
-    const isTableRoute = computed(() => route.path === "/tableau");
-    const isQuestionsRoute = computed(() => route.path === "/questions");
-    const searchAdress = ref("")
-    const resultsAdresses = ref<ResultsAdresses | null>(null)
+	setup() {
+		const route = useRoute();
+		const appStore = useAppStore();
 
-    const autoComplete = () => {
-      if (searchAdress.value.length === 0) {
-        resultsAdresses.value = null;
-      }
-      let search = searchAdress.value;
-      let timer = setTimeout(() => {
-        if (searchAdress.value === search) {
-          getAdresses();
-        }
-      }, 650);
-    }
+		const isMapRoute = computed(
+			() => route.path === "/" || route.path === "/map",
+		);
+		const isTableRoute = computed(() => route.path === "/tableau");
+		const isQuestionsRoute = computed(() => route.path === "/questions");
+		const searchAdress = ref("");
+		const resultsAdresses = ref<ResultsAdresses | null>(null);
 
+		const autoComplete = () => {
+			if (searchAdress.value.length === 0) {
+				resultsAdresses.value = null;
+			}
+			const search = searchAdress.value;
+			const timer = setTimeout(() => {
+				if (searchAdress.value === search) {
+					getAdresses();
+				}
+			}, 650);
+		};
 
-    const getAdresses = () => {
-      fetch(
-        "https://api-adresse.data.gouv.fr/search/?q=" +
-        searchAdress.value.replace(" ", "%20")
-      )
-        .then((response) => {
-          return response.json();
-        })
-        .then((data) => {
-          resultsAdresses.value = data;
-        });
-    }
+		const getAdresses = () => {
+			fetch(
+				"https://api-adresse.data.gouv.fr/search/?q=" +
+					searchAdress.value.replace(" ", "%20"),
+			)
+				.then((response) => {
+					return response.json();
+				})
+				.then((data) => {
+					resultsAdresses.value = data;
+				});
+		};
 
-    const goToAddress = (coordinates: Array<number>) => {
-      appStore.updateAddress(coordinates)
-      resultsAdresses.value = null;
-    }
+		const goToAddress = (coordinates: Array<number>) => {
+			appStore.updateAddress(coordinates);
+			resultsAdresses.value = null;
+		};
 
-    return {
-      isMapRoute,
-      isTableRoute,
-      isQuestionsRoute,
-      mapBlackIcon,
-      mapGreyIcon,
-      tableBlackIcon,
-      tableGreyIcon,
-      lightBlackIcon,
-      lightGreyIcon,
-      searchAdress,
-      autoComplete,
-      resultsAdresses,
-      goToAddress,
-    };
-  },
+		return {
+			isMapRoute,
+			isTableRoute,
+			isQuestionsRoute,
+			mapBlackIcon,
+			mapGreyIcon,
+			tableBlackIcon,
+			tableGreyIcon,
+			lightBlackIcon,
+			lightGreyIcon,
+			searchAdress,
+			autoComplete,
+			resultsAdresses,
+			goToAddress,
+		};
+	},
 });
 </script>