428 lines
9.4 KiB
Vue
428 lines
9.4 KiB
Vue
<template>
|
|
<div class="background">
|
|
<main>
|
|
<video controls width="640">
|
|
<source src="/videos/video.mp4" type="video/mp4" />
|
|
Your browser does not support the video tag.
|
|
</video>
|
|
<ContentDoc />
|
|
<div id="app">
|
|
<h2>Ajouter un nouvel article</h2>
|
|
<form @submit.prevent="addArticle">
|
|
<div>
|
|
<label for="title">Titre :</label>
|
|
<input type="text" id="title" v-model="newArticle.title" required />
|
|
</div>
|
|
<div>
|
|
<label for="content">Contenu :</label>
|
|
<textarea id="content" v-model="newArticle.content" required></textarea>
|
|
</div>
|
|
<button type="submit">Ajouter l'article</button>
|
|
</form>
|
|
|
|
<h2> Nouveaux Articles </h2>
|
|
<!-- Liste des articles -->
|
|
<div v-for="(article, index) in articles" :key="index" class="article">
|
|
<h3>{{ article.title }}</h3>
|
|
<p>{{ article.content }}</p>
|
|
<button @click="editArticle(index)">Modifier</button>
|
|
<button @click="deleteArticle(index)">Supprimer</button>
|
|
</div>
|
|
|
|
<!-- Formulaire de modification -->
|
|
<div v-if="isEditing" class="edit-form">
|
|
<h2>Modifier l'article</h2>
|
|
<form @submit.prevent="updateArticle">
|
|
<div>
|
|
<label for="edit-title">Titre :</label>
|
|
<input type="text" id="edit-title" v-model="currentArticle.title" required />
|
|
</div>
|
|
<div>
|
|
<label for="edit-content">Contenu :</label>
|
|
<textarea id="edit-content" v-model="currentArticle.content" required></textarea>
|
|
</div>
|
|
<button type="submit">Mettre à jour</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<section class="forum">
|
|
<h2>Forum Public</h2>
|
|
<!-- Forum content -->
|
|
<div v-for="(post, index) in posts" :key="index" class="post">
|
|
<p><strong>Article {{ post.articleNumber }}:</strong></p>
|
|
<div class="actions">
|
|
<button @click="upvote(index)">👍 {{ post.votes }}</button>
|
|
<button @click="downvote(index)">👎</button>
|
|
</div>
|
|
<textarea v-model="replies[index]" placeholder="Commentaires..."></textarea>
|
|
<button @click="addReply(index)">Commenter</button>
|
|
<div v-if="post.replies.length > 0" class="replies">
|
|
<h4>Commentaires :</h4>
|
|
<ul class="no-spacing">
|
|
<li v-for="(reply, rIndex) in post.replies" :key="rIndex">
|
|
{{ reply.content }} - <em>{{ reply.date }}</em>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="signature">
|
|
<h2>Signer la Charte</h2>
|
|
<form @submit.prevent="submitSignature">
|
|
<input v-model="name" placeholder="Nom complet" required />
|
|
<input v-model="email" type="email" placeholder="Email" required />
|
|
<textarea v-model="comment" placeholder="Ajouter un commentaire"></textarea>
|
|
<button type="submit">Signer</button>
|
|
</form>
|
|
<p v-if="signatureSuccess">Merci pour votre signature, {{ name }} !</p>
|
|
<div v-if="signatures.length">
|
|
<h3>Signatures enregistrées :</h3>
|
|
<ul>
|
|
<li v-for="signature in signatures" :key="signature.email">
|
|
<strong>{{ signature.name }}</strong> - {{ signature.comment }} - <em>{{ signature.date }}</em>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
newArticle: { title: "", content: "" },
|
|
articles: [],
|
|
isEditing: false,
|
|
currentArticle: null,
|
|
currentArticleIndex: null,
|
|
posts: Array.from({ length: 20 }, (_, i) => ({
|
|
articleNumber: i + 1,
|
|
votes: 0,
|
|
replies: [],
|
|
})),
|
|
replies: [],
|
|
signatures: [], // Initialize signatures as an empty array
|
|
signatureSuccess: false,
|
|
};
|
|
},
|
|
methods: {
|
|
addArticle() {
|
|
if (this.newArticle.title && this.newArticle.content) {
|
|
this.articles.push({ ...this.newArticle });
|
|
this.newArticle.title = "";
|
|
this.newArticle.content = "";
|
|
} else {
|
|
alert("Veuillez remplir tous les champs.");
|
|
}
|
|
},
|
|
deleteArticle(index) {
|
|
this.articles.splice(index, 1);
|
|
},
|
|
editArticle(index) {
|
|
this.isEditing = true;
|
|
this.currentArticleIndex = index;
|
|
this.currentArticle = { ...this.articles[index] };
|
|
},
|
|
updateArticle() {
|
|
if (this.currentArticle && this.currentArticle.title && this.currentArticle.content) {
|
|
// Met à jour l'article dans la liste
|
|
this.articles[this.currentArticleIndex] = { ...this.currentArticle };
|
|
// Réinitialise les variables
|
|
this.isEditing = false;
|
|
this.currentArticle = null;
|
|
this.currentArticleIndex = null;
|
|
} else {
|
|
alert("Veuillez remplir tous les champs avant de mettre à jour.");
|
|
}
|
|
},
|
|
cancelEdit() {
|
|
this.isEditing = false;
|
|
this.currentArticle = null;
|
|
this.currentArticleIndex = null;
|
|
},
|
|
upvote(index) {
|
|
this.posts[index].votes++;
|
|
},
|
|
downvote(index) {
|
|
this.posts[index].votes--;
|
|
},
|
|
addReply(index) {
|
|
if (this.replies[index]?.trim()) {
|
|
this.posts[index].replies.push({
|
|
content: this.replies[index],
|
|
date: new Date().toLocaleString(),
|
|
});
|
|
this.replies[index] = "";
|
|
}
|
|
},
|
|
submitSignature() {
|
|
if (this.name && this.email) {
|
|
this.signatures.push({
|
|
name: this.name,
|
|
email: this.email,
|
|
comment: this.comment,
|
|
date: new Date().toLocaleString(),
|
|
});
|
|
this.signatureSuccess = true;
|
|
|
|
// Clear the input fields after successful submission
|
|
this.name = "";
|
|
this.email = "";
|
|
this.comment = "";
|
|
} else {
|
|
alert("Veuillez remplir tous les champs obligatoires !");
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.article {
|
|
margin-bottom: 20px;
|
|
margin: 20px ;
|
|
}
|
|
.edit-form {
|
|
margin-top: 20px;
|
|
padding: 10px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 8px;
|
|
background-color: #f9f9f9;
|
|
}
|
|
|
|
.post {
|
|
border: 1px solid #F5F5F5;
|
|
padding: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.replies {
|
|
margin-top: 10px;
|
|
}
|
|
.signature {
|
|
margin: 20px 0;
|
|
}
|
|
|
|
/* Styles généraux */
|
|
.background {
|
|
padding: 20px;
|
|
font-family: Arial, sans-serif;
|
|
background-color: #F5F5F5;
|
|
}
|
|
|
|
/* Section Forum */
|
|
.forum {
|
|
margin: 20px 0;
|
|
padding: 15px;
|
|
border: 1px solid #474405;
|
|
border-radius: 8px;
|
|
background-color: #F5F5F5;
|
|
margin-bottom: 5cm;
|
|
}
|
|
|
|
.forum h2 {
|
|
font-size: 24px;
|
|
color: #6A994E;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.post {
|
|
border: 1px solid#474405;
|
|
padding: 10px;
|
|
border-radius: 6px;
|
|
margin-bottom: 15px;
|
|
background-color: #F5F5F5;
|
|
}
|
|
|
|
.post p {
|
|
font-size: 16px;
|
|
color: #474405;
|
|
margin: 0 0 10px;
|
|
}
|
|
|
|
.post .actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.post .actions button {
|
|
background-color: #8B5E3C;
|
|
color: #F5F5F5;
|
|
border: none;
|
|
border-radius: 4px;
|
|
padding: 5px 10px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.post .actions button:hover {
|
|
background-color: #e6ee0d;
|
|
}
|
|
|
|
textarea {
|
|
width: 100%;
|
|
padding: 8px;
|
|
margin-top: 5px;
|
|
font-size: 14px;
|
|
border: 1px solid #474405;
|
|
border-radius: 4px;
|
|
resize: vertical;
|
|
}
|
|
|
|
button {
|
|
background-color: #6A994E;
|
|
color: #F5F5F5;
|
|
border: none;
|
|
border-radius: 4px;
|
|
padding: 8px 12px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
button:hover {
|
|
background-color: #218838;
|
|
}
|
|
|
|
/* Réponses */
|
|
.replies {
|
|
margin-top: 15px;
|
|
padding-left: 10px;
|
|
border-left: 2px solid #8B5E3C;
|
|
}
|
|
|
|
.replies h4 {
|
|
margin-bottom: 5px;
|
|
font-size: 18px;
|
|
color: #474405;
|
|
}
|
|
|
|
.replies ul {
|
|
padding-left: 15px;
|
|
}
|
|
|
|
.replies li {
|
|
font-size: 14px;
|
|
color: #8B5E3C;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
/* Section Signatures */
|
|
.signature {
|
|
margin: 20px 0;
|
|
padding: 15px;
|
|
border: 1px solid #474405;
|
|
border-radius: 8px;
|
|
background-color: #F5F5F5;
|
|
margin-bottom: 1cm;
|
|
}
|
|
|
|
.signature h2 {
|
|
font-size: 24px;
|
|
color: #6A994E;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.signature form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.signature input,
|
|
.signature textarea {
|
|
width: 100%;
|
|
padding: 10px;
|
|
border: 1px solid #474405;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.signature button {
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.signature ul {
|
|
margin-top: 15px;
|
|
list-style: none;
|
|
padding: 0;
|
|
|
|
}
|
|
h3{
|
|
color: #6A994E;
|
|
}
|
|
|
|
.signature ul li {
|
|
font-size: 16px;
|
|
color:#474405;
|
|
padding: 5px 0;
|
|
border-bottom: 1px solid #474405;
|
|
}
|
|
|
|
.signature ul li:last-child {
|
|
border-bottom: none;
|
|
|
|
}
|
|
#app {
|
|
font-family: Avenir, Helvetica, Arial, sans-serif;
|
|
text-align: center;
|
|
color: #6A994E;
|
|
margin-top: 4cm;
|
|
border: 1px solid #474405;
|
|
border-radius: 8px;
|
|
padding: 10px;
|
|
margin-bottom: 5cm;
|
|
|
|
}
|
|
|
|
label {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
color: #474405;
|
|
|
|
}
|
|
input,
|
|
textarea {
|
|
padding: 8px;
|
|
margin-bottom: 10px;
|
|
width: 100%;
|
|
margin-top: 5px;
|
|
font-size: 10px;
|
|
resize: vertical;
|
|
|
|
|
|
}
|
|
button {
|
|
padding: 10px 20px;
|
|
background-color: #6A994E;
|
|
color: white;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
button:hover {
|
|
background-color: #218838;
|
|
}
|
|
form {
|
|
margin: 20px 0;
|
|
padding: 15px;
|
|
border: 1px solid #474405;
|
|
border-radius: 8px;
|
|
background-color: #F5F5F5;
|
|
margin-bottom: 1cm;
|
|
|
|
}
|
|
h3{
|
|
color: #474405;
|
|
}
|
|
button {
|
|
margin-right: 10px; /* Espace à droite du bouton */
|
|
}
|
|
|
|
/* Exemple spécifique pour le deuxième bouton */
|
|
button:last-child {
|
|
margin-right: 0; /* Pas d'espace après le dernier bouton */
|
|
}
|
|
</style>
|
|
|
|
|