Using bootstrap and better view resolution

container/templates/container/container_delete.html

@@ -0,0 +1,32 @@
+{% extends "base.html" %}
+{% load static %}
+
+{% block title %}Delete Container: {{ object.named_id }}{% endblock %}
+
+{% block content %}
+<div class="container">
+
+  <div class="row">
+    <div class="col-sm-12">
+
+	<h2>Container: {{ container.named_id }}</h2>
+	<div>{{ container.description }}</div>
+	<div>Color: {{ container.color }}</div>
+	<div>Container Type: <a href="{% url 'container:container_type_detail' container.container_type.id %}">{{ container.container_type.named_id }}</a></div>
+    </div>
+  </div>
+
+<!-- Action buttons -->
+<div class="row">
+
+  <div class="col-sm-12">
+    <a class="btn btn-primary" href="{% url 'container:edit' %}" role="button">Edit</a>
+    <a class="btn btn-primary" href="{% url 'container:delete' %}" role="button">Delete</a>
+  </div>
+
+</div>
+<!-- End Action buttons -->
+
+</div>
+{% endblock content %}
+

container/templates/container/container_detail.html

@@ -0,0 +1,32 @@
+{% extends "base.html" %}
+{% load static %}
+
+{% block title %}Container: {{ container.named_id }}{% endblock %}
+
+{% block content %}
+<div class="container">
+
+  <div class="row">
+    <div class="col-sm-12">
+
+	<h2>Container: {{ container.named_id }}</h2>
+	<div>{{ container.description }}</div>
+	<div>Color: {{ container.color }}</div>
+	<div>Container Type: <a href="{% url 'container:container_type_detail' container.container_type.id %}">{{ container.container_type.named_id }}</a></div>
+    </div>
+  </div>
+
+<!-- Action buttons -->
+<div class="row">
+
+  <div class="col-sm-12">
+    <a class="btn btn-primary" href="{% url 'container:edit' container.id %}" role="button">Edit</a>
+    <a class="btn btn-primary" href="{% url 'container:delete' container.id %}" role="button">Delete</a>
+  </div>
+
+</div>
+<!-- End Action buttons -->
+
+</div>
+{% endblock content %}
+

container/templates/container/container_details.html

@@ -1,4 +0,0 @@
-<h1>Container: {{ container.named_id }}</h1>
-<div>{{ container.description }}</div>
-<div>Color: {{ container.color }}</div>
-<div>Container Type: <a href="{% url 'container:container_type_details' container.container_type.id %}">{{ container.container_type.named_id }}</a></div>

container/templates/container/container_edit.html

@@ -0,0 +1,32 @@
+{% extends "base.html" %}
+{% load static %}
+
+{% block title %}Edit Container: {{ object.named_id }}{% endblock %}
+
+{% block content %}
+<div class="container">
+
+  <div class="row">
+    <div class="col-sm-12">
+
+	<h2>Container: {{ container.named_id }}</h2>
+	<div>{{ container.description }}</div>
+	<div>Color: {{ container.color }}</div>
+	<div>Container Type: <a href="{% url 'container:container_type_detail' container.container_type.id %}">{{ container.container_type.named_id }}</a></div>
+    </div>
+  </div>
+
+<!-- Action buttons -->
+<div class="row">
+
+  <div class="col-sm-12">
+    <a class="btn btn-primary" href="{% url 'container:edit' %}" role="button">Edit</a>
+    <a class="btn btn-primary" href="{% url 'container:delete' %}" role="button">Delete</a>
+  </div>
+
+</div>
+<!-- End Action buttons -->
+
+</div>
+{% endblock content %}
+

container/templates/container/container_index.html

