Skip to content

Commit a46a44d

Browse files
committed
adding edit page
1 parent bad080a commit a46a44d

File tree

4 files changed

+135
-1
lines changed

4 files changed

+135
-1
lines changed

supervisor/shared/web_workflow/static/directory.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<body>
99
<h1><a href="/"><img src="/favicon.ico"/></a>&nbsp;<span id="path"></span></h1>
1010
<div id="usbwarning" style="display: none;">🛈 USB is using the storage. Only allowing reads. See <a href="https://learn.adafruit.com/circuitpython-essentials/circuitpython-storage">the CircuitPython Essentials: Storage guide</a> for details.</div>
11-
<template id="row"><tr><td></td><td></td><td><a></a></td><td></td><td><button class="delete">🗑️</button></td></tr></template>
11+
<template id="row"><tr><td></td><td></td><td><a></a></td><td></td><td><button class="delete">🗑️</button></td><td><a class="edit_link" href="">Edit</a></td></tr></template>
1212
<table>
1313
<thead><tr><th>Type</th><th>Size</th><th>Path</th><th>Modified</th><th></th></tr></thead>
1414
<tbody></tbody>
Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Code Edit</title>
6+
<style>
7+
#code_textarea {
8+
width: 90%;
9+
height: 600px;
10+
}
11+
12+
#output_text {
13+
margin: 0;
14+
font-size: 0.7em;
15+
}
16+
</style>
17+
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"
18+
integrity="sha512-c3Nl8+7g4LMSTdrm621y7kf9v3SDPnhxLNhcjFJbKECVnmZHTdo+IRO05sNLTH/D3vA6u1X32ehoLC7WFVdheg=="
19+
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
20+
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.6.0/ace.min.js"
21+
integrity="sha512-Ky7AOm/5oRYp5QzV9diL95tE/OKjzfAkugQ+llHy1scOlzIyAt2SoyriapPAZTvtZNL/xbYI1Gvt5jJYurPBdw=="
22+
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
23+
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.6.0/mode-python.min.js"
24+
integrity="sha512-SdtfSOaR+TnSvGsZ2dmErFrcMC/CK6J/l2kNaXv3AU9BtNzqLDtK69ImVp6zOAY9Udii9GrtH7NssygOh/w0hg=="
25+
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
26+
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.6.0/ext-settings_menu.min.js"
27+
integrity="sha512-GqA/hV/4FrUn8lUmY+5EWvrB4Bbw3iv0TMY4wVFLWp+OyMqhKhYWXCtYA0+X68TdEA8nUq3og+d6VLTtwprvyw=="
28+
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
29+
</head>
30+
<body>
31+
<button id="save_btn">Save</button>
32+
<button id="docs_btn">Docs</button>
33+
<button id="undo_btn">Undo</button>
34+
<button id="redo_btn">Redo</button>
35+
<p id="output_text">Loading</p>
36+
<div id="code_textarea"></div>
37+
38+
<script src="/edit.js" defer=true></script>
39+
</body>
40+
</html>
Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
let editor;
2+
require(["ace/ace", "ace/ext/settings_menu"], function (ace) {
3+
editor = ace.edit("code_textarea");
4+
ace.config.set('basePath', 'https://cdnjs.cloudflare.com/ajax/libs/ace/1.6.0/');
5+
console.log("after create editor");
6+
console.log(editor);
7+
8+
editor.session.setMode("ace/mode/python");
9+
ace.require('ace/ext/settings_menu').init(editor);
10+
editor.commands.addCommands([{
11+
name: "showSettingsMenu",
12+
bindKey: {win: "Ctrl-e", mac: "Ctrl-e"},
13+
exec: function (editor) {
14+
console.log("ctrl-e")
15+
editor.showSettingsMenu();
16+
},
17+
readOnly: true
18+
}, {
19+
name: "infoDocsSearch",
20+
bindKey: {win: "Ctrl-i", mac: "Ctrl-i"},
21+
exec: function (editor) {
22+
window.open(`https://docs.circuitpython.org/en/latest/search.html?q=${editor.getSelectedText()}`, '_blank');
23+
},
24+
readOnly: true
25+
},{
26+
name: 'Save',
27+
bindKey: {win: 'Ctrl-S', mac: 'Command-S'},
28+
exec: function (editor) {
29+
console.log("ctrl-s save");
30+
save();
31+
32+
}
33+
},{
34+
name: "replaceCtrlR",
35+
bindKey: {win: "Ctrl-r", mac: "Ctrl-r"},
36+
exec: function (editor_arg) {
37+
console.log("override ctrl r");
38+
editor.execCommand('replace');
39+
console.log(editor);
40+
},
41+
readOnly: true
42+
}]);
43+
44+
45+
});
46+
47+
let filename = location.hash.substring(1);
48+
let $output_text = document.querySelector("#output_text");
49+
/*let $code_text = document.querySelector("#code_textarea");*/
50+
51+
fetch(`/fs/${filename}`)
52+
.then(function (response) {
53+
$output_text.innerText = `Loading Status: ${response.status}`;
54+
return response.status === 200 ? response.text() : "";
55+
})
56+
.then(function (data) {
57+
editor.setValue(data, -1)
58+
});
59+
60+
function save() {
61+
$output_text.innerText = "Saving..."
62+
const requestOptions = {
63+
method: 'PUT',
64+
body: editor.getValue()
65+
};
66+
fetch(`/fs/${filename}`, requestOptions)
67+
.then(function (response) {
68+
$output_text.innerText = `Saving Status: ${response.status}`;
69+
return response.text();
70+
})
71+
.then(function (data) {
72+
console.log("after fetch: " + data);
73+
});
74+
}
75+
76+
document.querySelector("#save_btn").onclick = function () {
77+
console.log("Click Save!");
78+
save();
79+
}
80+
document.querySelector("#docs_btn").onclick = function () {
81+
window.open(`https://docs.circuitpython.org/en/latest/search.html?q=${editor.getSelectedText()}`, '_blank');
82+
}
83+
84+
document.querySelector("#undo_btn").onclick = function () {
85+
editor.undo();
86+
}
87+
88+
document.querySelector("#redo_btn").onclick = function () {
89+
editor.redo();
90+
}

supervisor/shared/web_workflow/web_workflow.c

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -839,6 +839,8 @@ STATIC_FILE(directory_html);
839839
STATIC_FILE(directory_js);
840840
STATIC_FILE(welcome_html);
841841
STATIC_FILE(welcome_js);
842+
STATIC_FILE(edit_html);
843+
STATIC_FILE(edit_js);
842844
STATIC_FILE(serial_html);
843845
STATIC_FILE(serial_js);
844846
STATIC_FILE(blinka_16x16_ico);
@@ -1047,6 +1049,8 @@ static bool _reply(socketpool_socket_obj_t *socket, _request *request) {
10471049
_REPLY_STATIC(socket, request, welcome_js);
10481050
} else if (strcmp(request->path, "/serial.js") == 0) {
10491051
_REPLY_STATIC(socket, request, serial_js);
1052+
} else if (strcmp(request->path, "/edit.js") == 0) {
1053+
_REPLY_STATIC(socket, request, edit_js);
10501054
} else if (strcmp(request->path, "/favicon.ico") == 0) {
10511055
// TODO: Autogenerate this based on the blinka bitmap and change the
10521056
// palette based on MAC address.

0 commit comments

Comments
 (0)