ouatterrir-app/src/components/ConcernementMapPopup.vue

<script>
// import { RouterLink, RouterView } from 'vue-router'

import SvgIcon from '@jamescoyle/vue-icon';
import { mdiHeadphones } from '@mdi/js';

import { mapState, mapActions } from 'pinia'
// import { UserStore } from '@/stores/user'
import { ConcernementsStore } from '@/stores/concernements'

export default {
  name: 'concernementMapPopup',  
  props: ['infos'],
  data() {
    return {
      dom: null,
      type: null,
      concernement: null,
      entite: null,
      besoin: null,
      reponse: null,
      headphones_path: mdiHeadphones
    }
  },
  created () {
    // console.log(`popup created type: ${this.infos.type}`, this.infos);
    if (this.infos.type === 'concernement') {
      this.concernement = this.concernementsByID[this.infos.id];
    } else if(this.infos.type === 'entite') {
      this.entite = this.allEntitesById[this.infos.id];
    } else if (this.infos.type === 'besoin') {
      this.besoin = this.allBesoinsById[this.infos.id];
    } else if (this.infos.type === 'reponse') {
      for (let i = 0; i < this.allBesoinsById[this.infos.bid].reponses.length; i++) {
        if (this.allBesoinsById[this.infos.bid].reponses[i].id === this.infos.id) {
          this.reponse = this.allBesoinsById[this.infos.bid].reponses[i];
          break;
        }
      }
    }
  },
  mounted () {
    // console.log('APP onMounted')
    this.dom = this.$refs['map-popup'];
    window.addEventListener('mousemove', this.onMousemove);
  },
  computed: {
    ...mapState(ConcernementsStore,['concernements']),
    ...mapState(ConcernementsStore,['concernementsByID']),
    ...mapState(ConcernementsStore,['allEntitesById']),
    ...mapState(ConcernementsStore,['allBesoinsById'])
  },
  watch: {
    infos: {
      handler (n, o){
        if (n.type === 'concernement') {
          this.concernement = this.concernementsByID[n.id];
        } else if(n.type === 'entite') {
          this.entite = this.allEntitesById[this.infos.id];
        } else if (n.type === 'besoin') {
          this.besoin = this.allBesoinsById[this.infos.id];      
        } else if (n.type === 'reponse') {
          
        } 
      },
      deep: true
    },
  },
  methods: {
    onMousemove(e){
      // console.log(`popup move type: ${this.infos.type}`);
      let v = "top";
      let h = "right";
      if (e.clientX + this.dom.clientWidth > document.body.clientWidth) {
        h = "left";
      } else {
        h = "right";
      }
      if (e.clientY - this.dom.clientHeight < 0) {
        v = "bottom";
      } else {
        v = "top";
      }
      this.dom.setAttribute("pos", `${v}-${h}`);
      switch (h) {
        case "right":
          this.dom.style.left = `${e.clientX+2}px`;
          break;
        case "left":
          this.dom.style.left = `${e.clientX - this.dom.clientWidth-2}px`;
          break;
      }
      switch (v) {
        case "top":
          this.dom.style.top = `${e.clientY - this.dom.clientHeight-2}px`;
          break;
        case "bottom":
          this.dom.style.top = `${e.clientY+2}px`;
          break;
      }
    },
    truncate( str, n, useWordBoundary ){
      if (str.length <= n) { return str; }
      const subString = str.slice(0, n-1); // the original check
      return (useWordBoundary 
        ? subString.slice(0, subString.lastIndexOf(" ")) 
        : subString) + " &hellip;";
    }
  },
  components: {
    SvgIcon
  }
}

</script>

<template>
  <div id="map-popup" ref="map-popup">
    
    <div class="popup-content-wrapper">
      <section v-if="infos.type === 'concernement'" class="concernement-map-popup">
        <h1>{{ concernement.title }}</h1>
        <ul class="icons">
          <li v-if="concernement.has_puissancedagir" ><span class="icon puissancedagir"></span></li>
          <li v-if="concernement.has_proximite" ><span class="icon proximite"></span></li>
          <li v-if="concernement.has_superposition" ><span class="icon superposition"></span></li>
          <li v-if="concernement.has_agissantes" ><span class="icon action"></span></li>
          <li v-if="concernement.has_doleance" ><span class="icon doleancer"></span></li>
        </ul>
      </section>
      <section v-if="infos.type === 'concernement' && concernement.has_recit" class="concernement-map-popup-recit">
        <svg-icon type="mdi" :path="headphones_path"></svg-icon>
      </section>
      
      <section v-if="infos.type === 'entite'" class="entite-map-popup">
        <h1>{{ entite.entite.title }}</h1>
      </section>
      <section v-if="infos.type === 'besoin'" class="besoin-map-popup">
        <div v-html="besoin.description"></div>
      </section>
      <section v-if="infos.type === 'reponse'" class="reponse-map-popup">
          <div v-if="reponse.qui"><label>Qui</label><p v-html="truncate(reponse.qui, 100, true)"/></div>
          <div v-if="reponse.quoi"><label>Quoi</label><p v-html="truncate(reponse.quoi, 100, true)"/></div>
          <div v-if="reponse.ou"><label>Où</label><p v-html="truncate(reponse.ou, 100, true)"/></div>
          <div v-if="reponse.avec"><label>Avec</label><p v-html="truncate(reponse.avec, 100, true)"/></div>
      </section>
    </div>
  </div>
</template>

<style lang="scss" scoped>
</style>