opening_hours 3.10.0 → 3.11.0

package/site/js/helpers.js

@@ -1,4 +1,21 @@
-/* global $, , default_lat, default_lon, i18next, jQuery, mapCountryToLanguage, opening_hours, OpeningHoursTable, specification_url, YoHoursChecker */
+// Import dependencies
+import i18next from '../../node_modules/i18next/dist/esm/i18next.bundled.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';
@@ -9,27 +26,28 @@ const evaluation_tool_colors = {
     'warn': '#FFA500',
     'error': '#DEB887',
 };
+
+const OSM_MAX_VALUE_LENGTH = 255;
 /* }}} */
 
 // load nominatim_data in JOSM {{{
-// Using a different way to load stuff in JOSM than https://github.com/rurseekatze/OpenLinkMap/blob/master/js/small.js
+// Using a different way to load stuff in JOSM than https://github.com/vibrog/OpenLinkMap/
 // prevent josm remote plugin of showing message
-// FIXME: Warning in console. Encoding stuff.
-// eslint-disable-next-line no-unused-vars
-function josm(url_param) {
-    const xhr = new XMLHttpRequest();
-    xhr.open('GET', 'http://localhost:8111/' + url_param, true);      // true makes this call asynchronous
-    xhr.onreadystatechange = function () {    // need eventhandler since our call is async
-        if ( xhr.status !== 200 ) {
+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'));
-        }
-    };
-    xhr.send(null);
+        });
 }
 // }}}
 
 // add calculation for calendar week to date {{{
