import { markRaw, defineAsyncComponent } from 'vue'
import translation from 'src/i18n'
import { langToLocale } from 'src/utils/languageUtils'
export default
{
name: 'appointment',
data: { dateTime: '', duration: 0, german: { title: '', place: '', person: '', freeText: '' }, english: { title: '', place: '', person: '', freeText: '' }, errors: [] },
renderDesktop: (element, lang) => {
const durationArray = element.data.duration.toString().split('.') // [hours, fraction of hours -> minutes]
const durationHours = durationArray[0] > 0 ? `${durationArray[0]}` : `${durationArray[0]} ${translation[langToLocale(lang)].appointmentElement.hour}`
const durationMinutes = durationArray[1] > 0 ? `${('0.' + durationArray[1]) * 60}` : ''
// generate deeplinks if dateTime is in expected format DD.MM.YYYY HH:MM, else use default values
let date = new Date()
let endDate = new Date()
let title = ''
let location = ''
let description = ''
if (element.data.dateTime.match(/^\d{2}\.\d{2}\.\d{4} \d{2}:\d{2}$/)) {
date = new Date(element.data.dateTime.split(' ')[0].split('.').reverse().join('-') + 'T' + element.data.dateTime.split(' ')[1] + ':00')
endDate = new Date(date.getTime() + element.data.duration * 60 * 60 * 1000)
title = encodeURIComponent(element.data[lang].title)
location = encodeURIComponent(element.data[lang].place)
description = encodeURIComponent(element.data[lang].person + '-\n' + element.data[lang].freeText)
}
const outlookCom = `https://outlook.live.com/owa/?path=/calendar/action/compose&rru=addevent&startdt=${
date.getFullYear() + '-' +// YYYY-
String(date.getMonth() + 1).padStart(2, '0') + '-' + // MM-
String(date.getDate()).padStart(2, '0') + 'T' + // DDT
String(date.getHours()).padStart(2, '0') + ':' + // HH:
String(date.getMinutes()).padStart(2, '0') + ':' + // MM:
String(date.getSeconds()).padStart(2, '0') // SS
}&enddt=${
endDate.getFullYear() + '-' +// YYYY-
String(endDate.getMonth() + 1).padStart(2, '0') + '-' + // MM-
String(endDate.getDate()).padStart(2, '0') + 'T' + // DDT
String(endDate.getHours()).padStart(2, '0') + ':' + // HH:
String(endDate.getMinutes()).padStart(2, '0') + ':' + // MM:
String(endDate.getSeconds()).padStart(2, '0') // SS
}&subject=${title}&location=${location}&body=${description}`
const googleCalendar = `https://calendar.google.com/calendar/render?action=TEMPLATE&text=${title}&dates=${
date.getFullYear() + // YYYY
String(date.getMonth() + 1).padStart(2, '0') + // MM
String(date.getDate()).padStart(2, '0') + // DD
'T' +
String(date.getHours()).padStart(2, '0') + // HH
String(date.getMinutes()).padStart(2, '0') + // MM
'00' + // SS
'/' +
endDate.getFullYear() + // YYYY
String(endDate.getMonth() + 1).padStart(2, '0') + // MM
String(endDate.getDate()).padStart(2, '0') + // DD
'T' +
String(endDate.getHours()).padStart(2, '0') + // HH
String(endDate.getMinutes()).padStart(2, '0') + // MM
'00' // SS
}&location=${location}&details=${description}`
const office365 = outlookCom.replace('outlook.live.com', 'outlook.office.com')
return `
<tr section="${element.id}">
<td align="center">
<table align="center" width="500px" style="border: 1px solid #46003A">
<tr>
<td align="center">
<table>
<tr>
<td>
<table>
<tr>
<td>
<p style="font-size: 60px; padding-right: 10px; padding-left: 10px; margin:0px;">🕑</p>
</td>
<td>
<table align="center">
<tr>
<td>
<p style="padding-top: 5px; margin: 0px; margin-right:20px; word-break:break-all; max-width:450px; font-size: 22px;">${element.data[lang].title}</p>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td style="padding: 0px; margin: 0px;">${translation[langToLocale(lang)].appointmentElement.when}:</td>
<td style="padding: 0px; margin: 0px;">${element.data.dateTime}</td>
</tr>` + (element.data.duration > 0 ? `
<tr>
<td style="padding: 0px; margin: 0px;">${translation[langToLocale(lang)].appointmentElement.duration}:</td>
<td style="padding: 0px; margin: 0px;">
${durationHours > 0
? `${durationHours} ` +
(durationHours > 1
? translation[langToLocale(lang)].appointmentElement.hours
: translation[langToLocale(lang)].appointmentElement.hour)
: ''}
${durationMinutes > 0
? `${durationMinutes} ` +
translation[langToLocale(lang)].appointmentElement.minutes
: ''}
</td>
</tr>
` : '') + (element.data[lang].place ? `
<tr>
<td style="padding: 0px; margin: 0px;">${translation[langToLocale(lang)].appointmentElement.where}:</td>
<td style="padding: 0px; margin: 0px;">${element.data[lang].place}</td>
</tr>
` : '') + (element.data[lang].person ? `
<tr>
<td style="padding: 0px; margin: 0px;">${translation[langToLocale(lang)].appointmentElement.who}:</td>
<td style="padding: 0px; margin: 0px;">${element.data[lang].person}</td>
</tr>
` : '') + `
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
` + (element.data[lang].freeText ? `
<tr>
<td align="left" style="padding-left: 20px; padding-right: 20px; padding-top: 10px; padding-bottom: 10px; margin: 0px;">
<p style="width:450px">${element.data[lang].freeText}</p>
</td>
</tr>
` : '') + `
<tr>
<td align="center" valign="top" style="padding-left: 20px; padding-right: 10px; padding-top: 0px; padding-bottom: 20px; margin: 0px;">
<p style="padding: 0px; margin: 0px;">
<!-- insert deeplinks here -->
<a href="${outlookCom}" target="_blank" style="color: #000000; text-decoration: underline;">Outlook.com</a> |
<a href="${office365}" target="_blank" style="color: #000000; text-decoration: underline;">Office 365</a> |
<a href="${googleCalendar}" target="_blank" style="color: #000000; text-decoration: underline;">Google Calendar</a>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
`
},
renderMobile: (element, lang) => {
const durationArray = element.data.duration.toString().split('.') // [hours, fraction of hours -> minutes]
const durationHours = durationArray[0] > 0 ? `${durationArray[0]}` : `${durationArray[0]} ${translation[langToLocale(lang)].appointmentElement.hour}`
const durationMinutes = durationArray[1] > 0 ? `${('0.' + durationArray[1]) * 60}` : ''
// generate deeplinks if dateTime is in expected format DD.MM.YYYY HH:MM, else use default values
let date = new Date()
let endDate = new Date()
let title = ''
let location = ''
let description = ''
if (element.data.dateTime.match(/^\d{2}\.\d{2}\.\d{4} \d{2}:\d{2}$/)) {
date = new Date(element.data.dateTime.split(' ')[0].split('.').reverse().join('-') + 'T' + element.data.dateTime.split(' ')[1] + ':00')
endDate = new Date(date.getTime() + element.data.duration * 60 * 60 * 1000)
title = encodeURIComponent(element.data[lang].title)
location = encodeURIComponent(element.data[lang].place)
description = encodeURIComponent(element.data[lang].person + '-\n' + element.data[lang].freeText)
}
const outlookCom = `https://outlook.live.com/owa/?path=/calendar/action/compose&rru=addevent&startdt=${
date.getFullYear() + '-' +// YYYY-
String(date.getMonth() + 1).padStart(2, '0') + '-' + // MM-
String(date.getDate()).padStart(2, '0') + 'T' + // DDT
String(date.getHours()).padStart(2, '0') + ':' + // HH:
String(date.getMinutes()).padStart(2, '0') + ':' + // MM:
String(date.getSeconds()).padStart(2, '0') // SS
}&enddt=${
endDate.getFullYear() + '-' +// YYYY-
String(endDate.getMonth() + 1).padStart(2, '0') + '-' + // MM-
String(endDate.getDate()).padStart(2, '0') + 'T' + // DDT
String(endDate.getHours()).padStart(2, '0') + ':' + // HH:
String(endDate.getMinutes()).padStart(2, '0') + ':' + // MM:
String(endDate.getSeconds()).padStart(2, '0') // SS
}&subject=${title}&location=${location}&body=${description}`
const googleCalendar = `https://calendar.google.com/calendar/render?action=TEMPLATE&text=${title}&dates=${
date.getFullYear() + // YYYY
String(date.getMonth() + 1).padStart(2, '0') + // MM
String(date.getDate()).padStart(2, '0') + // DD
'T' +
String(date.getHours()).padStart(2, '0') + // HH
String(date.getMinutes()).padStart(2, '0') + // MM
'00' + // SS
'/' +
endDate.getFullYear() + // YYYY
String(endDate.getMonth() + 1).padStart(2, '0') + // MM
String(endDate.getDate()).padStart(2, '0') + // DD
'T' +
String(endDate.getHours()).padStart(2, '0') + // HH
String(endDate.getMinutes()).padStart(2, '0') + // MM
'00' // SS
}&location=${location}&details=${description}`
const office365 = outlookCom.replace('outlook.live.com', 'outlook.office.com')
return `
<tr section="${element.id}">
<td align="center">
<table align="center" width="800px"; style="border: 4px solid #46003A;">
<tr>
<td>
<table>
<tr>
<td>
<p style="font-size: 150px; padding-right: 10px; padding-left: 10px; margin:0px;">🕑</p>
</td>
<td style="style="max-width:500px; word-break:break-all;">
<table align="center">
<tr>
<td>
<p style="padding-top: 5px; margin: 0px; font-size: 50px;">${element.data[lang].title}</p>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td style="padding: 0px; margin: 0px; font-size: 30px;">
${translation[langToLocale(lang)].appointmentElement.when}:
</td>
<td style="padding: 0px; margin: 0px; font-size: 30px;">
${element.data.dateTime}
</td>
</tr>
` + (element.data.duration > 0 ? `
<tr>
<td style="padding: 0px; margin: 0px; font-size: 30px;">
${translation[langToLocale(lang)].appointmentElement.duration}:
</td>
<td style="padding: 0px; margin: 0px; font-size: 30px;">
${durationHours > 0
? `${durationHours} ` +
(durationHours > 1
? translation[langToLocale(lang)].appointmentElement.hours
: translation[langToLocale(lang)].appointmentElement.hour)
: ''}
${durationMinutes > 0
? `${durationMinutes} ` +
translation[langToLocale(lang)].appointmentElement.minutes
: ''}
</td>
</tr>
` : '') + (element.data[lang].place ? `
<tr>
<td style="padding: 0px; margin: 0px; font-size: 30px;">
${translation[langToLocale(lang)].appointmentElement.where}:
</td>
<td style="padding: 0px; margin: 0px; font-size: 30px;">
${element.data[lang].place}
</td>
</tr>
` : '') + (element.data[lang].person ? `
<tr>
<td style="padding: 0px; margin: 0px; font-size: 30px;">
${translation[langToLocale(lang)].appointmentElement.who}:
</td>
<td style="padding: 0px; margin: 0px; font-size: 30px;">
${element.data[lang].person}
</td>
</tr>
` : '') + `
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
` + (element.data[lang].freeText ? `
<tr>
<td align="left" style="padding-left: 50px; padding-right: 50px; padding-top: 10px; padding-bottom: 10px; margin: 0px; font-size: 30px;">
<p>${element.data[lang].freeText}</p>
</td>
</tr>
` : '') + `
<tr>
<td align="center" valign="top" style="padding-left: 50px; padding-right: 50px; padding-top: 0px; padding-bottom: 20px; margin: 0px;">
<p style="padding: 0px; margin: 0px; font-size: 30px; text-align: center;">
<a href="${outlookCom}" target="_blank" style="color: #000000; text-decoration: underline;">Outlook.com</a> |
<a href="${office365}" target="_blank" style="color: #000000; text-decoration: underline;">Office 365</a> |
<a href="${googleCalendar}" target="_blank" style="color: #000000; text-decoration: underline;">Google Calendar</a>
</p>
</td>
</tr>
</table>
</td>
</tr>
`
},
component: markRaw(defineAsyncComponent(() => import('src/components/NewsletterElements/AppointmentElement.vue'))
)
}