- + –
diff --git a/public/js/app.js b/public/js/app.js index 8a81a57..e4df5bc 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -155,6 +155,7 @@ function stopRouteSensors() { ns.Geo.stop(); ns.Orientation.stop(); + ns.Vibration.stop(); state.deviceHeading = null; } @@ -242,20 +243,27 @@ `); }); + + updatePoiIndicators(state.position); } - function showPoi(poi, automatic) { + function showPoi(poi) { setActivePoi(poi.id); $('#poi-title').text(poi.title); $('#poi-description').text(poi.description || ''); ns.Slideshow.show(poi.images); ns.AudioPlayer.load(poi.audioUrl); navigate('#poi-page'); - if (automatic && poi.audioUrl) ns.AudioPlayer.play().catch(() => {}); } function nearestRoutePointIndex(position) { @@ -282,12 +290,63 @@ return nearestIndex; } - function updateNavigation(position) { + function effectiveHeading(position) { + const movementHeading = position + && Number.isFinite(position.heading) + && Number(position.speed) > 0.5 + ? position.heading + : null; + return state.deviceHeading ?? movementHeading; + } + + function poiMetrics(position) { + if (!position || !state.route?.pois?.length) return []; + const heading = effectiveHeading(position); + + return state.route.pois.map(poi => { + const distance = ns.Distance.meters(position, poi); + const bearing = ns.Distance.bearing(position, poi); + return { + poi, + distance, + bearing, + rotation: heading == null + ? bearing + : ns.Distance.normalizeDegrees(bearing - heading) + }; + }); + } + + function updatePoiIndicators(position) { + const metrics = poiMetrics(position); + + metrics.forEach(metric => { + const indicator = $(`#poi-list [data-poi-id="${metric.poi.id}"] .poi-proximity`); + const distance = Math.round(metric.distance); + indicator + .attr('aria-label', `${distance} Meter entfernt`) + .attr('title', `${distance} m entfernt`); + indicator.find('svg').css('transform', `rotate(${metric.rotation.toFixed(1)}deg)`); + indicator.find('small').text(`${distance} m`); + }); + + return metrics; + } + + function nearestPendingPoi(metrics) { + return metrics + .filter(metric => !state.triggered.has(metric.poi.id)) + .reduce((nearest, metric) => ( + !nearest || metric.distance < nearest.distance ? metric : nearest + ), null); + } + + function updateRouteProgress(position) { const points = state.route?.points || []; - if (state.routeState !== 'running' || !points.length) return; + if (!points.length) return null; const nearestIndex = nearestRoutePointIndex(position); - if (nearestIndex == null) return; + if (nearestIndex == null) return null; state.routeProgressIndex = state.routeProgressIndex == null ? nearestIndex @@ -308,32 +367,72 @@ if (targetIndex === lastIndex && distance <= reachedRadius) { state.routeProgressIndex = lastIndex; + return { reached: true, target, distance: 0 }; + } + + return { reached: false, target, distance }; + } + + function showPoiNavigation(position, metric) { + const heading = effectiveHeading(position); + const distance = Math.round(metric.distance); + + $('#navigation-arrow').css('transform', `rotate(${metric.rotation.toFixed(1)}deg)`); + showNavigation( + heading == null + ? `Norden oben · nächster POI: ${metric.poi.title}` + : `Nächster POI: ${metric.poi.title}`, + `${distance} m` + ); + $('#navigation-footer').attr( + 'aria-label', + `Nächster POI ${metric.poi.title} in ${distance} Metern` + ); + } + + function showRoutePointNavigation(position, progress) { + if (!progress) { $('#navigation-arrow').css('transform', 'rotate(0deg)'); - showNavigation('Ziel der Route erreicht', '0 m'); - $('#navigation-footer').attr('aria-label', 'Ziel der Route erreicht'); + showNavigation('Keine Navigationspunkte vorhanden', '–'); return; } - const bearing = ns.Distance.bearing(position, target); - const movementHeading = Number.isFinite(position.heading) && Number(position.speed) > 0.5 - ? position.heading - : null; - const heading = state.deviceHeading ?? movementHeading; + if (progress.reached) { + $('#navigation-arrow').css('transform', 'rotate(0deg)'); + showNavigation('Alle Stationen und das Routenziel erreicht', '0 m'); + $('#navigation-footer').attr('aria-label', 'Alle Stationen und das Routenziel erreicht'); + return; + } + + const bearing = ns.Distance.bearing(position, progress.target); + const heading = effectiveHeading(position); const rotation = heading == null ? bearing : ns.Distance.normalizeDegrees(bearing - heading); + const distance = Math.round(progress.distance); $('#navigation-arrow').css('transform', `rotate(${rotation.toFixed(1)}deg)`); showNavigation( heading == null ? 'Norden oben · nächster Routenpunkt' : 'Nächster Routenpunkt', - `${Math.round(distance)} m` + `${distance} m` ); $('#navigation-footer').attr( 'aria-label', - `Nächster Routenpunkt in ${Math.round(distance)} Metern` + `Nächster Routenpunkt in ${distance} Metern` ); } + function updateNavigation(position) { + if (state.routeState !== 'running') return; + + const progress = updateRouteProgress(position); + const metrics = updatePoiIndicators(position); + const nextPoi = nearestPendingPoi(metrics); + + if (nextPoi) showPoiNavigation(position, nextPoi); + else showRoutePointNavigation(position, progress); + } + function updateHeading(heading) { if (state.deviceHeading == null) { state.deviceHeading = heading; @@ -347,26 +446,25 @@ function evaluatePosition(position) { state.position = position; - if (!state.route || state.routeState !== 'running') return; + if (!state.route) return; + const metrics = updatePoiIndicators(position); + if (state.routeState !== 'running') return; + + let nearest = nearestPendingPoi(metrics); updateNavigation(position); - let nearest = null; - state.route.pois.forEach(poi => { - if (state.triggered.has(poi.id)) return; - const distance = ns.Distance.meters(position, poi); - if (!nearest || distance < nearest.distance) nearest = { poi, distance }; - }); - $('#tracking-status').text( `GPS aktiv · Genauigkeit ${Math.round(position.accuracy)} m` - + (nearest ? ` · nächste Station ${Math.round(nearest.distance)} m` : '') + + (nearest ? ` · nächster POI ${Math.round(nearest.distance)} m` : ' · alle POIs erreicht') ); if (nearest && nearest.distance <= nearest.poi.triggerRadiusM) { state.triggered.add(nearest.poi.id); - if (navigator.vibrate) navigator.vibrate([120, 80, 120]); - showPoi(nearest.poi, true); + ns.Vibration.start(ns.Vibration.Patterns.ACTIVE_POI); + showPoi(nearest.poi); + nearest = nearestPendingPoi(metrics); + updateNavigation(position); } } @@ -399,7 +497,7 @@ } if (!orientationAvailable) { - $('#navigation-mode').text('Norden oben · nächster Routenpunkt'); + $('#navigation-mode').text('Norden oben · Navigation'); } } @@ -426,7 +524,7 @@ activate('[data-poi-id]', function () { const poi = state.route?.pois.find(item => item.id === Number($(this).data('poi-id'))); - if (poi) showPoi(poi, false); + if (poi) showPoi(poi); }); activate('[data-page-target]', function () { diff --git a/public/js/bootstrap-loader.js b/public/js/bootstrap-loader.js index 66b7dd6..b59b89c 100644 --- a/public/js/bootstrap-loader.js +++ b/public/js/bootstrap-loader.js @@ -70,7 +70,7 @@ initializeJqueryUi(); mark('jquery-ui', 'done'); - for (const module of ['config', 'api-client', 'distance', 'geolocation', 'orientation', 'slideshow', 'audio-player', 'app']) { + for (const module of ['config', 'api-client', 'distance', 'geolocation', 'orientation', 'slideshow', 'audio-player', 'vibration', 'app']) { await loadScript(`js/${module}.js`, () => Boolean(window.Wegwichtel)); } mark('modules', 'done'); diff --git a/public/js/vibration.js b/public/js/vibration.js new file mode 100644 index 0000000..b81f8a4 --- /dev/null +++ b/public/js/vibration.js @@ -0,0 +1,53 @@ +(function (ns) { + 'use strict'; + + const Patterns = Object.freeze({ + MICRO: 50, + MINI: 100, + SHORT: 200, + LONG: 2000, + ALARM: Object.freeze([100, 50, 100]), + POI: Object.freeze([2000, 200, 2000]), + ACTIVE_POI: Object.freeze([500, 300, 500]) + }); + + function supported() { + return typeof navigator !== 'undefined' && typeof navigator.vibrate === 'function'; + } + + function normalize(pattern) { + const selected = pattern ?? Patterns.LONG; + + if (Array.isArray(selected)) { + const values = selected.map(Number); + if (!values.length || values.some(value => !Number.isFinite(value) || value < 0)) { + throw new TypeError('Das Vibrationsmuster muss aus nichtnegativen Millisekunden bestehen.'); + } + return values; + } + + const duration = Number(selected); + if (!Number.isFinite(duration) || duration < 0) { + throw new TypeError('Die Vibrationsdauer muss eine nichtnegative Millisekundenangabe sein.'); + } + return duration; + } + + function start(pattern = Patterns.LONG) { + const normalized = normalize(pattern); + if (!supported()) return false; + return navigator.vibrate(normalized); + } + + function stop() { + if (!supported()) return false; + return navigator.vibrate(0); + } + + ns.Vibration = Object.freeze({ + Patterns, + isSupported: supported, + start, + stop + }); +}(window.Wegwichtel)); diff --git a/test/api-docs.test.js b/test/api-docs.test.js new file mode 100644 index 0000000..0a6ef84 --- /dev/null +++ b/test/api-docs.test.js @@ -0,0 +1,41 @@ +import assert from 'node:assert/strict'; +import fs from 'node:fs/promises'; +import path from 'node:path'; +import test from 'node:test'; + +const root = path.resolve(import.meta.dirname, '..'); +const read = relativePath => fs.readFile(path.join(root, relativePath), 'utf8'); + +test('complete REST API documentation is kept outside the README', async () => { + const readme = await read('README.md'); + const api = await read('docs/REST-API.md'); + + assert.match(readme, /\[.*REST-API.*\]\(docs\/REST-API\.md\)/i); + assert.doesNotMatch(readme, /^## REST-API$/m); + assert.doesNotMatch(readme, /curl .*\/api\//); + + for (const endpoint of [ + 'GET /api/health', + 'GET /api/routes', + 'GET /api/routes/:id', + 'GET /api/routes/:id/pois', + 'GET /api/pois/:id', + 'POST /api/routes', + 'PUT /api/routes/:id', + 'POST /api/routes/:id/append', + 'POST /api/routes/:id/pois', + 'PUT /api/pois/:id', + 'DELETE /api/routes/:id', + 'POST /api/routes/:id/restore' + ]) { + assert.ok(api.includes(endpoint), `missing API documentation: ${endpoint}`); + } + + for (const parameter of [ + 'lat', 'lon', 'radiusKm', 'includeDeleted', 'gpx', 'name', 'slug', + 'description', 'schoolName', 'title', 'triggerRadiusM', 'sequence', + 'audio', 'images' + ]) { + assert.match(api, new RegExp(`\\b${parameter}\\b`), `missing parameter documentation: ${parameter}`); + } +}); diff --git a/test/mobile-navigation-ui.test.js b/test/mobile-navigation-ui.test.js index e572438..c49da6f 100644 --- a/test/mobile-navigation-ui.test.js +++ b/test/mobile-navigation-ui.test.js @@ -60,7 +60,8 @@ test('mobile navigation footer contains a rotating SVG arrow and exact metre out assert.match(html, /