waitmate 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +7 -0
- data/LICENSE.txt +21 -0
- data/README.md +136 -0
- data/app/controllers/waitmate/application_controller.rb +7 -0
- data/app/controllers/waitmate/rooms_controller.rb +97 -0
- data/app/views/waitmate/rooms/show.html.erb +350 -0
- data/bin/quality +89 -0
- data/config/routes.rb +6 -0
- data/lib/generators/waitmate/install_generator.rb +15 -0
- data/lib/generators/waitmate/templates/waitmate.rb +21 -0
- data/lib/waitmate/configuration.rb +15 -0
- data/lib/waitmate/controller_concern.rb +99 -0
- data/lib/waitmate/engine.rb +7 -0
- data/lib/waitmate/store/redis.rb +273 -0
- data/lib/waitmate/store/solid_cache.rb +358 -0
- data/lib/waitmate/store.rb +73 -0
- data/lib/waitmate/ticket.rb +78 -0
- data/lib/waitmate/version.rb +7 -0
- data/lib/waitmate.rb +31 -0
- metadata +112 -0
checksums.yaml
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
---
|
|
2
|
+
SHA256:
|
|
3
|
+
metadata.gz: 30977673b611b02e63ff8fe02255181639bf00b51a09a23746deeea6328fc57a
|
|
4
|
+
data.tar.gz: 17ca45a6543aa8dd96376c0f77c10e4bf45908b4b20dc1ae5627fa01a4bb4322
|
|
5
|
+
SHA512:
|
|
6
|
+
metadata.gz: 05f4fdb33d0ad3f340425d81b872f8a1c07c851ea25d265bbd74238631ec94521fe8e86c512396c47627bb65ed2e9d146ce72ad7de9983a318754ccd40f064be
|
|
7
|
+
data.tar.gz: 5377f2ff5b718989ec0a3c67decb03c221470eb31f15c12a355202df85a5e102930af84c1df21ff6964cce83688b1957d2a1c67bf683d48509e7f094f851d163
|
data/LICENSE.txt
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 BartOz
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
data/README.md
ADDED
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
<p align="center">
|
|
2
|
+
<picture>
|
|
3
|
+
<source media="(prefers-color-scheme: dark)" srcset=".github/waitmate_logo_dark.svg">
|
|
4
|
+
<source media="(prefers-color-scheme: light)" srcset=".github/waitmate_logo_light.svg">
|
|
5
|
+
<img alt="Waitmate" src=".github/waitmate_logo_light.svg" width="220">
|
|
6
|
+
</picture>
|
|
7
|
+
</p>
|
|
8
|
+
|
|
9
|
+
<p align="center">
|
|
10
|
+
<a href="https://github.com/bart-oz/waitmate/releases"><img src="https://img.shields.io/badge/version-0.1.0-blue.svg" alt="Version"></a>
|
|
11
|
+
<a href="LICENSE.txt"><img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="License"></a>
|
|
12
|
+
<a href="https://github.com/bart-oz/waitmate/actions"><img src="https://img.shields.io/badge/tests-passing-brightgreen.svg" alt="Tests"></a>
|
|
13
|
+
<a href="https://github.com/bart-oz/waitmate/actions"><img src="https://img.shields.io/badge/coverage-96.36%25-brightgreen.svg" alt="Coverage"></a>
|
|
14
|
+
</p>
|
|
15
|
+
|
|
16
|
+
---
|
|
17
|
+
|
|
18
|
+
Virtual waiting room for Rails applications.
|
|
19
|
+
|
|
20
|
+
Waitmate protects expensive controller actions from thundering-herd overload by queuing overflow users, issuing encrypted admission tickets, and letting users wait on a lightweight Engine-provided page.
|
|
21
|
+
|
|
22
|
+
## Installation
|
|
23
|
+
|
|
24
|
+
Add to your Gemfile:
|
|
25
|
+
|
|
26
|
+
```ruby
|
|
27
|
+
gem "waitmate"
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
And then execute:
|
|
31
|
+
|
|
32
|
+
```bash
|
|
33
|
+
bundle install
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
Mount the engine in your routes:
|
|
37
|
+
|
|
38
|
+
```ruby
|
|
39
|
+
mount Waitmate::Engine => "/waitmate"
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
Run the install generator to create an initializer:
|
|
43
|
+
|
|
44
|
+
```bash
|
|
45
|
+
rails generate waitmate:install
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
This copies `config/initializers/waitmate.rb` with the current defaults.
|
|
49
|
+
|
|
50
|
+
## Configuration
|
|
51
|
+
|
|
52
|
+
All config keys and their defaults:
|
|
53
|
+
|
|
54
|
+
```ruby
|
|
55
|
+
Waitmate.configure do |config|
|
|
56
|
+
config.adapter = :redis # :redis or :solid_cache
|
|
57
|
+
config.queue_ttl = 300 # seconds before abandoned queue entries expire
|
|
58
|
+
config.polling_interval = 5 # seconds between queue status polls
|
|
59
|
+
config.ticket_ttl = 120 # seconds before admission tickets expire
|
|
60
|
+
config.waiting_room_path = "/waitmate/room" # Engine path for the waiting-room page
|
|
61
|
+
end
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
- `adapter` — Storage backend. `:redis` is primary; `:solid_cache` is the SQL fallback.
|
|
65
|
+
- `queue_ttl` — Time-to-live for a queue entry. Each successful poll extends the TTL.
|
|
66
|
+
- `polling_interval` — How often the browser asks for its position.
|
|
67
|
+
- `ticket_ttl` — How long an issued admission ticket remains valid.
|
|
68
|
+
- `waiting_room_path` — The URL the waiting-room controller renders. Must match the `mount` path in the host routes plus the engine's `/room` route.
|
|
69
|
+
|
|
70
|
+
### Choosing an adapter
|
|
71
|
+
|
|
72
|
+
- **Redis (`:redis`)** — Best for high-traffic or latency-sensitive rooms. Each poll is roughly O(1) for the requesting user.
|
|
73
|
+
- **Solid Cache (`:solid_cache`)** — Best when you want a Rails/Solid Stack setup without running Redis. It keeps the same queue correctness contract, but throughput depends on your database. Each poll materializes the waiting rows for that queue to compute a position, so it becomes the throughput bottleneck for large or long queues.
|
|
74
|
+
|
|
75
|
+
For Solid Cache, install and migrate Solid Cache first, then set `config.adapter = :solid_cache`. Use Redis when you need the highest concurrency; use Solid Cache when simpler Rails-only operations matter more.
|
|
76
|
+
|
|
77
|
+
## Usage
|
|
78
|
+
|
|
79
|
+
```ruby
|
|
80
|
+
class TicketsController < ApplicationController
|
|
81
|
+
wait_room :purchase, max_concurrent: 100
|
|
82
|
+
end
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
### Waiting-room flow
|
|
86
|
+
|
|
87
|
+
1. The first request to a protected action is enqueued. If capacity is available, the action runs immediately.
|
|
88
|
+
2. When the action is at capacity, Waitmate issues an encrypted ticket and redirects the browser to the Engine waiting room (`/waitmate/room` by default, controlled by `config.waiting_room_path`).
|
|
89
|
+
3. The waiting room verifies the ticket against the user's session and queue, then polls the `/waitmate/room/position` endpoint every `polling_interval` seconds (default 5). Each poll extends the queue entry's TTL.
|
|
90
|
+
4. When the user's position reaches 0, the waiting room redirects back to the original target URL with the ticket. The concern re-verifies the ticket and admits the user.
|
|
91
|
+
5. Invalid tickets or unsafe targets show a generic, safe error page with no raw tickets, session IDs, queue internals, or adapter errors.
|
|
92
|
+
|
|
93
|
+
Tickets expire after `ticket_ttl` seconds (default 120). If a user waits longer than the ticket TTL without a successful poll, the ticket becomes invalid and the waiting room shows the generic error page; the user must refresh or re-enter the protected action to obtain a new ticket.
|
|
94
|
+
|
|
95
|
+
### Overriding the waiting-room view
|
|
96
|
+
|
|
97
|
+
Hosts can replace the default waiting-room page by creating:
|
|
98
|
+
|
|
99
|
+
```
|
|
100
|
+
app/views/waitmate/rooms/show.html.erb
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
The controller sets the following instance variables:
|
|
104
|
+
|
|
105
|
+
- `@position` — the user's current queue position (`0` means admitted; `nil` on the error path).
|
|
106
|
+
- `@polling_interval` — value of `config.polling_interval`.
|
|
107
|
+
- `@ticket` — the encrypted ticket string.
|
|
108
|
+
- `@queue` — the queue name.
|
|
109
|
+
- `@target` — the validated target URL to return to after admission.
|
|
110
|
+
- `@error` — `true` on the invalid-ticket / unsafe-target path, otherwise unset.
|
|
111
|
+
|
|
112
|
+
On the normal waiting path, all of the above except `@error` are present. On the error path, only `@error`, `@position` (nil), and `@polling_interval` are guaranteed. Override templates must not assume `@ticket`, `@queue`, or `@target` exist when `@error` is truthy.
|
|
113
|
+
|
|
114
|
+
### Polling interval and Solid Cache caveat
|
|
115
|
+
|
|
116
|
+
`polling_interval` controls how often the browser asks for its queue position. Lower intervals feel more responsive but generate more requests.
|
|
117
|
+
|
|
118
|
+
The Redis adapter answers each poll in roughly O(1) time for the requesting user. The Solid Cache adapter, by design, must scan and rank waiting rows to compute a position, so each poll materializes the waiting rows for that queue. This is acceptable for moderate traffic but becomes the throughput bottleneck for large or long queues. Use Redis when polling latency and queue depth matter.
|
|
119
|
+
|
|
120
|
+
## Limitations (v0.1)
|
|
121
|
+
|
|
122
|
+
- **Transport:** HTTP polling only. ActionCable/Turbo Streams are deferred to a future release.
|
|
123
|
+
- **Integration:** Controller concern only. No Rack middleware.
|
|
124
|
+
- **Storage:** Redis and Solid Cache only. No additional adapters.
|
|
125
|
+
- **Framework:** Rails-only. No standalone Rack or non-Rails support.
|
|
126
|
+
- **UI:** A single, overridable ERB waiting-room page. No admin dashboard, CAPTCHA, or anti-bot functionality.
|
|
127
|
+
|
|
128
|
+
## Development
|
|
129
|
+
|
|
130
|
+
After checking out the repo, run `bundle install` to install dependencies. Then, run `bin/quality` to run the full gate suite: RSpec, StandardRB, appraisal runs against Rails 7.1/7.2/8.0, and `bundler-audit`.
|
|
131
|
+
|
|
132
|
+
Use `bin/quality --skip-appraisal` for a fast inner-loop check that skips the Rails-version matrix.
|
|
133
|
+
|
|
134
|
+
## License
|
|
135
|
+
|
|
136
|
+
Released under the MIT License.
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
3
|
+
module Waitmate
|
|
4
|
+
class RoomsController < ApplicationController
|
|
5
|
+
include TargetValidation
|
|
6
|
+
|
|
7
|
+
before_action :verify_ticket, only: [:show]
|
|
8
|
+
|
|
9
|
+
def show
|
|
10
|
+
pos = current_position
|
|
11
|
+
return render_invalid if pos.nil?
|
|
12
|
+
|
|
13
|
+
if pos == 0
|
|
14
|
+
url = admission_url
|
|
15
|
+
return redirect_to(url) if url
|
|
16
|
+
return render_invalid
|
|
17
|
+
end
|
|
18
|
+
|
|
19
|
+
@position = pos
|
|
20
|
+
@polling_interval = Waitmate.configuration.polling_interval
|
|
21
|
+
@ticket = ticket_param
|
|
22
|
+
@queue = queue_param
|
|
23
|
+
@target = validated_target
|
|
24
|
+
end
|
|
25
|
+
|
|
26
|
+
def position
|
|
27
|
+
result = Ticket.verify(token: ticket_param, queue_name: queue_param, session_id: session.id.to_s)
|
|
28
|
+
return render_position_json(position: nil, admitted: false) unless result.success?
|
|
29
|
+
|
|
30
|
+
Store.heartbeat(queue_param, session.id.to_s)
|
|
31
|
+
pos = Store.position(queue_param, session.id.to_s)
|
|
32
|
+
|
|
33
|
+
render_position_json(position: pos, admitted: pos == 0)
|
|
34
|
+
end
|
|
35
|
+
|
|
36
|
+
private
|
|
37
|
+
|
|
38
|
+
def verify_ticket
|
|
39
|
+
result = Ticket.verify(token: ticket_param, queue_name: queue_param, session_id: session.id.to_s)
|
|
40
|
+
return render_invalid unless result.success?
|
|
41
|
+
|
|
42
|
+
Store.heartbeat(queue_param, session.id.to_s)
|
|
43
|
+
end
|
|
44
|
+
|
|
45
|
+
def current_position
|
|
46
|
+
Store.position(queue_param, session.id.to_s)
|
|
47
|
+
end
|
|
48
|
+
|
|
49
|
+
def render_invalid
|
|
50
|
+
@error = true
|
|
51
|
+
@position = nil
|
|
52
|
+
@polling_interval = Waitmate.configuration.polling_interval
|
|
53
|
+
render "waitmate/rooms/show", status: :ok
|
|
54
|
+
end
|
|
55
|
+
|
|
56
|
+
def render_position_json(position:, admitted:)
|
|
57
|
+
render json: {
|
|
58
|
+
position: position,
|
|
59
|
+
admitted: admitted,
|
|
60
|
+
retry: Waitmate.configuration.polling_interval
|
|
61
|
+
}, status: :ok, headers: private_cache_headers
|
|
62
|
+
end
|
|
63
|
+
|
|
64
|
+
def admission_url
|
|
65
|
+
target = validated_target
|
|
66
|
+
return nil unless target
|
|
67
|
+
|
|
68
|
+
separator = target.include?("?") ? "&" : "?"
|
|
69
|
+
query = {ticket: ticket_param}.to_query
|
|
70
|
+
"#{target}#{separator}#{query}"
|
|
71
|
+
end
|
|
72
|
+
|
|
73
|
+
def ticket_param
|
|
74
|
+
params[:ticket].to_s
|
|
75
|
+
end
|
|
76
|
+
|
|
77
|
+
def queue_param
|
|
78
|
+
params[:queue].to_s
|
|
79
|
+
end
|
|
80
|
+
|
|
81
|
+
def target_param
|
|
82
|
+
params[:target].to_s
|
|
83
|
+
end
|
|
84
|
+
|
|
85
|
+
def validated_target
|
|
86
|
+
@validated_target ||= target_param if valid_waiting_room_target?(target_param)
|
|
87
|
+
end
|
|
88
|
+
|
|
89
|
+
def private_cache_headers
|
|
90
|
+
interval = Waitmate.configuration.polling_interval
|
|
91
|
+
{
|
|
92
|
+
"Cache-Control" => "private, max-age=#{[interval - 1, 0].max}",
|
|
93
|
+
"Pragma" => "no-cache"
|
|
94
|
+
}
|
|
95
|
+
end
|
|
96
|
+
end
|
|
97
|
+
end
|
|
@@ -0,0 +1,350 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
|
+
<title>Waiting Room</title>
|
|
7
|
+
<style>
|
|
8
|
+
:root {
|
|
9
|
+
--wm-bg: #ffffff;
|
|
10
|
+
--wm-text: #111827;
|
|
11
|
+
--wm-muted: #6b7280;
|
|
12
|
+
--wm-rule: #d1d5db;
|
|
13
|
+
--wm-accent: #2563eb;
|
|
14
|
+
--wm-success: #15803d;
|
|
15
|
+
--wm-danger: #b91c1c;
|
|
16
|
+
--wm-focus: #1d4ed8;
|
|
17
|
+
--wm-shell-max: 640px;
|
|
18
|
+
--wm-radius: 14px;
|
|
19
|
+
--wm-space-2: 8px;
|
|
20
|
+
--wm-space-3: 12px;
|
|
21
|
+
--wm-space-4: 16px;
|
|
22
|
+
--wm-space-6: 24px;
|
|
23
|
+
--wm-space-8: 32px;
|
|
24
|
+
--wm-space-10: 40px;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
* {
|
|
28
|
+
box-sizing: border-box;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
body {
|
|
32
|
+
margin: 0;
|
|
33
|
+
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
34
|
+
background: var(--wm-bg);
|
|
35
|
+
color: var(--wm-text);
|
|
36
|
+
line-height: 1.5;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.wm-room {
|
|
40
|
+
min-height: 100vh;
|
|
41
|
+
display: grid;
|
|
42
|
+
place-items: center;
|
|
43
|
+
padding: var(--wm-space-6);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.wm-room__shell {
|
|
47
|
+
width: min(100%, var(--wm-shell-max));
|
|
48
|
+
padding: var(--wm-space-10);
|
|
49
|
+
border: 1px solid var(--wm-rule);
|
|
50
|
+
border-radius: var(--wm-radius);
|
|
51
|
+
text-align: center;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.wm-room__badge {
|
|
55
|
+
display: inline-flex;
|
|
56
|
+
align-items: center;
|
|
57
|
+
gap: var(--wm-space-2);
|
|
58
|
+
padding: var(--wm-space-2) var(--wm-space-3);
|
|
59
|
+
border-radius: 999px;
|
|
60
|
+
border: 1px solid var(--wm-rule);
|
|
61
|
+
font-size: 0.875rem;
|
|
62
|
+
font-weight: 500;
|
|
63
|
+
color: var(--wm-muted);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.wm-room__badge-dot {
|
|
67
|
+
width: 8px;
|
|
68
|
+
height: 8px;
|
|
69
|
+
border-radius: 50%;
|
|
70
|
+
background: var(--wm-accent);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.wm-room__title {
|
|
74
|
+
margin: var(--wm-space-6) 0 var(--wm-space-4);
|
|
75
|
+
font-size: 2rem;
|
|
76
|
+
font-weight: 700;
|
|
77
|
+
line-height: 1.2;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.wm-room__metric {
|
|
81
|
+
margin: var(--wm-space-6) 0;
|
|
82
|
+
padding: var(--wm-space-6) 0;
|
|
83
|
+
border-top: 1px solid var(--wm-rule);
|
|
84
|
+
border-bottom: 1px solid var(--wm-rule);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.wm-room__metric-label {
|
|
88
|
+
display: block;
|
|
89
|
+
font-size: 0.875rem;
|
|
90
|
+
color: var(--wm-muted);
|
|
91
|
+
margin-bottom: var(--wm-space-2);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.wm-room__metric-value {
|
|
95
|
+
display: block;
|
|
96
|
+
font-size: 4rem;
|
|
97
|
+
font-weight: 700;
|
|
98
|
+
line-height: 1;
|
|
99
|
+
color: var(--wm-text);
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.wm-room__message {
|
|
103
|
+
margin: 0 0 var(--wm-space-6);
|
|
104
|
+
color: var(--wm-muted);
|
|
105
|
+
font-size: 1rem;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.wm-room__actions {
|
|
109
|
+
display: flex;
|
|
110
|
+
justify-content: center;
|
|
111
|
+
gap: var(--wm-space-3);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.wm-room__rule {
|
|
115
|
+
border: none;
|
|
116
|
+
border-top: 1px solid var(--wm-rule);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.wm-room__button {
|
|
120
|
+
display: inline-flex;
|
|
121
|
+
align-items: center;
|
|
122
|
+
justify-content: center;
|
|
123
|
+
padding: var(--wm-space-3) var(--wm-space-4);
|
|
124
|
+
border: 1px solid var(--wm-rule);
|
|
125
|
+
border-radius: var(--wm-radius);
|
|
126
|
+
background: var(--wm-bg);
|
|
127
|
+
color: var(--wm-text);
|
|
128
|
+
font-size: 1rem;
|
|
129
|
+
font-weight: 500;
|
|
130
|
+
text-decoration: none;
|
|
131
|
+
cursor: pointer;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.wm-room__button:focus {
|
|
135
|
+
outline: 2px solid var(--wm-focus);
|
|
136
|
+
outline-offset: 3px;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.wm-room__button[hidden] {
|
|
140
|
+
display: none;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.wm-room__progress {
|
|
144
|
+
height: 2px;
|
|
145
|
+
margin-top: var(--wm-space-6);
|
|
146
|
+
background: var(--wm-accent);
|
|
147
|
+
border-radius: 1px;
|
|
148
|
+
transform: translateX(-100%);
|
|
149
|
+
animation: wm-progress 1000ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.wm-room__progress[hidden] {
|
|
153
|
+
display: none;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
@keyframes wm-progress {
|
|
157
|
+
from { transform: translateX(-100%); }
|
|
158
|
+
to { transform: translateX(100%); }
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.is-admitted .wm-room__badge-dot {
|
|
162
|
+
background: var(--wm-success);
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.is-error .wm-room__badge-dot {
|
|
166
|
+
background: var(--wm-danger);
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.is-admitted .wm-room__progress {
|
|
170
|
+
display: block;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.is-error .wm-room__metric,
|
|
174
|
+
.is-error .wm-room__progress,
|
|
175
|
+
.is-admitted[hidden] {
|
|
176
|
+
display: none;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
@media (prefers-reduced-motion: reduce) {
|
|
180
|
+
.wm-room__progress {
|
|
181
|
+
animation: none;
|
|
182
|
+
transform: none;
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
@media (max-width: 520px) {
|
|
187
|
+
.wm-room__shell {
|
|
188
|
+
padding: var(--wm-space-6);
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
.wm-room__title {
|
|
192
|
+
font-size: 1.75rem;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
.wm-room__metric-value {
|
|
196
|
+
font-size: 3.5rem;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
.wm-room__actions {
|
|
200
|
+
flex-direction: column;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
.wm-room__button {
|
|
204
|
+
width: 100%;
|
|
205
|
+
}
|
|
206
|
+
}
|
|
207
|
+
</style>
|
|
208
|
+
</head>
|
|
209
|
+
<body class="wm-room">
|
|
210
|
+
<main class="wm-room__shell <%= @error ? "is-error" : "is-queued" %>" aria-labelledby="wm-room-title">
|
|
211
|
+
<div class="wm-room__badge">
|
|
212
|
+
<span class="wm-room__badge-dot"></span>
|
|
213
|
+
<span class="wm-room__badge-text" id="wm-badge-text">
|
|
214
|
+
<%= @error ? "Retrying" : "Waiting" %>
|
|
215
|
+
</span>
|
|
216
|
+
</div>
|
|
217
|
+
|
|
218
|
+
<h1 id="wm-room-title" class="wm-room__title">
|
|
219
|
+
<%= @error ? "Still holding your place" : "You're in line" %>
|
|
220
|
+
</h1>
|
|
221
|
+
|
|
222
|
+
<div class="wm-room__metric" id="wm-metric" aria-live="polite" <% if @error %>hidden<% end %>>
|
|
223
|
+
<span class="wm-room__metric-label">Place in line</span>
|
|
224
|
+
<span class="wm-room__metric-value" id="wm-position"><%= @position %></span>
|
|
225
|
+
</div>
|
|
226
|
+
|
|
227
|
+
<p class="wm-room__message" id="wm-message">
|
|
228
|
+
<% if @error %>
|
|
229
|
+
We couldn't update your place. We'll try again shortly.
|
|
230
|
+
<% else %>
|
|
231
|
+
Keep this tab open — we'll send you through automatically.
|
|
232
|
+
<% end %>
|
|
233
|
+
</p>
|
|
234
|
+
|
|
235
|
+
<div class="wm-room__actions">
|
|
236
|
+
<button class="wm-room__button" id="wm-retry" <% unless @error %>hidden<% end %>>Retry now</button>
|
|
237
|
+
<a class="wm-room__button" id="wm-continue" href="#" hidden>Continue</a>
|
|
238
|
+
</div>
|
|
239
|
+
|
|
240
|
+
<div class="wm-room__progress" id="wm-progress" hidden></div>
|
|
241
|
+
</main>
|
|
242
|
+
|
|
243
|
+
<% unless @error %>
|
|
244
|
+
<script>
|
|
245
|
+
(function() {
|
|
246
|
+
var shell = document.querySelector('.wm-room__shell');
|
|
247
|
+
var badgeText = document.getElementById('wm-badge-text');
|
|
248
|
+
var title = document.getElementById('wm-room-title');
|
|
249
|
+
var metric = document.getElementById('wm-metric');
|
|
250
|
+
var positionEl = document.getElementById('wm-position');
|
|
251
|
+
var message = document.getElementById('wm-message');
|
|
252
|
+
var retryBtn = document.getElementById('wm-retry');
|
|
253
|
+
var continueLink = document.getElementById('wm-continue');
|
|
254
|
+
var progress = document.getElementById('wm-progress');
|
|
255
|
+
|
|
256
|
+
var target = <%= raw json_escape(@target.to_json) %>;
|
|
257
|
+
var ticket = <%= raw json_escape(@ticket.to_json) %>;
|
|
258
|
+
var pollUrl = <%= raw json_escape(room_position_path(ticket: @ticket, queue: @queue).to_json) %>;
|
|
259
|
+
var interval = <%= Waitmate.configuration.polling_interval * 1000 %>;
|
|
260
|
+
|
|
261
|
+
var timer = null;
|
|
262
|
+
|
|
263
|
+
function setState(state) {
|
|
264
|
+
shell.classList.remove('is-queued', 'is-admitted', 'is-error');
|
|
265
|
+
shell.classList.add('is-' + state);
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
function navigateToTarget() {
|
|
269
|
+
var separator = target.indexOf('?') === -1 ? '?' : '&';
|
|
270
|
+
window.location.href = target + separator + 'ticket=' + encodeURIComponent(ticket);
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
function schedule() {
|
|
274
|
+
clearTimeout(timer);
|
|
275
|
+
var jitter = interval * (0.8 + Math.random() * 0.4);
|
|
276
|
+
timer = setTimeout(poll, jitter);
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
function showQueued(position) {
|
|
280
|
+
setState('queued');
|
|
281
|
+
badgeText.textContent = 'Waiting';
|
|
282
|
+
title.textContent = "You're in line";
|
|
283
|
+
metric.hidden = false;
|
|
284
|
+
positionEl.textContent = position;
|
|
285
|
+
message.textContent = 'Keep this tab open — we'll send you through automatically.';
|
|
286
|
+
retryBtn.hidden = true;
|
|
287
|
+
continueLink.hidden = true;
|
|
288
|
+
progress.hidden = true;
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
function showAdmitted() {
|
|
292
|
+
setState('admitted');
|
|
293
|
+
badgeText.textContent = 'Admitted';
|
|
294
|
+
title.textContent = "You're next";
|
|
295
|
+
metric.hidden = true;
|
|
296
|
+
message.textContent = 'Redirecting you now…';
|
|
297
|
+
retryBtn.hidden = true;
|
|
298
|
+
continueLink.hidden = false;
|
|
299
|
+
continueLink.href = target + (target.indexOf('?') === -1 ? '?' : '&') + 'ticket=' + encodeURIComponent(ticket);
|
|
300
|
+
progress.hidden = false;
|
|
301
|
+
navigateToTarget();
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
function showError() {
|
|
305
|
+
setState('error');
|
|
306
|
+
badgeText.textContent = 'Retrying';
|
|
307
|
+
title.textContent = 'Still holding your place';
|
|
308
|
+
metric.hidden = true;
|
|
309
|
+
message.textContent = "We couldn't update your place. We'll try again shortly.";
|
|
310
|
+
retryBtn.hidden = false;
|
|
311
|
+
continueLink.hidden = true;
|
|
312
|
+
progress.hidden = true;
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
function poll() {
|
|
316
|
+
fetch(pollUrl, {headers: {'Accept': 'application/json'}})
|
|
317
|
+
.then(function(response) { return response.json(); })
|
|
318
|
+
.then(function(data) {
|
|
319
|
+
if (data.admitted) {
|
|
320
|
+
showAdmitted();
|
|
321
|
+
} else if (data.position === null) {
|
|
322
|
+
showError();
|
|
323
|
+
schedule();
|
|
324
|
+
} else {
|
|
325
|
+
showQueued(data.position);
|
|
326
|
+
schedule();
|
|
327
|
+
}
|
|
328
|
+
})
|
|
329
|
+
.catch(function() {
|
|
330
|
+
showError();
|
|
331
|
+
schedule();
|
|
332
|
+
});
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
retryBtn.addEventListener('click', function() {
|
|
336
|
+
showQueued(positionEl.textContent || '—');
|
|
337
|
+
poll();
|
|
338
|
+
});
|
|
339
|
+
|
|
340
|
+
continueLink.addEventListener('click', function(event) {
|
|
341
|
+
event.preventDefault();
|
|
342
|
+
navigateToTarget();
|
|
343
|
+
});
|
|
344
|
+
|
|
345
|
+
schedule();
|
|
346
|
+
})();
|
|
347
|
+
</script>
|
|
348
|
+
<% end %>
|
|
349
|
+
</body>
|
|
350
|
+
</html>
|