commit 2dab6949d1d70c6fb159cb2c4bafe85bdb1dcb7b
parent ab2430e39c8e54460eaf065bf123d1908031e2a2
Author: ashermorgan <59518073+ashermorgan@users.noreply.github.com>
Date: Mon, 26 Feb 2024 20:53:05 -0800
Implement create-step-1 template
Diffstat:
7 files changed, 155 insertions(+), 5 deletions(-)
diff --git a/songs2slides/routes.py b/songs2slides/routes.py
@@ -39,6 +39,10 @@ def parse_form(form):
def home():
return render_template('home.html')
+@bp.get('/create/')
+def create():
+ return render_template('create-step-1.html')
+
@bp.post('/create/')
def get_lyrics():
# Parse form data
diff --git a/songs2slides/static/create.css b/songs2slides/static/create.css
@@ -1,3 +1,4 @@
+/* step 1 and 2 */
#actions {
margin-top: 2rem;
}
@@ -5,6 +6,56 @@
float: right;
}
+/* step 1 */
+table {
+ width: 100%;
+ border-collapse: enable;
+}
+table input {
+ width: 100%;
+ padding: 0.2rem 0.5rem;
+}
+
+.loading-modal {
+ position: fixed;
+ top: 0px;
+ left: 0px;
+ width: 100%;
+ height: 100%;
+ background: #80808080;
+}
+.loading-modal > div {
+ margin: 10rem auto;
+ padding: 1rem;
+ width: 300px;
+ text-align: center;
+ background: #fff;
+ border-radius: 0.5rem;
+}
+
+.spinner {
+ display: inline-block;
+}
+.spinner:after {
+ content: " ";
+ display: block;
+ width: 2rem;
+ height: 2rem;
+ border-radius: 50%;
+ border: 0.3rem solid;
+ border-color: #000 #000 #000 transparent;
+ animation: spinner 1s linear infinite;
+}
+@keyframes spinner {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
+/* step 2 */
details {
margin-bottom: 1rem;
}
diff --git a/songs2slides/static/create.js b/songs2slides/static/create.js
@@ -1,4 +1,29 @@
addEventListener("submit", () => {
document.getElementById('after-submit').hidden = false
- document.getElementById('step-2').hidden = true
+ if (document.getElementById('step-2')) {
+ document.getElementById('step-2').hidden = true
+ }
});
+
+/* step 1 functions */
+function add_song() {
+ let row = document.getElementById('row-template').content.children[0].cloneNode(true)
+ document.getElementById('songs').appendChild(row)
+ renumber_songs()
+}
+
+function remove_song(n) {
+ document.getElementsByTagName('tr')[n].remove()
+ renumber_songs()
+ if (document.getElementsByTagName('tr').length === 1) add_song()
+}
+
+function renumber_songs() {
+ const songs = document.getElementsByTagName('tr')
+ for (let i = 1; i < songs.length; i++) {
+ songs[i].children[0].textContent = `${i}.`
+ songs[i].children[1].children[0].name = `title-${i}`
+ songs[i].children[2].children[0].name = `artist-${i}`
+ songs[i].children[3].children[0].onclick = () => remove_song(i)
+ }
+}
diff --git a/songs2slides/static/global.css b/songs2slides/static/global.css
@@ -29,6 +29,6 @@ p {
line-height: 1.4;
margin-bottom: 1rem;
}
-button {
+button, input[type=button] {
padding: 0.2rem 0.5rem;
}
diff --git a/songs2slides/templates/create-step-1.html b/songs2slides/templates/create-step-1.html
@@ -0,0 +1,70 @@
+{% 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 %}
+<form id="step-1" method="POST">
+ <h1>Step 1: Select Songs</h1>
+
+ <p>
+ Select the songs to include in the slide show by their title and artist.
+ </p>
+
+ <template id="row-template">
+ <tr>
+ <td>.</td>
+ <td>
+ <input name="title-" placeholder="Song title" required/>
+ </td>
+ <td>
+ <input name="artist-" placeholder="Song artist"/>
+ </td>
+ <td>
+ <input type="button" value="Remove"/>
+ </td>
+ </tr>
+ </template>
+
+ <table>
+ <thead>
+ <tr>
+ <th></th>
+ <th>Title</th>
+ <th>Artist</th>
+ <th></th>
+ </tr>
+ </thead>
+ <tbody id="songs">
+ <tr>
+ <td>1.</td>
+ <td>
+ <input type="text" name="title-1" placeholder="Song title" required/>
+ </td>
+ <td>
+ <input type="text" name="artist-1" placeholder="Song artist"/>
+ </td>
+ <td>
+ <input type="button" value="Remove" onclick="remove_song(1)"/>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
+ <div id="actions">
+ <input type="button" value="Add song" onclick="add_song()"/>
+ <button>
+ Next
+ </button>
+ </div>
+</form>
+
+<div id="after-submit" class="loading-modal" hidden>
+ <div>
+ <p>Loading your song lyrics...</p>
+ <div class="spinner"></div>
+ </div>
+</div>
+{% endblock main %}
diff --git a/songs2slides/templates/create-step-2.html b/songs2slides/templates/create-step-2.html
@@ -54,7 +54,7 @@
</div>
<div id="actions">
- <a href="#">Back</a>
+ <a href="{{ url_for('.create') }}">Back</a>
<button>
Create Slide Show
</button>
@@ -67,7 +67,7 @@
thank you for using Songs2Slides.
</p>
<p>
- <a href="#">Create another slide show</a>
+ <a href="{{ url_for('.create') }}">Create another slide show</a>
</p>
</div>
{% endblock main %}
diff --git a/songs2slides/templates/home.html b/songs2slides/templates/home.html
@@ -6,5 +6,5 @@
{% block main %}
<p>Create lyric slide shows easily and quickly</p>
-<a href="#">Get Started</a>
+<a href="{{ url_for('.create') }} ">Get Started</a>
{% endblock main %}
