pitbuster/huellas
1
0
Fork 0
Code Issues Pull requests Releases Packages 1 Activity

frontend

Browse source
This commit is contained in:
Felipe 2024-03-05 19:35:03 -03:00
parent 69ca90892c
commit 5ed511d3b6
Signed by: pitbuster
SSH key fingerprint: SHA256:NLWXDJvkNDPTnUszcKt0McVeXWKTe5Lz0cIocZbA/pY
6 changed files with 121 additions and 98 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
Dockerfile
View file

@ -1,5 +1,5 @@
##### Builder ####
FROM rust:1.75-alpine3.19 as builder
FROM rust:1.76-alpine3.19 as builder
# Install dependencies
RUN apk add --no-cache sqlite npm musl-dev fd minify && npm install -g typescript
@ -37,7 +37,7 @@ WORKDIR /usr/src/huellas/ts-client/
RUN npm ci
# Transpile and delete the first line of javascript ts-client
RUN tsc && sed -i '1d' build/client.js
RUN tsc && sed -i '1,2d' build/client.js
# Minify static files
COPY static /usr/src/huellas/static/

3
static/index.html
View file

@ -17,6 +17,9 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-contextmenu/1.4.0/leaflet.contextmenu.min.js"
integrity="sha512-8sfQf8cr0KjCeN32YPfjvLU2cMvyY1lhCXTMfpTZ16CvwIzeVQtwtKlxeSqFs/TpXjKhp1Dcv77LQmn1VFaOZg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script crossorigin src="https://unpkg.com/@msgpack/msgpack"
integrity="sha512-t/LymXW9iw9p0bciQ6uASEj+8XE/p+07CCmCyNwn06F4FK2s80IuHCY62bfSorcD4ktOJavXApp5rqtIVlg3+g=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style type="text/css" media="screen">
body {

2
ts-client/Makefile
View file

@ -1,3 +1,3 @@
build/client.js: client.ts
tsc
sed -i '1d' build/client.js
sed -i '1,2d' build/client.js

19
ts-client/client.ts
View file

@ -1,5 +1,6 @@
import * as L from 'leaflet-contextmenu';
import { Feature, FeatureCollection, Point } from 'geojson';
import * as MessagePack from "@msgpack/msgpack";
interface PlaceModel {
id: number | null;
@ -14,7 +15,8 @@ interface PlaceModel {
}
async function loadPlaces(): Promise<Array<PlaceModel>> {
return await fetch('places').then(response => response.json());
let bytes = await fetch('places').then(response => response.body);
return (await MessagePack.decodeAsync(bytes)) as Array<PlaceModel>;
}
function toFeature(place: PlaceModel): Feature {
@ -120,11 +122,12 @@ async function createPlace(): Promise<void> {
await fetch('places', {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
'Content-Type': 'application/msgpack',
},
body: JSON.stringify(newPlace),
body: MessagePack.encode(newPlace),
})
.then((response) => response.json())
.then((response) => response.body)
.then((bytes) => MessagePack.decodeAsync(bytes))
.then((place: PlaceModel) => {
places.set(
toStr({ lat: place.latitude, lng: place.longitude }),
@ -143,11 +146,12 @@ async function editPlace(): Promise<void> {
await fetch('places', {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
'Content-Type': 'application/msgpack',
},
body: JSON.stringify(newPlace),
body: MessagePack.encode(newPlace),
})
.then((response) => response.json())
.then((response) => response.body)
.then((bytes) => MessagePack.decodeAsync(bytes))
.then((place: PlaceModel) => {
places.set(
toStr({ lat: place.latitude, lng: place.longitude }),
@ -183,6 +187,7 @@ function toLink(url: string): string {
}
return `<a href="${url}" target="_blank">${content}</a>`
}
async function setupMap(): Promise<void> {
/* Create/Edit form */
const modal = document.getElementById("modal");

42
ts-client/package-lock.json generated
View file

@ -5,12 +5,21 @@
"packages": {
"": {
"dependencies": {
"@msgpack/msgpack": "^3.0.0-beta2",
"geojson": "^0.5.0",
"leaflet": "^1.8.0",
"leaflet": "^1.9.4",
"leaflet-contextmenu": "^1.4.0"
},
"devDependencies": {
"@types/leaflet": "^1.7.11"
"@types/leaflet": "^1.9.8"
}
},
"node_modules/@msgpack/msgpack": {
"version": "3.0.0-beta2",
"resolved": "https://registry.npmjs.org/@msgpack/msgpack/-/msgpack-3.0.0-beta2.tgz",
"integrity": "sha512-y+l1PNV0XDyY8sM3YtuMLK5vE3/hkfId+Do8pLo/OPxfxuFAUwcGz3oiiUuV46/aBpwTzZ+mRWVMtlSKbradhw==",
"engines": {
"node": ">= 14"
}
},
"node_modules/@types/geojson": {
@ -20,9 +29,9 @@
"dev": true
},
"node_modules/@types/leaflet": {
"version": "1.7.11",
"resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.7.11.tgz",
"integrity": "sha512-VwAYom2pfIAf/pLj1VR5aLltd4tOtHyvfaJlNYCoejzP2nu52PrMi1ehsLRMUS+bgafmIIKBV1cMfKeS+uJ0Vg==",
"version": "1.9.8",
"resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.8.tgz",
"integrity": "sha512-EXdsL4EhoUtGm2GC2ZYtXn+Fzc6pluVgagvo2VC1RHWToLGlTRwVYoDpqS/7QXa01rmDyBjJk3Catpf60VMkwg==",
"dev": true,
"dependencies": {
"@types/geojson": "*"
@ -37,9 +46,9 @@
}
},
"node_modules/leaflet": {
"version": "1.8.0",
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.8.0.tgz",
"integrity": "sha512-gwhMjFCQiYs3x/Sf+d49f10ERXaEFCPr+nVTryhAW8DWbMGqJqt9G4XuIaHmFW08zYvhgdzqXGr8AlW8v8dQkA=="
"version": "1.9.4",
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
"integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA=="
},
"node_modules/leaflet-contextmenu": {
"version": "1.4.0",
@ -48,6 +57,11 @@
}
},
"dependencies": {
"@msgpack/msgpack": {
"version": "3.0.0-beta2",
"resolved": "https://registry.npmjs.org/@msgpack/msgpack/-/msgpack-3.0.0-beta2.tgz",
"integrity": "sha512-y+l1PNV0XDyY8sM3YtuMLK5vE3/hkfId+Do8pLo/OPxfxuFAUwcGz3oiiUuV46/aBpwTzZ+mRWVMtlSKbradhw=="
},
"@types/geojson": {
"version": "7946.0.10",
"resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.10.tgz",
@ -55,9 +69,9 @@
"dev": true
},
"@types/leaflet": {
"version": "1.7.11",
"resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.7.11.tgz",
"integrity": "sha512-VwAYom2pfIAf/pLj1VR5aLltd4tOtHyvfaJlNYCoejzP2nu52PrMi1ehsLRMUS+bgafmIIKBV1cMfKeS+uJ0Vg==",
"version": "1.9.8",
"resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.8.tgz",
"integrity": "sha512-EXdsL4EhoUtGm2GC2ZYtXn+Fzc6pluVgagvo2VC1RHWToLGlTRwVYoDpqS/7QXa01rmDyBjJk3Catpf60VMkwg==",
"dev": true,
"requires": {
"@types/geojson": "*"
@ -69,9 +83,9 @@
"integrity": "sha512-/Bx5lEn+qRF4TfQ5aLu6NH+UKtvIv7Lhc487y/c8BdludrCTpiWf9wyI0RTyqg49MFefIAvFDuEi5Dfd/zgNxQ=="
},
"leaflet": {
"version": "1.8.0",
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.8.0.tgz",
"integrity": "sha512-gwhMjFCQiYs3x/Sf+d49f10ERXaEFCPr+nVTryhAW8DWbMGqJqt9G4XuIaHmFW08zYvhgdzqXGr8AlW8v8dQkA=="
"version": "1.9.4",
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
"integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA=="
},
"leaflet-contextmenu": {
"version": "1.4.0",

5
ts-client/package.json
View file

@ -1,10 +1,11 @@
{
"devDependencies": {
"@types/leaflet": "^1.7.11"
"@types/leaflet": "^1.9.8"
},
"dependencies": {
"@msgpack/msgpack": "^3.0.0-beta2",
"geojson": "^0.5.0",
"leaflet": "^1.8.0",
"leaflet": "^1.9.4",
"leaflet-contextmenu": "^1.4.0"
}
}