· 8 years ago · Feb 04, 2018, 03:00 AM
1var db;
2document.addEventListener("deviceready", onDeviceReady, false);
3function onDeviceReady() {
4 db = window.openDatabase("ssDB", "1.0", "Song Storage", (2*1000*1000));
5 db.transaction(makeTables, errorCB, makeTablesSuccessCB);
6}
7function errorCB(err) {
8 navigator.notification.alert(
9 err.code, // message
10 function(){}, // callback
11 'SQL Error', // title
12 'OK' // buttonName
13 );
14}
15function makeTables(tx) {
16 var sql = 'CREATE TABLE IF NOT EXISTS songs (id INTEGER PRIMARY KEY, artist VARCHAR, title VARCHAR, note TEXT)'; tx.executeSql(sql, [], null, null);
17 var sql = 'CREATE TABLE IF NOT EXISTS combos (id INTEGER PRIMARY KEY, name VARCHAR, priority INTEGER)'; tx.executeSql(sql, [], null, null);
18 var sql = 'CREATE TABLE IF NOT EXISTS songs_combos_map (id INTEGER PRIMARY KEY, songsID INTEGER, combosID INTEGER, priority INTEGER)'; tx.executeSql(sql, [], null, null);
19 var sql = 'CREATE TABLE IF NOT EXISTS setlists (id INTEGER PRIMARY KEY, combosID INTEGER, name VARCHAR priority INTEGER)'; tx.executeSql(sql, [], null, null);
20 var sql = 'CREATE TABLE IF NOT EXISTS setlists_songs_map (id INTEGER PRIMARY KEY, setlistsID INTEGER, songsID INTEGER, priority INTEGER)'; tx.executeSql(sql, [], null, null);
21}
22function makeTablesSuccessCB(tx) {
23 // start painting HTML
24 var str = '<div id="banner">Song Storage</div>'; // banner
25 // primary navigation
26 str += '<div id="navArea">';
27 str += '<div class="fl tac third" id="navBtnSongs">Songs</div>';
28 str += '<div class="fl tac third" id="navBtnCombos">Combos</div>';
29 str += '<div class="fl tac third" id="navBtnSetlists">Setlists</div>';
30 str += '<div class="clr"></div>';
31 str += '</div>';
32 // #main is the area that changes typically
33 str += '<div id="main"></div>';
34 $('#app').append(str);
35 db.transaction(displayAllSongs, errorCB);
36}
37function displayAllSongs(tx) {
38 tx.executeSql('SELECT * FROM songs ORDER BY artist ASC', [], querySuccess, errorCB);
39}
40function querySuccess(tx,results) {
41 var str = '<div>';
42 str += '<div class="fl">Search:<br><input type="text" name="q" id="q"></div>';
43 str += '<div class="fr"><br><span id="AddSongBtn">Add Song</span></div>';
44 str += '<div class="clr"></div>';
45 str += '</div>';
46 var numrows = results.rows.length;
47 str += '<div>Listing '+numrows+' Songs:</div>';
48 $('#main').append(str);
49 $('#AddSongBtn').click(function(){
50 var str = '';
51 str += '<div>Go Back</div>';
52 str += '<form name="saveNewSong" id="saveNewSong" onsubmit="return ecNew();">';
53 str += 'Artist:<br><input type="text" name="artist" id="artist"><br><br>';
54 str += 'Song Title:<br><input type="text" name="title" id="title"><br><br>';
55 str += 'Note:<br><textarea name="note" id="note"></textarea><br><br>';
56 // lists combo it could be assigned to?
57 // list setlists it could be assigned to?
58 str += '<input type="submit" id="saveNewSongBtn" value="Save New Song">';
59 str += '</form>';
60 $('#main').html(str);
61 $('#note').height( ($('#note').width() * 0.8) );
62 });
63 function ecNew(){
64 $('#main').html('Why doesn't this output?');
65 return false;
66 }
67 $('#saveNewSong').on("submit", function(e) {
68 e.preventDefault();
69 $('#main').html('Or this output?');
70 return false;
71 });
72}
73/* I've tried at least 3 ways to setup a form with a button/submit-button , to reach a validation function. Can anyone offer some advice? */