Browse Source

update get custom image

pull/1/head
farhantock 8 months ago
parent
commit
ca48e9827f
  1. 28
      src/App.js
  2. 49
      src/containers/DefaultLayout/DefaultHeader.js
  3. 61
      src/containers/DefaultLayout/DefaultLayout.js
  4. 1
      src/views/Pages/Login/Login.js

28
src/App.js

@ -11,29 +11,10 @@ const loading = () => <div className="animated fadeIn pt-3 text-center">Loading.
const DefaultLayout = React.lazy(() => import('./containers/DefaultLayout'));
const Login = React.lazy(() => import('./views/Pages/Login'));
const Register = React.lazy(() => import('./views/Pages/Register'));
const Page403 = React.lazy(() => import('./views/Pages/Page403'));
const Page404 = React.lazy(() => import('./views/Pages/Page404'));
const Page500 = React.lazy(() => import('./views/Pages/Page500'));
const SiopasMap = React.lazy(() => import('./views/Map'));
class App extends Component {
componentDidMount() {
try {
const storedData = localStorage.getItem('configApp');
if (storedData !== null) {
const data = JSON.parse(storedData);
const htmlTitle = data.html_title || 'OSPRO';
document.title = htmlTitle;
} else {
document.title = 'OSPRO';
}
} catch (error) {
document.title = 'OSPRO';
}
}
render() {
return (
@ -42,14 +23,7 @@ class App extends Component {
<React.Suspense fallback={loading()}>
<Switch>
<Route exact path="/login" name="Login Page" render={props => <Login {...props} />} />
{/* <Route exact path="/home" name="Home" render={props => <DefaultLayout {...props}/>} /> */}
<Route exact path="/register" name="Register Page" render={props => <Register {...props} />} />
<Route exact path="/404" name="Page 404" render={props => <Page404 {...props} />} />
<Route exact path="/403" name="Page 403" render={props => <Page403 {...props} />} />
<Route exact path="/500" name="Page 500" render={props => <Page500 {...props} />} />
<Route exact path="/map/view" name="Map" render={props => <SiopasMap {...props} />} />
{/*<Route exact path="/layerswitcher" name="Layer Switcher" render={props => <LayerSwitcherExample {...props}/>} />*/}
{/*<Route exact path="/muidt" name="Mui Datatable Example" render={props => <MuiDatatablesExample {...props}/>} />*/}
<Route path="/" name="Home" render={props => <DefaultLayout {...props} />} />
</Switch>
</React.Suspense>

49
src/containers/DefaultLayout/DefaultHeader.js

@ -3,23 +3,17 @@ import { NavLink } from 'react-router-dom';
import { Badge, Nav, NavItem } from 'reactstrap';
import PropTypes from 'prop-types';
import { Menu, Dropdown } from 'antd'
import { ALERTUSER_SEARCH, ALERT_SEARCH, ALERTUSER_STATUSVIEW, ALERT_STATUSVIEW, APP_MODE } from '../../const/ApiConst';
import { ALERTUSER_SEARCH, ALERT_SEARCH, ALERTUSER_STATUSVIEW, ALERT_STATUSVIEW, APP_MODE, BASE_SIMPRO_LUMEN_IMAGE } from '../../const/ApiConst';
import { AppAsideToggler, AppNavbarBrand, AppSidebarToggler } from '@coreui/react';
import logo_ospro from '../../assets/img/OSPRO.png'
import axios from 'axios';
import './Default.css'
const token = window.localStorage.getItem('token');
const propTypes = {
children: PropTypes.node,
};
const config = {
headers:
{
Authorization: `Bearer ${token}`,
"Content-type": `application/json`
}
};
const defaultProps = {};
@ -42,8 +36,32 @@ class DefaultHeader extends Component {
componentDidMount() {
this.getHeaderMenu();
const token = window.localStorage.getItem('token');
const role = window.localStorage.getItem('role_name');
if (role !== 'Super Admin') {
this.setState({
configApp: JSON.parse(window.localStorage.getItem('configApp')),
});
}
this.setState({
config: {
headers: {
Authorization: `Bearer ${token}`,
'Content-type': `application/json`,
},
},
});
}
getLogoHeaderContent = () => {
const { configApp } = this.state;
const logoHeaderContent = configApp && configApp.logo_header ? configApp.logo_header.content : null;
return logoHeaderContent
? `${BASE_SIMPRO_LUMEN_IMAGE}/${logoHeaderContent}`
: logo_ospro;
};
componentDidUpdate(prevProps, prevState) {
if (this.state.listReadNotif !== prevState.listReadNotif) {
if (this.state.listReadNotif.length > 0) {
@ -107,7 +125,7 @@ class DefaultHeader extends Component {
}
const result = await axios
.post(url, payload, config)
.post(url, payload, this.state.config)
.then(res => res)
.catch((error) => error.response);
if (result && result.data && result.data.code == 200) {
@ -178,14 +196,14 @@ class DefaultHeader extends Component {
if (parseInt(localStorage.getItem('role_id')) === 1) {
data.map((val, index) => {
let url = ALERT_STATUSVIEW(val)
promises.push(axios.put(url, payload, config)
promises.push(axios.put(url, payload, this.state.config)
.then(res => result.push(res)));
});
} else {
data.map((val, index) => {
let url = ALERTUSER_STATUSVIEW(val)
promises.push(axios.put(url, payload, config)
promises.push(axios.put(url, payload, this.state.config)
.then(res => result.push(res)))
});
}
@ -199,11 +217,14 @@ class DefaultHeader extends Component {
getLogo = () => {
return (
<div style={{ width: '10%', display: 'flex', justifyContent: 'center' }}>
<img style={{ width: '100%', height: '100%' }} src={logo_ospro} />
<img
style={{ width: '100%', height: '100%' }}
src={this.getLogoHeaderContent()}
/>
</div>
)
}
// logo_ospro
getHeaderMenu = () => {
const { fullname, u_group } = this.state;
if (u_group == 'kominfo') {

61
src/containers/DefaultLayout/DefaultLayout.js

@ -3,7 +3,7 @@ import { Redirect, Route, Switch, withRouter } from 'react-router-dom';
import * as router from 'react-router-dom';
import { Button, Container, UncontrolledDropdown, DropdownItem, DropdownMenu, DropdownToggle, Nav, NavItem } from 'reactstrap';
import axios from 'axios';
import { ALERTUSER_SEARCH, ALERT_SEARCH, MENU_SEARCH, ROLEMENU_SEARCH, ALERTUSER_STATUSVIEW, ALERT_STATUSVIEW, MENU_MANAGEMENT, CONTROL_MONITORING_SEARCH } from '../../const/ApiConst';
import { BASE_SIMPRO_LUMEN_IMAGE, MENU_MANAGEMENT } from '../../const/ApiConst';
import { handleChangeLng } from "../../utils/LangUtils";
import {
AppAside,
@ -63,8 +63,6 @@ class DefaultLayout extends Component {
company_id: company_id
};
}
async componentDidMount() {
const menu = localStorage.getItem("menu_login")
if (menu) this.setMenu(JSON.parse(menu))
@ -72,6 +70,53 @@ class DefaultLayout extends Component {
if (!localStorage.getItem("token")) {
this.signOut();
}
window.myData = "Data dari komponen React";
try {
const storedData = localStorage.getItem('configApp');
if (storedData !== null) {
const data = JSON.parse(storedData);
const faviconContent = data && data.favicon_image ? `${BASE_SIMPRO_LUMEN_IMAGE}/${data.favicon_image.content}` : null;
const htmlTitle = data.html_title || 'OSPRO';
document.title = htmlTitle;
if (faviconContent) {
this.setFavicon(faviconContent);
}
} else {
document.title = 'OSPRO';
}
} catch (error) {
document.title = 'OSPRO';
}
}
setFavicon = (faviconContent) => {
const existingFavicon = document.querySelector("link[rel='icon']");
if (existingFavicon) {
document.head.removeChild(existingFavicon);
}
const faviconElement = document.createElement('link');
faviconElement.rel = 'icon';
const fileExtension = faviconContent ? faviconContent.split('.').pop().toLowerCase() : '';
switch (fileExtension) {
case 'svg':
faviconElement.type = 'image/svg+xml';
break;
case 'ico':
faviconElement.type = 'image/x-icon';
break;
default:
faviconElement.type = 'image/png';
}
console.log('faviconElement.type', faviconElement.type);
console.log('faviconContent', faviconContent);
faviconElement.href = faviconContent || `${process.env.PUBLIC_URL}/OSPRO.ico`;
document.head.appendChild(faviconElement);
}
componentDidUpdate(prevProps, prevState) {
@ -120,6 +165,7 @@ class DefaultLayout extends Component {
await localStorage.removeItem("role_id");
await localStorage.removeItem("company_id");
document.getElementById('title').innerText = 'OSPRO';
this.setFavicon(`${process.env.PUBLIC_URL}/OSPRO.ico`);
await window.localStorage.clear();
this.props.history.replace('/login')
}
@ -269,9 +315,12 @@ class DefaultLayout extends Component {
return (
<div className="app">
{/* <AppHeader fixed>
<DefaultHeader />
</AppHeader> */}
{!window.location.href.includes("false-header") && (
<AppHeader fixed>
<DefaultHeader />
</AppHeader>
)
}
<div className="app-body">
{!window.location.href.includes("dashboard-project") || renderSidebar ? (
<AppSidebar minimized={this.state.minimized} fixed display="lg">

1
src/views/Pages/Login/Login.js

@ -64,7 +64,6 @@ class Login extends Component {
if (storedData !== null) {
const data = JSON.parse(storedData);
const htmlTitle = data.html_title || 'OSPRO';
console.log('htmlTitle', htmlTitle);
document.getElementById('title').innerText = htmlTitle;
} else {
document.title = 'OSPRO';

Loading…
Cancel
Save