· 8 years ago · Feb 08, 2018, 11:10 AM
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
17
18
19var deleteStatement = "DELETE FROM Productos WHERE id=?";
20
21var dropStatement = "DROP TABLE Productos";
22
23var db = openDatabase("ListaCompra", "1.0", "Mi Lista de la Compra", 200000); // Open SQLite Database
24
25var dataset;
26
27var DataType;
28
29testigo = 0;
30comprado=0;
31function initDatabase() // Function Call When Page is ready.
32
33{
34
35 try {
36
37 if (!window.openDatabase) // Check browser is supported SQLite or not.
38
39 {
40
41 alert('Databases are not supported in this browser.');
42
43 }
44
45 else {
46
47 createTable(); // If supported then call Function for create table in SQLite
48
49 }
50
51 }
52
53 catch (e) {
54
55 if (e == 2) {
56
57 // Version number mismatch.
58
59 console.log("Invalid database version.");
60
61 } else {
62
63 console.log("Unknown error " + e + ".");
64
65 }
66
67 return;
68
69 }
70
71}
72
73function createTable() // Function for Create Table in SQLite.
74
75{
76
77 db.transaction(function (tx) { tx.executeSql(createStatement, [], showRecords, onError); });
78
79}
80
81function insertRecord() // Get value from Input and insert record . Function Call when Save/Submit Button Click..
82
83{
84
85 var productotemp = $('#nombreDelProducto').val();
86
87 if (productotemp != "") {
88 $('.submitButton').text("Añadir");
89 db.transaction(function (tx) { tx.executeSql(insertStatement, [productotemp, comprado], loadAndReset, onError); });
90 $('#nombreDelProducto').val("");
91 //tx.executeSql(SQL Query Statement,[ Parameters ] , Sucess Result Handler Function, Error Result Handler Function );
92 alert(comprado);
93 } else {
94 alert("No has introducido nada para ingresar a tu lista");
95 }
96
97
98}
99
100function deleteRecord(id) // Get id of record . Function Call when Delete Button Click..
101
102{
103
104 var iddelete = id.toString();
105
106 db.transaction(function (tx) { tx.executeSql(deleteStatement, [id], showRecords, onError); alert("Delete Sucessfully"); });
107
108 resetForm();
109
110
111}
112
113function updateRecord() // Get id of record . Function Call when Delete Button Click..
114
115{
116 var productoupdate = $('#nombreDelProducto').val().toString();
117 var useridupdate = $("#id").val();
118 db.transaction(function (tx) { tx.executeSql(updateStatement, [productoupdate, comprado, Number(useridupdate)], loadAndReset, onError); });
119 $("#submitButton").css("display","block");
120 $("#btnUpdate").css("display","none");
121 $("#nombreDelProducto").val("");
122}
123
124function updateComprado() // Get id of record . Function Call when Delete Button Click..
125
126{
127 var compradoUpdate = 1;
128 var useridupdate = $("#id").val();
129 db.transaction(function (tx) { tx.executeSql(updateComprado, [ compradoUpdate, Number(useridupdate)], loadAndReset, onError); });
130 $("#submitButton").css("display","block");
131 $("#btnUpdate").css("display","none");
132 $("#nombreDelProducto").val("");
133}
134
135function dropTable() // Function Call when Drop Button Click.. Talbe will be dropped from database.
136
137{
138
139 db.transaction(function (tx) { tx.executeSql(dropStatement, [], showRecords, onError); });
140
141 resetForm();
142
143 initDatabase();
144
145}
146
147function loadRecord(i) // Function for display records which are retrived from database.
148
149{
150 $("#submitButton").css("display","none");
151 $("#btnUpdate").css("display","block");
152
153 var item = dataset.item(i);
154
155 $("#nombreDelProducto").val((item['producto']).toString());
156
157 $("#id").val((item['id']).toString());
158
159
160
161}
162
163function resetForm() // Function for reset form input values.
164
165{
166
167 $("#producto").val("");
168
169 $("#id").val("");
170
171}
172
173function loadAndReset() //Function for Load and Reset...
174
175{
176 resetForm();
177
178 showRecords();
179
180}
181
182function onError(tx, error) // Function for Hendeling Error...
183
184{
185
186 alert(error.message);
187
188}
189
190function Comprado(idProucto,comprado) {
191
192 if(comprado==0){
193
194 var compradoupdate = 1;
195
196 var useridupdate = idProucto;
197
198 alert("#a"+idProucto);
199
200 // var Prodynombre=$("#"+idProucto).attr("name");
201 $("#a"+idProucto).css({
202 "background-color":"green"
203 });
204
205 db.transaction(function (tx) { tx.executeSql(updateComprado, [compradoupdate, Number(useridupdate)], loadAndReset, onError); });
206 }else{
207 var compradoupdate = 0;
208
209 var useridupdate = idProucto;
210
211 alert("#a"+idProucto);
212 // var Prodynombre=$("#"+idProucto).attr("name");
213 $("#a"+idProucto).css({
214 "background-color":"red"
215 });
216
217 db.transaction(function (tx) { tx.executeSql(updateComprado, [compradoupdate, Number(useridupdate)], loadAndReset, onError); });
218 }
219
220}
221
222function showRecords() // Function For Retrive data from Database Display records as list
223{
224 $("#listaca").html('');
225 $("#listaca2").html('');
226 $("#listaca3").html('');
227
228 db.transaction(function (tx) {
229
230 tx.executeSql(selectAllStatement, [], function (tx, result) {
231
232 dataset = result.rows;
233 for (var i = 0, item = null; i < dataset.length; i++) {
234 item = dataset.item(i);
235 // alert(item.id);
236 if(item['comprado']==1){
237 listItem =
238 '<div>' +
239 '<label style="float:left; width:80%;">' +
240
241 '<input style="background-color:red;" onclick="Comprado('+item['id'] +','+ item['comprado'] +')" id='+"a"+ item['id'] + ' value="'+ item['producto'] + " " + item['comprado'] +'" type="button" >' +
242 // '<span>' + item['producto'] + " " + item['comprado'] + '</span>' +
243 '</label>' +
244 '<a href="#" style="float:left; heigth:100px; margin-top:15px;" onclick="deleteRecord(' + item['id'] + ');" data-role="button" data-icon="delete" data-iconpos="notext" ></a>' +
245 '<a href="#" style="float:left; heigth:100px; margin-top:15px;" onclick="loadRecord(' + i + ');" data-role="button" data-icon="edit" data-iconpos="notext" >1st link</a>' +
246 '</div>';
247
248 $('#listaca').append(listItem);
249 $('#listaca').listview('refresh').trigger('create');
250 }else{
251 listItem =
252 '<div>' +
253 '<label style="float:left; width:80%;">' +
254
255 '<input style="background-color:green;" onclick="Comprado('+item['id'] +','+ item['comprado'] +')" id='+"a"+ item['id'] + ' value="'+ item['producto'] + " " + item['comprado'] +'" type="button" >' +
256 // '<span>' + item['producto'] + " " + item['comprado'] + '</span>' +
257 '</label>' +
258 '<a href="#" style="float:left; heigth:100px; margin-top:15px;" onclick="deleteRecord(' + item['id'] + ');" data-role="button" data-icon="delete" data-iconpos="notext" ></a>' +
259 '<a href="#" style="float:left; heigth:100px; margin-top:15px;" onclick="loadRecord(' + i + ');" data-role="button" data-icon="edit" data-iconpos="notext" >1st link</a>' +
260 '</div>';
261
262 $('#listaca').append(listItem);
263 $('#listaca').listview('refresh').trigger('create');
264 }
265
266
267 }
268
269
270 });
271 });
272}
273function showComprados() // Function For Retrive data from Database Display records as list
274{
275 $("#listaca").html('');
276 $("#listaca2").html('');
277 $("#listaca3").html('');
278
279 db.transaction(function (tx) {
280
281 tx.executeSql(selectAllComprados, [], function (tx, result) {
282
283 dataset = result.rows;
284 for (var i = 0, item = null; i < dataset.length; i++) {
285 item = dataset.item(i);
286 // alert(item.id);
287 listItem =
288 '<div>' +
289 '<label style="float:left; width:100%;">' +
290 '<input style="background-color:red;" id='+ item['id'] + ' class="' + i + '" value="'+ item['producto'] + " " + item['comprado'] +'" type="button" >' +
291 // '<span>' + item['producto'] + " " + item['comprado'] + '</span>' +
292 '</label>' +
293 '</div>';
294
295 $('#listaca2').append(listItem);
296 $('#listaca2').listview('refresh').trigger('create');
297
298 }
299 });
300 });
301}
302
303
304function showNOComprados() // Function For Retrive data from Database Display records as list
305{
306 $("#listaca").html('');
307 $("#listaca2").html('');
308 $("#listaca3").html('');
309
310 db.transaction(function (tx) {
311
312 tx.executeSql(selectAllNoComprados, [], function (tx, result) {
313
314 dataset = result.rows;
315 for (var i = 0, item = null; i < dataset.length; i++) {
316 item = dataset.item(i);
317 // alert(item.id);
318 listItem =
319 '<div>' +
320 '<label style="float:left; width:100%;">' +
321 '<input style="background-color:green;" id='+ item['id'] + ' class="' + i + '" value="'+ item['producto'] + " " + item['comprado'] +'" type="button" >' +
322 // '<span>' + item['producto'] + " " + item['comprado'] + '</span>' +
323 '</label>' +
324 '</div>';
325
326 $('#listaca3').append(listItem);
327 $('#listaca3').listview('refresh').trigger('create');
328
329 }
330 });
331 });
332}
333$(document).ready(function () // Call function when page is ready for load..
334
335{
336
337
338 $("body").fadeIn(2000); // Fede In Effect when Page Load..
339
340 initDatabase();
341
342 $("#submitButton").click(insertRecord); // Register Event Listener when button click.
343
344 $("#btnUpdate").click(updateRecord);
345
346 $("#btnReset").click(resetForm);
347
348 $("#btnDrop").click(dropTable);
349
350});
351
352// BOTON DE INICIO QUE HACE VOLVER AL INICIO DE LA PAGINA
353$('#home').click(function (e) {
354 e.preventDefault(); //evitar el eventos del enlace normal
355 var strAncla = $(this).attr('href'); //id del ancla
356 // alert(strAncla);
357 $('body,html').stop(true, true).animate({
358 scrollTop: $(strAncla).offset().top
359 }, 1200);
360
361});
362// FIN DEL BOTON DE INICIO QUE HACE VOLVER AL INICIO DE LA PAGINA