FileMaster

Edit File: AddToCalendar.vue

<template>
  <div v-if="settings.general.addToCalendar && booked && booked.data.length" class="am-fs-sb-cs" :style="cssVars">
    <p>{{amLabels.add_to_calendar}}</p>
    <div class="am-fs-sb-cs-cals">
      <div v-for="(cal, index) in calendars" :key="index" class="am-fs-sb-cs-cals-cards">
        <a
          v-for="calPair in cal"
          :key="calPair.type"
          :href="calPair.links[0]"
          :target="(calPair.type === 'apple' || calPair.type === 'outlook') ? '_self' : '_blank'"
          :style="{borderColor : 'var(--am-c-atc-sb-text-op10)'}"
          class="am-fs-sb-cs-cals-card"
          @click="executeIfMultipleLinks(calPair)"
        >
          <div>
            <span :class="`am-icon-${calPair.type}`"></span>
          </div>
          <p :style="{color : 'var(--am-c-atc-sb-text)'}">{{ calPair.label }}</p>
        </a>
      </div>

</div>
  </div>
</template>

import {
  settings,
  ajaxUrl
} from '../../../../plugins/settings.js'

const store = useStore()

// * Labels
const amLabels = inject('amLabels')

let ready = computed(() => store.getters['entities/getReady'])

let booked = computed(() => store.getters['booking/getBooked'])

let calendars = computed(() => {
  return ready.value && booked.value ?
    [
      [
        getCalendarLinkData(booked.value.data, 'google'),
        {
          type: 'outlook',
          label: 'Outlook',
          links: [
            ajaxUrl + '/bookings/ics/' + (booked.value.data.length ? booked.value.data[0].bookingId : 0) +
            '&type=' + (booked.value.type === 'package' ? 'appointment' : booked.value.type) + getRecurringIdsParams(booked.value) +
            '&token=' + booked.value.token
          ]
        }
      ],
      [
        getCalendarLinkData(booked.value.data, 'yahoo'),
        {
          type: 'apple',
          label: 'Apple',
          links: [
            ajaxUrl + '/bookings/ics/' + (booked.value.data.length ? booked.value.data[0].bookingId : 0) +
            '&type=' + (booked.value.type === 'package' ? 'appointment' : booked.value.type) + getRecurringIdsParams(booked.value) +
            '&token=' + booked.value.token
          ]
        }
      ]
    ] : []
})

function executeIfMultipleLinks (calendar) {
  if (calendar.links.length > 1) {
    let popupBlocked = false
    setTimeout(function () {
      calendar.links.forEach(function (link, index) {
        if (index !== 0) {
          if (!popupBlocked) {
            let newWin = window.open(link, '_blank')
            try {
              newWin.addEventListener('load', function () {})
            }
            catch (e) {
              popupBlocked = true
              alert(amLabels.value.disable_popup_blocker)
            }
          } else {
            window.open(link, '_blank')
          }
        }
      })
    }, 1000)
  }

return true
}

function getRecurringIdsParams (booked) {
  let recurringIdsParams = ''

booked.data.forEach((item, index) => {
    if (index > 0) {
      recurringIdsParams += '&recurring[]=' + item.bookingId
    }
  })

return recurringIdsParams
}

function getCalendarLinkData(eventData, type) {
  let links = []

switch (type) {
    case ('yahoo'):
      eventData.forEach(function (data) {
        let location = data.locationId?
            store.getters['entities/getLocation'](
              data.locationId
            ) : ''

let address = data.cfAddress ? data.cfAddress : (location ? (location.address ? location.address : location.name) : '')

let duration = (data.utcEnd.getTime() - data.utcStart.getTime()) / (60 * 1000)

duration = (duration < 600 ? '0' + Math.floor((duration / 60)) : Math.floor((duration / 60)) + '') +
            (duration % 60 < 10 ? '0' + duration % 60 : duration % 60 + '')

let st = formatTime(new Date(data.utcStart - (data.utcStart.getTimezoneOffset() * (60 * 1000))))

links.push(
            encodeURI([
              'http://calendar.yahoo.com/?v=60&view=d&type=20',
              '&title=' + (data.title || ''),
              '&st=' + st,
              '&dur=' + (duration || ''),
              '&desc=' + (data.description || ''),
              '&in_loc=' + address
            ].join(''))
        )
      })

return {
        type: 'yahoo',
        label: 'Yahoo',
        links: links
      }

case ('google'):
      eventData.forEach(function (data) {
        let location = data.locationId?
          store.getters['entities/getLocation'](
            data.locationId
          ) : ''

let address = data.cfAddress ? data.cfAddress : (location ? (location.address ? location.address : location.name) : '')

let startTime = formatTime(data.utcStart)
        let endTime = formatTime(data.utcEnd)

links.push(
            encodeURI([
              'https://www.google.com/calendar/render',
              '?action=TEMPLATE',
              '&text=' + (data.title || ''),
              '&dates=' + (startTime || ''),
              '/' + (endTime || ''),
              '&details=' + (data.description || ''),
              '&location=' + address,
              '&sprop=&sprop=name:'
            ].join(''))
        )
      })

return {
        type: 'google',
        label: 'Google',
        links: links
      }
  }
}

function formatTime (date) {
  return date.toISOString().replace(/-|:|\.\d+/g, '')
}

let amColors = inject('amColors')

const cssVars = computed(() => {
  return {
    '--am-c-atc-sb-text-op10': useColorTransparency(amColors.value.colorSbText, 0.1),
    '--am-c-atc-sb-text-op5': useColorTransparency(amColors.value.colorSbText, 0.05)
  }
})

</script>

p {
          font-style: normal;
          font-weight: 500;
          font-size: 15px;
          line-height: 24px;
        }
        div {
          display: flex;
          height: 24px;
          align-items: center;
          span {
            font-size: 24px;
            color: var(--am-c-atc-sb-text);
          }
          .am-icon-yahoo {
            font-size: 17px
          }
        }
        &:hover {
          background-color: var(--am-c-atc-sb-text-op10);
        }
      }
    }
  }
}
</style>

Back