baustelle-pwa/lib/router.js

/* Mini Hash-Router für die PWA.
 * Routen:
 *   #/login
 *   #/orders
 *   #/orders/<id>
 *   #/orders/<id>/upload
 *   #/settings
 */
(function () {
    const routes = {};
    let currentRoute = null;

    function on(pattern, handler) {
        // Pattern: '/orders/:id'
        const re = new RegExp('^' + pattern.replace(/:[a-z]+/gi, '([^/]+)') + '$');
        const params = (pattern.match(/:([a-z]+)/gi) || []).map(s => s.slice(1));
        routes[pattern] = { re, params, handler };
    }

    async function navigate(hash) {
        if (!hash) hash = window.location.hash || '#/orders';
        const path = hash.replace(/^#/, '') || '/orders';
        for (const key of Object.keys(routes)) {
            const r = routes[key];
            const m = path.match(r.re);
            if (m) {
                const args = {};
                r.params.forEach((p, i) => { args[p] = decodeURIComponent(m[i + 1]); });
                currentRoute = { pattern: key, args };
                try {
                    await r.handler(args);
                } catch (e) {
                    console.error(e);
                    showToast('Fehler: ' + e.message, 'error');
                }
                return;
            }
        }
        // Default
        navigate('#/orders');
    }

    function go(hash) {
        if (hash !== window.location.hash) {
            window.location.hash = hash;
        } else {
            navigate(hash);
        }
    }

    window.addEventListener('hashchange', () => navigate());
    document.addEventListener('DOMContentLoaded', () => navigate());

    window.router = { on, navigate, go };
})();