153 lines
4.4 KiB
Vue
153 lines
4.4 KiB
Vue
<script>
|
|
|
|
import { mapActions, mapState } from 'pinia'
|
|
import { ConcernementsStore } from '@stores/concernements'
|
|
|
|
export default {
|
|
props: ['concernement', 'entite', 'eid'],
|
|
data() {
|
|
return {
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(ConcernementsStore,['opened_concernement',
|
|
'ct_concernement',
|
|
'ct_entite']),
|
|
field_menace_maintien_label (){
|
|
let str;
|
|
if (this.concernement.entites_byid[this.eid].menacemaintien < 0) {
|
|
str = this.ct_entite.field_menace_maintien.description.replace('/maintient', '')
|
|
} else {
|
|
str = this.ct_entite.field_menace_maintien.description.replace('menace/', '')
|
|
}
|
|
return str;
|
|
},
|
|
field_sources_label () {
|
|
let str;
|
|
if (this.concernement.entites_byid[this.eid].menacemaintien < 0) {
|
|
str = this.ct_entite.field_sources.description.replace('/ ce maintien', '')
|
|
} else {
|
|
str = this.ct_entite.field_sources.description.replace('cette menace /', '')
|
|
}
|
|
return str;
|
|
}
|
|
},
|
|
methods: {
|
|
|
|
},
|
|
components: {
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<section class="entite">
|
|
<section v-if="entite.image.length" class="image">
|
|
<img :src="entite.image[0].url" :alt="entite.image[0].alt"/>
|
|
</section>
|
|
<section v-if="entite.action" class="action">
|
|
<label v-if="ct_entite">{{ ct_entite.field_action.description }}</label>
|
|
<p>{{ entite.action }}</p>
|
|
</section>
|
|
<section v-if="entite.menacemaintien" class="menace-maintien">
|
|
<label v-if="ct_entite">{{ field_menace_maintien_label }}</label>
|
|
<p>{{ entite.menacemaintien }}</p>
|
|
</section>
|
|
<!-- SOURCES (experiences vecues) -->
|
|
<section
|
|
v-if="entite.sources.length"
|
|
class="sources multiple">
|
|
<!-- <h5>Experience(s) Vécue(s)</h5> -->
|
|
<section
|
|
v-for="(source, index) in entite.sources"
|
|
:key="index"
|
|
class="source">
|
|
<!-- <div class="date">{{ source.date.start }}</div> -->
|
|
<section v-if="source.description" class="description">
|
|
<label v-if="ct_entite"> {{ field_sources_label }}</label>
|
|
<div v-html="source.description"/>
|
|
</section>
|
|
|
|
<section
|
|
v-if="source.images.length"
|
|
class="images">
|
|
<figure
|
|
v-for="(image, j) in source.images"
|
|
:key="j">
|
|
<img :src="image.url" :alt="image.alt"/>
|
|
</figure>
|
|
</section>
|
|
|
|
<section
|
|
v-if="source.videos.length"
|
|
class="video multiple">
|
|
<vue-plyr
|
|
v-for="(video,v) in source.videos"
|
|
:key="v">
|
|
<div class="plyr__video-embed">
|
|
<!-- TODO fix vimeo embed url -->
|
|
<iframe
|
|
:src="video.url"
|
|
allowfullscreen
|
|
></iframe>
|
|
</div>
|
|
</vue-plyr>
|
|
</section>
|
|
|
|
<section
|
|
v-if="source.audios.length"
|
|
class="audio multiple">
|
|
<div
|
|
v-for="(audio,a) in source.audios"
|
|
:key="a">
|
|
<label v-if="audio.description">{{ audio.description }}</label>
|
|
<label v-else>{{ audio.file.filename }}</label>
|
|
<vue-plyr>
|
|
<audio>
|
|
<source :src="audio.file.url" :type="audio.file.filemime" />
|
|
</audio>
|
|
</vue-plyr>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<section
|
|
v-if="source.liens.length"
|
|
class="liens multiple">
|
|
<ul>
|
|
<li
|
|
v-for="(lien,l) in source.liens"
|
|
:key="l">
|
|
<a
|
|
:href="lien.url">
|
|
{{ lien.title }}
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
</section>
|
|
|
|
|
|
<section
|
|
v-if="source.documents.length"
|
|
class="documents multiple">
|
|
<a
|
|
v-for="(doc,d) in source.documents"
|
|
:key="d"
|
|
:href="doc.file.url">
|
|
<template v-if="doc.description">{{ doc.description }}</template>
|
|
<template v-else>{{ doc.file.url }}</template>
|
|
</a>
|
|
</section>
|
|
|
|
</section>
|
|
</section>
|
|
</section>
|
|
</template>
|
|
|
|
<style lang="css">
|
|
section.action p,
|
|
section.menace-maintien p {
|
|
white-space: pre-wrap;
|
|
}
|
|
</style> |