Make the js versioned

.gitignore

@@ -127,6 +127,11 @@ dmypy.json
 # Pyre type checker
 .pyre/
 
+# node.js / npm stuff
+node_modules
+package-lock.json
+
+# our own stuff
 *.swp
 ram/storage/
 !ram/storage/.gitignore

package.json

@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "clean-css-cli": "^5.6.3",
+    "terser": "^5.44.1"
+  }
+}

ram/bookshelf/admin.py

@@ -2,7 +2,12 @@ import html
 
 from django.conf import settings
 from django.contrib import admin
-from django.utils.html import format_html, format_html_join, strip_tags
+from django.utils.html import (
+    format_html,
+    format_html_join,
+    strip_tags,
+    mark_safe,
+)
 from adminsortable2.admin import SortableAdminBase, SortableInlineAdminMixin
 
 from ram.admin import publish, unpublish
@@ -29,7 +34,7 @@ from bookshelf.models import (
 class BookImageInline(SortableInlineAdminMixin, admin.TabularInline):
     model = BaseBookImage
     min_num = 0
-    extra = 0
+    extra = 1
     readonly_fields = ("image_thumbnail",)
     classes = ["collapse"]
     verbose_name = "Image"
@@ -47,7 +52,7 @@ class BookPropertyInline(admin.TabularInline):
 class BookDocInline(admin.TabularInline):
     model = BookDocument
     min_num = 0
-    extra = 0
+    extra = 1
     classes = ["collapse"]
 
 
@@ -149,7 +154,7 @@ class BookAdmin(SortableAdminBase, admin.ModelAdmin):
     def invoices(self, obj):
         if obj.invoice.exists():
             html = format_html_join(
-                "<br>",
+                mark_safe("<br>"),
                 '<a href="{}" target="_blank">{}</a>',
                 ((i.file.url, i) for i in obj.invoice.all()),
             )
@@ -317,7 +322,7 @@ class CatalogAdmin(SortableAdminBase, admin.ModelAdmin):
     def invoices(self, obj):
         if obj.invoice.exists():
             html = format_html_join(
-                "<br>",
+                mark_safe("<br>"),
                 '<a href="{}" target="_blank">{}</a>',
                 ((i.file.url, i) for i in obj.invoice.all()),
             )

ram/consist/admin.py

@@ -47,7 +47,7 @@ class ConsistAdmin(SortableAdminBase, admin.ModelAdmin):
         "creation_time",
         "updated_time",
     )
