Order from a stall without queueing: your name, a button, and a ticket that updates by itself from placed to preparing to ready. The server has no push: the page asks every two seconds, and stops when there's nothing left to ask. ★★☆
“I'll get the dumplings, you hold the table. They'll call my name, right?”
You'll demo (next class): order from Taco Bike as "Ana": a ticket appears and changes state twice on its own. When it's ready, the Network panel goes quiet. Order from Churros: the server says sold out, and the page says it better.
Four things, on top of your connected market. They count when they work with chaos on (control page).
POST /api/orders.ready, stopped when it is; one poller per order.What has to work for the demo next class, not how. The core above is part of it.
localStorage). The page doesn't decide what's orderable: the server does, with a 409.POST /api/orders with { stallId, name }.GET /api/orders/:id every 2 s while the order isn't ready; then stop.localStorage, their status from the server.sold_out: a sentence on that card, not an alert.New tool: Repeating work: setInterval / clearInterval, or a setTimeout that schedules the next one after each response.
New tool: document.visibilityState: is anyone looking at this tab?
| Method | Path | Answers |
|---|---|---|
POST | /api/orders | 201 { id, status: "placed", … } · 409 sold out · 422 { fields } |
GET | /api/orders/:id | 200 · status: placed → preparing (after 5 s) → ready (after 15 s) · 404 |
GET | /api/orders | 200 · every order, newest first |
Resetting your market (control page) forgets the orders, and the ids in your localStorage then answer 404. Handle it.
PATCH /api/stalls/taco-bike with { "soldOut": true } and the admin token, see api.html), then order from it.Notification when an order is ready (ask for permission on a click).Network panel first: is the request sent, with what, and what came back? Then a hint.
setInterval or a chain of setTimeouts: which one can start a new request before the previous one answered?
Where do you keep the timer ids, so the code that sees "ready" can stop the right one?
After a reload, the ids are in localStorage. What's the first request for each of them?
This brief assumes Connect the market is done: api.js works, the stalls come from the API, loading and errors are handled. Then: An Order button sends POST /api/orders: 201 in the Network panel, and the order's id in the console.