pinokiod 3.9.0 → 3.9.3

package/server/views/app.ejs

@@ -9,11 +9,20 @@
 <link href="/css/brands.min.css" rel="stylesheet">
 <link href="/markdown.css" rel="stylesheet"/>
 <link href="/noty.css" rel="stylesheet"/>
+<link href="/filepond.min.css" rel="stylesheet" />
+<link href="/filepond-plugin-image-preview.min.css" rel="stylesheet" />
+<link href="/filepond-plugin-image-edit.min.css" rel="stylesheet" />
 <link href="/style.css" rel="stylesheet"/>
 <% if (agent === "electron") { %>
   <link href="/electron.css" rel="stylesheet"/>
 <% } %>
 <style>
+.online {
+  width: 10px;
+  height: 10px;
+  background: yellowgreen;
+  border-radius: 10px;
+}
 #menu {
   display: flex;
 }
@@ -29,7 +38,9 @@
   */
 }
 #menu.margin {
+/*
   padding: 5px;
+  */
 }
 #menu.margin i {
   display: none;
@@ -44,6 +55,7 @@ html, body {
 }
 body {
   display: flex;
+  flex-direction: column;
 }
 .menu {
   overflow: auto;
@@ -133,7 +145,9 @@ body.dark .header-item .btn2 {
   */
   height: 80px;
   width: 80px;
+  /*
   border-radius: 10px;
+  */
   object-fit: contain;
   display: inline-block;
   /*
@@ -173,7 +187,13 @@ body.dark #new-window {
   color: white;
   */
 }
+/*
+.dark .app-info {
+  background: rgba(255,255,255,0.04);
+}
+*/
 .app-info {
+  
 /*
   display: flex;
   */
@@ -181,18 +201,66 @@ body.dark #new-window {
   text-align: center;;
   font-weight: bold;
   align-items: center;
-  padding: 20px 0px;
+  /*
+  background: rgba(0,0,0,0.04);
+  */
+}
+.folderbuttons {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0px;
+}
+.header-btns {
+  padding: 0 !important;
+}
+body.dark .header-btns {
+  border-top: 1px solid rgba(255,255,255,0.04);
 }
-.app-info i {
-  font-size: 60px;
+.app-info-edit {
+  text-decoration: none;
+  color: black;
+  border-bottom: 1px solid rgba(255,255,255,0.1);
+}
+/*
+.dark .app-info-edit {
+  border-top: 1px solid rgba(255,255,255,0.2);
+  border-bottom: 1px solid rgba(255,255,255,0.2);
+}
+*/
+.dark .app-info-edit:hover {
+  background: rgba(0,0,0,0.2);
+}
+.app-info-edit:hover{
+  background: rgba(0,0,0,0.05);
+}
+.app-info-edit i{
+  display: block;
+}
+.app-info-edit, .app-info-copy {
+  font-weight: normal;
+
+  /*
+  border-radius: 20px;
+  */
+  font-size: 12px;
+  padding: 15px 5px;
+  /*
+  margin: 10px 20px 0;
+  */
 }
-.app-info > * {
+.app-info-card {
+  padding: 10px !important;
+}
+.app-info .btn {
+  width: 100%;
+}
+.app-info-card > * {
   padding: 5px;
   color: var(--light-color);
   text-decoration: none;
   box-sizing: border-box;
 }
-body.dark .app-info > * {
+body.dark .app-info-card > * {
   color: var(--dark-color);
 }
 .footer {
@@ -428,10 +496,12 @@ nav .logo {
 }
 body.dark #location {
   color: white;
+  background: rgba(255,255,255,0.03);
 }
 #location {
-  background: none;
-  padding: 15px;
+  background: rgba(0,0,0,0.04);
+  padding: 10px;
+  margin: 0 10px;
   font-size: 12px;
   font-family: verdana;
   box-sizing: border-box;
@@ -515,6 +585,31 @@ body.dark .loader-container {
   margin-right: 5px;
   font-size: 16px !important;
 }
+
+
+.custom-label {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none; /* Let clicks fall through to FilePond */
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.5);
+  z-index: 5;
+}
+.appcanvas {
+  display: flex;
+  flex-grow: 1;
+  border-top: 1px solid rgba(0, 0,0 ,0.04);
+}
+body.dark .appcanvas {
+  border-top: 1px solid rgba(255,255,255,0.04);
+}
+
 @media only screen and (max-width: 480px) {
   nav .btn2 {
     width: auto !important;
@@ -574,43 +669,126 @@ body.dark .loader-container {
 <script src="/Socket.js"></script>
 <script src="/noty.js"></script>
 <script src="/notyq.js"></script>
+<script src="/filepond-plugin-file-validate-type.min.js"></script>
+<script src="/filepond-plugin-image-exif-orientation.min.js"></script>
+<script src="/filepond-plugin-image-preview.min.js"></script>
+<script src="/filepond-plugin-image-edit.min.js"></script>
+<script src="/filepond-plugin-image-crop.min.js"></script>
+<script src="/filepond-plugin-image-resize.min.js"></script>
+<script src="/filepond-plugin-image-transform.min.js"></script>
+<script src="/filepond.min.js"></script>
+<script src="/fseditor.js"></script>
 </head>
 <body class='<%=theme%>' data-platform="<%=platform%>">
+<header class='navheader grabbable'>
+<h1>
+<a class='home' href="/"><i class="fa-solid fa-house"></i></a>
+<button class='btn2' id='back'><div><i class="fa-solid fa-chevron-left"></i></div><div>Prev</div></button>
+<button class='btn2' id='forward'><div><i class="fa-solid fa-chevron-right"></i></div><div>Next</div></button>
+<a class='btn2 create-new' id='create-new-folder'><div><i class='fa-solid fa-plus'></i></div><div>New</div></a>
+<a class='btn2' id='explore' href="/?mode=explore"><div><i class="fa-solid fa-globe"></i></div><div>Discover</div></a>
+<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>
+<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>
+  <a id='downloadlogs' download class='hidden btn2' href="/pinokio/logs.zip"><div><i class="fa-solid fa-download"></i></div><div>Download logs</div></a>
+  <a class='btn2' href="/?mode=settings"><div><i class="fa-solid fa-gear"></i></div><div>Settings</div></a>
+  <% if (agent === "electron") { %>
+    <a href="/" target="_blank" class='btn2' features="browser"><div><i class="fa-solid fa-square-up-right"></i></div><div>Open</div></a>
+  <% } else { %>
+    <a href="/" target="_blank" class='btn2'><div><i class="fa-solid fa-square-up-right"></i></div><div>Open</div></a>
+  <% } %>
+  <button id='new-window' title='open a new window' class='btn2'><div><i class="fa-solid fa-plus"></i></div><div>Window</div></button>
+</div>
+</h1>
+</header>
+<div class='appcanvas'>
 <aside class='active'>
   <div class='header-top header-item'>
     <div class='app-info'>
-      <% if (config.icon) { %>
-        <img src="<%=rawpath%>/<%=config.icon%>?raw=true"/>
-      <% } else { %>
-        <i class="fa-regular fa-circle-dot"></i>
-      <% } %>
-      <div><%=config.title%></div>
+      <div class='app-info-card'>
+        <% if (config.icon) { %>
+          <img src="<%=config.icon%>"/>
+        <% } else { %>
+          <i class="fa-regular fa-circle-dot"></i>
+        <% } %>
+        <div><%=config.title%></div>
+        <div class="folderpath">/api/<%=name%></div>
+      </div>
+      <div class='header-btns'>
+        <a class='btn header-item frame-link' href="/prototype">
+          <div class='tab'>
+            <i class='fa-solid fa-bolt'></i> Setup
+          </div>
+        </a>
+        <button class='btn header-item frame-link' id='edit-toggle'>
+          <div class='tab'>
+            <i class='fa-solid fa-pen-to-square'></i> Edit
+          </div>
+        </button>
+      </div>
+      <div class='editsubmenu submenu hidden'>
+        <div class='btn header-item frame-link' id='edit'>
+          <div class='tab'><i class="fa-solid fa-pencil"></i> Edit info</div>
+        </div>
+        <div class='btn header-item frame-link' id='move'>
+          <div class='tab'><i class="fa-solid fa-right-to-bracket"></i> Move folder</div>
+        </div>
+        <div class='btn header-item frame-link' id='copy'>
+          <div class='tab'><i class="fa-solid fa-copy"></i> Copy folder</div>
+        </div>
+        <div class='btn header-item frame-link' id='delete' data-name="<%=name%>">
+          <div class='tab'><i class="fa-solid fa-trash-can"></i> Delete folder</div>
+        </div>
+      </div>
     </div>
   </div>
   <div class='m n system' data-type="n">
     <!--<a data-index="0" target="<%=src%>" href="<%=src%>" class='btn header-item frame-link'>-->
+    <!--
+    <div id='copy' data-name="<%=name%>" class='btn header-item frame-link'>
+      <div class='tab'><i class="fa-solid fa-copy"></i> Copy</div>
+    </div>
     <div id='delete' data-name="<%=name%>" class='btn header-item frame-link'>
       <div class='tab'><i class="fa-solid fa-trash-can"></i> Delete</div>
     </div>
+    -->
     <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 class='disk-usage'></div></div>
     </a>
+    <div class='dynamic'>
+      <% if (plugin_menu) { %>
+      <%- include('./partials/dynamic', { dynamic: plugin_menu, }) %>
+      <% } %>
+    </div>
+    <!--
+    <a target="run_frame" href="/run/<%=name%>" class='btn header-item frame-link' data-index="1">
+      <div class='tab'><i class="fa-solid fa-bolt-lightning"></i> Run...</div>
+    </a>
+    -->
+    <!--
+    <a target="_blank" href="/terminal/<%=name%>/<%=Date.now()%>" class='btn header-item frame-link' data-index="1">
+      <div class='tab'><i class="fa-solid fa-terminal"></i> Terminal</div>
+    </a>
+    -->
     <a target="_blank" href="<%=profile%>" class='btn header-item frame-link'>
       <div class='tab'><i class="fa-regular fa-circle-user"></i> Publisher</div>
     </a>
     <a target="_blank" href="<%=feed%>" class='btn header-item frame-link'>
       <div class='tab'><i class="fa-solid fa-rss"></i> Newsfeed</div>
     </a>
-    <a target="/share/<%=name%>" href="/share/<%=name%>", class="btn header-item frame-link" data-index="1" data-mode="refresh">
+    <a target="/share/<%=name%>" href="/share/<%=name%>", class="btn header-item frame-link" data-index="2" data-mode="refresh">
       <div class='tab'><i class="fa-solid fa-wifi"></i> Share</div>
     </a>
-    <a target="/env/api/<%=name%>" href="/env/api/<%=name%>", class="btn header-item frame-link" data-index="1" data-mode="refresh">
+    <a target="/env/api/<%=name%>" href="/env/api/<%=name%>", class="btn header-item frame-link" data-index="3" data-mode="refresh">
       <div class='tab'><i class="fa-solid fa-gear"></i> Configure</div>
     </a>
   </div>
   <div class='m h menu' data-type='h'>
     <% if (config.menu) { %>
-    <%- include('./partials/menu', { menu: config.menu }) %>
+    <%- include('./partials/menu', { menu: config.menu, }) %>
     <% } %>
   </div>
   <div class='m s temp-menu' data-type='s'>
@@ -631,13 +809,6 @@ body.dark .loader-container {
     <button class='btn header-item' id='reload'><div class='tab'><i class="fa-solid fa-rotate-right"></i> Refresh</div></button>
   </div>
   -->
-  <div class='grid-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>Debug</div></button>
-    <a id='downloadlogs' download class='hidden btn2' href="/pinokio/logs.zip"><div><i class="fa-solid fa-download"></i></div><div>Download logs</div></a>
-    <a class='btn2' href="/"><div><i class="fa-solid fa-house"></i></div><div>Home</div></a>
-    <button class='btn2' id='new-window' title='open a new window'><div><i class="fa-solid fa-plus"></i></div><div>Window</div></button>
-  </div>
   <!--
   <div class='grid-btns'>
     <a class='btn2' href="/?mode=explore" id='explore'><div><i class="fa-solid fa-globe"></i></div><div>Discover</div></a>
@@ -655,11 +826,12 @@ body.dark .loader-container {
   </div>
 <% } else { %>
   <div class='container'>
+    <!--
     <nav>
       <div class='bar'>
         <button class='btn2' id='menu-mobile'><i class="fa-solid fa-bars"></i></button>
         <button class='btn2' id='menu'>
-          <img src="<%=rawpath%>/<%=config.icon%>?raw=true"/>
+          <img src="<%=config.icon%>"/>
           <i class="fa-solid fa-arrow-right-to-bracket fa-rotate-180"></i>
         </button>
         <% if (agent === "electron") { %>
@@ -677,6 +849,7 @@ body.dark .loader-container {
         <input type='url' id='location' readonly>
       </div>
     </nav>
+    -->
     <main class='browserview'>
       <% if (false) { %>
         <% if (config.menu) { %>
@@ -689,9 +862,15 @@ body.dark .loader-container {
       <% } %>
     </main>
   </div>
+  </div>
   <script>
+  let started_script
   let loaded = {}
   let cursorIndex = 0;
+  let interacted = false
+  document.addEventListener("click", (e) => {
+    interacted = true
+  })
   const n = new N()
   const getTarget = (href) => {
     let u
@@ -777,8 +956,38 @@ body.dark .loader-container {
   //  }
   }
   const renderSelection = (e, force) => {
-    // if the menu has a default item, or if the url specifies a selection
-    let selection = document.querySelector("[data-default]")
+    console.log("renderSelection", { e, force, started_script })
+    // if the renderSelection was NOT caused by the user (e is null) ==> automatic execution
+    // and the user has already interacted with the page, don't renderselection
+    console.log("> 1")
+//    let selection
+//    if (interacted) {
+//      if (e) {
+//        selection = document.querySelector("[data-default]")
+//      } else {
+//        if (started_script) {
+//          selection = document.querySelector(`[data-key="${started_script}"]`)
+//          started_script = null
+//        } else {
+//          return
+//        }
+//      }
+//    } else {
+//      selection = document.querySelector("[data-default]")
+//    }
+      let selection = document.querySelector("[data-default]")
+
+//    console.log("> 3")
+//    let selection
+//    if (started_script) {
+//      selection = document.querySelector(`[data-filepath="${started_script}"]`)
+//      started_script = null
+//    } else {
+//      // if the menu has a default item, or if the url specifies a selection
+//      selection = document.querySelector("[data-default]")
+//    }
+    console.log({ selection })
+//    let selection = document.querySelector("[data-default]")
     if (selection || location.hash && location.hash.length > 0) {
       let target
       if (location.hash && location.hash.length > 0) {
@@ -851,12 +1060,15 @@ body.dark .loader-container {
 
         // Instantiate a frame with the selected target's href
         let url = target.href
-        document.querySelector("#open-browser").href = url
-        document.querySelector("#clone-tab").setAttribute("data-href", url)
+//        document.querySelector("#open-browser").href = url
+//        document.querySelector("#clone-tab").setAttribute("data-href", url)
         document.querySelector("#location").value = url
 
 
         // select the selected target element (tab)
+        document.querySelectorAll(".frame-link").forEach((el) => {
+          el.classList.remove("selected")
+        })
         target.classList.add("selected")
 
         // hide all frames
@@ -1080,25 +1292,11 @@ body.dark .loader-container {
 
     }
   }
-  console.log("loaded before", loaded)
   <% if (type === "run" && env.PINOKIO_SCRIPT_DEFAULT && env.PINOKIO_SCRIPT_DEFAULT.toString().toLowerCase() === "true") { %>
   renderSelection()
   <% } %>
   //renderCursor()
-  console.log("loaded after", loaded)
   //Reporter()
-  document.querySelector("#reload").addEventListener("click", (e) => {
-  /*
-    // get selected
-    let target = document.querySelector(".selected").target
-    location.hash = target
-    // force refresh
-    renderSelection(null, true)
-    */
-    let frame = document.querySelector("iframe:not(.hidden)")
-    frame.src = frame.src
-  //  frame.contentWindow.location.reload();
-  })
   <% if (agent === "electron") { %>
     document.querySelector("#back").addEventListener("click", (e) => {
       nav("back")
@@ -1108,43 +1306,6 @@ body.dark .loader-container {
     })
   <% } %>
 
-  document.querySelector("#new-tab").addEventListener("click", async (e) => {
-    const u = prompt("url")
-
-    if (u) {
-      let url
-      if (/^[ ]*http:/i.test(u)) {
-        url = u
-      } else if (/^[ ]*https:/i.test(u)) {
-        url = u
-      } else {
-        let o = {}
-        if (/^[0-9.:]/.test(u)) {
-          o.forceHttp = true
-        } else if (/^localhost/.test(u)) {
-          o.forceHttp = true
-        } else {
-          o.forceHttps = true
-        }
-        url = normalizeURL(u, o)
-      }
-
-      if (url && url.trim().length > 0) {
-        console.log("url", url)
-        const { tab, frame } = await addTab(url)
-        tab.click()
-      }
-    }
-  })
-  document.querySelector("#clone-tab").addEventListener("click", async (e) => {
-    const url = document.querySelector("#clone-tab").getAttribute("data-href")
-    if (url && url.trim().length > 0) {
-      console.log("url", url)
-      const { tab, frame } = await addTab(url)
-      tab.click()
-    }
-  })
-
   const syncTabs = async () => {
     let tabs = []
     document.querySelectorAll(".temp-menu .frame-link").forEach((el) => {
@@ -1215,12 +1376,95 @@ body.dark .loader-container {
       document.querySelector("#menu").classList.toggle("margin")
     })
   }
-  document.querySelector(".app-info").addEventListener("click", async (e) => {
+  document.querySelector("#edit-toggle").addEventListener("click", async (e) => {
     e.preventDefault()
     e.stopPropagation()
-    location.hash = ""
-    renderSelection()
-
+    document.querySelector(".editsubmenu").classList.toggle("hidden")
+  })
+  document.querySelector("#move").addEventListener("click", async (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+    await FSEditor({
+      title: `<%=config.title%>`,
+      description: `<%=config.description%>`,
+      old_path: `<%=name%>`,
+      icon: `<%=config.icon%>`,
+      iconpath: `<%=config.iconpath%>`,
+      move: true,
+      edit: true,
+      redirect: (new_path) => {
+        return new_path
+      }
+    })
+  })
+  document.querySelector("#edit").addEventListener("click", async (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+    await FSEditor({
+      title: `<%=config.title%>`,
+      description: `<%=config.description%>`,
+      old_path: `<%=name%>`,
+      icon: `<%=config.icon%>`,
+      iconpath: `<%=config.iconpath%>`,
+      edit: true,
+      redirect: (new_path) => {
+        return new_path
+      }
+    })
+  })
+  document.querySelector("#copy").addEventListener("click", async (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+    await FSEditor({
+      title: `<%=config.title%>`,
+      description: `<%=config.description%>`,
+      old_path: `<%=name%>`,
+      icon: `<%=config.icon%>`,
+      iconpath: `<%=config.iconpath%>`,
+      copy: true,
+      edit: true,
+      redirect: (new_path) => {
+        return new_path
+      }
+    })
+    /*
+    e.preventDefault()
+    e.stopPropagation()
+    let folder = prompt("Enter a folder name to copy to")
+    if (folder.includes(' ')) {
+      alert("Please use a folder name without a space")
+      return
+    }
+    Swal.fire({
+      html: `<i class="fa-solid fa-circle-notch fa-spin"></i> Copying from <%=name%> to ${folder}`,
+      customClass: {
+        container: "loader-container",
+        popup: "loader-popup",
+        htmlContainer: "loader-dialog",
+        footer: "hidden",
+        actions: "hidden"
+      }
+    });
+    let res = await fetch("/copy", {
+      method: "post",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        src: "<%=name%>",
+        dest: folder
+      })
+    }).then((res) => {
+      return res.json()
+    })
+    Swal.close()
+    if (res.error) {
+      alert(res.error)
+    } else {
+      console.log(res)
+      location.href = res.success
+    }
+    */
   })
   document.querySelector("#delete").addEventListener("click", async (e) => {
     e.preventDefault()
@@ -1423,25 +1667,29 @@ body.dark .loader-container {
     fetch("/du/<%=name%>").then((res) => {
       return res.json()
     }).then((res) => {
-      let val
-      //let k = 1024
-      let k = 1000
-      if (res.du > k * k * k) {
-        // GB
-        val = `${Math.floor(res.du/k/k/k * 100) / 100} GB`
-      } else if (res.du > k * k) {
-        // MB
-        val = `${Math.floor(res.du/k/k * 100) / 100} MB`
+      if (res.du > 0) {
+        let val
+        //let k = 1024
+        let k = 1000
+        if (res.du > k * k * k) {
+          // GB
+          val = `${Math.floor(res.du/k/k/k * 100) / 100} GB`
+        } else if (res.du > k * k) {
+          // MB
+          val = `${Math.floor(res.du/k/k * 100) / 100} MB`
+        } else {
+          // KB
+          val = `${Math.floor(res.du/k * 100) / 100} KB`
+        }
+        console.log("DU VAL", val)
+        document.querySelector(".disk-usage").innerHTML = val
       } else {
-        // KB
-        val = `${Math.floor(res.du/k * 100) / 100} KB`
       }
-      console.log("DU VAL", val)
-      //document.querySelector(".disk-usage").innerHTML = `<i class="fa-regular fa-hard-drive"></i> ${val}`
-      document.querySelector(".disk-usage").innerHTML = val
     })
   }
   const refresh = async (silent, options) => {
+
+
     if (options && options.nodelay) {
     } else {
       await new Promise((resolve, reject) => {
@@ -1454,6 +1702,13 @@ body.dark .loader-container {
       return res.text()
     })
     document.querySelector(".menu").innerHTML = html
+
+    const dynamic = await fetch("<%=dynamic%>").then((res) => {
+      return res.text()
+    })
+    console.log({ dynamic })
+    document.querySelector(".dynamic").innerHTML = dynamic
+
     location.hash = ""
 
     // render the selected frame only if not silent
@@ -1507,7 +1762,7 @@ body.dark .loader-container {
             } else if (event.data.action.type === "location") {
               let url = event.data.action.url
               console.log({ action: event.data.action })
-              document.querySelector("#open-browser").href = url
+              //document.querySelector("#open-browser").href = url
               //document.querySelector("#location").innerHTML = url
               document.querySelector("#location").value = url
             }
@@ -1516,9 +1771,24 @@ body.dark .loader-container {
             console.log("asideHidden", asideHidden)
             if (!asideHidden) {
               // refresh only if aside 
+              console.log("type", event.data.type)
               if (event.data.type === 'disconnect') {
                 console.log("Refresh 1")
                 refresh()
+//              } else if (event.data.type === 'start') { 
+//                // script start => select the tab
+//                started_script = event.data.id
+//                /*
+//                id := /Users/x/pinokio/quick/system/claude/pinokio.js
+//                need to transform to /run/Dia/system/claude/pinokio.js
+//                */
+//                let run_frame = document.querySelector(".browserview iframe[name=run_frame]")
+//                const url = run_frame.contentWindow.location.pathname;
+//                console.log("url", url)
+//                //run_frame.name = event.data.id
+//                run_frame.name = url
+////                run_frame.remove()
+//                refresh()
               } else {
                 console.log("Refresh 2")
                 refresh()