-    list_filter = ("published", "company__name", "era", "scale")
+    list_filter = ("published", "company__name", "era", "scale__scale")
     list_display = (
         "__str__",
         "company__name",

ram/metadata/admin.py

@@ -24,7 +24,7 @@ class PropertyAdmin(admin.ModelAdmin):
 class DecoderDocInline(admin.TabularInline):
     model = DecoderDocument
     min_num = 0
-    extra = 0
+    extra = 1
     classes = ["collapse"]
 
 

ram/portal/static/css/main.min.css

@@ -0,0 +1 @@
+html[data-bs-theme=dark] .navbar svg{fill:#fff}.card>a>img{width:100%}td>img.logo{max-width:200px;max-height:48px}td>img.logo-xl{max-width:400px;max-height:96px}td>p:last-child{margin-bottom:0}.btn>span{display:inline-block}a.badge,a.badge:hover{text-decoration:none;color:#fff}.img-thumbnail{padding:0}.w-33{width:33%!important}.table-group-divider{border-top:calc(var(--bs-border-width) * 3) solid var(--bs-border-color)}#nav-journal ol,#nav-journal ul{padding-left:1rem}#nav-journal ol:last-child,#nav-journal p:last-child,#nav-journal ul:last-child{margin-bottom:0}#footer>p{display:inline}

ram/portal/static/css/src/README.md

@@ -0,0 +1,7 @@
+# Compile main.min.css
+
+```bash
+$ npm install clean-css-cli 
+$ npx cleancss -o ../main.min.css main.css
+```
+

ram/portal/static/js/main.min.js

@@ -0,0 +1,6 @@
+/*!
+* Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
+* Copyright 2011-2023 The Bootstrap Authors
+* Licensed under the Creative Commons Attribution 3.0 Unported License.
+*/
+(()=>{"use strict";const e=()=>localStorage.getItem("theme"),t=()=>{const t=e();return t||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")},a=e=>{"auto"===e&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.setAttribute("data-bs-theme","dark"):document.documentElement.setAttribute("data-bs-theme",e)};a(t());const r=(e,t=!1)=>{const a=document.querySelector("#bd-theme");if(!a)return;const r=document.querySelector(".theme-icon-active i"),o=document.querySelector(`[data-bs-theme-value="${e}"]`),s=o.querySelector(".theme-icon i").getAttribute("class");document.querySelectorAll("[data-bs-theme-value]").forEach(e=>{e.classList.remove("active"),e.setAttribute("aria-pressed","false")}),o.classList.add("active"),o.setAttribute("aria-pressed","true"),r.setAttribute("class",s),t&&a.focus()};window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",()=>{const r=e();"light"!==r&&"dark"!==r&&a(t())}),window.addEventListener("DOMContentLoaded",()=>{r(t()),document.querySelectorAll("[data-bs-theme-value]").forEach(e=>{e.addEventListener("click",()=>{const t=e.getAttribute("data-bs-theme-value");(e=>{localStorage.setItem("theme",e)})(t),a(t),r(t,!0)})})})})(),document.addEventListener("DOMContentLoaded",function(){const e=document.getElementById("tabSelector"),t=window.location.hash.substring(1);if(t){const a=`#nav-${t}`,r=document.querySelector(`[data-bs-target="${a}"]`);r&&(bootstrap.Tab.getOrCreateInstance(r).show(),e.value=a)}document.querySelectorAll('button[data-bs-toggle="tab"]').forEach(e=>{e.addEventListener("shown.bs.tab",e=>{const t=e.target.getAttribute("data-bs-target").replace("nav-","");history.replaceState(null,null,t)})}),e&&(e.addEventListener("change",function(){const e=this.value,t=document.querySelector(`[data-bs-target="${e}"]`);if(t){bootstrap.Tab.getOrCreateInstance(t).show()}}),document.querySelectorAll('[data-bs-toggle="tab"]').forEach(t=>{t.addEventListener("shown.bs.tab",t=>{const a=t.target.getAttribute("data-bs-target");e.value=a})}))});

ram/portal/static/js/src/README.md

@@ -0,0 +1,7 @@
+# Compile main.min.js
+
+```bash
+$ npm install terser
+$ npx terser theme_selector.js tabs_selector.js -c -m -o ../main.min.js 
+```
+

ram/portal/static/js/src/tabs_selector.js

@@ -0,0 +1,41 @@
+// use Bootstrap 5's Tab component to manage tab navigation and synchronize with URL hash
+document.addEventListener("DOMContentLoaded", function () {
+  const selectElement = document.getElementById('tabSelector');
+  // code to handle tab selection and URL hash synchronization
+  const hash = window.location.hash.substring(1) // remove the '#' prefix
+  if (hash) {
+    const target = `#nav-${hash}`;
+    const trigger = document.querySelector(`[data-bs-target="${target}"]`);
+    if (trigger) {
+      bootstrap.Tab.getOrCreateInstance(trigger).show();
+      selectElement.value = target // keep the dropdown in sync
+    }
+  }
+
+  // update the URL hash when a tab is shown
+  document.querySelectorAll('button[data-bs-toggle="tab"]').forEach(btn => {
+    btn.addEventListener('shown.bs.tab', event => {
+      const newHash = event.target.getAttribute('data-bs-target').replace('nav-', '');
+      history.replaceState(null, null, newHash);
+    });
+  });
+
+  // allow tab selection via a dropdown on small screens
+  if (!selectElement) return;
+  selectElement.addEventListener('change', function () {
+    const target = this.value;
+    const trigger = document.querySelector(`[data-bs-target="${target}"]`);
+    if (trigger) {
+      const tabInstance = bootstrap.Tab.getOrCreateInstance(trigger);
+      tabInstance.show();
+    }
+  });
+
+  // keep the dropdown in sync if the user clicks a tab button
+  document.querySelectorAll('[data-bs-toggle="tab"]').forEach(btn => {
+    btn.addEventListener('shown.bs.tab', event => {
+      const target = event.target.getAttribute('data-bs-target');
+      selectElement.value = target
+    });
+  });
+});

ram/portal/static/js/src/theme_selector.js

@@ -0,0 +1,76 @@
+/*!
+* Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
+* Copyright 2011-2023 The Bootstrap Authors
+* Licensed under the Creative Commons Attribution 3.0 Unported License.
+*/
+
+(() => {
+  'use strict'
+
+  const getStoredTheme = () => localStorage.getItem('theme')
+  const setStoredTheme = theme => localStorage.setItem('theme', theme)
+
+  const getPreferredTheme = () => {
+    const storedTheme = getStoredTheme()
+    if (storedTheme) {
+      return storedTheme
+    }
+
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  }
+
+  const setTheme = theme => {
+    if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      document.documentElement.setAttribute('data-bs-theme', 'dark')
+    } else {
+      document.documentElement.setAttribute('data-bs-theme', theme)
+    }
+  }
+
+  setTheme(getPreferredTheme())
+
+  const showActiveTheme = (theme, focus = false) => {
+    const themeSwitcher = document.querySelector('#bd-theme')
+
+    if (!themeSwitcher) {
+      return
+    }
+
+    const activeThemeIcon = document.querySelector('.theme-icon-active i')
+    const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
+    const biOfActiveBtn = btnToActive.querySelector('.theme-icon i').getAttribute('class')
+
+    document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+      element.classList.remove('active')
+      element.setAttribute('aria-pressed', 'false')
+    })
+
+    btnToActive.classList.add('active')
+    btnToActive.setAttribute('aria-pressed', 'true')
+    activeThemeIcon.setAttribute('class', biOfActiveBtn)
+
+    if (focus) {
+      themeSwitcher.focus()
+    }
+  }
+
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+    const storedTheme = getStoredTheme()
+    if (storedTheme !== 'light' && storedTheme !== 'dark') {
+      setTheme(getPreferredTheme())
+    }
+  })
+
+  window.addEventListener('DOMContentLoaded', () => {
+    showActiveTheme(getPreferredTheme())
+    document.querySelectorAll('[data-bs-theme-value]')
+      .forEach(toggle => {
+        toggle.addEventListener('click', () => {
+          const theme = toggle.getAttribute('data-bs-theme-value')
+          setStoredTheme(theme)
+          setTheme(theme)
+          showActiveTheme(theme, true)
+        })
+      })
+    })
+ })()

