TestProsedure

mail@pastecode.io avatar
unknown
plain_text
2 years ago
24 kB
2
Indexable
Never
import { useContext, useRef, useState } from "react"
import { DiagnosticContext, useOutsideClick, useSessionStorage } from "../../helpers/functions"
import { categories } from "../../services/londi-constants";
import { getSuggestedTests } from "../../services/londi-suggestions"
import SecondTestOptions from "./SecondTestOptions";

const TestProcedure = ({ testProcedure, selectReadingGroup, setSelectReadingGroup, selectWritingGroup, setSelectWritingGroup, selectCountingGroup, setSelectCountingGroup, readingError, secondTestReadingError, secondTestWritingError, secondTestCountingError, writingError, countingError }) => {
    const { state, dispatch } = useContext(DiagnosticContext);
    const [checkedReading, setCheckedReading] = useSessionStorage('checkboxesReading', false)
    const [disableReading, setDisableReading] = useSessionStorage('checkboxesDisableReading', false)
    const [checkedWriting, setCheckedWriting] = useSessionStorage('checkboxesWriting', false)
    const [disableWriting, setDisableWriting] = useSessionStorage('checkboxesDisableWriting', false)
    const [checkedCounting, setCheckedCounting] = useSessionStorage('checkboxesCounting', false)
    const [disableCounting, setDisableCounting] = useSessionStorage('checkboxesDisableCounting', false)
    const [selectReadingCompetenceLevel, setSelectReadingCompetenceLevel] = useState(null)
    const [selectWritingCompetenceLevel, setSelectWritingCompetenceLevel] = useState(null)
    const [selectCountingCompetenceLevel, setSelectCountingCompetenceLevel] = useState(null)
    const wrapperRef = useRef(null);
    useOutsideClick(wrapperRef);
    const newState = {
        ...state, screeningResultCounting: { category: 3, result: 1 },
        screeningResultReading: { category: 1, result: 1 },
        screeningResultWriting: { category: 2, result: 1 }
    }
    const suggestedOutput = getSuggestedTests(newState, false, false)
    return (
        testProcedure &&
        <div className="flex flex-col">
            <p className="text-lg font-semibold">Testverfahren</p>
            <div className="flex items-end">
                    <div className={`${secondTestReadingError ? 'mb-5 options-container' : 'options-container'}`}>
                    <h5 className="options-name"><input checked={checkedReading} onChange={(e) => {
                        if (!e.target.checked) {
                            setDisableReading(true)
                            setCheckedReading(false)
                            dispatch({ type: "clearReading" });
                        } else {
                            setCheckedReading(true)
                            setDisableReading(false)
                        }
                    }} id="green-checkbox" type="checkbox" className="diagnostics-results" />Lesen</h5>
                    {disableReading ? <button id="dropdownDefault" data-dropdown-toggle="dropdown" className={`btn-options ${disableReading && 'bg-gray-100'} `} type="button">
                        <div className="truncate"></div><svg className={`${disableReading && 'text-gray-300'} ml-2 w-4 h-4 mr-2 text-black`} aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7"></path></svg>
                    </button> : <button onClick={() => dispatch({ type: 'readingOptions' })} id="dropdownDefault" data-dropdown-toggle="dropdown" className={`btn-options `} type="button">
                        <div className="truncate">{state?.readingResults}</div><svg className="ml-2 w-4 h-4 mr-2 text-black" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7"></path></svg>
                    </button>}

                    {state?.options === 'readingOptions' &&
                        <div id="dropdown" ref={wrapperRef} className={`dropdown-container`}>
                            <ul className="dropdown overflow-y-auto h-72" aria-labelledby="dropdownDefault">
                                <li>
                                    {suggestedOutput.map(({ category, testsA, testsB, testsC, testsD, testsE }) => {
                                        return category === categories.Reading &&
                                            <>
                                                {testsA.map((res) => {
                                                    return <button key={res.id} onClick={() => {
                                                        dispatch({ type: 'readingTest', payload: res.shortName })
                                                        dispatch({ type: 'readingTestId', payload: res.id })
                                                        setCheckedReading(true)
                                                        setSelectReadingGroup(1)
                                                    }} className="diagnostic-options">{res.shortName}</button>
                                                })}
                                                {testsB.map((res) => {
                                                    return <button key={res.id} onClick={() => {
                                                        dispatch({ type: 'readingTest', payload: res.shortName })
                                                        dispatch({ type: 'readingTestId', payload: res.id })
                                                        setSelectReadingGroup(2)
                                                        setSelectReadingCompetenceLevel(res.competenceLevels)
                                                        setCheckedReading(true)
                                                    }} className="diagnostic-options">{res.shortName}</button>
                                                })}
                                                {testsC.map((res) => {
                                                    return <button key={res.id} onClick={() => {
                                                        dispatch({ type: 'readingTest', payload: res.shortName })
                                                        dispatch({ type: 'readingTestId', payload: res.id })
                                                        setCheckedReading(true)
                                                        setSelectReadingGroup(3)
                                                    }} className="diagnostic-options">{res.shortName}</button>
                                                })}
                                                {testsD.map((res) => {
                                                    return <button key={res.id} onClick={() => {
                                                        dispatch({ type: 'readingTest', payload: res.shortName })
                                                        dispatch({ type: 'readingTestId', payload: res.id })
                                                        setCheckedReading(true)
                                                        setSelectReadingGroup(4)
                                                        setSelectReadingCompetenceLevel(res.competenceLevels)
                                                    }} className="diagnostic-options">{res.shortName}</button>
                                                })}
                                                {testsE.map((res) => {
                                                    return <button key={res.id} onClick={() => {
                                                        dispatch({ type: 'readingTest', payload: res.shortName })
                                                        dispatch({ type: 'readingTestId', payload: res.id })
                                                        setCheckedReading(true)
                                                        setSelectReadingGroup(5)
                                                    }} className="diagnostic-options">{res.shortName}</button>
                                                })}
                                            </>
                                    })}
                                </li>
                            </ul>
                        </div>}
                    {readingError && <p className="text-red-500 ml-5 text-sm">Angabe in einem Bereich erforderlich</p>}
                </div>
                <div className="flex flex-col">
                    <div className={`${selectReadingGroup === 2 || selectCountingGroup === 2 || selectWritingGroup === 2 ? 'h-24 ml-5 w-64 block' : 'hidden'}`}>
                        <p>Bitte wählen Sie zur optimalen Abdeckung der Kompetenzstufen ein weiteres
                            Testverfahren aus, um fortzufahren:</p>
                    </div>
                    {selectReadingGroup === 2 ?
                        <SecondTestOptions selectCompetenceLevel={selectReadingCompetenceLevel}
                            setChecked={setCheckedReading} secondTestOptions={'readingSecondTestOptions'}
                            secondTestType={'readingSecondTest'} secondTestId={'readingSecondTestId'}
                            showCategory={categories.Reading} showState={state?.readingSecondTestResults} /> : null
                    }
                    {secondTestReadingError && <p className="text-red-500 ml-5 text-sm">Angabe in einem Bereich erforderlich</p>}
                </div>
            </div>
            <div className="flex items-end">
                    <div className={`${secondTestWritingError ? 'mb-5 options-container' : 'options-container'}`}>
                    <h5 className="options-name"><input checked={checkedWriting} onChange={(e) => {
                        if (!e.target.checked) {
                            setDisableWriting(true)
                            setCheckedWriting(false)
                            dispatch({ type: "clearWriting" });
                        } else {
                            setCheckedWriting(true)
                            setDisableWriting(false)
                        }
                    }} id="green-checkbox" type="checkbox" className="diagnostics-results" />Schreiben</h5>
                    {disableWriting ? <button id="dropdownDefault" data-dropdown-toggle="dropdown" className={`btn-options ${disableWriting && 'bg-gray-100'} `} type="button">
                        <div className="truncate"></div><svg className={`${disableWriting && 'text-gray-300'} ml-2 w-4 h-4 mr-2 text-black`} aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7"></path></svg>
                    </button> : <button onClick={() => dispatch({ type: 'writingOptions' })} id="dropdownDefault" data-dropdown-toggle="dropdown"
                        className=' btn-options' type="button">
                        <div className="truncate">{state?.writingResults}</div>
                        <svg className="ml-2 w-4 h-4 mr-2 text-black" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                            xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7"></path></svg>
                    </button>}
                    {state?.options === 'writingOptions' &&
                        <div id="dropdown" ref={wrapperRef} className="dropdown-container">
                            <ul className="dropdown overflow-y-auto h-72" aria-labelledby="dropdownDefault">
                                <li>
                                    {suggestedOutput.map(({ category, testsA, testsB, testsC, testsD, testsE }) => {
                                        return category === categories.Writing &&
                                            <>
                                                {testsA.map((res) => {
                                                    return <button key={res.id} onClick={() => {
                                                        dispatch({ type: 'writingTest', payload: res.shortName })
                                                        dispatch({ type: 'writingTestId', payload: res.id })
                                                        setCheckedWriting(true)
                                                        setSelectWritingGroup(1)
                                                    }} className="diagnostic-options">{res.shortName}</button>
                                                })}
                                                {testsB.map((res) => {
                                                    return <button key={res.id} onClick={() => {
                                                        dispatch({ type: 'writingTest', payload: res.shortName })
                                                        dispatch({ type: 'writingTestId', payload: res.id })
                                                        setCheckedWriting(true)
                                                        setSelectWritingGroup(2)
                                                        setSelectWritingCompetenceLevel(res.competenceLevels)
                                                    }} className="diagnostic-options">{res.shortName}</button>
                                                })}

                                                {testsC.map((res) => {
                                                    return <button key={res.id} onClick={() => {
                                                        dispatch({ type: 'writingTest', payload: res.shortName })
                                                        dispatch({ type: 'writingTestId', payload: res.id })
                                                        setCheckedWriting(true)
                                                        setSelectWritingGroup(3)
                                                    }} className="diagnostic-options">{res.shortName}</button>
                                                })}
                                                {testsD.map((res) => {
                                                    return <button key={res.id} onClick={() => {
                                                        dispatch({ type: 'writingTest', payload: res.shortName })
                                                        dispatch({ type: 'writingTestId', payload: res.id })
                                                        setCheckedWriting(true)
                                                        setSelectWritingGroup(4)
                                                        setSelectWritingCompetenceLevel(res.competenceLevels)
                                                    }} className="diagnostic-options">{res.shortName}</button>
                                                })}
                                                {testsE.map((res) => {
                                                    return <button key={res.id} onClick={() => {
                                                        dispatch({ type: 'writingTest', payload: res.shortName })
                                                        dispatch({ type: 'writingTestId', payload: res.id })
                                                        setCheckedWriting(true)
                                                        setSelectWritingGroup(5)
                                                    }} className="diagnostic-options">{res.shortName}</button>
                                                })}
                                            </>
                                    })}
                                </li>
                            </ul>
                        </div>}
                    {writingError && <p className="text-red-500 ml-5 text-sm">Angabe in einem Bereich erforderlich</p>}

                </div>
                <div className="flex flex-col">
                    {selectWritingGroup === 2 ?
                        <SecondTestOptions selectCompetenceLevel={selectWritingCompetenceLevel}
                            setChecked={setCheckedWriting} secondTestOptions={'writingSecondTestOptions'}
                            secondTestType={'writingSecondTest'} secondTestId={'writingSecondTestId'}
                            showCategory={categories.Writing} showState={state?.writingSecondTestResults} />
                        : null}

                    {secondTestWritingError && <p className="text-red-500 ml-5 text-sm">Angabe in einem Bereich erforderlich</p>}

                </div>

            </div>
            <div className="flex items-end">
                    <div className={`${secondTestCountingError ? 'mb-5 options-container' : 'options-container'}`}>
                    <h5 className="options-name"><input checked={checkedCounting} onChange={(e) => {
                        if (!e.target.checked) {
                            setDisableCounting(true)
                            setCheckedCounting(false)
                            dispatch({ type: "clearCounting" });
                        } else {
                            setCheckedCounting(true)
                            setDisableCounting(false)
                        }
                    }} id="green-checkbox" type="checkbox" className="diagnostics-results" />Rechnen</h5>
                    {disableCounting ? <button id="dropdownDefault" data-dropdown-toggle="dropdown" className={`btn-options ${disableCounting && 'bg-gray-100'} `} type="button">
                        <div className="truncate"></div><svg className={`${disableCounting && 'text-gray-300'} ml-2 w-4 h-4 mr-2 text-black`} aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7"></path></svg>
                    </button> : <button onClick={() => dispatch({ type: 'countingOptions' })} id="dropdownDefault" data-dropdown-toggle="dropdown"
                        className='btn-options' type="button"><div className="truncate">{state?.countingResults}</div><svg className="ml-2 w-4 h-4 mr-2 text-black" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7"></path></svg>
                    </button>}
                    {state?.options === 'countingOptions' &&
                        <div id="dropdown" ref={wrapperRef} className="dropdown-container">
                            <ul className="dropdown overflow-y-auto h-72" aria-labelledby="dropdownDefault">
                                <li>
                                    {suggestedOutput.map(({ category, testsA, testsB, testsC, testsD, testsE }) => {
                                        return category === categories.Math &&
                                            <>
                                                {testsA.map((res) => {
                                                    return <button key={res.id} onClick={() => {
                                                        dispatch({ type: 'countingTest', payload: res.shortName })
                                                        dispatch({ type: 'countingTestId', payload: res.id })
                                                        setCheckedCounting(true)
                                                        setSelectCountingGroup(1)
                                                    }} className="diagnostic-options">{res.shortName}</button>
                                                })}
                                                {testsB.map((res) => {
                                                    return <button key={res.id} onClick={() => {
                                                        dispatch({ type: 'countingTest', payload: res.shortName })
                                                        dispatch({ type: 'countingTestId', payload: res.id })
                                                        setCheckedCounting(true)
                                                        setSelectCountingGroup(2)
                                                        setSelectCountingCompetenceLevel(res.competenceLevels)
                                                    }} className="diagnostic-options">{res.shortName}</button>
                                                })}
                                                {testsC.map((res) => {
                                                    return <button key={res.id} onClick={() => {
                                                        dispatch({ type: 'countingTest', payload: res.shortName })
                                                        dispatch({ type: 'countingTestId', payload: res.id })
                                                        setCheckedCounting(true)
                                                        setSelectCountingGroup(3)
                                                    }} className="diagnostic-options">{res.shortName}</button>
                                                })}
                                                {testsD.map((res) => {
                                                    return <button key={res.id} onClick={() => {
                                                        dispatch({ type: 'countingTest', payload: res.shortName })
                                                        dispatch({ type: 'countingTestId', payload: res.id })
                                                        setCheckedCounting(true)
                                                        setSelectCountingGroup(4)
                                                        setSelectCountingCompetenceLevel(res.competenceLevels)
                                                    }} className="diagnostic-options">{res.shortName}</button>
                                                })}
                                                {testsE.map((res) => {
                                                    return <button key={res.id} onClick={() => {
                                                        dispatch({ type: 'countingTestId', payload: res.id })
                                                        dispatch({ type: 'countingTest', payload: res.shortName })
                                                        setCheckedCounting(true)
                                                        setSelectCountingGroup(5)
                                                    }} className="diagnostic-options">{res.shortName}</button>
                                                })}
                                            </>
                                    })}
                                </li>
                            </ul>
                        </div>}
                    {countingError && <p className="text-red-500 ml-5 text-sm">Angabe in einem Bereich erforderlich</p>}

                </div>
                <div className="flex flex-col">
                    {selectCountingGroup === 2 ?
                        <SecondTestOptions selectCompetenceLevel={selectCountingCompetenceLevel}
                            setChecked={setCheckedCounting} secondTestOptions={'countingSecondTestOptions'}
                            secondTestType={'countingSecondTest'} secondTestId={'countingSecondTestId'}
                            showCategory={categories.Math} showState={state?.countingSecondTestResults} /> : null
                    }
                    {secondTestCountingError && <p className="text-red-500 ml-5 text-sm">Angabe in einem Bereich erforderlich</p>}

                </div>
            </div>
        </div>
    )
}
export default TestProcedure