Add physical escape room map, reviews, and website admin
Public:
- /escape-rooms: Leaflet + OpenStreetMap map with marker clustering and a
searchable list, both built from a cached slim JSON feed
- /escape-rooms/{id}-{slug}: room detail with a mini-map and user reviews
(rating + title + body, login required)
- /escape-rooms/suggest: visitor submission form with click-to-drop-pin map
and reCAPTCHA v3; new rooms land as pending
Data:
- EscapeRoom / EscapeRoomReview entities (soft-delete), migration
- app:escaperooms:import-osm console command pulls leisure=escape_game from
the Overpass API, upserts by (osmType, osmId), skips locked rows;
--tiled / --area / --bbox options
Admin (new "Website Admin" area, separate from Game Admin):
- src/Website/Controller/AdminEscapeRoomController.php at /admin/escape-rooms:
status-filtered list, new/edit, publish/hide/reject, delete, review removal
- game admin sidebar extracted into a block and cross-linked
Assets: leaflet + leaflet.markercluster; escaperoom-map and escaperoom-detail
Encore entries.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Frank
@@ -0,0 +1,74 @@
|
||||
{% extends 'layout/site.html.twig' %}
|
||||
|
||||
{% block title %}Escape room map | {{ 'site.name'|trans }}{% endblock %}
|
||||
|
||||
{% block stylesheets %}
|
||||
{{ parent() }}
|
||||
{{ encore_entry_link_tags('escaperoom-map') }}
|
||||
<style>
|
||||
#escaperoom-map {
|
||||
height: 70vh;
|
||||
min-height: 420px;
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
z-index: 0;
|
||||
}
|
||||
.escaperoom-list-wrap {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, .07);
|
||||
overflow: hidden;
|
||||
}
|
||||
.escaperoom-list-wrap table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: .9rem;
|
||||
}
|
||||
.escaperoom-list-wrap th,
|
||||
.escaperoom-list-wrap td {
|
||||
padding: .6rem .9rem;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
{% set detailTemplate = path('website_escaperoom_show', {id: 987654321, slug: 'zzslugzz'})|replace({'987654321': '__ID__', 'zzslugzz': '__SLUG__'}) %}
|
||||
|
||||
<div class="d-flex flex-wrap align-items-baseline justify-content-between mb-3">
|
||||
<div>
|
||||
<h1 class="display-6 fw-bold mb-1">Physical escape rooms</h1>
|
||||
<p class="text-secondary mb-0">Zoom in to find rooms near you, then open one to read and leave reviews.</p>
|
||||
</div>
|
||||
<div class="text-end">
|
||||
<div id="escaperoom-status" class="small text-secondary">{{ publishedCount }} rooms on the map</div>
|
||||
<a href="{{ path('website_escaperoom_suggest') }}" class="btn btn-sm btn-outline-primary mt-1">Suggest a room</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="escaperoom-map"
|
||||
data-endpoint="{{ path('website_escaperooms_data') }}"
|
||||
data-detail-template="{{ detailTemplate }}"
|
||||
class="mb-4"></div>
|
||||
|
||||
<div class="escaperoom-list-wrap">
|
||||
<table id="escaperoom-list">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>City</th>
|
||||
<th>Country</th>
|
||||
<th>Rating</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td colspan="4" class="text-center text-secondary py-4">Loading rooms…</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block javascripts %}
|
||||
{{ parent() }}
|
||||
{{ encore_entry_script_tags('escaperoom-map') }}
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,122 @@
|
||||
{% extends 'layout/site.html.twig' %}
|
||||
|
||||
{% block title %}{{ room.name }} | {{ 'site.name'|trans }}{% endblock %}
|
||||
|
||||
{% block stylesheets %}
|
||||
{{ parent() }}
|
||||
{{ encore_entry_link_tags('escaperoom-detail') }}
|
||||
<style>
|
||||
#escaperoom-detail-map {
|
||||
height: 260px;
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
z-index: 0;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb small">
|
||||
<li class="breadcrumb-item"><a href="{{ path('website_escaperooms') }}">Escape room map</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">{{ room.name }}</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<div class="row g-4">
|
||||
<div class="col-lg-7">
|
||||
<h1 class="h3 fw-bold mb-1">{{ room.name }}</h1>
|
||||
{% if room.venue %}<p class="text-secondary mb-2">{{ room.venue }}</p>{% endif %}
|
||||
|
||||
<p class="mb-1">
|
||||
{% if rating.count > 0 %}
|
||||
<span class="fw-semibold">{{ rating.avg }} ★</span>
|
||||
<span class="text-secondary">· {{ rating.count }} review{{ rating.count != 1 ? 's' : '' }}</span>
|
||||
{% else %}
|
||||
<span class="text-secondary">No reviews yet</span>
|
||||
{% endif %}
|
||||
</p>
|
||||
|
||||
{% if room.displayAddress %}
|
||||
<p class="mb-1">{{ room.displayAddress }}</p>
|
||||
{% endif %}
|
||||
<p class="mb-3 small">
|
||||
{% if room.website %}<a href="{{ room.website }}" target="_blank" rel="noopener nofollow">Website</a> · {% endif %}
|
||||
{% if room.phone %}{{ room.phone }} · {% endif %}
|
||||
<a href="https://www.openstreetmap.org/?mlat={{ room.latitude }}&mlon={{ room.longitude }}#map=17/{{ room.latitude }}/{{ room.longitude }}"
|
||||
target="_blank" rel="noopener">Open in OpenStreetMap</a>
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h2 class="h5 mb-3">Reviews</h2>
|
||||
|
||||
{% if app.user %}
|
||||
<div class="card shadow-sm mb-4">
|
||||
<div class="card-body">
|
||||
<h3 class="h6 mb-3">Leave a review</h3>
|
||||
{{ form_start(reviewForm, {action: path('website_escaperoom_review', {id: room.id})}) }}
|
||||
<div class="mb-2">
|
||||
{{ form_label(reviewForm.rating) }}
|
||||
{{ form_widget(reviewForm.rating, {attr: {class: 'form-select'}}) }}
|
||||
{{ form_errors(reviewForm.rating) }}
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
{{ form_label(reviewForm.title) }}
|
||||
{{ form_widget(reviewForm.title, {attr: {class: 'form-control'}}) }}
|
||||
{{ form_errors(reviewForm.title) }}
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
{{ form_label(reviewForm.body) }}
|
||||
{{ form_widget(reviewForm.body, {attr: {class: 'form-control'}}) }}
|
||||
{{ form_errors(reviewForm.body) }}
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary btn-sm">Post review</button>
|
||||
{{ form_end(reviewForm) }}
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<p class="small"><a href="{{ path('app_login') }}">Log in</a> to leave a review.</p>
|
||||
{% endif %}
|
||||
|
||||
{% for review in reviews %}
|
||||
<article class="mb-3 pb-3 border-bottom">
|
||||
<div class="d-flex justify-content-between">
|
||||
<strong>{{ review.title }}</strong>
|
||||
<span>
|
||||
{%- for i in 1..5 -%}
|
||||
<span class="{{ i <= review.rating ? 'text-warning' : 'text-secondary' }}">★</span>
|
||||
{%- endfor -%}
|
||||
</span>
|
||||
</div>
|
||||
<div class="small text-secondary mb-1">
|
||||
{{ review.author ? review.author.username : 'Anonymous' }} · {{ review.createdAt|date('Y-m-d') }}
|
||||
</div>
|
||||
<p class="mb-0">{{ review.body|nl2br }}</p>
|
||||
</article>
|
||||
{% else %}
|
||||
<p class="text-secondary">Be the first to review this room.</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="col-lg-5">
|
||||
<div id="escaperoom-detail-map"
|
||||
data-lat="{{ room.latitude }}"
|
||||
data-lng="{{ room.longitude }}"
|
||||
class="mb-3"></div>
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body small">
|
||||
<div class="text-secondary">Coordinates</div>
|
||||
<div class="mb-2">{{ room.latitude }}, {{ room.longitude }}</div>
|
||||
<div class="text-secondary">Listing source</div>
|
||||
<div>{{ room.source.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block javascripts %}
|
||||
{{ parent() }}
|
||||
{{ encore_entry_script_tags('escaperoom-detail') }}
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,105 @@
|
||||
{% extends 'layout/site.html.twig' %}
|
||||
|
||||
{% block title %}Suggest an escape room | {{ 'site.name'|trans }}{% endblock %}
|
||||
|
||||
{% block stylesheets %}
|
||||
{{ parent() }}
|
||||
{{ encore_entry_link_tags('escaperoom-detail') }}
|
||||
<style>
|
||||
#escaperoom-suggest-map {
|
||||
height: 340px;
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
z-index: 0;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb small">
|
||||
<li class="breadcrumb-item"><a href="{{ path('website_escaperooms') }}">Escape room map</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Suggest a room</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<h1 class="h3 fw-bold mb-1">Suggest an escape room</h1>
|
||||
<p class="text-secondary">Know a physical escape room that isn't on the map? Add it here — an admin will review it before it goes live.</p>
|
||||
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body">
|
||||
{{ form_errors(form) }}
|
||||
{{ form_start(form) }}
|
||||
<div class="mb-3">
|
||||
{{ form_label(form.name) }}
|
||||
{{ form_widget(form.name, {attr: {class: 'form-control'}}) }}
|
||||
{{ form_errors(form.name) }}
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
{{ form_label(form.venue) }}
|
||||
{{ form_widget(form.venue, {attr: {class: 'form-control'}}) }}
|
||||
{{ form_errors(form.venue) }}
|
||||
</div>
|
||||
|
||||
<div class="row g-2">
|
||||
<div class="col-9 mb-3">
|
||||
{{ form_label(form.street) }}
|
||||
{{ form_widget(form.street, {attr: {class: 'form-control'}}) }}
|
||||
</div>
|
||||
<div class="col-3 mb-3">
|
||||
{{ form_label(form.houseNumber) }}
|
||||
{{ form_widget(form.houseNumber, {attr: {class: 'form-control'}}) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row g-2">
|
||||
<div class="col-4 mb-3">
|
||||
{{ form_label(form.postcode) }}
|
||||
{{ form_widget(form.postcode, {attr: {class: 'form-control'}}) }}
|
||||
</div>
|
||||
<div class="col-8 mb-3">
|
||||
{{ form_label(form.city) }}
|
||||
{{ form_widget(form.city, {attr: {class: 'form-control'}}) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
{{ form_label(form.country) }}
|
||||
{{ form_widget(form.country, {attr: {class: 'form-select'}}) }}
|
||||
</div>
|
||||
<div class="row g-2">
|
||||
<div class="col-sm-6 mb-3">
|
||||
{{ form_label(form.website) }}
|
||||
{{ form_widget(form.website, {attr: {class: 'form-control'}}) }}
|
||||
</div>
|
||||
<div class="col-sm-6 mb-3">
|
||||
{{ form_label(form.phone) }}
|
||||
{{ form_widget(form.phone, {attr: {class: 'form-control'}}) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label class="form-label">Location <span class="text-secondary fw-normal">— click the map to drop a pin</span></label>
|
||||
<div id="escaperoom-suggest-map" class="mb-2"></div>
|
||||
{{ form_widget(form.latitude) }}
|
||||
{{ form_widget(form.longitude) }}
|
||||
{{ form_errors(form.latitude) }}
|
||||
{{ form_errors(form.longitude) }}
|
||||
|
||||
<div class="mt-3">
|
||||
{{ form_row(form.captcha) }}
|
||||
</div>
|
||||
|
||||
<div class="d-grid mt-3">
|
||||
<button type="submit" class="btn btn-primary">Submit for review</button>
|
||||
</div>
|
||||
{{ form_end(form) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block javascripts %}
|
||||
{{ parent() }}
|
||||
{{ encore_entry_script_tags('escaperoom-detail') }}
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user