bachir/drupal-caravane
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

contenu des étapes

Browse Source
This commit is contained in:
Valentin
2024-09-29 21:36:21 +02:00
parent ebb3ceb6d5
commit a4452388cd
25 changed files with 1410 additions and 500 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
web/themes/custom/caravane/assets/js/stores/content.js
View File

@@ -1,3 +1,5 @@
// query et traitement des contenus
import { defineStore } from 'pinia';
import REST from '../api/rest-axios';
@@ -21,12 +23,15 @@ export const useContentStore = defineStore('content', {
},
},
geofield: {},
galeries: [],
// galeries: [],
parties: [],
saison: {},
thematiques: [],
vignette: {},
couleur: '',
sensibleMap: {},
previous: {},
next: {},
},
page: {
title: '',
@@ -43,7 +48,7 @@ export const useContentStore = defineStore('content', {
this.page = {};
try {
const response = await REST.get(`/jsonapi/node/etape/`);
for (let etape of response.data.data) {
for (let [index, etape] of response.data.data.entries()) {
if (etape.attributes.drupal_internal__nid == nid) {
for (let metatag of etape.attributes.metatag) {
if (metatag.tag === "link") {
@@ -53,34 +58,113 @@ export const useContentStore = defineStore('content', {
this.etape.title = etape.attributes.title;
this.etape.adresse = etape.attributes.field_adresse;
this.etape.etape_number = etape.attributes.field_arret_numero;
//this.etape.dates = etape.attributes.field_dates;
this.etape.dates = {
start: {
d: etape.attributes.field_dates.value.split('-')[2],
m: new Intl.DateTimeFormat('fr-FR', { month: 'long' }).format(new Date(etape.attributes.field_dates.value)),
y: etape.attributes.field_dates.value.split('-')[0],
},
end: {
d: etape.attributes.field_dates.end_value.split('-')[2],
m: new Intl.DateTimeFormat('fr-FR', { month: 'long' }).format(new Date(etape.attributes.field_dates.end_value)),
y: etape.attributes.field_dates.end_value.split('-')[0],
},
start: this.getCleanDate(etape.attributes.field_dates.value),
end: this.getCleanDate(etape.attributes.field_dates.end_value),
}
this.etape.geofield = etape.attributes.field_geofield;
this.etape.galeries = await this.fetchEtapeContent('field_galleries', etape.relationships);
// this.etape.galeries = await this.fetchEtapeContent('field_galleries', etape.relationships);
const partiesFetch = await this.fetchEtapeContent('field_parties', etape.relationships);
let partiesArray = []
for (let partie of partiesFetch) {
partiesArray.push({ title: partie.attributes.field_titre, text: partie.attributes.field_texte.value });
if (partiesFetch) {
for (let partie of partiesFetch) {
let partieContent = {
title: partie.attributes.field_titre || '',
text: partie.attributes.field_texte.value || '',
diaporama: [],
chiffresCles: [],
videos: [],
}
if (partie.relationships.field_diaporama) {
const diaporama = await REST.get(partie.relationships.field_diaporama.links.related.href);
partie.relationships.field_diaporama.data.forEach((element, i) => {
partieContent.diaporama[i] = {};
partieContent.diaporama[i].alt = element.meta.alt;
});
diaporama.data.data.forEach((element, i) => {
partieContent.diaporama[i].url = element.attributes.uri.url;
});
}
if (partie.attributes.field_chiffres_cles) {
for (let chiffre of partie.attributes.field_chiffres_cles) {
partieContent.chiffresCles.push(chiffre.processed);
}
}
if (partie.attributes.field_videos) {
for (let video of partie.attributes.field_videos) {
const videoId = video.split('?v=')[1];
const videoUrl = `https://www.youtube.com/embed/${videoId}`;
partieContent.videos.push(videoUrl);
}
}
partiesArray.push(partieContent);
}
}
this.etape.parties = partiesArray;
this.etape.saison = await this.fetchEtapeContent('field_saison', etape.relationships);
this.etape.saison = await this.fetchEtapeContent('field_saison', etape.relationships);
this.etape.thematiques = await this.fetchEtapeContent('field_thematiques', etape.relationships);
const vignetteFetch = await this.fetchEtapeContent('field_vignette', etape.relationships);
this.etape.vignette = { url: vignetteFetch.attributes.uri.url, alt: etape.attributes.field_vignette_alt };
const sensibleMapFetch = await this.fetchEtapeContent('field_carte_sensible', etape.relationships);
if (sensibleMapFetch) {
this.etape.sensibleMap = { url: sensibleMapFetch.attributes.uri.url, alt: etape.relationships.field_carte_sensible.data.meta.alt };
}
this.etape.couleur = etape.attributes.field_couleur;
// get previous and next étape infos
// the list from the json api /node is not ordered
// and i need authentification to get the json view ordered list
// so i get it from the displayed list in the page
const orderedEtapesList = document.querySelectorAll('#etapes-liste li');
if (orderedEtapesList) {
const processEtape = async (etapeItemNid, etapesList, key) => {
for (let etape of etapesList) {
if (etape.attributes.drupal_internal__nid == etapeItemNid) {
const vignetteFetch = await REST.get(etape.relationships.field_vignette.links.related.href);
this.etape[key] = {
nid: etape.attributes.drupal_internal__nid,
couleur: etape.attributes.field_couleur,
title: etape.attributes.title,
postalCode: etape.attributes.field_adresse.postal_code,
dates: {
start: this.getCleanDate(etape.attributes.field_dates.value),
end: this.getCleanDate(etape.attributes.field_dates.end_value),
},
vignette: {
url: vignetteFetch.data.data.attributes.uri.url,
alt: etape.relationships.field_vignette.data.meta.alt,
},
};
break;
}
}
};
for (let li of orderedEtapesList) {
if (li.querySelector('a').dataset.nodeNid === nid) {
const previousEtapeItemNid = li.previousElementSibling?.querySelector('a').dataset.nodeNid;
const nextEtapeItemNid = li.nextElementSibling?.querySelector('a').dataset.nodeNid;
if (previousEtapeItemNid) {
await processEtape(previousEtapeItemNid, response.data.data, 'previous');
}
if (nextEtapeItemNid) {
await processEtape(nextEtapeItemNid, response.data.data, 'next');
}
}
}
}
this.setActiveItemInMenu();
break;
}
@@ -171,6 +255,13 @@ export const useContentStore = defineStore('content', {
console.error('Issue with getNodeData', error);
}
}
},
getCleanDate(date) {
return {
d: date.split('-')[2],
m: new Intl.DateTimeFormat('fr-FR', { month: 'long' }).format(new Date(date)),
y: date.split('-')[0],
}
}
},
});