ram/portal/templates/base.html

@@ -9,7 +9,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="color-scheme" content="light dark">
-    <meta name="description" content="{{ site_conf.about}}">
+    <meta name="description" content="{{ site_conf.about|striptags }}">
     <meta name="author" content="{{ site_conf.site_author }}">
     <meta name="generator" content="Django Framework">
     <title>{% block title %}{{ title }}{% endblock %} - {{ site_conf.site_name }}</title>
@@ -22,114 +22,8 @@
     <link href="{% static "bootstrap@5.3.8/dist/css/bootstrap.min.css" %}" rel="stylesheet">
     <link href="{% static "bootstrap-icons@1.13.1/font/bootstrap-icons.css" %}" rel="stylesheet">
     {% endif %}
-    <link href="{% static "css/main.css" %}?v={{ site_conf.version }}" rel="stylesheet">
-    <style>
-      .bd-placeholder-img {
-        font-size: 1.125rem;
-        text-anchor: middle;
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        user-select: none;
-      }
-      @media (min-width: 768px) {
-        .bd-placeholder-img-lg {
-          font-size: 3.5rem;
-        }
-      }
-    </style>
-    <script>
-      /*!
-      * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
-      * Copyright 2011-2023 The Bootstrap Authors
-      * Licensed under the Creative Commons Attribution 3.0 Unported License.
-      */
-
-      (() => {
-        'use strict'
-
-        const getStoredTheme = () => localStorage.getItem('theme')
-        const setStoredTheme = theme => localStorage.setItem('theme', theme)
-
-        const getPreferredTheme = () => {
-          const storedTheme = getStoredTheme()
-          if (storedTheme) {
-            return storedTheme
-          }
-
-          return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
-        }
-
-        const setTheme = theme => {
-          if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-            document.documentElement.setAttribute('data-bs-theme', 'dark')
-          } else {
-            document.documentElement.setAttribute('data-bs-theme', theme)
-          }
-        }
-
-        setTheme(getPreferredTheme())
-
-        const showActiveTheme = (theme, focus = false) => {
-          const themeSwitcher = document.querySelector('#bd-theme')
-
-          if (!themeSwitcher) {
-            return
-          }
-
-          const activeThemeIcon = document.querySelector('.theme-icon-active i')
-          const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
-          const biOfActiveBtn = btnToActive.querySelector('.theme-icon i').getAttribute('class')
-
-          document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
-            element.classList.remove('active')
-            element.setAttribute('aria-pressed', 'false')
-          })
-
-          btnToActive.classList.add('active')
-          btnToActive.setAttribute('aria-pressed', 'true')
-          activeThemeIcon.setAttribute('class', biOfActiveBtn)
-
-          if (focus) {
-            themeSwitcher.focus()
-          }
-        }
-
-        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
-          const storedTheme = getStoredTheme()
-          if (storedTheme !== 'light' && storedTheme !== 'dark') {
-            setTheme(getPreferredTheme())
-          }
-        })
-
-        window.addEventListener('DOMContentLoaded', () => {
-          showActiveTheme(getPreferredTheme())
-          document.querySelectorAll('[data-bs-theme-value]')
-            .forEach(toggle => {
-              toggle.addEventListener('click', () => {
-                const theme = toggle.getAttribute('data-bs-theme-value')
-                setStoredTheme(theme)
-                setTheme(theme)
-                showActiveTheme(theme, true)
-              })
-            })
-          })
-       })()
-    </script>
-    <script>
-      document.addEventListener('DOMContentLoaded', function () {
-      var selectElement = document.getElementById('tabSelector');
-        try {
-          selectElement.addEventListener('change', function () {
-            var selectedTabId = this.value;
-            var tabs = document.querySelectorAll('.tab-pane');
-            tabs.forEach(function (tab) {
-            tab.classList.remove('show', 'active');
-            });
-            document.getElementById(selectedTabId).classList.add('show', 'active');
-          });
-        } catch (TypeError) { /* pass */ }
-      });
-    </script>
+    <link href="{% static "css/main.min.css" %}?v={{ site_conf.version }}" rel="stylesheet">
+    <script src="{% static "js/main.min.js" %}?v={{ site_conf.version }}"></script>
     {% block extra_head %}
     {{ site_conf.extra_head | safe }}
     {% endblock %}

