qrcode temporary fix
All checks were successful
publish-main / release-image (push) Successful in 10m12s
All checks were successful
publish-main / release-image (push) Successful in 10m12s
This commit is contained in:
Ivan
parent
2b50f7c332
commit
7bccb29aa6
GPG Key ID:
0C191B86D9582583
@ -2,13 +2,12 @@ import React from "react";
|
|||||||
import classes from "../../assets/styles/components/bodyModal/qrCodeToken.module.scss";
|
import classes from "../../assets/styles/components/bodyModal/qrCodeToken.module.scss";
|
||||||
import MyQrCode from "../MyQrCode.jsx";
|
import MyQrCode from "../MyQrCode.jsx";
|
||||||
|
|
||||||
|
const QrCodeToken = ({ value }) => {
|
||||||
|
return (
|
||||||
|
<div className={classes.main}>
|
||||||
|
<MyQrCode value={`http://minerva.krbl.ru/forms/${value}`} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
const QrCodeToken = ({value}) => {
|
export default QrCodeToken;
|
||||||
return (
|
|
||||||
<div className={classes.main}>
|
|
||||||
<MyQrCode value={`http://localhost:3000/forms/${value}`}/>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default QrCodeToken
|
|
||||||
|
|||||||
@ -2,7 +2,12 @@ import React, { useState, useEffect, useContext } from "react";
|
|||||||
import { useNavigate, useParams } from "react-router-dom";
|
import { useNavigate, useParams } from "react-router-dom";
|
||||||
import { useCookies } from "react-cookie";
|
import { useCookies } from "react-cookie";
|
||||||
import classes from "../assets/styles/tokensForm.module.scss";
|
import classes from "../assets/styles/tokensForm.module.scss";
|
||||||
import { listFormsByTokenApi, newFormTokenApi, removeTokenFormApi, editTokenFormApi} from "../hooks/api/listFormsApi";
|
import {
|
||||||
|
listFormsByTokenApi,
|
||||||
|
newFormTokenApi,
|
||||||
|
removeTokenFormApi,
|
||||||
|
editTokenFormApi,
|
||||||
|
} from "../hooks/api/listFormsApi";
|
||||||
import MyButton from "../components/MyButton.jsx";
|
import MyButton from "../components/MyButton.jsx";
|
||||||
import { UserData } from "../context/index.js";
|
import { UserData } from "../context/index.js";
|
||||||
import DefaultModal from "../components/DefaultModal.jsx";
|
import DefaultModal from "../components/DefaultModal.jsx";
|
||||||
@ -10,130 +15,133 @@ import EditToken from "../components/bodyModal/EditToken.jsx";
|
|||||||
import QrCodeToken from "../components/bodyModal/QrCodeToken.jsx";
|
import QrCodeToken from "../components/bodyModal/QrCodeToken.jsx";
|
||||||
import QRCode from "qrcode";
|
import QRCode from "qrcode";
|
||||||
|
|
||||||
|
|
||||||
const TokensForm = () => {
|
const TokensForm = () => {
|
||||||
const { formId } = useParams();
|
const { formId } = useParams();
|
||||||
const [tokens, setTokens] = useState([]);
|
const [tokens, setTokens] = useState([]);
|
||||||
const [currentIdToken, setCurrentIdToken] = useState(false);
|
const [currentIdToken, setCurrentIdToken] = useState(false);
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
const [titleToken, setTitleToken] = useState("");
|
const [titleToken, setTitleToken] = useState("");
|
||||||
const {user, setUser} = useContext(UserData);
|
const { user, setUser } = useContext(UserData);
|
||||||
const [qrCodeUrl, setQrcodeUrl] = useState("");
|
const [qrCodeUrl, setQrcodeUrl] = useState("");
|
||||||
|
|
||||||
const [cookies, _, __] = useCookies(["user"]);
|
const [cookies, _, __] = useCookies(["user"]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
async function listFormsByToken() {
|
async function listFormsByToken() {
|
||||||
const response = await listFormsByTokenApi(cookies.token, formId)
|
const response = await listFormsByTokenApi(cookies.token, formId);
|
||||||
|
|
||||||
if (response.status === 200) {
|
if (response.status === 200) {
|
||||||
setTokens(response.data.tokens.filter((item, i) => item.is_active === true && i !== 0))
|
setTokens(
|
||||||
setLoading(false)
|
response.data.tokens.filter(
|
||||||
}
|
(item, i) => item.is_active === true && i !== 0
|
||||||
else if (
|
)
|
||||||
response.status === 401
|
);
|
||||||
) {
|
setLoading(false);
|
||||||
// navigate("/enter")
|
} else if (response.status === 401) {
|
||||||
setUser(false);
|
// navigate("/enter")
|
||||||
}
|
setUser(false);
|
||||||
else {
|
} else {
|
||||||
console.log(response)
|
console.log(response);
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
listFormsByToken()
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
async function newFormToken() {
|
|
||||||
const response = await newFormTokenApi(cookies.token, formId, titleToken)
|
|
||||||
|
|
||||||
if (response.status === 200) {
|
|
||||||
setTokens([...tokens, response.data.token])
|
|
||||||
}
|
|
||||||
else if (
|
|
||||||
response.status === 401
|
|
||||||
) {
|
|
||||||
// navigate("/enter")
|
|
||||||
setUser(false);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
console.log(response)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// async function editTokenForm(tokenForm) {
|
listFormsByToken();
|
||||||
// const response = await editTokenFormApi(cookies.token, formId, tokenForm, titleToken)
|
}, []);
|
||||||
|
|
||||||
// if (response.status === 200) {
|
async function newFormToken() {
|
||||||
// setTokens([])
|
const response = await newFormTokenApi(cookies.token, formId, titleToken);
|
||||||
// }
|
|
||||||
// else if (
|
|
||||||
// response.status === 401
|
|
||||||
// ) {
|
|
||||||
// // navigate("/enter")
|
|
||||||
// setUser(false);
|
|
||||||
// }
|
|
||||||
// else {
|
|
||||||
// console.log(response)
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
async function removeTokenForm(tokenForm) {
|
if (response.status === 200) {
|
||||||
const response = await removeTokenFormApi(cookies.token, formId, tokenForm)
|
setTokens([...tokens, response.data.token]);
|
||||||
|
} else if (response.status === 401) {
|
||||||
if (response.status === 200) {
|
// navigate("/enter")
|
||||||
setTokens(tokens.filter(item => item.id !== tokenForm))
|
setUser(false);
|
||||||
}
|
} else {
|
||||||
else if (
|
console.log(response);
|
||||||
response.status === 401
|
|
||||||
) {
|
|
||||||
// navigate("/enter")
|
|
||||||
setUser(false);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
console.log(response)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
// async function editTokenForm(tokenForm) {
|
||||||
<div className={classes.main}>
|
// const response = await editTokenFormApi(cookies.token, formId, tokenForm, titleToken)
|
||||||
<div className={classes.wrapper}>
|
|
||||||
<div className={classes.answers}>
|
|
||||||
<div className={classes.answers__wrapper}>
|
|
||||||
<div className={classes.answers__wrapper__header}>
|
|
||||||
<h3>Токены формы</h3>
|
|
||||||
<MyButton
|
|
||||||
text={"Создать"}
|
|
||||||
class={"main__green"}
|
|
||||||
click={() => {
|
|
||||||
setTitleToken("")
|
|
||||||
setCurrentIdToken(false)
|
|
||||||
}}
|
|
||||||
target={"#tokenModal"}
|
|
||||||
toggle={"modal"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className={classes.answers__wrapper__body}>
|
|
||||||
<div className={classes.answers__wrapper__body__column}>
|
|
||||||
<div className={classes.answers__wrapper__body__column__wrapper}>
|
|
||||||
<div>Название</div>
|
|
||||||
<div>Токен</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{tokens ?
|
// if (response.status === 200) {
|
||||||
tokens.map((item, i) =>
|
// setTokens([])
|
||||||
<div className={classes.answers__wrapper__body__item} key={i}>
|
// }
|
||||||
<div className={classes.answers__wrapper__body__item__wrapper}>
|
// else if (
|
||||||
<div className={classes.answers__wrapper__body__item__wrapper__title}>
|
// response.status === 401
|
||||||
{item.name}
|
// ) {
|
||||||
</div>
|
// // navigate("/enter")
|
||||||
<div className={classes.answers__wrapper__body__item__wrapper__token}>
|
// setUser(false);
|
||||||
{item.id}
|
// }
|
||||||
</div>
|
// else {
|
||||||
</div>
|
// console.log(response)
|
||||||
<div className={classes.answers__wrapper__body__item__btn}>
|
// }
|
||||||
{/* <i
|
// }
|
||||||
|
|
||||||
|
async function removeTokenForm(tokenForm) {
|
||||||
|
const response = await removeTokenFormApi(cookies.token, formId, tokenForm);
|
||||||
|
|
||||||
|
if (response.status === 200) {
|
||||||
|
setTokens(tokens.filter((item) => item.id !== tokenForm));
|
||||||
|
} else if (response.status === 401) {
|
||||||
|
// navigate("/enter")
|
||||||
|
setUser(false);
|
||||||
|
} else {
|
||||||
|
console.log(response);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={classes.main}>
|
||||||
|
<div className={classes.wrapper}>
|
||||||
|
<div className={classes.answers}>
|
||||||
|
<div className={classes.answers__wrapper}>
|
||||||
|
<div className={classes.answers__wrapper__header}>
|
||||||
|
<h3>Токены формы</h3>
|
||||||
|
<MyButton
|
||||||
|
text={"Создать"}
|
||||||
|
class={"main__green"}
|
||||||
|
click={() => {
|
||||||
|
setTitleToken("");
|
||||||
|
setCurrentIdToken(false);
|
||||||
|
}}
|
||||||
|
target={"#tokenModal"}
|
||||||
|
toggle={"modal"}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className={classes.answers__wrapper__body}>
|
||||||
|
<div className={classes.answers__wrapper__body__column}>
|
||||||
|
<div
|
||||||
|
className={classes.answers__wrapper__body__column__wrapper}
|
||||||
|
>
|
||||||
|
<div>Название</div>
|
||||||
|
<div>Токен</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{tokens ? (
|
||||||
|
tokens.map((item, i) => (
|
||||||
|
<div className={classes.answers__wrapper__body__item} key={i}>
|
||||||
|
<div
|
||||||
|
className={classes.answers__wrapper__body__item__wrapper}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={
|
||||||
|
classes.answers__wrapper__body__item__wrapper__title
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{item.name}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className={
|
||||||
|
classes.answers__wrapper__body__item__wrapper__token
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{item.id}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={classes.answers__wrapper__body__item__btn}>
|
||||||
|
{/* <i
|
||||||
class="fa-solid fa-pen"
|
class="fa-solid fa-pen"
|
||||||
data-bs-toggle="modal"
|
data-bs-toggle="modal"
|
||||||
data-bs-target={`#tokenModal`}
|
data-bs-target={`#tokenModal`}
|
||||||
@ -142,64 +150,90 @@ const TokensForm = () => {
|
|||||||
setCurrentIdToken(item.id)
|
setCurrentIdToken(item.id)
|
||||||
}}>
|
}}>
|
||||||
</i> */}
|
</i> */}
|
||||||
<i
|
<i
|
||||||
class="fa-solid fa-qrcode"
|
class="fa-solid fa-qrcode"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
QRCode.toDataURL(
|
QRCode.toDataURL(
|
||||||
`http://localhost:3000/forms/${item.id}`,
|
`http://minerva.krbl.ru/forms/${item.id}`,
|
||||||
{},
|
{},
|
||||||
(err , url) => {
|
(err, url) => {
|
||||||
setQrcodeUrl(url)
|
setQrcodeUrl(url);
|
||||||
}
|
}
|
||||||
)
|
);
|
||||||
}}
|
}}
|
||||||
data-bs-toggle="modal"
|
data-bs-toggle="modal"
|
||||||
data-bs-target={`#qrModal`}>
|
data-bs-target={`#qrModal`}
|
||||||
</i>
|
></i>
|
||||||
<i class="fa-solid fa-trash" onClick={() => removeTokenForm(item.id)}></i>
|
<i
|
||||||
</div>
|
class="fa-solid fa-trash"
|
||||||
<DefaultModal
|
onClick={() => removeTokenForm(item.id)}
|
||||||
name={"qrModal"}
|
></i>
|
||||||
btn={[
|
|
||||||
{text: "Скачать", class: "main__green", dismiss: "modal", action: () => {
|
|
||||||
const aElem = document.createElement('a');
|
|
||||||
aElem.href = qrCodeUrl
|
|
||||||
aElem.download = `${item.name}.png`
|
|
||||||
aElem.click()
|
|
||||||
}},
|
|
||||||
{text: "Отмена", class: "main__white", dismiss: "modal", action: () => {}}
|
|
||||||
]}
|
|
||||||
BodyModal={
|
|
||||||
<QrCodeToken value={item.id}/>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
:
|
|
||||||
<div className={classes.loading__wrapper}>
|
|
||||||
<div class="spinner-border text-dark" className={classes.loading__wrapper__body} role="status">
|
|
||||||
<span class="visually-hidden">Загрузка...</span>
|
|
||||||
</div>
|
|
||||||
</div>}
|
|
||||||
<DefaultModal
|
|
||||||
name={"tokenModal"}
|
|
||||||
btn={[
|
|
||||||
{text: "Сохранить", class: "main__green", dismiss: "modal", action: () => newFormToken()},
|
|
||||||
{text: "Отмена", class: "main__white", dismiss: "modal", action: () => {}}
|
|
||||||
]}
|
|
||||||
BodyModal={
|
|
||||||
<EditToken
|
|
||||||
titleToken={titleToken}
|
|
||||||
setTitleToken={setTitleToken}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<DefaultModal
|
||||||
|
name={"qrModal"}
|
||||||
|
btn={[
|
||||||
|
{
|
||||||
|
text: "Скачать",
|
||||||
|
class: "main__green",
|
||||||
|
dismiss: "modal",
|
||||||
|
action: () => {
|
||||||
|
const aElem = document.createElement("a");
|
||||||
|
aElem.href = qrCodeUrl;
|
||||||
|
aElem.download = `${item.name}.png`;
|
||||||
|
aElem.click();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: "Отмена",
|
||||||
|
class: "main__white",
|
||||||
|
dismiss: "modal",
|
||||||
|
action: () => {},
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
BodyModal={<QrCodeToken value={item.id} />}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<div className={classes.loading__wrapper}>
|
||||||
|
<div
|
||||||
|
class="spinner-border text-dark"
|
||||||
|
className={classes.loading__wrapper__body}
|
||||||
|
role="status"
|
||||||
|
>
|
||||||
|
<span class="visually-hidden">Загрузка...</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
|
<DefaultModal
|
||||||
|
name={"tokenModal"}
|
||||||
|
btn={[
|
||||||
|
{
|
||||||
|
text: "Сохранить",
|
||||||
|
class: "main__green",
|
||||||
|
dismiss: "modal",
|
||||||
|
action: () => newFormToken(),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: "Отмена",
|
||||||
|
class: "main__white",
|
||||||
|
dismiss: "modal",
|
||||||
|
action: () => {},
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
BodyModal={
|
||||||
|
<EditToken
|
||||||
|
titleToken={titleToken}
|
||||||
|
setTitleToken={setTitleToken}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
</div>
|
||||||
}
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
export default TokensForm;
|
export default TokensForm;
|
||||||
Loading…
Reference in New Issue
Block a user