online Buchung fertig
luay
parent
ed49e09fc1
commit
46780e6dca
|
|
@ -12,7 +12,7 @@
|
|||
--text-primary: #ffffff;
|
||||
--text-muted: #9ba7aa;
|
||||
--accent: #4597A3;
|
||||
--border: rgba(234, 8, 8, 0.1);
|
||||
--border: rgb(255 255 255 / 14%);
|
||||
--font-display: "Sora", sans-serif;
|
||||
--font-body: "DM Sans", Arial, Helvetica, sans-serif;
|
||||
--radius: 1.1rem;
|
||||
|
|
@ -35,14 +35,13 @@
|
|||
|
||||
.tb-dialog {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
width: min(560px, 100%);
|
||||
max-height: calc(100vh - 48px);
|
||||
overflow-y: auto;
|
||||
background-color: var(--background-panel);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: calc(var(--radius) + 0.4rem);
|
||||
background-color: #111a1e;
|
||||
border: 2px solid rgb(255 255 255 / 9%);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 30px 90px rgb(0 0 0 / 45%);
|
||||
padding: 28px;
|
||||
padding: 26px 28px;
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font-body);
|
||||
line-height: 1.6;
|
||||
|
|
@ -147,36 +146,37 @@
|
|||
/* ---------- Kalender ---------- */
|
||||
|
||||
.tb-cal-head {
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-template-columns: 52px minmax(0, 1fr) 52px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.tb-cal-month {
|
||||
text-align: center;
|
||||
font-family: var(--font-display);
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
font-size: 1.55rem;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.tb-cal-nav {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 9px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||||
background: rgb(255 255 255 / 4%);
|
||||
color: var(--text-primary);
|
||||
font-size: 1.05rem;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: 13px;
|
||||
border: 2px solid var(--border);
|
||||
background: transparent;
|
||||
color: #6fa6b2;
|
||||
font-size: 1.55rem;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s ease, background-color 0.15s ease;
|
||||
}
|
||||
|
||||
.tb-cal-nav:hover:not(:disabled) {
|
||||
border-color: var(--accent);
|
||||
background: rgb(69 151 163 / 14%);
|
||||
background: rgb(69 151 163 / 10%);
|
||||
}
|
||||
|
||||
.tb-cal-nav:disabled {
|
||||
|
|
@ -188,30 +188,31 @@
|
|||
.tb-cal-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, minmax(0, 1fr));
|
||||
gap: 6px;
|
||||
gap: 6px 8px;
|
||||
}
|
||||
|
||||
.tb-cal-weekdays span {
|
||||
text-align: center;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-muted);
|
||||
padding-bottom: 4px;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
color: #a1b0bb;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
|
||||
.tb-day {
|
||||
position: relative;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
min-height: 44px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid transparent;
|
||||
width: min(100%, 54px);
|
||||
aspect-ratio: 1;
|
||||
min-height: 0;
|
||||
justify-self: center;
|
||||
border-radius: 50%;
|
||||
border: 2px solid transparent;
|
||||
background: transparent;
|
||||
font-family: var(--font-body);
|
||||
font-size: 0.88rem;
|
||||
color: var(--text-primary);
|
||||
font-size: 1.05rem;
|
||||
color: #7b8991;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
|
||||
}
|
||||
|
|
@ -223,20 +224,22 @@
|
|||
}
|
||||
|
||||
/* Verfügbarkeitskategorien */
|
||||
.tb-day--verfuegbar {
|
||||
background: rgb(34 197 94 / 12%);
|
||||
border-color: rgb(34 197 94 / 40%);
|
||||
.tb-cal-grid .tb-day--verfuegbar {
|
||||
background: transparent;
|
||||
border-color: var(--accent);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.tb-day--verfuegbar:hover,
|
||||
.tb-day--verfuegbar:focus-visible {
|
||||
background: rgb(34 197 94 / 22%);
|
||||
border-color: rgb(34 197 94 / 70%);
|
||||
.tb-cal-grid .tb-day--verfuegbar:hover,
|
||||
.tb-cal-grid .tb-day--verfuegbar:focus-visible {
|
||||
background: rgb(69 151 163 / 14%);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.tb-day--nicht {
|
||||
color: rgb(255 255 255 / 26%);
|
||||
background: rgb(255 255 255 / 3%);
|
||||
.tb-cal-grid .tb-day--neutral {
|
||||
color: #7b8991;
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
|
|
@ -247,10 +250,10 @@
|
|||
}
|
||||
|
||||
/* Ausgewählter Tag */
|
||||
.tb-day--ausgewaehlt {
|
||||
.tb-cal-grid .tb-day--ausgewaehlt {
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
color: #03242b;
|
||||
color: #071419;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
|
|
@ -259,11 +262,11 @@
|
|||
.tb-legend {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 18px;
|
||||
gap: 14px;
|
||||
list-style: none;
|
||||
margin: 14px 0 0;
|
||||
margin: 12px 0 0;
|
||||
padding: 0;
|
||||
font-size: 0.82rem;
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
|
|
@ -284,21 +287,21 @@
|
|||
}
|
||||
|
||||
.tb-dot--nicht {
|
||||
background: rgb(255 255 255 / 22%);
|
||||
background: #ef4444;
|
||||
}
|
||||
|
||||
/* ---------- Uhrzeiten des gewählten Tages ---------- */
|
||||
|
||||
.tb-times {
|
||||
margin-top: 20px;
|
||||
padding-top: 18px;
|
||||
border-top: 1px solid var(--border);
|
||||
margin-top: 18px;
|
||||
padding-top: 14px;
|
||||
border-top: 1px solid rgb(255 255 255 / 10%);
|
||||
}
|
||||
|
||||
.tb-times-label {
|
||||
margin: 0 0 12px;
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-muted);
|
||||
font-size: 1rem;
|
||||
color: #a1b0bb;
|
||||
}
|
||||
|
||||
.tb-times-label strong {
|
||||
|
|
@ -312,13 +315,13 @@
|
|||
}
|
||||
|
||||
.tb-time-chip {
|
||||
padding: 8px 16px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.16);
|
||||
background: rgb(255 255 255 / 4%);
|
||||
padding: 9px 14px;
|
||||
border-radius: 11px;
|
||||
border: 2px solid var(--border);
|
||||
background: transparent;
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font-body);
|
||||
font-size: 0.9rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
|
||||
|
|
@ -329,9 +332,9 @@
|
|||
}
|
||||
|
||||
.tb-time-chip.is-active {
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
color: #03242b;
|
||||
background: #6fa6b2;
|
||||
border-color: #6fa6b2;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* ---------- Buchen-Button ---------- */
|
||||
|
|
@ -341,7 +344,7 @@
|
|||
width: 100%;
|
||||
margin-top: 22px;
|
||||
padding: 0.85rem 1.5rem;
|
||||
border-radius: 999px;
|
||||
border-radius: 12px;
|
||||
border: none;
|
||||
background: var(--accent);
|
||||
color: #03242b;
|
||||
|
|
@ -368,6 +371,54 @@
|
|||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
@media (max-height: 760px) {
|
||||
.tb-dialog {
|
||||
padding-block: 18px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.tb-subtitle {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.tb-trainer {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.tb-cal-head {
|
||||
grid-template-columns: 44px minmax(0, 1fr) 44px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.tb-cal-nav {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.tb-cal-weekdays,
|
||||
.tb-cal-grid {
|
||||
gap: 3px 5px;
|
||||
}
|
||||
|
||||
.tb-day {
|
||||
width: min(100%, 40px);
|
||||
}
|
||||
|
||||
.tb-times {
|
||||
margin-top: 12px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.tb-book {
|
||||
margin-top: 14px;
|
||||
padding-block: 0.65rem;
|
||||
}
|
||||
|
||||
.tb-hinweis {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
2. Buchungsformular-Seite (html/terminbuchung.html)
|
||||
========================================================= */
|
||||
|
|
@ -503,7 +554,7 @@
|
|||
padding: 56px 0 88px;
|
||||
}
|
||||
|
||||
.terminbuchung-seite .section + .section {
|
||||
.terminbuchung-seite .section+.section {
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
|
|
@ -559,6 +610,113 @@
|
|||
color: var(--accent);
|
||||
}
|
||||
|
||||
.terminbuchung-seite #anfrage-pruefen[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tb-review-list {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(150px, 0.7fr) minmax(0, 1.3fr);
|
||||
gap: 0;
|
||||
margin: 28px 0 0;
|
||||
padding: 0 24px;
|
||||
background: var(--background-panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.tb-review-list dt,
|
||||
.tb-review-list dd {
|
||||
margin: 0;
|
||||
padding: 14px 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.tb-review-list dt {
|
||||
padding-right: 18px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.tb-review-list dd {
|
||||
color: var(--text-primary);
|
||||
font-weight: 600;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.tb-review-list dt:last-of-type,
|
||||
.tb-review-list dd:last-of-type {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.tb-review-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.tb-review-button {
|
||||
display: inline-flex;
|
||||
min-height: 46px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.7rem 1.1rem;
|
||||
border: 1px solid var(--accent);
|
||||
border-radius: 8px;
|
||||
font: inherit;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tb-review-button--primary {
|
||||
color: #071419;
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
.tb-review-button--secondary {
|
||||
color: var(--text-primary);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.tb-review-button:hover,
|
||||
.tb-review-button:focus-visible {
|
||||
filter: brightness(1.12);
|
||||
}
|
||||
|
||||
.terminbuchung-seite .tb-confirm-dialog {
|
||||
width: min(480px, calc(100% - 32px));
|
||||
padding: 28px;
|
||||
color: var(--text-primary);
|
||||
background: var(--background-panel);
|
||||
border: 1px solid rgb(255 255 255 / 14%);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 24px 72px rgb(0 0 0 / 45%);
|
||||
}
|
||||
|
||||
.terminbuchung-seite .tb-confirm-dialog::backdrop {
|
||||
background: rgb(7 20 25 / 78%);
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
.terminbuchung-seite .tb-confirm-dialog h2 {
|
||||
margin: 0 0 12px;
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.terminbuchung-seite .tb-confirm-dialog p {
|
||||
margin: 0 0 22px;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.terminbuchung-seite .tb-confirm-dialog {
|
||||
padding: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- Formular ---------- */
|
||||
|
||||
.terminbuchung-seite form {
|
||||
|
|
@ -896,18 +1054,75 @@
|
|||
/* Pop-up auf schmalen Bildschirmen */
|
||||
@media (max-width: 560px) {
|
||||
.tb-overlay {
|
||||
padding: 12px;
|
||||
align-items: stretch;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.tb-dialog {
|
||||
max-height: calc(100vh - 24px);
|
||||
padding: 22px 18px;
|
||||
width: 100%;
|
||||
max-height: calc(100dvh - 20px);
|
||||
padding: 20px 14px;
|
||||
}
|
||||
|
||||
.tb-cal-head {
|
||||
grid-template-columns: 44px minmax(0, 1fr) 44px;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.tb-cal-month {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.tb-cal-nav {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 11px;
|
||||
font-size: 1.35rem;
|
||||
}
|
||||
|
||||
.tb-cal-weekdays,
|
||||
.tb-cal-grid {
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.tb-cal-weekdays span {
|
||||
font-size: 0.82rem;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.tb-day {
|
||||
min-height: 38px;
|
||||
font-size: 0.8rem;
|
||||
width: min(100%, 42px);
|
||||
min-height: 0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.tb-times-label {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.tb-time-chip {
|
||||
padding: 8px 11px;
|
||||
border-radius: 9px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.tb-review-list {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
padding-inline: 18px;
|
||||
}
|
||||
|
||||
.tb-review-list dt {
|
||||
padding: 12px 0 2px;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.tb-review-list dd {
|
||||
padding: 0 0 12px;
|
||||
}
|
||||
|
||||
.tb-review-list dt:last-of-type,
|
||||
.tb-review-list dd:last-of-type {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -26,7 +26,8 @@
|
|||
<div class="site-navigation__bar">
|
||||
<div class="brand">
|
||||
<a class="brand__logo" href="../index.html" aria-label="Zurück zur Übersicht">
|
||||
<img src="../images/trihub-logo.jpg" alt="Trihub – fit und vital ab 50!" width="1024" height="1024">
|
||||
<img src="../images/trihub-logo.jpg" alt="Trihub – fit und vital ab 50!" width="1024"
|
||||
height="1024">
|
||||
</a>
|
||||
<div class="brand__text">
|
||||
<span class="brand__name">TRI-HUB</span>
|
||||
|
|
@ -87,13 +88,14 @@
|
|||
Ernährungsberatung und das Format, beschreibe kurz dein Anliegen und nimm Allergien oder
|
||||
Unverträglichkeiten als Tags auf.</p>
|
||||
|
||||
<!-- terminbuchung-form.js prüft die Eingaben und öffnet zum Absenden das E-Mail-Programm. -->
|
||||
<!-- Vor dem E-Mail-Versand werden alle Angaben in einem zweiten Schritt geprüft. -->
|
||||
<form id="terminbuchung-formular" novalidate>
|
||||
<div class="field">
|
||||
<label for="tb-art">Art der Ernährungsberatung *</label>
|
||||
<select id="tb-art" name="art" required>
|
||||
<option value="" selected disabled>Bitte wählen …</option>
|
||||
<option value="leistungsoptimierung">Leistungsoptimierung – Training & Wettkampf</option>
|
||||
<option value="leistungsoptimierung">Leistungsoptimierung – Training & Wettkampf
|
||||
</option>
|
||||
<option value="gewichtsmanagement">Gewichtsmanagement</option>
|
||||
<option value="unvertraeglichkeiten">Ernährung bei Unverträglichkeiten</option>
|
||||
<option value="allgemein">Allgemeine Ernährungsberatung</option>
|
||||
|
|
@ -135,7 +137,8 @@
|
|||
<button type="button" class="tb-tag-add" id="tag-add">+ Hinzufügen</button>
|
||||
</div>
|
||||
<ul class="tb-tags" id="tag-list"></ul>
|
||||
<p class="field__hint">Enter oder der Button fügt den Eintrag als Tag hinzu – so behält dein Gegenüber die Anamnese im Blick.</p>
|
||||
<p class="field__hint">Enter oder der Button fügt den Eintrag als Tag hinzu – so behält
|
||||
dein Gegenüber die Anamnese im Blick.</p>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
|
|
@ -155,13 +158,31 @@
|
|||
<input type="tel" id="tb-phone" name="phone" placeholder="06203/1764877">
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-accent btn-block" disabled>Terminanfrage absenden</button>
|
||||
<button type="submit" class="btn btn-accent btn-block" disabled>Angaben prüfen</button>
|
||||
<p id="form-status" class="form-status" role="status" aria-live="polite"></p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="anfrage-pruefen" class="section" hidden aria-labelledby="pruefen-titel">
|
||||
<div class="container">
|
||||
<div>
|
||||
<span class="kicker">Letzter Schritt</span>
|
||||
<h2 id="pruefen-titel">Prüfe deine Angaben</h2>
|
||||
<p class="lead">Kontrolliere die Zusammenfassung. Du kannst zurückgehen und Angaben ändern oder
|
||||
die Anfrage senden.</p>
|
||||
<dl class="tb-review-list" id="anfrage-pruefen-details"></dl>
|
||||
<div class="tb-review-actions">
|
||||
<button type="button" class="tb-review-button tb-review-button--secondary"
|
||||
id="anfrage-bearbeiten">Zurück und bearbeiten</button>
|
||||
<a class="tb-review-button tb-review-button--primary" id="anfrage-senden" href="#">Anfrage
|
||||
senden</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="site-footer">
|
||||
<div class="container">
|
||||
|
|
@ -204,6 +225,15 @@
|
|||
</div>
|
||||
</footer>
|
||||
</main>
|
||||
|
||||
<dialog class="tb-confirm-dialog" id="anfrage-bestaetigung" aria-labelledby="bestaetigung-titel"
|
||||
aria-describedby="bestaetigung-text">
|
||||
<span class="kicker">Anfrage vorbereitet</span>
|
||||
<h2 id="bestaetigung-titel">Terminanfrage</h2>
|
||||
<p id="bestaetigung-text">Deine Terminanfrage wurde an dein E-Mail-Programm übergeben. Sende sie dort
|
||||
bitte ab. Wir prüfen deinen Wunschtermin und schicken dir anschließend eine Bestätigung per E-Mail.</p>
|
||||
<a class="tb-review-button tb-review-button--primary" href="../index.html">OK, zur Übersicht</a>
|
||||
</dialog>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
|
|
|
|||
|
|
@ -176,6 +176,7 @@
|
|||
if (!form) return;
|
||||
|
||||
const EMAIL_TARGET = "info@trihub.de";
|
||||
const bestaetigungDialog = document.getElementById("anfrage-bestaetigung");
|
||||
|
||||
const fields = {
|
||||
art: form.querySelector("[name='art']"),
|
||||
|
|
@ -188,6 +189,11 @@
|
|||
};
|
||||
|
||||
const statusEl = document.getElementById("form-status");
|
||||
const formularBereich = document.getElementById("formular");
|
||||
const pruefBereich = document.getElementById("anfrage-pruefen");
|
||||
const pruefDetails = document.getElementById("anfrage-pruefen-details");
|
||||
const bearbeitenButton = document.getElementById("anfrage-bearbeiten");
|
||||
const sendenLink = document.getElementById("anfrage-senden");
|
||||
|
||||
function wrap(el) {
|
||||
return el.closest(".field");
|
||||
|
|
@ -280,6 +286,34 @@
|
|||
|
||||
const elBerater = document.getElementById("tb-berater");
|
||||
|
||||
function labelVon(key) {
|
||||
const select = fields[key];
|
||||
return select.options[select.selectedIndex].text;
|
||||
}
|
||||
|
||||
function werteAnzeigen(werte) {
|
||||
pruefDetails.replaceChildren();
|
||||
werte.forEach(function (eintrag) {
|
||||
const label = document.createElement("dt");
|
||||
label.textContent = eintrag[0];
|
||||
const wert = document.createElement("dd");
|
||||
wert.textContent = eintrag[1] || "–";
|
||||
pruefDetails.append(label, wert);
|
||||
});
|
||||
}
|
||||
|
||||
bearbeitenButton.addEventListener("click", function () {
|
||||
pruefBereich.hidden = true;
|
||||
formularBereich.hidden = false;
|
||||
formularBereich.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||
});
|
||||
|
||||
sendenLink.addEventListener("click", function (event) {
|
||||
event.preventDefault();
|
||||
bestaetigungDialog.showModal();
|
||||
window.location.href = sendenLink.href;
|
||||
});
|
||||
|
||||
form.addEventListener("submit", function (event) {
|
||||
event.preventDefault();
|
||||
form.dataset.touched = "true";
|
||||
|
|
@ -295,18 +329,26 @@
|
|||
return;
|
||||
}
|
||||
|
||||
function labelVon(key) {
|
||||
const select = fields[key];
|
||||
return select.options[select.selectedIndex].text;
|
||||
}
|
||||
|
||||
const tagListe = window.TerminbuchungTags ? window.TerminbuchungTags.holen() : [];
|
||||
const beraterText = elBerater ? elBerater.textContent.trim() : "–";
|
||||
const anfrageDaten = [
|
||||
["Berater/in", beraterText],
|
||||
["Termin", terminText],
|
||||
["Art der Ernährungsberatung", labelVon("art")],
|
||||
["Beratungsformat", labelVon("format")],
|
||||
["Gesprächsart", labelVon("gespraech")],
|
||||
["Kurzbeschreibung", fields.beschreibung.value.trim() || "–"],
|
||||
["Anamnese (Allergien & Unverträglichkeiten)", tagListe.length ? tagListe.join(", ") : "–"],
|
||||
["Name", fields.name.value.trim()],
|
||||
["E-Mail", fields.email.value.trim()],
|
||||
["Telefon", fields.phone.value.trim() || "–"]
|
||||
];
|
||||
|
||||
const body = [
|
||||
"Terminanfrage – Trainingsplan & Beratung",
|
||||
"",
|
||||
"Termin: " + terminText,
|
||||
"Berater/in: " + (elBerater ? elBerater.textContent.trim() : "–"),
|
||||
"Berater/in: " + beraterText,
|
||||
"Art der Ernährungsberatung: " + labelVon("art"),
|
||||
"Beratungsformat: " + labelVon("format"),
|
||||
"Gesprächsart: " + labelVon("gespraech"),
|
||||
|
|
@ -319,24 +361,14 @@
|
|||
"Telefon: " + (fields.phone.value.trim() || "–")
|
||||
].join("\n");
|
||||
|
||||
// Statische Seite ohne Backend: E-Mail-Programm wird mit allen Angaben geöffnet.
|
||||
window.location.href =
|
||||
werteAnzeigen(anfrageDaten);
|
||||
sendenLink.href =
|
||||
"mailto:" + EMAIL_TARGET +
|
||||
"?subject=" + encodeURIComponent("Terminanfrage: " + terminText) +
|
||||
"&body=" + encodeURIComponent(body);
|
||||
|
||||
showStatus(
|
||||
"ok",
|
||||
"Danke! Dein E-Mail-Programm wurde geöffnet. Sende die Nachricht ab – wir bestätigen den Termin kurzfristig."
|
||||
);
|
||||
form.reset();
|
||||
if (window.TerminbuchungTags) {
|
||||
window.TerminbuchungTags.leeren();
|
||||
}
|
||||
Object.values(fields).forEach(function (el) {
|
||||
setFieldState(el, null);
|
||||
});
|
||||
updateSubmitState();
|
||||
formularBereich.hidden = true;
|
||||
pruefBereich.hidden = false;
|
||||
pruefBereich.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||
});
|
||||
|
||||
function showStatus(kind, text) {
|
||||
|
|
|
|||
|
|
@ -80,6 +80,17 @@
|
|||
return Array.isArray(zeiten) ? zeiten : [];
|
||||
}
|
||||
|
||||
function hatFreieTermine(beraterId) {
|
||||
const tabelle = terminDaten[String(beraterId)];
|
||||
if (!tabelle || typeof tabelle !== "object") return false;
|
||||
|
||||
return Object.entries(tabelle).some(([schluessel, zeiten]) => {
|
||||
const datum = /^(\d{4})-(\d{2})-(\d{2})$/.exec(schluessel);
|
||||
if (!datum || !Array.isArray(zeiten) || zeiten.length === 0) return false;
|
||||
return !istVergangen(Number(datum[1]), Number(datum[2]) - 1, Number(datum[3]));
|
||||
});
|
||||
}
|
||||
|
||||
function istVerfuegbar(jahr, monat, tag) {
|
||||
if (istVergangen(jahr, monat, tag)) return false;
|
||||
return zeitenFuer(zustand.beraterId, datumSchluessel(jahr, monat, tag)).length > 0;
|
||||
|
|
@ -127,9 +138,8 @@
|
|||
</div>
|
||||
<div class="tb-cal-grid"></div>
|
||||
|
||||
<ul class="tb-legend">
|
||||
<li><span class="tb-dot tb-dot--verfuegbar" aria-hidden="true"></span>Verfügbar</li>
|
||||
<li><span class="tb-dot tb-dot--nicht" aria-hidden="true"></span>Nicht verfügbar</li>
|
||||
<ul class="tb-legend" aria-live="polite">
|
||||
<li><span class="tb-dot" aria-hidden="true"></span><span class="tb-legend-label"></span></li>
|
||||
</ul>
|
||||
|
||||
<div class="tb-times" hidden>
|
||||
|
|
@ -228,11 +238,20 @@
|
|||
btn.setAttribute("aria-pressed", aktiv ? "true" : "false");
|
||||
});
|
||||
|
||||
legendeAktualisieren();
|
||||
zeitenBereichZuruecksetzen();
|
||||
kalenderZeichnen();
|
||||
buchButtonAktualisieren();
|
||||
}
|
||||
|
||||
function legendeAktualisieren() {
|
||||
const dot = overlay.querySelector(".tb-legend .tb-dot");
|
||||
const label = overlay.querySelector(".tb-legend-label");
|
||||
const verfuegbar = hatFreieTermine(zustand.beraterId);
|
||||
dot.className = "tb-dot " + (verfuegbar ? "tb-dot--verfuegbar" : "tb-dot--nicht");
|
||||
label.textContent = verfuegbar ? "Verfügbar" : "Nicht verfügbar";
|
||||
}
|
||||
|
||||
function verschiebeMonat(richtung) {
|
||||
const heute = heutigerTag();
|
||||
let ziel = zustand.jahr * 12 + zustand.monat + richtung;
|
||||
|
|
@ -302,6 +321,7 @@
|
|||
for (let tag = 1; tag <= tageImMonat; tag++) {
|
||||
const verfuegbar = istVerfuegbar(zustand.jahr, zustand.monat, tag);
|
||||
const schluessel = datumSchluessel(zustand.jahr, zustand.monat, tag);
|
||||
const vergangen = istVergangen(zustand.jahr, zustand.monat, tag);
|
||||
|
||||
const btn = document.createElement("button");
|
||||
btn.type = "button";
|
||||
|
|
@ -309,7 +329,7 @@
|
|||
if (verfuegbar) {
|
||||
klassen += "tb-day--verfuegbar";
|
||||
} else {
|
||||
klassen += "tb-day--nicht";
|
||||
klassen += "tb-day--neutral";
|
||||
}
|
||||
if (
|
||||
zustand.jahr === heuteInfo.jahr &&
|
||||
|
|
@ -324,7 +344,8 @@
|
|||
btn.className = klassen;
|
||||
btn.textContent = tag;
|
||||
btn.disabled = !verfuegbar;
|
||||
btn.setAttribute("aria-label", `${deutscherTagText(schluessel)} – ${verfuegbar ? "verfügbar" : "nicht verfügbar"}`);
|
||||
const status = verfuegbar ? "verfügbar" : vergangen ? "vergangen" : "keine Termine eingetragen";
|
||||
btn.setAttribute("aria-label", `${deutscherTagText(schluessel)} – ${status}`);
|
||||
if (verfuegbar) {
|
||||
btn.addEventListener("click", () => tagKlicken(zustand.jahr, zustand.monat, tag));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,27 +1,93 @@
|
|||
{
|
||||
"_hinweis": "Verfügbare Termine pro Trainer. Schlüssel = Berater-ID aus json/berater.json (z. B. \"1\"). Wert = Objekt: Datum im Format JJJJ-MM-TT als Schlüssel, Array mit Uhrzeiten (HH:MM) als Wert. Tage ohne Eintrag werden im Kalender als 'Nicht verfügbar' angezeigt. Schüssel, die mit '_' beginnen, werden von terminbuchung.js ignoriert.",
|
||||
"1": {
|
||||
"2026-10-05": ["09:00", "11:00", "14:30"],
|
||||
"2026-10-07": ["10:00", "15:00"],
|
||||
"2026-10-08": ["09:30", "11:30", "16:00"],
|
||||
"2026-10-12": ["10:00", "14:00"],
|
||||
"2026-10-14": ["09:00", "10:30", "15:30"],
|
||||
"2026-10-15": ["11:00", "16:00"],
|
||||
"2026-10-19": ["09:30", "14:30"],
|
||||
"2026-10-21": ["10:00", "11:30"],
|
||||
"2026-10-22": ["15:00", "16:30"],
|
||||
"2026-10-26": ["09:00", "10:30", "14:00"],
|
||||
"2026-10-28": ["11:00", "15:00"],
|
||||
"2026-10-29": ["09:30", "16:00"]
|
||||
"2026-10-05": [
|
||||
"09:00",
|
||||
"11:00",
|
||||
"14:30"
|
||||
],
|
||||
"2026-10-07": [
|
||||
"10:00",
|
||||
"15:00"
|
||||
],
|
||||
"2026-10-08": [
|
||||
"09:30",
|
||||
"11:30",
|
||||
"16:00"
|
||||
],
|
||||
"2026-10-12": [
|
||||
"10:00",
|
||||
"14:00"
|
||||
],
|
||||
"2026-10-14": [
|
||||
"09:00",
|
||||
"10:30",
|
||||
"15:30"
|
||||
],
|
||||
"2026-10-15": [
|
||||
"11:00",
|
||||
"16:00"
|
||||
],
|
||||
"2026-10-19": [
|
||||
"09:30",
|
||||
"14:30"
|
||||
],
|
||||
"2026-10-21": [
|
||||
"10:00",
|
||||
"11:30"
|
||||
],
|
||||
"2026-10-22": [
|
||||
"15:00",
|
||||
"16:30"
|
||||
],
|
||||
"2026-10-26": [
|
||||
"09:00",
|
||||
"10:30",
|
||||
"14:00"
|
||||
],
|
||||
"2026-10-28": [
|
||||
"11:00",
|
||||
"15:00"
|
||||
],
|
||||
"2026-10-29": [
|
||||
"09:30",
|
||||
"16:00"
|
||||
]
|
||||
},
|
||||
"2": {
|
||||
"2026-10-06": ["10:00", "14:00", "16:00"],
|
||||
"2026-10-09": ["09:00", "11:00"],
|
||||
"2026-10-13": ["10:30", "15:00"],
|
||||
"2026-10-16": ["09:30", "14:30"],
|
||||
"2026-10-20": ["10:00", "11:30", "16:00"],
|
||||
"2026-10-23": ["09:00", "15:30"],
|
||||
"2026-10-27": ["10:30", "14:00"],
|
||||
"2026-10-30": ["11:00", "16:00"]
|
||||
"2026-10-06": [
|
||||
"10:00",
|
||||
"14:00",
|
||||
"16:00"
|
||||
],
|
||||
"2026-10-09": [
|
||||
"09:00",
|
||||
"11:00"
|
||||
],
|
||||
"2026-10-13": [
|
||||
"10:30",
|
||||
"15:00"
|
||||
],
|
||||
"2026-10-16": [
|
||||
"09:30",
|
||||
"14:30"
|
||||
],
|
||||
"2026-10-20": [
|
||||
"10:00",
|
||||
"11:30",
|
||||
"16:00"
|
||||
],
|
||||
"2026-10-23": [
|
||||
"09:00",
|
||||
"15:30"
|
||||
],
|
||||
"2026-10-27": [
|
||||
"10:30",
|
||||
"14:00"
|
||||
],
|
||||
"2026-10-30": [
|
||||
"11:00",
|
||||
"16:00"
|
||||
]
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue