feat(bindings): display bindings on channel, operation and message level

Close #25

partials/message.html

@@ -1,5 +1,6 @@
 {% from "./schema.html" import schema %}
 {% from "./tags.html" import tags %}
+{% from "./protocols.html" import bindings %}
 
 {% macro message(msg, showIndex=false, index=0, open=false) %}
 
@@ -23,7 +24,6 @@
   {% if correlationId %}
     <div class="border border-gray-400 bg-gray-200 rounded p-4 mt-2">
       <div class="text-sm text-gray-700 mb-2">Correlation ID<span class="border text-orange-600 rounded text-xs ml-3 py-0 px-2">{{correlationId.location()}}</span>
-
       </div>
       {% if correlationId.hasDescription() %}
         <div class="text-gray-600 text-sm">{{correlationId.description() | markdown2html | safe }}</div>
@@ -40,6 +40,9 @@
       {{ schema(msg.headers(), 'Headers', open=open) }}
     </div>
   {% endif %}
+
+  {{ bindings("Message", msg, odd=true) }}
+
 </div>
 
 {% endmacro %}

partials/operation.html

@@ -3,6 +3,7 @@
 {% from "./message.html" import message %}
 {% from "./example.html" import example %}
 {% from "./schema-prop.html" import schemaProp %}
+{% from "./protocols.html" import bindings %}
 
 
 {% macro operation(operation, operationType, channelName, channel) %}
@@ -26,6 +27,7 @@ <h3 class="font-mono text-base">
     <p class="text-gray-500 text-sm">{{operation.summary()}}</p>
     <div class="mt-4 mb-4 markdown">{{ operation.description() | markdown2html | safe }}</div>
 
+    {{ bindings("Channel", channel) }}
 
 
     {% if channel.parameters() | length %}
@@ -50,6 +52,7 @@ <h3 class="font-mono text-base">
       </div>
     {% endif %}
 
+    {{ bindings("Operation", channel) }}
 
     {% if operation.hasMultipleMessages() %}
     <p>Accepts <strong>one of</strong> the following messages:</p>

partials/operations.html

@@ -1,4 +1,6 @@
 {% from "./operation.html" import operation %}
+{% from "./protocols.html" import bindings %}
+
 
 <a name="operations"></a>
 <h2 class="mb-4 ml-8">Operations</h2>

partials/protocols.html

@@ -0,0 +1,60 @@
+{% macro displayProtocol(protocol, protocolVersion) %}
+    {% if protocolVersion %}
+    <span class="bg-teal-500 font-bold no-underline text-white uppercase rounded ml-2"
+          style="height: 20px;font-size: 11px;padding: 3px;">{{ protocol }}
+        {{ protocolVersion }}</span>
+    {% else %}
+    <span class="bg-teal-500 font-sans font-bold no-underline text-white uppercase rounded ml-2"
+          style="height: 20px;font-size: 11px;padding: 3px;">{{ protocol }}</span>
+    {% endif %}
+{% endmacro %}
+
+
+{% macro bindings(eltName, elt, odd=false) %}
+
+    {% if elt.hasBindings() %}
+        {% for protocol in elt.bindingProtocols() %}
+        <div class=" mt-4 text-sm">
+            <span class="string-chunk">{{eltName}} specific information:</span>
+            {{ displayProtocol(protocol) }}
+        </div>
+            {% for bindingName, bindingValue in elt.binding(protocol) %}
+                <div class="{% if odd %}bg-gray-100{% else %}bg-gray-200{% endif %} pl-6">
+                    {% if bindingValue | isObject %}
+                    <div class="{% if open %}is-open{% endif %}">
+                        <div class="js-prop cursor-pointer py-2 property">
+                            <div class="pr-4" style="margin-top: -2px; min-width: 25%">
+                                <span class="text-sm" style="word-break: break-word"
+                                >{{ bindingName }}</span
+                                >
+                                <svg
+                                        class="expand inline align-baseline"
+                                        version="1.1"
+                                        viewBox="0 0 24 24"
+                                        x="0"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        y="0"
+                                >
+                                    <polygon
+                                            points="17.3 8.3 12 13.6 6.7 8.3 5.3 9.7 12 16.4 18.7 9.7 "
+                                    ></polygon>
+                                </svg>
+                            </div>
+                        </div>
+                        <div class="children">
+                            <div
+                                    class="{% if odd %}bg-gray-200{% else %}bg-gray-100{% endif %} {% if not root %}pl-8 pr-8{% endif %} rounded"
+                            >
+                                <pre class="text-sm">{{ bindingValue | dump(2) }}</pre>
+                            </div>
+                        </div>
+                    </div>
+                    {% else %}
+                    <div class="text-sm">{{ bindingName }}: {{ bindingValue }}</div>
+                    {% endif %}
+                </div>
+            {% endfor %}
+        {% endfor %}
+    {% endif %}
+
+{% endmacro %}

partials/servers.html

@@ -1,4 +1,6 @@
 {% from "./sliced-string.html" import slicedString %}
+{% from "./protocols.html" import displayProtocol %}
+
 <a name="servers"></a>
 <div class="center-block p-8">
 
@@ -11,14 +13,7 @@ <h2 class="mb-4">Servers</h2>
           <div class="pr-4 font-mono">
             {{ slicedString(server.url()) }}
 
-            {% if server.protocolVersion() %}
-            <span class="bg-teal-500 font-bold no-underline text-white uppercase rounded ml-2"
-              style="height: 20px;font-size: 11px;padding: 3px;">{{server.protocol()}}
-              {{server.protocolVersion()}}</span>
-            {% else %}
-            <span class="bg-teal-500 font-sans font-bold no-underline text-white uppercase rounded ml-2"
-              style="height: 20px;font-size: 11px;padding: 3px;">{{server.protocol()}}</span>
-            {% endif %}
+            {{ displayProtocol(server.protocol(), server.protocolVersion()) }}
           </div>
           <div class="text-xs text-gray-600">
             {{ server.description() | markdown2html | safe }}