Extend the rolling stock page

ram/consist/admin.py

@@ -1,5 +1,5 @@
 from django.contrib import admin
-from adminsortable2.admin import SortableInlineAdminMixin
+from adminsortable2.admin import SortableAdminBase, SortableInlineAdminMixin
 
 from consist.models import Consist, ConsistItem
 
@@ -12,7 +12,7 @@ class ConsistItemInline(SortableInlineAdminMixin, admin.TabularInline):
 
 
 @admin.register(Consist)
-class ConsistAdmin(admin.ModelAdmin):
+class ConsistAdmin(SortableAdminBase, admin.ModelAdmin):
     inlines = (ConsistItemInline,)
     readonly_fields = (
         "creation_time",

ram/portal/static/css/main.css

@@ -6,6 +6,14 @@
   display: inline-block;
 }
 
+.tab-pane {
+  min-height: 300px;
+}
+
+#nav-notes > p {
+  padding: .5rem;
+}
+
 #footer > p {
   display: inline;
 }

ram/portal/templates/home.html

@@ -51,7 +51,7 @@
 </header>
 
 <main>
-  <section class="py-1 text-start container">
+  <section class="py-1 text-center container">
     <div class="row py-lg-4">
       <div class="mx-auto">
         <h1 class="fw-light">About</h1>
@@ -67,10 +67,9 @@
         {% for r in rolling_stock %}
         <div class="col">
           <div class="card shadow-sm">
-            <a href="/portal/{{ r.uuid }}">
-            {% for t in r.thumbnail.all %}
-            {% if t.is_thumbnail %}<img src="{{ t.image.url }}" alt="Card image cap">
-            {% endif %}</a>{% endfor %}
+            {% for i in r.image.all %}
+            {% if i.is_thumbnail %}<a href="/portal/{{ r.uuid }}"><img src="{{ i.image.url }}" alt="Card image cap"></a>{% endif %}
+            {% endfor %}
             <div class="card-body">
               <p class="card-text"><strong>{{ r }}</strong></p>
               <table class="table table-striped">
@@ -149,9 +148,9 @@
               <div class="btn-group mb-4">
                 <button class="btn btn-outline-secondary btn-sm" type="button" data-bs-toggle="button"><span data-bs-toggle="collapse" data-bs-target="#collapseModel{{ r.pk }}" aria-expanded="false" aria-controls="collapseModel{{ r.pk }}">Model data</span></button>
               {% if r.decoder %}
-                <button class="btn btn-outline-secondary btn-sm" type="button" data-bs-toggle="button"> <span data-bs-toggle="collapse" data-bs-target="#collapseDCC{{ r.pk }}" aria-expanded="false" aria-controls="collapseDCC{{ r.pk }}">DCC data</span></button>
+               <button class="btn btn-outline-secondary btn-sm" type="button" data-bs-toggle="button"> <span data-bs-toggle="collapse" data-bs-target="#collapseDCC{{ r.pk }}" aria-expanded="false" aria-controls="collapseDCC{{ r.pk }}">DCC data</span></button>
               {% endif %}
-                <a class="btn btn-sm btn-outline-primary" href="/portal/{{ r.uuid }}">Show all data</a>
+               <a class="btn btn-sm btn-outline-primary" href="/portal/{{ r.uuid }}">Show all data</a>
                 {% if request.user.is_staff %}<a class="btn btn-sm btn-outline-danger" href="{% url 'admin:roster_rollingstock_change' r.pk %}">Edit</a>{% endif %}
               </div>
               {% if r.tags.all %}

ram/portal/templates/page.html

@@ -76,15 +76,17 @@
       <div class="mx-auto">
         <nav>
           <div class="nav nav-tabs" id="nav-tab" role="tablist">
-            <button class="nav-link active" id="nav-data-tab" data-bs-toggle="tab" data-bs-target="#nav-data" type="button" role="tab" aria-controls="nav-data" aria-selected="true">Data</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-dcc-tab" data-bs-toggle="tab" data-bs-target="#nav-dcc" type="button" role="tab" aria-controls="nav-dcc" aria-selected="false">DCC</button>
-            <button class="nav-link" id="nav-notes-tab" data-bs-toggle="tab" data-bs-target="#nav-notes" type="button" role="tab" aria-controls="nav-notes" aria-selected="false">Notes</button>
-            <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>
+            <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>
+            <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 data</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 data</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.notes %}<button class="nav-link" id="nav-notes-tab" data-bs-toggle="tab" data-bs-target="#nav-notes" type="button" role="tab" aria-controls="nav-notes" aria-selected="false">Notes</button>{% endif %}
+            {% if rolling_stock.property.count > 0 %}<button class="nav-link" id="nav-properties-tab" data-bs-toggle="tab" data-bs-target="#nav-properties" type="button" role="tab" aria-controls="nav-properties" aria-selected="false">Properties</button>{% endif %}
+            {% if rolling_stock.document.count > 0 %}<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 %}
            </div>
         </nav>
         <div class="tab-content" id="nav-tabContent">
