songs2slides

commit ab2430e39c8e54460eaf065bf123d1908031e2a2
parent 2007535abfa861728e1991755e3b761e798631ab
Author: ashermorgan <59518073+ashermorgan@users.noreply.github.com>
Date:   Mon, 26 Feb 2024 19:52:38 -0800

Implement create-step-2 template

Diffstat:
A
songs2slides/static/create.css
 | 
24
++++++++++++++++++++++++
A
songs2slides/static/create.js
 | 
4
++++
M
songs2slides/static/global.css
 | 
3
+++
M
songs2slides/templates/create-step-2.html
 | 
77
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------

4 files changed, 100 insertions(+), 8 deletions(-)
diff --git a/songs2slides/static/create.css b/songs2slides/static/create.css
@@ -0,0 +1,24 @@
+#actions {
+    margin-top: 2rem;
+}
+#actions :last-child {
+    float: right;
+}
+
+details {
+    margin-bottom: 1rem;
+}
+textarea {
+    margin-top: 0.5rem;
+    width: 100%;
+    height: 15rem;
+    resize: vertical;
+}
+
+.missing {
+    color: red;
+}
+.missing summary span {
+    float: right;
+    font-weight: bold;
+}
diff --git a/songs2slides/static/create.js b/songs2slides/static/create.js
@@ -0,0 +1,4 @@
+addEventListener("submit", () => {
+    document.getElementById('after-submit').hidden = false
+    document.getElementById('step-2').hidden = true
+});
diff --git a/songs2slides/static/global.css b/songs2slides/static/global.css
@@ -29,3 +29,6 @@ p {
     line-height: 1.4;
     margin-bottom: 1rem;
 }
+button {
+    padding: 0.2rem 0.5rem;
+}
diff --git a/songs2slides/templates/create-step-2.html b/songs2slides/templates/create-step-2.html
@@ -1,12 +1,73 @@
 {% extends "layout.html" %}
 
+{% block head %}
+<link rel="stylesheet" href="{{ url_for('static', filename='create.css') }}"/>
+<script src="{{ url_for('static', filename='create.js') }}"></script>
+{% endblock head %}
+
 {% block main %}
-<ol>
-    {% for song in songs %}
-        <i>{{ song.title }}</i>
-        {% if song.artist %} ({{ song.artist }}) {% endif %}
-        <br>
-        {{ song.lyrics }}
-    {% endfor %}
-</ol>
+<form id="step-2" method="POST" action="{{ url_for('.create_slides') }}">
+    <h1>Step 2: Preview Slides</h1>
+    <p>
+        Review the parsed song lyrics below and make any necessary corrections.
+        One blank line represents the start of a new slide and three blank
+        lines represent an empty slide.
+    </p>
+
+    {% if missing > 0 %}
+    <p class="missing">
+        Lyrics must be entered manually for {{ missing }}
+        {% if missing == 1 %} song. {% else %} songs. {% endif %}
+    </p>
+    {% endif %}
+
+    <div id="song-lyrics">
+        {% for song in songs %}
+        <details {% if not song.lyrics %} open class="missing" {% endif %} >
+            <input hidden name="title-{{ loop.index }}"
+                value="{{ song.title }}"/>
+            <input hidden name="artist-{{ loop.index }}"
+                value="{{ song.artist }}"/>
+
+            <summary>
+                <i>{{ song.title }}</i>
+
+                {% if song.artist %}
+                ({{ song.artist }})
+                {% endif %}
+
+                {% if not song.lyrics %}
+                <span>lyrics not found</span>
+                {% endif %}
+            </summary>
+
+            {% if song.lyrics %}
+            <textarea name="lyrics-{{ loop.index }}">{{ song.lyrics }}</textarea>
+            {% else %}
+            <textarea name="lyrics-{{ loop.index }}" placeholder="{{
+                'Lyrics not found, please enter them here manually.\n\nOne ' +
+                'blank line represents the start of a new slide and three ' +
+                'blank lines represent an empty slide.'}}"></textarea>
+            {% endif %}
+        </details>
+        {% endfor %}
+    </div>
+
+    <div id="actions">
+        <a href="#">Back</a>
+        <button>
+            Create Slide Show
+        </button>
+    </div>
+</form>
+
+<div id="after-submit" hidden>
+    <p>
+        Your slide show is being downloaded,
+        thank you for using Songs2Slides.
+    </p>
+    <p>
+        <a href="#">Create another slide show</a>
+    </p>
+</div>
 {% endblock main %}