change all image functionality

src/_nav.js

@@ -25,6 +25,7 @@ import {
   cilAlarm,
   cilFeaturedPlaylist,
   cilLocationPin,
+  cilSettings,
 } from "@coreui/icons";
 import { CNavGroup, CNavItem, CNavTitle, CTabContent } from "@coreui/react";
 
@@ -36,13 +37,13 @@ const _nav = [
     icon: <CIcon icon={cilSpeedometer} customClassName="nav-icon" />,
     group: "",
   },
-  // {
+  {
-  //   component: CNavItem,
+    component: CNavItem,
-  //   name: "Customers",
+    name: "Customers",
-  //   icon: <CIcon icon={cilTennisBall} customClassName="nav-icon" />,
+    icon: <CIcon icon={cilTennisBall} customClassName="nav-icon" />,
-  //   to: "/customers-details",
+    to: "/customers-details",
-  //   group: "Customers",
+    group: "Customers",
-  // },
+  },
 
   // {
   //   component: CNavGroup,
@@ -192,8 +193,8 @@ const _nav = [
   // },
   {
     component: CNavGroup,
-    name: "Website Settings",
+    name: "Settings",
-    icon: <CIcon icon={cilCart} customClassName="nav-icon" />,
+    icon: <CIcon icon={cilSettings} customClassName="nav-icon" />,
     group: "",
 
     items: [
@@ -202,28 +203,35 @@ const _nav = [
         name: "Banner",
         icon: <CIcon icon={cilImage} customClassName="nav-icon" />,
         to: "/banner",
-        group: "Website Settings",
+        group: "Settings",
       },
+      // {
+      //   component: CNavItem,
+      //   name: "Register Image",
+      //   icon: <CIcon icon={cilImage} customClassName="nav-icon" />,
+      //   to: "/registerImage",
+      //   group: "Settings",
+      // },
+      // {
+      //   component: CNavItem,
+      //   name: "Login Image",
+      //   icon: <CIcon icon={cilImage} customClassName="nav-icon" />,
+      //   to: "/loginImage",
+      //   group: "Settings",
+      // },
+      // {
+      //   component: CNavItem,
+      //   name: "Shop Page Image",
+      //   icon: <CIcon icon={cilImage} customClassName="nav-icon" />,
+      //   to: "/shopImage",
+      //   group: "Settings",
+      // },
       {
         component: CNavItem,
-        name: "Register Image",
+        name: "Web Images",
-        icon: <CIcon icon={cilImage} customClassName="nav-icon" />,
+        icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
-        to: "/registerImage",
+        to: "/web_images",
-        group: "Website Settings",
+        group: "Settings",
-      },
-      {
-        component: CNavItem,
-        name: "Login Image",
-        icon: <CIcon icon={cilImage} customClassName="nav-icon" />,
-        to: "/loginImage",
-        group: "Website Settings",
-      },
-      {
-        component: CNavItem,
-        name: "Shop Page Image",
-        icon: <CIcon icon={cilImage} customClassName="nav-icon" />,
-        to: "/shopImage",
-        group: "Website Settings",
       },
       // {
       //   component: CNavItem,
@@ -253,7 +261,43 @@ const _nav = [
         name: "Content ",
         icon: <CIcon icon={cilText} customClassName="nav-icon" />,
         to: "/content",
-        group: "Website Settings",
+        group: "Settings",
+      },
+      {
+        component: CNavItem,
+        name: "Social Media",
+        icon: <CIcon icon={cilMedicalCross} customClassName="nav-icon" />,
+        to: "/socialmedia",
+        group: "Settings",
+      },
+      {
+        component: CNavItem,
+        name: "Application Name",
+        icon: <CIcon icon={cilText} customClassName="nav-icon" />,
+        to: "/application/name",
+        group: "Settings",
+      },
+
+      {
+        component: CNavItem,
+        name: "Address",
+        icon: <CIcon icon={cilAddressBook} customClassName="nav-icon" />,
+        to: "/address",
+        group: "Settings",
+      },
+      {
+        component: CNavItem,
+        name: "Logos",
+        icon: <CIcon icon={cilCommand} customClassName="nav-icon" />,
+        to: "/logo",
+        group: "Settings",
+      },
+      {
+        component: CNavItem,
+        name: "Copyright Message",
+        icon: <CIcon icon={cilText} customClassName="nav-icon" />,
+        to: "/copyright/message",
+        group: "Settings",
       },
       // {
       //   component: CNavItem,
@@ -264,51 +308,16 @@ const _nav = [
       // },
     ],
   },
-  {
+  // {
-    component: CNavGroup,
+  //   component: CNavGroup,
-    name: "Configuration",
+  //   name: "Configuration",
-    icon: <CIcon icon={cilAppsSettings} customClassName="nav-icon" />,
+  //   icon: <CIcon icon={cilAppsSettings} customClassName="nav-icon" />,
-    group: "",
+  //   group: "",
 
-    items: [
+  //   items: [
-      {
-        component: CNavItem,
-        name: "Social Media",
-        icon: <CIcon icon={cilMedicalCross} customClassName="nav-icon" />,
-        to: "/socialmedia",
-        group: "Configuration",
-      },
-      {
-        component: CNavItem,
-        name: "Application Name",
-        icon: <CIcon icon={cilText} customClassName="nav-icon" />,
-        to: "/application/name",
-        group: "Configuration",
-      },
 
-      {
+  //   ],
-        component: CNavItem,
+  // },
-        name: "Address",
-        icon: <CIcon icon={cilAddressBook} customClassName="nav-icon" />,
-        to: "/address",
-        group: "Configuration",
-      },
-      {
-        component: CNavItem,
-        name: "Logos",
-        icon: <CIcon icon={cilCommand} customClassName="nav-icon" />,
-        to: "/logo",
-        group: "Configuration",
-      },
-      {
-        component: CNavItem,
-        name: "Copyright Message",
-        icon: <CIcon icon={cilText} customClassName="nav-icon" />,
-        to: "/copyright/message",
-        group: "Configuration",
-      },
-    ],
-  },
   //Affiliate start
   // {
   //   component: CNavGroup,

src/routes.js

@@ -22,6 +22,7 @@ import Socialmedia from "./views/configuration/Socialmedia.js";
 import Address from "./views/configuration/Address.js";
 import Logo from "./views/configuration/Logo.js";
 import Login from "./views/pages/login/Login";
+import Web_Images from "./views/configuration/Web_Images";
 
 // Appointments
 import Appointments from "./views/Appointments/Appointments";
@@ -436,6 +437,13 @@ const routes = [
     element: RegisterImage,
     navName: "Website Related",
   },
+
+  {
+    path: "/web_images",
+    name: "Web Images",
+    element: Web_Images,
+    navName: "Settings",
+  },
   {
     path: "/loginImage",
     name: "LoginImage",

src/views/Banner/banner.js

@@ -595,6 +595,7 @@ const Banners = () => {
                           <th> Banner Name</th>
 
                           <th>Action</th>
+                          <th>Dimension</th>
                         </tr>
                       </thead>
                       <tbody>
@@ -675,6 +676,7 @@ const Banners = () => {
                                     Delete
                                   </button>
                                 </td>
+                                <td>1600 x 900 pixels</td>
                               </tr>
                             ))
                         )}

src/views/Images/LoginImage.js

@@ -123,7 +123,7 @@ const Banners = () => {
     //     return;
     // }
 
-        if ((!bannerImage && !olderImage)) {
+    if (!bannerImage && !olderImage) {
       swal({
         title: "Warning",
         text: "Please fill all the  required  fields!",
@@ -594,8 +594,8 @@ const Banners = () => {
                         <tr>
                           <th> Image</th>
 
-
                           <th>Action</th>
+                          <th>Dimension</th>
                         </tr>
                       </thead>
                       <tbody>
@@ -618,6 +618,7 @@ const Banners = () => {
                                 Add New Image
                               </Button>
                             </td>
+                            <th>Dimension</th>
                           </tr>
                         )}
                         {loading ? (
@@ -628,8 +629,7 @@ const Banners = () => {
                           </tr>
                         ) : (
                           banner &&
-                                                    banner
+                          banner.map((item, i) => (
-                                                        .map((item, i) => (
                             <tr key={i}>
                               <td>
                                 <img
@@ -653,10 +653,7 @@ const Banners = () => {
                                   type="button"
                                   className=" btn btn-primary btn-sm waves-effect waves-light btn-table mx-1  mt-1 "
                                   onClick={() =>
-                                                                            handleEditClick(
+                                    handleEditClick(item._id, item.image)
-                                                                                item._id,
-                                                                                item.image
-                                                                            )
                                   }
                                 >
                                   Edit
@@ -679,6 +676,7 @@ const Banners = () => {
                                                                         view
                                                                     </button> */}
                               </td>
+                              <td>800 x 600 pixels</td>
                             </tr>
                           ))
                         )}

src/views/Images/RegisterImage.js

@@ -518,6 +518,7 @@ const Banners = () => {
                           <th> Image</th>
 
                           <th>Action</th>
+                          <th>Dimension</th>
                         </tr>
                       </thead>
                       <tbody>
@@ -577,6 +578,7 @@ const Banners = () => {
                                   Edit
                                 </button>
                               </td>
+                              <td>800 x 600 pixels</td>
                             </tr>
                           ))
                         )}

src/views/Images/ShopImage.js

@@ -123,7 +123,7 @@ const Banners = () => {
     //     return;
     // }
 
-        if ((!bannerImage && !olderImage)) {
+    if (!bannerImage && !olderImage) {
       swal({
         title: "Warning",
         text: "Please fill all the  required  fields!",
@@ -594,8 +594,8 @@ const Banners = () => {
                         <tr>
                           <th> Image</th>
 
-
                           <th>Action</th>
+                          <th>Dimension</th>
                         </tr>
                       </thead>
                       <tbody>
@@ -628,8 +628,7 @@ const Banners = () => {
                           </tr>
                         ) : (
                           banner &&
-                                                    banner
+                          banner.map((item, i) => (
-                                                        .map((item, i) => (
                             <tr key={i}>
                               <td>
                                 <img
@@ -653,10 +652,7 @@ const Banners = () => {
                                   type="button"
                                   className=" btn btn-primary btn-sm waves-effect waves-light btn-table mx-1  mt-1 "
                                   onClick={() =>
-                                                                            handleEditClick(
+                                    handleEditClick(item._id, item.image)
-                                                                                item._id,
-                                                                                item.image
-                                                                            )
                                   }
                                 >
                                   Edit
@@ -679,6 +675,7 @@ const Banners = () => {
                                                                         view
                                                                     </button> */}
                               </td>
+                              <td>1200 x 800 pixels</td>
                             </tr>
                           ))
                         )}

src/views/configuration/Logo.js

@@ -98,7 +98,8 @@ function Logo() {
                                     className="label-100 mt-3"
                                     style={{ fontWeight: "bold" }}
                                   >
-                                    Header Logo for user Website <br />
+                                    Header Logo for user Website(250 x 100
+                                    pixels) <br />
                                   </label>
                                   <div>
                                     <input
@@ -142,7 +143,8 @@ function Logo() {
                                     style={{ fontWeight: "bold" }}
                                   >
                                     {/* Logo htmlFor Website Footer(148 x 48 px) */}
-                                    Footer logo for user Website <br />
+                                    Footer logo for user Website(250 x 100
+                                    pixels) <br />
                                   </label>
                                   <br />
                                   <input
@@ -181,7 +183,8 @@ function Logo() {
                                     style={{ fontWeight: "bold" }}
                                   >
                                     {/* Logo htmlFor Admin Header(148 x 48 px) */}
-                                    Logo for admin website <br />
+                                    Logo for admin website(250 x 100 pixels){" "}
+                                    <br />
                                   </label>
                                   <input
                                     type="file"

src/views/configuration/Web_Images.js

@@ -0,0 +1,423 @@
+import React, { useEffect, useState } from "react";
+
+import swal from "sweetalert";
+import ClipLoader from "react-spinners/ClipLoader";
+import { Link } from "react-router-dom";
+import axios from "axios";
+import { isAutheticated } from "src/auth";
+import { object } from "prop-types";
+
+function Web_Images() {
+  const [loading, setLoading] = useState(false);
+  const [RegisterImglogo, setRegisterImglogo] = useState("");
+  const [LoginImg, setLoginImg] = useState("");
+  const [ShopImg, setShopImg] = useState("");
+  const [display, setDisplay] = useState(true);
+  const token = isAutheticated();
+
+  // urlcreated images
+
+  const [RegisterImglogoUrl, setRegisterImglogoUrl] = useState("");
+  const [LoginImgUrl, setLoginImgUrl] = useState("");
+  const [ShopImgUrl, setShopImgUrl] = useState("");
+
+  useEffect(() => {
+    // async function getConfiguration() {
+    //   const configDetails = await axios.get(`/api/config`, {
+    //     headers: {
+    //       Authorization: `Bearer ${token}`,
+    //     },
+    //   });
+
+    //   console.log("configDetails.data.result", configDetails.data.result);
+    //   configDetails.data.result.map((item) => {
+    //     setRegisterImglogo(item?.logo[0]?.Adminlogo);
+    //     setLoginImg(item?.logo[0]?.Footerlogo);
+    //     setShopImg(item?.logo[0]?.Adminlogo);
+    //   });
+    // }
+    const getRegisterImage = async () => {
+      const response = await axios.get("/api/registerImage/getImage", {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+      if (response.status === 200) {
+        setRegisterImglogo(response?.data?.image[0]?.image?.secure_url);
+      }
+    };
+    const getLoginImage = async () => {
+      const response = await axios.get("/api/loginImage/getImage", {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+      if (response.status === 200) {
+        setLoginImg(response?.data?.image[0]?.image?.secure_url);
+      }
+    };
+    const getShopImage = async () => {
+      const response = await axios.get("/api/shopImage/getImage", {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+      if (response.status === 200) {
+        setShopImg(response?.data?.image[0]?.image?.secure_url);
+      }
+    };
+
+    getRegisterImage();
+    getLoginImage();
+    getShopImage();
+  }, []);
+  // async function handelChange(e) {
+  //   setDisplay(false);
+  //   console.log(e.target.name === "Web_Images htmlFor Website RegisterImg(148 x 48 px)");
+  //   if (e.target.name === "Web_Images htmlFor Website RegisterImg(148 x 48 px)") {
+  //     console.log(e.target.files[0]);
+  //     setRegisterImglogo(e.target.files[0]);
+  //   } else if (e.target.name === "Web_Images htmlFor Website Footer(148 x 48 px)") {
+  //     setLoginImg(e.target.files[0]);
+  //   } else if (e.target.name === "Web_Images htmlFor Admin RegisterImg(148 x 48 px)") {
+  //     setShopImg(e.target.files[0]);
+  //   }
+  // }
+  const [Rloading, setRLoading] = useState(false);
+  async function handeRegister(e) {
+    e.preventDefault();
+    if (typeof RegisterImglogo !== "object" || RegisterImglogo === null) {
+      swal({
+        title: "Warning",
+        text: "Please select file",
+        icon: "warning",
+        button: "Ok",
+        dangerMode: true,
+      });
+      return;
+    }
+
+    const formdata = new FormData();
+    formdata.append("RegisterImglogo", RegisterImglogo);
+    setRLoading(true);
+    await axios
+      .post(`/api/registerImage/addmodify/`, formdata, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+          "Content-Type": "multipart/formdata",
+          "Access-Control-Allow-Origin": "*",
+        },
+      })
+      .then((res) => {
+        setRLoading(false);
+        swal("Success!", res.data.message);
+      })
+      .catch((error) => {
+        setRLoading(false);
+      });
+  }
+  const [Lloading, setLLoading] = useState(false);
+
+  async function handeLogin(e) {
+    e.preventDefault();
+    if (typeof LoginImg !== "object" || LoginImg === null) {
+      swal({
+        title: "Warning",
+        text: "Please select file",
+        icon: "warning",
+        button: "Ok",
+        dangerMode: true,
+      });
+      return;
+    }
+
+    const formdata = new FormData();
+    formdata.append("LoginImg", LoginImg);
+    setLLoading(true);
+
+    await axios
+      .post(`/api/loginImage/addmodify/`, formdata, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+          "Content-Type": "multipart/formdata",
+          "Access-Control-Allow-Origin": "*",
+        },
+      })
+      .then((res) => {
+        setLLoading(false);
+        swal("Success!", res.data.message);
+      })
+      .catch((error) => {
+        setLLoading(false);
+      });
+  }
+
+  const [Shoploading, setShoploading] = useState(false);
+  async function handeShopImage(e) {
+    e.preventDefault();
+    if (typeof ShopImg !== "object" || ShopImg === null) {
+      swal({
+        title: "Warning",
+        text: "Please select file",
+        icon: "warning",
+        button: "Ok",
+        dangerMode: true,
+      });
+      return;
+    }
+
+    const formdata = new FormData();
+    formdata.append("ShopImg", ShopImg);
+    setShoploading(true);
+    await axios
+      .post(`/api/shopImage/addmodify/`, formdata, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+          "Content-Type": "multipart/formdata",
+          "Access-Control-Allow-Origin": "*",
+        },
+      })
+      .then((res) => {
+        setShoploading(false);
+        swal("Success!", res.data.message);
+      })
+      .catch((error) => {
+        setShoploading(false);
+      });
+  }
+
+  //   async function handelSubmit() {
+  //     setLoading(true);
+
+  //     const formdata = new FormData();
+  //     formdata.append("RegisterImglogo", RegisterImglogo);
+  //     formdata.append("LoginImg", LoginImg);
+  //     formdata.append("ShopImg", ShopImg);
+
+  //     await axios
+  //       .post(`/api/config/logo`, formdata, {
+  //         headers: {
+  //           Authorization: `Bearer ${token}`,
+  //           "Content-Type": "multipart/formdata",
+  //           "Access-Control-Allow-Origin": "*",
+  //         },
+  //       })
+  //       .then((res) => {
+  //         setLoading(false);
+  //         swal("Success!", res.data.message, res.data.status);
+  //       })
+  //       .catch((error) => {
+  //         setLoading(false);
+  //       });
+  //   }
+
+  return (
+    <div>
+      <div className="main-content">
+        <div className="page-content">
+          <div className="container-fluid">
+            <div className="row">
+              <div className="col-lg-12">
+                <div className="card">
+                  <div className="card-body">
+                    <div className="row">
+                      <div className="col-md-12 col-lg-6 col-xl-6">
+                        <h1 className="text-left head-small">Website Images</h1>
+
+                        <form>
+                          <div className="row">
+                            <div className="col-lg-12">
+                              <div className="form-group">
+                                <>
+                                  <label
+                                    htmlFor="basicpill-phoneno-input"
+                                    className="label-100 mt-3"
+                                    style={{ fontWeight: "bold" }}
+                                  >
+                                    Register Image for Website(800 x 600 pixels){" "}
+                                    <br />
+                                  </label>
+                                  <div>
+                                    <input
+                                      type="file"
+                                      name="Register_Images htmlFor Website RegisterImg(800 x 600 pixels)"
+                                      onChange={(e) => {
+                                        setRegisterImglogo(e.target.files[0]);
+                                        if (
+                                          e.target.files &&
+                                          e.target.files[0]
+                                        ) {
+                                          setRegisterImglogoUrl({
+                                            image: URL.createObjectURL(
+                                              e.target.files[0]
+                                            ),
+                                          });
+                                        }
+                                      }}
+                                      className="form-control input-field mb-3 col-md-6 d-inline-block"
+                                      id="basicpill-phoneno-input"
+                                    />
+                                    <button
+                                      className="mx-2  mb-1 btn btn-success"
+                                      onClick={(e) => handeRegister(e)}
+                                    >
+                                      <ClipLoader
+                                        loading={Rloading}
+                                        size={18}
+                                      />
+                                      {!Rloading && "New"}
+                                    </button>
+
+                                    {display ? (
+                                      <img
+                                        className="ms-1"
+                                        style={{ width: "100px" }}
+                                        src={
+                                          RegisterImglogoUrl.image
+                                            ? RegisterImglogoUrl.image
+                                            : RegisterImglogo
+                                        }
+                                        alt=""
+                                      />
+                                    ) : (
+                                      ""
+                                    )}
+                                  </div>
+                                  <label
+                                    htmlFor="basicpill-phoneno-input"
+                                    className="label-100 mt-3"
+                                    style={{ fontWeight: "bold" }}
+                                  >
+                                    {/* Web_Images htmlFor Website Footer(148 x 48 px) */}
+                                    Login logo for Website(800 x 600 pixels){" "}
+                                    <br />
+                                  </label>
+                                  <br />
+                                  <input
+                                    type="file"
+                                    name="Web_Images htmlFor Website Footer(800 x 600 px)"
+                                    onChange={(e) => {
+                                      setLoginImg(e.target.files[0]);
+
+                                      if (e.target.files && e.target.files[0]) {
+                                        setLoginImgUrl({
+                                          image: URL.createObjectURL(
+                                            e.target.files[0]
+                                          ),
+                                        });
+                                      }
+                                    }}
+                                    className="form-control input-field mt-1 col-md-6 d-inline-block"
+                                    id="basicpill-phoneno-input"
+                                  />
+                                  <button
+                                    className="mx-2 btn mb-1 btn-success"
+                                    onClick={(e) => handeLogin(e)}
+                                  >
+                                    <ClipLoader loading={Lloading} size={18} />
+                                    {!Lloading && "New"}
+                                  </button>{" "}
+                                  {display ? (
+                                    <img
+                                      style={{ width: "100px" }}
+                                      src={
+                                        LoginImgUrl.image
+                                          ? LoginImgUrl.image
+                                          : LoginImg
+                                      }
+                                      alt=""
+                                    />
+                                  ) : (
+                                    ""
+                                  )}
+                                  <label
+                                    htmlFor="basicpill-phoneno-input"
+                                    className="label-100 mt-2 row ms-1"
+                                    style={{ fontWeight: "bold" }}
+                                  >
+                                    {/* Web_Images htmlFor Admin RegisterImg(148 x 48 px) */}
+                                    Shop Page Image for website(1200 x 800
+                                    pixels) <br />
+                                  </label>
+                                  <input
+                                    type="file"
+                                    name="Web_Images htmlFor Admin RegisterImg(1200 x 800 px)"
+                                    onChange={(e) => {
+                                      setShopImg(e.target.files[0]);
+
+                                      if (e.target.files && e.target.files[0]) {
+                                        setShopImgUrl({
+                                          image: URL.createObjectURL(
+                                            e.target.files[0]
+                                          ),
+                                        });
+                                      }
+                                    }}
+                                    className="form-control input-field col-md-6 d-inline-block"
+                                    id="basicpill-phoneno-input"
+                                  />
+                                  <button
+                                    className="mx-2 btn btn-login btn-success mb-1"
+                                    onClick={(e) => handeShopImage(e)}
+                                  >
+                                    <ClipLoader
+                                      loading={Shoploading}
+                                      size={18}
+                                    />
+                                    {!Shoploading && "New"}{" "}
+                                  </button>{" "}
+                                  {display ? (
+                                    <img
+                                      style={{ width: "100px" }}
+                                      src={
+                                        ShopImgUrl.image
+                                          ? ShopImgUrl.image
+                                          : ShopImg
+                                      }
+                                      alt=""
+                                    />
+                                  ) : (
+                                    ""
+                                  )}
+                                </>
+                              </div>
+                            </div>
+                          </div>
+                          {/* <div className="row">
+                            <div className="col-lg-12">
+                              <div className="form-group text-left">
+                                <button
+                                  type="button"
+                                  disabled={
+                                    ShopImg === "" ||
+                                    LoginImg === "" ||
+                                    RegisterImglogo === ""
+                                  }
+                                  onClick={handelSubmit}
+                                  className="btn btn-success btn-login waves-effect waves-light mr-3 pt-2 pb-2 pr-4 pl-4"
+                                >
+                                  <ClipLoader loading={loading} size={18} />
+                                  {!loading && "Save"}
+                                </button>
+                              </div>
+                            </div>
+                          </div> */}
+                        </form>
+                      </div>
+                    </div>
+
+                    {/* <!-- end table-responsive --> */}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          {/* <!-- container-fluid --> */}
+        </div>
+        {/* <!-- End Page-content --> */}
+      </div>
+    </div>
+  );
+}
+
+export default Web_Images;