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 #### ##### Builder ####
FROM rust:1.75-alpine3.19 as builder FROM rust:1.76-alpine3.19 as builder
# Install dependencies # Install dependencies
RUN apk add --no-cache sqlite npm musl-dev fd minify && npm install -g typescript 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 RUN npm ci
# Transpile and delete the first line of javascript ts-client # 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 # Minify static files
COPY static /usr/src/huellas/static/ 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" <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-contextmenu/1.4.0/leaflet.contextmenu.min.js"
integrity="sha512-8sfQf8cr0KjCeN32YPfjvLU2cMvyY1lhCXTMfpTZ16CvwIzeVQtwtKlxeSqFs/TpXjKhp1Dcv77LQmn1VFaOZg==" integrity="sha512-8sfQf8cr0KjCeN32YPfjvLU2cMvyY1lhCXTMfpTZ16CvwIzeVQtwtKlxeSqFs/TpXjKhp1Dcv77LQmn1VFaOZg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script> 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"> <style type="text/css" media="screen">
body { body {

2
ts-client/Makefile
View file

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

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

@ -1,82 +1,96 @@
{ {
"name": "ts-client", "name": "ts-client",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"dependencies": { "dependencies": {
"geojson": "^0.5.0", "@msgpack/msgpack": "^3.0.0-beta2",
"leaflet": "^1.8.0", "geojson": "^0.5.0",
"leaflet-contextmenu": "^1.4.0" "leaflet": "^1.9.4",
}, "leaflet-contextmenu": "^1.4.0"
"devDependencies": { },
"@types/leaflet": "^1.7.11" "devDependencies": {
} "@types/leaflet": "^1.9.8"
}, }
"node_modules/@types/geojson": { },
"version": "7946.0.10", "node_modules/@msgpack/msgpack": {
"resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.10.tgz", "version": "3.0.0-beta2",
"integrity": "sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==", "resolved": "https://registry.npmjs.org/@msgpack/msgpack/-/msgpack-3.0.0-beta2.tgz",
"dev": true "integrity": "sha512-y+l1PNV0XDyY8sM3YtuMLK5vE3/hkfId+Do8pLo/OPxfxuFAUwcGz3oiiUuV46/aBpwTzZ+mRWVMtlSKbradhw==",
}, "engines": {
"node_modules/@types/leaflet": { "node": ">= 14"
"version": "1.7.11", }
"resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.7.11.tgz", },
"integrity": "sha512-VwAYom2pfIAf/pLj1VR5aLltd4tOtHyvfaJlNYCoejzP2nu52PrMi1ehsLRMUS+bgafmIIKBV1cMfKeS+uJ0Vg==", "node_modules/@types/geojson": {
"dev": true, "version": "7946.0.10",
"dependencies": { "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.10.tgz",
"@types/geojson": "*" "integrity": "sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==",
} "dev": true
}, },
"node_modules/geojson": { "node_modules/@types/leaflet": {
"version": "0.5.0", "version": "1.9.8",
"resolved": "https://registry.npmjs.org/geojson/-/geojson-0.5.0.tgz", "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.8.tgz",
"integrity": "sha512-/Bx5lEn+qRF4TfQ5aLu6NH+UKtvIv7Lhc487y/c8BdludrCTpiWf9wyI0RTyqg49MFefIAvFDuEi5Dfd/zgNxQ==", "integrity": "sha512-EXdsL4EhoUtGm2GC2ZYtXn+Fzc6pluVgagvo2VC1RHWToLGlTRwVYoDpqS/7QXa01rmDyBjJk3Catpf60VMkwg==",
"engines": { "dev": true,
"node": ">= 0.10" "dependencies": {
} "@types/geojson": "*"
}, }
"node_modules/leaflet": { },
"version": "1.8.0", "node_modules/geojson": {
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.8.0.tgz", "version": "0.5.0",
"integrity": "sha512-gwhMjFCQiYs3x/Sf+d49f10ERXaEFCPr+nVTryhAW8DWbMGqJqt9G4XuIaHmFW08zYvhgdzqXGr8AlW8v8dQkA==" "resolved": "https://registry.npmjs.org/geojson/-/geojson-0.5.0.tgz",
}, "integrity": "sha512-/Bx5lEn+qRF4TfQ5aLu6NH+UKtvIv7Lhc487y/c8BdludrCTpiWf9wyI0RTyqg49MFefIAvFDuEi5Dfd/zgNxQ==",
"node_modules/leaflet-contextmenu": { "engines": {
"version": "1.4.0", "node": ">= 0.10"
"resolved": "https://registry.npmjs.org/leaflet-contextmenu/-/leaflet-contextmenu-1.4.0.tgz", }
"integrity": "sha512-BXASCmJ5bLkuJGDCpWmvGqhZi5AzeOY0IbQalfkgBcMAMfAOFSvD4y0gIQxF/XzEyLkjXaRiUpibVj4+Cf3tUA==" },
} "node_modules/leaflet": {
}, "version": "1.9.4",
"dependencies": { "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
"@types/geojson": { "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA=="
"version": "7946.0.10", },
"resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.10.tgz", "node_modules/leaflet-contextmenu": {
"integrity": "sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==", "version": "1.4.0",
"dev": true "resolved": "https://registry.npmjs.org/leaflet-contextmenu/-/leaflet-contextmenu-1.4.0.tgz",
}, "integrity": "sha512-BXASCmJ5bLkuJGDCpWmvGqhZi5AzeOY0IbQalfkgBcMAMfAOFSvD4y0gIQxF/XzEyLkjXaRiUpibVj4+Cf3tUA=="
"@types/leaflet": { }
"version": "1.7.11", },
"resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.7.11.tgz", "dependencies": {
"integrity": "sha512-VwAYom2pfIAf/pLj1VR5aLltd4tOtHyvfaJlNYCoejzP2nu52PrMi1ehsLRMUS+bgafmIIKBV1cMfKeS+uJ0Vg==", "@msgpack/msgpack": {
"dev": true, "version": "3.0.0-beta2",
"requires": { "resolved": "https://registry.npmjs.org/@msgpack/msgpack/-/msgpack-3.0.0-beta2.tgz",
"@types/geojson": "*" "integrity": "sha512-y+l1PNV0XDyY8sM3YtuMLK5vE3/hkfId+Do8pLo/OPxfxuFAUwcGz3oiiUuV46/aBpwTzZ+mRWVMtlSKbradhw=="
} },
}, "@types/geojson": {
"geojson": { "version": "7946.0.10",
"version": "0.5.0", "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.10.tgz",
"resolved": "https://registry.npmjs.org/geojson/-/geojson-0.5.0.tgz", "integrity": "sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==",
"integrity": "sha512-/Bx5lEn+qRF4TfQ5aLu6NH+UKtvIv7Lhc487y/c8BdludrCTpiWf9wyI0RTyqg49MFefIAvFDuEi5Dfd/zgNxQ==" "dev": true
}, },
"leaflet": { "@types/leaflet": {
"version": "1.8.0", "version": "1.9.8",
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.8.0.tgz", "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.8.tgz",
"integrity": "sha512-gwhMjFCQiYs3x/Sf+d49f10ERXaEFCPr+nVTryhAW8DWbMGqJqt9G4XuIaHmFW08zYvhgdzqXGr8AlW8v8dQkA==" "integrity": "sha512-EXdsL4EhoUtGm2GC2ZYtXn+Fzc6pluVgagvo2VC1RHWToLGlTRwVYoDpqS/7QXa01rmDyBjJk3Catpf60VMkwg==",
}, "dev": true,
"leaflet-contextmenu": { "requires": {
"version": "1.4.0", "@types/geojson": "*"
"resolved": "https://registry.npmjs.org/leaflet-contextmenu/-/leaflet-contextmenu-1.4.0.tgz", }
"integrity": "sha512-BXASCmJ5bLkuJGDCpWmvGqhZi5AzeOY0IbQalfkgBcMAMfAOFSvD4y0gIQxF/XzEyLkjXaRiUpibVj4+Cf3tUA==" },
} "geojson": {
} "version": "0.5.0",
"resolved": "https://registry.npmjs.org/geojson/-/geojson-0.5.0.tgz",
"integrity": "sha512-/Bx5lEn+qRF4TfQ5aLu6NH+UKtvIv7Lhc487y/c8BdludrCTpiWf9wyI0RTyqg49MFefIAvFDuEi5Dfd/zgNxQ=="
},
"leaflet": {
"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",
"resolved": "https://registry.npmjs.org/leaflet-contextmenu/-/leaflet-contextmenu-1.4.0.tgz",
"integrity": "sha512-BXASCmJ5bLkuJGDCpWmvGqhZi5AzeOY0IbQalfkgBcMAMfAOFSvD4y0gIQxF/XzEyLkjXaRiUpibVj4+Cf3tUA=="
}
}
} }

17
ts-client/package.json
View file

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