2 let breadcrumbs = await _require('/_lib/breadcrumbs.jst')
3 let fa_envelope = await env.site.get_min_svg('/_svg/fa_envelope.svg')
4 let get_placeholder = await _require('/_lib/get_placeholder.jst')
5 let get_session = await _require('/_lib/get_session.jst')
6 let icon_cross = await env.site.get_min_svg('/_svg/icon_cross.svg')
7 let icon_tick = await env.site.get_min_svg('/_svg/icon_tick.svg')
8 let navbar = await _require('/_lib/navbar.jst')
10 // preload draft details if any
11 let transaction = await env.site.database.Transaction()
15 let root = await transaction.get({})
16 let session = await get_session(env, root)
18 placeholder = await get_placeholder(env, session)
20 contact_draft = await session.get_json('contact_draft')
21 if (contact_draft === undefined || env.now >= contact_draft.expires)
24 await transaction.commit()
27 transaction.rollback()
37 await breadcrumbs(env, _out)
39 p {'Do you require more information, or assistance with integrating the projects on this site? We’d love to hear from you.'}
45 label.form-label(for="given-names") {'Given names *'}
46 input.form-control#given-names(type="text" value=contact_draft ? contact_draft.given_names : '' placeholder=placeholder.given_names required maxlength=256) {}
47 div.invalid-feedback {'Please enter a name we can address you by.'}
52 label.form-label(for="family-name") {'Family name'}
53 input.form-control#family-name(type="text" value=contact_draft ? contact_draft.family_name : '' placeholder=placeholder.family_name maxlength=256) {}
60 label.form-label(for="company") {'Company'}
61 input.form-control#company(type="company" value=contact_draft ? contact_draft.company : '' placeholder=placeholder.company maxlength=256) {}
66 label.form-label(for="email") {'Email *'}
67 input.form-control#email(type="email" value=contact_draft ? contact_draft.email : '' placeholder=placeholder.email required maxlength=256) {}
68 div.invalid-feedback {'Please enter an email address we can contact you on.'}
75 label.form-label(for="message1") {'Message *'}
76 textarea.form-control#message1(placeholder="I would like to..." required rows=6 maxlength=65536) {
78 `${contact_draft.message}`
80 div.invalid-feedback {'Please let us know your application or question.'}
86 if (contact_draft !== null)
87 button.btn.btn-success#send-enquiry(type="button") {
88 div.icon24-outer.mr-2#icon {
89 div.icon24-inner {_out.push(fa_envelope)}
91 div.icon24-outer.mr-2#tick(hidden) {
92 div.icon24-inner {_out.push(icon_tick)}
94 div.icon24-outer.mr-2#cross(hidden) {
95 div.icon24-inner {_out.push(icon_cross)}
97 div.icon24-outer.mr-2#spinner(hidden) {
99 div.spinner-border.spinner-border-sm(role="status") {}
105 button.btn.btn-success#send-enquiry(type="button" disabled) {
106 div.icon24-outer.mr-2#icon {
107 div.icon24-inner {_out.push(fa_envelope)}
109 div.icon24-outer.mr-2#tick(hidden) {
110 div.icon24-inner {_out.push(icon_tick)}
112 div.icon24-outer.mr-2#cross(hidden) {
113 div.icon24-inner {_out.push(icon_cross)}
115 div.icon24-outer.mr-2#spinner(hidden) {
117 div.spinner-border.spinner-border-sm(role="status") {}
123 p.'mt-3'.mb-0#message(hidden) {}
125 p.text-muted.mt-3 {'* These fields are required.'}
129 //script(src="/js/utils.js") {}
132 document.addEventListener(
135 let id_company = document.getElementById('company')
136 let id_cross = document.getElementById('cross')
137 let id_email = document.getElementById('email')
138 let id_family_name = document.getElementById('family-name')
139 let id_form = document.getElementById('form')
140 let id_given_names = document.getElementById('given-names')
141 let id_icon = document.getElementById('icon')
142 let id_message = document.getElementById('message')
143 let id_message1 = document.getElementById('message1')
144 let id_send_enquiry = document.getElementById('send-enquiry')
145 let id_spinner = document.getElementById('spinner')
146 let id_tick = document.getElementById('tick')
148 let input_semaphore = new BinarySemaphore(false)
152 await input_semaphore.acquire()
153 await new Promise(resolve => setTimeout(resolve, 3000))
154 input_semaphore.try_acquire()
156 '/api/contact/set_draft.json',
157 id_given_names.value.length === 0 &&
158 id_family_name.value.length === 0 &&
159 id_company.value.length === 0 &&
160 id_email.value.length === 0 &&
161 id_message1.value.length === 0 ?
164 given_names: id_given_names.value.slice(0, 256),
165 family_name: id_family_name.value.slice(0, 256),
166 company: id_company.value.slice(0, 256),
167 email: id_email.value.slice(0, 256).toLowerCase(),
168 message: id_message1.value.slice(0, 65536)
173 )() // ignore returned promise (start thread)
176 input_semaphore.release()
178 id_send_enquiry.disabled =
179 id_given_names.value.length === 0 &&
180 id_family_name.value.length === 0 &&
181 id_company.value.length === 0 &&
182 id_email.value.length === 0 &&
183 id_message1.value.length === 0
184 id_icon.hidden = false
185 id_tick.hidden = true
186 id_cross.hidden = true
187 id_spinner.hidden = true
188 id_message.hidden = true
191 id_given_names.addEventListener('input', edited)
192 id_family_name.addEventListener('input', edited)
193 id_company.addEventListener('input', edited)
194 id_email.addEventListener('input', edited)
195 id_message1.addEventListener('input', edited)
197 id_send_enquiry.addEventListener(
200 id_icon.hidden = false
201 id_tick.hidden = true
202 id_cross.hidden = true
203 id_spinner.hidden = true
204 // the below causes an ugly flicker, so just keep the message
205 //id_message.hidden = true
207 if (!id_form.checkValidity()) {
208 id_form.classList.add('was-validated');
210 id_icon.hidden = true
211 id_cross.hidden = false
214 id_form.classList.remove('was-validated');
216 id_icon.hidden = true
217 id_spinner.hidden = false
220 '/api/contact/send_enquiry.json',
222 given_names: id_given_names.value.slice(0, 256),
223 family_name: id_family_name.value.slice(0, 256),
224 company: id_company.value.slice(0, 256),
225 email: id_email.value.slice(0, 256).toLowerCase(),
226 message: id_message1.value.slice(0, 65536)
231 let problem = Problem.from(error)
233 id_cross.hidden = false
234 id_spinner.hidden = true
236 id_message.textContent = problem.detail
237 //id_message.classList.remove('text-success')
238 id_message.classList.add('text-danger')
239 id_message.hidden = false
242 id_tick.hidden = false
243 id_spinner.hidden = true
244 id_message.textContent = 'We have received your enquiry. We will be in touch as soon as possible.'
245 //id_message.classList.add('text-success')
246 id_message.classList.remove('text-danger')
247 id_message.hidden = false