github.com/benoitkugler/goacve@v0.0.0-20201217100549-151ce6e55dc8/server/frontend/bv/src/pages/espace_perso/views/Joomeo.vue (about)

     1  <template>
     2    <div>
     3      <b-alert variant="info">
     4        Des photos peuvent être ajoutées par les directeurs des séjours ACVE.
     5        <br />
     6        Ces photos sont hebergées par le service
     7        <a href="https://www.joomeo.com/">Joomeo</a> et protégées par un mot de
     8        passe. <br />
     9        Vous retrouvez sur cette page vos identifiants de connexion.
    10      </b-alert>
    11  
    12      <!-- card jooemo à remplir de façon asynchrone -->
    13      <b-card title="Identifiants et albums Joomeo" v-if="joomeoData">
    14        <b-card-text>
    15          <div v-if="joomeoData.loggin">
    16            <div class="row my-2">
    17              <div class="col-6">
    18                Identifiant : <b>{{ joomeoData.loggin }}</b> <br />
    19              </div>
    20              <div class="col-6">
    21                Mot de passe : <b>{{ joomeoData.password }} </b>
    22              </div>
    23            </div>
    24            <h6>Albums photos accessibles</h6>
    25            <b-list-group>
    26              <b-list-group-item v-for="(album, i) in albums" :key="i">
    27                {{ album.label }} <i>({{ album.nb_files }} photo(s))</i>
    28              </b-list-group-item>
    29            </b-list-group>
    30            <a
    31              :href="joomeoData.url_space"
    32              target="_blank"
    33              rel="noopener noreferrer"
    34              class="btn btn-accent btn-block mt-2"
    35              >Accéder à mon espace Joomeo</a
    36            >
    37          </div>
    38          <div v-else>
    39            <i>Pour l'instant, aucune image n'est disponible.</i>
    40          </div>
    41        </b-card-text>
    42      </b-card>
    43    </div>
    44  </template>
    45  
    46  <script lang="ts">
    47  import Vue from "vue";
    48  import Component from "vue-class-component";
    49  import { JoomeoOutput, Album } from "@/shared/logic/types";
    50  import { C } from "../logic/controller";
    51  
    52  const JoomeoProps = Vue.extend({
    53    props: {}
    54  });
    55  
    56  @Component({})
    57  export default class Joomeo extends JoomeoProps {
    58    get joomeoData(): JoomeoOutput | null {
    59      return C.data.joomeoData;
    60    }
    61  
    62    get albums(): Album[] {
    63      if (this.joomeoData == null) return [];
    64      return this.joomeoData.albums || [];
    65    }
    66  }
    67  </script>
    68  
    69  <style scoped></style>