{# Hand-authored floor plan. The geometry below is the drawing; `svgElementId` on each Resource is the key that ties a database row to a shape here. A resource whose id is missing from the map is simply not drawn (and vice versa), which is why app:seed and this map have to agree. Colouring needs no JavaScript at all: the SVG is re-rendered server side for the selected day, so free/booked/yours is decided in Twig. #} {% set desk_plan = { 'desk-01': { x: 50, y: 70 }, 'desk-02': { x: 190, y: 70 }, 'desk-03': { x: 330, y: 70 }, 'desk-04': { x: 50, y: 170 }, 'desk-05': { x: 190, y: 170 }, 'desk-06': { x: 330, y: 170 }, 'desk-07': { x: 50, y: 270 }, 'desk-08': { x: 190, y: 270 }, 'desk-09': { x: 330, y: 270 }, 'desk-10': { x: 50, y: 370 }, 'desk-11': { x: 190, y: 370 }, 'desk-12': { x: 330, y: 370 } } %} {% set parking_plan = { 'parking-01': { x: 540, y: 60 }, 'parking-02': { x: 540, y: 125 }, 'parking-03': { x: 540, y: 190 }, 'parking-04': { x: 540, y: 255 }, 'parking-05': { x: 540, y: 320 }, 'parking-06': { x: 540, y: 385 } } %} {% macro spot(resource, geometry, width, height, booking, selected_date, is_past) %} {% set mine = booking is not null and booking.user.id == app.user.id %} {% if mine %} {% set fill = 'fill-primary' %}{% set stroke = 'stroke-primary-dark' %}{% set text = 'fill-white' %} {% elseif booking is not null %} {% set fill = 'fill-gray-200' %}{% set stroke = 'stroke-gray-400' %}{% set text = 'fill-gray-600' %} {% else %} {% set fill = 'fill-emerald-50' %}{% set stroke = 'stroke-emerald-500' %}{% set text = 'fill-emerald-900' %} {% endif %} {% set interactive = not is_past and (mine or booking is null) %} ; closing it is Stimulus, not htmx. #} hx-get="{{ path('app_booking_new', { id: resource.id, date: selected_date|date('Y-m-d') }) }}" hx-target="body" hx-swap="beforeend" {%- endif %}> {{- resource.label }}{% if booking %} — {{ mine ? 'von dir gebucht' : booking.user.name }}{% else %} — frei{% endif -%} {{ resource.label }} {% if booking %} {{ mine ? 'du' : booking.user.name }} {% endif %} {% endmacro %}

{{ selected_date|format_datetime(pattern: 'EEEE, d. MMMM y') }}

frei belegt deine
{% if is_past %}

Vergangener Tag — hier lässt sich nichts mehr buchen.

{% endif %} Büro Parkplatz {% for resource in desks %} {% if resource.svgElementId and desk_plan[resource.svgElementId] is defined %} {{ _self.spot(resource, desk_plan[resource.svgElementId], 120, 70, bookings_by_resource[resource.id]|default(null), selected_date, is_past) }} {% endif %} {% endfor %} {% for resource in parking %} {% if resource.svgElementId and parking_plan[resource.svgElementId] is defined %} {{ _self.spot(resource, parking_plan[resource.svgElementId], 230, 50, bookings_by_resource[resource.id]|default(null), selected_date, is_past) }} {% endif %} {% endfor %}