adding edit page
This commit is contained in:
parent
bad080a7bb
commit
a46a44db26
@ -8,7 +8,7 @@
|
|||||||
<body>
|
<body>
|
||||||
<h1><a href="/"><img src="/favicon.ico"/></a> <span id="path"></span></h1>
|
<h1><a href="/"><img src="/favicon.ico"/></a> <span id="path"></span></h1>
|
||||||
<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>
|
<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>
|
||||||
<template id="row"><tr><td></td><td></td><td><a></a></td><td></td><td><button class="delete">🗑️</button></td></tr></template>
|
<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>
|
||||||
<table>
|
<table>
|
||||||
<thead><tr><th>Type</th><th>Size</th><th>Path</th><th>Modified</th><th></th></tr></thead>
|
<thead><tr><th>Type</th><th>Size</th><th>Path</th><th>Modified</th><th></th></tr></thead>
|
||||||
<tbody></tbody>
|
<tbody></tbody>
|
||||||
|
40
supervisor/shared/web_workflow/static/edit.html
Normal file
40
supervisor/shared/web_workflow/static/edit.html
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Code Edit</title>
|
||||||
|
<style>
|
||||||
|
#code_textarea {
|
||||||
|
width: 90%;
|
||||||
|
height: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#output_text {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 0.7em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"
|
||||||
|
integrity="sha512-c3Nl8+7g4LMSTdrm621y7kf9v3SDPnhxLNhcjFJbKECVnmZHTdo+IRO05sNLTH/D3vA6u1X32ehoLC7WFVdheg=="
|
||||||
|
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.6.0/ace.min.js"
|
||||||
|
integrity="sha512-Ky7AOm/5oRYp5QzV9diL95tE/OKjzfAkugQ+llHy1scOlzIyAt2SoyriapPAZTvtZNL/xbYI1Gvt5jJYurPBdw=="
|
||||||
|
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.6.0/mode-python.min.js"
|
||||||
|
integrity="sha512-SdtfSOaR+TnSvGsZ2dmErFrcMC/CK6J/l2kNaXv3AU9BtNzqLDtK69ImVp6zOAY9Udii9GrtH7NssygOh/w0hg=="
|
||||||
|
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.6.0/ext-settings_menu.min.js"
|
||||||
|
integrity="sha512-GqA/hV/4FrUn8lUmY+5EWvrB4Bbw3iv0TMY4wVFLWp+OyMqhKhYWXCtYA0+X68TdEA8nUq3og+d6VLTtwprvyw=="
|
||||||
|
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<button id="save_btn">Save</button>
|
||||||
|
<button id="docs_btn">Docs</button>
|
||||||
|
<button id="undo_btn">Undo</button>
|
||||||
|
<button id="redo_btn">Redo</button>
|
||||||
|
<p id="output_text">Loading</p>
|
||||||
|
<div id="code_textarea"></div>
|
||||||
|
|
||||||
|
<script src="/edit.js" defer=true></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
90
supervisor/shared/web_workflow/static/edit.js
Normal file
90
supervisor/shared/web_workflow/static/edit.js
Normal file
@ -0,0 +1,90 @@
|
|||||||
|
let editor;
|
||||||
|
require(["ace/ace", "ace/ext/settings_menu"], function (ace) {
|
||||||
|
editor = ace.edit("code_textarea");
|
||||||
|
ace.config.set('basePath', 'https://cdnjs.cloudflare.com/ajax/libs/ace/1.6.0/');
|
||||||
|
console.log("after create editor");
|
||||||
|
console.log(editor);
|
||||||
|
|
||||||
|
editor.session.setMode("ace/mode/python");
|
||||||
|
ace.require('ace/ext/settings_menu').init(editor);
|
||||||
|
editor.commands.addCommands([{
|
||||||
|
name: "showSettingsMenu",
|
||||||
|
bindKey: {win: "Ctrl-e", mac: "Ctrl-e"},
|
||||||
|
exec: function (editor) {
|
||||||
|
console.log("ctrl-e")
|
||||||
|
editor.showSettingsMenu();
|
||||||
|
},
|
||||||
|
readOnly: true
|
||||||
|
}, {
|
||||||
|
name: "infoDocsSearch",
|
||||||
|
bindKey: {win: "Ctrl-i", mac: "Ctrl-i"},
|
||||||
|
exec: function (editor) {
|
||||||
|
window.open(`https://docs.circuitpython.org/en/latest/search.html?q=${editor.getSelectedText()}`, '_blank');
|
||||||
|
},
|
||||||
|
readOnly: true
|
||||||
|
},{
|
||||||
|
name: 'Save',
|
||||||
|
bindKey: {win: 'Ctrl-S', mac: 'Command-S'},
|
||||||
|
exec: function (editor) {
|
||||||
|
console.log("ctrl-s save");
|
||||||
|
save();
|
||||||
|
|
||||||
|
}
|
||||||
|
},{
|
||||||
|
name: "replaceCtrlR",
|
||||||
|
bindKey: {win: "Ctrl-r", mac: "Ctrl-r"},
|
||||||
|
exec: function (editor_arg) {
|
||||||
|
console.log("override ctrl r");
|
||||||
|
editor.execCommand('replace');
|
||||||
|
console.log(editor);
|
||||||
|
},
|
||||||
|
readOnly: true
|
||||||
|
}]);
|
||||||
|
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
let filename = location.hash.substring(1);
|
||||||
|
let $output_text = document.querySelector("#output_text");
|
||||||
|
/*let $code_text = document.querySelector("#code_textarea");*/
|
||||||
|
|
||||||
|
fetch(`/fs/${filename}`)
|
||||||
|
.then(function (response) {
|
||||||
|
$output_text.innerText = `Loading Status: ${response.status}`;
|
||||||
|
return response.status === 200 ? response.text() : "";
|
||||||
|
})
|
||||||
|
.then(function (data) {
|
||||||
|
editor.setValue(data, -1)
|
||||||
|
});
|
||||||
|
|
||||||
|
function save() {
|
||||||
|
$output_text.innerText = "Saving..."
|
||||||
|
const requestOptions = {
|
||||||
|
method: 'PUT',
|
||||||
|
body: editor.getValue()
|
||||||
|
};
|
||||||
|
fetch(`/fs/${filename}`, requestOptions)
|
||||||
|
.then(function (response) {
|
||||||
|
$output_text.innerText = `Saving Status: ${response.status}`;
|
||||||
|
return response.text();
|
||||||
|
})
|
||||||
|
.then(function (data) {
|
||||||
|
console.log("after fetch: " + data);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
document.querySelector("#save_btn").onclick = function () {
|
||||||
|
console.log("Click Save!");
|
||||||
|
save();
|
||||||
|
}
|
||||||
|
document.querySelector("#docs_btn").onclick = function () {
|
||||||
|
window.open(`https://docs.circuitpython.org/en/latest/search.html?q=${editor.getSelectedText()}`, '_blank');
|
||||||
|
}
|
||||||
|
|
||||||
|
document.querySelector("#undo_btn").onclick = function () {
|
||||||
|
editor.undo();
|
||||||
|
}
|
||||||
|
|
||||||
|
document.querySelector("#redo_btn").onclick = function () {
|
||||||
|
editor.redo();
|
||||||
|
}
|
@ -839,6 +839,8 @@ STATIC_FILE(directory_html);
|
|||||||
STATIC_FILE(directory_js);
|
STATIC_FILE(directory_js);
|
||||||
STATIC_FILE(welcome_html);
|
STATIC_FILE(welcome_html);
|
||||||
STATIC_FILE(welcome_js);
|
STATIC_FILE(welcome_js);
|
||||||
|
STATIC_FILE(edit_html);
|
||||||
|
STATIC_FILE(edit_js);
|
||||||
STATIC_FILE(serial_html);
|
STATIC_FILE(serial_html);
|
||||||
STATIC_FILE(serial_js);
|
STATIC_FILE(serial_js);
|
||||||
STATIC_FILE(blinka_16x16_ico);
|
STATIC_FILE(blinka_16x16_ico);
|
||||||
@ -1047,6 +1049,8 @@ static bool _reply(socketpool_socket_obj_t *socket, _request *request) {
|
|||||||
_REPLY_STATIC(socket, request, welcome_js);
|
_REPLY_STATIC(socket, request, welcome_js);
|
||||||
} else if (strcmp(request->path, "/serial.js") == 0) {
|
} else if (strcmp(request->path, "/serial.js") == 0) {
|
||||||
_REPLY_STATIC(socket, request, serial_js);
|
_REPLY_STATIC(socket, request, serial_js);
|
||||||
|
} else if (strcmp(request->path, "/edit.js") == 0) {
|
||||||
|
_REPLY_STATIC(socket, request, edit_js);
|
||||||
} else if (strcmp(request->path, "/favicon.ico") == 0) {
|
} else if (strcmp(request->path, "/favicon.ico") == 0) {
|
||||||
// TODO: Autogenerate this based on the blinka bitmap and change the
|
// TODO: Autogenerate this based on the blinka bitmap and change the
|
||||||
// palette based on MAC address.
|
// palette based on MAC address.
|
||||||
|
Loading…
x
Reference in New Issue
Block a user