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