-          <div class="tab-pane fade show active" id="nav-data" role="tabpanel" aria-labelledby="nav-data-tab">
+          <div class="tab-pane fade show active" id="nav-summary" role="tabpanel" aria-labelledby="nav-summary-tab">
             <table class="table table-striped">
               <thead>
                 <tr>
@@ -155,6 +157,41 @@
             </table>
             {% endif %}
           </div>
+          <div class="tab-pane fade" id="nav-model" role="tabpanel" aria-labelledby="nav-model-tab">
+            <table class="table table-striped">
+              <thead>
+                <tr>
+                  <th colspan="2" scope="row">Model data</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <th width="35%" scope="row">Manufacturer</th>
+                  <td>{% if rolling_stock.manufacturer.website %}<a href="{{ rolling_stock.manufacturer.website }}">{% endif %}{{ rolling_stock.manufacturer }}{% if rolling_stock.manufacturer.website %}</a>{% endif %}</th>
+                </tr>
+                <tr>
+                  <th scope="row">Scale</th>
+                  <td><abbr title="{{ rolling_stock.scale.ratio }} - {{ rolling_stock.scale.gauge }}">{{ rolling_stock.scale }}</abbr></td>
+                </tr>
+                <tr>
+                  <th scope="row">SKU</th>
+                  <td>{{ rolling_stock.sku }}</td>
+                </tr>
+                <tr>
+                  <th scope="row">ERA</th>
+                  <td>{{ rolling_stock.era }}</td>
+                </tr>
+                <tr>
+                  <th scope="row">Production year</th>
+                  <td>{{ rolling_stock.production_year | default_if_none:"" }}</td>
+                </tr>
+                <tr>
+                  <th scope="row">Purchase date</th>
+                  <td>{{ rolling_stock.purchase_date | default_if_none:"" }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
           <div class="tab-pane fade" id="nav-class" role="tabpanel" aria-labelledby="nav-class-tab">
             <table class="table table-striped">
               <thead>
@@ -212,17 +249,53 @@
                 </tr>
                 <tr>
                   <th scope="row">Sound</th>
-                  <td>{{ rolling_stock.decoder.sound | yesno }}</td>
+                  <td>{{ rolling_stock.decoder.sound | yesno:"Yes,No" }}</td>
                 </tr>
               </tbody>
             </table>
           </div>
           <div class="tab-pane fade" id="nav-notes" role="tabpanel" aria-labelledby="nav-notes-tab">
-            <p class="lead text-muted">{{ rolling_stock.notes | markdown | safe }}</p>
+            {{ rolling_stock.notes | markdown | safe }}
+          </div>
+          <div class="tab-pane fade" id="nav-properties" role="tabpanel" aria-labelledby="nav-properties-tab">
+            <table class="table table-striped">
+              <thead>
+                <tr>
+                  <th colspan="2" scope="row">Properties</th>
+                </tr>
+              </thead>
+              <tbody>
+              {% for p in rolling_stock.property.all %}
+                <tr>
+                  <th scope="row">{{ p.property }}</th>
+                  <td>{{ p.value }}</td>
+                </tr>
+              {% endfor %}
+              </tbody>
+            </table>
           </div>
           <div class="tab-pane fade" id="nav-documents" role="tabpanel" aria-labelledby="nav-documents-tab">
+            <table class="table table-striped">
+              <thead>
+                <tr>
+                  <th colspan="3" scope="row">Documents</th>
+                </tr>
+              </thead>
+              <tbody>
+              {% for d in rolling_stock.document.all %}
+                <tr>
+                  <td>{{ d.description }}</td>
+                  <td><a href="{{ d.file.url }}">{{ d.filename }}</a></td>
+                  <td class="text-end">{{ d.file.size | filesizeformat }}</td>
+                </tr>
+              {% endfor %}
+              </tbody>
+            </table>
           </div>
         </div>
+        <div class="d-grid gap-2 d-md-flex justify-content-md-end">
+          {% if request.user.is_staff %}<a class="btn btn-sm btn-outline-danger" href="{% url 'admin:roster_rollingstock_change' rolling_stock.pk %}">Edit</a>{% endif %}
+        </div>
       </div>
     </div>
   </section>
@@ -230,11 +303,9 @@
     <div class="container">
       <a id="rolling-stock"></a>
       <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
-        {% for t in rolling_stock.thumbnail.all %}
+        {% for t in rolling_stock.image.all %}
         <div class="col">
-          <div class="card shadow-sm">
-            <a href="#"><img src="{{ t.image.url }}" alt="Rolling stock image"></a>
-          </div>
+            <img class="img-thumbnail" src="{{ t.image.url }}" alt="Rolling stock image">
         </div>
         {% endfor %}
       </div>

ram/portal/urls.py

@@ -4,5 +4,5 @@ from portal.views import GetHome, GetRollingStock
 
 urlpatterns = [
     path("<int:page>", GetHome.as_view(), name='index_pagination'),
-    path("<uuid:uuid>", GetRollingStock.as_view(), name='rollig_stock'),
+    path("<uuid:uuid>", GetRollingStock.as_view(), name='rolling_stock'),
 ]

ram/ram/settings.py

@@ -42,10 +42,10 @@ INSTALLED_APPS = [
     "django.contrib.staticfiles",
     "health_check",
     "health_check.db",
+    "adminsortable2",
     "django_countries",
     "solo",
     "rest_framework",
-    "adminsortable2",
     "ram",
     "portal",
     "driver",

ram/roster/migrations/0004_alter_rollingstockdocument_rolling_stock_and_more.py

@@ -0,0 +1,24 @@
+# Generated by Django 4.0.3 on 2022-04-12 19:20
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('roster', '0003_alter_rollingstockimage_rolling_stock'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='rollingstockdocument',
+            name='rolling_stock',
+            field=models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='document', to='roster.rollingstock'),
+        ),
+        migrations.AlterField(
+            model_name='rollingstockimage',
+            name='rolling_stock',
+            field=models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='image', to='roster.rollingstock'),
+        ),
+    ]

ram/roster/migrations/0005_alter_rollingstockproperty_rolling_stock.py

@@ -0,0 +1,19 @@
+# Generated by Django 4.0.3 on 2022-04-12 19:35
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('roster', '0004_alter_rollingstockdocument_rolling_stock_and_more'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='rollingstockproperty',
+            name='rolling_stock',
+            field=models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='property', to='roster.rollingstock'),
+        ),
+    ]

ram/roster/models.py

@@ -1,7 +1,7 @@
 import os
 from uuid import uuid4
 from django.db import models
-
+from django.urls import reverse
 # from django.core.files.storage import FileSystemStorage
 # from django.dispatch import receiver
 
@@ -100,6 +100,9 @@ class RollingStock(models.Model):
     def __str__(self):
         return "{0} {1}".format(self.rolling_class, self.road_number)
 
+    def get_absolute_url(self):
+        return reverse("rolling_stock", kwargs={"uuid": self.uuid})
+
     def country(self):
         return str(self.rolling_class.company.country)
 
@@ -108,7 +111,11 @@ class RollingStock(models.Model):
 
 
 class RollingStockDocument(models.Model):
-    rolling_stock = models.ForeignKey(RollingStock, on_delete=models.CASCADE)
+    rolling_stock = models.ForeignKey(
+        RollingStock,
+        on_delete=models.CASCADE,
+        related_name="document"
+    )
     description = models.CharField(max_length=128, blank=True)
     file = models.FileField(upload_to="files/", null=True, blank=True)
 
@@ -117,14 +124,17 @@ class RollingStockDocument(models.Model):
 
     def __str__(self):
         return "{0}".format(os.path.basename(self.file.name))
-        # return "{0}".format(self.description)
+
+    def filename(self):
+        return os.path.basename(self.file.name)
 
 
 class RollingStockImage(models.Model):
     rolling_stock = models.ForeignKey(
         RollingStock,
         on_delete=models.CASCADE,
-        related_name="thumbnail")
+        related_name="image"
+    )
     image = models.ImageField(upload_to="images/", null=True, blank=True)
     is_thumbnail = models.BooleanField()
 
@@ -147,6 +157,7 @@ class RollingStockProperty(models.Model):
     rolling_stock = models.ForeignKey(
         RollingStock,
         on_delete=models.CASCADE,
+        related_name="property",
         null=False,
         blank=False
     )