birdulon
/
KaraokeTestudaiBackend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Save and Load

This commit is contained in:
Luke Hubmayer-Werner 2024-12-19 03:41:02 +10:30
parent 5987ff95c6
commit b9a65ac646
2 changed files with 64 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
lyrics/static/lyrics/input.js
View File

@ -170,3 +170,51 @@ update_output_styles();
document.getElementById('btn_syllable').addEventListener('click', () => {console.log(`Syllable button clicked! ${performance.now()}ms`)});
document.getElementById('btn_metronome').addEventListener('click', () => {console.log(`Metronome button clicked! ${performance.now()}ms`)});
function save_song() {
const data = {
song_title: document.getElementById('song_title').value,
song_title_en: document.getElementById('song_title_en').value,
song_lyricist: document.getElementById('song_lyricist').value,
song_lyricist_en: document.getElementById('song_lyricist_en').value,
song_composer: document.getElementById('song_composer').value,
song_composer_en: document.getElementById('song_composer_en').value,
string_replacements: string_replacements_element.value,
word_overrides: word_overrides_element.value,
lyrics: lyrics_input_element.value,
lyrics_translation: lyrics_tl_input_element.value,
arrangement: arrangement_input_element.value,
};
const a = document.createElement("a");
a.href = URL.createObjectURL(new Blob([JSON.stringify(data, null, 2)], {
type: "application/json", //"text/plain"
}));
a.setAttribute("download", `${data.song_title_en}.json`);
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
document.getElementById('btn_save_song').addEventListener('click', save_song);
function load_song(data) {
document.getElementById('song_title').value = data.song_title ?? '';
document.getElementById('song_title_en').value = data.song_title_en ?? '';
document.getElementById('song_lyricist').value = data.song_lyricist ?? '';
document.getElementById('song_lyricist_en').value = data.song_lyricist_en ?? '';
document.getElementById('song_composer').value = data.song_composer ?? '';
document.getElementById('song_composer_en').value = data.song_composer_en ?? '';
string_replacements_element.value = data.string_replacements ?? '';
word_overrides_element.value = data.word_overrides ?? '';
lyrics_input_element.value = data.lyrics ?? '';
lyrics_tl_input_element.value = data.lyrics_translation ?? '';
arrangement_input_element.value = data.arrangement ?? '';
lyrics_input_updated()
}
document.getElementById('load_song').addEventListener('change', event => {
console.log('Attempting to load json file');
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = () => {load_song(JSON.parse(reader.result))};
reader.readAsText(file);
}, false)

24
lyrics/templates/lyrics/index.html
View File

@ -17,23 +17,31 @@
<!-- TODO: split these into japanese and english fields -->
<table>
<tr>
<td><label for="song_title">曲名／Song title:</label></td>
<td><input type="text" id="song_title" placeholder="曲名／Song title"></td>
<td><label for="song_title">曲名</label></td>
<td><input type="text" id="song_title" placeholder="曲名"></td>
<td><label for="song_title_en">Song title:</label></td>
<td><input type="text" id="song_title_en" placeholder="Song title"></td>
</tr>
<tr>
<td><label for="song_lyricist">作詞／Song lyricist:</label></td>
<td><input type="text" id="song_lyricist" placeholder="作詞／Song lyricist"></td>
<td><label for="song_lyricist">作詞</label></td>
<td><input type="text" id="song_lyricist" placeholder="作詞"></td>
<td><label for="song_lyricist_en">Song lyricist:</label></td>
<td><input type="text" id="song_lyricist_en" placeholder="Song lyricist"></td>
</tr>
<tr>
<td><label for="song_composer">作曲／Song composer:</label></td>
<td><input type="text" id="song_composer" placeholder="作曲／Song composer"></td>
<td><label for="song_composer">作曲</label></td>
<td><input type="text" id="song_composer" placeholder="作曲"></td>
<td><label for="song_composer_en">Song composer:</label></td>
<td><input type="text" id="song_composer_en" placeholder="Song composer"></td>
</tr>
</table>
<!-- TODO: decide if this gets its own div -->
<br><h2>Save/Load</h2>
<button>Save Song</button>
<button>Load Song</button>
<button id="btn_save_song">Save Song (download)</button>
<!-- <button id="btn_load_song">Load Song</button> -->
<label for="load_song">Load Song (upload)</label>
<input id="load_song" type="file" accept="application/json"/>
</div>
<!-- Word Overrides -->
<div id="word_overrides">