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="12"
          sm="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="12"
          sm="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 small 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
                id="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 lang="ts">
import Vue from 'vue'
import StructuresProvider from '~/services/data/StructuresProvider'

export default Vue.extend({
  async asyncData ({
    params, $axios
  }): Promise<{ structure: Structure }> {
    return await new StructuresProvider($axios).getById(Number(params.id)).then((res) => {
      return { structure: res }
    })
  },
  data (): object {
    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;
  }

  @media screen and (min-width: 600px) {
    .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>