@@ -0,0 +1,33 @@
+{% extends "base.html" %}
+{% load static %}
+
+{% block title %}Container: {{ container.named_id }}{% endblock %}
+
+{% block content %}
+<div class="container">
+  <div>New Container:</div>
+  {% if container_list %}
+      <ul>
+      {% for container in container_list %}
+          <li><a href="{% url 'container:detail' container.id %}">{{ container.named_id }}: {{ container.description }}</a></li>
+      {% endfor %}
+      </ul>
+  {% else %}
+      <p>No container are available.</p>
+  {% endif %}
+  </div>
+  <div>
+  {% if container_type_list %}
+  <div>New Container Types:</div>
+      <ul>
+      {% for ctype in container_type_list %}
+          <li><a href="{% url 'container:container_type_detail' ctype.id %}">{{ ctype.named_id }} {{ ctype.description }}</a></li>
+      {% endfor %}
+      </ul>
+  </div>
+  {% else %}
+      <p>No container types are available.</p>
+  {% endif %}
+</div>
+{% endblock content %}
+

container/templates/container/container_type_detail.html

@@ -0,0 +1,47 @@
+{% extends "base.html" %}
+{% load static %}
+
+{% block title %}Container Type: {{ container_type.named_id }}{% endblock %}
+
+{% block content %}
+<div class="container">
+
+  <div class="row">
+    <div class="col-sm-12">
+
+        <h2>Container Type: {{ container_type.named_id }}</h2>
+        <div>{{ container_type.description }}</div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="container">
+      <div class="row">
+        <div class="col-sm-2">Size:</div><div class="col-sm-3">{{ container_type.width }}mm x {{ container_type.length }}mm x {{ container_type.height }}mm</div>
+        <div class="col-sm-2">Inner Size:</div><div class="col-sm-3">
+		{% if container_type.inner_width and container_type.inner_length and container_type.inner_height %}
+		{{ container_type.inner_width }}mm x {{ container_type.inner_length }}mm x {{ container_type.inner_height }}mm
+		{% endif %}
+	</div>
+      </div>
+      <div class="row">
+        <div class="col-sm-2">Has Cover:</div><div class="col-sm-3">{% if container_type.has_cover %} yes {% else %} no {% endif %}</div>
+        <div class="col-sm-2">Can hold Containers:</div><div class="col-sm-3">{% if container_type.contains_container %} yes {% else %} no {% endif %}</div>
+      </div>
+    </div>
+  </div>
+
+<table>
+</table>
+
+<!-- Action buttons -->
+<div class="row">
+
+  <div class="col-sm-12">
+  </div>
+
+</div>
+<!-- End Action buttons -->
+
+</div>
+{% endblock content %}
+

container/templates/container/container_type_details.html

@@ -1,8 +0,0 @@
-<h1>Container: {{ container_type.named_id }}</h1>
-<div>{{ container_type.description }}</div>
-<table>
-<tr><td>Width:</td><td>{{ container_type.width }} mm</td><td>Inner Width:</td><td>{{ container_type.inner_width }} mm</td></tr>
-<tr><td>Length:</td><td>{{ container_type.length }} mm</td><td>Inner Length:</td><td>{{ container_type.inner_length }} mm</td></tr>
-<tr><td>Height:</td><td>{{ container_type.height }} mm</td><td>Inner Height:</td><td>{{ container_type.inner_height }} mm</td></tr>
-<tr><td>Has Cover:</td><td>{% if container_type.has_cover %} yes {% else %} no {% endif %}</td><td>Can hold Containers:</td><td>{% if container_type.contains_container %} yes {% else %} no {% endif %}</td></tr>
-</table>

container/templates/container/container_type_index.html

@@ -0,0 +1,21 @@
+{% extends "base.html" %}
+{% load static %}
+
+{% block title %}Container: {{ container.named_id }}{% endblock %}
+
+{% block content %}
+<div class="container">
+  {% if container_type_list %}
+  <div>New Container Types:</div>
+      <ul>
+      {% for ctype in container_type_list %}
+          <li><a href="{% url 'container:container_type_detail' ctype.id %}">{{ ctype.named_id }} {{ ctype.description }}</a></li>
+      {% endfor %}
+      </ul>
+  </div>
+  {% else %}
+      <p>No container types are available.</p>
+  {% endif %}
+</div>
+{% endblock content %}
+

