En cours de développement

internal/components/components.go

@@ -20,6 +20,7 @@ import (
 type Application interface {
 	ID() string
 	Name() string
+	Version() string
 	Debug() int
 	LookupEnv(suffix string) (string, bool)
 	Host() string

internal/gui/dashboard.go

@@ -0,0 +1,93 @@
+/*
+------------------------------------------------------------------------------------------------------------------------
+####### gui ####### Copyright (c) 2021 mls-361 ##################################################### MIT License #######
+------------------------------------------------------------------------------------------------------------------------
+*/
+
+package gui
+
+import (
+	g "github.com/maragudk/gomponents"
+	. "github.com/maragudk/gomponents/html"
+
+	"forge.chapril.org/armen/armen/internal/components"
+)
+
+type dashboard struct {
+	app     components.Application
+	storage components.Storage
+}
+
+func newDashboard(ccs *components.Components) *dashboard {
+	return &dashboard{
+		app:     ccs.Application,
+		storage: ccs.Storage,
+	}
+}
+
+func (d *dashboard) title(title string) g.Node {
+	return Div(
+		Class("title"),
+		g.Text(title),
+	)
+}
+
+func (d *dashboard) empty() g.Node {
+	return Div(
+		Class("value"),
+	)
+}
+
+func (d *dashboard) value(name string) g.Node {
+	return Div(
+		Class("value"),
+		Span(
+			Class("label"),
+			g.Text(name),
+		),
+		Span(
+			Class(name),
+			g.Text("0"),
+		),
+	)
+}
+
+func (d *dashboard) content() g.Node {
+	return Div(
+		Class("dashboard"),
+		Div(
+			Class("panel"),
+			Div(
+				d.title("jobs"),
+				Hr(),
+				d.value("todo"),
+				d.value("pending"),
+				d.value("succeeded"),
+				d.value("failed"),
+				Hr(),
+				d.value("total"),
+			),
+		),
+		Div(
+			Class("panel"),
+			Div(
+				d.title("workflows"),
+				Hr(),
+				d.empty(),
+				d.value("running"),
+				d.value("succeeded"),
+				d.value("failed"),
+				Hr(),
+				d.value("total"),
+			),
+		),
+	)
+}
+
+func (d *dashboard) build() g.Node {
+	return buildPage(d.app, "dashboard", d.content())
+}
+
+/*
+######################################################################################################## @(°_°)@ #######
+*/

internal/gui/gui.go

@@ -12,25 +12,22 @@ import (
 	"forge.chapril.org/armen/armen/internal/components"
 )
 
-type gui struct {
-	storage components.Storage
-}
-
-func newGUI(ccs *components.Components) *gui {
-	return &gui{
-		storage: ccs.Storage,
-	}
-}
-
 func Build(ccs *components.Components) {
-	gui := newGUI(ccs)
 	router := ccs.Router
 
+	router.ServeFiles("/static/*filepath", http.Dir("static"))
+
 	router.Get("/", http.HandlerFunc(func(w http.ResponseWriter, _ *http.Request) {
-		_ = gui.Home().Render(w)
+		_ = newDashboard(ccs).
+			build().
+			Render(w)
 	}))
 
-	router.ServeFiles("/static/*filepath", http.Dir("static"))
+	router.Get("/dashboard", http.HandlerFunc(func(w http.ResponseWriter, _ *http.Request) {
+		_ = newDashboard(ccs).
+			build().
+			Render(w)
+	}))
 }
 
 /*

internal/gui/home.go

@@ -1,44 +0,0 @@
-/*
-------------------------------------------------------------------------------------------------------------------------
-####### gui ####### Copyright (c) 2021 mls-361 ##################################################### MIT License #######
-------------------------------------------------------------------------------------------------------------------------
-*/
-
-package gui
-
-import (
-	g "github.com/maragudk/gomponents"
-	. "github.com/maragudk/gomponents/html"
-)
-
-func (gui *gui) Home() g.Node {
-	return page(
-		"home",
-		"workflows",
-		Div(
-			Class("dashboard"),
-			Div(
-				Class("total panel"),
-				P(
-					Class("value"),
-					g.Text("57"),
-				),
-				P(
-					g.Text("total"),
-				),
-			),
-			Div(
-				Class("failed panel"),
-				g.Text("failed"),
-			),
-			Div(
-				Class("running panel"),
-				g.Text("running"),
-			),
-		),
-	)
-}
-
-/*
-######################################################################################################## @(°_°)@ #######
-*/

internal/gui/layout.go

@@ -7,34 +7,58 @@
 package gui
 
 import (
+	"fmt"
+
 	g "github.com/maragudk/gomponents"
+	c "github.com/maragudk/gomponents/components"
 	. "github.com/maragudk/gomponents/html"
+
+	"forge.chapril.org/armen/armen/internal/components"
 )
 
-func container(nodes ...g.Node) g.Node {
+func container(node g.Node) g.Node {
 	return Div(
 		Class("container"),
-		g.Group(nodes),
+		node,
+	)
+}
+
+func navbarLink(name, href, page string) g.Node {
+	active := name == page
+
+	return A(
+		c.Classes{
+			"item":   true,
+			"active": active,
+		},
+		g.Text(name),
+		Href(href),
 	)
 }
 
-func page(title, class string, content g.Node) g.Node {
+func buildPage(app components.Application, name string, content g.Node) g.Node {
 	return Doctype(
 		HTML(
 			Lang("en"),
 			Head(
 				Meta(Charset("utf-8")),
 				Meta(Name("viewport"), Content("width=device-width, initial-scale=1")),
-				TitleEl(g.Text(title)),
-				Link(Rel("stylesheet"), Href("/static/css/app.css"), Type("text/css")),
+				TitleEl(g.Textf("%s - %s", app.Name(), name)),
+				Link(Rel("stylesheet"), Href(fmt.Sprintf("/static/css/%s.css", name)), Type("text/css")),
 			),
 			Body(
-				container(
-					Main(
-						Class(class),
-						content,
+				Header(
+					container(
+						Div(
+							Class("navbar"),
+							navbarLink(app.Name(), "/", name),
+							navbarLink("dashboard", "/dashboard", name),
+							navbarLink("jobs", "/dashboard", name),
+							navbarLink("workflows", "/dashboard", name),
+						),
 					),
 				),
+				container(Main(content)),
 			),
 		),
 	)

static/css/common.css

@@ -1,13 +1,19 @@
 /*
 ------------------------------------------------------------------------------------------------------------------------
-####### css ####### Copyright (c) 2021 mls-361 ##################################################### MIT License #######
+####### common ####### Copyright (c) 2021 mls-361 ################################################## MIT License #######
 ------------------------------------------------------------------------------------------------------------------------
 */
 
-@charset "utf-8";
-
-@import url("normalize.css");
-@import url("variables.css");
+:root {
+    --color: #eeeeee;
+    --bg-color: #1b2b34;
+    --blue1: #28c2d1;
+    --blue2: #0277bd;
+    --green: #5bc254;
+    --orange: orange;
+    --red: #f24c4c;
+    --yellow: #ffc107;
+}
 
 html, body {
     color: var(--color);
@@ -18,48 +24,29 @@ html, body {
     max-width: 80rem;
     margin-left: auto;
     margin-right: auto;
-    padding-left: 1rem;
-    padding-right: 1rem;
-}
-
-main {
-    margin-top: 2rem;
+    padding: 1rem;
 }
 
-.dashboard {
+.navbar {
     display: flex;
-    flex-direction: row;
     flex-wrap: wrap;
     justify-content: center;
 }
 
-.panel {
+.navbar .item {
+    text-decoration: none;
     margin: 5px;
-    min-width: 21rem;
-    min-height: 20rem;
-    text-align: center;
-    font-size: 1.5rem;
-    color: black;
-}
-
-.panel > p {
-}
-
-.total {
-    background-color: #0277bd;
-}
-
-.failed {
-    background-color: #f24c4c;
+    color: var(--color);
 }
 
-.running {
-    background-color: #28c2d1;
+.navbar .item.active {
+    text-decoration: none;
+    margin: 5px;
+    color: var(--blue1);
 }
 
-p.value {
-    font-size: 4rem;
-    font-weight: bold;
+.navbar .item:hover {
+    color: var(--blue2);
 }
 
 /*

static/css/dashboard.css

@@ -0,0 +1,50 @@
+/*
+------------------------------------------------------------------------------------------------------------------------
+####### dashboard ####### Copyright (c) 2021 mls-361 ############################################### MIT License #######
+------------------------------------------------------------------------------------------------------------------------
+*/
+
+@charset "utf-8";
+
+@import url("normalize.css");
+@import url("common.css");
+
+.dashboard {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.panel {
+    margin: 5px;
+    background-color: #333333;
+    padding: 1rem;
+}
+
+.title {
+    font-size: 3em;
+}
+
+.value {
+    width: 300px;
+    height: 50px;
+    font-size: 1.5em;
+}
+
+.label {
+    display: inline-block;
+    width: 180px;
+}
+
+.todo, .pending, .running, .succeeded, .failed, .total {
+    display: inline-block;
+    padding: 5px;
+    width: 120px;
+    text-align: center;
+    background-color: gray; /*AFAC*/
+}
+
+/*
+######################################################################################################## @(°_°)@ #######
+*/
+

static/css/variables.css

@@ -1,15 +0,0 @@
-/*
-------------------------------------------------------------------------------------------------------------------------
-####### css ####### Copyright (c) 2021 mls-361 ##################################################### MIT License #######
-------------------------------------------------------------------------------------------------------------------------
-*/
-
-:root {
-    --color: #ffffff;
-    --bg-color: #1b2b34;
-}
-
-/*
-######################################################################################################## @(°_°)@ #######
-*/
-