frames/pages/events/_id.vue

<template>
  <LayoutContainer>
    <header class="mb-4">
      <v-layout>
        <v-btn
          :to="{path: '/events', query: query}"
          nuxt
          plain
        >
          <font-awesome-icon class="icon mr-1" :icon="['fas', 'chevron-left']" />
          {{ $t('go_back') }}
        </v-btn>
      </v-layout>
    </header>

    <v-container class="content">
      <v-row>
        <v-col cols="12" sm="6" class="pr-6">
          <v-img
            :src="publicEvent.imageUrl || '/images/event-default.jpg'"
            alt="banner"
            max-width="100%"
            max-height="100%"
            lazy-src="/images/event-default.jpg"
          />
        </v-col>
        <v-col cols="12" sm="6" class="pl-6">
          <div class="d-flex flex-column" style="min-height: 100%">
            <v-row class="py-2">
              <h2>{{ publicEvent.name }}</h2>
            </v-row>
            <v-row class="py-2">
              <table class="infos">
                <tr v-if="publicEvent.datetimeStart" class="pa-1">
                  <td class="pt-1">
                    <font-awesome-icon :icon="['fas', 'calendar']" class="icon mr-2" />
                  </td>
                  <td class="pa-1">
                    <span>
                      {{ dateUtils.formatDateIntervalFor(new Date(publicEvent.datetimeStart), new Date(publicEvent.datetimeEnd)) }}
                    </span>
                  </td>
                </tr>

                <tr v-if="publicEvent.address.addressCity">
                  <td class="pt-1">
                    <font-awesome-icon class="icon" :icon="['fas', 'map-marker-alt']" />
                  </td>
                  <td class="pa-1">
                    <span v-if="publicEvent.roomName" style="white-space: pre-line;">{{ publicEvent.roomName }}<br></span>
                    <span v-if="publicEvent.address.streetAddress" style="white-space: pre-line;">{{ publicEvent.address.streetAddress }}<br></span>
                    <span>{{ publicEvent.address.addressCity }}</span>
                  </td>
                </tr>
              </table>
            </v-row>
            <v-row v-if="publicEvent.description" class="py-2 flex d-flex flex-column">
              <h4 class="mt-2 mb-3" style="height: fit-content;">
                {{ $t('description') }}
              </h4>
              <p class="flex">
                {{ publicEvent.description }}
              </p>
            </v-row>
            <div class="flex"></div>
            <v-row v-if="publicEvent.url" justify="end" align-content="end" class="py-2">
              <v-btn :href="publicEvent.url" target="_blank">{{ $t("more_to_know") }}</v-btn>
            </v-row>
          </div>
        </v-col>
      </v-row>
      <v-row>
        <v-col
          cols="12"
          v-if="publicEvent.address.latitude && publicEvent.address.longitude"
        >
          <v-responsive width="100%" height="300px">
            <no-ssr>
              <l-map
                id="map"
                :zoom="16"
                :center="[publicEvent.address.latitude, publicEvent.address.longitude]"
                :options="{ scrollWheelZoom: false, zoomSnap: 0.25 }"
              >
                <l-tile-layer
                  url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"
                  attribution="&copy; <a href='http://osm.org/copyright'>OpenStreetMap</a> contributors"
                />
                <l-marker
                  :key="publicEvent.uuid"
                  :lat-lng="[publicEvent.address.latitude, publicEvent.address.longitude]"
                >
                  <l-popup>
                    <b>{{ publicEvent.name }}</b><br>
                    <span>
                      {{ publicEvent.address.postalCode }} {{ publicEvent.address.addressCity }}
                    </span><br>
                  </l-popup>
                </l-marker>
              </l-map>
            </no-ssr>
          </v-responsive>
        </v-col>
      </v-row>
      <v-row>
        <v-spacer />
        <v-col cols="12" md="6" class="d-flex flex-column align-end">
          <table>
            <tr>
              <td>
                <h5 class="ma-2">
                  {{ $t('share') }}
                </h5>
              </td>
            </tr>
            <tr>
              <td>
                <div class="d-flex flex-row align-items-start flex-wrap">
                  <ShareNetwork
                    v-for="socialNetwork in socialNetworks"
                    :key="socialNetwork.network"
                    :network="socialNetwork.network"
                    :url="localUrl"
                    :title="publicEvent.name"
                    :description="publicEvent.description"
                    hashtags="opentalent,event"
                    :media="publicEvent.imageUrl || '/images/event-default.jpg'"
                    class="social-link"
                  >
                    <a
                      :title="$t('share_on') + ' ' + socialNetwork.name"
                      :style="{color: socialNetwork.color}"
                    >
                      <font-awesome-icon
                        class="icon social-icon"
                        :icon="socialNetwork.icon"
                      />
                    </a>
                  </ShareNetwork>
                </div>
              </td>
            </tr>
          </table>
        </v-col>
      </v-row>
    </v-container>

  </LayoutContainer>
