220 lines
14 KiB
JavaScript
220 lines
14 KiB
JavaScript
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'
|
|
|
|
function Logo() {
|
|
const [loading, setLoading] = useState(false)
|
|
const [Headerlogo, setHeaderlogo] = useState('')
|
|
const [Footerlogo, setFooterlogo] = useState('')
|
|
const [Adminlogo, setAdminlogo] = useState('')
|
|
const [display, setDisplay] = useState(true)
|
|
const token = isAutheticated()
|
|
|
|
// urlcreated images
|
|
|
|
const [HeaderlogoUrl, setHeaderlogoUrl] = useState('')
|
|
const [FooterlogoUrl, setFooterlogoUrl] = useState('')
|
|
const [AdminlogoUrl, setAdminlogoUrl] = useState('')
|
|
|
|
useEffect(() => {
|
|
async function getConfiguration() {
|
|
const configDetails = await axios.get(`/api/config`, {
|
|
headers: {
|
|
Authorization: `Bearer ${token}`,
|
|
},
|
|
})
|
|
|
|
configDetails.data.result.map((item) => {
|
|
setHeaderlogo(item?.logo[0]?.Headerlogo)
|
|
setFooterlogo(item?.logo[0]?.Footerlogo)
|
|
setAdminlogo(item?.logo[0].Adminlogo)
|
|
})
|
|
}
|
|
getConfiguration()
|
|
}, [])
|
|
|
|
// async function handelChange(e) {
|
|
// setDisplay(false);
|
|
// console.log(e.target.name === "Logo htmlFor Website Header(148 x 48 px)");
|
|
// if (e.target.name === "Logo htmlFor Website Header(148 x 48 px)") {
|
|
// console.log(e.target.files[0]);
|
|
// setHeaderlogo(e.target.files[0]);
|
|
// } else if (e.target.name === "Logo htmlFor Website Footer(148 x 48 px)") {
|
|
// setFooterlogo(e.target.files[0]);
|
|
// } else if (e.target.name === "Logo htmlFor Admin Header(148 x 48 px)") {
|
|
// setAdminlogo(e.target.files[0]);
|
|
// }
|
|
// }
|
|
|
|
async function handelSubmit() {
|
|
setLoading(true)
|
|
|
|
const formdata = new FormData()
|
|
formdata.append('Headerlogo', Headerlogo)
|
|
formdata.append('Footerlogo', Footerlogo)
|
|
formdata.append('Adminlogo', Adminlogo)
|
|
|
|
let res = await axios.post(`/api/config/logo`, formdata, {
|
|
headers: {
|
|
Authorization: `Bearer ${token}`,
|
|
'Content-Type': 'multipart/formdata',
|
|
'Access-Control-Allow-Origin': '*',
|
|
},
|
|
})
|
|
if (res) {
|
|
setLoading(false)
|
|
swal('Success!', res.data.message, res.data.status)
|
|
}
|
|
}
|
|
|
|
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">Logo</h1>
|
|
|
|
<form>
|
|
<div className="row">
|
|
<div className="col-lg-12">
|
|
<div className="form-group">
|
|
<>
|
|
<label
|
|
htmlFor="basicpill-phoneno-input"
|
|
className="label-100 mt-3"
|
|
>
|
|
Logo htmlFor Website Header(148 x 48 px)
|
|
</label>
|
|
<div>
|
|
<input
|
|
type="file"
|
|
name="Logo htmlFor Website Header(148 x 48 px)"
|
|
onChange={(e) => {
|
|
setHeaderlogo(e.target.files[0])
|
|
if (e.target.files && e.target.files[0]) {
|
|
setHeaderlogoUrl({
|
|
image: URL.createObjectURL(e.target.files[0]),
|
|
})
|
|
}
|
|
}}
|
|
className="form-control input-field col-md-6 d-inline-block"
|
|
id="basicpill-phoneno-input"
|
|
/>
|
|
{display ? (
|
|
<img
|
|
style={{ width: '100px' }}
|
|
src={HeaderlogoUrl.image ? HeaderlogoUrl.image : Headerlogo}
|
|
alt="header logo"
|
|
/>
|
|
) : (
|
|
''
|
|
)}
|
|
</div>
|
|
<label
|
|
htmlFor="basicpill-phoneno-input"
|
|
className="label-100 mt-3"
|
|
>
|
|
Logo htmlFor Website Footer(148 x 48 px)
|
|
</label>
|
|
<input
|
|
type="file"
|
|
name="Logo htmlFor Website Footer(148 x 48 px)"
|
|
onChange={(e) => {
|
|
setFooterlogo(e.target.files[0])
|
|
|
|
if (e.target.files && e.target.files[0]) {
|
|
setFooterlogoUrl({
|
|
image: URL.createObjectURL(e.target.files[0]),
|
|
})
|
|
}
|
|
}}
|
|
className="form-control input-field col-md-6 d-inline-block"
|
|
id="basicpill-phoneno-input"
|
|
/>{' '}
|
|
{display ? (
|
|
<img
|
|
style={{ width: '100px' }}
|
|
src={FooterlogoUrl.image ? FooterlogoUrl.image : Footerlogo}
|
|
alt="Footer logo"
|
|
/>
|
|
) : (
|
|
''
|
|
)}
|
|
<label
|
|
htmlFor="basicpill-phoneno-input"
|
|
className="label-100 mt-2 row ms-1"
|
|
>
|
|
Logo htmlFor Admin Header(148 x 48 px)
|
|
</label>
|
|
<input
|
|
type="file"
|
|
name="Logo htmlFor Admin Header(148 x 48 px)"
|
|
onChange={(e) => {
|
|
setAdminlogo(e.target.files[0])
|
|
|
|
if (e.target.files && e.target.files[0]) {
|
|
setAdminlogoUrl({
|
|
image: URL.createObjectURL(e.target.files[0]),
|
|
})
|
|
}
|
|
}}
|
|
className="form-control input-field col-md-6 d-inline-block"
|
|
id="basicpill-phoneno-input"
|
|
/>{' '}
|
|
{display ? (
|
|
<img
|
|
style={{ width: '100px' }}
|
|
src={AdminlogoUrl.image ? AdminlogoUrl.image : Adminlogo}
|
|
alt="Admin logo"
|
|
/>
|
|
) : (
|
|
''
|
|
)}
|
|
</>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="row">
|
|
<div className="col-lg-12">
|
|
<div className="form-group text-left">
|
|
<button
|
|
type="button"
|
|
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 Logo
|