ram/portal/templates/bookshelf/book.html

@@ -53,9 +53,9 @@
                 {% if 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 %}
               </nav>
               <select class="form-select d-lg-none mb-2" id="tabSelector" aria-label="Tab selector">
-                <option value="nav-summary" selected>Summary</option>
-                {% if data.toc.all %}<option value="nav-toc">Table of contents</option>{% endif %}
-                {% if documents %}<option value="nav-documents">Documents</option>{% endif %}
+                <option value="#nav-summary" selected>Summary</option>
+                {% if data.toc.all %}<option value="#nav-toc">Table of contents</option>{% endif %}
+                {% if documents %}<option value="#nav-documents">Documents</option>{% endif %}
               </select>
               <div class="tab-content" id="nav-tabContent">
                 <div class="tab-pane show active" id="nav-summary" role="tabpanel" aria-labelledby="nav-summary-tab">

ram/portal/templates/bookshelf/magazine.html

@@ -73,7 +73,7 @@
               <button class="nav-link active" id="nav-summary-tab" data-bs-toggle="tab" data-bs-target="#nav-summary" type="button" role="tab" aria-controls="nav-summary" aria-selected="true">Summary</button>
             </nav>
             <select class="form-select d-lg-none mb-2" id="tabSelector" aria-label="Tab selector">
-              <option value="nav-summary" selected>Summary</option>
+              <option value="#nav-summary" selected>Summary</option>
             </select>
             <div class="tab-content" id="nav-tabContent">
               <div class="tab-pane show active" id="nav-summary" role="tabpanel" aria-labelledby="nav-summary-tab">

ram/portal/templates/consist.html

@@ -102,7 +102,7 @@
               <button class="nav-link active" id="nav-summary-tab" data-bs-toggle="tab" data-bs-target="#nav-summary" type="button" role="tab" aria-controls="nav-summary" aria-selected="true">Summary</button>
             </nav>
             <select class="form-select d-lg-none mb-2" id="tabSelector" aria-label="Tab selector">
-              <option value="nav-summary" selected>Summary</option>
+              <option value="#nav-summary" selected>Summary</option>
             </select>
             <div class="tab-content" id="nav-tabContent">
               <div class="tab-pane show active table-responsive" id="nav-summary" role="tabpanel" aria-labelledby="nav-summary-tab">

ram/portal/templates/rollingstock.html

@@ -59,15 +59,15 @@
                 {% if consists %}<button class="nav-link" id="nav-consists-tab" data-bs-toggle="tab" data-bs-target="#nav-consists" type="button" role="tab" aria-controls="nav-consists" aria-selected="false">Consists</button>{% endif %}
               </nav>
               <select class="form-select d-lg-none mb-2" id="tabSelector" aria-label="Tab selector">
