· 8 years ago · Feb 08, 2018, 10:42 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// var updateComprado = "UPDATE Productos SET comprado = ? WHERE id=?";
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
177 resetForm();
178
179 showRecords()
180
181}
182
183function onError(tx, error) // Function for Hendeling Error...
184
185{
186
187 alert(error.message);
188
189}
190
191function Comprado(idProucto,comprado) {
192
193 if(comprado===0){
194
195 var compradoupdate = 1;
196
197 var useridupdate = idProucto;
198
199 alert("#a"+idProucto);
200
201 // var Prodynombre=$("#"+idProucto).attr("name");
202 $("#a"+idProucto).css({
203 "background-color":"purple"
204 });
205
206 db.transaction(function (tx) { tx.executeSql(updateComprado, [compradoupdate, Number(useridupdate)], loadAndReset, onError); });
207 }else{
208 var compradoupdate = 0;
209
210 var useridupdate = idProucto;
211
212 alert("#a"+idProucto);
213 // var Prodynombre=$("#"+idProucto).attr("name");
214 $("#a"+idProucto).css({
215 "background-color":"red"
216 });
217
218 db.transaction(function (tx) { tx.executeSql(updateComprado, [compradoupdate, Number(useridupdate)], loadAndReset, onError); });
219 }
220
221
222
223}
224
225function showRecords() // Function For Retrive data from Database Display records as list
226{
227 $("#listaca").html('');
228 $("#listaca2").html('');
229 $("#listaca3").html('');
230
231 db.transaction(function (tx) {
232
233 tx.executeSql(selectAllStatement, [], function (tx, result) {
234
235 dataset = result.rows;
236 for (var i = 0, item = null; i < dataset.length; i++) {
237 item = dataset.item(i);
238 // alert(item.id);
239 listItem =
240 '<div>' +
241 '<label style="float:left; width:80%;">' +
242 '<input style="background-color:green;" onclick="Comprado('+item['id'] +','+ item['comprado'] +')" id='+"a"+ item['id'] + ' value="'+ item['producto'] + " " + item['comprado'] +'" type="button" >' +
243 // '<span>' + item['producto'] + " " + item['comprado'] + '</span>' +
244 '</label>' +
245 '<a href="#" style="float:left; heigth:100px; margin-top:15px;" onclick="deleteRecord(' + item['id'] + ');" data-role="button" data-icon="delete" data-iconpos="notext" ></a>' +
246 '<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>' +
247 '</div>';
248
249 $('#listaca').append(listItem);
250 $('#listaca').listview('refresh').trigger('create');
251
252 }
253
254
255 });
256 });
257}
258function showComprados() // Function For Retrive data from Database Display records as list
259{
260 $("#listaca").html('');
261 $("#listaca2").html('');
262 $("#listaca3").html('');
263
264 db.transaction(function (tx) {
265
266 tx.executeSql(selectAllComprados, [], function (tx, result) {
267
268 dataset = result.rows;
269 for (var i = 0, item = null; i < dataset.length; i++) {
270 item = dataset.item(i);
271 // alert(item.id);
272 listItem =
273 '<div>' +
274 '<label style="float:left; width:100%;">' +
275 '<input id='+ item['id'] + ' class="' + i + '" value="'+ item['producto'] + " " + item['comprado'] +'" type="button" >' +
276 // '<span>' + item['producto'] + " " + item['comprado'] + '</span>' +
277 '</label>' +
278 '</div>';
279
280 $('#listaca2').append(listItem);
281 $('#listaca2').listview('refresh').trigger('create');
282
283 }
284 });
285 });
286}
287
288
289function showNOComprados() // Function For Retrive data from Database Display records as list
290{
291 $("#listaca").html('');
292 $("#listaca2").html('');
293 $("#listaca3").html('');
294
295 db.transaction(function (tx) {
296
297 tx.executeSql(selectAllNoComprados, [], function (tx, result) {
298
299 dataset = result.rows;
300 for (var i = 0, item = null; i < dataset.length; i++) {
301 item = dataset.item(i);
302 // alert(item.id);
303 listItem =
304 '<div>' +
305 '<label style="float:left; width:100%;">' +
306 '<input id='+ item['id'] + ' class="' + i + '" value="'+ item['producto'] + " " + item['comprado'] +'" type="button" >' +
307 // '<span>' + item['producto'] + " " + item['comprado'] + '</span>' +
308 '</label>' +
309 '</div>';
310
311 $('#listaca3').append(listItem);
312 $('#listaca3').listview('refresh').trigger('create');
313
314 }
315 });
316 });
317}
318$(document).ready(function () // Call function when page is ready for load..
319
320{
321
322
323 $("body").fadeIn(2000); // Fede In Effect when Page Load..
324
325 initDatabase();
326
327 $("#submitButton").click(insertRecord); // Register Event Listener when button click.
328
329 $("#btnUpdate").click(updateRecord);
330
331 $("#btnReset").click(resetForm);
332
333 $("#btnDrop").click(dropTable);
334
335});
336
337// BOTON DE INICIO QUE HACE VOLVER AL INICIO DE LA PAGINA
338$('#home').click(function (e) {
339 e.preventDefault(); //evitar el eventos del enlace normal
340 var strAncla = $(this).attr('href'); //id del ancla
341 // alert(strAncla);
342 $('body,html').stop(true, true).animate({
343 scrollTop: $(strAncla).offset().top
344 }, 1200);
345
346});
347// FIN DEL BOTON DE INICIO QUE HACE VOLVER AL INICIO DE LA PAGINA