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

Смена вёрстки на версию Глеба. Начало сохранения состояния в localeStorage

Browse Source
This commit is contained in:
krokodilka 2022-07-18 05:32:48 +03:00
parent a273f1a88e
commit 03cca73e73
8 changed files with 149 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
src/create/createQuestion.tsx
View File

@ -1,13 +1,14 @@
import React from 'react';
import { useField, Form, FormikProps, Formik } from 'formik';
import {
Select, Textarea, VStack, Checkbox, Button,
Select, Textarea, VStack, Checkbox, Button, HStack,
} from '@chakra-ui/react'
import 'suneditor/dist/css/suneditor.min.css'; // Import Sun Editor's CSS File
import Description from "./description";
import Settings from "./settings";
import Types from "./types";
import WorkSpace from "./workSpace";
import Header from "./header";
import { saveCondition, getCondition } from "./lsBacking";
import type {ElementsOfObject} from "./questionTypes"
//Значения, собираемые для отправки на бэк
interface Values {
title: string;
@ -15,13 +16,7 @@ interface Values {
children: string;
description: string;
}
//Поля объектов, используемых для отображения созданных пользователем инструментов
interface ElementsOfObject {
text: string;
id: number;
isFocus: boolean;
color?: string;
}
const types = [
{desc:"текст", value:"text"},
@ -108,7 +103,6 @@ const getIndexById = (id:number, array:Array<ElementsOfObject>):number => {
export default () => {
const [type, setType] = React.useState<number>(4)
const [stockroom, setStockroom] = React.useState<Array<ElementsOfObject>>([])
const [focus, setFocus] = React.useState<number | undefined>() //Хранит id объекта
@ -118,6 +112,8 @@ export default () => {
const typeHC = (value:number): void => {
setType(value)
setStockroom([])
saveCondition("type", value)
saveCondition("stockroom", [])
}
const changeFocus = (id: number): void => {
//Не менять фокус если снова выбрано то же окно
@ -133,6 +129,7 @@ export default () => {
//Устанавливаем новый фокус и пересоздаём массив
setFocus(id)
saveCondition("focus", id)
newArr[index].isFocus = true
setStockroom([...newArr])
@ -142,17 +139,19 @@ export default () => {
if (focus !== undefined) {
let index = getIndexById(focus, stockroom)
let list = stockroom
list[index].color = color
setStockroom([...list])
let newArr = stockroom
newArr[index].color = color
setStockroom([...newArr])
saveCondition("stockroom", newArr)
}
}
const changeText = (text: string): void => {
if (focus !== undefined) {
let index = getIndexById(focus, stockroom)
let list = stockroom
list[index].text = text
setStockroom([...list])
let newArr = stockroom
newArr[index].text = text
setStockroom([...newArr])
saveCondition("stockroom", newArr)
}
}
@ -172,6 +171,7 @@ export default () => {
if (focus === undefined){ //фокуса нет - добавляем в конец массива
newArr.push(obj)
setStockroom([...newArr])
saveCondition("stockroom", newArr)
//Говорим стейту с фокусом, что фокус изменился
setFocus(newArr.length - 1)
} else { //фокус есть - добавляем после объекта с фокусом
@ -181,6 +181,7 @@ export default () => {
//Говорим стейту с фокусом, что фокус изменился
setFocus(index + 1)
setStockroom([...newArr])
saveCondition("stockroom", newArr)
}
}
const deleteObject = (id: number): void => {
@ -194,6 +195,7 @@ export default () => {
let newArr = stockroom
newArr.splice(index, 1)
setStockroom([...newArr])
saveCondition("stockroom", newArr)
}
}
@ -209,36 +211,56 @@ export default () => {
onSubmit={(values, actions) => {
console.log(JSON.stringify(values))
console.log(getCondition())
}}
>
{(props: FormikProps<Values>) => (
<Form>
<VStack>
<TextField placeholder="Заголовок" name="title" type="text" />
<Description name="description"/>
<Types
type={type}
stockroom={stockroom}
changeFocus={changeFocus}
/>
</VStack>
<Header/>
<HStack
justifyContent="space-between"
alignItems="normal"
>
<VStack
minWidth="200px"
bgColor="lightgray"
height="98vh"
padding="10px"
>
<Settings
types={types}
stockroom={stockroom}
typeHC={typeHC}
type={type}
focus={focus}
changeFocus={changeFocus}
changeBgColor={changeBgColor}
changeText={changeText}
getIndexById={getIndexById}
createObject={createObject}
deleteObject={deleteObject}
/>
</VStack>
<VStack>
<WorkSpace
type={type}
stockroom={stockroom}
changeFocus={changeFocus}
/>
</VStack>
<VStack
minWidth="200px"
bgColor="lightgray"
height="98vh"
padding="10px"
>
<Settings
types={types}
stockroom={stockroom}
typeHC={typeHC}
type={type}
focus={focus}
changeFocus={changeFocus}
changeBgColor={changeBgColor}
changeText={changeText}
getIndexById={getIndexById}
createObject={createObject}
deleteObject={deleteObject}
/>
</VStack>
</HStack>
</Form>
)}
</Formik>
</>

14
src/create/header.tsx Normal file
View File

@ -0,0 +1,14 @@
import React from 'react';
import {HStack} from "@chakra-ui/react";
export default () => {
return(
<HStack
height="2vh"
bgColor="gray"
>
</HStack>
)
}

18
src/create/lsBacking.tsx Normal file
View File

@ -0,0 +1,18 @@
export function saveCondition (key:string, value:any) {
let ls : any = window.localStorage.getItem("condition")
if (ls !== null) {
ls = JSON.parse(ls)
} else {
ls = {}
}
ls[key] = value
localStorage.setItem("condition", JSON.stringify(ls))
}
export function getCondition () {
let ls : any = window.localStorage.getItem("condition")
if (ls !== null) {
return JSON.parse(ls)
} else {
return null
}
}

19
src/create/questionTypes.tsx Normal file
View File

@ -0,0 +1,19 @@
//Поля объектов, используемых для отображения созданных пользователем инструментов
interface ElementsOfObject {
text?: string;
id: number;
isFocus: boolean;
color?: string;
}
interface QuestionProps {
type: number;
stockroom: Array<ElementsOfObject>;
focus: number;
changeFocus: (id?: number) => void;
changeBgColor: (text?:string) => void;
changeText: (text?:string) => void;
createObject?: (obj?:ElementsOfObject) => void;
deleteObject: (id?:number) => void;
getIndexById: (id?:number, array?:ElementsOfObject) => number;
}
export type {ElementsOfObject, QuestionProps}

14
src/create/settings.tsx
View File

@ -5,15 +5,7 @@ import Buttons from "./tools/buttons"
export default (props: any) => {
return (
<Container
bgColor="lightgray"
padding="10px"
minWidth="100%"
maxHeight="45vh"
borderRadius="5px"
position="fixed"
bottom={0}
>
<>
<Select
placeholder='тип вопроса'
value={props.type}
@ -27,7 +19,6 @@ export default (props: any) => {
))
}
</Select>
<Box>
<Buttons
stockroom={props.stockroom}
focus={props.focus}
@ -39,7 +30,6 @@ export default (props: any) => {
getIndexById={props.getIndexById}
/>
<Button type="submit">Создать вопрос</Button>
</Box>
</Container>
</>
)
}

27
src/create/tools/buttons.tsx
View File

@ -3,23 +3,9 @@ import { Button, VStack, HStack, Textarea} from "@chakra-ui/react";
import {ChromePicker} from "react-color";
import Viewer from "./viewer";
import { useSnackbar } from 'notistack';
interface ElementOfObject {
text: string;
isFocus: boolean;
color?: string;
}
interface Component {
stockroom: any;
focus: number;
changeFocus: (id: number) => void;
changeBgColor: (text:string) => void;
changeText: (text:string) => void;
createObject: (obj:ElementOfObject) => void;
deleteObject: (id:number) => void;
getIndexById: (id:number, array:ElementOfObject) => number;
}
import type {ElementsOfObject, QuestionProps} from "../questionTypes"
export default ({stockroom, focus, changeFocus, changeText, changeBgColor, createObject, deleteObject, getIndexById}: Component) => {
export default ({stockroom = [], focus, changeFocus, changeText, changeBgColor, createObject, deleteObject, getIndexById}: any) => {
const { enqueueSnackbar, closeSnackbar } = useSnackbar();
let current
@ -32,10 +18,7 @@ export default ({stockroom, focus, changeFocus, changeText, changeBgColor, creat
}
return(
<HStack
overflow="auto"
padding="5px"
>
<>
<ChromePicker
disableAlpha
@ -77,7 +60,7 @@ export default ({stockroom, focus, changeFocus, changeText, changeBgColor, creat
<VStack style={{
boxShadow:"rgba(0, 0, 0, 0.3) 0px 0px 2px, rgba(0, 0, 0, 0.3) 0px 4px 8px",
padding:"5px",
width:"400px",
width:"150px",
borderRadius:"4px",
maxHeight:"30vh",
overflow:"auto",
@ -89,6 +72,6 @@ export default ({stockroom, focus, changeFocus, changeText, changeBgColor, creat
/>
</VStack>
}
</HStack>
</>
)
}

14
src/create/types.tsx
View File

@ -3,9 +3,11 @@ import {
Select, Checkbox, Button,
} from '@chakra-ui/react'
import {TextField} from "./createQuestion";
import type {QuestionProps} from "./questionTypes"
export default (props:any) => {
switch(props.type) {
export default ({type, stockroom = [], changeFocus} : any) => {
switch(type) {
case 0://Тип вопроса - текст?
return (<TextField name="text" placeholder="текст" type="text" />)
break;
@ -13,7 +15,7 @@ export default (props:any) => {
return (
<Select>
{
props.stockroom.map((e: any, i: number) => {
stockroom.map((e: any, i: number) => {
return <option key={i}>{e.text}</option>
})
}
@ -24,7 +26,7 @@ export default (props:any) => {
return(
<>
{
props.stockroom.map((e:any, i:number) => {
stockroom.map((e:any, i:number) => {
return <Checkbox key={i}>{e.text}</Checkbox>
})
}
@ -38,12 +40,12 @@ export default (props:any) => {
return(
<>
{
props.stockroom.map((e:any, i:number) => {
stockroom.map((e:any, i:number) => {
return <Button
backgroundColor={e.color}
key={i}
onClick={(event: any) => {
props.changeFocus(e.id)
changeFocus(e.id)
event.target.blur()
}}
>{e.text}</Button>

20
src/create/workSpace.tsx Normal file
View File

@ -0,0 +1,20 @@
import React from 'react';
import Types from "./types"
import {QuestionProps} from "./questionTypes";
import Description from "./description";
import {TextField} from "./createQuestion";
export default ({type, stockroom, changeFocus} : any) => {
//компонент для разворачивания вёрстки из хранилища
return(
<>
<TextField placeholder="Заголовок" name="title" type="text" />
<Description name="description"/>
<Types
type={type}
stockroom={stockroom}
changeFocus={changeFocus}
/>
</>
)
}