pinokiod 3.8.0 → 3.8.5

package/server/public/fseditor.js

@@ -0,0 +1,189 @@
+const FSEditor = async ({title, description, old_path, icon, iconpath, redirect, copy, move, edit }) => {
+  console.log({ icon, iconpath })
+  const compare = async (file1, file2) => {
+    if (file1.size !== file2.size) return false;
+    console.log({ file1, file2 })
+    const buffer1 = await file1.arrayBuffer();
+    const buffer2 = await file2.arrayBuffer();
+    const view1 = new Uint8Array(buffer1);
+    const view2 = new Uint8Array(buffer2);
+    for (let i = 0; i < view1.length; i++) {
+      if (view1[i] !== view2[i]) return false;
+    }
+    return true;
+  }
+  let dirty
+  let mode
+  let new_path
+  let initial_file
+  let title_label
+  let file_type
+  let folderpath_html = ""
+  if (copy) {
+    mode = "copy"
+    title_label = "Copy to"
+  } else if (move) {
+    mode = "move"
+    title_label = "Move to"
+  } else {
+    mode = "edit"
+    title_label = "Edit"
+  }
+  if (copy || move) {
+    folderpath_html = `<div class='folder-row'>
+  <label for='new-folder-description'>Folder Path</label>
+  <div class='field-row'>
+    <label>/api/</label>
+    <input id="new-folder-path" class="swal2-input" placeholder="Folder Path" value="${old_path}" />
+  </div>
+</div>`
+  }
+  let result = await Swal.fire({
+    title: title_label,
+    html: `<div class='filepond-wrapper'>
+<div class='avatar-field'>
+  <input id='new-folder-image' type="file" class="filepond" name="avatar" accept="image/png, image/jpeg, image/gif" />
+</div>
+<div class='folder-rows'>
+  ${folderpath_html}
+  <div class='folder-row'>
+    <label for='new-folder-title'>Title</label>
+    <input id="new-folder-title" class="swal2-input" placeholder="Folder Name" value="${title}" />
+  </div>
+  <div class='folder-row'>
+    <label for='new-folder-description'>Description</label>
+    <textarea id="new-folder-description" class="swal2-input" placeholder="Folder Description">${description}</textarea>
+  </div>
+</div>
+</div>`,
+    allowOutsideClick: true,
+    focusConfirm: false,
+//    showCancelButton: true,
+    confirmButtonText: 'Save',
+    didOpen: () => {
+      const textarea = document.querySelector("#new-folder-description")
+      textarea.style.height = 'auto';
+      textarea.style.height = textarea.scrollHeight + 'px';
+      textarea.addEventListener('input', () => {
+        textarea.style.height = textarea.scrollHeight + 'px';
+      });
+      FilePond.registerPlugin(
+        FilePondPluginFileValidateType,
+        FilePondPluginImageExifOrientation,
+        FilePondPluginImagePreview,
+        FilePondPluginImageCrop,
+        FilePondPluginImageResize,
+        FilePondPluginImageTransform,
+        FilePondPluginImageEdit
+      );
+      pond = FilePond.create(
+        document.querySelector('#new-folder-image'),
+        {
+          allowReplace: true,
+          allowRevert: true,
+          allowRemove: true,
+
+          allowImageCrop: true,
+          allowImageEdit: true,
+          allowImageTransform: true,
+
+
+          labelIdle: `Drag & Drop your picture or <span class="filepond--label-action">Browse</span>`,
+          imagePreviewHeight: 170,
+          imageCropAspectRatio: '1:1',
+          imageResizeTargetWidth: 200,
+          imageResizeTargetHeight: 200,
+          stylePanelLayout: 'compact circle',
+          instantUpload: false,
+          server: {
+            process: {
+              url: '/pinokio/upload', // optional if same as above
+              ondata: (formData) => {
+                console.log("upload", { dirty })
+                if (dirty) {
+                  formData.append("icon_dirty", true)
+                }
+                formData.append("icon_path", iconpath)
+                let title = Swal.getPopup().querySelector('#new-folder-title').value
+                let description = Swal.getPopup().querySelector('#new-folder-description').value
+                let folder_path_el = Swal.getPopup().querySelector('#new-folder-path')
+                formData.append("title", title)
+                formData.append("description", description)
+                formData.append("old_path", old_path)
+                let path
+                if (folder_path_el) {
+                  path = folder_path_el.value
+                  formData.append("new_path", path)
+                } else {
+                  path = old_path
+                  formData.append("new_path", old_path)
+                }
+                if (mode === "copy") {
+                  formData.append("copy", true)
+                } else if (mode === "move") {
+                  formData.append("move", true)
+                }
+                if (edit) {
+                  formData.append("edit", true)
+                }
+                new_path = path
+                return formData;
+              }
+            }
+          },
+          onaddfile(error, file) {
+            console.log({ file, initial_file })
+            if (initial_file) {
+              compare(initial_file.file, file.file).then((same) => {
+                if (same) {
+                  // don't do anything
+                } else {
+                  dirty = true
+                  // make sure the image mime type is transformed into the same type as the existing image
+                  pond.setOptions({
+                    imageTransformOutputMimeType: initial_file.fileType
+                  })
+                }
+                initial_file = file
+              })
+            } else {
+              initial_file = file
+            }
+          },
+          onprocessfile(error, file) {
+            console.log("onprocessfile")
+            debugger
+            if (error) {
+              alert(error.body)
+            } else {
+              Swal.close()
+              if (new_path) {
+                location.href = redirect(new_path)
+              } else {
+                location.href = location.href
+              }
+            }
+          },
+          files: [
+            {
+              type: 'local',
+              source: icon,
+            }
+          ]
+        }
+      );
+    },
+    preConfirm: () => {
+      if (mode === "copy") {
+        let new_path = Swal.getPopup().querySelector('#new-folder-path').value
+        if (new_path === old_path) {
+          alert("Please specify a new folder name to copy to")
+          return false
+        }
+      }
+      pond.processFile()
+      return false
+    }
+  })
+
+}

