feat: add testing page

AElfProject · Oct 22, 2024 · 5bd5831 · 5bd5831
1 parent 734743d
commit 5bd5831
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 1 deletion.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -3,7 +3,7 @@ name: Create and publish a Docker image
 on:
   workflow_dispatch:
   push:
-    branches: [master]
+    branches: [master, feature/refactor-to-dotnet-8]
     tags:
       - "v[0-9]+.[0-9]+.[0-9]+"
 

diff --git a/src/PlaygroundClient/Program.cs b/src/PlaygroundClient/Program.cs
@@ -38,6 +38,10 @@
 
 app.UseHttpsRedirection();
 
+// host index.html file
+app.UseDefaultFiles();
+app.UseStaticFiles();
+
 // upload zip file and return the extracted files
 app.MapPost("/playground/build", async ([FromServices] IClusterClient _client, IFormFile file) =>
 {

diff --git a/src/PlaygroundClient/wwwroot/index.html b/src/PlaygroundClient/wwwroot/index.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Monaco Editor Example</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.33.0/min/vs/loader.min.js"></script>
+    <style>
+      #container {
+        width: 800px;
+        height: 600px;
+        border: 1px solid grey;
+        margin: 20px auto;
+      }
+
+      pre {
+        word-break: break-all;
+        width: 100%;
+        white-space: pre-wrap;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container"></div>
+    <button id="compileBtn">Compile Code</button>
+    <pre id="result"></pre>
+    <script>
+      // Config for Monaco Editor
+      require.config({
+        paths: {
+          vs: "https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.33.0/min/vs",
+        },
+      });
+      require(["vs/editor/editor.main"], function () {
+        var editor = monaco.editor.create(
+          document.getElementById("container"),
+          {
+            value: [
+              "using System;",
+              "public class HelloWorld {",
+              "    public static void Main() {",
+              '        Console.WriteLine("Hello, world!");',
+              "    }",
+              "}",
+            ].join("\n"),
+            language: "csharp",
+          }
+        );
+
+        document.getElementById("compileBtn").onclick = function () {
+          var code = editor.getValue();
+          compileCode(code);
+        };
+      });
+
+      function compileCode(code) {
+        // prepare code as formdata
+        const formData = new FormData();
+        formData.append("code", code);
+
+        // prepare fetch request
+        fetch("/playground/buildWithRoslyn", {
+          method: "POST",
+          body: formData,
+        })
+          .then((response) => response.text())
+          .then((data) => {
+            if (data.error) {
+              document.getElementById("result").textContent =
+                "Error: " + data.error;
+            } else {
+              document.getElementById("result").textContent =
+                "Compiled DLL: " + data;
+            }
+          })
+          .catch((error) => {
+            document.getElementById("result").textContent =
+              "Error: " + error.message;
+          });
+      }
+    </script>
+  </body>
+</html>