SQuiz/frontPanel
2
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity

добавил слайдер , на карточки стартовой страницы

Browse Source
This commit is contained in:
ArtChaos189 2024-01-16 13:10:38 +03:00
parent f23ffd7213
commit 9233444c11
6 changed files with 225 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -20,6 +20,7 @@
"@types/react": "^18.0.0",
"@types/react-dnd": "^3.0.2",
"@types/react-dom": "^18.0.0",
"@types/react-slick": "^0.23.13",
"axios": "^1.5.1",
"cypress-file-upload": "^5.0.8",
"cytoscape": "^3.26.0",
@ -47,6 +48,8 @@
"react-rnd": "^10.4.1",
"react-router-dom": "^6.6.2",
"react-scripts": "5.0.1",
"react-slick": "^0.29.0",
"slick-carousel": "^1.8.1",
"swr": "^2.2.4",
"typescript": "^5.2.2",
"use-debounce": "^9.0.4",

13
src/assets/icons/arrow_left.svg Normal file
View File

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;stroke:#7E2AEA;stroke-width:2;stroke-miterlimit:10;}
.st1{fill:none;stroke:#7E2AEA;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
</style>
<g>
<path class="st0" d="M6.3,24.7C6.3,14.4,14.7,6,25.1,6s18.8,8.4,18.8,18.8s-8.4,18.8-18.8,18.8S6.3,35.1,6.3,24.7z"/>
<path class="st1" d="M27.4,17.7l-7.8,7l7.8,7"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 725 B

13
src/assets/icons/arrow_right.svg Normal file
View File

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;stroke:#7E2AEA;stroke-width:2;stroke-miterlimit:10;}
.st1{fill:none;stroke:#7E2AEA;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
</style>
<g>
<path class="st0" d="M43.8,24.7c0,10.4-8.4,18.8-18.8,18.8S6.3,35.1,6.3,24.7S14.7,6,25.1,6S43.8,14.4,43.8,24.7z"/>
<path class="st1" d="M22.7,31.8l7.8-7l-7.8-7"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 724 B

84
src/pages/startPage/stepOne.tsx
View File

@ -1,13 +1,45 @@
import { Box, Button } from "@mui/material";
import { Box, Button, useMediaQuery, useTheme } from "@mui/material";
import CreationCard from "@ui_kit/CreationCard";
import quizCreationImage1 from "../../assets/quiz-creation-1.png";
import quizCreationImage2 from "../../assets/quiz-creation-2.png";
import { setQuizType } from "@root/quizes/actions";
import { useCurrentQuiz } from "@root/quizes/hooks";
import { useEffect, useRef, useState } from "react";
import arrowLeftIcon from "../../assets/icons/arrow_left.svg";
import arrowRightIcon from "../../assets/icons/arrow_right.svg";
import "slick-carousel/slick/slick-theme.css";
import "slick-carousel/slick/slick.css";
export default function StepOne() {
const quiz = useCurrentQuiz();
const config = quiz?.config;
const theme = useTheme();
const isSlider = useMediaQuery(theme.breakpoints.down(950));
const containerRef = useRef<HTMLDivElement | null>(null);
const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]);
const [currentIndex, setCurrentIndex] = useState(0);
useEffect(() => {
if (containerRef.current && buttonRefs.current.length > 0) {
const buttonWidth = buttonRefs.current[0]!.offsetWidth;
containerRef.current.scrollTo({
left: currentIndex * buttonWidth,
behavior: "smooth",
});
}
}, [currentIndex]);
const handlePrevClick = () => {
setCurrentIndex((prevIndex) => Math.max(prevIndex - 1, 0));
};
const handleNextClick = () => {
setCurrentIndex((prevIndex) => Math.min(prevIndex + 1, 2));
};
if (!config) return null;
@ -20,14 +52,18 @@ export default function StepOne() {
}}
>
<Box
ref={containerRef}
sx={{
minWidth: "720px",
overflow: "auto",
display: "flex",
gap: "20px",
mt: "60px",
position: "relative",
}}
>
<Button
sx={{ minWidth: "325px" }}
ref={(ref) => (buttonRefs.current[0] = ref as HTMLButtonElement)}
variant="text"
data-cy="create-quiz-card"
onClick={() => {
@ -42,6 +78,23 @@ export default function StepOne() {
/>
</Button>
<Button
sx={{ minWidth: "325px" }}
ref={(ref) => (buttonRefs.current[1] = ref as HTMLButtonElement)}
variant="text"
onClick={() => {
setQuizType(quiz.id, "form");
}}
>
<CreationCard
header="Создание анкеты"
text="Режим анкеты создан, в целях оставить пользователю варианты вопросов используемых в исследованиях и убирания всего лишнего, что может мешать и приводить к ошибкам"
image={quizCreationImage2}
border={config.type === "form" ? "1px solid #7E2AEA" : "none"}
/>
</Button>
<Button
sx={{ minWidth: "325px" }}
ref={(ref) => (buttonRefs.current[2] = ref as HTMLButtonElement)}
variant="text"
onClick={() => {
setQuizType(quiz.id, "form");
@ -55,6 +108,33 @@ export default function StepOne() {
/>
</Button>
</Box>
{isSlider && (
<>
<img
onClick={handlePrevClick}
style={{
position: "absolute",
left: "0",
top: "50%",
width: "40px",
height: "40px",
}}
src={arrowLeftIcon}
/>
<img
onClick={handleNextClick}
style={{
position: "absolute",
right: "0",
top: "50%",
width: "40px",
height: "40px",
}}
src={arrowRightIcon}
/>
</>
)}
</Box>
);
}

67
src/pages/startPage/steptwo.tsx
View File

@ -11,13 +11,40 @@ import cardImage1 from "../../assets/card-1.png";
import cardImage2 from "../../assets/card-2.png";
import cardImage3 from "../../assets/card-3.png";
import CardWithImage from "./CardWithImage";
import { useRef, useState, useEffect } from "react";
import arrowLeftIcon from "../../assets/icons/arrow_left.svg";
import arrowRightIcon from "../../assets/icons/arrow_right.svg";
export default function Steptwo() {
const quiz = useCurrentQuiz();
const config = quiz?.config;
const theme = useTheme();
const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1300));
const quiz = useCurrentQuiz();
const isSlider = useMediaQuery(theme.breakpoints.down(1250));
const config = quiz?.config;
const containerRef = useRef<HTMLDivElement | null>(null);
const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]);
const [currentIndex, setCurrentIndex] = useState(0);
useEffect(() => {
if (containerRef.current && buttonRefs.current.length > 0) {
const buttonWidth = buttonRefs.current[0]!.offsetWidth;
containerRef.current.scrollTo({
left: currentIndex * buttonWidth,
behavior: "smooth",
});
}
}, [currentIndex]);
const handlePrevClick = () => {
setCurrentIndex((prevIndex) => Math.max(prevIndex - 1, 0));
};
const handleNextClick = () => {
setCurrentIndex((prevIndex) => Math.min(prevIndex + 1, 2));
};
if (!config) return null;
@ -32,15 +59,19 @@ export default function Steptwo() {
}}
>
<Box
ref={containerRef}
sx={{
minWidth: "950px",
overflow: "auto",
display: "flex",
gap: "20px",
mt: "40px",
position: "relative",
padding: isSmallMonitor ? "0 15px 15px" : 0,
}}
>
<Button
sx={{ minWidth: "325px" }}
ref={(ref) => (buttonRefs.current[0] = ref as HTMLButtonElement)}
variant="text"
data-cy="select-quiz-layout-standard"
onClick={() => {
@ -58,6 +89,8 @@ export default function Steptwo() {
/>
</Button>
<Button
sx={{ minWidth: "325px" }}
ref={(ref) => (buttonRefs.current[1] = ref as HTMLButtonElement)}
variant="text"
onClick={() => {
setQuizStartpageType(quiz.id, "expanded");
@ -74,6 +107,8 @@ export default function Steptwo() {
/>
</Button>
<Button
sx={{ minWidth: "325px" }}
ref={(ref) => (buttonRefs.current[2] = ref as HTMLButtonElement)}
variant="text"
onClick={() => {
setQuizStartpageType(quiz.id, "centered");
@ -90,6 +125,32 @@ export default function Steptwo() {
/>
</Button>
</Box>
{isSlider && (
<>
<img
onClick={handlePrevClick}
style={{
position: "absolute",
left: "0",
top: "50%",
width: "40px",
height: "40px",
}}
src={arrowLeftIcon}
/>
<img
onClick={handleNextClick}
style={{
position: "absolute",
right: "0",
top: "50%",
width: "40px",
height: "40px",
}}
src={arrowRightIcon}
/>
</>
)}
</Box>
</Box>
);

50
yarn.lock
View File

@ -2436,6 +2436,13 @@
hoist-non-react-statics "^3.3.0"
redux "^4.0.0"
"@types/react-slick@^0.23.13":
version "0.23.13"
resolved "https://registry.yarnpkg.com/@types/react-slick/-/react-slick-0.23.13.tgz#037434e73a58063047b121e08565f7185d811f36"
integrity sha512-bNZfDhe/L8t5OQzIyhrRhBr/61pfBcWaYJoq6UDqFtv5LMwfg4NsVDD2J8N01JqdAdxLjOt66OZEp6PX+dGs/A==
dependencies:
"@types/react" "*"
"@types/react-transition-group@^4.4.7", "@types/react-transition-group@^4.4.8":
version "4.4.9"
resolved "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.9.tgz"
@ -3617,6 +3624,11 @@ cjs-module-lexer@^1.0.0:
resolved "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz"
integrity sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==
classnames@^2.2.5:
version "2.5.1"
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
clean-css@^5.2.2:
version "5.3.1"
resolved "https://registry.npmjs.org/clean-css/-/clean-css-5.3.1.tgz"
@ -4633,6 +4645,11 @@ enhanced-resolve@^5.10.0:
graceful-fs "^4.2.4"
tapable "^2.2.0"
enquire.js@^2.1.6:
version "2.1.6"
resolved "https://registry.yarnpkg.com/enquire.js/-/enquire.js-2.1.6.tgz#3e8780c9b8b835084c3f60e166dbc3c2a3c89814"
integrity sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw==
enquirer@^2.3.6:
version "2.4.1"
resolved "https://registry.npmjs.org/enquirer/-/enquirer-2.4.1.tgz"
@ -6965,6 +6982,13 @@ json-stringify-safe@~5.0.1:
resolved "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz"
integrity sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==
json2mq@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/json2mq/-/json2mq-0.2.0.tgz#b637bd3ba9eabe122c83e9720483aeb10d2c904a"
integrity sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==
dependencies:
string-convert "^0.2.0"
json5@^1.0.1:
version "1.0.1"
resolved "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz"
@ -8919,6 +8943,17 @@ react-scripts@5.0.1:
optionalDependencies:
fsevents "^2.3.2"
react-slick@^0.29.0:
version "0.29.0"
resolved "https://registry.yarnpkg.com/react-slick/-/react-slick-0.29.0.tgz#0bed5ea42bf75a23d40c0259b828ed27627b51bb"
integrity sha512-TGdOKE+ZkJHHeC4aaoH85m8RnFyWqdqRfAGkhd6dirmATXMZWAxOpTLmw2Ll/jPTQ3eEG7ercFr/sbzdeYCJXA==
dependencies:
classnames "^2.2.5"
enquire.js "^2.1.6"
json2mq "^0.2.0"
lodash.debounce "^4.0.8"
resize-observer-polyfill "^1.5.0"
react-transition-group@^4.4.5:
version "4.4.5"
resolved "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz"
@ -9122,6 +9157,11 @@ requires-port@^1.0.0:
resolved "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz"
integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
resize-observer-polyfill@^1.5.0:
version "1.5.1"
resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
resolve-cwd@^3.0.0:
version "3.0.0"
resolved "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-3.0.0.tgz"
@ -9529,6 +9569,11 @@ slice-ansi@^7.0.0:
ansi-styles "^6.2.1"
is-fullwidth-code-point "^5.0.0"
slick-carousel@^1.8.1:
version "1.8.1"
resolved "https://registry.yarnpkg.com/slick-carousel/-/slick-carousel-1.8.1.tgz#a4bfb29014887bb66ce528b90bd0cda262cc8f8d"
integrity sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==
sockjs@^0.3.24:
version "0.3.24"
resolved "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz"
@ -9667,6 +9712,11 @@ string-argv@0.3.2:
resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.2.tgz#2b6d0ef24b656274d957d54e0a4bbf6153dc02b6"
integrity sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==
string-convert@^0.2.0:
version "0.2.1"
resolved "https://registry.yarnpkg.com/string-convert/-/string-convert-0.2.1.tgz#6982cc3049fbb4cd85f8b24568b9d9bf39eeff97"
integrity sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==
string-length@^4.0.1:
version "4.0.2"
resolved "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz"