Add content creation
This commit is contained in:
Jonathan Bourdon
@@ -1,36 +0,0 @@
|
||||
<template>
|
||||
|
||||
<div>
|
||||
|
||||
<v-img max-height="375"
|
||||
src="images/usersmedia/HutopyProfile/banners/banner01.png"
|
||||
cover>
|
||||
</v-img>
|
||||
|
||||
<div class="text-5xl font-semibold text-center py-10">
|
||||
CRÉATEURS
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2">
|
||||
<RouterLink v-for="(creator, index) in creators"
|
||||
:key="index"
|
||||
:to="creator.routerLink">
|
||||
<CreatorCard :creator="creator"
|
||||
class="m-2">
|
||||
</CreatorCard>
|
||||
</RouterLink>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
import CreatorCard from "@/views/main/CreatorCard.vue";
|
||||
import creators from "@/views/main/creators.json"; // Import the JSON file
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -1,52 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
<div class="flex flex-column w-max-[100] ">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- <div class="w-full border-b-2 p-6">-->
|
||||
<!-- <PostMessage content-id="00000001-0000-0000-0000-000000000001"></PostMessage>-->
|
||||
<!-- </div>-->
|
||||
<!-- -->
|
||||
<!-- <div class="w-full border-b-2 p-6">-->
|
||||
<!-- <h2 class="font-sans font-semibold">Commentaires</h2>-->
|
||||
<!-- <MessageList content-id="00000001-0000-0000-0000-000000000001"></MessageList>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<PostContentMenu></PostContentMenu>
|
||||
|
||||
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="max-w-[800px] border-l-2 border-r-2 border-gray-200 px-4 ">
|
||||
<PostCard v-for="post in posts"
|
||||
:key="post.id"
|
||||
:post="post"
|
||||
class=" bg-white w-full content-center rounded-3xl mt-2">
|
||||
</PostCard>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
import PostContentMenu from '@/views/main/PostContentMenu.vue'
|
||||
import PostCard from "@/views/main/PostCard.vue"
|
||||
import posts from "@/views/main/posts.json"
|
||||
import PostMessage from "@/views/messages/PostMessage.vue";
|
||||
import MessageList from "@/views/messages/MessageList.vue";
|
||||
|
||||
let imageSrc = '/images/usersmedia/guillaumeMousseau/banners/bannerGuillaumeMousseau01.png';
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,22 +0,0 @@
|
||||
<template>
|
||||
<v-card class="shadow-lg rounded-lg overflow-hidden max-w-sm">
|
||||
<v-img :src="creator.imageUrl" class="w-full h-48 object-cover"></v-img>
|
||||
<v-card-title class="text-lg font-bold">{{ creator.name }}</v-card-title>
|
||||
<v-card-subtitle class="text-sm text-gray-500">{{ creator.title }}</v-card-subtitle>
|
||||
<v-card-text class="text-base text-gray-700">{{ creator.description }}</v-card-text>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps } from 'vue';
|
||||
|
||||
defineProps({
|
||||
creator: {
|
||||
type: Object,
|
||||
required: true,
|
||||
validator: (profile) => {
|
||||
return 'image' in profile && 'name' in profile && 'title' in profile && 'description' in profile;
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -1,41 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
<div class="flex flex-column w-max-[100] ">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="max-w-[800px] border-l-2 border-r-2 border-gray-200 px-4 ">
|
||||
<PostCard v-for="post in posts"
|
||||
:key="post.id"
|
||||
:post="post"
|
||||
class=" bg-white w-full content-center rounded-3xl mt-2">
|
||||
</PostCard>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
import PostContentMenu from '@/views/main/PostContentMenu.vue'
|
||||
import PostCard from "@/views/main/PostCard.vue"
|
||||
import posts from "@/views/main/posts.json"
|
||||
import PostMessage from "@/views/messages/PostMessage.vue";
|
||||
import MessageList from "@/views/messages/MessageList.vue";
|
||||
|
||||
let imageSrc = '/images/usersmedia/guillaumeMousseau/banners/bannerGuillaumeMousseau01.png';
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,10 +1,9 @@
|
||||
<template>
|
||||
|
||||
<footer>
|
||||
<div class="bg-black/5 p-6 text-center">
|
||||
{{ new Date().getFullYear() }} — <strong>Hutopy v.01</strong>
|
||||
<div class="p-4 text-center font-sans">
|
||||
Hutopy ©{{ new Date().getFullYear() }} - Tout droits réservés
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
|
||||
@@ -124,6 +124,7 @@ import SelectedFooter from "@/views/main/SelectedFooter.vue";
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.overlay p {
|
||||
color: white;
|
||||
font-size: 1.5rem;
|
||||
@@ -134,6 +135,4 @@ body {
|
||||
background-color: #F4F4F4;
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,44 +0,0 @@
|
||||
<template>
|
||||
|
||||
|
||||
<div class="border-2 shadow-2xl mb-4 ">
|
||||
<div class="mt-1">
|
||||
|
||||
<v-img class="mt-1 rounded-t-2xl " :src="props.post.banner"
|
||||
v-if="!isHttpUrl">
|
||||
</v-img>
|
||||
|
||||
|
||||
<iframe style="min-height: 400px" class="w-full rounded-t-2xl"
|
||||
v-if="isHttpUrl"
|
||||
:src="props.post.banner"
|
||||
title="YouTube video player"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
referrerpolicy="strict-origin-when-cross-origin"
|
||||
allowfullscreen>
|
||||
</iframe>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="text-lg font-bold m-4">{{ props.post.title }}</div>
|
||||
<div class="text-sm text-gray-500 m-4">{{ props.post.title }}</div>
|
||||
<div class="text-base text-gray-700 m-4 text-justify">{{ props.post.content }}</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {defineProps, computed} from 'vue';
|
||||
|
||||
const isHttpUrl = computed(() => props.post.banner.startsWith('http'))
|
||||
|
||||
const props = defineProps({
|
||||
post: {
|
||||
type: Object,
|
||||
required: true,
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
@@ -1,155 +0,0 @@
|
||||
<template>
|
||||
<v-col cols="12">
|
||||
<v-container>
|
||||
<v-card style="border-radius: 30px" elevation="10">
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
<!-- Boutons de sélection -->
|
||||
<v-col cols="2" class="d-flex justify-center align-center toolbar-btn">
|
||||
<v-btn elevation="0" icon @click="selectType('title')">
|
||||
<v-icon>mdi-format-title</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="2" class="d-flex justify-center align-center toolbar-btn">
|
||||
<v-btn elevation="0" icon @click="selectType('text')">
|
||||
<v-icon>mdi-text</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="2" class="d-flex justify-center align-center toolbar-btn">
|
||||
<v-btn elevation="0" icon @click="selectType('image')">
|
||||
<v-icon>mdi-image</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="2" class="d-flex justify-center align-center toolbar-btn">
|
||||
<v-btn elevation="0" icon @click="selectType('video')">
|
||||
<v-icon>mdi-video</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="2" class="d-flex justify-center align-center toolbar-btn">
|
||||
<v-btn elevation="0" icon @click="selectType('audio')">
|
||||
<v-icon>mdi-volume-high</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="2" class="d-flex justify-center align-center toolbar-btn">
|
||||
<v-btn elevation="0" icon @click="selectType('comments')">
|
||||
<v-icon>mdi-comment</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
|
||||
<!-- Affichage du contenu en fonction du type sélectionné -->
|
||||
<v-card-text>
|
||||
<v-row v-for="(content, index) in contents" :key="index" class="draggable-row"
|
||||
@dragstart="dragStart(index)" @dragover.prevent @drop="drop(index)" draggable="true">
|
||||
<v-col cols="10">
|
||||
<template v-if="content.type === 'title'">
|
||||
<v-text-field v-model="content.value" label="Titre"></v-text-field>
|
||||
</template>
|
||||
<template v-else-if="content.type === 'text'">
|
||||
<v-textarea v-model="content.value" label="Texte"></v-textarea>
|
||||
</template>
|
||||
<template v-else-if="content.type === 'image'">
|
||||
<v-row>
|
||||
|
||||
<v-col cols="12">
|
||||
<v-file-input v-model="content.value" label="Image"></v-file-input>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
<template v-else-if="content.type === 'video'">
|
||||
<v-text-field v-model="content.value" label="URL de la vidéo"></v-text-field>
|
||||
</template>
|
||||
<template v-else-if="content.type === 'audio'">
|
||||
<v-row>
|
||||
<v-col cols="2">
|
||||
<v-icon>mdi-volume-high</v-icon>
|
||||
</v-col>
|
||||
<v-col cols="10">
|
||||
<v-file-input v-model="content.value" label="Audio"></v-file-input>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
<template v-else-if="content.type === 'comments'">
|
||||
<v-text-field v-model="content.value" label="Commentaires"></v-text-field>
|
||||
</template>
|
||||
</v-col>
|
||||
<v-col cols="2" class="d-flex justify-center align-center">
|
||||
<v-btn icon @click="removeContent(index)" class="remove-button">
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
|
||||
<!-- Boutons Post, Preview et Cancel -->
|
||||
<v-row v-if="contents.length > 0" justify="end" style="margin-bottom: 10px;">
|
||||
<v-col class="d-flex justify-end" style="margin-right: 4%;">
|
||||
<v-btn style="margin-right: 15px;" @click="postContent" color="white" dark
|
||||
elevation="4">Post</v-btn>
|
||||
<v-btn style="margin-right: 15px;" @click="previewContent" color="white" dark
|
||||
elevation="5">Preview</v-btn>
|
||||
<v-btn @click="cancelPost" color="white" dark elevation="5">Cancel</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</v-col>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const contents = ref([]);
|
||||
let dragIndex = null;
|
||||
|
||||
const selectType = (type) => {
|
||||
console.log("Type sélectionné:", type);
|
||||
contents.value.push({ type: type, value: '' });
|
||||
};
|
||||
|
||||
const removeContent = (index) => {
|
||||
contents.value.splice(index, 1);
|
||||
};
|
||||
|
||||
|
||||
|
||||
const cancelPost = () => {
|
||||
if (contents.value.length > 0) {
|
||||
// Réinitialiser le tableau contents pour supprimer tous les contenus
|
||||
contents.value = [];
|
||||
}
|
||||
};
|
||||
|
||||
const dragStart = (index) => {
|
||||
dragIndex = index;
|
||||
};
|
||||
|
||||
const drop = (index) => {
|
||||
if (dragIndex !== null && index !== null) {
|
||||
const draggedItem = contents.value[dragIndex];
|
||||
contents.value.splice(dragIndex, 1);
|
||||
contents.value.splice(index, 0, draggedItem);
|
||||
dragIndex = null;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.remove-button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: -20%;
|
||||
}
|
||||
|
||||
.toolbar-btn {
|
||||
margin-top: 10px;
|
||||
margin-bottom: -15px;
|
||||
}
|
||||
|
||||
.draggable-row {
|
||||
cursor: grab;
|
||||
}
|
||||
</style>
|
||||
@@ -1,51 +0,0 @@
|
||||
[
|
||||
{
|
||||
"ìd": 1,
|
||||
"name": "Hutopy",
|
||||
"title": "Page officielle",
|
||||
"description": "Site officiel pour Hutopy. Venez-nous-y retrouver avec tous vos fans!",
|
||||
"imageUrl": "/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png",
|
||||
"routerLink": "@hutopy",
|
||||
"about": "Notre mission chez Hutopy est d'aider les gens à s'épanouir en leur proposant un environnement de partage unique qui va leur permettre de se surpasser. Nous travaillons étroitement avec la communauté d'Hutopy afin de concentrer notre développement sur ce que vous demandez et sur vos besoins, afin d'offrir les meilleurs outils. Le tout en gardant à l'esprit l'aspect humain de chacun. Il est important pour nous de contribuer à créer un monde meilleur.",
|
||||
"contacts": {
|
||||
"twitter": "https://twitter.com/Hutopyinc",
|
||||
"facebook": "https://www.facebook.com/Hutopy",
|
||||
"instagram": "https://www.instagram.com/hutopy.inc/"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"name": "L'effet",
|
||||
"description": "Fondation",
|
||||
"imageUrl": "/images/usersmedia/leffet/profilepictures/leffetProfile01.png",
|
||||
"routerLink": "@leffet"
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"name": "Guillaume M",
|
||||
"description": "Créateur de contenus",
|
||||
"imageUrl": "/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.png",
|
||||
"routerLink": "@guillaumeaime"
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"name": "Chloé Beaugrand",
|
||||
"description": "Spécialiste en médias sociaux",
|
||||
"imageUrl": "/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand01.png",
|
||||
"routerLink": "@chloebeaugrand"
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"name": "Mathieu Caron",
|
||||
"description": "Entrevue Atypique",
|
||||
"imageUrl": "/images/usersmedia/mathieuCaron/profilepictures/profileMathieuCaron01.png",
|
||||
"routerLink": "@mathieuCaron"
|
||||
},
|
||||
{
|
||||
"id": 6,
|
||||
"name": "ARPS",
|
||||
"description": "Agence créative",
|
||||
"imageUrl": "/images/usersmedia/ARPS/profilepictures/profileARPS.png",
|
||||
"routerLink": "@ARPS"
|
||||
}
|
||||
]
|
||||
@@ -1,34 +0,0 @@
|
||||
[
|
||||
{
|
||||
"id": 1,
|
||||
"creatorId": 1,
|
||||
"title": "Déploiement de la version 0.10 d'Hutopy",
|
||||
"date": "24-04-2024",
|
||||
"banner": "https://www.youtube.com/embed/neKWqjE0eSs?si=Bo7xbYaw9-56w3lU",
|
||||
"content": "Bonjour, Nous sommes fiers de vous présenter la version 0.10 d'Hutopy. Nous sommes au début d'une aventure visant à transformer la sphère des médias sociaux. Notre objectif est d'apporter un souffle de fraîcheur en favorisant des interactions plus constructives entre les individus. Dans cette première version, seuls nos utilisateurs testeurs ont accès à la plateforme comme créateur. Dans un futur proche, avec le déploiement de la version 0.2, nous contacterons les personnes qui se sont inscrites via l'onglet d'inscription et ont rempli quelques questions. Si vous souhaitez soutenir le développement de la plateforme, deux options s'offrent à vous. La première consiste à nous apporter un soutien financier, tandis que la seconde est de nous contacter pour faire partie de l'équipe de développement. Nous recherchons actuellement un programmeur supplémentaire pour faire progresser certaines fonctionnalités. Merci de visiter Hutopy."
|
||||
},
|
||||
{
|
||||
"id": 1,
|
||||
"creatorId": 1,
|
||||
"title": "Déploiement de la version 0.10 d'Hutopy",
|
||||
"date": "24-04-2024",
|
||||
"banner": "/images/usersmedia/HutopyProfile/pictures/version.png",
|
||||
"content": "Bonjour, Nous sommes fiers de vous présenter la version 0.10 d'Hutopy. Nous sommes au début d'une aventure visant à transformer la sphère des médias sociaux. Notre objectif est d'apporter un souffle de fraîcheur en favorisant des interactions plus constructives entre les individus. Dans cette première version, seuls nos utilisateurs testeurs ont accès à la plateforme comme créateur. Dans un futur proche, avec le déploiement de la version 0.2, nous contacterons les personnes qui se sont inscrites via l'onglet d'inscription et ont rempli quelques questions. Si vous souhaitez soutenir le développement de la plateforme, deux options s'offrent à vous. La première consiste à nous apporter un soutien financier, tandis que la seconde est de nous contacter pour faire partie de l'équipe de développement. Nous recherchons actuellement un programmeur supplémentaire pour faire progresser certaines fonctionnalités. Merci de visiter Hutopy."
|
||||
},
|
||||
{
|
||||
"id": 1,
|
||||
"creatorId": 1,
|
||||
"title": "Déploiement de la version 0.10 d'Hutopy",
|
||||
"date": "24-04-2024",
|
||||
"banner": "/images/usersmedia/HutopyProfile/pictures/version.png",
|
||||
"content": "Bonjour, Nous sommes fiers de vous présenter la version 0.10 d'Hutopy. Nous sommes au début d'une aventure visant à transformer la sphère des médias sociaux. Notre objectif est d'apporter un souffle de fraîcheur en favorisant des interactions plus constructives entre les individus. Dans cette première version, seuls nos utilisateurs testeurs ont accès à la plateforme comme créateur. Dans un futur proche, avec le déploiement de la version 0.2, nous contacterons les personnes qui se sont inscrites via l'onglet d'inscription et ont rempli quelques questions. Si vous souhaitez soutenir le développement de la plateforme, deux options s'offrent à vous. La première consiste à nous apporter un soutien financier, tandis que la seconde est de nous contacter pour faire partie de l'équipe de développement. Nous recherchons actuellement un programmeur supplémentaire pour faire progresser certaines fonctionnalités. Merci de visiter Hutopy."
|
||||
},
|
||||
{
|
||||
"id": 1,
|
||||
"creatorId": 1,
|
||||
"title": "Déploiement de la version 0.10 d'Hutopy",
|
||||
"date": "24-04-2024",
|
||||
"banner": "/images/usersmedia/HutopyProfile/pictures/version.png",
|
||||
"content": "Bonjour, Nous sommes fiers de vous présenter la version 0.10 d'Hutopy. Nous sommes au début d'une aventure visant à transformer la sphère des médias sociaux. Notre objectif est d'apporter un souffle de fraîcheur en favorisant des interactions plus constructives entre les individus. Dans cette première version, seuls nos utilisateurs testeurs ont accès à la plateforme comme créateur. Dans un futur proche, avec le déploiement de la version 0.2, nous contacterons les personnes qui se sont inscrites via l'onglet d'inscription et ont rempli quelques questions. Si vous souhaitez soutenir le développement de la plateforme, deux options s'offrent à vous. La première consiste à nous apporter un soutien financier, tandis que la seconde est de nous contacter pour faire partie de l'équipe de développement. Nous recherchons actuellement un programmeur supplémentaire pour faire progresser certaines fonctionnalités. Merci de visiter Hutopy."
|
||||
}
|
||||
]
|
||||
Reference in New Issue
Block a user