· 6 years ago · Oct 28, 2019, 10:28 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
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
149
150function AddValueToDB() {
151 if (!window.openDatabase) {
152 alert('To urządzenie nie obsługuje SQLite!');
153 return;
154 }
155
156 db.transaction(function(transaction) {
157 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()],
158 nullHandler,errorHandler);
159 });
160
161 return false;
162}
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184<template>
185<div class="page" data-name="about">
186 <div class="navbar">
187 <div class="navbar-inner sliding">
188 <div class="left">
189 <a href="#" class="link back">
190 <i class="icon icon-back"></i>
191 <span class="if-not-md">Back</span>
192 </a>
193 </div>
194 <div class="title">Moja</div>
195 </div>
196 </div>
197 <div class="page-content">
198
199
200 <div class="block">
201 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
202
203
204 <meta name="viewport" content="width=default-width; user-scalable=no" />
205
206 <meta http-equiv="Content-type" content="text/html;charset=utf-8">
207 <title>Phonegap SQLite</title>
208
209
210 <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"
211 src="C:\f77\src\js\cordova.js"
212 charset="utf-8">
213
214 </script>
215
216
217 <h1> Bazy danych</h1>
218 <input id="Marka" type="text" placeholder="Marka"><br>
219 <input id="Rok" type="text" placeholder="Rok Produkcji"><br>
220 <input id="Silnik" type="text" placeholder="Silnik"><br>
221 <input id="Pojemnosc" type="text" placeholder="Pojemnosc"><br>
222 <h1> Kierowca </h1>
223 <input id="Imie" type="text" placeholder="Imie"><br>
224 <input id="Nazwisko" type="text" placeholder="Nazwisko"><br>
225 <input id="Pesel" type="text" placeholder="Pesel"><br>
226 <input id="Adres" type="text" placeholder="Adres"><br>
227
228 <input class="col button button-large button-fill button-raised color-black" id="dodawanie" value="Dodaj do bazy" ><br>
229 <input class="col button button-large button-fill button-raised color-pink" id="odswiezanie" value="Odśwież" ><br>
230
231 <span style="font-weight:bold;">Wartości zapisane w bazie:</span>
232 <span id="lbUsers"></span>
233 </div>
234 </div>
235</div>
236</div>
237</template>
238<script>
239export default {};
240</script>