maps add in maps

Reviewed-on: #7
Co-authored-by: Clement <c.boesmier@aptatio.com>
Co-committed-by: Clement <c.boesmier@aptatio.com>

.github/workflows/build_docker.yml

@@ -23,7 +23,7 @@ jobs:
       uses: docker/metadata-action@v5
       with:
         images: |
-          git.lab-ouest.org/Epitech/ratrapage_T-WEB
+          git.lab-ouest.org/Epitech/ratrapage_T-WEB_front
         tags: |
           type=edge
           type=ref,event=pr

docker-compose.yml

@@ -15,7 +15,7 @@ services:
     networks:
       - public
   front:
-    image: git.lab-ouest.org/epitech/ratrapage_t-web:pr-2-head
+    image: git.lab-ouest.org/epitech/ratrapage_t-web_front:pr-7-head
     depends_on: 
       - pocketbase
     labels:

front/astro.config.mjs

@@ -1,21 +1,30 @@
 import { defineConfig } from 'astro/config';
 import node from '@astrojs/node';
+import tailwind from "@astrojs/tailwind";
+
+import react from "@astrojs/react";
 
 // https://astro.build/config
 export default defineConfig({
-    // integrations: [tailwind(), test, routing(), version(), buildInfos()],
-	compressHTML: true,
-	build: {
-		assets: 'assets',
-		inlineStylesheets: 'auto'
-	},
-	server: {
-		host: true,
-		port: 3000
-	},
-    trailingSlash: 'never',
-    output: 'server',
-    adapter: node({
-		mode: 'standalone'
-	}),
-});
+  // integrations: [tailwind(), test, routing(), version(), buildInfos()],
+  compressHTML: true,
+  build: {
+    assets: 'assets',
+    inlineStylesheets: 'auto'
+  },
+  server: {
+    host: true,
+    port: 3000
+  },
+  trailingSlash: 'never',
+  output: 'server',
+  adapter: node({
+    mode: 'standalone'
+  }),
+  integrations: [tailwind(), react()],
+  vite: {
+    optimizeDeps: {
+      include: ['leaflet']
+    }
+  }
+});

front/package.json

@@ -5,30 +5,39 @@
   "private": "true",
   "scripts": {
     "dev": "astro dev",
-    "start": "astro dev",
+    "start": "node ./dist/server/entry.mjs",
     "build": "astro check && astro build",
     "preview": "astro preview",
-    "astro": "astro"
+    "astro": "astro",
+    "check:lint": "eslint src"
   },
   "dependencies": {
     "@astrojs/node": "^8.2.5",
+    "@astrojs/react": "^3.3.1",
     "@astrojs/tailwind": "^5.1.0",
     "@tailwindcss/typography": "^0.5.12",
-    "astro": "^4.6.3",
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
+    "astro": "4.5.12",
+    "leaflet": "^1.9.4",
     "lucide-astro": "^0.372.0",
     "pocketbase": "^0.21.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-leaflet": "^4.2.1",
     "simple-icons-astro": "^11.12.0",
     "tailwindcss": "^3.4.3",
     "typescript": "^5.2.2"
   },
   "devDependencies": {
     "@astrojs/check": "^0",
+    "@types/leaflet": "^1.9.12",
     "@types/node": "^20",
-    "@typescript-eslint/eslint-plugin": "^6",
-    "@typescript-eslint/parser": "^6",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
     "@vitest/coverage-v8": "^1",
-    "eslint": "^8",
-    "eslint-plugin-astro": "^0.31",
+    "eslint": "^8.57.0",
+    "eslint-plugin-astro": "^0.31.4",
     "typescript": "^5",
     "vitest": "^1"
   }

front/src/components/Leaflet.astro

