stubbed simulations page content: sale

server/api/accounts/router.go

@@ -78,6 +78,9 @@ func Routes(
 	mockSyncGroupBeingEdited.PUT("/listings/:orderIndex/shop", response.Handler(as.setShopInListingInMockSyncGroupBeingEdited))
 	mockSyncGroupBeingEdited.PUT("/listings/:orderIndex/listing", response.Handler(as.setListingInListingInMockSyncGroupBeingEdited))
 	mockSyncGroupBeingEdited.DELETE("/listings/:orderIndex", response.Handler(as.deleteListingInListingInMockSyncGroupBeingEdited))
+
+	simulations := r.Group("/:acctID/simulations")
+	simulations.POST("/sale", response.Handler(as.postNewSale))
 }
 
 // POST /
@@ -736,6 +739,32 @@ func (s *accountSubrouter) deleteListingInListingInMockSyncGroupBeingEdited(c *g
 	return response.StatusOK(), nil
 }
 
+// POST /:acctID/simulations/sale
+func (s *accountSubrouter) postNewSale(c *gin.Context) (response.Response, error) {
+	acctID := auth.GetIdentity(c).Account.AccountID
+
+	var (
+		shopID    string
+		listingID string
+		count     int
+	)
+
+	if err := param.Form("shop-id", param.Text(&shopID)).
+		Form("listing-id", param.Text(&listingID)).
+		Form("count", param.Int(&count)).
+		Unmarshal(c); err != nil {
+		return nil, err
+	}
+
+	s.log.Debugf("sale posted:")
+	s.log.Debugf("	account: %d", acctID)
+	s.log.Debugf("	shop: %s", shopID)
+	s.log.Debugf("	listing: %s", listingID)
+	s.log.Debugf("	count: %d", count)
+
+	return response.StatusCreated(), nil
+}
+
 func lowerSnakeCase(s accounts.Platform) string {
 	return strings.ToLower(strings.Join(strings.Split(string(s), " "), "_"))
 }

styles/index.css

@@ -273,6 +273,9 @@
       max-width: 96rem;
     }
   }
+  .m-0 {
+    margin: calc(var(--spacing) * 0);
+  }
   .m-\[0\.5em\] {
     margin: 0.5em;
   }
@@ -309,6 +312,9 @@
   .mt-\[3em\] {
     margin-top: 3em;
   }
+  .mb-0 {
+    margin-bottom: calc(var(--spacing) * 0);
+  }
   .mb-\[0\.5em\] {
     margin-bottom: 0.5em;
   }
@@ -462,6 +468,9 @@
   .gap-\[0\.25em\] {
     gap: 0.25em;
   }
+  .gap-\[0\.75em\] {
+    gap: 0.75em;
+  }
   .gap-\[1em\] {
     gap: 1em;
   }
@@ -514,6 +523,9 @@
     --tw-border-style: solid;
     border-style: solid;
   }
+  .border-border {
+    border-color: var(--border);
+  }
   .border-foreground {
     border-color: var(--foreground);
   }
@@ -535,6 +547,9 @@
   .bg-card {
     background-color: var(--card);
   }
+  .bg-none {
+    background-image: none;
+  }
   .p-\[0\.5em\] {
     padding: 0.5em;
   }
@@ -646,6 +661,16 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .\*\:bg-background {
+    :is(& > *) {
+      background-color: var(--background);
+    }
+  }
+  .\*\*\:bg-background {
+    :is(& *) {
+      background-color: var(--background);
+    }
+  }
   .not-open\:mb-\[1em\] {
     &:not(*:is([open], :popover-open, :open)) {
       margin-bottom: 1em;

templates/components/button.html.tmpl

@@ -4,7 +4,7 @@
 <button
 	class="
 		border-thin
-		bg-card
+		{{if .Background}}bg-background{{else}}bg-card{{end}}
 		rounded-sm
 		p-[0.5em]
 		font-semibold

templates/pages/accounts/{acctID.int64}/simulations.html.tmpl

@@ -1,3 +1,92 @@
 <h1>
 	Simulations
 </h1>
+
+
+{{- define "sale-accordion-header" }}
+	<h2 class="inline-block">
+		Simulate Sale
+	</h2>
+{{ end }}
+
+{{- define "sale-accordion-body" }}
+	{{ $acctID := .Identity.Account.AccountID }}
+	<form
+		class="flex flex-col items-center gap-[0.75em]"
+		hx-post="/api/accounts/{{$acctID}}/simulations/sale"
+		hx-swap="none"
+	>
+		<select
+			name="shop-id"
+			class="bg-background"
+			required
+		>
+			<option value="shop-1">
+				Shop 1
+			</option>
+			<option value="shop-2">
+				Shop 2
+			</option>
+			<option value="shop-3">
+				Shop 3
+			</option>
+			<option value="shop-4">
+				Shop 4
+			</option>
+			<option value="shop-5">
+				Shop 5
+			</option>
+		</select>
+
+		<select
+			name="listing-id"
+			class="bg-background"
+			required
+		>
+			<option value="listing-1">
+				Listing 1
+			</option>
+			<option value="listing-2">
+				Listing 2
+			</option>
+			<option value="listing-3">
+				Listing 3
+			</option>
+			<option value="listing-4">
+				Listing 4
+			</option>
+			<option value="listing-5">
+				Listing 5
+			</option>
+		</select>
+
+		<input
+			class="p-[0.5em] border-medium border-border rounded-lg bg-background"
+			type="number"
+			min="1"
+			max="1000000000"
+			name="count"
+			value="0"
+			required
+		/>
+
+		<div>
+			{{ component "button"
+				"Text"			"Simulate Sale"
+				"Background"	true
+				"Class"			"m-0"
+			}}
+		</div>
+	</form>
+{{ end }}
+
+{{ component "accordion"
+	"Name"	"sale"
+	"Open"	true
+	"Class" `
+		mx-[1em]
+		mb-[1em]
+	`
+	"#accordion-header"	"sale-accordion-header"
+	"#accordion-body"	"sale-accordion-body"
+}}