pinokiod 1.3.60 → 1.3.62

package/server/views/browser-experimental.ejs

@@ -263,6 +263,14 @@ body.dark .frame-link.selected {
   padding: 5px;
   */
 }
+.loader .btn:hover {
+  color: royalblue;
+  border-color: royalblue;
+}
+.loader .btn {
+  padding: 4px 8px;
+  border: 1px solid rgba(255,255,255,0.3);
+}
 .frame-link .tab {
   flex-grow: 1;
   /*
@@ -342,9 +350,16 @@ body.dark nav {
 }
 .container:hover nav {
   display: block;
+  max-height: 200px;
 }
 nav {
+  overflow: hidden;
+  max-height: 0;
+  transition: max-height 0.4s ease-out;
+
+  /*
   display: none;
+  */
   background: white;
   /*
   position: absolute;
@@ -536,6 +551,9 @@ body.dark .loader-container {
     <a target="<%=src%>" href="<%=src%>" class='btn header-item frame-link' data-index="0">
       <div class='tab'><i class="fa-regular fa-folder-open"></i> Files</div>
     </a>
+    <a target="/share/<%=name%>" href="/share/<%=name%>", class="btn header-item frame-link" data-index="1">
+      <div class='tab'><i class="fa-solid fa-wifi"></i> Share</div>
+    </a>
   </div>
   <div class='m h menu' data-type='h'>
     <% if (config.menu) { %>
@@ -601,7 +619,7 @@ body.dark .loader-container {
       <button class='btn2' id='clone-tab'><i class='fa-regular fa-copy'></i> Clone</button>
       <a class='btn2' id='open-browser' target="_blank" href="" features="browser"><i class="fa-solid fa-square-arrow-up-right"></i> Popout</a>
       <button class='btn2' id='reload'><i class="fa-solid fa-rotate-right"></i> Refresh</button>
-      <div id='new-tab' class='btn2'><i class="fa-solid fa-plus"></i> New</div>
+      <div id='new-tab' class='btn2'><i class="fa-solid fa-plus"></i> Tab</div>
       <!--
       <button class='btn2 logo' id='reload'><i class="fa-solid fa-rotate-right"></i></button>
       -->
@@ -713,7 +731,10 @@ const nav = (type) => {
 const renderSelection = (e, force) => {
   console.log("# 1")
   // if the menu has a default item, or if the url specifies a selection
-  let selection = document.querySelector("[data-default]")
+  let selection = null;
+  <% if (type === "run" && env.PINOKIO_SCRIPT_DEFAULT && env.PINOKIO_SCRIPT_DEFAULT.toString().toLowerCase() === "true") { %>
+    selection = document.querySelector("[data-default]")
+  <% } %>
   if (selection || location.hash && location.hash.length > 0) {
     console.log("# 2")
 
@@ -923,6 +944,9 @@ const renderSelection = (e, force) => {
               targetFrame.src = target.href
             }
           }
+          targetFrame.contentWindow.postMessage({
+            action: "foreground"
+          }, "*")
         }
       } else {
         console.log("# 12")
@@ -1248,8 +1272,11 @@ document.querySelector("aside").addEventListener("click", async (e) => {
     e.stopPropagation()
     let link = target.closest("[href]")
     let src = new URL(link.href).pathname
+    n.Noty({
+      text: `stopping ${src}`,
+      silent: true
+    })
     console.log("src", src)
-    debugger
 
     let socket = new Socket()
     socket.run({
@@ -1262,7 +1289,7 @@ document.querySelector("aside").addEventListener("click", async (e) => {
       if (packet.type === "result") {
         socket.close()
         n.Noty({
-          text: `stopped ${src}`,
+          text: `stopped`,
           silent: true
         })
         refresh(true)

package/server/views/env_editor.ejs

@@ -0,0 +1,184 @@
+<html class='columns'>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
+<script src="/hotkeys.min.js"></script>
+<script src="/ace/ace.js"></script>
+<script src="/noty.js"></script>
+<script src="/notyq.js"></script>
+<script src="/xterm.js"></script>
+<script src="/xterm-addon-fit.js"></script>
+<script src="/xterm-addon-web-links.js"></script>
+<script src="/xterm-theme.js"></script>
+<script src="/xterm-addon-search.js"></script>
+<script src="/xterm-addon-search-bar.js"></script>
+<script src="/sweetalert2.js"></script>
+<script src="/Socket.js"></script>
+<script src="/common.js"></script>
+<script src="/he.js"></script>
+<script src="/opener.js"></script>
+<script src="/nav.js"></script>
+<script src="/autoexpand.js"></script>
+<script src="/modalinput.js"></script>
+<script src="/simplemodal.js"></script>
+<script src="/waitmodal.js"></script>
+<script src="/notifyinput.js"></script>
+<script src="/report.js"></script>
+<link href="/xterm.min.css" rel="stylesheet" />
+<link href="/css/fontawesome.min.css" rel="stylesheet">
+<link href="/css/solid.min.css" rel="stylesheet">
+<link href="/css/regular.min.css" rel="stylesheet">
+<link href="/css/brands.min.css" rel="stylesheet">
+<link href="/style.css" rel="stylesheet"/>
+<link href="/noty.css" rel="stylesheet"/>
+<% if (agent === "electron") { %>
+  <link href="/electron.css" rel="stylesheet"/>
+<% } %>
+<style>
+body.frozen {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+#table > table {
+  border-left: 2px solid black;
+  padding-left: 5px;
+  margin: 10px 0;
+}
+.highlight {
+  background: yellow;
+  width: 100px;
+}
+th {
+  background: rgba(0,0,0,0.1);
+  padding: 10px;
+  font-size: 12px;
+}
+td {
+  font-size: 12px;
+  padding: 10px;
+}
+td.val {
+  background: rgba(0,0,0,0.06);
+}
+td.key {
+  background: rgba(0,0,0,0.1);
+}
+.button {
+  cursor: pointer; 
+  background: rgba(0,0,0,0.8);
+  color: white;
+  padding: 5px 10px;
+  border-radius: 4px;
+}
+.button:hover {
+  
+}
+#editor {
+  box-sizing: border-box;
+  max-width: 800px;
+  padding: 20px;
+}
+header .runner {
+  padding: 10px 0 0;
+}
+.disabled {
+  opacity: 0.7;
+}
+body.dark .env-item input[type=text] {
+  background: white;
+}
+.env-item input[type=text] {
+  width: 100%;
+  padding: 10px;
+  box-sizing: border-box;
+  border: none;
+  background: rgba(0,0,100, 0.1);
+}
+body.dark .env-item label {
+  color: cornflowerblue;
+}
+.env-item label {
+  color: royalblue;
+  display: block;
+  margin-bottom: 5px;
+  font-weight: bold;
+  font-size: 18px;
+}
+.env-item {
+  padding-top: 10px;
+  padding-bottom: 30px;
+}
+body.dark .comment {
+  border-left: 2px solid white;
+}
+.comment {
+  opacity: 0.8;
+  border-left: 2px solid black;
+  padding-left: 10px;
+}
+#save {
+  background: royalblue;
+}
+</style>
+<script>
+document.addEventListener("DOMContentLoaded", async () => {
+  const n = new N()
+  document.querySelector("#save").addEventListener("click", async (e) => {
+    // save
+    const vals = {}
+    const els = document.querySelectorAll(".env-item")
+    for(let el of els) {
+      let input = el.querySelector("input[type=text]")
+      vals[input.id] = input.value
+    }
+    console.log("vals", vals)
+    let res = await fetch("/env", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        filepath: location.pathname.slice(5),
+        vals
+      })
+    }).then((res) => {
+      return res.json()
+    })
+    console.log("res" ,res)
+    n.Noty({
+      text: `Updated!`
+    })
+  })
+})
+</script>
+</head>
+<body class='columns <%=theme%>'>
+  <header class='navheader grabbable'>
+  <h1>
+    <a class='home' href="/"><i class="fa-solid fa-house"></i></a>
+    <%=filepath%>
+  </h1>
+  <div class='runner'>
+    <div id='save' class='btn'>
+      <span class='save'><i class="fa-solid fa-check"></i> Save</span>
+    </div>
+    <a class='btn' href="<%=editorpath%>"><i class="fa-solid fa-pen-to-square"></i> Edit file</a>
+    <button class='btn' id='open-fs' data-filepath="<%=filepath%>"><i class="fa-solid fa-eye"></i> Open in File Explorer</button>
+  </div>
+  </header>
+    <main>
+      <div id='editor'>
+        <% items.forEach((item) => { %>
+          <% if (item.type === "comment") { %>
+            <div class='comment'><%=item.val.replaceAll(/^[ #]+/g, "")%></div>
+          <% } else { %>
+            <div class='env-item'>
+              <label for="<%=item.key%>"><%=item.key%></label>
+              <input id="<%=item.key%>" type="text" value="<%=item.val%>">
+            </div>
+          <% } %>
+        <% }) %>
+      </div>
+    </main>
+</body>
+</html>

package/server/views/fullscreen_editor.ejs

@@ -139,6 +139,10 @@ document.addEventListener("DOMContentLoaded", async () => {
     constructor() {
       this.socket = new Socket()
     }
+    write(text) {
+      this.term.write(text)
+      this.dirty = true
+    }
     finished() {
     /*
       n.Noty({
@@ -201,7 +205,11 @@ document.addEventListener("DOMContentLoaded", async () => {
             rows: this.term.rows,
           }
         }, async (packet) => {
-//          console.log("packet", packet)
+          
+          console.log("packet", packet.type, packet)
+          if (packet.data) {
+            console.log("packet.data.raw", packet.data.raw)
+          }
           if (packet.type === 'start') {
             refreshParent(packet)
             reloadMemory()
@@ -233,14 +241,15 @@ document.addEventListener("DOMContentLoaded", async () => {
 //              </div>`
             }
           } else if (packet.type === "stream") {
+            console.log({ cols: this.term.cols, rows: this.term.rows })
             if (packet.data.raw) {
-              this.term.write(packet.data.raw)
+              this.write(packet.data.raw)
             } else if (packet.data.json) {
-              this.term.write(JSON.stringify(packet.data.json).replace(/\n/g, "\r\n"))
-              this.term.write("\r\n")
+              this.write(JSON.stringify(packet.data.json).replace(/\n/g, "\r\n"))
+              this.write("\r\n")
             } else if (packet.data.json2) {
-              this.term.write(JSON.stringify(packet.data.json2, null, 2).replace(/\n/g, "\r\n"))
-              this.term.write("\r\n")
+              this.write(JSON.stringify(packet.data.json2, null, 2).replace(/\n/g, "\r\n"))
+              this.write("\r\n")
             }
             document.querySelector(".run .play").classList.add("hidden")
             document.querySelector(".run .starting").classList.add("hidden")
@@ -248,14 +257,14 @@ document.addEventListener("DOMContentLoaded", async () => {
           } else if (packet.type === 'disconnect') {
             refreshParent(packet)
             reloadMemory()
-            this.term.write("\r\nDisconnected...\r\n")
+            //this.term.write("\r\nDisconnected...\r\n")
             document.querySelector("footer").innerHTML = "<b>Ready</b>"
             this.socket.close()
             document.querySelector(".run .play").classList.remove("hidden")
             document.querySelector(".run .stop").classList.add("hidden")
           } else if (packet.type === 'connect') {
             const message = "..........Connected!\r\n"
-            this.term.write(message)
+            this.write(message)
             /*
             for(let i=0; i<message.length; i++) {
               await new Promise((r, reject) => {
@@ -527,6 +536,7 @@ document.addEventListener("DOMContentLoaded", async () => {
     createTerm () {
       if (!this.term) {
         const term = new Terminal({
+          scrollback: 9999999,
           //theme: xtermTheme.Piatto_Light,
           //theme: xtermTheme.Spring,
 
@@ -597,6 +607,41 @@ document.addEventListener("DOMContentLoaded", async () => {
     <% if (mod && runnable) { %>
       window.addEventListener('message', function(event) {
         console.log("Message received from the parent: ", event.data); // Message received from parent
+        //  "foreground" message adds a newline to the terminal
+        // Needed to fix the issue where the terminal won't write anything when in background
+        // so when coming back from background, need to refresh by just adding a newline.
+        if (event.data && event.data.action === "foreground") {
+          
+
+          // if dirty, update
+          // if not dirty, don't update
+          const delimiter = "\r\n"
+          if (rpc.dirty) {
+            rpc.term.write(delimiter)
+            rpc.dirty = false
+          } else {
+          }
+
+          //console.log("buffer", rpc.term.buffer)
+          //if (rpc.term.buffer) {
+          //  const lastRow = rpc.term.buffer.active.baseY;
+          //  const lastLine = rpc.term.buffer.active.getLine(lastRow);
+          //  const lastLine2 = rpc.term.buffer.active.getLine(lastRow-1);
+          //  const cell = lastLine.getCell().getChars()
+          //  const cell2 = lastLine.getCell().getChars()
+          //  console.log({ lastLine, lastLine2, cell, cell2 })
+          //  const lastStr = cell[cell.length - 3];
+          //  console.log({ lastRow, lastLine, lastStr })
+
+          //  const delimiter = "\r\n█"
+          //  if (lastStr === delimiter) {
+          //    console.log("don't update") 
+          //  } else {
+          //    console.log("update")
+          //    rpc.term.write(delimiter)
+          //  }
+          //}
+        }
       });
 
       document.querySelector(".stop").addEventListener("click", async (e) => {

package/server/views/general_editor.ejs

@@ -146,9 +146,9 @@ document.addEventListener("DOMContentLoaded", async () => {
         this.socket.close()
         this.socket.run({
           method: "fs.write",
-          cwd: "{{kernel.homedir}}",
+          //cwd: "{{kernel.homedir}}",
           params: {
-            path: filepath,
+            path: `{{path.resolve(kernel.homedir, "${filepath}")}}`,
             text: str,
           }
         }, (packet) => {

package/server/views/help.ejs

@@ -146,6 +146,10 @@ body.dark .item select {
   padding: 10px 20px;
   text-align: center;
 }
+body.dark .btn {
+  color: white;
+  border: 1px solid rgba(255,255,255,0.3) !important;
+}
 body.light {
 /*
   background: var(--light-nav-bg);

package/server/views/index.ejs

@@ -112,13 +112,7 @@ a.badge {
 }
 body.dark .btn {
   color: white;
-  /*
-  color: cornflowerblue;
-  */
   border: 1px solid rgba(255,255,255,0.3);
-  /*
-  border: 1px solid rgba(100, 149, 237, 0.3);
-  */
 }
 body.dark .badge {
   background: rgba(255,255,255,0.1);
@@ -288,16 +282,19 @@ body.dark .browser-options-row {
               <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>
-                <% }) %>
-              <% } %>
+              <div>
+                <button class='btn browse' data-src="<%=item.browser_url%>/browse">
+                  <i class="fa-regular fa-folder-open"></i>
+                </button>
+                <% if (item.running_scripts) { %>
+                  <% item.running_scripts.forEach((s) => { %>
+                      <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) => { %>
@@ -336,6 +333,9 @@ body.dark .browser-options-row {
               <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>
+              <button class='btn browse' data-src="<%=item.browser_url%>/browse">
+                <i class="fa-regular fa-folder-open"></i>
+              </button>
               <% if (item.shortcuts && item.shortcuts.length > 0) { %>
                 <div class='btns'>
                   <% item.shortcuts.forEach((btn) => { %>
@@ -346,6 +346,9 @@ body.dark .browser-options-row {
                 </div>
               <% } %>
             </div>
+            <div class='spinner'>
+              <i class="fa-solid fa-chevron-right"></i>
+            </div>
           </h3>
         </a>
       <% }) %>
@@ -729,7 +732,6 @@ document.addEventListener("click", (e) => {
     e.stopPropagation()
     let src = target.getAttribute("data-src")
     console.log("src", src)
-    debugger
 
     socket.run({
       method: "kernel.api.stop",
@@ -756,6 +758,20 @@ document.addEventListener("click", (e) => {
   }
 
 
+  if (e.target.classList.contains("browse")) {
+    target = e.target
+  } else {
+    target = e.target.closest(".browse")
+  }
+  if (target) {
+    e.preventDefault()
+    e.stopPropagation()
+    let src = target.getAttribute("data-src")
+    location.href = src
+    return
+  }
+
+
   if (document.querySelector(".container")) {
     document.querySelector(".container").addEventListener("click", async (e) => {
       let el = e.target.closest(".menu-btn")
@@ -766,7 +782,6 @@ document.addEventListener("click", (e) => {
       }
 
       console.log("EL", el)
-      debugger
 
       if (el) {
         e.preventDefault()

package/server/views/partials/menu.ejs

@@ -30,7 +30,9 @@
               <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>
+              <button class='btn'>
+              <i class="fa-solid fa-square"></i> Stop
+              </button>
             </div>
           <% } %>
         </a>

package/server/views/settings.ejs

@@ -145,6 +145,10 @@ body.dark .item select {
   padding: 10px 20px;
   text-align: center;
 }
+body.dark .btn {
+  color: white;
+  border: 1px solid rgba(255,255,255,0.3) !important;
+}
 body.light {
 /*
   background: var(--light-nav-bg);
@@ -298,7 +302,7 @@ hr {
       <br>
       <div>Edit the system ENVIRONMENT file to customize pinokio system wide settings, such as where files are stored, terminal behavior, etc.</div>
       <br>
-      <a class='btn' href="/edit/ENVIRONMENT">Edit ENVIRONMENT</a>
+      <a class='btn' href="/env/ENVIRONMENT"><i class="fa-regular fa-pen-to-square"></i> Edit ENVIRONMENT</a>
     </div>
     <hr/>
     <div class='troubleshoot'>