container/templates/container/index.html

@@ -1,24 +0,0 @@
-<div>
-<div>New Container:</div>
-{% if container_list %}
-    <ul>
-    {% for container in container_list %}
-        <li><a href="{% url 'container:container_details' container.id %}">{{ container.named_id }}: {{ container.description }}</a></li>
-    {% endfor %}
-    </ul>
-{% else %}
-    <p>No container are available.</p>
-{% endif %}
-</div>
-<div>
-<div>New Container Types:</div>
-{% if container_type_list %}
-    <ul>
-    {% for ctype in container_type_list %}
-        <li><a href="{% url 'container:container_type_details' ctype.id %}">{{ ctype.named_id }} {{ ctype.description }}</a></li>
-    {% endfor %}
-    </ul>
-{% else %}
-    <p>No container types are available.</p>
-{% endif %}
-</div>

container/urls.py

@@ -4,9 +4,11 @@ from . import views
 
 app_name = 'container'
 urlpatterns = [
-    path('', views.index, name='index'),
-    path('<int:container_id>/', views.container_details, name='container_details'),
-    path('type/<int:container_type_id>/', views.container_type_details, name='container_type_details'),
-    # path('type/<string:container_type_named_id>/', views.container_type_details, name='container_type_details'),
+    path('', views.IndexView.as_view(), name='index'),
+    path('<int:pk>/', views.DetailView.as_view(), name='detail'),
+    path('edit/<int:pk>/', views.EditView.as_view(), name='edit'),
+    path('delete/<int:pk>/', views.DeleteView.as_view(), name='delete'),
+    path('type/', views.TypeIndexView.as_view(), name='container_type_index'),
+    path('type/<int:pk>/', views.TypeDetailView.as_view(), name='container_type_detail'),
 ]
 

container/views.py

@@ -2,27 +2,39 @@ from django.shortcuts import render
 from django.http import HttpResponse
 from django.template import loader
 from django.http import Http404
+from django.urls import reverse
+from django.views import generic
 
 from .models import Container, ContainerType
 
-def index(request):
-    container_list = Container.objects.order_by('-created_ts')[:5]
-    container_type_list = ContainerType.objects.order_by('-created_ts')[:5]
-    ctx = {'container_list': container_list, 'container_type_list': container_type_list}
-    return render(request, 'container/index.html', ctx)
+class IndexView(generic.ListView):
+    template_name = 'container/container_index.html'
+    context_object_name = 'container_list'
 
-def container_type_details(request, container_type_id):
-    try:
-        ctype = ContainerType.objects.get(pk=container_type_id)
-    except ContainerType.DoesNotExist:
-        raise Http404("Container Type does not exist")
-    return render(request, 'container/container_type_details.html', {'container_type': ctype})
+    def get_queryset(self):
+        # Return the last five created containers
+        return Container.objects.order_by('-created_ts')[:5]
 
-def container_details(request, container_id):
-    try:
-        container = Container.objects.get(pk=container_id)
-    except Container.DoesNotExist:
-        raise Http404("Container does not exist")
-    return render(request, 'container/container_details.html', {'container': container})
+class TypeIndexView(generic.ListView):
+    template_name = 'container/container_type_index.html'
+    context_object_name = 'container_type_list'
 
+    def get_queryset(self):
+        # Return the last five created container types
+        return ContainerType.objects.order_by('-created_ts')[:5]
+
+class DetailView(generic.DetailView):
+    model = Container
+    # template_name = 'container/detail.html'
+
+class TypeDetailView(generic.DetailView):
+    model = ContainerType
+    context_object_name = 'container_type'
+    template_name = 'container/container_type_detail.html'
+
+class EditView(generic.DetailView):
+    model = Container
+
+class DeleteView(generic.DetailView):
+    model = Container