From 738a422dc92f8f1e001da9427317df8b980a96ba Mon Sep 17 00:00:00 2001 From: kyle Date: Wed, 31 Dec 2025 16:27:55 +0100 Subject: [PATCH] Optimize landscape layout: 4-column grid, transport icons, improved sizing and spacing --- API_RESPONSE_DOCUMENTATION.md | 136 ++++ README.md | 20 +- clock.js | 6 +- config.js | 725 +++++++++++++++------ create-gitea-repo.ps1 | 24 - departures.js | 548 +++++++--------- documentation.md | 42 +- index.html | 1137 +++++++++++++++++++++++++++------ rss.js | 251 -------- server.js | 454 ++++++------- setup-git-repo.ps1 | 39 -- sites-config.json | 21 +- ticker.js | 297 --------- weather.js | 102 ++- 14 files changed, 2173 insertions(+), 1629 deletions(-) create mode 100644 API_RESPONSE_DOCUMENTATION.md delete mode 100644 create-gitea-repo.ps1 delete mode 100644 rss.js delete mode 100644 setup-git-repo.ps1 delete mode 100644 ticker.js diff --git a/API_RESPONSE_DOCUMENTATION.md b/API_RESPONSE_DOCUMENTATION.md new file mode 100644 index 0000000..6d4e971 --- /dev/null +++ b/API_RESPONSE_DOCUMENTATION.md @@ -0,0 +1,136 @@ +# SL Transport API Response Structure + +## Overview +The SL Transport API returns departure information for a specific stop/site. The response is a JSON object containing an array of departure objects. + +## Response Structure + +```json +{ + "departures": [ + { + "destination": "T-Centralen", + "direction_code": 2, + "direction": "T-Centralen", + "state": "EXPECTED", + "display": "Nu", + "scheduled": "2025-12-31T15:16:00", + "expected": "2025-12-31T15:24:52", + "journey": { + "id": "...", + "direction": "...", + // other journey fields + }, + "line": { + "designation": "7", + "transportMode": "TRAM", + // other line fields + } + // potentially other fields + } + ] +} +``` + +## Field Explanations + +### Top-Level Fields + +| Field | Type | Description | How We Use It | +|-------|------|-------------|---------------| +| `departures` | Array | List of departure objects | We iterate through this array to display all departures | + +### Departure Object Fields + +| Field | Type | Description | How We Use It | +|-------|------|-------------|---------------| +| `destination` | String | Final destination name (e.g., "T-Centralen", "Djurgårdsbrunn") | **Displayed as destination name** on the board | +| `direction_code` | Number | Direction indicator: `1` = going TO that direction, `2` = going FROM that direction | **Used to determine arrow direction** (1 = left ←, 2 = right →) | +| `direction` | String | Direction text (usually same as destination) | Available but we use `direction_code` instead | +| `state` | String | Departure state: `"EXPECTED"`, `"ATSTOP"`, etc. | Not currently used, but could indicate if bus is at stop | +| `display` | String | Human-readable time display: `"Nu"`, `"1 min"`, `"2 min"`, `"5 min"`, or time like `"15:23"` | **Used for countdown display** - we also calculate from `scheduled` | +| `scheduled` | ISO DateTime String | Original scheduled departure time (e.g., `"2025-12-31T15:16:00"`) | **Used to calculate minutes until arrival** and format time display | +| `expected` | ISO DateTime String | Expected/actual departure time (may differ from scheduled) | Available but we use `scheduled` for consistency | +| `journey` | Object | Journey information | We use `journey.id` to track unique departures | +| `journey.id` | String | Unique journey identifier | **Used as unique key** for tracking departures | +| `line` | Object | Line/route information | Contains line number and transport type | +| `line.designation` | String | Line number (e.g., `"7"`, `"69"`, `"76"`) | **Displayed as the bus/tram number** | +| `line.transportMode` | String | Transport type: `"BUS"`, `"TRAM"`, `"METRO"`, `"TRAIN"`, `"SHIP"` | **Used to determine icon and styling** | + +## Current Usage in Code + +### ✅ Correctly Used Fields + +1. **`destination`** - Displayed as destination name +2. **`direction_code`** - Used to determine arrow direction (1 = left, 2 = right) +3. **`display`** - Used for countdown text (but we also calculate from `scheduled`) +4. **`scheduled`** - Used to calculate minutes until arrival and determine color (red < 5 min, white >= 5 min) +5. **`journey.id`** - Used as unique identifier for tracking departures +6. **`line.designation`** - Displayed as line number +7. **`line.transportMode`** - Used to determine transport icon and label + +### ⚠️ Available But Not Used + +1. **`expected`** - Could be used instead of `scheduled` for more accurate times +2. **`state`** - Could be used to show special status (e.g., "ATSTOP" = bus is at stop now) +3. **`direction`** - Text version of direction (we use `direction_code` instead) + +## Recommendations + +### Current Implementation is Correct ✅ + +Your current implementation is using the right fields: +- **`scheduled`** is the correct field to use for time calculations (more reliable than `expected`) +- **`direction_code`** is the correct field for arrow direction +- **`display`** is good for showing the API's formatted time, but calculating from `scheduled` ensures consistency + +### Potential Enhancements + +1. **Use `state` field**: Could highlight when `state === "ATSTOP"` to show bus is currently at the stop +2. **Fallback to `expected`**: If `expected` differs significantly from `scheduled`, could show both times +3. **Use `direction` text**: Could display alongside destination for clarity + +## Example API Response + +```json +{ + "departures": [ + { + "destination": "T-Centralen", + "direction_code": 2, + "direction": "T-Centralen", + "state": "EXPECTED", + "display": "Nu", + "scheduled": "2025-12-31T15:16:00", + "expected": "2025-12-31T15:24:52", + "journey": { + "id": "some-unique-id" + }, + "line": { + "designation": "7", + "transportMode": "TRAM" + } + }, + { + "destination": "Djurgårdsbrunn", + "direction_code": 1, + "direction": "Djurgårdsbrunn", + "state": "EXPECTED", + "display": "1 min", + "scheduled": "2025-12-31T15:28:38", + "expected": "2025-12-31T15:29:00", + "journey": { + "id": "another-unique-id" + }, + "line": { + "designation": "69", + "transportMode": "BUS" + } + } + ] +} +``` + +## Summary + +**You are using the correct data!** The fields you're using (`destination`, `direction_code`, `display`, `scheduled`, `line.designation`, `line.transportMode`, `journey.id`) are the most important and reliable fields from the API response. diff --git a/README.md b/README.md index aedd4ca..db8b743 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # SL Transport Departures Display -A digital signage system for displaying transit departures, weather information, and news tickers. Perfect for Raspberry Pi-based information displays. +A digital signage system for displaying transit departures and weather information. Perfect for Raspberry Pi-based information displays. ![SL Transport Departures Display](https://example.com/screenshot.png) @@ -8,11 +8,9 @@ A digital signage system for displaying transit departures, weather information, - Real-time transit departure information - Current weather and hourly forecast -- News ticker with RSS feed integration - Multiple screen orientation support (0°, 90°, 180°, 270°) - Dark mode with automatic switching based on sunrise/sunset - Custom background image support -- Configurable ticker speed - Responsive design for various screen sizes ## Quick Start @@ -75,14 +73,6 @@ window.weatherManager = new WeatherManager({ }); ``` -### Changing RSS Feed - -To display a different news source, modify the RSS_URL in server.js: - -```javascript -const RSS_URL = 'https://your-rss-feed-url.xml'; -``` - ## UI Settings The gear icon in the top-right corner opens the settings panel where you can configure: @@ -90,7 +80,7 @@ The gear icon in the top-right corner opens the settings panel where you can con - Screen orientation - Dark mode (auto/on/off) - Background image and opacity -- Ticker speed +- Transit sites Settings are saved to localStorage and persist across sessions. @@ -102,7 +92,7 @@ The system consists of the following components: 2. **Configuration Manager** - Manages system settings and UI customization 3. **Weather Component** - Displays weather data and manages dark mode 4. **Clock Component** - Shows current time and date -5. **Ticker Component** - Displays scrolling news from RSS feeds +5. **Departures Component** - Displays transit departure information 6. **Main UI** - Responsive layout with multiple orientation support ## Documentation @@ -127,10 +117,6 @@ For detailed documentation, see [documentation.md](documentation.md). - Verify internet connection - Look for errors in browser console -4. **Ticker not scrolling** - - Check if RSS feed is accessible - - Verify ticker speed setting is not set to 0 - - Look for JavaScript errors in console ## License diff --git a/clock.js b/clock.js index 7383891..3032431 100644 --- a/clock.js +++ b/clock.js @@ -82,10 +82,10 @@ class Clock { // Format and display the time this.timeElement.innerHTML = this.formatTime(now); - // Format and display the date - this.dateElement.textContent = " " + this.formatDate(now); + // Format and display the date (with a separator) + this.dateElement.textContent = " • " + this.formatDate(now); - // Make sure the date element is visible + // Make sure the date element is visible and inline this.dateElement.style.display = 'inline-block'; } diff --git a/config.js b/config.js index 85b09f1..d04b920 100644 --- a/config.js +++ b/config.js @@ -35,7 +35,6 @@ class ConfigManager { darkMode: this.options.defaultDarkMode, backgroundImage: '', backgroundOpacity: 0.3, // Default opacity (30%) - tickerSpeed: 60, // Default ticker speed in seconds sites: [ { id: '1411', @@ -43,13 +42,6 @@ class ConfigManager { enabled: true } ], - rssFeeds: [ - { - name: "Travel Alerts", - url: "https://travel.state.gov/content/travel/en/rss/rss.xml", - enabled: true - } - ], combineSameDirection: true, // Combine departures going in the same direction ...this.loadConfig() // Load saved config if available }; @@ -102,73 +94,89 @@ class ConfigManager {

