PicaxePreprocess/haxepad.html at eb167822bcf1e51b7d05b183bc50e01731bc5e45 · Patronics/PicaxePreprocess · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html>
<body>

<h1>hAXEPad</h1>

<form method="post" id="compileform">
  <label for="code">code:</label><br>
  <textarea id="code" name="code" rows="20" cols="80"></textarea><br><br>
  <label for="platform">platform:</label>
  <select id='platform' name='platform'>
  <option value="08m2">08M2</option>
  <option value="14m2">14M2</option>
  <option value="18m2">18M2</option>
  <option value="20m2">20M2</option>
  <option value="20x2">20X2</option>
  <option value="28x1">28X1</option>
  <option value="28x2">28X2</option>
  <option value="40x1">40X1</option>
  <option value="40x2">40X2</option>
</select><br><br>
  <button value="compile" onclick="sendCompile(); return false;">compile</button>
  <button value="syntax check" onclick="sendSyntax(); return false;">syntax check</button>
</form>
<p>Click on the submit button, and the input will compiled.</p>
<br><br>
raw output:<br>
<div id="resultsDisplay" style='width: 90%; max-height: 20vh; line-height: 1.2em; overflow-wrap: break-word ;overflow:scroll; background-color:lightgreen;'></div>
<div id="responseDisplay" style='width: 90%; max-height: 20vh; line-height: 1.2em; overflow-wrap: break-word ;overflow:scroll; background-color:skyblue;'></div>

<script>
form=document.getElementById("compileform");
function sendCompile(){
    form.action="https://picaxecloud.com/compiler/compile.json";
    getResponse();
    //form.submit();
}

function sendSyntax(){
    form.action="https://picaxecloud.com/compiler/check.json";
    getResponse();
    //form.submit();
}

//document.getElementById('compileform').addEventListener('submit', (event) => {
    //event.preventDefault();
function getResponse(){
    var xhr = new XMLHttpRequest();
    xhr.open("POST", form.action);
    xhr.onload = function(event){
        var resp=JSON.parse(event.target.response);
        document.getElementById("responseDisplay").innerText=event.target.response;
        //alert("Success, server responded with: " + event.target.response); // raw response
        if(resp.hasOwnProperty('axe')){ //compile successful
            document.getElementById("resultsDisplay").innerText="compile successful";
            //TODO offer downloadable axe file
        }if(resp.hasOwnProperty('status')){ //syntax check passed
            document.getElementById("resultsDisplay").innerText="syntax check ok";
        }if(resp.hasOwnProperty('errors')){ //syntax error
            document.getElementById("resultsDisplay").innerText="error: "+resp.errors;

        }

    };
    // or onerror, onabort
    var formData = new FormData(document.getElementById("compileform"));
    xhr.send(formData);
};

</script>

</body>
</html>