feat(add): additional fields

Series, number in series, and wilhelm scream. Moved date to additional fields.
believer · Sep 24, 2024 · a76af79 · a76af79
1 parent 2315d04
commit a76af79
Show file tree

Hide file tree

Showing 11 changed files with 207 additions and 29 deletions.
diff --git a/components/input.templ b/components/input.templ
@@ -35,11 +35,13 @@ templ TextInput(name string, labelText string, helpText string) {
  </div>
 }
 
-templ NumberInput(name string, labelText string, helpText string, min int, max int) {
+templ NumberInput(name string, labelText string, helpText string, min int, max int, required bool) {
  <div class="relative flex flex-col gap-2 group">
  @Label(name, labelText)
  <input
- required
+ if required {
+ required
+ }
  type="number"
  name={ name }
  id={ name }

diff --git a/components/input_templ.go b/components/input_templ.go
diff --git a/components/list.templ b/components/list.templ
@@ -39,3 +39,15 @@ templ OrderedList(data []ListItem, listType string) {
  }
  </ol>
 }
+
+type DataListItem struct {
+ Value string `db:"series"`
+}
+
+templ DataList(options []DataListItem, id string) {
+ <datalist id={ id }>
+ for _, option := range options {
+ <option value={ option.Value }></option>
+ }
+ </datalist>
+}
diff --git a/components/list_templ.go b/components/list_templ.go
diff --git a/handlers/movies.go b/handlers/movies.go
@@ -166,6 +166,18 @@ func HandleGetMovieNew(c *fiber.Ctx) error {
  }))
 }
 
