theoludwig/FunctionProject
theoludwig/FunctionProject
Archived
1
1
Fork 0
Code Pull Requests Actions Releases Activity

📦 NEW: Ajout de la fonction toDoList

Browse Source
This commit is contained in:
Divlo 2020-04-24 14:43:52 +02:00
parent 699ce6ec36
commit 8d7b3278c7
6 changed files with 241 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.github/backup.sql vendored
View File

@ -17,4 +17,6 @@ INSERT INTO `functions` (`id`, `title`, `slug`, `description`, `image`, `type`,
(8, 'Conversion des Encodages de caractères', 'convertEncoding', 'Convertis des nombres de différentes bases et convertis en UTF-8.', '/images/functions/convertEncoding.png', 'form', NULL, '[{\"name\": \"value\", \"type\": \"text\", \"label\": \"Entrez votre valeur :\", \"placeholder\": \"Votre valeur...\"}, {\"name\": \"functionName\", \"type\": \"select\", \"label\": \"Choisissez une option :\", \"options\": [{\"name\": \"Décimal en Binaire\", \"value\": \"decimalToBinary\"}, {\"name\": \"Binaire en Décimal\", \"value\": \"binaryToDecimal\"}, {\"name\": \"Décimal en Hexadecimal\", \"value\": \"decimalToHexadecimal\"}, {\"name\": \"Hexadecimal en Décimal\", \"value\": \"hexadecimalToDecimal\"}, {\"name\": \"Binaire en Hexadécimal\", \"value\": \"binaryToHexadecimal\"}, {\"name\": \"Hexadécimal en Binaire\", \"value\": \"hexadecimalToBinary\"}, {\"name\": \"Chaque caractère a un nombre Unicode\", \"value\": \"textToNumberUnicode\"}, {\"name\": \"Chaque nombre Unicode a un caractère\", \"value\": \"numberUnicodeToText\"}, {\"name\": \"Texte en Binaire (UTF-8)\", \"value\": \"textToBinary\"}, {\"name\": \"Binaire (UTF-8) en Texte\", \"value\": \"binaryToText\"}, {\"name\": \"Texte en Hexadécimal (UTF-8)\", \"value\": \"textToHexadecimal\"}, {\"name\": \"Hexadécimal (UTF-8) en Texte\", \"value\": \"hexadecimalToText\"}], \"placeholder\": \"\"}]', 1, '2019-09-14 00:00:00', '2020-04-22 22:34:48', 2),
(9, 'Conversion d\'un nombre arabe en nombre romain', 'convertRomanArabicNumbers', 'Convertis un nombre arabe en nombre romain (et l\'inverse aussi).', '/images/functions/convertRomanArabicNumbers.png', 'form', NULL, '[{\"name\": \"value\", \"type\": \"text\", \"label\": \"Entrez votre nombre :\", \"placeholder\": \"(e.g : 50 ou L)\"}, {\"name\": \"functionName\", \"type\": \"select\", \"label\": \"Convertir en :\", \"options\": [{\"name\": \"Nombre Romain\", \"value\": \"convertArabicToRomanOutput\"}, {\"name\": \"Nombre Arabe\", \"value\": \"convertRomanToArabicOutput\"}], \"placeholder\": \"\"}]', 1, '2019-09-21 00:00:00', '2020-04-22 22:43:50', 2),
(10, 'Nombre d\'Armstrong', 'armstrongNumber', 'Permet de savoir si un nombre fait partie des nombres d\'Armstrong.', '/images/functions/armstrongNumber.png', 'form', NULL, '[{\"name\": \"number\", \"type\": \"integer\", \"label\": \"Entrez votre nombre :\", \"placeholder\": \"(e.g : 153)\"}]', 1, '2019-09-21 00:00:00', '2020-04-22 22:49:21', 2),
(11, 'Heap\'s algorithm', 'heapAlgorithm', 'Génère toutes les permutations uniques possibles d\'une chaîne de caractère.', '/images/functions/heapAlgorithm.png', 'form', NULL, '[{\"name\": \"string\", \"type\": \"text\", \"label\": \"Entrez un mot :\", \"placeholder\": \"(e.g : Mot)\"}]', 1, '2019-10-11 00:01:00', '2020-04-22 23:06:15', 2);
(11, 'Heap\'s algorithm', 'heapAlgorithm', 'Génère toutes les permutations uniques possibles d\'une chaîne de caractère.', '/images/functions/heapAlgorithm.png', 'form', NULL, '[{\"name\": \"string\", \"type\": \"text\", \"label\": \"Entrez un mot :\", \"placeholder\": \"(e.g : Mot)\"}]', 1, '2019-10-11 00:01:00', '2020-04-22 23:06:15', 2),
(12, 'Raccourcisseurs de liens', 'linkShortener', 'Une URL trop longue ? Raccourcissez-là !', '/images/functions/linkShortener.png', 'form', NULL, '[{\"name\": \"url\", \"type\": \"text\", \"label\": \"Entrez le lien à raccourcir :\", \"placeholder\": \"(e.g : https://divlo.fr)\"}, {\"name\": \"shortcutName\", \"type\": \"text\", \"label\": \"Entrez le nom du raccourci :\", \"placeholder\": \"(e.g : divlo)\"}]', 1, '2019-12-11 00:00:00', '2020-04-23 09:45:02', 1),
(13, 'Liste de choses à faire', 'toDoList', 'Prévoyez la liste de choses que vous devez faire.', '/images/functions/toDoList.png', 'page', NULL, NULL, 1, '2019-12-26 00:00:00', '2020-04-23 13:48:33', 1);

10
website/components/FunctionPage/CommentCard/CommentCard.js
View File

@ -1,5 +1,5 @@
import Link from 'next/link';
import { forwardRef, useContext, Fragment } from 'react';
import { forwardRef, useContext } from 'react';
import date from 'date-and-time';
import { UserContext } from '../../../contexts/UserContext';
import { API_URL } from '../../../utils/config';
@ -36,13 +36,19 @@ const CommentCard = forwardRef((props, ref) => {
<a>{props.user.name}</a>
</Link>
&nbsp;- {date.format(new Date(props.createdAt), 'DD/MM/YYYY à HH:mm', true)}
{(isAuth && user.name === props.user.name) && <Fragment>&nbsp;-&nbsp;<a onClick={deleteCommentById} href="#">supprimer</a></Fragment>}
</span>
</div>
<div className="row">
<div className="col-24">
<p className="CommentCard__message">
{props.message}
</p>
{(isAuth && user.name === props.user.name) &&
<p style={{ fontSize: '15px', margin: '15px 0 0 0', fontStyle: 'italic' }}>
<a onClick={deleteCommentById} href="#">supprimer le commentaire</a>
</p>
}
</div>
</div>
</div>
</div>

2
website/components/FunctionPage/FunctionComments/FunctionComments.js
View File

@ -86,7 +86,7 @@ const FunctionComments = ({ functionId }) => {
</form>
:
<p className="text-center">
Vous devez être <Link href={'/login'}><a>connecté</a></Link> pour poster un commentaire.
Vous devez être <Link href={'/users/login'}><a>connecté</a></Link> pour poster un commentaire.
</p>
}
</div>

17
website/pages/functions/randomQuote.js
View File

@ -181,11 +181,16 @@ const SuggestQuote = () => {
}
}
if (!isAuth) {
return (
<p className="text-center">
Vous devez être <Link href={'/users/login'}><a>connecté</a></Link> pour proposer une citation.
</p>
);
}
return (
<div className="container-fluid">
{
(isAuth) ?
<Fragment>
<div className="row justify-content-center">
<div className="col-24 text-center">
<h2 style={{ margin: 0 }}>Proposer une citation : </h2>
@ -219,12 +224,6 @@ const SuggestQuote = () => {
htmlParser(message)
}
</div>
</Fragment>
:
<p className="text-center">
Vous devez être <Link href={'/login'}><a>connecté</a></Link> pour proposer une citation.
</p>
}
</div>
);
}

150
website/pages/functions/toDoList.js Normal file
View File

@ -0,0 +1,150 @@
import { useState, useEffect, useContext } from 'react';
import Link from 'next/link';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faTrash, faCheck, faTimes } from '@fortawesome/free-solid-svg-icons';
import { UserContext } from '../../contexts/UserContext';
import redirect from '../../utils/redirect';
import FunctionPage from '../../components/FunctionPage/FunctionPage';
import FunctionTabs from '../../components/FunctionPage/FunctionTabs';
import FunctionArticle from '../../components/FunctionPage/FunctionArticle';
import FunctionComments from '../../components/FunctionPage/FunctionComments/FunctionComments';
import api from '../../utils/api';
import '../../public/css/pages/FunctionComponent.css';
import '../../public/css/pages/functions/toDoList.css';
import '../../components/FunctionCard/FunctionCard.css';
const ManageToDo = () => {
const { isAuth, user } = useContext(UserContext);
const [inputState, setInputState] = useState({ task: "" });
const [tasks, setTasks] = useState([]);
useEffect(() => {
const getTasks = async () => {
const { data } = await api.get('/tasks', { headers: { 'Authorization': user.token } });
setTasks(data);
}
if (isAuth && user.token != undefined) {
getTasks();
}
}, [isAuth]);
const handleChange = (event) => {
const inputStateNew = { ...inputState };
inputStateNew[event.target.name] = event.target.value;
setInputState(inputStateNew);
}
const handleSubmit = async (event) => {
event.preventDefault();
try {
const { data } = await api.post('/tasks', inputState, { headers: { 'Authorization': user.token } });
const newTasks = [...tasks];
newTasks.push(data);
setTasks(newTasks);
setInputState({ task: "" });
} catch {}
}
const handleRemoveTask = async (id, index) => {
const newTasks = [...tasks];
try {
await api.delete(`/tasks/${id}`, { headers: { 'Authorization': user.token } });
newTasks.splice(index, 1);
setTasks(newTasks);
} catch {}
}
const handleEditTask = async (id, index, isCompleted) => {
try {
await api.put(`/tasks/${id}`, { isCompleted: !isCompleted }, { headers: { 'Authorization': user.token } });
const newTasks = [...tasks];
const taskObject = newTasks[index];
taskObject.isCompleted = !isCompleted;
setTasks(newTasks);
} catch {}
}
if (!isAuth) {
return (
<p className="text-center">
Vous devez être <Link href={'/users/login'}><a>connecté</a></Link> pour gérer des "tâches à faire".
</p>
);
}
return (
<div className="container-fluid">
<div className="row justify-content-center">
<div className="col-24">
<form onSubmit={handleSubmit}>
<div className="text-center">
<label htmlFor="task" className="form-label">Ajouter une tâche à faire :</label>
<input value={inputState.task} onChange={handleChange} name="task" id="task" type="text" className="form-control" placeholder="(e.g : Apprendre à coder)" />
</div>
<div className="form-group text-center">
<button type="submit" className="btn btn-dark">Envoyer</button>
</div>
</form>
</div>
</div>
{(tasks.length > 0) &&
<div className="row justify-content-center">
<div className="col-24 ManageToDo__container">
<ul className="ManageToDo__list">
{tasks.map((task, index) => {
return (
<li key={task.id} className={`ManageToDo__list-item ${(task.isCompleted) ? "isCompleted" : ""}`}>
<span className="ManageToDo__list-item-span">{task.task}</span>
<div>
<button className="ManageToDo__task-btn" title="Supprimer de la liste" onClick={() => handleRemoveTask(task.id, index)}>
<FontAwesomeIcon icon={faTrash} />
</button>
<button className="ManageToDo__task-btn" onClick={() => handleEditTask(task.id, index, task.isCompleted)}>
<FontAwesomeIcon { ...(task.isCompleted) ? { icon: faTimes } : { icon: faCheck } } />
</button>
</div>
</li>
);
})}
</ul>
</div>
</div>
}
</div>
);
}
const FunctionTabManager = (props) => {
return (
<FunctionTabs setSlideIndex={props.setSlideIndex} slideIndex={props.slideIndex}>
<div className="FunctionComponent__slide">
<ManageToDo />
</div>
<div className="FunctionComponent__slide">
<FunctionArticle article={props.article} />
</div>
<div className="FunctionComponent__slide">
<FunctionComments functionId={props.id} />
</div>
</FunctionTabs>
);
}
const toDoList = (props) => (
<FunctionPage
FunctionTabManager={FunctionTabManager}
{ ...props }
tabNames={["⚙️ Utilisation", "📝 Article", "📬 Commentaires"]}
/>
);
export async function getServerSideProps(context) {
return api.get(`/functions/toDoList`)
.then((response) => ({ props: response.data }))
.catch(() => redirect(context, '/404'));
}
export default toDoList;

34
website/public/css/pages/functions/toDoList.css Normal file
View File

@ -0,0 +1,34 @@
.ManageToDo__container {
display: flex;
flex-direction: column;
box-shadow: 0px 0px 6px 6px rgba(0, 0, 0, .25);
border: 1px solid black;
border-radius: 1rem;
margin: 40px 40px;
}
.ManageToDo__list {
overflow: hidden;
}
.ManageToDo__list-item {
display: flex;
justify-content: space-between;
margin: 25px 0;
}
.ManageToDo__list-item.isCompleted {
text-decoration: line-through;
}
.ManageToDo__task-btn {
color: var(--text-color);
cursor: pointer;
background-color: transparent;
border: none;
outline: none;
margin-left: 7px;
margin-right: 7px;
width: 1.75em;
}
.ManageToDo__list-item-span {
width: calc(100% - 120px);
overflow: hidden;
text-overflow: ellipsis;
}