176 lines
4.4 KiB
TypeScript
176 lines
4.4 KiB
TypeScript
import React from "react";
|
|
import { View, Text, StyleSheet } from "@react-pdf/renderer";
|
|
import { ModuleScore } from "@/interfaces/module.scores";
|
|
import { styles } from "../styles";
|
|
import { RadialResult } from "./radial.result";
|
|
interface Props {
|
|
detail: ModuleScore;
|
|
title: string;
|
|
}
|
|
|
|
const thresholds = [
|
|
{
|
|
level: "Low A1",
|
|
label: "Begginner",
|
|
minValue: 0,
|
|
maxValue: 3,
|
|
},
|
|
{
|
|
level: "High A1/Low A2",
|
|
label: "Elementary",
|
|
minValue: 4,
|
|
maxValue: 7,
|
|
},
|
|
{
|
|
level: "High A2/Low B1",
|
|
label: "Pre-Intermediate",
|
|
minValue: 8,
|
|
maxValue: 11,
|
|
},
|
|
{
|
|
level: "High B1/Low B2",
|
|
label: "Intermediate",
|
|
minValue: 12,
|
|
maxValue: 15,
|
|
},
|
|
{
|
|
level: "High B2/Low C1",
|
|
label: "Upper-Intermediate",
|
|
minValue: 16,
|
|
maxValue: 21,
|
|
},
|
|
{
|
|
level: "C1",
|
|
label: "Advanced",
|
|
minValue: 22,
|
|
maxValue: 25,
|
|
},
|
|
];
|
|
|
|
const customStyles = StyleSheet.create({
|
|
container: {
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
gap: 30,
|
|
justifyContent: "space-between",
|
|
},
|
|
tableContainer: {
|
|
display: "flex",
|
|
flex: 1,
|
|
flexDirection: "column",
|
|
},
|
|
tableLabel: {
|
|
display: "flex",
|
|
alignItems: "center",
|
|
},
|
|
tableBody: { display: "flex", flex: 1, flexDirection: "row" },
|
|
tableRow: {
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
},
|
|
});
|
|
|
|
export const LevelExamDetails = ({ detail, title }: Props) => {
|
|
const updatedThresholds = thresholds.map((t) => ({
|
|
...t,
|
|
match: detail.score >= t.minValue && detail.score <= t.maxValue,
|
|
}));
|
|
|
|
const getBackgroundColor = (match: boolean, base: boolean) => {
|
|
if (match) return "#c2bfdd";
|
|
return base ? "#553b25" : "#ea7c7b";
|
|
};
|
|
|
|
const getTextColor = (match: boolean, base: boolean) => {
|
|
if (match) return "#9e7936";
|
|
return base ? "white" : "#553b25";
|
|
};
|
|
return (
|
|
<View style={[styles.textFont, customStyles.container]}>
|
|
<RadialResult {...detail} />
|
|
<View style={customStyles.tableContainer}>
|
|
<View style={customStyles.tableLabel}>
|
|
<Text
|
|
style={[styles.textBold, styles.textColor, { fontSize: "10px" }]}
|
|
>
|
|
{title}
|
|
</Text>
|
|
</View>
|
|
<View style={customStyles.tableBody}>
|
|
{updatedThresholds.map(
|
|
({ level, label, minValue, maxValue, match }, index, arr) => (
|
|
<View
|
|
key={label}
|
|
style={[
|
|
customStyles.tableRow,
|
|
{
|
|
width: `calc(100% / ${arr.length})`,
|
|
},
|
|
]}
|
|
>
|
|
<View
|
|
style={{
|
|
backgroundColor: getBackgroundColor(match, true),
|
|
paddingVertical: "8px",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<Text
|
|
style={[
|
|
styles.textBold,
|
|
{
|
|
color: getTextColor(match, true),
|
|
fontSize: "6px",
|
|
},
|
|
]}
|
|
>
|
|
{level}
|
|
</Text>
|
|
</View>
|
|
<View
|
|
style={{
|
|
backgroundColor: getBackgroundColor(match, false),
|
|
paddingVertical: "8px",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<Text
|
|
style={[
|
|
styles.textBold,
|
|
{
|
|
color: getTextColor(match, false),
|
|
fontSize: "6px",
|
|
},
|
|
]}
|
|
>
|
|
{label}
|
|
</Text>
|
|
</View>
|
|
<View
|
|
style={{
|
|
backgroundColor: getBackgroundColor(match, true),
|
|
paddingVertical: "24px",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<Text
|
|
style={[
|
|
styles.textBold,
|
|
{
|
|
color: getTextColor(match, true),
|
|
fontSize: "10px",
|
|
},
|
|
]}
|
|
>
|
|
{minValue}-{maxValue}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
)
|
|
)}
|
|
</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|