+func HandleGetMovieNewSeries(c *fiber.Ctx) error {
+ var options []components.DataListItem
+
+ err := db.Client.Select(&options, `SELECT DISTINCT series FROM movie WHERE series IS NOT NULL ORDER BY series ASC`)
+
+ if err != nil {
+ return err
+ }
+
+ return utils.TemplRender(c, components.DataList(options, "series_list"))
+}
+
 func tmdbFetchMovie(id string) types.MovieDetailsResponse {
  tmdbKey := os.Getenv("TMDB_API_KEY")
 
@@ -283,16 +295,30 @@ func HandlePostMovieNew(c *fiber.Ctx) error {
  }
 
  data := new(struct {
- ImdbID string `form:"imdb_id"`
- Rating int `form:"rating"`
- IsWatchlist bool `form:"watchlist"`
- WatchedAt string `form:"watched_at"`
+ ImdbID string `form:"imdb_id"`
+ Rating int `form:"rating"`
+ IsWatchlist bool `form:"watchlist"`
+ HasWilhelmScream bool `form:"wilhelm_scream"`
+ Series string `form:"series"`
+ NumberInSeries int `form:"number_in_series"`
+ WatchedAt string `form:"watched_at"`
  })
 
  if err := c.BodyParser(data); err != nil {
  return err
  }
 
+ series := sql.NullString{String: "", Valid: false}
+ number_in_series := sql.NullInt64{Int64: 0, Valid: false}
+
+ if data.Series != "" {
+ series = sql.NullString{String: data.Series, Valid: true}
+ }
+
+ if data.NumberInSeries != 0 {
+ number_in_series = sql.NullInt64{Int64: int64(data.NumberInSeries), Valid: false}
+ }
+
  imdbId, err := utils.ParseImdbId(data.ImdbID)
 
  if err != nil {
@@ -320,7 +346,7 @@ func HandlePostMovieNew(c *fiber.Ctx) error {
  tx := db.Client.MustBegin()
 
  // Insert movie information
- err = tx.Get(&movieId, `INSERT INTO movie (title, runtime, release_date, imdb_id, overview, poster, tagline) VALUES ($1, $2, $3, $4, $5, $6, $7) ON CONFLICT (imdb_id) DO UPDATE SET title = $1 RETURNING id`, movie.Title, movie.Runtime, movie.ReleaseDate, movie.ImdbId, movie.Overview, movie.Poster, movie.Tagline)
+ err = tx.Get(&movieId, `INSERT INTO movie (title, runtime, release_date, imdb_id, overview, poster, tagline, series, number_in_series, wilhelm) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10) ON CONFLICT (imdb_id) DO UPDATE SET title = $1 RETURNING id`, movie.Title, movie.Runtime, movie.ReleaseDate, movie.ImdbId, movie.Overview, movie.Poster, movie.Tagline, series, number_in_series, data.HasWilhelmScream)
 
  if err != nil {
  return err

diff --git a/public/styles.css b/public/styles.css
@@ -615,6 +615,10 @@ video {
  margin-left: 1.25rem;
 }
 
+.mt-4 {
+ margin-top: 1rem;
+}
+
 .line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
@@ -693,6 +697,10 @@ video {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.cursor-pointer {
+ cursor: pointer;
+}
+
 .list-disc {
  list-style-type: disc;
 }

diff --git a/router/router.go b/router/router.go
@@ -26,6 +26,7 @@ func SetupRoutes(app *fiber.App) {
  movieGroup.Get("/imdb", handlers.HandleGetByImdbId)
  movieGroup.Get("/search", handlers.HandleSearchNew)
  movieGroup.Get("/new", handlers.HandleGetMovieNew)
+ movieGroup.Get("/new/series", handlers.HandleGetMovieNewSeries)
  movieGroup.Post("/new", handlers.HandlePostMovieNew)
 
  movieGroup.Get("/:id", handlers.HandleGetMovieByID)

diff --git a/views/layout.templ b/views/layout.templ
@@ -43,7 +43,7 @@ templ Layout(props LayoutProps) {
  <meta name="twitter:site" content="@rnattochdag"/>
  <meta name="twitter:creator" content="@rnattochdag"/>
  <link rel="icon" type="image/png" href="/public/favicon.png"/>
- <link href="/public/styles.ee6626.css" rel="stylesheet"/>
+ <link href="/public/styles.css" rel="stylesheet"/>
  <link rel="manifest" href="/public/manifest.webmanifest"/>
  <script src="/public/htmx.2.0.2.min.js"></script>
  <script src="/public/htmx.head-support.20240912.js"></script>

diff --git a/views/layout_templ.go b/views/layout_templ.go
diff --git a/views/newMovie.templ b/views/newMovie.templ
@@ -16,7 +16,7 @@ templ NewMovie(props NewMovieProps) {
  <form
  hx-post="/movie/new"
  hx-indicator="#sending"
- class="mx-auto flex max-w-xl flex-col gap-6 px-4 py-8"
+ class="mx-auto flex max-w-xl flex-col gap-y-6 px-4 py-8"
  >
  <div>
  @components.Link(components.LinkProps{Href: "/"}) {
@@ -77,14 +77,36 @@ templ NewMovie(props NewMovieProps) {
  ></div>
  @components.Help("For example, https://www.imdb.com/title/tt0111161/, or just tt0111161.")
  </div>
- @components.NumberInput("rating", "Rating", "A value between 0 and 10", 0, 10)
- @components.DateTimeInput("watched_at", "Watched at", "Defaults to current time if left empty.")
+ @components.NumberInput("rating", "Rating", "A value between 0 and 10", 0, 10, true)
  if !props.InWatchlist {
  <div class="flex gap-x-2 items-center">
  <input type="checkbox" name="watchlist" id="watchlist" class="rounded accent-neutral-700 border border-neutral-700 bg-neutral-800 focus:outline-dashed focus:outline-offset-2 focus:outline-neutral-500" _="on click if me.checked remove @required from #rating otherwise add @required='' to #rating"/>
  @components.Label("watchlist", "Add to watchlist")
  </div>
  }
+ <details>
+ <summary class="cursor-pointer">Additional fields</summary>
+ <div class="mt-4 flex flex-col gap-y-6">
+ @components.DateTimeInput("watched_at", "Watched at", "Defaults to current time if left empty.")
+ <div class="relative flex flex-col gap-2 group">
+ @components.Label("series", "Series")
+ <input
+ type="text"
+ name="series"
+ id="series"
+ list="series_list"
+ class="w-full rounded border border-neutral-400 bg-transparent px-4 py-2 ring-offset-2 ring-offset-white focus:outline-none focus:ring-2 focus:ring-neutral-400 dark:border-neutral-700 dark:ring-offset-neutral-900 dark:focus:ring-neutral-500 peer"
+ _="on keyup if my.value is not empty add @required='' to #number_in_series otherwise remove @required from #number_in_series"
+ />
+ <div hx-get="/movie/new/series" hx-swap="outerHTML" hx-trigger="load"></div>
+ </div>
+ @components.NumberInput("number_in_series", "Number in series", "", 0, 1000, false)
+ <div class="flex gap-x-2 items-center">
+ <input type="checkbox" name="wilhelm_scream" id="wilhelm_scream" class="rounded accent-neutral-700 border border-neutral-700 bg-neutral-800 focus:outline-dashed focus:outline-offset-2 focus:outline-neutral-500"/>
+ @components.Label("wilhelm_scream", "Wilhelm scream")
+ </div>
+ </div>
+ </details>
  <footer class="flex flex-col gap-y-4">
  <div id="error" class="empty:hidden text-rose-700 dark:text-rose-400 border border-dashed border-rose-700 dark:border-rose-400 p-4 rounded"></div>
  <button