feat: Kalender-Termine als QR (iCal Europe/Berlin) und UX für Datum/Zeit
- Modus Text/WLAN/Termin; VEVENT mit TZID Europe/Berlin und VTIMEZONE - Eingabe: separates Datum und 24h-Uhrzeit; Vorschau TT/MM/JJJJ - URL-Parameter und Teilen für Terminfelder - Docker Compose: Healthcheck für Caddy-Container Made-with: Cursor
This commit is contained in:
+6
-2
@@ -1,5 +1,3 @@
|
||||
version: '3.8'
|
||||
|
||||
services:
|
||||
qr-generator:
|
||||
build: .
|
||||
@@ -7,3 +5,9 @@ services:
|
||||
- "8080:80"
|
||||
container_name: qr-generator
|
||||
restart: unless-stopped
|
||||
healthcheck:
|
||||
test: ["CMD", "wget", "-q", "-O", "/dev/null", "http://127.0.0.1/"]
|
||||
interval: 30s
|
||||
timeout: 5s
|
||||
retries: 3
|
||||
start_period: 10s
|
||||
|
||||
+75
-3
@@ -1,6 +1,6 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<html lang="de"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; object-src 'none';">
|
||||
@@ -53,7 +53,7 @@
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
input, select {
|
||||
input, select, textarea {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
margin-bottom: 15px;
|
||||
@@ -64,7 +64,12 @@
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
|
||||
input:focus, select:focus {
|
||||
textarea {
|
||||
min-height: 80px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
input:focus, select:focus, textarea:focus {
|
||||
outline: none;
|
||||
border-color: #1e3a8a;
|
||||
box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.1);
|
||||
@@ -295,6 +300,24 @@
|
||||
text-decoration: underline;
|
||||
color: #1e40af;
|
||||
}
|
||||
|
||||
.event-berlin-preview {
|
||||
font-size: 14px;
|
||||
color: #4b5563;
|
||||
margin: -8px 0 16px 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.event-berlin-preview:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.event-datetime-hint {
|
||||
font-size: 13px;
|
||||
color: #6b7280;
|
||||
margin: -4px 0 12px 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -303,12 +326,22 @@
|
||||
<button id="info-button" class="info-button" aria-label="Information">?</button>
|
||||
|
||||
<div class="input-section">
|
||||
<label for="content-mode">QR-Inhalt:</label>
|
||||
<select id="content-mode">
|
||||
<option value="text">Text oder URL</option>
|
||||
<option value="wifi">WLAN</option>
|
||||
<option value="event">Termin (Kalender)</option>
|
||||
</select>
|
||||
|
||||
<div id="section-text" class="content-section">
|
||||
<label for="text">Text oder URL:</label>
|
||||
<div class="text-input-wrapper">
|
||||
<input type="text" id="text" placeholder="https://qr.medisoftware.org" value="" autofocus="">
|
||||
<button type="button" id="clear-text" class="clear-button" aria-label="Clear text" style="display: none;">✕</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="section-wifi" class="content-section" style="display: none;">
|
||||
<div class="options-row">
|
||||
<div class="options-col">
|
||||
<label for="wifi-ssid">WLAN SSID:</label>
|
||||
@@ -320,6 +353,42 @@
|
||||
<input type="password" id="wifi-password" placeholder="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="section-event" class="content-section" style="display: none;" lang="en-GB">
|
||||
<label for="event-title">Titel:</label>
|
||||
<input type="text" id="event-title" placeholder="" autocomplete="off">
|
||||
|
||||
<p class="event-datetime-hint">Datum im Format <strong>TT/MM/JJJJ</strong> (Kalenderfeld), Uhrzeit im <strong>24-Stunden-Format</strong> (keine AM/PM). Alle Zeiten: Ortszeit <strong>Europe/Berlin</strong>.</p>
|
||||
|
||||
<div class="options-row">
|
||||
<div class="options-col">
|
||||
<label for="event-start-date">Beginn – Datum:</label>
|
||||
<input type="date" id="event-start-date" autocomplete="off">
|
||||
</div>
|
||||
<div class="options-col">
|
||||
<label for="event-start-time">Beginn – Uhrzeit (24h):</label>
|
||||
<input type="time" id="event-start-time" step="60" autocomplete="off">
|
||||
</div>
|
||||
</div>
|
||||
<div class="options-row">
|
||||
<div class="options-col">
|
||||
<label for="event-end-date">Ende (optional) – Datum:</label>
|
||||
<input type="date" id="event-end-date" autocomplete="off">
|
||||
</div>
|
||||
<div class="options-col">
|
||||
<label for="event-end-time">Ende (optional) – Uhrzeit (24h):</label>
|
||||
<input type="time" id="event-end-time" step="60" autocomplete="off">
|
||||
</div>
|
||||
</div>
|
||||
<p class="event-berlin-preview" id="event-berlin-preview" aria-live="polite"></p>
|
||||
|
||||
<label for="event-location">Ort (optional):</label>
|
||||
<input type="text" id="event-location" placeholder="" autocomplete="off">
|
||||
|
||||
<label for="event-description">Beschreibung (optional):</label>
|
||||
<textarea id="event-description" placeholder="" rows="3"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="options-row">
|
||||
<div class="options-col">
|
||||
@@ -393,6 +462,9 @@
|
||||
<p>This is the web we were trying to build.</p>
|
||||
|
||||
<p>Be excellent to each other.</p>
|
||||
|
||||
<h3>Modi</h3>
|
||||
<p>Unter <strong>QR-Inhalt</strong> wählst du, was kodiert wird: freier Text oder URL, WLAN-Zugangsdaten (WIFI-QR) oder einen <strong>Kalendertermin</strong>. Im Modus „Termin“ erzeugt der QR-Code einen Standard-iCalendar-Eintrag (VEVENT), den viele Smartphones beim Scannen in die Kalender-App übernehmen. Datumseingabe als <strong>TT/MM/JJJJ</strong>, Uhrzeit im <strong>24-Stunden-Format</strong>; die Zeitzone ist <strong>Europe/Berlin</strong>. Es wird nichts an einen Server gesendet.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -2,8 +2,19 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
const textInput = document.getElementById('text');
|
||||
const clearTextBtn = document.getElementById('clear-text');
|
||||
const contentModeSelect = document.getElementById('content-mode');
|
||||
const sectionText = document.getElementById('section-text');
|
||||
const sectionWifi = document.getElementById('section-wifi');
|
||||
const sectionEvent = document.getElementById('section-event');
|
||||
const wifiSsidInput = document.getElementById('wifi-ssid');
|
||||
const wifiPasswordInput = document.getElementById('wifi-password');
|
||||
const eventTitleInput = document.getElementById('event-title');
|
||||
const eventStartDateInput = document.getElementById('event-start-date');
|
||||
const eventStartTimeInput = document.getElementById('event-start-time');
|
||||
const eventEndDateInput = document.getElementById('event-end-date');
|
||||
const eventEndTimeInput = document.getElementById('event-end-time');
|
||||
const eventLocationInput = document.getElementById('event-location');
|
||||
const eventDescriptionInput = document.getElementById('event-description');
|
||||
const sizeSelect = document.getElementById('size');
|
||||
const errorCorrectionSelect = document.getElementById('errorCorrection');
|
||||
const foregroundColor = document.getElementById('foreground');
|
||||
@@ -18,6 +29,11 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
const titleElement = document.getElementById('title');
|
||||
const shareBtn = document.getElementById('share');
|
||||
const shareHint = document.getElementById('share-hint');
|
||||
const eventBerlinPreview = document.getElementById('event-berlin-preview');
|
||||
|
||||
const MAX_EVENT_TITLE = 2000;
|
||||
const MAX_EVENT_LOCATION = 1000;
|
||||
const MAX_EVENT_DESCRIPTION = 8000;
|
||||
|
||||
// Title Easter egg
|
||||
let titleClickCount = 0;
|
||||
@@ -62,13 +78,42 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
}
|
||||
});
|
||||
|
||||
function toggleContentSections() {
|
||||
const mode = contentModeSelect.value;
|
||||
sectionText.style.display = mode === 'text' ? 'block' : 'none';
|
||||
sectionWifi.style.display = mode === 'wifi' ? 'block' : 'none';
|
||||
sectionEvent.style.display = mode === 'event' ? 'block' : 'none';
|
||||
}
|
||||
|
||||
contentModeSelect.addEventListener('change', function() {
|
||||
toggleContentSections();
|
||||
updateBerlinPreview();
|
||||
generateQRCode();
|
||||
if (this.value === 'text') {
|
||||
textInput.focus();
|
||||
} else if (this.value === 'wifi') {
|
||||
wifiSsidInput.focus();
|
||||
} else if (this.value === 'event') {
|
||||
eventTitleInput.focus();
|
||||
}
|
||||
});
|
||||
|
||||
// Set random compliment as default text and select it
|
||||
textInput.value = 'https://medisoftware.de';
|
||||
textInput.select();
|
||||
|
||||
// Show/hide clear button based on text input content
|
||||
// Show/hide clear button based on input content
|
||||
function toggleClearButton() {
|
||||
if (textInput.value.length > 0) {
|
||||
const hasText = textInput.value.length > 0;
|
||||
const hasWifi = wifiSsidInput.value.trim().length > 0 || wifiPasswordInput.value.trim().length > 0;
|
||||
const hasEvent = eventTitleInput.value.trim().length > 0 ||
|
||||
eventStartDateInput.value.length > 0 ||
|
||||
eventStartTimeInput.value.length > 0 ||
|
||||
eventEndDateInput.value.length > 0 ||
|
||||
eventEndTimeInput.value.length > 0 ||
|
||||
eventLocationInput.value.trim().length > 0 ||
|
||||
eventDescriptionInput.value.trim().length > 0;
|
||||
if (hasText || hasWifi || hasEvent) {
|
||||
clearTextBtn.style.display = 'block';
|
||||
} else {
|
||||
clearTextBtn.style.display = 'none';
|
||||
@@ -83,6 +128,16 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
textInput.value = '';
|
||||
wifiSsidInput.value = '';
|
||||
wifiPasswordInput.value = '';
|
||||
eventTitleInput.value = '';
|
||||
eventStartDateInput.value = '';
|
||||
eventStartTimeInput.value = '';
|
||||
eventEndDateInput.value = '';
|
||||
eventEndTimeInput.value = '';
|
||||
eventLocationInput.value = '';
|
||||
eventDescriptionInput.value = '';
|
||||
contentModeSelect.value = 'text';
|
||||
toggleContentSections();
|
||||
updateBerlinPreview();
|
||||
toggleClearButton();
|
||||
textInput.focus();
|
||||
generateQRCode();
|
||||
@@ -91,10 +146,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
// Update clear button visibility when text changes
|
||||
textInput.addEventListener('input', function() {
|
||||
toggleClearButton();
|
||||
// Only generate QR code if no wifi data is being entered
|
||||
const wifiSsid = wifiSsidInput.value.trim();
|
||||
const wifiPassword = wifiPasswordInput.value.trim();
|
||||
if (!wifiSsid && !wifiPassword) {
|
||||
if (contentModeSelect.value === 'text') {
|
||||
generateQRCode();
|
||||
}
|
||||
});
|
||||
@@ -109,22 +161,97 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
// Generate QR code when wifi settings change
|
||||
wifiSsidInput.addEventListener('input', function() {
|
||||
if (contentModeSelect.value === 'wifi') {
|
||||
updateTextDisplay();
|
||||
}
|
||||
generateQRCode();
|
||||
toggleClearButton();
|
||||
});
|
||||
wifiPasswordInput.addEventListener('input', function() {
|
||||
if (contentModeSelect.value === 'wifi') {
|
||||
updateTextDisplay();
|
||||
}
|
||||
generateQRCode();
|
||||
toggleClearButton();
|
||||
});
|
||||
|
||||
eventTitleInput.addEventListener('input', function() {
|
||||
updateBerlinPreview();
|
||||
generateQRCode();
|
||||
toggleClearButton();
|
||||
});
|
||||
function onEventDateTimeInput() {
|
||||
updateBerlinPreview();
|
||||
generateQRCode();
|
||||
toggleClearButton();
|
||||
}
|
||||
eventStartDateInput.addEventListener('input', onEventDateTimeInput);
|
||||
eventStartDateInput.addEventListener('change', onEventDateTimeInput);
|
||||
eventStartTimeInput.addEventListener('input', onEventDateTimeInput);
|
||||
eventStartTimeInput.addEventListener('change', onEventDateTimeInput);
|
||||
eventEndDateInput.addEventListener('input', onEventDateTimeInput);
|
||||
eventEndDateInput.addEventListener('change', onEventDateTimeInput);
|
||||
eventEndTimeInput.addEventListener('input', onEventDateTimeInput);
|
||||
eventEndTimeInput.addEventListener('change', onEventDateTimeInput);
|
||||
eventLocationInput.addEventListener('input', function() {
|
||||
generateQRCode();
|
||||
toggleClearButton();
|
||||
});
|
||||
eventDescriptionInput.addEventListener('input', function() {
|
||||
generateQRCode();
|
||||
toggleClearButton();
|
||||
});
|
||||
|
||||
// Download QR code as image
|
||||
downloadBtn.addEventListener('click', downloadQRCode);
|
||||
|
||||
function sanitizeUrlString(s, maxLen) {
|
||||
if (typeof s !== 'string') {
|
||||
return '';
|
||||
}
|
||||
return s.replace(/\0/g, '').slice(0, maxLen);
|
||||
}
|
||||
|
||||
function isValidDatetimeLocal(s) {
|
||||
return /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/.test(s);
|
||||
}
|
||||
|
||||
function combineDateTime(dateStr, timeStr) {
|
||||
if (!dateStr || !timeStr) {
|
||||
return '';
|
||||
}
|
||||
if (!/^\d{4}-\d{2}-\d{2}$/.test(dateStr)) {
|
||||
return '';
|
||||
}
|
||||
if (!/^\d{2}:\d{2}$/.test(timeStr)) {
|
||||
return '';
|
||||
}
|
||||
return dateStr + 'T' + timeStr;
|
||||
}
|
||||
|
||||
function applyCombinedToDateTimeInputs(combined, dateInput, timeInput) {
|
||||
if (!isValidDatetimeLocal(combined)) {
|
||||
return;
|
||||
}
|
||||
const parts = combined.split('T');
|
||||
dateInput.value = parts[0];
|
||||
timeInput.value = parts[1];
|
||||
}
|
||||
|
||||
// Or check for URL parameters if present
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
|
||||
let explicitModeFromUrl = false;
|
||||
if (urlParams.has('mode')) {
|
||||
const m = urlParams.get('mode');
|
||||
if (m === 'text' || m === 'wifi' || m === 'event') {
|
||||
contentModeSelect.value = m;
|
||||
explicitModeFromUrl = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (urlParams.has('text')) {
|
||||
const safeText = urlParams.get('text');
|
||||
// Nur erlaubte Zeichen (Buchstaben, Zahlen, gängige URL-Zeichen)
|
||||
if (/^[\w\-.:/?&=#%+@!;,]*$/i.test(safeText)) {
|
||||
textInput.value = safeText;
|
||||
}
|
||||
@@ -141,6 +268,33 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
wifiPasswordInput.value = safePassword;
|
||||
}
|
||||
}
|
||||
|
||||
const hasEventParams = urlParams.has('eventTitle') || urlParams.has('eventStart');
|
||||
if (!explicitModeFromUrl && hasEventParams) {
|
||||
contentModeSelect.value = 'event';
|
||||
}
|
||||
if (urlParams.has('eventTitle')) {
|
||||
eventTitleInput.value = sanitizeUrlString(urlParams.get('eventTitle'), MAX_EVENT_TITLE);
|
||||
}
|
||||
if (urlParams.has('eventStart')) {
|
||||
const es = urlParams.get('eventStart');
|
||||
if (isValidDatetimeLocal(es)) {
|
||||
applyCombinedToDateTimeInputs(es, eventStartDateInput, eventStartTimeInput);
|
||||
}
|
||||
}
|
||||
if (urlParams.has('eventEnd')) {
|
||||
const ee = urlParams.get('eventEnd');
|
||||
if (isValidDatetimeLocal(ee)) {
|
||||
applyCombinedToDateTimeInputs(ee, eventEndDateInput, eventEndTimeInput);
|
||||
}
|
||||
}
|
||||
if (urlParams.has('eventLocation')) {
|
||||
eventLocationInput.value = sanitizeUrlString(urlParams.get('eventLocation'), MAX_EVENT_LOCATION);
|
||||
}
|
||||
if (urlParams.has('eventDescription')) {
|
||||
eventDescriptionInput.value = sanitizeUrlString(urlParams.get('eventDescription'), MAX_EVENT_DESCRIPTION);
|
||||
}
|
||||
|
||||
if (urlParams.has('size')) {
|
||||
const sizeValue = urlParams.get('size');
|
||||
if (["128", "256", "512", "1024"].includes(sizeValue)) {
|
||||
@@ -165,13 +319,195 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
backgroundColor.value = bgValue;
|
||||
}
|
||||
}
|
||||
|
||||
toggleContentSections();
|
||||
updateBerlinPreview();
|
||||
generateQRCode();
|
||||
|
||||
function daysInMonth(y, mo) {
|
||||
return new Date(y, mo, 0).getDate();
|
||||
}
|
||||
|
||||
function parseDatetimeLocalValue(s) {
|
||||
const m = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})$/.exec(s);
|
||||
if (!m) {
|
||||
return null;
|
||||
}
|
||||
return {
|
||||
y: parseInt(m[1], 10),
|
||||
mo: parseInt(m[2], 10),
|
||||
d: parseInt(m[3], 10),
|
||||
h: parseInt(m[4], 10),
|
||||
mi: parseInt(m[5], 10)
|
||||
};
|
||||
}
|
||||
|
||||
function addHoursWall(parts, deltaH) {
|
||||
let y = parts.y;
|
||||
let mo = parts.mo;
|
||||
let d = parts.d;
|
||||
let h = parts.h + deltaH;
|
||||
let mi = parts.mi;
|
||||
while (h >= 24) {
|
||||
h -= 24;
|
||||
d += 1;
|
||||
const dim = daysInMonth(y, mo);
|
||||
if (d > dim) {
|
||||
d = 1;
|
||||
mo += 1;
|
||||
if (mo > 12) {
|
||||
mo = 1;
|
||||
y += 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
return { y: y, mo: mo, d: d, h: h, mi: mi };
|
||||
}
|
||||
|
||||
function wallTimeToICal(p) {
|
||||
const pad = function(n) { return String(n).padStart(2, '0'); };
|
||||
return String(p.y) + pad(p.mo) + pad(p.d) + 'T' + pad(p.h) + pad(p.mi) + '00';
|
||||
}
|
||||
|
||||
function compareWallTime(a, b) {
|
||||
return (a.y * 1e8 + a.mo * 1e6 + a.d * 1e4 + a.h * 100 + a.mi) -
|
||||
(b.y * 1e8 + b.mo * 1e6 + b.d * 1e4 + b.h * 100 + b.mi);
|
||||
}
|
||||
|
||||
function formatSlashDateTime24hBerlin(p) {
|
||||
const pad = function(n) { return String(n).padStart(2, '0'); };
|
||||
return pad(p.d) + '/' + pad(p.mo) + '/' + p.y + ', ' + pad(p.h) + ':' + pad(p.mi);
|
||||
}
|
||||
|
||||
function updateBerlinPreview() {
|
||||
if (!eventBerlinPreview) {
|
||||
return;
|
||||
}
|
||||
if (contentModeSelect.value !== 'event') {
|
||||
eventBerlinPreview.textContent = '';
|
||||
return;
|
||||
}
|
||||
const startRaw = combineDateTime(eventStartDateInput.value, eventStartTimeInput.value);
|
||||
const endD = eventEndDateInput.value;
|
||||
const endT = eventEndTimeInput.value;
|
||||
let endRaw = '';
|
||||
if (endD && endT) {
|
||||
endRaw = combineDateTime(endD, endT);
|
||||
} else if (endD || endT) {
|
||||
eventBerlinPreview.textContent =
|
||||
'Bitte geben Sie für das Ende entweder beides (Datum und Uhrzeit, 24h) ein oder lassen Sie beides leer.';
|
||||
return;
|
||||
}
|
||||
const sp = parseDatetimeLocalValue(startRaw);
|
||||
if (!sp) {
|
||||
eventBerlinPreview.textContent = '';
|
||||
return;
|
||||
}
|
||||
let endDisplay;
|
||||
if (endRaw) {
|
||||
const ep = parseDatetimeLocalValue(endRaw);
|
||||
if (!ep) {
|
||||
eventBerlinPreview.textContent = 'Beginn: ' + formatSlashDateTime24hBerlin(sp) + ' (Europe/Berlin)';
|
||||
return;
|
||||
}
|
||||
endDisplay = ep;
|
||||
} else {
|
||||
endDisplay = addHoursWall(sp, 1);
|
||||
}
|
||||
eventBerlinPreview.textContent =
|
||||
'Beginn: ' + formatSlashDateTime24hBerlin(sp) +
|
||||
' · Ende: ' + formatSlashDateTime24hBerlin(endDisplay) +
|
||||
' (Europe/Berlin)';
|
||||
}
|
||||
|
||||
function escapeICalText(str) {
|
||||
return String(str)
|
||||
.replace(/\r\n/g, '\n')
|
||||
.replace(/\r/g, '')
|
||||
.replace(/\\/g, '\\\\')
|
||||
.replace(/;/g, '\\;')
|
||||
.replace(/,/g, '\\,')
|
||||
.replace(/\n/g, '\\n');
|
||||
}
|
||||
|
||||
function formatICalUTCStamp() {
|
||||
const d = new Date();
|
||||
const pad = function(n) { return String(n).padStart(2, '0'); };
|
||||
return (
|
||||
d.getUTCFullYear() +
|
||||
pad(d.getUTCMonth() + 1) +
|
||||
pad(d.getUTCDate()) +
|
||||
'T' +
|
||||
pad(d.getUTCHours()) +
|
||||
pad(d.getUTCMinutes()) +
|
||||
pad(d.getUTCSeconds()) +
|
||||
'Z'
|
||||
);
|
||||
}
|
||||
|
||||
function newEventUid() {
|
||||
if (typeof crypto !== 'undefined' && crypto.randomUUID) {
|
||||
return crypto.randomUUID() + '@qr-generator.local';
|
||||
}
|
||||
return 'evt-' + String(Date.now()) + '-' + String(Math.random()).slice(2) + '@qr-generator.local';
|
||||
}
|
||||
|
||||
function buildICalEvent(opts) {
|
||||
const summary = opts.summary;
|
||||
const dtStart = opts.dtStart;
|
||||
const dtEnd = opts.dtEnd;
|
||||
const location = opts.location;
|
||||
const description = opts.description;
|
||||
|
||||
const vtimezoneBerlin = [
|
||||
'BEGIN:VTIMEZONE',
|
||||
'TZID:Europe/Berlin',
|
||||
'BEGIN:DAYLIGHT',
|
||||
'DTSTART:19810329T020000',
|
||||
'RRULE:FREQ=YEARLY;BYMONTH=3;BYDAY=-1SU',
|
||||
'TZNAME:CEST',
|
||||
'TZOFFSETFROM:+0100',
|
||||
'TZOFFSETTO:+0200',
|
||||
'END:DAYLIGHT',
|
||||
'BEGIN:STANDARD',
|
||||
'DTSTART:19961027T030000',
|
||||
'RRULE:FREQ=YEARLY;BYMONTH=10;BYDAY=-1SU',
|
||||
'TZNAME:CET',
|
||||
'TZOFFSETFROM:+0200',
|
||||
'TZOFFSETTO:+0100',
|
||||
'END:STANDARD',
|
||||
'END:VTIMEZONE'
|
||||
].join('\r\n');
|
||||
|
||||
const lines = [
|
||||
'BEGIN:VCALENDAR',
|
||||
'VERSION:2.0',
|
||||
'PRODID:-//qr-generator//DE',
|
||||
'CALSCALE:GREGORIAN',
|
||||
vtimezoneBerlin,
|
||||
'BEGIN:VEVENT',
|
||||
'UID:' + opts.uid,
|
||||
'DTSTAMP:' + opts.dtStamp,
|
||||
'DTSTART;TZID=Europe/Berlin:' + dtStart,
|
||||
'DTEND;TZID=Europe/Berlin:' + dtEnd,
|
||||
'SUMMARY:' + escapeICalText(summary)
|
||||
];
|
||||
if (location && location.trim()) {
|
||||
lines.push('LOCATION:' + escapeICalText(location.trim()));
|
||||
}
|
||||
if (description && description.trim()) {
|
||||
lines.push('DESCRIPTION:' + escapeICalText(description.trim()));
|
||||
}
|
||||
lines.push('END:VEVENT', 'END:VCALENDAR');
|
||||
return lines.join('\r\n');
|
||||
}
|
||||
|
||||
function generateQRCode() {
|
||||
const mode = contentModeSelect.value;
|
||||
const text = textInput.value.trim();
|
||||
const wifiSsid = wifiSsidInput.value.trim();
|
||||
const wifiPassword = wifiPasswordInput.value.trim();
|
||||
const size = parseInt(sizeSelect.value);
|
||||
const size = parseInt(sizeSelect.value, 10);
|
||||
const errorCorrection = errorCorrectionSelect.value.toLowerCase();
|
||||
const fgColor = foregroundColor.value;
|
||||
const bgColor = backgroundColor.value;
|
||||
@@ -186,28 +522,110 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
errorMessage.textContent = '';
|
||||
downloadBtn.style.display = 'none';
|
||||
|
||||
// Determine what to encode
|
||||
let qrText = text;
|
||||
let qrText = '';
|
||||
|
||||
// If wifi credentials are provided, generate wifi QR code
|
||||
if (wifiSsid && wifiPassword) {
|
||||
// Wifi QR code format: WIFI:S:<SSID>;T:WPA;P:<password>;;
|
||||
qrText = `WIFI:S:${escapeSpecialChars(wifiSsid)};T:WPA;P:${escapeSpecialChars(wifiPassword)};;`;
|
||||
} else if (wifiSsid && !wifiPassword) {
|
||||
// SSID only (open network)
|
||||
qrText = `WIFI:S:${escapeSpecialChars(wifiSsid)};T:nopass;;`;
|
||||
} else if (!wifiSsid && wifiPassword) {
|
||||
// Password without SSID is invalid
|
||||
errorMessage.textContent = 'Bitte geben Sie eine SSID ein, wenn Sie ein Passwort angeben';
|
||||
if (mode === 'event') {
|
||||
const title = eventTitleInput.value.trim();
|
||||
const startRaw = combineDateTime(eventStartDateInput.value, eventStartTimeInput.value);
|
||||
const endD = eventEndDateInput.value;
|
||||
const endT = eventEndTimeInput.value;
|
||||
const loc = eventLocationInput.value;
|
||||
const desc = eventDescriptionInput.value;
|
||||
|
||||
if (!title) {
|
||||
errorMessage.textContent = 'Bitte geben Sie einen Titel für den Termin ein';
|
||||
qrcodeCanvas.style.display = 'none';
|
||||
qrcodeImg.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
if (!startRaw) {
|
||||
errorMessage.textContent = 'Bitte geben Sie Datum und Uhrzeit (24h) für den Beginn ein (TT/MM/JJJJ)';
|
||||
qrcodeCanvas.style.display = 'none';
|
||||
qrcodeImg.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
|
||||
if (endD || endT) {
|
||||
if (!endD || !endT) {
|
||||
errorMessage.textContent =
|
||||
'Bitte geben Sie für das Ende sowohl Datum (TT/MM/JJJJ) als auch Uhrzeit (24h) an, oder lassen Sie beides leer';
|
||||
qrcodeCanvas.style.display = 'none';
|
||||
qrcodeImg.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const startParts = parseDatetimeLocalValue(startRaw);
|
||||
if (!startParts) {
|
||||
errorMessage.textContent = 'Ungültige Startzeit (Datum und 24h-Uhrzeit prüfen)';
|
||||
qrcodeCanvas.style.display = 'none';
|
||||
qrcodeImg.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
|
||||
const dtStart = wallTimeToICal(startParts);
|
||||
|
||||
let endParts;
|
||||
const endRaw = endD && endT ? combineDateTime(endD, endT) : '';
|
||||
if (endRaw) {
|
||||
endParts = parseDatetimeLocalValue(endRaw);
|
||||
if (!endParts) {
|
||||
errorMessage.textContent = 'Ungültige Endzeit';
|
||||
qrcodeCanvas.style.display = 'none';
|
||||
qrcodeImg.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
endParts = addHoursWall(startParts, 1);
|
||||
}
|
||||
|
||||
if (compareWallTime(endParts, startParts) <= 0) {
|
||||
errorMessage.textContent = 'Die Endzeit muss nach dem Beginn liegen (Ortszeit Europe/Berlin)';
|
||||
qrcodeCanvas.style.display = 'none';
|
||||
qrcodeImg.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
|
||||
const dtEndStr = wallTimeToICal(endParts);
|
||||
|
||||
qrText = buildICalEvent({
|
||||
uid: newEventUid(),
|
||||
dtStamp: formatICalUTCStamp(),
|
||||
summary: title.slice(0, MAX_EVENT_TITLE),
|
||||
dtStart: dtStart,
|
||||
dtEnd: dtEndStr,
|
||||
location: loc.slice(0, MAX_EVENT_LOCATION),
|
||||
description: desc.slice(0, MAX_EVENT_DESCRIPTION)
|
||||
});
|
||||
|
||||
textInput.value = qrText;
|
||||
toggleClearButton();
|
||||
} else if (mode === 'wifi') {
|
||||
if (wifiSsid && wifiPassword) {
|
||||
qrText = 'WIFI:S:' + escapeSpecialChars(wifiSsid) + ';T:WPA;P:' + escapeSpecialChars(wifiPassword) + ';;';
|
||||
} else if (wifiSsid && !wifiPassword) {
|
||||
qrText = 'WIFI:S:' + escapeSpecialChars(wifiSsid) + ';T:nopass;;';
|
||||
} else if (!wifiSsid && wifiPassword) {
|
||||
errorMessage.textContent = 'Bitte geben Sie eine SSID ein, wenn Sie ein Passwort angeben';
|
||||
qrcodeCanvas.style.display = 'none';
|
||||
qrcodeImg.style.display = 'none';
|
||||
return;
|
||||
} else {
|
||||
qrText = text;
|
||||
}
|
||||
} else {
|
||||
qrText = text;
|
||||
}
|
||||
|
||||
// Validate input
|
||||
if (qrText === '') {
|
||||
errorMessage.textContent = 'Bitte geben Sie Text/URL oder Wifi-Daten ein';
|
||||
// Hide both canvas and image
|
||||
if (mode === 'wifi') {
|
||||
errorMessage.textContent = 'Bitte geben Sie Text/URL oder WLAN-Daten ein';
|
||||
} else if (mode === 'event') {
|
||||
errorMessage.textContent = 'Termin konnte nicht erzeugt werden';
|
||||
} else {
|
||||
errorMessage.textContent = 'Bitte geben Sie Text oder eine URL ein';
|
||||
}
|
||||
qrcodeCanvas.style.display = 'none';
|
||||
qrcodeImg.style.display = 'none';
|
||||
return;
|
||||
@@ -270,34 +688,29 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
downloadBtn.textContent = 'Downloaded!';
|
||||
|
||||
// Reset button after a short delay
|
||||
setTimeout(() => {
|
||||
setTimeout(function() {
|
||||
downloadBtn.textContent = originalText;
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
// Function to update the text display with current QR code content
|
||||
// Function to update the text display with current QR code content (WLAN)
|
||||
function updateTextDisplay() {
|
||||
const wifiSsid = wifiSsidInput.value.trim();
|
||||
const wifiPassword = wifiPasswordInput.value.trim();
|
||||
|
||||
if (wifiSsid && wifiPassword) {
|
||||
// Show wifi QR code format
|
||||
textInput.value = `WIFI:S:${escapeSpecialChars(wifiSsid)};T:WPA;P:${escapeSpecialChars(wifiPassword)};;`;
|
||||
textInput.value = 'WIFI:S:' + escapeSpecialChars(wifiSsid) + ';T:WPA;P:' + escapeSpecialChars(wifiPassword) + ';;';
|
||||
} else if (wifiSsid && !wifiPassword) {
|
||||
// Show open network format
|
||||
textInput.value = `WIFI:S:${escapeSpecialChars(wifiSsid)};T:nopass;;`;
|
||||
} else {
|
||||
// If no wifi data, keep original text input value
|
||||
// Don't change it here to avoid overwriting user input
|
||||
textInput.value = 'WIFI:S:' + escapeSpecialChars(wifiSsid) + ';T:nopass;;';
|
||||
}
|
||||
|
||||
// Update clear button visibility
|
||||
toggleClearButton();
|
||||
}
|
||||
|
||||
function updateShareHint() {
|
||||
const mode = contentModeSelect.value;
|
||||
const wifiPassword = wifiPasswordInput.value.trim();
|
||||
if (wifiPassword) {
|
||||
if (mode === 'wifi' && wifiPassword) {
|
||||
shareHint.style.display = 'block';
|
||||
} else {
|
||||
shareHint.style.display = 'none';
|
||||
@@ -307,11 +720,12 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
wifiPasswordInput.addEventListener('input', updateShareHint);
|
||||
wifiSsidInput.addEventListener('input', updateShareHint);
|
||||
textInput.addEventListener('input', updateShareHint);
|
||||
// Initial anzeigen, falls Passwort schon gesetzt
|
||||
contentModeSelect.addEventListener('change', updateShareHint);
|
||||
updateShareHint();
|
||||
|
||||
shareBtn.addEventListener('click', function() {
|
||||
const params = new URLSearchParams();
|
||||
const mode = contentModeSelect.value;
|
||||
const text = textInput.value.trim();
|
||||
const wifiSsid = wifiSsidInput.value.trim();
|
||||
const wifiPassword = wifiPasswordInput.value.trim();
|
||||
@@ -320,22 +734,58 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
const fgColor = foregroundColor.value;
|
||||
const bgColor = backgroundColor.value;
|
||||
|
||||
// Entscheide, was kodiert werden soll
|
||||
if (wifiSsid) params.set('ssid', wifiSsid);
|
||||
if (wifiPassword) params.set('password', wifiPassword);
|
||||
if (!wifiSsid && !wifiPassword && text) params.set('text', text);
|
||||
if (size !== '256') params.set('size', size);
|
||||
if (errorCorrection !== 'M') params.set('errorCorrection', errorCorrection);
|
||||
if (fgColor !== '#000000') params.set('foreground', fgColor);
|
||||
if (bgColor !== '#ffffff') params.set('background', bgColor);
|
||||
params.set('mode', mode);
|
||||
|
||||
if (mode === 'event') {
|
||||
if (eventTitleInput.value.trim()) {
|
||||
params.set('eventTitle', eventTitleInput.value.trim());
|
||||
}
|
||||
const shareStart = combineDateTime(eventStartDateInput.value, eventStartTimeInput.value);
|
||||
const shareEnd = combineDateTime(eventEndDateInput.value, eventEndTimeInput.value);
|
||||
if (shareStart) {
|
||||
params.set('eventStart', shareStart);
|
||||
}
|
||||
if (shareEnd) {
|
||||
params.set('eventEnd', shareEnd);
|
||||
}
|
||||
if (eventLocationInput.value.trim()) {
|
||||
params.set('eventLocation', eventLocationInput.value.trim());
|
||||
}
|
||||
if (eventDescriptionInput.value.trim()) {
|
||||
params.set('eventDescription', eventDescriptionInput.value.trim());
|
||||
}
|
||||
} else if (mode === 'wifi') {
|
||||
if (wifiSsid) {
|
||||
params.set('ssid', wifiSsid);
|
||||
}
|
||||
if (wifiPassword) {
|
||||
params.set('password', wifiPassword);
|
||||
}
|
||||
} else {
|
||||
if (text) {
|
||||
params.set('text', text);
|
||||
}
|
||||
}
|
||||
|
||||
if (size !== '256') {
|
||||
params.set('size', size);
|
||||
}
|
||||
if (errorCorrection !== 'M') {
|
||||
params.set('errorCorrection', errorCorrection);
|
||||
}
|
||||
if (fgColor !== '#000000') {
|
||||
params.set('foreground', fgColor);
|
||||
}
|
||||
if (bgColor !== '#ffffff') {
|
||||
params.set('background', bgColor);
|
||||
}
|
||||
|
||||
const url = window.location.origin + window.location.pathname + '?' + params.toString();
|
||||
// In Zwischenablage kopieren
|
||||
navigator.clipboard.writeText(url).then(() => {
|
||||
navigator.clipboard.writeText(url).then(function() {
|
||||
const original = shareBtn.textContent;
|
||||
shareBtn.textContent = 'Link kopiert!';
|
||||
setTimeout(() => { shareBtn.textContent = original; }, 2000);
|
||||
}, () => {
|
||||
setTimeout(function() { shareBtn.textContent = original; }, 2000);
|
||||
}, function() {
|
||||
alert('Konnte Link nicht kopieren.');
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user