Theoistic/SailingScheduleLazy.html

## SailingScheduleLazy.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sailing Schedule</title>
    <style>
        /* Add some basic styling */
        #sailing-schedule-module {
            font-family: Arial, sans-serif;
        }
        .departure, .arrival {
            margin-bottom: 20px;
        }
        dl {
            display: flex;
            flex-direction: column;
        }
        dt, dd {
            margin: 0;
            padding: 5px;
        }
        dt {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="sailing-schedule-module"></div>
    <script>
        const language = 'fo'; // Change this to 'en', 'de', 'fr', 'da', or 'fo' for different languages

        document.addEventListener('DOMContentLoaded', function () {
            const proxyUrl = 'https://corsproxy.io/?';
            const targetUrl = 'http://api.smyrilline.fo/api/departure?limit=2';

            fetch(proxyUrl + targetUrl)
                .then(response => response.json())
                .then(data => renderSailingSchedule(data))
                .catch(error => console.error('Error fetching data:', error));
        });

        // JSON rendering util
        function renderSailingSchedule(departures) {
            const container = document.getElementById('sailing-schedule-module');
            departures.sort((a, b) => new Date(a.etd) - new Date(b.etd)); // Sorting by ETD

            departures.forEach(dep => {
                const departureDiv = document.createElement('div');
                departureDiv.classList.add('departure', 'previous-leg');

                departureDiv.innerHTML = `
                    <dl>
                        <dt class="text" data-title="Title">${translate('Translate_DepartureTime')}</dt>
                        <dd>
                            <span data-title="Port">${getHarborName(dep.departing)}</span>
                            <span data-title="Date">${formatDate(dep.etd, 'dd')} ${formatMonth(dep.etd)}</span>
                            <span data-title="Time">${formatDate(dep.etd, 'HH:mm')}</span>
                        </dd>
                    </dl>
                `;

                const arrivalDiv = document.createElement('div');
                arrivalDiv.classList.add('arrival', 'previous-leg');

                arrivalDiv.innerHTML = `
                    <dl>
                        <dt class="text" data-title="Title">${translate('Translate_ArrivalTime')}</dt>
                        <dd>
                            <span data-title="Port">${getHarborName(dep.arriving)}</span>
                            <span data-title="Date">${formatDate(dep.eta, 'dd')} ${formatMonth(dep.eta)}</span>
                            <span data-title="Time">${formatDate(dep.eta, 'HH:mm')}</span>
                        </dd>
                    </dl>
                `;

                container.appendChild(departureDiv);
                container.appendChild(arrivalDiv);
            });
        }

        // translation util
        function translate(key) {
            const translations = {
                'Translate_DepartureTime': {
                    en: 'Departure Time',
                    de: 'Abfahrtszeit',
                    fr: 'Heure de départ',
                    da: 'Afgangstid',
                    fo: 'Fráferð (lokal tíð)'
                },
                'Translate_ArrivalTime': {
                    en: 'Arrival Time',
                    de: 'Ankunftszeit',
                    fr: 'Heure d\'arrivée',
                    da: 'Ankomsttid',
                    fo: 'Koma (lokal tíð)'
                }
            };
            return translations[key][language] || key;
        }

        // harbor constant util
        function getHarborName(code) {
            const harbors = {
                0: 'Seyðisfjörður',
                1: 'Hirtshals',
                2: 'Tórshavn'
            };
            return harbors[code];
        }

        // date string formatting
        function formatDate(dateString, format) {
            const date = new Date(dateString);
            const options = {};

            switch (format) {
                case 'dd':
                    options.day = '2-digit';
                    break;
                case 'MM':
                    options.month = '2-digit';
                    break;
                case 'HH:mm':
                    options.hour = '2-digit';
                    options.minute = '2-digit';
                    options.hour12 = false;
                    break;
                default:
                    return dateString;
            }

            return new Intl.DateTimeFormat(language, options).format(date);
        }

        // Month name with Faroese fallback
        function formatMonth(dateString) {
            const date = new Date(dateString);
            const month = date.getMonth();
            const options = { month: 'long' };

            if (language === 'fo') {
                const foMonths = [
                    'januar', 'februar', 'mars', 'apríl', 'mai', 'juni',
                    'juli', 'august', 'september', 'oktober', 'november', 'desember'
                ];
                return foMonths[month];
            }

            return new Intl.DateTimeFormat(language, options).format(date);
        }

        // Day name with Faroese fallback
        function formatDay(dateString) {
            const date = new Date(dateString);
            const day = date.getDay();
            const options = { weekday: 'long' };

            if (language === 'fo') {
                const foDays = [
                    'sunnudagur', 'mánadagur', 'týsdagur', 'mikudagur',
                    'hósdagur', 'fríggjadagur', 'leygardagur'
                ];
                return foDays[day];
            }

            return new Intl.DateTimeFormat(language, options).format(date);
        }
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Sailing Schedule</title>
	<style>
	/* Add some basic styling */
	#sailing-schedule-module {
	font-family: Arial, sans-serif;
	}
	.departure, .arrival {
	margin-bottom: 20px;
	}
	dl {
	display: flex;
	flex-direction: column;
	}
	dt, dd {
	margin: 0;
	padding: 5px;
	}
	dt {
	font-weight: bold;
	}
	</style>
	</head>
	<body>
	<div id="sailing-schedule-module"></div>
	<script>
	const language = 'fo'; // Change this to 'en', 'de', 'fr', 'da', or 'fo' for different languages

	document.addEventListener('DOMContentLoaded', function () {
	const proxyUrl = 'https://corsproxy.io/?';
	const targetUrl = 'http://api.smyrilline.fo/api/departure?limit=2';

	fetch(proxyUrl + targetUrl)
	.then(response => response.json())
	.then(data => renderSailingSchedule(data))
	.catch(error => console.error('Error fetching data:', error));
	});

	// JSON rendering util
	function renderSailingSchedule(departures) {
	const container = document.getElementById('sailing-schedule-module');
	departures.sort((a, b) => new Date(a.etd) - new Date(b.etd)); // Sorting by ETD

	departures.forEach(dep => {
	const departureDiv = document.createElement('div');
	departureDiv.classList.add('departure', 'previous-leg');

	departureDiv.innerHTML = `
	<dl>
	<dt class="text" data-title="Title">${translate('Translate_DepartureTime')}</dt>
	<dd>
	<span data-title="Port">${getHarborName(dep.departing)}</span>
	<span data-title="Date">${formatDate(dep.etd, 'dd')} ${formatMonth(dep.etd)}</span>
	<span data-title="Time">${formatDate(dep.etd, 'HH:mm')}</span>
	</dd>
	</dl>
	`;

	const arrivalDiv = document.createElement('div');
	arrivalDiv.classList.add('arrival', 'previous-leg');

	arrivalDiv.innerHTML = `
	<dl>
	<dt class="text" data-title="Title">${translate('Translate_ArrivalTime')}</dt>
	<dd>
	<span data-title="Port">${getHarborName(dep.arriving)}</span>
	<span data-title="Date">${formatDate(dep.eta, 'dd')} ${formatMonth(dep.eta)}</span>
	<span data-title="Time">${formatDate(dep.eta, 'HH:mm')}</span>
	</dd>
	</dl>
	`;

	container.appendChild(departureDiv);
	container.appendChild(arrivalDiv);
	});
	}

	// translation util
	function translate(key) {
	const translations = {
	'Translate_DepartureTime': {
	en: 'Departure Time',
	de: 'Abfahrtszeit',
	fr: 'Heure de départ',
	da: 'Afgangstid',
	fo: 'Fráferð (lokal tíð)'
	},
	'Translate_ArrivalTime': {
	en: 'Arrival Time',
	de: 'Ankunftszeit',
	fr: 'Heure d\'arrivée',
	da: 'Ankomsttid',
	fo: 'Koma (lokal tíð)'
	}
	};
	return translations[key][language] \|\| key;
	}

	// harbor constant util
	function getHarborName(code) {
	const harbors = {
	0: 'Seyðisfjörður',
	1: 'Hirtshals',
	2: 'Tórshavn'
	};
	return harbors[code];
	}

	// date string formatting
	function formatDate(dateString, format) {
	const date = new Date(dateString);
	const options = {};

	switch (format) {
	case 'dd':
	options.day = '2-digit';
	break;
	case 'MM':
	options.month = '2-digit';
	break;
	case 'HH:mm':
	options.hour = '2-digit';
	options.minute = '2-digit';
	options.hour12 = false;
	break;
	default:
	return dateString;
	}

	return new Intl.DateTimeFormat(language, options).format(date);
	}

	// Month name with Faroese fallback
	function formatMonth(dateString) {
	const date = new Date(dateString);
	const month = date.getMonth();
	const options = { month: 'long' };

	if (language === 'fo') {
	const foMonths = [
	'januar', 'februar', 'mars', 'apríl', 'mai', 'juni',
	'juli', 'august', 'september', 'oktober', 'november', 'desember'
	];
	return foMonths[month];
	}

	return new Intl.DateTimeFormat(language, options).format(date);
	}

	// Day name with Faroese fallback
	function formatDay(dateString) {
	const date = new Date(dateString);
	const day = date.getDay();
	const options = { weekday: 'long' };

	if (language === 'fo') {
	const foDays = [
	'sunnudagur', 'mánadagur', 'týsdagur', 'mikudagur',
	'hósdagur', 'fríggjadagur', 'leygardagur'
	];
	return foDays[day];
	}

	return new Intl.DateTimeFormat(language, options).format(date);
	}
	</script>
	</body>
	</html>