datatracker/ietf/templates/meeting/floor-plan.html

{% extends "base.html" %}
{# Copyright The IETF Trust 2015, All Rights Reserved #}
{% load origin %}
{% load ietf_filters %}
{% load textfilters %}
{% load static %}
{% block title %}
    IETF {{ meeting.number }} meeting agenda
    {% if "-utc" in request.path %}(UTC){% endif %}
{% endblock %}
{% block bodyAttrs %}onload="automaticarrow(); checkParams();" onresize="checkParams();"{% endblock %}
{% block precontent %}
    <div class="meeting-switch">
        <i class="bi bi-arrow-left-right me-2"></i>
        <a href="{% url 'floor-plan-neue' num=schedule.meeting.number %}">Switch to New Agenda Display</a>
    </div>
{% endblock %}
{% block content %}
    {% origin %}
    {% include "meeting/meeting_heading.html" with selected="floor-plan" title_extra="Floor Plan" %}
    {% for floor in floors %}
        <h2 class="mt-4" id="floor-{{ floor.name|xslugify }}">{{ floor.name }}</h2>
        <div class="row rooms">
            <div class="col-sm-2">
                {% for f in floors %}
                    {% for room in f.room_set.all %}
                        <a href="javascript: setarrow('room-{{ room.name|xslugify }}')">{{ room.name }}</a>
                        <br>
                    {% endfor %}
                {% endfor %}
            </div>
            <div class="col-sm-2">
                {% for f in floors %}
                    {% for room in f.room_set.all %}
                        {% if room.functional_display_name %}
                            <a href="javascript: setarrow('room-{{ room.name|xslugify }}')">{{ room.functional_display_name }}</a>
                            <br>
                        {% endif %}
                    {% endfor %}
                {% endfor %}
            </div>
            <div class="col-sm-8">
                <div class="floor-plan position-relative">
                    {% if floor.image %}
                        <img id="floor-{{ floor.name|xslugify }}-image"
                             alt="{{ floor.name }} Map"
                             class="img-fluid w-100"
                             src="{{ floor.image.url }}">
                        {# We need as many of these as we can have individual rooms combining into one #}
                        <div id="floor-{{ floor.name|xslugify }}-arrowdiv0"
                             class="position-absolute" hidden>
                            <img alt="Location arrow" src="{% static 'ietf/images/arrow-ani.webp' %}">
                        </div>
                        <div id="floor-{{ floor.name|xslugify }}-arrowdiv1"
                             class="position-absolute" hidden>
                            <img alt="Location arrow" src="{% static 'ietf/images/arrow-ani.webp' %}">
                        </div>
                        <div id="floor-{{ floor.name|xslugify }}-arrowdiv2"
                             class="position-absolute" hidden>
                            <img alt="Location arrow" src="{% static 'ietf/images/arrow-ani.webp' %}">
                        </div>
                        <div id="floor-{{ floor.name|xslugify }}-arrowdiv3"
                             class="position-absolute" hidden>
                            <img alt="Location arrow" src="{% static 'ietf/images/arrow-ani.webp' %}">
                        </div>
                    {% else %}
                        No floor image available yet.
                    {% endif %}
                </div>
            </div>
        </div>
    {% endfor %}
{% endblock %}
{% block js %}
    <script src="{% static 'ietf/js/room_params.js' %}"></script>
    <script>
        // These must match the 'arrowdiv' divs above
        var arrowsuffixlist = [ '0', '1', '2', '3' ];
        var floorlist = [{% for floor in floors %}{% if not forloop.first %}, {%endif%}'floor-{{floor.name|xslugify}}'{% endfor %}];

        function roommap(nm)
        {
            var c = findroom(nm);
            if (c) return nm;
            var m = suffixmap(nm);
            // console.log("m=" + m);
            return m;
        }

        function findroom(nm)
        {
            var left = 0, top = 0, right = 0, bottom = 0, floor="", width=0;

            if (0) { }
            {% for room in meeting.room_set.all %}{% if room.floorplan %}
                else if (nm == 'room-{{room.name|xslugify}}') { left = {{room.left}}; top = {{room.top}}; right = {{room.right}}; bottom = {{room.bottom}}; floor='floor-{{room.floorplan.name|xslugify}}'; width={{room.floorplan.image.width}}; }{% endif %}{% endfor %}

            {% for room in meeting.room_set.all %}{% if room.functional_display_name %}{% if room.floorplan %}
                else if (nm == '{{room.functional_name|xslugify}}') { left = {{room.left}}; top = {{room.top}}; right = {{room.right}}; bottom = {{room.bottom}}; floor='floor-{{room.floorplan.name|xslugify}}'; width={{room.floorplan.image.width}}; }{% endif %}{% endif %}{% endfor %}

            else return null;

            // console.log("nm=" + nm + ",left=" + left + ",top=" + top + ",r=" + right + ",b=" + bottom);
            return [left, top, right, bottom, floor, width];
        }
    </script>
{% endblock %}