From d92003b922000a7eb7077e5e6bcfcc056a1a844e Mon Sep 17 00:00:00 2001 From: satoshiuy Date: Wed, 7 Jun 2023 17:39:54 +0700 Subject: [PATCH 1/2] integrate api to webapp --- src/components/CanvasPage.jsx | 136 +++++++++++++++++++++---------- src/components/CreateSection.jsx | 60 +++++++++++++- src/components/create/Step1.jsx | 24 ++++-- src/components/create/Step2.jsx | 44 +++++++--- src/pages/editor/index.jsx | 25 +++--- src/pages/login.jsx | 2 +- src/scss/components/_login.scss | 6 +- src/scss/components/_step1.scss | 2 +- src/scss/pages/_editor.scss | 43 ++++++++++ 9 files changed, 259 insertions(+), 83 deletions(-) diff --git a/src/components/CanvasPage.jsx b/src/components/CanvasPage.jsx index 287b6ab..608cd80 100644 --- a/src/components/CanvasPage.jsx +++ b/src/components/CanvasPage.jsx @@ -1,15 +1,34 @@ import { fabric } from "fabric"; import React, { useEffect, useState } from "react"; import { FabricJSCanvas, useFabricJSEditor } from "fabricjs-react"; -import { Button, Tooltip } from "antd"; +import { Button, ColorPicker, Divider, Tooltip } from "antd"; import {HighlightOutlined} from '@ant-design/icons'; -const CanvasPage = () => { +import undoIcon from '../../public/editor/undo.svg'; +import redoIcon from '../../public/editor/redo.svg'; +import brushIcon from '../../public/editor/brush.svg'; +import backgroundIcon from '../../public/editor/change-background-color.svg'; +import thickLine from '../../public/editor/thick-line.svg'; +import thinLine from '../../public/editor/thin-line.svg'; +import pageIcon from '../../public/editor/add-page.svg'; +import downloadIcon from '../../public/editor/download.svg'; +import textIcon from '../../public/editor/text-insert.svg'; +import clearIcon from '../../public/editor/clear-page.svg'; +import deleteIcon from '../../public/editor/delete.svg'; +import uploadImageIcon from '../../public/editor/upload-image.svg'; +import uploadSVGIcon from '../../public/editor/upload-svg.svg'; + + +import Image from "next/image"; + +const CanvasPage = ({downloadAllPages, addPage}) => { const inputRef = React.useRef(null); const { editor, onReady } = useFabricJSEditor(); const history = []; - const [color, setColor] = useState("#fff"); + const [color, setColor] = useState("#ffffff"); const [cropImage, setCropImage] = useState(true); + const [isDrawing, setIsDrawing] = useState(false); + const [freeDrawingBrushWidth, setFreeDrawingBrushWidth] = useState(5); useEffect(() => { if (!editor || !fabric) { @@ -130,16 +149,24 @@ const CanvasPage = () => { if (!editor || !fabric) { return; } - editor.canvas.setHeight(576); - editor.canvas.setWidth(1024); + editor.canvas.setHeight(500); + editor.canvas.setWidth(889); addBackground(); editor.canvas.renderAll(); }, [editor?.canvas.backgroundImage]); - const toggleSize = () => { - editor.canvas.freeDrawingBrush.width === 12 - ? (editor.canvas.freeDrawingBrush.width = 5) - : (editor.canvas.freeDrawingBrush.width = 12); + const increaseSize = () => { + let size = freeDrawingBrushWidth + 5; + editor.canvas.freeDrawingBrush.width = size; + setFreeDrawingBrushWidth(size); + }; + const decreaseSize = () => { + let size = freeDrawingBrushWidth - 5; + if (size < 5) { + size = 5; + } + editor.canvas.freeDrawingBrush.width = size; + setFreeDrawingBrushWidth(size); }; useEffect(() => { @@ -152,6 +179,7 @@ const CanvasPage = () => { const toggleDraw = () => { editor.canvas.isDrawingMode = !editor.canvas.isDrawingMode; + setIsDrawing(editor.canvas.isDrawingMode); }; const undo = () => { if (editor.canvas._objects.length > 0) { @@ -209,49 +237,67 @@ const CanvasPage = () => { return (
-
- - - - - - - - - - - + */}
-
diff --git a/src/components/CreateSection.jsx b/src/components/CreateSection.jsx index 3d6b222..7047914 100644 --- a/src/components/CreateSection.jsx +++ b/src/components/CreateSection.jsx @@ -4,11 +4,67 @@ import Step1 from './create/Step1'; import Step2 from './create/Step2'; function CreateSection() { const [step, setStep] = useState(1); - + const [topic, setTopic] = useState(''); + const [numberOfSlides, setNumberOfSlides] = useState(5); + const [wordsPerSlide, setWordsPerSlide] = useState(20); + const [isFetchLoading, setIsFetchLoading] = useState(false); + + const nextStep = () => { + setStep(step + 1); + } + const prevStep = () => { + setStep(step - 1); + } + console.log('isLoading', isFetchLoading) + + const submitHandler = (e) => { + e.preventDefault(); + console.log("submitHandler", topic, numberOfSlides, wordsPerSlide); + setIsFetchLoading(true); + fetch('https://slight-gen-api.onrender.com/generate' + + '?topic=' + topic + + '&mode=0' + + '&n_slides=' + numberOfSlides + + '&n_words_per_slide=' + wordsPerSlide + , { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ + topic: topic, + mode: 0, + n_slides: numberOfSlides, + n_words_per_slide: wordsPerSlide + }) + }) + .then(res => res.blob()) + .then(data => { + var a = document.createElement("a"); + a.href = window.URL.createObjectURL(data); + a.download = topic + '.pptx'; + a.click(); + setIsFetchLoading(false); + }); + } + return (
- + { + step === 1 ? : + ( + + ) + }
) } diff --git a/src/components/create/Step1.jsx b/src/components/create/Step1.jsx index 362edfd..0ef5361 100644 --- a/src/components/create/Step1.jsx +++ b/src/components/create/Step1.jsx @@ -1,4 +1,4 @@ -import { Button, Input, Upload, message } from 'antd'; +import { Button, ConfigProvider, Input, Upload, message } from 'antd'; import React from 'react' import { useState } from 'react'; @@ -23,22 +23,30 @@ const props = { }, }; -function Step1() { +function Step1({nextStep, topic, setTopic}) { return (
STEP 1
-
- - Tips: +
+ + Tips: - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + Choose Your Topic
- + setTopic(e.target.value)} placeholder='Type or paste (Ctrl+V) your text here or upload a document'/>
-
Next Step
+ + +
diff --git a/src/components/create/Step2.jsx b/src/components/create/Step2.jsx index 3d6cfc0..8a57136 100644 --- a/src/components/create/Step2.jsx +++ b/src/components/create/Step2.jsx @@ -1,8 +1,9 @@ import React from 'react' import TextQuestion from './Step2Question/TextQuestion' import ImgQuestion from './Step2Question/ImgQuestion' +import { Button, ConfigProvider, Input, Tooltip } from 'antd' -function Step2() { +function Step2({isFetchLoading, submitHandler, prevStep, numberOfSlides, setNumberOfSlides, wordsPerSlide, setWordsPerSlide}) { const questionnaire = [ { questionId : 0, @@ -58,20 +59,41 @@ function Step2() {
STEP 2
- - Tips: - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- {questionnaire.map( (question) => - (question.type == 'text' ? - : - ) - )} +
Number Of Slides
+ setNumberOfSlides(e.target.value)} + placeholder='Number of Slides(1-10)' + />
-
-
Next Step
+
+
Words Per Slide
+ setWordsPerSlide(e.target.value)} + /> +
+
+ + + + +
diff --git a/src/pages/editor/index.jsx b/src/pages/editor/index.jsx index c5824d6..035e1c5 100644 --- a/src/pages/editor/index.jsx +++ b/src/pages/editor/index.jsx @@ -4,6 +4,8 @@ import CanvasPage from '@/components/CanvasPage' import { useEffect, useRef, useState } from 'react'; import PptxGenJS from 'pptxgenjs'; import { Button } from 'antd'; +import Navbar from '@/components/common/Navbar'; +import Footer from '@/components/common/Footer'; export default function EditorPage() { const [canvasPages, setCanvasPages] = useState([1]); @@ -57,8 +59,10 @@ export default function EditorPage() { }, [canvasPages]); return ( -
-
+ <> + +
+
{canvasPages.map((pageId, index) => (
setActivePage(pageId)} />
))} +
-
- - -
{canvasPages.map((pageId, index) => (
- - +
))}
-
+
+