Save and load songs from create step 1

songs2slides/static/create.js

@@ -6,7 +6,19 @@ addEventListener('pageshow', () => {
     // Correct page state after returning via browser back button
     document.getElementById('post-submit').hidden = true
 
-    if (STEP === 3) {
+    if (STEP === 1) {
+        // Load songs
+        for (let row of document.querySelectorAll('tbody tr')) {
+            row.remove()
+        }
+        const songs = storage_get('songs', [{ title: '', artist: '' }])
+        for (let song of songs) {
+            add_song()
+            const raw_song = document.querySelector('tbody tr:last-child')
+            raw_song.children[1].children[0].value = song.title
+            raw_song.children[2].children[0].value = song.artist
+        }
+    } else if (STEP === 3) {
         // Load settings
         const form = document.getElementById('create-form')
         form['title-slides'].checked = storage_get('title-slides', true)
@@ -62,6 +74,18 @@ function renumber_songs() {
     }
 }
 
+function save_songs() {
+    const raw_songs = document.getElementsByTagName('tr')
+    let songs = []
+    for (let i = 1; i < raw_songs.length - 1; i++) {
+        songs.push({
+            title: raw_songs[i].children[1].children[0].value,
+            artist: raw_songs[i].children[2].children[0].value,
+        })
+    }
+    storage_set('songs', songs)
+}
+
 // Step 3 helper functions
 function storage_get(key, default_value) {
     try {

songs2slides/templates/create-step-1.html

@@ -20,11 +20,11 @@ <h1>Step 1: Select Songs</h1>
             <td></td>
             <td>
                 <input name="title-" placeholder="Song title"
-                    aria-label="Song title" required/>
+                    aria-label="Song title" onchange="save_songs()" required/>
             </td>
             <td>
                 <input name="artist-" placeholder="Song artist"
-                    aria-label="Song artist"/>
+                    aria-label="Song artist" onchange="save_songs()"/>
             </td>
             <td>
                 <button class="icon" type="button" title="Remove">
@@ -49,11 +49,12 @@ <h1>Step 1: Select Songs</h1>
                 <td>1.</td>
                 <td>
                     <input type="text" name="title-1" placeholder="Song title"
-                        aria-label="Song title" required/>
+                        aria-label="Song title" onchange="save_songs()"
+                        required/>
                 </td>
                 <td>
-                    <input type="text" name="artist-1"
-                        placeholder="Song artist" aria-label="Song title"/>
+                    <input type="text" name="artist-1" placeholder="Song artist"
+                        aria-label="Song title" onchange="save_songs()"/>
                 </td>
                 <td>
                     <button class="icon" type="button" onclick="remove_song(1)"

tests/test_e2e.py

@@ -110,6 +110,12 @@ def test_localStorage(page: Page):
     page.get_by_role('link', name='Create a Slideshow').click()
     expect(page).to_have_url('http://localhost:5002/create/step-1/')
 
+    # Assert song information is not prefilled
+    expect(page.get_by_placeholder('Song title')).to_have_count(1)
+    expect(page.get_by_placeholder('Song title')).to_have_value('')
+    expect(page.get_by_placeholder('Song artist')).to_have_count(1)
+    expect(page.get_by_placeholder('Song artist')).to_have_value('')
+
     # Fill in song information
     page.get_by_placeholder('Song title').last.fill('Song 1')
     page.get_by_placeholder('Song artist').last.fill('aRtIsT A')
@@ -148,12 +154,13 @@ def test_localStorage(page: Page):
     page.get_by_role('link', name='Create a Slideshow').click()
     expect(page).to_have_url('http://localhost:5002/create/step-1/')
 
-    # Fill in song information
-    page.get_by_placeholder('Song title').last.fill('Song 1')
-    page.get_by_placeholder('Song artist').last.fill('aRtIsT A')
-    page.get_by_role('button', name='Add Song').click()
-    page.get_by_placeholder('Song title').last.fill('Song 5')
-    page.get_by_placeholder('Song artist').last.fill('')
+    # Assert song information is prefilled
+    expect(page.get_by_placeholder('Song title')).to_have_count(2)
+    expect(page.get_by_placeholder('Song title').first).to_have_value('Song 1')
+    expect(page.get_by_placeholder('Song title').last).to_have_value('Song 5')
+    expect(page.get_by_placeholder('Song artist')).to_have_count(2)
+    expect(page.get_by_placeholder('Song artist').first).to_have_value('aRtIsT A')
+    expect(page.get_by_placeholder('Song artist').last).to_have_value('')
 
     # Click Next
     page.get_by_role('button', name='Next').click()
@@ -181,6 +188,9 @@ def test_back(page: Page):
     # Fill in bad song information
     page.get_by_placeholder('Song title').last.fill('Song 11')
     page.get_by_placeholder('Song artist').last.fill('aRtIsT Aa')
+    page.get_by_role('button', name='Add Song').click()
+    page.get_by_placeholder('Song title').last.fill('Song 55')
+    page.get_by_placeholder('Song artist').last.fill('b')
 
     # Click Next
     page.get_by_role('button', name='Next').click()
@@ -191,22 +201,26 @@ def test_back(page: Page):
     expect(page.get_by_text('Song 5 lyrics not found')).to_be_hidden()
 
     # Assert song lyrics are loaded
-    expect(page.get_by_role('textbox')).to_have_count(1)
+    expect(page.get_by_role('textbox')).to_have_count(2)
     expect(page.get_by_role('textbox').first).to_have_value('')
+    expect(page.get_by_role('textbox').last).to_have_value('')
 
     # Click Back
     page.get_by_role('button', name='Back').click()
     expect(page).to_have_url('http://localhost:5002/create/step-1/')
 
     # Assert bad song information is still present
-    expect(page.get_by_placeholder('Song title')).to_have_count(1)
+    expect(page.get_by_placeholder('Song title')).to_have_count(2)
     expect(page.get_by_placeholder('Song title').first).to_have_value('Song 11')
-    expect(page.get_by_placeholder('Song artist')).to_have_count(1)
-    expect(page.get_by_placeholder('Song artist').last).to_have_value('aRtIsT Aa')
+    expect(page.get_by_placeholder('Song title').last).to_have_value('Song 55')
+    expect(page.get_by_placeholder('Song artist')).to_have_count(2)
+    expect(page.get_by_placeholder('Song artist').first).to_have_value('aRtIsT Aa')
+    expect(page.get_by_placeholder('Song artist').last).to_have_value('b')
 
     # Fill in correct song information
     page.get_by_placeholder('Song title').last.fill('Song 1')
     page.get_by_placeholder('Song artist').last.fill('aRtIsT A')
+    page.get_by_role('button', name='Remove').first.click()
     page.get_by_role('button', name='Add Song').click()
     page.get_by_placeholder('Song title').last.fill('Song 5')
     page.get_by_placeholder('Song artist').last.fill('')