diff options
Diffstat (limited to '_wui')
| -rw-r--r-- | _wui/awwan.ts | 38 | ||||
| -rw-r--r-- | _wui/index.html | 5 | ||||
| -rw-r--r-- | _wui/main.js | 34 |
3 files changed, 62 insertions, 15 deletions
diff --git a/_wui/awwan.ts b/_wui/awwan.ts index 95b7f97..942730b 100644 --- a/_wui/awwan.ts +++ b/_wui/awwan.ts @@ -27,6 +27,7 @@ const CLASS_AWWAN_EXECUTE = "awwan_execute"; const ID_INP_LINE_RANGE = "com_inp_line_range"; const ID_BTN_EXEC_LOCAL = "com_btn_local"; const ID_BTN_EXEC_REMOTE = "com_btn_remote"; +const ID_BTN_STOP = "com_btn_stop"; const ID_COM_RESIZE_EDITOR = "com_resize_editor"; @@ -98,7 +99,7 @@ export function renderHtml() { <div id="${ID_OUTPUT_WRAPPER}" class="output"> <div> <div class="${CLASS_AWWAN_EXECUTE}"> - <span id="exec_icon">⚪</span> + <button id="${ID_BTN_STOP}" disabled="true">⚫ Stop</button> Execute line <input id="${ID_INP_LINE_RANGE}" placeholder="Ex: 1,2-4,5-"/> on @@ -152,6 +153,7 @@ export class Awwan { private orgContent: string = ""; private _posx: number = 0; private _posy: number = 0; + private execID = ""; constructor() { renderHtml(); @@ -182,7 +184,7 @@ export class Awwan { }); } - el = document.getElementById("exec_icon"); + el = document.getElementById(ID_BTN_STOP); if (el) { this.elExecIcon = el; } @@ -535,6 +537,23 @@ export class Awwan { this.doSaveFile(this.request.script, this.request.content); } + async onClickStop() { + const httpRes = await fetch(`/awwan/api/execute?id=${this.execID}`, { + method: "DELETE", + headers: { + Accept: "application/json", + }, + }); + + const res = await httpRes.json(); + if (res.code != 200) { + this.notifError(`Stop failed: ${res.message}`); + return; + } + + this.notifInfo(res.message); + } + editorOnSave(content: string) { this.doSaveFile(this.request.script, content); } @@ -628,6 +647,8 @@ export class Awwan { // Stream the execution output using Server-sent events. + this.execID = execRes.id; + const execTail = new EventSource( `/awwan/api/execute/tail?id=${execRes.id}`, ); @@ -663,17 +684,24 @@ export class Awwan { private preExecute() { this.comBtnLocal.disabled = true; this.comBtnPlay.disabled = true; - this.elExecIcon.innerHTML = "🟡"; + this.elExecIcon.innerHTML = "🟡 Stop"; } private whileExecute() { - this.elExecIcon.innerHTML = "🟢"; + this.elExecIcon.disabled = false; + this.elExecIcon.innerHTML = "🟢 Stop"; + this.elExecIcon.onclick = () => { + this.onClickStop(); + }; } private postExecute() { this.comBtnLocal.disabled = false; this.comBtnPlay.disabled = false; - this.elExecIcon.innerHTML = "⚪"; + this.elExecIcon.innerHTML = "⚫ Stop"; + this.elExecIcon.disabled = true; + this.elExecIcon.onclick = null; + this.execID = ""; } private async newNode(isDir: boolean) { diff --git a/_wui/index.html b/_wui/index.html index b2b4a0e..792ef85 100644 --- a/_wui/index.html +++ b/_wui/index.html @@ -135,11 +135,6 @@ height: 27em; } - #exec_icon { - font-size: 14pt; - vertical-align: middle; - } - #output { background-color: lavender; border: 1px solid silver; diff --git a/_wui/main.js b/_wui/main.js index 41d2933..e6d2a72 100644 --- a/_wui/main.js +++ b/_wui/main.js @@ -419,6 +419,7 @@ var awwan = (() => { var ID_INP_LINE_RANGE = "com_inp_line_range"; var ID_BTN_EXEC_LOCAL = "com_btn_local"; var ID_BTN_EXEC_REMOTE = "com_btn_remote"; + var ID_BTN_STOP = "com_btn_stop"; var ID_COM_RESIZE_EDITOR = "com_resize_editor"; var ID_OUTPUT_WRAPPER = "output_wrapper"; var ID_OUTPUT = "output"; @@ -455,7 +456,7 @@ var awwan = (() => { <div id="${ID_OUTPUT_WRAPPER}" class="output"> <div> <div class="${CLASS_AWWAN_EXECUTE}"> - <span id="exec_icon">⚪</span> + <button id="${ID_BTN_STOP}" disabled="true">⚫ Stop</button> Execute line <input id="${ID_INP_LINE_RANGE}" placeholder="Ex: 1,2-4,5-"/> on @@ -486,6 +487,7 @@ var awwan = (() => { this.orgContent = ""; this._posx = 0; this._posy = 0; + this.execID = ""; renderHtml(); let el; el = document.getElementById(ID_AWWAN_NAV_LEFT); @@ -508,7 +510,7 @@ var awwan = (() => { this._posx = 0; }); } - el = document.getElementById("exec_icon"); + el = document.getElementById(ID_BTN_STOP); if (el) { this.elExecIcon = el; } @@ -806,6 +808,20 @@ var awwan = (() => { this.request.content = content; this.doSaveFile(this.request.script, this.request.content); } + async onClickStop() { + const httpRes = await fetch(`/awwan/api/execute?id=${this.execID}`, { + method: "DELETE", + headers: { + Accept: "application/json" + } + }); + const res = await httpRes.json(); + if (res.code != 200) { + this.notifError(`Stop failed: ${res.message}`); + return; + } + this.notifInfo(res.message); + } editorOnSave(content) { this.doSaveFile(this.request.script, content); } @@ -883,6 +899,7 @@ var awwan = (() => { this.notifInfo( `Execute submitted ${execRes.script} on ${execRes.mode} with ID=${execRes.id}` ); + this.execID = execRes.id; const execTail = new EventSource( `/awwan/api/execute/tail?id=${execRes.id}` ); @@ -916,15 +933,22 @@ var awwan = (() => { preExecute() { this.comBtnLocal.disabled = true; this.comBtnPlay.disabled = true; - this.elExecIcon.innerHTML = "🟡"; + this.elExecIcon.innerHTML = "🟡 Stop"; } whileExecute() { - this.elExecIcon.innerHTML = "🟢"; + this.elExecIcon.disabled = false; + this.elExecIcon.innerHTML = "🟢 Stop"; + this.elExecIcon.onclick = () => { + this.onClickStop(); + }; } postExecute() { this.comBtnLocal.disabled = false; this.comBtnPlay.disabled = false; - this.elExecIcon.innerHTML = "⚪"; + this.elExecIcon.innerHTML = "⚫ Stop"; + this.elExecIcon.disabled = true; + this.elExecIcon.onclick = null; + this.execID = ""; } async newNode(isDir) { if (!this.currentNode) { |