Compare commits
2 Commits
eed351df0a
...
feat/creat
| Author | SHA1 | Date | |
|---|---|---|---|
| 3936d20020 | |||
| 54ac29ff53 |
@ -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
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>
|
<body>
|
||||||
<slot />
|
<slot />
|
||||||
</body>
|
</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,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 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='© <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>
|
||||||
|
|||||||
Reference in New Issue
Block a user