diff --git a/index.html b/index.html index 79c4701..cf61121 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,10 @@ + Vite + React diff --git a/package.json b/package.json index ce775bc..3bb77e6 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,9 @@ }, "dependencies": { "@fontsource/montserrat": "^4.5.14", + "@fortawesome/react-fontawesome": "^0.2.0", "react": "^18.2.0", + "react-checkbox-tree": "^1.8.0", "react-dom": "^18.2.0", "underscore": "^1.13.6" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c6ea7ef..dd661ed 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -4,9 +4,15 @@ dependencies: '@fontsource/montserrat': specifier: ^4.5.14 version: 4.5.14 + '@fortawesome/react-fontawesome': + specifier: ^0.2.0 + version: 0.2.0(@fortawesome/fontawesome-svg-core@6.4.0)(react@18.2.0) react: specifier: ^18.2.0 version: 18.2.0 + react-checkbox-tree: + specifier: ^1.8.0 + version: 1.8.0(react@18.2.0) react-dom: specifier: ^18.2.0 version: 18.2.0(react@18.2.0) @@ -509,6 +515,31 @@ packages: resolution: {integrity: sha512-fTvrteVzuFUePhr4QYBGoK8G/YHLJ3IhF1HhKg0AxcFvZajJT7rM7ULdmKLSd2PkX44R3aaFZq1zDbmjbGGI+w==} dev: false + /@fortawesome/fontawesome-common-types@6.4.0: + resolution: {integrity: sha512-HNii132xfomg5QVZw0HwXXpN22s7VBHQBv9CeOu9tfJnhsWQNd2lmTNi8CSrnw5B+5YOmzu1UoPAyxaXsJ6RgQ==} + engines: {node: '>=6'} + requiresBuild: true + dev: false + + /@fortawesome/fontawesome-svg-core@6.4.0: + resolution: {integrity: sha512-Bertv8xOiVELz5raB2FlXDPKt+m94MQ3JgDfsVbrqNpLU9+UE2E18GKjLKw+d3XbeYPqg1pzyQKGsrzbw+pPaw==} + engines: {node: '>=6'} + requiresBuild: true + dependencies: + '@fortawesome/fontawesome-common-types': 6.4.0 + dev: false + + /@fortawesome/react-fontawesome@0.2.0(@fortawesome/fontawesome-svg-core@6.4.0)(react@18.2.0): + resolution: {integrity: sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==} + peerDependencies: + '@fortawesome/fontawesome-svg-core': ~1 || ~6 + react: '>=16.3' + dependencies: + '@fortawesome/fontawesome-svg-core': 6.4.0 + prop-types: 15.8.1 + react: 18.2.0 + dev: false + /@humanwhocodes/config-array@0.11.8: resolution: {integrity: sha512-UybHIJzJnR5Qc/MsD9Kr+RpO2h+/P1GhOwdiLPXK5TWk5sgTdu88bTD9UP+CKbPPh5Rni1u0GjAdYQLemG8g+g==} engines: {node: '>=10.10.0'} @@ -765,6 +796,10 @@ packages: supports-color: 7.2.0 dev: true + /classnames@2.3.2: + resolution: {integrity: sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==} + dev: false + /color-convert@1.9.3: resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==} dependencies: @@ -1504,6 +1539,10 @@ packages: resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==} dev: true + /lodash@4.17.21: + resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==} + dev: false + /loose-envify@1.4.0: resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==} hasBin: true @@ -1530,7 +1569,6 @@ packages: resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==} engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} hasBin: true - dev: true /natural-compare@1.4.0: resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==} @@ -1543,7 +1581,6 @@ packages: /object-assign@4.1.1: resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==} engines: {node: '>=0.10.0'} - dev: true /object-inspect@1.12.3: resolution: {integrity: sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==} @@ -1680,7 +1717,6 @@ packages: loose-envify: 1.4.0 object-assign: 4.1.1 react-is: 16.13.1 - dev: true /punycode@2.3.0: resolution: {integrity: sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==} @@ -1691,6 +1727,18 @@ packages: resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==} dev: true + /react-checkbox-tree@1.8.0(react@18.2.0): + resolution: {integrity: sha512-ufC4aorihOvjLpvY1beab2hjVLGZbDTFRzw62foG0+th+KX7e/sdmWu/nD1ZS/U5Yr0rWGwedGH5GOtR0IkUXw==} + peerDependencies: + react: ^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 + dependencies: + classnames: 2.3.2 + lodash: 4.17.21 + nanoid: 3.3.6 + prop-types: 15.8.1 + react: 18.2.0 + dev: false + /react-dom@18.2.0(react@18.2.0): resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==} peerDependencies: @@ -1703,7 +1751,6 @@ packages: /react-is@16.13.1: resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} - dev: true /react-refresh@0.14.0: resolution: {integrity: sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==} diff --git a/src/ReactCheckboxTree.jsx b/src/ReactCheckboxTree.jsx new file mode 100644 index 0000000..3e99565 --- /dev/null +++ b/src/ReactCheckboxTree.jsx @@ -0,0 +1,71 @@ +import React from 'react'; +import { useState } from "react"; +import CheckboxTree from 'react-checkbox-tree'; +import 'react-checkbox-tree/lib/react-checkbox-tree.css'; +// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' + +const nodes = [ + { + value: 'loa', + label: 'Lessons on Assurance' + }, + { + value: 'tms60', + label: 'TMS60', + children: [ + { value: 'pack-a', label: 'Pack A' }, + { value: 'pack-b', label: 'Pack B' }, + { value: 'pack-c', label: 'Pack C' }, + { value: 'pack-d', label: 'Pack D' }, + { value: 'pack-e', label: 'Pack E' } + ] + }, + { + value: 'dep', + label: 'DEP', + children: [ + { value: 'dep1', label: 'DEP 1' }, + { value: 'dep2', label: 'DEP 2' }, + { value: 'dep3', label: 'DEP 3' }, + { value: 'dep4', label: 'DEP 4' } + ] + } +]; + +// class Widget extends React.Component { +// state = { +// checked: [], +// expanded: [], +// }; +// +// render() { +// return ( +// this.setState({ checked })} +// onExpand={expanded => this.setState({ expanded })} +// /> +// ); +// } +// } + +function Widget() { + const [checked, setChecked] = useState([]) + const [expanded, setExpanded] = useState([]) + console.log(checked) + return ( +
+ +
+ ); +} + +export default Widget \ No newline at end of file diff --git a/src/VerseSampler.css b/src/VerseSampler.css index 13077e5..f68947e 100644 --- a/src/VerseSampler.css +++ b/src/VerseSampler.css @@ -5,17 +5,6 @@ text-align: left; } -.VerseValidator { - padding: 5px; - border: 1px; - border-style: solid; - -} - -.verse-box { - padding: 5px; -} - .box-label { padding: 5px; } diff --git a/src/VerseSampler.jsx b/src/VerseSampler.jsx index 67016fe..09cde52 100644 --- a/src/VerseSampler.jsx +++ b/src/VerseSampler.jsx @@ -5,95 +5,15 @@ Implemented features: */ import VerseData from "./assets/verse.json" import { useState } from "react"; +import CheckboxTree from 'react-checkbox-tree'; +import 'react-checkbox-tree/lib/react-checkbox-tree.css'; import _ from 'underscore'; import './VerseSampler.css' - -// const ArrayPrinter = ({ array }) => { -// const list = array.map((element, i) => -//
-//
  • {element.reference}
  • -//
  • {element.title}
  • -//
  • {element.verse}
  • -//
    -// ) -// return list -// } - -const ArrayTester = ({ array }) => { - const list = array.map((element, i) => ( - - )) - return list -} - -const VerseValidator = ({ element: { id, title, reference, verse } }) => { - const [inputVerse, setVerse] = useState('') - const [resultBool, setBool] = useState(false) - const verseChange = (e) => { - const value = e.target.value - let string1 = value; - let string2 = verse; - console.log(verse); - console.log(value); - string1 = String(string1).replace(/[^\w\s]/g, "").replace(/\s+/g, "").toLowerCase(); - string2 = String(string2).replace(/[^\w\s]/g, "").replace(/\s+/g, "").toLowerCase(); - - const bool = string1 === string2; - - setVerse(value) - setBool(bool) - } - - return ( -
    - - -
      {inputVerse}
    -
      {String(resultBool)}
    -
    - ) - -} - -const ButtonMapper = ({packs, setPacks}) => { - return ( - packs.map(({ pack, include }, i) => ( -
    - -
    - ) -))} - - -const handleChange = (setPacks, packs, include, i) => { - // extract desired item - let tmp = packs[i]; - tmp.include = !include; - // clone existing array - let packsClone = [...packs]; - // assign modified item back - packsClone[i] = tmp; - setPacks([...packsClone]); -}; +import VerseValidator from "./VerseValidator"; const GenerateTestList = ({ packs, testCount}) => { - let testList = packs.filter((pack) => pack.include) - .map((element) => element.pack) - .reduce( + let testList = packs.reduce( + // grab all elements included checked in "packs" (accumulator, currentValue) => accumulator.concat(VerseData[currentValue]), new Array() ); @@ -103,9 +23,65 @@ const GenerateTestList = ({ packs, testCount}) => { ) } +const ArrayTester = ({ array }) => { + const list = array.map((element) => ( + + )) + return list +} + + +const nodes = [ + { + value: 'loa', + label: 'Lessons on Assurance' + }, + { + value: 'tms60', + label: 'TMS60', + children: [ + { value: 'tms-60-pack-a', label: 'Pack A' }, + { value: 'tms-60-pack-b', label: 'Pack B' }, + { value: 'tms-60-pack-c', label: 'Pack C' }, + { value: 'tms-60-pack-d', label: 'Pack D' }, + { value: 'tms-60-pack-e', label: 'Pack E' } + ] + }, + { + value: 'dep', + label: 'DEP', + children: [ + { value: 'dep-1', label: 'DEP 1' }, + { value: 'dep-2', label: 'DEP 2' }, + { value: 'dep-3', label: 'DEP 3' }, + { value: 'dep-4', label: 'DEP 4' } + ] + } +]; + +const CheckboxWidget = ({checked, expanded, setChecked, setExpanded}) => { + return ( +
    + +
    + ); +} + + + + function App() { // create checklist array for pack selection const packList = Object.keys(VerseData); + // return a list of packObj's + // 1. packObj.pack for the pack name + // 2. packObj.include for whether to include the pack const packObjList = packList.map((element) => { const packObj = new Object(); packObj.pack = element; @@ -115,40 +91,52 @@ function App() { ) const [packs, setPacks] = useState(packObjList) - // set number for number of samples + // initialize state variable testCount + // purpose: to set number of verses to test const [testCount, setTestCount] = useState(5) const testCountChange = (e) => { const value = e.target.value setTestCount(value) } + + // variables for pack selection + const [checked, setChecked] = useState([]) + const [expanded, setExpanded] = useState([]) + + return (

    Pick Number of Verses:

    - - + Number of Verses Tested: + +

    Pick Your Packs:

    - + -
    + {/*

    Packs Tested:

    - {packs - .filter((pack) => pack.include) + {checked .map((element) => ( -
  • {element.pack}
  • +
  • {element}
  • ))} -
    +
    */}

    Verses:

    - - +
    ); } diff --git a/src/VerseValidator.css b/src/VerseValidator.css new file mode 100644 index 0000000..e597215 --- /dev/null +++ b/src/VerseValidator.css @@ -0,0 +1,38 @@ +.VerseValidator { + padding: 5px; + border: 1px; + border-style: solid; + +} + +.title-box { + /*padding: 5px;*/ + height: 3vh; + display: block; + width: 100%; + border: 0; + border-radius: 5px; + font-size: 15px; +} + +.chapter-title-box { + /*padding: 5px;*/ + height: 3vh; + display: block; + width: 100%; + border: 0; + border-radius: 5px; + font-size: 15px; +} + + +.verse-box { + /*padding: 5px;*/ + height: 10vh; + display: block; + width: 100%; + border: 0; + border-radius: 5px; + font-size: 15px; +} + diff --git a/src/VerseValidator.jsx b/src/VerseValidator.jsx new file mode 100644 index 0000000..ee755f6 --- /dev/null +++ b/src/VerseValidator.jsx @@ -0,0 +1,139 @@ +import { useState } from "react"; +import "./VerseValidator.css" + +const VerseValidator = ({ element: { title, chapterTitle, reference, verse } }) => { + const [inputVerse, setVerse] = useState('') + const [verseBool, setVerseBool] = useState(false) + const [inputTitle, setTitle] = useState('') + const [titleBool, setTitleBool] = useState(false) + const [inputChapterTitle, setChapterTitle] = useState('') + const [chapterTitleBool, setChapterTitleBool] = useState(false) + const[hintBool, setHintBool] = useState(false) + + const verseChange = (e) => { + const value = e.target.value; + let string1 = value; + let string2 = verse; + string1 = String(string1) + .replace(/[^\w\s]/g, "") + .replace(/\s+/g, "") + .toLowerCase(); + string2 = String(string2) + .replace(/[^\w\s]/g, "") + .replace(/\s+/g, "") + .toLowerCase(); + + const bool = string1 === string2; + + setVerse(value); + setVerseBool(bool); + }; + + const titleChange = (e) => { + const value = e.target.value; + let string1 = value; + let string2 = title; + string1 = String(string1) + .replace(/[^\w\s]/g, "") + .replace(/\s+/g, "") + .toLowerCase(); + string2 = String(string2) + .replace(/[^\w\s]/g, "") + .replace(/\s+/g, "") + .toLowerCase(); + + const bool = string1 === string2; + + setTitle(value); + setTitleBool(bool); + }; + + const chapterTitleChange = (e) => { + const value = e.target.value; + let string1 = value; + let string2 = title; + string1 = String(string1) + .replace(/[^\w\s]/g, "") + .replace(/\s+/g, "") + .toLowerCase(); + string2 = String(string2) + .replace(/[^\w\s]/g, "") + .replace(/\s+/g, "") + .toLowerCase(); + + const bool = string1 === string2; + + setChapterTitle(value); + setChapterTitleBool(bool); + }; + + + + + let result = ""; + + if (verseBool && titleBool) { + result = "Correct"; + } else { + result = ""; + } + + + return ( +
    +

    {reference}

    + + {chapterTitle && ( + <> + +