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,
      entites: null,
      besoin: null,
      reponse: null,
      superposition: null,
      headphones_path: mdiHeadphones
    }
  },
  created () {
    console.log(`popup created type: ${this.infos.type}`, this.infos);
    this.parseInfos()
  },
  mounted () {
    // console.log('APP onMounted')
    this.dom = this.$refs['map-popup'];
    window.addEventListener('mousemove', this.onMousemove);
  },
  beforeUnmount () {
    window.removeEventListener('mousemove', this.onMousemove);
  },
  computed: {
    ...mapState(ConcernementsStore,['concernements',
                                    'concernementsByID',
                                    'allEntitesById',
                                    'allBesoinsById'])
  },
  watch: {
    infos: {
      handler (n, o){
        this.parseInfos()
      },
      deep: true
    },
  },
  methods: {
    parseInfos(){
      switch (this.infos.type) {
        case 'concernement':
          this.concernement = this.concernementsByID[this.infos.cid];  
          break;
        case 'entite':
        case 'entite_superpose':
        case 'entite_action':
          this.entites = [this.allEntitesById[this.infos.id]];
          break;
        case 'besoin':
          this.besoin = this.allBesoinsById[this.infos.id];
          break;
        case 'reponse':
          this.besoin = this.allBesoinsById[this.infos.id];
          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;
            }
          }
          break;
        case 'superposition':
          this.concernement = this.concernementsByID[this.infos.cid];  
          // this.entite = this.allEntitesById[this.infos.eid];
          this.entites = [];
          for (let eid of this.infos.eids) {
            this.entites.push(this.allEntitesById[eid])
          }
          break;
      }
    },
    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' || infos.type === 'superposition'" class="concernement-map-popup">
        <div class="concernement-map-popup-content">
          <h1>{{ concernement.title }}</h1>
          <div class="author info">
              <span>une enquête de</span> {{ concernement.author.username }}<br/>
          </div>
          <ul class="icons" v-if="concernement.has_puissancedagir || concernement.has_proximite || concernement.has_superposition || concernement.has_agissantes || concernement.has_doleance">
            <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>
        </div>
        <div v-if="(infos.type === 'concernement' || infos.type === 'superposition') && concernement.has_recit" class="concernement-map-popup-recit">
          <svg-icon type="mdi" :path="headphones_path"></svg-icon>
        </div>
      </section>

      <section v-if="infos.type === 'entite' || infos.type === 'entite_action' || infos.type === 'superposition' || infos.type === 'entite_superpose'" class="entite-map-popup">
        <template
          v-for="(entite, index) of entites"
          :key="index"
        >
        <h1><span class="point">&bull;</span> {{ entite.entite.title }}</h1>
        </template>
        
      </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>