Skip to content

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

Update Maintenance Mode

parent 9a8f5dd0
Show whitespace changes
Inline Side-by-side
Showing with 116 additions and 14 deletions
src/container/GeneralSetting/MaintenanceMode.js
View file @ 5b8139c4
...@@ -73,6 +73,7 @@ class MaintenanceMode extends Component { ...@@ -73,6 +73,7 @@ class MaintenanceMode extends Component {
super(props) super(props)
this.editorRef = React.createRef(); this.editorRef = React.createRef();
this.editorRefEmail = React.createRef(); this.editorRefEmail = React.createRef();
this.editorRefContent = React.createRef();
// this.handleChange = this.handleChange.bind(this) // this.handleChange = this.handleChange.bind(this)
this.state = { this.state = {
load: false, load: false,
...@@ -81,7 +82,7 @@ class MaintenanceMode extends Component { ...@@ -81,7 +82,7 @@ class MaintenanceMode extends Component {
mailcontentModeNonActive: "", mailcontentModeNonActive: "",
checkedB: true, checkedB: true,
headline: '', headline: '',
maintenanceContent: '', maintenanceContent: "",
subjectMailActive: '', subjectMailActive: '',
subjectMailNonActive: '', subjectMailNonActive: '',
maintenanceID: null, maintenanceID: null,
...@@ -464,6 +465,88 @@ class MaintenanceMode extends Component { ...@@ -464,6 +465,88 @@ class MaintenanceMode extends Component {
reader.readAsDataURL(uploadFile); reader.readAsDataURL(uploadFile);
} }
handleImageUploadBeforeContent(files, info, uploadHandler) {
// uploadHandler is a function
console.log(files, info, uploadHandler)
try {
this.ResizeImage(files, uploadHandler)
} catch (err) {
uploadHandler(err.toString())
}
}
handleImageUploadContent(targetImgElement, index, state, imageInfo, remainingFilesCount) {
console.log(targetImgElement, index, state, imageInfo, remainingFilesCount)
}
handleImageUploadErrorContent(errorMessage, result) {
console.log(errorMessage, result)
}
handleEditorChangeContent(value) {
// console.log(value);
this.setState({ maintenanceContent: value })
// setContent(value)
}
handleDropContent(event) {
console.log(event); //Get the drop event
}
handleBlurContent(event, editorContents) {
console.log(event, editorContents); //Get the blur event
}
imageUploadHandlerContent(xmlHttpRequest, info, core) {
console.log(xmlHttpRequest, info, core)
}
ResizeImageContent(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() { render() {
const loadingComponent = ( const loadingComponent = (
...@@ -490,7 +573,7 @@ class MaintenanceMode extends Component { ...@@ -490,7 +573,7 @@ class MaintenanceMode extends Component {
<Typography style={{ fontSize: '16px', color: 'white' }}>Maintenance Mode</Typography> <Typography style={{ fontSize: '16px', color: 'white' }}>Maintenance Mode</Typography>
</div> </div>
<div style={{ padding: 20, width: '100%' }}> <div style={{ padding: 20, width: '100%' }}>
<Paper style={{ paddingTop: 10, paddingBottom: 50}}> <Paper style={{ paddingTop: 10, paddingBottom: 50 }}>
<div style={{ display: 'flex', justifyContent: 'space-between', margin: 10, borderBottom: 'solid 2px #00000057', height: '100%' }}> <div style={{ display: 'flex', justifyContent: 'space-between', margin: 10, borderBottom: 'solid 2px #00000057', height: '100%' }}>
<div > <div >
<Typography style={{ fontSize: '17px', color: '#4b4b4b', margin: 10 }}>General Setting - Maintenance Mode</Typography> <Typography style={{ fontSize: '17px', color: '#4b4b4b', margin: 10 }}>General Setting - Maintenance Mode</Typography>
...@@ -560,20 +643,39 @@ class MaintenanceMode extends Component { ...@@ -560,20 +643,39 @@ class MaintenanceMode extends Component {
</div> </div>
</div> </div>
</div> </div>
<div style={{ display: 'flex', marginTop: 20, width: '100%', justifyContent: 'space-between' }}> <div style={{ display: 'flex', marginTop: 15, width: '100%', justifyContent: 'space-between' }}>
<Typography style={{ marginTop: 13, width: '20%', color: '#656565', fontSize: 14 }}>Content</Typography> <Typography style={{ marginTop: 13, width: '20%', color: '#656565', fontSize: 14 }}>Content</Typography>
<div style={{ width: '80%', margin: 0, marginTop: 10 }}> <div style={{ width: '80%', margin: 0, marginTop: 10 }}>
<div> <div style={{ marginTop: 20 }}>
<TextField <SunEditor
variant="outlined" showToolbar={true}
id="maintenanceContent" enableToolbar={true}
name="maintenanceContent" ref={this.editorRefContent}
onChange={(e) => this.handleChange(e, '')} width={"100%"}
value={this.state.maintenanceContent} setOptions={{
style={{ width: '80%' }} width: '80%',
multiline height: 300,
maxRows={4} buttonList: [
inputProps={{ style: { color: '#656565' } }} // 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.handleEditorChangeContent.bind(this)}
setContents={this.state.maintenanceContent}
onDrop={this.handleDropContent.bind(this)}
imageUploadHandler={this.imageUploadHandlerContent.bind(this)}
onBlur={this.handleBlurContent.bind(this)}
onImageUploadBefore={this.handleImageUploadBeforeContent.bind(this)}
onImageUpload={this.handleImageUploadContent.bind(this)}
onImageUploadError={this.handleImageUploadErrorContent.bind(this)}
/> />
</div> </div>
</div> </div>
......
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