Adds Online Booking configuration and preview components
Introduces comprehensive online booking feature with: - Localization support for booking settings - ViewComponents for booking URL, settings, company info, hours, and preview - Responsive preview with device toggle functionality - Integrated with settings page and translation files Enhances application's online booking configuration interface
This commit is contained in:
Janus C. H. Knudsen
parent
eba6bd646d
commit
435d9f11b7
17 changed files with 891 additions and 25 deletions
|
|
@ -5,7 +5,9 @@
|
|||
"Bash(npm run build:*)",
|
||||
"Bash(node -e:*)",
|
||||
"Bash(dir /s /b \"C:\\\\Users\\\\Janus Knudsen\\\\source\\\\swp-repos\\\\PlanTempus\")",
|
||||
"Bash(findstr:*)"
|
||||
"Bash(findstr:*)",
|
||||
"Bash(dir \"C:\\\\Users\\\\Janus Knudsen\\\\source\\\\swp-repos\\\\PlanTempus\\\\PlanTempus.Application\\\\wwwroot\\\\*.html\")",
|
||||
"Bash(dir /s /b \"C:\\\\Users\\\\Janus Knudsen\\\\source\\\\swp-repos\\\\PlanTempus\\\\PlanTempus.Application\\\\Features\\\\OnlineBooking\\\\*.cs\" \"C:\\\\Users\\\\Janus Knudsen\\\\source\\\\swp-repos\\\\PlanTempus\\\\PlanTempus.Application\\\\Features\\\\OnlineBooking\\\\*.cshtml\")"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -707,5 +707,60 @@
|
|||
"noData": "Ingen økonomiske data tilgængelige"
|
||||
}
|
||||
}
|
||||
},
|
||||
"onlineBooking": {
|
||||
"title": "Online Booking",
|
||||
"subtitle": "Konfigurer og preview din booking-side",
|
||||
"status": {
|
||||
"active": "Aktiv",
|
||||
"inactive": "Inaktiv"
|
||||
},
|
||||
"url": {
|
||||
"title": "Booking URL",
|
||||
"copy": "Kopiér",
|
||||
"open": "Åbn i ny fane"
|
||||
},
|
||||
"settings": {
|
||||
"title": "Booking-indstillinger",
|
||||
"enableBooking": "Aktivér online booking",
|
||||
"enableBookingDesc": "Tillad kunder at booke tider online",
|
||||
"bookAhead": "Book frem i tiden",
|
||||
"minNotice": "Minimum varsel",
|
||||
"cancelDeadline": "Aflysningsfrist"
|
||||
},
|
||||
"company": {
|
||||
"title": "Virksomhedsoplysninger",
|
||||
"edit": "Rediger",
|
||||
"name": "Navn",
|
||||
"address": "Adresse",
|
||||
"zipCity": "Postnr + By",
|
||||
"phone": "Telefon",
|
||||
"email": "Email"
|
||||
},
|
||||
"hours": {
|
||||
"title": "Åbningstider",
|
||||
"edit": "Rediger",
|
||||
"closed": "Lukket"
|
||||
},
|
||||
"preview": {
|
||||
"title": "Preview",
|
||||
"desktop": "Desktop",
|
||||
"tablet": "Tablet",
|
||||
"mobile": "Mobil"
|
||||
},
|
||||
"allSettings": "Alle indstillinger"
|
||||
},
|
||||
"settings": {
|
||||
"title": "Indstillinger",
|
||||
"tabs": {
|
||||
"company": "Virksomhed",
|
||||
"calendar": "Kalender",
|
||||
"booking": "Online Booking",
|
||||
"billing": "Faktura & Kvittering",
|
||||
"reminders": "Påmindelser",
|
||||
"payments": "Betalinger",
|
||||
"modules": "Moduler",
|
||||
"tracking": "Tracking"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,33 @@
|
|||
<swp-card>
|
||||
<swp-card-header>
|
||||
<swp-card-title>
|
||||
<i class="ph ph-buildings"></i>
|
||||
<span localize="onlineBooking.company.title">Virksomhedsoplysninger</span>
|
||||
</swp-card-title>
|
||||
<swp-section-action href="/indstillinger" localize="onlineBooking.company.edit">Rediger</swp-section-action>
|
||||
</swp-card-header>
|
||||
<swp-card-content>
|
||||
<swp-edit-section>
|
||||
<swp-edit-row>
|
||||
<swp-edit-label localize="onlineBooking.company.name">Navn</swp-edit-label>
|
||||
<swp-edit-value>Salon Beauty</swp-edit-value>
|
||||
</swp-edit-row>
|
||||
<swp-edit-row>
|
||||
<swp-edit-label localize="onlineBooking.company.address">Adresse</swp-edit-label>
|
||||
<swp-edit-value>Hovedgaden 123</swp-edit-value>
|
||||
</swp-edit-row>
|
||||
<swp-edit-row>
|
||||
<swp-edit-label localize="onlineBooking.company.zipCity">Postnr + By</swp-edit-label>
|
||||
<swp-edit-value>2100 København Ø</swp-edit-value>
|
||||
</swp-edit-row>
|
||||
<swp-edit-row>
|
||||
<swp-edit-label localize="onlineBooking.company.phone">Telefon</swp-edit-label>
|
||||
<swp-edit-value>+45 12 34 56 78</swp-edit-value>
|
||||
</swp-edit-row>
|
||||
<swp-edit-row>
|
||||
<swp-edit-label localize="onlineBooking.company.email">Email</swp-edit-label>
|
||||
<swp-edit-value>kontakt@salonbeauty.dk</swp-edit-value>
|
||||
</swp-edit-row>
|
||||
</swp-edit-section>
|
||||
</swp-card-content>
|
||||
</swp-card>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
using Microsoft.AspNetCore.Mvc;
|
||||
|
||||
namespace PlanTempus.Application.Features.OnlineBooking.Components;
|
||||
|
||||
/// <summary>
|
||||
/// ViewComponent for displaying company information used in booking.
|
||||
/// </summary>
|
||||
public class OnlineBookingCompanyViewComponent : ViewComponent
|
||||
{
|
||||
public IViewComponentResult Invoke()
|
||||
{
|
||||
return View();
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
<swp-card>
|
||||
<swp-card-header>
|
||||
<swp-card-title>
|
||||
<i class="ph ph-clock"></i>
|
||||
<span localize="onlineBooking.hours.title">Åbningstider</span>
|
||||
</swp-card-title>
|
||||
<swp-section-action href="/indstillinger" localize="onlineBooking.hours.edit">Rediger</swp-section-action>
|
||||
</swp-card-header>
|
||||
<swp-card-content>
|
||||
<swp-hours-table>
|
||||
<swp-hours-row>
|
||||
<swp-hours-day localize="employees.detail.hours.monday">Mandag</swp-hours-day>
|
||||
<swp-toggle-slider data-value="yes">
|
||||
<swp-toggle-option>Ja</swp-toggle-option>
|
||||
<swp-toggle-option>Nej</swp-toggle-option>
|
||||
</swp-toggle-slider>
|
||||
<swp-hours-time>
|
||||
<input type="time" value="09:00">
|
||||
<span>-</span>
|
||||
<input type="time" value="17:00">
|
||||
</swp-hours-time>
|
||||
</swp-hours-row>
|
||||
<swp-hours-row>
|
||||
<swp-hours-day localize="employees.detail.hours.tuesday">Tirsdag</swp-hours-day>
|
||||
<swp-toggle-slider data-value="yes">
|
||||
<swp-toggle-option>Ja</swp-toggle-option>
|
||||
<swp-toggle-option>Nej</swp-toggle-option>
|
||||
</swp-toggle-slider>
|
||||
<swp-hours-time>
|
||||
<input type="time" value="09:00">
|
||||
<span>-</span>
|
||||
<input type="time" value="17:00">
|
||||
</swp-hours-time>
|
||||
</swp-hours-row>
|
||||
<swp-hours-row>
|
||||
<swp-hours-day localize="employees.detail.hours.wednesday">Onsdag</swp-hours-day>
|
||||
<swp-toggle-slider data-value="yes">
|
||||
<swp-toggle-option>Ja</swp-toggle-option>
|
||||
<swp-toggle-option>Nej</swp-toggle-option>
|
||||
</swp-toggle-slider>
|
||||
<swp-hours-time>
|
||||
<input type="time" value="09:00">
|
||||
<span>-</span>
|
||||
<input type="time" value="17:00">
|
||||
</swp-hours-time>
|
||||
</swp-hours-row>
|
||||
<swp-hours-row>
|
||||
<swp-hours-day localize="employees.detail.hours.thursday">Torsdag</swp-hours-day>
|
||||
<swp-toggle-slider data-value="yes">
|
||||
<swp-toggle-option>Ja</swp-toggle-option>
|
||||
<swp-toggle-option>Nej</swp-toggle-option>
|
||||
</swp-toggle-slider>
|
||||
<swp-hours-time>
|
||||
<input type="time" value="09:00">
|
||||
<span>-</span>
|
||||
<input type="time" value="19:00">
|
||||
</swp-hours-time>
|
||||
</swp-hours-row>
|
||||
<swp-hours-row>
|
||||
<swp-hours-day localize="employees.detail.hours.friday">Fredag</swp-hours-day>
|
||||
<swp-toggle-slider data-value="yes">
|
||||
<swp-toggle-option>Ja</swp-toggle-option>
|
||||
<swp-toggle-option>Nej</swp-toggle-option>
|
||||
</swp-toggle-slider>
|
||||
<swp-hours-time>
|
||||
<input type="time" value="09:00">
|
||||
<span>-</span>
|
||||
<input type="time" value="17:00">
|
||||
</swp-hours-time>
|
||||
</swp-hours-row>
|
||||
<swp-hours-row>
|
||||
<swp-hours-day localize="employees.detail.hours.saturday">Lørdag</swp-hours-day>
|
||||
<swp-toggle-slider data-value="yes">
|
||||
<swp-toggle-option>Ja</swp-toggle-option>
|
||||
<swp-toggle-option>Nej</swp-toggle-option>
|
||||
</swp-toggle-slider>
|
||||
<swp-hours-time>
|
||||
<input type="time" value="10:00">
|
||||
<span>-</span>
|
||||
<input type="time" value="14:00">
|
||||
</swp-hours-time>
|
||||
</swp-hours-row>
|
||||
<swp-hours-row>
|
||||
<swp-hours-day localize="employees.detail.hours.sunday">Søndag</swp-hours-day>
|
||||
<swp-toggle-slider data-value="no">
|
||||
<swp-toggle-option>Ja</swp-toggle-option>
|
||||
<swp-toggle-option>Nej</swp-toggle-option>
|
||||
</swp-toggle-slider>
|
||||
<swp-hours-closed localize="onlineBooking.hours.closed">Lukket</swp-hours-closed>
|
||||
</swp-hours-row>
|
||||
</swp-hours-table>
|
||||
</swp-card-content>
|
||||
</swp-card>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
using Microsoft.AspNetCore.Mvc;
|
||||
|
||||
namespace PlanTempus.Application.Features.OnlineBooking.Components;
|
||||
|
||||
/// <summary>
|
||||
/// ViewComponent for displaying opening hours used in booking.
|
||||
/// </summary>
|
||||
public class OnlineBookingHoursViewComponent : ViewComponent
|
||||
{
|
||||
public IViewComponentResult Invoke()
|
||||
{
|
||||
return View();
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,130 @@
|
|||
<swp-online-booking-preview-container>
|
||||
<swp-preview-header>
|
||||
<swp-preview-title>
|
||||
<i class="ph ph-eye"></i>
|
||||
<span localize="onlineBooking.preview.title">Preview</span>
|
||||
</swp-preview-title>
|
||||
<swp-device-toggle>
|
||||
<swp-device-btn class="active" data-device="desktop" title="Desktop">
|
||||
<i class="ph ph-desktop"></i>
|
||||
</swp-device-btn>
|
||||
<swp-device-btn data-device="tablet" title="Tablet">
|
||||
<i class="ph ph-device-tablet"></i>
|
||||
</swp-device-btn>
|
||||
<swp-device-btn data-device="mobile" title="Mobil">
|
||||
<i class="ph ph-device-mobile"></i>
|
||||
</swp-device-btn>
|
||||
</swp-device-toggle>
|
||||
</swp-preview-header>
|
||||
|
||||
<swp-preview-frame data-device="desktop">
|
||||
<swp-preview-content>
|
||||
<!-- Placeholder booking UI -->
|
||||
<swp-booking-demo>
|
||||
<swp-booking-demo-header>
|
||||
<swp-booking-demo-logo>SB</swp-booking-demo-logo>
|
||||
<swp-booking-demo-info>
|
||||
<h2>Salon Beauty</h2>
|
||||
<p>Hovedgaden 123, 2100 København Ø</p>
|
||||
</swp-booking-demo-info>
|
||||
</swp-booking-demo-header>
|
||||
|
||||
<swp-booking-demo-section>
|
||||
<h3>Vælg service</h3>
|
||||
<swp-booking-demo-services>
|
||||
<swp-booking-demo-service class="selected">
|
||||
<span class="name">Dame klip</span>
|
||||
<span class="meta">45 min · 450 kr</span>
|
||||
</swp-booking-demo-service>
|
||||
<swp-booking-demo-service>
|
||||
<span class="name">Herre klip</span>
|
||||
<span class="meta">30 min · 350 kr</span>
|
||||
</swp-booking-demo-service>
|
||||
<swp-booking-demo-service>
|
||||
<span class="name">Farvning</span>
|
||||
<span class="meta">90 min · 850 kr</span>
|
||||
</swp-booking-demo-service>
|
||||
<swp-booking-demo-service>
|
||||
<span class="name">Balayage</span>
|
||||
<span class="meta">120 min · 1.450 kr</span>
|
||||
</swp-booking-demo-service>
|
||||
</swp-booking-demo-services>
|
||||
</swp-booking-demo-section>
|
||||
|
||||
<swp-booking-demo-section>
|
||||
<h3>Vælg medarbejder</h3>
|
||||
<swp-booking-demo-employees>
|
||||
<swp-booking-demo-employee class="selected">
|
||||
<swp-avatar class="size-sm">MJ</swp-avatar>
|
||||
<span>Maria Jensen</span>
|
||||
</swp-booking-demo-employee>
|
||||
<swp-booking-demo-employee>
|
||||
<swp-avatar class="size-sm purple">AH</swp-avatar>
|
||||
<span>Anna Hansen</span>
|
||||
</swp-booking-demo-employee>
|
||||
<swp-booking-demo-employee>
|
||||
<swp-avatar class="size-sm blue">LP</swp-avatar>
|
||||
<span>Louise Petersen</span>
|
||||
</swp-booking-demo-employee>
|
||||
</swp-booking-demo-employees>
|
||||
</swp-booking-demo-section>
|
||||
|
||||
<swp-booking-demo-section>
|
||||
<h3>Vælg dato og tid</h3>
|
||||
<swp-booking-demo-calendar>
|
||||
<swp-booking-demo-month>Januar 2026</swp-booking-demo-month>
|
||||
<swp-booking-demo-days>
|
||||
<span class="day-header">Ma</span>
|
||||
<span class="day-header">Ti</span>
|
||||
<span class="day-header">On</span>
|
||||
<span class="day-header">To</span>
|
||||
<span class="day-header">Fr</span>
|
||||
<span class="day-header">Lø</span>
|
||||
<span class="day-header">Sø</span>
|
||||
<span class="day other">27</span>
|
||||
<span class="day other">28</span>
|
||||
<span class="day other">29</span>
|
||||
<span class="day other">30</span>
|
||||
<span class="day other">31</span>
|
||||
<span class="day">1</span>
|
||||
<span class="day">2</span>
|
||||
<span class="day">3</span>
|
||||
<span class="day">4</span>
|
||||
<span class="day">5</span>
|
||||
<span class="day">6</span>
|
||||
<span class="day">7</span>
|
||||
<span class="day">8</span>
|
||||
<span class="day">9</span>
|
||||
<span class="day">10</span>
|
||||
<span class="day">11</span>
|
||||
<span class="day">12</span>
|
||||
<span class="day">13</span>
|
||||
<span class="day selected">14</span>
|
||||
<span class="day">15</span>
|
||||
<span class="day">16</span>
|
||||
</swp-booking-demo-days>
|
||||
</swp-booking-demo-calendar>
|
||||
</swp-booking-demo-section>
|
||||
|
||||
<swp-booking-demo-footer>
|
||||
<swp-btn class="primary full-width">Book tid</swp-btn>
|
||||
</swp-booking-demo-footer>
|
||||
</swp-booking-demo>
|
||||
</swp-preview-content>
|
||||
</swp-preview-frame>
|
||||
</swp-online-booking-preview-container>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const deviceBtns = document.querySelectorAll('swp-device-btn');
|
||||
const previewFrame = document.querySelector('swp-preview-frame');
|
||||
|
||||
deviceBtns.forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
deviceBtns.forEach(b => b.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
previewFrame.setAttribute('data-device', btn.getAttribute('data-device'));
|
||||
});
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
using Microsoft.AspNetCore.Mvc;
|
||||
|
||||
namespace PlanTempus.Application.Features.OnlineBooking.Components;
|
||||
|
||||
/// <summary>
|
||||
/// ViewComponent for the booking preview iframe with device toggle.
|
||||
/// </summary>
|
||||
public class OnlineBookingPreviewViewComponent : ViewComponent
|
||||
{
|
||||
public IViewComponentResult Invoke()
|
||||
{
|
||||
return View();
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<swp-card>
|
||||
<swp-card-header>
|
||||
<swp-card-title>
|
||||
<i class="ph ph-sliders"></i>
|
||||
<span localize="onlineBooking.settings.title">Booking-indstillinger</span>
|
||||
</swp-card-title>
|
||||
</swp-card-header>
|
||||
<swp-card-content>
|
||||
<swp-toggle-row>
|
||||
<swp-toggle-info>
|
||||
<swp-toggle-label localize="onlineBooking.settings.enableBooking">Aktivér online booking</swp-toggle-label>
|
||||
<swp-toggle-desc localize="onlineBooking.settings.enableBookingDesc">Tillad kunder at booke tider online</swp-toggle-desc>
|
||||
</swp-toggle-info>
|
||||
<swp-toggle-slider data-value="yes">
|
||||
<swp-toggle-option>Ja</swp-toggle-option>
|
||||
<swp-toggle-option>Nej</swp-toggle-option>
|
||||
</swp-toggle-slider>
|
||||
</swp-toggle-row>
|
||||
|
||||
<swp-section-divider></swp-section-divider>
|
||||
|
||||
<swp-edit-section>
|
||||
<swp-edit-row class="wide-label">
|
||||
<swp-edit-label localize="onlineBooking.settings.bookAhead">Book frem i tiden</swp-edit-label>
|
||||
<swp-edit-select>
|
||||
<select id="booking-ahead">
|
||||
<option value="7">7 dage</option>
|
||||
<option value="14">14 dage</option>
|
||||
<option value="30" selected>30 dage</option>
|
||||
<option value="60">60 dage</option>
|
||||
<option value="90">90 dage</option>
|
||||
</select>
|
||||
</swp-edit-select>
|
||||
</swp-edit-row>
|
||||
<swp-edit-row class="wide-label">
|
||||
<swp-edit-label localize="onlineBooking.settings.minNotice">Minimum varsel</swp-edit-label>
|
||||
<swp-edit-select>
|
||||
<select id="min-notice">
|
||||
<option value="0">Ingen begrænsning</option>
|
||||
<option value="1">1 time</option>
|
||||
<option value="2" selected>2 timer</option>
|
||||
<option value="4">4 timer</option>
|
||||
<option value="24">24 timer</option>
|
||||
</select>
|
||||
</swp-edit-select>
|
||||
</swp-edit-row>
|
||||
<swp-edit-row class="wide-label">
|
||||
<swp-edit-label localize="onlineBooking.settings.cancelDeadline">Aflysningsfrist</swp-edit-label>
|
||||
<swp-edit-select>
|
||||
<select id="cancel-deadline">
|
||||
<option value="0">Ingen frist</option>
|
||||
<option value="2">2 timer før</option>
|
||||
<option value="4">4 timer før</option>
|
||||
<option value="24" selected>24 timer før</option>
|
||||
<option value="48">48 timer før</option>
|
||||
</select>
|
||||
</swp-edit-select>
|
||||
</swp-edit-row>
|
||||
</swp-edit-section>
|
||||
</swp-card-content>
|
||||
</swp-card>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
using Microsoft.AspNetCore.Mvc;
|
||||
|
||||
namespace PlanTempus.Application.Features.OnlineBooking.Components;
|
||||
|
||||
/// <summary>
|
||||
/// ViewComponent for online booking settings (toggle, booking ahead, notice, cancellation).
|
||||
/// </summary>
|
||||
public class OnlineBookingSettingsViewComponent : ViewComponent
|
||||
{
|
||||
public IViewComponentResult Invoke()
|
||||
{
|
||||
return View();
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<swp-card>
|
||||
<swp-card-header>
|
||||
<swp-card-title>
|
||||
<i class="ph ph-link"></i>
|
||||
<span localize="onlineBooking.url.title">Booking URL</span>
|
||||
</swp-card-title>
|
||||
</swp-card-header>
|
||||
<swp-card-content>
|
||||
<swp-url-field>
|
||||
<input type="text" value="https://book.plantempus.dk/salonbeauty" readonly id="booking-url">
|
||||
<swp-url-copy title="Kopier link" onclick="copyBookingUrl()">
|
||||
<i class="ph ph-copy"></i>
|
||||
</swp-url-copy>
|
||||
</swp-url-field>
|
||||
<swp-url-actions>
|
||||
<swp-btn class="secondary sm" onclick="window.open(document.getElementById('booking-url').value, '_blank')">
|
||||
<i class="ph ph-arrow-square-out"></i>
|
||||
<span localize="onlineBooking.url.open">Åbn i ny fane</span>
|
||||
</swp-btn>
|
||||
</swp-url-actions>
|
||||
</swp-card-content>
|
||||
</swp-card>
|
||||
|
||||
<script>
|
||||
function copyBookingUrl() {
|
||||
const input = document.getElementById('booking-url');
|
||||
navigator.clipboard.writeText(input.value).then(() => {
|
||||
// Could show a toast notification here
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
using Microsoft.AspNetCore.Mvc;
|
||||
|
||||
namespace PlanTempus.Application.Features.OnlineBooking.Components;
|
||||
|
||||
/// <summary>
|
||||
/// ViewComponent for displaying the booking URL with copy and open actions.
|
||||
/// </summary>
|
||||
public class OnlineBookingUrlViewComponent : ViewComponent
|
||||
{
|
||||
public IViewComponentResult Invoke()
|
||||
{
|
||||
return View();
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
@page "/online-booking"
|
||||
@model PlanTempus.Application.Features.OnlineBooking.Pages.IndexModel
|
||||
@{
|
||||
ViewData["Title"] = "Online Booking";
|
||||
}
|
||||
|
||||
<swp-sticky-header>
|
||||
<swp-header-content>
|
||||
<swp-page-header>
|
||||
<swp-page-title>
|
||||
<h1 localize="onlineBooking.title">Online Booking</h1>
|
||||
<p localize="onlineBooking.subtitle">Konfigurer og preview din booking-side</p>
|
||||
</swp-page-title>
|
||||
<swp-page-actions>
|
||||
<swp-status-indicator data-active="true">
|
||||
<i class="ph ph-check-circle icon"></i>
|
||||
<span localize="onlineBooking.status.active">Aktiv</span>
|
||||
</swp-status-indicator>
|
||||
</swp-page-actions>
|
||||
</swp-page-header>
|
||||
</swp-header-content>
|
||||
</swp-sticky-header>
|
||||
|
||||
<swp-page-container>
|
||||
<swp-online-booking-layout>
|
||||
<!-- Column 1: Settings -->
|
||||
<swp-online-booking-settings>
|
||||
@await Component.InvokeAsync("OnlineBookingUrl")
|
||||
@await Component.InvokeAsync("OnlineBookingSettings")
|
||||
@await Component.InvokeAsync("OnlineBookingCompany")
|
||||
@await Component.InvokeAsync("OnlineBookingHours")
|
||||
|
||||
<swp-all-settings-link href="/indstillinger">
|
||||
<span localize="onlineBooking.allSettings">Alle indstillinger</span>
|
||||
<i class="ph ph-arrow-right"></i>
|
||||
</swp-all-settings-link>
|
||||
</swp-online-booking-settings>
|
||||
|
||||
<!-- Column 2: Preview -->
|
||||
@await Component.InvokeAsync("OnlineBookingPreview")
|
||||
</swp-online-booking-layout>
|
||||
</swp-page-container>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
using Microsoft.AspNetCore.Mvc.RazorPages;
|
||||
|
||||
namespace PlanTempus.Application.Features.OnlineBooking.Pages;
|
||||
|
||||
public class IndexModel : PageModel
|
||||
{
|
||||
public void OnGet()
|
||||
{
|
||||
}
|
||||
}
|
||||
|
|
@ -18,18 +18,10 @@
|
|||
|
||||
<!-- Tab Bar -->
|
||||
<swp-tab-bar>
|
||||
<swp-tab class="active" data-tab="general">
|
||||
<i class="ph ph-buildings"></i>
|
||||
<span localize="settings.tabs.company">Virksomhed</span>
|
||||
</swp-tab>
|
||||
<swp-tab data-tab="calendar">
|
||||
<swp-tab class="active" data-tab="calendar">
|
||||
<i class="ph ph-calendar"></i>
|
||||
<span localize="settings.tabs.calendar">Kalender</span>
|
||||
</swp-tab>
|
||||
<swp-tab data-tab="booking">
|
||||
<i class="ph ph-globe"></i>
|
||||
<span localize="settings.tabs.booking">Online Booking</span>
|
||||
</swp-tab>
|
||||
<swp-tab data-tab="billing">
|
||||
<i class="ph ph-receipt"></i>
|
||||
<span localize="settings.tabs.billing">Faktura & Kvittering</span>
|
||||
|
|
@ -53,27 +45,13 @@
|
|||
</swp-tab-bar>
|
||||
</swp-sticky-header>
|
||||
|
||||
<!-- Tab Content: Virksomhed -->
|
||||
<swp-tab-content data-tab="general" class="active">
|
||||
<swp-page-container>
|
||||
@await Component.InvokeAsync("SettingsGeneral")
|
||||
</swp-page-container>
|
||||
</swp-tab-content>
|
||||
|
||||
<!-- Tab Content: Kalender -->
|
||||
<swp-tab-content data-tab="calendar">
|
||||
<swp-tab-content data-tab="calendar" class="active">
|
||||
<swp-page-container>
|
||||
@await Component.InvokeAsync("SettingsCalendar")
|
||||
</swp-page-container>
|
||||
</swp-tab-content>
|
||||
|
||||
<!-- Tab Content: Online Booking -->
|
||||
<swp-tab-content data-tab="booking">
|
||||
<swp-page-container>
|
||||
@await Component.InvokeAsync("SettingsBooking")
|
||||
</swp-page-container>
|
||||
</swp-tab-content>
|
||||
|
||||
<!-- Tab Content: Faktura & Kvittering -->
|
||||
<swp-tab-content data-tab="billing">
|
||||
<swp-page-container>
|
||||
|
|
|
|||
|
|
@ -37,6 +37,7 @@
|
|||
<link rel="stylesheet" href="~/css/customers.css">
|
||||
<link rel="stylesheet" href="~/css/suppliers.css">
|
||||
<link rel="stylesheet" href="~/css/settings.css">
|
||||
<link rel="stylesheet" href="~/css/online-booking.css">
|
||||
<link rel="stylesheet" href="~/css/reports.css">
|
||||
@await RenderSectionAsync("Styles", required: false)
|
||||
</head>
|
||||
|
|
|
|||
360
PlanTempus.Application/wwwroot/css/online-booking.css
Normal file
360
PlanTempus.Application/wwwroot/css/online-booking.css
Normal file
|
|
@ -0,0 +1,360 @@
|
|||
/**
|
||||
* Online Booking - Preview and Settings page
|
||||
*
|
||||
* Feature-specific styling only.
|
||||
* Reuses: swp-card, swp-card-header, swp-card-title, swp-edit-section,
|
||||
* swp-toggle-row, swp-url-field, swp-hours-table (components.css, settings.css)
|
||||
*/
|
||||
|
||||
/* ===========================================
|
||||
PAGE LAYOUT (Two-column)
|
||||
=========================================== */
|
||||
swp-online-booking-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--card-gap);
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
swp-online-booking-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
swp-online-booking-preview-container {
|
||||
order: -1;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
SETTINGS COLUMN
|
||||
=========================================== */
|
||||
swp-online-booking-settings {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--card-gap);
|
||||
}
|
||||
|
||||
/* URL Actions (below URL field) */
|
||||
swp-url-actions {
|
||||
display: flex;
|
||||
gap: var(--spacing-3);
|
||||
margin-top: var(--spacing-4);
|
||||
}
|
||||
|
||||
/* All Settings Link */
|
||||
swp-all-settings-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--spacing-2);
|
||||
padding: var(--spacing-4);
|
||||
color: var(--color-teal);
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: var(--font-weight-medium);
|
||||
cursor: pointer;
|
||||
transition: opacity var(--transition-fast);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
& i {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
PREVIEW COLUMN
|
||||
=========================================== */
|
||||
swp-online-booking-preview-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: sticky;
|
||||
top: calc(var(--sticky-header-height, 120px) + var(--section-gap));
|
||||
}
|
||||
|
||||
swp-preview-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--spacing-4) var(--spacing-5);
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-bottom: none;
|
||||
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
|
||||
}
|
||||
|
||||
swp-preview-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-3);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
text-transform: uppercase;
|
||||
color: var(--color-text);
|
||||
|
||||
& i {
|
||||
font-size: 18px;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
DEVICE TOGGLE
|
||||
=========================================== */
|
||||
swp-device-toggle {
|
||||
display: flex;
|
||||
gap: var(--spacing-1);
|
||||
padding: var(--spacing-1);
|
||||
background: var(--color-background-alt);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
swp-device-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: transparent;
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
|
||||
& i {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: var(--color-teal);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
PREVIEW FRAME
|
||||
=========================================== */
|
||||
swp-preview-frame {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: var(--spacing-6);
|
||||
background: var(--color-background-alt);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
|
||||
min-height: 600px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
swp-preview-content {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-lg);
|
||||
overflow: hidden;
|
||||
transition: all var(--transition-normal);
|
||||
}
|
||||
|
||||
/* Device variants */
|
||||
swp-preview-frame[data-device="desktop"] swp-preview-content {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
swp-preview-frame[data-device="tablet"] swp-preview-content {
|
||||
max-width: 768px;
|
||||
}
|
||||
|
||||
swp-preview-frame[data-device="mobile"] swp-preview-content {
|
||||
max-width: 375px;
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
BOOKING DEMO (Placeholder UI)
|
||||
=========================================== */
|
||||
swp-booking-demo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
swp-booking-demo-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-4);
|
||||
padding: var(--spacing-6);
|
||||
background: linear-gradient(135deg, var(--color-teal), #00796b);
|
||||
color: white;
|
||||
}
|
||||
|
||||
swp-booking-demo-logo {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
||||
swp-booking-demo-info {
|
||||
& h2 {
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
margin: 0 0 var(--spacing-1) 0;
|
||||
}
|
||||
|
||||
& p {
|
||||
font-size: var(--font-size-sm);
|
||||
opacity: 0.9;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
swp-booking-demo-section {
|
||||
padding: var(--spacing-5);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
|
||||
& h3 {
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
text-transform: uppercase;
|
||||
color: var(--color-text-secondary);
|
||||
margin: 0 0 var(--spacing-4) 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Services list */
|
||||
swp-booking-demo-services {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-2);
|
||||
}
|
||||
|
||||
swp-booking-demo-service {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: var(--spacing-3) var(--spacing-4);
|
||||
background: var(--color-background-alt);
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
|
||||
&:hover {
|
||||
background: var(--color-background-hover);
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: var(--bg-teal-strong);
|
||||
border: 1px solid var(--color-teal);
|
||||
}
|
||||
|
||||
& .name {
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
& .meta {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Employees list */
|
||||
swp-booking-demo-employees {
|
||||
display: flex;
|
||||
gap: var(--spacing-3);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
swp-booking-demo-employee {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-2);
|
||||
padding: var(--spacing-2) var(--spacing-4) var(--spacing-2) var(--spacing-2);
|
||||
background: var(--color-background-alt);
|
||||
border-radius: var(--radius-pill);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
|
||||
&:hover {
|
||||
background: var(--color-background-hover);
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: var(--bg-teal-strong);
|
||||
border: 1px solid var(--color-teal);
|
||||
}
|
||||
|
||||
& span {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text);
|
||||
}
|
||||
}
|
||||
|
||||
/* Calendar */
|
||||
swp-booking-demo-calendar {
|
||||
background: var(--color-background-alt);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--spacing-4);
|
||||
}
|
||||
|
||||
swp-booking-demo-month {
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-text);
|
||||
margin-bottom: var(--spacing-4);
|
||||
}
|
||||
|
||||
swp-booking-demo-days {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
gap: var(--spacing-1);
|
||||
text-align: center;
|
||||
|
||||
& .day-header {
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text-secondary);
|
||||
padding: var(--spacing-2);
|
||||
}
|
||||
|
||||
& .day {
|
||||
font-size: var(--font-size-sm);
|
||||
padding: var(--spacing-2);
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
|
||||
&:hover {
|
||||
background: var(--color-background-hover);
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: var(--color-teal);
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.other {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
swp-booking-demo-footer {
|
||||
padding: var(--spacing-5);
|
||||
margin-top: auto;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue