Merge pull request #20 from ashirrwad/ui

Tutorial

Author: everythingfunctional

Backend/Pipfile

@@ -7,6 +7,6 @@ name = "pypi"
 flask = "*"
 docker = "*"
 flask-cors = "*"
+pyyaml = "*"
 
 [dev-packages]
-

Backend/app.py

@@ -4,7 +4,8 @@
 import docker
 import os
 import tarfile
-
+import yaml
+import json
 app = Flask(__name__)
 
 cors = CORS(app)
@@ -15,13 +16,22 @@
 client = docker.from_env()
 container = client.containers.run("playground-small", tty=True, detach=True, network_disabled=True, mem_limit="16g")
 
+#Converting tutorial YAML
+with open('tutorial.yml', 'r') as file:
+    configuration = yaml.safe_load(file)
+
+with open('../frontend/src/tutorial.json', 'w+') as json_file:
+    json.dump(configuration, json_file)
+
+
 # Editing the file with code inside editor
 def edit_file(code, input=""):
     Fortran_file = open("./File.f90", "w+")
     Fortran_file.write(code)
+    Fortran_file.close()
     program_input = open("./program_input.txt", "w+")
     program_input.write(input)
-
+    program_input.close()
 
 # Copying file with fortran code to container
 def copy_to(src, dst, container):
@@ -64,6 +74,10 @@ def run_code():
     edit_file(data["code"], data["programInput"])
     code_result = execute_code_in_container()
     if code_result.exit_code == 0:
+        if code_result.output[0] == None:
+            output = jsonify({"executed": ""})
+            return output, 202
+
         print(code_result.output[0].decode())
         output = jsonify({"executed": code_result.output[0].decode()})
     else:

Backend/tutorial.yml

@@ -11,7 +11,7 @@ import Card from 'react-bootstrap/Card'
 import RunCode from './run.png'
 import ResetCode from './reset.png'
 import InputBox from './InputBox';
