pinokiod 3.24.0 → 3.26.0

package/server/views/net.ejs

@@ -360,6 +360,14 @@ body.dark .net {
   display: block;
   background: none;
 }
+.placeholder-icon {
+  font-size: 40px;
+  width: 50px;
+  height: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 @media only screen and (max-width: 480px) {
   .btn2 {
     padding: 5px;
@@ -449,200 +457,120 @@ body.dark .net {
       <% } %>
     <% }) %>
   <% } %>
-  <div class='tab'><i class="fa-solid fa-code"></i> Dev</div>
 </aside>
 <div class='container'>
-    <form class='search'>
-      <!--
-      <div class='app-btns'>
-        <a class='btn create-new' href="/init"><i class="fa-solid fa-plus"></i> Build</a>
-        <a class='btn' id='explore' href="/?mode=explore"><i class="fa-solid fa-magnifying-glass"></i> Discover</a>
+  <form class='search'>
+    <!--
+    <div class='app-btns'>
+      <a class='btn create-new' href="/init"><i class="fa-solid fa-plus"></i> Build</a>
+      <a class='btn' id='explore' href="/?mode=explore"><i class="fa-solid fa-magnifying-glass"></i> Discover</a>
+    </div>
+    -->
+    <input type='search' class="flexible" placeholder='Search apps'>
+  </form>
+  <div class='running-apps'>
+    <% if (current_host === host) { %>
+      <div class='section-header'>
+        <h3>
+          <div class='blank'></div>
+          <div class='col'>
+            <div class='grid-3'>
+              <div class='section'>
+                <h2><i class='fas fa-laptop-code'></i> Local</h2>
+                <div>accessible from this machine</div>
+              </div>
+              <div class='section'>
+                <h2><i class="fa-solid fa-wifi"></i> Network</h2><div>accessible from any machine on the local network</div>
+              </div>
+              <div class='section'>
+                <h2><i class="fa-solid fa-podcast"></i> Peer</h2><div>accessible from any pinokio peer on the local network <a class='explain' data-type='peer'>How to start a peer</a></div>
+              </div>
+            </div>
+          </div>
+        </h3>
       </div>
-      -->
-      <input type='search' class="flexible" placeholder='Search apps'>
-    </form>
-    <div class='running-apps'>
-      <% if (current_host === host) { %>
-        <div class='section-header'>
+      <% processes.forEach((item, index) => { %>
+        <div class='line align-top' data-index="<%=index%>" data-name="<%=item.name%>" data-title="<%=item.name%>" data-description="<%=item.internal_router.join(' ')%> <%=item.port%>">
           <h3>
-            <div class='blank'></div>
+            <div class='item-icon'>
+              <% if (favicons[item.external_ip]) { %>
+                <img src="<%=favicons[item.external_ip]%>">
+              <% } else { %>
+                <div class='placeholder-icon'>
+                  <i class="fa-solid fa-database"></i>
+                </div>
+              <!--
+                <img src="/pinokio-black.png">
+                -->
+              <% } %>
+            </div>
             <div class='col'>
+              <div class='title'><i class="fa-solid fa-circle"></i><span><%=titles[item.ip] || item.name%></span></div>
               <div class='grid-3'>
                 <div class='section'>
-                  <h2><i class='fas fa-laptop-code'></i> Local</h2>
-                  <div>accessible from this machine</div>
+                  <% item.internal_router.forEach((domain) => { %>
+                    <a class='net' target="_blank" href="https://<%=domain%>">https://<%=domain%></a>
+                  <% }) %>
+                  <a class='net' target="_blank" href="http://localhost:<%=item.port%>">http://localhost:<%=item.port%></a>
                 </div>
                 <div class='section'>
-                  <h2><i class="fa-solid fa-wifi"></i> Network</h2><div>accessible from any machine on the local network</div>
+                  <% if (item.external_ip) { %>
+                    <a class='net' target="_blank" href="http://<%=item.external_ip%>">http://<%=item.external_ip%></a>
+                  <% } %>
                 </div>
                 <div class='section'>
-                  <h2><i class="fa-solid fa-podcast"></i> Peer</h2><div>accessible from any pinokio peer on the local network <a class='explain' data-type='peer'>How to start a peer</a></div>
-                </div>
-              </div>
-            </div>
-          </h3>
-        </div>
-        <% processes.forEach((item, index) => { %>
-          <div class='line align-top' data-index="<%=index%>" data-name="<%=item.name%>" data-title="<%=item.name%>" data-description="<%=item.internal_router.join(' ')%> <%=item.port%>">
-            <h3>
-              <div class='item-icon'>
-                <% if (favicons[item.external_ip]) { %>
-                  <img src="<%=favicons[item.external_ip]%>">
-                <% } else { %>
-                  <img src="/pinokio-black.png">
-                <% } %>
-              </div>
-              <div class='col'>
-                <div class='title'><i class="fa-solid fa-circle"></i><span><%=titles[item.ip] || item.name%></span></div>
-                <div class='grid-3'>
-                  <div class='section'>
-                    <% item.internal_router.forEach((domain) => { %>
-                      <a class='net' target="_blank" href="https://<%=domain%>">https://<%=domain%></a>
-                    <% }) %>
-                    <a class='net' target="_blank" href="http://localhost:<%=item.port%>">http://localhost:<%=item.port%></a>
-                  </div>
-                  <div class='section'>
-                    <% if (item.external_ip) { %>
-                      <a class='net' target="_blank" href="http://<%=item.external_ip%>">http://<%=item.external_ip%></a>
-                    <% } %>
-                  </div>
-                  <div class='section'>
-                    <% item.external_router.forEach((domain) => { %>
-                      <a class='net' target="_blank" href="https://<%=domain%>">https://<%=domain%></a>
-                    <% }) %>
-                  </div>
+                  <% item.external_router.forEach((domain) => { %>
+                    <a class='net' target="_blank" href="https://<%=domain%>">https://<%=domain%></a>
+                  <% }) %>
                 </div>
               </div>
             </div>
-          </h3>
-        <% }) %>
-      <% } else { %>
-        <div class='section-header'>
-          <h3>
-            <div class='blank'></div>
-            <div class='col'>
-              <div class='grid-1'>
-                <div class='section'>
-                  <h2>Endpoints</h2><div>accessible through peer network</div>
-                </div>
+          </div>
+        </h3>
+      <% }) %>
+    <% } else { %>
+      <div class='section-header'>
+        <h3>
+          <div class='blank'></div>
+          <div class='col'>
+            <div class='grid-1'>
+              <div class='section'>
+                <h2>Endpoints</h2><div>accessible through peer network</div>
               </div>
             </div>
-          </h3>
-        </div>
-        <% processes.forEach((item, index) => { %>
-          <div class='line align-top' data-index="<%=index%>" data-name="<%=item.name%>" data-title="<%=item.name%>" data-description="<%=item.external_router.join(' ')%> <%=item.external_ip%>">
-            <h3>
-              <div class='item-icon'>
-                <% if (favicons[item.ip]) { %>
-                  <img src="<%=favicons[item.ip]%>">
-                <% } else { %>
-                  <img src="/pinokio-black.png">
-                <% } %>
-              </div>
-              <div class='col'>
-                <div class='title'><i class="fa-solid fa-circle"></i><span><%=titles[item.ip] || item.name%></span></div>
-                <div class='grid-1'>
-                  <div class='section'>
-                    <% if (item.external_ip) { %>
-                      <a class='net' target="_blank" href="http://<%=item.external_ip%>">http://<%=item.external_ip%></a>
-                    <% } %>
-                    <% item.external_router.forEach((domain) => { %>
-                        <a class='net' target="_blank" href="https://<%=domain%>">https://<%=domain%></a>
-                    <% }) %>
-                  </div>
-                </div>
-              </div>
-            </h3>
           </div>
-        <% }) %>
-      <% } %>
-      <% running.forEach((item) => { %>
-        <a href="<%=item.browser_url%>" data-description="<%=item.description%>" data-index="<%=item.index%>" data-name="<%=item.name%>" data-title="<%=item.name%>" data-uri="<%=item.uri%>" data-icon="<%=item.icon%>" data-path="<%=item.path%>"  data-iconpath="<%=item.iconpath ? item.iconpath : ''%>" class='line align-top'>
+        </h3>
+      </div>
+      <% processes.forEach((item, index) => { %>
+        <div class='line align-top' data-index="<%=index%>" data-name="<%=item.name%>" data-title="<%=item.name%>" data-description="<%=item.external_router.join(' ')%> <%=item.external_ip%>">
           <h3>
             <div class='item-icon'>
-              <% if (item.icon) { %>
-                <img src="<%=item.icon%>">
+              <% if (favicons[item.ip]) { %>
+                <img src="<%=favicons[item.ip]%>">
               <% } else { %>
-                <% if (theme === 'dark') { %>
-                  <img src="/pinokio-white.png">
-                <% } else { %>
-                  <img src="/pinokio-black.png">
-                <% } %>
+                <div class='placeholder-icon'>
+                  <i class="fa-solid fa-database"></i>
+                </div>
               <% } %>
             </div>
             <div class='col'>
-              <div class='uri'><%=item.filepath%></div>
-              <div class='title'><%=item.name%></div>
-              <div class='description'><%=item.description%></div>
-              <div class='menu-btns'>
-                <button class='btn browse' data-src="<%=item.browser_url%>/dev">
-                  <i class='fa-solid fa-code'></i> Dev
-                </button>
-                <button class='btn open-menu'>
-                  <i class="fa-solid fa-bars"></i><span> Menu</span>
-                </button>
-                <div class='context-menu collapsed'>
-                  <div class='context-menu-wrapper'>
-                    <button class='btn' data-filepath="<%=item.filepath%>">
-                      <i class="fa-solid fa-folder-open"></i> Open</button>
-                    </button>
-                    <button class='btn copy-menu' data-src="<%=item.browser_url%>/dev">
-                      <i class='fa-solid fa-copy'></i> Copy
-                    </button>
-                    <button class='btn move-menu' data-src="<%=item.browser_url%>/dev" data-disable="To move the folder, the app should not be running.">
-                      <i class="fa-solid fa-right-to-bracket"></i> Move
-                    </button>
-                    <button class='btn edit-menu' data-src="<%=item.browser_url%>/dev">
-                      <i class='fa-solid fa-pen-to-square'></i> Edit
-                    </button>
-                    <button class='btn del' data-src="<%=item.url%>" data-disable="To delete the folder, the app should not be running.">
-                      <i class="fa-solid fa-trash-can"></i> Delete
-                    </button>
-                  </div>
-                </div>
-                <% if (item.running_scripts) { %>
-                  <% item.running_scripts.forEach((s) => { %>
-                    <% if (s.id) { %>
-                      <button class='btn shutdown' data-id="<%=s.id%>" data-type="<%=s.type ? s.type : ''%>">
-                        <i class="fa-solid fa-stop"></i> Stop <%=s.name%>&nbsp;
-                        <i class='fa-solid fa-spin fa-circle-notch'></i>
-                      </button>
-                    <% } else { %>
-                      <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) => { %>
-                    <% if (btn.btn) { %>
-                      <button data-action="<%=btn.action ? JSON.stringify(btn.action) : ''%>" class='btn menu-btn'><%-btn.btn%></button>
-                    <% } %>
+              <div class='title'><i class="fa-solid fa-circle"></i><span><%=titles[item.ip] || item.name%></span></div>
+              <div class='grid-1'>
+                <div class='section'>
+                  <% if (item.external_ip) { %>
+                    <a class='net' target="_blank" href="http://<%=item.external_ip%>">http://<%=item.external_ip%></a>
+                  <% } %>
+                  <% item.external_router.forEach((domain) => { %>
+                      <a class='net' target="_blank" href="https://<%=domain%>">https://<%=domain%></a>
                   <% }) %>
                 </div>
-              <% } %>
-            </div>
-            <!--
-            <div class='spinner'>
-              <i class="fa-solid fa-chevron-right"></i>
+              </div>
             </div>
-            -->
           </h3>
-        </a>
+        </div>
       <% }) %>
-    </div>
-  <% if (list.length === 0) { %>
-    <div class='placeholder'>
-      <h1>Welcome.</h1>
-      <br>
-      <div>Get started by installing some Pinokio scripts.</div>
-      <a href="/?mode=explore" class='btn'><i class="fa-solid fa-globe"></i> Visit Discover Page</a>
-    </div>
-  <% } %>
+    <% } %>
+  </div>
 </div>
 </main>
 <script>

package/server/views/network.ejs

@@ -131,8 +131,10 @@ a.badge {
   text-decoration: none;
 }
 body.dark .btn {
-  color: white;
+  background: rgba(255,255,255,0.05) !important;
+  /*
   border: 1px solid rgba(255,255,255,0.3);
+  */
 }
 body.dark .badge {
   background: rgba(255,255,255,0.1);
@@ -588,7 +590,6 @@ input[type=search] {
         <a href="/net/<%=name%>" class='submenu tab'><i class="fa-brands fa-<%=brands[platform]%>"></i> <%=name%> (<%=current_host === host ? 'this machine' : host%>)</a>
       <% }) %>
     <% } %>
-    <div class='tab'><i class="fa-solid fa-code"></i> Dev</div>
   </aside>
   <div class='container'>
     <div class='config'>

package/server/views/partials/dynamic.ejs

@@ -15,7 +15,7 @@
         <div <%=item.default ? 'data-default' : ''%> data-action="<%=JSON.stringify(item.action)%>" class='btn header-item frame-link <%=item.display || ""%>'>
           <div class='tab'><%-item.btn%></div>
         </div>
-      <% } else if (item.run) { %>
+      <% } else if (item.run && typeof item.run === 'string') { %>
         <div data-run="<%=item.run%>" data-cwd="<%=item.cwd%>" class='btn header-item frame-link <%=item.display || ""%>'>
           <div class='tab'><%-item.btn%></div>
         </div>

package/server/views/start.ejs

@@ -0,0 +1,268 @@
+<html>
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
+<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="/markdown.css" rel="stylesheet"/>
+<link href="/noty.css" rel="stylesheet"/>
+<link href="/style.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 {
+  
+}
+  main {
+    width: 100%;
+    box-sizing: border-box;
+    max-width: 600px;
+    padding: 20px;
+    margin: 0 auto;
+  }
+
+header .btn {
+  font-family: Sans-serif;
+  display: block;
+  margin-left: 10px;
+  font-style: normal;
+  font-size: 12px;
+  font-weight: normal;
+  padding: 5px 10px;
+}
+.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.highlighted {
+  border: 5px solid red;
+}
+.env-item {
+/*
+  padding-top: 10px;
+  padding-bottom: 30px;
+  */
+  padding: 10px;
+  margin-bottom: 20px;
+}
+body.dark .comment {
+  border-left: 2px solid white;
+}
+.comment {
+  opacity: 0.8;
+  border-left: 2px solid black;
+  padding-left: 10px;
+}
+body.dark #save {
+  background: rgba(255,255,255,0.06);
+}
+#save {
+  width: 200px;
+  border-radius: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 14px;
+  font-weight: bold;
+}
+a#customize {
+  text-decoration: underline;
+  cursor: pointer;
+}
+.e {
+  padding: 10px 0;
+}
+#editor {
+  padding: 20px 0;
+}
+.center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+body {
+  display: block;
+}
+.card {
+  text-align: center;
+/*
+  display: flex;
+  */
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+.card img {
+  width: 100px;
+  border-radius: 10px;
+}
+.card .description {
+  opacity: 0.8;
+}
+.card .title {
+  font-weight: bold;
+  font-size: 20px;
+}
+.card .col {
+  padding-left: 10px;
+}
+h1 {
+  font-size: 50px;
+  padding-bottom: 20px;
+}
+footer {
+  background: none;
+  padding: 0;
+  text-align: right;
+  display: flex;
+  margin: 10px 0 20px 0;
+}
+footer .btn {
+  margin-left: 10px;
+  display: inline-block;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+
+}
+footer .btn.go-home {
+  margin-left: 0px;
+}
+.btn.home-button {
+  background: none !important;
+  margin: 0 !important;
+  font-size: 16px !important;
+}
+#editor {
+  height: auto;
+}
+.env-title {
+  font-weight: bold;
+  margin-bottom: 5px;
+}
+.env-description {
+  margin-bottom: 10px;
+}
+.warning {
+  padding: 10px;
+  margin: 10px 0 20px;
+  border-left: 5px solid rgba(0,0,0,0.1);
+}
+.warning a {
+  text-decoration: none;
+  color: royalblue;
+}
+.auto {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+}
+</style>
+</head>
+<body class='<%=theme%> center' data-agent="<%=agent%>">
+<main>
+  <div>
+    <div class='card'>
+      <img src="<%=image%>">
+      <div class='title'><%=name%></div>
+      <% if (link) { %>
+        <a href="<%=link%>" id='save' class='btn'>
+          <span class='save'><i class="fa-solid fa-play"></i> Launch</span>
+        </a>
+      <% } %>
+      <div class='auto'>
+        <input type='checkbox' <%=autolaunch ? 'checked' : ''%> id='autolaunch' />
+        <label for='autolaunch'>automatically launch</label>
+      </div>
+      <div class='message'></div>
+    </div>
+  </div>
+</main>
+<script>
+let checkbox = document.querySelector("#autolaunch")
+let save = document.querySelector("#save")
+document.querySelector("#autolaunch").addEventListener("change", (e) => {
+  console.log({ checked: checkbox.checked })
+  let url = new URL(save.href)
+  if (checkbox.checked) {
+    url.searchParams.set("autolaunch", "1")
+  } else {
+    url.searchParams.set("autolaunch", "0")
+  }
+  save.href = url.toString()
+})
+console.log({ checked: checkbox.checked })
+<% if (autolaunch) { %>
+document.querySelector(".message").innerHTML = `<i class="fas fa-circle-notch fa-spin"></i> launching...`
+setTimeout(() => {
+  if (checkbox.checked) {
+    document.querySelector("#save").click()
+  } else {
+    document.querySelector(".message").innerHTML = ""
+  }
+}, 2000)
+<% } %>
+</script>
+</body>
+</html>