From 672cadd7e136a23e71d1c319fa452695821f2846 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniele=20Vigan=C3=B2?= <daniele@vigano.me>
Date: Wed, 28 May 2025 23:38:02 +0200
Subject: [PATCH] Introduce symbols legend

---
 ram/portal/templates/base.html             |  1 +
 ram/portal/templates/cards/roster.html     |  2 +-
 ram/portal/templates/includes/symbols.html | 39 ++++++++++++++++++++++
 ram/portal/templates/rollingstock.html     | 10 +++---
 ram/portal/templatetags/dcc.py             |  7 ++--
 5 files changed, 51 insertions(+), 8 deletions(-)
 create mode 100644 ram/portal/templates/includes/symbols.html

diff --git a/ram/portal/templates/base.html b/ram/portal/templates/base.html
index 00fb3ae..8968660 100644
--- a/ram/portal/templates/base.html
+++ b/ram/portal/templates/base.html
@@ -215,6 +215,7 @@
         <div class="container">{% block pagination %}{% endblock %}</div>
       </div>
       {% block extra_content %}{% endblock %}
+      {% include 'includes/symbols.html' %}
     </main>
     {% include 'includes/footer.html' %}
     {% if site_conf.use_cdn %}
diff --git a/ram/portal/templates/cards/roster.html b/ram/portal/templates/cards/roster.html
index 4915334..4519c05 100644
--- a/ram/portal/templates/cards/roster.html
+++ b/ram/portal/templates/cards/roster.html
@@ -77,7 +77,7 @@
                   </tr>
                   <tr>
                     <th scope="row">DCC</th>
-                    <td>{% dcc d.item %}</td>
+                    <td><a class="text-reset text-decoration-none" title="Symbols" href="" data-bs-toggle="modal" data-bs-target="#symbolsModal">{% dcc d.item %}</a></td>
                   </tr>
                 </tbody>
               </table>
diff --git a/ram/portal/templates/includes/symbols.html b/ram/portal/templates/includes/symbols.html
new file mode 100644
index 0000000..ff31c03
--- /dev/null
+++ b/ram/portal/templates/includes/symbols.html
@@ -0,0 +1,39 @@
+    <!-- Modal -->
+    <div class="modal fade" id="symbolsModal" tabindex="-1" aria-labelledby="symbolsLabel" aria-hidden="true">
+      <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h1 class="modal-title fs-5" id="symbolsLabel">Symbols</h1>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          </div>
+          <div class="modal-body">
+            <table class="table table-striped">
+              <thead>
+                <tr>
+                  <th colspan="2" scope="row">DCC symbols</th>
+                </tr>
+              </thead>
+              <tbody class="table-group-divider">
+                <tr>
+                  <th scope="row" class="text-center"><i class="bi bi-ban small"></i></th>
+                  <td>No socket</td>
+                </tr>
+                <tr>
+                  <th scope="row" class="text-center"><i class="bi bi-dice-6 small"></i></th>
+                  <td>Socket available</td>
+                </tr>
+                <tr>
+                  <th scope="row" class="text-center"><i class="bi bi-arrow-bar-left"></i><i class="bi bi-cpu-fill small"></i></th>
+                  <td>Decoder installed</td>
+                </tr>
+                <tr>
+                  <th scope="row" class="text-center"><i class="bi bi-arrow-bar-left"></i><i class="bi bi-volume-up-fill small"></i></th>
+                  <td>Sound decoder installed</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+
diff --git a/ram/portal/templates/rollingstock.html b/ram/portal/templates/rollingstock.html
index 0b63f37..6cb0eef 100644
--- a/ram/portal/templates/rollingstock.html
+++ b/ram/portal/templates/rollingstock.html
@@ -52,7 +52,7 @@
                 <button class="nav-link" id="nav-model-tab" data-bs-toggle="tab" data-bs-target="#nav-model" type="button" role="tab" aria-controls="nav-model" aria-selected="false">Model</button>
                 <button class="nav-link" id="nav-class-tab" data-bs-toggle="tab" data-bs-target="#nav-class" type="button" role="tab" aria-controls="nav-class" aria-selected="false">Class</button>
                 <button class="nav-link" id="nav-company-tab" data-bs-toggle="tab" data-bs-target="#nav-company" type="button" role="tab" aria-controls="nav-company" aria-selected="false">Company</button>
