From 075d455fbd720a6295a50ae17649d644a0c23fd4 Mon Sep 17 00:00:00 2001 From: Divlo Date: Wed, 29 Apr 2020 18:51:30 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=93=A6=20NEW:=20Ajout=20de=20chronometerT?= =?UTF-8?q?imer?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/backup.sql | 3 +- website/package-lock.json | 8 ++ website/package.json | 1 + website/pages/functions/chronometerTimer.js | 126 ++++++++++++++++++ website/pages/functions/rightPrice.js | 1 - website/pages/functions/toDoList.js | 2 +- .../css/pages/functions/chronometerTimer.css | 38 ++++++ 7 files changed, 176 insertions(+), 3 deletions(-) create mode 100644 website/pages/functions/chronometerTimer.js create mode 100644 website/public/css/pages/functions/chronometerTimer.css diff --git a/.github/backup.sql b/.github/backup.sql index ac42b9f..14aa9bc 100644 --- a/.github/backup.sql +++ b/.github/backup.sql @@ -20,4 +20,5 @@ INSERT INTO `functions` (`id`, `title`, `slug`, `description`, `image`, `type`, (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-27 16:31:38', 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-27 16:34:34', 1), -(14, 'Juste Prix', 'rightPrice', 'Arriverez-vous à deviner le prix d\'un objet ?', '/images/functions/rightPrice.png', 'page', NULL, NULL, 1, '2020-04-27 20:17:05', '2020-04-27 21:59:22', 3); \ No newline at end of file +(14, 'Juste Prix', 'rightPrice', 'Arriverez-vous à deviner le prix d\'un objet ?', '/images/functions/rightPrice.png', 'page', NULL, NULL, 1, '2020-04-27 20:17:05', '2020-04-27 21:59:22', 3), +(15, 'Chronomètre', 'chronometerTimer', 'Gérer votre temps facilement (et adopter la technique Pomodoro).', '/images/functions/chronometerTimer.png', 'page', NULL, NULL, 1, '2020-04-29 09:28:08', '2020-04-29 09:45:29', 1); \ No newline at end of file diff --git a/website/package-lock.json b/website/package-lock.json index 5f72ad4..8a53a13 100644 --- a/website/package-lock.json +++ b/website/package-lock.json @@ -8594,6 +8594,14 @@ "prop-types": "^15.6.2" } }, + "react-codepen-embed": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/react-codepen-embed/-/react-codepen-embed-1.0.1.tgz", + "integrity": "sha512-Lqi9uNimI4s8pGpCNU/NuP/UFscFSdgeYXfLLJym8NmzzyUt5Gbwwbkvzfp5UYj24S31eW1eClewhe5W+STULA==", + "requires": { + "prop-types": "^15.5.0" + } + }, "react-color": { "version": "2.18.0", "resolved": "https://registry.npmjs.org/react-color/-/react-color-2.18.0.tgz", diff --git a/website/package.json b/website/package.json index 8e1c6f8..10f17b2 100644 --- a/website/package.json +++ b/website/package.json @@ -23,6 +23,7 @@ "notyf": "^3.6.0", "nprogress": "^0.2.0", "react": "16.13.0", + "react-codepen-embed": "^1.0.1", "react-color": "^2.18.0", "react-datepicker": "^2.14.1", "react-dom": "16.13.0", diff --git a/website/pages/functions/chronometerTimer.js b/website/pages/functions/chronometerTimer.js new file mode 100644 index 0000000..32b2d11 --- /dev/null +++ b/website/pages/functions/chronometerTimer.js @@ -0,0 +1,126 @@ +import { useState } from 'react'; +import Codepen from "react-codepen-embed"; +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 Loader from '../../components/Loader'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faPlay, faPause, faSync } from '@fortawesome/free-solid-svg-icons'; +import api from '../../utils/api'; +import '../../public/css/pages/FunctionComponent.css'; +import '../../components/FunctionCard/FunctionCard.css'; +import '../../public/css/pages/functions/chronometerTimer.css'; + +let interval; +function convertSeconds(seconds) { + return { + minutes: Math.floor(seconds / 60), + seconds: seconds % 60 + } +} + +const Chronometer = () => { + + const [timeLength, setTimeLength] = useState(0); // seconds + const [isPlaying, setIsPlaying] = useState(false); + + const handlePlayPause = () => { + if (isPlaying) { + clearInterval(interval); + } else { + if (interval) clearInterval(interval); + interval = setInterval(() => { + setTimeLength((time) => time + 1); + }, 1000); + } + setIsPlaying(!isPlaying); + } + + const handleReset = () => { + if (interval) clearInterval(interval); + setIsPlaying(false); + setTimeLength(0); + } + + const getFormattedValue = () => { + const minutesAndSeconds = convertSeconds(timeLength); + const minutes = (minutesAndSeconds.minutes < 100) ? (('0'+minutesAndSeconds.minutes).slice(-2)) : minutesAndSeconds.minutes; + const seconds = ('0'+minutesAndSeconds.seconds).slice(-2); + return `${minutes}:${seconds}`; + } + + return( +
+
+
+
+
+
+
+ {/* 25:00 */} + {getFormattedValue()} +
+
+
+ +
+
+ + +
+
+
+
+
+
+ ); +} + +const Pomodoro = () => { + return ( +
+ } /> +
+ ); +} + +const FunctionTabManager = (props) => { + return ( + +
+ +
+
+ +
+
+ +
+
+ +
+ + ); +} + +const chronometerTimer = (props) => ( + +); + +export async function getServerSideProps(context) { + return api.get(`/functions/chronometerTimer`) + .then((response) => ({ props: response.data })) + .catch(() => redirect(context, '/404')); +} + +export default chronometerTimer; \ No newline at end of file diff --git a/website/pages/functions/rightPrice.js b/website/pages/functions/rightPrice.js index 0ee94ec..1c28fe8 100644 --- a/website/pages/functions/rightPrice.js +++ b/website/pages/functions/rightPrice.js @@ -7,7 +7,6 @@ import FunctionComments from '../../components/FunctionPage/FunctionComments/Fun import Loader from '../../components/Loader'; import api from '../../utils/api'; import '../../public/css/pages/FunctionComponent.css'; -import '../../public/css/pages/functions/toDoList.css'; import '../../components/FunctionCard/FunctionCard.css'; import '../../public/css/pages/functions/rightPrice.css'; diff --git a/website/pages/functions/toDoList.js b/website/pages/functions/toDoList.js index cc3354e..26510bd 100644 --- a/website/pages/functions/toDoList.js +++ b/website/pages/functions/toDoList.js @@ -10,8 +10,8 @@ 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'; +import '../../public/css/pages/functions/toDoList.css'; const ManageToDo = () => { diff --git a/website/public/css/pages/functions/chronometerTimer.css b/website/public/css/pages/functions/chronometerTimer.css new file mode 100644 index 0000000..475d263 --- /dev/null +++ b/website/public/css/pages/functions/chronometerTimer.css @@ -0,0 +1,38 @@ +.Chronometer__container { + display: flex; + flex-flow: row wrap; + box-shadow: 0px 0px 6px 6px rgba(0, 0, 0, .25); + border: 1px solid black; + border-radius: 1rem; + padding: 20px; + margin-bottom: 40px; +} +.Chronometer__item { + width: 100%; +} +.Chronomter__row { + margin: 8px 0 16px 0; + text-align: center; +} +.Chronometer__time-left { + font-size: 3rem; + font-weight: 700; +} +.Chronometer__buttons { + border-top: solid 3px var(--important); + padding-top: 12px; +} +.Chronometer__row-button { + display: flex; + justify-content: center; +} +.Chronometer-btn { + color: var(--text-color); + cursor: pointer; + background-color: transparent; + border: none; + outline: none; + margin-left: 14px; + margin-right: 14px; + width: 2em; +} \ No newline at end of file