Skip to content

T
Tia-dev
Commit e8048516 authored by Riri Novita's avatar Riri Novita
Browse files
Options

Maintenance Mode

parent 70092320
Show whitespace changes
Inline Side-by-side
Showing with 579 additions and 2 deletions
package-lock.json
View file @ e8048516
......@@ -17900,6 +17900,16 @@
}
}
},
"suneditor": {
"version": "2.44.3",
"resolved": "https://registry.npmjs.org/suneditor/-/suneditor-2.44.3.tgz",
"integrity": "sha512-B25DrbAxcwkvAANNm2EClugBCxATCa3SvV03SpyaMJybKj4bzQnS1iq6Wo3h+v970tNSnjfeoT3ID3Nj0NuiBA=="
},
"suneditor-react": {
"version": "3.4.1",
"resolved": "https://registry.npmjs.org/suneditor-react/-/suneditor-react-3.4.1.tgz",
"integrity": "sha512-xsfMjy2748x8Bcw/SeT2CeecrBABcJPyCO+LPourVLcQg8QW/A9FbIfP0DghNlBkH/gxy9iviR5wVydg9UW2wQ=="
},
"supports-color": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
......
package.json
View file @ e8048516
......@@ -47,7 +47,9 @@
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1",
"react-spinners": "^0.9.0",
"react-tooltip": "^4.2.8"
"react-tooltip": "^4.2.8",
"suneditor": "^2.44.3",
"suneditor-react": "^3.4.1"
},
"scripts": {
"start": "react-scripts start",
......
src/container/GeneralSetting/MaintenanceMode.js 0 → 100644
View file @ e8048516
import React, { Component, useRef } from 'react';
import { Typography, Paper, TextField, Snackbar, withStyles, Switch, FormControlLabel } from '@material-ui/core';
import Images from '../../assets/Images';
import Constant from '../../library/Constant';
import api from '../../api';
import { PropagateLoader } from 'react-spinners';
import { format } from 'date-fns';
import Autocomplete from '@material-ui/lab/Autocomplete';
import { Alert } from '@material-ui/lab';
import ReactTooltip from "react-tooltip";
import SunEditor, { buttonList } from "suneditor-react";
import 'suneditor/dist/css/suneditor.min.css'; // Import Sun Editor's CSS File
const IOSSwitch = withStyles((theme) => ({
root: {
width: 55,
height: 31,
padding: 0,
margin: theme.spacing(1),
},
switchBase: {
padding: 3,
marginLeft: 1,
'&$checked': {
transform: 'translateX(16px)',
color: theme.palette.common.white,
paddingLeft: 11,
'& + $track': {
backgroundColor: '#52d869',
opacity: 1,
border: 'none',
},
},
'&$focusVisible $thumb': {
color: '#52d869',
border: '6px solid #fff',
},
},
thumb: {
width: 25,
height: 25,
},
track: {
borderRadius: 30 / 2,
border: `1px solid ${theme.palette.grey[400]}`,
backgroundColor: 'red',
opacity: 1,
transition: theme.transitions.create(['background-color', 'border']),
},
checked: {},
focusVisible: {},
}))(({ classes, ...props }) => {
return (
<Switch
focusVisibleClassName={classes.focusVisible}
disableRipple
classes={{
root: classes.root,
switchBase: classes.switchBase,
thumb: classes.thumb,
track: classes.track,
checked: classes.checked,
}}
{...props}
/>
);
});
class MaintenanceMode extends Component {
constructor(props) {
super(props)
this.editorRef = React.createRef();
this.editorRefEmail = React.createRef();
// this.handleChange = this.handleChange.bind(this)
this.state = {
isModeNonActive: true,
isModeActive: false,
isModeActiveNo: true,
isModeActiveYes: false,
isModeNonActiveNo: true,
isModeNonActiveYes: false,
contentMode: "",
contentEmail: "",
checkedB: true
}
}
componentDidMount() {
}
closeAlert() {
this.setState({ alert: false })
}
handleChange(event) {
this.setState({ ...this.state.checkedB, [event.target.name]: event.target.checked });
};
handleImageUploadBefore(files, info, uploadHandler) {
// uploadHandler is a function
console.log(files, info, uploadHandler)
try {
this.ResizeImage(files, uploadHandler)
} catch (err) {
uploadHandler(err.toString())
}
}
handleImageUpload(targetImgElement, index, state, imageInfo, remainingFilesCount) {
console.log(targetImgElement, index, state, imageInfo, remainingFilesCount)
}
handleImageUploadError(errorMessage, result) {
console.log(errorMessage, result)
}
handleEditorChange(value) {
console.log(value);
this.setState({ contentMode: value })
// setContent(value)
}
handleDrop(event) {
console.log(event); //Get the drop event
}
handleBlur(event, editorContents) {
console.log(event, editorContents); //Get the blur event
}
imageUploadHandler(xmlHttpRequest, info, core) {
console.log(xmlHttpRequest, info, core)
}
ResizeImage(files, uploadHandler) {
const uploadFile = files[0];
const img = document.createElement('img');
const canvas = document.createElement('canvas');
const reader = new FileReader();
console.log(uploadFile);
reader.onload = function (e) {
img.src = e.target.result
img.onload = function () {
let ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
const MAX_WIDTH = 200;
const MAX_HEIGHT = 100;
let width = img.width;
let height = img.height;
if (width > height) {
if (width > MAX_WIDTH) {
height *= MAX_WIDTH / width;
width = MAX_WIDTH;
}
} else {
if (height > MAX_HEIGHT) {
width *= MAX_HEIGHT / height;
height = MAX_HEIGHT;
}
}
canvas.width = width;
canvas.height = height;
ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);
canvas.toBlob(function (blob) {
uploadHandler([new File([blob], uploadFile.name)])
}, uploadFile.type, 1);
}
}
reader.readAsDataURL(uploadFile);
}
handleImageUploadBeforeEmail(files, info, uploadHandler) {
// uploadHandler is a function
console.log(files, info, uploadHandler)
try {
this.ResizeImageEmail(files, uploadHandler)
} catch (err) {
uploadHandler(err.toString())
}
}
handleImageUploadEmail(targetImgElement, index, state, imageInfo, remainingFilesCount) {
console.log(targetImgElement, index, state, imageInfo, remainingFilesCount)
}
handleImageUploadErrorEmail(errorMessage, result) {
console.log(errorMessage, result)
}
handleEditorChangeEmail(value) {
console.log(value);
this.setState({ contentEmail: value })
// setContent(value)
}
handleDropEmail(event) {
console.log(event); //Get the drop event
}
handleBlurEmail(event, editorContents) {
console.log(event, editorContents); //Get the blur event
}
imageUploadHandlerEmail(xmlHttpRequest, info, core) {
console.log(xmlHttpRequest, info, core)
}
ResizeImageEmail(files, uploadHandler) {
const uploadFile = files[0];
const img = document.createElement('img');
const canvas = document.createElement('canvas');
const reader = new FileReader();
console.log(uploadFile);
reader.onload = function (e) {
img.src = e.target.result
img.onload = function () {
let ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
const MAX_WIDTH = 200;
const MAX_HEIGHT = 100;
let width = img.width;
let height = img.height;
if (width > height) {
if (width > MAX_WIDTH) {
height *= MAX_WIDTH / width;
width = MAX_WIDTH;
}
} else {
if (height > MAX_HEIGHT) {
width *= MAX_HEIGHT / height;
height = MAX_HEIGHT;
}
}
canvas.width = width;
canvas.height = height;
ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);
canvas.toBlob(function (blob) {
uploadHandler([new File([blob], uploadFile.name)])
}, uploadFile.type, 1);
}
}
reader.readAsDataURL(uploadFile);
}
render() {
const loadingComponent = (
<div style={{ position: 'fixed', zIndex: 110, top: 0, left: 0, width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', background: 'rgba(255,255,255,0.8)' }}>
<PropagateLoader
// css={override}
size={20}
color={"#274B80"}
loading={this.state.loading}
/>
</div>
);
return (
<div style={{ flex: 1, backgroundColor: '#f8f8f8', minHeight: this.props.height }}>
<Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
<Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
{this.state.messageAlert}
</Alert>
</Snackbar>
this.state.load && (
<div>
<div className={"main-color"} style={{ height: 78, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
<Typography style={{ fontSize: '16px', color: 'white' }}>Maintenance Mode</Typography>
</div>
<div style={{ padding: 20, width: '100%' }}>
<Paper style={{ paddingTop: 10, paddingBottom: 50 }}>
<div style={{ display: 'flex', justifyContent: 'space-between', margin: 10, borderBottom: 'solid 2px #00000057', }}>
<div >
<Typography style={{ fontSize: '17px', color: '#4b4b4b', margin: 10 }}>General Setting - Maintenance Mode</Typography>
</div>
<div style={{ marginTop: 5, marginRight: 30 }}>
<button
type="button"
style={{ background: 'white' }}
onClick={() => null}
>
<div style={{ width: 102, height: 30, backgroundColor: '#fff', border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center', marginRight: 15 }}>
<span style={{ color: '#354960', fontSize: 11 }}>Batal</span>
</div>
</button>
<button
type="button"
onClick={() => null}
>
<div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#fff', fontSize: 11 }}>Simpan</span>
</div>
</button>
</div>
</div>
<div style={{ margin: 20 }}>
<div style={{ display: 'flex', marginTop: 20, width: '100%', justifyContent: 'space-between' }}>
<Typography style={{ marginTop: 13, width: '20%', color: '#656565', fontSize: 14 }}>Maintenance Mode</Typography>
<div style={{ width: '80%', paddingTop: 10 }}>
<div>
{/* <FormControlLabel
control={<IOSSwitch checked={this.state.checkedB} onChange={this.handleChange.bind(this)} name="checkedB" />} /> */}
<button
type="button"
style={{ background: '#fff', marginRight: 15 }}
onClick={() => this.setState({ isModeNonActive: true, isModeActive: false })}
>
<div style={{ width: 102, height: 30, backgroundColor: this.state.isModeNonActive ? 'green' : '#fff', border: this.state.isModeNonActive ? 'none' : 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: this.state.isModeNonActive ? 'white' : '#354960', fontSize: 11, fontWeight: 'bold' }}>Non Active</span>
</div>
</button>
<button
type="button"
onClick={() => this.setState({ isModeActive: true, isModeNonActive: false })}
>
<div style={{ width: 102, height: 30, backgroundColor: this.state.isModeActive ? 'red' : '#fff', border: this.state.isModeActive ? null : 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: this.state.isModeActive ? 'white' : '#354960', fontSize: 11, fontWeight: 'bold' }}>Active</span>
</div>
</button>
</div>
<Typography style={{ alignSelf: 'center', width: '80%', marginTop: 11, color: '#656565', fontSize: 14 }}>Dengan mengaktifkan, maka user selain admin tidak dapat melakukan akses ke dalam sistem. (Halaman maintenance terbuka)</Typography>
</div>
</div>
<Typography style={{ marginTop: 20, width: '80%', color: '#656565', fontSize: 15, fontWeight: 'bold' }}>Setting Halaman Maintenance</Typography>
<div style={{ display: 'flex', marginTop: 15, width: '100%', justifyContent: 'space-between' }}>
<Typography style={{ marginTop: 13, width: '20%', color: '#656565', fontSize: 14 }}>Headline</Typography>
<div style={{ width: '80%', margin: 0, marginTop: 10 }}>
<div>
<TextField
variant="outlined"
style={{ width: '80%' }}
inputProps={{ style: { color: '#656565', height: 0 } }}
/>
</div>
</div>
</div>
<div style={{ display: 'flex', marginTop: 20, width: '100%', justifyContent: 'space-between' }}>
<Typography style={{ marginTop: 13, width: '20%', color: '#656565', fontSize: 14 }}>Content</Typography>
<div style={{ width: '80%', margin: 0, marginTop: 10 }}>
<div>
<TextField
variant="outlined"
style={{ width: '80%' }}
multiline
maxRows={6}
inputProps={{ style: { color: '#656565' } }}
/>
</div>
</div>
</div>
<Typography style={{ marginTop: 30, width: '80%', color: '#656565', fontSize: 15, fontWeight: 'bold' }}>Setting Notifikasi Email Saat Maintenance Mode Aktif</Typography>
<div style={{ display: 'flex', marginTop: 20, width: '100%', justifyContent: 'space-between' }}>
<Typography style={{ marginTop: 13, width: '20%', color: '#656565', fontSize: 14 }}>Kirim Email Notif</Typography>
<div style={{ width: '80%', margin: 0, marginTop: 10 }}>
<div>
<button
type="button"
style={{ background: '#fff', marginRight: 15 }}
onClick={() => this.setState({ isModeActiveNo: true, isModeActiveYes: false })}
>
<div style={{ width: 102, height: 30, backgroundColor: this.state.isModeActiveNo ? 'red' : '#fff', border: this.state.isModeActiveNo ? 'none' : 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: this.state.isModeActiveNo ? 'white' : '#354960', fontSize: 11, fontWeight: 'bold' }}>Tidak</span>
</div>
</button>
<button
type="button"
onClick={() => this.setState({ isModeActiveYes: true, isModeActiveNo: false })}
>
<div style={{ width: 102, height: 30, backgroundColor: this.state.isModeActiveYes ? 'green' : '#fff', border: this.state.isModeActiveYes ? null : 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: this.state.isModeActiveYes ? 'white' : '#354960', fontSize: 11, fontWeight: 'bold' }}>Ya</span>
</div>
</button>
</div>
</div>
</div>
<div style={{ display: 'flex', marginTop: 15, width: '100%', justifyContent: 'space-between' }}>
<Typography style={{ marginTop: 13, width: '20%', color: '#656565', fontSize: 14 }}>Subject Email</Typography>
<div style={{ width: '80%', margin: 0, marginTop: 10 }}>
<div>
<TextField
variant="outlined"
style={{ width: '80%' }}
inputProps={{ style: { color: '#656565', height: 0 } }}
/>
</div>
</div>
</div>
<div style={{ display: 'flex', marginTop: 15, width: '100%', justifyContent: 'space-between' }}>
<Typography style={{ marginTop: 13, width: '20%', color: '#656565', fontSize: 14 }}>Content Email</Typography>
<div style={{ width: '80%', margin: 0, marginTop: 10 }}>
<div style={{ marginTop: 20 }}>
<SunEditor
showToolbar={true}
enableToolbar={true}
ref={this.editorRef}
width={"100%"}
setOptions={{
width: '80%',
height: 300,
buttonList: [
// default
['undo', 'redo'],
['font', 'fontSize', 'formatBlock'],
['paragraphStyle', 'blockquote'],
['fontColor', 'hiliteColor', 'textStyle'],
['bold', 'underline', 'italic', 'list', 'align'],
['table', 'link', 'image'],
['fullScreen']
]
// buttonList: buttonList.formatting // Or Array of button list, eg. [['font', 'align'], ['image']]
// Other option
}}
onChange={this.handleEditorChange.bind(this)}
setContents={this.state.contentMode}
onDrop={this.handleDrop.bind(this)}
imageUploadHandler={this.imageUploadHandler.bind(this)}
onBlur={this.handleBlur.bind(this)}
onImageUploadBefore={this.handleImageUploadBefore.bind(this)}
onImageUpload={this.handleImageUpload.bind(this)}
onImageUploadError={this.handleImageUploadError.bind(this)}
/>
</div>
</div>
</div>
<Typography style={{ marginTop: 30, width: '80%', color: '#656565', fontSize: 15, fontWeight: 'bold' }}>Setting Notifikasi Email Saat Maintenance Mode Non Aktif</Typography>
<div style={{ display: 'flex', marginTop: 20, width: '100%', justifyContent: 'space-between' }}>
<Typography style={{ marginTop: 13, width: '20%', color: '#656565', fontSize: 14 }}>Kirim Email Notif</Typography>
<div style={{ width: '80%', margin: 0, marginTop: 10 }}>
<div>
<button
type="button"
style={{ background: '#fff', marginRight: 15 }}
onClick={() => this.setState({ isModeNonActiveNo: true, isModeNonActiveYes: false })}
>
<div style={{ width: 102, height: 30, backgroundColor: this.state.isModeNonActiveNo ? 'red' : '#fff', border: this.state.isModeNonActiveNo ? 'none' : 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: this.state.isModeNonActiveNo ? 'white' : '#354960', fontSize: 11, fontWeight: 'bold' }}>Tidak</span>
</div>
</button>
<button
type="button"
onClick={() => this.setState({ isModeNonActiveYes: true, isModeNonActiveNo: false })}
>
<div style={{ width: 102, height: 30, backgroundColor: this.state.isModeNonActiveYes ? 'green' : '#fff', border: this.state.isModeNonActiveYes ? null : 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: this.state.isModeNonActiveYes ? 'white' : '#354960', fontSize: 11, fontWeight: 'bold' }}>Ya</span>
</div>
</button>
</div>
</div>
</div>
<div style={{ display: 'flex', marginTop: 15, width: '100%', justifyContent: 'space-between' }}>
<Typography style={{ marginTop: 13, width: '20%', color: '#656565', fontSize: 14 }}>Subject Email</Typography>
<div style={{ width: '80%', margin: 0, marginTop: 10 }}>
<div>
<TextField
variant="outlined"
style={{ width: '80%' }}
inputProps={{ style: { color: '#656565', height: 0 } }}
/>
</div>
</div>
</div>
<div style={{ display: 'flex', marginTop: 15, width: '100%', justifyContent: 'space-between' }}>
<Typography style={{ marginTop: 13, width: '20%', color: '#656565', fontSize: 14 }}>Content Email</Typography>
<div style={{ width: '80%', margin: 0, marginTop: 10 }}>
<div style={{ marginTop: 20 }}>
<SunEditor
showToolbar={true}
enableToolbar={true}
ref={this.editorRefEmail}
width={"100%"}
setOptions={{
width: '80%',
height: 300,
buttonList: [
// default
['undo', 'redo'],
['font', 'fontSize', 'formatBlock'],
['paragraphStyle', 'blockquote'],
['fontColor', 'hiliteColor', 'textStyle'],
['bold', 'underline', 'italic', 'list', 'align'],
['table', 'link', 'image'],
['fullScreen']
]
// buttonList: buttonList.formatting // Or Array of button list, eg. [['font', 'align'], ['image']]
// Other option
}}
onChange={this.handleEditorChangeEmail.bind(this)}
setContents={this.state.contentEmail}
onDrop={this.handleDropEmail.bind(this)}
imageUploadHandler={this.imageUploadHandlerEmail.bind(this)}
onBlur={this.handleBlurEmail.bind(this)}
onImageUploadBefore={this.handleImageUploadBeforeEmail.bind(this)}
onImageUpload={this.handleImageUploadEmail.bind(this)}
onImageUploadError={this.handleImageUploadErrorEmail.bind(this)}
/>
</div>
</div>
</div>
</div>
</Paper>
</div>
</div>
)
</div>
);
}
}
export default MaintenanceMode;
src/container/Menu/Home.js
View file @ e8048516
......@@ -235,6 +235,19 @@ export default function MiniDrawer() {
subItem: null,
collapse: false,
},
{
img: Images.masterdata,
label: 'General Setting',
path: '',
subItem: [
{
img: '',
label: 'Maintenance Mode',
path: 'maintenance-mode',
},
],
collapse: false,
},
{
img: Images.masterdata,
label: 'Master Data',
......
src/container/Menu/HomePage.js
View file @ e8048516
......@@ -70,6 +70,7 @@ class HomePage extends Component {
this.setState({ loading: true, loading2: true, loading3: true })
let userId = localStorage.getItem(Constant.USER)
api.create().getDetailUser(userId).then((response) => {
console.log(response);
if (response.data) {
if (response.ok) {
if (response.data.status === 'success') {
......
src/library/Array.js
View file @ e8048516
......@@ -71,6 +71,18 @@ const arraySide = [
path: 'beranda',
subItem: null
},
// {
// img: '',
// label: 'General Setting',
// path: '',
// subItem: [
// {
// img: '',
// label: 'Maintenance Mode',
// path: 'maintenance-mode',
// }
// ]
// },
{
img: Images.masterdata,
label: 'Master Data',
......
src/router/homeRoutes.js
View file @ e8048516
......@@ -20,6 +20,7 @@ import SubHolding from '../container/Reports/SubHolding';
import SummaryTriputra from '../container/SummaryTriputra/SummaryOfTriputra';
import MasterDataCAT from '../container/MasterData/MasterDataCAT/MasterDataCAT';
import ProgressReport from '../container/ProgressReport/ProgressReport';
import MaintenanceMode from '../container/GeneralSetting/MaintenanceMode';
import CafrmDocument from "../container/CAFRM/CafrmDocument";
import ReportCafrm from "../container/ReportCarfm/RepotrCafrm";
import Maintenance from "../container/Auth/Maintenance";
......@@ -129,6 +130,10 @@ const routes = [
path: "/home/progress-report-cafrm",
main: ReportCafrm
},
{
path: "/home/maintenance-mode",
main: MaintenanceMode
},
{
path: "*",
main: screen404
......@@ -136,7 +141,8 @@ const routes = [
{
path:"/maintenance",
main: Maintenance
}
},
];
export default routes;
\ No newline at end of file
src/router/index.js
View file @ e8048516
......@@ -16,6 +16,7 @@ import EmailVerification from "../container/Auth/EmailVerification";
import Constant from "../library/Constant";
import ShadowScreen from "../container/ShadowScreen";
import Maintenance from "../container/Auth/Maintenance";
import MaintenanceMode from "../container/GeneralSetting/MaintenanceMode";
export default function BasicExample() {
......@@ -49,6 +50,7 @@ export default function BasicExample() {
}
function PrivateRoute({ children, ...rest }) {
console.log(rest);
const logged = localStorage.getItem(Constant.TOKEN) !== null ? true : false
return (
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment