From 6bff186a9d3caea2e9da6ccd7e71b33696a7cebc Mon Sep 17 00:00:00 2001
From: Gitea <gitea@fake.local>
Date: Mon, 18 Mar 2024 22:02:57 +0800
Subject: [PATCH] feat: update playground page with iframe preview

---
 land-server/tpls/playground.hbs          |  9 ++++++---
 land-server/tpls/static/css/style.css    |  5 +++++
 land-server/tpls/static/js/playground.js | 16 ++++++++++++++--
 land-worker/src/agent/sync.rs            |  4 ++--
 4 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/land-server/tpls/playground.hbs b/land-server/tpls/playground.hbs
index 803a3f45..68a36428 100644
--- a/land-server/tpls/playground.hbs
+++ b/land-server/tpls/playground.hbs
@@ -63,11 +63,14 @@
                     <div class="input-group input-group-sm px-4">
                         <input type="url" value="{{project.url}}" class="form-control" placeholder="access domain"
                             readonly>
-                        <button class="btn btn-outline-secondary" type="button"><i
-                                class='bx bx-refresh me-2'></i>Refresh</button>
+                        <button data-x-url="{{project.url}}" id="refresh-btn" class="btn btn-outline-success"
+                            type="button"><i class='bx bx-refresh me-2'></i>Refresh</button>
                     </div>
                 </div>
-                <div class="body" style="height: calc(100vh - 4.5rem)"></div>
+                <div class="body" style="height: calc(100vh - 4.5rem)">
+                    <iframe src="{{project.url}}" frameborder="0" id="playground-preview"
+                        sandbox="allow-forms allow-modals allow-same-origin allow-scripts allow-popups allow-popups-to-escape-sandbox"></iframe>
+                </div>
             </div>
         </div>
     </div>
diff --git a/land-server/tpls/static/css/style.css b/land-server/tpls/static/css/style.css
index 755bdb02..11c13190 100644
--- a/land-server/tpls/static/css/style.css
+++ b/land-server/tpls/static/css/style.css
@@ -112,4 +112,9 @@ html[data-bs-theme='dark'] .project-item>a:hover {
 
 #msg-toast {
     width: 440px;
+}
+
+#playground-preview {
+    width: 100%;
+    height: 100%;
 }
\ No newline at end of file
diff --git a/land-server/tpls/static/js/playground.js b/land-server/tpls/static/js/playground.js
index 991ff99a..876ab054 100644
--- a/land-server/tpls/static/js/playground.js
+++ b/land-server/tpls/static/js/playground.js
@@ -45,6 +45,7 @@ async function handleCheck() {
         }
         if (data.deploy_status == "success") {
             setWaitingDone();
+            document.getElementById("refresh-btn").click();
             return;
         }
         setWaitingMessage(data.deploy_status);
@@ -99,12 +100,23 @@ async function handleCheck() {
     });
 })();
 
+// convert data-x-timeago to local time string
 (() => {
-    // convert data-x-timeago to local time string
     const xTimeElements = document.querySelectorAll('[data-x-timeago]');
     xTimeElements.forEach((element) => {
         const xTime = element.getAttribute('data-x-timeago');
         const date = new Date(xTime);
         element.innerText = timeago.format(date, "en_US");
     });
-})();
\ No newline at end of file
+})();
+
+// refresh playground button
+(() => {
+    let btn = document.getElementById("refresh-btn");
+    btn.addEventListener("click", function () {
+        let iframe = document.getElementById("playground-preview");
+        console.log("iframe", iframe);
+        iframe.src = btn.value;
+        iframe.contentWindow.location.reload();
+    })
+})();
diff --git a/land-worker/src/agent/sync.rs b/land-worker/src/agent/sync.rs
index 37be105d..b9852eb5 100644
--- a/land-worker/src/agent/sync.rs
+++ b/land-worker/src/agent/sync.rs
@@ -6,7 +6,7 @@ use reqwest::header::AUTHORIZATION;
 use serde::{Deserialize, Serialize};
 use std::collections::HashMap;
 use tokio::sync::Mutex;
-use tracing::{debug, info, instrument, warn};
+use tracing::{info, instrument, warn};
 
 #[derive(Debug, Serialize, Deserialize)]
 pub struct Request {
@@ -68,7 +68,7 @@ async fn sync(addr: String, token: String, dir: String) -> Result<()> {
     if !status.is_success() {
         // if not modified, just return
         if status == reqwest::StatusCode::NOT_MODIFIED {
-            debug!("Not change, checksum: {}", data.checksum);
+            // debug!("Not change, checksum: {}", data.checksum);
             return Ok(());
         }
         warn!("Bad status code: {}", status);