summaryrefslogtreecommitdiffstats
path: root/virtual-programs/web/web-editor.folk
blob: 3e3c01bc0a1ae725061ac423294d0eca49b11f46 (plain)
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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
Wish the web server handles route {/page/(.*)$} with handler {
    if {[regexp -all {/page/(\d*)$} $path whole_match program_id]} {
        set filename "../folk-printed-programs/$program_id.folk" 
        set fp [open $filename r]
        set file_data [read $fp]
        close $fp
    } elseif {[regexp -all {/page/(.*)$} $path whole_match program_id]} {
        set filename "virtual-programs/$program_id.folk" 
        set fp [open $filename r]
        set file_data [read $fp]
        close $fp
    }

    html [string map [list file_data [htmlEscape $file_data] program_id $program_id file_name $filename] {
        <html>
        <body>
        <div>
            <span id="status">Status</span>
            <button onclick="handleSave()">Save</button>
            <button id="print" onclick="handlePrint()">Print</button>
        </div>
        <textarea id="code" style="width: 100%;height: 95vh;">file_data</textarea>
        <pre id="error"></pre>
        <script>
          const isVirtualProgram = 'file_name'.includes('virtual-programs');

          if (isVirtualProgram) {
              document.getElementById("print").disabled = true;
          }

          const codeEle = document.getElementById("code");
          function uuidv4() {
            return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
              (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
            );
          }

          // Cmd + S || Ctrl + S => Save
          document.addEventListener('keydown', function(e) {
            if ((window.navigator.platform.match('Mac') ? e.metaKey : e.ctrlKey)  && e.keyCode == 83) {
              e.preventDefault();
              handleSave();
            }
          }, false);
          // Cmd + P || Ctrl + P => Print
          document.addEventListener('keydown', function(e) {
            if ((window.navigator.platform.match('Mac') ? e.metaKey : e.ctrlKey)  && e.keyCode == 80) {
              e.preventDefault();
              handlePrint();
            }
          }, false);

          let ws;
          let send;
          function wsConnect() {
            ws = new WebSocket(window.location.origin.replace("http", "ws") + "/ws");
            send = function(s) { ws.send(s); }

            ws.onopen = () => {
              document.getElementById('status').innerHTML = "<span style=background-color:seagreen;color:white;>Connnected</span>";
            };
            ws.onclose = window.onbeforeunload = () => {
              document.getElementById('status').innerHTML = "<span style=background-color:red;color:white;>Disconnnected</span>";
              setTimeout(() => { wsConnect(); }, 1000);
            };
            ws.onerror = (err) => {
              document.getElementById('status').innerText = "Error";
              console.error('Socket encountered error: ', err.message, 'Closing socket');
              ws.close();
            }
            ws.onmessage = (msg) => {
              if (msg.data.startsWith("Error:")) {
                const errorEl = document.getElementById("error");
                if (msg.data === "Error:") {
                  errorEl.style.backgroundColor = "";
                  errorEl.innerText = "";
                } else {
                  errorEl.style.backgroundColor = "#f55";
                  errorEl.innerText = msg.data;
                }
              }
            }
          };
          wsConnect();

          function handleSave() {
            const code = document.getElementById("code").value;
            send(`
              set fp [open file_name w]
              puts -nonewline $fp {${code}}
              close $fp
              puts "Saved program_id.folk"
            `);

              if (isVirtualProgram) {
                send(`EditVirtualProgram file_name {${code}}`)
            }

            [500, 1000, 3000].forEach(timeout => {
              setTimeout(() => {
                send(`
set errors [Statements::findMatches [list program_id has error /err/ with info /errorInfo/]]
::websocket::send $chan text [join [list "Error:" {*}[lmap e $errors {dict get $e errorInfo}]] "\n"]
`);
              }, 500);
            });
          }

          let jobid;
          function handlePrint() {
            const code = document.getElementById("code").value;
            jobid = String(Math.random());
            send(`Assert web wishes to print program program_id with code {${code}} with job-id {${jobid}}`);
            setTimeout(500, () => {
              send(`Retract web wishes to print program program_id with code {${code}} with job-id {${jobid}}`);
            });
          }
        </script>
        </body>
        </html>
    }]
}