Epitech/ratrapage_T-WEB
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases 1 Wiki Activity

Compare commits

base: Epitech:4761fef61bc78aca86bee258c7d93b16ae3b912c
Branches Tags
Epitech:master Epitech:fix/prod Epitech:test--test-des-TU Epitech:fix-SSR-with-PB Epitech:feat/create-map Epitech:feat--run-open-data-in-prod
Epitech:v0.0.1
..
compare: Epitech:feat/create-map
Branches Tags
Epitech:master Epitech:fix/prod Epitech:test--test-des-TU Epitech:fix-SSR-with-PB Epitech:feat/create-map Epitech:feat--run-open-data-in-prod
Epitech:v0.0.1

2 Commits
4761fef61b ... feat/creat

Author SHA1 Message Date
Clement
3936d20020 maps add in maps 2024-04-25 14:59:40 +02:00
Clement
54ac29ff53 Merge branch 'master' into feat/create-map 2024-04-25 14:59:16 +02:00
8 changed files with 77 additions and 119 deletions
Expand all files Collapse all files

1
front/package.json
View File

@ -3,7 +3,6 @@
"type": "module", "type": "module",
"version": "0.0.1", "version": "0.0.1",
"private": "true", "private": "true",
"private": "true",
"scripts": { "scripts": {
"dev": "astro dev", "dev": "astro dev",
"start": "node ./dist/server/entry.mjs", "start": "node ./dist/server/entry.mjs",

55
front/src/components/Leaflet.astro Normal file
View File

@ -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>

2
front/src/layouts/Layout.astro
View File

@ -19,4 +19,4 @@ const { title } = Astro.props;
<body> <body>
<slot /> <slot />
</body> </body>
</html> </html>

5
front/src/libs/AstroUtils.ts
View File

@ -1,5 +0,0 @@
export default class AstroUtils {
public static async wrap<T = void>(fn: () => T | Promise<T>) {
return await fn()
}
}

18
front/src/libs/AuthUtils.ts
View File

@ -1,22 +1,4 @@
import { AstroCookies } from "astro";
import { PocketBase } from "PocketBase";
const pb = new PocketBase('https://pb-tweb.cb85.fr');
export async function getUser(cookies:AstroCookies): Promise<UserObj | null> {
const sessionID = cookies.get('session')?value
if(!sessionID){
return
}
const authData = await pb.collection('users').authRefresh();
console.log(pb.authStore.isValid);
console.log(pb.authStore.token);
console.log(pb.authStore.model.id);
}
//référence a loop //référence a loop
//fonction get user pour récupéré un utilisateur (notament coté client) //fonction get user pour récupéré un utilisateur (notament coté client)
//sessionID = JWS //sessionID = JWS

44
front/src/pages/account/login.astro
View File

@ -1,44 +0,0 @@
---
import Layout from "../../layouts/Layout.astro";
import PocketBase from 'pocketbase';
import AstroUtils from "../../libs/AstroUtils";
import Schema from 'models/Schema'
// const usr = await getUser(Astro.cookies)
// if (usr) {
// return Astro.redirect(route('/', {message: 'Vous êtes déjà connecté !'}))
// }
const res = await AstroUtils.wrap(async () => {
if (Astro.request.method !== 'POST') {
return
}
const form = await Astro.request.formData();
const request = {
email: form.get("username") as String,
password: form.get("password") as String
}
const pb = new PocketBase('http://127.0.0.1:3001');
const authData = await pb.collection('users').authWithPassword(
request.email,
request.password,
);
// after the above you can also access the auth data from the authStore
console.log(pb.authStore.isValid);
console.log(pb.authStore.token);
console.log(pb.authStore.model.id);
})
---
<Layout title="login">
<form id="account-creation" method="post" enctype="multipart/form-data">
<input required name="username" placeholder="Pseudo ou email"/>
<input required name="password" type="password" placeholder="Mot de passe" />
<button>Connection</button>
</form>
</Layout>

44
front/src/pages/account/register.astro
View File

@ -1,44 +0,0 @@
---
import PocketBase from 'pocketbase';
import Layout from '../../layouts/Layout.astro';
import AstroUtils from '../../libs/AstroUtils';
//const connected = await getUser(Astro.cookies)
// if(connected) {
// return Astro.redirect(route('/'))
// }
const res = await AstroUtils.wrap(async () => {
if (Astro.request.method !== 'POST'){
return
}
const form = await Astro.request.formData()
const request = {
username: form.get("username") as String,
name: form.get("name") as String,
email: form.get("email") as String,
password: form.get("password") as String,
passwordConfirm: form.get("passwordConfirm") as String,
emailVisibility: false
}
const pb = new PocketBase('http://127.0.0.1:3001');
console.log(request);
const record = await pb.collection('users').create(request);
console.log(record);
})
---
<Layout title="register">
<form id="account-creation" method="post" enctype="multipart/form-data">
<input required name="name" placeholder="Prénom Nom"/>
<input required name="username" placeholder="Pseudo"/>
<input required name="email" type="email" placeholder="Renseignez votre email" />
<input required name="password" type="password" placeholder="Créez un mot de passe" />
<input required name="passwordConfirm" type="password" placeholder="Confirmer votre mot de passe" />
<button>Créer un compte</button>
</form>
</Layout>

27
front/src/pages/maps.astro
View File

@ -1,17 +1,32 @@
--- ---
import Leaflet from 'components/Leaflet.astro';
import Layout from 'layouts/Layout.astro'; import Layout from 'layouts/Layout.astro';
import { Marker, Popup } from 'leaflet'; // import { Marker, Popup } from 'leaflet';
import { MapContainer } from 'react-leaflet' // import type { only } from 'node:test';
// import { MapContainer, TileLayer } from 'react-leaflet'
--- ---
<Layout title="maps test"> <Layout title="maps test">
<MapContainer client:load center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}> <!-- <MapContainer client:only="react" center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
<Marker client:load lat={51.505} lng={-0.09}> <TileLayer
<Popup client:load> 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. A pretty CSS3 popup. <br /> Easily customizable.
</Popup> </Popup>
</Marker> </Marker>
</MapContainer> </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> </Layout>