|
|
@@ -5,6 +5,67 @@ import { useHttp } from './hooks/httpReqest'
|
|
|
import { setUser , logout } from './reducers/userR';
|
|
|
import {useSelector , useDispatch} from 'react-redux'
|
|
|
|
|
|
+import AceEditor from "react-ace";
|
|
|
+import "ace-builds/src-noconflict/mode-html";
|
|
|
+import "ace-builds/src-noconflict/mode-css";
|
|
|
+import "ace-builds/src-noconflict/mode-javascript";
|
|
|
+import "ace-builds/src-noconflict/theme-terminal";
|
|
|
+import "ace-builds/src-noconflict/ext-language_tools"
|
|
|
+
|
|
|
+const Sandbox =()=>{
|
|
|
+
|
|
|
+ let codeHTML
|
|
|
+ let codeCSS
|
|
|
+ let codeJS
|
|
|
+ let title
|
|
|
+
|
|
|
+ let saveProject
|
|
|
+
|
|
|
+ const htmlCodeGenerator=(codeHTML)=>{
|
|
|
+ const htmlOutput = document.getElementById("htmlOutput")
|
|
|
+ htmlOutput.innerHTML=codeHTML
|
|
|
+ }
|
|
|
+
|
|
|
+ const cssCodeGenerator=(codeCSS)=>{
|
|
|
+ const cssOutput = document.getElementById("cssOutput")
|
|
|
+ var trueCSS = codeCSS.replace(/body/gi, '.body')
|
|
|
+ cssOutput.innerHTML=`<style type="text/css" id="styl">${trueCSS}</style>`
|
|
|
+ }
|
|
|
+
|
|
|
+ let jsnov
|
|
|
+ const runJsCode =()=>{
|
|
|
+ eval(jsnov)
|
|
|
+ }
|
|
|
+
|
|
|
+ return(
|
|
|
+ <div>
|
|
|
+ <fieldset className="title">
|
|
|
+ <legend>Title</legend>
|
|
|
+ <textarea className="nameProj" name="title">{title}</textarea>
|
|
|
+ <button className='saveProject' type='button' onClick={saveProject} >save</button>
|
|
|
+ </fieldset>
|
|
|
+ <form className="ide">
|
|
|
+ <fieldset className="dev">
|
|
|
+ <legend>codeHTML</legend>
|
|
|
+ <AceEditor className="windDev" onChange={htmlCodeGenerator} id="coderHTML" placeholder="your html code could be here ..." mode="html" value={codeHTML} theme="terminal" name="coderHTML" fontSize={14} showPrintMargin={true} showGutter={true} highlightActiveLine={true} setOptions={{ enableBasicAutocompletion: true, enableLiveAutocompletion: true, enableSnippets: true, showLineNumbers: true,tabSize: 2,}} style={{height:"380px",width:"100%"}}/>,
|
|
|
+ </fieldset>
|
|
|
+ <fieldset className="dev">
|
|
|
+ <legend>codeCSS</legend>
|
|
|
+ <AceEditor className="windDev" onChange={cssCodeGenerator} placeholder="your css code could be here ..." mode="css" value={codeCSS} theme="terminal" name="blah2" fontSize={14} showPrintMargin={true} showGutter={true} highlightActiveLine={true} setOptions={{ enableBasicAutocompletion: true, enableLiveAutocompletion: true, enableSnippets: true, showLineNumbers: true,tabSize: 2,}} style={{height:"380px",width:"100%"}}/>,
|
|
|
+ </fieldset><fieldset className="dev">
|
|
|
+ <legend>codeJS</legend>
|
|
|
+ <AceEditor className="windDev" onChange={(cods)=>{jsnov=cods}} placeholder="your js code could be here ..." mode="javascript" theme="terminal" name="blah2" fontSize={14} showPrintMargin={true} showGutter={true} highlightActiveLine={true} value={codeJS} setOptions={{ enableBasicAutocompletion: true, enableLiveAutocompletion: true, enableSnippets: true, showLineNumbers: true,tabSize: 2,}} style={{height:"380px",width:"100%"}}/>,
|
|
|
+ <a className="legend3" onClick={runJsCode}>run script</a>
|
|
|
+ </fieldset>
|
|
|
+ </form>
|
|
|
+ <fieldset className="body" style={{backgroundColor:"#2f0000"} }>
|
|
|
+ <legend>outPut</legend>
|
|
|
+ <div id="htmlOutput"/>
|
|
|
+ <div id="cssOutput"/>
|
|
|
+ </fieldset>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+}
|
|
|
|
|
|
const AuthorizationLogin = () =>{
|
|
|
const [email,setEmail]=useState('')
|
|
|
@@ -131,13 +192,14 @@ const AuthorizationRegistration = () =>{
|
|
|
{(emailWrong&&emailError)&& <p style={{color:'orange'}}>{emailError}</p>}
|
|
|
{(passwordWrong&&passwordError) && <p style={{color:'orange'}}>{passwordError}</p>}
|
|
|
</form>
|
|
|
- <a href="/" className="legend2">Login</a>
|
|
|
+ <a href="/login" className="legend2">Login</a>
|
|
|
</fieldset>
|
|
|
)
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
+
|
|
|
const App =()=>{
|
|
|
const isAuthorization = useSelector(state => state.user.isAuth)
|
|
|
const dispatch =useDispatch()
|
|
|
@@ -158,25 +220,24 @@ const App =()=>{
|
|
|
useEffect(()=>{
|
|
|
dispatch(authorization())
|
|
|
},[])
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
return(
|
|
|
<BrowserRouter>
|
|
|
<div className="navBar">
|
|
|
<h1 className="logo"><a href="/">SandBox</a></h1>
|
|
|
<a href="/Project" className="links">Project</a>
|
|
|
<a href="/my_project" className="links">My project</a>
|
|
|
- <a href="/sandbox" className="links">Sandbox</a>
|
|
|
+ <a href="/" className="links">Sandbox</a>
|
|
|
{isAuthorization && <a onClick={()=>dispatch(logout())} className="links" style={{cursor:"pointer"}}>Exit</a>}
|
|
|
</div>
|
|
|
{!isAuthorization &&
|
|
|
<Switch>
|
|
|
- <Route path="/" component={AuthorizationLogin} exact/>
|
|
|
+ <Route path="/login" component={AuthorizationLogin}/>
|
|
|
<Route path="/registration" component={AuthorizationRegistration}/>
|
|
|
</Switch>
|
|
|
}
|
|
|
+ <Switch>
|
|
|
+ <Route path="/" component={Sandbox} exact/>
|
|
|
+ </Switch>
|
|
|
</BrowserRouter>)
|
|
|
}
|
|
|
|
