You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

164 lines
5.6 KiB

  1. import {useTranslation} from "next-i18next";
  2. import {useState} from "react";
  3. import {
  4. faExclamationTriangle,
  5. faCheck,
  6. } from "@fortawesome/free-solid-svg-icons";
  7. import {Button, Modal, ModalHeader, ModalBody, ModalFooter} from "reactstrap";
  8. import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
  9. const ConfirmModal = ({tabIndex, title, candidates, grades, isTimeLimited, start, finish, emails, restrictResult, className, confirmCallback}) => {
  10. const [visibled, setVisibility] = useState(false);
  11. const {t} = useTranslation();
  12. const toggle = () => setVisibility(!visibled)
  13. return (
  14. <div className="input-group-append">
  15. <button
  16. type="button"
  17. className={className}
  18. onClick={toggle}
  19. tabIndex={tabIndex}
  20. >
  21. <FontAwesomeIcon icon={faCheck} className="mr-2" />
  22. {t("Validate")}
  23. </button>
  24. <Modal
  25. isOpen={visibled}
  26. toggle={toggle}
  27. className="modal-dialog-centered"
  28. >
  29. <ModalHeader toggle={toggle}>
  30. {t("Confirm your vote")}
  31. </ModalHeader>
  32. <ModalBody>
  33. <div className="mt-1 mb-1">
  34. <div className="text-white bg-primary p-2 pl-3 pr-3 rounded">
  35. {t("Question of the election")}
  36. </div>
  37. <div className="p-2 pl-3 pr-3 bg-light mb-3">{title}</div>
  38. <div className="text-white bg-primary p-2 pl-3 pr-3 rounded">
  39. {t("Candidates/Proposals")}
  40. </div>
  41. <div className="p-2 pl-3 pr-3 bg-light mb-3">
  42. <ul className="m-0 pl-4">
  43. {candidates.map((candidate, i) => {
  44. if (candidate.label !== "") {
  45. return (
  46. <li key={i} className="m-0">
  47. {candidate.label}
  48. </li>
  49. );
  50. } else {
  51. return <li key={i} className="d-none" />;
  52. }
  53. })}
  54. </ul>
  55. </div>
  56. <div className={(isTimeLimited ? "d-block " : "d-none")} >
  57. <div className="text-white bg-primary p-2 pl-3 pr-3 rounded">
  58. {t("Dates")}
  59. </div>
  60. <div className="p-2 pl-3 pr-3 bg-light mb-3">
  61. {t("The election will take place from")}{" "}
  62. <b>
  63. {start.toLocaleDateString()}, {t("at")}{" "}
  64. {start.toLocaleTimeString()}
  65. </b>{" "}
  66. {t("to")}{" "}
  67. <b>
  68. {finish.toLocaleDateString()}, {t("at")}{" "}
  69. {finish.toLocaleTimeString()}
  70. </b>
  71. </div>
  72. </div>
  73. <div className="text-white bg-primary p-2 pl-3 pr-3 rounded">
  74. {t("Grades")}
  75. </div>
  76. <div className="p-2 pl-3 pr-3 bg-light mb-3">
  77. {grades.map((mention, i) => {
  78. return i < grades.length ? (
  79. <span
  80. key={i}
  81. className="badge badge-light mr-2 mt-2"
  82. style={{
  83. backgroundColor: mention.color,
  84. color: "#fff"
  85. }}
  86. >
  87. {mention.label}
  88. </span>
  89. ) : (
  90. <span key={i} />
  91. );
  92. })}
  93. </div>
  94. <div className="text-white bg-primary p-2 pl-3 pr-3 rounded">
  95. {t("Voters' list")}
  96. </div>
  97. <div className="p-2 pl-3 pr-3 bg-light mb-3">
  98. {emails.length > 0 ? (
  99. emails.join(", ")
  100. ) : (
  101. <p>
  102. {t("The form contains no address.")}
  103. <br />
  104. <em>
  105. {t(
  106. "The election will be opened to anyone with the link"
  107. )}
  108. </em>
  109. </p>
  110. )}
  111. </div>
  112. {restrictResult ? (
  113. <div>
  114. <div className="small bg-primary text-white p-3 mt-2 rounded">
  115. <h6 className="m-0 p-0">
  116. <FontAwesomeIcon
  117. icon={faExclamationTriangle}
  118. className="mr-2"
  119. />
  120. <u>{t("Results available at the close of the vote")}</u>
  121. </h6>
  122. <p className="m-2 p-0">
  123. <span>
  124. {t(
  125. "The results page will not be accessible until the end date is reached."
  126. )}{" "}
  127. ({finish.toLocaleDateString()} {t("at")}{" "}
  128. {finish.toLocaleTimeString()})
  129. </span>
  130. </p>
  131. </div>
  132. </div>
  133. ) : (
  134. <div>
  135. <div className="small bg-primary text-white p-3 mt-2 rounded">
  136. <h6 className="m-0 p-0">
  137. {t("Results available at any time")}
  138. </h6>
  139. </div>
  140. </div>
  141. )}
  142. </div>
  143. </ModalBody>
  144. <ModalFooter>
  145. <Button
  146. color="primary-outline"
  147. className="text-primary border-primary"
  148. onClick={toggle}>
  149. {t("Cancel")}
  150. </Button>
  151. <Button color="primary"
  152. onClick={() => {toggle(); confirmCallback();}}
  153. >
  154. {t("Start the election")}
  155. </Button>
  156. </ModalFooter>
  157. </Modal>
  158. </div >
  159. )
  160. }
  161. export default ConfirmModal