Implement basic Display editor

Closes #11

OpenShow/slides/editor/templates/editor/display/create.html

@@ -0,0 +1,5 @@
+<form method="post" action="{% url 'new-display' %}">
+    {% csrf_token %}
+    {{ form }}
+    <button type="submit">Submit</button>
+</form>

OpenShow/slides/editor/templates/editor/display/detail.html

@@ -0,0 +1,38 @@
+{% extends 'core/base.html' %}
+{% load icon %}
+{% load static %}
+
+{% block extra_css %}
+    <link rel="stylesheet" href="{% static 'slides/slide-thumbnail.css' %}">
+    <style>body {--display-size-divisor: 3} .slide-thumbnail:hover{box-shadow: none}</style>
+{% endblock %}
+
+{% block header %}
+    <h1>{{ object.name }}</h1>
+{% endblock %}
+
+{% block title %}Editing {{ object.name }} - OpenShow{% endblock %}
+
+{% block header_right_button %}
+    <a
+            hx-get="{% url 'update-display' object.pk %}"
+            hx-target="<main/>"
+            hx-swap="innerHTML"
+            class="icon-button"
+            aria-label="Edit {{ object.name }}"
+    >
+        {% icon 'edit-2' %}
+    </a>
+{% endblock %}
+
+{% block content %}
+    <h2>Current Slide</h2>
+    <div>
+        {% if display.current_slide %}
+            {% include 'slides/slide-thumbnail.html' with slide=object.current_slide %}
+        {% else %}
+            None
+        {% endif %}
+    </div>
+    <a href="{% url 'display' object.pk %}" target="_blank">Open this display (in a new tab)</a>
+{% endblock %}

OpenShow/slides/editor/templates/editor/display/update.html

@@ -0,0 +1,5 @@
+<form method="post" action="{% url 'update-display' object.pk %}">
+    {% csrf_token %}
+    {{ form }}
+    <button type="submit">Submit</button>
+</form>

OpenShow/slides/editor/urls.py

@@ -14,6 +14,7 @@
 from slides.editor.views.utils import generate_lorem
 from slides.editor.views.transition import TransitionEditorView, TransitionCreateView, TransitionKeyframeCreateView, \
     TransitionKeyframeUpdateView, TransitionEditorIndexView
+from slides.editor.views.display import DisplayCreateView, DisplayDeleteView, DisplayUpdateView, DisplayDetailView
 
 
 urlpatterns = [
@@ -51,4 +52,8 @@
     path('transition/new', TransitionCreateView.as_view(), name='new-transition'),
     path('transition/keyframe/new', TransitionKeyframeCreateView.as_view(), name='new-keyframe'),
     path('transition/keyframe/<int:pk>', TransitionKeyframeUpdateView.as_view(), name='edit-keyframe'),
+    path('display/new', DisplayCreateView.as_view(), name='new-display'),
+    path('display/<int:pk>', DisplayDetailView.as_view(), name='display-detail'),
+    path('display/<int:pk>/update', DisplayUpdateView.as_view(), name='update-display'),
+    path('display/<int:pk>/delete', DisplayDeleteView.as_view(), name='delete-display'),
 ]

OpenShow/slides/editor/views/display.py

@@ -0,0 +1,36 @@
+from django.views.generic import CreateView, UpdateView, DeleteView, DetailView
+from slides.models import Display
+
+
+class DisplayDetailView(DetailView):
+    model = Display
+    template_name = 'editor/display/detail.html'
+    extra_context = {
+        'previous_page': 'slides-index',
+    }
+
+
+class DisplayCreateView(CreateView):
+    model = Display
+    fields = [
+        'name',
+    ]
+    template_name = 'editor/display/create.html'
+
+
+class DisplayUpdateView(UpdateView):
+    model = Display
+    fields = [
+        'name',
+        # 'pixel_width',
+        # 'pixel_height',
+        # Changing these will break things right now; non-1080p resolutions are not supported. See #22.
+        'custom_css',
+        # Display.custom_css might go away to be replaced by theme display variants.
+    ]
+    template_name = 'editor/display/update.html'
+
+
+class DisplayDeleteView(DeleteView):
+    model = Display
+    template_name = 'editor/display/delete.html'

OpenShow/slides/models.py

@@ -137,6 +137,9 @@ def __str__(self):
     # TODO: The Display should probably know the current segment, as well as the current show.
     # auto_advance_paused = models.BooleanField(default=False, null=False)
 
+    def get_absolute_url(self):
+        return reverse('display-detail', kwargs={'pk': self.pk})
+
 
 class Deck(models.Model):  # A Reusable set of slides, which can be included in a Show Segment
     name = models.CharField(max_length=100)

OpenShow/slides/templates/slides/index.html

@@ -82,8 +82,18 @@ <h2>Themes</h2>
     <div id="displays" role="tabpanel" hidden>
         <h2>Displays</h2>
         <p>
-            Displays can be configured to have the correct resolution, and set custom CSS. Editor not yet implemented.
+            Displays can be configured to have the correct resolution, and set custom CSS.
         </p>
+        <button hx-get="{% url 'new-display' %}" hx-swap="outerHTML">
+            New Display
+        </button>
+        <ul>
+            {% for display in display_list %}
+                <li>
+                    <a href="{% url 'display-detail' display.pk %}">{{ display.name }}</a>
+                </li>
+            {% endfor %}
+        </ul>
     </div>
     <div id="transitions" role="tabpanel" hidden>
         <h2>Transitions</h2>