view: added subreddits listing page
This commit is contained in:
parent
4876930563
commit
c26d9fa0b0
Binary file not shown.
25
server/routes/page_subreddits.go
Normal file
25
server/routes/page_subreddits.go
Normal file
|
@ -0,0 +1,25 @@
|
||||||
|
package routes
|
||||||
|
|
||||||
|
import (
|
||||||
|
"net/http"
|
||||||
|
|
||||||
|
"github.com/tigorlazuardi/redmage/pkg/log"
|
||||||
|
"github.com/tigorlazuardi/redmage/views"
|
||||||
|
"github.com/tigorlazuardi/redmage/views/subredditsview"
|
||||||
|
)
|
||||||
|
|
||||||
|
func (routes *Routes) PageSubreddits(rw http.ResponseWriter, r *http.Request) {
|
||||||
|
ctx, span := tracer.Start(r.Context(), "*Routes.PageSubreddits")
|
||||||
|
defer span.End()
|
||||||
|
|
||||||
|
data := subredditsview.Data{
|
||||||
|
// Subreddits: routes.API.SubredditsList(ctx),
|
||||||
|
}
|
||||||
|
|
||||||
|
c := views.NewContext(routes.Config, r)
|
||||||
|
|
||||||
|
if err := subredditsview.Subreddit(c, data).Render(r.Context(), rw); err != nil {
|
||||||
|
log.New(ctx).Err(err).Error("failed to render subreddits view")
|
||||||
|
rw.WriteHeader(http.StatusInternalServerError)
|
||||||
|
}
|
||||||
|
}
|
|
@ -64,5 +64,6 @@ func (routes *Routes) registerWWWRoutes(router chi.Router) {
|
||||||
r.Use(chimiddleware.RequestLogger(middleware.ChiLogger{}))
|
r.Use(chimiddleware.RequestLogger(middleware.ChiLogger{}))
|
||||||
r.Use(chimiddleware.SetHeader("Content-Type", "text/html; charset=utf-8"))
|
r.Use(chimiddleware.SetHeader("Content-Type", "text/html; charset=utf-8"))
|
||||||
r.Get("/", routes.PageHome)
|
r.Get("/", routes.PageHome)
|
||||||
|
r.Get("/subreddits", routes.PageSubreddits)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
13
views/components/dayjs.templ
Normal file
13
views/components/dayjs.templ
Normal file
|
@ -0,0 +1,13 @@
|
||||||
|
package components
|
||||||
|
|
||||||
|
templ Dayjs() {
|
||||||
|
<script src="/public/dayjs-1.11.10.min.js"></script>
|
||||||
|
<script src="/public/dayjs-relativeTime-1.11.10.min.js"></script>
|
||||||
|
<script src="/public/dayjs-utc-1.11.10.min.js"></script>
|
||||||
|
<script src="/public/dayjs-timezone-1.11.10.min.js"></script>
|
||||||
|
<script>
|
||||||
|
dayjs.extend(window.dayjs_plugin_relativeTime)
|
||||||
|
dayjs.extend(window.dayjs_plugin_utc)
|
||||||
|
dayjs.extend(window.dayjs_plugin_timezone)
|
||||||
|
</script>
|
||||||
|
}
|
|
@ -10,15 +10,6 @@ templ Head(vc *views.Context, extras ...templ.Component) {
|
||||||
<link rel="icon" href="/public/favicon.svg"/>
|
<link rel="icon" href="/public/favicon.svg"/>
|
||||||
<script src="/public/htmx-1.9.11.min.js"></script>
|
<script src="/public/htmx-1.9.11.min.js"></script>
|
||||||
<script src="/public/htmx-response-targets-1.9.11.min.js"></script>
|
<script src="/public/htmx-response-targets-1.9.11.min.js"></script>
|
||||||
<script src="/public/dayjs-1.11.10.min.js"></script>
|
|
||||||
<script src="/public/dayjs-relativeTime-1.11.10.min.js"></script>
|
|
||||||
<script src="/public/dayjs-utc-1.11.10.min.js"></script>
|
|
||||||
<script src="/public/dayjs-timezone-1.11.10.min.js"></script>
|
|
||||||
<script>
|
|
||||||
dayjs.extend(window.dayjs_plugin_relativeTime)
|
|
||||||
dayjs.extend(window.dayjs_plugin_utc)
|
|
||||||
dayjs.extend(window.dayjs_plugin_timezone)
|
|
||||||
</script>
|
|
||||||
<script src="/public/theme-change-2.0.2.min.js"></script>
|
<script src="/public/theme-change-2.0.2.min.js"></script>
|
||||||
if vc.Config.Bool("http.hotreload") {
|
if vc.Config.Bool("http.hotreload") {
|
||||||
<script src="/public/hot_reload.js"></script>
|
<script src="/public/hot_reload.js"></script>
|
||||||
|
|
|
@ -8,7 +8,10 @@ import "fmt"
|
||||||
|
|
||||||
templ Home(c *views.Context, data Data) {
|
templ Home(c *views.Context, data Data) {
|
||||||
@components.Doctype() {
|
@components.Doctype() {
|
||||||
@components.Head(c, components.HeadTitle("Redmage - Home"))
|
@components.Head(c,
|
||||||
|
components.Dayjs(),
|
||||||
|
components.HeadTitle("Redmage - Home"),
|
||||||
|
)
|
||||||
@components.Body(c) {
|
@components.Body(c) {
|
||||||
@HomeContent(c, data)
|
@HomeContent(c, data)
|
||||||
}
|
}
|
||||||
|
@ -19,7 +22,7 @@ templ Home(c *views.Context, data Data) {
|
||||||
//
|
//
|
||||||
// Use this template if request is HX-Boosted.
|
// Use this template if request is HX-Boosted.
|
||||||
templ HomeContent(c *views.Context, data Data) {
|
templ HomeContent(c *views.Context, data Data) {
|
||||||
<main id="main" class="prose min-w-full">
|
<main class="prose min-w-full">
|
||||||
@components.Container() {
|
@components.Container() {
|
||||||
if data.Error != "" {
|
if data.Error != "" {
|
||||||
@components.ErrorToast(data.Error)
|
@components.ErrorToast(data.Error)
|
||||||
|
@ -51,7 +54,7 @@ templ HomeContent(c *views.Context, data Data) {
|
||||||
<h2 class="mt-4">{ recently.Device.Name }</h2>
|
<h2 class="mt-4">{ recently.Device.Name }</h2>
|
||||||
for _, subreddit := range recently.Subreddits {
|
for _, subreddit := range recently.Subreddits {
|
||||||
<h4>
|
<h4>
|
||||||
<a class="text-primary" href={ templ.SafeURL(fmt.Sprintf("/subreddits/details/%s?device=%d", subreddit.Subreddit.Name, recently.Device.Slug)) }>
|
<a class="text-primary" href={ templ.SafeURL(fmt.Sprintf("/subreddits/details/%s?device=%s", subreddit.Subreddit.Name, recently.Device.Slug)) }>
|
||||||
{ subreddit.Subreddit.Name }
|
{ subreddit.Subreddit.Name }
|
||||||
</a>
|
</a>
|
||||||
- { strconv.Itoa(len(subreddit.Images)) } images
|
- { strconv.Itoa(len(subreddit.Images)) } images
|
||||||
|
|
29
views/subredditsview/subredditsview.templ
Normal file
29
views/subredditsview/subredditsview.templ
Normal file
|
@ -0,0 +1,29 @@
|
||||||
|
package subredditsview
|
||||||
|
|
||||||
|
import "github.com/tigorlazuardi/redmage/views"
|
||||||
|
import "github.com/tigorlazuardi/redmage/views/components"
|
||||||
|
|
||||||
|
templ Subreddit(c *views.Context, data Data) {
|
||||||
|
@components.Doctype() {
|
||||||
|
@components.Head(c, components.HeadTitle("Redmage - Subreddits"))
|
||||||
|
@components.Body(c) {
|
||||||
|
@SubredditContent(c, data)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
templ SubredditContent(c *views.Context, data Data) {
|
||||||
|
<main class="prose min-w-full">
|
||||||
|
@components.Container() {
|
||||||
|
<h1>Subreddits</h1>
|
||||||
|
<div class="divider"></div>
|
||||||
|
if len(data.Subreddits) == 0 {
|
||||||
|
<h3>You have not added any subreddits yet.</h3>
|
||||||
|
<p>Click <a class="text-primary" href="/subreddits/add">here</a> to add a new subreddit.</p>
|
||||||
|
}
|
||||||
|
for _, subreddit := range data.Subreddits {
|
||||||
|
<p>{ subreddit.Name }</p>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</main>
|
||||||
|
}
|
7
views/subredditsview/subredditsview_data.go
Normal file
7
views/subredditsview/subredditsview_data.go
Normal file
|
@ -0,0 +1,7 @@
|
||||||
|
package subredditsview
|
||||||
|
|
||||||
|
import "github.com/tigorlazuardi/redmage/models"
|
||||||
|
|
||||||
|
type Data struct {
|
||||||
|
Subreddits models.SubredditSlice
|
||||||
|
}
|
Loading…
Reference in a new issue