@noe-teritorio/opening_hours 3.14.1

package/site/js/helpers.js

@@ -0,0 +1,735 @@
+/**
+ * SPDX-FileCopyrightText: © 2014 Robin Schneider <ypid@riseup.net>
+ *
+ * SPDX-License-Identifier: LGPL-3.0-only
+ */
+// Import dependencies
+import i18next from '../../node_modules/i18next/dist/esm/i18next.js';
+import { OpeningHoursTable } from './opening_hours_table.js';
+import { mapCountryToLanguage } from './countryToLanguageMapping.js';
+import { updateTimeButtonLabels } from './main.js';
+import { YoHoursChecker } from './yohours_model.js';
+
+// Access global variables set by main.js or UMD scripts
+const { opening_hours, default_lat, default_lon } = window;
+
+// Export date/time state
+export let currentDateTime = {
+    year: 2013,
+    month: 0,  // January (0-indexed)
+    day: 2,
+    hour: 22,
+    minute: 21
+};
+
+/* Constants {{{ */
+const nominatim_api_url = 'https://nominatim.openstreetmap.org/reverse';
+// let nominatim_api_url = 'https://open.mapquestapi.com/nominatim/v1/reverse.php';
+
+const evaluation_tool_colors = {
+    'ok': '#ADFF2F',
+    'warn': '#FFA500',
+    'error': '#DEB887',
+};
+
+const OSM_MAX_VALUE_LENGTH = 255;
+/* }}} */
+
+/**
+ * Load nominatim_data in JOSM using the JOSM remote control API. {{{
+ * @param {string} url_param - Query parameter sent to the JOSM remote control API.
+ * @returns {void}
+ */
+export function josm(url_param) {
+    fetch(`http://localhost:8111/${url_param}`)
+        .then(response => {
+            if (!response.ok) {
+                alert(i18next.t('texts.JOSM remote conn error'));
+            }
+        })
+        .catch(() => {
+            alert(i18next.t('texts.JOSM remote conn error'));
+        });
+}
+// }}}
+
+/**
+ * ISO 8601 calendar week number. {{{
+ * @param {Date} date - Date for which to calculate the week number.
+ * @returns {number} ISO calendar week number.
+ */
+export function getISOWeekNumber(date) {
+    const millisecondsPerDay = 24 * 60 * 60 * 1000;
+    const utcDate = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
+
+    // ISO week uses Monday=1..Sunday=7 and anchors weeks on Thursday.
+    const isoDay = utcDate.getUTCDay() || 7;
+    utcDate.setUTCDate(utcDate.getUTCDate() + 4 - isoDay);
+
+    const isoYearStart = new Date(Date.UTC(utcDate.getUTCFullYear(), 0, 1));
+    const dayOfYear = Math.floor((utcDate - isoYearStart) / millisecondsPerDay) + 1;
+    return Math.ceil(dayOfYear / 7);
+}
+// }}}
+
+/**
+ * Reverse geocode coordinates to get localized place names from Nominatim.
+ *
+ * The names of countries and states are localized in OSM and opening_hours.js
+ * (holidays) so we need to get the localized names from Nominatim as well.
+ * @param {number} lat - Latitude
+ * @param {number} lon - Longitude
+ * @param {string} preferredLanguage - Preferred language code (e.g., 'de', 'en')
+ * @returns {Promise<object>} Nominatim response with address data
+ */
+async function reverseGeocodeLocation(lat, lon, preferredLanguage) {
+    // Cached response for default coordinates to avoid queries on initial load
+    if (lat === 48.7769 && lon === 9.1844) {
+        return { place_id: '159221147', licence: 'Data © OpenStreetMap contributors, ODbL 1.0. https://www.openstreetmap.org/copyright', osm_type: 'relation', osm_id: '62611', lat: '48.6296972', lon: '9.1949534', display_name: 'Baden-Württemberg, Deutschland', address: { state: 'Baden-Württemberg', country: 'Deutschland', country_code: 'de' }, boundingbox: ['47.5324787', '49.7912941', '7.5117461', '10.4955731'] };
+    }
+
+    const params = new URLSearchParams({
+        format: 'json',
+        lat: String(lat),
+        lon: String(lon),
+        zoom: '5',
+        addressdetails: '1',
+        email: 'ypid23@aol.de',
+        'accept-language': preferredLanguage
+    });
+
+    async function fetchNominatim() {
+        const response = await fetch(`${nominatim_api_url}?${params}`);
+        if (!response.ok) {
+            throw new Error(`Nominatim request failed: ${response.status}`);
+        }
+        return response.json();
+    }
+
+    let data = await fetchNominatim();
+
+    // Refetch with localized language if country differs from preferred language
+    const countryCode = data.address?.country_code;
+    if (countryCode && countryCode !== preferredLanguage) {
+        params.set('accept-language', mapCountryToLanguage(countryCode));
+        data = await fetchNominatim();
+    }
+
+    return data;
+}
+
+/**
+ * Toggle examples on and off. {{{
+ * @param {string} control - ID of the element to toggle.
+ * @returns {void}
+ */
+export function toggle(control){
+    const elem = document.getElementById(control);
+
+    if (elem.style.display === 'none') {
+        elem.style.display = 'block';
+    } else {
+        elem.style.display = 'none';
+    }
+}
+/* }}} */
+
+/**
+ * Open the browser prompt used to copy text to the clipboard.
+ * @param {string} text - Text to display for copying.
+ * @returns {void}
+ */
+export function copyToClipboard(text) {
+    window.prompt('Copy to clipboard: Ctrl+C, Enter', text);
+}
+
+// Internal state for geocoding and date
+let lat, lon, string_lat, string_lon, nominatim;
+let date;
+
+/* Helper functions for Evaluate {{{ */
+
+function getFragmentIdentifier(selectorType) {
+    switch(selectorType) {
+        case '24/7':
+            return 'selector_sequence';
+        case 'state':
+            return 'section:rule_modifier';
+        case 'comment':
+            return 'comment';
+        default:
+            return `selector:${selectorType}`;
+    }
+}
+
+function generateRuleSeparatorElement(ruleSeparator) {
+    const separator = createElement('span', 'rule_separator');
+    separator.title = i18next.t('texts.rule separator ' + ruleSeparator);
+
+    const link = createElement('a', 'specification', ruleSeparator);
+    link.target = '_blank';
+    link.href = `${window.specification_url}#section:rule_separators`;
+    separator.append(link);
+    return separator;
+}
+
+function generateSelectorElement(selectorType, selectorValue) {
+    const fragmentIdentifier = getFragmentIdentifier(selectorType);
+    const translationKey = selectorType.match(/(?:state|comment)/) ? 'modifier' : 'selector';
+
+    const selector = createElement('span', selectorType);
+    selector.title = i18next.t(`words.${translationKey}`, { name: selectorType });
+
+    const link = createElement('a', 'specification', selectorValue);
+    link.target = '_blank';
+    link.href = `${window.specification_url}#${fragmentIdentifier}`;
+    selector.append(link);
+    return selector;
+}
+
+/**
+ * Generate HTML explanation for prettified opening hours value.
+ *
+ * Converts the internal rule structure into human-readable HTML with links
+ * to the specification for each selector type and rule separator.
+ * @param {Array} prettifiedValueArray - Array containing [rules, ruleSeparators]
+ * @returns {DocumentFragment} DOM fragment with formatted value explanation
+ */
+function generateValueExplanationFragment(prettifiedValueArray) {
+    const [rules, ruleSeparators] = prettifiedValueArray;
+    const fragment = document.createDocumentFragment();
+    fragment.append(i18next.t('texts.prettified value for displaying'), ':');
+    fragment.append(document.createElement('br'));
+
+    const explanation = createElement('p', 'value_explanation');
+
+    for (const [ruleIndex, selectors] of rules.entries()) {
+        if (ruleIndex !== 0) {
+            const separatorData = ruleSeparators[ruleIndex];
+            const ruleSeparator = separatorData[1]
+                ? ' ||'
+                : (separatorData[0][0][1] === 'rule separator' ? ',' : ';');
+
+            explanation.append(generateRuleSeparatorElement(ruleSeparator));
+            explanation.append(document.createElement('br'));
+        }
+
+        const rule = createElement('span', 'one_rule');
+
+        for (const [selectorIndex, selector] of selectors.entries()) {
+            const [typeArray, selectorValue] = selector;
+            const selectorType = typeArray[2];
+
+            rule.append(generateSelectorElement(selectorType, selectorValue));
+
+            const isLastSelector = selectorIndex === selectors.length - 1;
+            if (!isLastSelector) {
+                rule.append(' ');
+            }
+        }
+
+        explanation.append(rule);
+    }
+
+    fragment.append(explanation);
+    return fragment;
+}
+
+function generateResultsElement(matchingRule) {
+    return createElement('div', 'matching-rule-card',
+        createElement('div', 'status-label', i18next.t('texts.MatchingRule')),
+        createElement('div', 'matching-rule-value', matchingRule)
+    );
+}
+
+/**
+ * Generate HTML display for deviation information between two opening hours values.
+ * @param {object} oh1 - The first opening_hours instance
+ * @param {object} oh2 - The second opening_hours instance
+ * @param {object} deviationInfo - Deviation data from isEqualTo comparison
+ * @returns {string} HTML string with formatted deviation information
+ */
+function generateDeviationHTML(oh1, oh2, deviationInfo) {
+    const parts = ['<div class="diff-deviation">'];
+
+    // Show which rules are matching
+    if (typeof deviationInfo.matching_rule !== 'undefined' || typeof deviationInfo.matching_rule_other !== 'undefined') {
+        parts.push('<div class="diff-rules">');
+        parts.push(`<strong>${i18next.t('texts.Affected rules')}:</strong> `);
+        if (typeof deviationInfo.matching_rule !== 'undefined') {
+            parts.push(`${i18next.t('texts.Original')}: ${i18next.t('texts.Rule')} ${deviationInfo.matching_rule + 1}`);
+        }
+        if (typeof deviationInfo.matching_rule_other !== 'undefined') {
+            parts.push(` / ${i18next.t('texts.Comparison')}: ${i18next.t('texts.Rule')} ${deviationInfo.matching_rule_other + 1}`);
+        }
+        parts.push('</div>');
+    }
+
+    // Show time-based deviations with actual values
+    if (deviationInfo.deviation_for_time && typeof deviationInfo.deviation_for_time === 'object') {
+        for (const [timeCode, deviations] of Object.entries(deviationInfo.deviation_for_time)) {
+            const deviationDate = new Date(parseInt(timeCode));
+            const timeString = deviationDate.toLocaleString(i18next.language, {
+                year: 'numeric',
+                month: '2-digit',
+                day: '2-digit',
+                hour: '2-digit',
+                minute: '2-digit',
+                hour12: false
+            });
+
+            // Build readable comparison lines
+            const line1Parts = [];
+            const line2Parts = [];
+
+            if (deviations.includes('getState') || deviations.includes('getDate')) {
+                const state1 = oh1.getState(deviationDate);
+                const state2 = oh2.getState(deviationDate);
+                const unknown1 = oh1.getUnknown(deviationDate);
+                const unknown2 = oh2.getUnknown(deviationDate);
+
+                const stateText1 = unknown1 ? i18next.t('words.unknown') : i18next.t(`words.${state1 ? 'open' : 'closed'}`);
+                const stateText2 = unknown2 ? i18next.t('words.unknown') : i18next.t(`words.${state2 ? 'open' : 'closed'}`);
+
+                line1Parts.push(stateText1);
+                line2Parts.push(stateText2);
+            }
+
+            if (deviations.includes('getComment')) {
+                const comment1 = oh1.getComment(deviationDate);
+                const comment2 = oh2.getComment(deviationDate);
+
+                if (comment1) line1Parts.push(`"${comment1}"`);
+                if (comment2) line2Parts.push(`"${comment2}"`);
+            }
+
+            const comparisonHTML = `
+                <div class="diff-times">
+                    <strong>${i18next.t('texts.Deviation at')} ${timeString}</strong><br>
+                    ${i18next.t('texts.Original')}: ${line1Parts.join(', ')}<br>
+                    ${i18next.t('texts.Comparison')}: ${line2Parts.join(', ')}
+                </div>
+            `;
+
+            parts.push(comparisonHTML);
+        }
+    }
+
+    // Show raw JSON for developers
+    const deviationJson = JSON.stringify(deviationInfo);
+    parts.push(`<div class="diff-raw"><code>${deviationJson}</code></div>`);
+
+    parts.push('</div>');
+    return parts.join('');
+}
+
+/**
+ * Compare opening hours value with a diff value and update UI accordingly.
+ *
+ * Compares the current opening hours object with another value and sets
+ * the background color of the diff input field to indicate the result:
+ * - Green (ok): Values are equivalent
+ * - Orange (warn): Values differ, shows deviation details in #compare-result
+ * - Brown (error): Diff value failed to parse
+ * @param {object} oh - The opening_hours instance to compare
+ * @param {string} diffValue - The opening hours value to compare against
+ * @param {number} mode - The parsing mode for opening hours
+ * @param {Date} startDate - The date to start comparison from
+ */
+function handleDiffComparison(oh, diffValue, mode, startDate) {
+    const diffValueElement = document.getElementById('diff_value');
+    const compareResult = document.getElementById('compare-result');
+
+    if (diffValue.length === 0) {
+        diffValueElement.style.backgroundColor = '';
+        compareResult.innerHTML = '';
+        return;
+    }
+
+    let comparisonOh;
+    let comparisonResult;
+    try {
+        comparisonOh = new opening_hours(diffValue, nominatim, {
+            'mode': mode,
+            'warnings_severity': 7,
+            'locale': i18next.language
+        });
+        comparisonResult = oh.isEqualTo(comparisonOh, startDate);
+    } catch {
+        diffValueElement.style.backgroundColor = evaluation_tool_colors.error;
+        compareResult.innerHTML = '';
+        return;
+    }
+
+    if (!Array.isArray(comparisonResult)) {
+        compareResult.innerHTML = '';
+        return;
+    }
+
+    const [isEqual, deviationInfo] = comparisonResult;
+
+    if (isEqual) {
+        diffValueElement.style.backgroundColor = evaluation_tool_colors.ok;
+        compareResult.innerHTML = '';
+    } else {
+        diffValueElement.style.backgroundColor = evaluation_tool_colors.warn;
+        compareResult.innerHTML = generateDeviationHTML(oh, comparisonOh, deviationInfo);
+    }
+}
+
+function generateJosmHTML(value) {
+    const josmUrl = 'import?url=' + encodeURIComponent(
+        `https://overpass-api.de/api/xapi_meta?*[opening_hours=${value}]`
+    );
+
+    return `<div class="action-description">${i18next.t('texts.load osm objects')}</div>` +
+           `<div><a href="#" class="josm-link" data-url="${josmUrl}">JOSM</a></div>`;
+}
+
+function generateYoHoursHTML(value, crashed) {
+    const yoHoursChecker = new YoHoursChecker();
+    if (!crashed && yoHoursChecker.canRead(value)) {
+        const yohoursUrl = `https://projets.pavie.info/yohours/?oh=${value}`;
+        return `<div class="action-description">${i18next.t('texts.yohours description')}</div>` +
+               `<div><a href="${yohoursUrl}" target="_blank">YoHours</a></div>`;
+    }
+
+    return `<div class="action-description">${i18next.t('texts.yohours description')}</div>` +
+           `<div class="yohours-warning">${i18next.t('texts.yohours incompatible')}</div>`;
+}
+
+function generatePrettifiedValueFragment(prettified) {
+    // Build translation with placeholder for the link
+    const translatedText = i18next.t('texts.prettified value', { copyFunc: '__COPY_LINK__' });
+
+    const section = createElement('div', 'prettified-value-section');
+    const description = createElement('p');
+    const linkMatch = translatedText.match(/^(.*?)<a\b[^>]*>(.*?)<\/a>(.*)$/s);
+    if (linkMatch) {
+        const [, beforeLink, linkText, afterLink] = linkMatch;
+        const link = createElement('a', 'copy-prettified-value', linkText);
+        link.href = '#';
+        link.dataset.value = prettified;
+        description.append(beforeLink, link, afterLink, ':');
+    } else {
+        description.append(translatedText, ':');
+    }
+    section.append(description);
+
+    const container = createElement('div', 'prettified-value-container');
+    const valueDisplay = createElement('code', 'prettified-value-display', prettified);
+    valueDisplay.dataset.value = prettified;
+    container.append(valueDisplay);
+
+    const copyButton = createElement('button', 'copy-btn copy-prettified-btn', '📋');
+    copyButton.type = 'button';
+    copyButton.dataset.value = prettified;
+    copyButton.title = i18next.t('texts.copy');
+    container.append(copyButton);
+    section.append(container);
+    return section;
+}
+
+function createElement(tagName, className, ...children) {
+    const element = document.createElement(tagName);
+    if (className) element.className = className;
+    if (children.length) element.append(...children);
+    return element;
+}
+
+function createMessageBox(className, messageContent) {
+    return createElement('div', className,
+        i18next.t('texts.filter.error'),
+        createElement('div', 'warning_error_message', messageContent)
+    );
+}
+
+function generateWarningsFragment(warnings) {
+    if (warnings.length === 0) return document.createDocumentFragment();
+
+    const entries = document.createDocumentFragment();
+
+    for (const { message, value, position } of warnings) {
+        const entry = createElement('div', 'warning-entry');
+
+        if (position !== null && typeof value === 'string') {
+            const context = createElement('div', 'warning-context');
+            const valueCode = createElement('code');
+            valueCode.append(
+                value.substring(0, position),
+                createElement('span', 'warning-marker'),
+                value.substring(position)
+            );
+            context.append(valueCode);
+            entry.append(context);
+        }
+
+        entry.append(createElement('div', 'warning-message', message));
+        entries.append(entry);
+    }
+
+    const fragment = document.createDocumentFragment();
+    fragment.append(createMessageBox('warning', entries));
+    return fragment;
+}
+
+function generateValueTooLongFragment(prettified, value) {
+    const fragment = document.createDocumentFragment();
+    if (prettified.length <= OSM_MAX_VALUE_LENGTH) return fragment;
+
+    fragment.append(createMessageBox('warning', i18next.t('texts.value to long for osm', {
+        pretLength: prettified.length,
+        valLength: value.length,
+        maxLength: OSM_MAX_VALUE_LENGTH
+    })));
+    return fragment;
+}
+
+/* }}} */
+
+/**
+ * Evaluate the current opening-hours expression and update the page.
+ * @param {number} [offset] - Offset used when evaluating the expression; defaults to 0.
+ * @param {boolean} [reset] - Whether to reset the current evaluation state.
+ * @returns {Promise<void>}
+ */
+export async function Evaluate (offset = 0, reset) {
+    if (document.forms.check.elements['lat'].value !== string_lat || document.forms.check.elements['lon'].value !== string_lon) {
+        string_lat = document.forms.check.elements['lat'].value;
+        string_lon = document.forms.check.elements['lon'].value;
+        lat = parseFloat(string_lat);
+        lon = parseFloat(string_lon);
+        if (typeof lat !== 'number' || typeof lon !== 'number') {
+            if (typeof lat !== 'number') {
+                document.forms.check.elements['lat'].value = default_lat;
+            }
+            if (typeof lon !== 'number') {
+                document.forms.check.elements['lon'].value = default_lon;
+            }
+            console.log('Please enter numbers for latitude and longitude.');
+            return;
+        }
+        try {
+            nominatim = await reverseGeocodeLocation(
+                lat,
+                lon,
+                mapCountryToLanguage(i18next.language)
+            );
+            document.forms.check.elements['cc'].value = nominatim.address.country_code;
+            document.forms.check.elements['state'].value = nominatim.address.state;
+            Evaluate();
+        } catch (error) {
+            /* Set fallback Nominatim answer to allow using the evaluation tool even without Nominatim. */
+            console.error('Reverse geocoding failed:', error);
+            alert('Reverse geocoding of the coordinates using Nominatim was not successful. The evaluation of features of the opening_hours specification which depend this information will be unreliable. Otherwise, this tool will work as expected using a fallback answer. You might want to check your browser settings to fix this.');
+            nominatim = {'place_id':'44651229','licence':'Data \u00a9 OpenStreetMap contributors, ODbL 1.0. https://www.openstreetmap.org/copyright','osm_type':'way','osm_id':'36248375','lat':'49.5400039','lon':'9.7937133','display_name':'K 2847, Lauda-K\u00f6nigshofen, Main-Tauber-Kreis, Regierungsbezirk Stuttgart, Baden-W\u00fcrttemberg, Germany, European Union','address':{'road':'K 2847','city':'Lauda-K\u00f6nigshofen','county':'Main-Tauber-Kreis','state_district':'Regierungsbezirk Stuttgart','state':'Baden-W\u00fcrttemberg','country':'Germany','country_code':'de','continent':'European Union'}};
+            document.forms.check.elements['cc'].value = nominatim.address.country_code;
+            document.forms.check.elements['state'].value = nominatim.address.state;
+            Evaluate();
+        }
+        return;
+    }
+
+    date = reset
+        ? new Date()
+        : new Date(
+            currentDateTime.year,
+            currentDateTime.month,
+            currentDateTime.day,
+            currentDateTime.hour,
+            currentDateTime.minute,
+            offset
+        );
+
+    // Update module state
+    currentDateTime = {
+        year: date.getFullYear(),
+        month: date.getMonth(),
+        day: date.getDate(),
+        hour: date.getHours(),
+        minute: date.getMinutes()
+    };
+
+    // Update time button labels with current values
+    updateTimeButtonLabels(date);
+
+    // Cache DOM elements
+    const showTimeTable = document.getElementById('show_time_table');
+    const showWarningsOrErrors = document.getElementById('show_warnings_or_errors');
+    const showPrettifiedValue = document.getElementById('show_prettified_value');
+    const showResults = document.getElementById('show_results');
+    const actionJosm = document.getElementById('action-josm');
+    const actionYoHours = document.getElementById('action-yohours');
+
+    // Parse opening hours value
+    let crashed = false;
+    const value = document.forms.check.elements['expression'].value;
+    const diffValue = document.forms.check.elements['diff_value'].value;
+    const mode = parseInt(document.getElementById('mode').selectedIndex);
+    let oh;
+    let it;
+
+    try {
+        oh = new opening_hours(value, nominatim, {
+            'mode': mode,
+            'warnings_severity': 7,
+            'locale': i18next.language
+        });
+        it = oh.getIterator(date);
+    } catch (err) {
+        crashed = err;
+        showWarningsOrErrors.replaceChildren(createMessageBox('error', crashed));
+        showPrettifiedValue.innerHTML = '';
+        showTimeTable.innerHTML = '';
+        showResults.innerHTML = '';
+    }
+
+    // Populate action links
+    actionJosm.innerHTML = generateJosmHTML(value);
+    actionYoHours.innerHTML = generateYoHoursHTML(value, crashed);
+
+    if (!crashed) {
+        const prettified = oh.prettifyValue({});
+        const prettifiedValueArray = oh.prettifyValue({
+            get_internals: true,
+        });
+
+        // Handle diff comparison
+        handleDiffComparison(oh, diffValue, mode, date);
+
+        // Display value explanation
+        showWarningsOrErrors.replaceChildren(generateValueExplanationFragment(prettifiedValueArray));
+        showPrettifiedValue.innerHTML = '';
+
+        // Display matching rule
+        const ruleIndex = it.getMatchingRule();
+        const matchingRule = typeof ruleIndex === 'undefined'
+            ? i18next.t('words.none')
+            : oh.prettifyValue({ 'rule_index': ruleIndex });
+        showResults.replaceChildren(generateResultsElement(matchingRule));
+
+        // Show prettified value if different from input
+        if (prettified !== value) {
+            showPrettifiedValue.append(generatePrettifiedValueFragment(prettified));
+        }
+
+        // Append warnings if any
+        const warnings = oh.getStructuredWarnings();
+        showWarningsOrErrors.append(generateWarningsFragment(warnings));
+
+        // Check value length
+        showWarningsOrErrors.append(generateValueTooLongFragment(prettified, value));
+
+        // Generate time table
+        const publicHolidayContext = oh.getPublicHolidayContext(date);
+        showTimeTable.innerHTML = OpeningHoursTable.drawTableAndComments(oh, it, date, warnings, publicHolidayContext);
+    }
+
+    updatePermalinkHref();
+}
+
+/**
+ * Evaluate an example expression from a page element.
+ * @param {HTMLElement} element - Element containing the expression.
+ * @returns {boolean} False to prevent the default element action.
+ */
+export function EX (element) {
+    newValue(element.innerHTML);
+    return false;
+}
+
+/**
+ * Set and evaluate a new opening-hours expression.
+ * @param {string} value - Opening-hours expression to evaluate.
+ * @returns {void}
+ */
+export function newValue(value) {
+    document.forms.check.elements['expression'].value = value;
+    Evaluate();
+}
+
+function updatePermalinkHref() {
+    const params = new URLSearchParams({
+        EXP: document.getElementById('expression').value,
+        lat: document.getElementById('lat').value,
+        lon: document.getElementById('lon').value,
+        mode: document.getElementById('mode').selectedIndex
+    });
+
+    const diffValue = document.getElementById('diff_value').value;
+    if (diffValue !== '') {
+        params.set('diff_value', diffValue);
+    }
+
+    const baseUrl = `${location.origin}${location.pathname}`;
+
+    // Permalink with timestamp
+    const paramsWithTimestamp = new URLSearchParams(params);
+    paramsWithTimestamp.set('DATE', date.getTime());
+    document.getElementById('permalink-link-with-timestamp').href = `${baseUrl}?${paramsWithTimestamp}`;
+
+    // Permalink without timestamp
+    document.getElementById('permalink-link-without-timestamp').href = `${baseUrl}?${params}`;
+}
+
+/**
+ * Request the user's current geolocation and update the form.
+ * @returns {void}
+ */
+export function setCurrentPosition() {
+    if(navigator.geolocation) {
+        navigator.geolocation.getCurrentPosition(onPositionUpdate);
+    }
+}
+
+function onPositionUpdate(position) {
+    const lat = position.coords.latitude;
+    const lng = position.coords.longitude;
+    document.getElementById('lat').value = lat;
+    document.getElementById('lon').value = lng;
+    Evaluate();
+    console.log('Current position: ' + lat + ' ' + lng);
+}
+
+window.onload = function () {
+    const params = new URLSearchParams(location.search);
+    const customCoords = params.has('lat') || params.has('lon');
+
+    if (params.has('EXP')) {
+        document.forms.check.elements['expression'].value = params.get('EXP');
+    }
+    if (params.has('diff_value')) {
+        document.forms.check.elements['diff_value'].value = params.get('diff_value');
+    }
+    if (params.has('lat')) {
+        document.forms.check.elements['lat'].value = params.get('lat');
+    }
+    if (params.has('lon')) {
+        document.forms.check.elements['lon'].value = params.get('lon');
+    }
+    if (params.has('mode')) {
+        document.forms.check.elements['mode'].value = params.get('mode');
+    }
+    if (params.has('DATE')) {
+        try {
+            const loadedDate = new Date(parseInt(params.get('DATE')));
+            currentDateTime = {
+                year: loadedDate.getFullYear(),
+                month: loadedDate.getMonth(),
+                day: loadedDate.getDate(),
+                hour: loadedDate.getHours(),
+                minute: loadedDate.getMinutes()
+            };
+            Evaluate(0, false);
+        } catch (err) {
+            console.error(err);
+            Evaluate(0, true);
+        }
+    } else {
+        Evaluate(0, true);
+    }
+    if (navigator.geolocation && !customCoords) {
+        navigator.geolocation.getCurrentPosition(onPositionUpdate);
+    }
+};
+/* }}} */