</template>


<script lang="ts">
import Vue from 'vue'
import EventsProvider from '~/services/data/EventsProvider'
import DatesUtils from "~/services/utils/dateUtils";

export default Vue.extend({
  data () {
    return {
      theme: this.$route.query.theme ?? 'orange',
      organization: this.$route.query.organization ?? null,
      publicEvent: null as PublicEvent | null,
      dateUtils: new DatesUtils(this.$dateFns, this.$t, this.$i18n),
      localUrl: location.href,
      socialNetworks: [
        { network: 'facebook', name: 'Facebook', icon: ['fab', 'facebook-f'], color: '#1877f2' },
        { network: 'messenger', name: 'Messenger', icon: ['fab', 'facebook-messenger'], color: '#0084ff' },
        { network: 'twitter', name: 'Twitter', icon: ['fab', 'twitter'], color: '#1da1f2' },
        { network: 'reddit', name: 'Reddit', icon: ['fab', 'reddit-alien'], color: '#ff4500' },
        { network: 'telegram', name: 'Telegram', icon: ['fab', 'telegram-plane'], color: '#0088cc' },
        { network: 'whatsapp', name: 'Whatsapp', icon: ['fab', 'whatsapp'], color: '#25d366' },
        { network: 'email', name: 'Email', icon: ['fa', 'envelope'], color: '#333333' },
      ] // @see https://nicolasbeauvais.github.io/vue-social-sharing/?path=/story/vuesocialsharing--multiple-share-networks
    }
  },
  computed: {
    query () {
      const q: any = { theme: this.theme }
      if (this.organization !== null) {
        q.organization = this.organization
      }
      return q
    }
  },
  async asyncData ({params, $axios}): Promise<{ publicEvent: PublicEvent }> {
    return await new EventsProvider($axios).getById(params.id).then((res) => {
      return { publicEvent: res }
    })
  }
})
</script>

<style scoped lang="scss">
@import 'assets/style/variables.scss';

.content {
  margin: 18px 10%;
  max-width: 80%;
}

h2 {
  color: var(--v-primary-base);
  font-size: 22px;
  text-transform: uppercase;
}

h4 {
  color: #666;
  border-bottom: solid 1px var(--v-primary-base);
  font-size: 22px;
}

.content {
  color: #4d4d4d;
}

.infos {
  text-transform: uppercase;
  font-weight: 700;
}

@media screen and (min-width: 600px) {
  .description {
    border-right: solid 2px var(--v-primary-base);
    width: 45%;
    padding-right: 5%;
  }

  .contact {
    width: 45%;
    padding-left: 5%;
  }
}

@media screen and (max-width: 600px) {
  .content {
    max-width: 100%;
    margin: 10px 0;
  }
}

.contact td {
  padding: 6px 12px;
}

.contact .icon {
  color: var(--v-primary-base);
}

.social-link {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 6px;
  text-decoration: none;
  position:relative;
}

.social-link:hover {
  text-decoration: underline;
}

.social-icon {
  font-size: 22px;
  margin: auto 6px;
}

.social-link:before {
  display:block;
  content:" ";
  position:absolute;
  z-index:100;
  background:rgba(255, 255, 255, 0.3);
  top:0;
  left:0;
  right:0;
  bottom:0;
  opacity:0;
}
.social-link:hover:before {
  opacity:1;
}

</style>