-function dateAtWeek(date, week) {
+export function dateAtWeek(date, week) {
     const minutes_in_day = 60 * 24;
     const msec_in_day    = 1000 * 60 * minutes_in_day;
     const msec_in_week   = msec_in_day * 7;
@@ -40,63 +58,55 @@ function dateAtWeek(date, week) {
 }
 // }}}
 
-/*
+/**
+ * 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
  */
-function reverseGeocodeLocation(query, guessed_language_for_location, on_success, on_error) {
-    if (typeof on_error === 'undefined') {
-        on_error = function() { };
+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'] };
     }
 
-    if (query === '&lat=48.7769&lon=9.1844') {
-        /* Cached response to avoid two queries for each usage of the tool. */
-        return on_success({'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();
     }
 
-    const nominatim_api_url_template_query = nominatim_api_url
-        + '?format=json'
-        + query
-        + '&zoom=5'
-        + '&addressdetails=1'
-        + '&email=ypid23@aol.de';
+    let data = await fetchNominatim();
 
-    let nominatim_api_url_query = nominatim_api_url_template_query;
-    if (typeof accept_lanaguage === 'string') {
-        nominatim_api_url_query += '&accept-language=' + guessed_language_for_location;
+    // 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();
     }
 
-    $.getJSON(nominatim_api_url_query, function(nominatim_data) {
-        // console.log(JSON.stringify(nominatim_data, null, '\t'));
-        if (nominatim_data.address.country_code === guessed_language_for_location) {
-            on_success(nominatim_data);
-        } else {
-            nominatim_api_url_query += '&accept-language=' + mapCountryToLanguage(nominatim_data.address.country_code);
-            $.getJSON(nominatim_api_url_query, function(nominatim_data) {
-                on_success(nominatim_data);
-            }).error(on_error);
-        }
-    }).error(on_error);
-}
-
-// eslint-disable-next-line no-unused-vars
-function submitenter(myfield,e) {
-    Evaluate();
-    // let keycode;
-    // if (window.event) keycode = window.event.keyCode;
-    // else if (e) keycode = e.which;
-    // else return true;
-
-    // if (keycode === 13) {
-    //     Evaluate();
-    //     return false;
-    // } else
-    //     return true;
+    return data;
 }
 
 /* JS for toggling examples on and off {{{ */
-// eslint-disable-next-line no-unused-vars
-function toggle(control){
+export function toggle(control){
     const elem = document.getElementById(control);
 
     if (elem.style.display === 'none') {
@@ -107,19 +117,296 @@ function toggle(control){
 }
 /* }}} */
 
-// eslint-disable-next-line no-unused-vars
-function copyToClipboard(text) {
+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;
 
-function Evaluate (offset, reset) {
-    if (typeof offset === 'undefined') {
-        offset = 0;
+/* 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 generateRuleSeparatorHTML(ruleSeparator) {
+    return `<span title="${i18next.t('texts.rule separator ' + ruleSeparator)}" class="rule_separator">` +
+           `<a target="_blank" class="specification" href="${window.specification_url}#section:rule_separators">${ruleSeparator}</a></span><br>`;
+}
+
+function generateSelectorHTML(selectorType, selectorValue) {
+    const fragmentIdentifier = getFragmentIdentifier(selectorType);
+    const translationKey = selectorType.match(/(?:state|comment)/) ? 'modifier' : 'selector';
+
+    return `<span title="${i18next.t(`words.${translationKey}`, { name: selectorType })}" class="${selectorType}">` +
+           `<a target="_blank" class="specification" href="${window.specification_url}#${fragmentIdentifier}">${selectorValue}</a></span>`;
+}
+
+/**
+ * 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 {string} HTML string with formatted value explanation
+ */
+function generateValueExplanation(prettifiedValueArray) {
+    const [rules, ruleSeparators] = prettifiedValueArray;
+    const parts = [
+        `${i18next.t('texts.prettified value for displaying')}:<br />`,
+        '<p class="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' ? ',' : ';');
+
+            parts.push(generateRuleSeparatorHTML(ruleSeparator));
+        }
+
+        parts.push('<span class="one_rule">');
+
+        for (const [selectorIndex, selector] of selectors.entries()) {
+            const [typeArray, selectorValue] = selector;
+            const selectorType = typeArray[2];
+
+            parts.push(generateSelectorHTML(selectorType, selectorValue));
+
+            const isLastSelector = selectorIndex === selectors.length - 1;
+            if (!isLastSelector) {
+                parts.push(' ');
+            }
+        }
+
+        parts.push('</span>');
+    }
+
+    parts.push('</p></div>');
+    return parts.join('');
+}
+
+function generateResultsHTML() {
+    return `
+        <div class="matching-rule-card">
+            <div class="status-label">${i18next.t('texts.MatchingRule')}</div>
+            <div class="matching-rule-value" id="matching-rule-display"></div>
+        </div>
+    `;
+}
+
+/**
+ * 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 generatePrettifiedValueHTML(prettified) {
+    const escapedValue = prettified.replace(/"/g, '&quot;');
+
+    // Build translation with placeholder for the link
+    const translatedText = i18next.t('texts.prettified value', { copyFunc: '__COPY_LINK__' });
+    const linkHtml = `<a href="#" class="copy-prettified-value" data-value="${escapedValue}">`;
+    const finalText = translatedText.replace('<a href="__COPY_LINK__">', linkHtml);
+
+    const copyTooltip = i18next.t('texts.copy');
+
+    return `<div class="prettified-value-section">
+        <p>${finalText}:</p>
+        <div class="prettified-value-container">
+            <code class="prettified-value-display" data-value="${escapedValue}">${prettified}</code>
+            <button type="button" class="copy-btn copy-prettified-btn" data-value="${escapedValue}" title="${copyTooltip}">📋</button>
+        </div>
+    </div>`;
+}
+
+function generateWarningsHTML(warnings) {
+    if (warnings.length === 0) return '';
+
+    return `<div class="warning">${i18next.t('texts.filter.error')}` +
+           `<div class="warning_error_message">${warnings.join('\n')}</div></div>`;
+}
+
+function generateValueTooLongHTML(prettified, value) {
+    if (prettified.length <= OSM_MAX_VALUE_LENGTH) return '';
+
+    return `<div class="warning">${i18next.t('texts.filter.error')}` +
+           `<div class="warning_error_message">${i18next.t('texts.value to long for osm', {
+               pretLength: prettified.length,
+               valLength: value.length,
+               maxLength: OSM_MAX_VALUE_LENGTH
+           })}</div></div>`;
+}
+
+/* }}} */
 
+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;
@@ -135,59 +422,67 @@ function Evaluate (offset, reset) {
             console.log('Please enter numbers for latitude and longitude.');
             return;
         }
-        reverseGeocodeLocation(
-            '&lat=' + lat + '&lon=' + lon,
-            mapCountryToLanguage(i18next.language),
-            function(nominatim_data) {
-                nominatim = nominatim_data;
-                document.forms.check.elements['cc'].value    = nominatim.address.country_code;
-                document.forms.check.elements['state'].value = nominatim.address.state;
-                Evaluate();
-            },
-            function() {
-                /* Set fallback Nominatim answer to allow using the evaluation tool even without Nominatim. */
-                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();
-            }
-        );
+        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(
-            document.forms.check.elements['yyyy'].value,
-            document.forms.check.elements['mm'].selectedIndex,
-            document.forms.check.elements['dd'].value,
-            document.forms.check.elements['HH'].value,
-            parseInt(document.forms.check.elements['MM'].value),
+            currentDateTime.year,
+            currentDateTime.month,
+            currentDateTime.day,
+            currentDateTime.hour,
+            currentDateTime.minute,
             offset
         );
 
-    function u2 (v) { return v>=0 && v<10 ? '0'+v : v; }
+    // Update module state
+    currentDateTime = {
+        year: date.getFullYear(),
+        month: date.getMonth(),
+        day: date.getDate(),
+        hour: date.getHours(),
+        minute: date.getMinutes()
+    };
 
-    document.forms.check.elements['yyyy'].value       = date.getFullYear();
-    document.forms.check.elements['mm'].selectedIndex = date.getMonth();
-    document.forms.check.elements['dd'].value         = u2(date.getDate());
-    document.forms.check.elements['HH'].value         = u2(date.getHours());
-    document.forms.check.elements['MM'].value         = u2(date.getMinutes());
-    document.forms.check.elements['wday'].value       = date.toLocaleString(i18next.language, {weekday: 'short'});
-    document.forms.check.elements['week'].value       = 'W'+u2(dateAtWeek(date, 0) + 1);
+    // Update time button labels with current values
+    updateTimeButtonLabels(date);
 
-    const show_time_table         = document.getElementById('show_time_table');
-    const show_warnings_or_errors = document.getElementById('show_warnings_or_errors');
-    const show_results            = document.getElementById('show_results');
+    // Cache DOM elements
+    const showTimeTable = document.getElementById('show_time_table');
+    const showWarningsOrErrors = document.getElementById('show_warnings_or_errors');
+    const showResults = document.getElementById('show_results');
+    const actionJosm = document.getElementById('action-josm');
+    const actionYoHours = document.getElementById('action-yohours');
 
-    show_warnings_or_errors.innerHTML = '';
+    showWarningsOrErrors.innerHTML = '';
 
+    // Parse opening hours value
     let crashed = false;
     const value = document.forms.check.elements['expression'].value;
-    const diff_value = document.forms.check.elements['diff_value'].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,
@@ -197,204 +492,96 @@ function Evaluate (offset, reset) {
         it = oh.getIterator(date);
     } catch (err) {
         crashed = err;
-        show_warnings_or_errors.innerHTML = `
-            <div class="error"> ${i18next.t('texts.filter.error')}
-                <div class="warning_error_message"> ${crashed} </div>
-            </div>`;
-        show_time_table.innerHTML = '';
-        show_results.innerHTML    = '';
+        showWarningsOrErrors.innerHTML =
+            `<div class="error">${i18next.t('texts.filter.error')}` +
+            `<div class="warning_error_message">${crashed}</div></div>`;
+        showTimeTable.innerHTML = '';
+        showResults.innerHTML = '';
     }
 
-    show_time_table.innerHTML = '<a href="javascript:josm(\'import?url=' + encodeURIComponent('https://overpass-api.de/api/xapi_meta?*[opening_hours='
-        + document.forms.check.elements['expression'].value + ']') + '\')">' + i18next.t('texts.load all with JOSM') + '</a><br />';
+    // Populate action links
+    actionJosm.innerHTML = generateJosmHTML(value);
+    actionYoHours.innerHTML = generateYoHoursHTML(value, crashed);
+
     if (!crashed) {
         const prettified = oh.prettifyValue({});
-        const prettified_value_array = oh.prettifyValue({
-            // conf: { locale: i18next.language },
+        const prettifiedValueArray = oh.prettifyValue({
             get_internals: true,
         });
-        // let prettified_newline_sep = oh.prettifyValue({ conf: { locale: i18next.language, rule_sep_string: '\n', print_semicolon: false } });
-        show_results.innerHTML = '<p><span class="hd">' + i18next.t('words.status') + ':</span>'
-            + '<input class="nostyle" size="10" name="status" readonly="readonly" />'
-            + '<input class="nostyle" size="60" name="comment" readonly="readonly" />'
-            + '</p>' + '<p><span class="hd">'
-            + i18next.t('texts.MatchingRule') + ':</span>'
-            + '<input class="nostyle w100" name="MatchingRule" readonly="readonly" />'
-            + '</p>';
-        const used_selectors = { };
-        let value_explanation =
-            i18next.t('texts.prettified value for displaying') + ':<br />'
-            + '<p class="value_explanation">';
-        // console.log(JSON.stringify(prettified_value_array, null, '    '));
-        // console.log(JSON.stringify(prettified_value_array, null, '    '));
-        for (let nrule = 0; nrule < prettified_value_array[0].length; nrule++) {
-            if (nrule !== 0) {
-                const rule_separator = (
-                    prettified_value_array[1][nrule][1]
-                        ? ' ||'
-                        : (
-                            prettified_value_array[1][nrule][0][0][1] === 'rule separator'
-                            ? ','
-                            : ';'
-                        )
-                );
-                value_explanation +=
-                    '<span title="'
-                    + i18next.t('texts.rule separator ' + rule_separator) + '"'
-                    + ' class="rule_separator"><a target="_blank" class="specification" href="'
-                    + specification_url + '#section:rule_separators'
-                    + '">' + rule_separator + '</a></span><br>';
-            }
-            value_explanation += '<span class="one_rule">';
-            for (let nselector = 0, sl = prettified_value_array[0][nrule].length; nselector < sl; nselector++) {
-                const selector_type  = prettified_value_array[0][nrule][nselector][0][2];
-                const selector_value = prettified_value_array[0][nrule][nselector][1];
-                let fragment_identifier;
-                switch(selector_type) {
-                    case '24/7':
-                        fragment_identifier = 'selector_sequence';
-                        break;
-                    case 'state':
-                        fragment_identifier = 'section:rule_modifier';
-                        break;
-                    case 'comment':
-                        fragment_identifier = 'comment';
-                        break;
-                    default:
-                        fragment_identifier = 'selector:' + selector_type;
-                }
-                value_explanation += '<span title="'
-                    + i18next.t('words.' + (selector_type.match(/(?:state|comment)/) ? 'modifier' : 'selector'), { name: selector_type }) + '"'
-                    + ' class="' + selector_type + '"><a target="_blank" class="specification" href="'
-                    + specification_url + '#' + fragment_identifier
-                    + '">' + selector_value + '</a></span>';
-                if (nselector + 1 < sl)
-                    value_explanation += ' ';
-                used_selectors[selector_type] = true;
-            }
-            // console.log(value_explanation);
-            value_explanation += '</span>';
-        }
-        value_explanation += '</p></div>';
-        if (YoHoursChecker.canRead(value)) {
-            value_explanation = i18next.t('texts.refer to yohours', { href: 'https://projets.pavie.info/yohours/?oh=' + value })
-            + '<br>'
-            + value_explanation;
-        }
 
-        if (diff_value.length > 0) {
-          let is_equal_to;
-          try {
-              is_equal_to = oh.isEqualTo(new opening_hours(diff_value, nominatim, {
-                  'mode': mode,
-                  'warnings_severity': 7,
-                  'locale': i18next.language
-              }));
-          } catch {
-              $('input#diff_value').css({'background-color' : evaluation_tool_colors.error})
-          }
-          if (typeof is_equal_to === 'object') {
-            if (is_equal_to[0]) {
-              $('input#diff_value').css({'background-color' : evaluation_tool_colors.ok})
-            } else {
-              $('input#diff_value').css({'background-color' : evaluation_tool_colors.warn})
-              const human_readable_not_equal_output = jQuery.extend(true, {}, is_equal_to[1])
-              if (typeof human_readable_not_equal_output.deviation_for_time === 'object') {
-                human_readable_not_equal_output.deviation_for_time = {};
-                for (const time_code in is_equal_to[1].deviation_for_time) {
-                  console.log(time_code);
-                  const time_string = new Date(parseInt(time_code)).toLocaleString();
-                  human_readable_not_equal_output.deviation_for_time[time_string] =
-                    is_equal_to[1].deviation_for_time[time_code];
-                }
-              }
-              value_explanation = JSON.stringify(human_readable_not_equal_output, null, '    ')
-                + '<br>'
-                + value_explanation;
-            }
-          }
-        }
+        // Generate and display results
+        showResults.innerHTML = generateResultsHTML();
 
-        show_warnings_or_errors.innerHTML = value_explanation;
+        // Generate value explanation
+        const valueExplanation = generateValueExplanation(prettifiedValueArray);
 
-        // if (prettified_newline_sep.split('\n').length > 1)
-            // show_results.innerHTML += '<p>' + i18next.t('texts.prettified value for displaying') + ':<br />'
-                // + '<textarea rows="' + prettified_newline_sep.split('\n').length
-                // + '" style="width: 100%" name="prettifiedValueNewlineSep" readonly="readonly">'
-                // + prettified_newline_sep + '</textarea></p>';
+        // Handle diff comparison
+        handleDiffComparison(oh, diffValue, mode, date);
 
+        // Display value explanation
+        showWarningsOrErrors.innerHTML = valueExplanation;
 
-        document.forms.check.elements['comment'].value = typeof it.getComment() !== 'undefined'
-            ? it.getComment() : i18next.t('words.no') + ' ' + i18next.t('words.comment');
-        document.forms.check.elements['status'].value = (it.getState() ? i18next.t('words.open')
-            : (it.getUnknown() ? i18next.t('words.unknown') : i18next.t('words.closed')));
-        const rule_index    = it.getMatchingRule();
-        document.forms.check.elements['MatchingRule'].value = typeof rule_index === 'undefined'
-            ? i18next.t('words.none') : oh.prettifyValue({ 'rule_index': rule_index });
+        // Update matching rule
+        const ruleIndex = it.getMatchingRule();
+        const ruleDisplay = document.getElementById('matching-rule-display');
+        if (ruleDisplay) {
+            ruleDisplay.textContent = typeof ruleIndex === 'undefined' ? i18next.t('words.none') : oh.prettifyValue({ 'rule_index': ruleIndex });
+        }
 
+        // Show prettified value if different from input
         if (prettified !== value) {
-            show_warnings_or_errors.innerHTML = '<p>' + i18next.t('texts.prettified value',
-                { copyFunc: 'javascript:newValue(\'' + prettified.replace(/"/g, '&quot;') + '\')' }) + ':<br />'
-                + '<input style="width: 100%" onclick="javascript:newValue(\'' + prettified.replace(/"/g, '&quot;') + '\')" id="prettifiedValue" name="prettifiedValue" value="' + prettified.replace(/"/g, '&quot;') + '" /></p>';
+            showWarningsOrErrors.innerHTML = generatePrettifiedValueHTML(prettified);
         }
 
+        // Append warnings if any
         const warnings = oh.getWarnings();
-        if (warnings.length > 0) {
-            show_warnings_or_errors.innerHTML += `
-            <div class="warning"> ${i18next.t('texts.filter.error')}
-                <div class="warning_error_message"> ${warnings.join('\n')} </div>
-            </div>`;
-        }
+        showWarningsOrErrors.innerHTML += generateWarningsHTML(warnings);
 
-        if (prettified.length > 255) {
-            show_warnings_or_errors.innerHTML += `
-            <div class="warning"> ${i18next.t('texts.filter.error')}
-                <div class="warning_error_message"> ${i18next.t('texts.value to long for osm',
-                    { pretLength: prettified.length, valLength: value.length, maxLength: 255 })} </div>
-            </div>`;
-        }
+        // Check value length
+        showWarningsOrErrors.innerHTML += generateValueTooLongHTML(prettified, value);
 
-        show_time_table.innerHTML += OpeningHoursTable.drawTableAndComments(oh, it);
+        // Generate time table
+        showTimeTable.innerHTML = OpeningHoursTable.drawTableAndComments(oh, it, date);
     }
+
+    updatePermalinkHref();
 }
 
-// eslint-disable-next-line no-unused-vars
-function EX (element) {
+export function EX (element) {
     newValue(element.innerHTML);
     return false;
 }
 
-function newValue(value) {
-    if (typeof document.forms.check.elements['prettifiedValue'] === 'object') {
-        document.forms.check.elements['prettifiedValue'].focus();
-        document.forms.check.elements['prettifiedValue'].focus();
-    }
+export function newValue(value) {
     document.forms.check.elements['expression'].value = value;
     Evaluate();
 }
 
-// eslint-disable-next-line no-unused-vars
-function permalink () {
-    const exp = document.getElementById('expression').value;
-    const diff_value = document.getElementById('diff_value').value;
-    const lat = document.getElementById('lat').value;
-    const lon = document.getElementById('lon').value;
-    const mode = document.getElementById('mode').selectedIndex;
+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);
+    }
 
-    let permalink_url_query='?EXP='+encodeURIComponent(exp)+'&lat='+lat+'&lon='+lon+'&mode='+mode;
+    const baseUrl = `${location.origin}${location.pathname}`;
 
-    if (document.getElementById('permalink-include-timestamp').checked) {
-        permalink_url_query += '&DATE='+date.getTime();
-    }
-    if (diff_value !== '') {
-        permalink_url_query += '&diff_value='+encodeURIComponent(diff_value);
-    }
+    // Permalink with timestamp
+    const paramsWithTimestamp = new URLSearchParams(params);
+    paramsWithTimestamp.set('DATE', date.getTime());
+    document.getElementById('permalink-link-with-timestamp').href = `${baseUrl}?${paramsWithTimestamp}`;
 
-    location = location.protocol+'//'+location.host+location.pathname+permalink_url_query;
+    // Permalink without timestamp
+    document.getElementById('permalink-link-without-timestamp').href = `${baseUrl}?${params}`;
 }
 
-// eslint-disable-next-line no-unused-vars
-function setCurrentPosition() {
+export function setCurrentPosition() {
     if(navigator.geolocation) {
         navigator.geolocation.getCurrentPosition(onPositionUpdate);
     }
@@ -408,72 +595,46 @@ function onPositionUpdate(position) {
     Evaluate();
     console.log('Current position: ' + lat + ' ' + lng);
 }
+
 window.onload = function () {
-    const prmarr = window.location.search.replace( '?', '' ).split('&');
-    const params = {};
-    let customCoords = false;
+    const params = new URLSearchParams(location.search);
+    const customCoords = params.has('lat') || params.has('lon');
 
-    for ( let i = 0; i < prmarr.length; i++) {
-        const tmparr = prmarr[i].split('=');
-        params[tmparr[0]] = tmparr[1];
-    }
-    if (typeof params['EXP'] !== 'undefined') {
-        document.forms.check.elements['expression'].value = decodeURIComponent(params['EXP']);
+    if (params.has('EXP')) {
+        document.forms.check.elements['expression'].value = params.get('EXP');
     }
-    if (typeof params['diff_value'] !== 'undefined') {
-        document.forms.check.elements['diff_value'].value = decodeURIComponent(params['diff_value']);
+    if (params.has('diff_value')) {
+        document.forms.check.elements['diff_value'].value = params.get('diff_value');
     }
-    if (typeof params['lat'] !== 'undefined') {
-        document.forms.check.elements['lat'].value = decodeURIComponent(params['lat']);
-        customCoords = true;
+    if (params.has('lat')) {
+        document.forms.check.elements['lat'].value = params.get('lat');
     }
-    if (typeof params['lon'] !== 'undefined') {
-        document.forms.check.elements['lon'].value = decodeURIComponent(params['lon']);
-        customCoords = true;
+    if (params.has('lon')) {
+        document.forms.check.elements['lon'].value = params.get('lon');
     }
-    if (typeof params['mode'] !== 'undefined') {
-        document.forms.check.elements['mode'].value = decodeURIComponent(params['mode']);
+    if (params.has('mode')) {
+        document.forms.check.elements['mode'].value = params.get('mode');
     }
-    if (typeof params['DATE'] !== 'undefined') {
-        let crashed = true;
+    if (params.has('DATE')) {
         try {
-            date = new Date(parseInt(params['DATE']));
-            crashed = false;
+            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);
         }
-        if (!crashed) {
-            document.forms.check.elements['yyyy'].value       = date.getFullYear();
-            document.forms.check.elements['mm'].selectedIndex = date.getMonth();
-            document.forms.check.elements['dd'].value         = date.getDate();
-            document.forms.check.elements['HH'].value         = date.getHours();
-            document.forms.check.elements['MM'].value         = date.getMinutes();
-        }
-        Evaluate(0, false);
     } else {
         Evaluate(0, true);
     }
     if (navigator.geolocation && !customCoords) {
         navigator.geolocation.getCurrentPosition(onPositionUpdate);
-    };
+    }
 };
 /* }}} */
-
-$(document).ready(function () {
-    const permalink = document.getElementById('permalink');
-    if (permalink) {
-        const checkbox = document.createElement('input');
-        checkbox.type = 'checkbox';
-        checkbox.name = 'name';
-        checkbox.value = 'value';
-        checkbox.id = 'permalink-include-timestamp';
-        checkbox.checked = true;
-
-        const label = document.createElement('label')
-        label.htmlFor = 'permalink-include-timestamp';
-        label.appendChild(document.createTextNode(i18next.t('texts.include timestamp?')));
-
-        permalink.appendChild(label);
-        permalink.appendChild(checkbox);
-    }
-});