Janus007/PlanTempusApp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Adds Online Booking configuration and preview components

Browse source 
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 2026-01-28 20:17:54 +01:00
parent eba6bd646d
commit 435d9f11b7
17 changed files with 891 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

130
PlanTempus.Application/Features/OnlineBooking/Components/OnlineBookingPreview/Default.cshtml Normal file
View file

@ -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>

14
PlanTempus.Application/Features/OnlineBooking/Components/OnlineBookingPreview/OnlineBookingPreviewViewComponent.cs Normal file
View file

@ -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();
}
}