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

@@ -1,4 +1,4 @@
-name: Build Docker Image Front # nom du workflow
+name: Build Docker Image # nom du workflow
 
 on: #declancheur
   push:
@@ -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
@@ -32,8 +32,6 @@ jobs:
           type=semver,pattern={{major}}.{{minor}}
           type=semver,pattern={{major}}
           type=semver,pattern=latest
-        labels: |
-          org.opencontainers.image.title=AstroFront
 
     - name: Login to Gitea
       uses: docker/login-action@v3

.github/workflows/build_docker_express.yml

@@ -1,55 +0,0 @@
-name: Build Docker Image Back # nom du workflow
-
-on: #declancheur
-  push:
-    branches:
-      - '*'
-    tags:
-      - v*
-  pull_request:
-    branches:
-      - master
-
-jobs:
-  run: #jobs ID (nom du jobs)
-    runs-on: ubuntu-latest # environement de run
-
-    steps: # liste des étapes
-    - name: Checkout # rapatrie le depot
-      uses: actions/checkout@v3
-
-    - name: Docker meta
-      id: meta
-      uses: docker/metadata-action@v5
-      with:
-        images: |
-          git.lab-ouest.org/Epitech/ratrapage_T-WEB_back
-        tags: |
-          type=edge
-          type=ref,event=pr
-          type=ref,event=branch
-          type=semver,pattern={{version}}
-          type=semver,pattern={{major}}.{{minor}}
-          type=semver,pattern={{major}}
-          type=semver,pattern=latest
-        labels: |
-          org.opencontainers.image.title=AstroFront
-
-    - name: Login to Gitea
-      uses: docker/login-action@v3
-      with:
-        registry: git.lab-ouest.org
-        username: ${{ secrets.DOCKER_USERNAME }}
-        password: ${{ secrets.DOCKER_TOKEN }}
-
-    # - name: Set up Docker Buildx
-    #   uses: docker/setup-buildx-action@v3
-
-    - name: Build and push back
-      uses: docker/build-push-action@v5
-      with:
-        context: ./front
-        push: true
-        file: ./front/Dockerfile
-        tags: ${{ steps.meta.outputs.tags }}
-        labels: ${{ steps.meta.outputs.labels }}

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:

express/Dockerfile

@@ -1,60 +0,0 @@
-# This Dockerfile allows you to run AstroJS in server mode
-
-#########
-# Build #
-#########
-FROM docker.io/node:20-alpine as BUILD_IMAGE
-
-# External deps (for node-gyp add: "python3 make g++")
-RUN apk add --no-cache git
-
-# run as non root user
-USER node
-
-# go to user repository
-WORKDIR /home/node
-
-# Add package json
-ADD --chown=node:node package.json package-lock.json ./
-
-# install dependencies from package lock
-RUN npm ci
-
-# Add project files
-ADD --chown=node:node . .
-
-# build
-RUN npm run build
-
-# remove dev deps
-RUN npm prune --omit=dev
-
-##############
-# Production #
-##############
-FROM docker.io/node:20-alpine as PROD_IMAGE
-
-# inform software to be in production
-ENV NODE_ENV=production
-ENV HOST=0.0.0.0
-ENV RESOURCES_FOLDER=/home/node/.loop/uploads
-
-# run as non root user
-USER node
-
-# go to work folder
-WORKDIR /home/node
-
-# Expose port
-EXPOSE 3000
-
-# Add Healthcheck
-HEALTHCHECK --interval=10s --timeout=10s --start-period=5s --retries=3 CMD wget --no-verbose --tries=1 --spider http://localhost:3000 || exit 1
-
-# copy from build image
-COPY --chown=node:node --from=BUILD_IMAGE /home/node/node_modules ./node_modules
-COPY --chown=node:node --from=BUILD_IMAGE /home/node/dist ./dist
-COPY --chown=node:node --from=BUILD_IMAGE /home/node/package.json /home/node/.env* ./
-
-# run it !
-CMD ["npm", "run", "start"]

express/index.ts

@@ -1,13 +0,0 @@
-import express from "express";
-
-const port = 3000; //TODO: mettre port en .ENV
-
-const app = express();
-
-app.get("/", (req, res) => {
-    res.send("helloworld form dev")
-})
-
-app.listen(port, () =>{
-    console.log(`serveur running in ${port}`)
-})

express/package.json

@@ -1,18 +0,0 @@
-{
-  "scripts": {
-    "build": "rimraf dist && npx tsc",
-    "start": "node dist/index.js",
-    "predev": "npm run build",
-    "dev": "npx tsc -w & nodemon dist/index.js"
-  },
-  "dependencies": {
-    "@types/express": "^4.17.21",
-    "@types/node": "^20.12.7",
-    "express": "^4.19.2",
-    "rimraf": "^5.0.5",
-    "typescript": "^5.4.5"
-  },
-  "devDependencies": {
-    "nodemon": "^3.1.0"
-  }
-}

express/tsconfig.json

@@ -1,109 +0,0 @@
-{
-  "compilerOptions": {
-    /* Visit https://aka.ms/tsconfig to read more about this file */
-
-    /* Projects */
-    // "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
-    // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
-    // "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
-    // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
-    // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
-    // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
-
-    /* Language and Environment */
-    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
-    // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
-    // "jsx": "preserve",                                /* Specify what JSX code is generated. */
-    // "experimentalDecorators": true,                   /* Enable experimental support for legacy experimental decorators. */
-    // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
-    // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
-    // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
-    // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
-    // "reactNamespace": "",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
-    // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
-    // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
-    // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
-
-    /* Modules */
-    "module": "commonjs",                                /* Specify what module code is generated. */
-    // "rootDir": "./",                                  /* Specify the root folder within your source files. */
-    // "moduleResolution": "node10",                     /* Specify how TypeScript looks up a file from a given module specifier. */
-    // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
-    // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
-    // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
-    // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
-    // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
-    // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
-    // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
-    // "allowImportingTsExtensions": true,               /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */
-    // "resolvePackageJsonExports": true,                /* Use the package.json 'exports' field when resolving package imports. */
-    // "resolvePackageJsonImports": true,                /* Use the package.json 'imports' field when resolving imports. */
-    // "customConditions": [],                           /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */
-    // "resolveJsonModule": true,                        /* Enable importing .json files. */
-    // "allowArbitraryExtensions": true,                 /* Enable importing files with any extension, provided a declaration file is present. */
-    // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
-
-    /* JavaScript Support */
-    // "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
-    // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
-    // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
-
-    /* Emit */
-    // "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
-    // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
-    // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
-    // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
-    // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
-    // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
-     "outDir": "./dist",                                   /* Specify an output folder for all emitted files. */
-    // "removeComments": true,                           /* Disable emitting comments. */
-    // "noEmit": true,                                   /* Disable emitting files from a compilation. */
-    // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
-    // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types. */
-    // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
-    // "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
-    // "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
-    // "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
-    // "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
-    // "newLine": "crlf",                                /* Set the newline character for emitting files. */
-    // "stripInternal": true,                            /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
-    // "noEmitHelpers": true,                            /* Disable generating custom helper functions like '__extends' in compiled output. */
-    // "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
-    // "preserveConstEnums": true,                       /* Disable erasing 'const enum' declarations in generated code. */
-    // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
-    // "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
-
-    /* Interop Constraints */
-    // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
-    // "verbatimModuleSyntax": true,                     /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
-    // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
-    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
-    // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
-    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
-
-    /* Type Checking */
-    "strict": true,                                      /* Enable all strict type-checking options. */
-    // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
-    // "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
-    // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
-    // "strictBindCallApply": true,                      /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
-    // "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
-    // "noImplicitThis": true,                           /* Enable error reporting when 'this' is given the type 'any'. */
-    // "useUnknownInCatchVariables": true,               /* Default catch clause variables as 'unknown' instead of 'any'. */
-    // "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
-    // "noUnusedLocals": true,                           /* Enable error reporting when local variables aren't read. */
-    // "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read. */
-    // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
-    // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
-    // "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
-    // "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
-    // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
-    // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
-    // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
-    // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
-
-    /* Completeness */
-    // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
-    "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
-  }
-}

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
+	},
 }