TestResults
unknown
plain_text
3 years ago
20 kB
6
Indexable
import { useContext, useRef } from "react"
import { DiagnosticContext, useOutsideClick } from "../../helpers/functions";
import Tabs from "../Tabs"
import { getTestFields } from "../../services/londi-suggestions";
import { value } from "../../helpers/constants";
const TestResults = () => {
const { state, dispatch } = useContext(DiagnosticContext);
const wrapperRef = useRef(null);
useOutsideClick(wrapperRef);
return (
<>
<Tabs />
<div className="flex font-montserrat items-center flex-col justify-center m-auto w-full">
<h1 className="text-mainBlue text-3xl font-semibold mt-10 md:text-5xl mb-3">Testergebnisse</h1>
<div className="flex flex-col w-11/12">
<p className="text-lg lg:text-xl">Bitte geben Sie die Ergebnisse der Tests ein.</p>
<div className="flex mt-7">
<div className="flex flex-col w-full">
{state.readingResults && <p className="text-2xl font-semibold">Lesen</p>}
<div className="flex flex-wrap sm:flex-nowrap">
<div className="flex flex-col ml-1 w-full">
<p className="text-2xl mt-4 font-semibold">{state.readingResults}</p>
<div className="flex flex-col justify-between">
{getTestFields(state.readingTestId).map((el, index) => {
return (
<div key={index} className="flex flex-col ">
<div className="mt-4" key={index}>
<p className="w-60">{el.title}</p>
<button onClick={() => dispatch({ type: 'resultsReadingOptions', payload: { id: index } })} id="dropdownDefault" data-dropdown-toggle="dropdown"
className='btn-options' type="button"><div className="truncate">{state?.resultsReading?.[index]}</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 === 'resultsReadingOptions' && state?.selectedReadingValue === index &&
<div id="dropdown" ref={wrapperRef} className="dropdown-container right-auto">
<ul className="dropdown overflow-y-auto h-96" aria-labelledby="dropdownDefault">
{value.map((el, i) => {
return (
<li key={i}>
<button onClick={() => dispatch({ type: 'resultsReading', payload: { keyReading: index, valueReading: el } })} className="diagnostic-options">{el}</button>
</li>
)
})}
</ul>
</div>
}
</div>
</div>
)
})}
</div>
</div>
<div className="flex flex-col ml-1 w-full">
<p className="text-2xl mt-4 font-semibold">{state.readingSecondTestResults}</p>
<div className="flex flex-row flex-wrap justify-between">
{getTestFields(state.readingSecondTestId).map((el, index) => {
return (
<div key={index} className="flex flex-col ">
<div className="mt-4" key={index}>
<p className="w-60">{el.title}</p>
<button onClick={() => dispatch({ type: 'resultsSecondReadingOptions', payload: { id: index } })} id="dropdownDefault" data-dropdown-toggle="dropdown"
className='btn-options' type="button"><div className="truncate">{state?.resultsSecondReading?.[index]}</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 === 'resultsSecondReadingOptions' && state?.selectedSecondReadingValue === index &&
<div id="dropdown" ref={wrapperRef} className="dropdown-container right-auto">
<ul className="dropdown overflow-y-auto h-96" aria-labelledby="dropdownDefault">
{value.map((el, i) => {
return (
<li key={i}>
<button onClick={() => dispatch({ type: 'resultsSecondReading', payload: { keySecondReading: index, valueSecondReading: el } })} className="diagnostic-options">{el}</button>
</li>
)
})}
</ul>
</div>
}
</div>
</div>
)
})}
</div>
</div>
</div>
</div>
</div>
<div className="flex mt-7">
<div className="flex flex-col w-full">
{state.writingResults && <p className="text-2xl font-semibold">Schreiben</p>}
<div className="flex flex-wrap sm:flex-nowrap">
<div className="flex flex-col ml-1 w-full">
<p className="text-2xl mt-4 font-semibold">{state.writingResults}</p>
<div className="flex flex-col justify-between">
{getTestFields(state.writingTestId).map((el, index) => {
return (
<div key={index} className="flex flex-col ">
<div className="mt-4" key={index}>
<p className="w-60">{el.title}</p>
<button onClick={() => dispatch({ type: 'resultsWritingOptions', payload: { id: index } })} id="dropdownDefault" data-dropdown-toggle="dropdown"
className='btn-options' type="button"><div className="truncate">{state?.resultsWriting?.[index]}</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 === 'resultsWritingOptions' && state?.selectedWritingValue === index &&
<div id="dropdown" ref={wrapperRef} className="dropdown-container right-auto">
<ul className="dropdown overflow-y-auto h-96" aria-labelledby="dropdownDefault">
{value.map((el, i) => {
return (
<li key={i}>
<button onClick={() => dispatch({ type: 'resultsWriting', payload: { keyWriting: index, valueWriting: el } })} className="diagnostic-options">{el}</button>
</li>
)
})}
</ul>
</div>
}
</div>
</div>
)
})}
</div>
</div>
<div className="flex flex-col ml-1 w-full">
<p className="text-2xl mt-4 font-semibold">{state.writingSecondTestResults}</p>
<div className="flex flex-row flex-wrap justify-between">
{getTestFields(state.writingSecondTestId).map((el, index) => {
return (
<div key={index} className="flex flex-col ">
<div className="mt-4" key={index}>
<p className="w-60">{el.title}</p>
<button onClick={() => dispatch({ type: 'resultsSecondWritingOptions', payload: { id: index } })} id="dropdownDefault" data-dropdown-toggle="dropdown"
className='btn-options' type="button"><div className="truncate">{state?.resultsSecondWriting?.[index]}</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 === 'resultsSecondWritingOptions' && state?.selectedSecondWritingValue === index &&
<div id="dropdown" ref={wrapperRef} className="dropdown-container right-auto">
<ul className="dropdown overflow-y-auto h-96" aria-labelledby="dropdownDefault">
{value.map((el, i) => {
return (
<li key={i}>
<button onClick={() => dispatch({ type: 'resultsSecondWriting', payload: { keySecondWriting: index, valueSecondWriting: el } })} className="diagnostic-options">{el}</button>
</li>
)
})}
</ul>
</div>
}
</div>
</div>
)
})}
</div>
</div>
</div>
</div>
</div>
<div className="flex mt-7">
<div className="flex flex-col w-full">
{state.countingResults && <p className="text-2xl font-semibold">Rechnen</p>}
<div className="flex flex-wrap sm:flex-nowrap">
<div className="flex flex-col ml-1 w-full">
<p className="text-2xl mt-4 font-semibold">{state.countingResults}</p>
<div className="flex flex-col justify-between">
{getTestFields(state.countingTestId).map((el, index) => {
return (
<div key={index} className="flex flex-col ">
<div className="mt-4" key={index}>
<p className="w-60">{el.title}</p>
<button onClick={() => dispatch({ type: 'resultsCountingOptions', payload: { id: index } })} id="dropdownDefault" data-dropdown-toggle="dropdown"
className='btn-options' type="button"><div className="truncate">{state?.resultsCounting?.[index]}</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 === 'resultsCountingOptions' && state?.selectedCountingValue === index &&
<div id="dropdown" ref={wrapperRef} className="dropdown-container right-auto">
<ul className="dropdown overflow-y-auto h-96" aria-labelledby="dropdownDefault">
{value.map((el, i) => {
return (
<li key={i}>
<button onClick={() => dispatch({ type: 'resultsCounting', payload: { keyCounting: index, valueCounting: el } })} className="diagnostic-options">{el}</button>
</li>
)
})}
</ul>
</div>
}
</div>
</div>
)
})}
</div>
</div>
<div className="flex flex-col ml-1 w-full">
<p className="text-2xl mt-4 font-semibold">{state.countingSecondTestResults}</p>
<div className="flex flex-row flex-wrap justify-between">
{getTestFields(state.countingSecondTestId).map((el, index) => {
return (
<div key={index} className="flex flex-col ">
<div className="mt-4" key={index}>
<p className="w-60">{el.title}</p>
<button onClick={() => dispatch({ type: 'resultsSecondCountingOptions', payload: { id: index } })} id="dropdownDefault" data-dropdown-toggle="dropdown"
className='btn-options' type="button"><div className="truncate">{state?.resultsSecondCounting?.[index]}</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 === 'resultsSecondCountingOptions' && state?.selectedSecondCountingValue === index &&
<div id="dropdown" ref={wrapperRef} className="dropdown-container right-auto">
<ul className="dropdown overflow-y-auto h-96" aria-labelledby="dropdownDefault">
{value.map((el, i) => {
return (
<li key={i}>
<button onClick={() => dispatch({ type: 'resultsSecondCounting', payload: { keySecondCounting: index, valueSecondCounting: el } })} className="diagnostic-options">{el}</button>
</li>
)
})}
</ul>
</div>}
</div>
</div>
)
})}
</div>
</div>
</div>
</div>
</div>
</div>
<a href="/funding-recomendations"><button className="text-white bg-mainBlue text-lg w-32 h-10 sm:w-60 sm:text-xl sm:h-14 my-10">Weiter</button></a>
</div>
</>
)
}
export default TestResultsEditor is loading...