frames/pages/structures/_id.vue

<template>
  <LayoutContainer>
    <header class="mb-4">
      <v-layout>
        <v-btn
          to="/structures"
          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-layout class="flex-row align-center mb-4">
        <nuxt-img
          v-if="structure.logoId"
          :src="structure.logoId ? 'https://api.opentalent.fr/app.php/_internal/secure/files/' + structure.logoId + '/0x60' : '/images/default.jpg'"
          alt="logo"
        />

        <h2 class="flex mx-4 d-flex align-center">
          {{ structure.name }}
        </h2>

        <div class="d-flex flex-row align-center">
          <a v-if="structure.facebook" :href="structure.facebook" class="facebook" target="_blank" :title="$t('find_us_on') + ' Facebook'">
            <font-awesome-icon class="icon social-icon" :icon="['fab', 'facebook']" />
          </a>
          <a v-if="structure.instagram" :href="structure.instagram" class="instagram" target="_blank" :title="$t('find_us_on') + ' Instagram'">
            <font-awesome-icon class="icon social-icon" :icon="['fab', 'instagram-square']" />
          </a>
          <a v-if="structure.twitter" :href="structure.twitter" class="twitter" target="_blank" title="$t('find_us_on') + ' Twitter'">
            <font-awesome-icon class="icon social-icon" :icon="['fab', 'twitter']" />
          </a>
        </div>
      </v-layout>

      <v-row>
        <v-col cols="12">
          <nuxt-img src="/images/piano.jpg" alt="" class="max-w100" />
        </v-col>
      </v-row>

      <v-row>
        <v-col cols="12">
          <v-chip-group v-if="structure.practices" :max="0" active-class="primary--text" class="justify-center">
            <v-chip v-for="practice in structure.practices" :key="practice">
              {{ $t(practice) }}
            </v-chip>
          </v-chip-group>
        </v-col>
      </v-row>

      <v-divider class="my-2" />

      <v-row class="my-2 py-2">
        <v-col cols="6" class="description">
          <div class="d-flex flex-row mb-3">
            <h4>{{ $t('descriptive') }}</h4>
            <v-spacer />
          </div>
          <p class="pa-2">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
            ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
            eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
            deserunt mollit anim id est laborum.
          </p>
        </v-col>

        <v-col cols="6" class="contact">
          <div class="d-flex flex-row mb-3">
            <h4>{{ $t('contact') }}</h4>
            <v-spacer />
          </div>

          <table>
            <tr>
              <td>
                <font-awesome-icon class="icon" :icon="['fas', 'map-marker-alt']" />
              </td>
              <td class="mx-2">
                <span v-if="structure.streetAddress">{{ structure.streetAddress }}<br></span>
                <span v-if="structure.postalCode">{{ structure.postalCode }} </span>
                {{ structure.addressCity }}
              </td>
            </tr>
            <tr>
              <td>
                <font-awesome-icon class="icon" :icon="['fas', 'phone-alt']" />
              </td>
              <td class="phone">
                <div v-if="structure.telphone">
                  <a v-if="showTel" :href="'tel:' + structure.telphone">{{ structure.telphone }}</a>
                  <v-btn v-else small @click="showTel = 1">
                    {{ $t('show_tel') }}
                  </v-btn>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <font-awesome-icon class="icon" :icon="['fas', 'at']" />
              </td>
              <td class="mail">
                <div v-if="structure.email">
                  <a v-if="showMail" :href="'mailto:' + structure.email">{{ structure.email }}</a>
                  <v-btn v-else small @click="showMail = 1">
                    {{ $t('show_email') }}
                  </v-btn>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <font-awesome-icon class="icon" :icon="['fas', 'globe-europe']" />
              </td>
              <td class="website">
                <a :href="structure.website" target="_blank">{{ structure.website }}</a>
              </td>
            </tr>
            <tr>
              <td>
                <font-awesome-icon class="icon" :icon="['fas', 'project-diagram']" />
              </td>
              <td class="network">
                <NuxtLink :to="'/structures/' + structure.n1Id" nuxt>
                  {{ structure.n1Name }}
                </NuxtLink>
              </td>
            </tr>
          </table>
        </v-col>
      </v-row>

      <v-row class="mb-4">
        <v-col cols="12">
          <v-btn disabled>
            {{ $t('spot_on_from') }} 01/01/2021
          </v-btn>
        </v-col>
      </v-row>

      <v-row v-if="structure.latitude && structure.longitude">
        <v-col cols="12">
          <v-responsive width="100%" height="450px">
            <no-ssr>
              <l-map
                :zoom="13"
                :center="[structure.latitude, structure.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="structure.id"
                  :lat-lng="[structure.latitude, structure.longitude]"
                >
                  <l-popup>
                    <b>{{ structure.name }}</b><br>
                    {{ structure.postalCode }} {{ structure.addressCity }}<br>
                    <a :href="structure.website" target="_blank">{{ structure.website }}</a>
                  </l-popup>
                </l-marker>
              </l-map>
            </no-ssr>
          </v-responsive>
        </v-col>
      </v-row>
    </v-container>
  </LayoutContainer>
</template>

<script>
import StructuresProvider from '~/services/data/StructuresProvider'

export default {
  async asyncData ({ params, $axios }) {
    return await new StructuresProvider($axios).getById(Number(params.id)).then((res) => {
      return { structure: res }
    })
  },
  data () {
    return {
      showTel: false,
      showMail: false
    }
  }
}
</script>

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

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

  h2 {
    color: $theme;
    font-size: 22px;
  }

  h4 {
    color: #666;
    border-bottom: solid 1px $theme;
    font-size: 22px;
  }

  .social-icon {
    font-size: 22px;
    color: gray;
    margin: auto 8px;
  }

  .content {
    color: #666666;
  }

  .description {
    border-right: solid 2px #e4611b;
    width: 45%;
    padding-right: 5%;
  }

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

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

  .contact .icon {
    color: $theme;
  }
</style>