@@ -0,0 +1,55 @@
+---
+import type { string } from 'astro/zod'
+import type { Marker } from 'leaflet'
+
+export interface Props {
+  latitude: number
+  longitude: number
+  zoom: number
+  /** the DOM ID of a <div> element */
+  container: string
+  /** https://leafletjs.com/reference.html#tilelayer */
+  tileLayer: string
+  /** Most tile servers require attribution. */
+  attribution: string
+  containerstyle?: string
+}
+
+const { latitude, longitude, zoom, container, tileLayer, attribution, containerstyle = "height: 61.8vh", class } = Astro.props
+---
+
+<leaflet-map
+  data-latitude={latitude}
+  data-longitude={longitude}
+  data-zoom={zoom}
+  data-container={container}
+  data-tiles={tileLayer}
+  data-attribution={attribution}
+  data-containerstyle={containerstyle}
+>
+
+<div id={container} style={containerstyle}></div>
+
+<script>
+  import L, { type LatLngTuple } from "leaflet"
+  import "leaflet/dist/leaflet"
+  import "leaflet/dist/leaflet.css"
+  
+
+  class LeafletMap extends HTMLElement {
+    constructor() {
+      super()
+
+      const latlng = [Number(this.dataset.latitude), Number(this.dataset.longitude)] as LatLngTuple
+
+      var map = L.map(this.dataset.container as string).setView(latlng, Number(this.dataset.zoom))
+      L.tileLayer(
+        this.dataset.tiles as string,
+        {attribution: this.dataset.attribution}
+        ).addTo(map)
+      var marker = L.marker([51.5, -0.09]).addTo(map);
+    }
+  }
+
+  window.customElements.define("leaflet-map", LeafletMap);
+</script>

front/src/layouts/Layout.astro

@@ -20,32 +20,3 @@ const { title } = Astro.props;
 		<slot />
 	</body>
 </html>
-<style is:global>
-	:root {
-		--accent: 136, 58, 234;
-		--accent-light: 224, 204, 250;
-		--accent-dark: 49, 10, 101;
-		--accent-gradient: linear-gradient(
-			45deg,
-			rgb(var(--accent)),
-			rgb(var(--accent-light)) 30%,
-			white 60%
-		);
-	}
-	html {
-		font-family: system-ui, sans-serif;
-		background: #13151a;
-		background-size: 224px;
-	}
-	code {
-		font-family:
-			Menlo,
-			Monaco,
-			Lucida Console,
-			Liberation Mono,
-			DejaVu Sans Mono,
-			Bitstream Vera Sans Mono,
-			Courier New,
-			monospace;
-	}
-</style>

front/src/libs/AuthUtils.ts

@@ -0,0 +1,12 @@
+
+//référence a loop
+//fonction get user pour récupéré un utilisateur (notament coté client)
+//sessionID = JWS
+
+
+//fonction set user crée un cookies de session
+//passé le cookies astro dans les paramètre
+
+//utiliser cookie.set pour crée un nouveau cookies
+
+

front/src/pages/index.astro

@@ -1,6 +1,6 @@
 ---
-import Layout from '../layouts/Layout.astro';
-import Card from '../components/Card.astro';
+import Layout from 'layouts/Layout.astro';
+import Card from 'components/Card.astro';
 ---
 
 <Layout title="Welcome to Astro.">

front/src/pages/maps.astro

@@ -0,0 +1,32 @@
+---
+import Leaflet from 'components/Leaflet.astro';
+import Layout from 'layouts/Layout.astro';
+// import { Marker, Popup } from 'leaflet';
+// import type { only } from 'node:test';
+// import { MapContainer, TileLayer } from 'react-leaflet'
+---
+
+<Layout title="maps test">
+
+    <!-- <MapContainer client:only="react" center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
+      <TileLayer
+      client:only="react"
+      attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+    />
+        <Marker client:only="react" lat={51.505} lng={-0.09}>
+            <Popup client:only="react">
+              A pretty CSS3 popup. <br /> Easily customizable.
+            </Popup>
+          </Marker>
+    </MapContainer> -->
+
+  <Leaflet
+    latitude={51.505}
+    longitude={-0.09}
+    zoom={13}
+    container="leafletmap"
+    tileLayer="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+    attribution="© <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors">
+  </Leaflet>
+</Layout>

front/tailwind.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+	theme: {
+		extend: {},
+	},
+	plugins: [],
+}

front/tsconfig.json

@@ -1,3 +1,8 @@
 {
-  "extends": "astro/tsconfigs/strict"
+  "extends": "astro/tsconfigs/strict",
+  "compilerOptions": {
+		"baseUrl": "src",
+		// hide an issue with typescript
+		"noUnusedLocals": false
+	},
 }