Textes are working!! need to convert image now
This commit is contained in:
PascalMarchesseault
@@ -58,11 +58,11 @@
|
||||
<div class="absolute bottom-6 right-8 z-20 shadow-2xl rounded-md text-white w-64 h-28 flex justify-center align-center"
|
||||
:style="{ backgroundColor: brandingStore.colors.secondary}">
|
||||
|
||||
<donation-button-banner
|
||||
:creator-id="creatorId"
|
||||
:creator-name="creatorName"
|
||||
:on-success-url="successUrl"
|
||||
:on-cancelled-url="cancelledUrl"></donation-button-banner>
|
||||
<!-- <donation-button-banner -->
|
||||
<!-- :creator-id="creatorId"-->
|
||||
<!-- :creator-name="creatorName"-->
|
||||
<!-- :on-success-url="successUrl"-->
|
||||
<!-- :on-cancelled-url="cancelledUrl"></donation-button-banner>-->
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@@ -2,25 +2,28 @@
|
||||
<div class="flex flex-col space-y-8 px-6 rounded-2xl py-8"
|
||||
:style="{ backgroundColor: brandingStore.colors.primary, color: brandingStore.colors.onPrimary }">
|
||||
|
||||
<!-- Bouton Edit -->
|
||||
<div class="flex justify-end space-x-2">
|
||||
<!-- Boutons pour Éditer/Enregistrer et Annuler -->
|
||||
<div v-if="creatorProfileStore.creator.id === brandingStore.value.id" class="flex justify-end space-x-2">
|
||||
<!-- Bouton principal : Éditer ou Enregistrer -->
|
||||
<button
|
||||
v-if="isLoggedIn"
|
||||
@click="toggleEditMode"
|
||||
@click="isEditMode ? saveChanges() : toggleEditMode()"
|
||||
class="px-4 py-2 rounded-md hover:opacity-90"
|
||||
:style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }">
|
||||
:style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }"
|
||||
>
|
||||
{{ isEditMode ? 'Enregistrer' : 'Éditer' }}
|
||||
</button>
|
||||
<div v-if="isEditMode">
|
||||
<button
|
||||
v-if="isLoggedIn"
|
||||
class="px-4 py-2 rounded-md hover:opacity-90"
|
||||
:style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }">
|
||||
Annuler
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
v-if="isEditMode && isLoggedIn"
|
||||
@click="cancelEdit"
|
||||
class="px-4 py-2 rounded-md hover:opacity-90 bg-red-500 text-white"
|
||||
>
|
||||
Annuler
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Titre principal -->
|
||||
<div v-if="isEditMode">
|
||||
@@ -66,7 +69,7 @@
|
||||
<h2 v-else-if="videoSubtitleMain" class="text-2xl font-semibold text-center" >
|
||||
{{ videoSubtitleMain }}
|
||||
</h2>
|
||||
|
||||
|
||||
<!-- Vidéo YouTube principale -->
|
||||
<div v-if="isEditMode">
|
||||
<div class="text-2xl py-2">URL vidéo</div>
|
||||
@@ -101,8 +104,8 @@
|
||||
<p v-else-if="mainVideoText" class="text-lg text-justify">
|
||||
{{ mainVideoText }}
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Sous-titre avant les deux images -->
|
||||
|
||||
<div v-if="isEditMode">
|
||||
@@ -119,7 +122,7 @@
|
||||
<div>
|
||||
<div v-if="isEditMode" class="text-2xl py-2"> Images</div>
|
||||
<div class="flex justify-center space-x-4">
|
||||
<!-- Première image -->
|
||||
<!-- Première image -->
|
||||
<div v-if="image1Url || isEditMode" :class="image1Url" class="relative w-1/2">
|
||||
<label v-if="isEditMode">
|
||||
<input type="file" @change="updateImage('image1Url', $event)" class="hidden"/>
|
||||
@@ -200,7 +203,7 @@
|
||||
</p>
|
||||
|
||||
<!-- Sous-titre avant la vidéo -->
|
||||
|
||||
|
||||
<div v-if="isEditMode">
|
||||
<div class="text-2xl py-2"> Titre Video</div>
|
||||
<textarea v-model="editableVideoSubtitle" class="w-full p-2 border rounded-md h-24"
|
||||
@@ -234,8 +237,6 @@
|
||||
></iframe>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Texte sous la vidéo -->
|
||||
<div v-if="isEditMode" class="text-2xl"> Description</div>
|
||||
<div v-if="isEditMode">
|
||||
@@ -251,6 +252,7 @@
|
||||
<div v-if="isEditMode" class="flex flex-col space-y-2">
|
||||
<!-- Édition du téléphone -->
|
||||
<div>
|
||||
|
||||
<label class="text-lg">Numéro de téléphone</label>
|
||||
<input
|
||||
v-model="editablePhoneNumber"
|
||||
@@ -279,73 +281,52 @@
|
||||
class="space-x-64"
|
||||
>
|
||||
<!-- Affichage du téléphone -->
|
||||
<div v-if="phoneNumber" class="flex items-center space-x-2">
|
||||
<div v-if="editablePhoneNumber" class="flex items-center space-x-2">
|
||||
<i class="mdi mdi-phone-outline text-2xl"></i>
|
||||
<span>{{ phoneNumber }}</span>
|
||||
<span>{{ editablePhoneNumber }}</span>
|
||||
</div>
|
||||
<!-- Affichage de l'email -->
|
||||
<div v-if="email" class="flex items-center space-x-2">
|
||||
<div v-if="editableEmail" class="flex items-center space-x-2">
|
||||
<i class="mdi mdi-email-outline text-2xl"></i>
|
||||
<a
|
||||
:href="`mailto:${email}`"
|
||||
:href="`mailto:${editableEmail}`"
|
||||
class="no-underline text-current"
|
||||
>
|
||||
{{ email }}
|
||||
{{ editableEmail }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ref, onMounted, computed} from "vue";
|
||||
import { useClient } from "@/plugins/api.js";
|
||||
|
||||
import {useBrandingStore} from "@/stores/brandingStore.js";
|
||||
import {useAuthStore} from "@/stores/authStore.js";
|
||||
import { useCreatorProfileStore } from "@/stores/creatorProfileStore.js";
|
||||
|
||||
const phoneNumber = ref("+1 (555) 123-4567"); // Remplacez par le numéro de téléphone
|
||||
const email = ref("contact@exemple.com"); // Remplacez par l'email
|
||||
|
||||
const creatorProfileStore = useCreatorProfileStore();
|
||||
const brandingStore = useBrandingStore();
|
||||
const isEditMode = ref(false);
|
||||
const client = useClient();
|
||||
|
||||
const isLoading = ref(true);
|
||||
const isLoggedIn = true;
|
||||
const isEditMode = ref(false);
|
||||
|
||||
const authStore = useAuthStore();
|
||||
const creatorIsCurrentUser = computed(() => authStore.isAuthenticated && authStore.userId === creatorId.value);
|
||||
|
||||
|
||||
|
||||
// Image de fallback pour l'éditeur
|
||||
const fallbackImage = "https://via.placeholder.com/300?text=Image+non+disponible";
|
||||
|
||||
// Données JSON directement dans le fichier
|
||||
const demoData = {
|
||||
mainTitle: "Votre référence d'Arma Reforger",
|
||||
mainImageUrl: "https://hutopyblob.blob.core.windows.net/creators/3d501c38-fe3e-42e6-b5dd-1bca159b9a14/contents/01935f9d-ee62-7559-8b94-a50105a5096f/boarding.jpg",
|
||||
mainImageText: "Je suis la référence incontournable sur le jeu Arma Reforger grâce à ma maîtrise approfondie de ses mécanismes et à ma passion pour son univers. Mon expertise repose sur des heures d’exploration, de stratégie et de collaboration avec une communauté active. Je partage des astuces exclusives, des guides détaillés et des analyses poussées pour aider les joueurs à exceller. Mon site propose un contenu unique, des mises à jour en temps réel et des ressources complètes pour tous les niveaux. En tant que passionné, je suis déterminé à offrir le meilleur contenu pour faire de chaque visite une expérience enrichissante et inspirante.",
|
||||
mainvideoUrl: "https://www.youtube.com/embed/byx2t6TqM2Y?si=GRy_Sn3Mm7nJvUGH",
|
||||
mainVideoText: "Youpidou. Mon expertise repose sur des heures d’exploration, de stratégie et de collaboration avec une communauté active. Je partage des astuces exclusives, des guides détaillés et des analyses poussées pour aider les joueurs à exceller. Mon site propose un contenu unique, des mises à jour en temps réel et des ressources complètes pour tous les niveaux. En tant que passionné, je suis déterminé à offrir le meilleur contenu pour faire de chaque visite une expérience enrichissante et inspirante.",
|
||||
imagesSubtitle2: "Participez à Mes Sessions de Jeu en Direct",
|
||||
image1Url: "https://hutopyblob.blob.core.windows.net/creators/3d501c38-fe3e-42e6-b5dd-1bca159b9a14/contents/01935f9d-ee62-7559-8b94-a50105a5096f/boarding.jpg",
|
||||
image2Url: "https://hutopyblob.blob.core.windows.net/creators/3d501c38-fe3e-42e6-b5dd-1bca159b9a14/contents/01935f9d-ee62-7559-8b94-a50105a5096f/boarding.jpg",
|
||||
image3Url: "https://hutopyblob.blob.core.windows.net/creators/3d501c38-fe3e-42e6-b5dd-1bca159b9a14/contents/01935f9d-ee62-7559-8b94-a50105a5096f/boarding.jpg",
|
||||
image4Url: "https://hutopyblob.blob.core.windows.net/creators/3d501c38-fe3e-42e6-b5dd-1bca159b9a14/contents/01935f9d-ee62-7559-8b94-a50105a5096f/boarding.jpg",
|
||||
imagesText: "Me supporter et regarder mes sessions de jeu en direct, c'est bien plus qu'un simple divertissement. En tant que joueur passionné, je partage des stratégies, des astuces et une approche unique qui enrichissent l’expérience de la communauté. Votre soutien me permet de créer du contenu de qualité, d’améliorer mes équipements et d’explorer de nouvelles façons de vous divertir. En rejoignant mes sessions, vous participez à une aventure interactive où vos idées et commentaires influencent le déroulement. Ensemble, nous bâtissons une communauté dynamique et inspirante, où chaque spectateur joue un rôle clé dans cette expérience immersive.",
|
||||
videoSubtitle: "Exemple d'une Séance de Jeu Typique",
|
||||
videoSubtitleMain: "Main video",
|
||||
|
||||
videoUrlMain: "https://www.youtube.com/embed/8l8CRkZkt30?si=8w2lHQ2mwoHTpf9-",
|
||||
videoUrl: "https://www.youtube.com/embed/byx2t6TqM2Y?si=GRy_Sn3Mm7nJvUGH",
|
||||
|
||||
videoText: "Supporter cette page, c’est permettre de créer un contenu de qualité, basé sur des recherches approfondies et une expérimentation continue. Votre soutien aide à transformer cette passion en métier, tout en garantissant des vidéos, guides et sessions enrichissants. Le créateur, motivé par l’envie de fournir un contenu toujours meilleur, apprécie chaque geste qui rend cette aventure possible."
|
||||
};
|
||||
|
||||
// Variables réactives pour les données
|
||||
const editablePhoneNumber = ref("");
|
||||
const editableEmail = ref("");
|
||||
@@ -364,6 +345,12 @@ const videoSubtitleMain = ref("");
|
||||
const videoUrlMain = ref("");
|
||||
const videoUrl = ref("");
|
||||
const videoText = ref("");
|
||||
const phoneNumber = ref("");
|
||||
const email = ref("");
|
||||
|
||||
|
||||
const editableImages = ref([null, null, null, null]);
|
||||
|
||||
|
||||
// Editable fields
|
||||
const editableMainTitle = ref("");
|
||||
@@ -379,20 +366,9 @@ const editableVideoUrl = ref("");
|
||||
|
||||
// Activer/désactiver le mode édition
|
||||
function toggleEditMode() {
|
||||
isEditMode.value = !isEditMode.value;
|
||||
if (isEditMode.value) {
|
||||
mainTitle.value = editableMainTitle.value;
|
||||
mainImageText.value = editableMainImageText.value;
|
||||
mainVideoText.value = editableMainVideoText.value;
|
||||
imagesSubtitle.value = editableImagesSubtitle.value;
|
||||
imagesText.value = editableImagesText.value;
|
||||
videoSubtitle.value = editableVideoSubtitle.value;
|
||||
videoSubtitleMain.value = editableVideoSubtitleMain.value;
|
||||
videoText.value = editableVideoText.value;
|
||||
videoUrlMain.value = editableVideoUrlMain.value;
|
||||
videoUrl.value = editableVideoUrl.value;
|
||||
phoneNumber.value = editablePhoneNumber.value;
|
||||
email.value = editableEmail.value;
|
||||
} else {
|
||||
// Charger les valeurs pour l'édition
|
||||
editableMainTitle.value = mainTitle.value;
|
||||
editableMainImageText.value = mainImageText.value;
|
||||
editableMainVideoText.value = mainVideoText.value;
|
||||
@@ -405,10 +381,25 @@ function toggleEditMode() {
|
||||
editableVideoUrl.value = videoUrl.value;
|
||||
editablePhoneNumber.value = phoneNumber.value;
|
||||
editableEmail.value = email.value;
|
||||
} else {
|
||||
// Sauvegarder les modifications
|
||||
mainTitle.value = editableMainTitle.value;
|
||||
mainImageText.value = editableMainImageText.value;
|
||||
mainVideoText.value = editableMainVideoText.value;
|
||||
imagesSubtitle.value = editableImagesSubtitle.value;
|
||||
imagesText.value = editableImagesText.value;
|
||||
videoSubtitle.value = editableVideoSubtitle.value;
|
||||
videoSubtitleMain.value = editableVideoSubtitleMain.value;
|
||||
videoText.value = editableVideoText.value;
|
||||
videoUrlMain.value = editableVideoUrlMain.value;
|
||||
videoUrl.value = editableVideoUrl.value;
|
||||
phoneNumber.value = editablePhoneNumber.value;
|
||||
email.value = editableEmail.value;
|
||||
}
|
||||
isEditMode.value = !isEditMode.value;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Supprimer une image
|
||||
function deleteImage(field) {
|
||||
if (field === "mainImageUrl") mainImageUrl.value = null;
|
||||
@@ -419,39 +410,118 @@ function deleteImage(field) {
|
||||
}
|
||||
|
||||
// Mettre à jour une image
|
||||
function updateImage(field, event) {
|
||||
function updateImage(index, event) {
|
||||
const file = event.target.files[0];
|
||||
if (file) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => {
|
||||
if (field === "mainImageUrl") mainImageUrl.value = reader.result;
|
||||
else if (field === "image1Url") image1Url.value = reader.result;
|
||||
else if (field === "image2Url") image2Url.value = reader.result;
|
||||
else if (field === "image3Url") image3Url.value = reader.result; // Correction ici
|
||||
else if (field === "image4Url") image4Url.value = reader.result;
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
// Stocker le fichier pour l'enregistrement
|
||||
editableImages.value[index] = file;
|
||||
|
||||
// Générer une URL temporaire pour la prévisualisation
|
||||
const previewUrl = URL.createObjectURL(file);
|
||||
|
||||
// Mettre à jour la prévisualisation (remplacer dans l'interface utilisateur)
|
||||
if (index === 0) image1Url.value = previewUrl;
|
||||
else if (index === 1) image2Url.value = previewUrl;
|
||||
else if (index === 2) image3Url.value = previewUrl;
|
||||
else if (index === 3) image4Url.value = previewUrl;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Charger les données au montage
|
||||
onMounted(() => {
|
||||
mainTitle.value = demoData.mainTitle;
|
||||
mainImageUrl.value = demoData.mainImageUrl;
|
||||
mainImageText.value = demoData.mainImageText;
|
||||
mainVideoText.value = demoData.mainVideoText;
|
||||
imagesSubtitle.value = demoData.imagesSubtitle;
|
||||
image1Url.value = demoData.image1Url;
|
||||
image2Url.value = demoData.image2Url;
|
||||
image3Url.value = demoData.image3Url;
|
||||
image4Url.value = demoData.image4Url;
|
||||
imagesText.value = demoData.imagesText;
|
||||
videoSubtitle.value = demoData.videoSubtitle;
|
||||
videoSubtitleMain.value = demoData.videoSubtitleMain;
|
||||
videoUrl.value = demoData.videoUrl;
|
||||
videoUrlMain.value = demoData.videoUrlMain;
|
||||
videoText.value = demoData.videoText;
|
||||
mainTitle.value = brandingStore.presentationInfos.title;
|
||||
mainImageUrl.value = brandingStore.presentationInfos.mainImageUrl;
|
||||
mainImageText.value = brandingStore.presentationInfos.mainImageText;
|
||||
mainVideoText.value = brandingStore.presentationInfos.mainVideoText;
|
||||
imagesSubtitle.value = brandingStore.presentationInfos.imagesSubtitle;
|
||||
image1Url.value = brandingStore.presentationInfos.image1Url;
|
||||
image2Url.value = brandingStore.presentationInfos.image2Url;
|
||||
image3Url.value = brandingStore.presentationInfos.image3Url;
|
||||
image4Url.value = brandingStore.presentationInfos.image4Url;
|
||||
imagesText.value = brandingStore.presentationInfos.imagesText;
|
||||
videoSubtitle.value = brandingStore.presentationInfos.videoSubtitle;
|
||||
videoSubtitleMain.value = brandingStore.presentationInfos.videoSubtitleMain;
|
||||
videoUrl.value = brandingStore.presentationInfos.videoUrl;
|
||||
videoUrlMain.value = brandingStore.presentationInfos.videoUrlMain;
|
||||
videoText.value = brandingStore.presentationInfos.videoText;
|
||||
editablePhoneNumber.value = brandingStore.presentationInfos.phoneNumber;
|
||||
editableEmail.value= brandingStore.presentationInfos.email;
|
||||
phoneNumber.value = brandingStore.presentationInfos.phoneNumber;
|
||||
email.value = brandingStore.presentationInfos.email;
|
||||
});
|
||||
|
||||
async function saveChanges() {
|
||||
if (!creatorProfileStore.creator.id) {
|
||||
console.error("L'ID du créateur est manquant !");
|
||||
return;
|
||||
}
|
||||
|
||||
const payload = {
|
||||
PhoneNumber: editablePhoneNumber.value, // Correctement mappé
|
||||
Email: editableEmail.value, // Correctement mappé
|
||||
Title: editableMainTitle.value, // Correspond à "Title" dans le backend
|
||||
MainImageText: editableMainImageText.value, // Correspond à "MainImageText"
|
||||
MainVideoText: editableMainVideoText.value, // Correspond à "MainVideoText"
|
||||
ImagesSubtitle: editableImagesSubtitle.value, // Correspond à "ImagesSubtitle"
|
||||
ImagesText: editableImagesText.value, // Correspond à "ImagesText"
|
||||
VideoSubtitle: editableVideoSubtitle.value, // Correspond à "VideoSubtitle"
|
||||
VideoSubtitleMain: editableVideoSubtitleMain.value, // Correspond à "VideoSubtitleMain"
|
||||
VideoUrlMain: editableVideoUrlMain.value, // Correspond à "VideoUrlMain"
|
||||
VideoUrl: editableVideoUrl.value, // Correspond à "VideoUrl"
|
||||
VideoText: editableVideoText.value // Correspond à "VideoText"
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
console.log("Payload envoyé :", payload); // Log pour déboguer les valeurs envoyées
|
||||
|
||||
try {
|
||||
const response = await client.post(
|
||||
`/api/creators/${creatorProfileStore.creator.id}/presentation-infos`,
|
||||
payload,
|
||||
{ headers: { "Content-Type": "application/json" } }
|
||||
);
|
||||
|
||||
console.log("Données sauvegardées :", response.data);
|
||||
|
||||
// Recharger la page après une sauvegarde réussie
|
||||
window.location.reload();
|
||||
} catch (error) {
|
||||
console.error("Erreur lors de la sauvegarde :", error);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
function cancelEdit() {
|
||||
// Restaurer les valeurs d'origine
|
||||
editableMainTitle.value = mainTitle.value;
|
||||
editableMainImageText.value = mainImageText.value;
|
||||
editableMainVideoText.value = mainVideoText.value;
|
||||
editableImagesSubtitle.value = imagesSubtitle.value;
|
||||
editableImagesText.value = imagesText.value;
|
||||
editableVideoSubtitle.value = videoSubtitle.value;
|
||||
editableVideoSubtitleMain.value = videoSubtitleMain.value;
|
||||
editableVideoText.value = videoText.value;
|
||||
editableVideoUrlMain.value = videoUrlMain.value;
|
||||
editableVideoUrl.value = videoUrl.value;
|
||||
editablePhoneNumber.value = phoneNumber.value;
|
||||
editableEmail.value = email.value;
|
||||
|
||||
// Désactiver le mode édition
|
||||
isEditMode.value = false;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -470,5 +540,4 @@ onMounted(() => {
|
||||
border: 0;
|
||||
border-radius: 0.5rem; /* Pour les bords arrondis */
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user