feat: add search to hyperview views

believer · Nov 27, 2023 · a04ec34 · a04ec34
1 parent 938137b
commit a04ec34
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 14 deletions.
diff --git a/handlers/handlers.go b/handlers/handlers.go
@@ -44,6 +44,7 @@ func HandleFeed(c *fiber.Ctx) error {
  "Page": page + 1,
  "CurrentYear": time.Now().Year(),
  "LastMovieYear": lastMovieYear,
+ "Refresh": c.Query("refresh"),
  })
  }
 

diff --git a/handlers/search.go b/handlers/search.go
@@ -7,6 +7,8 @@ import (
  "believer/movies/views"
  "database/sql"
  "strconv"
+ "strings"
+ "time"
 
  "github.com/gofiber/fiber/v2"
 )
@@ -42,6 +44,18 @@ ORDER BY m.release_date DESC
  return err
  }
 
+ if strings.Contains(c.Get("Accept"), "hyperview") {
+ lastMovieYear := c.Query("lastMovieYear", movies[len(movies)-1].WatchedAt.Format("2006"))
+
+ return c.Render("feed_pages", fiber.Map{
+ "Movies": movies,
+ "Page": page + 1,
+ "LastMovieYear": lastMovieYear,
+ "CurrentYear": time.Now().Year(),
+ "SearchQuery": search,
+ })
+ }
+
  return utils.TemplRender(c, views.Feed(
  utils.IsAuthenticated(c),
  movies,

diff --git a/views/feed.xml b/views/feed.xml
@@ -2,39 +2,64 @@
  <screen id="feed">
  <styles>
  <style id="Body" backgroundColor="rgb(23,23,23)" flex="1"></style>
+ <style id="Body__Text" color="rgb(163,163,163)" fontSize="16"
+ fontWeight="400"></style>
  <style id="Loading" backgroundColor="red" flex="1"></style>
  <style id="Link" borderBottomWidth="1" borderBottomColor="rgb(212,212,212)" borderStyle="solid"></style>
  <style id="Link__Text" color="rgb(212,212,212)" fontSize="16"></style>
- <style id="movieList" flex="1" paddingHorizontal="20" paddingTop="24"></style>
+ <style id="movieList" flex="1" paddingHorizontal="20"></style>
  <style id="Movie" marginBottom="24" rowGap="16"></style>
  <style id="Movie__Header" rowGap="4"></style>
  <style id="Movie__Title" color="rgb(212,212,212)" fontSize="16" fontWeight="500"></style>
  <style id="Movie__Overview" color="rgb(163,163,163)" fontSize="14" fontWeight="400" lineHeight="20"></style>
  <style id="Spinner" alignItems="center" flex="1" height="48" justifyContent="center" ></style>
  <style id="Movie__WatchedAt" color="rgb(163,163,163)" fontSize="12" fontWeight="400" lineHeight="16"></style>
- <style id="FAB" position="absolute" bottom="24" right="24" backgroundColor="#262626" borderRadius="24" justifyContent="center" alignItems="center" height="56" width="56">
+ <style
+ id="FAB"
+ position="absolute"
+ bottom="24"
+ right="24"
+ backgroundColor="#262626"
+ borderRadius="100%"
+ justifyContent="center"
+ alignItems="center"
+ shadowColor="#0a0a0a"
+ shadowOpacity="0.6"
+ shadowRadius="8"
+ shadowOffsetX="0"
+ shadowOffsetY="2"
+ height="56"
+ width="56">
  <modifier pressed="true">
  <style backgroundColor="#404040" />
  </modifier>
  </style>
  <style id="FAB__Text" color="rgb(229,229,229)" fontSize="24" fontWeight="400"></style>
  <style id="Year__Wrap" marginVertical="16"></style>
  <style id="Year" color="rgb(23,23,23)" fontSize="48" fontWeight="400" textShadowColor="rgba(255,255,255,0.8)" textShadowRadius="1"></style>
+
+ <style id="SearchForm" paddingHorizontal="20" paddingBottom="8"></style>
+ <style id="SearchField" flexDirection="row" gap="8" padding="2" borderColor="#404040" borderWidth="1" borderRadius="100%" borderStyle="solid" alignItems="center" justifyContent="space-between"></style>
+ <style id="Search" flex="1" backgroundColor="rgb(23,23,23)" color="rgb(212,212,212)" paddingHorizontal="20" paddingVertical="16" borderRadius="100%"></style>
+ <style id="SearchButton" backgroundColor="#262626" height="48" width="48" alignItems="center" justifyContent="center" borderRadius="100%"></style>
  </styles>
  <body style="Body" safe-area="true">
- <list style="movieList" id="movies" trigger="refresh" href="/?refresh=true" action="replace-inner" target="movie-items">
- <item style="Year__Wrap">
- <text style="Year">
- {{ .CurrentYear }}
+ <view style="Body" keyboard-dismiss-mode="interactive">
+ {{ template "search" . }}
+ <list style="movieList" id="movies" trigger="refresh" href="/?refresh=true" action="replace-inner" target="movie-items">
+ <item style="Year__Wrap">
+ <text style="Year">
+ {{ .CurrentYear }}
+ </text>
+ </item>
+ {{ template "feed_pages" .}}
+ </list>
+ <view style="FAB">
+ <behavior show-during-load="loading" action="push" trigger="press" href="/movies/new" />
+ <text style="FAB__Text">
+ +
  </text>
- </item>
- {{ template "feed_pages" .}}
- </list>
- <view style="FAB">
- <behavior show-during-load="loading" action="push" trigger="press" href="/movies/new" />
- <text style="FAB__Text">
- +
- </text>
+ </view>
  </view>
  </body>
  </screen>

diff --git a/views/feed_pages.xml b/views/feed_pages.xml
@@ -1,6 +1,21 @@
 {{ $year := .LastMovieYear }}
 
 <items xmlns="https://hyperview.org/hyperview" id="movie-items">
+ {{ if .SearchQuery}}
+ <item>
+ <text style="Body__Text">
+ <behavior action="replace-inner" href="/?refresh=true" target="movie-items" />
+ Search results for "{{ .SearchQuery }}". Click to reset.
+ </text>
+ </item>
+ {{ end }}
+ {{ if .Refresh }}
+ <item style="Year__Wrap">
+ <text style="Year">
+ {{ .CurrentYear }}
+ </text>
+ </item>
+ {{ end }}
  {{ range .Movies }}
  {{if ne $year (.WatchedAt.Format "2006")}}
  <item key="year-{{ .ID }}" style="Year__Wrap">

diff --git a/views/search.xml b/views/search.xml
@@ -0,0 +1,9 @@
+<form style="SearchForm" xmlns="https://hyperview.org/hyperview">
+ <view style="SearchField">
+ <text-field name="search" style="Search" placeholder="Find a movie" />
+ <view style="SearchButton">
+ <behavior action="replace-inner" href="/search" verb="post" target="movies" />
+ <text>🔍</text>
+ </view>
+ </view>
+</form>