diff --git a/src/_nav.js b/src/_nav.js index db9cefb..f5a8186 100644 --- a/src/_nav.js +++ b/src/_nav.js @@ -23,6 +23,7 @@ import { cilText, cilUser, cilAlarm, + cilFeaturedPlaylist, } from "@coreui/icons"; import { CNavGroup, CNavItem, CNavTitle, CTabContent } from "@coreui/react"; @@ -169,6 +170,12 @@ const _nav = [ icon: , to: "/content", }, + { + component: CNavItem, + name: "Home", + icon: , + to: "/home", + }, ], }, { diff --git a/src/routes.js b/src/routes.js index 80a1c1d..b097012 100644 --- a/src/routes.js +++ b/src/routes.js @@ -122,6 +122,11 @@ import CreateBlog from "./views/Blog/CreateBlog"; import users from "./views/Users/users"; import UpdateBlog from "./views/Blog/EditBlog"; import ViewBlog from "./views/Blog/ViewBlog"; +import Home from "./views/Home/home"; +import EditPanel1 from "./views/Home/editPanel1"; +import EditPanel2 from "./views/Home/editPanel2"; +import EditPanel3 from "./views/Home/editPanel3"; +import Editpanel4 from "./views/Home/editPanel4"; const routes = [ { path: "/", exact: true, name: "Home" }, { @@ -304,6 +309,38 @@ const routes = [ element: EditAboutUs, }, + // Home + { + path: "/home", + name: "Home", + element: Home, + }, + { + path: "/home/panel-1", + name: "EditPanel1", + element: EditPanel1, + }, + { + path: "/home/panel-2", + name: "EditPanel2", + element: EditPanel2, + }, + { + path: "/home/panel-3", + name: "EditPanel3", + element: EditPanel3, + }, + { + path: "/home/panel-4", + name: "EditPanel4", + element: Editpanel4, + }, + + + + + + // { path: '/complaint/view/:id', name: 'view Complain', element: ViewComplaint }, //Complaints { diff --git a/src/views/Content/editPrivacyPolicy.js b/src/views/Content/editPrivacyPolicy.js index 0bd944b..e6295e2 100644 --- a/src/views/Content/editPrivacyPolicy.js +++ b/src/views/Content/editPrivacyPolicy.js @@ -36,7 +36,6 @@ export default function EditPrivacyPolicy() { }); if (response.status === 200) { // console.log(response); - setContent(response?.data?.privacyAndPolicy[0]?.privacyAndPolicyContent); setId(response?.data?.privacyAndPolicy[0]?._id); setOlderContent( diff --git a/src/views/Home/editPanel1.js b/src/views/Home/editPanel1.js new file mode 100644 index 0000000..449f630 --- /dev/null +++ b/src/views/Home/editPanel1.js @@ -0,0 +1,403 @@ +import { useEffect, useState } from "react"; +import Button from "@material-ui/core/Button"; +import { Link } from "react-router-dom"; +import ReactQuill from "react-quill"; +import "react-quill/dist/quill.snow.css"; +import axios from "axios"; +import { isAutheticated } from "src/auth"; +const TOOLBAR_OPTIONS = [ + [{ header: [1, 2, 3, 4, 5, 6, false] }], + [{ font: [] }], + [{ list: "ordered" }, { list: "bullet" }], + ["bold", "italic", "underline", "strike"], + [{ color: [] }, { background: [] }], + [{ align: [] }], + [{ script: "super" }, { script: "sub" }], + ["undo", "redo"], +]; +import CloudUploadIcon from "@mui/icons-material/CloudUpload"; +import DeleteSharpIcon from "@mui/icons-material/DeleteSharp"; +import { + Box, + TextField, + Checkbox, + FormControlLabel +} from "@mui/material"; + +const EditPanel1 = () => { + const token = isAutheticated(); + const [loading, setLoading] = useState(false); + const [displayPanel, setDisplayPanel] = useState(false); + const [content, setContent] = useState(""); + const [olderContent, setOlderContent] = useState(""); + const [image, setimage] = useState(null); + const [title, setTitle] = useState(""); + const [error, setError] = useState(""); + const [newUpdatedImages, setNewUpdatedImages] = useState(null); + const [Img, setImg] = useState(true); + const [id, setId] = useState(null); + + const handleContentChange = (content, delta, source, editor) => { + setContent(editor.getHTML()); + }; + //get Blogdata + const getPanel = async () => { + try { + const res = await axios.get(`/api/panel/panel1/get`, { + headers: { + "Access-Control-Allow-Origin": "*", + Authorization: `Bearer ${token}`, + }, + }); + setTitle(res?.data?.panel1[0]?.title); + setimage(res?.data?.panel1[0]?.image); + setContent(res?.data?.panel1[0]?.content); + setOlderContent(res?.data?.panel1[0]?.content); + setDisplayPanel(res?.data?.panel1[0]?.displayPanel); + setId(res?.data?.panel1[0]?._id); + setImg(false); + } catch (err) { + swal({ + title: "Error", + text: "Unable to fetch the panel content", + icon: "error", + button: "Retry", + dangerMode: true, + }); + } + }; + + useEffect(() => { + getPanel(); + }, []); + + const handleFileChange = (e) => { + const files = e.target.files; + // Reset error state + setError(""); + + // Check if more than one image is selected + if (files.length > 1 || Img === false || newUpdatedImages !== null) { + setError("You can only upload one image."); + return; + } + + // Check file types and append to selectedFiles + const allowedTypes = ["image/jpeg", "image/png", "image/jpg"]; + const file = files[0]; // Only one file is selected, so we get the first one + + if (allowedTypes.includes(file.type)) { + setNewUpdatedImages(file); + setimage(file); + + } else { + setError("Please upload only PNG, JPEG, or JPG files."); + } + }; + + const handelDelete = async (public_id) => { + const ary = public_id.split("/"); + setNewUpdatedImages(null); + + const res = await axios.delete( + `/api/v1/blog/deleteImage/jatinMor/Blog/${ary[2]}`, + { + headers: { + "Access-Control-Allow-Origin": "*", + Authorization: `Bearer ${token}`, + }, + } + ); + if (res) { + setimage(null); + setImg(true); + } + }; + + + const addContent = async () => { + + const formData = new FormData(); + formData.append("title", title); + formData.append("content", content); + formData.append("displayPanel", displayPanel); + formData.append("image", image); + + + const response = await axios.post( + "/api/panel/panel1/add", + formData, + { + headers: { + Authorization: `Bearer ${token}`, + }, + } + ); + if (response.status == 201) { + swal({ + title: "Congratulations!!", + text: "Panel 1 added successfully!", + icon: "success", + button: "OK", + }); + } + }; + + const updateContent = () => { + if (title === "" || content === "") { + swal({ + title: "Warning", + text: "Fill all mandatory fields", + icon: "error", + button: "Close", + dangerMode: true, + }); + return; + } + setLoading(true); + + + const formData = new FormData(); + formData.append("title", title); + formData.append("content", content); + formData.append("displayPanel", displayPanel); + + if (newUpdatedImages !== null) { + formData.append("image", newUpdatedImages); + } + + axios + .patch(`/api/panel/panel1/update/${id}`, formData, { + headers: { + Authorization: `Bearer ${token}`, + "Content-Type": "multipart/form-data", + "Access-Control-Allow-Origin": "*", + }, + }) + .then((res) => { + swal({ + title: "Updated", + text: " Updated successfully!", + icon: "success", + button: "ok", + }); + setLoading(false); + }) + .catch((err) => { + setLoading(false); + + const message = err.response?.data?.message + ? err.response?.data?.message + : "Something went wrong!"; + swal({ + title: "Warning", + text: message, + icon: "error", + button: "Retry", + dangerMode: true, + }); + }); + }; + + const handleSaveClick = async () => { + if (olderContent.length === 0) { + addContent(); + } else { + updateContent(); + } + // // Reload terms and conditions + // await getPrivacyPolicy(); + }; + + const handleChange = (event) => { + setDisplayPanel(event.target.checked); + }; + return ( +
+
+
+
+
+ Panel 1 +
+
+

+
+ +
+ + } + label="Display Panel" + /> + + + + + + +
+
+
+
+
+
+
+
+
+ + setTitle(e.target.value)} + /> +
+
+ + + + + {error &&

{error}

} +
+ + *You cannot upload more than 1 image + +
+ + + { image !== null ? ( + + Panel Image + handelDelete(image?.public_id)} + fontSize="small" + sx={{ + color: "white", + position: "absolute", + cursor: "pointer", + padding: "0.2rem", + background: "black", + borderRadius: "50%", + }} + /> + + ) : null} + + +
+
+
+
+
+
+
+ + +
+
+
+
+
+ ); +}; + +export default EditPanel1; diff --git a/src/views/Home/editPanel2.js b/src/views/Home/editPanel2.js new file mode 100644 index 0000000..1d5848e --- /dev/null +++ b/src/views/Home/editPanel2.js @@ -0,0 +1,409 @@ +import { useEffect, useState } from "react"; +import Button from "@material-ui/core/Button"; +import { Link } from "react-router-dom"; +import ReactQuill from "react-quill"; +import "react-quill/dist/quill.snow.css"; +import axios from "axios"; +import { isAutheticated } from "src/auth"; +const TOOLBAR_OPTIONS = [ + [{ header: [1, 2, 3, 4, 5, 6, false] }], + [{ font: [] }], + [{ list: "ordered" }, { list: "bullet" }], + ["bold", "italic", "underline", "strike"], + [{ color: [] }, { background: [] }], + [{ align: [] }], + [{ script: "super" }, { script: "sub" }], + ["undo", "redo"], +]; +import CloudUploadIcon from "@mui/icons-material/CloudUpload"; +import DeleteSharpIcon from "@mui/icons-material/DeleteSharp"; +import { + Box, + TextField, + Checkbox, + FormControlLabel +} from "@mui/material"; + +const EditPanel2 = () => { + const token = isAutheticated(); + const [loading, setLoading] = useState(false); + const [displayPanel, setDisplayPanel] = useState(false); + const [content, setContent] = useState(""); + const [olderContent, setOlderContent] = useState(""); + const [image, setimage] = useState(""); + const [title, setTitle] = useState(""); + const [error, setError] = useState(""); + const [newUpdatedImages, setNewUpdatedImages] = useState(null); + const [Img, setImg] = useState(true); + const [id, setId] = useState(null); + + const handleContentChange = (content, delta, source, editor) => { + setContent(editor.getHTML()); + }; + //get panel data + const getPanel = async () => { + try { + const res = await axios.get(`/api/panel/panel2/get`, { + headers: { + "Access-Control-Allow-Origin": "*", + Authorization: `Bearer ${token}`, + }, + }); + if (res?.status === 200) { + setTitle(res?.data?.panel2[0]?.title); + setimage(res?.data?.panel2[0]?.image); + setContent(res?.data?.panel2[0]?.content); + setOlderContent(res?.data?.panel2[0]?.content); + setDisplayPanel(res?.data?.panel2[0]?.displayPanel); + setId(res?.data?.panel2[0]?._id); + setImg(false); + + } + + } catch (err) { + console.error(err) + swal({ + title: "Error", + text: "Unable to fetch the panel content", + icon: "error", + button: "Retry", + dangerMode: true, + }); + } + }; + + useEffect(() => { + getPanel(); + }, []); + + const handleFileChange = (e) => { + const files = e.target.files; + // Reset error state + setError(""); + + // Check if more than one image is selected + if (files.length > 1 || newUpdatedImages !== null) { + setError("You can only upload one image."); + return; + } + + // Check file types and append to selectedFiles + const allowedTypes = ["image/jpeg", "image/png", "image/jpg"]; + const file = files[0]; // Only one file is selected, so we get the first one + + if (allowedTypes.includes(file.type)) { + setNewUpdatedImages(file); + setimage(file); + + } else { + setError("Please upload only PNG, JPEG, or JPG files."); + } + }; + + const handelDelete = async (public_id) => { + const ary = public_id.split("/"); + setNewUpdatedImages(null); + + const res = await axios.delete( + `/api/v1/blog/deleteImage/jatinMor/Blog/${ary[2]}`, + { + headers: { + "Access-Control-Allow-Origin": "*", + Authorization: `Bearer ${token}`, + }, + } + ); + if (res) { + setimage(null); + setImg(true); + } + }; + + + const addContent = async () => { + + const formData = new FormData(); + formData.append("title", title); + formData.append("content", content); + formData.append("displayPanel", displayPanel); + formData.append("image", image); + + + const response = await axios.post( + "/api/panel/panel2/add", + formData, + { + headers: { + Authorization: `Bearer ${token}`, + }, + } + ); + if (response.status == 201) { + swal({ + title: "Congratulations!!", + text: "Panel 2 added successfully!", + icon: "success", + button: "OK", + }); + } + }; + + const updateContent = () => { + if (title === "" || content === "") { + swal({ + title: "Warning", + text: "Fill all mandatory fields", + icon: "error", + button: "Close", + dangerMode: true, + }); + return; + } + setLoading(true); + + + const formData = new FormData(); + formData.append("title", title); + formData.append("content", content); + formData.append("displayPanel", displayPanel); + + if (newUpdatedImages !== null) { + formData.append("image", newUpdatedImages); + } + + axios + .patch(`/api/panel/panel2/update/${id}`, formData, { + headers: { + Authorization: `Bearer ${token}`, + "Content-Type": "multipart/form-data", + "Access-Control-Allow-Origin": "*", + }, + }) + .then((res) => { + swal({ + title: "Updated", + text: " Updated successfully!", + icon: "success", + button: "ok", + }); + setLoading(false); + }) + .catch((err) => { + setLoading(false); + + const message = err.response?.data?.message + ? err.response?.data?.message + : "Something went wrong!"; + swal({ + title: "Warning", + text: message, + icon: "error", + button: "Retry", + dangerMode: true, + }); + }); + }; + + const handleSaveClick = async () => { + console.log(olderContent) + if (olderContent?.length === 0 || olderContent===undefined) { + addContent(); + } else { + updateContent(); + } + // // Reload terms and conditions + // await getPrivacyPolicy(); + }; + + const handleChange = (event) => { + setDisplayPanel(event.target.checked); + }; + return ( +
+
+
+
+
+ Panel 2 +
+
+

+
+ +
+ + } + label="Display Panel" + /> + + + + + + +
+
+
+
+
+
+
+
+
+ + setTitle(e.target.value)} + /> +
+
+ + + + + {error &&

{error}

} +
+ + *You cannot upload more than 1 image + +
+ + + {image && ( + + Panel Image + handelDelete(image?.public_id)} + fontSize="small" + sx={{ + color: "white", + position: "absolute", + cursor: "pointer", + padding: "0.2rem", + background: "black", + borderRadius: "50%", + }} + /> + + )} + + +
+
+
+
+
+
+
+ + +
+
+
+
+
+ ); +}; + +export default EditPanel2; diff --git a/src/views/Home/editPanel3.js b/src/views/Home/editPanel3.js new file mode 100644 index 0000000..3235e2e --- /dev/null +++ b/src/views/Home/editPanel3.js @@ -0,0 +1,407 @@ +import { useEffect, useState } from "react"; +import Button from "@material-ui/core/Button"; +import { Link } from "react-router-dom"; +import ReactQuill from "react-quill"; +import "react-quill/dist/quill.snow.css"; +import axios from "axios"; +import { isAutheticated } from "src/auth"; +const TOOLBAR_OPTIONS = [ + [{ header: [1, 2, 3, 4, 5, 6, false] }], + [{ font: [] }], + [{ list: "ordered" }, { list: "bullet" }], + ["bold", "italic", "underline", "strike"], + [{ color: [] }, { background: [] }], + [{ align: [] }], + [{ script: "super" }, { script: "sub" }], + ["undo", "redo"], +]; +import CloudUploadIcon from "@mui/icons-material/CloudUpload"; +import DeleteSharpIcon from "@mui/icons-material/DeleteSharp"; +import { + Box, + TextField, + Checkbox, + FormControlLabel +} from "@mui/material"; + +const EditPanel3 = () => { + const token = isAutheticated(); + const [loading, setLoading] = useState(false); + const [displayPanel, setDisplayPanel] = useState(false); + const [content, setContent] = useState(""); + const [olderContent, setOlderContent] = useState(""); + const [image, setimage] = useState(""); + const [title, setTitle] = useState(""); + const [error, setError] = useState(""); + const [newUpdatedImages, setNewUpdatedImages] = useState(null); + const [Img, setImg] = useState(true); + const [id, setId] = useState(null); + + const handleContentChange = (content, delta, source, editor) => { + setContent(editor.getHTML()); + }; + //get Blogdata + const getPanel = async () => { + try { + const res = await axios.get(`/api/panel/panel3/get`, { + headers: { + "Access-Control-Allow-Origin": "*", + Authorization: `Bearer ${token}`, + }, + }); + if (res?.status === 200) { + setTitle(res?.data?.panel3[0]?.title); + setimage(res?.data?.panel3[0]?.image); + setContent(res?.data?.panel3[0]?.content); + setOlderContent(res?.data?.panel3[0]?.content); + setDisplayPanel(res?.data?.panel3[0]?.displayPanel); + setId(res?.data?.panel3[0]?._id); + setImg(false); + + } + + } catch (err) { + console.error(err) + swal({ + title: "Error", + text: "Unable to fetch the panel content", + icon: "error", + button: "Retry", + dangerMode: true, + }); + } + }; + + useEffect(() => { + getPanel(); + }, []); + + const handleFileChange = (e) => { + const files = e.target.files; + // Reset error state + setError(""); + + // Check if more than one image is selected + if (files.length > 1 || Img === false || newUpdatedImages !== null) { + setError("You can only upload one image."); + return; + } + + // Check file types and append to selectedFiles + const allowedTypes = ["image/jpeg", "image/png", "image/jpg"]; + const file = files[0]; // Only one file is selected, so we get the first one + + if (allowedTypes.includes(file.type)) { + setNewUpdatedImages(file); + setimage(file); + + } else { + setError("Please upload only PNG, JPEG, or JPG files."); + } + }; + + const handelDelete = async (public_id) => { + const ary = public_id.split("/"); + setNewUpdatedImages(null); + + const res = await axios.delete( + `/api/v1/blog/deleteImage/jatinMor/Blog/${ary[2]}`, + { + headers: { + "Access-Control-Allow-Origin": "*", + Authorization: `Bearer ${token}`, + }, + } + ); + if (res) { + setimage(null); + setImg(true); + } + }; + + const addContent = async () => { + + const formData = new FormData(); + formData.append("title", title); + formData.append("content", content); + formData.append("displayPanel", displayPanel); + formData.append("image", image); + + + const response = await axios.post( + "/api/panel/panel3/add", + formData, + { + headers: { + Authorization: `Bearer ${token}`, + }, + } + ); + if (response.status == 201) { + swal({ + title: "Congratulations!!", + text: "Panel 3 added successfully!", + icon: "success", + button: "OK", + }); + } + }; + + const updateContent = () => { + if (title === "" || content === "") { + swal({ + title: "Warning", + text: "Fill all mandatory fields", + icon: "error", + button: "Close", + dangerMode: true, + }); + return; + } + setLoading(true); + + + const formData = new FormData(); + formData.append("title", title); + formData.append("content", content); + formData.append("displayPanel", displayPanel); + + if (newUpdatedImages !== null) { + formData.append("image", newUpdatedImages); + } + + axios + .patch(`/api/panel/panel3/update/${id}`, formData, { + headers: { + Authorization: `Bearer ${token}`, + "Content-Type": "multipart/form-data", + "Access-Control-Allow-Origin": "*", + }, + }) + .then((res) => { + swal({ + title: "Updated", + text: " Updated successfully!", + icon: "success", + button: "ok", + }); + setLoading(false); + }) + .catch((err) => { + setLoading(false); + + const message = err.response?.data?.message + ? err.response?.data?.message + : "Something went wrong!"; + swal({ + title: "Warning", + text: message, + icon: "error", + button: "Retry", + dangerMode: true, + }); + }); + }; + + const handleSaveClick = async () => { + if (olderContent.length === 0) { + addContent(); + } else { + updateContent(); + } + // // Reload terms and conditions + // await getPrivacyPolicy(); + }; + + const handleChange = (event) => { + setDisplayPanel(event.target.checked); + }; + return ( +
+
+
+
+
+ Panel 3 +
+
+

+
+ +
+ + } + label="Display Panel" + /> + + + + + + +
+
+
+
+
+
+
+
+
+ + setTitle(e.target.value)} + /> +
+
+ + + + + {error &&

{error}

} +
+ + *You cannot upload more than 1 image + +
+ + + {image && ( + + Panel Image + handelDelete(image?.public_id)} + fontSize="small" + sx={{ + color: "white", + position: "absolute", + cursor: "pointer", + padding: "0.2rem", + background: "black", + borderRadius: "50%", + }} + /> + + )} + + +
+
+
+
+
+
+
+ + +
+
+
+
+
+ ); +}; + +export default EditPanel3; diff --git a/src/views/Home/editPanel4.js b/src/views/Home/editPanel4.js new file mode 100644 index 0000000..3410c72 --- /dev/null +++ b/src/views/Home/editPanel4.js @@ -0,0 +1,409 @@ +import { useEffect, useState } from "react"; +import Button from "@material-ui/core/Button"; +import { Link } from "react-router-dom"; +import ReactQuill from "react-quill"; +import "react-quill/dist/quill.snow.css"; +import axios from "axios"; +import { isAutheticated } from "src/auth"; +const TOOLBAR_OPTIONS = [ + [{ header: [1, 2, 3, 4, 5, 6, false] }], + [{ font: [] }], + [{ list: "ordered" }, { list: "bullet" }], + ["bold", "italic", "underline", "strike"], + [{ color: [] }, { background: [] }], + [{ align: [] }], + [{ script: "super" }, { script: "sub" }], + ["undo", "redo"], +]; +import CloudUploadIcon from "@mui/icons-material/CloudUpload"; +import DeleteSharpIcon from "@mui/icons-material/DeleteSharp"; +import { + Box, + TextField, + Checkbox, + FormControlLabel +} from "@mui/material"; + +const Editpanel4 = () => { + const token = isAutheticated(); + const [loading, setLoading] = useState(false); + const [displayPanel, setDisplayPanel] = useState(false); + const [content, setContent] = useState(""); + const [olderContent, setOlderContent] = useState(""); + const [image, setimage] = useState(""); + const [title, setTitle] = useState(""); + const [error, setError] = useState(""); + const [newUpdatedImages, setNewUpdatedImages] = useState(null); + const [Img, setImg] = useState(true); + const [id, setId] = useState(null); + + const handleContentChange = (content, delta, source, editor) => { + setContent(editor.getHTML()); + }; + //get Blogdata + const getPanel = async () => { + try { + const res = await axios.get(`/api/panel/panel4/get`, { + headers: { + "Access-Control-Allow-Origin": "*", + Authorization: `Bearer ${token}`, + }, + }); + if (res?.status === 200) { + setTitle(res?.data?.panel4[0]?.title); + if(res?.data?.panel4[0]?.image!==undefined && res?.data?.panel4[0]?.image!==null){ + setimage(res?.data?.panel4[0]?.image); + } + setContent(res?.data?.panel4[0]?.content); + setOlderContent(res?.data?.panel4[0]?.content); + setDisplayPanel(res?.data?.panel4[0]?.displayPanel); + setId(res?.data?.panel4[0]?._id); + setImg(false); + + } + + } catch (err) { + console.error(err) + swal({ + title: "Error", + text: "Unable to fetch the panel content", + icon: "error", + button: "Retry", + dangerMode: true, + }); + } + }; + + useEffect(() => { + getPanel(); + }, []); + + const handleFileChange = (e) => { + const files = e.target.files; + // Reset error state + setError(""); + + // Check if more than one image is selected + if (files.length > 1 || newUpdatedImages !== null) { + setError("You can only upload one image."); + return; + } + + // Check file types and append to selectedFiles + const allowedTypes = ["image/jpeg", "image/png", "image/jpg"]; + const file = files[0]; // Only one file is selected, so we get the first one + + if (allowedTypes.includes(file.type)) { + setNewUpdatedImages(file); + setimage(file); + + } else { + setError("Please upload only PNG, JPEG, or JPG files."); + } + }; + + const handelDelete = async (public_id) => { + const ary = public_id.split("/"); + setNewUpdatedImages(null); + + const res = await axios.delete( + `/api/v1/blog/deleteImage/jatinMor/Blog/${ary[2]}`, + { + headers: { + "Access-Control-Allow-Origin": "*", + Authorization: `Bearer ${token}`, + }, + } + ); + if (res) { + setimage(null); + setImg(true); + } + }; + + + const addContent = async () => { + + const formData = new FormData(); + formData.append("title", title); + formData.append("content", content); + formData.append("displayPanel", displayPanel); + formData.append("image", image); + + const response = await axios.post( + "/api/panel/panel4/add", + formData, + { + headers: { + Authorization: `Bearer ${token}`, + }, + } + ); + if (response.status == 201) { + swal({ + title: "Congratulations!!", + text: "Panel 4 added successfully!", + icon: "success", + button: "OK", + }); + } + }; + + const updateContent = () => { + if (title === "" || content === "") { + swal({ + title: "Warning", + text: "Fill all mandatory fields", + icon: "error", + button: "Close", + dangerMode: true, + }); + return; + } + setLoading(true); + + + const formData = new FormData(); + formData.append("title", title); + formData.append("content", content); + formData.append("displayPanel", displayPanel); + + if (newUpdatedImages !== null) { + formData.append("image", newUpdatedImages); + } + + axios + .patch(`/api/panel/panel4/update/${id}`, formData, { + headers: { + Authorization: `Bearer ${token}`, + "Content-Type": "multipart/form-data", + "Access-Control-Allow-Origin": "*", + }, + }) + .then((res) => { + swal({ + title: "Updated", + text: " Updated successfully!", + icon: "success", + button: "ok", + }); + setLoading(false); + }) + .catch((err) => { + setLoading(false); + + const message = err.response?.data?.message + ? err.response?.data?.message + : "Something went wrong!"; + swal({ + title: "Warning", + text: message, + icon: "error", + button: "Retry", + dangerMode: true, + }); + }); + }; + + const handleSaveClick = async () => { + if (!olderContent) { + addContent(); + } else { + updateContent(); + } + // // Reload terms and conditions + // await getPrivacyPolicy(); + }; + + const handleChange = (event) => { + setDisplayPanel(event.target.checked); + }; + return ( +
+
+
+
+
+ Panel 4 +
+
+

+
+ +
+ + } + label="Display Panel" + /> + + + + + + +
+
+
+
+
+
+
+
+
+ + setTitle(e.target.value)} + /> +
+
+ + + + + {error &&

{error}

} +
+ + *You cannot upload more than 1 image + +
+ + + {image && ( + + Panel Image + handelDelete(image?.public_id)} + fontSize="small" + sx={{ + color: "white", + position: "absolute", + cursor: "pointer", + padding: "0.2rem", + background: "black", + borderRadius: "50%", + }} + /> + + )} + + +
+
+
+
+
+
+
+ + +
+
+
+
+
+ ); +}; + +export default Editpanel4; diff --git a/src/views/Home/home.js b/src/views/Home/home.js new file mode 100644 index 0000000..1562859 --- /dev/null +++ b/src/views/Home/home.js @@ -0,0 +1,165 @@ +import { + Paper, + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, + Typography, + } from "@mui/material"; +import axios from "axios"; +import React, { useEffect, useState } from "react"; +import { Link } from "react-router-dom"; +import { isAutheticated } from "src/auth"; + + export default function Home() { + const [displayPanel1,setDisplayPanel1] = useState("Not Displayed"); + const [displayPanel2,setDisplayPanel2] = useState("Not Displayed"); + const [displayPanel3,setDisplayPanel3] = useState("Not Displayed"); + const [displayPanel4,setDisplayPanel4] = useState("Not Displayed"); + const [loading, setLoading] = useState(false); + let token = isAutheticated(); + + async function getPanelStatus(){ + try { + setLoading(true) + let response1 = await axios.get('/api/panel/panel1/get', { + headers: { + "Access-Control-Allow-Origin": "*", + Authorization: `Bearer ${token}`, + } + }) + + let response2 = await axios.get('/api/panel/panel2/get', { + headers: { + "Access-Control-Allow-Origin": "*", + Authorization: `Bearer ${token}`, + } + }); + let response3 = await axios.get('/api/panel/panel3/get', { + headers: { + "Access-Control-Allow-Origin": "*", + Authorization: `Bearer ${token}`, + } + }); + let response4 = await axios.get('/api/panel/panel4/get', { + headers: { + "Access-Control-Allow-Origin": "*", + Authorization: `Bearer ${token}`, + } + }); + if(response1 && response2 && response3 && response4){ + if(response1?.data?.panel1[0]?.displayPanel){ + setDisplayPanel1("Displayed") + } + if(response2?.data?.panel2[0]?.displayPanel){ + setDisplayPanel2("Displayed"); + } + if(response3?.data?.panel3[0]?.displayPanel){ + setDisplayPanel3("Displayed"); + } + if(response4?.data?.panel4[0]?.displayPanel){ + setDisplayPanel4("Displayed"); + } + setLoading(false); + } + } catch (error) { + console.error(error); + } + } + useEffect(()=>{ + getPanelStatus() + },[]) + + const pages = [ + { + name: "Panel 1", + action: "Edit", + path: "/home/panel-1", + status:displayPanel1 + }, + { + name: "Panel 2", + action: "Edit", + path: "/home/panel-2", + status:displayPanel2 + }, + { + name: "Panel 3", + action: "Edit", + path: "/home/panel-3", + status:displayPanel3 + }, + { + name: "Panel 4", + action: "Edit", + path: "/home/panel-4", + status:displayPanel4 + }, + + ]; + + return ( +
+ + Home + + + + + + Page + + Display Status + + + Action + + + + + + {pages.map((row) => ( + + + {row.name} + + + {loading ? "loading" : `${row.status}`} + + + + {" "} + + + + + + + ))} + +
+ +
+ ); + } + \ No newline at end of file