diff options
Diffstat (limited to 'web/templates/partials/shopping-tab.html')
| -rw-r--r-- | web/templates/partials/shopping-tab.html | 32 |
1 files changed, 27 insertions, 5 deletions
diff --git a/web/templates/partials/shopping-tab.html b/web/templates/partials/shopping-tab.html index 19c570f..1f589e5 100644 --- a/web/templates/partials/shopping-tab.html +++ b/web/templates/partials/shopping-tab.html @@ -4,25 +4,47 @@ hx-trigger="refresh-tasks from:body" hx-target="#tab-content" hx-swap="innerHTML"> + + <!-- Quick Add Form --> + <form hx-post="/shopping/add" + hx-target="#tab-content" + hx-swap="innerHTML" + class="bg-panel backdrop-blur-sm rounded-xl p-4 sm:p-5"> + <div class="flex gap-2"> + <input type="text" name="name" placeholder="Add item..." + class="flex-1 bg-white/10 border border-white/20 rounded-lg px-3 py-2 text-white placeholder-white/40 focus:outline-none focus:ring-2 focus:ring-white/30 text-sm" + required> + <select name="store" class="bg-white/10 border border-white/20 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:ring-2 focus:ring-white/30"> + <option value="Quick Add">Quick Add</option> + {{range .Stores}} + <option value="{{.Name}}">{{.Name}}</option> + {{end}} + </select> + <button type="submit" class="bg-white/20 hover:bg-white/30 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors"> + Add + </button> + </div> + </form> + {{if .Stores}} {{range .Stores}} - <section class="bg-black/40 backdrop-blur-sm rounded-xl p-4 sm:p-5"> + <section class="bg-panel backdrop-blur-sm rounded-xl p-4 sm:p-5"> <h2 class="text-xl font-medium mb-4 text-white">{{.Name}}</h2> {{range .Categories}} <div class="mb-4 last:mb-0"> {{if .Name}}<h3 class="text-sm text-white/60 mb-2 uppercase tracking-wide">{{.Name}}</h3>{{end}} <ul class="space-y-2"> {{range .Items}} - <li class="flex items-center gap-3 p-3 bg-white/5 hover:bg-white/10 transition-colors rounded-lg border border-white/5 {{if .Checked}}opacity-50{{end}}"> + <li class="flex items-center gap-3 p-3 bg-card bg-card-hover transition-colors rounded-lg border border-white/5 {{if .Checked}}opacity-50{{end}}"> <input type="checkbox" {{if .Checked}}checked{{end}} hx-post="/shopping/toggle" - hx-vals='{"id":"{{.ID}}","source":"{{.Source}}","checked":{{if .Checked}}false{{else}}true{{end}}}' + hx-vals='{"id":"{{.ID}}","source":"{{.Source}}","checked":{{if .Checked}}false{{else}}true{{end}},"name":"{{.Name}}"}' hx-target="closest li" hx-swap="outerHTML" class="h-5 w-5 rounded bg-black/40 border-white/30 text-green-500 focus:ring-white/30 cursor-pointer flex-shrink-0"> <span class="flex-1 {{if .Checked}}line-through text-white/40{{else}}text-white{{end}}">{{.Name}}</span> {{if .Quantity}}<span class="text-white/50 text-sm">{{.Quantity}}</span>{{end}} - <span class="text-xs px-2 py-0.5 rounded {{if eq .Source "trello"}}bg-blue-900/50 text-blue-300{{else}}bg-green-900/50 text-green-300{{end}}"> + <span class="text-xs px-2 py-0.5 rounded {{if eq .Source "trello"}}bg-blue-900/50 text-blue-300{{else if eq .Source "user"}}bg-purple-900/50 text-purple-300{{else}}bg-green-900/50 text-green-300{{end}}"> {{.Source}} </span> </li> @@ -35,7 +57,7 @@ {{else}} <div class="text-center py-16 text-white/50"> <p class="text-lg mb-2">No shopping items</p> - <p class="text-sm">Add items from PlanToEat or Trello's Shopping board</p> + <p class="text-sm">Use the form above to add items quickly</p> </div> {{end}} </div> |