· 6 years ago · Dec 09, 2019, 10:30 AM
1
2<template>
3
4 <div class="page" data-name="login">
5 <div class="block">
6 <meta name="viewport" content="width=default-width; user-scalable=no" />
7
8 <meta http-equiv="Content-type" content="text/html;charset=utf-8">
9 <title>Phonegap SQLite</title>
10
11 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" src="C:\f77\src\js\jquery.min.js"
12 src="C:\f77\src\js\cordova.js"
13 charset="utf-8">
14 </script>
15 <div class="page-content login-screen-content">
16 <div class="login-screen-title">Logowanie</div>
17 <div class="list">
18 <ul>
19 <li class="item-content item-input">
20 <div class="item-inner">
21 <div class="item-title item-label">Login</div>
22 <div class="item-input-wrap">
23 <input type="text" name="login" id="login" placeholder="username">
24 </div>
25 </div>
26 </li>
27 <li class="item-content item-input">
28 <div class="item-inner">
29 <div class="item-title item-label">Hasło</div>
30 <div class="item-input-wrap">
31 <input type="password" name="password" id="password" placeholder="password">
32 <div class="item-title item-label">Id</div>
33 <div class="item-input-wrap">
34 <input type="text" name="ID" id="ID" placeholder="ID">
35 </div>
36 </div>
37 </div>
38 </li>
39 </ul>
40 </div>
41 <div class="list">
42 <ul>
43 <li>
44<input class="item-link list-button login-button color-orange" id="zapisz" value="Dodaj" ><BR>
45 <input class="col button button-big button-fill button-raised color-purple" id="pokaz" value="Pokaż" ><br>
46 <input class="col button button-big button-fill button-raised color-purple" id="usun" value="usun" >
47
48
49 </li>
50
51 </ul>
52 <div class="block-footer"></div>
53 </div>
54 <span id="konto1"></span>
55
56 </div>
57 </div>
58 </div>
59</template>
60<script>
61export default {};
62</script>
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82import $$ from 'dom7';
83import Framework7 from 'framework7/framework7.esm.bundle.js';
84
85// Import F7 Styles
86import 'framework7/css/framework7.bundle.css';
87
88// Import Icons and App Custom Styles
89import '../css/icons.css';
90import '../css/app.css';
91// Import Cordova APIs
92import cordovaApp from './cordova-app.js';
93// Import Routes
94import routes from './routes.js';
95
96
97var app = new Framework7({
98 root: '#app', // App root element
99 id: 'io.framework7.myapp', // App bundle ID
100 name: 'Pasy', // App name
101 theme: 'auto', // Automatic theme detection
102 // App root data
103 data: function () {
104 return {
105 user: {
106 firstName: 'John',
107 lastName: 'Doe',
108 },
109
110 };
111 },
112 // App root methods
113 methods: {
114 helloWorld: function () {
115 app.dialog.alert('Hello World!');
116 },
117 },
118 // App routes
119 routes: routes,
120 // Enable panel left visibility breakpoint
121 panel: {
122 leftBreakpoint: 960,
123 },
124
125
126 // Input settings
127 input: {
128 scrollIntoViewOnFocus: Framework7.device.cordova && !Framework7.device.electron,
129 scrollIntoViewCentered: Framework7.device.cordova && !Framework7.device.electron,
130 },
131 // Cordova Statusbar settings
132 statusbar: {
133 overlay: Framework7.device.cordova && Framework7.device.ios || 'auto',
134 iosOverlaysWebView: true,
135 androidOverlaysWebView: false,
136 },
137 on: {
138 init: function () {
139 var f7 = this;
140
141 if (f7.device.cordova) {
142 // Init cordova APIs (see cordova-app.js)
143 cordovaApp.init(f7);
144 }
145 init();
146
147 },
148 },
149});
150
151// Login Screen Demo
152$$('#my-login-screen .login-button').on('click', function () {
153 console.log("LOG")
154
155 var login = $$('#my-login-screen [name="login"]').val();
156 var password = $$('#my-login-screen [name="password"]').val();
157
158 // Close login screen
159 app.loginScreen.close('#my-login-screen');
160
161 // Alert username and password
162 app.dialog.alert('login: ' + login + '<br>password: ' + password);
163
164});
165
166
167
168
169
170
171
172
173
174
175
176//sss
177var db2;
178var shortName = 'Bazaa';
179var version = '2.0';
180var displayName = 'Bazaa';
181var maxSize = 65535;
182
183
184
185
186 function errorHandler(transaction, error) {
187 alert('Błąd: ' + error.message + ' kod błędu: ' + error.code);
188}
189
190// Funkcja wywoływana po udanej transakcji z bazą
191function successCallBack() {
192 alert("Debuger: sukces!");
193}
194
195function nullHandler(){};
196
197//Funkcja wywoływana po starcie apki
198function init(){
199 if (!window.openDatabase) {
200 alert('Twoje urządzenie nie obsługuje SQLite!');
201 return;
202 }
203 db2 = openDatabase(shortName, version, displayName,maxSize); //tworzy połączenie z bazą
204 db2.transaction(function(tx){ //wykonuje SQL
205 // tx.executeSql( 'DROP TABLE konto1',nullHandler,nullHandler);
206 tx.executeSql( 'CREATE TABLE IF NOT EXISTS konto1(ID TEXT NOT NULL, login TEXT NOT NULL, password TEXT NOT NULL)',[],
207 db2.nullHandler,
208 db2.errorHandler
209 );
210 }.bind(db2),
211 db2.errorHandler,
212 db2.successCallBack
213 );
214
215}
216
217function ListDBValues() {
218 if (!window.openDatabase) {
219 alert('To urządzenie nie obsługuje SQLite!');
220 return;
221 }
222 $$('#konto1').html(''); //wyczyszczenie wcześniejszej zawartości
223 db2.transaction(function(transaction) {
224 transaction.executeSql('SELECT * FROM konto1;', [],
225 function(transaction, result) {
226 if (result != null && result.rows != null) {
227 for (var i = 0; i < result.rows.length; i++) {
228 var row = result.rows.item(i);
229 $$('#konto1').append('<br>' + row.ID+' ' + row.login + ' ' + row.password+ ' ' );
230
231 }
232 }
233 },errorHandler);
234 },errorHandler,nullHandler);
235
236 return
237}
238
239
240
241
242$$(document).on("page:init",'.page[data-name="login"]',function(e){
243
244 $$('#pokaz').on('click', () => {
245 console.log("click")
246 ListDBValues();
247
248
249
250 });
251
252
253 $$('#zapisz').on('click', () => {
254 DeleteFromDB();
255 console.log("click")
256 AddValueToDB();
257
258
259
260
261 });
262
263});
264
265
266
267function AddValueToDB(login, password, ID) {
268 if (!window.openDatabase) {
269 alert('To urządzenie nie obsługuje SQLite!');
270 return;
271 }
272
273 db2.transaction(function(transaction) {
274 transaction.executeSql('INSERT INTO konto1(ID, login, password) VALUES (?,?,?)',[$$('#ID').val(), $$('#password').val(), $$('#login').val()],
275 nullHandler,errorHandler);
276 app.dialog.alert('Login: ' + $$('#login').val() + '<br>Password: ' + $$('#password').val() + '<br>Twoje ID: ' +$$('#ID').val());
277 });
278
279
280
281 return false;
282}
283 function DeleteFromDB(ID){
284
285 if (!window.openDatabase) {
286 alert('To urządzenie nie obsługuje SQLite!');
287 return;
288 }
289 db2.transaction(function(transaction) {
290 transaction.executeSql('DELETE FROM konto1; ', [],
291 function(transaction, result) {
292 ListDBValues();
293 },errorHandler);
294 },errorHandler,nullHandler);
295 return
296}
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333/*
334function DeleteFromDB(Id){
335
336 if (!window.openDatabase) {
337 alert('To urządzenie nie obsługuje SQLite!');
338 return;
339 }
340 db.transaction(function(transaction) {
341 transaction.executeSql('DELETE FROM konto1 where userr=?;', [id],
342 function(transaction, result) {
343 ListDBValues();
344 },errorHandler);
345 },errorHandler,nullHandler);
346
347 return
348*/
349 /*
350//Funkcja wywoływana po starcie apki
351function init(){
352 if (!window.openDatabase) {
353 alert('Twoje urządzenie nie obsługuje SQLite!');
354 return;
355 }
356 db = openDatabase(shortName, version, displayName,maxSize); //tworzy połączenie z bazą
357 db.transaction(function(tx){ //wykonuje SQL
358// tx.executeSql( 'DROP TABLE Userr',nullHandler,nullHandler);
359 tx.executeSql( 'CREATE TABLE IF NOT EXISTS Userr(UserId INTEGER NOT NULL PRIMARY KEY, Marka TEXT NOT NULL, Rok TEXT NOT NULL, Silnik TEXT NOT NULL, Pojemnosc TEXT NOT NULL, Imie TEXT NOT NULL,Nazwisko TEXT NOT NULL,Adres TEXT NOT NULL,Pesel TEXT NOT NULL )',[],nullHandler,errorHandler);},errorHandler,successCallBack);
360
361
362
363};
364
365function ListDBValues() {
366 if (!window.openDatabase) {
367 alert('To urządzenie nie obsługuje SQLite!');
368 return;
369 }
370 $$('#lbUsers').html(''); //wyczyszczenie wcześniejszej zawartości
371 db.transaction(function(transaction) {
372 transaction.executeSql('SELECT * FROM Userr;', [],
373 function(transaction, result) {
374 console.log(result)
375 if (result != null && result.rows != null) {
376 for (var i = 0; i < result.rows.length; i++) {
377 var row = result.rows.item(i);
378 $$('#lbUsers').append('<br>' + row.UserId + ' , ' + row.Marka+ ' , ' + row.Rok+ ' , ' + row.Silnik+ ' , ' + row.Pojemnosc+ ' , ' + row.Imie+ ', '+ row.Nazwisko+ ' , ' + row.Adres+ ' , ' + row.Pesel+ ` , `);
379
380 }
381 }
382 },errorHandler);
383 },errorHandler,nullHandler);
384
385
386 return
387}
388
389$$(document).on("page:init",'.page[data-name="about"]',function(e){
390 ListDBValues();
391 $$('#odswiezanie').on('click', () => {
392 console.log("click")
393 ListDBValues();
394
395
396 });
397
398$$('#dodawanie').on('click', () => {
399 console.log("click")
400 AddValueToDB();
401
402 });
403
404
405
406$$('#usun').on('click', () => {
407 console.log("click")
408 DeleteFromDB($$("#Id").val());
409
410});
411 });
412
413
414function AddValueToDB() {
415 if (!window.openDatabase) {
416 alert('To urządzenie nie obsługuje SQLite!');
417 return;
418 }
419
420 db.transaction(function(transaction) {
421 transaction.executeSql('INSERT INTO Userr(Marka, Rok, Silnik, Pojemnosc, Imie, Nazwisko, Adres, Pesel) VALUES (?,?,?,?,?,?,?,?)',[$$('#Marka').val(), $$('#Rok').val(),$$('#Silnik').val(),$$('#Pojemnosc').val(),$$('#Imie').val() ,$$('#Nazwisko').val() ,$$('#Adres').val(),$$('#Pesel').val()],
422 nullHandler,errorHandler);
423 });
424 return false;
425}
426
427function DeleteFromDB(Id){
428
429 if (!window.openDatabase) {
430 alert('To urządzenie nie obsługuje SQLite!');
431 return;
432 }
433 db.transaction(function(transaction) {
434 transaction.executeSql('DELETE FROM Userr where UserId=?;', [Id],
435 function(transaction, result) {
436 ListDBValues();
437 },errorHandler);
438 },errorHandler,nullHandler);
439
440 return
441}*/