Browse Source

En cours de développement

master
mls-361 1 year ago
parent
commit
53a936f5a5
  1. 1
      internal/components/components.go
  2. 93
      internal/gui/dashboard.go
  3. 23
      internal/gui/gui.go
  4. 44
      internal/gui/home.go
  5. 42
      internal/gui/layout.go
  6. 57
      static/css/common.css
  7. 50
      static/css/dashboard.css
  8. 15
      static/css/variables.css

1
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

93
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())
}
/*
######################################################################################################## @(°_°)@ #######
*/

23
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)
}))
}
/*

44
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"),
),
),
)
}
/*
######################################################################################################## @(°_°)@ #######
*/

42
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)),
),
),
)

57
static/css/app.css → 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);
}
/*

50
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*/
}
/*
######################################################################################################## @(°_°)@ #######
*/

15
static/css/variables.css

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