tigor/Redmage
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

view: added config route

Browse source
This commit is contained in:
Tigor Hutasuhut 2024-05-02 09:25:06 +07:00
parent e3bda647f3
commit 45540a1207
5 changed files with 65 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
server/routes/page_config.go Normal file
View file

@ -0,0 +1,17 @@
package routes
import (
"net/http"
"github.com/tigorlazuardi/redmage/pkg/log"
"github.com/tigorlazuardi/redmage/views"
"github.com/tigorlazuardi/redmage/views/configview"
)
func (routes *Routes) PageConfig(rw http.ResponseWriter, req *http.Request) {
vc := views.NewContext(routes.Config, req)
if err := configview.Config(vc).Render(req.Context(), rw); err != nil {
log.New(req.Context()).Err(err).Error("Failed to render config page")
}
}

1
server/routes/routes.go
View file

@ -65,5 +65,6 @@ func (routes *Routes) registerWWWRoutes(router chi.Router) {
r.Use(chimiddleware.SetHeader("Content-Type", "text/html; charset=utf-8"))
r.Get("/", routes.PageHome)
r.Get("/subreddits", routes.PageSubreddits)
r.Get("/config", routes.PageConfig)
})
}

36
views/components/navigation.templ
View file

@ -32,20 +32,7 @@ templ Navigation(c *views.Context) {
<span class="font-bold">Redmage</span>
</div>
<div class="divider"></div>
<ul>
<a href="/" class={ classForNavItem(c, "/") }>
<li class="hover:bg-accent hover:text-neutral-50 py-2 pl-4 hover:font-bold">Home</li>
</a>
<a href="/about" class={ classForNavItem(c, "/about") }>
<li class="hover:bg-accent hover:text-neutral-50 py-2 pl-4 hover:font-bold">About</li>
</a>
<a href="/config" class={ classForNavItem(c, "/config") }>
<li class="hover:bg-accent hover:text-neutral-50 py-2 pl-4 hover:font-bold">Config</li>
</a>
<a href="/browse" class={ classForNavItem(c, "/browse") }>
<li class="hover:bg-accent hover:text-neutral-50 py-2 pl-4 hover:font-bold">Browse</li>
</a>
</ul>
@navList(c)
</div>
</nav>
</div>
@ -91,20 +78,19 @@ templ Navbar(c *views.Context) {
@navList(c)
</nav>
<div class="flex-grow"></div>
@SelectThemeInput()
</div>
</header>
}
templ navList(c *views.Context) {
<ul class="flex flex-col flex-wrap">
<ul hx-boost="true" class="flex flex-col flex-wrap transition-all">
<a href="/" class={ classForNavItem(c, "/") }>
<li class="hover:bg-accent hover:text-neutral-50 py-2 text-center hover:font-bold">Home</li>
</a>
<a href="/about" class={ classForNavItem(c, "/about") }>
<li class="hover:bg-accent hover:text-neutral-50 py-2 text-center hover:font-bold">About</li>
</a>
<a href="/config" class={ classForNavItem(c, "/config") }>
<a hx-boost="false" href="/config" class={ classForNavItem(c, "/config") }>
<li class="hover:bg-accent hover:text-neutral-50 py-2 text-center hover:font-bold">Config</li>
</a>
<a href="/subreddits" class={ classForNavItem(c, "/subreddits") }>
@ -112,19 +98,3 @@ templ navList(c *views.Context) {
</a>
</ul>
}
templ SelectThemeInput() {
<select class="select select-ghost select-bordered w-full" data-choose-theme>
<option value="light">Light (Default)</option>
<option value="dark">Dark</option>
<option value="cupcake">Cupcake</option>
<option value="bumblebee">Bumblebee</option>
<option value="emerald">Emerald</option>
<option value="corporate">Corporate</option>
<option value="synthwave">Synthwave</option>
<option value="retru">Retro</option>
<option value="cyberpunk">Cyberpunk</option>
<option value="valentine">Valentine</option>
<option value="halloween">Halloween</option>
</select>
}

42
views/configview/configview.templ Normal file
View file

@ -0,0 +1,42 @@
package configview
import "github.com/tigorlazuardi/redmage/views"
import "github.com/tigorlazuardi/redmage/views/components"
templ Config(c *views.Context) {
@components.Doctype() {
@components.Head(c, components.HeadTitle("Redmage - Config"))
@components.Body(c) {
@ConfigContent(c)
}
}
}
templ ConfigContent(c *views.Context) {
<main class="prose min-w-full">
@components.Container() {
<h1>Config</h1>
<div class="divider"></div>
<div class="grid grid-cols-2 items-center">
<h2>Theme</h2>
@SelectThemeInput()
</div>
}
</main>
}
templ SelectThemeInput() {
<select class="select select-ghost select-bordered w-full" data-choose-theme>
<option value="light">Light (Default)</option>
<option value="dark">Dark</option>
<option value="cupcake">Cupcake</option>
<option value="bumblebee">Bumblebee</option>
<option value="emerald">Emerald</option>
<option value="corporate">Corporate</option>
<option value="synthwave">Synthwave</option>
<option value="retru">Retro</option>
<option value="cyberpunk">Cyberpunk</option>
<option value="valentine">Valentine</option>
<option value="halloween">Halloween</option>
</select>
}

4
views/utils/relative_schedule_time.templ
View file

@ -9,7 +9,7 @@ import "strconv"
script RelativeFromTimeText(id string, time int64, inter int) {
const el = document.getElementById(id)
el.parentNode.dataset.tip = dayjs.unix(time).tz(dayjs.tz.guess()).format('ddd, D MMM YYYY HH:mm:ss Z')
el.parentNode.dataset.tip = dayjs.unix(time).tz(dayjs.tz.guess()).format('ddd, D MMM YYYY HH:mm:ss')
const timeText = dayjs.unix(time).fromNow()
el.textContent = timeText
@ -34,7 +34,7 @@ script RelativeFromTimeText(id string, time int64, inter int) {
}
templ RelativeTimeNode(id string, time int64, class ...string) {
<div class="tooltip z-10" data-tip={ strconv.FormatInt(time, 10) }>
<div class="tooltip" data-tip={ strconv.FormatInt(time, 10) }>
<span
id={ id }
class={ strings.Join(class, " ") }