Hail javascript

Author: blueedgetechno

lib/view/actions.js

@@ -7,6 +7,7 @@ export default class Actions extends React.PureComponent {
     super(props);
     this.state = {
       prob: props.prob,
+      outputs: props.outputs,
       tests: props.tests,
       runexamples: props.runexamples
     }
@@ -15,12 +16,14 @@ export default class Actions extends React.PureComponent {
   componentWillReceiveProps(nextProps) {
     this.setState({
       prob: nextProps.prob,
+      outputs: nextProps.outputs,
       tests: nextProps.tests,
       runexamples: nextProps.runexamples
     });
   }
 
   change(ele){
+    if(ele==null) return
     ele.target.classList.toggle("icon-chevron-right")
     ele.target.classList.toggle("icon-chevron-down")
     var val = ele.target.parentElement.nextElementSibling.style.display
@@ -33,6 +36,7 @@ export default class Actions extends React.PureComponent {
 
   togglesubmit(ele){
     var parent = ele.target.parentElement
+    if(parent==null) return
     for (var i = 1; i < parent.children.length; i++) {
       var child = parent.children[i]
       var val = child.style.display
@@ -44,6 +48,22 @@ export default class Actions extends React.PureComponent {
     }
   }
 
+  toggleverdict(ele){
+    var sb = ele.target.nextElementSibling
+    if(sb==null) return
+    if(sb.classList[0]!="comparision" && sb.classList[0]!="errordetails") return
+    var val = sb.style.display
+    if(val!="none"){
+      sb.style.display = "none"
+    }else{
+      if(sb.classList[0]=="comparision"){
+        sb.style.display = "flex"
+      }else{
+        sb.style.display = "block"
+      }
+    }
+  }
+
   render(){
     return (
       <div className="actions">
@@ -56,9 +76,26 @@ export default class Actions extends React.PureComponent {
             </div>
             <div className="down" style={{display: "none"}}>
               {this.state.tests && this.state.tests.map(test=>{
+                if(test.error){
+                  if(test.stdout.length>0 && test.stderr.length>0) moredetails = <div className="errordetails"> <pre>{test.stdout}<br/>{test.stderr}</pre> </div>
+                  else if(test.stdout.length>0 || test.stderr.length>0) moredetails = <div className="errordetails"> <pre>{test.stdout}{test.stderr}</pre> </div>
+                  else moredetails = null
+                }else{
+                  if(test.icon=="x") moredetails = (
+                    <div className="comparision" style={{display: "flex"}}>
+                      <div className="outbox">
+                        <pre>expected<br/>{this.state.outputs[test.n]}</pre>
+                      </div>
+                      <div className="outbox">
+                        <pre>output<br/>{test.stdout}</pre>
+                      </div>
+                    </div>
+                  )
+                  else moredetails = null
+                }
                 return(<div className="verdict">
-                  <div className="show-verdict"><span>example {test.n+1}</span> <i className={"icon-"+test.icon}></i></div>
-                  <div className="errordetails"> <pre>{test.stderr}</pre> </div>
+                  <div className="show-verdict" onClick={this.toggleverdict}><span>example {test.n+1}</span> <i className={"icon-"+test.icon}></i></div>
+                  {moredetails}
                 </div>)
               })}
             </div>

lib/view/problems.js

@@ -330,6 +330,7 @@ export default class Problems extends React.PureComponent {
   }
 
   hide(ele){
+    if(ele==null) return
     var val = ele.target.parentElement.nextElementSibling.style.display
     if(val=="flex"){
       ele.target.parentElement.nextElementSibling.style.display = "none";
@@ -357,6 +358,7 @@ export default class Problems extends React.PureComponent {
         </div>
         {this.state.probs.length ? <Actions
           prob={this.state.probs[this.state.curr]}
+          outputs={this.state.alloutputs[this.state.probs[this.state.curr].index]}
           tests={this.state.allverdicts[this.state.probs[this.state.curr].index]}
           runexamples ={this.runexamples.bind(this)}
          /> : null }

styles/codeblue.less

@@ -349,14 +349,37 @@
 }
 
 .errordetails{
+  display: block;
   pre{
     font-weight: bold;
     color: #b3b3b3;
   }
 }
 
+.comparision{
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 5px;
+}
+
+.outbox{
+  width: 50%;
+  margin: 1px;
+  pre{
+    height: 100%;
+    color: #ff6262;
+  }
+}
+
+.outbox:first-child{
+  pre{
+    color: #42ee48;
+  }
+}
+
 .show-verdict {
   display: flex;
+  cursor: pointer;
   flex-direction: row;
   justify-content: space-between;
   padding: 5px;