Adding TextIDE Component

client/app/components/Pages/CodeEditor.js

@@ -0,0 +1,52 @@
+import React, { Component } from 'react'
+import TextIDE from "../common/TextIDE";
+import sampleFunction from '../common/TextIDE/sampleFunction';
+
+export default class CodeEditor extends Component {
+    render() {
+        return (
+            <div >
+                <TextIDE
+                    width= "600px"
+                    height= "600px"
+                    languages = {['C','C++','Python 3','Java']}
+                    defaultCode = {
+                        {
+                            'C++':'/* Enter your code here... */',
+                            'Python 3':'# Enter your code here...',
+                        }
+                    }
+                    // fontSize = '12pt'
+                    // fontSizes = {['12pt','14pt','16pt']}
+                    // theme = 'vs'
+                    // readOnly = {true}
+                    // showToolbar= {false}
+                    // showCustomInput = {true}
+                    // showRunButton = {true}
+                    // showSubmitButton = {false}
+                    runFunction = {sampleFunction}      //MANDATORY IF Run Button is shown..
+                    submitFunction = {sampleFunction}   //MANDATORY IF Submit Button is shown..
+                />
+            </div>
+
+        )
+    }
+}
+
+/*
+DEFAULT VALUES FOR <TextIDE></TextIDE>
+    width= "700px"
+    height= "600px"
+    languages = ['C','C++','Python 2','Python 3','Java']
+    defaultCode = '' for all languages defined above
+    fontSize = '12pt'
+    fontSizes = {['12pt','14pt','16pt']}
+    theme = 'vs'
+    readOnly = {false}
+    showToolbar= {true}
+    showCustomInput = {true}
+    showRunButton = {true}
+    showSubmitButton = {true}
+    runFunction = NO DEFAULTS    
+    submitFunction = NO DEFAULTS 
+*/

client/app/components/common/TextIDE/RunButton.js

@@ -0,0 +1,52 @@
+import React,{Component} from 'react';
+import {Button} from 'reactstrap';
+
+
+class RunCodeButton extends Component {
+
+    constructor(props){
+        super(props);
+
+        this.submitCode = this.submitCode.bind(this);
+    }
+
+    submitCode(event) {
+        event.preventDefault()
+
+        const codeText = this.props.editor.getValue()        
+        const codeLanguage = this.props.language.toLowerCase()
+        const isCustomInput = this.props.isCustomInput
+        var stdin = ''
+
+        if(isCustomInput){
+            stdin = document.getElementById('customInput').value
+        }
+
+        var data = {
+            content: codeText,
+            language: codeLanguage,
+            customInput: isCustomInput,
+            stdin: stdin,
+            submit: false
+        }
+        if(this.props.customFunction === undefined){
+            console.error('No Run Function is defined for the TextIDE Component')
+        }
+        else {
+            this.props.customFunction(data) 
+        }
+    }
+
+    render(){
+        return (
+            <div>
+                <Button className="btn btn-outline-primary" onClick= {this.submitCode} style={{color:'white'}}>
+                    Run Code
+                </Button>
+            </div>
+        )
+    }
+
+}
+
+export default RunCodeButton;

client/app/components/common/TextIDE/SubmitButton.js

@@ -0,0 +1,68 @@
+import React,{Component} from 'react'
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'
+
+class SubmitCodeButton extends Component {
+
+    constructor(props){
+        super(props);
+        this.state = {
+            showConfirmation: false,
+        }
+        this.submitCode = this.submitCode.bind(this);
+        this.toggleConfirmation = this.toggleConfirmation.bind(this);
+    }
+
+    toggleConfirmation(){
+        this.setState(prevState => ({
+            showConfirmation: !prevState.showConfirmation
+        }))
+    }
+
+    submitCode(event) {
+        event.preventDefault()
+        this.toggleConfirmation()
+
+        const codeText = this.props.editor.getValue()        
+        const codeLanguage = this.props.language.toLowerCase()
+
+        var data = {
+            content: codeText,
+            language: codeLanguage,
+            customInput: false,
+            stdin: '',
+            submit: true
+        }
+
+        if(this.props.customFunction === undefined){
+            console.error('No Submit Function is defined for the TextIDE Component')
+        }
+        else {
+            this.props.customFunction(data) 
+        }
+    }
+
+    render(){
+        return (
+
+            <div>
+                <Button className="btn btn-success" onClick= {this.toggleConfirmation} >
+                    Submit
+                </Button>
+
+                <Modal isOpen={this.state.showConfirmation} toggle={this.toggleConfirmation}>
+                    <ModalHeader toggle={this.toggleConfirmation}>Confirm to  Submit</ModalHeader>
+                    <ModalBody>
+                        Are you sure you want to submit?
+                    </ModalBody>
+                    <ModalFooter>
+                        <Button color="primary" onClick={this.submitCode}>Submit</Button>
+                        <Button color="secondary" onClick={this.toggleConfirmation}>Cancel</Button>
+                    </ModalFooter>
+                </Modal>
+            </div>
+        )
+    }
+
+}
+
+export default SubmitCodeButton;