nako3editのファイル一覧画面に「実行」ボタンを付ける #1657

kujirahand · May 7, 2024 · c799316 · c799316
1 parent b5f4429
commit c799316
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 9 deletions.
diff --git a/core b/core
diff --git a/tools/nako3edit/a.sqlite3 b/tools/nako3edit/a.sqlite3
diff --git a/tools/nako3edit/html/files.html b/tools/nako3edit/html/files.html
@@ -36,21 +36,26 @@
       もし、LEFT(F,2)="__"ならば、続ける。
       F2 = FをHTML変換
       F3 = FをURLエンコード
+      # 編集可能ファイルか？
       Fを「\.(csv|txt|tsv|js|bat|nako3|nako|css|html|htm|)$」で正規表現マッチ。
       もし、そうならば
         HTML=HTML&「<li>」
         HTML=HTML&「<a class="btn btn-sm btn-warning del_btn" data-file="{F3}">削除</a> &nbsp;」
+        HTML=HTML&「<a class="btn btn-sm btn-accent run_btn" data-file="{F3}">▶ 実行</a>&nbsp;」
+        HTML=HTML&「<a class="btn btn-sm btn-primary" href="/html/edit.html?file={F3}&appkey={APPKEY}">編集</a>&nbsp;」
         HTML=HTML&「<a href="/html/edit.html?file={F3}&appkey={APPKEY}">📝 {F2}</a>」
         HTML=HTML&「</li>」
       違えば
         HTML=HTML&「<li>」
+        HTML=HTML&「<div style="float:right;">」
         HTML=HTML&「<a class="btn btn-sm btn-warning del_btn" data-file="{F3}">削除</a> &nbsp;」
         HTML=HTML&「<a>🌠 {F2}</a>」
+        HTML=HTML&「</div><div style="clear:both;"></div>」
         HTML=HTML&「</li>」
       ここまで。
     ここまで。
     「#files_ul」にHTMLをDOM_HTML設定。
-    削除ボタンイベント設定。
+    各種ボタンイベント設定。
   ここまで。
   # ---
   AJAX失敗した時には(err)
@@ -61,16 +66,19 @@
   ここまで
 ここまで。
 
-●削除ボタンイベント設定
+●各種ボタンイベント設定
 　　「.del_btn」のDOM要素全取得して反復
 　　　　対象の「onclick」に「ファイル削除処理」をDOMイベント設定。
 　　ここまで。
+　　「.run_btn」のDOM要素全取得して反復
+　　　　対象の「onclick」に「ファイル実行処理」をDOMイベント設定。
+　　ここまで。
 ここまで。
 
 ●(Eの)ファイル削除処理とは
-　　「削除しても良いですか？」と二択。
-　　もし、それがいいえならば戻る。
 　　FF=E["target"]["dataset"]["file"]
+　　「以下のファイルを削除しても良いですか？{改行}{FF}」と二択。
+　　もし、それがいいえならば戻る。
 　　エラー監視
 　　　　RES=「/deletefile?appkey={APPKEY}&file={FF}」からAJAX_JSON取得。
 　　エラーならば
@@ -84,6 +92,14 @@
 　　「/html/files.html?appkey={APPKEY}」にブラウザ移動。
 ここまで。
 
+●(Eの)ファイル実行処理とは
+　　FF=E["target"]["dataset"]["file"]
+　　RES=「/run_direct?appkey={APPKEY}&file={FF}」からAJAXテキスト取得。
+　　「RUN: {FF}」を表示。
+　　RES_HTML = RESをHTML変換
+　　「#stdout」にRES_HTMLをHTML設定。
+ここまで。
+
 #-----------
   </script>
 </head>
@@ -104,10 +120,16 @@
     </div>
   </div>
   <div id="filesbox">
-    <div>
+    <div class="menu-box">
       <a class="btn btn-info" id="new_btn">→新規作成</a>
     </div>
-    <ul id="files_ul"></ul>
+    <div>
+      <ul id="files_ul"></ul>
+    </div>
+    <div class="menu-box">
+      <div class="result_output">出力結果:</div>
+      <div id="stdout"></div>
+    </div>
   </div>
 </body>
 

diff --git a/tools/nako3edit/html/nako3edit.css b/tools/nako3edit/html/nako3edit.css
@@ -40,14 +40,15 @@ h1 {
   padding: 8px;
   margin: 4px;
 }
-#filesbox > ul {
+#filesbox ul {
   margin: 0;
   padding: 4px;
 }
-#filesbox > ul > li {
+#filesbox ul > li {
   border-bottom: 1px solid silver;
   padding: 8px;
   list-style-type: none;
+  position: relative;
 }
 .newfile {
   padding: 4px;
@@ -63,3 +64,30 @@ h1 {
   color: yellow;
   text-decoration: none;
 }
+
+.menu-box {
+  border: 1px solid silver;
+  padding: 0.5em;
+  border-radius: 0.3em;
+}
+
+.del_btn {
+  position: absolute;
+  right: 0;
+  top: 8px;
+}
+
+.result_output {
+  color: silver;
+  font-size: 0.8em;
+}
+
+#stdout {
+  background-color: white;
+  border: 1px solid silver;
+  margin: 4px;
+  padding: 8px;
+  font-size: 1em;
+  text-align: left;
+  border-radius: 0.4em;
+}
diff --git a/tools/nako3edit/index.mjs b/tools/nako3edit/index.mjs
@@ -74,6 +74,10 @@ const server = http.createServer(function (req, res) {
     apiRun(res, params)
     return
   }
+  if (uri === '/run_direct') {
+    apiRunDirect(res, params)
+    return
+  }
   if (uri === '/get_new_filename') {
     apiGetNewFilename(res)
     return
@@ -234,6 +238,38 @@ function apiRun (res, params) {
   }
 }
 
+function apiRunDirect(res, params) {
+  res.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' })
+  const appkeyUser = params.appkey
+  if (appkey !== appkeyUser) {
+    res.end('[ERROR] キーが違います')
+    return
+  }
+  const fname = removePathFlag(params.file)
+  const fullpath = path.join(userDir, fname)
+  try {
+    const cmd = `"${NODE}" "${CNAKO3}" "${fullpath}"`
+    console.log("@run=", cmd)
+    let result = ''
+    try {
+      result = execSync(cmd)
+      result = String(result)
+    } catch (err) {
+      console.error(err)
+      res.end('[ERROR]実行に失敗しました。' + err.toString())
+      return
+    }
+    console.log('[run] file=', fname)
+    console.log('--------------------------------')
+    console.log(result)
+    console.log('--------------------------------')
+    res.end(result)
+  } catch (err) {
+    console.error(err)
+    res.end('[ERROR] 実行に失敗しました。')
+  }
+}
+
 function apiDelete (res, params) {
   res.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' })
   const appkeyUser = params.appkey