diff options
| author | Jonas Kohl | 2024-11-07 12:29:04 +0100 |
|---|---|---|
| committer | Jonas Kohl | 2024-11-07 12:29:04 +0100 |
| commit | a7a1a67c0b132ea2a1349b01ddf41716661ab326 (patch) | |
| tree | f43edebb1b3646d03b87919ca366db79d4524bf9 /public/index.php | |
| parent | 557bb0c775f880ac7de99b9608045ff206614ed8 (diff) | |
UI tweaks
Diffstat (limited to 'public/index.php')
| -rw-r--r-- | public/index.php | 136 |
1 files changed, 79 insertions, 57 deletions
diff --git a/public/index.php b/public/index.php index dc421b9..1fb9479 100644 --- a/public/index.php +++ b/public/index.php @@ -47,6 +47,10 @@ if (isset($_POST["code"]) && strlen($_POST["code"]) <= 16383) { if (is_string($resultStr)) { $result = json_decode($resultStr, true); } + + header("Content-Type: application/json"); + echo json_encode($result); + exit; } ?> @@ -59,77 +63,95 @@ if (isset($_POST["code"]) && strlen($_POST["code"]) <= 16383) { <link rel="stylesheet" href="codemirror.css"> <link rel="stylesheet" href="eclipse.css"> <link rel="stylesheet" href="site.css"> + <script src="jquery-1.12.4.min.js"></script> <script src="codemirror.js"></script> <script src="clike.js"></script> </head> <body> + <div id="loader" style="display: none;"> + <div id="spinner"></div> + </div> <h1>☕️ Java Compiler</h1> <p>Powered by Eclipse Temurin</p> <form method="POST"> <textarea maxlength="16383" id="editor" name="code" rows="20"><?= htmlentities($code ?? $defaultCode) ?></textarea> <br> <button type="submit">▶ Compile & run</button> - <?php if ($result !== null): ?> - <hr> - <strong>Compilation:</strong><br> - <blockquote> - <strong>Status:</strong> <span style="color:<?= match($result["compile"]["status"]) { - "0" => "green", - default => "red", - } ?>"><?= match($result["compile"]["status"]) { - "0" => "Successful", - "124" => "Compilation timed out", - default => "Failed (Status " . $result["compile"]["status"] . ")", - } ?></span><br> - <?php if ($result["compile"]["stdout"]): ?> - <strong>Output:</strong><br> - <pre><code><?= htmlentities($result["compile"]["stdout"]) ?></code></pre> - <?php endif; ?> - <?php if ($result["compile"]["stderr"]): ?> - <strong>Error output:</strong><br> - <pre><code><?= htmlentities($result["compile"]["stderr"]) ?></code></pre> - <?php endif; ?> - </blockquote> - <hr> - <strong>Execution:</strong><br> - <?php if ($result["run"]["status"] !== null): ?> - <blockquote> - <strong>Status:</strong> <span style="color:<?= match($result["run"]["status"]) { - "0" => "green", - default => "red", - } ?>"><?= match($result["run"]["status"]) { - "0" => "Successful", - "124" => "Execution timed out", - default => "Failed (Status " . $result["run"]["status"] . ")", - } ?></span><br> - <?php if ($result["run"]["stdout"]): ?> - <strong>Output:</strong><br> - <pre><code><?= htmlentities($result["run"]["stdout"]) ?></code></pre> - <?php endif; ?> - <?php if ($result["run"]["stderr"]): ?> - <strong>Error output:</strong><br> - <pre><code><?= htmlentities($result["run"]["stderr"]) ?></code></pre> - <?php endif; ?> - </blockquote> - <?php else: ?> - <em>Did not execute</em> - <?php endif; ?> - <hr> - <strong>Runner ID:</strong> <code><?= htmlentities($id) ?></code><br> - <?php endif; ?> </form> + <div id="output" style="display: none;"> + + </div> <script> - var editor = CodeMirror.fromTextArea(document.getElementById("editor"), { - lineNumbers: true, - mode: "text/x-java", - theme: "eclipse", - tabSize: 4, - indentWithTabs: false, - smartIndent: true, - indentUnit: 4 + $(function() { + var editor = CodeMirror.fromTextArea($("#editor")[0], { + lineNumbers: true, + mode: "text/x-java", + theme: "eclipse", + tabSize: 4, + indentWithTabs: false, + smartIndent: true, + indentUnit: 4 + }); + editor.setSize(900, 500); + + $("form").on("submit", function(e) { + e.preventDefault(); + + $("#loader").show(); + $("#output").empty().hide(); + + $.ajax({ + type: "POST", + url: location.href, + data: { + code: editor.getValue() + }, + dataType: "json", + success: function(data) { + $("#loader").hide(); + + if (data.compile.status == 0) { + if (data.run.status != null) { + // program was executed + $("#output").append( + $("<h4></h4>").text(data.run.status == 0 ? "Executed successfully" : "Execution failed").css("color", data.run.status == 0 ? "green" : "red"), + ); + + if (data.run.stdout) { + $("#output").append( + $("<p></p>").text("Program output:"), + $("<pre></pre>").append( + $("<code></code>").text(data.run.stdout) + ) + ); + } + + if (data.run.stderr) { + $("#output").append( + $("<p></p>").text("Error output:"), + $("<pre></pre>").append( + $("<code></code>").text(data.run.stderr) + ) + ); + } + } + } else { + // compilation failed, stderr will contain compiler errors + $("#output").append( + $("<h4></h4>").text("Compilation failed").css("color", "red"), + $("<p></p>").text("Compiler errors:"), + $("<pre></pre>").append( + $("<code></code>").text(data.compile.stderr) + ) + ); + } + + $("#output").slideDown(400); + } + }) + }); }); - editor.setSize(900, 500); </script> </body> </html> |