check r.Header.Get("HX-Request") == ""

datewu · Sep 12, 2023 · 7086295 · 7086295
1 parent 8ae5f68
commit 7086295
Show file tree

Hide file tree

Showing 10 changed files with 171 additions and 141 deletions.
diff --git a/cmd/api/handlers.go b/cmd/api/handlers.go
@@ -321,8 +321,16 @@ func (m *myHandler) middlerware(next http.HandlerFunc) http.HandlerFunc {
 }
 
 func (m *myHandler) profile(w http.ResponseWriter, r *http.Request) {
-	htmx := fmt.Sprintf(`<span> hello %s</span>`, m.user)
-	handler.OKText(w, htmx)
+	if r.Header.Get("HX-Request") != "" {
+		htmx := fmt.Sprintf(`<span> hello %s</span>`, m.user)
+		handler.OKText(w, htmx)
+		return
+	}
+	u := struct {
+		User string
+	}{m.user}
+	front.ProfileTpl.Execute(w, u)
+
 }
 
 func (m *myHandler) deploys(w http.ResponseWriter, r *http.Request) {
@@ -339,7 +347,11 @@ func (m *myHandler) deploys(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 	view.AddDeploys(ds)
-	view.Render(w)
+	if r.Header.Get("HX-Request") == "" {
+		view.Render(w, m.user)
+		return
+	}
+	view.Render(w, "")
 }
 
 func (m *myHandler) sts(w http.ResponseWriter, r *http.Request) {
@@ -356,7 +368,11 @@ func (m *myHandler) sts(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 	view.AddSts(ss)
-	view.Render(w)
+	if r.Header.Get("HX-Request") == "" {
+		view.Render(w, m.user)
+		return
+	}
+	view.Render(w, "")
 }
 
 func (m *myHandler) updateResouce(w http.ResponseWriter, r *http.Request) {

diff --git a/front/index-layout.html b/front/index-layout.html
diff --git a/front/index.html b/front/index.html
@@ -0,0 +1,44 @@
+{{ define "content" }}
+<div id="content">
+  <div class="url-btns">
+    <p id="url">https://set-img.deoops.com/api/v1/auth/setimg</p>
+    <div>
+      <button hx-on="click: copyPastboard(this)">copy</button>
+      <button hx-on="click: toogle(this)">more</button>
+    </div>
+  </div>
+  <div id="detail">
+    <pre>
+curl -XPOST https://set-img.deoops.com/api/v1/auth/setimg \
+-H 'Authorization: $TOKEN'                                \
+--data-binary                                             \ 
+'{"container_name":"CHANGE-ME", "kind":"CHANGE-deploy/sts",
+"img":"${ { steps.prep.outputs.tags } }",
+"name":"CHANGE-ME","namespace":"CHANGE-ME"}'
+    </pre>
+  </div>
+</div>
+
+<script>
+  function copyPastboard(t) {
+    // Get the text field
+    var copyText = document.getElementById("url");
+    // Copy the text inside the text field
+    navigator.clipboard.writeText(copyText.innerText);
+    t.innerText = 'copied!'
+    t.blur()
+  }
+
+  function toogle(t) {
+    var detail = document.getElementById("detail");
+    if (t.innerText === "less") {
+      t.innerText = "more";
+      detail.style.display = "none";
+    } else {
+      detail.style.display = "block";
+      t.innerText = "less";
+    }
+    t.blur();
+  }
+</script>
+{{ end }}
diff --git a/front/index.tpl.go b/front/index.tpl.go
@@ -7,11 +7,10 @@ import (
 	_ "embed"
 )
 
-//go:embed index-layout.html
+//go:embed index.html
 var indexHtml string
 
-var indexTpl = template.Must(template.New("index").
-	Delims("{i{", "}i}").Parse(indexHtml))
+var indexTpl = template.Must(template.New("index").Parse(indexHtml + layoutHtml))
 
 // IndexView ...
 type IndexView struct {

diff --git a/front/layout.html b/front/layout.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/static/fav.svg" />
+  <link rel="stylesheet" href="/static/page.css" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <script src="https://unpkg.com/htmx.org@1.9.5"
+    integrity="sha384-xcuj3WpfgjlKF+FXhSQFQ0ZNr39ln+hwjN3npfM9VBnUskLolQAcN80McRIVOPuO"
+    crossorigin="anonymous"></script>
+  <title>k8s管理工具</title>
+</head>
+
+<body hx-boost="true" hx-indicator="#in-spinner">
+  <!-- <img id="in-spinner" class="htmx-indicator" alt="spinner" src="/static/spinner.svg"> -->
+  <img id="in-spinner" alt="spinner" src="/static/spinner.svg">
+  <div class="app">
+    <a href="/" class="logo">
+      <img src="/static/fav.svg" alt="logo" />
+      <p>
+        kubernetes部署工具
+      </p>
+    </a>
+    {{ if .User }}
+    <div hx-target="#content" hx-push-url="true">
+      <a href="/my/profile"> {{ .User }} </a>
+      <a href="/my/deploys">Deploys</a>
+      <a href="/my/sts">Statefulsets</a>
+    </div>
+    {{ else }}
+    <div id="profile" hx-get="/login/github/init" hx-swap="outerHTML" hx-trigger="load"></div>
+    {{ end }}
+    <div id="content">
+      {{ template "content" .}}
+    </div>
+  </div>
+  <footer>
+    <div hx-get="/version" hx-swap="outerHTML" hx-trigger="revealed">version</div>
+  </footer>
+</body>
+
+</html>
diff --git a/front/layout.tpl.go b/front/layout.tpl.go
@@ -0,0 +1,12 @@
+package front
+
+import (
+	"html/template"
+
+	_ "embed"
+)
+
+//go:embed layout.html
+var layoutHtml string
+
+var layoutTpl = template.Must(template.New("layout").Parse(layoutHtml))
diff --git a/front/profile.tpl.go b/front/profile.tpl.go
@@ -0,0 +1,16 @@
+package front
+
+import (
+	"html/template"
+
+	_ "embed"
+)
+
+var profileHtml = `
+{{- define "content"  }}
+  <span>welcome {{ .User }}</span>
+{{ end -}}
+`
+
+// ProfileTpl is the profile template.
+var ProfileTpl = template.Must(template.New("profile").Parse(profileHtml + layoutHtml))
diff --git a/front/static/page.css b/front/static/page.css
@@ -1,8 +1,7 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
 }
 
 img#in-spinner {
@@ -15,48 +14,22 @@ img#in-spinner.htmx-request {
   display: block;
 }
 
-
 .logo {
-  height: 6em;
-  padding: 1.5em;
+  display: flex;
+  align-items: center;
+  height: 2.5em;
+}
+
+.logo img{
+  height: 2.5em;
   will-change: filter;
   transition: filter 300ms;
 }
+
 .logo:hover {
   filter: drop-shadow(0 0 2em #646cffaa);
 }
 
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
 a {
   font-weight: 500;
   color: #646cff;
@@ -66,12 +39,6 @@ a:hover {
   color: #535bf2;
 }
 
-body {
-  margin: 0;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
 .app, footer {
   margin: auto;
   text-align: center;

diff --git a/front/table.html b/front/table.html
@@ -1,3 +1,4 @@
+{{ define "content" }}
 <table>
   <tr>
     <th colspan="5">{{ or .Description "deployments" }}</th>
@@ -53,4 +54,6 @@
     <td>no data</td>
     {{ end}}
   </tr>
-</table>
+</table>
+
+{{ end }}