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