package/server/public/opener.js

@@ -9,13 +9,15 @@ document.addEventListener("click", async (e) => {
   }
   if (el) {
     let filepath = el.getAttribute("data-filepath")
+    let command = el.getAttribute("data-command")
     await fetch("/openfs", {
       method: "post",
       headers: {
         "Content-Type": "application/json"
       },
       body: JSON.stringify({
-        path: filepath
+        path: filepath,
+        command
       })
     }).then((res) => {
       return res.json()

package/server/public/style.css

@@ -1,3 +1,9 @@
+@font-face {
+  font-family: 'SpaceMono';
+  src: url('/SpaceMono-Regular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
 :root {
   --content-width: 900px;
 
@@ -53,6 +59,16 @@
   */
   --dark-btn-color: whitesmoke;
 }
+.drawer {
+  max-height: 100000px;
+  overflow: hidden;
+  height: auto;
+  transition: max-height 3s ease-in-out;
+}
+.drawer.vertical-collapsed {
+  max-height: 0;
+}
+
 .type-tabs {
   display: flex;
   padding: 20px 20px 0;
@@ -87,7 +103,13 @@ body.dark .type-tabs {
   height: 20px;
   margin-right: 5px;
 }
+.navheader2 {
+  padding: 15px 10px;
+  background: white;
+}
 .navheader {
+    backdrop-filter: blur(16px);
+
   padding: 15px 10px;
 }
 body.columns footer {
@@ -190,8 +212,10 @@ footer {
   overflow: auto;
   */
   box-sizing: border-box;
+  /*
   color: var(--dark-color);
   background: var(--dark-bg);
+  */
   /*
   border-top: 1px solid rgba(255,255,255,0.05);
   */
@@ -207,7 +231,9 @@ footer b i {
 }
 footer b {
   flex-shrink: 0;
+  /*
   color: var(--dark-btn-color);
+  */
   margin-right: 10px;
   font-weight: normal;
   font-size: 11px;
@@ -551,6 +577,7 @@ body.columns main #editor {
   height: 100% !important;
 }
 #terminal {
+
   height: 100%;
   /*
   overflow: auto;
@@ -595,9 +622,12 @@ body.columns .containers {
   height: 100%;
 }
 .terminal-container {
+  background: white;
   flex-grow: 1;
   position: relative;
+  /*
   background: var(--dark-bg);
+  */
   overflow: auto;
 }
 .terminal-container #terminal-resize {
@@ -675,10 +705,16 @@ body.columns .containers {
   margin: 0 auto;
 }
 */
+.xterm-rows {
+  font-family: "Space Mono", monospace !important;
+  font-weight: 400 !important;
+  font-style: normal !important;
+
+}
 .xterm {
-  padding: 10px 20px !important;
-  /*
   padding: 0 20px !important;
+  /*
+  padding: 10px 20px !important;
   */
   cursor: pointer;
   overflow: auto;
@@ -691,15 +727,17 @@ body.columns .containers {
 .panels > div {
   width: 50%;
 }
+/*
 body.dark header {
   background: var(--dark-nav-bg);
 }
+*/
 header {
-  background: var(--dark-nav-bg);
 /*
+  background: var(--dark-nav-bg);
   background: var(--light-nav-bg);
-  */
   background: white;
+  */
   position: sticky;
   padding: 10px;
   top: 0;
@@ -1005,13 +1043,19 @@ body.dark .line i {
   text-align: center;
 }
 .line img {
-/*
-  width: 60px;
-  height: 60px;
+  width: 50px;
+  height: 50px;
+  /*
+  padding: 10px;
   */
+  padding: 4px;
+  /*
   width: 40px;
   height: 40px;
+  */
+  /*
   border-radius: 10px;
+  */
 }
 body.dark .line .btn {
   color: var(--dark-btn-color);
@@ -1172,7 +1216,7 @@ body.dark .swal2-popup {
   color: var(--dark-btn-color);
 }
 .swal2-popup {
-  border-radius: 20px !important;
+  border-radius: 0px !important;
   box-sizing: border-box;
 }
 .swal2-html-container a {
@@ -1331,6 +1375,9 @@ body.dark .swal2-styled.swal2-confirm{
   font-weight: bold;
   border: none;
 }
+.swal2-input:focus, .swal2-file:focus, .swal2-textarea:focus {
+  box-shadow: none !important;
+}
 .swal2-input {
   margin: 0 !important;
   width: 100% !important;
@@ -1484,6 +1531,16 @@ b {
 .opener.btn {
   background: royalblue;
 }
+.field-row {
+  display: flex;
+  align-items: center;
+}
+.folder-row .field-row label {
+  font-size: 14px;
+  flex-shrink: 0;
+  padding: 0 5px 0 0;
+  display: block;
+}
 body.dark #new-window {
   color: var(--dark-btn-color);
 }
@@ -1591,15 +1648,27 @@ nav.error-message {
   color: rgba(0,0,0,0.7);
   font-weight: bold;
 }
+/*
 .not-running-apps, .running-apps {
   background: rgba(0,0,100,0.04);
 }
 body.dark .not-running-apps, body.dark .running-apps {
   background: rgba(255,255,255,0.03);
 }
+*/
+/*
+.running-apps .line .title {
+  color: #82bc09;
+}
+*/
 .running-apps .line img {
-  border: 4px solid #8fd400;
+  background: #82bc09;
+  /*
+  border: 3px solid #8fd400;
+  */
+  /*
   border-radius: 5px;
+  */
 }
 /*
 .running-apps .line.align-top h3 .col .title {
@@ -1701,6 +1770,16 @@ footer.status {
   text-transform: uppercase;
 }
 
+#fsmenu {
+/*
+  background: rgba(0,0,100,0.04);
+  */
+  display: flex;
+  padding: 10px;
+  /*
+  padding: 20px 20px 0;
+  */
+}
 mark{
   background: firebrick;
   color: white;
@@ -1714,3 +1793,46 @@ mark{
   color: royalblue !important;
   cursor: pointer;
 }
+
+.filepond--image-preview-wrapper {
+  border-radius: 0 !important;
+}
+
+.filepond-wrapper {
+/*
+  position: relative;
+  display: inline-block;
+  */
+  display: flex;
+}
+.filepond-wrapper .folder-rows {
+  flex-grow: 1;
+}
+.filepond-wrapper .avatar-field {
+  width: 150px;
+  margin-right: 15px;
+  margin-top: 10px;
+}
+.folder-row {
+  text-align: left;
+  padding-bottom: 10px;
+}
+.folder-row label {
+  padding: 5px 0;
+  display: block;
+  font-size: 14px;
+}
+.folderpath {
+  opacity: 0.5;
+}
+.swal2-modal .filepond--root button {
+  cursor: pointer;
+  background: black !important;
+  color: white !important;
+  border: 2px solid !important;
+/*
+  background: unset !important;
+  */
+  padding: unset !important;
+  font-size: unset !important;
+}

package/server/socket.js

@@ -1,8 +1,10 @@
 const WebSocket = require('ws');
+const Util = require("../kernel/util")
 class Socket {
   constructor(parent) {
     this.buffer = {}
     this.connected = {}
+    this.active_shell = {}
     this.parent = parent
     this.server = parent.server
 //    this.kernel = parent.kernel
@@ -17,6 +19,7 @@ class Socket {
       });
       ws.on('message', async (message) => {
         const req = JSON.parse(message);
+        console.log({ req })
         if (req.response) {
           this.parent.kernel.api.respond(req)
         } else {
@@ -25,49 +28,109 @@ class Socket {
           // look for repos that match
 
           if (req.uri) {
-            /******************************************************************
-            *
-            *  req.uri is ALWAYS either of the two:
-            *  1. ~/...
-            *  2. https://github.com/...
-            *
-            *  Need to turn it into absolute file path before subscribing
-            *
-            ******************************************************************/
-
-            // req.uri is always http or absolute path
-            let id = this.parent.kernel.api.filePath(req.uri)
-
-            if (req.status) {
-              ws.send(JSON.stringify({
-                data: this.parent.kernel.api.running[id] ? true : false
-              }))
-            } else if (req.stop) {
-              this.parent.kernel.api.stop({ params: req })
+            console.log("## 1")
+            if (req.mode === "open") {
+              console.log("## 2")
+              // get the default script and respond
+              let id = this.parent.kernel.api.filePath(req.uri)
+              try {
+                console.log("## 3")
+                let default_url = await this.parent.kernel.api.get_default(id)
+                console.log({ id, default_url })
+                ws.send(JSON.stringify({
+                  data: {
+                    uri: default_url 
+                  }
+                }))
+              } catch (e) {
+                console.log(e)
+              }
             } else {
-              this.subscribe(ws, id)
-
-              if (req.mode !== "listen") {
-                // Run only if currently not running
-                if (!this.parent.kernel.api.running[id]) {
-
-                  // clear the log first
-
-                  await this.parent.kernel.clearLog(id)
-
-
-                  this.parent.kernel.api.process(req)
+                console.log("## 4")
+              console.log("REQ.URI", req.uri)
+              if (req.uri.startsWith("http")) {
+                  console.log("## 5")
+                // open
+                Util.openfs(req.uri, { mode: "open" })
+              } else {
+                  console.log("## 6")
+                console.log("sdfsfsfsdfsd>>>>>>>>>>>>>>>>>>>>>>>>>>>")
+                /******************************************************************
+                *
+                *  req.uri is ALWAYS either of the two:
+                *  1. ~/...
+                *  2. https://github.com/...
+                *
+                *  Need to turn it into absolute file path before subscribing
+                *
+                ******************************************************************/
+
+                // req.uri is always http or absolute path
+                let id = this.parent.kernel.api.filePath(req.uri)
+
+                if (req.status) {
+                    console.log("## 7")
+                  ws.send(JSON.stringify({
+                    data: this.parent.kernel.api.running[id] ? true : false
+                  }))
+                } else if (req.stop) {
+                    console.log("## 8")
+                  console.log(">>>>>>>>>>>>>>>>>>>>>")
+                  this.parent.kernel.api.stop({ params: req })
+                } else {
+                    console.log("## 9")
+                  let buf = this.buffer[id]
+                  let sh = this.active_shell[id]
+                  this.subscribe(ws, id, buf, sh)
+                  if (req.mode !== "listen") {
+                    console.log("## 10")
+                    // Run only if currently not running
+                    if (!this.parent.kernel.api.running[id]) {
+                    console.log("## 11")
+
+                      // clear the log first
+
+                      await this.parent.kernel.clearLog(id)
+
+
+                      this.parent.kernel.api.process(req)
+                    }
+                  }
                 }
               }
-            }
 
+            }
           } else if (req.method) {
-            this.subscribe(ws, req.method)
-            if (req.mode !== "listen") {
-              this.parent.kernel.api.process(req)
+            if (req.id) {
+              console.log("req.id", req.id)
+              let buf = this.buffer[req.id]
+              let sh = this.active_shell[req.id]
+              console.log({ buf, sh })
+              this.subscribe(ws, req.id, buf, sh)
+              console.log("Process 2")
+              if (!sh) {
+              //if (req.mode !== "listen") {
+                console.log("Process 3")
+                this.parent.kernel.api.process(req)
+                console.log("Process 4")
+              }
+            } else {
+              console.log("Process 1")
+              this.subscribe(ws, req.method)
+              console.log("Process 2")
+              if (req.mode !== "listen") {
+                console.log("Process 3")
+                this.parent.kernel.api.process(req)
+                console.log("Process 4")
+              }
             }
           } else if (req.emit) {
             this.parent.kernel.shell.emit(req)
+          } else if (req.key && req.id) {
+            this.parent.kernel.shell.emit({
+              id: req.id,
+              emit: req.key
+            })
           }
         }
 
@@ -78,11 +141,16 @@ class Socket {
       headers.push('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');
     });
   }
-  subscribe(ws, id) {
+  subscribe(ws, id, buf, sh) {
 
     if (this.parent.kernel.api.running[id]) {
       ws.send(JSON.stringify({
-        type: "connect"
+        type: "connect",
+        data: {
+          id,
+          state: buf,
+          shell: sh
+        }
       }))
     }
 
@@ -120,6 +188,15 @@ class Socket {
       });
     }
 
+    if (!this.buffer[id]) {
+      this.buffer[id] = ""
+    }
+    if (e.data && e.data.raw) this.buffer[id] += e.data.raw
+
+    if (e.data && e.data.shell_id) {
+      this.active_shell[id] = e.data.shell_id
+    }
+
     // send to caller session
     if (e.caller) {
       let caller
@@ -148,6 +225,15 @@ class Socket {
           }
         });
       }
+
+      if (!this.buffer[caller]) {
+        this.buffer[caller] = ""
+      }
+      if (e.data.raw) this.buffer[caller] += e.data.raw
+
+      if (e.data && e.data.shell_id) {
+        this.active_shell[caller] = e.data.shell_id
+      }
     }
   }
 }