Add demo presentation
This commit is contained in:
PascalMarchesseault
@@ -38,13 +38,13 @@ const toggleHtmlEditor = () => {
|
||||
Quicky
|
||||
</v-btn>
|
||||
|
||||
<v-btn
|
||||
:variant="showHtmlEditor ? 'elevated' : 'plain'"
|
||||
@click="toggleHtmlEditor"
|
||||
class="normal-button"
|
||||
>
|
||||
Article
|
||||
</v-btn>
|
||||
<!-- <v-btn-->
|
||||
<!-- :variant="showHtmlEditor ? 'elevated' : 'plain'"-->
|
||||
<!-- @click="toggleHtmlEditor"-->
|
||||
<!-- class="normal-button"-->
|
||||
<!-- >-->
|
||||
<!-- Article-->
|
||||
<!-- </v-btn>-->
|
||||
</aside>
|
||||
|
||||
<!-- Contenu principal -->
|
||||
|
||||
@@ -1,39 +1,241 @@
|
||||
<template>
|
||||
<div class="flex flex-row">
|
||||
<div class="flex flex-col space-y-8 px-6 rounded-2xl py-8"
|
||||
:style="{ backgroundColor: brandingStore.colors.primary, color: brandingStore.colors.onPrimary }">
|
||||
|
||||
<div class="px-4"
|
||||
:style="{ backgroundColor: brandingStore.colors.primary, color: brandingStore.colors.onPrimary}">
|
||||
<h1>TEST</h1>
|
||||
<!-- Bouton Edit -->
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
v-if="isLoggedIn"
|
||||
@click="toggleEditMode"
|
||||
class="px-4 py-2 rounded-md hover:opacity-90"
|
||||
:style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }">
|
||||
{{ isEditMode ? 'Terminer' : 'Éditer' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Titre principal -->
|
||||
<div v-if="isEditMode">
|
||||
<textarea v-model="editableMainTitle" class="w-full p-2 border rounded-md h-24"></textarea>
|
||||
</div>
|
||||
<h1 v-else-if="mainTitle" class="text-3xl font-bold text-center ">{{ mainTitle }}</h1>
|
||||
|
||||
<!-- Image principale -->
|
||||
<div class="relative flex justify-center">
|
||||
<label v-if="isEditMode">
|
||||
<input type="file" @change="updateImage('mainImageUrl', $event)" class="hidden" />
|
||||
<img :src="mainImageUrl || fallbackImage"
|
||||
alt="Image principale"
|
||||
class="rounded-md max-w-full h-auto cursor-pointer" />
|
||||
</label>
|
||||
<img v-else-if="mainImageUrl" :src="mainImageUrl"
|
||||
alt="Image principale"
|
||||
class="rounded-md max-w-full h-auto" />
|
||||
<button v-if="isEditMode" @click="deleteImage('mainImageUrl')"
|
||||
class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white rounded-full hover:bg-red-600">
|
||||
X
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Texte sous l'image principale -->
|
||||
<div v-if="isEditMode">
|
||||
<textarea v-model="editableMainImageText" class="w-full p-2 border rounded-md h-24"></textarea>
|
||||
</div>
|
||||
<p v-else-if="mainImageText" class="text-lg text-justify">
|
||||
{{ mainImageText }}
|
||||
</p>
|
||||
|
||||
<!-- Sous-titre avant les deux images -->
|
||||
<div v-if="isEditMode">
|
||||
<textarea v-model="editableImagesSubtitle" class="w-full p-2 border rounded-md h-24"></textarea>
|
||||
</div>
|
||||
<h2 v-else-if="imagesSubtitle" class="text-2xl font-semibold text-center">
|
||||
{{ imagesSubtitle }}
|
||||
</h2>
|
||||
|
||||
<!-- Deux images côte à côte -->
|
||||
<div class="flex justify-center space-x-4">
|
||||
<!-- Première image -->
|
||||
<div v-if="image1Url || isEditMode" :class="image2Url ? 'w-1/2' : 'w-full'" class="relative">
|
||||
<label v-if="isEditMode">
|
||||
<input type="file" @change="updateImage('image1Url', $event)" class="hidden" />
|
||||
<img :src="image1Url || fallbackImage"
|
||||
alt="Image 1"
|
||||
class="rounded-md max-w-full h-auto cursor-pointer" />
|
||||
</label>
|
||||
<img v-else-if="image1Url" :src="image1Url"
|
||||
alt="Image 1"
|
||||
class="rounded-md max-w-full h-auto" />
|
||||
<button v-if="isEditMode" @click="deleteImage('image1Url')"
|
||||
class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white rounded-full hover:bg-red-600">
|
||||
X
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Deuxième image -->
|
||||
<div v-if="image2Url || isEditMode" :class="image1Url ? 'w-1/2' : 'w-full'" class="relative">
|
||||
<label v-if="isEditMode">
|
||||
<input type="file" @change="updateImage('image2Url', $event)" class="hidden" />
|
||||
<img :src="image2Url || fallbackImage"
|
||||
alt="Image 2"
|
||||
class="rounded-md max-w-full h-auto cursor-pointer" />
|
||||
</label>
|
||||
<img v-else-if="image2Url" :src="image2Url"
|
||||
alt="Image 2"
|
||||
class="rounded-md max-w-full h-auto" />
|
||||
<button v-if="isEditMode" @click="deleteImage('image2Url')"
|
||||
class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white rounded-full hover:bg-red-600">
|
||||
X
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Texte sous les deux images -->
|
||||
<div v-if="isEditMode">
|
||||
<textarea v-model="editableImagesText" class="w-full p-2 border rounded-md h-24"></textarea>
|
||||
</div>
|
||||
<p v-else-if="imagesText" class="text-lg text-justify">
|
||||
{{ imagesText }}
|
||||
</p>
|
||||
|
||||
<!-- Sous-titre avant la vidéo -->
|
||||
<div v-if="isEditMode">
|
||||
<textarea v-model="editableVideoSubtitle" class="w-full p-2 border rounded-md h-24"></textarea>
|
||||
</div>
|
||||
<h2 v-else-if="videoSubtitle" class="text-2xl font-semibold text-center">
|
||||
{{ videoSubtitle }}
|
||||
</h2>
|
||||
|
||||
<!-- Vidéo YouTube -->
|
||||
<div class="flex justify-center">
|
||||
<div v-if="isEditMode">
|
||||
<input type="text" v-model="editableVideoUrl" class="w-full p-2 border rounded-md" />
|
||||
</div>
|
||||
<iframe v-else-if="videoUrl" width="560" height="315"
|
||||
:src="videoUrl"
|
||||
title="YouTube video player"
|
||||
frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowfullscreen
|
||||
class="rounded-md"></iframe>
|
||||
</div>
|
||||
|
||||
<!-- Texte sous la vidéo -->
|
||||
<div v-if="isEditMode">
|
||||
<textarea v-model="editableVideoText" class="w-full p-2 border rounded-md h-24"></textarea>
|
||||
</div>
|
||||
<p v-else-if="videoText" class="text-lg text-justify">
|
||||
{{ videoText }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ref, onMounted, computed} from "vue";
|
||||
import { useBrandingStore } from "@/stores/brandingStore.js";
|
||||
import {useAuthStore} from "@/stores/authStore.js";
|
||||
|
||||
import {useBrandingStore} from "@/stores/brandingStore.js";
|
||||
import DonationButton from "@/views/creators/DonationButton.vue";
|
||||
import {computed} from "vue";
|
||||
import {useRoute, useRouter} from "vue-router";
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const baseUrl = window.location.origin;
|
||||
const creatorSlug = route.params.creator_slug || route.path.split('/')[1];
|
||||
const successUrl = `${baseUrl}/${creatorSlug}`
|
||||
const cancelledUrl = `${baseUrl}/${creatorSlug}`
|
||||
const brandingStore = useBrandingStore();
|
||||
const isEditMode = ref(false);
|
||||
const isLoggedIn = true; // Simulez la connexion.
|
||||
|
||||
const brandingStore = useBrandingStore()
|
||||
const envv = import.meta.env.MODE
|
||||
const enva = import.meta.env.VITE_API_URL
|
||||
const envb = import.meta.env.VITE_STRIPE_API_KEY
|
||||
const tinymceScriptSrc = '/tinymce/js/tinymce/tinymce.min.js';
|
||||
const authStore = useAuthStore();
|
||||
const creatorIsCurrentUser = computed(() => authStore.isAuthenticated && authStore.userId === creatorId.value);
|
||||
|
||||
const creatorId = computed(() => brandingStore.value.id)
|
||||
const creatorName = computed(() => brandingStore.value.name)
|
||||
// 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.",
|
||||
imagesSubtitle: "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",
|
||||
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",
|
||||
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 mainTitle = ref("");
|
||||
const mainImageUrl = ref("");
|
||||
const mainImageText = ref("");
|
||||
const imagesSubtitle = ref("");
|
||||
const image1Url = ref("");
|
||||
const image2Url = ref("");
|
||||
const imagesText = ref("");
|
||||
const videoSubtitle = ref("");
|
||||
const videoUrl = ref("");
|
||||
const videoText = ref("");
|
||||
|
||||
// Editable fields
|
||||
const editableMainTitle = ref("");
|
||||
const editableMainImageText = ref("");
|
||||
const editableImagesSubtitle = ref("");
|
||||
const editableImagesText = ref("");
|
||||
const editableVideoSubtitle = ref("");
|
||||
const editableVideoText = ref("");
|
||||
const editableVideoUrl = ref("");
|
||||
|
||||
// Activer/désactiver le mode édition
|
||||
function toggleEditMode() {
|
||||
if (isEditMode.value) {
|
||||
mainTitle.value = editableMainTitle.value;
|
||||
mainImageText.value = editableMainImageText.value;
|
||||
imagesSubtitle.value = editableImagesSubtitle.value;
|
||||
imagesText.value = editableImagesText.value;
|
||||
videoSubtitle.value = editableVideoSubtitle.value;
|
||||
videoText.value = editableVideoText.value;
|
||||
videoUrl.value = editableVideoUrl.value;
|
||||
} else {
|
||||
editableMainTitle.value = mainTitle.value;
|
||||
editableMainImageText.value = mainImageText.value;
|
||||
editableImagesSubtitle.value = imagesSubtitle.value;
|
||||
editableImagesText.value = imagesText.value;
|
||||
editableVideoSubtitle.value = videoSubtitle.value;
|
||||
editableVideoText.value = videoText.value;
|
||||
editableVideoUrl.value = videoUrl.value;
|
||||
}
|
||||
isEditMode.value = !isEditMode.value;
|
||||
}
|
||||
|
||||
// Supprimer une image
|
||||
function deleteImage(field) {
|
||||
if (field === "mainImageUrl") mainImageUrl.value = null;
|
||||
else if (field === "image1Url") image1Url.value = null;
|
||||
else if (field === "image2Url") image2Url.value = null;
|
||||
}
|
||||
|
||||
// Mettre à jour une image
|
||||
function updateImage(field, event) {
|
||||
const file = event.target.files[0];
|
||||
if (file) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => {
|
||||
if (field === "mainImageUrl") mainImageUrl.value = reader.result;
|
||||
if (field === "image1Url") image1Url.value = reader.result;
|
||||
if (field === "image2Url") image2Url.value = reader.result;
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
}
|
||||
|
||||
// Charger les données au montage
|
||||
onMounted(() => {
|
||||
mainTitle.value = demoData.mainTitle;
|
||||
mainImageUrl.value = demoData.mainImageUrl;
|
||||
mainImageText.value = demoData.mainImageText;
|
||||
imagesSubtitle.value = demoData.imagesSubtitle;
|
||||
image1Url.value = demoData.image1Url;
|
||||
image2Url.value = demoData.image2Url;
|
||||
imagesText.value = demoData.imagesText;
|
||||
videoSubtitle.value = demoData.videoSubtitle;
|
||||
videoUrl.value = demoData.videoUrl;
|
||||
videoText.value = demoData.videoText;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
Reference in New Issue
Block a user