-                {% if rolling_stock.decoder %}<button class="nav-link" id="nav-dcc-tab" data-bs-toggle="tab" data-bs-target="#nav-dcc" type="button" role="tab" aria-controls="nav-dcc" aria-selected="false">DCC</button>{% endif %}
+                {% if rolling_stock.decoder or rolling_stock.decoder_interface %}<button class="nav-link" id="nav-dcc-tab" data-bs-toggle="tab" data-bs-target="#nav-dcc" type="button" role="tab" aria-controls="nav-dcc" aria-selected="false">DCC</button>{% endif %}
                 {% if documents or decoder_documents %}<button class="nav-link" id="nav-documents-tab" data-bs-toggle="tab" data-bs-target="#nav-documents" type="button" role="tab" aria-controls="nav-documents" aria-selected="false">Documents</button>{% endif %}
                 {% if journal %}<button class="nav-link" id="nav-journal-tab" data-bs-toggle="tab" data-bs-target="#nav-journal" type="button" role="tab" aria-controls="nav-journal" aria-selected="false">Journal</button>{% endif %}
                 {% if set %}<button class="nav-link" id="nav-set-tab" data-bs-toggle="tab" data-bs-target="#nav-set" type="button" role="tab" aria-controls="nav-set" aria-selected="false">Set</button>{% endif %}
@@ -63,7 +63,7 @@
                 <option value="nav-model">Model</option>
                 <option value="nav-class">Class</option>
                 <option value="nav-company">Company</option>
-                {% if rolling_stock.decoder %}<option value="nav-dcc">DCC</option>{% endif %}
+                {% if rolling_stock.decoder or rolling_stock.decoder_interface %}<option value="nav-dcc">DCC</option>{% endif %}
                 {% if documents or decoder_documents %}<option value="nav-documents">Documents</option>{% endif %}
                 {% if journal %}<option value="nav-journal">Journal</option>{% endif %}
                 {% if set %}<option value="nav-set">Set</option>{% endif %}
@@ -144,7 +144,7 @@
                     <thead>
                       <tr>
                         <th colspan="2" scope="row">DCC data
-                          <span class="mt-1 float-end">{% dcc rolling_stock %}</span>
+                        <a class="mt-1 float-end text-reset text-decoration-none" title="Symbols" href="" data-bs-toggle="modal" data-bs-target="#symbolsModal">{% dcc rolling_stock %}</a>
                         </th>
                       </tr>
                     </thead>
@@ -353,7 +353,7 @@
                     <thead>
                       <tr>
                         <th colspan="2" scope="row">Decoder data
-                            <span class="mt-1 float-end">{% dcc rolling_stock %}</span>
+                        <a class="mt-1 float-end text-reset text-decoration-none" title="Symbols" href="" data-bs-toggle="modal" data-bs-target="#symbolsModal">{% dcc rolling_stock %}</a>
                         </th>
                       </tr>
                     </thead>
@@ -362,6 +362,7 @@
                         <th class="w-33" scope="row">Interface</th>
                         <td>{{ rolling_stock.get_decoder_interface }}</td>
                       </tr>
+                      {% if rolling_stock.decoder %}
                       <tr>
                         <th scope="row">Manufacturer</th>
                         <td>{{ rolling_stock.decoder.manufacturer | default:"-" }}</td>
@@ -397,6 +398,7 @@
                         <th class="w-33" scope="row">Address</th>
                         <td>{{ rolling_stock.address }}</td>
                       </tr>
+                      {% endif %}
                     </tbody>
                   </table>
                 </div>
diff --git a/ram/portal/templatetags/dcc.py b/ram/portal/templatetags/dcc.py
index e5fa600..c1ff7e9 100644
--- a/ram/portal/templatetags/dcc.py
+++ b/ram/portal/templatetags/dcc.py
@@ -18,18 +18,19 @@ def dcc(object):
     if object.decoder:
         if object.decoder.sound:
             decoder = (
-                f'<abbr title="{object.decoder} (with sounds)">'
+                f'<abbr title="{object.decoder}">'
                 '<i class="bi bi-volume-up-fill"></i></abbr>'
             )
         else:
             decoder = (
-                f'<abbr title="{object.decoder}">'
+                f'<abbr title="{object.decoder}'
+                f'({object.get_decoder_interface()})">'
                 '<i class="bi bi-cpu-fill"></i></abbr>'
             )
 
     if decoder:
         return format_html(
-            f'{socket} <i class="bi bi-arrow-bar-left"></i> {decoder}'
+            f'{socket} <i class="bi bi-arrow-bar-left"></i>{decoder}'
         )
 
     return format_html(socket)