· 6 years ago · Nov 18, 2019, 08:54 AM
1import $$ 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 = 'BazaFX';
81var version = '1.0';
82var displayName = 'BazaFX';
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
109};
110
111function ListDBValues() {
112 if (!window.openDatabase) {
113 alert('To urządzenie nie obsługuje SQLite!');
114 return;
115 }
116 $$('#lbUsers').html(''); //wyczyszczenie wcześniejszej zawartości
117 db.transaction(function(transaction) {
118 transaction.executeSql('SELECT * FROM User;', [],
119 function(transaction, result) {
120 if (result != null && result.rows != null) {
121 for (var i = 0; i < result.rows.length; i++) {
122 var row = result.rows.item(i);
123 $$('#lbUsers').append('<br>' + row.UserId + '. ' + row.Marka+ ' ' + row.Rok+ ' ' + row.Silnik+ ' ' + row.Pojemnosc+ ' ' + row.Pesel+ ' '+ row.Adres+ ' ' + row.Imie+ ' ' + row.Nazwisko+ ' ');
124
125 }
126 }
127 },errorHandler);
128 },errorHandler,nullHandler);
129 return
130}
131
132$$(document).on("page:init",'.page[data-name="about"]',function(e){
133 $$('#odswiezanie').on('click', () => {
134 console.log("click")
135 ListDBValues();
136
137
138
139 });
140
141$$('#dodawanie').on('click', () => {
142 console.log("click")
143 AddValueToDB();
144
145
146
147 });
148});
149
150
151
152function AddValueToDB() {
153 if (!window.openDatabase) {
154 alert('To urządzenie nie obsługuje SQLite!');
155 return;
156 }
157
158 db.transaction(function(transaction) {
159 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()],
160 nullHandler,errorHandler);
161 });
162
163 return false;
164}
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179<template>
180<div class="page" data-name="about">
181 <div class="navbar">
182 <div class="navbar-inner sliding">
183 <div class="left">
184 <a href="#" class="link back">
185 <i class="icon icon-back"></i>
186 <span class="if-not-md">Back</span>
187 </a>
188 </div>
189 <div class="title">Moja</div>
190 </div>
191 </div>
192 <div class="page-content">
193
194 <div class="block">
195 <meta name="viewport" content="width=default-width; user-scalable=no" />
196
197 <meta http-equiv="Content-type" content="text/html;charset=utf-8">
198 <title>Phonegap SQLite</title>
199
200 <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"
201 src="C:\f77\src\js\cordova.js"
202 charset="utf-8">
203
204 </script>
205 <h1> Bazy danych</h1>
206<input id="Marka" type="text" placeholder="Marka"><br>
207<input id="Rok" type="text" placeholder="Rok Produkcji"><br>
208<input id="Silnik" type="text" placeholder="Paliwo"><br>
209<input id="Pojemnosc" type="text" placeholder="Pojemnosc"><br>
210 <h1> Kierowca </h1>
211<input id="Imie" type="text" placeholder="Imie"><br>
212<input id="Nazwisko" type="text" placeholder="Nazwisko"><br>
213<input id="Pesel" type="text" placeholder="Pesel"><br>
214<input id="Adres" type="text" placeholder="Adres"><br>
215
216 <input class="col button button-large button-fill button-raised color-black" id="dodawanie" value="Dodaj do bazy"><br>
217 <input class="col button button-large button-fill button-raised color-pink" id="odswiezanie" value="Odśwież"><br>
218
219 <span style="font-weight:bold;">Wartości zapisane w bazie:</span>
220 <span id="lbUsers"></span>
221 </div>
222 </div>
223</div>
224</template>
225<script>
226export default {};
227</script>