pinokiod 1.3.29 → 1.3.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pinokiod",
-  "version": "1.3.29",
+  "version": "1.3.31",
   "description": "",
   "main": "index.js",
   "scripts": {

package/server/index.js

@@ -156,6 +156,7 @@ class Server {
         menu: x.menu,
         shortcuts: x.shortcuts,
         index: x.index,
+        running_scripts: x.running_scripts,
         //icon: (x.isDirectory() ? "fa-solid fa-folder" : "fa-regular fa-file"),
         name,
         uri,
@@ -1036,6 +1037,7 @@ class Server {
 
           // check if there is a running process with this folder name
           let runningApps = new Set()
+          console.log("running", this.kernel.api.running)
           for(let key in this.kernel.api.running) {
             let p = this.kernel.path("api", items[i].name) + path.sep
             //let re = new RegExp(items[i].name)
@@ -1044,6 +1046,11 @@ class Server {
             if (key.includes(p)) {
               items[i].running = true
               items[i].index = index
+              if (items[i].running_scripts) {
+                items[i].running_scripts.push({ path: path.relative(this.kernel.homedir, key), name: path.relative(p, key) })
+              } else {
+                items[i].running_scripts = [{ path: path.relative(this.kernel.homedir, key), name: path.relative(p, key) }]
+              }
               index++;
               running.push(items[i])
               break
@@ -1081,6 +1088,8 @@ class Server {
       }
 
 
+      console.log("running", JSON.stringify(running, null, 2))
+
 
       res.render("index", {
         proxy: pinokio_proxy[0],
@@ -1364,6 +1373,8 @@ class Server {
       }
       config.menu = proxyMenu.concat(config.menu)
 
+      console.log("MENU", JSON.stringify(config.menu, null, 2))
+
 
       return config
     } else {

package/server/public/style.css

@@ -490,6 +490,16 @@ body.fullscreen .btn {
   color: royalblue;
 }
 */
+.mini-btn {
+  /*
+  background: none;
+  */
+  margin-right: 10px;
+  padding: 4px 8px !important;
+  /*
+  border: 1px solid rgba(0,0,0,0.1);
+  */
+}
 .runnables {
   padding: 20px;
   box-sizing: border-box;
@@ -933,6 +943,7 @@ body.dark .line .avatar i {
 .line .description {
   font-size: 13px;
   opacity: 0.8;
+  margin-bottom: 5px;
 }
 body.dark a.line {
   color: var(--dark-color);

package/server/views/browser-experimental.ejs

@@ -343,10 +343,12 @@ body.dark nav {
 nav {
   display: none;
   background: white;
+  /*
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
+  */
   /*
   padding: 5px;
   */
@@ -571,6 +573,17 @@ body.dark .loader-container {
   -->
 </aside>
 <div class='container'>
+  <main class='browserview'>
+    <% if (false) { %>
+      <% if (config.menu) { %>
+        <% config.menu.forEach((item) => { %>
+          <% if (item.btn && item.src) { %>
+            <iframe name='<%=item.src%>' class='hidden'></iframe>
+          <% } %>
+        <% }) %>
+      <% } %>
+    <% } %>
+  </main>
   <nav>
     <div class='bar'>
       <button class='btn2' id='menu-mobile'><i class="fa-solid fa-bars"></i></button>
@@ -602,17 +615,6 @@ body.dark .loader-container {
     <a class='btn2' href='https://twitter.com/cocktailpeanut' target="_blank"><div><i class="fa-brands fa-twitter"></i></div><div>Twitter</div></a>
     -->
   </nav>
-  <main class='browserview'>
-    <% if (false) { %>
-      <% if (config.menu) { %>
-        <% config.menu.forEach((item) => { %>
-          <% if (item.btn && item.src) { %>
-            <iframe name='<%=item.src%>' class='hidden'></iframe>
-          <% } %>
-        <% }) %>
-      <% } %>
-    <% } %>
-  </main>
 </div>
 <script>
 let loaded = {}
@@ -713,9 +715,7 @@ const renderSelection = (e, force) => {
 
 
     let target
-    if (selection) {
-      target = selection
-    } else {
+    if (location.hash && location.hash.length > 0) {
   //    document.querySelector(".bar").classList.remove("hidden")
       //let id = getTarget(location.hash.slice(1))
       let id = location.hash.slice(1)
@@ -753,6 +753,10 @@ const renderSelection = (e, force) => {
         // if not triggered by an event, look for the target from the location hash
         target = document.querySelector(selector)
       }
+    } else {
+      if (selection) {
+        target = selection
+      }
     }
 
 
@@ -1202,7 +1206,7 @@ document.querySelector("aside").addEventListener("click", async (e) => {
   let target
 
 
-  // delete
+  // 1. handle delete
   if (e.target.classList.contains("del")) {
     target = e.target
   } else {
@@ -1225,98 +1229,128 @@ document.querySelector("aside").addEventListener("click", async (e) => {
     el.remove()
     // update tabs
     await syncTabs()
+    return
+  }
+
 
+  // 2. handle shudown
+  if (e.target.classList.contains("shutdown")) {
+    target = e.target
   } else {
-    // Select
-    if (e.target.classList.contains("frame-link")) {
-      target = e.target
-    } else {
-      target = e.target.closest(".frame-link")
-    }
+    target = e.target.closest(".shutdown")
+  }
+  if (target) {
+    e.preventDefault()
+    e.stopPropagation()
+    let link = target.closest("[href]")
+    let src = new URL(link.href).pathname
+    console.log("src", src)
+    debugger
+
+    let socket = new Socket()
+    socket.run({
+      method: "kernel.api.stop",
+      params: {
+        uri: "~" + src
+      }
+    }, (packet) => {
+      console.log("packet", packet)
+      if (packet.type === "result") {
+        socket.close()
+        refresh(true)
+      }
+    })
 
+    return
+  }
 
 
-    if (target) {
 
-      // if data-confirm exists, ask for confirmation
-      // if not, then just go forward
-      let confirmText = target.getAttribute("data-confirm")
-      if (confirmText && confirmText.length > 0) {
-        const confirmed = confirm(confirmText)
-        console.log('confirmed', confirmed)
-        if (!confirmed) {
-          e.preventDefault()
-          e.stopPropagation()
-          return
-        }
-      }
+  // 3. handle select
+  if (e.target.classList.contains("frame-link")) {
+    target = e.target
+  } else {
+    target = e.target.closest(".frame-link")
+  }
 
-      if (target.getAttribute("data-action")) {
-        let actionStr = target.getAttribute("data-action")
-        let action = JSON.parse(actionStr)
-        console.log("action", action)
-        if (action.method === "stop" && action.uri) {
-          let socket = new Socket()
-          socket.run({
-            method: "kernel.api.stop",
-            params: {
-              uri: action.uri//"~" + location.pathname
-            }
-          }, (packet) => {
-            console.log("packet", packet)
-            if (packet.type === "result") {
-              socket.close()
-//              location.href = location.href
-            }
-          })
-        }
-      } else if (target.target === "_blank") {
-        // nothing
-      } else {
-        if (target.classList.contains("reveal")) {
-          // nested menu
-          target.closest(".nested-menu").querySelector(".submenu").classList.toggle("hidden")
-          e.preventDefault()
-          e.stopPropagation()
-        } else {
-          //location.hash = target.target
 
 
-  //        let id = getTarget(target.getAttribute("href"))
-  //        console.log("ID", id, target.href)
-  //        location.hash = id
+  if (target) {
 
-          //location.hash = target.getAttribute("href")
+    // if data-confirm exists, ask for confirmation
+    // if not, then just go forward
+    let confirmText = target.getAttribute("data-confirm")
+    if (confirmText && confirmText.length > 0) {
+      const confirmed = confirm(confirmText)
+      console.log('confirmed', confirmed)
+      if (!confirmed) {
+        e.preventDefault()
+        e.stopPropagation()
+        return
+      }
+    }
 
-          if (target.closest(".h")) {
-            location.hash = target.target
-          } else {
-            let index = target.getAttribute("data-index")
-            let type = target.closest(".m").getAttribute("data-type")
+    if (target.getAttribute("data-action")) {
+      let actionStr = target.getAttribute("data-action")
+      let action = JSON.parse(actionStr)
+      console.log("action", action)
+      if (action.method === "stop" && action.uri) {
+        let socket = new Socket()
+        socket.run({
+          method: "kernel.api.stop",
+          params: {
+            uri: action.uri//"~" + location.pathname
+          }
+        }, (packet) => {
+          console.log("packet", packet)
+          if (packet.type === "result") {
+            socket.close()
+//              location.href = location.href
+          }
+        })
+      }
+    } else if (target.target === "_blank") {
+      // nothing
+    } else {
+      if (target.classList.contains("reveal")) {
+        // nested menu
+        target.closest(".nested-menu").querySelector(".submenu").classList.toggle("hidden")
+        e.preventDefault()
+        e.stopPropagation()
+      } else {
+        //location.hash = target.target
 
 
-            location.hash = type + index
-          }
+//        let id = getTarget(target.getAttribute("href"))
+//        console.log("ID", id, target.href)
+//        location.hash = id
 
-          document.querySelectorAll(".frame-link").forEach((el) => {
-            el.classList.remove("selected")
-          })
-          target.classList.add("selected")
+        //location.hash = target.getAttribute("href")
 
-          renderSelection(e)
-        }
-      }
+        if (target.closest(".h")) {
+          location.hash = target.target
+        } else {
+          let index = target.getAttribute("data-index")
+          let type = target.closest(".m").getAttribute("data-type")
 
 
+          location.hash = type + index
+        }
 
+        document.querySelectorAll(".frame-link").forEach((el) => {
+          el.classList.remove("selected")
+        })
+        target.classList.add("selected")
 
+        renderSelection(e)
+      }
     }
   }
 
 
 
 })
-const refresh = async () => {
+const refresh = async (silent) => {
   console.log("REFRESH")
   await new Promise((resolve, reject) => {
     setTimeout(() => {
@@ -1328,7 +1362,12 @@ const refresh = async () => {
   })
   document.querySelector(".menu").innerHTML = html
   location.hash = ""
-  renderSelection()
+
+  // render the selected frame only if not silent
+  if (silent) {
+  } else {
+    renderSelection()
+  }
 }
 window.addEventListener('message', (event) => {
 

package/server/views/fullscreen_editor.ejs

@@ -595,6 +595,10 @@ document.addEventListener("DOMContentLoaded", async () => {
     const rpc = new RPC()
 
     <% if (mod && runnable) { %>
+      window.addEventListener('message', function(event) {
+        console.log("Message received from the parent: ", event.data); // Message received from parent
+      });
+
       document.querySelector(".stop").addEventListener("click", async (e) => {
         await rpc.stop()
     //    socket.run({

package/server/views/index.ejs

@@ -189,6 +189,16 @@ header .runner {
               <div class='uri'><i class="fa-regular fa-folder"></i><%=item.url%></div>
               <div class='title'><%=item.name%></div>
               <div class='description'><%=item.description%></div>
+              <% if (item.running_scripts) { %>
+                <% item.running_scripts.forEach((s) => { %>
+                  <div>
+                    <button class='btn shutdown' data-src="<%=s.path%>">
+                      <i class="fa-solid fa-stop"></i> Stop <%=s.name%>&nbsp;
+                      <i class='fa-solid fa-spin fa-circle-notch'></i>
+                    </button>
+                  </div>
+                <% }) %>
+              <% } %>
               <% if (item.shortcuts && item.shortcuts.length > 0) { %>
                 <div class='btns'>
                   <% item.shortcuts.forEach((btn) => { %>
@@ -200,7 +210,10 @@ header .runner {
               <% } %>
             </div>
             <div class='spinner'>
+              <i class="fa-solid fa-chevron-right"></i>
+              <!--
               <i class="fa-solid fa-circle-notch fa-spin"></i>
+              -->
             </div>
           </h3>
         </a>
@@ -472,45 +485,6 @@ document.querySelector("form input[type=search]").addEventListener("input", (e)
 document.querySelector("form input[type=search]").focus()
 <% } %>
 
-if (document.querySelector(".container")) {
-  document.querySelector(".container").addEventListener("click", async (e) => {
-    let el = e.target.closest(".menu-btn")
-    if (!el) {
-      if (el.classList.contains("menu-btn")) {
-        el = e.target
-      }
-    }
-
-    console.log("EL", el)
-    debugger
-
-    if (el) {
-      e.preventDefault()
-      e.stopPropagation()
-      let actionStr = el.getAttribute("data-action")
-      if (actionStr) {
-        let action = JSON.parse(actionStr)
-        console.log("action", action)
-        if (action.method === "stop" && action.uri) {
-          socket.run({
-            method: "kernel.api.stop",
-            params: {
-              uri: action.uri//"~" + location.pathname
-            }
-          }, (packet) => {
-            console.log("packet", packet)
-            if (packet.type === "result") {
-              socket.close()
-              location.href = location.href
-            }
-          })
-        }
-      }
-
-    }
-  })
-}
-
 
 //  if (el) {
 //    let url = el.getAttribute("data-url")
@@ -643,7 +617,82 @@ document.addEventListener("keydown", (e) => {
   }
 });
 document.addEventListener("click", (e) => {
-  let target = (e.target.classList.contains(".btn") ? e.target : e.target.closest(".btn"))
+
+  let target
+
+  if (e.target.classList.contains("shutdown")) {
+    target = e.target
+  } else {
+    target = e.target.closest(".shutdown")
+  }
+  if (target) {
+    e.preventDefault()
+    e.stopPropagation()
+    let src = target.getAttribute("data-src")
+    console.log("src", src)
+    debugger
+
+    socket.run({
+      method: "kernel.api.stop",
+      params: {
+        uri: "~/" + src
+      }
+    }, (packet) => {
+      console.log("packet", packet)
+      if (packet.type === "result") {
+        socket.close()
+        location.href = location.href
+      }
+    })
+
+    return
+  }
+
+
+  if (document.querySelector(".container")) {
+    document.querySelector(".container").addEventListener("click", async (e) => {
+      let el = e.target.closest(".menu-btn")
+      if (!el) {
+        if (el.classList.contains("menu-btn")) {
+          el = e.target
+        }
+      }
+
+      console.log("EL", el)
+      debugger
+
+      if (el) {
+        e.preventDefault()
+        e.stopPropagation()
+        let actionStr = el.getAttribute("data-action")
+        if (actionStr) {
+          let action = JSON.parse(actionStr)
+          console.log("action", action)
+          if (action.method === "stop" && action.uri) {
+            socket.run({
+              method: "kernel.api.stop",
+              params: {
+                uri: action.uri//"~" + location.pathname
+              }
+            }, (packet) => {
+              console.log("packet", packet)
+              if (packet.type === "result") {
+                socket.close()
+                location.href = location.href
+              }
+            })
+            return
+          }
+        }
+
+      }
+    })
+  }
+
+
+
+
+  target = (e.target.classList.contains(".btn") ? e.target : e.target.closest(".btn"))
   if (target) {
     target.classList.add("clicked")   
     document.querySelectorAll(".line .btns .btn").forEach((e) => {
@@ -651,7 +700,10 @@ document.addEventListener("click", (e) => {
     })
     target.classList.add("selected")
     target.closest(".line").classList.add("selected")
+    return
   }
+
+
 })
 <% if (qr) { %>
   document.querySelector("#wifi").addEventListener("click", async (e) => {

package/server/views/partials/menu.ejs

@@ -25,8 +25,12 @@
         <a <%=item.default ? 'data-default' : ''%> data-confirm="<%=item.confirm%>" data-index="<%=index%>" target="<%=item.target%>" data-mode="<%=item.mode%>" href="<%=item.href%>" class='btn header-item frame-link'>
           <div class='tab'><%-item.btn%></div>
           <% if (item.running) { %>
-            <div class='loader'>
-            <i class='fa-solid fa-spin fa-circle-notch'></i>
+            <div class='loader shutdown'>
+              <!--
+              <i class='fa-solid fa-spin fa-circle-notch'></i>
+              <i class="fa-solid fa-chevron-right"></i>
+              -->
+              <i class="fa-solid fa-xmark"></i>
             </div>
           <% } %>
         </a>