feat: implementing tab switch

darklab8 · Mar 24, 2024 · 62d72e6 · 62d72e6
1 parent 7bda6c4
commit 62d72e6
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 28 deletions.
diff --git a/darkstat/common/shared.templ b/darkstat/common/shared.templ
@@ -1,18 +1,19 @@
 package common
 
 import (
-    "github.com/darklab8/fl-darkstat/darkstat/common/common_static"
-    "github.com/darklab8/fl-darkstat/darkstat/common/types"
+	"github.com/darklab8/fl-darkstat/darkstat/common/common_static"
+	"github.com/darklab8/fl-darkstat/darkstat/common/types"
 )
+
 templ Html5() {
 	<!DOCTYPE html>
 	<html>
-	<head>
-	<link rel="icon" type="image/x-icon" href={ types.GetCtx(ctx).StaticRoot + "common/favicon.ico" }/>
-	<title>{ "darkstat" }</title>
-	switch types.GetCtx(ctx).Theme {
-		case types.ThemeDark:
-			<style>
+		<head>
+			<link rel="icon" type="image/x-icon" href={ types.GetCtx(ctx).StaticRoot + "common/favicon.ico" }/>
+			<title>{ "darkstat" }</title>
+			switch types.GetCtx(ctx).Theme {
+				case types.ThemeDark:
+					<style>
 			:root {
 				--color_hover_link: #4183C4;
 				--color_link: #91C3F5;
@@ -22,21 +23,22 @@ templ Html5() {
 				color: #ddd;
 			}
 			</style>
-		case types.ThemeLight:
-			<style>
+				case types.ThemeLight:
+					<style>
 			:root {
 				--color_hover_link: #4183C4;
 				--color_link: #33618E;
 			}
 			</style>
-	}
-	@common_static.ResetCSS()
-	@common_static.CommonCSS()
-	@common_static.CustomCSS()
-	</head>
-	<body>
-	{ children... }
-	</body>
+			}
+			@common_static.ResetCSS()
+			@common_static.CommonCSS()
+			@common_static.CustomCSS()
+			<script src={ types.GetCtx(ctx).StaticRoot + "sortable.js" }></script>
+			<script src={ types.GetCtx(ctx).StaticRoot + "html.min.js" }></script>
+		</head>
+		<body>
+			{ children... }
+		</body>
 	</html>
-
-}
+}
diff --git a/darkstat/front/bases.templ b/darkstat/front/bases.templ
@@ -2,7 +2,7 @@ package front
 
 import (
 	"strconv"
-	"github.com/darklab8/fl-darkstat/darkstat/common"
+	"github.com/darklab8/fl-darkstat/darkstat/front/urls"
 	"github.com/darklab8/fl-darkstat/darkstat/common/types"
 	"github.com/darklab8/fl-configs/configs/configs_export"
 )
@@ -11,12 +11,29 @@ var (
 	Smth = "abc"
 )
 
+templ TabContent() {
+	<div id="tab-content" role="tabpanel" class="tab-content">
+		{ children... }
+	</div>
+}
+
 // https://www.cssscript.com/minimalist-table-sortable/#:~:text=Description%3A-,sorttable.,clicking%20on%20the%20table%20headers
 // https://www.cssscript.com/fast-html-table-sorting/
 templ BasesT(bases []configs_export.Base) {
-	@common.Html5() {
+	<style>
+	.tab-list {
+		.selected {
+			filter: brightness(85%);
+		}
+	}
+	</style>
+	<div class="tab-list" role="tablist">
+		<button hx-get={ types.GetCtx(ctx).SiteRoot + urls.Bases.ToString() } class="selected" role="tab" aria-selected="false" aria-controls="tab-content">Bases</button>
+		<button hx-get="/systems.html" role="tab" aria-selected="false" aria-controls="tab-content">Systems</button>
+	</div>
+	@TabContent() {
 		<style>
-			th, td {
+		th, td {
 				padding-left: 5px;
 				padding-bottom: 2px;
 				padding-top: 2px;
@@ -65,8 +82,6 @@ templ BasesT(bases []configs_export.Base) {
 			}
 
 		</style>
-		<script src={ types.GetCtx(ctx).StaticRoot + "sortable.js" }></script>
-		<script src={ types.GetCtx(ctx).StaticRoot + "html.min.js" }></script>
 		<div class="splitter">
 			<div id="table-wrapper">
 				<table class="sortable">
@@ -104,7 +119,7 @@ templ BasesT(bases []configs_export.Base) {
 	}
 }
 
-templ BasesInfo(info configs_export.Infocard) {
+templ BasesInfocard(info configs_export.Infocard) {
 	<style>
 		.infocard {
 			margin: 10px;

diff --git a/darkstat/front/index.templ b/darkstat/front/index.templ
@@ -0,0 +1,15 @@
+package front
+
+import (
+	"github.com/darklab8/fl-darkstat/darkstat/common/types"
+
+	"github.com/darklab8/fl-darkstat/darkstat/common"
+	"github.com/darklab8/fl-darkstat/darkstat/front/urls"
+)
+
+templ Index() {
+	// For loading https://htmx.org/examples/tabs-hateoas/
+	@common.Html5() {
+		<div id="tabs" hx-get={ types.GetCtx(ctx).SiteRoot + urls.Bases.ToString() } hx-trigger="load delay:100ms" hx-target="#tabs" hx-swap="innerHTML"></div>
+	}
+}
diff --git a/darkstat/front/systems.templ b/darkstat/front/systems.templ
@@ -0,0 +1,23 @@
+package front
+
+import (
+	"github.com/darklab8/fl-darkstat/darkstat/front/urls"
+	"github.com/darklab8/fl-darkstat/darkstat/common/types"
+)
+
+templ Systems() {
+	<style>
+	.tab-list {
+		.selected {
+			filter: brightness(85%);
+		}
+	}
+	</style>
+	<div class="tab-list" role="tablist">
+		<button hx-get={ types.GetCtx(ctx).SiteRoot + urls.Bases.ToString() } role="tab" aria-selected="false" aria-controls="tab-content">Bases</button>
+		<button hx-get="/systems.html" role="tab" class="selected" aria-selected="false" aria-controls="tab-content">Systems</button>
+	</div>
+	@TabContent() {
+		Here will be systems
+	}
+}
diff --git a/darkstat/front/urls/urls.go b/darkstat/front/urls/urls.go
@@ -5,5 +5,7 @@ import (
 )
 
 const (
-	Bases utils_types.FilePath = "index.html"
+	Index   utils_types.FilePath = "index.html"
+	Bases   utils_types.FilePath = "bases.html"
+	Systems utils_types.FilePath = "systems.html"
 )
diff --git a/darkstat/linker/linker.go b/darkstat/linker/linker.go
@@ -45,17 +45,25 @@ func (l *Linker) Link() *builder.Builder {
 
 	build := builder.NewBuilder()
 	build.RegComps(
+		builder.NewComponent(
+			urls.Index,
+			front.Index(),
+		),
 		builder.NewComponent(
 			urls.Bases,
 			front.BasesT(bases),
 		),
+		builder.NewComponent(
+			urls.Systems,
+			front.Systems(),
+		),
 	)
 
 	for _, base := range bases {
 		build.RegComps(
 			builder.NewComponent(
 				utils_filepath.Join(utils_types.FilePath("infocard"), utils_types.FilePath(base.Nickname)),
-				front.BasesInfo(base.Infocard),
+				front.BasesInfocard(base.Infocard),
 			),
 		)
 	}