Back button for tx page (#32)

gevulotnetwork · Jun 3, 2024 · a196282 · a196282
1 parent 3c39196
commit a196282
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 31 deletions.
diff --git a/api/api.go b/api/api.go
@@ -57,15 +57,13 @@ func (a *API) ServeHTTP(w http.ResponseWriter, r *http.Request) {
 }
 
 func (a *API) index(w http.ResponseWriter, r *http.Request) {
-	// nolint:errcheck
-	if pusher, ok := w.(http.Pusher); ok {
-		pusher.Push("/assets/style.css", nil)
-		pusher.Push("/assets/htmx.min.js", nil)
-		pusher.Push("/assets/sse.js", nil)
-		pusher.Push("/assets/Inter-Regular.ttf", nil)
-		pusher.Push("/assets/Inter-Bold.ttf", nil)
-		pusher.Push("/assets/Inter-SemiBold.ttf", nil)
+	if r.Header.Get("Hx-Request") == "true" {
+		w.Header().Set("HX-Push-Url", r.URL.EscapedPath())
+		a.table(w, r)
+		return
 	}
+
+	push(w)
 	if err := templates.Index().Render(r.Context(), w); err != nil {
 		slog.Error("failed to render index", slog.Any("err", err))
 	}
@@ -87,15 +85,7 @@ func (a *API) txPage(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	// nolint:errcheck
-	if pusher, ok := w.(http.Pusher); ok {
-		pusher.Push("/assets/style.css", nil)
-		pusher.Push("/assets/htmx.min.js", nil)
-		pusher.Push("/assets/sse.js", nil)
-		pusher.Push("/assets/Inter-Regular.ttf", nil)
-		pusher.Push("/assets/Inter-Bold.ttf", nil)
-		pusher.Push("/assets/Inter-SemiBold.ttf", nil)
-	}
+	push(w)
 
 	if err := templates.TxPage(txInfo).Render(r.Context(), w); err != nil {
 		slog.Error("failed to render TxPage", slog.Any("err", err))
@@ -193,3 +183,15 @@ func SearchFilter(f string, since time.Time) Filter {
 func NoFilter(e model.Event) bool {
 	return true
 }
+
+func push(w http.ResponseWriter) {
+	// nolint:errcheck
+	if pusher, ok := w.(http.Pusher); ok {
+		pusher.Push("/assets/style.css", nil)
+		pusher.Push("/assets/htmx.min.js", nil)
+		pusher.Push("/assets/sse.js", nil)
+		pusher.Push("/assets/Inter-Regular.ttf", nil)
+		pusher.Push("/assets/Inter-Bold.ttf", nil)
+		pusher.Push("/assets/Inter-SemiBold.ttf", nil)
+	}
+}
diff --git a/api/assets/style.css b/api/assets/style.css
@@ -670,6 +670,20 @@ input:checked+.slider:before {
   margin: 10px;
 }
 
+.tx-info-header>a {
+  float: right;
+  cursor: pointer;
+}
+
+.tx-info-header svg {
+  width: 16px;
+  height: 16px;
+}
+
+.tx-info-header svg path {
+  fill: #808080
+}
+
 #tx-info-blocks {
   display: flex;
   flex-direction: row;
@@ -857,8 +871,8 @@ body.dark .tx-log-row:nth-last-child(odd) {
   display: flex;
   margin-right: 10px;
   margin-left: auto;
-  min-width: 158px;
-  max-width: 158px;
+  min-width: 160px;
+  max-width: 160px;
 }
 
 .tx-log-timestamp span {

diff --git a/api/templates/index.templ b/api/templates/index.templ
@@ -144,7 +144,14 @@ templ Tx(tx model.TxInfo) {
 
 templ TxInfo(tx model.TxInfo) {
 	<div id="tx-info">
-		<div class="tx-info-header">Transaction Info</div>
+		<div class="tx-info-header">
+			<span>Transaction Info</span>
+			<a id="back-x" href="/" hx-trigger="click" hx-get="/" hx-swap="outerHTML" hx-target="#tx-container">
+				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+					<path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z"></path>
+				</svg>
+			</a>
+		</div>
 		<div id="tx-info-blocks">
 			<div id="tx-top">
 				<div id="tx-state-block">

diff --git a/api/templates/index_templ.go b/api/templates/index_templ.go