-                <option value="nav-summary" selected>Summary</option>
-                <option value="nav-model">Model</option>
-                <option value="nav-class">Class</option>
-                <option value="nav-company">Company</option>
-                {% 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 %}
-                {% if consists %}<option value="nav-consists">Consists</option>{% endif %}
+                <option value="#nav-summary" selected>Summary</option>
+                <option value="#nav-model">Model</option>
+                <option value="#nav-class">Class</option>
+                <option value="#nav-company">Company</option>
+                {% 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 %}
+                {% if consists %}<option value="#nav-consists">Consists</option>{% endif %}
               </select>
               {% with class=rolling_stock.rolling_class company=rolling_stock.rolling_class.company %}
               <div class="tab-content" id="nav-tabContent">

ram/portal/templatetags/dcc.py

@@ -17,15 +17,13 @@ def dcc(object):
             f'<i class="bi bi-dice-6"></i></abbr>'
         )
     if object.decoder:
+        decoder = mark_safe(f'<abbr title="{object.decoder}">')
         if object.decoder.sound:
-            decoder = mark_safe(
-                f'<abbr title="{object.decoder}">'
+            decoder += mark_safe(
                 '<i class="bi bi-volume-up-fill"></i></abbr>'
             )
         else:
-            decoder = mark_safe(
-                f'<abbr title="{object.decoder}'
-                f'({object.get_decoder_interface()})">'
+            decoder += mark_safe(
                 '<i class="bi bi-cpu-fill"></i></abbr>'
             )
     if decoder:

ram/portal/views.py

@@ -773,7 +773,7 @@ class GetMagazine(View):
 
         return render(
             request,
-            "magazine.html",
+            "bookshelf/magazine.html",
             {
                 "title": magazine,
                 "magazine": magazine,

ram/ram/__init__.py

@@ -1,4 +1,4 @@
 from ram.utils import git_suffix
 
-__version__ = "0.19.8"
+__version__ = "0.19.10"
 __version__ += git_suffix(__file__)

ram/ram/settings.py

@@ -1,17 +1,7 @@
 """
 Django settings for ram project.
-
-Generated by 'django-admin startproject' using Django 4.0.
-
-For more information on this file, see
-https://docs.djangoproject.com/en/4.0/topics/settings/
-
-For the full list of settings and their values, see
-https://docs.djangoproject.com/en/4.0/ref/settings/
 """
 
-import os
-import time
 from pathlib import Path
 
 # Build paths inside the project like this: BASE_DIR / 'subdir'.
@@ -23,7 +13,7 @@ STORAGE_DIR = BASE_DIR / "storage"
 
 # SECURITY WARNING: keep the secret key used in production secret!
 SECRET_KEY = (
-    "django-insecure-1fgtf05rwp0qp05@ef@a7%x#o+t6vk6063py=vhdmut0j!8s4u"
+    "django-ram-insecure-Chang3m3-1n-Pr0duct10n!"
 )
 
 # SECURITY WARNING: don't run with debug turned on in production!
@@ -31,9 +21,6 @@ DEBUG = True
 
 ALLOWED_HOSTS = ["*"]
 
-
-# Application definition
-
 INSTALLED_APPS = [
     "django.contrib.admin",
     "django.contrib.auth",
@@ -87,10 +74,6 @@ TEMPLATES = [
 
 WSGI_APPLICATION = "ram.wsgi.application"
 
-
-# Database
-# https://docs.djangoproject.com/en/4.0/ref/settings/#databases
-
 DATABASES = {
     "default": {
         "ENGINE": "django.db.backends.sqlite3",
@@ -98,54 +81,38 @@ DATABASES = {
     }
 }
 
-
-# Password validation
-# https://docs.djangoproject.com/en/4.0/ref/settings/#auth-password-validators
-
 AUTH_PASSWORD_VALIDATORS = [
     {
-        "NAME": "django.contrib.auth.password_validation.UserAttributeSimilarityValidator",
+        "NAME": "django.contrib.auth.password_validation.UserAttributeSimilarityValidator",  # noqa: E501
     },
     {
-        "NAME": "django.contrib.auth.password_validation.MinimumLengthValidator",
+        "NAME": "django.contrib.auth.password_validation.MinimumLengthValidator",  # noqa: E501
     },
     {
-        "NAME": "django.contrib.auth.password_validation.CommonPasswordValidator",
+        "NAME": "django.contrib.auth.password_validation.CommonPasswordValidator",  # noqa: E501
     },
     {
-        "NAME": "django.contrib.auth.password_validation.NumericPasswordValidator",
+        "NAME": "django.contrib.auth.password_validation.NumericPasswordValidator",  # noqa: E501
     },
 ]
 
 
-# Internationalization
-# https://docs.djangoproject.com/en/4.0/topics/i18n/
-
 LANGUAGE_CODE = "en-us"
-
 TIME_ZONE = "UTC"
-
 USE_I18N = True
-
 USE_TZ = True
 
-
-# Static files (CSS, JavaScript, Images)
-# https://docs.djangoproject.com/en/4.0/howto/static-files/
-
 STATIC_URL = "static/"
 
-# Default primary key field type
-# https://docs.djangoproject.com/en/4.0/ref/settings/#default-auto-field
-
 DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"
 
 MEDIA_URL = "media/"
 MEDIA_ROOT = STORAGE_DIR / "media"
 
+# django-ram REST API settings
 REST_ENABLED = False  # Set to True to enable the REST API
 REST_FRAMEWORK = {
-    "DEFAULT_PAGINATION_CLASS": "rest_framework.pagination.LimitOffsetPagination",
+    "DEFAULT_PAGINATION_CLASS": "rest_framework.pagination.LimitOffsetPagination",  # noqa: E501
     "PAGE_SIZE": 5,
 }
 
@@ -171,7 +138,7 @@ COUNTRIES_OVERRIDE = {
     "XX": "None",
 }
 
-SITE_NAME = "Railroad Assets Manger"
+SITE_NAME = "Railroad Assets Manager"
 
 # Image used on cards without a custom image uploaded.
 # The file must be placed in the root of the 'static' folder
@@ -184,9 +151,10 @@ DECODER_INTERFACES = [
     (0, "Built-in"),
     (1, "NEM651"),
     (2, "NEM652"),
-    (3, "PluX"),
-    (4, "21MTC"),
-    (5, "Next18/Next18S"),
+    (3, "NEM658 (Plux16)"),
+    (6, "NEM658 (Plux22)"),
+    (4, "NEM660 (21MTC)"),
+    (5, "NEM662 (Next18/Next18S)"),
 ]
 
 MANUFACTURER_TYPES = [

ram/roster/admin.py

@@ -2,8 +2,12 @@ import html
 
 from django.conf import settings
 from django.contrib import admin
-from django.utils.html import format_html, format_html_join, strip_tags
-
+from django.utils.html import (
+    format_html,
+    format_html_join,
+    strip_tags,
+    mark_safe,
+)
 from adminsortable2.admin import SortableAdminBase, SortableInlineAdminMixin
 
 from ram.utils import generate_csv
@@ -53,14 +57,14 @@ class RollingClass(admin.ModelAdmin):
 class RollingStockDocInline(admin.TabularInline):
     model = RollingStockDocument
     min_num = 0
-    extra = 0
+    extra = 1
     classes = ["collapse"]
 
 
 class RollingStockImageInline(SortableInlineAdminMixin, admin.TabularInline):
     model = RollingStockImage
     min_num = 0
-    extra = 0
+    extra = 1
     readonly_fields = ("image_thumbnail",)
     classes = ["collapse"]
 
@@ -229,7 +233,7 @@ class RollingStockAdmin(SortableAdminBase, admin.ModelAdmin):
     def invoices(self, obj):
         if obj.invoice.exists():
             html = format_html_join(
-                "<br>",
+                mark_safe("<br>"),
                 '<a href="{}" target="_blank">{}</a>',
                 ((i.file.url, i) for i in obj.invoice.all()),
             )

ram/roster/migrations/0040_alter_rollingstock_decoder_interface_order.py

@@ -0,0 +1,30 @@
+# Generated by Django 6.0 on 2026-01-08 12:16
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("roster", "0039_rollingstock_featured"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="rollingstock",
+            name="decoder_interface",
+            field=models.PositiveSmallIntegerField(
+                blank=True,
+                choices=[
+                    (0, "Built-in"),
+                    (1, "NEM651"),
+                    (2, "NEM652"),
+                    (3, "NEM658 (Plux16)"),
+                    (6, "NEM658 (Plux22)"),
+                    (4, "NEM660 (21MTC)"),
+                    (5, "NEM662 (Next18/Next18S)"),
+                ],
+                null=True,
+            ),
+        ),
+    ]