167 lines
9.4 KiB
XML
167 lines
9.4 KiB
XML
<odoo>
|
|
<template id="appointment_type_list" name="Appointment Booking List">
|
|
<t t-call="website.layout">
|
|
<div id="wrap" class="oe_structure">
|
|
<section class="container py-5">
|
|
<h1 class="mb-4">Book an Appointment</h1>
|
|
<div t-if="not appointment_types" class="alert alert-info">
|
|
No appointment types are available right now.
|
|
</div>
|
|
<div class="row g-3">
|
|
<t t-foreach="appointment_types" t-as="appointment_type">
|
|
<div class="col-12 col-md-6 col-lg-4">
|
|
<div class="card h-100">
|
|
<div class="card-body">
|
|
<h2 class="h5 card-title" t-esc="appointment_type.name"/>
|
|
<div class="text-muted mb-3">
|
|
<span t-esc="appointment_type.duration"/> hour appointment
|
|
</div>
|
|
<div t-if="appointment_type.description" class="mb-3">
|
|
<t t-out="appointment_type.description"/>
|
|
</div>
|
|
<a class="btn btn-primary" t-att-href="'/appointments/%s' % appointment_type.id">View Times</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</t>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</t>
|
|
</template>
|
|
|
|
<template id="appointment_type_page" name="Appointment Booking Page">
|
|
<t t-call="website.layout">
|
|
<div id="wrap" class="mcs-appointment">
|
|
<section class="mcs-appt-shell">
|
|
<aside class="mcs-appt-info">
|
|
<a href="/appointments" class="mcs-appt-back">Back to appointments</a>
|
|
<span class="mcs-appt-kicker">Metatroncube consultation</span>
|
|
<h1 t-esc="appointment_type.name"/>
|
|
<div class="mcs-appt-meta">
|
|
<span><t t-esc="appointment_type.duration"/> hour appointment</span>
|
|
<span t-esc="appointment_type.user_id.name"/>
|
|
</div>
|
|
<div t-if="appointment_type.description" class="mcs-appt-description">
|
|
<t t-out="appointment_type.description"/>
|
|
</div>
|
|
<div class="mcs-appt-note">
|
|
Select a date, choose one available time, then enter your details to confirm the meeting.
|
|
</div>
|
|
</aside>
|
|
|
|
<main class="mcs-appt-booking">
|
|
<section class="mcs-appt-workspace">
|
|
<div class="mcs-appt-calendar">
|
|
<header class="mcs-appt-section-head">
|
|
<span>Step 1</span>
|
|
<h2>Select a date</h2>
|
|
</header>
|
|
<div class="mcs-appt-calendar-card">
|
|
<div class="mcs-appt-month" t-esc="selected_day.strftime('%B %Y')"/>
|
|
<div class="mcs-appt-weekdays">
|
|
<span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span>
|
|
</div>
|
|
<div class="mcs-appt-date-strip">
|
|
<t t-foreach="calendar_blanks" t-as="blank">
|
|
<span class="mcs-appt-date mcs-appt-date--blank"/>
|
|
</t>
|
|
<t t-foreach="day_options" t-as="day">
|
|
<a t-attf-class="mcs-appt-date #{'active' if day == selected_day else ''}"
|
|
t-att-href="'/appointments/%s?date=%s' % (appointment_type.id, day.isoformat())">
|
|
<strong t-esc="day.strftime('%a')"/>
|
|
<span t-esc="day.strftime('%d')"/>
|
|
<small t-esc="day.strftime('%b')"/>
|
|
</a>
|
|
</t>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mcs-appt-times">
|
|
<header class="mcs-appt-section-head">
|
|
<span>Step 2</span>
|
|
<h2>Available times</h2>
|
|
</header>
|
|
<p class="mcs-appt-selected-day" t-esc="selected_day.strftime('%A, %d %B')"/>
|
|
|
|
<div t-if="not slots" class="mcs-appt-empty">
|
|
No free slots are available on this day.
|
|
</div>
|
|
|
|
<div t-if="slots" class="mcs-appt-slot-grid">
|
|
<t t-foreach="slots" t-as="slot">
|
|
<button type="button"
|
|
t-attf-class="mcs-appt-time #{'active' if slot_index == 0 else ''}"
|
|
t-att-data-start="slot['start']"
|
|
t-att-data-stop="slot['stop']"
|
|
t-att-data-label="slot['label']">
|
|
<span t-esc="slot['label'].split(' - ')[0]"/>
|
|
<small t-esc="slot['label'].split(' - ')[1]"/>
|
|
</button>
|
|
</t>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<aside class="mcs-appt-details">
|
|
<div>
|
|
<header class="mcs-appt-section-head">
|
|
<span>Step 3</span>
|
|
<h2>Your details</h2>
|
|
</header>
|
|
<div t-if="slots" class="mcs-appt-selected-slot">
|
|
<small>Selected time</small>
|
|
<strong class="js-mcs-selected-slot" t-esc="slots[0]['label']"/>
|
|
</div>
|
|
<div t-if="not slots" class="mcs-appt-selected-slot">
|
|
<small>Selected time</small>
|
|
<strong>Choose another date</strong>
|
|
</div>
|
|
</div>
|
|
<form t-if="slots" t-att-action="'/appointments/%s/book' % appointment_type.id" method="post" class="mcs-appt-form">
|
|
<input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
|
|
<input type="hidden" name="start" class="js-mcs-start" t-att-value="slots[0]['start']"/>
|
|
<input type="hidden" name="stop" class="js-mcs-stop" t-att-value="slots[0]['stop']"/>
|
|
<div class="mcs-appt-form-grid">
|
|
<label>Name<input name="customer_name" required="required"/></label>
|
|
<label>Email<input name="customer_email" type="email" required="required"/></label>
|
|
<label>Phone<input name="customer_phone"/></label>
|
|
<label class="mcs-appt-form-wide">Notes<textarea name="notes" rows="3"/></label>
|
|
</div>
|
|
<button type="submit">Confirm Appointment</button>
|
|
</form>
|
|
</aside>
|
|
</main>
|
|
</section>
|
|
</div>
|
|
</t>
|
|
</template>
|
|
|
|
<template id="appointment_confirmed" name="Appointment Confirmed">
|
|
<t t-call="website.layout">
|
|
<div id="wrap" class="oe_structure">
|
|
<section class="container py-5">
|
|
<div class="alert alert-success">
|
|
Your appointment has been booked.
|
|
</div>
|
|
<h1 class="mb-3" t-esc="booking.appointment_type_id.name"/>
|
|
<p>
|
|
<strong>Name:</strong>
|
|
<span t-esc="booking.customer_name"/>
|
|
</p>
|
|
<p>
|
|
<strong>Email:</strong>
|
|
<span t-esc="booking.customer_email"/>
|
|
</p>
|
|
<p>
|
|
<strong>Start:</strong>
|
|
<span t-field="booking.start"/>
|
|
</p>
|
|
<a href="/appointments" class="btn btn-primary">Book another appointment</a>
|
|
</section>
|
|
</div>
|
|
</t>
|
|
</template>
|
|
</odoo>
|