diff --git a/.gitignore b/.gitignore index 6b09581..fb61e35 100644 --- a/.gitignore +++ b/.gitignore @@ -10,3 +10,4 @@ npm-debug.log* yarn-debug.log* yarn-error.log* .DS_Store +TODO.md diff --git a/CHANGELOG.md b/CHANGELOG.md index 637454b..65ed658 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,66 @@ All notable changes to this project will be documented in this file. +## 2.5.6 - 2026-08-05 + +### Added + +- Onboarding QR rendering now uses the vendored `qr-code-styling` library directly, with a wider quiet zone and extra frame padding so the code does not clip at the corners. + +### Changed + +- The shared QR helper now renders `qr-code-styling` in Node without the old `qrcode` or `qrcode-generator` packages. +- The onboarding QR endpoint now generates the styled QR at request time, and the player onboarding page requests it only after confirming the player is not already onboarded. +- Playlist QR preview backfill now uses the same styled QR helper as onboarding, so playlist snapshots and generated previews stay consistent. +- The onboarding QR layout now keeps the code inset within its frame so the corners have more breathing room. + +## 2.5.5 - 2026-08-04 + +### Added + +- A shared Dupe flow was added to most admin create pages and list views, including roles, users, playlists, slides, templates, canvas sizes, announcements, and supported data sources. + +### Changed + +- RBAC roles now include a Dupe action that opens a copy-on-create flow with the selected permissions already populated. +- Users now include a Dupe action that opens the add-user form with the copied name and roles, while leaving the username blank for a new login. +- User usernames are now editable from the admin users section, while the personal account password page remains unchanged. +- The users form now allows creating an account without assigning any roles. +- Save and New on the users form now returns to the blank create page instead of falling back to the list. +- Password updates now accept a slightly lighter policy of 10 characters with 3 of 4 character classes, and the account and user password forms now describe the updated requirement. +- The slide rich-text editor now groups underline, strikethrough, subscript, and superscript into a single split-button control, with the main button using the underline icon and the dropdown exposing the other text-format actions. +- Chip formatting in the slide rich-text editor now uses a reusable inline-format helper so the chip action continues to sync and mark the editor as edited when applied. +- RSS, API, and timetable placeholder help text now uses the same transform examples, spacing, and typography as the timetable version, with the hint shown after the visible placeholders and before any overflow disclosure. + +### Fixed + +- Cells and inputs now enforce route-specific character limits on the form itself and on the matching save paths, so overlong values no longer fail at submit time. +- Playlist rows now use a grip drag handle with separate up/down move controls, and the drag grip cursor now changes to grab and grabbing on hover and drag. +- Playlist duration inputs now respect a min-only limit correctly, so the shared limiter no longer coerces values down to 0 when no max attribute is present. +- Playlist row video and mute toggles now use the correct filled/outline Bootstrap button styles for their current state without relying on the `active` class. +- Slides table search now only matches slide titles and template names, and no longer searches within slide content. +- Banner marquee text now measures its real cycle width so top-banner and lower-third announcements loop continuously instead of resetting from a fixed start position. +- Slide editor template selection now stays editable on blank slides until the user makes a real content edit, so TinyMCE hydration no longer locks the canvas immediately. +- Slide editor region cards now share a common header shell, so the image and video chips stay aligned with the other region types on the Video Webpage and HTML RTMP pages. +- Firefox preview popup now centers the preview canvas in normal layout flow and scales from the center, so the popup preview lines up correctly in Chrome and Firefox. +- Canvas size edits now keep the width and height fields locked while the size is in use, and oversized canvas dimensions are rejected at 16384 instead of reaching the save path. +- Schedule rules now start collapsed by default, use the built-in card collapse behavior, and keep validation messages visible without re-highlighting empty paired inputs. +- Timetable group deletes now scan slide content for the actual `timetable_group_id` field, so groups that are still referenced by slides stay protected from deletion. +- Timetable add and edit pages now keep cancel confirmation tied to timetable entry edits, so changes inside the entries table are treated as unsaved form changes. +- Screen add and edit pages now keep the Player URL box in a stable two-column layout, so switching between the forms no longer causes the page to jump or shift. +- Screen add pages now show the secondary Save and Close / Save and New actions, and screen edit delete actions now prompt for confirmation before removing the screen. +- Admin user password resets now keep the selected user in view by returning to that user's edit page after saving. +- Account password saves now refresh the page after the success toast is queued so the confirmation message stays visible. +- Shared toast handling now preserves a pending success message across the redirect so refreshes do not drop the confirmation banner. +- Announcement create and edit pages now keep the save action buttons visible, and the edit-page delete action now prompts for confirmation before deleting. +- Active announcements are now blocked from deletion with a clearer edit-page message that explains why. +- Slide template create now shows the background image remove button and clear flag, matching the edit page behavior. +- Template create now exposes Save & Close and Save & New actions, and template edit delete actions now use the shared action-button helper with a confirmation prompt instead of a separate hidden form. +- The advanced animation modal now shows intro, outro, and loop durations as 1-200% fields, with 100% saving back as 1000ms. +- The advanced animation modal now hard-limits repeat counts to 999 so attention-seeker animations cannot be configured with unbounded loops. +- Template editor region boxes now rerender when the canvas or stage resizes, and region width/height changes now keep the lock ratio, stay within the canvas, and shift back on-canvas instead of spilling over. +- Background tasks and scheduled tasks now render timestamps in 24-hour format, and the background task queue keeps a confirmation prompt before clearing finished items. + ## 2.5.4 - 2026-08-03 ### Changed diff --git a/package-lock.json b/package-lock.json index 0307413..6772fc8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "pulse-signage", - "version": "2.5.4", + "version": "2.5.6", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "pulse-signage", - "version": "2.5.4", + "version": "2.5.6", "dependencies": { "@sparticuz/chromium": "^137.0.0", "animate.css": "^4.1.1", @@ -19,8 +19,6 @@ "multer": "^2.2.0", "mysql2": "^3.14.3", "puppeteer-core": "^24.16.0", - "qrcode": "^1.5.4", - "qrcode-generator": "^2.0.4", "sharp": "^0.35.3", "ws": "^8.21.0" }, @@ -1090,15 +1088,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/camelcase": { - "version": "5.3.1", - "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz", - "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==", - "license": "MIT", - "engines": { - "node": ">=6" - } - }, "node_modules/chokidar": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", @@ -1137,17 +1126,6 @@ "devtools-protocol": "*" } }, - "node_modules/cliui": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz", - "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==", - "license": "ISC", - "dependencies": { - "string-width": "^4.2.0", - "strip-ansi": "^6.0.0", - "wrap-ansi": "^6.2.0" - } - }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -1241,15 +1219,6 @@ "ms": "2.0.0" } }, - "node_modules/decamelize": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz", - "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==", - "license": "MIT", - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/degenerator": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/degenerator/-/degenerator-5.0.1.tgz", @@ -1307,12 +1276,6 @@ "integrity": "sha512-Tpm17fxYzt+J7VrGdc1k8YdRqS3YV7se/M6KeemEqvUbq/n7At1rWVuXMxQgpWkdwSdIEKYbU//Bve+Shm4YNQ==", "license": "BSD-3-Clause" }, - "node_modules/dijkstrajs": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz", - "integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==", - "license": "MIT" - }, "node_modules/dotenv": { "version": "17.4.2", "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.4.2.tgz", @@ -1619,19 +1582,6 @@ "node": ">= 0.8" } }, - "node_modules/find-up": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz", - "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==", - "license": "MIT", - "dependencies": { - "locate-path": "^5.0.0", - "path-exists": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, "node_modules/follow-redirects": { "version": "1.16.0", "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.16.0.tgz", @@ -2083,18 +2033,6 @@ "integrity": "sha512-Ks/IoX00TtClbGQr4TWXemAnktAQvYB7HzcCxDGqEZU6oCmb2INHuOoKxbtR+HFkmYWBKv/dOZtGRiAjDhj92g==", "license": "MIT" }, - "node_modules/locate-path": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", - "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==", - "license": "MIT", - "dependencies": { - "p-locate": "^4.1.0" - }, - "engines": { - "node": ">=8" - } - }, "node_modules/long": { "version": "5.3.2", "resolved": "https://registry.npmjs.org/long/-/long-5.3.2.tgz", @@ -2412,42 +2350,6 @@ "wrappy": "1" } }, - "node_modules/p-limit": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz", - "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==", - "license": "MIT", - "dependencies": { - "p-try": "^2.0.0" - }, - "engines": { - "node": ">=6" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/p-locate": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz", - "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==", - "license": "MIT", - "dependencies": { - "p-limit": "^2.2.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/p-try": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz", - "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==", - "license": "MIT", - "engines": { - "node": ">=6" - } - }, "node_modules/pac-proxy-agent": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/pac-proxy-agent/-/pac-proxy-agent-7.2.0.tgz", @@ -2512,15 +2414,6 @@ "node": ">= 0.8" } }, - "node_modules/path-exists": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", - "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==", - "license": "MIT", - "engines": { - "node": ">=8" - } - }, "node_modules/path-to-regexp": { "version": "0.1.13", "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.13.tgz", @@ -2546,15 +2439,6 @@ "url": "https://github.com/sponsors/jonschlinkert" } }, - "node_modules/pngjs": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz", - "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==", - "license": "MIT", - "engines": { - "node": ">=10.13.0" - } - }, "node_modules/progress": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz", @@ -2692,29 +2576,6 @@ "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", "license": "MIT" }, - "node_modules/qrcode": { - "version": "1.5.4", - "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.4.tgz", - "integrity": "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==", - "license": "MIT", - "dependencies": { - "dijkstrajs": "^1.0.1", - "pngjs": "^5.0.0", - "yargs": "^15.3.1" - }, - "bin": { - "qrcode": "bin/qrcode" - }, - "engines": { - "node": ">=10.13.0" - } - }, - "node_modules/qrcode-generator": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/qrcode-generator/-/qrcode-generator-2.0.4.tgz", - "integrity": "sha512-mZSiP6RnbHl4xL2Ap5HfkjLnmxfKcPWpWe/c+5XxCuetEenqmNFf1FH/ftXPCtFG5/TDobjsjz6sSNL0Sr8Z9g==", - "license": "MIT" - }, "node_modules/qs": { "version": "6.15.3", "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.3.tgz", @@ -2791,12 +2652,6 @@ "node": ">=0.10.0" } }, - "node_modules/require-main-filename": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz", - "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==", - "license": "ISC" - }, "node_modules/safe-buffer": { "version": "5.2.1", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", @@ -2880,12 +2735,6 @@ "node": ">= 0.8.0" } }, - "node_modules/set-blocking": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz", - "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==", - "license": "ISC" - }, "node_modules/setprototypeof": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", @@ -3359,32 +3208,12 @@ "integrity": "sha512-ARrjNjtWRRs2w4Tk7nqrf2gBI0QXWuOmMCx2hU+1jUt6d00MjMxURrhxhGbrsoiZKJrhTSTzbIrc554iKI10qw==", "license": "Apache-2.0" }, - "node_modules/which-module": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz", - "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==", - "license": "ISC" - }, "node_modules/wordwrap": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz", "integrity": "sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==", "license": "MIT" }, - "node_modules/wrap-ansi": { - "version": "6.2.0", - "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz", - "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==", - "license": "MIT", - "dependencies": { - "ansi-styles": "^4.0.0", - "string-width": "^4.1.0", - "strip-ansi": "^6.0.0" - }, - "engines": { - "node": ">=8" - } - }, "node_modules/wrappy": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", @@ -3412,47 +3241,6 @@ } } }, - "node_modules/y18n": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz", - "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==", - "license": "ISC" - }, - "node_modules/yargs": { - "version": "15.4.1", - "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz", - "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==", - "license": "MIT", - "dependencies": { - "cliui": "^6.0.0", - "decamelize": "^1.2.0", - "find-up": "^4.1.0", - "get-caller-file": "^2.0.1", - "require-directory": "^2.1.1", - "require-main-filename": "^2.0.0", - "set-blocking": "^2.0.0", - "string-width": "^4.2.0", - "which-module": "^2.0.0", - "y18n": "^4.0.0", - "yargs-parser": "^18.1.2" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/yargs-parser": { - "version": "18.1.3", - "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz", - "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==", - "license": "ISC", - "dependencies": { - "camelcase": "^5.0.0", - "decamelize": "^1.2.0" - }, - "engines": { - "node": ">=6" - } - }, "node_modules/yauzl": { "version": "2.10.0", "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz", diff --git a/package.json b/package.json index 53e25a4..2c5db7f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pulse-signage", - "version": "2.5.4", + "version": "2.5.6", "private": false, "description": "Pulse Signage application with MySQL and media storage", "repository": { @@ -28,8 +28,6 @@ "multer": "^2.2.0", "mysql2": "^3.14.3", "puppeteer-core": "^24.16.0", - "qrcode": "^1.5.4", - "qrcode-generator": "^2.0.4", "sharp": "^0.35.3", "ws": "^8.21.0" }, diff --git a/src/auth.js b/src/auth.js index 882689a..d93acb3 100644 --- a/src/auth.js +++ b/src/auth.js @@ -7,6 +7,21 @@ const PASSWORD_KEY_LENGTH = 32; const PASSWORD_DIGEST = 'sha256'; const SESSION_BYTES = 32; +function validatePasswordStrength(password) { + const value = String(password || ''); + const hasLowercase = /[a-z]/.test(value); + const hasUppercase = /[A-Z]/.test(value); + const hasNumber = /[0-9]/.test(value); + const hasSymbol = /[^A-Za-z0-9]/.test(value); + const categoryCount = [hasLowercase, hasUppercase, hasNumber, hasSymbol].filter(Boolean).length; + + if (value.length < 10 || categoryCount < 3) { + return 'Password must be at least 10 characters and include 3 of: uppercase, lowercase, number, and symbol.'; + } + + return ''; +} + function hashPassword(password, salt) { const safePassword = String(password || ''); const safeSalt = salt || crypto.randomBytes(16).toString('hex'); @@ -40,6 +55,7 @@ function hashSessionToken(token) { module.exports = { hashPassword, verifyPassword, + validatePasswordStrength, createSessionToken, hashSessionToken }; \ No newline at end of file diff --git a/src/common.js b/src/common.js index f5a7efb..a90d613 100644 --- a/src/common.js +++ b/src/common.js @@ -37,6 +37,8 @@ module.exports = { slugify: data.slugify, uniqueScreenSlug: data.uniqueScreenSlug, parseJsonSafe: data.parseJsonSafe, + validateMaxLength: data.validateMaxLength, + truncateToMaxLength: data.truncateToMaxLength, fetchAdminData: data.fetchAdminData, fetchPlaylistsPage: data.fetchPlaylistsPage, fetchSlidesPage: data.fetchSlidesPage, @@ -91,6 +93,7 @@ module.exports = { fetchCanvasSizesData: data.fetchCanvasSizesData, fetchCanvasSizeById: data.fetchCanvasSizeById, buildCanvasSizePayload: data.buildCanvasSizePayload, + MAX_CANVAS_SIZE_DIMENSION: data.MAX_CANVAS_SIZE_DIMENSION, buildSlidePayload: data.buildSlidePayload, extractTemplateRegions: data.extractTemplateRegions, buildTemplatePayload: data.buildTemplatePayload, diff --git a/src/data/admin.js b/src/data/admin.js index 5282d00..61bb47e 100644 --- a/src/data/admin.js +++ b/src/data/admin.js @@ -94,7 +94,7 @@ async function fetchSlidesPage(pool, page, pageSize, searchTerm, sortKey, sortDi LEFT JOIN c_canvas_sizes cs ON cs.id = st.canvas_size_id ORDER BY s.id DESC`, countSql: 'SELECT COUNT(*) AS count FROM c_slides', - searchColumns: ['s.title', 'st.name', 's.content_json'], + searchColumns: ['s.title', 'st.name'], searchTerm: searchTerm, sortColumns: { title: 's.title', diff --git a/src/data/announcements.js b/src/data/announcements.js index 786b362..2b62078 100644 --- a/src/data/announcements.js +++ b/src/data/announcements.js @@ -6,6 +6,9 @@ const { DEFAULT_ANNOUNCEMENT_ICON, normalizeAnnouncementIcon: normalizeAnnouncementIconFromConfig } = require('./announcement-icons'); +const { validateMaxLength } = require('./utils'); + +const SHORT_LABEL_MAX_LENGTH = 255; const ANNOUNCEMENT_TYPES = ['lower-third', 'fullscreen', 'top-banner']; const ANNOUNCEMENT_COLORS = ['primary', 'secondary', 'success', 'info', 'warning', 'danger', 'dark', 'light']; @@ -57,7 +60,7 @@ function normalizeAnnouncementScreenIds(value) { function buildAnnouncementPayload(input) { const message = normalizeAnnouncementMessage(input && input.message); - const shortLabel = normalizeAnnouncementShortLabel(input && input.short_label); + const shortLabel = validateMaxLength(normalizeAnnouncementShortLabel(input && input.short_label), SHORT_LABEL_MAX_LENGTH, 'Announcement short description'); const announcementType = normalizeAnnouncementType(input && input.announcement_type); const colorKey = normalizeAnnouncementColor(input && input.color_key); const iconKey = normalizeAnnouncementIconFromConfig(input && input.icon_key); diff --git a/src/data/api-sources.js b/src/data/api-sources.js index 1c05237..c3ac3ef 100644 --- a/src/data/api-sources.js +++ b/src/data/api-sources.js @@ -2,7 +2,12 @@ const http = require('http'); const https = require('https'); -const { fetchPagedRows } = require('./utils'); +const { fetchPagedRows, validateMaxLength } = require('./utils'); + +const NAME_MAX_LENGTH = 255; +const URL_MAX_LENGTH = 1024; +const AUTH_MAX_LENGTH = 255; +const ITEMS_PATH_MAX_LENGTH = 255; function normalizeUpdateIntervalUnit(value) { const unit = String(value || '').trim().toLowerCase(); @@ -171,15 +176,15 @@ function buildApiSourcePayload(req, existingApiSource) { return fallbackValue; } - const name = String(req.body.name || fallback.name || '').trim(); - const apiUrl = String(req.body.api_url || req.body.apiUrl || fallback.api_url || '').trim(); + const name = validateMaxLength(req.body.name || fallback.name || '', NAME_MAX_LENGTH, 'API source name'); + const apiUrl = validateMaxLength(req.body.api_url || req.body.apiUrl || fallback.api_url || '', URL_MAX_LENGTH, 'API source URL'); const authMethod = normalizeAuthMethod(readBodyValue('auth_method', readBodyValue('authMethod', fallback.auth_method || 'none'))); - const authUsername = String(readBodyValue('auth_username', readBodyValue('authUsername', fallback.auth_username || '')) || '').trim(); - const authPassword = String(readBodyValue('auth_password', readBodyValue('authPassword', fallback.auth_password || '')) || ''); - const authBearerToken = String(readBodyValue('auth_bearer_token', readBodyValue('authBearerToken', fallback.auth_bearer_token || '')) || '').trim(); - const authHeaderName = String(readBodyValue('auth_header_name', readBodyValue('authHeaderName', fallback.auth_header_name || 'X-API-Key')) || 'X-API-Key').trim() || 'X-API-Key'; - const authHeaderValue = String(readBodyValue('auth_header_value', readBodyValue('authHeaderValue', fallback.auth_header_value || '')) || '').trim(); - const itemsPath = String(readBodyValue('items_path', readBodyValue('itemsPath', fallback.items_path || '')) || '').trim(); + const authUsername = validateMaxLength(readBodyValue('auth_username', readBodyValue('authUsername', fallback.auth_username || '')) || '', AUTH_MAX_LENGTH, 'API source username'); + const authPassword = validateMaxLength(readBodyValue('auth_password', readBodyValue('authPassword', fallback.auth_password || '')) || '', AUTH_MAX_LENGTH, 'API source password'); + const authBearerToken = validateMaxLength(readBodyValue('auth_bearer_token', readBodyValue('authBearerToken', fallback.auth_bearer_token || '')) || '', AUTH_MAX_LENGTH, 'API source bearer token'); + const authHeaderName = validateMaxLength(readBodyValue('auth_header_name', readBodyValue('authHeaderName', fallback.auth_header_name || 'X-API-Key')) || 'X-API-Key', AUTH_MAX_LENGTH, 'API source header name') || 'X-API-Key'; + const authHeaderValue = validateMaxLength(readBodyValue('auth_header_value', readBodyValue('authHeaderValue', fallback.auth_header_value || '')) || '', AUTH_MAX_LENGTH, 'API source header value'); + const itemsPath = validateMaxLength(readBodyValue('items_path', readBodyValue('itemsPath', fallback.items_path || '')) || '', ITEMS_PATH_MAX_LENGTH, 'API source items path'); const updateIntervalValue = Math.max(1, Number(req.body.update_interval_value || req.body.updateIntervalValue || fallback.update_interval_value || 60)); const updateIntervalUnit = normalizeUpdateIntervalUnit(req.body.update_interval_unit || req.body.updateIntervalUnit || fallback.update_interval_unit || 'minutes'); diff --git a/src/data/canvas-sizes.js b/src/data/canvas-sizes.js index 47d5584..2e9ae01 100644 --- a/src/data/canvas-sizes.js +++ b/src/data/canvas-sizes.js @@ -1,6 +1,7 @@ // Canvas size data access and pagination helpers. const { fetchPagedRows } = require('./utils'); +const MAX_CANVAS_SIZE_DIMENSION = 16384; async function fetchCanvasSizesData(pool) { const [canvasSizes] = await pool.query('SELECT id, name, width, height, created_at, modified_at, created_by, modified_by FROM c_canvas_sizes ORDER BY width ASC, height ASC, name ASC'); @@ -33,10 +34,31 @@ async function fetchCanvasSizeById(pool, id) { return rows[0] || null; } +function readCanvasDimension(rawValue, fallbackValue, fieldName) { + const sourceValue = rawValue !== undefined && rawValue !== null && String(rawValue).trim() !== '' + ? rawValue + : fallbackValue; + const numericValue = Number(sourceValue); + + if (!Number.isFinite(numericValue)) { + const error = new Error('Canvas size ' + fieldName + ' must be a number.'); + error.statusCode = 400; + throw error; + } + + if (numericValue > MAX_CANVAS_SIZE_DIMENSION) { + const error = new Error('Canvas size dimensions must be 16384 or less.'); + error.statusCode = 400; + throw error; + } + + return Math.max(1, numericValue); +} + function buildCanvasSizePayload(req, existingCanvasSize) { const name = String(req.body.name || '').trim(); - const width = Math.max(1, Number(req.body.width || (existingCanvasSize && existingCanvasSize.width) || 0)); - const height = Math.max(1, Number(req.body.height || (existingCanvasSize && existingCanvasSize.height) || 0)); + const width = readCanvasDimension(req.body.width, existingCanvasSize && existingCanvasSize.width, 'width'); + const height = readCanvasDimension(req.body.height, existingCanvasSize && existingCanvasSize.height, 'height'); if (!name) { const error = new Error('Canvas size name is required.'); @@ -55,5 +77,6 @@ module.exports = { fetchCanvasSizesData, fetchCanvasSizesPage, fetchCanvasSizeById, - buildCanvasSizePayload + buildCanvasSizePayload, + MAX_CANVAS_SIZE_DIMENSION }; diff --git a/src/data/index.js b/src/data/index.js index a0dc5b2..463d043 100644 --- a/src/data/index.js +++ b/src/data/index.js @@ -9,14 +9,16 @@ const { fetchApiSourcesData, fetchApiSourcesPage, fetchApiSourceById, fetchApiSo const { fetchRssFeedsData, fetchRssFeedsPage, fetchRssFeedById, fetchRssFeedItemsByFeedId, normalizeRssFeedItem, buildRssFeedPayload, fetchRssFeedItems, replaceRssFeedItems } = require('./rss-feeds'); const { slugify, uniqueScreenSlug, fetchScreenById, fetchScreenEditData, fetchScreenPlayerUrls, fetchScreenPlayerRecord } = require('./screens'); const { fetchTemplateById, fetchTemplatesData, extractTemplateRegions, buildTemplatePayload } = require('./templates'); -const { fetchCanvasSizesData, fetchCanvasSizeById, buildCanvasSizePayload } = require('./canvas-sizes'); +const { fetchCanvasSizesData, fetchCanvasSizeById, buildCanvasSizePayload, MAX_CANVAS_SIZE_DIMENSION } = require('./canvas-sizes'); const { fetchSlideById, buildSlidePayload } = require('./slides'); -const { parseJsonSafe, fetchDuplicateName } = require('./utils'); +const { parseJsonSafe, fetchDuplicateName, validateMaxLength, truncateToMaxLength } = require('./utils'); module.exports = { slugify, uniqueScreenSlug, parseJsonSafe, + validateMaxLength, + truncateToMaxLength, fetchAdminData, fetchPlaylistsPage, fetchSlidesPage, @@ -66,6 +68,7 @@ module.exports = { fetchCanvasSizesData, fetchCanvasSizeById, buildCanvasSizePayload, + MAX_CANVAS_SIZE_DIMENSION, buildSlidePayload, extractTemplateRegions, buildTemplatePayload, diff --git a/src/data/qr-code.js b/src/data/qr-code.js index 5fefedb..ebe7520 100644 --- a/src/data/qr-code.js +++ b/src/data/qr-code.js @@ -1,29 +1,561 @@ -const QRCode = require('qrcode'); +const fs = require('fs'); +const path = require('path'); +const QRCodeStyling = require(path.join(__dirname, '..', 'web', 'public', 'vendor', 'qr-code-styling', 'qr-code-styling.js')); +const puppeteer = require('puppeteer-core'); +const chromiumModule = require('@sparticuz/chromium'); +const QR_PNG_WIDTH = 2048; +const QR_STYLING_SCRIPT_PATH = path.join(__dirname, '..', 'web', 'public', 'vendor', 'qr-code-styling', 'qr-code-styling.js'); +const SYSTEM_CHROMIUM_PATHS = [ + process.env.PUPPETEER_EXECUTABLE_PATH, + process.env.CHROMIUM_PATH, + '/usr/bin/chromium', + '/usr/bin/chromium-browser', + '/usr/local/bin/chromium', + '/snap/bin/chromium' +].filter(Boolean); +const chromium = chromiumModule && typeof chromiumModule.executablePath === 'function' + ? chromiumModule + : chromiumModule && chromiumModule.default && typeof chromiumModule.default.executablePath === 'function' + ? chromiumModule.default + : chromiumModule; +let qrBrowserPromise = null; -async function createQrCodeSvg(value) { - const text = String(value === undefined || value === null ? '' : value).trim(); - if (!text) { - return ''; - } - - return QRCode.toString(text, { - type: 'svg', - margin: 1, - errorCorrectionLevel: 'M' +function escapeXml(value) { + return String(value === undefined || value === null ? '' : value).replace(/[&<>"']/g, function (character) { + return { + '&': '&', + '<': '<', + '>': '>', + '"': '"', + "'": ''' + }[character]; }); } -async function buildQrCodeContent(value) { - const text = String(value === undefined || value === null ? '' : value).trim(); +function serializeNode(node) { + if (!node) { + return ''; + } + if (node.nodeType === 3) { + return escapeXml(node.textContent || ''); + } + + const attributeEntries = Object.keys(node.attributes || {}).map(function (name) { + return name + '="' + escapeXml(node.attributes[name]) + '"'; + }); + if (node.tagName === 'svg' && node.namespaceURI === 'http://www.w3.org/2000/svg' && !Object.prototype.hasOwnProperty.call(node.attributes || {}, 'xmlns')) { + attributeEntries.unshift('xmlns="http://www.w3.org/2000/svg"'); + } + const attributes = attributeEntries.join(' '); + const children = (node.childNodes || []).map(serializeNode).join('') + escapeXml(node.textContent || ''); + return '<' + node.tagName + (attributes ? ' ' + attributes : '') + '>' + children + ''; +} + +function createDomNode(tagName, namespaceUri) { + return { + tagName: tagName, + namespaceURI: namespaceUri || null, + attributes: {}, + childNodes: [], + parentNode: null, + nodeType: 1, + textContent: '', + style: {}, + setAttribute: function (name, value) { + this.attributes[name] = String(value); + }, + appendChild: function (child) { + if (child) { + this.childNodes.push(child); + child.parentNode = this; + } + return child; + }, + removeChild: function (child) { + this.childNodes = this.childNodes.filter(function (node) { return node !== child; }); + return child; + }, + get firstChild() { + return this.childNodes[0] || null; + }, + get outerHTML() { + return serializeNode(this); + } + }; +} + +function createCanvasContext() { + return { + fillStyle: '#000000', + strokeStyle: '#000000', + lineWidth: 1, + beginPath: function () {}, + closePath: function () {}, + clearRect: function () {}, + fillRect: function () {}, + strokeRect: function () {}, + moveTo: function () {}, + lineTo: function () {}, + arc: function () {}, + rect: function () {}, + fill: function () {}, + stroke: function () {}, + save: function () {}, + restore: function () {}, + translate: function () {}, + rotate: function () {}, + scale: function () {}, + setTransform: function () {}, + transform: function () {}, + drawImage: function () {}, + measureText: function (text) { + return { width: String(text === undefined || text === null ? '' : text).length * 8 }; + }, + createLinearGradient: function () { + return { addColorStop: function () {} }; + }, + createRadialGradient: function () { + return { addColorStop: function () {} }; + }, + createPattern: function () { + return null; + }, + getImageData: function () { + return { data: [] }; + }, + putImageData: function () {}, + clip: function () {} + }; +} + +function createCanvasNode() { + const node = createDomNode('canvas', 'http://www.w3.org/1999/xhtml'); + node.width = 0; + node.height = 0; + node.getContext = function () { + return createCanvasContext(); + }; + node.toDataURL = function () { + return ''; + }; + node.toBlob = function (callback) { + if (typeof callback === 'function') { + callback(null); + } + }; + return node; +} + +function createQrStylingWindow() { + const document = { + createElement: function (tagName) { + if (String(tagName || '').toLowerCase() === 'canvas') { + return createCanvasNode(); + } + return createDomNode(tagName, 'http://www.w3.org/1999/xhtml'); + }, + createElementNS: function (namespaceUri, tagName) { + return createDomNode(tagName, namespaceUri); + }, + createTextNode: function (text) { + return { + nodeType: 3, + textContent: String(text === undefined || text === null ? '' : text), + parentNode: null + }; + }, + body: createDomNode('body', 'http://www.w3.org/1999/xhtml'), + head: createDomNode('head', 'http://www.w3.org/1999/xhtml') + }; + + const window = { + document: document, + navigator: { userAgent: 'node' }, + URL: { + createObjectURL: function () { return ''; }, + revokeObjectURL: function () {} + } + }; + + window.window = window; + window.self = window; + window.Image = class { + constructor() { + this.onload = null; + this.onerror = null; + this.width = 1; + this.height = 1; + this.naturalWidth = 1; + this.naturalHeight = 1; + this._src = ''; + } + + set src(value) { + this._src = String(value === undefined || value === null ? '' : value); + if (typeof this.onload === 'function') { + setTimeout(() => this.onload(), 0); + } + } + + get src() { + return this._src; + } + }; + window.HTMLImageElement = window.Image; + + window.XMLSerializer = class { + serializeToString(node) { + return serializeNode(node); + } + }; + + return { window: window, document: document }; +} + +async function renderStyledQrRawData(options, format) { + const previousWindow = global.window; + const previousDocument = global.document; + const previousXMLSerializer = global.XMLSerializer; + const dom = createQrStylingWindow(); + + global.window = dom.window; + global.document = dom.document; + global.XMLSerializer = dom.window.XMLSerializer; + + try { + const qrCode = new QRCodeStyling(options); + const blob = await qrCode.getRawData(format); + if (!blob) { + return ''; + } + + if (typeof blob === 'string') { + return blob; + } + + if (typeof blob.text === 'function') { + return blob.text(); + } + + if (typeof blob.arrayBuffer === 'function') { + const buffer = await blob.arrayBuffer(); + const bytes = new Uint8Array(buffer); + let binary = ''; + for (let index = 0; index < bytes.length; index += 1) { + binary += String.fromCharCode(bytes[index]); + } + return binary; + } + + return ''; + } finally { + global.window = previousWindow; + global.document = previousDocument; + global.XMLSerializer = previousXMLSerializer; + } +} + +function svgToDataUrl(svg) { + const markup = String(svg === undefined || svg === null ? '' : svg).trim(); + if (!markup) { + return ''; + } + + return 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(markup); +} + +function normalizeQrStyleColor(value, fallback) { + const raw = String(value === undefined || value === null ? '' : value).trim(); + return raw || fallback; +} + +function normalizeQrStyleNumber(value, fallback, min, max) { + const parsed = Number(value); + if (!Number.isFinite(parsed)) { + return fallback; + } + + let next = parsed; + if (typeof min === 'number') { + next = Math.max(min, next); + } + if (typeof max === 'number') { + next = Math.min(max, next); + } + return next; +} + +function buildQrStylingOptions(source) { + const text = String(source && source.value === undefined ? '' : source && source.value === null ? '' : source.value || '').trim(); + const qrStyle = source && typeof source === 'object' ? source : {}; + const dotsGradient = qrStyle.qr_dots_color_mode === 'gradient' ? { + type: String(qrStyle.qr_dots_gradient_type || 'linear').trim() || 'linear', + rotation: normalizeQrStyleNumber(qrStyle.qr_dots_gradient_rotation, 0, undefined, undefined), + colorStops: [ + { offset: 0, color: normalizeQrStyleColor(qrStyle.qr_dots_gradient_color_1, normalizeQrStyleColor(qrStyle.qr_dots_color, '#000000')) }, + { offset: 1, color: normalizeQrStyleColor(qrStyle.qr_dots_gradient_color_2, '#ffffff') } + ] + } : null; + const cornersSquareGradient = qrStyle.qr_corners_square_color_mode === 'gradient' ? { + type: String(qrStyle.qr_corners_square_gradient_type || 'linear').trim() || 'linear', + rotation: normalizeQrStyleNumber(qrStyle.qr_corners_square_gradient_rotation, 0, undefined, undefined), + colorStops: [ + { offset: 0, color: normalizeQrStyleColor(qrStyle.qr_corners_square_gradient_color_1, normalizeQrStyleColor(qrStyle.qr_corners_square_color, '#000000')) }, + { offset: 1, color: normalizeQrStyleColor(qrStyle.qr_corners_square_gradient_color_2, '#ffffff') } + ] + } : null; + const cornersDotGradient = qrStyle.qr_corners_dot_color_mode === 'gradient' ? { + type: String(qrStyle.qr_corners_dot_gradient_type || 'linear').trim() || 'linear', + rotation: normalizeQrStyleNumber(qrStyle.qr_corners_dot_gradient_rotation, 0, undefined, undefined), + colorStops: [ + { offset: 0, color: normalizeQrStyleColor(qrStyle.qr_corners_dot_gradient_color_1, normalizeQrStyleColor(qrStyle.qr_corners_dot_color, '#000000')) }, + { offset: 1, color: normalizeQrStyleColor(qrStyle.qr_corners_dot_gradient_color_2, '#ffffff') } + ] + } : null; + const backgroundGradient = qrStyle.qr_background_color_mode === 'gradient' ? { + type: String(qrStyle.qr_background_gradient_type || 'linear').trim() || 'linear', + rotation: normalizeQrStyleNumber(qrStyle.qr_background_gradient_rotation, 0, undefined, undefined), + colorStops: [ + { offset: 0, color: normalizeQrStyleColor(qrStyle.qr_background_gradient_color_1, normalizeQrStyleColor(qrStyle.qr_background_color, '#ffffff')) }, + { offset: 1, color: normalizeQrStyleColor(qrStyle.qr_background_gradient_color_2, '#ffffff') } + ] + } : null; + + return { + width: QR_PNG_WIDTH, + height: QR_PNG_WIDTH, + type: 'canvas', + data: text, + margin: normalizeQrStyleNumber(qrStyle.qr_margin, 10, 0, undefined), + qrOptions: {}, + dotsOptions: { + type: String(qrStyle.qr_dots_type || 'square').trim() || 'square', + color: normalizeQrStyleColor(qrStyle.qr_dots_color, '#000000'), + gradient: dotsGradient || undefined + }, + cornersSquareOptions: { + type: String(qrStyle.qr_corners_square_type || 'square').trim() || 'square', + color: normalizeQrStyleColor(qrStyle.qr_corners_square_color, '#000000'), + gradient: cornersSquareGradient || undefined + }, + cornersDotOptions: { + type: String(qrStyle.qr_corners_dot_type || 'square').trim() || 'square', + color: normalizeQrStyleColor(qrStyle.qr_corners_dot_color, '#000000'), + gradient: cornersDotGradient || undefined + }, + backgroundOptions: { + color: qrStyle.qr_background_transparent ? 'transparent' : normalizeQrStyleColor(qrStyle.qr_background_color, '#ffffff'), + gradient: backgroundGradient || undefined + }, + image: String(qrStyle.qr_image || '').trim() || undefined, + imageOptions: { + hideBackgroundDots: Boolean(qrStyle.qr_image_hide_background_dots), + imageSize: normalizeQrStyleNumber(qrStyle.qr_image_size, 0.4, 0, 1), + margin: normalizeQrStyleNumber(qrStyle.qr_image_margin, 5, 0, undefined) + } + }; +} + +function getQrBrowser() { + if (qrBrowserPromise) { + return qrBrowserPromise; + } + + qrBrowserPromise = (async function () { + let executablePath = SYSTEM_CHROMIUM_PATHS.find(function (candidate) { + return fs.existsSync(candidate); + }) || ''; + const usingSystemChromium = Boolean(executablePath); + + if (!executablePath && chromium && typeof chromium.executablePath === 'function') { + executablePath = await chromium.executablePath(); + } + + if (!executablePath || !fs.existsSync(executablePath)) { + throw new Error('Chromium executable was not found.'); + } + + return puppeteer.launch({ + args: usingSystemChromium + ? [ + '--no-sandbox', + '--disable-setuid-sandbox', + '--disable-dev-shm-usage', + '--disable-gpu' + ] + : puppeteer.defaultArgs({ + args: chromium && chromium.args ? chromium.args : [], + headless: 'shell' + }), + defaultViewport: usingSystemChromium + ? { width: QR_PNG_WIDTH, height: QR_PNG_WIDTH, deviceScaleFactor: 1 } + : chromium && chromium.defaultViewport ? chromium.defaultViewport : null, + executablePath: executablePath, + headless: usingSystemChromium ? true : 'shell' + }); + })(); + + return qrBrowserPromise; +} + +async function blobToDataUrl(blob) { + if (!blob) { + return ''; + } + + if (typeof blob === 'string') { + return blob; + } + + if (typeof blob.arrayBuffer === 'function') { + const buffer = await blob.arrayBuffer(); + const bytes = new Uint8Array(buffer); + let binary = ''; + for (let index = 0; index < bytes.length; index += 1) { + binary += String.fromCharCode(bytes[index]); + } + return 'data:' + String(blob.type || 'image/png') + ';base64,' + Buffer.from(binary, 'binary').toString('base64'); + } + + if (typeof blob.text === 'function') { + return blob.text(); + } + + return ''; +} + +async function createStyledQrCodeDataUrl(value) { + const source = value && typeof value === 'object' ? value : { value: value }; + const options = buildQrStylingOptions(source); + if (!options.data) { + return ''; + } + + return svgToDataUrl(await createStyledQrCodeSvg(options.data)); +} + +async function createStyledQrCodeSvg(value) { + const source = value && typeof value === 'object' ? value : { value: value }; + const options = buildQrStylingOptions(source); + if (!options.data) { + return ''; + } + + return renderStyledQrRawData(options, 'svg'); +} + +async function createQrCodeDataUrlPlain(value) { + return createStyledQrCodeDataUrl(value); +} + +async function createQrCodeSvg(value) { + return createStyledQrCodeSvg(value); +} + +async function createQrCodeDataUrl(value) { + return createStyledQrCodeDataUrl(value); +} + +async function buildQrCodeContent(value, options) { + const source = value && typeof value === 'object' ? value : { value: value }; + const forcePreviewRefresh = Boolean(options && options.forcePreviewRefresh); + const text = String(source.value === undefined || source.value === null ? '' : source.value).trim(); + const hasBooleanField = function (key) { + return Object.prototype.hasOwnProperty.call(source, key); + }; + const margin = Number(source.qr_margin); + const normalizeHex = function (value) { + const raw = String(value === undefined || value === null ? '' : value).trim(); + return raw || undefined; + }; + const normalizeNumber = function (value, min, max, round) { + const parsed = Number(value); + if (!Number.isFinite(parsed)) { + return undefined; + } + + let next = parsed; + if (round) { + next = Math.round(next); + } + if (typeof min === 'number') { + next = Math.max(min, next); + } + if (typeof max === 'number') { + next = Math.min(max, next); + } + return next; + }; + const style = { + qr_margin: Number.isFinite(margin) && margin >= 0 ? Math.round(margin) : undefined, + qr_border_radius: Number.isFinite(Number(source.qr_border_radius)) ? Math.max(0, Math.round(Number(source.qr_border_radius))) : undefined, + qr_background_color: String(source.qr_background_color === undefined || source.qr_background_color === null ? '' : source.qr_background_color).trim() || undefined, + qr_background_transparent: hasBooleanField('qr_background_transparent') ? Boolean(source.qr_background_transparent) : undefined, + qr_background_color_mode: String(source.qr_background_color_mode === undefined || source.qr_background_color_mode === null ? '' : source.qr_background_color_mode).trim() || undefined, + qr_background_gradient_type: String(source.qr_background_gradient_type === undefined || source.qr_background_gradient_type === null ? '' : source.qr_background_gradient_type).trim() || undefined, + qr_background_gradient_rotation: normalizeNumber(source.qr_background_gradient_rotation), + qr_background_gradient_color_1: normalizeHex(source.qr_background_gradient_color_1), + qr_background_gradient_color_2: normalizeHex(source.qr_background_gradient_color_2), + qr_dots_color: String(source.qr_dots_color === undefined || source.qr_dots_color === null ? '' : source.qr_dots_color).trim() || undefined, + qr_dots_type: String(source.qr_dots_type === undefined || source.qr_dots_type === null ? '' : source.qr_dots_type).trim() || undefined, + qr_dots_color_mode: String(source.qr_dots_color_mode === undefined || source.qr_dots_color_mode === null ? '' : source.qr_dots_color_mode).trim() || undefined, + qr_dots_gradient_type: String(source.qr_dots_gradient_type === undefined || source.qr_dots_gradient_type === null ? '' : source.qr_dots_gradient_type).trim() || undefined, + qr_dots_gradient_rotation: normalizeNumber(source.qr_dots_gradient_rotation), + qr_dots_gradient_color_1: normalizeHex(source.qr_dots_gradient_color_1), + qr_dots_gradient_color_2: normalizeHex(source.qr_dots_gradient_color_2), + qr_corners_square_color: String(source.qr_corners_square_color === undefined || source.qr_corners_square_color === null ? '' : source.qr_corners_square_color).trim() || undefined, + qr_corners_square_type: String(source.qr_corners_square_type === undefined || source.qr_corners_square_type === null ? '' : source.qr_corners_square_type).trim() || undefined, + qr_corners_square_color_mode: String(source.qr_corners_square_color_mode === undefined || source.qr_corners_square_color_mode === null ? '' : source.qr_corners_square_color_mode).trim() || undefined, + qr_corners_square_gradient_type: String(source.qr_corners_square_gradient_type === undefined || source.qr_corners_square_gradient_type === null ? '' : source.qr_corners_square_gradient_type).trim() || undefined, + qr_corners_square_gradient_rotation: normalizeNumber(source.qr_corners_square_gradient_rotation), + qr_corners_square_gradient_color_1: normalizeHex(source.qr_corners_square_gradient_color_1), + qr_corners_square_gradient_color_2: normalizeHex(source.qr_corners_square_gradient_color_2), + qr_corners_dot_color: String(source.qr_corners_dot_color === undefined || source.qr_corners_dot_color === null ? '' : source.qr_corners_dot_color).trim() || undefined, + qr_corners_dot_type: String(source.qr_corners_dot_type === undefined || source.qr_corners_dot_type === null ? '' : source.qr_corners_dot_type).trim() || undefined, + qr_corners_dot_color_mode: String(source.qr_corners_dot_color_mode === undefined || source.qr_corners_dot_color_mode === null ? '' : source.qr_corners_dot_color_mode).trim() || undefined, + qr_corners_dot_gradient_type: String(source.qr_corners_dot_gradient_type === undefined || source.qr_corners_dot_gradient_type === null ? '' : source.qr_corners_dot_gradient_type).trim() || undefined, + qr_corners_dot_gradient_rotation: normalizeNumber(source.qr_corners_dot_gradient_rotation), + qr_corners_dot_gradient_color_1: normalizeHex(source.qr_corners_dot_gradient_color_1), + qr_corners_dot_gradient_color_2: normalizeHex(source.qr_corners_dot_gradient_color_2), + qr_image: String(source.qr_image === undefined || source.qr_image === null ? '' : source.qr_image).trim() || undefined, + qr_image_size: Number.isFinite(Number(source.qr_image_size)) ? Math.max(0, Math.min(1, Number(source.qr_image_size))) : undefined, + qr_image_margin: Number.isFinite(Number(source.qr_image_margin)) ? Math.max(0, Math.round(Number(source.qr_image_margin))) : undefined, + qr_image_hide_background_dots: hasBooleanField('qr_image_hide_background_dots') ? Boolean(source.qr_image_hide_background_dots) : undefined + }; const content = { type: 'qr-code', value: text }; - if (text) { - const svg = await createQrCodeSvg(text); - if (svg) { - content.qr_svg = svg; + Object.keys(style).forEach((key) => { + if (style[key] !== undefined) { + content[key] = style[key]; + } + }); + + content.qr_background_use_gradient = content.qr_background_gradient_type && content.qr_background_gradient_type !== 'none'; + content.qr_dots_use_gradient = content.qr_dots_gradient_type && content.qr_dots_gradient_type !== 'none'; + content.qr_corners_square_use_gradient = content.qr_corners_square_gradient_type && content.qr_corners_square_gradient_type !== 'none'; + content.qr_corners_dot_use_gradient = content.qr_corners_dot_gradient_type && content.qr_corners_dot_gradient_type !== 'none'; + + const svg = String(source.qr_svg === undefined || source.qr_svg === null ? '' : source.qr_svg).trim(); + if (svg) { + content.qr_svg = svg; + } + + const preview = forcePreviewRefresh ? '' : String(source.qr_preview === undefined || source.qr_preview === null ? '' : source.qr_preview).trim(); + if (preview) { + content.qr_preview = preview; + } + + if (text && !content.qr_preview) { + const generatedSvg = await createQrCodeSvg(text); + if (generatedSvg) { + content.qr_svg = generatedSvg; + } + const generatedDataUrl = await createStyledQrCodeDataUrl(content); + if (generatedDataUrl) { + content.qr_preview = generatedDataUrl; } } @@ -32,5 +564,8 @@ async function buildQrCodeContent(value) { module.exports = { createQrCodeSvg, + createStyledQrCodeSvg, + createStyledQrCodeDataUrl, + createQrCodeDataUrl, buildQrCodeContent }; \ No newline at end of file diff --git a/src/data/rss-feeds.js b/src/data/rss-feeds.js index 7d85d67..490056b 100644 --- a/src/data/rss-feeds.js +++ b/src/data/rss-feeds.js @@ -2,7 +2,10 @@ const http = require('http'); const https = require('https'); -const { fetchPagedRows } = require('./utils'); +const { fetchPagedRows, validateMaxLength } = require('./utils'); + +const NAME_MAX_LENGTH = 255; +const URL_MAX_LENGTH = 1024; function normalizeUpdateIntervalUnit(value) { const unit = String(value || '').trim().toLowerCase(); @@ -255,8 +258,8 @@ async function replaceRssFeedItems(connection, rssFeedId, items) { function buildRssFeedPayload(req, existingRssFeed) { const fallback = existingRssFeed || {}; - const name = String(req.body.name || fallback.name || '').trim(); - const feedUrl = String(req.body.feed_url || req.body.feedUrl || fallback.feed_url || '').trim(); + const name = validateMaxLength(req.body.name || fallback.name || '', NAME_MAX_LENGTH, 'RSS feed name'); + const feedUrl = validateMaxLength(req.body.feed_url || req.body.feedUrl || fallback.feed_url || '', URL_MAX_LENGTH, 'RSS feed URL'); const updateIntervalValue = Math.max(1, Number(req.body.update_interval_value || req.body.updateIntervalValue || fallback.update_interval_value || 60)); const updateIntervalUnit = normalizeUpdateIntervalUnit(req.body.update_interval_unit || req.body.updateIntervalUnit || fallback.update_interval_unit || 'minutes'); const itemLimit = Math.max(1, Number(req.body.item_limit || req.body.itemLimit || fallback.item_limit || 1)); diff --git a/src/data/schedules.js b/src/data/schedules.js index 80472ef..b1091a4 100644 --- a/src/data/schedules.js +++ b/src/data/schedules.js @@ -1,6 +1,9 @@ // Timetable group and entry data access helpers. -const { fetchPagedRows } = require('./utils'); +const { fetchPagedRows, validateMaxLength } = require('./utils'); + +const NAME_MAX_LENGTH = 255; +const DESCRIPTION_MAX_LENGTH = 255; function normalizeDisplayMode(value) { const mode = String(value || 'upcoming').trim().toLowerCase(); @@ -95,8 +98,8 @@ async function fetchTimetableEntriesByGroupId(pool, timetableGroupId) { function buildTimetableGroupPayload(req, existingTimetableGroup) { const fallback = existingTimetableGroup || {}; - const name = String(req.body.name || fallback.name || '').trim(); - const shortDescription = String(req.body.short_description || req.body.shortDescription || fallback.short_description || '').trim(); + const name = validateMaxLength(req.body.name || fallback.name || '', NAME_MAX_LENGTH, 'Timetable group name'); + const shortDescription = validateMaxLength(req.body.short_description || req.body.shortDescription || fallback.short_description || '', DESCRIPTION_MAX_LENGTH, 'Timetable group description'); if (!name) { const error = new Error('Timetable group name is required.'); diff --git a/src/data/slides.js b/src/data/slides.js index daab94f..5f6cca0 100644 --- a/src/data/slides.js +++ b/src/data/slides.js @@ -1,7 +1,9 @@ // Slide data access helpers, including rich-text normalization and payload building. const { fetchTemplateById } = require('./templates'); -const { parseJsonSafe } = require('./utils'); +const { parseJsonSafe, validateMaxLength } = require('./utils'); + +const TITLE_MAX_LENGTH = 255; const { buildQrCodeContent } = require('./qr-code'); const ALLOWED_RICH_TEXT_TAGS = ['b', 'strong', 'i', 'em', 'u', 'br', 'p', 'div', 'ul', 'ol', 'li']; @@ -112,9 +114,130 @@ function getTextRegionStyle(body, region, existingContent) { }; } -function buildTemplateContent(template, body, filesByField, existingContent) { +function getQrRegionStyle(body, region, existingContent) { + const existing = existingContent && existingContent[region.region_key] ? existingContent[region.region_key] : {}; + const styleKeys = [ + 'qr_margin', + 'qr_background_color', + 'qr_background_transparent', + 'qr_background_color_mode', + 'qr_background_gradient_type', + 'qr_background_gradient_rotation', + 'qr_background_gradient_color_1', + 'qr_background_gradient_color_2', + 'qr_dots_color', + 'qr_dots_type', + 'qr_dots_color_mode', + 'qr_dots_gradient_type', + 'qr_dots_gradient_rotation', + 'qr_dots_gradient_color_1', + 'qr_dots_gradient_color_2', + 'qr_corners_square_color', + 'qr_corners_square_type', + 'qr_corners_square_color_mode', + 'qr_corners_square_gradient_type', + 'qr_corners_square_gradient_rotation', + 'qr_corners_square_gradient_color_1', + 'qr_corners_square_gradient_color_2', + 'qr_corners_dot_color', + 'qr_corners_dot_type', + 'qr_corners_dot_color_mode', + 'qr_corners_dot_gradient_type', + 'qr_corners_dot_gradient_rotation', + 'qr_corners_dot_gradient_color_1', + 'qr_corners_dot_gradient_color_2', + 'qr_image', + 'qr_image_size', + 'qr_image_margin', + 'qr_image_hide_background_dots', + 'qr_border_radius' + ]; + const style = {}; + + styleKeys.forEach((key) => { + const fieldNames = [`region_${key}_${region.id}`, `${key}_${region.id}`]; + let fieldName = fieldNames[0]; + let hasSubmittedValue = false; + let submitted; + + for (let index = 0; index < fieldNames.length; index += 1) { + const candidate = fieldNames[index]; + if (Object.prototype.hasOwnProperty.call(body || {}, candidate)) { + fieldName = candidate; + hasSubmittedValue = true; + submitted = body[candidate]; + break; + } + } + + const value = String(submitted || '').trim(); + + if (key === 'qr_background_transparent' || key === 'qr_image_hide_background_dots') { + style[key] = hasSubmittedValue; + return; + } + + if (key === 'qr_background_color_mode' || key === 'qr_dots_color_mode' || key === 'qr_corners_square_color_mode' || key === 'qr_corners_dot_color_mode' || key === 'qr_background_gradient_type' || key === 'qr_dots_gradient_type' || key === 'qr_corners_square_gradient_type' || key === 'qr_corners_dot_gradient_type') { + style[key] = value === 'none' ? 'none' : value; + return; + } + + if (key === 'qr_image') { + style[key] = value; + return; + } + + if (submitted === undefined) { + if (existing[key] !== undefined && existing[key] !== null && String(existing[key]).trim() !== '') { + style[key] = existing[key]; + } + return; + } + + if (value !== '') { + if (key === 'qr_margin') { + const parsedMargin = Number(value); + if (Number.isFinite(parsedMargin)) { + style[key] = Math.max(0, Math.round(parsedMargin)); + } + return; + } + + if (key === 'qr_image_size') { + const parsedSize = Number(value); + if (Number.isFinite(parsedSize)) { + style[key] = Math.max(0, Math.min(1, parsedSize)); + } + return; + } + + if (key === 'qr_image_margin' || key === 'qr_border_radius') { + const parsedImageMargin = Number(value); + if (Number.isFinite(parsedImageMargin)) { + style[key] = Math.max(0, Math.round(parsedImageMargin)); + } + return; + } + + style[key] = value; + } + }); + + return style; +} + +async function getRssFeedItemCount(pool, feedId) { + const [rows] = await pool.query( + 'SELECT COUNT(*) AS count FROM i_rss_feed_items WHERE rss_feed_id = ?', + [feedId] + ); + + return Number(rows && rows[0] && rows[0].count) || 0; +} + +async function buildTemplateContent(pool, template, body, filesByField, existingContent) { const content = {}; - template.regions.forEach((region) => { + for (const region of template.regions) { if (region.region_type === 'image') { const uploaded = filesByField[`region_image_${region.id}`]; const existing = body[`existing_region_image_${region.id}`]; @@ -144,12 +267,22 @@ function buildTemplateContent(template, body, filesByField, existingContent) { value: submitted === undefined ? current : String(submitted || '').trim() }; } else if (region.region_type === 'qr-code') { + const uploadedImage = filesByField[`region_qr_image_${region.id}`]; const submitted = body[`region_qr_code_${region.id}`]; + const submittedSvg = body[`region_qr_svg_${region.id}`]; + const submittedPreview = body[`region_qr_preview_${region.id}`]; + const existingImage = body[`existing_region_qr_image_${region.id}`]; const current = existingContent && existingContent[region.region_key] ? existingContent[region.region_key] : {}; const nextValue = submitted === undefined ? String(current.value !== undefined ? current.value : current.qr_code || '').trim() : String(submitted || '').trim(); + const qrStyle = getQrRegionStyle(body, region, existingContent); + delete qrStyle.qr_image; content[region.region_key] = { type: 'qr-code', - value: nextValue + value: nextValue, + qr_svg: submittedSvg === undefined ? String(current.qr_svg || '').trim() : String(submittedSvg || '').trim(), + qr_preview: submittedPreview === undefined ? String(current.qr_preview || '').trim() : String(submittedPreview || '').trim(), + qr_image: uploadedImage ? `/media/uploads/${uploadedImage.filename}` : String(existingImage === undefined ? String(current.qr_image || '').trim() : String(existingImage || '').trim()), + ...qrStyle }; } else if (region.region_type === 'rtmp') { const submitted = body[`region_rtmp_${region.id}`]; @@ -182,11 +315,13 @@ function buildTemplateContent(template, body, filesByField, existingContent) { const feedId = body[`region_rss_feed_id_${region.id}`]; const itemNumber = body[`region_rss_item_number_${region.id}`]; const parsedItemNumber = Math.max(1, Number(itemNumber || current.item_number || 1)); + const normalizedFeedId = feedId === undefined || feedId === null || feedId === '' ? Number(current.feed_id || 0) : Number(feedId); + const itemCount = normalizedFeedId > 0 ? Math.max(1, await getRssFeedItemCount(pool, normalizedFeedId) || 1) : 1; content[region.region_key] = { type: 'rss', value: stripEditorOnlyMarkup(normalizeEditorMarkup(submitted === undefined ? String(current.value || '') : String(submitted || ''))), feed_id: feedId === undefined || feedId === null || feedId === '' ? (current.feed_id || null) : Number(feedId), - item_number: Number.isFinite(parsedItemNumber) && parsedItemNumber > 0 ? parsedItemNumber : 1, + item_number: Math.min(itemCount, Number.isFinite(parsedItemNumber) && parsedItemNumber > 0 ? parsedItemNumber : 1), variable_name: 'item', font_family: style.font_family, font_size: style.font_size, @@ -258,12 +393,12 @@ function buildTemplateContent(template, body, filesByField, existingContent) { font_color: style.font_color }; } - }); + } return content; } async function buildSlidePayload(pool, req, existingSlide) { - const title = String(req.body.title || '').trim(); + const title = validateMaxLength(req.body.title || '', TITLE_MAX_LENGTH, 'Slide title'); const templateId = req.body.template_id ? Number(req.body.template_id) : null; const filesByField = getFilesByField(req.files || []); const template = templateId ? await fetchTemplateById(pool, templateId) : null; @@ -282,7 +417,7 @@ async function buildSlidePayload(pool, req, existingSlide) { } if (template) { - const content = buildTemplateContent(template, req.body, filesByField, existingContent); + const content = await buildTemplateContent(pool, template, req.body, filesByField, existingContent); await Promise.all(Object.keys(content).map(async function (regionKey) { const region = template.regions.find(function (item) { return String(item.region_key || '').trim() === regionKey; @@ -291,7 +426,7 @@ async function buildSlidePayload(pool, req, existingSlide) { return; } - content[regionKey] = await buildQrCodeContent(content[regionKey].value); + content[regionKey] = await buildQrCodeContent(content[regionKey]); })); return { diff --git a/src/data/templates.js b/src/data/templates.js index 17d5d08..87f375b 100644 --- a/src/data/templates.js +++ b/src/data/templates.js @@ -1,8 +1,11 @@ // Template data access helpers and region normalization logic. -const { parseJsonSafe, readFormArray } = require('./utils'); +const { parseJsonSafe, readFormArray, validateMaxLength } = require('./utils'); const animationPresets = require('../web/public/js/templates/animation-presets'); +const TEMPLATE_NAME_MAX_LENGTH = 255; +const REGION_NAME_MAX_LENGTH = 255; + function sanitizeBackgroundColor(value) { const raw = String(value || '').trim(); if (/^#[0-9a-fA-F]{6}$/.test(raw) || /^#[0-9a-fA-F]{3}$/.test(raw)) { @@ -137,10 +140,11 @@ function extractTemplateRegions(body) { if (Array.isArray(parsed)) { return parsed.map((region) => { const regionType = normalizeTemplateRegionType(region.region_type); + const regionName = validateMaxLength(region.region_name || region.region_key || region.label || '', REGION_NAME_MAX_LENGTH, 'Region name'); return { - region_key: String(region.region_name || region.region_key || region.label || '').trim(), + region_key: regionName, region_type: regionType, - label: String(region.region_name || region.label || region.region_key || '').trim(), + label: regionName, lock_ratio: normalizeTemplateRegionLockRatio(region.lock_ratio), animation_json: normalizeTemplateRegionAnimationConfig(region.animation_json), x: Number(region.x || 0), @@ -167,7 +171,7 @@ function extractTemplateRegions(body) { const regions = []; for (let i = 0; i < keys.length; i += 1) { - const name = String(names[i] || keys[i] || labels[i] || '').trim(); + const name = validateMaxLength(names[i] || keys[i] || labels[i] || '', REGION_NAME_MAX_LENGTH, 'Region name'); const rawType = String(types[i] || 'text').trim(); const regionType = normalizeTemplateRegionType(rawType); if (!name) { @@ -236,7 +240,7 @@ function getFilesByField(files) { } async function buildTemplatePayload(pool, req, existingTemplate) { - const name = String(req.body.name || '').trim(); + const name = validateMaxLength(req.body.name || '', TEMPLATE_NAME_MAX_LENGTH, 'Template name'); const canvasSizeId = req.body.canvas_size_id ? Number(req.body.canvas_size_id) : null; let canvasWidth = Math.max(1, Number((existingTemplate && existingTemplate.canvas_size_width) || 1920)); let canvasHeight = Math.max(1, Number((existingTemplate && existingTemplate.canvas_size_height) || 1080)); diff --git a/src/data/utils.js b/src/data/utils.js index 3411050..55b4091 100644 --- a/src/data/utils.js +++ b/src/data/utils.js @@ -24,6 +24,26 @@ function readFormArray(body, key) { return [body[key]]; } +function validateMaxLength(value, maxLength, fieldName) { + const text = String(value || '').trim(); + const limit = Number(maxLength); + if (Number.isFinite(limit) && limit > 0 && text.length > limit) { + const error = new Error(fieldName + ' must be ' + limit + ' characters or fewer.'); + error.statusCode = 400; + throw error; + } + return text; +} + +function truncateToMaxLength(value, maxLength) { + const text = String(value || '').trim(); + const limit = Number(maxLength); + if (!Number.isFinite(limit) || limit <= 0 || text.length <= limit) { + return text; + } + return text.slice(0, limit); +} + function normalizePageNumber(value) { const pageNumber = Math.floor(Number(value) || 1); return Math.max(1, pageNumber); @@ -201,6 +221,75 @@ function findTopLevelWhereIndex(sql) { return lastWhereIndex; } +function findTopLevelGroupByIndex(sql) { + const text = String(sql || ''); + let depth = 0; + let inSingleQuote = false; + let inDoubleQuote = false; + let inBacktick = false; + let lastGroupByIndex = -1; + + for (let index = 0; index < text.length; index += 1) { + const character = text[index]; + const previousCharacter = index > 0 ? text[index - 1] : ''; + + if (inSingleQuote) { + if (character === '\'' && previousCharacter !== '\\') { + inSingleQuote = false; + } + continue; + } + + if (inDoubleQuote) { + if (character === '"' && previousCharacter !== '\\') { + inDoubleQuote = false; + } + continue; + } + + if (inBacktick) { + if (character === '`') { + inBacktick = false; + } + continue; + } + + if (character === '\'') { + inSingleQuote = true; + continue; + } + + if (character === '"') { + inDoubleQuote = true; + continue; + } + + if (character === '`') { + inBacktick = true; + continue; + } + + if (character === '(') { + depth += 1; + continue; + } + + if (character === ')' && depth > 0) { + depth -= 1; + continue; + } + + if (depth === 0 && /[gG]/.test(character)) { + const remaining = text.slice(index); + if (/^group\s+by\b/i.test(remaining)) { + lastGroupByIndex = index; + } + } + } + + return lastGroupByIndex; +} + function buildSearchFilter(searchColumns, searchTerm) { const columns = Array.isArray(searchColumns) ? searchColumns.map(function (column) { return String(column || '').trim(); @@ -238,17 +327,24 @@ async function fetchPagedRows(pool, options) { throw new Error('fetchPagedRows requires selectSql and countSql.'); } const orderByIndex = findTopLevelOrderByIndex(selectSql); + const groupByIndex = findTopLevelGroupByIndex(selectSql); let baseSelectSql = selectSql; let orderBySql = ''; + let groupBySql = ''; if (orderByIndex >= 0) { baseSelectSql = selectSql.slice(0, orderByIndex).trim(); orderBySql = selectSql.slice(orderByIndex).trim(); } + if (groupByIndex >= 0 && (orderByIndex < 0 || groupByIndex < orderByIndex)) { + baseSelectSql = selectSql.slice(0, groupByIndex).trim(); + groupBySql = selectSql.slice(groupByIndex, orderByIndex >= 0 ? orderByIndex : selectSql.length).trim(); + } + const hasTopLevelWhere = findTopLevelWhereIndex(baseSelectSql) >= 0; const searchClause = searchFilter.clause ? (hasTopLevelWhere ? searchFilter.clause.replace(/^\s*WHERE\s+/i, ' AND ') : searchFilter.clause) : ''; - const filteredSelectSql = `${baseSelectSql}${searchClause}`; + const filteredSelectSql = `${baseSelectSql}${searchClause}${groupBySql ? ' ' + groupBySql : ''}`; const countQuery = searchFilter.clause ? `SELECT COUNT(*) AS count FROM (${filteredSelectSql}) AS filtered_rows` : countSql; @@ -294,10 +390,13 @@ async function fetchDuplicateName(pool, tableName, name, excludeId, columnName) module.exports = { parseJsonSafe, readFormArray, + validateMaxLength, + truncateToMaxLength, normalizePageNumber, normalizeSortDirection, buildSortOrderClause, findTopLevelOrderByIndex, + findTopLevelGroupByIndex, buildSearchFilter, fetchPagedRows, fetchDuplicateName diff --git a/src/player.js b/src/player.js index 40050f8..448192c 100644 --- a/src/player.js +++ b/src/player.js @@ -46,8 +46,7 @@ async function start() { playerRuntime: playerRuntime, onboardingStore: onboardingStore, playerPublicBaseUrl: PLAYER_PUBLIC_BASE_URL, - playerInternalBaseUrl: PLAYER_INTERNAL_BASE_URL, - QRCode: require('qrcode') + playerInternalBaseUrl: PLAYER_INTERNAL_BASE_URL }); registerPlayerRoutes(app, { pool: pool, @@ -77,7 +76,6 @@ async function start() { async function syncDatabaseState() { try { await common.ensureSchema(pool, { mediaDir: MEDIA_DIR }); - await common.bootstrapDatabase(pool); if (playerRuntime.snapshotAllConnections().length > 0) { await common.pruneStaleOnboardingDevices(pool); diff --git a/src/player/announcement-templates/lower-third.template.html b/src/player/announcement-templates/lower-third.template.html index a47e5e9..d4a402a 100644 --- a/src/player/announcement-templates/lower-third.template.html +++ b/src/player/announcement-templates/lower-third.template.html @@ -99,7 +99,6 @@ display: inline-flex; align-items: center; gap: 2.5rem; - min-width: 100%; width: max-content; backface-visibility: hidden; will-change: transform; @@ -148,7 +147,7 @@ transform: translate3d(0, 0, 0); } to { - transform: translate3d(-50%, 0, 0); + transform: translate3d(calc(-1 * var(--announcement-scroll-distance, 0px)), 0, 0); } } @@ -178,21 +177,10 @@ } var track = root.querySelector('.player-announcement__message-track'); - if (!track) { + if (!track || typeof window.initPlayerAnnouncementMarquee !== 'function') { return; } - if (track.dataset.marqueeMeasured === 'true') { - return; - } - - var rate = Number(track.getAttribute('data-announcement-marquee-rate') || 44) || 44; - var singlePassWidth = Math.max(1, track.scrollWidth / 2); - var durationSeconds = Math.max(8, singlePassWidth / rate); - var durationValue = durationSeconds.toFixed(2) + 's'; - - track.dataset.marqueeMeasured = 'true'; - track.style.setProperty('--announcement-scroll-duration', durationValue); - track.style.animationDuration = durationValue; + window.initPlayerAnnouncementMarquee(track, { container: root.querySelector('.player-announcement__message') || root }); }()); \ No newline at end of file diff --git a/src/player/announcement-templates/top-banner.template.html b/src/player/announcement-templates/top-banner.template.html index dbe6447..a8f1c92 100644 --- a/src/player/announcement-templates/top-banner.template.html +++ b/src/player/announcement-templates/top-banner.template.html @@ -101,7 +101,6 @@ display: inline-flex; align-items: center; gap: 2.5rem; - min-width: 100%; width: max-content; backface-visibility: hidden; will-change: transform; @@ -150,7 +149,7 @@ transform: translate3d(0, 0, 0); } to { - transform: translate3d(-50%, 0, 0); + transform: translate3d(calc(-1 * var(--announcement-scroll-distance, 0px)), 0, 0); } } @@ -180,21 +179,10 @@ } var track = root.querySelector('.player-announcement__message-track'); - if (!track) { + if (!track || typeof window.initPlayerAnnouncementMarquee !== 'function') { return; } - if (track.dataset.marqueeMeasured === 'true') { - return; - } - - var rate = Number(track.getAttribute('data-announcement-marquee-rate') || 44) || 44; - var singlePassWidth = Math.max(1, track.scrollWidth / 2); - var durationSeconds = Math.max(8, singlePassWidth / rate); - var durationValue = durationSeconds.toFixed(2) + 's'; - - track.dataset.marqueeMeasured = 'true'; - track.style.setProperty('--announcement-scroll-duration', durationValue); - track.style.animationDuration = durationValue; + window.initPlayerAnnouncementMarquee(track, { container: root.querySelector('.player-announcement__message') || root }); }()); \ No newline at end of file diff --git a/src/player/onboarding/index.js b/src/player/onboarding/index.js index 77cac9c..df4256b 100644 --- a/src/player/onboarding/index.js +++ b/src/player/onboarding/index.js @@ -1,6 +1,7 @@ // Player onboarding routes and signup flow helpers. const { isClientNameAvailable, withClientNameReservation } = require('#src/data/client-name-check'); +const { createStyledQrCodeSvg } = require('#src/data/qr-code'); const { getSharedSecret, verifyPageAuthToken } = require('#src/request-auth'); const { isTransientDbError } = require('./store'); @@ -222,11 +223,10 @@ function registerPlayerOnboardingRoutes(app, options) { const pool = options && options.pool ? options.pool : null; const common = options && options.common ? options.common : null; const playerRuntime = options && options.playerRuntime ? options.playerRuntime : null; - const QRCode = options && options.QRCode ? options.QRCode : null; const onboardingStore = options && options.onboardingStore ? options.onboardingStore : null; - if (!app || !pool || !common || !playerRuntime || !QRCode) { - throw new Error('registerPlayerOnboardingRoutes requires app, pool, common, playerRuntime, and QRCode.'); + if (!app || !pool || !common || !playerRuntime) { + throw new Error('registerPlayerOnboardingRoutes requires app, pool, common, and playerRuntime.'); } const sharedSecret = getSharedSecret(); @@ -303,7 +303,7 @@ function registerPlayerOnboardingRoutes(app, options) { return res.status(400).json({ error: 'Device ID is required' }); } const onboardingUrl = `${getPublicBaseUrl(req, options && options.playerPublicBaseUrl)}/onboard?deviceId=${encodeURIComponent(deviceId)}`; - const svg = await QRCode.toString(onboardingUrl, { type: 'svg', margin: 1, errorCorrectionLevel: 'M' }); + const svg = await createStyledQrCodeSvg({ value: onboardingUrl, qr_margin: 20 }); res.set('Content-Type', 'image/svg+xml; charset=utf-8'); res.set('Cache-Control', 'no-store'); res.send(svg); diff --git a/src/player/playlist.js b/src/player/playlist.js index b61d053..3a58a47 100644 --- a/src/player/playlist.js +++ b/src/player/playlist.js @@ -3,6 +3,7 @@ const crypto = require('crypto'); const fs = require('fs'); const path = require('path'); +const { createStyledQrCodeDataUrl } = require('../data/qr-code'); function createPlayerPlaylistService(options) { const pool = options && options.pool ? options.pool : null; @@ -56,6 +57,10 @@ function createPlayerPlaylistService(options) { await fs.promises.writeFile(filePath, JSON.stringify(payload, null, 2), 'utf8'); } + async function createQrPreviewDataUrl(value) { + return createStyledQrCodeDataUrl(value); + } + async function buildScreenPlaylist(slug) { try { const [screenRows] = await pool.query('SELECT id, name, slug, playlist_id, created_at, modified_at, created_by, modified_by FROM d_screens WHERE slug = ?', [slug]); @@ -150,12 +155,13 @@ function createPlayerPlaylistService(options) { } } - const slides = slideRows.map(function (slide) { + const slides = await Promise.all(slideRows.map(async function (slide) { const storedDuration = Number(slide.duration_seconds || 0); const videoDuration = slide.use_video_duration ? getVideoRegionDurationSeconds(slide.content_json) : null; const disableAudio = slide.disable_audio === undefined || slide.disable_audio === null ? true : Boolean(slide.disable_audio); const videoCacheBust = String(slide.modified_at || slide.content_json || slide.id || ''); const content = common.parseJsonSafe(slide.content_json) || {}; + const qrBackfillTasks = []; Object.keys(content).forEach(function (key) { const region = content[key]; if (region && typeof region === 'object') { @@ -168,6 +174,27 @@ function createPlayerPlaylistService(options) { region.cache_bust = videoCacheBust; } }); + + Object.keys(content).forEach(function (key) { + const region = content[key]; + if (!region || typeof region !== 'object' || String(region.type || '').trim().toLowerCase() !== 'qr-code') { + return; + } + + if (region.qr_preview && /^data:image\//i.test(String(region.qr_preview || '').trim())) { + return; + } + + qrBackfillTasks.push(createQrPreviewDataUrl(region.value).then(function (preview) { + if (preview) { + region.qr_preview = preview; + } + return null; + }).catch(function () { + return null; + })); + }); + await Promise.all(qrBackfillTasks); return { id: slide.id, title: slide.title, @@ -180,7 +207,7 @@ function createPlayerPlaylistService(options) { template: slide.template_id ? templatesById[slide.template_id] || null : null, content: content }; - }); + })); let rssFeeds = []; if (typeof common.fetchRssFeedsData === 'function' && typeof common.fetchRssFeedItemsByFeedId === 'function') { diff --git a/src/player/public/css/player.css b/src/player/public/css/player.css index 872ab37..4fe8725 100644 --- a/src/player/public/css/player.css +++ b/src/player/public/css/player.css @@ -116,6 +116,8 @@ body.thumbnail-preview .player-offline-banner { display: block; background: #fff; border-radius: 18px; + padding: 16px; + box-sizing: border-box; } .onboarding-form { diff --git a/src/player/public/js/player-announcement-templates.js b/src/player/public/js/player-announcement-templates.js index 9255263..c77361a 100644 --- a/src/player/public/js/player-announcement-templates.js +++ b/src/player/public/js/player-announcement-templates.js @@ -54,12 +54,68 @@ }); } + function getComputedGapWidth(track) { + if (!track || !window.getComputedStyle) { + return 0; + } + + var computedStyle = window.getComputedStyle(track); + var gapValue = String(computedStyle.columnGap || computedStyle.gap || '0').trim(); + var gap = Number.parseFloat(gapValue); + return Number.isFinite(gap) ? gap : 0; + } + + function getElementWidth(element) { + if (!element || !element.getBoundingClientRect) { + return 0; + } + + return Math.max(0, element.getBoundingClientRect().width || 0); + } + + function initPlayerAnnouncementMarquee(track, options) { + if (!track || track.dataset.marqueeMeasured === 'true') { + return; + } + + var settings = options || {}; + var rate = Number(settings.rate || track.getAttribute('data-announcement-marquee-rate') || 44) || 44; + var textSelector = String(settings.textSelector || '.player-announcement__message-text').trim() || '.player-announcement__message-text'; + var textNodes = Array.prototype.slice.call(track.querySelectorAll(textSelector)); + if (!textNodes.length) { + return; + } + + var container = settings.container || track.parentElement || track; + var containerWidth = Math.max(1, getElementWidth(container) || 0); + var gapWidth = getComputedGapWidth(track); + var firstItemWidth = Math.max(1, getElementWidth(textNodes[0]) || 0); + var cycleWidth = Math.max(1, firstItemWidth + gapWidth); + var minimumTrackWidth = Math.max(containerWidth + cycleWidth, cycleWidth * 2); + var cloneIndex = 0; + + while (getElementWidth(track) < minimumTrackWidth && cloneIndex < 8) { + var clone = textNodes[cloneIndex % textNodes.length].cloneNode(true); + clone.setAttribute('aria-hidden', 'true'); + track.appendChild(clone); + cloneIndex += 1; + } + + var durationSeconds = Math.max(8, cycleWidth / rate); + var durationValue = durationSeconds.toFixed(2) + 's'; + + track.dataset.marqueeMeasured = 'true'; + track.style.setProperty('--announcement-scroll-distance', cycleWidth.toFixed(2) + 'px'); + track.style.setProperty('--announcement-scroll-duration', durationValue); + track.style.animationDuration = durationValue; + } + function renderPlayerAnnouncementMarkup(announcement) { var normalizedType = normalizeAnnouncementType(announcement && announcement.announcement_type); var colorKey = normalizeAnnouncementColor(announcement && announcement.color_key); var colorTokens = getAnnouncementColorTokens(colorKey); var iconKey = normalizeAnnouncementIcon(announcement && announcement.icon_key); - var text = escapeHtml(String(announcement && announcement.message || '').trim()).replace(/\n/g, '
'); + var text = escapeHtml(String(announcement && announcement.message || '').trim()).replace(/[\r\n]+/g, ' '); var titleText = escapeHtml(String(announcement && announcement.short_label || 'Announcement').trim() || 'Announcement'); var templates = window.playerAnnouncementTemplates || {}; var templateName = normalizedType === 'fullscreen' ? 'fullscreen' : normalizedType === 'top-banner' ? 'topBanner' : 'lowerThird'; @@ -77,4 +133,5 @@ } window.renderPlayerAnnouncementMarkup = renderPlayerAnnouncementMarkup; + window.initPlayerAnnouncementMarquee = initPlayerAnnouncementMarquee; })(); \ No newline at end of file diff --git a/src/player/regions/qr-code.js b/src/player/regions/qr-code.js index d692b87..da537bc 100644 --- a/src/player/regions/qr-code.js +++ b/src/player/regions/qr-code.js @@ -3,14 +3,18 @@ var registry = window.pulsePlayerRegionTypes; function renderQrCodeRegion(region, regionContent) { - var svg = String(regionContent && regionContent.qr_svg || '').trim(); - if (!svg) { + var borderRadius = Math.max(0, Math.round(Number(regionContent && regionContent.qr_border_radius || 0))); + var radiusStyle = borderRadius > 0 ? 'border-radius:' + borderRadius + 'px;overflow:hidden;' : ''; + var preview = String(regionContent && regionContent.qr_preview || '').trim(); + + if (!preview) { return ''; } - return '
QR code
'; + return '
QR code
'; } registry.register('qr-code', { - renderRegion: renderQrCodeRegion + renderRegion: renderQrCodeRegion, + initRegion: function () {} }); \ No newline at end of file diff --git a/src/player/regions/text.js b/src/player/regions/text.js index 3b17b19..e2b235b 100644 --- a/src/player/regions/text.js +++ b/src/player/regions/text.js @@ -40,7 +40,7 @@ function renderTextRegion(region, regionContent) { var fontFamily = sanitizeFontFamily(regionContent.font_family || region.fontFamily || defaultStyle.font_family); var fontSize = sanitizeFontSize(regionContent.font_size || region.fontSize || defaultStyle.font_size); var fontColor = sanitizeTextColor(regionContent.font_color || region.fontColor || defaultStyle.font_color); - var contentStyle = 'width:' + region.pixelWidth + 'px;height:' + region.pixelHeight + 'px;transform:scale(' + region.canvasScale + ');transform-origin:top left;' + (fontFamily ? 'font-family:' + escapeHtml(fontFamily) + ';' : '') + 'font-size:' + fontSize + 'px;color:' + escapeHtml(fontColor) + ';'; + var contentStyle = 'width:' + region.pixelWidth + 'px;height:' + region.pixelHeight + 'px;transform:scale(' + region.canvasScale + ');transform-origin:top left;line-height:1.5;' + (fontFamily ? 'font-family:' + escapeHtml(fontFamily) + ';' : '') + 'font-size:' + fontSize + 'px;color:' + escapeHtml(fontColor) + ';'; var renderedBody = renderEditorJsContent(rawValue); return renderedBody ? '
' + renderedBody + '
' : ''; } diff --git a/src/player/render-helpers.js b/src/player/render-helpers.js index 864adee..12a1196 100644 --- a/src/player/render-helpers.js +++ b/src/player/render-helpers.js @@ -442,8 +442,9 @@ function getPlayerRegionScriptPaths() { function getPlayerRegionScripts() { const sharedPlaceholderUtilsPath = path.join(__dirname, '..', 'web', 'public', 'js', 'shared', 'placeholder-utils.js'); + const sharedQrSvgUtilsPath = path.join(__dirname, '..', 'web', 'public', 'js', 'shared', 'qr-code-svg.js'); const playerRegionScriptPaths = getPlayerRegionScriptPaths(); - const scriptPaths = [sharedPlaceholderUtilsPath].concat(playerRegionScriptPaths); + const scriptPaths = [sharedPlaceholderUtilsPath, sharedQrSvgUtilsPath].concat(playerRegionScriptPaths); const statSignature = scriptPaths.map(function (filePath) { return fs.statSync(filePath).mtimeMs; }).join('|'); diff --git a/src/rbac.js b/src/rbac.js index d39bf90..99d5918 100644 --- a/src/rbac.js +++ b/src/rbac.js @@ -2,202 +2,215 @@ const PERMISSION_SECTIONS = [ { - key: 'dashboard', + sectionName: 'Main navigation', order: 10, - name: 'Dashboard', - sectionName: 'Main navigation', - actions: [ - { key: 'read', name: 'Read', description: 'Access the dashboard overview.' }, - { key: 'allow', name: 'Allow', description: 'Send global player commands.' } + permissions: [ + { + key: 'dashboard', + order: 10, + name: 'Dashboard', + permissions: [ + { key: 'read', name: 'Read', description: 'Access the dashboard overview.' }, + { key: 'allow', name: 'Allow', description: 'Send global player commands.' } + ] + }, + { + key: 'clients', + order: 20, + name: 'Connected clients', + permissions: [ + { key: 'read', name: 'Read', description: 'View connected player clients and live status.' }, + { key: 'allow', name: 'Allow', description: 'Use the connected client command buttons.' } + ] + } ] }, { - key: 'clients', + sectionName: 'Content', order: 20, - name: 'Connected clients', - sectionName: 'Main navigation', - actions: [ - { key: 'read', name: 'Read', description: 'View connected player clients and live status.' }, - { key: 'allow', name: 'Allow', description: 'Use the connected client command buttons.' } + permissions: [ + { + key: 'screens', + order: 10, + name: 'Screens', + permissions: [ + { key: 'read', name: 'Read', description: 'View the screen list and open screen details.' }, + { key: 'create', name: 'Create', description: 'Create new screens.' }, + { key: 'update', name: 'Update', description: 'Update screens.' }, + { key: 'delete', name: 'Delete', description: 'Delete screens.' } + ] + }, + { + key: 'playlists', + order: 20, + name: 'Playlists', + permissions: [ + { key: 'read', name: 'Read', description: 'View playlists and playlist contents.' }, + { key: 'create', name: 'Create', description: 'Create new playlists.' }, + { key: 'update', name: 'Update', description: 'Update playlists and playlist slides.' }, + { key: 'delete', name: 'Delete', description: 'Delete playlists.' } + ] + }, + { + key: 'slides', + order: 30, + name: 'Slides', + permissions: [ + { key: 'read', name: 'Read', description: 'View slides.' }, + { key: 'create', name: 'Create', description: 'Create new slides.' }, + { key: 'update', name: 'Update', description: 'Update slide content.' }, + { key: 'delete', name: 'Delete', description: 'Delete slides.' } + ] + }, + { + key: 'templates', + order: 40, + name: 'Slide templates', + permissions: [ + { key: 'read', name: 'Read', description: 'View slide templates.' }, + { key: 'create', name: 'Create', description: 'Create new slide templates.' }, + { key: 'update', name: 'Update', description: 'Update slide templates.' }, + { key: 'delete', name: 'Delete', description: 'Delete slide templates.' } + ] + }, + { + key: 'canvas-sizes', + order: 50, + name: 'Canvas sizes', + permissions: [ + { key: 'read', name: 'Read', description: 'View canvas sizes.' }, + { key: 'create', name: 'Create', description: 'Create new canvas sizes.' }, + { key: 'update', name: 'Update', description: 'Update canvas sizes.' }, + { key: 'delete', name: 'Delete', description: 'Delete canvas sizes.' } + ] + }, + { + key: 'announcements', + order: 60, + name: 'Announcements', + permissions: [ + { key: 'read', name: 'Read', description: 'View announcements.' }, + { key: 'create', name: 'Create', description: 'Create new announcements.' }, + { key: 'update', name: 'Update', description: 'Update announcements.' }, + { key: 'delete', name: 'Delete', description: 'Delete announcements.' } + ] + } ] }, { - key: 'screens', + sectionName: 'Data Sources', order: 30, - name: 'Screens', - sectionName: 'Content', - actions: [ - { key: 'read', name: 'Read', description: 'View the screen list and open screen details.' }, - { key: 'create', name: 'Create', description: 'Create new screens.' }, - { key: 'update', name: 'Update', description: 'Update screens.' }, - { key: 'delete', name: 'Delete', description: 'Delete screens.' } + permissions: [ + { + key: 'rss-feeds', + order: 10, + name: 'RSS feeds', + permissions: [ + { key: 'read', name: 'Read', description: 'View configured RSS feeds.' }, + { key: 'create', name: 'Create', description: 'Create new RSS feeds.' }, + { key: 'update', name: 'Update', description: 'Update RSS feeds.' }, + { key: 'delete', name: 'Delete', description: 'Delete RSS feeds.' } + ] + }, + { + key: 'api-sources', + order: 20, + name: 'API sources', + permissions: [ + { key: 'read', name: 'Read', description: 'View configured API sources.' }, + { key: 'create', name: 'Create', description: 'Create new API sources.' }, + { key: 'update', name: 'Update', description: 'Update API sources.' }, + { key: 'delete', name: 'Delete', description: 'Delete API sources.' } + ] + }, + { + key: 'timetables', + order: 30, + name: 'Timetables', + permissions: [ + { key: 'read', name: 'Read', description: 'View configured timetable groups.' }, + { key: 'create', name: 'Create', description: 'Create new timetable groups.' }, + { key: 'update', name: 'Update', description: 'Update timetable groups and entries.' }, + { key: 'delete', name: 'Delete', description: 'Delete timetable groups.' } + ] + } ] }, { - key: 'playlists', + sectionName: 'Settings', order: 40, - name: 'Playlists', - sectionName: 'Content', - actions: [ - { key: 'read', name: 'Read', description: 'View playlists and playlist contents.' }, - { key: 'create', name: 'Create', description: 'Create new playlists.' }, - { key: 'update', name: 'Update', description: 'Update playlists and playlist slides.' }, - { key: 'delete', name: 'Delete', description: 'Delete playlists.' } - ] - }, - { - key: 'slides', - order: 50, - name: 'Slides', - sectionName: 'Content', - actions: [ - { key: 'read', name: 'Read', description: 'View slides.' }, - { key: 'create', name: 'Create', description: 'Create new slides.' }, - { key: 'update', name: 'Update', description: 'Update slide content.' }, - { key: 'delete', name: 'Delete', description: 'Delete slides.' } - ] - }, - { - key: 'templates', - order: 60, - name: 'Slide templates', - sectionName: 'Content', - actions: [ - { key: 'read', name: 'Read', description: 'View slide templates.' }, - { key: 'create', name: 'Create', description: 'Create new slide templates.' }, - { key: 'update', name: 'Update', description: 'Update slide templates.' }, - { key: 'delete', name: 'Delete', description: 'Delete slide templates.' } - ] - }, - { - key: 'canvas-sizes', - order: 70, - name: 'Canvas sizes', - sectionName: 'Content', - actions: [ - { key: 'read', name: 'Read', description: 'View canvas sizes.' }, - { key: 'create', name: 'Create', description: 'Create new canvas sizes.' }, - { key: 'update', name: 'Update', description: 'Update canvas sizes.' }, - { key: 'delete', name: 'Delete', description: 'Delete canvas sizes.' } - ] - }, - { - key: 'announcements', - order: 80, - name: 'Announcements', - sectionName: 'Content', - actions: [ - { key: 'read', name: 'Read', description: 'View announcements.' }, - { key: 'create', name: 'Create', description: 'Create new announcements.' }, - { key: 'update', name: 'Update', description: 'Update announcements.' }, - { key: 'delete', name: 'Delete', description: 'Delete announcements.' } - ] - }, - { - key: 'rss-feeds', - order: 90, - name: 'RSS feeds', - sectionName: 'Data Sources', - actions: [ - { key: 'read', name: 'Read', description: 'View configured RSS feeds.' }, - { key: 'create', name: 'Create', description: 'Create new RSS feeds.' }, - { key: 'update', name: 'Update', description: 'Update RSS feeds.' }, - { key: 'delete', name: 'Delete', description: 'Delete RSS feeds.' } - ] - }, - { - key: 'api-sources', - order: 100, - name: 'API sources', - sectionName: 'Data Sources', - actions: [ - { key: 'read', name: 'Read', description: 'View configured API sources.' }, - { key: 'create', name: 'Create', description: 'Create new API sources.' }, - { key: 'update', name: 'Update', description: 'Update API sources.' }, - { key: 'delete', name: 'Delete', description: 'Delete API sources.' } - ] - }, - { - key: 'timetables', - order: 110, - name: 'Timetables', - sectionName: 'Data Sources', - actions: [ - { key: 'read', name: 'Read', description: 'View configured timetable groups.' }, - { key: 'create', name: 'Create', description: 'Create new timetable groups.' }, - { key: 'update', name: 'Update', description: 'Update timetable groups and entries.' }, - { key: 'delete', name: 'Delete', description: 'Delete timetable groups.' } - ] - }, - { - key: 'users', - order: 120, - name: 'Users', - sectionName: 'Settings', - actions: [ - { key: 'read', name: 'Read', description: 'View users and role assignments.' }, - { key: 'create', name: 'Create', description: 'Create new users.' }, - { key: 'update', name: 'Update', description: 'Update users, passwords, and role assignments.' }, - { key: 'delete', name: 'Delete', description: 'Delete users.' } - ] - }, - { - key: 'rbac', - order: 130, - name: 'Roles and permissions', - sectionName: 'Settings', - actions: [ - { key: 'read', name: 'Read', description: 'View roles and permissions.' }, - { key: 'create', name: 'Create', description: 'Create new roles.' }, - { key: 'update', name: 'Update', description: 'Update role details and permissions.' }, - { key: 'delete', name: 'Delete', description: 'Delete roles.' } - ] - }, - { - key: 'fonts', - order: 140, - name: 'Fonts', - sectionName: 'Settings', - actions: [ - { key: 'read', name: 'Read', description: 'View managed fonts.' }, - { key: 'create', name: 'Create', description: 'Upload managed fonts.' }, - { key: 'delete', name: 'Delete', description: 'Remove managed fonts.' } - ] - }, - { - key: 'background-tasks', - order: 150, - name: 'Task Queue', - sectionName: 'Settings', - actions: [ - { key: 'read', name: 'Read', description: 'View queued background tasks.' }, - { key: 'allow', name: 'Allow', description: 'Manage queued background tasks and clear finished items.' } - ] - }, - { - key: 'scheduled-tasks', - order: 160, - name: 'Scheduled tasks', - sectionName: 'Settings', - actions: [ - { key: 'read', name: 'Read', description: 'View scheduled refresh tasks.' }, - { key: 'allow', name: 'Allow', description: 'Run scheduled refreshes manually.' } + permissions: [ + { + key: 'users', + order: 10, + name: 'Users', + permissions: [ + { key: 'read', name: 'Read', description: 'View users and role assignments.' }, + { key: 'create', name: 'Create', description: 'Create new users.' }, + { key: 'update', name: 'Update', description: 'Update users, passwords, and role assignments.' }, + { key: 'delete', name: 'Delete', description: 'Delete users.' } + ] + }, + { + key: 'rbac', + order: 20, + name: 'Roles and permissions', + permissions: [ + { key: 'read', name: 'Read', description: 'View roles and permissions.' }, + { key: 'create', name: 'Create', description: 'Create new roles.' }, + { key: 'update', name: 'Update', description: 'Update role details and permissions.' }, + { key: 'delete', name: 'Delete', description: 'Delete roles.' } + ] + }, + { + key: 'fonts', + order: 30, + name: 'Fonts', + permissions: [ + { key: 'read', name: 'Read', description: 'View managed fonts.' }, + { key: 'create', name: 'Create', description: 'Upload managed fonts.' }, + { key: 'delete', name: 'Delete', description: 'Remove managed fonts.' } + ] + }, + { + key: 'background-tasks', + order: 40, + name: 'Task Queue', + permissions: [ + { key: 'read', name: 'Read', description: 'View queued background tasks.' }, + { key: 'allow', name: 'Allow', description: 'Manage queued background tasks and clear finished items.' } + ] + }, + { + key: 'scheduled-tasks', + order: 50, + name: 'Scheduled tasks', + permissions: [ + { key: 'read', name: 'Read', description: 'View scheduled refresh tasks.' }, + { key: 'allow', name: 'Allow', description: 'Run scheduled refreshes manually.' } + ] + } ] } ]; const PERMISSIONS = PERMISSION_SECTIONS.flatMap(function (section) { - return section.actions.map(function (action) { - return { - key: `${section.key}.${action.key}`, - name: section.name, - sectionOrder: section.order, - actionName: action.name, - sectionName: section.sectionName, - sectionKey: section.key, - actionKey: action.key, - description: action.description - }; + return (Array.isArray(section.permissions) ? section.permissions : []).flatMap(function (resource) { + return (Array.isArray(resource.permissions) ? resource.permissions : []).map(function (action, index) { + return { + key: `${resource.key}.${action.key}`, + name: resource.name, + sectionOrder: section.order, + actionName: action.name, + permissionOrder: index + 1, + sectionName: section.sectionName, + resourceKey: resource.key, + resourceOrder: resource.order, + resourceName: resource.name, + actionKey: action.key, + description: action.description + }; + }); }); }); diff --git a/src/web.js b/src/web.js index 03f3949..d3872b8 100644 --- a/src/web.js +++ b/src/web.js @@ -6,7 +6,7 @@ const multer = require('multer'); const fs = require('fs'); const crypto = require('crypto'); const common = require('./common'); -const { verifyPassword, createSessionToken, hashSessionToken, hashPassword } = require('#src/auth'); +const { verifyPassword, createSessionToken, hashSessionToken, hashPassword, validatePasswordStrength } = require('#src/auth'); const pages = require('#src/web/pages'); const registerMiddleware = require('#src/web/middleware'); const { createBackgroundTaskQueue } = require('#src/web/lib/background-tasks/queue'); @@ -131,6 +131,7 @@ async function start() { formatDashboardDate: formatDashboardDate, getAuditUserId: getAuditUserId, hashPassword: hashPassword, + validatePasswordStrength: validatePasswordStrength, readArrayField: readArrayField, rbacData: rbacData, fetchOrderedPlaylistSlides: fetchOrderedPlaylistSlides, diff --git a/src/web/handlebars.js b/src/web/handlebars.js index 7b484a9..438699f 100644 --- a/src/web/handlebars.js +++ b/src/web/handlebars.js @@ -28,6 +28,15 @@ function registerGeneralHelpers(Handlebars) { return `${text.slice(0, Math.max(0, limit - 1)).trimEnd()}…`; }); + + Handlebars.registerHelper('textLengthAttrs', function (maxLength) { + const limit = Number(maxLength); + if (!Number.isFinite(limit) || limit < 1) { + return ''; + } + + return new Handlebars.SafeString(`maxlength="${Handlebars.escapeExpression(String(Math.floor(limit)))}" data-limit-text-length`); + }); } // URL helpers for generating links and external URL checks. @@ -112,12 +121,14 @@ function registerActionHelpers(Handlebars) { label: String(hash.deleteLabel || 'Delete'), className: String(hash.deleteClass || 'btn btn-danger'), url: String(hash.deleteUrl || '').trim(), + formId: String(hash.deleteFormId || '').trim(), confirmMessage: String(hash.deleteConfirmMessage || '').trim(), disabled: hash.deleteDisabled === undefined ? false : String(hash.deleteDisabled).toLowerCase() !== 'false', title: String(hash.deleteTitle || '') }; const resolvedDeleteUrl = deleteAction.url || (!deleteAction.disabled && saveUrl ? saveUrl.replace(/\/+$/, '') + '/delete' : ''); + const resolvedDeleteFormId = deleteAction.formId || ''; if (!formId) { return ''; @@ -141,10 +152,11 @@ function registerActionHelpers(Handlebars) { } if (showDelete && (deleteAction.disabled || resolvedDeleteUrl)) { - const deleteActionAttr = resolvedDeleteUrl ? ` data-delete-action-url="${escape(resolvedDeleteUrl)}"` : ''; + const deleteActionAttr = resolvedDeleteUrl && !resolvedDeleteFormId ? ` data-delete-action-url="${escape(resolvedDeleteUrl)}"` : ''; + const deleteFormAttr = resolvedDeleteFormId ? ` form="${escape(resolvedDeleteFormId)}"` : ''; const confirmAttr = deleteAction.confirmMessage ? ` data-confirm-message="${escape(deleteAction.confirmMessage)}"` : ''; const titleAttr = deleteAction.disabled && deleteAction.title ? ` title="${escape(deleteAction.title)}"` : ''; - parts.push(``); + parts.push(``); } parts.push(''); diff --git a/src/web/lib/auth/session.js b/src/web/lib/auth/session.js index 61eda43..e8edc08 100644 --- a/src/web/lib/auth/session.js +++ b/src/web/lib/auth/session.js @@ -2,6 +2,35 @@ const { normalizePermissionKeys } = require('#src/rbac'); +function getRequestOrigin(req) { + const forwardedProto = String(req && req.headers && req.headers['x-forwarded-proto'] || '').trim().split(',')[0]; + const protocol = forwardedProto || (req && req.socket && req.socket.encrypted ? 'https' : 'http'); + const forwardedHost = String(req && req.headers && req.headers['x-forwarded-host'] || '').trim().split(',')[0]; + const host = forwardedHost || String(req && req.headers && req.headers.host || '').trim(); + return host ? `${protocol}://${host}`.replace(/\/$/, '') : 'http://localhost'; +} + +function normalizeReturnToPath(value, baseUrl) { + const rawValue = String(value || '').trim(); + if (!rawValue) { + return ''; + } + + const normalizedBaseUrl = String(baseUrl || '').trim().replace(/\/$/, '') || 'http://localhost'; + + try { + const parsed = new URL(rawValue, normalizedBaseUrl); + const baseOrigin = new URL(normalizedBaseUrl).origin; + if (parsed.origin !== baseOrigin) { + return ''; + } + + return parsed.pathname + parsed.search + parsed.hash; + } catch (_error) { + return rawValue.charAt(0) === '/' ? rawValue : ''; + } +} + function createSessionService(options) { const sessionCookieName = String(options && options.sessionCookieName || '').trim(); const sessionMaxAgeMs = Number(options && options.sessionMaxAgeMs); @@ -142,7 +171,8 @@ function createSessionService(options) { return next(); } setAuthMessageCookie(res, 'Please sign in to continue.'); - res.redirect('/login'); + const returnTo = normalizeReturnToPath(req && (req.originalUrl || req.url || req.path), getRequestOrigin(req)); + res.redirect(returnTo ? '/login?returnTo=' + encodeURIComponent(returnTo) : '/login'); } return { @@ -154,8 +184,9 @@ function createSessionService(options) { consumeAuthMessageCookie: consumeAuthMessageCookie, loadCurrentUser: loadCurrentUser, createUserSession: createUserSession, - requireAuth: requireAuth + requireAuth: requireAuth, + getRequestOrigin: getRequestOrigin }; } -module.exports = { createSessionService }; \ No newline at end of file + module.exports = { createSessionService, normalizeReturnToPath, getRequestOrigin }; \ No newline at end of file diff --git a/src/web/lib/media/slide-thumbnails.js b/src/web/lib/media/slide-thumbnails.js index 6a4f8a2..e8580f9 100644 --- a/src/web/lib/media/slide-thumbnails.js +++ b/src/web/lib/media/slide-thumbnails.js @@ -115,9 +115,11 @@ function buildRegionInnerHtml(region, regionContent, baseUrl) { } if (regionType === 'qr-code') { - const src = String(regionContent.qr_svg || rawValue || regionContent.qr_code || '').trim(); + const src = String(regionContent.qr_preview || '').trim(); + const borderRadius = Math.max(0, Math.round(Number(regionContent.qr_border_radius || 0))); + const radiusStyle = borderRadius > 0 ? ' style="border-radius:' + borderRadius + 'px;overflow:hidden;"' : ''; return src - ? '' + escapeHtml(region.label || region.region_key || 'qr code') + '' + ? '' + escapeHtml(region.label || region.region_key || 'qr code') + '' : ''; } diff --git a/src/web/middleware.js b/src/web/middleware.js index fd819bd..eff0b12 100644 --- a/src/web/middleware.js +++ b/src/web/middleware.js @@ -2,7 +2,6 @@ const express = require('express'); const fs = require('fs'); -const path = require('path'); module.exports = function registerMiddleware(app, deps) { const pool = deps.pool; @@ -12,12 +11,10 @@ module.exports = function registerMiddleware(app, deps) { const uploadsDir = deps.UPLOADS_DIR; const thumbnailsDir = deps.THUMBNAILS_DIR; const assetDir = deps.ASSET_DIR; - const qrcodeGeneratorDir = path.join(__dirname, '..', '..', 'node_modules', 'qrcode-generator', 'dist'); app.use(express.urlencoded({ extended: true })); app.use(express.json()); app.use('/assets', express.static(assetDir)); - app.use('/assets/vendor/qrcode-generator', express.static(qrcodeGeneratorDir)); app.use('/media', express.static(mediaDir)); fs.mkdirSync(uploadsDir, { recursive: true }); fs.mkdirSync(thumbnailsDir, { recursive: true }); diff --git a/src/web/public/css/theme-custom.css b/src/web/public/css/theme-custom.css index ebd03f9..5294ce8 100644 --- a/src/web/public/css/theme-custom.css +++ b/src/web/public/css/theme-custom.css @@ -259,6 +259,10 @@ opacity: 0.84; } +.rbac-permissions-table tbody tr:last-child > * { + border-bottom-width: 0; +} + .template-designer-form--previewing .region-item [disabled], .template-designer-form--previewing .template-details-card [disabled], .template-designer-form--previewing .template-options-card [disabled], @@ -270,15 +274,33 @@ position: relative; } +.announcement-type-picker { + position: relative; +} + .announcement-icon-picker__toggle { display: flex; align-items: center; gap: 0.75rem; width: 100%; - min-height: calc(1.5em + 0.75rem + 2px); + min-height: calc(2.375rem + 2px); padding: 0.375rem 0.75rem; border: 1px solid var(--bs-border-color); - border-radius: 0.375rem; + border-radius: 0.875rem; + background: var(--bs-body-bg); + color: var(--bs-body-color); + text-align: left; +} + +.announcement-type-picker__toggle { + display: flex; + align-items: center; + gap: 0.75rem; + width: 100%; + min-height: calc(2.375rem + 2px); + padding: 0.375rem 0.75rem; + border: 1px solid var(--bs-border-color); + border-radius: 0.875rem; background: var(--bs-body-bg); color: var(--bs-body-color); text-align: left; @@ -289,23 +311,73 @@ box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25); } +.announcement-type-picker__toggle:focus-visible { + outline: 0; + box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25); +} + .announcement-icon-picker__toggle-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; - border-radius: 0.5rem; + border-radius: 0.7rem; background: rgba(var(--bs-primary-rgb), 0.1); color: var(--bs-primary); font-size: 1rem; flex: 0 0 auto; } -.announcement-icon-picker__toggle-label { +.announcement-type-picker__toggle-icon { + display: inline-flex; + align-items: center; + justify-content: center; + width: 1.75rem; + height: 1.75rem; + border-radius: 0.7rem; + background: rgba(var(--bs-primary-rgb), 0.1); + color: var(--bs-primary); + font-size: 1rem; + flex: 0 0 auto; +} + +.announcement-icon-picker__toggle-content { + display: flex; + flex-direction: column; + gap: 0.1rem; flex: 1 1 auto; min-width: 0; +} + +.announcement-type-picker__toggle-content { + display: flex; + flex-direction: column; + gap: 0.1rem; + flex: 1 1 auto; + min-width: 0; +} + +.announcement-icon-picker__toggle-label { font-weight: 600; + line-height: 1.1; +} + +.announcement-type-picker__toggle-label { + font-weight: 600; + line-height: 1.1; +} + +.announcement-icon-picker__toggle-hint { + color: var(--bs-secondary-color); + font-size: 0.78rem; + line-height: 1.1; +} + +.announcement-type-picker__toggle-hint { + color: var(--bs-secondary-color); + font-size: 0.78rem; + line-height: 1.1; } .announcement-icon-picker__caret { @@ -314,6 +386,12 @@ font-size: 0.8rem; } +.announcement-type-picker__caret { + flex: 0 0 auto; + color: var(--bs-secondary-color); + font-size: 0.8rem; +} + .announcement-icon-picker__menu { position: absolute; z-index: 20; @@ -329,6 +407,26 @@ box-shadow: 0 1rem 2rem rgba(15, 23, 42, 0.18); } +.announcement-type-picker__menu { + position: absolute; + z-index: 20; + top: calc(100% + 0.5rem); + bottom: auto; + left: 0; + width: min(100%, 28rem); + max-width: calc(100vw - 1rem); + padding: 0.75rem; + border: 1px solid var(--bs-border-color); + border-radius: 1rem; + background: var(--bs-body-bg); + box-shadow: 0 1rem 2rem rgba(15, 23, 42, 0.18); +} + +.announcement-type-picker__menu.is-open-above { + top: auto; + bottom: calc(100% + 0.5rem); +} + .announcement-icon-picker__menu.is-open-above { top: auto; bottom: calc(100% + 0.5rem); @@ -350,6 +448,12 @@ gap: 0.5rem; } +.announcement-type-picker__grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); + gap: 0.5rem; +} + .announcement-icon-picker__option { display: inline-flex; align-items: center; @@ -363,6 +467,20 @@ transition: transform 120ms ease, border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease; } +.announcement-type-picker__option { + display: flex; + flex-direction: column; + align-items: stretch; + gap: 0.5rem; + padding: 0.5rem; + border: 1px solid var(--bs-border-color); + border-radius: 0.75rem; + background: var(--bs-body-bg); + color: var(--bs-body-color); + text-align: left; + transition: transform 120ms ease, border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease; +} + .announcement-icon-picker__option:hover, .announcement-icon-picker__option:focus-visible { border-color: rgba(var(--bs-primary-rgb), 0.7); @@ -371,6 +489,14 @@ transform: translateY(-1px); } +.announcement-type-picker__option:hover, +.announcement-type-picker__option:focus-visible { + border-color: rgba(var(--bs-primary-rgb), 0.7); + background: rgba(var(--bs-primary-rgb), 0.04); + box-shadow: 0 0 0 0.15rem rgba(var(--bs-primary-rgb), 0.15); + transform: translateY(-1px); +} + .announcement-icon-picker__option.is-selected { border-color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), 0.12); @@ -378,11 +504,154 @@ box-shadow: 0 0 0 0.15rem rgba(var(--bs-primary-rgb), 0.12); } +.announcement-type-picker__option.is-selected { + border-color: var(--bs-primary); + box-shadow: 0 0 0 0.15rem rgba(var(--bs-primary-rgb), 0.12); +} + .announcement-icon-picker__option i { font-size: 1.05rem; line-height: 1; } +.announcement-type-picker__option-icon { + display: flex; + align-items: center; + justify-content: center; + min-height: 2.5rem; + border-radius: 0.65rem; + background: rgba(var(--bs-primary-rgb), 0.1); + color: var(--bs-primary); + font-size: 1rem; +} + +.announcement-type-picker__option-icon i { + line-height: 1; +} + +.announcement-type-picker__label { + font-size: 0.8rem; + font-weight: 600; + line-height: 1.1; + text-align: center; +} + +.announcement-screen-picker { + display: grid; + grid-template-columns: minmax(0, 1fr); + gap: 0.5rem; + max-height: 18rem; + padding: 0.25rem; + overflow: auto; +} + +.announcement-screen-actions { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + margin-bottom: 0.5rem; +} + +.announcement-screen-action { + flex: 1 1 9rem; +} + +.announcement-screen-option { + position: relative; + min-width: 0; +} + +.announcement-screen-option > .btn-check { + position: absolute; + inset: 0; + margin: 0; +} + +.announcement-screen-chip { + display: flex; + align-items: center; + justify-content: flex-start; + gap: 0.5rem; + width: 100%; + min-height: 2.5rem; + padding: 0.5rem 0.75rem; + border: 1px solid var(--bs-border-color); + border-radius: 0.875rem; + background: var(--bs-body-bg); + color: var(--bs-body-color); + cursor: pointer; + transition: transform 120ms ease, border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease; +} + +.announcement-screen-chip:hover, +.announcement-screen-chip:focus-visible { + border-color: rgba(var(--bs-primary-rgb), 0.7); + background: rgba(var(--bs-primary-rgb), 0.04); + box-shadow: 0 0 0 0.15rem rgba(var(--bs-primary-rgb), 0.12); + transform: translateY(-1px); +} + +.announcement-screen-option > .btn-check:checked + .announcement-screen-chip { + border-color: var(--bs-primary); + background: rgba(var(--bs-primary-rgb), 0.08); + box-shadow: 0 0 0 0.15rem rgba(var(--bs-primary-rgb), 0.12); +} + +.announcement-screen-chip__check { + display: inline-flex; + align-items: center; + justify-content: center; + margin-left: auto; + width: 1.25rem; + height: 1.25rem; + border-radius: 999px; + background: rgba(var(--bs-primary-rgb), 0.1); + color: var(--bs-primary); + opacity: 0; + transform: scale(0.85); + transition: opacity 120ms ease, transform 120ms ease, background-color 120ms ease, color 120ms ease; +} + +.announcement-screen-chip__check-icon { + font-size: 0.9rem; + line-height: 1; +} + +.announcement-screen-option > .btn-check:checked + .announcement-screen-chip .announcement-screen-chip__check { + opacity: 1; + transform: scale(1); +} + +.announcement-screen-chip__text { + display: block; + flex: 1 1 auto; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 0.875rem; + font-weight: 700; + line-height: 1.2; +} + +@media (max-width: 576px) { + .announcement-screen-picker { + max-height: 16rem; + } +} + +@media (max-width: 576px) { + .announcement-type-picker__menu { + width: calc(100vw - 2rem); + right: 0; + left: auto; + } + + .announcement-type-picker__grid { + grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); + } +} + @media (max-width: 576px) { .announcement-icon-picker__menu { width: calc(100vw - 2rem); @@ -1844,6 +2113,83 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection { border-radius: var(--bs-border-radius); } +.announcement-color-picker { + display: grid; + gap: 0.75rem; +} + +.announcement-color-picker__grid { + display: grid; + grid-template-columns: repeat(8, minmax(0, 1fr)); + gap: 0.375rem; +} + +.announcement-color-picker__option { + display: flex; + flex-direction: column; + align-items: stretch; + gap: 0.375rem; + padding: 0.375rem; + border: 1px solid var(--bs-border-color); + border-radius: 0.75rem; + background: var(--bs-body-bg); + color: var(--bs-body-color); + text-align: left; + transition: transform 120ms ease, border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease; +} + +.announcement-color-picker__option:hover, +.announcement-color-picker__option:focus-visible { + border-color: rgba(var(--bs-primary-rgb), 0.7); + background: rgba(var(--bs-primary-rgb), 0.04); + box-shadow: 0 0 0 0.15rem rgba(var(--bs-primary-rgb), 0.15); + transform: translateY(-1px); +} + +.announcement-color-picker__option.is-selected { + border-color: var(--bs-primary); + box-shadow: 0 0 0 0.15rem rgba(var(--bs-primary-rgb), 0.12); +} + +.announcement-color-picker__swatch { + display: flex; + align-items: center; + justify-content: center; + min-height: 2.5rem; + border-radius: 0.65rem; + font-size: 1rem; +} + +.announcement-color-picker__check { + opacity: 0; + transform: scale(0.8); + transition: opacity 120ms ease, transform 120ms ease; +} + +.announcement-color-picker__option.is-selected .announcement-color-picker__check { + opacity: 1; + transform: scale(1); +} + +.announcement-color-picker__label { + font-size: 0.8rem; + font-weight: 600; + line-height: 1.1; + text-align: center; +} + +@media (max-width: 1200px) { + .announcement-color-picker__grid { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } +} + +@media (max-width: 768px) { + .announcement-color-picker__grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + .announcement-icon-preview { display: flex; align-items: center; @@ -1871,7 +2217,8 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection { display: grid; gap: 0.5rem; padding-top: 0.25rem; - margin-bottom: 0.75rem; + padding-bottom: 0.5rem; + margin-bottom: 0; } .api-region-placeholder-title { @@ -2220,6 +2567,50 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection { flex: 1 1 0; } +.schedule-day-grid .schedule-day-option { + position: relative; + display: flex; + flex: 1 1 0; + min-width: 0; +} + +.schedule-day-grid .schedule-day-option > .btn-check { + position: absolute; + inset: 0; + margin: 0; +} + +.schedule-day-grid .schedule-day-option > .schedule-day-button { + width: 100%; + border-radius: 0; +} + +.schedule-day-grid .schedule-day-option:first-child > .schedule-day-button { + border-top-left-radius: var(--bs-btn-border-radius); + border-bottom-left-radius: var(--bs-btn-border-radius); +} + +.schedule-day-grid .schedule-day-option:last-child > .schedule-day-button { + border-top-right-radius: var(--bs-btn-border-radius); + border-bottom-right-radius: var(--bs-btn-border-radius); +} + +.schedule-day-grid .schedule-day-option + .schedule-day-option { + margin-left: -1px; +} + +.schedule-day-grid .schedule-day-button.is-invalid { + color: var(--bs-danger); + border-color: var(--bs-danger); + background-color: rgba(var(--bs-danger-rgb), 0.08); +} + +.schedule-day-grid .btn-check:checked + .schedule-day-button.is-invalid { + color: #fff; + border-color: var(--bs-danger); + background-color: var(--bs-danger); +} + .slide-schedule-dialog { position: fixed; top: 50%; @@ -2283,11 +2674,9 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection { overflow: hidden; } -.slide-schedule-content .schedule-rule-card.collapsed-card > .card-body { - display: block !important; - padding: 0 !important; - max-height: 0; - overflow: hidden; +.slide-schedule-content .schedule-rule-card.collapsed-card > .card-body, +.slide-schedule-content .schedule-rule-card.collapsed-card > .card-footer { + display: none; } .slide-schedule-content .schedule-rule-card.collapsed-card .card-header { @@ -2332,8 +2721,18 @@ td[data-label="Actions"] > div { } .playlist-duration-input { - width: 6rem; - min-width: 6rem; + width: 4rem !important; + min-width: 4rem !important; + flex: 0 0 4rem !important; +} + +.playlist-duration-input-group { + display: inline-flex !important; + flex: 0 0 auto !important; + width: fit-content !important; + max-width: fit-content !important; + border-radius: var(--bs-border-radius-sm); + overflow: hidden; } .playlist-duration-input::-webkit-outer-spin-button, @@ -2356,6 +2755,13 @@ td[data-label="Actions"] > div { text-align: left; } +.playlist-duration-prefix { + display: inline-flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; +} + .playlist-use-video-duration { white-space: nowrap; } @@ -2424,13 +2830,24 @@ table.table > :not(caption) > * > * { .playlist-order-cell { width: 1%; white-space: nowrap; + vertical-align: top; + padding-top: 0 !important; padding-bottom: 0 !important; } .playlist-order-cell-inner { - display: inline-flex; + display: flex; align-items: center; - gap: 0.5rem; + width: 100%; + gap: 0.65rem; +} + +.playlist-order-stepper { + display: inline-flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 0.02rem; } .playlist-drag-handle { @@ -2438,26 +2855,46 @@ table.table > :not(caption) > * > * { align-items: center; justify-content: center; width: 1.35rem; - height: 1.9rem; + height: 1.35rem; line-height: 1; - cursor: grab; + cursor: grab !important; text-decoration: none; touch-action: none; } +.playlist-drag-handle:hover, +.playlist-drag-handle:focus { + cursor: grab !important; +} + +.playlist-drag-handle:active, +.playlist-drag-handle[aria-grabbed="true"] { + cursor: grabbing !important; +} + .playlist-drag-handle-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.1rem; - height: 1.9rem; + height: 1.1rem; + font-size: 1rem; + line-height: 1; } -.playlist-drag-handle-svg { - display: block; - width: 100%; - height: 100%; - fill: currentColor; +.playlist-order-move { + display: inline-flex; + align-items: center; + justify-content: center; + width: 1.15rem; + height: 1.15rem; + line-height: 1; + text-decoration: none; +} + +.playlist-order-move:hover, +.playlist-order-move:focus { + text-decoration: none; } .playlist-drag-handle:active, diff --git a/src/web/public/js/admin/admin-page.js b/src/web/public/js/admin/admin-page.js index 9f971e3..a48ec98 100644 --- a/src/web/public/js/admin/admin-page.js +++ b/src/web/public/js/admin/admin-page.js @@ -157,10 +157,14 @@ return Boolean(form && form.dataset && form.dataset.dirty === 'true'); } + function isRegionEditorField(target) { + return Boolean(target && typeof target.closest === 'function' && target.closest('.region-item')); + } + function initDirtyTracking() { document.addEventListener('input', function (event) { var target = event.target; - if (!target || !target.form) { + if (!target || !target.form || isRegionEditorField(target)) { return; } markFormDirty(target.form); @@ -168,13 +172,101 @@ document.addEventListener('change', function (event) { var target = event.target; - if (!target || !target.form) { + if (!target || !target.form || isRegionEditorField(target)) { return; } markFormDirty(target.form); }, true); } + function clampLimitedInputValue(input) { + if (!input || !input.matches || !input.matches('input[data-limit-input-value]')) { + return; + } + + var minAttr = input.getAttribute('min'); + var maxAttr = input.getAttribute('max'); + var minValue = minAttr === null || minAttr === '' ? null : Number(minAttr); + var maxValue = maxAttr === null || maxAttr === '' ? null : Number(maxAttr); + var rawValue = String(input.value || '').trim(); + + if (!rawValue) { + return; + } + + var numericValue = Number(rawValue); + if (!Number.isFinite(numericValue)) { + return; + } + + if (Number.isFinite(minValue) && numericValue < minValue) { + input.value = String(minValue); + return; + } + + if (Number.isFinite(maxValue) && numericValue > maxValue) { + input.value = String(maxValue); + } + } + + function initLimitedInputValues() { + document.addEventListener('input', function (event) { + clampLimitedInputValue(event.target); + }, true); + + document.addEventListener('change', function (event) { + clampLimitedInputValue(event.target); + }, true); + + document.addEventListener('paste', function (event) { + var target = event.target; + if (!target || !target.matches || !target.matches('input[data-limit-input-value]')) { + return; + } + + window.setTimeout(function () { + clampLimitedInputValue(target); + }, 0); + }, true); + } + + function clampLimitedTextValue(input) { + if (!input || !input.matches || !input.matches('input[data-limit-text-length], textarea[data-limit-text-length]')) { + return; + } + + var maxLength = Number(input.getAttribute('maxlength')); + if (!Number.isFinite(maxLength) || maxLength < 1) { + return; + } + + var value = String(input.value || ''); + if (value.length > maxLength) { + input.value = value.slice(0, maxLength); + } + } + + function initLimitedTextInputValues() { + document.addEventListener('input', function (event) { + clampLimitedTextValue(event.target); + }, true); + + document.addEventListener('change', function (event) { + clampLimitedTextValue(event.target); + }, true); + + document.addEventListener('paste', function (event) { + var target = event.target; + if (!target || !target.matches || !target.matches('input[data-limit-text-length], textarea[data-limit-text-length]')) { + return; + } + + window.setTimeout(function () { + clampLimitedTextValue(target); + }, 0); + }, true); + } + function initCancelConfirm() { document.addEventListener('click', function (event) { var cancelTarget = event.target.closest('[data-confirm-unsaved]'); @@ -219,6 +311,15 @@ return String(responseText || '').trim(); } + function isWarningSaveError(error) { + var status = Number(error && error.status); + if (status === 400 || status === 422) { + return true; + } + + return /region names must be unique/i.test(String(error && error.message || '')); + } + function getAsyncSaveActionField(form) { if (!form || !form.querySelector) { return null; @@ -312,7 +413,9 @@ if (!response.ok) { var responseText = await response.text(); - throw new Error(parseAsyncSaveErrorMessage(responseText) || (settings.errorMessage || 'Unable to save changes.')); + var error = new Error(parseAsyncSaveErrorMessage(responseText) || (settings.errorMessage || 'Unable to save changes.')); + error.status = response.status; + throw error; } if (isLoginRedirect(response)) { @@ -363,11 +466,25 @@ }) : parseAsyncSaveResponseMessage(responseText); - showToast(successMessage || String(settings.fallbackSuccessMessage || 'Saved.'), 'success'); + var resolvedSuccessMessage = successMessage || String(settings.fallbackSuccessMessage || 'Saved.'); + + if (form.dataset && form.dataset.asyncSaveRefreshPage === 'true') { + if (typeof window.queueToastAfterRefresh === 'function') { + window.queueToastAfterRefresh(resolvedSuccessMessage, 'success'); + } else if (typeof showToast === 'function') { + showToast(resolvedSuccessMessage, 'success'); + } + window.setTimeout(function () { + window.location.reload(); + }, 1000); + return true; + } + + showToast(resolvedSuccessMessage, 'success'); return true; } catch (error) { if (typeof showToast === 'function') { - var variant = Number(error && error.status) >= 400 && Number(error && error.status) < 500 ? 'warning' : 'danger'; + var variant = isWarningSaveError(error) ? 'warning' : 'danger'; showToast(error && error.message ? error.message : (settings.errorMessage || 'Unable to save changes.'), variant); } else { window.alert(error && error.message ? error.message : (settings.errorMessage || 'Unable to save changes.')); @@ -822,7 +939,7 @@ return; } - element.textContent = formatDashboardDate(date); + element.textContent = formatDashboardDate(date, element.getAttribute('data-local-datetime-format') === '24h'); }); } @@ -862,6 +979,8 @@ initConfirmForms(); initDeleteButtons(); initDirtyTracking(); + initLimitedInputValues(); + initLimitedTextInputValues(); initCancelConfirm(); initAsyncCommandForms(); initAsyncSaveForms(); @@ -872,6 +991,10 @@ attachSlideThumbFallbacks(document); window.initJsonTogglePanels = initJsonTogglePanels; window.initLocalDateTimes = initLocalDateTimes; + window.clampLimitedInputValue = clampLimitedInputValue; + window.initLimitedInputValues = initLimitedInputValues; + window.clampLimitedTextValue = clampLimitedTextValue; + window.initLimitedTextInputValues = initLimitedTextInputValues; window.createSlideThumbPlaceholder = createSlideThumbPlaceholder; window.attachSlideThumbFallbacks = attachSlideThumbFallbacks; }()); diff --git a/src/web/public/js/announcements/announcement-form.js b/src/web/public/js/announcements/announcement-form.js index 4cf6444..df98f1b 100644 --- a/src/web/public/js/announcements/announcement-form.js +++ b/src/web/public/js/announcements/announcement-form.js @@ -18,21 +18,127 @@ function updateAnnouncementDurationFields() { } } -function updateAnnouncementColorPreview() { - var colorSelect = document.getElementById('announcement-color'); - var preview = document.querySelector('[data-announcement-color-preview]'); - if (!colorSelect || !preview) { +function updateAnnouncementColorPickerSelection() { + var colorInput = document.getElementById('announcement-color'); + var picker = document.querySelector('[data-announcement-color-picker-shell]'); + if (!colorInput || !picker) { return; } - var selectedOption = colorSelect.options[colorSelect.selectedIndex] || null; - var colorKey = String(colorSelect.value || '').trim().toLowerCase() || 'primary'; - var label = selectedOption ? String(selectedOption.textContent || selectedOption.label || colorKey).trim() : colorKey; + var selectedValue = String(colorInput.value || '').trim().toLowerCase() || 'primary'; + picker.querySelectorAll('[data-announcement-color-option]').forEach(function (button) { + var isSelected = String(button.getAttribute('data-color-key') || '').trim().toLowerCase() === selectedValue; + button.classList.toggle('is-selected', isSelected); + button.setAttribute('aria-pressed', isSelected ? 'true' : 'false'); + }); +} - preview.className = 'announcement-color-preview text-bg-' + colorKey; - preview.setAttribute('aria-label', label); - preview.setAttribute('title', label); - preview.textContent = ''; +function setAnnouncementScreenSelection(isSelected) { + document.querySelectorAll('input[name="screen_ids[]"]').forEach(function (input) { + input.checked = isSelected; + }); +} + +function positionAnnouncementTypePicker() { + var picker = document.querySelector('[data-announcement-type-picker]'); + var toggle = document.querySelector('[data-announcement-type-picker-toggle]'); + var shell = document.querySelector('[data-announcement-type-picker-shell]'); + if (!picker || picker.hidden || !toggle || !shell) { + return; + } + + var padding = 8; + var toggleRect = toggle.getBoundingClientRect(); + var menuRect = picker.getBoundingClientRect(); + var viewportHeight = window.innerHeight || document.documentElement.clientHeight || toggleRect.bottom; + var placementAbove = false; + var spaceBelow = viewportHeight - toggleRect.bottom - padding; + var spaceAbove = toggleRect.top - padding; + + if (menuRect.height > spaceBelow && spaceAbove > spaceBelow) { + placementAbove = true; + } + + picker.classList.toggle('is-open-above', placementAbove); +} + +function closeAnnouncementTypePicker() { + var picker = document.querySelector('[data-announcement-type-picker]'); + var toggle = document.querySelector('[data-announcement-type-picker-toggle]'); + if (!picker) { + return; + } + + picker.hidden = true; + picker.classList.remove('is-open-above'); + if (toggle) { + toggle.setAttribute('aria-expanded', 'false'); + } +} + +function openAnnouncementTypePicker() { + var picker = document.querySelector('[data-announcement-type-picker]'); + var toggle = document.querySelector('[data-announcement-type-picker-toggle]'); + if (!picker) { + return; + } + + picker.hidden = false; + if (toggle) { + toggle.setAttribute('aria-expanded', 'true'); + } + + if (typeof window !== 'undefined' && window.requestAnimationFrame) { + window.requestAnimationFrame(positionAnnouncementTypePicker); + } else { + positionAnnouncementTypePicker(); + } +} + +function updateAnnouncementTypePickerSelection() { + var typeInput = document.getElementById('announcement-type'); + var previewButton = document.querySelector('[data-announcement-type-picker-toggle]'); + var picker = document.querySelector('[data-announcement-type-picker]'); + if (!typeInput || !previewButton || !picker) { + return; + } + + var selectedValue = String(typeInput.value || '').trim().toLowerCase(); + var selectedOption = picker.querySelector('[data-announcement-type-option][data-type-key="' + selectedValue + '"]'); + var label = selectedOption ? String(selectedOption.getAttribute('data-type-label') || selectedOption.textContent || selectedValue).trim() : selectedValue; + var iconKey = selectedOption ? String(selectedOption.getAttribute('data-type-icon') || '').trim().toLowerCase() : ''; + var icon = previewButton.querySelector('[data-announcement-type-picker-icon]'); + var text = previewButton.querySelector('[data-announcement-type-picker-label]'); + + previewButton.setAttribute('aria-label', label); + previewButton.setAttribute('title', label); + if (icon) { + icon.className = 'bi bi-' + iconKey; + } + if (text) { + text.textContent = label; + } + + picker.querySelectorAll('[data-announcement-type-option]').forEach(function (button) { + var isSelected = String(button.getAttribute('data-type-key') || '').trim().toLowerCase() === selectedValue; + button.classList.toggle('is-selected', isSelected); + button.setAttribute('aria-pressed', isSelected ? 'true' : 'false'); + }); +} + +function setAnnouncementTypeValue(typeKey) { + var typeInput = document.getElementById('announcement-type'); + if (!typeInput) { + return; + } + + var normalized = String(typeKey || '').trim().toLowerCase(); + if (!normalized) { + return; + } + + typeInput.value = normalized; + updateAnnouncementTypePickerSelection(); } function updateAnnouncementIconPreview() { @@ -155,21 +261,90 @@ function setAnnouncementIconValue(iconKey) { } function initAnnouncementForm() { + var typeInput = document.getElementById('announcement-type'); + var typePickerToggle = document.querySelector('[data-announcement-type-picker-toggle]'); + var typePicker = document.querySelector('[data-announcement-type-picker]'); + var typePickerClose = document.querySelector('[data-announcement-type-picker-close]'); var modeSelect = document.getElementById('announcement-duration-mode'); - var colorSelect = document.getElementById('announcement-color'); + var colorInput = document.getElementById('announcement-color'); + var colorPicker = document.querySelector('[data-announcement-color-picker-shell]'); + var screenSelectAll = document.querySelector('[data-announcement-screen-select-all]'); + var screenSelectNone = document.querySelector('[data-announcement-screen-select-none]'); var iconSelect = document.getElementById('announcement-icon'); var iconPickerToggle = document.querySelector('[data-announcement-icon-picker-toggle]'); var iconPicker = document.querySelector('[data-announcement-icon-picker]'); var iconPickerClose = document.querySelector('[data-announcement-icon-picker-close]'); + if (typeInput) { + updateAnnouncementTypePickerSelection(); + } + + if (typePickerToggle) { + typePickerToggle.addEventListener('click', function (event) { + event.preventDefault(); + var isExpanded = typePicker && !typePicker.hidden; + if (isExpanded) { + closeAnnouncementTypePicker(); + } else { + openAnnouncementTypePicker(); + } + }); + } + + if (typePickerClose) { + typePickerClose.addEventListener('click', function (event) { + event.preventDefault(); + closeAnnouncementTypePicker(); + }); + } + + if (typePicker) { + typePicker.addEventListener('click', function (event) { + var button = event.target && event.target.closest ? event.target.closest('[data-announcement-type-option]') : null; + if (!button) { + return; + } + + event.preventDefault(); + setAnnouncementTypeValue(button.getAttribute('data-type-key')); + closeAnnouncementTypePicker(); + }); + } + if (modeSelect) { modeSelect.addEventListener('change', updateAnnouncementDurationFields); updateAnnouncementDurationFields(); } - if (colorSelect) { - colorSelect.addEventListener('change', updateAnnouncementColorPreview); - updateAnnouncementColorPreview(); + if (colorInput) { + updateAnnouncementColorPickerSelection(); + } + + if (colorPicker) { + colorPicker.addEventListener('click', function (event) { + var button = event.target && event.target.closest ? event.target.closest('[data-announcement-color-option]') : null; + if (!button) { + return; + } + + event.preventDefault(); + colorInput.value = String(button.getAttribute('data-color-key') || '').trim().toLowerCase(); + updateAnnouncementColorPickerSelection(); + }); + } + + if (screenSelectAll) { + screenSelectAll.addEventListener('click', function (event) { + event.preventDefault(); + setAnnouncementScreenSelection(true); + }); + } + + if (screenSelectNone) { + screenSelectNone.addEventListener('click', function (event) { + event.preventDefault(); + setAnnouncementScreenSelection(false); + }); } if (iconSelect) { @@ -210,8 +385,17 @@ function initAnnouncementForm() { } window.addEventListener('resize', positionAnnouncementIconPicker); + window.addEventListener('resize', positionAnnouncementTypePicker); document.addEventListener('click', function (event) { + var typePickerNode = document.querySelector('[data-announcement-type-picker]'); + var typeToggleNode = document.querySelector('[data-announcement-type-picker-toggle]'); + if (typePickerNode && !typePickerNode.hidden) { + if (!(typePickerNode.contains(event.target) || (typeToggleNode && typeToggleNode.contains(event.target)))) { + closeAnnouncementTypePicker(); + } + } + var picker = document.querySelector('[data-announcement-icon-picker]'); var toggle = document.querySelector('[data-announcement-icon-picker-toggle]'); if (!picker || picker.hidden) { diff --git a/src/web/public/js/data-sources/timetable-group-form.js b/src/web/public/js/data-sources/timetable-group-form.js index c282e2b..0a0322d 100644 --- a/src/web/public/js/data-sources/timetable-group-form.js +++ b/src/web/public/js/data-sources/timetable-group-form.js @@ -10,6 +10,10 @@ return; } + function markDirty() { + form.dataset.dirty = 'true'; + } + function pad(value) { return String(value).padStart(2, '0'); } @@ -95,6 +99,7 @@ } button.addEventListener('click', function () { row.remove(); + markDirty(); }); } @@ -106,6 +111,7 @@ } bindRemove(row); body.appendChild(fragment); + markDirty(); } body.querySelectorAll('[data-timetable-entry-row]').forEach(function (row) { diff --git a/src/web/public/js/playlists/playlist-schedule.js b/src/web/public/js/playlists/playlist-schedule.js index 1cd2e00..303034f 100644 --- a/src/web/public/js/playlists/playlist-schedule.js +++ b/src/web/public/js/playlists/playlist-schedule.js @@ -197,6 +197,341 @@ }).join(''); } + function parseLocalDate(value) { + var date = new Date(String(value || '').trim()); + + if (Number.isNaN(date.getTime())) { + return null; + } + + return new Date(date.getFullYear(), date.getMonth(), date.getDate()); + } + + function isDayInDateRange(startDatetime, endDatetime, dayIndex) { + var startDate = parseLocalDate(startDatetime); + var endDate = parseLocalDate(endDatetime); + var currentDate; + + if (!startDate || !endDate) { + return false; + } + + for (currentDate = new Date(startDate.getTime()); currentDate.getTime() <= endDate.getTime(); currentDate.setDate(currentDate.getDate() + 1)) { + if (currentDate.getDay() === Number(dayIndex)) { + return true; + } + } + + return false; + } + + function getTimeParts(value) { + var match = String(value || '').trim().match(/^(\d{2}):(\d{2})(?::\d{2})?$/); + + if (!match) { + return null; + } + + return { + hours: Number(match[1]), + minutes: Number(match[2]) + }; + } + + function combineDateAndTime(baseDate, timeValue) { + var timeParts = getTimeParts(timeValue); + + if (!baseDate || !timeParts) { + return null; + } + + return new Date( + baseDate.getFullYear(), + baseDate.getMonth(), + baseDate.getDate(), + timeParts.hours, + timeParts.minutes, + 0, + 0 + ); + } + + function hasScheduleRuleOverlap(startDatetime, endDatetime, startTime, endTime, selectedDays) { + var startDateTime = new Date(String(startDatetime || '').trim()); + var endDateTime = new Date(String(endDatetime || '').trim()); + var startDate = parseLocalDate(startDatetime); + var endDate = parseLocalDate(endDatetime); + var allowedDays = Array.isArray(selectedDays) && selectedDays.length ? selectedDays : [0, 1, 2, 3, 4, 5, 6]; + var currentDate; + + if (!startDate || !endDate || Number.isNaN(startDateTime.getTime()) || Number.isNaN(endDateTime.getTime())) { + return false; + } + + for (currentDate = new Date(startDate.getTime()); currentDate.getTime() <= endDate.getTime(); currentDate.setDate(currentDate.getDate() + 1)) { + if (allowedDays.indexOf(currentDate.getDay()) === -1) { + continue; + } + + var dayStart = combineDateAndTime(currentDate, startTime); + var dayEnd = combineDateAndTime(currentDate, endTime); + + if (!dayStart || !dayEnd) { + continue; + } + + if (dayEnd >= startDateTime && dayStart <= endDateTime) { + return true; + } + } + + return false; + } + + function getDateRangeDayIndices(startDatetime, endDatetime) { + var startDate = parseLocalDate(startDatetime); + var endDate = parseLocalDate(endDatetime); + var dayIndices = []; + var currentDate; + + if (!startDate || !endDate) { + return dayIndices; + } + + for (currentDate = new Date(startDate.getTime()); currentDate.getTime() <= endDate.getTime(); currentDate.setDate(currentDate.getDate() + 1)) { + if (dayIndices.indexOf(currentDate.getDay()) === -1) { + dayIndices.push(currentDate.getDay()); + } + } + + return dayIndices; + } + + function setDayInputError(card, dayInput, message) { + var dayInputs = card ? Array.prototype.slice.call(card.querySelectorAll('[data-schedule-rule-day]')) : []; + var dayLabels = card ? Array.prototype.slice.call(card.querySelectorAll('.schedule-day-button')) : []; + var feedbackNode = card ? card.querySelector('[data-schedule-rule-feedback]') : null; + var dayIndex = dayInputs.indexOf(dayInput); + + if (dayInput) { + dayInput.setCustomValidity(message); + dayInput.classList.add('is-invalid'); + dayInput.setAttribute('aria-invalid', 'true'); + } + + if (dayIndex !== -1 && dayLabels[dayIndex]) { + dayLabels[dayIndex].classList.add('is-invalid'); + dayLabels[dayIndex].setAttribute('aria-invalid', 'true'); + } + + if (feedbackNode) { + var messageNode = document.createElement('div'); + messageNode.textContent = message; + feedbackNode.appendChild(messageNode); + feedbackNode.hidden = false; + } + } + + function appendRuleFeedbackMessage(card, message) { + var feedbackNode = card ? card.querySelector('[data-schedule-rule-feedback]') : null; + + if (!feedbackNode) { + return; + } + + var messageNode = document.createElement('div'); + messageNode.textContent = message; + feedbackNode.appendChild(messageNode); + feedbackNode.hidden = false; + } + + function validateScheduleRuleCard(card) { + var fields = getRuleFields(card); + var dayInputs = Array.prototype.slice.call(fields.days || []); + var dayLabels = getRuleDayLabels(card); + var checkedDayInputs = dayInputs.filter(function (input) { + return Boolean(input && input.checked); + }); + var checkedDayIndices = checkedDayInputs.map(function (input) { + return Number(input && input.value); + }); + var startDatetime = String(fields.startDatetime && fields.startDatetime.value || '').trim(); + var endDatetime = String(fields.endDatetime && fields.endDatetime.value || '').trim(); + var startTime = String(fields.startTime && fields.startTime.value || '').trim(); + var endTime = String(fields.endTime && fields.endTime.value || '').trim(); + clearRuleValidity(card); + + if ((startDatetime || endDatetime) && (!startDatetime || !endDatetime)) { + setRuleError(!startDatetime ? fields.startDatetime : fields.endDatetime, 'Start and end datetimes must both be set for this rule.'); + return false; + } + + if ((startTime || endTime) && (!startTime || !endTime)) { + setRuleError(!startTime ? fields.startTime : fields.endTime, 'Start and end times must both be set for this rule.'); + return false; + } + + if (startDatetime && endDatetime && new Date(endDatetime) <= new Date(startDatetime)) { + setRuleError(fields.endDatetime, 'End datetime must be after start datetime.'); + return false; + } + + if (startTime && endTime && endTime <= startTime) { + setRuleError(fields.endTime, 'End time must be after start time.'); + if (fields.startTime) { + fields.startTime.classList.add('is-invalid'); + fields.startTime.setAttribute('aria-invalid', 'true'); + } + return false; + } + + if (startDatetime && endDatetime) { + var dateRangeDayIndices = getDateRangeDayIndices(startDatetime, endDatetime); + var dayIndicesToCheck = checkedDayIndices.length ? checkedDayIndices : [0, 1, 2, 3, 4, 5, 6]; + var invalidDayInputs = checkedDayInputs.filter(function (input) { + return dateRangeDayIndices.indexOf(Number(input && input.value)) === -1; + }); + + invalidDayInputs.forEach(function (input) { + var dayIndex = dayInputs.indexOf(input); + + if (dayIndex !== -1 && dayLabels[dayIndex]) { + dayLabels[dayIndex].classList.add('is-invalid'); + dayLabels[dayIndex].setAttribute('aria-invalid', 'true'); + } + }); + + if (checkedDayInputs.length && invalidDayInputs.length === checkedDayInputs.length) { + setDayInputError(card, invalidDayInputs[0] || checkedDayInputs[0] || dayInputs[0], 'Selected days must overlap the date range.'); + return false; + } + + if (startTime && endTime && !hasScheduleRuleOverlap(startDatetime, endDatetime, startTime, endTime, dayIndicesToCheck)) { + setRuleError(fields.endTime, 'Start and end times must overlap the date range.'); + if (fields.startTime) { + fields.startTime.classList.add('is-invalid'); + fields.startTime.setAttribute('aria-invalid', 'true'); + } + return false; + } + } + + return true; + } + + function getScheduleRuleValidationIssue(card) { + var fields = getRuleFields(card); + var dayInputs = Array.prototype.slice.call(fields.days || []); + var checkedDayInputs = dayInputs.filter(function (input) { + return Boolean(input && input.checked); + }); + var checkedDayIndices = checkedDayInputs.map(function (input) { + return Number(input && input.value); + }); + var startDatetime = String(fields.startDatetime && fields.startDatetime.value || '').trim(); + var endDatetime = String(fields.endDatetime && fields.endDatetime.value || '').trim(); + var startTime = String(fields.startTime && fields.startTime.value || '').trim(); + var endTime = String(fields.endTime && fields.endTime.value || '').trim(); + + if (startDatetime || endDatetime) { + if (!startDatetime || !endDatetime) { + return { + type: 'datetime-pair', + target: !startDatetime ? fields.startDatetime : fields.endDatetime, + message: 'Start and end datetimes must both be set for this rule.' + }; + } + } + + if (startTime || endTime) { + if (!startTime || !endTime) { + return { + type: 'time-pair', + target: !startTime ? fields.startTime : fields.endTime, + message: 'Start and end times must both be set for this rule.' + }; + } + } + + if (startDatetime && endDatetime && new Date(endDatetime) <= new Date(startDatetime)) { + return { + type: 'datetime-order', + target: fields.endDatetime, + message: 'End datetime must be after start datetime.' + }; + } + + if (startTime && endTime && endTime <= startTime) { + return { + type: 'time-order', + target: fields.endTime, + message: 'End time must be after start time.' + }; + } + + if (startDatetime && endDatetime) { + var dateRangeDayIndices = getDateRangeDayIndices(startDatetime, endDatetime); + var dayIndicesToCheck = checkedDayIndices.length ? checkedDayIndices : [0, 1, 2, 3, 4, 5, 6]; + var invalidDayInputs = checkedDayInputs.filter(function (input) { + return dateRangeDayIndices.indexOf(Number(input && input.value)) === -1; + }); + + if (checkedDayInputs.length && invalidDayInputs.length === checkedDayInputs.length) { + return { + type: 'day-overlap', + target: checkedDayInputs[0] || dayInputs[0] || fields.endDatetime, + message: 'Selected days must overlap the date range.' + }; + } + + if (startTime && endTime && !hasScheduleRuleOverlap(startDatetime, endDatetime, startTime, endTime, dayIndicesToCheck)) { + return { + type: 'time-overlap', + target: fields.endTime, + secondaryTarget: fields.startTime, + message: 'Start and end times must overlap the date range.' + }; + } + } + + return null; + } + + function applyScheduleRuleValidationIssue(card, issue) { + var fields = getRuleFields(card); + var dayLabels = getRuleDayLabels(card); + + clearRuleValidity(card); + + if (!issue) { + return true; + } + + if (issue.type === 'time-overlap') { + setRuleError(issue.target || fields.endTime, issue.message); + if (issue.secondaryTarget) { + issue.secondaryTarget.classList.add('is-invalid'); + issue.secondaryTarget.setAttribute('aria-invalid', 'true'); + } + return false; + } + + if (issue.type === 'day-overlap') { + var dayInputs = Array.prototype.slice.call(fields.days || []); + var dayIndex = dayInputs.indexOf(issue.target); + + setRuleError(issue.target, issue.message); + if (dayIndex !== -1 && dayLabels[dayIndex]) { + dayLabels[dayIndex].classList.add('is-invalid'); + dayLabels[dayIndex].setAttribute('aria-invalid', 'true'); + } + return false; + } + + setRuleError(issue.target, issue.message); + return false; + } + // Video duration helpers. function getVideoDurationButtonLabel(isPressed) { return isPressed ? 'Disable use video duration' : 'Use video duration'; @@ -213,7 +548,7 @@ return ''; } - return ''; + return ''; } function getDisableAudioButtonLabel(isPressed) { @@ -241,7 +576,6 @@ button.classList.toggle('btn-outline-secondary', Boolean(isPressed)); button.classList.toggle('btn-secondary', !Boolean(isPressed)); - button.classList.toggle('active', !Boolean(isPressed)); button.setAttribute('aria-pressed', isPressed ? 'true' : 'false'); button.setAttribute('aria-label', getDisableAudioButtonLabel(isPressed)); button.setAttribute('title', getDisableAudioButtonLabel(isPressed)); @@ -253,7 +587,8 @@ return; } - button.classList.toggle('active', Boolean(isPressed)); + button.classList.toggle('btn-outline-info', !Boolean(isPressed)); + button.classList.toggle('btn-info', Boolean(isPressed)); button.setAttribute('aria-pressed', isPressed ? 'true' : 'false'); button.setAttribute('aria-label', getVideoDurationButtonLabel(isPressed)); button.setAttribute('title', getVideoDurationButtonLabel(isPressed)); @@ -382,7 +717,11 @@ return '' + '' + '
' + - '' + + '
' + + '' + + '' + + '' + + '
' + '' + '
' + ''; @@ -412,8 +751,11 @@ function buildPlaylistDurationCellMarkup(values, durationActionMarkup) { return '' + - '
' + - '' + + '
' + + '
' + + '' + + '' + + '
' + '' + '' + (values.useVideoDuration ? '' : '') + @@ -586,8 +928,7 @@ '
' + '' + '' + '
' + @@ -614,11 +955,14 @@ '
' + '
' + '
' + DAY_NAMES.map(function (label, dayIndex) { - return '' + - ''; + return '' + + '' + + '' + + ''; }).join('') + '
' + '
' + '
' + + '' + '' + ''; } @@ -779,13 +1123,71 @@ return card ? card.querySelector('[data-remove-schedule-rule]') : null; } + function getRuleDayLabels(card) { + return card ? Array.prototype.slice.call(card.querySelectorAll('.schedule-day-button')) : []; + } + + function getCollapseRuleButton(card) { + return card ? card.querySelector('[data-schedule-rule-collapse], [data-lte-toggle="card-collapse"]') : null; + } + + function getCollapseRuleIcon(card) { + return card ? card.querySelector('[data-schedule-rule-collapse-icon]') : null; + } + + function syncRuleCollapseButtonState(card) { + var button = getCollapseRuleButton(card); + var icon = getCollapseRuleIcon(card); + var numberNode = getRuleNumberNode(card); + var ruleIndex = numberNode ? String(numberNode.textContent || '') : ''; + var isCollapsed = Boolean(card && card.classList && card.classList.contains('collapsed-card')); + var label = (isCollapsed ? 'Expand' : 'Collapse') + ' rule ' + ruleIndex; + + if (!button) { + return; + } + + button.setAttribute('aria-expanded', isCollapsed ? 'false' : 'true'); + button.setAttribute('aria-label', label); + button.setAttribute('title', label); + + if (icon) { + icon.classList.remove('bi-dash-lg', 'bi-plus-lg'); + icon.classList.add(isCollapsed ? 'bi-plus-lg' : 'bi-dash-lg'); + } + + var visibleLabel = button.querySelector('.visually-hidden'); + if (visibleLabel) { + visibleLabel.textContent = label; + } + } + function clearRuleValidity(card) { var fields = getRuleFields(card); + var dayInputs = Array.prototype.slice.call(fields.days || []); + var dayLabels = getRuleDayLabels(card); + var feedbackNode = card ? card.querySelector('[data-schedule-rule-feedback]') : null; [fields.startDatetime, fields.endDatetime, fields.startTime, fields.endTime].forEach(function (input) { if (input) { input.setCustomValidity(''); + input.classList.remove('is-invalid'); + input.removeAttribute('aria-invalid'); } }); + dayInputs.forEach(function (input) { + input.setCustomValidity(''); + input.classList.remove('is-invalid'); + input.removeAttribute('aria-invalid'); + }); + dayLabels.forEach(function (label) { + label.classList.remove('is-invalid'); + label.removeAttribute('aria-invalid'); + }); + + if (feedbackNode) { + feedbackNode.innerHTML = ''; + feedbackNode.hidden = true; + } } function setRuleError(input, message) { @@ -793,37 +1195,96 @@ return; } input.setCustomValidity(message); + if (String(input.value || '').trim()) { + input.classList.add('is-invalid'); + input.setAttribute('aria-invalid', 'true'); + } + + appendRuleFeedbackMessage(input.closest ? input.closest('[data-schedule-rule-card]') : null, message); } - function validateRuleCard(card) { + function validateScheduleRuleCard(card) { var fields = getRuleFields(card); + var dayInputs = Array.prototype.slice.call(fields.days || []); + var dayLabels = getRuleDayLabels(card); + var checkedDayInputs = dayInputs.filter(function (input) { + return Boolean(input && input.checked); + }); + var checkedDayIndices = checkedDayInputs.map(function (input) { + return Number(input && input.value); + }); var startDatetime = String(fields.startDatetime && fields.startDatetime.value || '').trim(); var endDatetime = String(fields.endDatetime && fields.endDatetime.value || '').trim(); var startTime = String(fields.startTime && fields.startTime.value || '').trim(); var endTime = String(fields.endTime && fields.endTime.value || '').trim(); - var hasDateInput = Boolean(startDatetime || endDatetime); - var hasTimeInput = Boolean(startTime || endTime); + var isValid = true; clearRuleValidity(card); - if (hasDateInput && (!startDatetime || !endDatetime)) { - setRuleError(fields.startDatetime || fields.endDatetime, 'Start and end datetimes must both be set for this rule.'); - return false; - } - if (hasTimeInput && (!startTime || !endTime)) { - setRuleError(fields.startTime || fields.endTime, 'Start and end times must both be set for this rule.'); - return false; - } - if (startDatetime && endDatetime && new Date(endDatetime) < new Date(startDatetime)) { - setRuleError(fields.endDatetime, 'End datetime must be after start datetime.'); - return false; - } - if (startTime && endTime && endTime < startTime) { - setRuleError(fields.endTime, 'End time must be after start time.'); - return false; + if ((startDatetime || endDatetime) && (!startDatetime || !endDatetime)) { + setRuleError(!startDatetime ? fields.startDatetime : fields.endDatetime, 'Start and end datetimes must both be set for this rule.'); + isValid = false; } - return true; + if ((startTime || endTime) && (!startTime || !endTime)) { + setRuleError(!startTime ? fields.startTime : fields.endTime, 'Start and end times must both be set for this rule.'); + isValid = false; + } + + if (startDatetime && endDatetime && new Date(endDatetime) <= new Date(startDatetime)) { + setRuleError(fields.endDatetime, 'End datetime must be after start datetime.'); + isValid = false; + } + + if (startTime && endTime && endTime <= startTime) { + setRuleError(fields.endTime, 'End time must be after start time.'); + if (fields.startTime) { + fields.startTime.classList.add('is-invalid'); + fields.startTime.setAttribute('aria-invalid', 'true'); + } + isValid = false; + } + + if (startDatetime && endDatetime) { + var dateRangeDayIndices = getDateRangeDayIndices(startDatetime, endDatetime); + var dayIndicesToCheck = checkedDayIndices.length ? checkedDayIndices : [0, 1, 2, 3, 4, 5, 6]; + var invalidDayInputs = checkedDayInputs.filter(function (input) { + return dateRangeDayIndices.indexOf(Number(input && input.value)) === -1; + }); + + invalidDayInputs.forEach(function (input) { + var dayIndex = dayInputs.indexOf(input); + + if (dayIndex !== -1 && dayLabels[dayIndex]) { + dayLabels[dayIndex].classList.add('is-invalid'); + dayLabels[dayIndex].setAttribute('aria-invalid', 'true'); + } + }); + + if (checkedDayInputs.length && invalidDayInputs.length === checkedDayInputs.length) { + setDayInputError(card, checkedDayInputs[0] || dayInputs[0], 'Selected days must overlap the date range.'); + isValid = false; + } + + if (startTime && endTime && !hasScheduleRuleOverlap(startDatetime, endDatetime, startTime, endTime, dayIndicesToCheck)) { + setRuleError(fields.endTime, 'Start and end times must overlap the date range.'); + if (fields.startTime) { + fields.startTime.classList.add('is-invalid'); + fields.startTime.setAttribute('aria-invalid', 'true'); + } + isValid = false; + } + } + + return isValid; + } + + function updateLiveRuleValidity(card) { + validateScheduleRuleCard(card); + } + + function validateRuleCard(card) { + return validateScheduleRuleCard(card); } function readRuleFromCard(card) { @@ -978,37 +1439,47 @@ card.querySelector('[data-schedule-rule-start-time]').value = String(normalizedRule.start_time || ''); card.querySelector('[data-schedule-rule-end-time]').value = String(normalizedRule.end_time || ''); card.querySelector('[data-remove-schedule-rule]').setAttribute('data-confirm-message', 'Remove this rule?'); - card.querySelector('[data-lte-toggle="card-collapse"]').setAttribute('aria-label', 'Collapse rule ' + String(ruleIndex)); - card.querySelector('[data-lte-toggle="card-collapse"]').setAttribute('title', 'Collapse rule ' + String(ruleIndex)); - card.querySelector('[data-lte-toggle="card-collapse"] .visually-hidden').textContent = 'Collapse rule ' + String(ruleIndex); updateRuleCardDayOptions(card, ruleKey, normalizedRule); - card.querySelector('[data-lte-toggle="card-collapse"]').addEventListener('click', function (event) { - event.preventDefault(); - card.classList.toggle('collapsed-card'); - persistScheduleDraft(); - }); - if (isCollapsed) { card.classList.add('collapsed-card'); } else { card.classList.remove('collapsed-card'); } + try { + updateLiveRuleValidity(card); + } catch (_error) { + clearRuleValidity(card); + } + syncRuleCollapseButtonState(card); + return card; } function addRule(rule, options) { var ruleCount = getRuleCards().length + 1; var card = createRuleCardElement(rule || {}, ruleCount, options); - scheduleRuleList.appendChild(card); + + if (!card) { + scheduleRuleList.insertAdjacentHTML('beforeend', buildScheduleRuleCardMarkup(rule || {}, ruleCount, Boolean(options && options.isCollapsed))); + card = scheduleRuleList.lastElementChild; + } + + if (!card) { + return null; + } + + if (card.parentNode !== scheduleRuleList) { + scheduleRuleList.appendChild(card); + } refreshRuleNumbers(); syncScheduleRulesField(); return card; } function handleCardChange(card) { - clearRuleValidity(card); + updateLiveRuleValidity(card); updateRuleCardSummary(card); syncScheduleRulesField(); } @@ -1074,6 +1545,16 @@ scheduleRuleList.addEventListener('click', function (event) { var removeButton = event.target && event.target.closest ? event.target.closest('[data-remove-schedule-rule]') : null; + var collapseButton = event.target && event.target.closest ? event.target.closest('[data-schedule-rule-collapse], [data-lte-toggle="card-collapse"]') : null; + + if (collapseButton) { + window.setTimeout(function () { + syncRuleCollapseButtonState(collapseButton.closest('[data-schedule-rule-card]')); + persistScheduleDraft(); + }, 0); + return; + } + if (!removeButton) { return; } @@ -1107,6 +1588,8 @@ } else { refreshRuleNumbers(); getRuleCards().forEach(function (card) { + syncRuleCollapseButtonState(card); + updateLiveRuleValidity(card); updateRuleCardSummary(card); }); syncScheduleRulesField(); @@ -1637,9 +2120,36 @@ var rows = getRows(); rows.forEach(function (row, index) { var orderNumber = row.querySelector('.playlist-order-number'); + var moveUpButton = row.querySelector('[data-playlist-row-move="up"]'); + var moveDownButton = row.querySelector('[data-playlist-row-move="down"]'); + var moveUpIcon = row.querySelector('[data-playlist-row-move-icon="up"]'); + var moveDownIcon = row.querySelector('[data-playlist-row-move-icon="down"]'); + var isFirst = index === 0; + var isLast = index === rows.length - 1; + if (orderNumber) { orderNumber.textContent = String(index + 1); } + + if (moveUpButton) { + moveUpButton.disabled = isFirst; + moveUpButton.setAttribute('aria-disabled', isFirst ? 'true' : 'false'); + } + + if (moveUpIcon) { + moveUpIcon.classList.toggle('bi-caret-up-fill', !isFirst); + moveUpIcon.classList.toggle('bi-caret-up', isFirst); + } + + if (moveDownButton) { + moveDownButton.disabled = isLast; + moveDownButton.setAttribute('aria-disabled', isLast ? 'true' : 'false'); + } + + if (moveDownIcon) { + moveDownIcon.classList.toggle('bi-caret-down-fill', !isLast); + moveDownIcon.classList.toggle('bi-caret-down', isLast); + } }); syncAddSlideOptions(); syncPlaylistCanvasLock(); @@ -1665,6 +2175,38 @@ }); } + function movePlaylistRowByOffset(row, offset) { + var currentTbody = document.getElementById('playlist-items-body') || tbody; + var rows = getRows(); + var currentIndex = rows.indexOf(row); + var targetIndex; + var referenceRow; + + if (!currentTbody || !row || currentIndex === -1) { + return false; + } + + targetIndex = currentIndex + Number(offset || 0); + if (targetIndex < 0 || targetIndex >= rows.length) { + return false; + } + + referenceRow = rows[targetIndex]; + + if (targetIndex > currentIndex) { + referenceRow = referenceRow ? referenceRow.nextSibling : null; + } + + if (referenceRow) { + currentTbody.insertBefore(row, referenceRow); + } else { + currentTbody.appendChild(row); + } + + updateRowOrder(true); + return true; + } + function populatePlaylistSlideRow(row, values, rowKey) { var canvasWidth = Number(values.canvas_width); var canvasHeight = Number(values.canvas_height); @@ -1898,6 +2440,7 @@ return; } + var moveButton = event.target.closest('[data-playlist-row-move]'); var removeButton = event.target.closest('[data-playlist-remove-row]'); var durationButton = event.target.closest('.playlist-use-video-duration'); var muteButton = event.target.closest('.playlist-disable-audio'); @@ -1907,6 +2450,13 @@ return; } + if (moveButton) { + event.preventDefault(); + event.stopPropagation(); + movePlaylistRowByOffset(row, moveButton.getAttribute('data-playlist-row-move') === 'up' ? -1 : 1); + return; + } + if (removeButton) { event.preventDefault(); row.remove(); diff --git a/src/web/public/js/rbac-permissions.js b/src/web/public/js/rbac-permissions.js index 3f6319e..f950492 100644 --- a/src/web/public/js/rbac-permissions.js +++ b/src/web/public/js/rbac-permissions.js @@ -1,8 +1,16 @@ // RBAC permission matrix helpers for checkbox groups. (function () { - function getGroupCheckboxes(group) { - return Array.prototype.slice.call(group.querySelectorAll('input[name="permission_keys[]"]')); + function getPermissionSections() { + return Array.prototype.slice.call(document.querySelectorAll('[data-permission-section]')); + } + + function getPermissionRows(container) { + return Array.prototype.slice.call(container.querySelectorAll('[data-permission-row]')); + } + + function getRowCheckboxes(row) { + return Array.prototype.slice.call(row.querySelectorAll('input[name="permission_keys[]"]')); } function getPermissionKey(checkbox) { @@ -19,8 +27,12 @@ return String(parts[1] || '').trim().toLowerCase(); } - function syncPermissionGroup(group) { - var checkboxes = getGroupCheckboxes(group); + function syncPermissionRow(row) { + if (!row) { + return; + } + + var checkboxes = getRowCheckboxes(row); if (!checkboxes.length) { return; } @@ -55,19 +67,57 @@ } } - function handleGroupChange(event) { + function setRowCheckboxes(row, checked) { + if (!row) { + return; + } + + var checkboxes = getRowCheckboxes(row); + if (!checkboxes.length) { + return; + } + + checkboxes.forEach(function (checkbox) { + checkbox.checked = Boolean(checked); + }); + + syncPermissionRow(row); + } + + function toggleRowCheckboxes(row) { + if (!row) { + return; + } + + var checkboxes = getRowCheckboxes(row); + if (!checkboxes.length) { + return; + } + + var allChecked = checkboxes.every(function (checkbox) { + return Boolean(checkbox.checked); + }); + + setRowCheckboxes(row, !allChecked); + } + + function findPermissionRow(targetId) { + return document.querySelector('[data-permission-row-id="' + targetId + '"]'); + } + + function handleRowChange(event) { var checkbox = event.target && event.target.matches ? event.target : null; if (!checkbox || checkbox.tagName !== 'INPUT' || checkbox.type !== 'checkbox') { return; } var actionKey = getActionKey(checkbox); - var group = checkbox.closest('.accordion-item'); - if (!group) { + var row = checkbox.closest('[data-permission-row]'); + if (!row) { return; } - var checkboxes = getGroupCheckboxes(group); + var checkboxes = getRowCheckboxes(row); var readCheckbox = checkboxes.find(function (candidate) { return getActionKey(candidate) === 'read'; }) || null; @@ -91,8 +141,28 @@ } function initPermissionGroups() { - document.querySelectorAll('.accordion-item').forEach(function (group) { - syncPermissionGroup(group); + getPermissionSections().forEach(function (section) { + getPermissionRows(section).forEach(function (row) { + syncPermissionRow(row); + }); + }); + + document.addEventListener('click', function (event) { + var control = event.target && event.target.closest ? event.target.closest('[data-permission-row-toggle]') : null; + if (!control) { + return; + } + + event.preventDefault(); + + var targetId = String(control.getAttribute('data-permission-row-target') || '').trim(); + if (!targetId) { + return; + } + + if (control.hasAttribute('data-permission-row-toggle')) { + toggleRowCheckboxes(findPermissionRow(targetId)); + } }); document.addEventListener('change', function (event) { @@ -104,8 +174,8 @@ return; } - handleGroupChange(event); - syncPermissionGroup(checkbox.closest('.accordion-item')); + handleRowChange(event); + syncPermissionRow(checkbox.closest('[data-permission-row]')); }); } diff --git a/src/web/public/js/regions/region-types.js b/src/web/public/js/regions/region-types.js index c8fdf7d..4b2ef43 100644 --- a/src/web/public/js/regions/region-types.js +++ b/src/web/public/js/regions/region-types.js @@ -58,13 +58,26 @@ return registry[normalizeType(type)] || null; } + function getRegionTypeLabel(type, definition) { + return String(definition && definition.label ? definition.label : type || '') + .trim() + .toLowerCase(); + } + + function compareRegionTypeEntries(left, right) { + var leftLabel = getRegionTypeLabel(left && left.type, left && left.definition); + var rightLabel = getRegionTypeLabel(right && right.type, right && right.definition); + + return leftLabel.localeCompare(rightLabel, undefined, { sensitivity: 'base' }) || String(left && left.type || '').localeCompare(String(right && right.type || ''), undefined, { sensitivity: 'base' }); + } + function list() { return Object.keys(registry).map(function (type) { return { type: type, definition: registry[type] || {} }; - }); + }).sort(compareRegionTypeEntries); } function getDefaultRegionSize(regionType, lockRatio) { @@ -91,18 +104,38 @@ return String(definition.label); } - var normalized = normalizeType(regionType); - if (!normalized) { - return 'Region'; - } + return 'Text'; + } - return normalized - .split(/[_-]+/) - .filter(function (segment) { return segment; }) - .map(function (segment) { - return segment.charAt(0).toUpperCase() + segment.slice(1); - }) - .join(' ') || 'Region'; + function escapeHtml(value) { + return String(value === undefined || value === null ? '' : value) + .replace(/&/g, '&') + .replace(//g, '>') + .replace(/"/g, '"') + .replace(/'/g, '''); + } + + function renderEditorCardShell(options) { + var settings = options || {}; + var region = settings.region || {}; + var cardClass = String(settings.cardClass || 'card card-outline card-secondary admin-form-card template-field-card mb-3'); + var cardAttrs = String(settings.cardAttrs || ''); + var cardStyle = settings.cardStyle ? ' style="' + escapeHtml(settings.cardStyle) + '"' : ''; + var bodyClass = String(settings.bodyClass || 'card-body p-3 d-grid'); + var bodyAttrs = String(settings.bodyAttrs || ''); + var bodyStyle = settings.bodyStyle ? ' style="' + escapeHtml(settings.bodyStyle) + '"' : ''; + var headerActions = String(settings.headerActions || ''); + var bodyHtml = String(settings.bodyHtml || ''); + + return '' + + '
' + + '
' + + '' + escapeHtml(region.label) + '' + + '
' + headerActions + '
' + + '
' + + '
' + bodyHtml + '
' + + '
'; } root.pulseRegionTypes = { @@ -111,6 +144,7 @@ list: list, getDefaultRegionSize: getDefaultRegionSize, getDefaultRegionStyle: getDefaultRegionStyle, - getRegionChipLabel: getRegionChipLabel + getRegionChipLabel: getRegionChipLabel, + renderEditorCardShell: renderEditorCardShell }; }()); \ No newline at end of file diff --git a/src/web/public/js/regions/region-utils.js b/src/web/public/js/regions/region-utils.js index 8d96800..5fb243b 100644 --- a/src/web/public/js/regions/region-utils.js +++ b/src/web/public/js/regions/region-utils.js @@ -178,12 +178,25 @@ return 'video'; } + if (button && button.hasAttribute('data-remove-region-qr-image')) { + return 'qr-image'; + } + if (button && button.hasAttribute('data-remove-region-image')) { return 'image'; } if (card && card.dataset && String(card.dataset.regionMediaType || '').trim()) { - return String(card.dataset.regionMediaType || '').trim() === 'video' ? 'video' : 'image'; + var regionMediaType = String(card.dataset.regionMediaType || '').trim(); + if (regionMediaType === 'video') { + return 'video'; + } + + if (regionMediaType === 'qr-image') { + return 'qr-image'; + } + + return 'image'; } return 'image'; @@ -194,7 +207,15 @@ return callbacks.getExistingMediaPrefix(mediaType); } - return String(mediaType || '').trim() === 'video' ? 'existing_region_video_' : 'existing_region_image_'; + if (String(mediaType || '').trim() === 'video') { + return 'existing_region_video_'; + } + + if (String(mediaType || '').trim() === 'qr-image') { + return 'existing_region_qr_image_'; + } + + return 'existing_region_image_'; } function getMediaPrefix(mediaType) { @@ -202,7 +223,15 @@ return callbacks.getMediaPrefix(mediaType); } - return String(mediaType || '').trim() === 'video' ? 'region_video_' : 'region_image_'; + if (String(mediaType || '').trim() === 'video') { + return 'region_video_'; + } + + if (String(mediaType || '').trim() === 'qr-image') { + return 'region_qr_image_'; + } + + return 'region_image_'; } function getVideoDurationHiddenInput(regionId) { @@ -214,18 +243,33 @@ } function handleRemove(button) { - var regionId = button.getAttribute('data-remove-region-image') || button.getAttribute('data-remove-region-video'); + var regionId = button.getAttribute('data-remove-region-image') || button.getAttribute('data-remove-region-video') || button.getAttribute('data-remove-region-qr-image'); var card = getCard(regionId); var mediaType = getMediaType(button, card); - var hidden = card && card.querySelector('input[type="hidden"][name="' + getExistingPrefix(mediaType) + regionId + '"]'); - var input = card && card.querySelector('input[type="file"][name="' + getMediaPrefix(mediaType) + regionId + '"]'); + var hiddenName = getExistingPrefix(mediaType) + regionId; + var inputName = getMediaPrefix(mediaType) + regionId; + var hidden = card && card.querySelector('input[type="hidden"][name="' + hiddenName + '"]'); + var input = card && card.querySelector('input[type="file"][name="' + inputName + '"]'); + + if (!hidden && regionId) { + hidden = templateFields.querySelector('input[type="hidden"][name="' + hiddenName + '"]'); + } + + if (!input && regionId) { + input = templateFields.querySelector('input[type="file"][name="' + inputName + '"]'); + } var uploadPath = input ? String(input.dataset.uploadedPath || '').trim() : ''; + var hasPendingUpload = input && input.dataset && String(input.dataset.uploadToken || '').trim(); if (input && input.dataset.previewUrl) { URL.revokeObjectURL(input.dataset.previewUrl); delete input.dataset.previewUrl; } + if (input && hasPendingUpload) { + input.dataset.uploadCancelRequested = '1'; + } + if (input && input.dataset.uploadedNeedsCleanup === '1' && uploadPath && typeof callbacks.queueUploadCleanup === 'function') { callbacks.queueUploadCleanup([uploadPath]); } @@ -238,6 +282,7 @@ if (hidden) { hidden.value = ''; + hidden.dispatchEvent(new Event('change', { bubbles: true })); } var durationHidden = getVideoDurationHiddenInput(regionId); @@ -259,7 +304,7 @@ } templateFields.addEventListener('click', function (event) { - var button = event.target && event.target.closest ? event.target.closest('[data-remove-region-image], [data-remove-region-video]') : null; + var button = event.target && event.target.closest ? event.target.closest('[data-remove-region-image], [data-remove-region-video], [data-remove-region-qr-image]') : null; if (!button || !templateFields.contains(button)) { return; @@ -273,7 +318,7 @@ return; } - var button = event.target && event.target.closest ? event.target.closest('[data-remove-region-image], [data-remove-region-video]') : null; + var button = event.target && event.target.closest ? event.target.closest('[data-remove-region-image], [data-remove-region-video], [data-remove-region-qr-image]') : null; if (!button || !templateFields.contains(button)) { return; @@ -304,7 +349,15 @@ return callbacks.getMediaTypeFromInput(input); } - return input && input.name && input.name.indexOf('region_video_') === 0 ? 'video' : 'image'; + if (input && input.name && input.name.indexOf('region_video_') === 0) { + return 'video'; + } + + if (input && input.name && input.name.indexOf('region_qr_image_') === 0) { + return 'qr-image'; + } + + return 'image'; } function getMediaPrefix(mediaType) { @@ -312,7 +365,15 @@ return callbacks.getMediaPrefix(mediaType); } - return String(mediaType || '').trim() === 'video' ? 'region_video_' : 'region_image_'; + if (String(mediaType || '').trim() === 'video') { + return 'region_video_'; + } + + if (String(mediaType || '').trim() === 'qr-image') { + return 'region_qr_image_'; + } + + return 'region_image_'; } function getExistingMediaPrefix(mediaType) { @@ -320,7 +381,15 @@ return callbacks.getExistingMediaPrefix(mediaType); } - return String(mediaType || '').trim() === 'video' ? 'existing_region_video_' : 'existing_region_image_'; + if (String(mediaType || '').trim() === 'video') { + return 'existing_region_video_'; + } + + if (String(mediaType || '').trim() === 'qr-image') { + return 'existing_region_qr_image_'; + } + + return 'existing_region_image_'; } function getUploadZone(input) { @@ -440,7 +509,7 @@ } function getPendingUploadCleanupPaths() { - return Array.prototype.slice.call(templateFields.querySelectorAll('input[type="file"][name^="region_image_"], input[type="file"][name^="region_video_"]')).map(function (input) { + return Array.prototype.slice.call(templateFields.querySelectorAll('input[type="file"][name^="region_image_"], input[type="file"][name^="region_video_"], input[type="file"][name^="region_qr_image_"]')).map(function (input) { if (!input || String(input.dataset.uploadedNeedsCleanup || '') !== '1') { return null; } @@ -450,7 +519,7 @@ } function clearPendingUploadCleanupPaths() { - Array.prototype.slice.call(templateFields.querySelectorAll('input[type="file"][name^="region_image_"], input[type="file"][name^="region_video_"]')).forEach(function (input) { + Array.prototype.slice.call(templateFields.querySelectorAll('input[type="file"][name^="region_image_"], input[type="file"][name^="region_video_"], input[type="file"][name^="region_qr_image_"]')).forEach(function (input) { if (!input) { return; } @@ -465,7 +534,7 @@ } var mediaType = getMediaTypeFromInput(input); - var regionId = input.name.replace(/^region_(?:image|video)_/, ''); + var regionId = input.name.replace(/^region_(?:image|video|qr_image)_/, ''); var card = getCard(regionId); var hidden = card && card.querySelector('input[type="hidden"][name="' + getExistingMediaPrefix(mediaType) + regionId + '"]'); var zone = getUploadZone(input); @@ -475,6 +544,7 @@ var uploadUrl = String(callbacks.uploadUrl || '/slides/uploads'); var uploadTimeoutMs = Math.max(1, Number(callbacks.uploadTimeoutMs || 30000)); + delete input.dataset.uploadCancelRequested; input.dataset.uploadToken = uploadToken; setUploadState(input, true, 0, 'Uploading...', true); @@ -549,8 +619,19 @@ delete input.dataset.previewUrl; } + if (String(input.dataset.uploadCancelRequested || '') === '1') { + if (uploadedPath) { + queueUploadCleanup([uploadedPath]); + } + + setUploadState(input, false); + resolve(payload); + return; + } + if (hidden) { hidden.value = uploadedPath; + hidden.dispatchEvent(new Event('change', { bubbles: true })); } input.dataset.uploadedPath = uploadedPath; input.dataset.uploadedNeedsCleanup = '1'; @@ -611,6 +692,7 @@ xhr.onloadend = function () { if (input.dataset.uploadToken === uploadToken) { delete input.dataset.uploadToken; + delete input.dataset.uploadCancelRequested; setUploadState(input, false); } }; @@ -647,7 +729,7 @@ templateFields.dataset.regionMediaUploadBound = '1'; templateFields.addEventListener('change', function (event) { - var input = event.target && event.target.matches && event.target.matches('input[type="file"][name^="region_image_"], input[type="file"][name^="region_video_"]') ? event.target : null; + var input = event.target && event.target.matches && event.target.matches('input[type="file"][name^="region_image_"], input[type="file"][name^="region_video_"], input[type="file"][name^="region_qr_image_"]') ? event.target : null; if (!input || !templateFields.contains(input)) { return; diff --git a/src/web/public/js/regions/type/api.js b/src/web/public/js/regions/type/api.js index 16706c9..a0b04ac 100644 --- a/src/web/public/js/regions/type/api.js +++ b/src/web/public/js/regions/type/api.js @@ -232,7 +232,6 @@ '' + '' + '' + - '
Use transforms like {{name.upper()}}, {{name.title()}}, or {{name.lower()}} on leaf fields.
' + '
' + '
Available placeholders
' + '
' + ((placeholderFields.length && window.placeholderChips && typeof window.placeholderChips.renderChips === 'function') ? window.placeholderChips.renderChips(placeholderFields) : placeholderChips || 'No JSON fields available.') + '
' + diff --git a/src/web/public/js/regions/type/html.js b/src/web/public/js/regions/type/html.js index db031fe..4361218 100644 --- a/src/web/public/js/regions/type/html.js +++ b/src/web/public/js/regions/type/html.js @@ -20,19 +20,13 @@ function renderEditorCard(context) { var region = context.region; var current = String(context.current || ''); - return '' + - '
' + - '
' + - '' + escapeHtml(region.label) + '' + - 'HTML' + - '
' + - '
' + - '' + - '
HTML is rendered in a sandboxed iframe preview.
' + - '
' + - '
'; + return registry.renderEditorCardShell({ + region: region, + headerActions: 'HTML', + bodyHtml: '' + + '' + + '
HTML is rendered in a sandboxed iframe preview.
' + }); } registry.register('html', { diff --git a/src/web/public/js/regions/type/image.js b/src/web/public/js/regions/type/image.js index 4f9f14d..1403744 100644 --- a/src/web/public/js/regions/type/image.js +++ b/src/web/public/js/regions/type/image.js @@ -34,47 +34,44 @@ var uploadMaxLabel = String(uploadConfig.limitLabel || context.uploadMaxLabel || '100 MB'); var uploadAccept = Array.isArray(uploadConfig.accept) ? uploadConfig.accept.join(', ') : String(uploadConfig.accept || 'image/png, image/jpeg, image/gif, image/webp'); var uploadHelpText = String(uploadConfig.helpText || 'PNG, JPG, GIF, or WebP'); - return '' + - '
' + - '
' + - '' + escapeHtml(region.label) + '' + - 'Image' + - '
' + - '
' + - '
' + - '
' + - '
'; + '' + }); } function buildEditorCardContext(context) { diff --git a/src/web/public/js/regions/type/qr-code.js b/src/web/public/js/regions/type/qr-code.js index bea0f48..3479e03 100644 --- a/src/web/public/js/regions/type/qr-code.js +++ b/src/web/public/js/regions/type/qr-code.js @@ -3,34 +3,193 @@ (function () { var registry = window.pulseRegionTypes; var utils = window.pulseRegionUtils || {}; + var defaultQrOptions = { + width: 1000, + height: 1000, + type: 'canvas', + margin: 10, + qrOptions: {}, + dotsOptions: { + color: '#000000', + type: 'square' + }, + cornersSquareOptions: { + color: '#000000', + type: 'square' + }, + cornersDotOptions: { + color: '#000000', + type: 'square' + }, + backgroundOptions: { + color: '#ffffff' + } + }; + var qrDotTypes = [ + { value: 'square', label: 'Square' }, + { value: 'dots', label: 'Dots' }, + { value: 'rounded', label: 'Rounded' }, + { value: 'extra-rounded', label: 'Extra rounded' }, + { value: 'classy', label: 'Classy' }, + { value: 'classy-rounded', label: 'Classy rounded' } + ]; + var qrCornerSquareTypes = [ + { value: 'square', label: 'Square' }, + { value: 'dot', label: 'Dot' }, + { value: 'rounded', label: 'Rounded' }, + { value: 'extra-rounded', label: 'Extra rounded' }, + { value: 'classy', label: 'Classy' }, + { value: 'classy-rounded', label: 'Classy rounded' } + ]; + var qrCornerDotTypes = [ + { value: 'square', label: 'Square' }, + { value: 'dot', label: 'Dot' }, + { value: 'rounded', label: 'Rounded' }, + { value: 'extra-rounded', label: 'Extra rounded' }, + { value: 'classy', label: 'Classy' }, + { value: 'classy-rounded', label: 'Classy rounded' } + ]; - function escapeHtml(value) { - return utils.escapeHtml ? utils.escapeHtml(value) : String(value === undefined || value === null ? '' : value); + function getOptionValue(option) { + if (option && typeof option === 'object' && option.value !== undefined && option.value !== null) { + return String(option.value).trim(); + } + + return String(option === undefined || option === null ? '' : option).trim(); } - function buildQrCodeUrl(value) { - var text = String(value && typeof value === 'object' ? (value.value !== undefined ? value.value : value.qr_code) : value || '').trim(); - var svg = String(value && typeof value === 'object' && value.qr_svg ? value.qr_svg : '').trim(); - if (svg) { - return svg; - } - - if (!text || typeof window.qrcode !== 'function') { - return ''; - } - - try { - var code = window.qrcode(0, 'M'); - code.addData(text); - code.make(); - svg = code.createSvgTag(4, 1); - return svg || ''; - } catch (_error) { - return ''; - } + function normalizeQrDotTypeValue(value, fallback) { + var text = String(value === undefined || value === null ? '' : value).trim(); + return normalizeOptionValue(text, qrDotTypes, fallback); } - function normalizeQrSvg(svg) { + function normalizeQrCornerSquareTypeValue(value, fallback) { + var text = String(value === undefined || value === null ? '' : value).trim(); + return normalizeOptionValue(text, qrCornerSquareTypes, fallback); + } + + function normalizeQrCornerDotTypeValue(value, fallback) { + var text = String(value === undefined || value === null ? '' : value).trim(); + return normalizeOptionValue(text, qrCornerDotTypes, fallback); + } + + function toQrLibraryCornerSquareType(value) { + var text = String(value || '').trim(); + for (var index = 0; index < qrCornerSquareTypes.length; index += 1) { + if (getOptionValue(qrCornerSquareTypes[index]) === text) { + return text; + } + } + + return 'square'; + } + + function normalizeMarginValue(value, fallback) { + var parsed = Number(value); + return Number.isFinite(parsed) && parsed >= 0 ? Math.round(parsed) : fallback; + } + + function buildQrImageRadiusStyle(radius) { + var parsed = normalizeMarginValue(radius, 0); + return parsed > 0 ? 'border-radius:' + parsed + 'px;overflow:hidden;' : ''; + } + + function handleMediaInputChange(context) { + if (!context || !context.file || typeof context.uploadFile !== 'function') { + return false; + } + + var accept = ['image/png', 'image/jpeg', 'image/gif', 'image/webp']; + var limitBytes = 100 * 1024 * 1024; + + if (!utils.fileMatchesAccept || !utils.fileMatchesAccept(context.file, accept)) { + showUploadWarning('This image region accepts PNG, JPG, GIF, or WebP files.'); + return false; + } + + if (Number(context.file.size || 0) > limitBytes) { + showUploadWarning('File must be 100 MB or smaller.'); + return false; + } + + return context.uploadFile(context.file); + } + + function showUploadWarning(message) { + if (typeof window.showToast === 'function') { + window.showToast(message, 'warning'); + return; + } + + window.alert(message); + } + + function normalizeHexColorValue(value, fallback) { + var raw = String(value === undefined || value === null ? '' : value).trim(); + return raw || fallback; + } + + function normalizeBooleanValue(value, fallback) { + if (value === undefined || value === null || value === '') { + return Boolean(fallback); + } + if (typeof value === 'boolean') { + return value; + } + var text = String(value).trim().toLowerCase(); + if (text === 'true' || text === '1' || text === 'yes' || text === 'on') { + return true; + } + if (text === 'false' || text === '0' || text === 'no' || text === 'off') { + return false; + } + return Boolean(value); + } + + function normalizeOptionValue(value, options, fallback) { + var text = String(value === undefined || value === null ? '' : value).trim(); + for (var index = 0; index < options.length; index += 1) { + if (getOptionValue(options[index]) === text) { + return text; + } + } + + return fallback; + } + + function normalizeRatioValue(value, fallback) { + var parsed = Number(value); + return Number.isFinite(parsed) && parsed >= 0 ? parsed : fallback; + } + + function normalizeGradientTypeValue(value, fallback) { + var text = String(value === undefined || value === null ? '' : value).trim().toLowerCase(); + return text === 'radial' ? 'radial' : 'linear'; + } + + function normalizeGradientRotationValue(value, fallback) { + var parsed = Number(value); + return Number.isFinite(parsed) ? Math.round(parsed) : fallback; + } + + function normalizeColorModeValue(value, fallback) { + var text = String(value === undefined || value === null ? '' : value).trim().toLowerCase(); + return text === 'gradient' ? 'gradient' : 'single'; + } + + function normalizeColorValue(value, fallback) { + return normalizeHexColorValue(value, fallback); + } + + function renderSelectOptions(options, currentValue) { + return options.map(function (option) { + var optionValue = getOptionValue(option); + var optionLabel = option && typeof option === 'object' && option.label !== undefined ? option.label : optionValue; + return ''; + }).join(''); + } + + function normalizeSvgMarkup(svg) { var markup = String(svg || '').trim(); if (!markup || markup.charAt(0) !== '<') { return markup; @@ -54,22 +213,806 @@ }); } + function normalizeQrSvg(svg) { + return normalizeSvgMarkup(svg); + } + + function buildEditorCardContext(context, existingContent) { + var existing = existingContent && context && context.region && existingContent[context.region.region_key] ? existingContent[context.region.region_key] : null; + var style = getQrStyleState(existing || {}); + return Object.assign({ + region: context.region, + current: String(context.current || (existing && (existing.value !== undefined ? existing.value : existing.qr_code)) || ''), + qr_svg: existing && existing.qr_svg ? existing.qr_svg : '', + qr_margin: style.qr_margin, + qr_background_color: style.qr_background_color, + qr_background_transparent: style.qr_background_transparent, + qr_dots_color: style.qr_dots_color, + qr_dots_type: style.qr_dots_type, + qr_corners_square_color: style.qr_corners_square_color, + qr_corners_square_type: style.qr_corners_square_type, + qr_corners_dot_color: style.qr_corners_dot_color, + qr_corners_dot_type: style.qr_corners_dot_type, + qr_image: style.qr_image, + qr_image_size: style.qr_image_size, + qr_image_margin: style.qr_image_margin, + qr_image_hide_background_dots: style.qr_image_hide_background_dots, + qr_border_radius: style.qr_border_radius + }, style); + } + + function buildPreviewRenderContext(region, card, existingContent) { + return readQrEditorState(card, region, existingContent || {}); + } + + function getQrStyleState(value) { + var source = value && typeof value === 'object' ? value : {}; + return { + qr_margin: normalizeMarginValue(source.qr_margin, defaultQrOptions.margin), + qr_background_color: normalizeHexColorValue(source.qr_background_color, '#ffffff'), + qr_background_transparent: normalizeBooleanValue(source.qr_background_transparent, false), + qr_background_gradient_type: normalizeGradientTypeValue(source.qr_background_gradient_type, 'linear'), + qr_background_gradient_rotation: normalizeGradientRotationValue(source.qr_background_gradient_rotation, 0), + qr_background_gradient_color_1: normalizeHexColorValue(source.qr_background_gradient_color_1, '#ffffff'), + qr_background_gradient_color_2: normalizeHexColorValue(source.qr_background_gradient_color_2, '#ffffff'), + qr_dots_color: normalizeColorValue(source.qr_dots_color, defaultQrOptions.dotsOptions.color), + qr_dots_type: normalizeQrDotTypeValue(source.qr_dots_type, defaultQrOptions.dotsOptions.type), + qr_dots_color_mode: normalizeColorModeValue(source.qr_dots_color_mode, 'single'), + qr_dots_gradient_type: normalizeGradientTypeValue(source.qr_dots_gradient_type, 'linear'), + qr_dots_gradient_rotation: normalizeGradientRotationValue(source.qr_dots_gradient_rotation, 0), + qr_dots_gradient_color_1: normalizeHexColorValue(source.qr_dots_gradient_color_1, defaultQrOptions.dotsOptions.color), + qr_dots_gradient_color_2: normalizeHexColorValue(source.qr_dots_gradient_color_2, '#ffffff'), + qr_corners_square_color: normalizeColorValue(source.qr_corners_square_color, defaultQrOptions.cornersSquareOptions.color), + qr_corners_square_type: normalizeQrCornerSquareTypeValue(source.qr_corners_square_type, defaultQrOptions.cornersSquareOptions.type), + qr_corners_square_color_mode: normalizeColorModeValue(source.qr_corners_square_color_mode, 'single'), + qr_corners_square_gradient_type: normalizeGradientTypeValue(source.qr_corners_square_gradient_type, 'linear'), + qr_corners_square_gradient_rotation: normalizeGradientRotationValue(source.qr_corners_square_gradient_rotation, 0), + qr_corners_square_gradient_color_1: normalizeHexColorValue(source.qr_corners_square_gradient_color_1, defaultQrOptions.cornersSquareOptions.color), + qr_corners_square_gradient_color_2: normalizeHexColorValue(source.qr_corners_square_gradient_color_2, '#ffffff'), + qr_corners_dot_color: normalizeColorValue(source.qr_corners_dot_color, defaultQrOptions.cornersDotOptions.color), + qr_corners_dot_type: normalizeQrCornerDotTypeValue(source.qr_corners_dot_type, defaultQrOptions.cornersDotOptions.type), + qr_corners_dot_color_mode: normalizeColorModeValue(source.qr_corners_dot_color_mode, 'single'), + qr_corners_dot_gradient_type: normalizeGradientTypeValue(source.qr_corners_dot_gradient_type, 'linear'), + qr_corners_dot_gradient_rotation: normalizeGradientRotationValue(source.qr_corners_dot_gradient_rotation, 0), + qr_corners_dot_gradient_color_1: normalizeHexColorValue(source.qr_corners_dot_gradient_color_1, defaultQrOptions.cornersDotOptions.color), + qr_corners_dot_gradient_color_2: normalizeHexColorValue(source.qr_corners_dot_gradient_color_2, '#ffffff'), + qr_image: String(source.qr_image || '').trim(), + qr_image_size: normalizeRatioValue(source.qr_image_size, 0.4), + qr_image_margin: normalizeMarginValue(source.qr_image_margin, 5), + qr_image_hide_background_dots: normalizeBooleanValue(source.qr_image_hide_background_dots, true), + qr_border_radius: normalizeMarginValue(source.qr_border_radius, 0) + }; + } + + function buildGradientOptions(prefix, style) { + var type = normalizeGradientTypeValue(style[prefix + '_gradient_type'], 'linear'); + var color1 = normalizeHexColorValue(style[prefix + '_gradient_color_1'], defaultQrOptions[prefix === 'qr_background' ? 'backgroundOptions' : prefix === 'qr_dots' ? 'dotsOptions' : prefix === 'qr_corners_square' ? 'cornersSquareOptions' : 'cornersDotOptions'].color); + var color2 = normalizeHexColorValue(style[prefix + '_gradient_color_2'], '#ffffff'); + return { + type: type, + rotation: normalizeGradientRotationValue(style[prefix + '_gradient_rotation'], 0), + colorStops: [ + { offset: 0, color: color1 }, + { offset: 1, color: color2 } + ] + }; + } + + function readQrEditorState(card, region, existingContent) { + var existing = existingContent && region && existingContent[region.region_key] ? existingContent[region.region_key] : {}; + var style = getQrStyleState(existing || {}); + var readValue = function (name) { + var input = card && card.querySelector ? card.querySelector('[name="' + name + '"]') : null; + return input ? input.value : undefined; + }; + var readFirstValue = function (names) { + for (var index = 0; index < names.length; index += 1) { + var value = readValue(names[index]); + if (value !== undefined && value !== null && String(value).trim() !== '') { + return value; + } + } + return undefined; + }; + var readChecked = function (name) { + var input = card && card.querySelector ? card.querySelector('[name="' + name + '"]') : null; + return input ? Boolean(input.checked) : undefined; + }; + + style.qr_margin = normalizeMarginValue(readValue('region_qr_margin_' + region.id), style.qr_margin); + style.qr_background_color = normalizeHexColorValue(readValue('region_qr_background_color_' + region.id), style.qr_background_color); + style.qr_background_color_mode = normalizeColorModeValue(readFirstValue(['qr_background_color_mode_' + region.id, 'region_qr_background_color_mode_' + region.id]), style.qr_background_color_mode); + style.qr_background_gradient_type = normalizeGradientTypeValue(readFirstValue(['qr_background_gradient_type_' + region.id, 'region_qr_background_gradient_type_' + region.id]), style.qr_background_gradient_type); + style.qr_background_gradient_rotation = normalizeGradientRotationValue(readFirstValue(['qr_background_gradient_rotation_' + region.id, 'region_qr_background_gradient_rotation_' + region.id]), style.qr_background_gradient_rotation); + style.qr_background_gradient_color_1 = normalizeHexColorValue(readFirstValue(['qr_background_gradient_color_1_' + region.id, 'region_qr_background_gradient_color_1_' + region.id]), style.qr_background_gradient_color_1); + style.qr_background_gradient_color_2 = normalizeHexColorValue(readFirstValue(['qr_background_gradient_color_2_' + region.id, 'region_qr_background_gradient_color_2_' + region.id]), style.qr_background_gradient_color_2); + style.qr_dots_color = normalizeColorValue(readValue('region_qr_dots_color_' + region.id), style.qr_dots_color); + style.qr_dots_type = normalizeQrDotTypeValue(readValue('region_qr_dots_type_' + region.id), style.qr_dots_type); + style.qr_dots_color_mode = normalizeColorModeValue(readFirstValue(['qr_dots_color_mode_' + region.id, 'region_qr_dots_color_mode_' + region.id]), style.qr_dots_color_mode); + style.qr_dots_gradient_type = normalizeGradientTypeValue(readFirstValue(['qr_dots_gradient_type_' + region.id, 'region_qr_dots_gradient_type_' + region.id]), style.qr_dots_gradient_type); + style.qr_dots_gradient_rotation = normalizeGradientRotationValue(readFirstValue(['qr_dots_gradient_rotation_' + region.id, 'region_qr_dots_gradient_rotation_' + region.id]), style.qr_dots_gradient_rotation); + style.qr_dots_gradient_color_1 = normalizeHexColorValue(readFirstValue(['qr_dots_gradient_color_1_' + region.id, 'region_qr_dots_gradient_color_1_' + region.id]), style.qr_dots_gradient_color_1); + style.qr_dots_gradient_color_2 = normalizeHexColorValue(readFirstValue(['qr_dots_gradient_color_2_' + region.id, 'region_qr_dots_gradient_color_2_' + region.id]), style.qr_dots_gradient_color_2); + style.qr_corners_square_color = normalizeColorValue(readValue('region_qr_corners_square_color_' + region.id), style.qr_corners_square_color); + style.qr_corners_square_type = normalizeQrCornerSquareTypeValue(readValue('region_qr_corners_square_type_' + region.id), style.qr_corners_square_type); + style.qr_corners_square_color_mode = normalizeColorModeValue(readFirstValue(['qr_corners_square_color_mode_' + region.id, 'region_qr_corners_square_color_mode_' + region.id]), style.qr_corners_square_color_mode); + style.qr_corners_square_gradient_type = normalizeGradientTypeValue(readFirstValue(['qr_corners_square_gradient_type_' + region.id, 'region_qr_corners_square_gradient_type_' + region.id]), style.qr_corners_square_gradient_type); + style.qr_corners_square_gradient_rotation = normalizeGradientRotationValue(readFirstValue(['qr_corners_square_gradient_rotation_' + region.id, 'region_qr_corners_square_gradient_rotation_' + region.id]), style.qr_corners_square_gradient_rotation); + style.qr_corners_square_gradient_color_1 = normalizeHexColorValue(readFirstValue(['qr_corners_square_gradient_color_1_' + region.id, 'region_qr_corners_square_gradient_color_1_' + region.id]), style.qr_corners_square_gradient_color_1); + style.qr_corners_square_gradient_color_2 = normalizeHexColorValue(readFirstValue(['qr_corners_square_gradient_color_2_' + region.id, 'region_qr_corners_square_gradient_color_2_' + region.id]), style.qr_corners_square_gradient_color_2); + style.qr_corners_dot_color = normalizeColorValue(readValue('region_qr_corners_dot_color_' + region.id), style.qr_corners_dot_color); + style.qr_corners_dot_type = normalizeQrCornerDotTypeValue(readValue('region_qr_corners_dot_type_' + region.id), style.qr_corners_dot_type); + style.qr_corners_dot_color_mode = normalizeColorModeValue(readFirstValue(['qr_corners_dot_color_mode_' + region.id, 'region_qr_corners_dot_color_mode_' + region.id]), style.qr_corners_dot_color_mode); + style.qr_corners_dot_gradient_type = normalizeGradientTypeValue(readFirstValue(['qr_corners_dot_gradient_type_' + region.id, 'region_qr_corners_dot_gradient_type_' + region.id]), style.qr_corners_dot_gradient_type); + style.qr_corners_dot_gradient_rotation = normalizeGradientRotationValue(readFirstValue(['qr_corners_dot_gradient_rotation_' + region.id, 'region_qr_corners_dot_gradient_rotation_' + region.id]), style.qr_corners_dot_gradient_rotation); + style.qr_corners_dot_gradient_color_1 = normalizeHexColorValue(readFirstValue(['qr_corners_dot_gradient_color_1_' + region.id, 'region_qr_corners_dot_gradient_color_1_' + region.id]), style.qr_corners_dot_gradient_color_1); + style.qr_corners_dot_gradient_color_2 = normalizeHexColorValue(readFirstValue(['qr_corners_dot_gradient_color_2_' + region.id, 'region_qr_corners_dot_gradient_color_2_' + region.id]), style.qr_corners_dot_gradient_color_2); + var qrImageValue = readValue('existing_region_qr_image_' + region.id); + if (qrImageValue !== undefined) { + style.qr_image = String(qrImageValue || '').trim(); + } + style.qr_image_size = normalizeRatioValue(readValue('region_qr_image_size_' + region.id), style.qr_image_size); + style.qr_image_margin = normalizeMarginValue(readValue('region_qr_image_margin_' + region.id), style.qr_image_margin); + style.qr_border_radius = normalizeMarginValue(readValue('region_qr_border_radius_' + region.id), style.qr_border_radius); + style.qr_image_hide_background_dots = readChecked('region_qr_image_hide_background_dots_' + region.id); + + style.value = String(readValue('region_qr_code_' + region.id) || existing.value || existing.qr_code || '').trim(); + style.qr_code = style.value; + style.qr_svg = String(readValue('region_qr_svg_' + region.id) || existing.qr_svg || '').trim(); + style.qr_preview = String(readValue('region_qr_preview_' + region.id) || existing.qr_preview || '').trim(); + + return style; + } + + function buildStyledQrSvgMarkup(value) { + var src = String(value && typeof value === 'object' && value.qr_svg ? value.qr_svg : '').trim(); + return src ? normalizeSvgMarkup(src) : ''; + } + + async function blobToText(blob) { + if (window.blobToText) { + return window.blobToText(blob); + } + + if (!blob) { + return ''; + } + + if (typeof blob.text === 'function') { + return blob.text(); + } + + if (typeof FileReader === 'function') { + return await new Promise(function (resolve, reject) { + var reader = new FileReader(); + reader.onload = function () { + resolve(String(reader.result || '')); + }; + reader.onerror = function () { + reject(reader.error || new Error('Failed to read blob.')); + }; + reader.readAsText(blob); + }); + } + + return ''; + } + + async function blobToDataUrl(blob) { + if (!blob) { + return ''; + } + + if (typeof blob === 'string') { + return blob; + } + + if (typeof blob.text === 'function' && typeof FileReader === 'function') { + return await new Promise(function (resolve, reject) { + var reader = new FileReader(); + reader.onload = function () { + resolve(String(reader.result || '')); + }; + reader.onerror = function () { + reject(reader.error || new Error('Failed to read blob.')); + }; + reader.readAsDataURL(blob); + }); + } + + if (typeof blob.type === 'string' && blob.type && /^image\//i.test(blob.type) && typeof blob.arrayBuffer === 'function' && typeof btoa === 'function') { + var buffer = await blob.arrayBuffer(); + var bytes = new Uint8Array(buffer); + var binary = ''; + + for (var index = 0; index < bytes.length; index += 1) { + binary += String.fromCharCode(bytes[index]); + } + + return 'data:' + blob.type + ';base64,' + btoa(binary); + } + + return ''; + } + + function bindEditorCard(context) { + var region = context && context.region; + var card = context && context.card; + var requestPreviewRender = context && typeof context.requestPreviewRender === 'function' ? context.requestPreviewRender : function () {}; + var input = card && card.querySelector ? card.querySelector('input[type="url"][name="region_qr_code_' + region.id + '"]') : null; + var svgInput = card && card.querySelector ? card.querySelector('textarea[name="region_qr_svg_' + region.id + '"]') : null; + var previewInput = card && card.querySelector ? card.querySelector('input[type="hidden"][name="region_qr_preview_' + region.id + '"]') : null; + + if (!region || !card || !input || !svgInput || !previewInput) { + return; + } + + var regionId = String(region.id); + var token = 0; + var libraryRetryTimer = 0; + var imageFileInput = card.querySelector ? card.querySelector('input[type="file"][name="region_qr_image_' + region.id + '"]') : null; + var imageHiddenInput = card.querySelector ? card.querySelector('input[type="hidden"][name="existing_region_qr_image_' + region.id + '"]') : null; + var imagePreviewBox = card.querySelector ? card.querySelector('.slide-image-region-preview-box') : null; + var gradientTypeSelects = card.querySelectorAll ? card.querySelectorAll('[data-gradient-type-select]') : []; + var colorModeSelects = card.querySelectorAll ? card.querySelectorAll('[data-color-mode-select]') : []; + + function getCurrentState() { + return readQrEditorState(card, region, context.existingContent || {}); + } + + function renderImagePreview(src) { + if (!imagePreviewBox) { + return; + } + + imagePreviewBox.innerHTML = src + ? '
' + + 'Current QR image preview' + + '' + + '
' + : '
No image
'; + } + + function updateHideDotsLabel() { + var checkbox = card.querySelector ? card.querySelector('input[type="checkbox"][name="region_qr_image_hide_background_dots_' + region.id + '"]') : null; + var label = card.querySelector ? card.querySelector('[data-qr-hide-dots-label]') : null; + + if (!checkbox || !label) { + return; + } + + var isChecked = Boolean(checkbox.checked); + label.textContent = isChecked ? 'Show dots behind image' : 'Hide dots behind image'; + label.setAttribute('aria-label', isChecked ? 'Show dots behind image' : 'Hide dots behind image'); + } + + function updateGradientControlState() { + Array.prototype.forEach.call(colorModeSelects, function (select) { + var mode = String(select.value || 'single').trim(); + var body = select.closest ? select.closest('[data-color-mode-accordion-body]') : null; + if (!body) { + return; + } + + var singleBlock = body.querySelector('[data-single-color-config]'); + var gradientBlock = body.querySelector('[data-gradient-config-wrapper]'); + + if (singleBlock) { + singleBlock.hidden = mode !== 'single'; + } + if (gradientBlock) { + gradientBlock.hidden = mode !== 'gradient'; + } + }); + + Array.prototype.forEach.call(gradientTypeSelects, function (select) { + var body = select.closest ? select.closest('[data-gradient-accordion-body]') : null; + if (!body) { + return; + } + + var gradientType = String(select.value || 'linear').trim(); + var linearOnly = body.querySelector('[data-gradient-linear-only]'); + if (linearOnly) { + linearOnly.hidden = gradientType !== 'linear'; + } + }); + } + + function getQrOptions(value) { + var text = String(value && typeof value === 'object' ? (value.value !== undefined ? value.value : value.qr_code) : value || '').trim(); + var style = getQrStyleState(value); + var dotsGradient = style.qr_dots_color_mode === 'gradient' ? buildGradientOptions('qr_dots', style) : null; + var cornersSquareGradient = style.qr_corners_square_color_mode === 'gradient' ? buildGradientOptions('qr_corners_square', style) : null; + var cornersDotGradient = style.qr_corners_dot_color_mode === 'gradient' ? buildGradientOptions('qr_corners_dot', style) : null; + var backgroundGradient = style.qr_background_color_mode === 'gradient' ? buildGradientOptions('qr_background', style) : null; + return { + width: defaultQrOptions.width, + height: defaultQrOptions.height, + type: defaultQrOptions.type, + data: text, + margin: style.qr_margin, + qrOptions: defaultQrOptions.qrOptions, + dotsOptions: { + type: style.qr_dots_type, + color: style.qr_dots_color, + gradient: dotsGradient || undefined + }, + cornersSquareOptions: { + type: toQrLibraryCornerSquareType(style.qr_corners_square_type), + color: style.qr_corners_square_color, + gradient: cornersSquareGradient || undefined + }, + cornersDotOptions: { + type: style.qr_corners_dot_type, + color: style.qr_corners_dot_color, + gradient: cornersDotGradient || undefined + }, + backgroundOptions: { + color: style.qr_background_transparent ? 'transparent' : style.qr_background_color, + gradient: backgroundGradient || undefined + }, + image: style.qr_image || undefined, + imageOptions: { + hideBackgroundDots: style.qr_image_hide_background_dots, + imageSize: style.qr_image_size, + margin: style.qr_image_margin + } + }; + } + + async function syncImageFilePreview() { + return false; + } + + async function syncQrCode() { + if (typeof window.QRCodeStyling !== 'function') { + if (!libraryRetryTimer) { + libraryRetryTimer = window.setTimeout(function () { + libraryRetryTimer = 0; + void syncQrCode(); + }, 50); + } + return; + } + + updateGradientControlState(); + + var nextToken = ++token; + var value = String(input.value || '').trim(); + var pendingEntry = { cancelled: false }; + + pendingByRegionId[regionId] = pendingEntry; + + if (!value) { + svgInput.value = ''; + previewInput.value = ''; + requestPreviewRender(); + if (pendingByRegionId[regionId] === pendingEntry) { + delete pendingByRegionId[regionId]; + } + return; + } + + var state = getCurrentState(); + state.value = value; + svgInput.value = buildStyledQrSvgMarkup(state); + previewInput.value = ''; + + try { + var qrCode = new window.QRCodeStyling(getQrOptions(state)); + var svgMarkup = ''; + var previewDataUrl = ''; + + try { + var svgBlob = await qrCode.getRawData('svg'); + svgMarkup = normalizeSvgMarkup(await blobToText(svgBlob)); + } catch (_svgError) { + svgMarkup = ''; + } + + try { + var pngBlob = await qrCode.getRawData('png'); + previewDataUrl = await blobToDataUrl(pngBlob); + } catch (_pngError) { + previewDataUrl = ''; + } + + if (pendingEntry.cancelled || nextToken !== token) { + return; + } + svgInput.value = svgMarkup; + previewInput.value = previewDataUrl; + requestPreviewRender(); + } catch (_error) { + if (pendingEntry.cancelled || nextToken !== token) { + return; + } + requestPreviewRender(); + } finally { + if (pendingByRegionId[regionId] === pendingEntry) { + delete pendingByRegionId[regionId]; + } + } + } + + function scheduleSync() { + var pendingEntry = pendingByRegionId[regionId]; + if (pendingEntry) { + pendingEntry.cancelled = true; + } + updateGradientControlState(); + void syncQrCode(); + } + + if (imageFileInput) { + renderImagePreview(String((imageHiddenInput && imageHiddenInput.value) || '')); + } + + updateHideDotsLabel(); + + if (!card.__pulseQrImageRemoveBound) { + card.__pulseQrImageRemoveBound = true; + card.addEventListener('click', function (_event) {}); + card.addEventListener('keydown', function (_event) {}); + } + + Array.prototype.forEach.call(gradientTypeSelects, function (select) { + select.addEventListener('change', function () { + var body = select.closest ? select.closest('[data-gradient-accordion-body]') : null; + if (body) { + var linearOnly = body.querySelector('[data-gradient-linear-only]'); + if (linearOnly) { + linearOnly.hidden = String(select.value || 'linear').trim() !== 'linear'; + } + } + updateGradientControlState(); + scheduleSync(); + }); + }); + + Array.prototype.forEach.call(colorModeSelects, function (select) { + select.addEventListener('change', function () { + var body = select.closest ? select.closest('[data-color-mode-accordion-body]') : null; + if (body) { + var mode = String(select.value || 'single').trim(); + var singleBlock = body.querySelector('[data-single-color-config]'); + var gradientBlock = body.querySelector('[data-gradient-config-wrapper]'); + if (singleBlock) { + singleBlock.hidden = mode !== 'single'; + } + if (gradientBlock) { + gradientBlock.hidden = mode !== 'gradient'; + } + } + updateGradientControlState(); + scheduleSync(); + }); + }); + + function handleCardInput(event) { + var target = event && event.target ? event.target : null; + if (!target || !target.name || (target.name.indexOf('region_qr_') !== 0 && target.name.indexOf('qr_') !== 0 && target.name.indexOf('existing_region_qr_image_') !== 0) || target.name.indexOf('region_qr_svg_') === 0) { + return; + } + + if (target.name.indexOf('region_qr_preview_') === 0) { + return; + } + + if (target.matches && target.matches('[data-color-mode-select]')) { + updateGradientControlState(); + } + + if (target.matches && target.matches('[data-gradient-type-select]')) { + updateGradientControlState(); + } + + if (target.name === 'region_qr_image_hide_background_dots_' + region.id) { + updateHideDotsLabel(); + } + + scheduleSync(); + } + + card.addEventListener('input', handleCardInput); + card.addEventListener('change', handleCardInput); + card.__pulseQrSync = syncQrCode; + + updateGradientControlState(); + scheduleSync(); + } + + function getQrOptions(value) { + var text = String(value && typeof value === 'object' ? (value.value !== undefined ? value.value : value.qr_code) : value || '').trim(); + var style = getQrStyleState(value); + var dotsGradient = style.qr_dots_color_mode === 'gradient' ? buildGradientOptions('qr_dots', style) : null; + var cornersSquareGradient = style.qr_corners_square_color_mode === 'gradient' ? buildGradientOptions('qr_corners_square', style) : null; + var cornersDotGradient = style.qr_corners_dot_color_mode === 'gradient' ? buildGradientOptions('qr_corners_dot', style) : null; + var backgroundGradient = style.qr_background_color_mode === 'gradient' ? buildGradientOptions('qr_background', style) : null; + return { + width: defaultQrOptions.width, + height: defaultQrOptions.height, + type: defaultQrOptions.type, + data: text, + margin: style.qr_margin, + qrOptions: defaultQrOptions.qrOptions, + dotsOptions: { + type: style.qr_dots_type, + color: style.qr_dots_color, + gradient: dotsGradient || undefined + }, + cornersSquareOptions: { + type: toQrLibraryCornerSquareType(style.qr_corners_square_type), + color: style.qr_corners_square_color, + gradient: cornersSquareGradient || undefined + }, + cornersDotOptions: { + type: style.qr_corners_dot_type, + color: style.qr_corners_dot_color, + gradient: cornersDotGradient || undefined + }, + backgroundOptions: { + color: style.qr_background_transparent ? 'transparent' : style.qr_background_color, + gradient: backgroundGradient || undefined + }, + image: style.qr_image || undefined, + imageOptions: { + hideBackgroundDots: style.qr_image_hide_background_dots, + imageSize: style.qr_image_size, + margin: style.qr_image_margin + } + }; + } + + function renderGradientControls(prefix, regionId, style, gradientLabel, fallbackColor) { + var gradientType = normalizeGradientTypeValue(style[prefix + '_gradient_type'], 'linear'); + var gradientRotation = normalizeGradientRotationValue(style[prefix + '_gradient_rotation'], 0); + var color1 = normalizeHexColorValue(style[prefix + '_gradient_color_1'], fallbackColor); + var color2 = normalizeHexColorValue(style[prefix + '_gradient_color_2'], '#ffffff'); + + return '' + + '
' + + '
' + + '' + + '' + + '
' + + '
' + + '
' + + '
' + + '' + + '' + + '
' + + '
' + + '' + + '' + + '
' + + '
' + + '
' + + '' + + '' + + '
' + + '
' + + '
'; + } + + function renderAccordionSection(accordionId, sectionKey, label, bodyHtml, currentOpen) { + var headingId = accordionId + '-heading-' + sectionKey; + var collapseId = accordionId + '-collapse-' + sectionKey; + + return '' + + '
' + + '

' + + '' + + '

' + + '
' + + '
' + bodyHtml + '
' + + '
' + + '
'; + } + + function renderColorModeSection(accordionId, sectionKey, prefix, regionId, label, style, singleControlsHtml, gradientLabel, fallbackColor, currentOpen, styleSelectHtml) { + var mode = normalizeColorModeValue(style[prefix + '_color_mode'], 'single'); + var colorModeSelect = '' + + '
' + + '' + + '' + + '
'; + var topControlsHtml = prefix === 'qr_background' + ? '
' + singleControlsHtml + '
' + colorModeSelect + (styleSelectHtml ? '
' + styleSelectHtml + '
' : '') + : (styleSelectHtml ? '
' + styleSelectHtml + '
' : '') + '
' + colorModeSelect + '
'; + + return renderAccordionSection(accordionId, sectionKey, label, '' + + '
' + + topControlsHtml + + (prefix === 'qr_background' ? '' : '
' + singleControlsHtml + '
') + + '
' + renderGradientControls(prefix, regionId, style, gradientLabel, fallbackColor) + '
' + + '
', currentOpen); + } + + async function buildStyledQrSvg(value) { + var text = String(value && typeof value === 'object' ? (value.value !== undefined ? value.value : value.qr_code) : value || '').trim(); + if (!text || typeof window.QRCodeStyling !== 'function') { + return ''; + } + + try { + var qrCode = new window.QRCodeStyling(getQrOptions(value)); + var blob = await qrCode.getRawData('svg'); + return normalizeSvgMarkup(await blobToText(blob)); + } catch (_error) { + return ''; + } + } + function renderPreview(region, value) { - var src = buildQrCodeUrl(value); + var src = String(value && typeof value === 'object' && value.qr_preview ? value.qr_preview : '').trim(); + var svgSrc = String(value && typeof value === 'object' && value.qr_svg ? value.qr_svg : '').trim(); + var borderRadius = normalizeMarginValue(value && typeof value === 'object' ? value.qr_border_radius : 0, 0); + var imageStyle = 'width:100%;height:100%;object-fit:contain;display:block;background:transparent;' + (borderRadius > 0 ? 'border-radius:' + borderRadius + 'px;overflow:hidden;' : ''); + if (!src && region && typeof document !== 'undefined' && document.querySelector) { + var previewInput = document.querySelector('input[type="hidden"][name="region_qr_preview_' + region.id + '"]'); + if (previewInput) { + src = String(previewInput.value || '').trim(); + } + } + if (!svgSrc && region && typeof document !== 'undefined' && document.querySelector) { + var svgInput = document.querySelector('textarea[name="region_qr_svg_' + region.id + '"]'); + if (svgInput) { + svgSrc = String(svgInput.value || '').trim(); + } + } + if (!src) { + src = svgSrc || buildStyledQrSvgMarkup(value); + } if (!src) { return '
QR Code
'; } - - if (String(src || '').trim().charAt(0) === '<') { - return '
' + normalizeQrSvg(src) + '
'; + if (/^data:image\//i.test(src)) { + return 'QR code preview'; } - - return 'QR code preview'; + return 'QR code preview'; } function renderEditorCard(context) { var region = context.region; var current = String(context.current || ''); + var currentSvg = String(context.qr_svg || ''); + var style = getQrStyleState(context); + var currentBackgroundColor = normalizeHexColorValue(context.qr_background_color, '#ffffff'); + var currentDotsColor = normalizeColorValue(context.qr_dots_color, defaultQrOptions.dotsOptions.color); + var currentDotsType = normalizeQrDotTypeValue(context.qr_dots_type, defaultQrOptions.dotsOptions.type); + var currentCornersSquareColor = normalizeColorValue(context.qr_corners_square_color, defaultQrOptions.cornersSquareOptions.color); + var currentCornersSquareType = normalizeQrCornerSquareTypeValue(context.qr_corners_square_type, defaultQrOptions.cornersSquareOptions.type); + var currentCornersDotColor = normalizeColorValue(context.qr_corners_dot_color, defaultQrOptions.cornersDotOptions.color); + var currentCornersDotType = normalizeQrCornerDotTypeValue(context.qr_corners_dot_type, defaultQrOptions.cornersDotOptions.type); + var currentImage = String(context.qr_image || ''); + var currentBorderRadius = normalizeMarginValue(context.qr_border_radius, 0); + var currentImagePreview = currentImage + ? '
' + + 'Current QR image preview' + + '' + + '
' + : '
No image
'; + var currentImageSize = Math.min(normalizeRatioValue(context.qr_image_size, 0.4), 0.4); + var currentImageMargin = normalizeMarginValue(context.qr_image_margin, 5); + var currentImageHideBackgroundDots = normalizeBooleanValue(context.qr_image_hide_background_dots, true) ? ' checked' : ''; + var currentImageHideBackgroundDotsLabel = normalizeBooleanValue(context.qr_image_hide_background_dots, true) ? 'Show dots behind image' : 'Hide dots behind image'; + + var backgroundSingleControls = '' + + '
' + + '
' + + '' + + '' + + '
' + + '
' + + '' + + '' + + '
' + + '
'; + + var backgroundColorControlHtml = '' + + '
' + + '' + + '' + + '
'; + + var dotsSingleControls = '' + + '
' + + '
' + + '' + + '' + + '
' + + '
'; + + var cornersSquareSingleControls = '' + + '
' + + '
' + + '' + + '' + + '
' + + '
'; + + var cornersDotSingleControls = '' + + '
' + + '
' + + '' + + '' + + '
' + + '
'; + + var dotsStyleSelect = '' + + '
' + + '' + + '' + + '
'; + + var cornersSquareStyleSelect = '' + + '
' + + '' + + '' + + '
'; + + var cornersDotStyleSelect = '' + + '
' + + '' + + '' + + '
'; + + var imageOptionsHtml = '' + + '
' + + '
' + + '' + + '
' + + '
' + + '
' + currentImagePreview + '
' + + '
' + + '
' + + '
' + + '
' + + '' + + '' + + '
' + + '
' + + '' + + '' + + '
' + + '
' + + '' + + '' + + '
' + + '
'; + return '' + '
' + '
' + @@ -79,32 +1022,24 @@ '
' + '
' + '
' + - '' + - '' + - '
The QR code is generated from the URL above.
' + + '' + + '' + + '' + + '' + + '
' + + '
' + + renderColorModeSection('qr-code-style-accordion-' + region.id, 'background', 'qr_background', region.id, 'Background', style, backgroundSingleControls, 'Background gradient', currentBackgroundColor, true, backgroundColorControlHtml) + + renderColorModeSection('qr-code-style-accordion-' + region.id, 'dots', 'qr_dots', region.id, 'Dots', style, dotsSingleControls, 'Dots gradient', currentDotsColor, false, dotsStyleSelect) + + renderColorModeSection('qr-code-style-accordion-' + region.id, 'corner-squares', 'qr_corners_square', region.id, 'Corner squares', style, cornersSquareSingleControls, 'Corner square gradient', currentCornersSquareColor, false, cornersSquareStyleSelect) + + renderColorModeSection('qr-code-style-accordion-' + region.id, 'corner-dots', 'qr_corners_dot', region.id, 'Corner dots', style, cornersDotSingleControls, 'Corner dot gradient', currentCornersDotColor, false, cornersDotStyleSelect) + + renderAccordionSection('qr-code-style-accordion-' + region.id, 'image-options', 'Image options', imageOptionsHtml, false) + + '
' + + '
' + + '' + '
' + '
'; } - function buildEditorCardContext(context, existingContent) { - var existing = existingContent && context && context.region && existingContent[context.region.region_key] ? existingContent[context.region.region_key] : null; - return { - region: context.region, - current: String(context.current || (existing && (existing.value !== undefined ? existing.value : existing.qr_code)) || ''), - qr_svg: existing && existing.qr_svg ? existing.qr_svg : '' - }; - } - - function buildPreviewRenderContext(region, card, existingContent) { - var current = existingContent && existingContent[region.region_key] ? existingContent[region.region_key] : {}; - var input = card && card.querySelector ? card.querySelector('input[type="url"][name="region_qr_code_' + region.id + '"]') : null; - - return { - value: input ? input.value : (current && current.value !== undefined ? current.value : (current && current.qr_code !== undefined ? current.qr_code : '')), - existingContent: existingContent || {} - }; - } - registry.register('qr-code', { label: 'QR Code', getDefaultRegionSize: function () { @@ -113,6 +1048,8 @@ renderPreview: renderPreview, renderEditorCard: renderEditorCard, buildEditorCardContext: buildEditorCardContext, - buildPreviewRenderContext: buildPreviewRenderContext + buildPreviewRenderContext: buildPreviewRenderContext, + bindEditorCard: bindEditorCard, + handleMediaInputChange: handleMediaInputChange }); }()); \ No newline at end of file diff --git a/src/web/public/js/regions/type/rss.js b/src/web/public/js/regions/type/rss.js index 77f3252..af5e281 100644 --- a/src/web/public/js/regions/type/rss.js +++ b/src/web/public/js/regions/type/rss.js @@ -55,6 +55,11 @@ }) || null; } + function getFeedItemCount(feedId, feeds) { + var feed = getFeedById(feedId, feeds); + return feed && Array.isArray(feed.items) ? feed.items.length : 0; + } + function getFieldList(feedId, feeds) { var feed = getFeedById(feedId, feeds); var sampleItem = feed && Array.isArray(feed.items) ? feed.items[0] : null; @@ -128,7 +133,8 @@ var feed = getFeedById(feedId, feeds); var items = feed && Array.isArray(feed.items) ? feed.items : []; var parsedItemNumber = Math.max(1, Number(itemNumber || 1)); - var index = Number.isFinite(parsedItemNumber) && parsedItemNumber > 0 ? parsedItemNumber - 1 : 0; + var itemCount = Math.max(1, items.length || 1); + var index = Number.isFinite(parsedItemNumber) && parsedItemNumber > 0 ? Math.min(itemCount, parsedItemNumber) - 1 : 0; return items[index] || null; } @@ -208,6 +214,7 @@ var region = context.region; var current = context.current || {}; var config = context.config || {}; + var itemNumberLimit = Math.max(1, Number(context.itemNumberLimit || 1)); var placeholderChips = String(context.placeholderChips || ''); var feedOptions = String(context.feedOptions || ''); return '' + @@ -232,15 +239,15 @@ '
' + '
' + '' + - '' + + '' + '
' + '
' + '' + '' + - '
Use transforms like {{title.upper()}}, {{title.title()}}, or {{title.lower()}} on leaf fields.
' + '
' + '
Available placeholders
' + '
' + (placeholderChips || 'No RSS fields available.') + '
' + + '
Placeholder values support transforms, for example {{title.upper()}}, {{title.title()}}, {{title.lower()}}, or {{publishedAt.format("MMM D, YYYY")}}.
' + '
' + '
' + ''; @@ -250,6 +257,7 @@ var region = context.region; var current = context.current || {}; var config = context.config || {}; + var itemNumberLimit = Math.max(1, Number(getFeedItemCount(config.feed_id, feeds) || 1)); var placeholderChips = String(context.placeholderChips || ''); var feedOptions = String(context.feedOptions || ''); @@ -257,6 +265,7 @@ region: region, current: current, config: config, + itemNumberLimit: itemNumberLimit, fontSize: context.fontSize || '', placeholderChips: placeholderChips, feedOptions: feedOptions, diff --git a/src/web/public/js/regions/type/rtmp.js b/src/web/public/js/regions/type/rtmp.js index d828fe9..ee0ad45 100644 --- a/src/web/public/js/regions/type/rtmp.js +++ b/src/web/public/js/regions/type/rtmp.js @@ -21,24 +21,12 @@ function renderEditorCard(context) { var region = context.region; var current = String(context.current || ''); - var disableAudio = context.disableAudio === undefined ? false : Boolean(context.disableAudio); - return '' + - '
' + - '
' + - '' + escapeHtml(region.label) + '' + - 'RTMP' + - '
' + - '
' + - '' + - '' + - '
Player controls stay hidden and the stream is not interactive.
' + - '
' + - '
'; + return registry.renderEditorCardShell({ + region: region, + headerActions: 'RTMP', + bodyHtml: '' + + '' + }); } registry.register('rtmp', { diff --git a/src/web/public/js/regions/type/schedule.js b/src/web/public/js/regions/type/schedule.js index d336730..8e992fd 100644 --- a/src/web/public/js/regions/type/schedule.js +++ b/src/web/public/js/regions/type/schedule.js @@ -219,7 +219,7 @@ '
' + '
Available placeholders
' + '
' + renderSchedulePlaceholderChips(currentGroup, currentEntries) + '
' + - '
Format start and end values with expressions like {{start.format("MMM D, YYYY h:mm A")}} and {{end.format("MMM D, YYYY h:mm A")}}.
' + + '
Placeholder values support transforms, for example {{title.upper()}}, {{title.title()}}, {{title.lower()}} or {{start.format("MMM D, YYYY h:mm A")}}.
' + '
' + '' + '' + diff --git a/src/web/public/js/regions/type/video.js b/src/web/public/js/regions/type/video.js index 7b82a09..8ea5b94 100644 --- a/src/web/public/js/regions/type/video.js +++ b/src/web/public/js/regions/type/video.js @@ -39,48 +39,45 @@ var uploadVideoMaxLabel = String(uploadConfig.limitLabel || context.uploadVideoMaxLabel || '1 GB'); var uploadAccept = Array.isArray(uploadConfig.accept) ? uploadConfig.accept.join(', ') : String(uploadConfig.accept || 'video/mp4, video/webm, video/ogg'); var uploadHelpText = String(uploadConfig.helpText || 'MP4, WebM, or Ogg'); - return '' + - '
' + - '
' + - '' + escapeHtml(region.label) + '' + - 'Video' + - '
' + - '
' + - '
' + - '
' + - '
'; + '' + + '' + }); } function buildEditorCardContext(context) { diff --git a/src/web/public/js/regions/type/webpage.js b/src/web/public/js/regions/type/webpage.js index bc105a9..3e4a48f 100644 --- a/src/web/public/js/regions/type/webpage.js +++ b/src/web/public/js/regions/type/webpage.js @@ -20,19 +20,12 @@ function renderEditorCard(context) { var region = context.region; var current = String(context.current || ''); - return '' + - '
' + - '
' + - '' + escapeHtml(region.label) + '' + - 'Webpage' + - '
' + - '
' + - '' + - '
The webpage will be loaded in an iframe.
' + - '
' + - '
'; + return registry.renderEditorCardShell({ + region: region, + headerActions: 'Webpage', + bodyHtml: '' + + '' + }); } registry.register('webpage', { diff --git a/src/web/public/js/shared/qr-code-svg.js b/src/web/public/js/shared/qr-code-svg.js new file mode 100644 index 0000000..6dd9425 --- /dev/null +++ b/src/web/public/js/shared/qr-code-svg.js @@ -0,0 +1,54 @@ +// Shared QR SVG helpers for browser renderers. + +(function () { + function normalizeSvgMarkup(svg) { + var markup = String(svg || '').trim(); + if (!markup) { + return ''; + } + + return markup.replace(/^<\?xml[^>]*>\s*/i, ''); + } + + function stripBackground(svg) { + var markup = String(svg || '').trim(); + if (!markup) { + return ''; + } + + return markup + .replace(/]*fill="#ffffff"[^>]*d="M0 0h[^\"]*"[^>]*\s*\/>/i, '') + .replace(/]*fill="#ffffff"[^>]*d="M0 0h[^\"]*"[^>]*><\/path>/i, '') + .replace(/]*fill="#ffffff"[^>]*x="0"[^>]*y="0"[^>]*width="\d+"[^>]*height="\d+"[^>]*\s*\/?>(?:<\/rect>)?/i, ''); + } + + function normalizePreviewSvg(svg) { + var markup = normalizeSvgMarkup(stripBackground(svg)); + if (!markup || markup.charAt(0) !== '<') { + return markup; + } + + return markup.replace(/^]*)>/i, function (_match, attrText) { + var attrs = String(attrText || ''); + if (!/\bwidth\s*=\s*/i.test(attrs)) { + attrs += ' width="95%"'; + } + if (!/\bheight\s*=\s*/i.test(attrs)) { + attrs += ' height="95%"'; + } + if (!/\bpreserveAspectRatio\s*=\s*/i.test(attrs)) { + attrs += ' preserveAspectRatio="xMidYMid meet"'; + } + if (!/\bstyle\s*=\s*/i.test(attrs)) { + attrs += ' style="display:block;width:95%;height:95%;"'; + } + return ''; + }); + } + + window.pulseQrSvgUtils = { + normalizeSvgMarkup: normalizeSvgMarkup, + stripBackground: stripBackground, + normalizePreviewSvg: normalizePreviewSvg + }; +}()); \ No newline at end of file diff --git a/src/web/public/js/slides/slide-form-editor.js b/src/web/public/js/slides/slide-form-editor.js index b38ab54..0d230dd 100644 --- a/src/web/public/js/slides/slide-form-editor.js +++ b/src/web/public/js/slides/slide-form-editor.js @@ -68,6 +68,32 @@ export function createSlideFormEditorController(options) { return card ? card.querySelector('input[name="region_font_size_' + regionId + '"]') : null; } + function getTinymce() { + return window.tinymce || null; + } + + function getThemeName() { + var theme = String(document.documentElement && document.documentElement.dataset && document.documentElement.dataset.bsTheme || 'light').trim().toLowerCase(); + if (theme === 'auto') { + return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; + } + + return theme === 'dark' ? 'dark' : 'light'; + } + + function getTinyMceThemeAssets() { + var themeName = getThemeName(); + var skinName = themeName === 'dark' ? 'oxide-dark' : 'oxide'; + var skinBase = '/assets/vendor/tinymce/skins/ui/' + skinName; + return { + themeName: themeName, + skinName: skinName, + skinUrl: skinBase, + contentCss: skinBase + '/content.css', + bodyClass: themeName === 'dark' ? 'tinymce-theme-dark' : 'tinymce-theme-light' + }; + } + function getEditorRegionType(card) { if (!card) { return ''; @@ -99,31 +125,6 @@ export function createSlideFormEditorController(options) { fontSizeHidden.value = normalizeFontSizeValue(fontSizeHidden.value) || String(defaultFontSize); } - function getTinymce() { - return window.tinymce || null; - } - - function getThemeName() { - var theme = String(document.documentElement && document.documentElement.dataset && document.documentElement.dataset.bsTheme || 'light').trim().toLowerCase(); - if (theme === 'auto') { - return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; - } - return theme === 'dark' ? 'dark' : 'light'; - } - - function getTinyMceThemeAssets() { - var themeName = getThemeName(); - var skinName = themeName === 'dark' ? 'oxide-dark' : 'oxide'; - var skinBase = '/assets/vendor/tinymce/skins/ui/' + skinName; - return { - themeName: themeName, - skinName: skinName, - skinUrl: skinBase, - contentCss: skinBase + '/content.css', - bodyClass: themeName === 'dark' ? 'tinymce-theme-dark' : 'tinymce-theme-light' - }; - } - function getEditorBackgroundColorValue() { var value = String(getEditorBackgroundColor() || '').trim(); return value || '#111111'; @@ -161,28 +162,19 @@ export function createSlideFormEditorController(options) { function attachEditorEvents(regionId, editor) { var hidden = getEditorHiddenInput(regionId); var source = editor && editor.targetElm ? editor.targetElm : null; + var hydrated = false; - function syncState() { + function syncState(shouldLock) { var currentEditor = editorInstances.get(regionId); if (currentEditor !== editor) { return; } - if (typeof editor.save === 'function') { - editor.save(); + syncEditorState(regionId, editor, shouldLock, hydrated); + if (!hydrated) { + requestPreviewRender(); + return; } - var content = editor.getContent({ format: 'html' }); - content = isEmptyRichTextValue(content) ? '' : content; - if (hidden) { - hidden.value = content; - } - if (source) { - source.value = content; - } - if (templateSelectorLock && typeof templateSelectorLock.markEdited === 'function') { - templateSelectorLock.markEdited(); - } - requestPreviewRender(); } editor.on('init', function () { @@ -195,11 +187,14 @@ export function createSlideFormEditorController(options) { source.value = content; } syncEditorFontSizeHidden(regionId); - syncState(); + hydrated = true; + requestPreviewRender(); }); - ['change', 'keyup', 'undo', 'redo', 'SetContent', 'Paste', 'input', 'NodeChange'].forEach(function (eventName) { - editor.on(eventName, syncState); + ['change', 'keyup', 'undo', 'redo', 'Paste', 'input'].forEach(function (eventName) { + editor.on(eventName, function () { + syncState(true); + }); }); } @@ -226,15 +221,74 @@ export function createSlideFormEditorController(options) { source.id = 'slide-editor-region-' + regionId; } + function registerInlineFormat(editor, formatName, styles) { + editor.formatter.register(formatName, { + inline: 'span', + styles: styles + }); + } + + function syncEditorState(regionId, editor, shouldLock, hydrated) { + if (editor && typeof editor.save === 'function') { + editor.save(); + } + var content = editor.getContent({ format: 'html' }); + content = isEmptyRichTextValue(content) ? '' : content; + var hidden = getEditorHiddenInput(regionId); + var sourceElm = editor && editor.targetElm ? editor.targetElm : null; + + if (hidden) { + hidden.value = content; + } + if (sourceElm) { + sourceElm.value = content; + } + if (typeof editor.nodeChanged === 'function') { + editor.nodeChanged(); + } + if (typeof editor.setDirty === 'function') { + editor.setDirty(true); + } + if (shouldLock && templateSelectorLock && typeof templateSelectorLock.arm === 'function') { + templateSelectorLock.arm(); + } + if (shouldLock && templateSelectorLock && typeof templateSelectorLock.markEdited === 'function') { + templateSelectorLock.markEdited(); + } + if (hydrated) { + requestPreviewRender(); + } + } + + function applyInlineFormat(regionId, editor, formatName) { + if (editor && editor.undoManager && typeof editor.undoManager.transact === 'function') { + editor.undoManager.transact(function () { + editor.formatter.apply(formatName); + }); + } else { + editor.formatter.apply(formatName); + } + syncEditorState(regionId, editor, false, true); + } + + function applyEditorCommand(regionId, editor, commandName) { + if (editor && editor.undoManager && typeof editor.undoManager.transact === 'function') { + editor.undoManager.transact(function () { + editor.execCommand(commandName); + }); + } else { + editor.execCommand(commandName); + } + syncEditorState(regionId, editor, false, true); + } + return tinymce.init({ target: source, menubar: false, branding: false, promotion: false, - statusbar: true, - resize: true, plugins: 'lists code advlist fullscreen table', - toolbar: 'undo redo | fontfamily fontsizeinput | forecolor backcolor bold italic underline strikethrough subscript superscript removeformat | align lineheight indent outdent bullist numlist table | fullscreen', + toolbar: 'undo redo | fontfamily fontsizeinput | forecolor backcolor bold italic underlineformats removeformat | align lineheight indent outdent bullist numlist table chip | fullscreen', toolbar_mode: 'sliding', license_key: 'gpl', skin: themeAssets.skinName, @@ -251,6 +305,64 @@ export function createSlideFormEditorController(options) { placeholder: String(source.getAttribute('placeholder') || '').trim(), setup: function (editor) { editorInstances.set(regionId, editor); + editor.ui.registry.addButton('chip', { + icon: 'addtag', + tooltip: 'Chip style', + onAction: function () { + applyInlineFormat(regionId, editor, 'chip'); + } + }); + editor.ui.registry.addSplitButton('underlineformats', { + icon: 'underline', + tooltip: 'Text formats', + onAction: function () { + applyEditorCommand(regionId, editor, 'Underline'); + }, + onItemAction: function (_api, value) { + if (value === 'strikethrough') { + applyEditorCommand(regionId, editor, 'Strikethrough'); + return; + } + if (value === 'subscript') { + applyEditorCommand(regionId, editor, 'Subscript'); + return; + } + if (value === 'superscript') { + applyEditorCommand(regionId, editor, 'Superscript'); + } + }, + fetch: function (callback) { + callback([ + { + type: 'choiceitem', + value: 'strikethrough', + icon: 'strikethrough', + text: 'Strikethrough', + }, + { + type: 'choiceitem', + value: 'subscript', + icon: 'subscript', + text: 'Subscript', + }, + { + type: 'choiceitem', + value: 'superscript', + icon: 'superscript', + text: 'Superscript', + } + ]); + } + }); + editor.on('init', function () { + registerInlineFormat(editor, 'chip', { + display: 'inline-block', + padding: '0.2em 0.6em', + borderRadius: '999px', + fontWeight: '700', + letterSpacing: '0.02em' + }); + }); attachEditorEvents(regionId, editor); } }).then(function (editors) { diff --git a/src/web/public/js/slides/slide-form-regions.js b/src/web/public/js/slides/slide-form-regions.js index 5bc2754..5d9581f 100644 --- a/src/web/public/js/slides/slide-form-regions.js +++ b/src/web/public/js/slides/slide-form-regions.js @@ -10,6 +10,7 @@ export function createSlideFormRegionHelpers(options) { var apiSources = Array.isArray(settings.apiSources) ? settings.apiSources : []; var timetableGroups = Array.isArray(settings.timetableGroups) ? settings.timetableGroups : []; var getRegionTypeModule = typeof settings.getRegionTypeModule === 'function' ? settings.getRegionTypeModule : function () { return null; }; + var requestPreviewRender = typeof settings.requestPreviewRender === 'function' ? settings.requestPreviewRender : function () {}; var placeholderUtils = window.placeholderUtils || {}; var placeholderChips = window.placeholderChips || {}; var escapeHtml = typeof settings.escapeHtml === 'function' @@ -76,6 +77,11 @@ export function createSlideFormRegionHelpers(options) { }) || null; } + function getRssFeedItemCount(feedId) { + var feed = getRssFeedById(feedId); + return feed && Array.isArray(feed.items) ? feed.items.length : 0; + } + function getRssFieldList(feedId) { var module = getRegionTypeModule('rss'); if (module && typeof module.getFieldList === 'function') { @@ -128,16 +134,18 @@ export function createSlideFormRegionHelpers(options) { ? placeholderChips.renderChip(field) : '{{' + escapeHtml(field) + '}}'; }).join(''); + var transformHint = '
Placeholder values support transforms, for example {{title.upper()}}, {{title.title()}}, {{title.lower()}}, {{publishedAt.format("MMM D, YYYY")}}.
'; if (!overflowFields.length) { - return visibleMarkup; + return visibleMarkup + transformHint; } return '' + visibleMarkup + - '
' + + transformHint + + '
' + 'Show ' + escapeHtml(overflowFields.length) + ' more fields' + - '
' + overflowFields.map(function (field) { + '
' + overflowFields.map(function (field) { return typeof placeholderChips.renderChip === 'function' ? placeholderChips.renderChip(field) : '{{' + escapeHtml(field) + '}}'; @@ -212,6 +220,43 @@ export function createSlideFormRegionHelpers(options) { container.innerHTML = buildLimitedPlaceholderChipMarkup(getRssFieldList(feedId), 'No RSS fields available.'); } + function updateRssItemNumberLimit(regionId, feedId) { + var card = templateFields ? templateFields.querySelector('[data-region-id="' + regionId + '"]') : null; + if (!card) { + return; + } + + var input = card.querySelector('input[name="region_rss_item_number_' + regionId + '"]'); + if (!input) { + return; + } + + var itemCount = Math.max(1, Number(getRssFeedItemCount(feedId) || 1)); + input.setAttribute('max', String(itemCount)); + if (Number(input.value || 0) > itemCount) { + input.value = String(itemCount); + } + } + + function clampRssItemNumber(regionId, feedId, itemNumber) { + var card = templateFields ? templateFields.querySelector('[data-region-id="' + regionId + '"]') : null; + if (!card) { + return ''; + } + + var input = card.querySelector('input[name="region_rss_item_number_' + regionId + '"]'); + if (!input) { + return ''; + } + + var itemCount = Math.max(1, Number(getRssFeedItemCount(feedId) || 1)); + var parsedValue = Math.max(1, Number(itemNumber || 1)); + var clampedValue = Math.min(itemCount, Number.isFinite(parsedValue) && parsedValue > 0 ? parsedValue : 1); + input.setAttribute('max', String(itemCount)); + input.value = String(clampedValue); + return String(clampedValue); + } + function getCurrentRssConfig(region) { var module = getRegionTypeModule('rss'); if (module && typeof module.getCurrentConfig === 'function') { @@ -568,6 +613,50 @@ export function createSlideFormRegionHelpers(options) { return makeRegionCardCollapsible(module.renderEditorCard(buildRegionEditorCardContext(region)), region); } + function bindRegionCards() { + if (!templateFields) { + return; + } + + Array.prototype.forEach.call(templateFields.querySelectorAll('[data-region-id]'), function (card) { + var module = null; + + if (!card || !card.querySelector || !card.querySelector('input[type="url"][name^="region_qr_code_"]')) { + return; + } + + module = getRegionTypeModule('qr-code'); + + if (module && typeof module.bindEditorCard === 'function') { + module.bindEditorCard({ + card: card, + region: { id: card.getAttribute('data-region-id') }, + existingContent: existingContent, + requestPreviewRender: requestPreviewRender + }); + } + }); + } + + function syncRegionCards() { + if (!templateFields) { + return Promise.resolve(); + } + + var syncs = []; + Array.prototype.forEach.call(templateFields.querySelectorAll('[data-region-id]'), function (card) { + if (!card || !card.querySelector || !card.querySelector('input[type="url"][name^="region_qr_code_"]')) { + return; + } + + if (typeof card.__pulseQrSync === 'function') { + syncs.push(Promise.resolve(card.__pulseQrSync())); + } + }); + + return Promise.all(syncs); + } + function makeRegionCardCollapsible(html, region) { if (typeof html !== 'string' || !html) { return html; @@ -666,7 +755,6 @@ export function createSlideFormRegionHelpers(options) { var videoFileInput = card.querySelector('input[type="file"][name="region_video_' + region.id + '"]'); var webpageInput = card.querySelector('input[type="url"][name="region_webpage_' + region.id + '"]'); var rtmpInput = card.querySelector('input[type="url"][name="region_rtmp_' + region.id + '"]'); - var disableAudioInput = card.querySelector('input[type="checkbox"][name="region_disable_audio_' + region.id + '"]'); var rssFeedInput = card.querySelector('select[name="region_rss_feed_id_' + region.id + '"]'); var rssItemInput = card.querySelector('input[name="region_rss_item_number_' + region.id + '"]'); var apiSourceInput = card.querySelector('select[name="region_api_source_id_' + region.id + '"]'); @@ -681,7 +769,7 @@ export function createSlideFormRegionHelpers(options) { content.value = webpageInput ? webpageInput.value : (content.value || ''); } else if (region.region_type === 'rtmp') { content.value = rtmpInput ? rtmpInput.value : (content.value || ''); - content.disable_audio = disableAudioInput ? disableAudioInput.checked : (content.disable_audio === undefined ? true : Boolean(content.disable_audio)); + content.disable_audio = false; } else if (region.region_type === 'html') { content.value = htmlInput ? htmlInput.value : (content.value || ''); } else if (region.region_type === 'time-date') { @@ -691,7 +779,7 @@ export function createSlideFormRegionHelpers(options) { } else if (region.region_type === 'rss') { content.value = hiddenInput ? hiddenInput.value : (content.value || ''); content.feed_id = rssFeedInput ? rssFeedInput.value : content.feed_id; - content.item_number = rssItemInput ? rssItemInput.value : content.item_number; + content.item_number = rssItemInput ? clampRssItemNumber(region.id, content.feed_id, rssItemInput.value) : content.item_number; } else if (region.region_type === 'api') { content.value = hiddenInput ? hiddenInput.value : (content.value || ''); content.source_id = apiSourceInput ? apiSourceInput.value : content.source_id; @@ -754,11 +842,14 @@ export function createSlideFormRegionHelpers(options) { updateApiPlaceholderChips: updateApiPlaceholderChips, updateApiSampleDataPanel: updateApiSampleDataPanel, updateApiItemNumberLimit: updateApiItemNumberLimit, + updateRssItemNumberLimit: updateRssItemNumberLimit, getCurrentApiConfig: getCurrentApiConfig, reduceAspectRatio: reduceAspectRatio, renderPreviewTextRegion: renderPreviewTextRegion, startPreviewVideoPlayback: startPreviewVideoPlayback, getRegionEditorCardHtml: getRegionEditorCardHtml, + bindRegionCards: bindRegionCards, + syncRegionCards: syncRegionCards, buildRegionEditorCardContext: buildRegionEditorCardContext, getPreviewRegionContent: getPreviewRegionContent, buildPreviewRenderContext: buildPreviewRenderContext, diff --git a/src/web/public/js/slides/slide-form.js b/src/web/public/js/slides/slide-form.js index 2604ce6..abe053a 100644 --- a/src/web/public/js/slides/slide-form.js +++ b/src/web/public/js/slides/slide-form.js @@ -114,7 +114,7 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev requestPreviewRender: requestPreviewRender }); var regionUtils = window.pulseRegionUtils || {}; - var slideRegionHelpers = createSlideFormRegionHelpers({ + var slideRegionHelperOptions = { templateFields: templateFields, existingContent: existingContent, rssFeeds: rssFeeds, @@ -124,8 +124,10 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev uploadMaxLabel: uploadMaxLabel, uploadVideoMaxLabel: uploadVideoMaxLabel, escapeHtml: escapeHtml, - getRegionTypeModule: getRegionTypeModule - }); + getRegionTypeModule: getRegionTypeModule, + requestPreviewRender: requestPreviewRender + }; + var slideRegionHelpers = createSlideFormRegionHelpers(slideRegionHelperOptions); var slidePreviewHelpers = createSlideFormPreviewHelpers({ getRegionTypeModule: getRegionTypeModule, escapeHtml: escapeHtml @@ -139,6 +141,8 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev var renderPreviewTextRegion = slidePreviewHelpers.renderPreviewTextRegion; var buildRegionEditorCardContext = slideRegionHelpers.buildRegionEditorCardContext; var getRegionEditorCardHtml = slideRegionHelpers.getRegionEditorCardHtml; + var bindRegionCards = slideRegionHelpers.bindRegionCards; + var syncRegionCards = slideRegionHelpers.syncRegionCards; var getPreviewRegionContent = slideRegionHelpers.getPreviewRegionContent; var buildPreviewRenderContext = slideRegionHelpers.buildPreviewRenderContext; var startPreviewVideoPlayback = slidePreviewHelpers.startPreviewVideoPlayback; @@ -147,6 +151,28 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev return templates.find(function (item) { return Number(item.id) === Number(templateSelect.value); }) || null; } + function hasMeaningfulValue(value) { + if (value === null || value === undefined) { + return false; + } + + if (Array.isArray(value)) { + return value.some(hasMeaningfulValue); + } + + if (typeof value === 'object') { + return Object.keys(value).some(function (key) { + return hasMeaningfulValue(value[key]); + }); + } + + return String(value).trim() !== ''; + } + + function hasExistingSlideContent() { + return hasMeaningfulValue(existingContent); + } + function clearImagePreviewUrls() { templateFields.querySelectorAll('input[type="file"][name^="region_image_"], input[type="file"][name^="region_video_"]').forEach(function (input) { if (input.dataset.previewUrl) { @@ -170,6 +196,10 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev return String(card.dataset.regionMediaType || '').trim(); } + if (card.querySelector && card.querySelector('input[type="file"][name^="region_qr_image_"], input[type="url"][name^="region_qr_code_"]')) { + return 'qr-code'; + } + var regionTypeInput = card.querySelector ? card.querySelector('input[type="hidden"][name="region_type[]"]') : null; return String(regionTypeInput && regionTypeInput.value || '').trim(); } @@ -192,6 +222,7 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev return syncVideoRegionDuration(card, source); }, markEdited: function () { + templateSelectorLock.arm(); templateSelectorLock.markEdited(); requestPreviewRender(); }, @@ -201,7 +232,7 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev }) : null; function buildRegionMediaHookContext(input, file) { - var regionId = input && input.name ? input.name.replace(/^region_(?:image|video)_/, '') : ''; + var regionId = input && input.name ? input.name.replace(/^region_(?:image|video|qr_image)_/, '') : ''; var card = regionId ? templateFields.querySelector('[data-region-id="' + regionId + '"]') : null; return { @@ -220,7 +251,7 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev } function handleRegionMediaFileSelection(input, file) { - var card = input && input.name ? templateFields.querySelector('[data-region-id="' + input.name.replace(/^region_(?:image|video)_/, '') + '"]') : null; + var card = input && input.name ? templateFields.querySelector('[data-region-id="' + input.name.replace(/^region_(?:image|video|qr_image)_/, '') + '"]') : null; var module = getRegionEditorModule(card); var hookContext = buildRegionMediaHookContext(input, file); @@ -241,14 +272,19 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev return; } - var mediaType = card && card.dataset && String(card.dataset.regionMediaType || '').trim() === 'video' ? 'video' : 'image'; + var mediaType = card && card.dataset && String(card.dataset.regionMediaType || '').trim() === 'video' + ? 'video' + : card && card.querySelector && card.querySelector('input[type="file"][name^="region_qr_image_"]') + ? 'qr-image' + : 'image'; var isVideo = mediaType === 'video'; + var isQrImage = mediaType === 'qr-image'; previewBox.innerHTML = value - ? '
' + + ? '
' + (isVideo ? '' - : 'Current image preview') + + : '' + (isQrImage ? 'Current QR image preview' : 'Current image preview') + '') + '' + '
' : '
No ' + (isVideo ? 'video' : 'image') + '
'; @@ -389,15 +425,15 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev } function getRegionImageInputs() { - return Array.prototype.slice.call(templateFields.querySelectorAll('input[type="file"][name^="region_image_"], input[type="file"][name^="region_video_"]')); + return Array.prototype.slice.call(templateFields.querySelectorAll('input[type="file"][name^="region_image_"], input[type="file"][name^="region_video_"], input[type="file"][name^="region_qr_image_"]')); } function getRegionMediaInputs() { - return getRegionImageInputs(); + return Array.prototype.slice.call(templateFields.querySelectorAll('input[type="file"][name^="region_image_"], input[type="file"][name^="region_video_"], input[type="file"][name^="region_qr_image_"]')); } function hasPendingRegionImageUpload() { - return getRegionImageInputs().some(function (input) { + return getRegionMediaInputs().some(function (input) { return Boolean(input && input.files && input.files.length); }); } @@ -448,6 +484,14 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev return; } + try { + if (previewPopupWindow.location && previewPopupWindow.location.pathname !== '/slides/popup-preview') { + return; + } + } catch (_error) { + return; + } + previewPopupWindow.location.hash = buildPreviewPopupHash(); } @@ -471,13 +515,18 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev 'top=' + top ].join(','); - previewPopupWindow = window.open(buildPreviewPopupUrl(), 'slide-preview-popup', previewPopupFeatures); + previewPopupWindow = window.open('about:blank', 'slide-preview-popup', previewPopupFeatures); if (!previewPopupWindow) { return; } + try { + previewPopupWindow.location.replace(buildPreviewPopupUrl()); + } catch (_error) { + previewPopupWindow.location.href = buildPreviewPopupUrl(); + } + previewPopupWindow.focus(); - syncPopupPreview(); } function syncSlideEditorSidebar() { @@ -632,6 +681,7 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev var updateApiSampleDataPanel = slideRegionHelpers.updateApiSampleDataPanel; var updateApiItemNumberLimit = slideRegionHelpers.updateApiItemNumberLimit; var getCurrentApiConfig = slideRegionHelpers.getCurrentApiConfig; + var updateRssItemNumberLimit = slideRegionHelpers.updateRssItemNumberLimit; function renderTemplate() { templateSelectorLock.reset(); @@ -663,6 +713,9 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev }); slideFormEditorController.renderEditors(); + window.requestAnimationFrame(function () { + bindRegionCards(); + }); templateFields.querySelectorAll('input[name^="region_api_item_number_"]').forEach(function (input) { var regionId = input.name.replace(/^region_api_item_number_/, ''); var sourceInput = templateFields.querySelector('select[name="region_api_source_id_' + regionId + '"]'); @@ -671,19 +724,42 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev updateApiItemNumberLimit(regionId, sourceInput.value, pathInput ? pathInput.value : ''); } }); + templateFields.querySelectorAll('input[name^="region_rss_item_number_"]').forEach(function (input) { + var regionId = input.name.replace(/^region_rss_item_number_/, ''); + var feedInput = templateFields.querySelector('select[name="region_rss_feed_id_' + regionId + '"]'); + if (feedInput) { + updateRssItemNumberLimit(regionId, feedInput.value); + } + }); if (typeof regionUtils.bindRegionMediaRemoveControls === 'function') { regionUtils.bindRegionMediaRemoveControls(templateFields, { getCardByRegionId: function (regionId) { return templateFields.querySelector('[data-region-id="' + regionId + '"]'); }, - getMediaType: function (card) { + getMediaType: function (card, button) { + if (button && button.hasAttribute && button.hasAttribute('data-remove-region-qr-image')) { + return 'qr-image'; + } + + if (button && button.hasAttribute && button.hasAttribute('data-remove-region-video')) { + return 'video'; + } + return card && card.dataset && String(card.dataset.regionMediaType || '').trim() === 'video' ? 'video' : 'image'; }, getExistingMediaPrefix: function (mediaType) { + if (String(mediaType || '').trim() === 'qr-image') { + return 'existing_region_qr_image_'; + } + return String(mediaType || '').trim() === 'video' ? 'existing_region_video_' : 'existing_region_image_'; }, getMediaPrefix: function (mediaType) { + if (String(mediaType || '').trim() === 'qr-image') { + return 'region_qr_image_'; + } + return String(mediaType || '').trim() === 'video' ? 'region_video_' : 'region_image_'; }, getVideoDurationHiddenInput: function (regionId) { @@ -711,6 +787,7 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev if (input.name.indexOf('region_rss_') === 0) { var rssFeed = input.name.indexOf('region_rss_feed_id_') === 0 ? input.value : (templateFields.querySelector('select[name="region_rss_feed_id_' + regionId + '"]') || {}).value; updateRssPlaceholderChips(regionId, rssFeed); + updateRssItemNumberLimit(regionId, rssFeed); } if (input.name.indexOf('region_api_') === 0) { var apiSource = input.name.indexOf('region_api_source_id_') === 0 ? input.value : (templateFields.querySelector('select[name="region_api_source_id_' + regionId + '"]') || {}).value; @@ -728,6 +805,7 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev if (input.name.indexOf('region_rss_') === 0) { var rssFeed = input.name.indexOf('region_rss_feed_id_') === 0 ? input.value : (templateFields.querySelector('select[name="region_rss_feed_id_' + regionId + '"]') || {}).value; updateRssPlaceholderChips(regionId, rssFeed); + updateRssItemNumberLimit(regionId, rssFeed); } if (input.name.indexOf('region_api_') === 0) { var apiSource = input.name.indexOf('region_api_source_id_') === 0 ? input.value : (templateFields.querySelector('select[name="region_api_source_id_' + regionId + '"]') || {}).value; @@ -742,16 +820,12 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev }); }); - if (existingTemplateId) { + if (existingTemplateId && hasExistingSlideContent()) { templateSelectorLock.arm(); templateSelectorLock.markEdited(); requestPreviewRender(); return; } - - window.requestAnimationFrame(function () { - templateSelectorLock.arm(); - }); requestPreviewRender(); } @@ -766,6 +840,7 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev throw new Error('Wait for the image upload to finish before saving.'); } await slideFormEditorController.syncEditors(); + await syncRegionCards(); }, fallbackSuccessMessage: 'Saved slide.', afterSuccess: function () { @@ -792,10 +867,12 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev templateSelect.addEventListener('change', renderTemplate); templateFields.addEventListener('change', function () { + templateSelectorLock.arm(); templateSelectorLock.markEdited(); requestPreviewRender(); }); templateFields.addEventListener('input', function () { + templateSelectorLock.arm(); templateSelectorLock.markEdited(); requestPreviewRender(); }); diff --git a/src/web/public/js/templates/template-designer-utils.js b/src/web/public/js/templates/template-designer-utils.js index 8144e7a..d9f1ffb 100644 --- a/src/web/public/js/templates/template-designer-utils.js +++ b/src/web/public/js/templates/template-designer-utils.js @@ -78,6 +78,8 @@ return Math.max(min, Math.min(max, value)); } + var MAX_ANIMATION_REPEAT_COUNT = 999; + function getRegionName(card) { return String(card.querySelector('[name="region_name[]"]').value || '').trim(); } @@ -204,7 +206,9 @@ normalized.preset = normalizePreviewAnimation(value.preset !== undefined ? value.preset : fallbackPreset || 'none'); normalized.duration_ms = Number.isFinite(Number(value.duration_ms)) && Number(value.duration_ms) > 0 ? Math.round(Number(value.duration_ms)) : null; normalized.delay_ms = Number.isFinite(Number(value.delay_ms)) && Number(value.delay_ms) >= 0 ? Math.round(Number(value.delay_ms)) : null; - normalized.iterations = Number.isFinite(Number(value.iterations)) && Number(value.iterations) > 0 ? Math.round(Number(value.iterations)) : null; + normalized.iterations = Number.isFinite(Number(value.iterations)) && Number(value.iterations) > 0 + ? clamp(Math.round(Number(value.iterations)), 1, MAX_ANIMATION_REPEAT_COUNT) + : null; normalized.easing = String(value.easing || '').trim(); normalized.fill_mode = String(value.fill_mode || '').trim(); return normalized; diff --git a/src/web/public/js/templates/template-designer.js b/src/web/public/js/templates/template-designer.js index 9a48877..a4a7e51 100644 --- a/src/web/public/js/templates/template-designer.js +++ b/src/web/public/js/templates/template-designer.js @@ -50,6 +50,8 @@ var selectedIndex = -1; var activeAnimationCard = null; var overlayRenderFrame = 0; + var stageResizeObserver = null; + var regionNameValidationToastShown = false; var previewState = { active: false, mode: '', @@ -192,6 +194,40 @@ card.querySelector('[name="region_label[]"]').value = next; } + function normalizeRegionNamePrefix(regionType) { + var prefix = String(regionType || '').trim().toLowerCase().replace(/[^a-z0-9]+/g, '_').replace(/^_+|_+$/g, ''); + return prefix || 'region'; + } + + function buildDefaultRegionName(regionType, index) { + return normalizeRegionNamePrefix(regionType) + '_' + index; + } + + function getNextDefaultRegionName(regionType) { + var normalizedType = normalizeRegionNamePrefix(regionType); + var nextIndex = getCards().reduce(function (count, card) { + var currentType = normalizeRegionNamePrefix(card.querySelector('[name="region_type[]"]').value || ''); + if (currentType !== normalizedType) { + return count; + } + + var currentName = getRegionName(card); + var expectedPrefix = normalizedType + '_'; + if (currentName.indexOf(expectedPrefix) !== 0) { + return count; + } + + var suffix = Number(currentName.slice(expectedPrefix.length)); + if (!Number.isFinite(suffix) || suffix < 1) { + return count; + } + + return Math.max(count, suffix); + }, 0) + 1; + + return buildDefaultRegionName(normalizedType, nextIndex); + } + function validateRegionNames() { var cards = getCards(); var names = {}; @@ -230,6 +266,17 @@ return !hasDuplicate; } + function notifyRegionNameValidationError(message) { + if (regionNameValidationToastShown) { + return; + } + + regionNameValidationToastShown = true; + if (typeof showToast === 'function') { + showToast(message || 'Region names must be unique on this template.', 'warning'); + } + } + function readCard(card) { return utils.readCard ? utils.readCard(card) : { region_key: getRegionName(card), @@ -304,6 +351,19 @@ }); } + function updatePreviewButtonIcon(button, iconClass) { + if (!button) { + return; + } + + var icon = button.querySelector('[data-preview-icon]'); + if (!icon) { + return; + } + + icon.className = 'bi ' + iconClass + ' me-1'; + } + function updatePreviewControlState() { var activeMode = previewState.active ? previewState.mode : ''; @@ -315,7 +375,9 @@ var available = hasPreviewAnimationForMode(entry.mode); var disabled = !available || (previewState.active && activeMode !== entry.mode); entry.button.disabled = disabled; - entry.button.classList.toggle('active', previewState.active && activeMode === entry.mode); + entry.button.classList.toggle('btn-outline-secondary', disabled); + entry.button.classList.toggle('btn-info', !disabled); + updatePreviewButtonIcon(entry.button, previewState.active && activeMode === entry.mode ? 'bi-stop-fill' : 'bi-play-fill'); entry.button.setAttribute('aria-pressed', previewState.active && activeMode === entry.mode ? 'true' : 'false'); }); } @@ -380,6 +442,8 @@ } } + var MAX_ANIMATION_REPEAT_COUNT = 999; + function getPreviewAnimationStepTimingMs(step, mode, animateCssMode) { var normalizedMode = String(mode || '').trim().toLowerCase(); var durationMs = Number(step && step.duration_ms); @@ -416,7 +480,9 @@ normalized.preset = normalizePreviewAnimation(value.preset !== undefined ? value.preset : fallbackPreset || 'none'); normalized.duration_ms = Number.isFinite(Number(value.duration_ms)) && Number(value.duration_ms) > 0 ? Math.round(Number(value.duration_ms)) : null; normalized.delay_ms = Number.isFinite(Number(value.delay_ms)) && Number(value.delay_ms) >= 0 ? Math.round(Number(value.delay_ms)) : null; - normalized.iterations = Number.isFinite(Number(value.iterations)) && Number(value.iterations) > 0 ? Math.round(Number(value.iterations)) : null; + normalized.iterations = Number.isFinite(Number(value.iterations)) && Number(value.iterations) > 0 + ? Math.min(MAX_ANIMATION_REPEAT_COUNT, Math.max(1, Math.round(Number(value.iterations)))) + : null; normalized.fill_mode = String(value.fill_mode || '').trim(); return normalized; } @@ -599,11 +665,11 @@ var delayInput = getAnimationModalField(stepName, 'delay_ms'); if (presetInput) { presetInput.value = step.preset; } - if (durationInput) { durationInput.value = step.duration_ms === null || step.duration_ms === undefined || Number(step.duration_ms) <= 0 ? '1000' : String(step.duration_ms); } + if (durationInput) { durationInput.value = String(getAnimationDurationPercent(step.duration_ms)); } if (delayInput) { delayInput.value = step.delay_ms === null || step.delay_ms === undefined ? '0' : String(step.delay_ms); } if (stepName === 'loop') { var iterationsInput = getAnimationModalField(stepName, 'iterations'); - if (iterationsInput) { iterationsInput.value = step.iterations === null || step.iterations === undefined ? '1' : String(step.iterations); } + if (iterationsInput) { iterationsInput.value = step.iterations === null || step.iterations === undefined ? '1' : String(Math.min(MAX_ANIMATION_REPEAT_COUNT, Math.max(1, Number(step.iterations) || 1))); } } }); } @@ -617,6 +683,44 @@ return Number.isFinite(next) ? Math.round(next) : null; } + function clampAnimationModalField(field) { + if (!field || !field.matches) { + return; + } + + var isLoopIterationsField = field.matches('[data-animation-modal-step="loop"][data-animation-modal-field="iterations"]'); + var isDurationField = field.matches('[data-animation-modal-field="duration_ms"]'); + if (!isLoopIterationsField && !isDurationField) { + return; + } + + var fieldValue = readNumberField(field.value); + if (fieldValue === null) { + return; + } + + var normalizedValue = isLoopIterationsField + ? Math.min(MAX_ANIMATION_REPEAT_COUNT, Math.max(1, fieldValue)) + : Math.min(200, Math.max(1, fieldValue)); + if (String(normalizedValue) !== String(field.value)) { + field.value = String(normalizedValue); + } + } + + function getAnimationDurationPercent(durationMs) { + var value = Number(durationMs); + if (!Number.isFinite(value) || value <= 0) { + return 100; + } + + return Math.min(200, Math.max(1, Math.round(value / 10))); + } + + function getAnimationDurationMs(durationPercent) { + var percent = Math.min(200, Math.max(1, readNumberField(durationPercent) || 100)); + return percent * 10; + } + function readAnimationModalConfig() { if (!animationAdvancedModal) { return null; @@ -631,11 +735,11 @@ var nextStep = Object.assign({}, config[stepName] || {}); nextStep.preset = presetInput ? presetInput.value : nextStep.preset; - nextStep.duration_ms = readNumberField(durationInput ? durationInput.value : '') || 1000; + nextStep.duration_ms = getAnimationDurationMs(durationInput ? durationInput.value : ''); nextStep.delay_ms = readNumberField(delayInput ? delayInput.value : '') || 0; if (stepName === 'loop') { var iterationsInput = getAnimationModalField(stepName, 'iterations'); - nextStep.iterations = readNumberField(iterationsInput ? iterationsInput.value : '') || 1; + nextStep.iterations = Math.min(MAX_ANIMATION_REPEAT_COUNT, Math.max(1, readNumberField(iterationsInput ? iterationsInput.value : '') || 1)); } config[stepName] = normalizeAnimationStep(nextStep, 'none'); @@ -892,6 +996,104 @@ canvasHeightInput.value = Math.max(1, Number(option.dataset.height || canvasHeightInput.value || 1080)); updateAspectRatio(); updateCanvasSizeSummary(); + getCards().forEach(function (card) { + normalizeRegionCard(card, 'width'); + }); + } + + function fitRegionToCanvas(region, aspect) { + var size = getCanvasSize(); + var minSize = 12; + var next = { + x: Math.round(Number(region && region.x !== undefined ? region.x : 0)), + y: Math.round(Number(region && region.y !== undefined ? region.y : 0)), + width: Math.max(minSize, Math.round(Number(region && region.width !== undefined ? region.width : minSize))), + height: Math.max(minSize, Math.round(Number(region && region.height !== undefined ? region.height : minSize))) + }; + + if (aspect && Number.isFinite(aspect.ratio) && aspect.ratio > 0) { + if (next.width > size.width || next.height > size.height) { + var canvasRatio = size.width / Math.max(1, size.height); + if (canvasRatio >= aspect.ratio) { + next.height = Math.max(minSize, Math.min(size.height, next.height, Math.round(size.height))); + next.width = Math.max(minSize, Math.round(next.height * aspect.ratio)); + if (next.width > size.width) { + next.width = size.width; + next.height = Math.max(minSize, Math.round(next.width / aspect.ratio)); + } + } else { + next.width = Math.max(minSize, Math.min(size.width, next.width, Math.round(size.width))); + next.height = Math.max(minSize, Math.round(next.width / aspect.ratio)); + if (next.height > size.height) { + next.height = size.height; + next.width = Math.max(minSize, Math.round(next.height * aspect.ratio)); + } + } + } + } else { + if (next.width > size.width) { + next.width = size.width; + next.x = 0; + } + if (next.height > size.height) { + next.height = size.height; + next.y = 0; + } + } + + if (next.x + next.width > size.width) { + next.x = size.width - next.width; + } + if (next.y + next.height > size.height) { + next.y = size.height - next.height; + } + + next.x = clamp(next.x, 0, Math.max(0, size.width - next.width)); + next.y = clamp(next.y, 0, Math.max(0, size.height - next.height)); + + return next; + } + + function normalizeRegionCard(card, changedField) { + if (!card) { + return null; + } + + var current = readCard(card); + var next = { + x: current.x, + y: current.y, + width: Math.max(12, Math.round(current.width || 0)), + height: Math.max(12, Math.round(current.height || 0)) + }; + var lockRatio = normalizeLockRatio(current.lock_ratio); + var aspect = lockRatio ? parseLockRatio(lockRatio) : null; + var size = getCanvasSize(); + + if (aspect) { + if (changedField === 'height') { + next.width = Math.max(12, Math.round(next.height * aspect.ratio)); + } else { + next.height = Math.max(12, Math.round(next.width / aspect.ratio)); + } + + if (next.width > size.width || next.height > size.height) { + var scale = Math.min(size.width / Math.max(1, next.width), size.height / Math.max(1, next.height), 1); + if (scale < 1) { + next.width = Math.max(12, Math.round(next.width * scale)); + next.height = Math.max(12, Math.round(next.height * scale)); + if (changedField === 'height') { + next.width = Math.max(12, Math.round(next.height * aspect.ratio)); + } else { + next.height = Math.max(12, Math.round(next.width / aspect.ratio)); + } + } + } + } + + next = fitRegionToCanvas(next, aspect); + writeCard(card, next); + return next; } function updateBackgroundPreview(file) { @@ -932,6 +1134,25 @@ lockChip.textContent = 'Locked ' + lockRatio; } + function updateRegionLockRatioState(card) { + var lockRatioInput = card.querySelector('[name="region_lock_ratio[]"]'); + var regionTypeInput = card.querySelector('[name="region_type[]"]'); + if (!lockRatioInput || !regionTypeInput) { + return; + } + + var isQrCode = String(regionTypeInput.value || '').trim() === 'qr-code'; + lockRatioInput.disabled = isQrCode; + lockRatioInput.setAttribute('aria-disabled', isQrCode ? 'true' : 'false'); + + if (isQrCode) { + lockRatioInput.value = '1:1'; + lockRatioInput.title = 'QR code regions are fixed to 1:1.'; + } else { + lockRatioInput.removeAttribute('title'); + } + } + function getRegionLockRatio(card) { return normalizeLockRatio(card.querySelector('[name="region_lock_ratio[]"]').value); } @@ -941,22 +1162,10 @@ } function syncLockedDimensions(card, changedField) { - var lockRatio = getRegionLockRatio(card); - var aspect = lockRatio ? parseLockRatio(lockRatio) : null; - if (!aspect) { - return; - } - - var widthInput = card.querySelector('[name="region_width[]"]'); - var heightInput = card.querySelector('[name="region_height[]"]'); - var width = Math.max(1, Number(widthInput.value || 0)); - var height = Math.max(1, Number(heightInput.value || 0)); - - if (changedField === 'width') { - heightInput.value = Math.max(1, Math.round(width / aspect.ratio)); - } else if (changedField === 'height') { - widthInput.value = Math.max(1, Math.round(height * aspect.ratio)); - } + normalizeRegionCard(card, changedField); + updateRegionLockBadge(card); + markTemplateFormDirty(); + requestOverlayRender(); } function getRegionChipLabel(regionType) { @@ -964,7 +1173,7 @@ return window.pulseRegionTypes.getRegionChipLabel(regionType); } - return regionType === 'image' ? 'Image' : regionType === 'video' ? 'Video' : regionType === 'webpage' ? 'Webpage' : regionType === 'html' ? 'HTML' : regionType === 'rtmp' ? 'RTMP' : regionType === 'rss' ? 'RSS' : 'Text'; + return 'Text'; } function populateRegionCard(card, region) { @@ -995,7 +1204,7 @@ } var regionLockRatioInput = card.querySelector('[name="region_lock_ratio[]"]'); if (regionLockRatioInput) { - regionLockRatioInput.value = normalizeLockRatio(region.lock_ratio); + regionLockRatioInput.value = normalizeLockRatio(region.lock_ratio || (String(region.region_type || '').trim() === 'qr-code' ? '1:1' : '')); } writeAnimationConfig(card, region.animation_json); card.querySelector('[name="region_x[]"]').value = valueOrDefault(region.x, 80); @@ -1003,6 +1212,7 @@ card.querySelector('[name="region_z[]"]').value = valueOrDefault(region.z_index, 1); card.querySelector('[name="region_width[]"]').value = valueOrDefault(region.width, 300); card.querySelector('[name="region_height[]"]').value = valueOrDefault(region.height, 120); + updateRegionLockRatioState(card); updateRegionLockBadge(card); } @@ -1053,6 +1263,7 @@ var animationResetButtons = card.querySelectorAll('[data-animation-reset-button]'); var animationAdvancedButton = card.querySelector('[data-animation-advanced-button]'); nameInput.addEventListener('input', function () { + regionNameValidationToastShown = false; syncRegionIdentity(card, nameInput.value); updateRegionLabel(card); validateRegionNames(); @@ -1062,6 +1273,7 @@ Array.prototype.forEach.call(animationPresetInputs, function (input) { input.addEventListener('change', function () { setAnimationPreset(card, input.getAttribute('data-animation-preset'), input.value); + markTemplateFormDirty(); requestOverlayRender(); }); }); @@ -1069,6 +1281,7 @@ button.addEventListener('click', function (event) { event.preventDefault(); setAnimationPreset(card, button.getAttribute('data-animation-reset-button'), 'none'); + markTemplateFormDirty(); requestOverlayRender(); }); }); @@ -1083,26 +1296,17 @@ } if (lockRatioInput) { lockRatioInput.addEventListener('input', function () { - updateRegionLockBadge(card); - requestOverlayRender(); + syncLockedDimensions(card, 'width'); }); } if (widthInput) { widthInput.addEventListener('input', function () { - if (isRegionLocked(card)) { - syncLockedDimensions(card, 'width'); - updateRegionLockBadge(card); - } - requestOverlayRender(); + syncLockedDimensions(card, 'width'); }); } if (heightInput) { heightInput.addEventListener('input', function () { - if (isRegionLocked(card)) { - syncLockedDimensions(card, 'height'); - updateRegionLockBadge(card); - } - requestOverlayRender(); + syncLockedDimensions(card, 'height'); }); } card.addEventListener('click', function (event) { @@ -1114,6 +1318,7 @@ card.querySelector('[data-region-remove-button]').addEventListener('click', function (event) { event.preventDefault(); card.remove(); + markTemplateFormDirty(); if (!getCards().length) { selectedIndex = -1; } else if (selectedIndex >= getCards().length) { @@ -1217,6 +1422,29 @@ renderOverlay(); } + function observeStageResize() { + if (!stage) { + return; + } + + if (window.ResizeObserver) { + stageResizeObserver = new window.ResizeObserver(function () { + requestOverlayRender(); + }); + stageResizeObserver.observe(stage); + return; + } + + window.addEventListener('resize', requestOverlayRender); + } + + function markTemplateFormDirty() { + if (!templateForm) { + return; + } + templateForm.dataset.dirty = 'true'; + } + function setSelected(index) { if (previewState.active) { return; @@ -1246,6 +1474,7 @@ var card = makeRegionCard(region); setRegionRemovalState(card); regionList.appendChild(card); + markTemplateFormDirty(); setSelected(getCards().length - 1); } @@ -1257,9 +1486,9 @@ } function createDefaultRegion(type) { - var count = getCards().length + 1; - var name = 'region_' + count; - var size = getDefaultRegionSize(type, ''); + var name = getNextDefaultRegionName(type); + var lockRatio = String(type || '').trim() === 'qr-code' ? '1:1' : ''; + var size = getDefaultRegionSize(type, lockRatio); return { region_key: name, label: name, @@ -1269,7 +1498,7 @@ y: 80, width: size.width, height: size.height, - lock_ratio: '', + lock_ratio: lockRatio, z_index: 1 }; } @@ -1307,8 +1536,9 @@ var width = Math.abs(draft.end.x - draft.start.x); var height = Math.abs(draft.end.y - draft.start.y); if (width >= 8 && height >= 8) { - var region = clampRegion({ x: Math.min(draft.start.x, draft.end.x), y: Math.min(draft.start.y, draft.end.y), width: width, height: height }); - addRegion({ region_key: 'region_' + (getCards().length + 1), label: 'Region ' + (getCards().length + 1), region_type: 'text', x: region.x, y: region.y, width: region.width, height: region.height, z_index: 1 }); + var region = fitRegionToCanvas({ x: Math.min(draft.start.x, draft.end.x), y: Math.min(draft.start.y, draft.end.y), width: width, height: height }); + var name = getNextDefaultRegionName('text'); + addRegion({ region_key: name, label: name, region_type: 'text', x: region.x, y: region.y, width: region.width, height: region.height, z_index: 1 }); } draft = null; requestOverlayRender(); @@ -1336,6 +1566,7 @@ var nextX = clamp(startRegion.x + dx, 0, maxX); var nextY = clamp(startRegion.y + dy, 0, maxY); writeCard(cardAt(index), { x: nextX, y: nextY, width: startRegion.width, height: startRegion.height }); + markTemplateFormDirty(); requestOverlayRender(); } function upHandler() { @@ -1439,8 +1670,9 @@ } if (next.width < 12) { if (dir.indexOf('w') !== -1) { next.x -= 12 - next.width; } next.width = 12; } if (next.height < 12) { if (dir.indexOf('n') !== -1) { next.y -= 12 - next.height; } next.height = 12; } - next = clampRegion(next); + next = fitRegionToCanvas(next, aspect); writeCard(cardAt(index), { x: next.x, y: next.y, width: next.width, height: next.height }); + markTemplateFormDirty(); requestOverlayRender(); } function upHandler() { @@ -1492,11 +1724,19 @@ animationAdvancedModal.addEventListener('hidden.bs.modal', function () { activeAnimationCard = null; }); + animationAdvancedModal.addEventListener('input', function (event) { + clampAnimationModalField(event.target); + markTemplateFormDirty(); + }); + animationAdvancedModal.addEventListener('change', function () { + markTemplateFormDirty(); + }); var animationModalApplyButton = animationAdvancedModal.querySelector('[data-animation-modal-apply]'); var animationModalResetButton = animationAdvancedModal.querySelector('[data-animation-modal-reset]'); if (animationModalApplyButton) { animationModalApplyButton.addEventListener('click', function () { saveAnimationModal(); + markTemplateFormDirty(); if (window.pulseModal) { window.pulseModal.hide(animationAdvancedModal); } @@ -1508,6 +1748,7 @@ return; } writeAnimationConfig(activeAnimationCard, normalizeAnimationConfig('{}')); + markTemplateFormDirty(); populateAnimationModal(activeAnimationCard); requestOverlayRender(); }); @@ -1541,6 +1782,19 @@ setSelected(-1); }); if (templateForm) { + templateForm.addEventListener('invalid', function (event) { + var target = event.target; + if (!target || !target.validationMessage || !target.validationMessage.match(/Region names must be unique on this template\.|Region name is required\./)) { + return; + } + + if (target.closest && !target.closest('.region-item')) { + return; + } + + notifyRegionNameValidationError(target.validationMessage); + }, true); + templateForm.addEventListener('formdata', function (event) { if (previewState.active) { event.preventDefault(); @@ -1552,16 +1806,13 @@ return; } getCards().forEach(function (card) { - if (isRegionLocked(card)) { - syncLockedDimensions(card, 'width'); - updateRegionLockBadge(card); - } + normalizeRegionCard(card, 'width'); }); syncCanvasSizeSelection(); event.formData.set('regions_json', JSON.stringify(getCards().map(readCard))); }); - templateForm.addEventListener('submit', function () { + templateForm.addEventListener('submit', function (event) { if (previewState.active) { return; } @@ -1570,10 +1821,7 @@ return; } getCards().forEach(function (card) { - if (isRegionLocked(card)) { - syncLockedDimensions(card, 'width'); - updateRegionLockBadge(card); - } + normalizeRegionCard(card, 'width'); }); syncCanvasSizeSelection(); regionsJsonInput.value = JSON.stringify(getCards().map(readCard)); @@ -1613,5 +1861,6 @@ renderRegionList(existingRegions); syncCanvasSizeSelection(); updateStageBackgroundColor(); + observeStageResize(); render(); })(); diff --git a/src/web/public/js/toast.js b/src/web/public/js/toast.js index 69fb898..36495c8 100644 --- a/src/web/public/js/toast.js +++ b/src/web/public/js/toast.js @@ -1,4 +1,63 @@ (function (root) { + var pendingToastStorageKey = 'pulse:pending-toast'; + + function readPendingToast() { + try { + if (!root.sessionStorage) { + return null; + } + + var rawValue = root.sessionStorage.getItem(pendingToastStorageKey); + if (!rawValue) { + return null; + } + + root.sessionStorage.removeItem(pendingToastStorageKey); + var payload = JSON.parse(rawValue); + if (!payload || !payload.message) { + return null; + } + + return { + message: String(payload.message || '').trim(), + variant: String(payload.variant || 'info').trim().toLowerCase() || 'info' + }; + } catch (_error) { + return null; + } + } + + function writePendingToast(message, variant) { + try { + if (!root.sessionStorage) { + return false; + } + + var text = String(message || '').trim(); + if (!text) { + return false; + } + + root.sessionStorage.setItem(pendingToastStorageKey, JSON.stringify({ + message: text, + variant: String(variant || 'info').trim().toLowerCase() || 'info' + })); + return true; + } catch (_error) { + return false; + } + } + + function clearPendingToast() { + try { + if (root.sessionStorage) { + root.sessionStorage.removeItem(pendingToastStorageKey); + } + } catch (_error) { + // ignore storage cleanup failures + } + } + function getToastTitle(variant, message) { var text = String(message || '').trim(); if (/\b(?:deleted|removed)\.?$/i.test(text)) { @@ -219,9 +278,15 @@ function initToast() { var toast = document.getElementById('app-toast'); if (!toast) { + var pendingToast = readPendingToast(); + if (pendingToast) { + showToast(pendingToast.message, pendingToast.variant); + } return; } + clearPendingToast(); + try { var url = new URL(window.location.href); if (url.searchParams.has('message')) { @@ -250,6 +315,7 @@ root.showToast = showToast; root.initToast = initToast; root.getMessageVariant = getMessageVariant; + root.queueToastAfterRefresh = writePendingToast; if (typeof module !== 'undefined' && module.exports) { module.exports = { diff --git a/src/web/public/js/web-ui-helpers.js b/src/web/public/js/web-ui-helpers.js index e65edff..56f3353 100644 --- a/src/web/public/js/web-ui-helpers.js +++ b/src/web/public/js/web-ui-helpers.js @@ -10,7 +10,7 @@ .replace(/'/g, '''); } - function formatDashboardDate(value) { + function formatDashboardDate(value, useTwentyFourHour) { if (!value) { return ''; } @@ -20,14 +20,20 @@ return ''; } - return new Intl.DateTimeFormat('en-US', { + var formatOptions = { month: 'short', day: '2-digit', year: 'numeric', hour: 'numeric', minute: '2-digit', second: '2-digit' - }).format(date); + }; + + if (useTwentyFourHour) { + formatOptions.hour12 = false; + } + + return new Intl.DateTimeFormat('en-US', formatOptions).format(date); } function getClientRowKey(client) { @@ -85,6 +91,206 @@ return ip; } + window.escapeHtml = escapeHtml; + + var defaultQrOptions = window.defaultQrOptions || { + width: 1000, + height: 1000, + type: 'canvas', + margin: 10, + qrOptions: {}, + dotsOptions: { + color: '#000000', + type: 'square' + }, + cornersSquareOptions: { + color: '#000000', + type: 'square' + }, + cornersDotOptions: { + color: '#000000', + type: 'square' + }, + backgroundOptions: { + color: '#ffffff' + } + }; + var qrDotTypes = window.qrDotTypes || [ + { value: 'square', label: 'Square' }, + { value: 'dots', label: 'Dots' }, + { value: 'rounded', label: 'Rounded' }, + { value: 'extra-rounded', label: 'Extra rounded' }, + { value: 'classy', label: 'Classy' }, + { value: 'classy-rounded', label: 'Classy rounded' } + ]; + var qrCornerSquareTypes = window.qrCornerSquareTypes || [ + { value: 'square', label: 'Square' }, + { value: 'dot', label: 'Dot' }, + { value: 'rounded', label: 'Rounded' }, + { value: 'extra-rounded', label: 'Extra rounded' }, + { value: 'dots', label: 'Dots' }, + { value: 'classy', label: 'Classy' }, + { value: 'classy-rounded', label: 'Classy rounded' } + ]; + var qrCornerDotTypes = window.qrCornerDotTypes || [ + { value: 'square', label: 'Square' }, + { value: 'dot', label: 'Dot' }, + { value: 'rounded', label: 'Rounded' }, + { value: 'extra-rounded', label: 'Extra rounded' }, + { value: 'classy', label: 'Classy' }, + { value: 'classy-rounded', label: 'Classy rounded' } + ]; + + function getOptionValue(option) { + if (option && typeof option === 'object' && option.value !== undefined && option.value !== null) { + return String(option.value).trim(); + } + + return String(option === undefined || option === null ? '' : option).trim(); + } + + function normalizeMarginValue(value, fallback) { + var parsed = Number(value); + return Number.isFinite(parsed) && parsed >= 0 ? Math.round(parsed) : fallback; + } + + function normalizeHexColorValue(value, fallback) { + var raw = String(value === undefined || value === null ? '' : value).trim(); + return raw || fallback; + } + + function normalizeBooleanValue(value, fallback) { + if (value === undefined || value === null || value === '') { + return Boolean(fallback); + } + if (typeof value === 'boolean') { + return value; + } + var text = String(value).trim().toLowerCase(); + if (text === 'true' || text === '1' || text === 'yes' || text === 'on') { + return true; + } + if (text === 'false' || text === '0' || text === 'no' || text === 'off') { + return false; + } + return Boolean(value); + } + + function normalizeOptionValue(value, options, fallback) { + var text = String(value === undefined || value === null ? '' : value).trim(); + for (var index = 0; index < options.length; index += 1) { + if (getOptionValue(options[index]) === text) { + return text; + } + } + + return fallback; + } + + function normalizeRatioValue(value, fallback) { + var parsed = Number(value); + return Number.isFinite(parsed) && parsed >= 0 ? parsed : fallback; + } + + function normalizeGradientTypeValue(value, fallback) { + var text = String(value === undefined || value === null ? '' : value).trim().toLowerCase(); + return text === 'radial' ? 'radial' : 'linear'; + } + + function normalizeGradientRotationValue(value, fallback) { + var parsed = Number(value); + return Number.isFinite(parsed) ? Math.round(parsed) : fallback; + } + + function normalizeColorModeValue(value, fallback) { + var text = String(value === undefined || value === null ? '' : value).trim().toLowerCase(); + return text === 'gradient' ? 'gradient' : 'single'; + } + + function normalizeColorValue(value, fallback) { + return normalizeHexColorValue(value, fallback); + } + + function renderSelectOptions(options, currentValue) { + return options.map(function (option) { + var optionValue = getOptionValue(option); + var optionLabel = option && typeof option === 'object' && option.label !== undefined ? option.label : optionValue; + return ''; + }).join(''); + } + + function normalizeSvgMarkup(svg) { + var markup = String(svg || '').trim(); + if (!markup || markup.charAt(0) !== '<') { + return markup; + } + + return markup.replace(/^]*)>/i, function (_match, attrText) { + var attrs = String(attrText || ''); + if (!/\bwidth\s*=\s*/i.test(attrs)) { + attrs += ' width="95%"'; + } + if (!/\bheight\s*=\s*/i.test(attrs)) { + attrs += ' height="95%"'; + } + if (!/\bpreserveAspectRatio\s*=\s*/i.test(attrs)) { + attrs += ' preserveAspectRatio="xMidYMid meet"'; + } + if (!/\bstyle\s*=\s*/i.test(attrs)) { + attrs += ' style="display:block;width:95%;height:95%;"'; + } + return ''; + }); + } + + function normalizeQrSvg(svg) { + return normalizeSvgMarkup(svg); + } + + async function blobToText(blob) { + if (!blob) { + return ''; + } + + if (typeof blob.text === 'function') { + return blob.text(); + } + + if (typeof FileReader === 'function') { + return await new Promise(function (resolve, reject) { + var reader = new FileReader(); + reader.onload = function () { + resolve(String(reader.result || '')); + }; + reader.onerror = function () { + reject(reader.error || new Error('Failed to read blob.')); + }; + reader.readAsText(blob); + }); + } + + return ''; + } + + window.defaultQrOptions = defaultQrOptions; + window.qrDotTypes = qrDotTypes; + window.qrCornerSquareTypes = qrCornerSquareTypes; + window.qrCornerDotTypes = qrCornerDotTypes; + window.normalizeMarginValue = normalizeMarginValue; + window.normalizeHexColorValue = normalizeHexColorValue; + window.normalizeBooleanValue = normalizeBooleanValue; + window.normalizeOptionValue = normalizeOptionValue; + window.normalizeRatioValue = normalizeRatioValue; + window.normalizeGradientTypeValue = normalizeGradientTypeValue; + window.normalizeGradientRotationValue = normalizeGradientRotationValue; + window.normalizeColorModeValue = normalizeColorModeValue; + window.normalizeColorValue = normalizeColorValue; + window.renderSelectOptions = renderSelectOptions; + window.normalizeSvgMarkup = normalizeSvgMarkup; + window.normalizeQrSvg = normalizeQrSvg; + window.blobToText = blobToText; + window.pendingByRegionId = window.pendingByRegionId || Object.create(null); + window.webUiHelpers = { escapeHtml: escapeHtml, formatDashboardDate: formatDashboardDate, diff --git a/src/web/public/vendor/qr-code-styling/qr-code-styling-loader.js b/src/web/public/vendor/qr-code-styling/qr-code-styling-loader.js new file mode 100644 index 0000000..9910d85 --- /dev/null +++ b/src/web/public/vendor/qr-code-styling/qr-code-styling-loader.js @@ -0,0 +1,21 @@ +(function () { + if (window.QRCodeStyling) { + return; + } + + var request = new XMLHttpRequest(); + request.open('GET', '/assets/vendor/qr-code-styling/qr-code-styling.js', false); + request.send(null); + + if (request.status < 200 || request.status >= 300) { + throw new Error('Failed to load QR code styling library.'); + } + + var source = String(request.responseText || ''); + var initialize = new Function(source + '\nreturn typeof QRCodeStyling !== \'undefined\' ? QRCodeStyling : window.QRCodeStyling;'); + var exported = initialize.call(window); + + if (exported && !window.QRCodeStyling) { + window.QRCodeStyling = exported; + } +}()); diff --git a/src/web/public/vendor/qr-code-styling/qr-code-styling.js b/src/web/public/vendor/qr-code-styling/qr-code-styling.js new file mode 100644 index 0000000..1651533 --- /dev/null +++ b/src/web/public/vendor/qr-code-styling/qr-code-styling.js @@ -0,0 +1,2 @@ +!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.QRCodeStyling=e():t.QRCodeStyling=e()}(this,(()=>(()=>{var t={873:(t,e)=>{var i,r,n=function(){var t=function(t,e){var i=t,r=s[e],n=null,o=0,h=null,p=[],v={},m=function(t,e){n=function(t){for(var e=new Array(t),i=0;i=7&&S(t),null==h&&(h=M(i,r,p)),A(h,e)},b=function(t,e){for(var i=-1;i<=7;i+=1)if(!(t+i<=-1||o<=t+i))for(var r=-1;r<=7;r+=1)e+r<=-1||o<=e+r||(n[t+i][e+r]=0<=i&&i<=6&&(0==r||6==r)||0<=r&&r<=6&&(0==i||6==i)||2<=i&&i<=4&&2<=r&&r<=4)},y=function(){for(var t=8;t>r&1);n[Math.floor(r/3)][r%3+o-8-3]=s}for(r=0;r<18;r+=1)s=!t&&1==(e>>r&1),n[r%3+o-8-3][Math.floor(r/3)]=s},C=function(t,e){for(var i=r<<3|e,s=a.getBCHTypeInfo(i),h=0;h<15;h+=1){var d=!t&&1==(s>>h&1);h<6?n[h][8]=d:h<8?n[h+1][8]=d:n[o-15+h][8]=d}for(h=0;h<15;h+=1)d=!t&&1==(s>>h&1),h<8?n[8][o-h-1]=d:h<9?n[8][15-h-1+1]=d:n[8][15-h-1]=d;n[o-8][8]=!t},A=function(t,e){for(var i=-1,r=o-1,s=7,h=0,d=a.getMaskFunction(e),u=o-1;u>0;u-=2)for(6==u&&(u-=1);;){for(var c=0;c<2;c+=1)if(null==n[r][u-c]){var l=!1;h>>s&1)),d(r,u-c)&&(l=!l),n[r][u-c]=l,-1==(s-=1)&&(h+=1,s=7)}if((r+=i)<0||o<=r){r-=i,i=-i;break}}},M=function(t,e,i){for(var r=u.getRSBlocks(t,e),n=c(),o=0;o8*h)throw"code length overflow. ("+n.getLengthInBits()+">"+8*h+")";for(n.getLengthInBits()+4<=8*h&&n.put(0,4);n.getLengthInBits()%8!=0;)n.putBit(!1);for(;!(n.getLengthInBits()>=8*h||(n.put(236,8),n.getLengthInBits()>=8*h));)n.put(17,8);return function(t,e){for(var i=0,r=0,n=0,o=new Array(e.length),s=new Array(e.length),h=0;h=0?f.getAt(w):0}}var p=0;for(l=0;lr)&&(t=r,e=i)}return e}())},v.createTableTag=function(t,e){t=t||2;var i="";i+='',i+="";for(var r=0;r";for(var n=0;n';i+=""}return(i+="")+"
"},v.createSvgTag=function(t,e,i,r){var n={};"object"==typeof arguments[0]&&(t=(n=arguments[0]).cellSize,e=n.margin,i=n.alt,r=n.title),t=t||2,e=void 0===e?4*t:e,(i="string"==typeof i?{text:i}:i||{}).text=i.text||null,i.id=i.text?i.id||"qrcode-description":null,(r="string"==typeof r?{text:r}:r||{}).text=r.text||null,r.id=r.text?r.id||"qrcode-title":null;var o,s,a,h,d=v.getModuleCount()*t+2*e,u="";for(h="l"+t+",0 0,"+t+" -"+t+",0 0,-"+t+"z ",u+=''+$(r.text)+"":"",u+=i.text?''+$(i.text)+"":"",u+='',u+='"},v.createDataURL=function(t,e){t=t||2,e=void 0===e?4*t:e;var i=v.getModuleCount()*t+2*e,r=e,n=i-e;return _(i,i,(function(e,i){if(r<=e&&e"};var $=function(t){for(var e="",i=0;i":e+=">";break;case"&":e+="&";break;case'"':e+=""";break;default:e+=r}}return e};return v.createASCII=function(t,e){if((t=t||1)<2)return function(t){t=void 0===t?2:t;var e,i,r,n,o,s=1*v.getModuleCount()+2*t,a=t,h=s-t,d={"██":"█","█ ":"▀"," █":"▄"," ":" "},u={"██":"▀","█ ":"▀"," █":" "," ":" "},c="";for(e=0;e=h?u[o]:d[o];c+="\n"}return s%2&&t>0?c.substring(0,c.length-s-1)+Array(s+1).join("▀"):c.substring(0,c.length-1)}(e);t-=1,e=void 0===e?2*t:e;var i,r,n,o,s=v.getModuleCount()*t+2*e,a=e,h=s-e,d=Array(t+1).join("██"),u=Array(t+1).join(" "),c="",l="";for(i=0;i>>8),e.push(255&s)):e.push(r)}}return e}};var e,i,r,n,o,s={L:1,M:0,Q:3,H:2},a=(e=[[],[6,18],[6,22],[6,26],[6,30],[6,34],[6,22,38],[6,24,42],[6,26,46],[6,28,50],[6,30,54],[6,32,58],[6,34,62],[6,26,46,66],[6,26,48,70],[6,26,50,74],[6,30,54,78],[6,30,56,82],[6,30,58,86],[6,34,62,90],[6,28,50,72,94],[6,26,50,74,98],[6,30,54,78,102],[6,28,54,80,106],[6,32,58,84,110],[6,30,58,86,114],[6,34,62,90,118],[6,26,50,74,98,122],[6,30,54,78,102,126],[6,26,52,78,104,130],[6,30,56,82,108,134],[6,34,60,86,112,138],[6,30,58,86,114,142],[6,34,62,90,118,146],[6,30,54,78,102,126,150],[6,24,50,76,102,128,154],[6,28,54,80,106,132,158],[6,32,58,84,110,136,162],[6,26,54,82,110,138,166],[6,30,58,86,114,142,170]],i=1335,r=7973,o=function(t){for(var e=0;0!=t;)e+=1,t>>>=1;return e},(n={}).getBCHTypeInfo=function(t){for(var e=t<<10;o(e)-o(i)>=0;)e^=i<=0;)e^=r<5&&(i+=3+o-5)}for(r=0;r=256;)e-=255;return t[e]}}}();function d(t,e){if(void 0===t.length)throw t.length+"/"+e;var i=function(){for(var i=0;i>>7-e%8&1)},put:function(t,e){for(var r=0;r>>e-r-1&1))},getLengthInBits:function(){return e},putBit:function(i){var r=Math.floor(e/8);t.length<=r&&t.push(0),i&&(t[r]|=128>>>e%8),e+=1}};return i},l=function(t){var e=t,i={getMode:function(){return 1},getLength:function(t){return e.length},write:function(t){for(var i=e,n=0;n+2>>8&255)+(255&n),t.put(n,13),i+=2}if(i>>8)},writeBytes:function(t,i,r){i=i||0,r=r||t.length;for(var n=0;n0&&(e+=","),e+=t[i];return e+"]"}};return e},v=function(t){var e=t,i=0,r=0,n=0,o={read:function(){for(;n<8;){if(i>=e.length){if(0==n)return-1;throw"unexpected end of file./"+n}var t=e.charAt(i);if(i+=1,"="==t)return n=0,-1;t.match(/^\s$/)||(r=r<<6|s(t.charCodeAt(0)),n+=6)}var o=r>>>n-8&255;return n-=8,o}},s=function(t){if(65<=t&&t<=90)return t-65;if(97<=t&&t<=122)return t-97+26;if(48<=t&&t<=57)return t-48+52;if(43==t)return 62;if(47==t)return 63;throw"c:"+t};return o},_=function(t,e,i){for(var r=function(t,e){var i=t,r=e,n=new Array(t*e),o={setPixel:function(t,e,r){n[e*i+t]=r},write:function(t){t.writeString("GIF87a"),t.writeShort(i),t.writeShort(r),t.writeByte(128),t.writeByte(0),t.writeByte(0),t.writeByte(0),t.writeByte(0),t.writeByte(0),t.writeByte(255),t.writeByte(255),t.writeByte(255),t.writeString(","),t.writeShort(0),t.writeShort(0),t.writeShort(i),t.writeShort(r),t.writeByte(0);var e=s(2);t.writeByte(2);for(var n=0;e.length-n>255;)t.writeByte(255),t.writeBytes(e,n,255),n+=255;t.writeByte(e.length-n),t.writeBytes(e,n,e.length-n),t.writeByte(0),t.writeString(";")}},s=function(t){for(var e=1<>>e!=0)throw"length over";for(;d+e>=8;)h.writeByte(255&(t<>>=8-d,u=0,d=0;u|=t<0&&h.writeByte(u)}});l.write(e,r);var g=0,f=String.fromCharCode(n[g]);for(g+=1;g=6;)o(t>>>e-6),e-=6},n.flush=function(){if(e>0&&(o(t<<6-e),t=0,e=0),i%3!=0)for(var n=3-i%3,s=0;s>6,128|63&r):r<55296||r>=57344?e.push(224|r>>12,128|r>>6&63,128|63&r):(i++,r=65536+((1023&r)<<10|1023&t.charCodeAt(i)),e.push(240|r>>18,128|r>>12&63,128|r>>6&63,128|63&r))}return e}(t)},void 0===(r="function"==typeof(i=function(){return n})?i.apply(e,[]):i)||(t.exports=r)}},e={};function i(r){var n=e[r];if(void 0!==n)return n.exports;var o=e[r]={exports:{}};return t[r](o,o.exports,i),o.exports}i.n=t=>{var e=t&&t.__esModule?()=>t.default:()=>t;return i.d(e,{a:e}),e},i.d=(t,e)=>{for(var r in e)i.o(e,r)&&!i.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:e[r]})},i.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e);var r={};return(()=>{"use strict";i.d(r,{default:()=>$});const t=t=>!!t&&"object"==typeof t&&!Array.isArray(t);function e(i,...r){if(!r.length)return i;const n=r.shift();return void 0!==n&&t(i)&&t(n)?(i=Object.assign({},i),Object.keys(n).forEach((r=>{const o=i[r],s=n[r];Array.isArray(o)&&Array.isArray(s)?i[r]=s:t(o)&&t(s)?i[r]=e(Object.assign({},o),s):i[r]=s})),e(i,...r)):i}function n(t,e){const i=document.createElement("a");i.download=e,i.href=t,document.body.appendChild(i),i.click(),document.body.removeChild(i)}const o={L:.07,M:.15,Q:.25,H:.3};class s{constructor({svg:t,type:e,window:i}){this._svg=t,this._type=e,this._window=i}draw(t,e,i,r){let n;switch(this._type){case"dots":n=this._drawDot;break;case"classy":n=this._drawClassy;break;case"classy-rounded":n=this._drawClassyRounded;break;case"rounded":n=this._drawRounded;break;case"extra-rounded":n=this._drawExtraRounded;break;default:n=this._drawSquare}n.call(this,{x:t,y:e,size:i,getNeighbor:r})}_rotateFigure({x:t,y:e,size:i,rotation:r=0,draw:n}){var o;const s=t+i/2,a=e+i/2;n(),null===(o=this._element)||void 0===o||o.setAttribute("transform",`rotate(${180*r/Math.PI},${s},${a})`)}_basicDot(t){const{size:e,x:i,y:r}=t;this._rotateFigure(Object.assign(Object.assign({},t),{draw:()=>{this._element=this._window.document.createElementNS("http://www.w3.org/2000/svg","circle"),this._element.setAttribute("cx",String(i+e/2)),this._element.setAttribute("cy",String(r+e/2)),this._element.setAttribute("r",String(e/2))}}))}_basicSquare(t){const{size:e,x:i,y:r}=t;this._rotateFigure(Object.assign(Object.assign({},t),{draw:()=>{this._element=this._window.document.createElementNS("http://www.w3.org/2000/svg","rect"),this._element.setAttribute("x",String(i)),this._element.setAttribute("y",String(r)),this._element.setAttribute("width",String(e)),this._element.setAttribute("height",String(e))}}))}_basicSideRounded(t){const{size:e,x:i,y:r}=t;this._rotateFigure(Object.assign(Object.assign({},t),{draw:()=>{this._element=this._window.document.createElementNS("http://www.w3.org/2000/svg","path"),this._element.setAttribute("d",`M ${i} ${r}v ${e}h `+e/2+`a ${e/2} ${e/2}, 0, 0, 0, 0 ${-e}`)}}))}_basicCornerRounded(t){const{size:e,x:i,y:r}=t;this._rotateFigure(Object.assign(Object.assign({},t),{draw:()=>{this._element=this._window.document.createElementNS("http://www.w3.org/2000/svg","path"),this._element.setAttribute("d",`M ${i} ${r}v ${e}h ${e}v `+-e/2+`a ${e/2} ${e/2}, 0, 0, 0, ${-e/2} ${-e/2}`)}}))}_basicCornerExtraRounded(t){const{size:e,x:i,y:r}=t;this._rotateFigure(Object.assign(Object.assign({},t),{draw:()=>{this._element=this._window.document.createElementNS("http://www.w3.org/2000/svg","path"),this._element.setAttribute("d",`M ${i} ${r}v ${e}h ${e}a ${e} ${e}, 0, 0, 0, ${-e} ${-e}`)}}))}_basicCornersRounded(t){const{size:e,x:i,y:r}=t;this._rotateFigure(Object.assign(Object.assign({},t),{draw:()=>{this._element=this._window.document.createElementNS("http://www.w3.org/2000/svg","path"),this._element.setAttribute("d",`M ${i} ${r}v `+e/2+`a ${e/2} ${e/2}, 0, 0, 0, ${e/2} ${e/2}h `+e/2+"v "+-e/2+`a ${e/2} ${e/2}, 0, 0, 0, ${-e/2} ${-e/2}`)}}))}_drawDot({x:t,y:e,size:i}){this._basicDot({x:t,y:e,size:i,rotation:0})}_drawSquare({x:t,y:e,size:i}){this._basicSquare({x:t,y:e,size:i,rotation:0})}_drawRounded({x:t,y:e,size:i,getNeighbor:r}){const n=r?+r(-1,0):0,o=r?+r(1,0):0,s=r?+r(0,-1):0,a=r?+r(0,1):0,h=n+o+s+a;if(0!==h)if(h>2||n&&o||s&&a)this._basicSquare({x:t,y:e,size:i,rotation:0});else{if(2===h){let r=0;return n&&s?r=Math.PI/2:s&&o?r=Math.PI:o&&a&&(r=-Math.PI/2),void this._basicCornerRounded({x:t,y:e,size:i,rotation:r})}if(1===h){let r=0;return s?r=Math.PI/2:o?r=Math.PI:a&&(r=-Math.PI/2),void this._basicSideRounded({x:t,y:e,size:i,rotation:r})}}else this._basicDot({x:t,y:e,size:i,rotation:0})}_drawExtraRounded({x:t,y:e,size:i,getNeighbor:r}){const n=r?+r(-1,0):0,o=r?+r(1,0):0,s=r?+r(0,-1):0,a=r?+r(0,1):0,h=n+o+s+a;if(0!==h)if(h>2||n&&o||s&&a)this._basicSquare({x:t,y:e,size:i,rotation:0});else{if(2===h){let r=0;return n&&s?r=Math.PI/2:s&&o?r=Math.PI:o&&a&&(r=-Math.PI/2),void this._basicCornerExtraRounded({x:t,y:e,size:i,rotation:r})}if(1===h){let r=0;return s?r=Math.PI/2:o?r=Math.PI:a&&(r=-Math.PI/2),void this._basicSideRounded({x:t,y:e,size:i,rotation:r})}}else this._basicDot({x:t,y:e,size:i,rotation:0})}_drawClassy({x:t,y:e,size:i,getNeighbor:r}){const n=r?+r(-1,0):0,o=r?+r(1,0):0,s=r?+r(0,-1):0,a=r?+r(0,1):0;0!==n+o+s+a?n||s?o||a?this._basicSquare({x:t,y:e,size:i,rotation:0}):this._basicCornerRounded({x:t,y:e,size:i,rotation:Math.PI/2}):this._basicCornerRounded({x:t,y:e,size:i,rotation:-Math.PI/2}):this._basicCornersRounded({x:t,y:e,size:i,rotation:Math.PI/2})}_drawClassyRounded({x:t,y:e,size:i,getNeighbor:r}){const n=r?+r(-1,0):0,o=r?+r(1,0):0,s=r?+r(0,-1):0,a=r?+r(0,1):0;0!==n+o+s+a?n||s?o||a?this._basicSquare({x:t,y:e,size:i,rotation:0}):this._basicCornerExtraRounded({x:t,y:e,size:i,rotation:Math.PI/2}):this._basicCornerExtraRounded({x:t,y:e,size:i,rotation:-Math.PI/2}):this._basicCornersRounded({x:t,y:e,size:i,rotation:Math.PI/2})}}const a={dot:"dot",square:"square",extraRounded:"extra-rounded"},h=Object.values(a);class d{constructor({svg:t,type:e,window:i}){this._svg=t,this._type=e,this._window=i}draw(t,e,i,r){let n;switch(this._type){case a.square:n=this._drawSquare;break;case a.extraRounded:n=this._drawExtraRounded;break;default:n=this._drawDot}n.call(this,{x:t,y:e,size:i,rotation:r})}_rotateFigure({x:t,y:e,size:i,rotation:r=0,draw:n}){var o;const s=t+i/2,a=e+i/2;n(),null===(o=this._element)||void 0===o||o.setAttribute("transform",`rotate(${180*r/Math.PI},${s},${a})`)}_basicDot(t){const{size:e,x:i,y:r}=t,n=e/7;this._rotateFigure(Object.assign(Object.assign({},t),{draw:()=>{this._element=this._window.document.createElementNS("http://www.w3.org/2000/svg","path"),this._element.setAttribute("clip-rule","evenodd"),this._element.setAttribute("d",`M ${i+e/2} ${r}a ${e/2} ${e/2} 0 1 0 0.1 0zm 0 ${n}a ${e/2-n} ${e/2-n} 0 1 1 -0.1 0Z`)}}))}_basicSquare(t){const{size:e,x:i,y:r}=t,n=e/7;this._rotateFigure(Object.assign(Object.assign({},t),{draw:()=>{this._element=this._window.document.createElementNS("http://www.w3.org/2000/svg","path"),this._element.setAttribute("clip-rule","evenodd"),this._element.setAttribute("d",`M ${i} ${r}v ${e}h ${e}v `+-e+"z"+`M ${i+n} ${r+n}h `+(e-2*n)+"v "+(e-2*n)+"h "+(2*n-e)+"z")}}))}_basicExtraRounded(t){const{size:e,x:i,y:r}=t,n=e/7;this._rotateFigure(Object.assign(Object.assign({},t),{draw:()=>{this._element=this._window.document.createElementNS("http://www.w3.org/2000/svg","path"),this._element.setAttribute("clip-rule","evenodd"),this._element.setAttribute("d",`M ${i} ${r+2.5*n}v `+2*n+`a ${2.5*n} ${2.5*n}, 0, 0, 0, ${2.5*n} ${2.5*n}h `+2*n+`a ${2.5*n} ${2.5*n}, 0, 0, 0, ${2.5*n} ${2.5*-n}v `+-2*n+`a ${2.5*n} ${2.5*n}, 0, 0, 0, ${2.5*-n} ${2.5*-n}h `+-2*n+`a ${2.5*n} ${2.5*n}, 0, 0, 0, ${2.5*-n} ${2.5*n}`+`M ${i+2.5*n} ${r+n}h `+2*n+`a ${1.5*n} ${1.5*n}, 0, 0, 1, ${1.5*n} ${1.5*n}v `+2*n+`a ${1.5*n} ${1.5*n}, 0, 0, 1, ${1.5*-n} ${1.5*n}h `+-2*n+`a ${1.5*n} ${1.5*n}, 0, 0, 1, ${1.5*-n} ${1.5*-n}v `+-2*n+`a ${1.5*n} ${1.5*n}, 0, 0, 1, ${1.5*n} ${1.5*-n}`)}}))}_drawDot({x:t,y:e,size:i,rotation:r}){this._basicDot({x:t,y:e,size:i,rotation:r})}_drawSquare({x:t,y:e,size:i,rotation:r}){this._basicSquare({x:t,y:e,size:i,rotation:r})}_drawExtraRounded({x:t,y:e,size:i,rotation:r}){this._basicExtraRounded({x:t,y:e,size:i,rotation:r})}}const u={dot:"dot",square:"square"},c=Object.values(u);class l{constructor({svg:t,type:e,window:i}){this._svg=t,this._type=e,this._window=i}draw(t,e,i,r){let n;n=this._type===u.square?this._drawSquare:this._drawDot,n.call(this,{x:t,y:e,size:i,rotation:r})}_rotateFigure({x:t,y:e,size:i,rotation:r=0,draw:n}){var o;const s=t+i/2,a=e+i/2;n(),null===(o=this._element)||void 0===o||o.setAttribute("transform",`rotate(${180*r/Math.PI},${s},${a})`)}_basicDot(t){const{size:e,x:i,y:r}=t;this._rotateFigure(Object.assign(Object.assign({},t),{draw:()=>{this._element=this._window.document.createElementNS("http://www.w3.org/2000/svg","circle"),this._element.setAttribute("cx",String(i+e/2)),this._element.setAttribute("cy",String(r+e/2)),this._element.setAttribute("r",String(e/2))}}))}_basicSquare(t){const{size:e,x:i,y:r}=t;this._rotateFigure(Object.assign(Object.assign({},t),{draw:()=>{this._element=this._window.document.createElementNS("http://www.w3.org/2000/svg","rect"),this._element.setAttribute("x",String(i)),this._element.setAttribute("y",String(r)),this._element.setAttribute("width",String(e)),this._element.setAttribute("height",String(e))}}))}_drawDot({x:t,y:e,size:i,rotation:r}){this._basicDot({x:t,y:e,size:i,rotation:r})}_drawSquare({x:t,y:e,size:i,rotation:r}){this._basicSquare({x:t,y:e,size:i,rotation:r})}}const g="circle",f=[[1,1,1,1,1,1,1],[1,0,0,0,0,0,1],[1,0,0,0,0,0,1],[1,0,0,0,0,0,1],[1,0,0,0,0,0,1],[1,0,0,0,0,0,1],[1,1,1,1,1,1,1]],w=[[0,0,0,0,0,0,0],[0,0,0,0,0,0,0],[0,0,1,1,1,0,0],[0,0,1,1,1,0,0],[0,0,1,1,1,0,0],[0,0,0,0,0,0,0],[0,0,0,0,0,0,0]];class p{constructor(t,e){this._roundSize=t=>this._options.dotsOptions.roundSize?Math.floor(t):t,this._window=e,this._element=this._window.document.createElementNS("http://www.w3.org/2000/svg","svg"),this._element.setAttribute("width",String(t.width)),this._element.setAttribute("height",String(t.height)),this._element.setAttribute("xmlns:xlink","http://www.w3.org/1999/xlink"),t.dotsOptions.roundSize||this._element.setAttribute("shape-rendering","crispEdges"),this._element.setAttribute("viewBox",`0 0 ${t.width} ${t.height}`),this._defs=this._window.document.createElementNS("http://www.w3.org/2000/svg","defs"),this._element.appendChild(this._defs),this._imageUri=t.image,this._instanceId=p.instanceCount++,this._options=t}get width(){return this._options.width}get height(){return this._options.height}getElement(){return this._element}async drawQR(t){const e=t.getModuleCount(),i=Math.min(this._options.width,this._options.height)-2*this._options.margin,r=this._options.shape===g?i/Math.sqrt(2):i,n=this._roundSize(r/e);let s={hideXDots:0,hideYDots:0,width:0,height:0};if(this._qr=t,this._options.image){if(await this.loadImage(),!this._image)return;const{imageOptions:t,qrOptions:i}=this._options,r=t.imageSize*o[i.errorCorrectionLevel],a=Math.floor(r*e*e);s=function({originalHeight:t,originalWidth:e,maxHiddenDots:i,maxHiddenAxisDots:r,dotSize:n}){const o={x:0,y:0},s={x:0,y:0};if(t<=0||e<=0||i<=0||n<=0)return{height:0,width:0,hideYDots:0,hideXDots:0};const a=t/e;return o.x=Math.floor(Math.sqrt(i/a)),o.x<=0&&(o.x=1),r&&ri||r&&r{var r,n,o,a,h,d;return!(this._options.imageOptions.hideBackgroundDots&&t>=(e-s.hideYDots)/2&&t<(e+s.hideYDots)/2&&i>=(e-s.hideXDots)/2&&i<(e+s.hideXDots)/2||(null===(r=f[t])||void 0===r?void 0:r[i])||(null===(n=f[t-e+7])||void 0===n?void 0:n[i])||(null===(o=f[t])||void 0===o?void 0:o[i-e+7])||(null===(a=w[t])||void 0===a?void 0:a[i])||(null===(h=w[t-e+7])||void 0===h?void 0:h[i])||(null===(d=w[t])||void 0===d?void 0:d[i-e+7]))})),this.drawCorners(),this._options.image&&await this.drawImage({width:s.width,height:s.height,count:e,dotSize:n})}drawBackground(){var t,e,i;const r=this._element,n=this._options;if(r){const r=null===(t=n.backgroundOptions)||void 0===t?void 0:t.gradient,o=null===(e=n.backgroundOptions)||void 0===e?void 0:e.color;let s=n.height,a=n.width;if(r||o){const t=this._window.document.createElementNS("http://www.w3.org/2000/svg","rect");this._backgroundClipPath=this._window.document.createElementNS("http://www.w3.org/2000/svg","clipPath"),this._backgroundClipPath.setAttribute("id",`clip-path-background-color-${this._instanceId}`),this._defs.appendChild(this._backgroundClipPath),(null===(i=n.backgroundOptions)||void 0===i?void 0:i.round)&&(s=a=Math.min(n.width,n.height),t.setAttribute("rx",String(s/2*n.backgroundOptions.round))),t.setAttribute("x",String(this._roundSize((n.width-a)/2))),t.setAttribute("y",String(this._roundSize((n.height-s)/2))),t.setAttribute("width",String(a)),t.setAttribute("height",String(s)),this._backgroundClipPath.appendChild(t),this._createColor({options:r,color:o,additionalRotation:0,x:0,y:0,height:n.height,width:n.width,name:`background-color-${this._instanceId}`})}}}drawDots(t){var e,i;if(!this._qr)throw"QR code is not defined";const r=this._options,n=this._qr.getModuleCount();if(n>r.width||n>r.height)throw"The canvas is too small.";const o=Math.min(r.width,r.height)-2*r.margin,a=r.shape===g?o/Math.sqrt(2):o,h=this._roundSize(a/n),d=this._roundSize((r.width-n*h)/2),u=this._roundSize((r.height-n*h)/2),c=new s({svg:this._element,type:r.dotsOptions.type,window:this._window});this._dotsClipPath=this._window.document.createElementNS("http://www.w3.org/2000/svg","clipPath"),this._dotsClipPath.setAttribute("id",`clip-path-dot-color-${this._instanceId}`),this._defs.appendChild(this._dotsClipPath),this._createColor({options:null===(e=r.dotsOptions)||void 0===e?void 0:e.gradient,color:r.dotsOptions.color,additionalRotation:0,x:0,y:0,height:r.height,width:r.width,name:`dot-color-${this._instanceId}`});for(let e=0;e!(r+i<0||e+o<0||r+i>=n||e+o>=n)&&!(t&&!t(e+o,r+i))&&!!this._qr&&this._qr.isDark(e+o,r+i))),c._element&&this._dotsClipPath&&this._dotsClipPath.appendChild(c._element));if(r.shape===g){const t=this._roundSize((o/h-n)/2),e=n+2*t,i=d-t*h,r=u-t*h,s=[],a=this._roundSize(e/2);for(let i=0;i=t-1&&i<=e-t&&r>=t-1&&r<=e-t||Math.sqrt((i-a)*(i-a)+(r-a)*(r-a))>a?s[i][r]=0:s[i][r]=this._qr.isDark(r-2*t<0?r:r>=n?r-2*t:r-t,i-2*t<0?i:i>=n?i-2*t:i-t)?1:0}for(let t=0;t{var r;return!!(null===(r=s[t+i])||void 0===r?void 0:r[n+e])})),c._element&&this._dotsClipPath&&this._dotsClipPath.appendChild(c._element))}}drawCorners(){if(!this._qr)throw"QR code is not defined";const t=this._element,e=this._options;if(!t)throw"Element code is not defined";const i=this._qr.getModuleCount(),r=Math.min(e.width,e.height)-2*e.margin,n=e.shape===g?r/Math.sqrt(2):r,o=this._roundSize(n/i),a=7*o,u=3*o,p=this._roundSize((e.width-i*o)/2),v=this._roundSize((e.height-i*o)/2);[[0,0,0],[1,0,Math.PI/2],[0,1,-Math.PI/2]].forEach((([t,r,n])=>{var g,_,m,b,y,x,S,C,A,M,$,O,D,k;const z=p+t*o*(i-7),B=v+r*o*(i-7);let P=this._dotsClipPath,I=this._dotsClipPath;if(((null===(g=e.cornersSquareOptions)||void 0===g?void 0:g.gradient)||(null===(_=e.cornersSquareOptions)||void 0===_?void 0:_.color))&&(P=this._window.document.createElementNS("http://www.w3.org/2000/svg","clipPath"),P.setAttribute("id",`clip-path-corners-square-color-${t}-${r}-${this._instanceId}`),this._defs.appendChild(P),this._cornersSquareClipPath=this._cornersDotClipPath=I=P,this._createColor({options:null===(m=e.cornersSquareOptions)||void 0===m?void 0:m.gradient,color:null===(b=e.cornersSquareOptions)||void 0===b?void 0:b.color,additionalRotation:n,x:z,y:B,height:a,width:a,name:`corners-square-color-${t}-${r}-${this._instanceId}`})),(null===(y=e.cornersSquareOptions)||void 0===y?void 0:y.type)&&h.includes(e.cornersSquareOptions.type)){const t=new d({svg:this._element,type:e.cornersSquareOptions.type,window:this._window});t.draw(z,B,a,n),t._element&&P&&P.appendChild(t._element)}else{const t=new s({svg:this._element,type:(null===(x=e.cornersSquareOptions)||void 0===x?void 0:x.type)||e.dotsOptions.type,window:this._window});for(let e=0;e{var n;return!!(null===(n=f[e+r])||void 0===n?void 0:n[i+t])})),t._element&&P&&P.appendChild(t._element))}if(((null===(C=e.cornersDotOptions)||void 0===C?void 0:C.gradient)||(null===(A=e.cornersDotOptions)||void 0===A?void 0:A.color))&&(I=this._window.document.createElementNS("http://www.w3.org/2000/svg","clipPath"),I.setAttribute("id",`clip-path-corners-dot-color-${t}-${r}-${this._instanceId}`),this._defs.appendChild(I),this._cornersDotClipPath=I,this._createColor({options:null===(M=e.cornersDotOptions)||void 0===M?void 0:M.gradient,color:null===($=e.cornersDotOptions)||void 0===$?void 0:$.color,additionalRotation:n,x:z+2*o,y:B+2*o,height:u,width:u,name:`corners-dot-color-${t}-${r}-${this._instanceId}`})),(null===(O=e.cornersDotOptions)||void 0===O?void 0:O.type)&&c.includes(e.cornersDotOptions.type)){const t=new l({svg:this._element,type:e.cornersDotOptions.type,window:this._window});t.draw(z+2*o,B+2*o,u,n),t._element&&I&&I.appendChild(t._element)}else{const t=new s({svg:this._element,type:(null===(D=e.cornersDotOptions)||void 0===D?void 0:D.type)||e.dotsOptions.type,window:this._window});for(let e=0;e{var n;return!!(null===(n=w[e+r])||void 0===n?void 0:n[i+t])})),t._element&&I&&I.appendChild(t._element))}}))}loadImage(){return new Promise(((t,e)=>{var i;const r=this._options;if(!r.image)return e("Image is not defined");if(null===(i=r.nodeCanvas)||void 0===i?void 0:i.loadImage)r.nodeCanvas.loadImage(r.image).then((e=>{var i,n;if(this._image=e,this._options.imageOptions.saveAsBlob){const t=null===(i=r.nodeCanvas)||void 0===i?void 0:i.createCanvas(this._image.width,this._image.height);null===(n=null==t?void 0:t.getContext("2d"))||void 0===n||n.drawImage(e,0,0),this._imageUri=null==t?void 0:t.toDataURL()}t()})).catch(e);else{const e=new this._window.Image;"string"==typeof r.imageOptions.crossOrigin&&(e.crossOrigin=r.imageOptions.crossOrigin),this._image=e,e.onload=async()=>{this._options.imageOptions.saveAsBlob&&(this._imageUri=await async function(t,e){return new Promise((i=>{const r=new e.XMLHttpRequest;r.onload=function(){const t=new e.FileReader;t.onloadend=function(){i(t.result)},t.readAsDataURL(r.response)},r.open("GET",t),r.responseType="blob",r.send()}))}(r.image||"",this._window)),t()},e.src=r.image}}))}async drawImage({width:t,height:e,count:i,dotSize:r}){const n=this._options,o=this._roundSize((n.width-i*r)/2),s=this._roundSize((n.height-i*r)/2),a=o+this._roundSize(n.imageOptions.margin+(i*r-t)/2),h=s+this._roundSize(n.imageOptions.margin+(i*r-e)/2),d=t-2*n.imageOptions.margin,u=e-2*n.imageOptions.margin,c=this._window.document.createElementNS("http://www.w3.org/2000/svg","image");c.setAttribute("href",this._imageUri||""),c.setAttribute("xlink:href",this._imageUri||""),c.setAttribute("x",String(a)),c.setAttribute("y",String(h)),c.setAttribute("width",`${d}px`),c.setAttribute("height",`${u}px`),this._element.appendChild(c)}_createColor({options:t,color:e,additionalRotation:i,x:r,y:n,height:o,width:s,name:a}){const h=s>o?s:o,d=this._window.document.createElementNS("http://www.w3.org/2000/svg","rect");if(d.setAttribute("x",String(r)),d.setAttribute("y",String(n)),d.setAttribute("height",String(o)),d.setAttribute("width",String(s)),d.setAttribute("clip-path",`url('#clip-path-${a}')`),t){let e;if("radial"===t.type)e=this._window.document.createElementNS("http://www.w3.org/2000/svg","radialGradient"),e.setAttribute("id",a),e.setAttribute("gradientUnits","userSpaceOnUse"),e.setAttribute("fx",String(r+s/2)),e.setAttribute("fy",String(n+o/2)),e.setAttribute("cx",String(r+s/2)),e.setAttribute("cy",String(n+o/2)),e.setAttribute("r",String(h/2));else{const h=((t.rotation||0)+i)%(2*Math.PI),d=(h+2*Math.PI)%(2*Math.PI);let u=r+s/2,c=n+o/2,l=r+s/2,g=n+o/2;d>=0&&d<=.25*Math.PI||d>1.75*Math.PI&&d<=2*Math.PI?(u-=s/2,c-=o/2*Math.tan(h),l+=s/2,g+=o/2*Math.tan(h)):d>.25*Math.PI&&d<=.75*Math.PI?(c-=o/2,u-=s/2/Math.tan(h),g+=o/2,l+=s/2/Math.tan(h)):d>.75*Math.PI&&d<=1.25*Math.PI?(u+=s/2,c+=o/2*Math.tan(h),l-=s/2,g-=o/2*Math.tan(h)):d>1.25*Math.PI&&d<=1.75*Math.PI&&(c+=o/2,u+=s/2/Math.tan(h),g-=o/2,l-=s/2/Math.tan(h)),e=this._window.document.createElementNS("http://www.w3.org/2000/svg","linearGradient"),e.setAttribute("id",a),e.setAttribute("gradientUnits","userSpaceOnUse"),e.setAttribute("x1",String(Math.round(u))),e.setAttribute("y1",String(Math.round(c))),e.setAttribute("x2",String(Math.round(l))),e.setAttribute("y2",String(Math.round(g)))}t.colorStops.forEach((({offset:t,color:i})=>{const r=this._window.document.createElementNS("http://www.w3.org/2000/svg","stop");r.setAttribute("offset",100*t+"%"),r.setAttribute("stop-color",i),e.appendChild(r)})),d.setAttribute("fill",`url('#${a}')`),this._defs.appendChild(e)}else e&&d.setAttribute("fill",e);this._element.appendChild(d)}}p.instanceCount=0;const v=p,_="canvas",m={};for(let t=0;t<=40;t++)m[t]=t;const b={type:_,shape:"square",width:300,height:300,data:"",margin:0,qrOptions:{typeNumber:m[0],mode:void 0,errorCorrectionLevel:"Q"},imageOptions:{saveAsBlob:!0,hideBackgroundDots:!0,imageSize:.4,crossOrigin:void 0,margin:0},dotsOptions:{type:"square",color:"#000",roundSize:!0},backgroundOptions:{round:0,color:"#fff"}};function y(t){const e=Object.assign({},t);if(!e.colorStops||!e.colorStops.length)throw"Field 'colorStops' is required in gradient";return e.rotation?e.rotation=Number(e.rotation):e.rotation=0,e.colorStops=e.colorStops.map((t=>Object.assign(Object.assign({},t),{offset:Number(t.offset)}))),e}function x(t){const e=Object.assign({},t);return e.width=Number(e.width),e.height=Number(e.height),e.margin=Number(e.margin),e.imageOptions=Object.assign(Object.assign({},e.imageOptions),{hideBackgroundDots:Boolean(e.imageOptions.hideBackgroundDots),imageSize:Number(e.imageOptions.imageSize),margin:Number(e.imageOptions.margin)}),e.margin>Math.min(e.width,e.height)&&(e.margin=Math.min(e.width,e.height)),e.dotsOptions=Object.assign({},e.dotsOptions),e.dotsOptions.gradient&&(e.dotsOptions.gradient=y(e.dotsOptions.gradient)),e.cornersSquareOptions&&(e.cornersSquareOptions=Object.assign({},e.cornersSquareOptions),e.cornersSquareOptions.gradient&&(e.cornersSquareOptions.gradient=y(e.cornersSquareOptions.gradient))),e.cornersDotOptions&&(e.cornersDotOptions=Object.assign({},e.cornersDotOptions),e.cornersDotOptions.gradient&&(e.cornersDotOptions.gradient=y(e.cornersDotOptions.gradient))),e.backgroundOptions&&(e.backgroundOptions=Object.assign({},e.backgroundOptions),e.backgroundOptions.gradient&&(e.backgroundOptions.gradient=y(e.backgroundOptions.gradient))),e}var S=i(873),C=i.n(S);function A(t){if(!t)throw new Error("Extension must be defined");"."===t[0]&&(t=t.substring(1));const e={bmp:"image/bmp",gif:"image/gif",ico:"image/vnd.microsoft.icon",jpeg:"image/jpeg",jpg:"image/jpeg",png:"image/png",svg:"image/svg+xml",tif:"image/tiff",tiff:"image/tiff",webp:"image/webp",pdf:"application/pdf"}[t.toLowerCase()];if(!e)throw new Error(`Extension "${t}" is not supported`);return e}class M{constructor(t){(null==t?void 0:t.jsdom)?this._window=new t.jsdom("",{resources:"usable"}).window:this._window=window,this._options=t?x(e(b,t)):b,this.update()}static _clearContainer(t){t&&(t.innerHTML="")}_setupSvg(){if(!this._qr)return;const t=new v(this._options,this._window);this._svg=t.getElement(),this._svgDrawingPromise=t.drawQR(this._qr).then((()=>{var e;this._svg&&(null===(e=this._extension)||void 0===e||e.call(this,t.getElement(),this._options))}))}_setupCanvas(){var t,e;this._qr&&((null===(t=this._options.nodeCanvas)||void 0===t?void 0:t.createCanvas)?(this._nodeCanvas=this._options.nodeCanvas.createCanvas(this._options.width,this._options.height),this._nodeCanvas.width=this._options.width,this._nodeCanvas.height=this._options.height):(this._domCanvas=document.createElement("canvas"),this._domCanvas.width=this._options.width,this._domCanvas.height=this._options.height),this._setupSvg(),this._canvasDrawingPromise=null===(e=this._svgDrawingPromise)||void 0===e?void 0:e.then((()=>{var t;if(!this._svg)return;const e=this._svg,i=(new this._window.XMLSerializer).serializeToString(e),r=btoa(i),n=`data:${A("svg")};base64,${r}`;if(null===(t=this._options.nodeCanvas)||void 0===t?void 0:t.loadImage)return this._options.nodeCanvas.loadImage(n).then((t=>{var e,i;t.width=this._options.width,t.height=this._options.height,null===(i=null===(e=this._nodeCanvas)||void 0===e?void 0:e.getContext("2d"))||void 0===i||i.drawImage(t,0,0)}));{const t=new this._window.Image;return new Promise((e=>{t.onload=()=>{var i,r;null===(r=null===(i=this._domCanvas)||void 0===i?void 0:i.getContext("2d"))||void 0===r||r.drawImage(t,0,0),e()},t.src=n}))}})))}async _getElement(t="png"){if(!this._qr)throw"QR code is empty";return"svg"===t.toLowerCase()?(this._svg&&this._svgDrawingPromise||this._setupSvg(),await this._svgDrawingPromise,this._svg):((this._domCanvas||this._nodeCanvas)&&this._canvasDrawingPromise||this._setupCanvas(),await this._canvasDrawingPromise,this._domCanvas||this._nodeCanvas)}update(t){M._clearContainer(this._container),this._options=t?x(e(this._options,t)):this._options,this._options.data&&(this._qr=C()(this._options.qrOptions.typeNumber,this._options.qrOptions.errorCorrectionLevel),this._qr.addData(this._options.data,this._options.qrOptions.mode||function(t){switch(!0){case/^[0-9]*$/.test(t):return"Numeric";case/^[0-9A-Z $%*+\-./:]*$/.test(t):return"Alphanumeric";default:return"Byte"}}(this._options.data)),this._qr.make(),this._options.type===_?this._setupCanvas():this._setupSvg(),this.append(this._container))}append(t){if(t){if("function"!=typeof t.appendChild)throw"Container should be a single DOM node";this._options.type===_?this._domCanvas&&t.appendChild(this._domCanvas):this._svg&&t.appendChild(this._svg),this._container=t}}applyExtension(t){if(!t)throw"Extension function should be defined.";this._extension=t,this.update()}deleteExtension(){this._extension=void 0,this.update()}async getRawData(t="png"){if(!this._qr)throw"QR code is empty";const e=await this._getElement(t),i=A(t);if(!e)return null;if("svg"===t.toLowerCase()){const t=`\r\n${(new this._window.XMLSerializer).serializeToString(e)}`;return"undefined"==typeof Blob||this._options.jsdom?Buffer.from(t):new Blob([t],{type:i})}return new Promise((t=>{const r=e;if("toBuffer"in r)if("image/png"===i)t(r.toBuffer(i));else if("image/jpeg"===i)t(r.toBuffer(i));else{if("application/pdf"!==i)throw Error("Unsupported extension");t(r.toBuffer(i))}else"toBlob"in r&&r.toBlob(t,i,1)}))}async download(t){if(!this._qr)throw"QR code is empty";if("undefined"==typeof Blob)throw"Cannot download in Node.js, call getRawData instead.";let e="png",i="qr";"string"==typeof t?(e=t,console.warn("Extension is deprecated as argument for 'download' method, please pass object { name: '...', extension: '...' } as argument")):"object"==typeof t&&null!==t&&(t.name&&(i=t.name),t.extension&&(e=t.extension));const r=await this._getElement(e);if(r)if("svg"===e.toLowerCase()){let t=(new XMLSerializer).serializeToString(r);t='\r\n'+t,n(`data:${A(e)};charset=utf-8,${encodeURIComponent(t)}`,`${i}.svg`)}else n(r.toDataURL(A(e)),`${i}.${e}`)}}const $=M})(),r.default})())); +//# sourceMappingURL=qr-code-styling.js.map \ No newline at end of file diff --git a/src/web/routes/admin/account.js b/src/web/routes/admin/account.js index 2ded56a..a01b9ea 100644 --- a/src/web/routes/admin/account.js +++ b/src/web/routes/admin/account.js @@ -8,6 +8,7 @@ module.exports = function registerAccountRoutes(app, deps) { const getAuditUserId = deps.getAuditUserId; const verifyPassword = deps.verifyPassword; const hashPassword = deps.hashPassword; + const validatePasswordStrength = deps.validatePasswordStrength; const createUserSession = deps.createUserSession; const setSessionCookie = deps.setSessionCookie; @@ -52,8 +53,9 @@ module.exports = function registerAccountRoutes(app, deps) { if (!verifyPassword(currentPassword, user)) { return res.status(400).send('Current password is incorrect.'); } - if (!newPassword || newPassword.length < 8) { - return res.status(400).send('New password must be at least 8 characters.'); + const passwordStrengthMessage = validatePasswordStrength(newPassword); + if (passwordStrengthMessage) { + return res.status(400).send(passwordStrengthMessage); } if (newPassword !== confirmPassword) { return res.status(400).send('New passwords do not match.'); @@ -68,7 +70,7 @@ module.exports = function registerAccountRoutes(app, deps) { const token = await createUserSession(pool, user.id); setSessionCookie(res, token); - res.redirect('/dashboard?message=' + encodeURIComponent('Password updated.')); + res.redirect('/account?message=' + encodeURIComponent('Password updated.')); } catch (error) { next(error); } diff --git a/src/web/routes/admin/content.js b/src/web/routes/admin/content.js index 6929831..9611cf5 100644 --- a/src/web/routes/admin/content.js +++ b/src/web/routes/admin/content.js @@ -29,6 +29,8 @@ module.exports = function registerContentRoutes(app, deps) { const requirePermission = deps.requirePermission; const hasAnyPermission = deps.hasAnyPermission; const { buildPagination } = require('#src/web/lib/pagination'); + const { buildDuplicateSlideName, buildDuplicateSlide } = require('#src/web/routes/signage/slides/duplicate'); + const { buildDuplicateCanvasSizeName, buildDuplicateCanvasSize } = require('#src/web/routes/signage/canvas-sizes/duplicate'); const LIST_PAGE_SIZE = 25; const IMAGE_UPLOAD_MAX_BYTES = 100 * 1024 * 1024; @@ -163,6 +165,11 @@ module.exports = function registerContentRoutes(app, deps) { return Number(rows[0] && rows[0].slide_count) || 0; } + async function fetchCanvasSizeUsageCount(canvasSizeId) { + const [rows] = await pool.query('SELECT COUNT(*) AS ref_count FROM c_templates WHERE canvas_size_id = ?', [canvasSizeId]); + return Number(rows[0] && rows[0].ref_count) || 0; + } + async function fetchTemplateRegionUsage(template) { const [slides] = await pool.query('SELECT content_json FROM c_slides WHERE template_id = ?', [template.id]); const usage = new Set(); @@ -188,6 +195,7 @@ module.exports = function registerContentRoutes(app, deps) { return Array.from(usage); } + const { buildDuplicateTemplateName, buildDuplicateTemplate } = require('../signage/templates/duplicate'); async function fetchSlidesByTemplateId(templateId) { const [slides] = await pool.query('SELECT id, thumbnail_path FROM c_slides WHERE template_id = ? ORDER BY id ASC', [templateId]); @@ -201,6 +209,27 @@ module.exports = function registerContentRoutes(app, deps) { .filter((regionKey) => regionKey && !nextKeys.has(regionKey)); } + + app.get('/templates/:id/duplicate', requirePermission('templates.read'), requirePermission('templates.create'), async function (req, res, next) { + try { + const template = await common.fetchTemplateById(pool, Number(req.params.id)); + if (!template) { + return res.status(404).send('Template not found'); + } + + const canvasSizes = await common.fetchCanvasSizesData(pool); + let duplicateName = buildDuplicateTemplateName(template.name); + let duplicateIndex = 2; + while (await common.fetchDuplicateName(pool, 'c_templates', duplicateName)) { + duplicateName = buildDuplicateTemplateName(template.name) + ' (' + duplicateIndex + ')'; + duplicateIndex += 1; + } + + res.send(pages.renderTemplateAddPage(buildDuplicateTemplate(template, duplicateName), req.query.message ? String(req.query.message) : 'Review the copied values and save when ready.', canvasSizes.canvasSizes, req.currentUser)); + } catch (error) { + next(error); + } + }); async function getTemplateRegionDeleteBlockMessage(template, nextRegions) { const removedRegionKeys = getRemovedTemplateRegionKeys(template && template.regions ? template.regions : [], nextRegions); if (!removedRegionKeys.length) { @@ -306,6 +335,27 @@ module.exports = function registerContentRoutes(app, deps) { } }); + app.get('/slides/:id/duplicate', requirePermission('slides.read'), requirePermission('slides.create'), async function (req, res, next) { + try { + const slide = await common.fetchSlideById(pool, Number(req.params.id)); + if (!slide) { + return res.status(404).send('Slide not found'); + } + + const data = await fetchSlideFormData(); + let duplicateName = buildDuplicateSlideName(slide.title); + let duplicateIndex = 2; + while (await common.fetchDuplicateName(pool, 'c_slides', duplicateName, null, 'title')) { + duplicateName = buildDuplicateSlideName(slide.title) + ' (' + duplicateIndex + ')'; + duplicateIndex += 1; + } + + res.send(pages.renderSlideAddPage(buildDuplicateSlide(slide, duplicateName), data, req.query.message ? String(req.query.message) : 'Review the copied values and save when ready.', req.currentUser)); + } catch (error) { + next(error); + } + }); + app.get('/slides/:id/edit', requirePermission('slides.update'), async function (req, res, next) { try { const slide = await common.fetchSlideById(pool, Number(req.params.id)); @@ -342,12 +392,16 @@ module.exports = function registerContentRoutes(app, deps) { try { const uploadPaths = Array.isArray(req.body && req.body.uploadPaths) ? req.body.uploadPaths - : Array.isArray(req.body && req.body.paths) - ? req.body.paths + : req.body && req.body.uploadPaths + ? [req.body.uploadPaths] : []; + if (!uploadPaths.length) { + return res.status(400).json({ error: 'No upload paths were provided.' }); + } + await removeUnusedUploadFiles(pool, deps.uploadDir, uploadPaths); - res.json({ ok: true }); + res.sendStatus(204); } catch (error) { next(error); } @@ -639,6 +693,26 @@ module.exports = function registerContentRoutes(app, deps) { res.send(pages.renderCanvasSizeAddPage(null, req.query.message ? String(req.query.message) : '', req.currentUser)); }); + app.get('/canvas-sizes/:id/duplicate', requirePermission('canvas-sizes.read'), requirePermission('canvas-sizes.create'), async function (req, res, next) { + try { + const canvasSize = await common.fetchCanvasSizeById(pool, Number(req.params.id)); + if (!canvasSize) { + return res.status(404).send('Canvas size not found'); + } + + let duplicateName = buildDuplicateCanvasSizeName(canvasSize.name); + let duplicateIndex = 2; + while (await common.fetchDuplicateName(pool, 'c_canvas_sizes', duplicateName)) { + duplicateName = buildDuplicateCanvasSizeName(canvasSize.name) + ' (' + duplicateIndex + ')'; + duplicateIndex += 1; + } + + res.send(pages.renderCanvasSizeAddPage(buildDuplicateCanvasSize(canvasSize, duplicateName), req.query.message ? String(req.query.message) : 'Review the copied values and save when ready.', req.currentUser)); + } catch (error) { + next(error); + } + }); + app.post('/canvas-sizes', requirePermission('canvas-sizes.create'), async function (req, res, next) { try { const payload = common.buildCanvasSizePayload(req, null); @@ -646,7 +720,7 @@ module.exports = function registerContentRoutes(app, deps) { return res.redirect('/canvas-sizes/new?message=' + encodeURIComponent('A canvas size with that name already exists.')); } if (await canvasSizeExists(payload.width, payload.height)) { - return res.redirect('/canvas-sizes/new?message=' + encodeURIComponent('That canvas size already exists.')); + return res.status(400).send('That canvas size already exists.'); } const actorId = getAuditUserId(req); const [result] = await pool.query('INSERT INTO c_canvas_sizes (name, width, height, created_by, modified_by) VALUES (?, ?, ?, ?, ?)', [payload.name, payload.width, payload.height, actorId, actorId]); @@ -666,8 +740,7 @@ module.exports = function registerContentRoutes(app, deps) { if (!canvasSize) { return res.status(404).send('Canvas size not found'); } - const [rows] = await pool.query('SELECT COUNT(*) AS ref_count FROM c_templates WHERE canvas_size_id = ?', [canvasSize.id]); - canvasSize.inUse = Number(rows[0] && rows[0].ref_count) > 0; + canvasSize.inUse = (await fetchCanvasSizeUsageCount(canvasSize.id)) > 0; res.send(pages.renderCanvasSizeEditPage(canvasSize, null, req.query.message ? String(req.query.message) : '', req.currentUser)); } catch (error) { next(error); @@ -680,12 +753,16 @@ module.exports = function registerContentRoutes(app, deps) { if (!canvasSize) { return res.status(404).send('Canvas size not found'); } + canvasSize.inUse = (await fetchCanvasSizeUsageCount(canvasSize.id)) > 0; const payload = common.buildCanvasSizePayload(req, canvasSize); + if (canvasSize.inUse && (payload.width !== Number(canvasSize.width) || payload.height !== Number(canvasSize.height))) { + return res.status(400).send('This canvas size is still used by one or more templates, so its dimensions cannot be changed.'); + } if (await common.fetchDuplicateName(pool, 'c_canvas_sizes', payload.name, canvasSize.id)) { return res.redirect('/canvas-sizes/' + canvasSize.id + '/edit?message=' + encodeURIComponent('A canvas size with that name already exists.')); } if (await canvasSizeExists(payload.width, payload.height, canvasSize.id)) { - return res.redirect('/canvas-sizes/' + canvasSize.id + '/edit?message=' + encodeURIComponent('That canvas size already exists.')); + return res.status(400).send('That canvas size already exists.'); } await pool.query('UPDATE c_canvas_sizes SET name = ?, width = ?, height = ?, modified_by = ? WHERE id = ?', [payload.name, payload.width, payload.height, getAuditUserId(req), canvasSize.id]); redirectAfterSave(req, res, '/canvas-sizes', { diff --git a/src/web/routes/admin/manage.js b/src/web/routes/admin/manage.js index 134e53f..bb58dcb 100644 --- a/src/web/routes/admin/manage.js +++ b/src/web/routes/admin/manage.js @@ -14,6 +14,18 @@ module.exports = function registerManageRoutes(app, deps) { const PLAYER_PUBLIC_BASE_URL = deps.playerPublicBaseUrl; const requirePermission = deps.requirePermission; + const SCREEN_NAME_MAX_LENGTH = 255; + const SCREEN_SLUG_MAX_LENGTH = 255; + + function readLimitedText(value, maxLength) { + const text = String(value || '').trim(); + const limit = Number(maxLength); + if (!Number.isFinite(limit) || limit < 1 || text.length <= limit) { + return text; + } + return text.slice(0, limit); + } + async function fetchAllScreenSlugs() { const [rows] = await pool.query('SELECT slug FROM d_screens ORDER BY slug ASC'); return (rows || []) @@ -85,14 +97,18 @@ module.exports = function registerManageRoutes(app, deps) { app.post('/screens', requirePermission('screens.create'), async function (req, res, next) { try { - const name = String(req.body.name || '').trim(); + const name = typeof common.validateMaxLength === 'function' + ? common.validateMaxLength(req.body.name || '', SCREEN_NAME_MAX_LENGTH, 'Screen name') + : readLimitedText(req.body.name || '', 255); if (!name) { return res.status(400).send('Screen name is required.'); } if (await common.fetchDuplicateName(pool, 'd_screens', name)) { return res.status(400).send('A screen with that name already exists.'); } - const slugInput = String(req.body.slug || '').trim(); + const slugInput = typeof common.validateMaxLength === 'function' + ? common.validateMaxLength(req.body.slug || '', SCREEN_SLUG_MAX_LENGTH, 'Screen URL') + : readLimitedText(req.body.slug || '', 255); const playlistId = req.body.playlist_id ? Number(req.body.playlist_id) : null; const slug = await common.uniqueScreenSlug(pool, common.slugify(slugInput || name)); const actorId = getAuditUserId(req); @@ -109,7 +125,9 @@ module.exports = function registerManageRoutes(app, deps) { app.post('/screens/:id', requirePermission('screens.update'), async function (req, res, next) { try { - const name = String(req.body.name || '').trim(); + const name = typeof common.validateMaxLength === 'function' + ? common.validateMaxLength(req.body.name || '', SCREEN_NAME_MAX_LENGTH, 'Screen name') + : readLimitedText(req.body.name || '', 255); if (!name) { return res.status(400).send('Screen name is required.'); } @@ -120,7 +138,9 @@ module.exports = function registerManageRoutes(app, deps) { if (await common.fetchDuplicateName(pool, 'd_screens', name, screen.id)) { return res.status(400).send('A screen with that name already exists.'); } - const slugInput = String(req.body.slug || '').trim(); + const slugInput = typeof common.validateMaxLength === 'function' + ? common.validateMaxLength(req.body.slug || '', SCREEN_SLUG_MAX_LENGTH, 'Screen URL') + : readLimitedText(req.body.slug || '', 255); const playlistId = req.body.playlist_id ? Number(req.body.playlist_id) : null; const previousPlaylistId = screen.playlist_id; const slug = await common.uniqueScreenSlug(pool, common.slugify(slugInput || name), screen.id); diff --git a/src/web/routes/admin/rbac.js b/src/web/routes/admin/rbac.js index a424503..5f14e2e 100644 --- a/src/web/routes/admin/rbac.js +++ b/src/web/routes/admin/rbac.js @@ -11,12 +11,17 @@ const normalizePermissionKeys = deps.normalizePermissionKeys; const { buildPagination } = require('../../lib/pagination'); const requirePermission = deps.requirePermission; + const { buildDuplicateRoleName, buildDuplicateRole } = require('../settings/rbac/duplicate'); + + const ROLE_NAME_MAX_LENGTH = 255; + const ROLE_DESCRIPTION_MAX_LENGTH = 255; + const ROLE_KEY_MAX_LENGTH = 100; const LIST_PAGE_SIZE = 25; function slugifyRoleKey(name) { const value = String(name || '').trim().toLowerCase(); - const slug = value.replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, ''); + const slug = value.replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '').slice(0, ROLE_KEY_MAX_LENGTH); return slug || 'role'; } @@ -65,10 +70,12 @@ return (Array.isArray(permissionRows) ? permissionRows : []).map(function (permission) { const definition = permissionDefinitions.get(String(permission.permission_key || '').trim()) || null; return Object.assign({}, permission, { - resourceKey: definition ? definition.sectionKey : String(permission.section_name || '').trim().toLowerCase().replace(/[^a-z0-9]+/g, '-'), - resourceName: definition ? definition.name : permission.section_name, + resourceKey: definition ? definition.resourceKey : String(permission.section_name || '').trim().toLowerCase().replace(/[^a-z0-9]+/g, '-'), + resourceName: definition ? definition.resourceName : permission.section_name, categoryName: definition ? definition.sectionName : permission.section_name, sectionOrder: definition ? definition.sectionOrder : 999, + resourceOrder: definition ? Number(definition.resourceOrder) || 999 : 999, + permissionOrder: definition ? Number(definition.permissionOrder) || 999 : 999, actionKey: definition ? definition.actionKey : 'read', actionLabel: definition ? definition.actionName : getActionLabel(permission.actionKey), isSelected: selectedKeys.has(String(permission.permission_key || '').trim()) @@ -107,9 +114,8 @@ groups.forEach(function (group) { group.permissions.sort(function (left, right) { - const actionOrder = { create: 1, read: 2, update: 3, edit: 3, delete: 4, allow: 5 }; - const leftOrder = actionOrder[String(left.actionKey || '').trim()] || 99; - const rightOrder = actionOrder[String(right.actionKey || '').trim()] || 99; + const leftOrder = Number(left.permissionOrder) || 999; + const rightOrder = Number(right.permissionOrder) || 999; if (leftOrder !== rightOrder) { return leftOrder - rightOrder; } @@ -136,8 +142,8 @@ }); return { formValues: { - name: String(formValues && formValues.name || '').trim(), - description: String(formValues && formValues.description || '').trim() + name: common.validateMaxLength(formValues && formValues.name || '', ROLE_NAME_MAX_LENGTH, 'Role name'), + description: common.validateMaxLength(formValues && formValues.description || '', ROLE_DESCRIPTION_MAX_LENGTH, 'Role description') }, permissionGroups: buildPermissionGroups(mapPermissionsForView(permissionRows, selectedPermissionKeys)), users: mapUsersForView(data.users, selectedUserIds), @@ -197,10 +203,39 @@ }); }); + app.get('/rbac/:id/duplicate', requirePermission('rbac.read'), requirePermission('rbac.create'), async function (req, res, next) { + try { + const roleId = Number(req.params.id); + if (!Number.isInteger(roleId) || roleId <= 0) { + return res.status(400).send('Invalid role.'); + } + + const role = await rbacData.fetchRoleById(pool, roleId); + if (!role) { + return res.status(404).send('Role not found.'); + } + + const page = Math.max(1, Math.floor(Number(req.query.page) || 1)); + const search = common.getSearchQuery(req); + const sort = common.getSortQuery(req); + const direction = common.getSortDirectionQuery(req); + const currentUserId = req.currentUser ? Number(req.currentUser.id) : null; + const permissionKeys = await rbacData.fetchRolePermissionKeys(pool, roleId); + const viewModel = await buildRoleCreateViewModel({ + name: buildDuplicateRoleName(role.name), + description: buildDuplicateRole(role).description + }, permissionKeys, [], page, search, sort, direction, currentUserId); + + res.send(pages.renderRbacAddPage('Review the copied values and save when ready.', req.currentUser, viewModel.formValues, viewModel.permissionGroups, viewModel.users, viewModel.pagination, 'primary')); + } catch (error) { + next(error); + } + }); + app.post('/rbac', requirePermission('rbac.create'), async function (req, res, next) { try { - const name = String(req.body.name || '').trim(); - const description = String(req.body.description || '').trim(); + const name = common.validateMaxLength(req.body.name || '', ROLE_NAME_MAX_LENGTH, 'Role name'); + const description = common.validateMaxLength(req.body.description || '', ROLE_DESCRIPTION_MAX_LENGTH, 'Role description'); const selectedUserIds = Object.prototype.hasOwnProperty.call(req.body || {}, 'users_present') ? readArrayField(req.body, ['user_ids[]', 'user_ids']) : []; @@ -311,8 +346,8 @@ return res.status(404).send('Role not found.'); } - const name = String(req.body.name || '').trim(); - const description = String(req.body.description || '').trim(); + const name = common.validateMaxLength(req.body.name || '', ROLE_NAME_MAX_LENGTH, 'Role name'); + const description = common.validateMaxLength(req.body.description || '', ROLE_DESCRIPTION_MAX_LENGTH, 'Role description'); const shouldSyncPermissions = Object.prototype.hasOwnProperty.call(req.body || {}, 'permissions_present'); const shouldSyncUsers = Object.prototype.hasOwnProperty.call(req.body || {}, 'users_present'); const selectedPermissionKeys = shouldSyncPermissions diff --git a/src/web/routes/admin/users.js b/src/web/routes/admin/users.js index bbc989a..0fa2724 100644 --- a/src/web/routes/admin/users.js +++ b/src/web/routes/admin/users.js @@ -7,10 +7,15 @@ const formatDashboardDate = deps.formatDashboardDate; const getAuditUserId = deps.getAuditUserId; const hashPassword = deps.hashPassword; + const validatePasswordStrength = deps.validatePasswordStrength; const readArrayField = deps.readArrayField; const rbacData = deps.rbacData; const { buildPagination } = require('../../lib/pagination'); const requirePermission = deps.requirePermission; + const { buildDuplicateUserName, buildDuplicateUser } = require('../settings/users/duplicate'); + + const USER_NAME_MAX_LENGTH = 255; + const USER_USERNAME_MAX_LENGTH = 255; const LIST_PAGE_SIZE = 25; @@ -43,10 +48,6 @@ return Number.isInteger(roleId) && roleId > 0; }))); - if (!normalizedRoleIds.length) { - return { ok: false, message: 'Select at least one role.' }; - } - if (normalizedRoleIds.some(function (roleId) { return !validRoleIds.has(roleId); })) { @@ -88,6 +89,38 @@ }); }); + app.get('/users/:id/duplicate', requirePermission('users.read'), requirePermission('users.create'), async function (req, res, next) { + try { + const userId = Number(req.params.id); + if (!Number.isInteger(userId) || userId <= 0) { + return res.status(400).send('Invalid user.'); + } + + const user = await rbacData.fetchUserWithRoles(pool, userId); + if (!user) { + return res.status(404).send('User not found.'); + } + if (Number(req.currentUser.id) === userId) { + return res.redirect('/users?message=' + encodeURIComponent('Use Add user to create another login for yourself.')); + } + + const roles = await fetchRoleOptions(); + const duplicateUser = buildDuplicateUser(user, buildDuplicateUserName(user.name)); + + res.send(pages.renderUsersAddPage( + 'Review the copied values and save when ready.', + req.currentUser, + mapRolesForForm(roles, user.roleIds), + { + name: duplicateUser.name + }, + 'primary' + )); + } catch (error) { + next(error); + } + }); + app.get('/users/:id/edit', requirePermission('users.update'), async function (req, res, next) { try { const userId = Number(req.params.id); @@ -122,10 +155,11 @@ app.post('/users', requirePermission('users.create'), async function (req, res, next) { const connection = await pool.getConnection(); try { - const name = String(req.body.name || '').trim(); - const username = String(req.body.username || user.username || '').trim(); + const name = common.validateMaxLength(req.body.name || '', USER_NAME_MAX_LENGTH, 'Name'); + const username = common.validateMaxLength(req.body.username || '', USER_USERNAME_MAX_LENGTH, 'Username'); const password = String(req.body.password || ''); const confirmPassword = String(req.body.confirm_password || ''); + const saveAction = String(req.body.save_action || req.body.action || '').trim().toLowerCase(); const selectedRoleIds = readArrayField(req.body, ['role_ids[]', 'role_ids']); const roleCheck = await validateRoleIds(selectedRoleIds); const formValues = { @@ -144,8 +178,9 @@ if (!username) { return renderValidationError('Username is required.'); } - if (!password || password.length < 8) { - return renderValidationError('Password must be at least 8 characters.'); + const passwordStrengthMessage = validatePasswordStrength(password); + if (passwordStrengthMessage) { + return renderValidationError(passwordStrengthMessage); } if (password !== confirmPassword) { return renderValidationError('Passwords do not match.'); @@ -171,6 +206,9 @@ ); await rbacData.syncUserRoles(connection, result.insertId, roleCheck.roleIds); await connection.commit(); + if (saveAction === 'new') { + return res.redirect('/users/new?message=' + encodeURIComponent('User created.')); + } res.redirect('/users/' + result.insertId + '/edit?message=' + encodeURIComponent('User created.')); } catch (error) { try { @@ -216,11 +254,12 @@ const connection = await pool.getConnection(); try { const userId = Number(req.params.id); - const name = String(req.body.name || '').trim(); + const name = common.validateMaxLength(req.body.name || '', USER_NAME_MAX_LENGTH, 'Name'); const selectedRoleIds = readArrayField(req.body, ['role_ids[]', 'role_ids']); const password = String(req.body.password || ''); const confirmPassword = String(req.body.confirm_password || ''); const shouldUpdatePassword = Boolean(password || confirmPassword); + const saveAction = String(req.body.save_action || req.body.action || '').trim().toLowerCase(); if (!Number.isInteger(userId) || userId <= 0) { return res.status(400).send('Invalid user.'); @@ -234,7 +273,7 @@ return res.status(404).send('User not found.'); } - const username = String(req.body.username || user.username || '').trim(); + const username = common.validateMaxLength(req.body.username || user.username || '', USER_USERNAME_MAX_LENGTH, 'Username'); const [countRows] = await pool.query('SELECT COUNT(*) AS user_count FROM a_users'); const canDelete = !countRows.length || Number(countRows[0].user_count) > 1; @@ -256,8 +295,11 @@ if (!username) { return renderValidationError('Username is required.'); } - if (shouldUpdatePassword && (!password || password.length < 8)) { - return renderValidationError('Password must be at least 8 characters.'); + if (shouldUpdatePassword) { + const passwordStrengthMessage = validatePasswordStrength(password); + if (passwordStrengthMessage) { + return renderValidationError(passwordStrengthMessage); + } } if (shouldUpdatePassword && password !== confirmPassword) { return renderValidationError('Passwords do not match.'); @@ -290,6 +332,9 @@ await connection.query('DELETE FROM a_sessions WHERE user_id = ?', [userId]); } await connection.commit(); + if (saveAction === 'new') { + return res.redirect('/users/new?message=' + encodeURIComponent('User updated.')); + } res.redirect('/users?message=' + encodeURIComponent('User updated.')); } catch (error) { try { @@ -308,6 +353,7 @@ const userId = Number(req.params.id); const password = String(req.body.password || ''); const confirmPassword = String(req.body.confirm_password || ''); + const editUrl = '/users/' + userId + '/edit'; if (!Number.isInteger(userId) || userId <= 0) { return res.status(400).send('Invalid user.'); @@ -315,11 +361,12 @@ if (Number(req.currentUser.id) === userId) { return res.redirect('/account?message=' + encodeURIComponent('Use My Account to change your own password.')); } - if (!password || password.length < 8) { - return res.redirect('/users?message=' + encodeURIComponent('Password must be at least 8 characters.')); + const passwordStrengthMessage = validatePasswordStrength(password); + if (passwordStrengthMessage) { + return res.redirect(editUrl + '?message=' + encodeURIComponent(passwordStrengthMessage)); } if (password !== confirmPassword) { - return res.redirect('/users?message=' + encodeURIComponent('Passwords do not match.')); + return res.redirect(editUrl + '?message=' + encodeURIComponent('Passwords do not match.')); } const [rows] = await pool.query('SELECT id FROM a_users WHERE id = ? LIMIT 1', [userId]); @@ -333,7 +380,7 @@ [passwordRecord.hash, passwordRecord.salt, passwordRecord.iterations, getAuditUserId(req), userId] ); await pool.query('DELETE FROM a_sessions WHERE user_id = ?', [userId]); - res.redirect('/users?message=' + encodeURIComponent('Password updated.')); + res.redirect(editUrl + '?message=' + encodeURIComponent('Password updated.')); } catch (error) { next(error); } diff --git a/src/web/routes/auth/index.js b/src/web/routes/auth/index.js index c4aebf0..0c41df8 100644 --- a/src/web/routes/auth/index.js +++ b/src/web/routes/auth/index.js @@ -1,5 +1,7 @@ // Authentication route registration for the web app. +const { normalizeReturnToPath, getRequestOrigin } = require('../../lib/auth/session'); + module.exports = function registerAuthRoutes(app, deps) { const pool = deps.pool; const pages = deps.pages; @@ -13,19 +15,28 @@ module.exports = function registerAuthRoutes(app, deps) { const verifyPassword = deps.verifyPassword; const sessionCookieName = deps.sessionCookieName; + function getReturnTo(req) { + return normalizeReturnToPath(req && (req.query && req.query.returnTo || req.body && req.body.returnTo), getRequestOrigin(req)); + } + + function buildLoginRedirect(returnTo) { + return returnTo ? '/login?returnTo=' + encodeURIComponent(returnTo) : '/login'; + } + app.get('/', function (req, res) { res.redirect(req.currentUser ? '/dashboard' : '/login'); }); app.get('/login', function (req, res) { + const returnTo = getReturnTo(req); if (req.currentUser) { - return res.redirect('/dashboard'); + return res.redirect(returnTo || '/dashboard'); } const message = typeof consumeAuthMessageCookie === 'function' ? consumeAuthMessageCookie(req, res) : (req.query.message ? String(req.query.message) : ''); - res.send(pages.renderLoginPage(message)); + res.send(pages.renderLoginPage(message, returnTo)); }); app.post('/login', async function (req, res, next) { @@ -39,17 +50,19 @@ module.exports = function registerAuthRoutes(app, deps) { const [rows] = await pool.query('SELECT id, name, username, password_hash, password_salt, password_iterations FROM a_users WHERE username = ? LIMIT 1', [username]); const user = rows[0] || null; if (!user || !verifyPassword(password, user)) { + const returnTo = getReturnTo(req); if (typeof setAuthMessageCookie === 'function') { setAuthMessageCookie(res, 'Invalid username or password.'); - return res.redirect('/login'); + return res.redirect(buildLoginRedirect(returnTo)); } - return res.status(401).send(pages.renderLoginPage('Invalid username or password.')); + return res.status(401).send(pages.renderLoginPage('Invalid username or password.', returnTo)); } + const returnTo = getReturnTo(req); const token = await createUserSession(pool, user.id); setSessionCookie(res, token); - res.redirect('/dashboard'); + res.redirect(returnTo || '/dashboard'); } catch (error) { next(error); } diff --git a/src/web/routes/auth/login.js b/src/web/routes/auth/login.js index 409a0ad..1d4a08d 100644 --- a/src/web/routes/auth/login.js +++ b/src/web/routes/auth/login.js @@ -2,12 +2,13 @@ const { renderView } = require('../../view'); -module.exports = function renderLoginPage(message) { +module.exports = function renderLoginPage(message, returnTo) { return renderView('auth/login', { title: 'Sign in', authShell: true, bodyClass: 'login-page-body', message: message || '', + returnTo: returnTo || '', messageVariant: 'warning' }); }; \ No newline at end of file diff --git a/src/web/routes/data-sources/api-sources/duplicate.js b/src/web/routes/data-sources/api-sources/duplicate.js new file mode 100644 index 0000000..ddc86e2 --- /dev/null +++ b/src/web/routes/data-sources/api-sources/duplicate.js @@ -0,0 +1,31 @@ +// API source duplication helpers. + +function buildDuplicateApiSourceName(sourceName) { + const baseName = 'Copy of ' + String(sourceName || '').trim(); + return baseName; +} + +function buildDuplicateApiSource(apiSource, duplicateName) { + return Object.assign({}, apiSource, { + id: null, + name: duplicateName, + apiUrl: apiSource.api_url || '', + lastPulledAt: null, + lastPullError: '', + lastResponseStatus: null, + lastResponseContentType: '', + lastResponseJson: '', + authMethod: apiSource.auth_method || 'none', + authUsername: apiSource.auth_username || '', + authPassword: apiSource.auth_password || '', + authBearerToken: apiSource.auth_bearer_token || '', + authHeaderName: apiSource.auth_header_name || 'X-API-Key', + authHeaderValue: apiSource.auth_header_value || '', + itemsPath: apiSource.items_path || '' + }); +} + +module.exports = { + buildDuplicateApiSourceName, + buildDuplicateApiSource +}; \ No newline at end of file diff --git a/src/web/routes/data-sources/api-sources/form-view-model.js b/src/web/routes/data-sources/api-sources/form-view-model.js index 8bf6c73..82859db 100644 --- a/src/web/routes/data-sources/api-sources/form-view-model.js +++ b/src/web/routes/data-sources/api-sources/form-view-model.js @@ -35,8 +35,9 @@ function buildApiSourceFormViewModel(apiSource, message, currentUser, options, i inUse: Boolean(viewApiSource.inUse), lastResponseJson: viewOptions.lastResponseJson || viewApiSource.lastResponseJson || '', lastPullError: viewOptions.lastPullError || viewApiSource.lastPullError || '', + messageVariant: viewOptions.messageVariant || '', isEdit: Boolean(isEdit), - showSaveSecondaryActions: Boolean(isEdit), + showSaveSecondaryActions: true, deleteDisabled: !isEdit || Boolean(viewApiSource.inUse), formAction: isEdit && viewApiSource.id ? '/data-sources/api-sources/' + viewApiSource.id : '/data-sources/api-sources', formAttrs: isEdit && viewApiSource.id ? 'data-async-save data-async-save-refresh-target="#api-source-response-panel" data-async-save-refresh-state-url="/data-sources/api-sources/' + viewApiSource.id + '/state" data-async-save-close-url="/data-sources/api-sources" data-async-save-new-url="/data-sources/api-sources/new"' : 'data-async-save data-async-save-close-url="/data-sources/api-sources" data-async-save-new-redirect="response-url" data-async-save-new-url="/data-sources/api-sources/new"', diff --git a/src/web/routes/data-sources/api-sources/routes.js b/src/web/routes/data-sources/api-sources/routes.js index 4045c89..ae1ae8c 100644 --- a/src/web/routes/data-sources/api-sources/routes.js +++ b/src/web/routes/data-sources/api-sources/routes.js @@ -4,6 +4,7 @@ const { buildPagination } = require('../../../lib/pagination'); const renderApiSourcesPage = require('./list'); const renderApiSourceAddPage = require('./add'); const renderApiSourceEditPage = require('./edit'); +const { buildDuplicateApiSourceName, buildDuplicateApiSource } = require('./duplicate'); function toIsoTimestamp(value) { if (!value) { @@ -185,6 +186,29 @@ module.exports = function registerApiSourceRoutes(app, deps) { } }); + app.get('/data-sources/api-sources/:id/duplicate', requirePermission('api-sources.read'), requirePermission('api-sources.create'), async function (req, res, next) { + try { + const apiSource = await common.fetchApiSourceById(pool, Number(req.params.id)); + if (!apiSource) { + return res.status(404).send('API source not found'); + } + + let duplicateName = buildDuplicateApiSourceName(apiSource.name); + let duplicateIndex = 2; + while (await common.fetchDuplicateName(pool, 'i_api_sources', duplicateName)) { + duplicateName = buildDuplicateApiSourceName(apiSource.name) + ' (' + duplicateIndex + ')'; + duplicateIndex += 1; + } + + res.send(renderApiSourceAddPage(buildDuplicateApiSource(apiSource, duplicateName), req.query.message ? String(req.query.message) : 'Review the copied values and save when ready.', req.currentUser, { + messageVariant: 'info', + showSaveSecondaryActions: true + })); + } catch (error) { + next(error); + } + }); + app.get('/data-sources/api-sources/:id/state', requirePermission('api-sources.update'), function (req, res, next) { sendRefreshTaskState(req, res, dataSourceTasks, Number(req.params.id)).catch(next); }); diff --git a/src/web/routes/data-sources/rss-feeds/duplicate.js b/src/web/routes/data-sources/rss-feeds/duplicate.js new file mode 100644 index 0000000..f7b1fa2 --- /dev/null +++ b/src/web/routes/data-sources/rss-feeds/duplicate.js @@ -0,0 +1,26 @@ +// RSS feed duplication helpers. + +function buildDuplicateRssFeedName(feedName) { + const baseName = 'Copy of ' + String(feedName || '').trim(); + return baseName; +} + +function buildDuplicateRssFeed(rssFeed, duplicateName) { + return Object.assign({}, rssFeed, { + id: null, + name: duplicateName, + feedUrl: rssFeed.feed_url || '', + lastPulledAt: null, + pullError: '', + pulledItems: [], + updateIntervalValue: rssFeed.update_interval_value, + updateIntervalUnit: rssFeed.update_interval_unit || 'minutes', + itemLimit: rssFeed.item_limit, + feedUrlValue: rssFeed.feed_url || '' + }); +} + +module.exports = { + buildDuplicateRssFeedName, + buildDuplicateRssFeed +}; \ No newline at end of file diff --git a/src/web/routes/data-sources/rss-feeds/form-view-model.js b/src/web/routes/data-sources/rss-feeds/form-view-model.js index e9e139e..4f69126 100644 --- a/src/web/routes/data-sources/rss-feeds/form-view-model.js +++ b/src/web/routes/data-sources/rss-feeds/form-view-model.js @@ -24,8 +24,9 @@ function buildRssFeedFormViewModel(rssFeed, message, currentUser, options, isEdi inUse: Boolean(viewRssFeed.inUse), pulledItems: viewOptions.pulledItems || viewRssFeed.pulledItems || [], pullError: viewOptions.pullError || viewRssFeed.pullError || '', + messageVariant: viewOptions.messageVariant || '', isEdit: Boolean(isEdit), - showSaveSecondaryActions: Boolean(isEdit), + showSaveSecondaryActions: true, deleteDisabled: !isEdit || Boolean(viewRssFeed.inUse), formAction: isEdit && viewRssFeed.id ? '/data-sources/rss-feeds/' + viewRssFeed.id : '/data-sources/rss-feeds', formAttrs: isEdit && viewRssFeed.id ? 'data-async-save data-async-save-refresh-target="#rss-feed-items-panel" data-async-save-refresh-state-url="/data-sources/rss-feeds/' + viewRssFeed.id + '/state" data-async-save-close-url="/data-sources/rss-feeds" data-async-save-new-url="/data-sources/rss-feeds/new"' : 'data-async-save data-async-save-close-url="/data-sources/rss-feeds" data-async-save-new-redirect="response-url" data-async-save-new-url="/data-sources/rss-feeds/new"', diff --git a/src/web/routes/data-sources/rss-feeds/routes.js b/src/web/routes/data-sources/rss-feeds/routes.js index f40a493..59e98f2 100644 --- a/src/web/routes/data-sources/rss-feeds/routes.js +++ b/src/web/routes/data-sources/rss-feeds/routes.js @@ -4,6 +4,7 @@ const { buildPagination } = require('../../../lib/pagination'); const renderRssFeedsPage = require('./list'); const renderRssFeedAddPage = require('./add'); const renderRssFeedEditPage = require('./edit'); +const { buildDuplicateRssFeedName, buildDuplicateRssFeed } = require('./duplicate'); async function getDataSourceUsageMaps(pool, common) { const [slides] = await pool.query('SELECT content_json FROM c_slides WHERE content_json IS NOT NULL'); @@ -155,6 +156,29 @@ module.exports = function registerRssFeedRoutes(app, deps) { } }); + app.get('/data-sources/rss-feeds/:id/duplicate', requirePermission('rss-feeds.read'), requirePermission('rss-feeds.create'), async function (req, res, next) { + try { + const rssFeed = await common.fetchRssFeedById(pool, Number(req.params.id)); + if (!rssFeed) { + return res.status(404).send('RSS feed not found'); + } + + let duplicateName = buildDuplicateRssFeedName(rssFeed.name); + let duplicateIndex = 2; + while (await common.fetchDuplicateName(pool, 'i_rss_feeds', duplicateName)) { + duplicateName = buildDuplicateRssFeedName(rssFeed.name) + ' (' + duplicateIndex + ')'; + duplicateIndex += 1; + } + + res.send(renderRssFeedAddPage(buildDuplicateRssFeed(rssFeed, duplicateName), req.query.message ? String(req.query.message) : 'Review the copied values and save when ready.', req.currentUser, { + messageVariant: 'info', + showSaveSecondaryActions: true + })); + } catch (error) { + next(error); + } + }); + app.get('/data-sources/rss-feeds/:id/state', requirePermission('rss-feeds.update'), function (req, res, next) { sendRefreshTaskState(req, res, dataSourceTasks, Number(req.params.id)).catch(next); }); diff --git a/src/web/routes/data-sources/timetables/add.js b/src/web/routes/data-sources/timetables/add.js index 3967a33..7768f5c 100644 --- a/src/web/routes/data-sources/timetables/add.js +++ b/src/web/routes/data-sources/timetables/add.js @@ -3,6 +3,6 @@ const { renderView } = require('../../../view'); const { buildTimetableGroupFormViewModel } = require('./form-view-model'); -module.exports = function renderTimetableGroupAddPage(timetableGroup, timetableEntries, message, currentUser) { - return renderView('data-sources/timetables/form', buildTimetableGroupFormViewModel(timetableGroup, timetableEntries, message, currentUser, false)); +module.exports = function renderTimetableGroupAddPage(timetableGroup, timetableEntries, message, currentUser, options) { + return renderView('data-sources/timetables/form', buildTimetableGroupFormViewModel(timetableGroup, timetableEntries, message, currentUser, false, options)); }; \ No newline at end of file diff --git a/src/web/routes/data-sources/timetables/duplicate.js b/src/web/routes/data-sources/timetables/duplicate.js new file mode 100644 index 0000000..dedf879 --- /dev/null +++ b/src/web/routes/data-sources/timetables/duplicate.js @@ -0,0 +1,27 @@ +// Timetable duplication helpers. + +function buildDuplicateTimetableGroupName(groupName) { + const baseName = 'Copy of ' + String(groupName || '').trim(); + return baseName; +} + +function buildDuplicateTimetableGroup(timetableGroup, duplicateName) { + return Object.assign({}, timetableGroup, { + id: null, + name: duplicateName, + shortDescription: timetableGroup.short_description || '' + }); +} + +function buildDuplicateTimetableEntry(timetableEntry) { + return Object.assign({}, timetableEntry, { + id: null, + schedule_group_id: null + }); +} + +module.exports = { + buildDuplicateTimetableGroupName, + buildDuplicateTimetableGroup, + buildDuplicateTimetableEntry +}; \ No newline at end of file diff --git a/src/web/routes/data-sources/timetables/form-view-model.js b/src/web/routes/data-sources/timetables/form-view-model.js index 2f0acdb..947f4c2 100644 --- a/src/web/routes/data-sources/timetables/form-view-model.js +++ b/src/web/routes/data-sources/timetables/form-view-model.js @@ -26,8 +26,9 @@ function formatDateTimeLocalValue(value) { return `${year}-${month}-${day}T${hours}:${minutes}`; } -function buildTimetableGroupFormViewModel(timetableGroup, timetableEntries, message, currentUser, isEdit) { +function buildTimetableGroupFormViewModel(timetableGroup, timetableEntries, message, currentUser, isEdit, options) { const viewTimetableGroup = Object.assign(buildDefaultTimetableGroup(), timetableGroup || {}); + const viewOptions = options || {}; const viewTimetableEntries = Array.isArray(timetableEntries) && timetableEntries.length ? timetableEntries.map(function (entry) { return Object.assign({}, entry, { @@ -42,11 +43,14 @@ function buildTimetableGroupFormViewModel(timetableGroup, timetableEntries, mess active: 'timetables', message: message, currentUser: currentUser || null, + messageVariant: viewOptions.messageVariant || '', isEdit: Boolean(isEdit), timetableGroup: viewTimetableGroup, timetableEntries: viewTimetableEntries, inUse: Boolean(viewTimetableGroup.inUse), - showSaveSecondaryActions: Boolean(isEdit), + showSaveSecondaryActions: true, + cancelConfirmMessage: "You've made changes. Are you sure you want to leave this page?", + deleteConfirmMessage: isEdit ? 'Delete this timetable group?' : '', deleteDisabled: !isEdit || Boolean(viewTimetableGroup.inUse), formAction: isEdit && viewTimetableGroup.id ? '/data-sources/timetables/' + viewTimetableGroup.id : '/data-sources/timetables', formAttrs: 'data-async-save' + (isEdit ? ' data-async-save-close-url="/data-sources/timetables"' : ' data-async-save-new-redirect="response-url"') + ' data-async-save-new-url="/data-sources/timetables/new"', diff --git a/src/web/routes/data-sources/timetables/routes.js b/src/web/routes/data-sources/timetables/routes.js index 2fbfa00..72164ca 100644 --- a/src/web/routes/data-sources/timetables/routes.js +++ b/src/web/routes/data-sources/timetables/routes.js @@ -4,6 +4,7 @@ const { buildPagination } = require('../../../lib/pagination'); const renderTimetableGroupsPage = require('./list'); const renderTimetableGroupAddPage = require('./add'); const renderTimetableGroupEditPage = require('./edit'); +const { buildDuplicateTimetableGroupName, buildDuplicateTimetableGroup, buildDuplicateTimetableEntry } = require('./duplicate'); async function getDataSourceUsageMaps(pool, common) { const [slides] = await pool.query('SELECT content_json FROM c_slides WHERE content_json IS NOT NULL'); @@ -25,8 +26,8 @@ async function getDataSourceUsageMaps(pool, common) { return; } - if (Object.prototype.hasOwnProperty.call(value, 'schedule_group_id')) { - const timetableGroupId = Number(value.schedule_group_id); + if (Object.prototype.hasOwnProperty.call(value, 'timetable_group_id')) { + const timetableGroupId = Number(value.timetable_group_id); if (Number.isFinite(timetableGroupId)) { timetableGroupIds.add(timetableGroupId); } @@ -176,6 +177,32 @@ module.exports = function registerTimetableRoutes(app, deps) { } }); + + app.get('/data-sources/timetables/:id/duplicate', requirePermission('timetables.read'), requirePermission('timetables.create'), async function (req, res, next) { + try { + const timetableGroup = await common.fetchTimetableGroupById(pool, Number(req.params.id)); + if (!timetableGroup) { + return res.status(404).send('Timetable group not found'); + } + + const timetableEntries = typeof common.fetchTimetableEntriesByGroupId === 'function' + ? await common.fetchTimetableEntriesByGroupId(pool, timetableGroup.id) + : []; + + let duplicateName = buildDuplicateTimetableGroupName(timetableGroup.name); + let duplicateIndex = 2; + while (await common.fetchDuplicateName(pool, 'i_schedule_groups', duplicateName)) { + duplicateName = buildDuplicateTimetableGroupName(timetableGroup.name) + ' (' + duplicateIndex + ')'; + duplicateIndex += 1; + } + + res.send(renderTimetableGroupAddPage(buildDuplicateTimetableGroup(timetableGroup, duplicateName), timetableEntries.map(buildDuplicateTimetableEntry), req.query.message ? String(req.query.message) : 'Review the copied values and save when ready.', req.currentUser, { + messageVariant: 'info' + })); + } catch (error) { + next(error); + } + }); app.post('/data-sources/timetables', requirePermission('timetables.create'), async function (req, res, next) { const connection = await pool.getConnection(); try { diff --git a/src/web/routes/register.js b/src/web/routes/register.js index d380f82..53ae840 100644 --- a/src/web/routes/register.js +++ b/src/web/routes/register.js @@ -59,6 +59,7 @@ function registerAuthAndAccountRoutes(app, deps) { getAuditUserId: deps.getAuditUserId, verifyPassword: deps.verifyPassword, hashPassword: deps.hashPassword, + validatePasswordStrength: deps.validatePasswordStrength, createUserSession: deps.createUserSession, setSessionCookie: deps.setSessionCookie }); @@ -70,6 +71,7 @@ function registerAuthAndAccountRoutes(app, deps) { formatDashboardDate: deps.formatDashboardDate, getAuditUserId: deps.getAuditUserId, hashPassword: deps.hashPassword, + validatePasswordStrength: deps.validatePasswordStrength, readArrayField: deps.readArrayField, rbacData: deps.rbacData, requirePermission: deps.requirePermission diff --git a/src/web/routes/settings/background-tasks-page.js b/src/web/routes/settings/background-tasks-page.js index dde41f9..4687d74 100644 --- a/src/web/routes/settings/background-tasks-page.js +++ b/src/web/routes/settings/background-tasks-page.js @@ -9,6 +9,12 @@ const TASKS_PER_PAGE = 25; const QUEUE_PAGE_URL = '/settings/tasks-background'; const SCHEDULED_PAGE_URL = '/settings/tasks-scheduled'; +const DATE_FILTER_FIELDS = { + createdAt: 'queued', + startedAt: 'started', + finishedAt: 'finished' +}; + function formatIntervalLabel(intervalMs) { const value = Math.max(1, Number(intervalMs) || 0); if (value % 60000 === 0) { @@ -36,6 +42,54 @@ function normalizeSourceFilter(sourceType, sourceId) { }; } +function normalizeDateInput(value) { + const normalizedValue = String(value || '').trim(); + return /^\d{4}-\d{2}-\d{2}$/.test(normalizedValue) ? normalizedValue : ''; +} + +function normalizeDateField(value) { + const normalizedField = String(value || '').trim(); + return DATE_FILTER_FIELDS[normalizedField] ? normalizedField : 'createdAt'; +} + +function getIsoDateString(value) { + const date = new Date(value); + if (Number.isNaN(date.getTime())) { + return ''; + } + + return date.toISOString().slice(0, 10); +} + +function getTaskDateValue(task, dateField) { + if (!task || !dateField) { + return ''; + } + + return task[dateField] || ''; +} + +function taskMatchesDateFilter(task, dateFilter) { + if (!dateFilter || (!dateFilter.from && !dateFilter.to)) { + return true; + } + + const taskDate = getIsoDateString(getTaskDateValue(task, dateFilter.field)); + if (!taskDate) { + return false; + } + + if (dateFilter.from && taskDate < dateFilter.from) { + return false; + } + + if (dateFilter.to && taskDate > dateFilter.to) { + return false; + } + + return true; +} + function taskMatchesFilters(task, sourceFilter) { if (!sourceFilter || !sourceFilter.sourceType || !sourceFilter.sourceId) { return true; @@ -107,12 +161,14 @@ function buildQueuePageViewModel(data, message, currentUser) { queryState.sourceType = sourceFilter.sourceType; queryState.sourceId = sourceFilter.sourceId; const filteredTasks = tasks.filter(function (task) { - return taskMatchesFilters(task, sourceFilter) && taskMatchesSearch(queryState.search, [ + return taskMatchesFilters(task, sourceFilter) && taskMatchesDateFilter(task, { field: 'createdAt', from: '', to: '' }) && taskMatchesSearch(queryState.search, [ 'title', - 'key', 'category', 'status', 'errorMessage', + 'createdAt', + 'startedAt', + 'finishedAt', function (item) { return item && item.metadata && item.metadata.sourceName; }, function (item) { return item && item.metadata && item.metadata.sourceType; }, function (item) { return item && item.metadata && item.metadata.sourceId; } @@ -199,6 +255,11 @@ function buildQueuePageViewModel(data, message, currentUser) { summary: summary, statusCards: statusCards, activeSourceLabel: queryState.sourceType && queryState.sourceId ? `${queryState.sourceType} #${queryState.sourceId}` : '', + search: queryState.search, + sort: sort, + direction: direction, + sourceType: queryState.sourceType, + sourceId: queryState.sourceId, clearFiltersUrl: QUEUE_PAGE_URL, hasActiveFilters: hasActiveFilters, pagination: pagination, diff --git a/src/web/routes/settings/fonts.js b/src/web/routes/settings/fonts.js index b7fd1cf..4abfc07 100644 --- a/src/web/routes/settings/fonts.js +++ b/src/web/routes/settings/fonts.js @@ -77,6 +77,8 @@ module.exports = function registerFontRoutes(app, deps) { const backgroundTaskQueue = deps.backgroundTaskQueue; const setAuthMessageCookie = deps.setAuthMessageCookie; + const FONT_FAMILY_MAX_LENGTH = 255; + if (!pool || !pages || !upload || !uploadDir) { throw new Error('registerFontRoutes requires pool, pages, upload, and uploadDir.'); } @@ -106,7 +108,7 @@ module.exports = function registerFontRoutes(app, deps) { return res.status(400).send('No font file was uploaded.'); } - const result = await fontLibrary.addFontFile(uploadDir, req.file, String(req.body && req.body.font_family || '').trim()); + const result = await fontLibrary.addFontFile(uploadDir, req.file, String(req.body && req.body.font_family || '').trim().slice(0, FONT_FAMILY_MAX_LENGTH)); if (backgroundTaskQueue && typeof backgroundTaskQueue.enqueueTask === 'function') { await backgroundTaskQueue.enqueueTask({ key: `font-sync:${result && result.font && result.font.id ? result.font.id : Date.now()}`, diff --git a/src/web/routes/settings/rbac/duplicate.js b/src/web/routes/settings/rbac/duplicate.js new file mode 100644 index 0000000..6e0aa74 --- /dev/null +++ b/src/web/routes/settings/rbac/duplicate.js @@ -0,0 +1,20 @@ +// RBAC role duplicate helpers. + +function buildDuplicateRoleName(roleName) { + const source = String(roleName || 'Role').trim() || 'Role'; + return 'Copy of ' + source; +} + +function buildDuplicateRole(role, duplicateName) { + const source = role || {}; + return { + id: null, + name: String(duplicateName || buildDuplicateRoleName(source.name)).trim(), + description: String(source.description || '').trim() + }; +} + +module.exports = { + buildDuplicateRoleName, + buildDuplicateRole +}; \ No newline at end of file diff --git a/src/web/routes/settings/rbac/form-view-model.js b/src/web/routes/settings/rbac/form-view-model.js index 755e6c6..d65c713 100644 --- a/src/web/routes/settings/rbac/form-view-model.js +++ b/src/web/routes/settings/rbac/form-view-model.js @@ -1,5 +1,81 @@ // Shared RBAC form view-model helpers. +function normalizeSectionId(value) { + return String(value || '').trim().toLowerCase().replace(/[^a-z0-9]+/g, '-'); +} + +function buildPermissionSections(permissionGroups) { + const sections = []; + const sectionIndex = new Map(); + const actionDefinitions = [ + { key: 'read', label: 'Read' }, + { key: 'create', label: 'Create' }, + { key: 'update', label: 'Update' }, + { key: 'delete', label: 'Delete' }, + { key: 'allow', label: 'Allow' } + ]; + + (Array.isArray(permissionGroups) ? permissionGroups : []).forEach(function (group) { + const sectionTitle = String(group && group.categoryName || 'Permissions').trim() || 'Permissions'; + const sectionKey = normalizeSectionId(sectionTitle) || 'permissions'; + + if (!sectionIndex.has(sectionKey)) { + sectionIndex.set(sectionKey, { + id: sectionKey, + title: sectionTitle, + sectionOrder: Number(group && group.sectionOrder) || 999, + groups: [] + }); + sections.push(sectionIndex.get(sectionKey)); + } + + const section = sectionIndex.get(sectionKey); + const groupPermissions = Array.isArray(group && group.permissions) ? group.permissions.slice() : []; + const sectionGroup = Object.assign({}, group, { + permissions: groupPermissions + }); + + section.groups.push(sectionGroup); + }); + + sections.forEach(function (section) { + section.actions = actionDefinitions.map(function (actionDefinition) { + return { + key: actionDefinition.key, + label: actionDefinition.label + }; + }); + + section.groups.sort(function (left, right) { + const leftOrder = Number(left.resourceOrder) || 999; + const rightOrder = Number(right.resourceOrder) || 999; + if (leftOrder !== rightOrder) { + return leftOrder - rightOrder; + } + return String(left.title || '').localeCompare(String(right.title || '')); + }); + + section.groups.forEach(function (group) { + group.cells = section.actions.map(function (action) { + return (Array.isArray(group.permissions) ? group.permissions : []).find(function (permission) { + return String(permission.actionKey || '').trim().toLowerCase() === action.key; + }) || null; + }); + }); + }); + + sections.sort(function (left, right) { + const leftOrder = Number(left.sectionOrder) || 999; + const rightOrder = Number(right.sectionOrder) || 999; + if (leftOrder !== rightOrder) { + return leftOrder - rightOrder; + } + return String(left.title || '').localeCompare(String(right.title || '')); + }); + + return sections; +} + function buildRbacAddViewModel(message, currentUser, formValues, permissionGroups, users, pagination, messageVariant) { return { title: 'Create role', @@ -19,11 +95,12 @@ function buildRbacAddViewModel(message, currentUser, formValues, permissionGroup currentUser: currentUser || null, formValues: formValues || {}, permissionGroups: permissionGroups || [], + permissionSections: buildPermissionSections(permissionGroups), users: users || [], pagination: pagination || null, roleEditBasePath: '/rbac/new', scripts: ['js/rbac-permissions.js'], - formAttrs: 'data-async-save data-async-save-close-url="/rbac" data-async-save-new-redirect="response-url"' + formAttrs: 'data-async-save data-async-save-close-url="/rbac" data-async-save-new-redirect="response-url" data-async-save-new-url="/rbac/new"' }; } @@ -46,10 +123,12 @@ function buildRbacEditViewModel(role, message, currentUser, permissionGroups, us role: role, inUse: Boolean(role && role.inUse), permissionGroups: permissionGroups || [], + permissionSections: buildPermissionSections(permissionGroups), users: users || [], pagination: pagination || null, roleEditBasePath: '/rbac/' + Number(role && role.id) + '/edit', - scripts: ['js/rbac-permissions.js'] + scripts: ['js/rbac-permissions.js'], + formAttrs: 'data-async-save data-async-save-close-url="/rbac" data-async-save-new-url="/rbac/new"' }; } diff --git a/src/web/routes/settings/users/duplicate.js b/src/web/routes/settings/users/duplicate.js new file mode 100644 index 0000000..0cc0872 --- /dev/null +++ b/src/web/routes/settings/users/duplicate.js @@ -0,0 +1,20 @@ +// User duplicate helpers. + +function buildDuplicateUserName(name) { + const source = String(name || 'User').trim() || 'User'; + return 'Copy of ' + source; +} + +function buildDuplicateUser(user, duplicateName, duplicateUsername) { + const source = user || {}; + return { + id: null, + name: String(duplicateName || buildDuplicateUserName(source.name)).trim(), + username: String(duplicateUsername || '').trim() + }; +} + +module.exports = { + buildDuplicateUserName, + buildDuplicateUser +}; \ No newline at end of file diff --git a/src/web/routes/settings/users/form-view-model.js b/src/web/routes/settings/users/form-view-model.js index 3d4dd12..d71d979 100644 --- a/src/web/routes/settings/users/form-view-model.js +++ b/src/web/routes/settings/users/form-view-model.js @@ -32,7 +32,7 @@ function buildUsersAddViewModel(message, currentUser, roles, formValues, message footerDeleteTitle: 'Delete is available after the user has been created.', footerShowDelete: true, message: message, - messageVariant: messageVariant || 'primary', + messageVariant: messageVariant || 'success', currentUser: currentUser || null, roles: mapRolesForForm(roles, []), formValues: formValues || {}, @@ -55,11 +55,13 @@ function buildUsersEditViewModel(user, message, currentUser, roles) { footerDeleteConfirmMessage: 'Delete this user?', footerDeleteTitle: user && user.inUse ? 'Delete is disabled while this user is the only account left.' : '', footerShowDelete: true, + showSaveSecondaryActions: true, message: message, currentUser: currentUser || null, user: user, inUse: Boolean(user && user.inUse), - roles: mapRolesForForm(roles, user && user.roleIds) + roles: mapRolesForForm(roles, user && user.roleIds), + formAttrs: 'data-async-save data-async-save-close-url="/users" data-async-save-new-url="/users/new"' }; } diff --git a/src/web/routes/signage/announcements/duplicate.js b/src/web/routes/signage/announcements/duplicate.js new file mode 100644 index 0000000..a6fac64 --- /dev/null +++ b/src/web/routes/signage/announcements/duplicate.js @@ -0,0 +1,20 @@ +// Announcement duplication helpers. + +function buildDuplicateAnnouncementName(announcementName) { + const baseName = 'Copy of ' + String(announcementName || '').trim(); + return baseName; +} + +function buildDuplicateAnnouncement(announcement, duplicateName) { + return Object.assign({}, announcement, { + id: null, + short_label: duplicateName, + expires_at: null, + screen_ids: Array.isArray(announcement && announcement.screen_ids) ? announcement.screen_ids.slice() : [] + }); +} + +module.exports = { + buildDuplicateAnnouncementName, + buildDuplicateAnnouncement +}; \ No newline at end of file diff --git a/src/web/routes/signage/announcements/form-view-model.js b/src/web/routes/signage/announcements/form-view-model.js index 7e77d7a..bc68aa3 100644 --- a/src/web/routes/signage/announcements/form-view-model.js +++ b/src/web/routes/signage/announcements/form-view-model.js @@ -24,8 +24,11 @@ function buildAnnouncementFormViewModel(announcement, message, currentUser, opti const announcementColors = Array.isArray(options && options.announcementColors) ? options.announcementColors : []; const announcementIcons = Array.isArray(options && options.announcementIcons) ? options.announcementIcons : []; const announcementScreens = Array.isArray(options && options.announcementScreens) ? options.announcementScreens : []; + const viewOptions = options || {}; const viewAnnouncement = Object.assign({}, buildDefaultAnnouncement(), announcement || {}); const canDelete = Boolean(currentUser && Array.isArray(currentUser.permissionKeys) && currentUser.permissionKeys.indexOf('announcements.delete') !== -1); + const hasTargets = Array.isArray(viewAnnouncement.screen_ids) && viewAnnouncement.screen_ids.length > 0; + const isActive = !(viewAnnouncement.expires_at && new Date(viewAnnouncement.expires_at).getTime() <= Date.now()); return { title: isEdit ? 'Edit announcement' : 'Add announcement', @@ -34,9 +37,29 @@ function buildAnnouncementFormViewModel(announcement, message, currentUser, opti currentUser: currentUser || null, announcement: viewAnnouncement, isEdit: Boolean(isEdit), - showSaveSecondaryActions: Boolean(isEdit), - showDeleteAction: Boolean(isEdit && canDelete), + showSaveSecondaryActions: true, + messageVariant: viewOptions.messageVariant || '', + actionLabel: isActive ? 'Stop' : 'Play', + actionIcon: isActive ? 'bi-stop-fill' : 'bi-play-fill', + actionDisabled: !isActive && !hasTargets, + actionClassName: !isActive && !hasTargets + ? 'btn-outline-info' + : (isActive ? 'btn-outline-warning' : 'btn-info'), + actionDisabledTitle: !isActive && !hasTargets + ? 'Select at least one screen group to play this announcement.' + : '', + actionConfirmMessage: isActive + ? 'Stop this announcement on the selected screens now?' + : 'Send this announcement to the selected screens now?', + actionPath: isEdit && viewAnnouncement.id + ? (isActive ? '/announcements/' + viewAnnouncement.id + '/stop' : '/announcements/' + viewAnnouncement.id + '/play') + : '', + showDeleteAction: Boolean(canDelete || !isEdit), deleteDisabled: !isEdit || !Boolean(viewAnnouncement && viewAnnouncement.canDelete), + deleteConfirmMessage: isEdit ? 'Delete this announcement?' : '', + deleteTitle: !isEdit + ? 'Delete is available after the announcement has been created.' + : (!Boolean(viewAnnouncement && viewAnnouncement.canDelete) ? 'This announcement is currently active and cannot be deleted.' : ''), formAction: isEdit && viewAnnouncement && viewAnnouncement.id ? '/announcements/' + viewAnnouncement.id : '/announcements', formAttrs: 'data-async-save' + (isEdit ? ' data-async-save-close-url="/announcements"' : ' data-async-save-new-redirect="response-url"') + ' data-async-save-new-url="/announcements/new"', cancelUrl: '/announcements', diff --git a/src/web/routes/signage/announcements/list.js b/src/web/routes/signage/announcements/list.js index 98ef051..50486cd 100644 --- a/src/web/routes/signage/announcements/list.js +++ b/src/web/routes/signage/announcements/list.js @@ -21,10 +21,15 @@ function formatStatusLabel(announcement) { function formatActionButton(announcement) { const isActive = formatStatusLabel(announcement) === 'Active'; + const hasTargets = Math.max(0, Number(announcement && announcement.screen_target_count) || 0) > 0; return { label: isActive ? 'Stop' : 'Play', icon: isActive ? 'bi-stop-fill' : 'bi-play-fill', - className: isActive ? 'btn-outline-warning' : 'btn-outline-success', + disabled: !isActive && !hasTargets, + className: !isActive && !hasTargets + ? 'btn-outline-info' + : (isActive ? 'btn-outline-warning' : 'btn-info'), + disabledTitle: !isActive && !hasTargets ? 'Select at least one screen group to play this announcement.' : '', confirmMessage: isActive ? 'Stop this announcement on the selected screens now?' : 'Send this announcement to the selected screens now?', @@ -32,6 +37,10 @@ function formatActionButton(announcement) { }; } +function isAnnouncementDeletionBlocked(announcement) { + return formatStatusLabel(announcement) === 'Active'; +} + function formatIconLabel(iconKey) { const normalized = String(iconKey || '').trim().toLowerCase() || DEFAULT_ANNOUNCEMENT_ICON; return ANNOUNCEMENT_ICON_LABELS[normalized] || normalized; @@ -69,6 +78,7 @@ function formatScreenTargetsLabel(announcement) { module.exports = function renderAnnouncementsPage(data, message, currentUser) { const announcements = (data.announcements || []).map(function (announcement) { const actionButton = formatActionButton(announcement); + const deleteDisabled = isAnnouncementDeletionBlocked(announcement); return Object.assign({}, announcement, { shortLabel: String(announcement.short_label || '').trim(), iconKey: String(announcement.icon_key || DEFAULT_ANNOUNCEMENT_ICON).trim().toLowerCase() || DEFAULT_ANNOUNCEMENT_ICON, @@ -77,9 +87,13 @@ module.exports = function renderAnnouncementsPage(data, message, currentUser) { expiresAtLabel: formatExpiresLabel(announcement.expires_at), screenTargetsLabel: formatScreenTargetsLabel(announcement), statusLabel: formatStatusLabel(announcement), + deleteDisabled: deleteDisabled, + deleteBlockedMessage: deleteDisabled ? 'This announcement is currently active and cannot be deleted.' : '', actionButtonLabel: actionButton.label, actionButtonIcon: actionButton.icon, actionButtonClassName: actionButton.className, + actionButtonDisabled: actionButton.disabled, + actionButtonDisabledTitle: actionButton.disabledTitle, actionButtonConfirmMessage: actionButton.confirmMessage, actionButtonPath: actionButton.actionPath }); diff --git a/src/web/routes/signage/announcements/routes.js b/src/web/routes/signage/announcements/routes.js index e6b2769..76bfe3e 100644 --- a/src/web/routes/signage/announcements/routes.js +++ b/src/web/routes/signage/announcements/routes.js @@ -11,12 +11,13 @@ module.exports = function registerAnnouncementRoutes(app, deps) { const { buildPagination } = require('../../../lib/pagination'); const announcementData = require('#src/data/announcements'); const announcementIcons = require('#src/data/announcement-icons'); + const { buildDuplicateAnnouncementName, buildDuplicateAnnouncement } = require('./duplicate'); const LIST_PAGE_SIZE = 25; const ANNOUNCEMENT_TYPES = [ - { value: 'lower-third', label: 'Lower third' }, - { value: 'fullscreen', label: 'Fullscreen' }, - { value: 'top-banner', label: 'Top banner' } + { value: 'lower-third', label: 'Lower third', icon: 'arrow-bar-down' }, + { value: 'fullscreen', label: 'Fullscreen', icon: 'arrows-fullscreen' }, + { value: 'top-banner', label: 'Top banner', icon: 'arrow-bar-up' } ]; const ANNOUNCEMENT_COLORS = [ { value: 'primary', label: 'Primary' }, @@ -63,8 +64,7 @@ module.exports = function registerAnnouncementRoutes(app, deps) { } function isAnnouncementDeletionBlocked(announcement) { - const screenIds = Array.isArray(announcement && announcement.screen_ids) ? announcement.screen_ids : []; - return isAnnouncementActive(announcement) || screenIds.length > 0; + return isAnnouncementActive(announcement); } async function fetchAllScreenSlugs() { @@ -221,6 +221,10 @@ module.exports = function registerAnnouncementRoutes(app, deps) { const durationMode = String(normalized.durationMode || '').trim() || (durationSeconds > 0 ? 'duration' : 'until_disabled'); const isActive = isAnnouncementActive(normalized); const canDelete = Boolean(normalized.id) && !isAnnouncementDeletionBlocked(normalized); + const hasTargets = Array.isArray(normalized.screen_ids) && normalized.screen_ids.length > 0; + const deleteBlockedMessage = canDelete + ? '' + : 'This announcement is currently active and cannot be deleted.'; return Object.assign({}, normalized, { durationMode: durationMode, @@ -230,7 +234,11 @@ module.exports = function registerAnnouncementRoutes(app, deps) { isActive: isActive, actionLabel: isActive ? 'Stop' : 'Play', actionIcon: isActive ? 'bi-stop-fill' : 'bi-play-fill', - actionClassName: isActive ? 'btn-outline-warning' : 'btn-outline-success', + actionDisabled: !isActive && !hasTargets, + actionClassName: !isActive && !hasTargets + ? 'btn-outline-info' + : (isActive ? 'btn-outline-warning' : 'btn-info'), + actionDisabledTitle: !isActive && !hasTargets ? 'Select at least one screen group to play this announcement.' : '', actionConfirmMessage: isActive ? 'Stop this announcement on the selected screens now?' : 'Send this announcement to the selected screens now?', @@ -238,7 +246,7 @@ module.exports = function registerAnnouncementRoutes(app, deps) { ? `/announcements/${normalized.id}/stop` : `/announcements/${normalized.id}/play`, canDelete: canDelete, - deleteBlockedMessage: canDelete ? '' : 'This announcement is still in use by one or more screens.' + deleteBlockedMessage: deleteBlockedMessage }); } @@ -301,6 +309,33 @@ module.exports = function registerAnnouncementRoutes(app, deps) { } }); + app.get('/announcements/:id/duplicate', requirePermission('announcements.read'), requirePermission('announcements.create'), async function (req, res, next) { + try { + const announcement = await common.fetchAnnouncementById(pool, Number(req.params.id)); + if (!announcement) { + return res.status(404).send('Announcement not found'); + } + + const screens = await fetchAnnouncementScreens(); + let duplicateName = buildDuplicateAnnouncementName(announcement.short_label || announcement.message || 'Announcement'); + let duplicateIndex = 2; + while (await common.fetchDuplicateName(pool, 'd_announcements', duplicateName, null, 'short_label')) { + duplicateName = buildDuplicateAnnouncementName(announcement.short_label || announcement.message || 'Announcement') + ' (' + duplicateIndex + ')'; + duplicateIndex += 1; + } + + res.send(pages.renderAnnouncementAddPage(buildAnnouncementFormData(buildDuplicateAnnouncement(announcement, duplicateName)), req.query.message ? String(req.query.message) : 'Review the copied values and save when ready.', req.currentUser, { + announcementTypes: ANNOUNCEMENT_TYPES, + announcementColors: ANNOUNCEMENT_COLORS, + announcementIcons: ANNOUNCEMENT_ICONS, + announcementScreens: buildAnnouncementScreenOptions(screens, announcement.screen_ids || []), + messageVariant: 'info' + })); + } catch (error) { + next(error); + } + }); + app.post('/announcements', requirePermission('announcements.create'), async function (req, res, next) { try { const message = String(req.body.message || '').replace(/\r\n/g, '\n').trim(); @@ -421,7 +456,7 @@ module.exports = function registerAnnouncementRoutes(app, deps) { } if (isAnnouncementDeletionBlocked(announcement)) { - return res.redirect('/announcements/' + announcement.id + '/edit?message=' + encodeURIComponent('This announcement is still in use by one or more screens.')); + return res.redirect('/announcements/' + announcement.id + '/edit?message=' + encodeURIComponent('This announcement is currently active and cannot be deleted.')); } await pool.query('DELETE FROM d_announcements WHERE id = ?', [announcement.id]); diff --git a/src/web/routes/signage/canvas-sizes/duplicate.js b/src/web/routes/signage/canvas-sizes/duplicate.js new file mode 100644 index 0000000..4b92cc0 --- /dev/null +++ b/src/web/routes/signage/canvas-sizes/duplicate.js @@ -0,0 +1,21 @@ +// Canvas size duplicate helpers. + +function buildDuplicateCanvasSizeName(name) { + const source = String(name || 'Canvas size').trim() || 'Canvas size'; + return 'Copy of ' + source; +} + +function buildDuplicateCanvasSize(canvasSize, duplicateName) { + const source = canvasSize || {}; + return { + id: null, + name: String(duplicateName || buildDuplicateCanvasSizeName(source.name)).trim(), + width: Math.max(1, Number(source.width || 1920)), + height: Math.max(1, Number(source.height || 1080)) + }; +} + +module.exports = { + buildDuplicateCanvasSizeName, + buildDuplicateCanvasSize +}; \ No newline at end of file diff --git a/src/web/routes/signage/canvas-sizes/form-view-model.js b/src/web/routes/signage/canvas-sizes/form-view-model.js index b6fcd3d..cdf8254 100644 --- a/src/web/routes/signage/canvas-sizes/form-view-model.js +++ b/src/web/routes/signage/canvas-sizes/form-view-model.js @@ -1,5 +1,7 @@ // Shared canvas size form view-model builder. +const { MAX_CANVAS_SIZE_DIMENSION } = require('#src/data'); + function buildDefaultCanvasSize() { return { id: null, @@ -19,6 +21,8 @@ function buildCanvasSizeFormViewModel(canvasSize, message, currentUser, isEdit) currentUser: currentUser || null, canvasSize: viewCanvasSize, inUse: Boolean(viewCanvasSize && viewCanvasSize.inUse), + dimensionsLocked: Boolean(viewCanvasSize && viewCanvasSize.inUse), + maxDimension: MAX_CANVAS_SIZE_DIMENSION, isEdit: Boolean(isEdit), formAction: isEdit && viewCanvasSize ? '/canvas-sizes/' + viewCanvasSize.id : '/canvas-sizes', formAttrs: 'data-async-save' + (isEdit ? ' data-async-save-close-url="/canvas-sizes"' : ' data-async-save-new-redirect="response-url"') + ' data-async-save-new-url="/canvas-sizes/new"', diff --git a/src/web/routes/signage/playlists/add.js b/src/web/routes/signage/playlists/add.js index 06b5a61..43ae3a6 100644 --- a/src/web/routes/signage/playlists/add.js +++ b/src/web/routes/signage/playlists/add.js @@ -2,8 +2,15 @@ const renderPlaylistEditorPage = require('./form-page'); -module.exports = async function renderPlaylistFormPage(message, currentUser, data, pool) { +module.exports = async function renderPlaylistFormPage(playlistOrMessage, messageOrCurrentUser, currentUserOrData, dataOrPool, poolMaybe) { + const hasPlaylistArgument = arguments.length >= 5; + const playlist = hasPlaylistArgument ? playlistOrMessage : null; + const message = hasPlaylistArgument ? messageOrCurrentUser : playlistOrMessage; + const currentUser = hasPlaylistArgument ? currentUserOrData : messageOrCurrentUser; + const data = hasPlaylistArgument ? dataOrPool : currentUserOrData; + const pool = hasPlaylistArgument ? poolMaybe : dataOrPool; const adminData = data || (pool ? await require('#src/data').fetchAdminData(pool) : { slides: [] }); - return renderPlaylistEditorPage(null, adminData, message, currentUser, { isEdit: false }); + + return renderPlaylistEditorPage(playlist, adminData, message, currentUser, { isEdit: false }); }; diff --git a/src/web/routes/signage/playlists/duplicate.js b/src/web/routes/signage/playlists/duplicate.js new file mode 100644 index 0000000..777b1cc --- /dev/null +++ b/src/web/routes/signage/playlists/duplicate.js @@ -0,0 +1,22 @@ +// Playlist duplicate helpers. + +function buildDuplicatePlaylistName(name) { + const source = String(name || 'Playlist').trim() || 'Playlist'; + return 'Copy of ' + source; +} + +function buildDuplicatePlaylist(playlist, duplicateName) { + const source = playlist || {}; + return { + id: source.id || null, + name: String(duplicateName || buildDuplicatePlaylistName(source.name)).trim(), + fade_between_slides: Boolean(source.fade_between_slides), + skip_unavailable_rtmp: Boolean(source.skip_unavailable_rtmp), + canvas_id: source.canvas_id || null + }; +} + +module.exports = { + buildDuplicatePlaylistName, + buildDuplicatePlaylist +}; \ No newline at end of file diff --git a/src/web/routes/signage/playlists/routes.js b/src/web/routes/signage/playlists/routes.js index a0bf94f..0244228 100644 --- a/src/web/routes/signage/playlists/routes.js +++ b/src/web/routes/signage/playlists/routes.js @@ -7,6 +7,7 @@ module.exports = function registerPlaylistsRoutes(app, deps) { const fetchScreensByPlaylistId = deps.fetchScreensByPlaylistId; const { buildPagination } = require('../../../lib/pagination'); const requirePermission = deps.requirePermission; + const { buildDuplicatePlaylistName, buildDuplicatePlaylist } = require('./duplicate'); const LIST_PAGE_SIZE = 25; @@ -51,6 +52,28 @@ module.exports = function registerPlaylistsRoutes(app, deps) { }); }); + app.get('/playlists/:id/duplicate', requirePermission('playlists.read'), requirePermission('playlists.create'), async function (req, res, next) { + try { + const playlist = await common.fetchPlaylistById(pool, Number(req.params.id)); + if (!playlist) { + return res.status(404).send('Playlist not found'); + } + + const data = await common.fetchAdminData(pool); + let duplicateName = buildDuplicatePlaylistName(playlist.name); + let duplicateIndex = 2; + while (await common.fetchDuplicateName(pool, 'c_playlists', duplicateName)) { + duplicateName = buildDuplicatePlaylistName(playlist.name) + ' (' + duplicateIndex + ')'; + duplicateIndex += 1; + } + + const duplicatePlaylist = buildDuplicatePlaylist(playlist, duplicateName); + res.send(await pages.renderPlaylistFormPage(duplicatePlaylist, req.query.message ? String(req.query.message) : 'Review the copied values and save when ready.', req.currentUser, data, pool)); + } catch (error) { + next(error); + } + }); + app.get('/playlists/:id/edit', requirePermission('playlists.update'), async function (req, res, next) { try { const playlist = await common.fetchPlaylistById(pool, Number(req.params.id)); diff --git a/src/web/routes/signage/screens/form-view-model.js b/src/web/routes/signage/screens/form-view-model.js index 5060c46..af42af4 100644 --- a/src/web/routes/signage/screens/form-view-model.js +++ b/src/web/routes/signage/screens/form-view-model.js @@ -16,8 +16,9 @@ function buildScreenFormViewModel(screen, data, message, currentUser, isEdit) { screen: viewScreen, inUse: Boolean(viewScreen.inUse), isEdit: Boolean(isEdit), - showSaveSecondaryActions: Boolean(isEdit), + showSaveSecondaryActions: true, deleteDisabled: Boolean(isEdit) ? Boolean(viewScreen.inUse) : true, + deleteConfirmMessage: Boolean(isEdit) ? 'Delete this screen?' : '', formAction: Boolean(isEdit) && viewScreen.id ? '/screens/' + viewScreen.id : '/screens', formAttrs: Boolean(isEdit) ? 'data-async-save data-async-save-close-url="/screens" data-async-save-new-url="/screens/new"' diff --git a/src/web/routes/signage/slides/add.js b/src/web/routes/signage/slides/add.js index 3891c76..897ddc7 100644 --- a/src/web/routes/signage/slides/add.js +++ b/src/web/routes/signage/slides/add.js @@ -3,6 +3,11 @@ const { renderView } = require('../../../view'); const { buildSlideFormViewModel } = require('./form-view-model'); -module.exports = function renderSlideAddPage(data, message, currentUser) { - return renderView('slides/form', buildSlideFormViewModel(data || {}, null, message, currentUser, false)); +module.exports = function renderSlideAddPage(slideOrData, dataOrMessage, messageOrCurrentUser, currentUserMaybe) { + const hasSlideArgument = arguments.length >= 4; + const slide = hasSlideArgument ? slideOrData : null; + const data = hasSlideArgument ? dataOrMessage : slideOrData; + const message = hasSlideArgument ? messageOrCurrentUser : dataOrMessage; + const currentUser = hasSlideArgument ? currentUserMaybe : messageOrCurrentUser; + return renderView('slides/form', buildSlideFormViewModel(data || {}, slide || null, message, currentUser, false)); }; \ No newline at end of file diff --git a/src/web/routes/signage/slides/duplicate.js b/src/web/routes/signage/slides/duplicate.js new file mode 100644 index 0000000..fbfe3b9 --- /dev/null +++ b/src/web/routes/signage/slides/duplicate.js @@ -0,0 +1,25 @@ +// Slide duplicate helpers. + +function buildDuplicateSlideName(title) { + const source = String(title || 'Slide').trim() || 'Slide'; + return 'Copy of ' + source; +} + +function buildDuplicateSlide(slide, duplicateName) { + const source = slide || {}; + const content = source.content && typeof source.content === 'object' + ? JSON.parse(JSON.stringify(source.content)) + : {}; + + return { + id: null, + title: String(duplicateName || buildDuplicateSlideName(source.title)).trim(), + template_id: source.template_id || null, + content: content + }; +} + +module.exports = { + buildDuplicateSlideName, + buildDuplicateSlide +}; \ No newline at end of file diff --git a/src/web/routes/signage/slides/form-view-model.js b/src/web/routes/signage/slides/form-view-model.js index 95fda83..3354ad7 100644 --- a/src/web/routes/signage/slides/form-view-model.js +++ b/src/web/routes/signage/slides/form-view-model.js @@ -53,7 +53,7 @@ function buildSlideFormViewModel(data, slide, message, currentUser, isEdit) { existingContent: viewSlide && viewSlide.content ? viewSlide.content : {} }, assetVersion: assetVersion, - slideEditorScripts: ['vendor/qrcode-generator/qrcode.js?v=' + assetVersion].concat(getRegionEditorScripts(assetVersion)), + slideEditorScripts: ['vendor/qr-code-styling/qr-code-styling-loader.js?v=' + assetVersion].concat(getRegionEditorScripts(assetVersion)), currentUser: currentUser || null }; } diff --git a/src/web/routes/signage/templates/duplicate.js b/src/web/routes/signage/templates/duplicate.js new file mode 100644 index 0000000..e2dde6d --- /dev/null +++ b/src/web/routes/signage/templates/duplicate.js @@ -0,0 +1,37 @@ +// Template duplicate helpers. + +function buildDuplicateTemplateName(name) { + const source = String(name || 'Template').trim() || 'Template'; + return 'Copy of ' + source; +} + +function cloneRegion(region) { + const cloned = JSON.parse(JSON.stringify(region || {})); + delete cloned.id; + delete cloned.template_id; + delete cloned.created_at; + delete cloned.modified_at; + delete cloned.created_by; + delete cloned.modified_by; + return cloned; +} + +function buildDuplicateTemplate(template, duplicateName) { + const source = template || {}; + return { + id: null, + name: String(duplicateName || buildDuplicateTemplateName(source.name)).trim(), + canvas_size_id: source.canvas_size_id || null, + canvas_size_width: source.canvas_size_width, + canvas_size_height: source.canvas_size_height, + background_color: source.background_color, + background_image_path: source.background_image_path, + region_usage: [], + regions: Array.isArray(source.regions) ? source.regions.map(cloneRegion) : [] + }; +} + +module.exports = { + buildDuplicateTemplateName, + buildDuplicateTemplate +}; \ No newline at end of file diff --git a/src/web/routes/signage/templates/form-view-model.js b/src/web/routes/signage/templates/form-view-model.js index b8ed466..c6878d2 100644 --- a/src/web/routes/signage/templates/form-view-model.js +++ b/src/web/routes/signage/templates/form-view-model.js @@ -55,15 +55,17 @@ function buildTemplateFormViewModel(template, message, canvasSizes, currentUser, template: current, inUse: Boolean(current.inUse), isEdit: Boolean(isEdit), - showSaveSecondaryActions: Boolean(isEdit), + showSaveSecondaryActions: true, deleteDisabled: !isEdit || Boolean(current.inUse), formAction: isEdit && current.id ? '/templates/' + current.id : '/templates', - formAttrs: 'data-template-has-slides="' + (current.slide_count ? 'true' : 'false') + '" data-async-save' + (isEdit ? ' data-async-save-close-url="/templates"' : ' data-async-save-new-redirect="response-url"') + ' data-async-save-new-url="/templates/new"', + formAttrs: 'data-template-has-slides="' + (current.slide_count ? 'true' : 'false') + '" data-async-save data-async-save-close-url="/templates"' + (isEdit ? '' : ' data-async-save-new-redirect="response-url"') + ' data-async-save-new-url="/templates/new"', cancelUrl: '/templates', + cancelConfirmMessage: "You've made changes. Are you sure you want to leave this page?", deleteUrl: isEdit && current.id ? '/templates/' + current.id + '/delete' : '', + deleteConfirmMessage: isEdit ? 'Delete this template?' : '', canvasSizes: canvasSizes || [], animationPresets: animationPresets, - scripts: ['js/lib/modal.js?v=' + assetVersion, 'js/templates/animation-presets.js?v=' + assetVersion, 'vendor/qrcode-generator/qrcode.js?v=' + assetVersion].concat(getRegionEditorScripts(assetVersion), ['js/templates/template-designer-utils.js?v=' + assetVersion, 'js/templates/template-designer.js?v=' + assetVersion]) + scripts: ['js/lib/modal.js?v=' + assetVersion, 'js/templates/animation-presets.js?v=' + assetVersion, 'vendor/qr-code-styling/qr-code-styling-loader.js?v=' + assetVersion].concat(getRegionEditorScripts(assetVersion), ['js/templates/template-designer-utils.js?v=' + assetVersion, 'js/templates/template-designer.js?v=' + assetVersion]) }; } diff --git a/src/web/views/account/password.hbs b/src/web/views/account/password.hbs index 0853a1e..dd6af47 100644 --- a/src/web/views/account/password.hbs +++ b/src/web/views/account/password.hbs @@ -32,7 +32,7 @@

Password

-
+
@@ -40,17 +40,18 @@
- +
- +
+
Use at least 10 characters and include 3 of: uppercase, lowercase, a number, and a symbol.
diff --git a/src/web/views/auth/login.hbs b/src/web/views/auth/login.hbs index 95b7117..eb6a8f2 100644 --- a/src/web/views/auth/login.hbs +++ b/src/web/views/auth/login.hbs @@ -8,6 +8,9 @@
{{message}}
{{/if}}
+ {{#if returnTo}} + + {{/if}}
diff --git a/src/web/views/data-sources/api-sources/form.hbs b/src/web/views/data-sources/api-sources/form.hbs index 3ab60c5..5e1eaf3 100644 --- a/src/web/views/data-sources/api-sources/form.hbs +++ b/src/web/views/data-sources/api-sources/form.hbs @@ -14,11 +14,11 @@
- +
- +
@@ -35,7 +35,7 @@
- +
@@ -49,18 +49,18 @@