· 6 years ago · Nov 25, 2019, 10:26 AM
10import $$ from 'dom7';
2import Framework7 from 'framework7/framework7.esm.bundle.js';
3
4// Import F7 Styles
5import 'framework7/css/framework7.bundle.css';
6
7// Import Icons and App Custom Styles
8import '../css/icons.css';
9import '../css/app.css';
10// Import Cordova APIs
11import cordovaApp from './cordova-app.js';
12// Import Routes
13import routes from './routes.js';
14
15var app = new Framework7({
16 root: '#app', // App root element
17 id: 'io.framework7.myapp', // App bundle ID
18 name: 'test', // App name
19 theme: 'auto', // Automatic theme detection
20 // App root data
21 data: function () {
22 return {
23 user: {
24 firstName: 'John',
25 lastName: 'Doe',
26 },
27
28 };
29 },
30 // App root methods
31 methods: {
32 helloWorld: function () {
33 app.dialog.alert('Hello World!');
34 },
35 },
36 // App routes
37 routes: routes,
38 // Enable panel left visibility breakpoint
39 panel: {
40 leftBreakpoint: 960,
41 },
42
43
44 // Input settings
45 input: {
46 scrollIntoViewOnFocus: Framework7.device.cordova && !Framework7.device.electron,
47 scrollIntoViewCentered: Framework7.device.cordova && !Framework7.device.electron,
48 },
49 // Cordova Statusbar settings
50 statusbar: {
51 overlay: Framework7.device.cordova && Framework7.device.ios || 'auto',
52 iosOverlaysWebView: true,
53 androidOverlaysWebView: false,
54 },
55 on: {
56 init: function () {
57 var f7 = this;
58 if (f7.device.cordova) {
59 // Init cordova APIs (see cordova-app.js)
60 cordovaApp.init(f7);
61 }
62 init();
63 },
64 },
65});
66
67// Login Screen Demo
68$$('#my-login-screen .login-button').on('click', function () {
69 var username = $$('#my-login-screen [name="username"]').val();
70 var password = $$('#my-login-screen [name="password"]').val();
71
72 // Close login screen
73 app.loginScreen.close('#my-login-screen');
74
75 // Alert username and password
76 app.dialog.alert('Username: ' + username + '<br>Password: ' + password);
77});
78
79var db;
80var shortName = '789';
81var version = '1.0';
82var displayName = '789';
83var maxSize = 65535;
84
85// wywoływana kiedy pojawi się błąd w połączeniu do bazy:
86function errorHandler(transaction, error) {
87 alert('Błąd: ' + error.message + ' kod błędu: ' + error.code);
88}
89
90// Funkcja wywoływana po udanej transakcji z bazą
91function successCallBack() {
92 alert("Debuger: sukces!");
93}
94
95function nullHandler(){};
96
97//Funkcja wywoływana po starcie apki
98function init(){
99 if (!window.openDatabase) {
100 alert('Twoje urządzenie nie obsługuje SQLite!');
101 return;
102 }
103 db = openDatabase(shortName, version, displayName,maxSize); //tworzy połączenie z bazą
104 db.transaction(function(tx){ //wykonuje SQL
105 // tx.executeSql( 'DROP TABLE User',nullHandler,nullHandler);
106 tx.executeSql( 'CREATE TABLE IF NOT EXISTS User(UserId INTEGER NOT NULL PRIMARY KEY, Marka TEXT NOT NULL, Rok TEXT NOT NULL, Silnik TEXT NOT NULL, Pojemnosc TEXT NOT NULL,Adres TEXT NOT NULL,Pesel TEXT NOT NULL,Imie TEXT NOT NULL,Nazwisko TEXT NOT NULL )',[],nullHandler,errorHandler);},errorHandler,successCallBack);
107};
108
109function ListDBValues() {
110 if (!window.openDatabase) {
111 alert('To urządzenie nie obsługuje SQLite!');
112 return;
113 }
114 $$('#lbUsers').html(''); //wyczyszczenie wcześniejszej zawartości
115 db.transaction(function(transaction) {
116 transaction.executeSql('SELECT * FROM User;', [],
117 function(transaction, result) {
118 if (result != null && result.rows != null) {
119 for (var i = 0; i < result.rows.length; i++) {
120 var row = result.rows.item(i);
121 $$('#lbUsers').append('<br>' + row.UserId + '. ' + row.Marka+ ' ' + row.Rok+ ' ' + row.Silnik+ ' ' + row.Pojemnosc+ ' ' + row.Pesel+ ' '+ row.Adres+ ' ' + row.Imie+ ' ' + row.Nazwisko+ ' ');
122
123 }
124 }
125 },errorHandler);
126 },errorHandler,nullHandler);
127 return
128}
129
130$$(document).on("page:init",'.page[data-name="about"]',function(e){
131 $$('#odswiezanie').on('click', () => {
132 console.log("click")
133 ListDBValues();
134
135
136
137 });
138
139$$('#dodawanie').on('click', () => {
140 console.log("click")
141 AddValueToDB();
142
143
144
145 });
146
147
148 $$('#usun').on('click', () => {
149 console.log("click")
150 DeleteFromDB($$("#Id").val())
151
152
153});
154});
155
156
157
158function AddValueToDB() {
159
160 db.transaction(function(transaction) {
161 transaction.executeSql('INSERT INTO User(Marka, Rok, Silnik, Pojemnosc, Adres, Pesel, Imie, Nazwisko) VALUES (?,?,?,?,?,?,?,?)',[$$('#Marka').val(), $$('#Rok').val(),$$('#Silnik').val(),$$('#Pojemnosc').val(),$$('#Adres').val() ,$$('#Pesel').val() ,$$('#Imie').val(),$$('#Nazwisko').val()],
162 nullHandler,errorHandler);
163 });
164
165 return false;
166}
167function DeleteFromDB(Id){
168
169 if (!window.openDatabase) {
170 alert('To urządzenie nie obsługuje SQLite!');
171 return;
172 }
173 db.transaction(function(transaction) {
174 transaction.executeSql('DELETE FROM User where UserId=?;', [Id],
175 function(transaction, result) {
176 ListDBValues();
177 },errorHandler);
178 },errorHandler,nullHandler);
179 return
180}
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206function init(){
207 if (!window.openDatabase) {
208 alert('Twoje urządzenie nie obsługuje SQLite!');
209 return;
210 }
211 db = openDatabase(shortName, version, displayName,maxSize); //tworzy połączenie z bazą
212 db.transaction(function(tx){ //wykonuje SQL
213 // tx.executeSql( 'DROP TABLE User',nullHandler,nullHandler);
214 tx.executeSql( 'CREATE TABLE IF NOT EXISTS User(UserId INTEGER NOT NULL PRIMARY KEY, Login TEXT NOT NULL, Haslo )',[],nullHandler,errorHandler);},errorHandler,successCallBack);
215};
216
217function ListDBValues() {
218 if (!window.openDatabase) {
219 alert('To urządzenie nie obsługuje SQLite!');
220 return;
221 }
222
223
224function ListDBValues() {
225 if (!window.openDatabase) {
226 alert('To urządzenie nie obsługuje SQLite!');
227 return;
228 }
229 $$('#lbUsers').html(''); //wyczyszczenie wcześniejszej zawartości
230 db.transaction(function(transaction) {
231 transaction.executeSql('SELECT * FROM User;', [],
232 function(transaction, result) {
233 if (result != null && result.rows != null) {
234 for (var i = 0; i < result.rows.length; i++) {
235 var row = result.rows.item(i);
236 $$('#lbUsers').append('<br>' + row.UserId + '. ' + row.Login+ ' ' + row.Haslo+ ' ' );
237
238 }
239 }
240 },errorHandler);
241 },errorHandler,nullHandler);
242 return
243}
244
245
246
247
248
249
250$$(document).on("page:init",'.page[data-name="about"]',function(e){
251 $$('#fr').on('click', () => {
252 console.log("click")
253 ListDBValues();
254
255
256
257 });
258
259$$('#sign').on('click', () => {
260 console.log("click")
261 AddValueToDB();
262
263
264
265 });
266
267
268 $$('#usun').on('click', () => {
269 console.log("click")
270 DeleteFromDB($$("#Id").val())
271
272
273});
274});
275
276
277
278
279
280function AddValueToDB() {
281
282 db.transaction(function(transaction) {
283 transaction.executeSql('INSERT INTO User(Login,Haslo) VALUES (?,?,?,?,?,?,?,?)',[$$('#Login').val(), $$('#Haslo').val()
284 nullHandler,errorHandler);
285 });
286
287 return false;
288}
289function DeleteFromDB(Id){
290
291 if (!window.openDatabase) {
292 alert('To urządzenie nie obsługuje SQLite!');
293 return;
294 }
295 db.transaction(function(transaction) {
296 transaction.executeSql('DELETE FROM User where UserId=?;', [Id],
297 function(transaction, result) {
298 ListDBValues();
299 },errorHandler);
300 },errorHandler,nullHandler);
301 return
302}
303
304
305
306
307
308
309
310
311
312
313
314<!DOCTYPE html>
315<html>
316<head>
317 <meta charset="utf-8">
318 <!--
319 Customize this policy to fit your own app's needs. For more guidance, see:
320 https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
321 Some notes:
322 * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
323 * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
324 * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
325 * Enable inline JS: add 'unsafe-inline' to default-src
326 -->
327 <meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:">
328 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
329
330 <meta name="theme-color" content="#007aff">
331 <meta name="format-detection" content="telephone=no">
332 <meta name="msapplication-tap-highlight" content="no">
333 <title>test</title>
334
335
336
337
338 <!-- built styles file will be auto injected -->
339</head>
340<body>
341 <div id="app">
342 <!-- Status bar overlay for fullscreen mode-->
343 <div class="statusbar"></div>
344
345 <!-- Left panel with cover effect when hidden -->
346 <div class="panel panel-left panel-cover theme-dark">
347 <div class="view view-init" data-view="left">
348 <div class="ja"></div>
349 <div class="page">
350 <div class="navbar">
351 <div class="navbar-inner sliding">
352 <div class="title">O mnie</div>
353 </div>
354 </div>
355 <div class="page-content">
356 <div class="block-title">Left View Navigation</div>
357 <div class="list links-list">
358 <ul>
359 <li><a href="/left-page-1/">Left Page 1</a></li>
360 <li><a href="/left-page-2/">Left Page 2</a></li>
361 </ul>
362 </div>
363 <div class="block-title">Control Main View</div>
364 <div class="list links-list">
365 <ul>
366 <li>
367 <a href="/about/" data-view=".view-main" class="panel-close">About</a>
368 </li>
369 <li>
370 <a href="/form/" data-view=".view-main" class="panel-close">Informacje</a>
371 </li>
372 <li>
373 <a href="#" data-view=".view-main" class="back panel-close">Back in history</a>
374 </li>
375 </ul>
376 </div>
377 </div>
378 </div>
379 </div>
380 </div>
381
382 <!-- Right panel with reveal effect-->
383 <div class="panel panel-right panel-reveal theme-dark">
384 <div class="view">
385 <div class="ja"></div>
386 <div class="page">
387 <div class="navbar">
388 <div class="navbar-inner">
389 <div class="title">Right Panel</div>
390 </div>
391 </div>
392 <div class="page-content">
393 <div class="block">Right panel content goes here</div>
394 </div>
395 </div>
396 </div>
397 </div>
398
399 <!-- Your main view, should have "view-main" class -->
400 <div class="view view-main view-init safe-areas" data-url="/"></div>
401
402
403 <!-- Popup -->
404 <div class="popup" id="my-popup">
405 <div class="view">
406 <div class="ja"></div>
407 <div class="page">
408 <div class="navbar">
409 <div class="navbar-inner">
410 <div class="title">Popup</div>
411 <div class="right">
412 <a href="#" class="link popup-close">Close</a>
413 </div>
414 </div>
415 </div>
416 <div class="page-content">
417 <div class="block">
418 <p>Popup content goes here.</p>
419 </div>
420 </div>
421 </div>
422 </div>
423 </div>
424
425 <!-- Login Screen -->
426 <div class="login-screen" id="my-login-screen">
427 <div class="view">
428 <div class="ja"></div>
429 <div class="page">
430 <div class="page-content login-screen-content">
431 <div class="login-screen-title">Login</div>
432 <div class="list">
433 <ul>
434 <li class="item-content item-input">
435 <div class="item-inner">
436 <div class="item-title item-label">Username</div>
437 <div class="item-input-wrap">
438 <input type="text" name="username" placeholder="Your username">
439 </div>
440 </div>
441 </li>
442 <li class="item-content item-input">
443 <div class="item-inner">
444 <div class="item-title item-label">Password</div>
445 <div class="item-input-wrap">
446 <input type="password" name="password" placeholder="Your password">
447
448 </div>
449 </div>
450 </li>
451 </ul>
452 </div>
453 <div class="list">
454 <ul>
455 <li>
456 <center><input class="item-link list-button login-button"id="sign" value="Zaloguj się">
457 <center><input class="item-link list-button "id="usun" value="Resetuj" >
458 <center><input class="item-link list-button "id="fr" value="Odśwież" >
459 </li>
460 </ul>
461 <div class="block-footer">Some text about login information.<br>Click "Sign In" to close Login Screen</div>
462 </div>
463 </div>
464 </div>
465 </div>
466 </div>
467 </div>
468 <% if (process.env.TARGET === 'cordova') { %>
469 <script src="cordova.js"></script>
470 <% } %>
471 <!-- built script files will be auto injected -->
472</body>
473</html>