Commit inicial
This commit is contained in:
commit
6cbeeee2ce
14 changed files with 622 additions and 0 deletions
112
view/index.css
Normal file
112
view/index.css
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
|
||||
html, body {
|
||||
height: 100%;
|
||||
/* margin: 0; */
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Helvetica, Consolas,"Liberation Mono",Courier,monospace;
|
||||
caret-color: rgb(55, 53, 47);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.space-between {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
gap: 20px;;
|
||||
}
|
||||
|
||||
nav {
|
||||
/* margin: 10px; */
|
||||
}
|
||||
|
||||
h1 {
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #5656d7;
|
||||
text-underline-offset: 0.2rem;
|
||||
|
||||
&:hover {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
border: 1px solid #eee;
|
||||
background-color: #f6f8fa;
|
||||
padding: 10px;
|
||||
border-radius: 20 20;
|
||||
/* width: 90%; */
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
|
||||
}
|
||||
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.m-10 {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: none;
|
||||
min-height: 90%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#answer-input {
|
||||
height: 10vw;
|
||||
}
|
||||
|
||||
#edit-area {
|
||||
resize: none;
|
||||
height: 97%;
|
||||
max-height: 97%;
|
||||
width: 45%;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
/* button { */
|
||||
/* } */
|
||||
|
||||
#output-area {
|
||||
border: 1px solid #eee;
|
||||
/* overflow-y: scroll; */
|
||||
height: auto;
|
||||
max-height: 92%;
|
||||
width: 55%;
|
||||
padding: 10px;
|
||||
|
||||
}
|
||||
|
||||
#result-status-bar {
|
||||
position: relative;
|
||||
opacity: .6;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-o-user-select: none;
|
||||
user-select: none;
|
||||
padding: 20px;
|
||||
margin-top: 15px;
|
||||
border-top: 1px solid #bbb;
|
||||
border-left: 1px solid #bbb;
|
||||
border-right: 1px solid #bbb;
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
caret-color: 'black';
|
||||
}
|
||||
|
||||
|
||||
#result-status {
|
||||
padding: 7px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
13
view/index.html
Normal file
13
view/index.html
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
|
||||
<!DOCTYPE html>
|
||||
<html lang="pt_br">
|
||||
<head>
|
||||
<title>ambiente</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="index.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<h1>ambiente</h1>
|
||||
</body>
|
||||
</html>
|
||||
118
view/index.js
Normal file
118
view/index.js
Normal file
|
|
@ -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();
|
||||
} );
|
||||
72
view/problem.html
Normal file
72
view/problem.html
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="pt-br">
|
||||
<head>
|
||||
<title>ambiente</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="index.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
|
||||
<script src="https://unpkg.com/hotkeys-js/dist/hotkeys.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="space-between">
|
||||
<h3>Editando: Problema1</h3>
|
||||
<div class="space-between">
|
||||
<h3>Salvar</h3>
|
||||
<h3>Retornar</h3>
|
||||
</div>
|
||||
</nav>
|
||||
<main>
|
||||
<section id="edit-area" class="m-10">
|
||||
<textarea id="input" class="area"># Pergunta #1
|
||||
Dado os números inteiros _n_ e _r_, retorne a soma de todos os números pertencentes ao conjunto do inteiros entre _n_ e _r_, sendo ambos _n_ e _r_ inclusivos.
|
||||
|
||||
### Entrada:
|
||||
```
|
||||
1 10
|
||||
```
|
||||
### Saída esperada:
|
||||
```
|
||||
55
|
||||
```
|
||||
|
||||
</textarea>
|
||||
<button>finalizar</button>
|
||||
</section>
|
||||
<section id="output-area" class="m-10">
|
||||
<div id="output">
|
||||
</div>
|
||||
<hr>
|
||||
<div style="margin: 40px 0px 40px 0px;">
|
||||
<form>
|
||||
<label to="language">lingua:</label>
|
||||
<select name="language">
|
||||
<option value="python">python</option>
|
||||
<option value="go">go</option>
|
||||
</select>
|
||||
<label to="answer">resposta:</label>
|
||||
<textarea name="answer" id="answer-input"></textarea>
|
||||
<button id='submit-button' type="button">enviar</button>
|
||||
</form>
|
||||
<div id="result-status-bar">
|
||||
<p style="margin: 0">Resultado: <span id="result-status">Não enviado</span></p>
|
||||
<div style="display: none;" id="wrong-result-info">
|
||||
<hr>
|
||||
<p style="margin: 0">Entrada:</p>
|
||||
<pre id="test-input" style="overflow-x: auto; margin: 0;"></pre>
|
||||
<p style="margin: 0">Saída esperada:</p>
|
||||
<pre id="test-output" style="overflow-x: auto; margin: 0;"></pre>
|
||||
<p style="margin: 0">Saída do programa:</p>
|
||||
<pre id="wrong-output" style="overflow-x: auto; margin: 0;"></pre>
|
||||
</div>
|
||||
</div>
|
||||
<pre id="io-log" style="overflow-x: auto; margin: 0;">
|
||||
</pre>
|
||||
</div>
|
||||
</section>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js"></script>
|
||||
<script src="index.js"></script>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue