· 8 years ago · Feb 13, 2018, 02:42 PM
1// Declare SQL Query for SQLite
2
3var createStatement = "CREATE TABLE IF NOT EXISTS Productos (id INTEGER PRIMARY KEY AUTOINCREMENT, producto TEXT, comprado INT)";
4
5var selectAllStatement = "SELECT * FROM Productos";
6
7var selectAllComprados = "SELECT * FROM Productos where comprado=1";
8
9var selectAllNoComprados = "SELECT * FROM Productos where comprado=0";
10
11var insertStatement = "INSERT INTO Productos (producto,comprado) VALUES (?, ?)";
12
13var updateStatement = "UPDATE Productos SET producto = ?,comprado = ? WHERE id=?";
14
15var updateComprado = "UPDATE Productos SET comprado = ? WHERE id=?";
16
17var deleteStatement = "DELETE FROM Productos WHERE id=?";
18
19var dropStatement = "DROP TABLE Productos";
20
21var db = openDatabase("ListaCompra", "1.0", "Mi Lista de la Compra", 200000); // Open SQLite Database
22
23var dataset;
24
25var DataType;
26
27comprado=0;
28function initDatabase() // Function Call When Page is ready.
29
30{
31
32 try {
33
34 if (!window.openDatabase) // Check browser is supported SQLite or not.
35
36 {
37
38 alert('Databases are not supported in this browser.');
39
40 }
41
42 else {
43
44 createTable(); // If supported then call Function for create table in SQLite
45
46 }
47
48 }
49
50 catch (e) {
51
52 if (e == 2) {
53
54 // Version number mismatch.
55
56 console.log("Invalid database version.");
57
58 } else {
59
60 console.log("Unknown error " + e + ".");
61
62 }
63
64 return;
65
66 }
67
68}
69
70function createTable() // Function for Create Table in SQLite.
71
72{
73
74 db.transaction(function (tx) { tx.executeSql(createStatement, [], showRecords, onError); });
75
76}
77
78function insertRecord() // Get value from Input and insert record . Function Call when Save/Submit Button Click..
79
80{
81
82 var productotemp = $('#nombreDelProducto').val();
83
84 if (productotemp != "") {
85 $('.submitButton').text("Añadir");
86 db.transaction(function (tx) { tx.executeSql(insertStatement, [productotemp, comprado], loadAndReset, onError); });
87 $('#nombreDelProducto').val("");
88 }
89
90
91}
92
93function deleteRecord(id) // Get id of record . Function Call when Delete Button Click..
94
95{
96 alert("entra")
97 var iddelete = id.toString();
98
99 db.transaction(function (tx) { tx.executeSql(deleteStatement, [id], showRecords, onError);});
100
101 resetForm();
102
103
104}
105
106function updateRecord() // Get id of record . Function Call when Delete Button Click..
107
108{
109 var productoupdate = $('#nombreDelProducto').val().toString();
110 var useridupdate = $("#id").val();
111 db.transaction(function (tx) { tx.executeSql(updateStatement, [productoupdate, comprado, Number(useridupdate)], loadAndReset, onError); });
112 $("#submitButton").css("display","block");
113 $("#btnUpdate").css("display","none");
114 $("#nombreDelProducto").val("");
115}
116
117
118
119function dropTable() // Function Call when Drop Button Click.. Talbe will be dropped from database.
120
121{
122
123
124 db.transaction(function (tx) { tx.executeSql(dropStatement, [], showRecords, onError); });
125
126 resetForm();
127
128 initDatabase();
129
130}
131
132function loadRecord(i) // Function for display records which are retrived from database.
133
134{
135 $("#submitButton").css("display","none");
136 $("#btnUpdate").css("display","block");
137
138 var item = dataset.item(i);
139
140 $("#nombreDelProducto").val((item['producto']).toString());
141
142 $("#id").val((item['id']).toString());
143
144
145
146}
147
148function resetForm() // Function for reset form input values.
149
150{
151
152 $("#producto").val("");
153
154 $("#id").val("");
155
156}
157
158function loadAndReset() //Function for Load and Reset...
159
160{
161 resetForm();
162
163 showRecords();
164
165}
166
167function onError(tx, error) // Function for Hendeling Error...
168
169{
170
171 alert(error.message);
172
173}
174
175function Comprado(idProucto,comprado) {
176
177 if(comprado==0){
178
179 var compradoupdate = 1;
180
181 var useridupdate = idProucto;
182
183
184 db.transaction(function (tx) { tx.executeSql(updateComprado, [compradoupdate, Number(useridupdate)], loadAndReset, onError); });
185 }else{
186 var compradoupdate = 0;
187
188 var useridupdate = idProucto;
189
190 db.transaction(function (tx) { tx.executeSql(updateComprado, [compradoupdate, Number(useridupdate)], loadAndReset, onError); });
191 }
192
193}
194
195function showRecords() // Function For Retrive data from Database Display records as list
196{
197 $("#resultado").html('');
198
199 db.transaction(function (tx) {
200
201 tx.executeSql(selectAllStatement, [], function (tx, result) {
202
203 dataset = result.rows;
204 for (var i = 0, item = null; i < dataset.length; i++) {
205 item = dataset.item(i);
206 if(item['comprado']==1){
207 listItem =
208 '<div>' +
209 '<label style="float:left; width:83%;">' +
210 '<input style="background-color:green; text-align: right;" onclick="Comprado('+item['id'] +','+ item['comprado'] +')" id='+"a"+ item['id'] + ' value="'+ item['producto'] +'" type="button" >' +
211 '</label>' +
212 '<a style="float:left;margin-top:15px" data-role="button" data-role="button" data-icon="edit" data-iconpos="notext" href="#" onclick="loadRecord(' + i + ')"></a>'+
213 '<a style="float:left;margin-top:15px" data-role="button" data-role="button" data-icon="delete" data-iconpos="notext" href="#" onclick="deleteRecord(' + item['id'] + ')"></a>'+
214 '</div>';
215
216 $('#resultado').append(listItem);
217 $('#resultado').listview('refresh').trigger('create');
218 }else{
219 listItem =
220 '<div>' +
221 '<label style="float:left; width:83%;">' +
222 '<input style="background-color:red; text-align: right;" onclick="Comprado('+item['id'] +','+ item['comprado'] +')" id='+"a"+ item['id'] + ' value="'+ item['producto'] +'" type="button" >' +
223 '</label>' +
224 '<a style="float:left;margin-top:15px" data-role="button" data-role="button" data-icon="edit" data-iconpos="notext" href="#" onclick="loadRecord(' + i + ')"></a>'+
225 '<a style="float:left;margin-top:15px" data-role="button" data-role="button" data-icon="delete" data-iconpos="notext" href="#" onclick="deleteRecord(' + item['id'] + ')"></a>'+
226 '</div>';
227
228 $('#resultado').append(listItem);
229 $('#resultado').listview('refresh').trigger('create');
230 }
231
232
233 }
234
235
236 });
237 });
238}
239
240$(document).ready(function () // Call function when page is ready for load..
241
242{
243
244
245 $("body").fadeIn(2000); // Fede In Effect when Page Load..
246
247 initDatabase();
248
249 $("#submitButton").click(insertRecord); // Register Event Listener when button click.
250
251 $("#btnUpdate").click(updateRecord);
252
253 $("#btnReset").click(resetForm);
254
255 $("#btnDrop").click(dropTable);
256
257});