Compare commits
2 Commits
4761fef61b
...
feat/creat
| Author | SHA1 | Date | |
|---|---|---|---|
| 3936d20020 | |||
| 54ac29ff53 |
@ -3,7 +3,6 @@
|
||||
"type": "module",
|
||||
"version": "0.0.1",
|
||||
"private": "true",
|
||||
"private": "true",
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"start": "node ./dist/server/entry.mjs",
|
||||
|
||||
55
front/src/components/Leaflet.astro
Normal file
55
front/src/components/Leaflet.astro
Normal 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>
|
||||
@ -19,4 +19,4 @@ const { title } = Astro.props;
|
||||
<body>
|
||||
<slot />
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -1,5 +0,0 @@
|
||||
export default class AstroUtils {
|
||||
public static async wrap<T = void>(fn: () => T | Promise<T>) {
|
||||
return await fn()
|
||||
}
|
||||
}
|
||||
@ -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
|
||||
//fonction get user pour récupéré un utilisateur (notament coté client)
|
||||
//sessionID = JWS
|
||||
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -1,17 +1,32 @@
|
||||
---
|
||||
import Leaflet from 'components/Leaflet.astro';
|
||||
import Layout from 'layouts/Layout.astro';
|
||||
import { Marker, Popup } from 'leaflet';
|
||||
import { MapContainer } from 'react-leaflet'
|
||||
// import { Marker, Popup } from 'leaflet';
|
||||
// import type { only } from 'node:test';
|
||||
// import { MapContainer, TileLayer } from 'react-leaflet'
|
||||
---
|
||||
|
||||
<Layout title="maps test">
|
||||
|
||||
<MapContainer client:load center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
|
||||
<Marker client:load lat={51.505} lng={-0.09}>
|
||||
<Popup client:load>
|
||||
<!-- <MapContainer client:only="react" center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
|
||||
<TileLayer
|
||||
client:only="react"
|
||||
attribution='© <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>
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user