Commit inicial

view/index.js

@@ -0,0 +1,118 @@
+
+
+let input = document.querySelector('#input');
+
+let editor = new SimpleMDE({ element: input });
+
+let output = document.querySelector('#output');
+
+let converter = new showdown.Converter();
+
+function render () {
+    output.innerHTML = converter.makeHtml(editor.value());
+    localStorage.setItem('save', editor.value())
+}
+
+editor.codemirror.on("change", render);
+
+editor.value(localStorage.getItem('save'));
+
+let submitButton = document.querySelector('#submit-button');
+let answerInput = document.querySelector('#answer-input');
+let resultStatus = document.querySelector('#result-status');
+let inputOutputLog = document.querySelector('#io-log');
+
+let wrongResultInfo = document.querySelector('#wrong-result-info');
+
+let wrongResultTestInput = document.querySelector('#test-input');
+let wrongResultExpectedOutput = document.querySelector('#test-output');
+let wrongResultProgramOutput = document.querySelector('#wrong-output');
+
+
+function errorResultStatus(textContent) {
+    resultStatus.style.color = 'white';
+    resultStatus.textContent = textContent;
+    resultStatus.style.backgroundColor = 'red';
+    resultStatus.style.border = '1px solid darkred';
+
+}
+
+submitButton.onclick = async function () {
+
+    wrongResultInfo.style.display = 'none';
+
+    submitButton.disabled = true;
+    answerInput.disabled = true;
+    resultStatus.style.color = 'black';
+    resultStatus.textContent = 'Aguardando servidor...'
+    resultStatus.style.backgroundColor = 'rgb(255 238 7 / 37%)';
+    resultStatus.style.border = '1px solid #695e0066';
+
+    let form = new FormData(document.querySelector('form'));
+
+    form.append("answer", answerInput.value);
+
+    let reply = await fetch('http://localhost:8001/answer', 
+        {
+            method: 'POST', 
+            mode: 'no-cors', 
+            body: form,
+        }
+    );
+
+    submitButton.disabled = false;
+    answerInput.disabled = false;
+    
+    if (!reply.ok)
+        return;
+
+    let replyJson = await reply.json();
+
+    // caso algo de anormal aconteça no servidor
+    if (reply.status != 200) {
+        errorResultStatus('status code: ' + reply.status);
+        return;
+    }
+
+    console.log(replyJson);
+    switch (replyJson.status) {
+        case 'comp-exec':
+            errorResultStatus('Erro de compilação ou execução');
+            inputOutputLog.textContent = replyJson.message;
+            return;
+        case 'wrong':
+            errorResultStatus('Incorreto');
+
+            wrongResultInfo.style.display = 'block';
+
+            wrongResultTestInput.textContent = replyJson.input;
+            wrongResultExpectedOutput.textContent = replyJson.expected;
+            wrongResultProgramOutput.textContent = replyJson.output;
+
+            inputOutputLog.textContent = replyJson.message;
+            return;
+        case 'pass':
+            resultStatus.textContent = 'Successo';
+            resultStatus.style.color = 'white';
+            resultStatus.style.backgroundColor = 'green';
+            resultStatus.style.border = '1px solid darkgreen';
+
+            inputOutputLog.textContent = replyJson.output;
+            return;
+    }
+
+
+}
+
+hotkeys.filter = function(){
+  return true;
+}
+
+hotkeys('ctrl+s', (event) => {
+    alert('salvo!')
+    event.preventDefault();
+} );
+
+hotkeys('ctrl+enter', () => {
+    submitButton.click();
+} );