Skip to content

Commit

Permalink
RoutePanel as webcomponent
Browse files Browse the repository at this point in the history
  • Loading branch information
@martinhamel
martinhamel committed Dec 16, 2024
1 parent ced09eb commit f45773c
Show file tree
Hide file tree
Showing 5 changed files with 98 additions and 96 deletions.
1 change: 1 addition & 0 deletions index.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import '@material/web/all.js';
import maplibregl from 'maplibre-gl';
import './web-components/FollowPanel.js';
import './web-components/RoutePanel.js';

if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/pub/service-worker.js");
Expand Down
94 changes: 1 addition & 93 deletions templates/route_panel.html
View file
Original file line number Diff line number Diff line change
@@ -1,93 +1 @@
<div class="absolute w-full max-h-[50%] overflow-auto md:w-[500px] bg-white z-20 bottom-0 rounded-lg">
<div class="">
<div>
Route panel
</div>
<div>
<div>
Longueur: <span id="total_distance" style="font-weight: bold;"></span>
</div>
<div>
<div>
{% let total_duration = total_length / 15.0 %}
{% let hours = total_duration.floor() %}
{% let minutes = ((total_duration - hours) * 60.0).round() %}
Durée:
{% if hours >= 1.0 %}
{{ hours }} heures et
{% endif %}
{{ minutes }} minutes à 15 km/h
</div>
</div>
{{ error }}
</div>
<div class="flex justify-center">
<md-filled-button hx-on:click="follow_route()" hx-target="#info">suivre</md-filled-button>
<md-filled-button hx-on:click="clear()" hx-target="#info">annuler</md-filled-button>
</div>
</div>

</div>
<script type="module">
{% if coordinates != "" %}
window.coordinates = {{ coordinates }};
if (map.getLayer("selected")) {
map.getSource("selected").setData({
"type": "Feature",
"properties": {},
"geometry": {
"type": "MultiLineString",
"coordinates": [window.coordinates]
}
});
} else {
map.addSource("selected", {
"type": "geojson",
"data": {
"type": "Feature",
"properties": {},
"geometry": {
"type": "MultiLineString",
"coordinates": [window.coordinates]
}
}
})
map.addLayer({
"id": "selected",
"type": "line",
"source": "selected",
"paint": {
"line-width": 8,
"line-color": "hsl(205, 100%, 50%)",
"line-blur": 0,
"line-opacity": 0.50
}
},
"Road labels")
}
let totalDistance = window.calculateTotalDistance(window.coordinates, 0);
document.getElementById('total_distance').innerText = `${totalDistance.toFixed(2)} kms`;

var bearing = calculateBearing(
window.coordinates[0][0],
window.coordinates[0][1],
window.coordinates[window.coordinates.length - 1][0],
window.coordinates[window.coordinates.length - 1][1]);
var bounds = fitBounds(window.coordinates);
map.fitBounds(bounds, { bearing, pitch: 0, padding: 30, duration: 900 });
{% endif %}
(async () => {
try {
const wakeLock = await navigator.wakeLock.request("screen");
} catch (err) {
// the wake lock request fails - usually system related, such being low on battery
console.log(`${err.name}, ${err.message}`);
}
})();

window.follow_route = () => {
htmx.ajax('GET', '/follow', {
target: "#info"
})
};
</script>
<route-panel coordinates="{{coordinates}}" error="{{error}}"></route-panel>
1 change: 0 additions & 1 deletion templates/segment_panel.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,6 @@
map.fitBounds(fitBounds(geom[0]), { padding: window.innerWidth * .10 });
{% endif %}
if (!window.start_marker) {
console.log("creating start marker");
window.start_marker = new window.maplibregl.Marker({ color: "#00f" }).setLngLat(geom[0][0]).addTo(map);
}
{% if !edit %}
Expand Down
3 changes: 1 addition & 2 deletions web-components/FollowPanel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,14 @@ class FollowPanel extends HTMLElement {
constructor() {
super();
let totalDistance = window.calculateTotalDistance(window.coordinates, 0);
document.getElementById('total_distance').innerText = `${totalDistance.toFixed(2)} kms`;
this.innerHTML = `
<div class="absolute w-full max-h-[50%] overflow-auto md:w-[500px] bg-white z-20 bottom-0 rounded-lg">
<div id="follow" style="display: flex; flex-direction: column; justify-content: center;">
<div style="display: flex;justify-content: center;">
<div>
distance à faire :
</div>
<div id="total_distance" style="margin-left: 2em; font-weight: bold;">
<div style="margin-left: 2em; font-weight: bold;">
${totalDistance.toFixed(2)} kms
</div>
</div>
Expand Down
95 changes: 95 additions & 0 deletions web-components/RoutePanel.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
class RoutePanel extends HTMLElement {
constructor() {
super();
window.coordinates = JSON.parse(this.getAttribute('coordinates'));
if (map.getLayer("selected")) {
map.getSource("selected").setData({
"type": "Feature",
"properties": {},
"geometry": {
"type": "MultiLineString",
"coordinates": [window.coordinates]
}
});
} else {
map.addSource("selected", {
"type": "geojson",
"data": {
"type": "Feature",
"properties": {},
"geometry": {
"type": "MultiLineString",
"coordinates": [window.coordinates]
}
}
})
map.addLayer({
"id": "selected",
"type": "line",
"source": "selected",
"paint": {
"line-width": 8,
"line-color": "hsl(205, 100%, 50%)",
"line-blur": 0,
"line-opacity": 0.50
}
},
"Road labels")
}
let totalDistance = window.calculateTotalDistance(window.coordinates, 0).toFixed(2);
let totalDuration = totalDistance / 15.0
let durationString = "";
let hours = Math.floor(totalDuration);
let minutes = Math.round((totalDuration - hours) * 60.0)
if (hours >= 1.0) {
durationString = hours + " heures et "
}
durationString += ` ${minutes} minutes à 15 km/h`

this.innerHTML = `
<div class="absolute w-full max-h-[50%] overflow-auto md:w-[500px] bg-white z-20 bottom-0 rounded-lg">
<div class="">
<div>
<div>
Longueur: <span style="font-weight: bold;">${totalDistance}</span> kms
</div>
<div>
<div>
Durée: ${durationString}
</div>
</div>
${this.getAttribute('error')}
</div>
<div class="flex justify-center">
<md-filled-button hx-on:click="follow_route()" hx-target="#info">suivre</md-filled-button>
<md-filled-button hx-on:click="clear()" hx-target="#info">annuler</md-filled-button>
</div>
</div>
</div>
`;

var bearing = calculateBearing(
window.coordinates[0][0],
window.coordinates[0][1],
window.coordinates[window.coordinates.length - 1][0],
window.coordinates[window.coordinates.length - 1][1]);
var bounds = fitBounds(window.coordinates);
map.fitBounds(bounds, { bearing, pitch: 0, padding: 30, duration: 900 });
(async () => {
try {
const wakeLock = await navigator.wakeLock.request("screen");
} catch (err) {
// the wake lock request fails - usually system related, such being low on battery
console.log(`${err.name}, ${err.message}`);
}
})();

window.follow_route = () => {
htmx.ajax('GET', '/follow', {
target: "#info"
})
};
}
}

customElements.define('route-panel', RoutePanel);

0 comments on commit f45773c

Please sign in to comment.