pinokiod 3.9.28 → 3.9.30

package/server/public/modalinput.js

@@ -10,6 +10,7 @@ const ModalInput = async (params, uri) => {
       title,
       description,
       placeholder,
+      required,
       default
     }]
   }
@@ -37,20 +38,34 @@ const ModalInput = async (params, uri) => {
           input = `<select data-id="${field.key}">${items}</select>`
         }
       } else if (type === 'checkbox') {
-        input = `<div class='checkbox-row'><input data-type="checkbox" type="checkbox" data-id="${field.key}" value="${field.key}" />${field.text}</div>`
+        input = `<div class='checkbox-row'>
+        <input data-type="checkbox" type="checkbox" data-id="${field.key}" value="${field.key}" />
+        <div class='flexible'>
+          <h5>${field.title}</h5>
+          <div>${field.description ? field.description : ''}</div>
+        </div>
+      </div>`
       } else if (type === 'file') {
         input = `<div class='dropzone' data-type='file' data-id='${field.key}'></div>`
         //input = `<input type='file' data-id="${field.key}" />`
       } else {
         input = `<input ${autofocus} type='${type}' data-id="${field.key}" class="swal2-input" placeholder="${field.placeholder ? field.placeholder : ''}">`
       }
-      return [
-        "<div class='field'>",
-          `<label class='title'>${field.title ? field.title : ''}</label>`,
-          input,
-          `<label class='description'>${field.description ? field.description : ''}</label>`,
-        "</div>"
-      ].join("\n")
+      if (type === 'checkbox') {
+        return [
+          "<div class='field'>",
+            input,
+          "</div>"
+        ].join("\n")
+      } else {
+        return [
+          "<div class='field'>",
+            `<label class='title'>${field.title ? field.title : ''}</label>`,
+            input,
+            `<label class='description'>${field.description ? field.description : ''}</label>`,
+          "</div>"
+        ].join("\n")
+      }
     }).join("\n"),
     //focusConfirm: false,
     confirmButtonText: 'Done',
@@ -86,9 +101,13 @@ const ModalInput = async (params, uri) => {
       for(let field of form) {
         let input = Swal.getPopup().querySelector("[data-id='" + field.key + "']")
         let type = input.getAttribute("data-type")
-        debugger
         if (type !== 'file' && type !== 'checkbox') {
           response[field.key] = input.value
+          debugger
+          if (field.required && input.value.length === 0) {
+            alert(`${field.title || field.key} value must exist`) 
+            return false
+          }
         }
         if (type === 'checkbox') {
           response[field.key] = input.checked

package/server/public/opener.js

@@ -38,7 +38,6 @@ document.addEventListener("click", async (e) => {
     }
   }
   if (el) {
-    debugger
     e.preventDefault()
     e.stopPropagation()
     let run = el.getAttribute("data-run")

package/server/public/style.css

@@ -98,6 +98,31 @@ body.dark .dynamic.selected {
   background: rgba(0,0,0,0.05);
   */
 }
+
+
+.loader-container {
+  background: rgba(0,0,0,0.2) !important;
+}
+body.dark .loader-container {
+  background: rgba(0,0,0,0.3) !important;
+}
+.loader-dialog {
+  padding: 100px;
+}
+body.dark .loader-popup {
+  background: rgba(255,255,255,0.07) !important;
+  color: whitesmoke;
+}
+.swal2-popup.loader-popup {
+  font-size: 12px;
+  letter-spacing: 1px;
+  background: rgba(0,0,0,0.6);
+  width: 200px !important;
+  border-radius: 50px !important;
+  color: white;
+}
+
+
 .type-tab {
   display: flex;
   align-items: center;
@@ -153,10 +178,10 @@ body.dark .type-tabs {
 .navheader {
   backdrop-filter: blur(16px);
 
-  /*
   padding: 15px 10px 5px;
-  */
+  /*
   padding: 15px;
+  */
 }
 .navheader .btn2 {
   text-transform: lowercase;
@@ -1469,7 +1494,8 @@ body.dark .swal2-modal input {
 .swal2-modal input[type=checkbox] {
   width: 14px;
   height: 14px;
-  background: white;
+  background: whitesmoke;
+  margin: 0;
   margin-right: 5px;
 }
 .swal2-modal input[type=checkbox]:checked {
@@ -1477,7 +1503,12 @@ body.dark .swal2-modal input {
 }
 .swal2-modal .checkbox-row {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
+  text-align: left;
+}
+.swal2-modal .checkbox-row h5 {
+  margin: 0;
+  font-size: 14px;
 }
 .swal2-container {
   font-size: 14px !important;
@@ -1790,7 +1821,8 @@ body.dark .not-running-apps, body.dark .running-apps {
 }
 */
 .running-apps .line img {
-  border: 3px solid  #82bc09;
+  border-left: 10px solid #82bc09;
+  padding-left: 10px;
   /*
   border: 3px solid #8fd400;
   */
@@ -1798,6 +1830,13 @@ body.dark .not-running-apps, body.dark .running-apps {
   border-radius: 5px;
   */
 }
+body.dark .not-running-apps .line img {
+  border-left: 10px solid rgba(255,255,255,0.1);
+}
+.not-running-apps .line img {
+  border-left: 10px solid rgba(0,0,0,0.04);
+  padding-left: 10px;
+}
 /*
 .running-apps .line.align-top h3 .col .title {
   color: #8fd400;

package/server/views/app.ejs

@@ -78,14 +78,18 @@ body aside {
   */
   border-right: 1px solid rgba(0,0,0,0.04);
   height: 100%;
+  padding-bottom: 100px;
+  box-sizing: border-box;
 }
 body.dark aside {
   background: var(--dark-bg);
   border-right: 1px solid rgba(255,255,255,0.04);
 }
 aside {
+/*
   display: flex;
   flex-direction: column;
+  */
   width: 200px;
   overflow: auto;
   box-sizing: border-box;
@@ -379,6 +383,7 @@ body.dark .frame-link.selected {
   width: 100%;
   */
   word-break: break-word;
+  padding-right: 10px;
   /*
   margin-right: 10px;
   */
@@ -425,6 +430,7 @@ body.dark .grid-btns .btn2 {
   flex-grow: 1;
   display: flex;
   align-items: center;
+  padding-right: 10px;
 }
 .label i {
   margin-right: 10px;
@@ -551,7 +557,7 @@ body.dark #location {
 #location {
   background: rgba(0,0,0,0.04);
   padding: 10px;
-  margin: 0 10px;
+  margin: 0 0 0 10px;
   font-size: 12px;
   font-family: verdana;
   box-sizing: border-box;
@@ -559,6 +565,17 @@ body.dark #location {
   border: none;
   outline: none;
 }
+body.dark #open-location {
+  background: rgba(255,255,255,0.03);
+  color: white;
+}
+#open-location {
+  border: none;
+  background: rgba(0,0,0,0.04);
+  padding: 10px;
+  margin-right: 10px;
+  font-size: 14px;
+}
 .bar {
   -webkit-app-region: no-drag !important;
   cursor: auto;
@@ -602,24 +619,6 @@ body.dark .submenu {
   margin-left: 15px;
   box-sizing: border-box;
 }
-.loader-dialog {
-  padding: 10px;
-}
-body.dark .loader-popup {
-  background: rgba(0,0,0,0.2);
-  color: whitesmoke;
-}
-.loader-popup {
-  text-transform: uppercase;
-  font-size: 12px;
-  letter-spacing: 1px;
-  padding: 20px;
-  background: rgba(0,0,0,0.2);
-  color: white;
-}
-body.dark .loader-container {
-  background: rgba(255,255,255,0.3);
-}
 #menu-mobile {
   display: none;
 }
@@ -746,6 +745,7 @@ body.dark .appcanvas {
 <a href="/network" class='btn2'><div><i class="fa-solid fa-wifi"></i></div><div>Network</div></a>
 <a href="/connect" class='btn2'><div><i class="fa-solid fa-circle-user"></i></div><div>Connect</div></a>
 <input type='url' id='location' readonly value="<%=execUrl%>">
+<a id='open-location' target="_blank"><i class="fa-solid fa-arrow-up-right-from-square"></i></a>
 <div class='nav-btns'>
   <a class='btn2' href="<%=portal%>" target="_blank"><div><i class="fa-solid fa-question"></i></div><div>Help</div></a>
   <button class='btn2' id='genlog'><div><i class="fa-solid fa-laptop-code"></i></div><div>Logs</div></button>
@@ -784,14 +784,9 @@ body.dark .appcanvas {
           <div class='tab'>
             <i class='fa-solid fa-pen-to-square'></i> Edit
           </div>
-          <div class='loader'><i class="fa-solid fa-caret-down"></i><i class="fa-solid fa-caret-up hidden"></i></div>
+          <div class='loader'><i class="fa-solid fa-angle-down"></i><i class="fa-solid fa-angle-up hidden"></i></div>
         </div>
         <div class='edit-group editsubmenu submenu hidden'>
-          <a <%=config.init_required ? 'data-init' : ''%> class='btn header-item frame-link' href="/prototype?type=init&path=<%=path%>">
-            <div class='tab'>
-              <i class='fa-solid fa-bolt'></i> Initialize
-            </div>
-          </a>
           <!--
           <a class='btn header-item frame-link' href="/prototype?type=extension&path=<%=path%>">
             <div class='tab'>
@@ -816,15 +811,20 @@ body.dark .appcanvas {
     </div>
   </div>
   <div class='m n system' data-type="n">
-    <a target="<%=src%>" href="<%=src%>" class='btn header-item frame-link' data-index="0">
+    <a target="<%=src%>" href="<%=src%>" class='btn header-item frame-link' data-index="0" data-mode="refresh">
       <div class='tab'><i class="fa-regular fa-folder-open"></i> Files <div class='disk-usage'></div></div>
     </a>
+    <a <%=config.init_required ? 'data-init' : ''%> class='btn header-item frame-link' href="/prototype?type=init&path=<%=path%>" target="/prototype?type=init&path=<%=path%>" data-index="1" data-mode="refresh">
+      <div class='tab'>
+        <i class='fa-solid fa-bolt'></i> Initialize
+      </div>
+    </a>
     <% if (profile || feed) { %>
       <div class='btn header-item frame-link revealer' data-group='.info-group'>
         <div class='tab'>
           <i class='fa-solid fa-circle-info'></i> Info
         </div>
-        <div class='loader'><i class="fa-solid fa-caret-down"></i><i class="fa-solid fa-caret-up hidden"></i></div>
+        <div class='loader'><i class="fa-solid fa-angle-down"></i><i class="fa-solid fa-angle-up hidden"></i></div>
       </div>
       <div class='info-group submenu hidden'>
         <% if (profile) { %>
@@ -848,7 +848,7 @@ body.dark .appcanvas {
       <div class='tab'>
         <i class='fa-solid fa-gear'></i> Settings
       </div>
-      <div class='loader'><i class="fa-solid fa-caret-down"></i><i class="fa-solid fa-caret-up hidden"></i></div>
+      <div class='loader'><i class="fa-solid fa-angle-down"></i><i class="fa-solid fa-angle-up hidden"></i></div>
     </div>
     <div class='config-group submenu hidden'>
       <a target="/share/<%=name%>" href="/share/<%=name%>", class="btn header-item frame-link" data-index="2" data-mode="refresh">
@@ -1020,11 +1020,6 @@ body.dark .appcanvas {
   //  }
   }
   const renderSelection = (e, force) => {
-    let init = document.querySelector("[data-init]")
-    if (init) {
-      location.href = init.href
-      return
-    }
     let selection = null
     <% if (type === "run" && env.PINOKIO_SCRIPT_DEFAULT && env.PINOKIO_SCRIPT_DEFAULT.toString().toLowerCase() === "true") { %>
       selection = document.querySelector("[data-default]")
@@ -1107,10 +1102,13 @@ body.dark .appcanvas {
 
         //document.querySelector("#location").value = url
 
+        document.querySelector("#open-location").setAttribute('href', target.href)
         if (target.pathname.startsWith("/run")) {
           document.querySelector("#location").value = target.pathname.slice(4)
-        } else {
+        } else if (target.pathname.startsWith("/api")) {
           document.querySelector("#location").value = target.pathname
+        } else {
+          document.querySelector("#location").value = target.href
         }
 
 
@@ -1574,8 +1572,8 @@ body.dark .appcanvas {
       e.stopPropagation()
       let group = target.getAttribute("data-group")
       document.querySelector(group).classList.toggle("hidden")
-      target.querySelector(".loader .fa-caret-down").classList.toggle("hidden")
-      target.querySelector(".loader .fa-caret-up").classList.toggle("hidden")
+      target.querySelector(".loader .fa-angle-down").classList.toggle("hidden")
+      target.querySelector(".loader .fa-angle-up").classList.toggle("hidden")
       return
     }
 
@@ -1699,12 +1697,19 @@ body.dark .appcanvas {
       } else {
         if (target.classList.contains("reveal")) {
           // nested menu
-          target.closest(".dynamic").classList.toggle("selected")
-          target.closest(".nested-menu").querySelector(".submenu").classList.toggle("hidden")
-          target.querySelector(".loader .fa-caret-down").classList.toggle("hidden")
-          target.querySelector(".loader .fa-caret-up").classList.toggle("hidden")
           e.preventDefault()
           e.stopPropagation()
+          <% if (type === 'run') { %>
+            // run mode => switch to dev mode
+            location.pathname = location.pathname + "/browse"
+          <% } else { %>
+            // dev mode => already dev. reveal the hidden menu
+            target.closest(".dynamic").classList.toggle("selected")
+            target.closest(".nested-menu").querySelector(".submenu").classList.toggle("hidden")
+            target.querySelector(".loader .fa-angle-down").classList.toggle("hidden")
+            target.querySelector(".loader .fa-angle-up").classList.toggle("hidden")
+          <% } %>
+          return
         } else {
           //location.hash = target.target
 
@@ -1815,6 +1820,11 @@ body.dark .appcanvas {
       })
     })
   }
+  let init = document.querySelector("[data-init]")
+  console.log("init")
+  if (init) {
+    init.click()
+  }
   window.addEventListener('message', (event) => {
 
     // only process the event it's coming from pinokio

package/server/views/connect.ejs

@@ -112,13 +112,13 @@ main {
   padding: 80px;
   text-align: center;
 }
-.head .desc {
-  opacity: 0.7;
-  padding: 10px;
+.desc {
+  padding: 10px 0;
 }
 .head h3 {
-  font-size: 20px;
+  font-size: 40px;
   text-transform: uppercase;
+  font-weight: lighter;
   margin: 0;
 }
 .head h3 i {
@@ -128,12 +128,10 @@ body.dark .card {
   color: white;
 }
 .card {
+  padding: 30px;
+  display:flex;
   text-decoration: none;
-  width: 200px;
   color: rgba(0,0,0,0.9);
-  text-align: center;
-  height: 400px;
-  margin: 20px;
 }
 .card:hover {
   color: royalblue !important;
@@ -142,12 +140,83 @@ body.dark .card {
   opacity: 0.7;
 }
 .card h3 {
+  margin: 0;
   font-size: 30px;
   letter-spacing: -1px;
+  font-weight: lighter;
+}
+.card .col {
+  padding: 0 10px;
+  flex-grow: 1;
 }
 .card i {
   font-size: 50px;
 }
+body.dark .config {
+  color: white;
+}
+.config {
+/*
+  background: rgba(0,0,0,0.9);
+  */
+  color: black;
+  padding: 30px;
+  text-align: left;
+}
+.config-header {
+}
+.config-body {
+  padding-top: 20px;
+  margin-top: 20px;
+}
+.config .btn {
+  font-size: 16px;
+  font-weight: bold;
+  width: 100px;
+  background: royalblue;
+  flex-shrink: 0;
+}
+.config-row {
+  padding: 10px 20px 0 0;
+}
+.label {
+  padding-bottom: 5px;
+  font-weight: bold;
+}
+.config-row input[type=text] {
+  padding: 7px;
+}
+.header-label {
+  padding: 0;
+  font-size: 50px;
+  letter-spacing: -2px;
+  font-weight: lighter;
+  /*
+  text-align: center;
+  */
+  text-transform: capitalize;
+}
+.dark .container-row {
+  background: rgba(255, 255, 255, 0.04);
+}
+.container-row {
+  background: rgba(0, 0, 100, 0.04);
+  box-sizing: border-box;
+}
+.header-label-sub h1 {
+  font-size: 25px;
+  letter-spacing: -1px;
+  font-weight: lighter;
+}
+.header-label-sub {
+  font-size: 16px;
+  padding: 10px 0;
+  border-bottom: 1px solid rgba(0,0,0,0.1);
+}
+.header-label-sub .s {
+  padding: 10px 0;
+  opacity: 0.7;
+}
 </style>
 <script src="/hotkeys.min.js"></script>
 <script src="/sweetalert2.js"></script>
@@ -181,17 +250,31 @@ body.dark .card {
 </h1>
 </header>
 <main>
-  <div class='head'>
-    <h3><i class="fa-solid fa-circle-user"></i><br><br>Connect with 3rd Party</h3>
+  <div class='config'>
+    <div class='config-header'>
+      <div class='header-label'><i class='fa-solid fa-circle-user'></i> Connect</div>
+      <div class='desc'>Authenticate 3rd party services with Pinokio.</div>
+    </div>
   </div>
-  <div class='setup-items'>
+  <div class='container'>
+    <div class='container-row'>
     <% items.forEach((item) => { %>
       <a class='card' href="<%=item.url%>">
         <i class="<%=item.icon%>"></i>
-        <h3><%=item.title%></h3>
-        <div class='desc'><%=item.description%></div>
+        <div class='col'>
+          <h3><%=item.title%></h3>
+          <div class='desc'><%=item.description%></div>
+        </div>
       </a>
     <% }) %>
+    </div>
+      <!--
+      <div class='config-row' id='network_name'>
+        <div class='label'>Network Name</div>
+        <input id='name' type='text' value="name">
+      </div>
+      <button class='btn save'>Save</button>
+      -->
   </div>
 </main>
 </body>

package/server/views/network.ejs

@@ -162,7 +162,8 @@ a.ln:hover {
 .header-label {
   padding: 0;
   font-size: 50px;
-  letter-spacing: -1px;
+  letter-spacing: -2px;
+  font-weight: lighter;
   /*
   text-align: center;
   */
@@ -171,7 +172,7 @@ a.ln:hover {
 .header-label-sub h1 {
   font-size: 25px;
   letter-spacing: -1px;
-  font-weight: bold;
+  font-weight: lighter;
 }
 .header-label-sub {
   font-size: 16px;
@@ -235,6 +236,7 @@ td:first-child, th:first-child {
   max-width: 100px;
 }
 .container-row th h2 {
+  font-weight: lighter;
   font-size: 18px;
   margin: 0;
   text-transform: uppercase;

package/server/views/partials/dynamic.ejs

@@ -3,7 +3,7 @@
     <div class='nested-menu <%=item.display || ""%>'>
       <div class='btn header-item frame-link reveal'>
         <div class='tab'><%-item.btn%></div>
-        <div class='loader'><i class="fa-solid fa-caret-down"></i><i class="fa-solid fa-caret-up hidden"></i></div>
+        <div class='loader'><i class="fa-solid fa-angle-down"></i><i class="fa-solid fa-angle-up hidden"></i></div>
       </div>
       <div class='submenu hidden'>
         <%- include('./menu', { menu: item.menu }) %>
@@ -41,14 +41,12 @@
             <div class='loader shutdown online'>
             </div>
             <div class='loader shutdown hidden'>
-              <!--
-              <i class='fa-solid fa-spin fa-circle-notch'></i>
-              <i class="fa-solid fa-chevron-right"></i>
-              -->
               <button class='btn'>
               <i class="fa-solid fa-square"></i> Stop
               </button>
             </div>
+          <% } else { %>
+            <i class="fa-solid fa-angle-right"></i>
           <% } %>
         </a>
       <% } %>

package/server/views/partials/menu.ejs

@@ -3,7 +3,7 @@
     <div class='nested-menu <%=item.display || ""%>'>
       <div class='btn header-item frame-link reveal'>
         <div class='tab'><%-item.btn%></div>
-        <div class='loader'><i class="fa-solid fa-caret-down"></i><i class="fa-solid fa-caret-up hidden"></i></div>
+        <div class='loader'><i class="fa-solid fa-angle-down"></i><i class="fa-solid fa-angle-up hidden"></i></div>
       </div>
       <div class='submenu hidden'>
         <%- include('./menu', { menu: item.menu }) %>