-
+import TutorialCard from './TutorialCard';
 
 function NewlineText(props) {
   const text = props.text;
@@ -24,6 +24,7 @@ function App() {
   const [output, setOutput] = useState('')//State to store output
   const [isLoading, setIsLoading] = useState(false);//Loading animations
   const [ input, setInput ] = useState('')
+  const [inputOn, setinputOn] = useState(false)
 
 
   const handleInputChange = (e) => {
@@ -32,7 +33,10 @@ function App() {
     console.log(input)
   };
 
-
+  const handleInputBox = (e) =>{
+    {inputOn ? setinputOn(false) : setinputOn(true)}
+    //setinputOn(true)
+  }
   //POST request to Flask server
   const handleClick = async () => {
 
@@ -55,7 +59,7 @@ function App() {
       <div style={{paddingBottom: "0.5rem"}}><Navigationbar/></div> 
       <div className='code-wrapper'>
       {/*Editor Component*/}
-      <Editor value={text} onChange={value => setText(value)}/>
+      <Editor value={text} height={""} width={"50%"} onChange={value => setText(value)}/>
 
       {/* Buttons */}
       <div className='options'><Button onClick={resetCode} ><img src={ResetCode} /></Button>
@@ -81,7 +85,7 @@ function App() {
       {/*Card component to display output*/}
       <div className='terminal'>
 
-          <Card style={{width:'100%'}}>
+          <Card style={{width:'100%'}} className="overflow-auto">
             <Card.Header>Terminal</Card.Header>
             <Card.Body>
 
@@ -93,8 +97,13 @@ function App() {
 
             </Card.Body>
           </Card>
+
+          <TutorialCard />
           {/* Input Box to provide input for program */}
-          <InputBox value={input} onChange={handleInputChange}/>
+          {/*<InputBox value={input} onChange={handleInputChange}/> */}
+          <Button onClick={handleInputBox}>INPUT</Button>
+          {inputOn ? <InputBox value={input} onChange={handleInputChange}/> : null}
+          
       </div>
 
       </div>

frontend/src/App.js

@@ -17,7 +17,10 @@ export default function Editor(props){
     name="UNIQUE_ID_OF_DIV"
     editorProps={{ $blockScrolling: true }}
     value={props.value}
-    width="50%"
-    height=""
+    width={props.width}
+    height={props.height}
+    readOnly={props.snippet}
+    showGutter={props.gutter}
+    highlightActiveLine={props.highlight}
   />)
 }

frontend/src/Editor.js

@@ -4,7 +4,7 @@ import Nav from  'react-bootstrap/Nav'
 import Container from 'react-bootstrap/Container'
 export default function Navigationbar(){
     return(
-                <>
+                
 
         <Navbar bg="dark" variant="dark">
             <Container>
@@ -19,10 +19,10 @@ export default function Navigationbar(){
             Fortran Playground
             </Navbar.Brand>
             </Container>
-            <Nav.Link href="https://fortran-lang.org/learn/" target="_blank" rel="noopener noreferrer" ><span className="linkText">Learn</span></Nav.Link>
-        <Nav.Link href="https://fortran-lang.org/" target="_blank" rel="noopener noreferrer" ><span className="linkText">Home</span></Nav.Link>
+            <Nav.Link href="https://fortran-lang.org/learn/" target="_blank" rel="noopener noreferrer" ><span className="linkText">Learn</span></Nav.Link>&nbsp;
+        <Nav.Link href="https://fortran-lang.org/" target="_blank" rel="noopener noreferrer" ><span className="linkText">Home</span></Nav.Link>&nbsp;
         </Navbar>
 
-        </>
+        
     )
 }

frontend/src/Navbar.js

@@ -0,0 +1,51 @@
+import Card from 'react-bootstrap/Card';
+import Editor from './Editor';
+import Tutorial from './tutorial.json'
+import { useState } from 'react';
+import Button from 'react-bootstrap/Button'
+
+
+function NewlineText(props) {
+  const text = props.text;
+  return <div className='output-formmating'>{text}</div>;
+}
+
+
+function TutorialCard(props) {
+  
+  const [exercise, setExercise] = useState(0)
+  const goRight = () => {
+    if(exercise<Tutorial.length - 1){
+    setExercise(exercise + 1)
+    }
+  }
+  const goLeft = () => {
+    if(exercise>0){
+        setExercise(exercise - 1)
+    }
+  }
+  return (
+    <Card style={{ width: '100%', height: '100%' }} className="overflow-auto">
+      
+      <Card.Body>
+        <Card.Title>{Tutorial[exercise].title}</Card.Title>
+        <Editor   highlight={true}
+                  value={Tutorial[exercise].code}
+                  snippet={false}
+                  gutter={false}
+                  height={"50%"}
+                  width={"100%"}/> 
+        <Card.Text>
+          
+          
+          <NewlineText text={Tutorial[exercise].content} />
+        </Card.Text>
+        
+        <Button onClick={goLeft} >Prev</Button>&nbsp;
+        <Button onClick={goRight}>Next</Button>
+      </Card.Body>
+    </Card>
+  );
+}
+
+export default TutorialCard;

frontend/src/TutorialCard.js

@@ -0,0 +1 @@
+[{"title": "Hello World", "content": "Let us start with our first Hello World program", "code": "program hello\r\n  ! This is a comment line; it is ignored by the compiler\r\n  print *, 'Hello, World!'\r\nend program hello\r\n"}, {"title": "Declaring variables", "content": "Variable names must start with a letter and can consist of letters, numbers and underscores. In the following example we declare a variable for each of the built-in types.", "code": "program variables\r\n  implicit none\r\n\r\n  integer :: amount\r\n  real :: pi\r\n  complex :: frequency\r\n  character :: initial\r\n  logical :: isOkay\r\n\r\nend program variables"}, {"title": "Declaring variables", "content": "Once we have declared a variable, we can assign and reassign values to it using the assignment operator =.", "code": "program variables\r\n  implicit none\r\n\r\n  integer :: amount\r\n  real :: pi\r\n  complex :: frequency\r\n  character :: initial\r\n  logical :: isOkay\r\n\r\n  amount = 10\r\n  pi = 3.1415927\r\n  frequency = (1.0, -0.5)\r\n  initial = 'A'\r\n  isOkay = .false.\r\nend program variables"}, {"title": "Standard output", "content": "We can use the print statement introduced earlier to print variable values to stdout", "code": "program variables\r\n  implicit none\r\n\r\n  integer :: amount\r\n  real :: pi\r\n  complex :: frequency\r\n  character :: initial\r\n  logical :: isOkay\r\n\r\n  amount = 10\r\n  pi = 3.1415927\r\n  frequency = (1.0, -0.5)\r\n  initial = 'A'\r\n  isOkay = .false.\r\n  \r\n  print *, 'The value of amount (integer) is: ', amount\r\n  print *, 'The value of pi (real) is: ', pi\r\n\r\nend program variables"}, {"title": "Standard input", "content": "In a similar way, we can read values from the command window using the read statement. Enter values in the box below.", "code": "program read_value\r\n  implicit none\r\n  integer :: age\r\n\r\n  print *, 'Please enter your age: '\r\n  read(*,*) age\r\n\r\n  print *, 'Your age is: ', age\r\n\r\nend program read_value"}]