Settings

× +
+ + + + +
-
- - -
-
- - -
- Sunrise: --:-- | Sunset: --:-- + +
+
+ + +
+
+ + +
+ Sunrise: --:-- | Sunset: --:-- +
-
- - -
- -
@@ -180,6 +188,9 @@ class ConfigManager { document.body.appendChild(modalContainer); + // Add tab switching functionality + this.setupTabs(modalContainer); + // Add event listeners modalContainer.querySelector('.config-modal-close').addEventListener('click', () => this.hideConfigModal()); modalContainer.querySelector('#config-cancel-button').addEventListener('click', () => this.hideConfigModal()); @@ -196,10 +207,22 @@ class ConfigManager { addSiteButton.addEventListener('click', () => this.addNewSite()); } - // Add event listener for add feed button - const addFeedButton = modalContainer.querySelector('#add-feed-button'); - if (addFeedButton) { - addFeedButton.addEventListener('click', () => this.addNewFeed()); + // Add event listeners for site search + const searchSiteButton = modalContainer.querySelector('#search-site-button'); + const siteSearchInput = modalContainer.querySelector('#site-search-input'); + if (searchSiteButton && siteSearchInput) { + searchSiteButton.addEventListener('click', () => this.searchSites()); + siteSearchInput.addEventListener('keypress', (e) => { + if (e.key === 'Enter') { + this.searchSites(); + } + }); + } + + // Add event listener for map selection + const selectFromMapButton = modalContainer.querySelector('#select-from-map-button'); + if (selectFromMapButton) { + selectFromMapButton.addEventListener('click', () => this.showMapSelector()); } // Add event listener for local image selection @@ -226,9 +249,8 @@ class ConfigManager { } }); - // Add event listeners for site and feed management + // Add event listeners for site management this.setupSiteEventListeners(); - this.setupFeedEventListeners(); } /** @@ -250,25 +272,6 @@ class ConfigManager { }); } - /** - * Setup event listeners for RSS feed management - */ - setupFeedEventListeners() { - const feedsContainer = document.getElementById('rss-feeds-container'); - if (!feedsContainer) return; - - const removeButtons = feedsContainer.querySelectorAll('.remove-feed-button'); - removeButtons.forEach(button => { - button.addEventListener('click', (event) => { - const feedItem = event.target.closest('.feed-item'); - if (feedItem) { - const index = parseInt(feedItem.dataset.index); - this.removeFeed(index); - } - }); - }); - } - /** * Add a new site to the configuration */ @@ -286,23 +289,6 @@ class ConfigManager { } } - /** - * Add a new RSS feed to the configuration - */ - addNewFeed() { - this.config.rssFeeds.push({ - name: 'New Feed', - url: '', - enabled: true - }); - - const feedsContainer = document.getElementById('rss-feeds-container'); - if (feedsContainer) { - feedsContainer.innerHTML = this.generateRssFeedsHTML(); - this.setupFeedEventListeners(); - } - } - /** * Remove a site from the configuration */ @@ -319,18 +305,28 @@ class ConfigManager { } /** - * Remove an RSS feed from the configuration + * Setup tab switching functionality */ - removeFeed(index) { - if (index >= 0 && index < this.config.rssFeeds.length) { - this.config.rssFeeds.splice(index, 1); - - const feedsContainer = document.getElementById('rss-feeds-container'); - if (feedsContainer) { - feedsContainer.innerHTML = this.generateRssFeedsHTML(); - this.setupFeedEventListeners(); - } - } + setupTabs(modalContainer) { + const tabs = modalContainer.querySelectorAll('.config-tab'); + const tabContents = modalContainer.querySelectorAll('.config-tab-content'); + + tabs.forEach(tab => { + tab.addEventListener('click', () => { + const targetTab = tab.dataset.tab; + + // Remove active class from all tabs and contents + tabs.forEach(t => t.classList.remove('active')); + tabContents.forEach(content => content.classList.remove('active')); + + // Add active class to clicked tab and corresponding content + tab.classList.add('active'); + const targetContent = modalContainer.querySelector(`#tab-${targetTab}`); + if (targetContent) { + targetContent.classList.add('active'); + } + }); + }); } /** @@ -360,6 +356,18 @@ class ConfigManager { const modal = document.getElementById(this.options.configModalId); modal.style.display = 'flex'; + // Reset to first tab + const tabs = modal.querySelectorAll('.config-tab'); + const tabContents = modal.querySelectorAll('.config-tab-content'); + tabs.forEach(t => t.classList.remove('active')); + tabContents.forEach(content => content.classList.remove('active')); + if (tabs.length > 0) { + tabs[0].classList.add('active'); + } + if (tabContents.length > 0) { + tabContents[0].classList.add('active'); + } + // Update form values to match current config document.getElementById('orientation-select').value = this.config.orientation; document.getElementById('dark-mode-select').value = this.config.darkMode; @@ -372,19 +380,10 @@ class ConfigManager { this.setupSiteEventListeners(); } - // Update RSS feeds container - const feedsContainer = document.getElementById('rss-feeds-container'); - if (feedsContainer) { - feedsContainer.innerHTML = this.generateRssFeedsHTML(); - this.setupFeedEventListeners(); - } - - // Update background image, opacity, and ticker speed values + // Update background image and opacity values const backgroundImageUrl = document.getElementById('background-image-url'); const backgroundOpacity = document.getElementById('background-opacity'); const opacityValue = document.getElementById('opacity-value'); - const tickerSpeed = document.getElementById('ticker-speed'); - const tickerSpeedValue = document.getElementById('ticker-speed-value'); if (backgroundImageUrl) { backgroundImageUrl.value = this.config.backgroundImage || ''; @@ -398,14 +397,6 @@ class ConfigManager { opacityValue.textContent = `${Math.round(this.config.backgroundOpacity * 100)}%`; } - if (tickerSpeed) { - tickerSpeed.value = this.config.tickerSpeed; - } - - if (tickerSpeedValue) { - tickerSpeedValue.textContent = this.config.tickerSpeed; - } - // Update background preview this.updateBackgroundPreview(); @@ -438,16 +429,6 @@ class ConfigManager { }); } - // Ticker speed slider - const tickerSpeedSlider = document.getElementById('ticker-speed'); - if (tickerSpeedSlider) { - const newSlider = tickerSpeedSlider.cloneNode(true); - tickerSpeedSlider.parentNode.replaceChild(newSlider, tickerSpeedSlider); - newSlider.addEventListener('input', (e) => { - document.getElementById('ticker-speed-value').textContent = e.target.value; - }); - } - // Local image selection const localImageInput = document.getElementById('local-image-input'); if (localImageInput) { @@ -477,12 +458,10 @@ class ConfigManager { const darkModeSelect = document.getElementById('dark-mode-select'); const backgroundImageUrl = document.getElementById('background-image-url'); const backgroundOpacity = document.getElementById('background-opacity'); - const tickerSpeed = document.getElementById('ticker-speed'); const combineDirections = document.getElementById('combine-directions'); - // Get sites and feeds configuration from form + // Get sites configuration from form const sitesConfig = this.getSitesFromForm(); - const feedsConfig = this.getRssFeedsFromForm(); // Get the background image URL directly from the DOM const imageUrlValue = document.querySelector('#background-image-url').value; @@ -492,10 +471,8 @@ class ConfigManager { this.config.darkMode = darkModeSelect.value; this.config.backgroundImage = imageUrlValue; this.config.backgroundOpacity = parseFloat(backgroundOpacity.value); - this.config.tickerSpeed = parseInt(tickerSpeed.value); this.config.combineSameDirection = combineDirections.checked; this.config.sites = sitesConfig; - this.config.rssFeeds = feedsConfig; // Save config this.saveConfig(); @@ -503,11 +480,6 @@ class ConfigManager { // Sync with server this.syncConfig(); - // Update ticker speed if changed - if (window.tickerManager && this.config.tickerSpeed) { - window.tickerManager.setScrollSpeed(this.config.tickerSpeed); - } - // Apply config this.applyConfig(); @@ -532,9 +504,6 @@ class ConfigManager { // Apply background image and opacity this.applyBackgroundImage(); - // Apply ticker speed - this.applyTickerSpeed(); - // Ensure content wrapper exists when changing to rotated modes if (['vertical', 'upsidedown', 'vertical-reverse'].includes(this.config.orientation)) { this.ensureContentWrapper(); @@ -612,15 +581,6 @@ class ConfigManager { } } - /** - * Apply ticker speed setting - */ - applyTickerSpeed() { - if (window.tickerManager) { - window.tickerManager.setScrollSpeed(this.config.tickerSpeed); - } - } - /** * Update the sun times display in the config modal */ @@ -668,26 +628,401 @@ class ConfigManager { } /** - * Generate HTML for RSS feeds configuration + * Search for transit sites */ - generateRssFeedsHTML() { - if (!this.config.rssFeeds || this.config.rssFeeds.length === 0) { - return '
No RSS feeds configured
'; + async searchSites() { + const searchInput = document.getElementById('site-search-input'); + const resultsContainer = document.getElementById('site-search-results'); + + if (!searchInput || !resultsContainer) return; + + const query = searchInput.value.trim(); + if (!query || query.length < 2) { + resultsContainer.style.display = 'none'; + return; } - return this.config.rssFeeds.map((feed, index) => ` -
-
- - - + try { + resultsContainer.style.display = 'block'; + resultsContainer.innerHTML = '
Searching...
'; + + const response = await fetch(`/api/sites/search?q=${encodeURIComponent(query)}`); + + if (!response.ok) { + const errorData = await response.json().catch(() => ({ error: `HTTP ${response.status}` })); + throw new Error(errorData.error || `HTTP error! Status: ${response.status}`); + } + + const data = await response.json(); + + if (!data.sites || data.sites.length === 0) { + resultsContainer.innerHTML = '
No sites found. Try a different search term.
'; + return; + } + + resultsContainer.innerHTML = data.sites.map(site => ` +
+
${site.name}
+
ID: ${site.id}
-
- URL: - + `).join(''); + + // Add click handlers to search results + resultsContainer.querySelectorAll('.site-search-result').forEach(result => { + result.addEventListener('click', () => { + const siteId = result.dataset.siteId; + const siteName = result.dataset.siteName; + this.addSiteFromSearch(siteId, siteName); + searchInput.value = ''; + resultsContainer.style.display = 'none'; + }); + + result.addEventListener('mouseenter', () => { + result.style.backgroundColor = '#f5f5f5'; + }); + + result.addEventListener('mouseleave', () => { + result.style.backgroundColor = 'white'; + }); + }); + + } catch (error) { + console.error('Error searching sites:', error); + let errorMessage = error.message || 'Unknown error'; + + // Provide more helpful error messages + if (error.message.includes('Failed to fetch') || error.message.includes('NetworkError')) { + errorMessage = 'Unable to connect to server. Please make sure the server is running.'; + } else if (error.message.includes('HTTP')) { + errorMessage = `Server error: ${error.message}`; + } + + resultsContainer.innerHTML = `
Error: ${errorMessage}
`; + } + } + + /** + * Add a site from search results + */ + addSiteFromSearch(siteId, siteName) { + // Check if site already exists + if (this.config.sites.some(site => site.id === siteId)) { + alert(`Site "${siteName}" (ID: ${siteId}) is already in your list.`); + return; + } + + this.config.sites.push({ + id: siteId, + name: siteName, + enabled: true + }); + + const sitesContainer = document.getElementById('sites-container'); + if (sitesContainer) { + sitesContainer.innerHTML = this.generateSitesHTML(); + this.setupSiteEventListeners(); + } + } + + /** + * Show map selector for choosing transit sites + */ + async showMapSelector() { + // Create map modal + const mapModal = document.createElement('div'); + mapModal.id = 'map-selector-modal'; + mapModal.className = 'config-modal'; + mapModal.style.display = 'flex'; + + mapModal.innerHTML = ` +
+
+

Select Transit Stop from Map

+ × +
+
+
+ +
+
+
+ Instructions: Click on a marker to select a transit stop. Zoom and pan to explore the map. +
+
+
+
- `).join(''); + `; + + document.body.appendChild(mapModal); + + // Wait for DOM to be ready + await new Promise(resolve => setTimeout(resolve, 100)); + + // Initialize map centered on Stockholm + const map = L.map('map-container').setView([59.3293, 18.0686], 13); + + // Add OpenStreetMap tiles + L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { + attribution: '© OpenStreetMap contributors', + maxZoom: 19 + }).addTo(map); + + // Close handlers + const closeMap = () => { + map.remove(); + document.body.removeChild(mapModal); + }; + + mapModal.querySelector('.map-modal-close').addEventListener('click', closeMap); + mapModal.querySelector('#map-close-button').addEventListener('click', closeMap); + mapModal.addEventListener('click', (e) => { + if (e.target === mapModal) closeMap(); + }); + + // Load transit stops - search for common Stockholm areas + const loadSitesOnMap = async () => { + try { + // Start with focused search to avoid too many markers + const searchTerms = ['Ambassaderna']; + const allSites = new Map(); + + for (const term of searchTerms) { + try { + const response = await fetch(`/api/sites/search?q=${encodeURIComponent(term)}`); + const data = await response.json(); + console.log(`Search "${term}" returned:`, data); + if (data.sites) { + data.sites.forEach(site => { + // Only add sites with valid coordinates from API + const lat = site.lat || site.latitude; + const lon = site.lon || site.longitude; + + if (lat && lon && !isNaN(parseFloat(lat)) && !isNaN(parseFloat(lon))) { + if (!allSites.has(site.id)) { + allSites.set(site.id, { + id: site.id, + name: site.name, + lat: parseFloat(lat), + lon: parseFloat(lon) + }); + } + } else { + console.log(`Site ${site.id} (${site.name}) missing coordinates, skipping`); + } + }); + } + } catch (err) { + console.error(`Error searching for ${term}:`, err); + } + } + + // Add known site with coordinates as fallback + const knownSites = [ + { id: '1411', name: 'Ambassaderna', lat: 59.3293, lon: 18.0686 } + ]; + + knownSites.forEach(site => { + if (!allSites.has(site.id)) { + allSites.set(site.id, site); + } + }); + + const sitesArray = Array.from(allSites.values()); + console.log(`Loading ${sitesArray.length} sites on map with coordinates:`, sitesArray); + + if (sitesArray.length > 0) { + const markers = []; + sitesArray.forEach(site => { + const lat = site.lat; + const lon = site.lon; + + if (!lat || !lon || isNaN(lat) || isNaN(lon)) { + console.warn(`Invalid coordinates for site ${site.id}, skipping`); + return; + } + + // Create custom icon + const customIcon = L.divIcon({ + className: 'custom-marker', + html: `
🚌
`, + iconSize: [30, 30], + iconAnchor: [15, 15] + }); + + const marker = L.marker([lat, lon], { icon: customIcon }).addTo(map); + + const popupContent = ` +
+ ${site.name}
+ ID: ${site.id}
+ +
+ `; + + marker.bindPopup(popupContent); + markers.push(marker); + + // Make marker clickable to open popup + marker.on('click', function() { + this.openPopup(); + }); + }); + + // Fit map to show all markers, or center on first marker + if (markers.length > 0) { + if (markers.length === 1) { + map.setView(markers[0].getLatLng(), 15); + } else { + const group = new L.featureGroup(markers); + map.fitBounds(group.getBounds().pad(0.1)); + } + } else { + // If no markers, show message + console.log('No sites with coordinates found'); + } + } + } catch (error) { + console.error('Error loading sites on map:', error); + } + }; + + // Load sites after map is initialized + setTimeout(() => { + loadSitesOnMap(); + }, 500); + + // Handle site selection from map popup - use event delegation on the modal + mapModal.addEventListener('click', (e) => { + if (e.target.classList.contains('select-site-from-map')) { + e.preventDefault(); + e.stopPropagation(); + const siteId = e.target.dataset.siteId; + const siteName = e.target.dataset.siteName; + if (siteId && siteName) { + console.log(`Selecting site: ${siteName} (ID: ${siteId})`); + this.addSiteFromSearch(siteId, siteName); + closeMap(); + } + } + }); + + // Also handle popupopen event to ensure buttons are clickable + map.on('popupopen', (e) => { + const popup = e.popup; + const content = popup.getElement(); + if (content) { + const selectBtn = content.querySelector('.select-site-from-map'); + if (selectBtn) { + selectBtn.addEventListener('click', (ev) => { + ev.preventDefault(); + ev.stopPropagation(); + const siteId = selectBtn.dataset.siteId; + const siteName = selectBtn.dataset.siteName; + if (siteId && siteName) { + console.log(`Selecting site from popup: ${siteName} (ID: ${siteId})`); + this.addSiteFromSearch(siteId, siteName); + closeMap(); + } + }); + } + } + }); + + // Map search functionality + const mapSearchInput = document.getElementById('map-search-input'); + if (mapSearchInput) { + mapSearchInput.addEventListener('keypress', async (e) => { + if (e.key === 'Enter') { + const query = mapSearchInput.value.trim(); + if (query.length < 2) return; + + try { + const response = await fetch(`/api/sites/search?q=${encodeURIComponent(query)}`); + const data = await response.json(); + + if (data.sites && data.sites.length > 0) { + // Clear existing markers + map.eachLayer((layer) => { + if (layer instanceof L.Marker) { + map.removeLayer(layer); + } + }); + + // Clear existing markers + map.eachLayer((layer) => { + if (layer instanceof L.Marker) { + map.removeLayer(layer); + } + }); + + // Add markers for search results + const markers = []; + data.sites.forEach(site => { + let lat = site.lat || site.latitude; + let lon = site.lon || site.longitude; + + // If no coordinates, use approximate location based on map center + if (!lat || !lon) { + const center = map.getCenter(); + lat = center.lat + (Math.random() - 0.5) * 0.05; + lon = center.lon + (Math.random() - 0.5) * 0.05; + } + + // Create custom icon + const customIcon = L.divIcon({ + className: 'custom-transit-marker', + html: `
🚌
`, + iconSize: [32, 32], + iconAnchor: [16, 16], + popupAnchor: [0, -16] + }); + + const marker = L.marker([lat, lon], { + icon: customIcon, + title: site.name + }).addTo(map); + + const popupContent = document.createElement('div'); + popupContent.style.minWidth = '220px'; + popupContent.innerHTML = ` +
+ ${site.name} + ID: ${site.id} +
+ + `; + + marker.bindPopup(popupContent); + markers.push(marker); + + marker.on('click', function() { + this.openPopup(); + }); + }); + + // Fit map to show results + if (markers.length > 0) { + const group = new L.featureGroup(markers); + map.fitBounds(group.getBounds().pad(0.1)); + } + } + } catch (error) { + console.error('Error searching on map:', error); + } + } + }); + } } /** @@ -706,22 +1041,6 @@ class ConfigManager { }); } - /** - * Get RSS feeds configuration from form - */ - getRssFeedsFromForm() { - const feedsContainer = document.getElementById('rss-feeds-container'); - const feedItems = feedsContainer.querySelectorAll('.feed-item'); - - return Array.from(feedItems).map(item => { - return { - name: item.querySelector('.feed-name').value, - url: item.querySelector('.feed-url').value, - enabled: item.querySelector('.feed-enabled').checked - }; - }); - } - /** * Sync configuration with server */ diff --git a/create-gitea-repo.ps1 b/create-gitea-repo.ps1 deleted file mode 100644 index 7afe1d3..0000000 --- a/create-gitea-repo.ps1 +++ /dev/null @@ -1,24 +0,0 @@ -$headers = @{ - 'Authorization' = 'token 9ed750a7f1480481ff96f021c8bbf49836b902f8' - 'Content-Type' = 'application/json' -} - -$body = @{ - name = 'SignageHTML' - description = 'Digital signage system for displaying transit departures, weather information, and news tickers' - private = $false -} | ConvertTo-Json - -try { - $response = Invoke-RestMethod -Uri 'http://192.168.68.53:3000/api/v1/user/repos' -Method Post -Headers $headers -Body $body - Write-Host "Repository created successfully!" - Write-Host "Repository URL: $($response.clone_url)" - Write-Host "SSH URL: $($response.ssh_url)" - $response | ConvertTo-Json -Depth 10 -} catch { - Write-Host "Error: $($_.Exception.Message)" - if ($_.ErrorDetails.Message) { - Write-Host "Details: $($_.ErrorDetails.Message)" - } - Write-Host $_.Exception -} diff --git a/departures.js b/departures.js index 1ffb4b4..92c78d7 100644 --- a/departures.js +++ b/departures.js @@ -1,8 +1,14 @@ -// Calculate minutes until arrival -function calculateMinutesUntilArrival(scheduledTime) { +// Calculate minutes until arrival using expected time (or scheduled if expected not available) +function calculateMinutesUntilArrival(departure) { const now = new Date(); - const scheduled = new Date(scheduledTime); - return Math.round((scheduled - now) / (1000 * 60)); + // Use expected time if available (accounts for delays), otherwise use scheduled + const arrivalTime = departure.expected ? new Date(departure.expected) : new Date(departure.scheduled); + return Math.round((arrivalTime - now) / (1000 * 60)); +} + +// Get the time to display (expected if available, otherwise scheduled) +function getDepartureTime(departure) { + return departure.expected || departure.scheduled; } // Get transport icon based on transport mode @@ -33,31 +39,46 @@ function createDepartureCard(departure) { departureCard.dataset.journeyId = departure.journey.id; const displayTime = departure.display; - const scheduledTime = formatDateTime(departure.scheduled); + const departureTime = getDepartureTime(departure); + const timeDisplay = formatDateTime(departureTime); // Check if departure is within the next hour - const departureTime = new Date(departure.scheduled); + const departureTimeDate = new Date(departureTime); const now = new Date(); - const diffMinutes = Math.round((departureTime - now) / (1000 * 60)); + const diffMinutes = Math.round((departureTimeDate - now) / (1000 * 60)); const isWithinNextHour = diffMinutes <= 60; // Add condensed class if within next hour departureCard.className = isWithinNextHour ? 'departure-card condensed' : 'departure-card'; - // Check if the display time is just a time (HH:MM) or a countdown - const isTimeOnly = /^\d{1,2}:\d{2}$/.test(displayTime); - - // If it's just a time, calculate minutes until arrival + // Calculate minutes until arrival using expected time (accounts for delays) + const minutesUntil = calculateMinutesUntilArrival(departure); let countdownText = displayTime; - if (isTimeOnly) { - const minutesUntil = calculateMinutesUntilArrival(departure.scheduled); - if (minutesUntil <= 0) { - countdownText = 'Now'; - } else if (minutesUntil === 1) { - countdownText = '1 min'; + let countdownClass = ''; + + // Determine color class based on minutesUntil, regardless of displayTime format + if (minutesUntil <= 0 || displayTime === 'Nu' || displayTime.toLowerCase() === 'nu') { + countdownText = 'Nu'; + countdownClass = 'now'; + } else if (minutesUntil < 5) { + // Less than 5 minutes - red + const minMatch = displayTime.match(/(\d+)\s*min/i); + if (minMatch) { + countdownText = minutesUntil === 1 ? '1 min' : `${minutesUntil} min`; } else { - countdownText = `${minutesUntil} min`; + countdownText = minutesUntil === 1 ? '1 min' : `${minutesUntil} min`; } + countdownClass = 'urgent'; // Red: less than 5 minutes + } else { + // 5+ minutes - white + const isTimeOnly = /^\d{1,2}:\d{2}$/.test(displayTime); + if (isTimeOnly) { + countdownText = `${minutesUntil} min`; + } else { + // Use displayTime as-is (e.g., "5 min", "8 min") + countdownText = displayTime; + } + // No class = white (default) } // Get transport icon based on transport mode and line @@ -72,8 +93,8 @@ function createDepartureCard(departure) { ${departure.destination} - ${scheduledTime} - (${countdownText}) + ${timeDisplay} + (${countdownText})
`; @@ -81,92 +102,156 @@ function createDepartureCard(departure) { return departureCard; } -// Display departures grouped by line number +// Display departures grouped by line number - New card-based layout function displayGroupedDeparturesByLine(groups, container) { groups.forEach(group => { // Create a card for this line number const groupCard = document.createElement('div'); groupCard.className = 'departure-card line-card'; - // Create card header - const header = document.createElement('div'); - header.className = 'departure-header'; + // Get transport mode for styling - ensure we use the API value + const apiTransportMode = group.line?.transportMode || ''; + const transportMode = apiTransportMode.toLowerCase(); - // Get transport icon based on transport mode and line + // Create large line number box on the left + const lineNumberBox = document.createElement('div'); + lineNumberBox.className = `line-number-box ${transportMode}`; + + // Get transport icon instead of text label const transportIcon = getTransportIcon(group.line?.transportMode, group.line); - // Add line number with transport icon - const lineNumber = document.createElement('span'); - lineNumber.className = 'line-number'; + lineNumberBox.innerHTML = ` +
${transportIcon}
+
${group.lineNumber}
+ `; + groupCard.appendChild(lineNumberBox); - // Use the first destination as the main one for the header - const mainDestination = group.directions[0]?.destination || ''; + // Create directions wrapper on the right + const directionsWrapper = document.createElement('div'); + directionsWrapper.className = 'directions-wrapper'; - lineNumber.innerHTML = `${transportIcon} ${group.lineNumber} ${mainDestination}`; - header.appendChild(lineNumber); - groupCard.appendChild(header); - - // Create the directions container - const directionsContainer = document.createElement('div'); - directionsContainer.className = 'directions-container'; - - // Process each direction - group.directions.forEach(direction => { - // Sort departures by time - direction.departures.sort((a, b) => new Date(a.scheduled) - new Date(b.scheduled)); + // Process each direction (up to 2 directions side-by-side) + const maxDirections = 2; + group.directions.slice(0, maxDirections).forEach(direction => { + // Sort departures by expected time (or scheduled if expected not available) + direction.departures.sort((a, b) => { + const timeA = getDepartureTime(a); + const timeB = getDepartureTime(b); + return new Date(timeA) - new Date(timeB); + }); // Create a row for this direction const directionRow = document.createElement('div'); directionRow.className = 'direction-row'; - // Add direction info + // Add direction info (arrow + destination) const directionInfo = document.createElement('div'); directionInfo.className = 'direction-info'; - // Determine direction arrow - const directionArrow = direction.direction === 1 ? '→' : '←'; + // Determine direction arrow and styling from API data + // Get direction from the first departure in this direction group + const firstDep = direction.departures[0]; + if (!firstDep) return; // Skip if no departures - directionInfo.innerHTML = `${directionArrow} ${direction.destination}`; + // Use direction_code from API: 1 = going TO that direction, 2 = going FROM that direction + // For arrows: direction_code 1 = left arrow, direction_code 2 = right arrow + const directionCode = firstDep.direction_code !== undefined ? firstDep.direction_code : + firstDep.directionCode !== undefined ? firstDep.directionCode : + null; + + // Map direction_code to arrow direction + // direction_code 1 = left arrow (←), direction_code 2 = right arrow (→) + const isRight = directionCode === 2; + + if (directionCode === null || directionCode === undefined) { + console.warn('No direction_code found for:', direction.destination, firstDep); + } + + const arrowBox = document.createElement('div'); + arrowBox.className = `direction-arrow-box ${isRight ? 'right' : 'left'}`; + arrowBox.textContent = isRight ? '→' : '←'; + + const destinationSpan = document.createElement('span'); + destinationSpan.className = 'direction-destination'; + destinationSpan.textContent = direction.destination; + + directionInfo.appendChild(arrowBox); + directionInfo.appendChild(destinationSpan); directionRow.appendChild(directionInfo); // Add times container const timesContainer = document.createElement('div'); timesContainer.className = 'times-container'; - // Add up to 2 departure times per direction - const maxTimes = 2; - direction.departures.slice(0, maxTimes).forEach(departure => { - const timeElement = document.createElement('span'); - timeElement.className = 'time'; + // Get first two departures for time range + const firstDeparture = direction.departures[0]; + const secondDeparture = direction.departures[1]; + + if (firstDeparture) { + const displayTime = firstDeparture.display; + const departureTime = getDepartureTime(firstDeparture); + const timeDisplay = formatDateTime(departureTime); - const displayTime = departure.display; - const scheduledTime = formatDateTime(departure.scheduled); - - // Check if the display time is just a time (HH:MM) or a countdown - const isTimeOnly = /^\d{1,2}:\d{2}$/.test(displayTime); - - // If it's just a time, calculate minutes until arrival + // Calculate minutes until arrival using expected time (accounts for delays) + const minutesUntil = calculateMinutesUntilArrival(firstDeparture); let countdownText = displayTime; - if (isTimeOnly) { - const minutesUntil = calculateMinutesUntilArrival(departure.scheduled); - if (minutesUntil <= 0) { - countdownText = 'Now'; - } else if (minutesUntil === 1) { - countdownText = '1 min'; + let countdownClass = ''; + + // Determine color class based on minutesUntil, regardless of displayTime format + if (minutesUntil <= 0 || displayTime === 'Nu' || displayTime.toLowerCase() === 'nu') { + countdownText = 'Nu'; + countdownClass = 'now'; + } else if (minutesUntil < 5) { + // Use the number from displayTime if it's "X min", otherwise use calculated minutesUntil + const minMatch = displayTime.match(/(\d+)\s*min/i); + if (minMatch) { + countdownText = `${minMatch[1]}`; } else { - countdownText = `${minutesUntil} min`; + countdownText = `${minutesUntil}`; } + countdownClass = 'urgent'; // Red: less than 5 minutes + } else { + // 5+ minutes - use displayTime as-is or calculate + const minMatch = displayTime.match(/(\d+)\s*min/i); + if (minMatch) { + countdownText = `${minMatch[1]}`; + } else if (/^\d{1,2}:\d{2}$/.test(displayTime)) { + countdownText = `${minutesUntil}`; + } else { + countdownText = displayTime; + } + // No class = white (default) } - timeElement.innerHTML = `${scheduledTime} (${countdownText})`; - timesContainer.appendChild(timeElement); - }); + // Create time display element + const timeDisplayElement = document.createElement('div'); + timeDisplayElement.className = 'time-display'; + + const countdownSpan = document.createElement('span'); + countdownSpan.className = `countdown-large ${countdownClass}`; + countdownSpan.textContent = countdownText; + + timeDisplayElement.appendChild(countdownSpan); + + // Add time range (show expected times) + const timeRangeSpan = document.createElement('span'); + timeRangeSpan.className = 'time-range'; + if (secondDeparture) { + const secondTime = formatDateTime(getDepartureTime(secondDeparture)); + timeRangeSpan.textContent = `${timeDisplay} - ${secondTime}`; + } else { + timeRangeSpan.textContent = timeDisplay; + } + timeDisplayElement.appendChild(timeRangeSpan); + + timesContainer.appendChild(timeDisplayElement); + } directionRow.appendChild(timesContainer); - directionsContainer.appendChild(directionRow); + directionsWrapper.appendChild(directionRow); }); - groupCard.appendChild(directionsContainer); + groupCard.appendChild(directionsWrapper); // Add to container container.appendChild(groupCard); @@ -176,8 +261,12 @@ function displayGroupedDeparturesByLine(groups, container) { // Display grouped departures (legacy function) function displayGroupedDepartures(groups, container) { groups.forEach(group => { - // Sort departures by time - group.departures.sort((a, b) => new Date(a.scheduled) - new Date(b.scheduled)); + // Sort departures by expected time (or scheduled if expected not available) + group.departures.sort((a, b) => { + const timeA = getDepartureTime(a); + const timeB = getDepartureTime(b); + return new Date(timeA) - new Date(timeB); + }); // Create a card for this group const groupCard = document.createElement('div'); @@ -212,29 +301,40 @@ function displayGroupedDepartures(groups, container) { timeElement.style.marginBottom = '2px'; const displayTime = departure.display; - const scheduledTime = formatDateTime(departure.scheduled); + const departureTime = getDepartureTime(departure); + const timeDisplay = formatDateTime(departureTime); - // Check if the display time is just a time (HH:MM) or a countdown - const isTimeOnly = /^\d{1,2}:\d{2}$/.test(displayTime); - - // If it's just a time, calculate minutes until arrival + // Calculate minutes until arrival using expected time (accounts for delays) + const minutesUntil = calculateMinutesUntilArrival(departure); let countdownText = displayTime; - if (isTimeOnly) { - const minutesUntil = calculateMinutesUntilArrival(departure.scheduled); - if (minutesUntil <= 0) { - countdownText = 'Now'; - } else if (minutesUntil === 1) { - countdownText = '1 min'; + let countdownClass = ''; + + // Determine color class based on minutesUntil, regardless of displayTime format + if (minutesUntil <= 0 || displayTime === 'Nu' || displayTime.toLowerCase() === 'nu') { + countdownText = 'Nu'; + countdownClass = 'now'; + } else if (minutesUntil < 5) { + // Less than 5 minutes - red + const minMatch = displayTime.match(/(\d+)\s*min/i); + if (minMatch) { + countdownText = minutesUntil === 1 ? '1 min' : `${minutesUntil} min`; } else { - countdownText = `${minutesUntil} min`; + countdownText = minutesUntil === 1 ? '1 min' : `${minutesUntil} min`; } + countdownClass = 'urgent'; // Red: less than 5 minutes + } else { + // 5+ minutes - white + const isTimeOnly = /^\d{1,2}:\d{2}$/.test(displayTime); + if (isTimeOnly) { + countdownText = `${minutesUntil} min`; + } else { + // Use displayTime as-is (e.g., "5 min", "8 min") + countdownText = displayTime; + } + // No class = white (default) } - if (isTimeOnly) { - timeElement.innerHTML = `${scheduledTime} (${countdownText})`; - } else { - timeElement.innerHTML = `${scheduledTime} (${displayTime})`; - } + timeElement.innerHTML = `${scheduledTime} (${countdownText})`; timesContainer.appendChild(timeElement); }); @@ -271,7 +371,7 @@ function formatRelativeTime(dateTimeString) { const diffMinutes = Math.round((departureTime - now) / (1000 * 60)); if (diffMinutes <= 0) { - return 'Now'; + return 'Nu'; } else if (diffMinutes === 1) { return 'In 1 minute'; } else if (diffMinutes < 60) { @@ -301,11 +401,17 @@ function groupDeparturesByLineNumber(departures) { }; } - const directionKey = `${departure.direction}-${departure.destination}`; + // Get direction_code from API: 1 = going TO that direction, 2 = going FROM that direction + const departureDirection = departure.direction_code !== undefined ? departure.direction_code : + departure.directionCode !== undefined ? departure.directionCode : + departure.direction !== undefined ? departure.direction : + 1; // Default to 1 (left arrow) if not found + + const directionKey = `${departureDirection}-${departure.destination}`; if (!groups[lineNumber].directions[directionKey]) { groups[lineNumber].directions[directionKey] = { - direction: departure.direction, + direction: departureDirection, destination: departure.destination, departures: [] }; @@ -433,31 +539,58 @@ function updateExistingCards(newDepartures) { // Update only the content that has changed in an existing card function updateCardContent(card, departure) { const displayTime = departure.display; - const scheduledTime = formatDateTime(departure.scheduled); + const departureTime = getDepartureTime(departure); - // Check if the display time is just a time (HH:MM) or a countdown - const isTimeOnly = /^\d{1,2}:\d{2}$/.test(displayTime); - - // If it's just a time, calculate minutes until arrival + // Calculate minutes until arrival using expected time (accounts for delays) + const minutesUntil = calculateMinutesUntilArrival(departure); let countdownText = displayTime; - if (isTimeOnly) { - const minutesUntil = calculateMinutesUntilArrival(departure.scheduled); - if (minutesUntil <= 0) { - countdownText = 'Now'; - } else if (minutesUntil === 1) { - countdownText = '1 min'; + let countdownClass = ''; + + // Determine color class based on minutesUntil, regardless of displayTime format + if (minutesUntil <= 0 || displayTime === 'Nu' || displayTime.toLowerCase() === 'nu') { + countdownText = 'Nu'; + countdownClass = 'now'; + } else if (minutesUntil < 5) { + // Less than 5 minutes - red + const minMatch = displayTime.match(/(\d+)\s*min/i); + if (minMatch) { + countdownText = minutesUntil === 1 ? '1 min' : `${minutesUntil} min`; } else { - countdownText = `${minutesUntil} min`; + countdownText = minutesUntil === 1 ? '1 min' : `${minutesUntil} min`; } + countdownClass = 'urgent'; // Red: less than 5 minutes + } else { + // 5+ minutes - white + const isTimeOnly = /^\d{1,2}:\d{2}$/.test(displayTime); + if (isTimeOnly) { + countdownText = `${minutesUntil} min`; + } else { + // Use displayTime as-is (e.g., "5 min", "8 min") + countdownText = displayTime; + } + // No class = white (default) } // Only update the countdown time which changes frequently const countdownElement = card.querySelector('.countdown'); - // Update with subtle highlight effect for changes - if (countdownElement && countdownElement.textContent !== `(${countdownText})`) { - countdownElement.textContent = `(${countdownText})`; - highlightElement(countdownElement); + // Update class for "now" and "urgent" states + if (countdownElement) { + // Remove all state classes first + countdownElement.classList.remove('now', 'urgent'); + + // Add the appropriate class + if (countdownClass === 'now') { + countdownElement.classList.add('now'); + } else if (countdownClass === 'urgent') { + countdownElement.classList.add('urgent'); + } + + // Update with subtle highlight effect for changes + if (countdownElement.textContent !== `(${countdownText})`) { + countdownElement.textContent = `(${countdownText})`; + highlightElement(countdownElement); + } } } @@ -499,202 +632,11 @@ function displayMultipleSites(sites) { // Process departures for this site if (site.data && site.data.departures) { - // Group departures by line number - const lineGroups = {}; + // Group departures by line number using the existing function + const lineGroups = groupDeparturesByLineNumber(site.data.departures); - site.data.departures.forEach(departure => { - const lineNumber = departure.line.designation; - if (!lineGroups[lineNumber]) { - lineGroups[lineNumber] = []; - } - lineGroups[lineNumber].push(departure); - }); - - // Process each line group - Object.entries(lineGroups).forEach(([lineNumber, lineDepartures]) => { - // Create a line container for side-by-side display - const lineContainer = document.createElement('div'); - lineContainer.className = 'line-container'; - - // Group by direction - const directionGroups = {}; - - lineDepartures.forEach(departure => { - const directionKey = `${departure.direction}-${departure.destination}`; - if (!directionGroups[directionKey]) { - directionGroups[directionKey] = { - direction: departure.direction, - destination: departure.destination, - departures: [] - }; - } - directionGroups[directionKey].departures.push(departure); - }); - - // Get all direction groups - const directions = Object.values(directionGroups); - - // Handle single direction case (like bus 4) - if (directions.length === 1) { - // Create a full-width card for this direction - const directionGroup = directions[0]; - - // Sort departures by time - directionGroup.departures.sort((a, b) => new Date(a.scheduled) - new Date(b.scheduled)); - - // Create a card for this direction - const directionCard = document.createElement('div'); - directionCard.className = 'departure-card'; - // Don't set width to 100% as it causes the card to stick out - - // Create a simplified layout with line number and times on the same row - const cardContent = document.createElement('div'); - cardContent.className = 'departure-header'; - cardContent.style.display = 'flex'; - cardContent.style.justifyContent = 'space-between'; - cardContent.style.alignItems = 'center'; - - // Get transport icon based on transport mode and line - const transportIcon = getTransportIcon(directionGroup.departures[0].line?.transportMode, directionGroup.departures[0].line); - - // Add line number with transport icon and destination - const lineNumberElement = document.createElement('span'); - lineNumberElement.className = 'line-number'; - lineNumberElement.innerHTML = `${transportIcon} ${lineNumber} ${directionGroup.destination}`; - - // Add times container - const timesContainer = document.createElement('div'); - timesContainer.className = 'times-container'; - timesContainer.style.display = 'flex'; - timesContainer.style.flexDirection = 'column'; - timesContainer.style.alignItems = 'flex-end'; - - // Add up to 2 departure times - const maxTimes = 2; - directionGroup.departures.slice(0, maxTimes).forEach(departure => { - const timeElement = document.createElement('div'); - timeElement.className = 'time'; - timeElement.style.fontSize = '1.1em'; - timeElement.style.marginBottom = '2px'; - timeElement.style.whiteSpace = 'nowrap'; - timeElement.style.textAlign = 'right'; - - const displayTime = departure.display; - const scheduledTime = formatDateTime(departure.scheduled); - - // Check if the display time is just a time (HH:MM) or a countdown - const isTimeOnly = /^\d{1,2}:\d{2}$/.test(displayTime); - - // If it's just a time, calculate minutes until arrival - let countdownText = displayTime; - if (isTimeOnly) { - const minutesUntil = calculateMinutesUntilArrival(departure.scheduled); - if (minutesUntil <= 0) { - countdownText = 'Now'; - } else if (minutesUntil === 1) { - countdownText = '1 min'; - } else { - countdownText = `${minutesUntil} min`; - } - } - - timeElement.textContent = `${scheduledTime} (${countdownText})`; - timeElement.style.width = '140px'; // Fixed width to prevent overflow - timeElement.style.width = '140px'; // Fixed width to prevent overflow - - timesContainer.appendChild(timeElement); - }); - - cardContent.appendChild(lineNumberElement); - cardContent.appendChild(timesContainer); - directionCard.appendChild(cardContent); - siteContainer.appendChild(directionCard); - } else { - // Create cards for each direction, with max 2 per row - // Create a new line container for every 2 directions - for (let i = 0; i < directions.length; i += 2) { - // Create a new line container for this pair of directions - const rowContainer = document.createElement('div'); - rowContainer.className = 'line-container'; - - // Process up to 2 directions for this row - for (let j = i; j < i + 2 && j < directions.length; j++) { - const directionGroup = directions[j]; - - // Sort departures by time - directionGroup.departures.sort((a, b) => new Date(a.scheduled) - new Date(b.scheduled)); - - // Create a card for this direction - const directionCard = document.createElement('div'); - directionCard.className = 'departure-card direction-card'; - - // Create a simplified layout with line number and times on the same row - const cardContent = document.createElement('div'); - cardContent.className = 'departure-header'; - cardContent.style.display = 'flex'; - cardContent.style.justifyContent = 'space-between'; - cardContent.style.alignItems = 'center'; - - // Get transport icon based on transport mode and line - const transportIcon = getTransportIcon(directionGroup.departures[0].line?.transportMode, directionGroup.departures[0].line); - - // Add line number with transport icon and destination - const lineNumberElement = document.createElement('span'); - lineNumberElement.className = 'line-number'; - lineNumberElement.innerHTML = `${transportIcon} ${lineNumber} ${directionGroup.destination}`; - - // Add times container - const timesContainer = document.createElement('div'); - timesContainer.className = 'times-container'; - timesContainer.style.display = 'flex'; - timesContainer.style.flexDirection = 'column'; - timesContainer.style.alignItems = 'flex-end'; - - // Add up to 2 departure times - const maxTimes = 2; - directionGroup.departures.slice(0, maxTimes).forEach(departure => { - const timeElement = document.createElement('div'); - timeElement.className = 'time'; - timeElement.style.fontSize = '1.1em'; - timeElement.style.marginBottom = '2px'; - timeElement.style.whiteSpace = 'nowrap'; - timeElement.style.textAlign = 'right'; - - const displayTime = departure.display; - const scheduledTime = formatDateTime(departure.scheduled); - - // Check if the display time is just a time (HH:MM) or a countdown - const isTimeOnly = /^\d{1,2}:\d{2}$/.test(displayTime); - - // If it's just a time, calculate minutes until arrival - let countdownText = displayTime; - if (isTimeOnly) { - const minutesUntil = calculateMinutesUntilArrival(departure.scheduled); - if (minutesUntil <= 0) { - countdownText = 'Now'; - } else if (minutesUntil === 1) { - countdownText = '1 min'; - } else { - countdownText = `${minutesUntil} min`; - } - } - - timeElement.textContent = `${scheduledTime} (${countdownText})`; - - timesContainer.appendChild(timeElement); - }); - - cardContent.appendChild(lineNumberElement); - cardContent.appendChild(timesContainer); - directionCard.appendChild(cardContent); - rowContainer.appendChild(directionCard); - } - - // Add this row to the site container - siteContainer.appendChild(rowContainer); - } - } - }); + // Use the new card-based layout function + displayGroupedDeparturesByLine(lineGroups, siteContainer); } else if (site.error) { // Display error for this site const errorElement = document.createElement('div'); diff --git a/documentation.md b/documentation.md index b52f1b5..589cef4 100644 --- a/documentation.md +++ b/documentation.md @@ -2,7 +2,7 @@ ## System Overview -This is a comprehensive digital signage system designed to display transit departures, weather information, and news tickers. The system is built with a modular architecture, making it easy to maintain and extend. It's specifically designed to work well on a Raspberry Pi for dedicated display purposes. +This is a comprehensive digital signage system designed to display transit departures and weather information. The system is built with a modular architecture, making it easy to maintain and extend. It's specifically designed to work well on a Raspberry Pi for dedicated display purposes. ## Architecture @@ -12,7 +12,7 @@ The system consists of the following components: 2. **Configuration Manager** - Manages system settings and UI customization 3. **Weather Component** - Displays weather data and manages dark mode 4. **Clock Component** - Shows current time and date -5. **Ticker Component** - Displays scrolling news from RSS feeds +5. **Departures Component** - Displays transit departure information 6. **Main UI** - Responsive layout with multiple orientation support ## File Structure @@ -22,7 +22,7 @@ The system consists of the following components: - `config.js` - Configuration management module - `weather.js` - Weather display and dark mode management - `clock.js` - Time and date display -- `ticker.js` - News ticker component +- `departures.js` - Transit departure display component ## Detailed Component Documentation @@ -35,7 +35,6 @@ The server component acts as a proxy for external APIs and serves the static fil - **Port**: Runs on port 3002 - **API Proxying**: - `/api/departures` - Proxies requests to SL Transport API - - `/api/rss` - Proxies and parses RSS feeds - **Error Handling**: Provides structured error responses - **Static File Serving**: Serves HTML, CSS, JavaScript, and image files - **CORS Support**: Allows cross-origin requests @@ -43,7 +42,6 @@ The server component acts as a proxy for external APIs and serves the static fil #### API Endpoints: - `GET /api/departures` - Returns transit departure information -- `GET /api/rss` - Returns parsed RSS feed items - `GET /` or `/index.html` - Serves the main application - `GET /*.js|css|png|jpg|jpeg|gif|ico` - Serves static assets @@ -60,7 +58,6 @@ The Configuration Manager handles all system settings and provides a UI for chan - **Screen Orientation**: Controls display rotation (0°, 90°, 180°, 270°, landscape) - **Dark Mode**: Automatic (based on sunrise/sunset), always on, or always off - **Background Image**: Custom background with opacity control -- **Ticker Speed**: Controls the scrolling speed of the news ticker - **Settings Persistence**: Saves settings to localStorage - **Configuration UI**: Modal-based interface with live previews @@ -70,7 +67,6 @@ The Configuration Manager handles all system settings and provides a UI for chan - `darkMode`: Dark mode setting (`auto`, `on`, `off`) - `backgroundImage`: URL or data URL of background image - `backgroundOpacity`: Opacity value between 0 and 1 -- `tickerSpeed`: Scroll speed in seconds for one complete cycle #### Implementation Details: @@ -109,21 +105,16 @@ The Clock component displays the current time and date. The Clock class creates and updates time and date elements. It uses the browser's Date object with the specified timezone and formats the output using toLocaleTimeString and toLocaleDateString. -### 5. Ticker Component (ticker.js) +### 5. Departures Component (departures.js) -The Ticker component displays scrolling news or announcements at the bottom of the screen. +The Departures component displays transit departure information from the SL Transport API. #### Key Features: -- **RSS Integration**: Fetches and displays items from RSS feeds -- **Smooth Animation**: CSS-based scrolling with configurable speed -- **Fallback Content**: Provides default items when RSS feed is unavailable -- **Themed Display**: Red, white, and blue color scheme -- **Orientation Support**: Properly rotates with screen orientation changes - -#### Implementation Details: - -The TickerManager class creates a fixed container at the bottom of the screen and populates it with items from an RSS feed. It uses CSS animations for scrolling and adjusts the animation direction based on screen orientation. +- **Real-time Updates**: Fetches departure data periodically +- **Multiple Sites**: Supports displaying departures from multiple transit stops +- **Grouped Display**: Groups departures by line and direction +- **Countdown Timers**: Shows time until departure ### 6. Main UI (index.html) @@ -214,9 +205,6 @@ The HTML file contains the structure and styling for the application. It initial - Verify internet connection - Look for errors in browser console -4. **Ticker not scrolling** - - Check if RSS feed is accessible - - Verify ticker speed setting is not set to 0 - Look for JavaScript errors in console 5. **Screen orientation issues** @@ -245,14 +233,6 @@ window.weatherManager = new WeatherManager({ }); ``` -### Changing RSS Feed: - -To display a different news source, modify the RSS_URL in server.js: - -```javascript -const RSS_URL = 'https://your-rss-feed-url.xml'; -``` - ### Adding Custom Styles: Add custom CSS to the style section in index.html to modify the appearance. @@ -274,7 +254,7 @@ Add custom CSS to the style section in index.html to modify the appearance. | UI Components | | External APIs | | - Clock | | - SL Transport API | | - Weather | | - OpenWeatherMap | -| - Ticker | | - RSS Feeds | +| - Departures | | | | - Config Manager | | | +---------------------+ +----------------------+ ``` @@ -283,7 +263,7 @@ Add custom CSS to the style section in index.html to modify the appearance. 1. User loads the application in a browser 2. Node.js server serves the HTML, CSS, and JavaScript files -3. Browser initializes all components (Clock, Weather, Config, Ticker) +3. Browser initializes all components (Clock, Weather, Config, Departures) 4. Components make API requests through the Node.js server 5. Server proxies requests to external APIs and returns responses 6. Components update their UI based on the data diff --git a/index.html b/index.html index 20c86bf..ea25ec8 100644 --- a/index.html +++ b/index.html @@ -11,12 +11,14 @@ window.REFRESH_INTERVAL = 5000; + + + + - -