· 6 years ago · Dec 09, 2019, 10:22 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, Przebieg TEXT NOT NULL, Pojemnosc 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.Przebieg+ ' ' +row.Pojemnosc+ ' ');
122 }
123 }
124 },errorHandler);
125 },errorHandler,nullHandler);
126 return;
127}
128
129$$(document).on("page:init",'.page[data-name="about"]',function(e){
130 $$('#odswiezanie').on('click', () => {
131 console.log("KLIK")
132 ListDBValues();
133 });
134
135 $$('#dodawanie').on('click', () => {
136 console.log("KLIK")
137 AddValueToDB();
138 });
139
140 $$('#usun').on('click', () => {
141 console.log("click")
142 DeleteFromDB($$("#Id").val());
143 });
144
145});
146
147
148
149function AddValueToDB() {
150 if (!window.openDatabase) {
151 alert('To urządzenie nie obsługuje SQLite!');
152 return;
153 }
154
155 db.transaction(function(transaction) {
156 transaction.executeSql('INSERT INTO User(Marka, Rok, Przebieg, Pojemnosc) VALUES (?,?,?,?)',[$$('#Marka').val(), $$('#Rok').val(),$$('#Przebieg').val(),$$('#Pojemnosc').val()],
157 nullHandler,errorHandler);
158 });
159 ListDBValues();
160 return false;
161
162}
163
164function DeleteFromDB(Id){
165
166 if (!window.openDatabase) {
167 alert('To urządzenie nie obsługuje SQLite!');
168 return;
169 }
170 db.transaction(function(transaction) {
171 transaction.executeSql('DELETE FROM User where UserId=?;', [Id],
172 function(transaction, result) {
173 ListDBValues();
174 },errorHandler);
175 },errorHandler,nullHandler);
176 return
177 }
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193<template>
194 <div class="page" data-name="about">
195 <div class="navbar">
196 <div class="navbar-inner sliding">
197 <div class="left">
198 <a href="#" class="link back">
199 <i class="icon icon-back"></i>
200 <span class="if-not-md">Back</span>
201 </a>
202 </div>
203 <div class="title">Moja</div>
204 </div>
205 </div>
206 <div class="page-content">
207
208 <div class="block">
209 <meta name="viewport" content="width=default-width; user-scalable=no" />
210
211 <meta http-equiv="Content-type" content="text/html;charset=utf-8">
212 <title>Phonegap SQLite</title>
213
214 <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"
215 src="C:\f77\src\js\cordova.js"
216 charset="utf-8">
217
218 </script>
219 <h1> Samochód</h1>
220 <input id="Marka" type="text" placeholder="Marka"><br>
221 <input id="Rok" type="text" placeholder="Rok Produkcji"><br>
222 <input id="Przebieg" type="text" placeholder="Paliwo"><br>
223 <input id="Pojemnosc" type="text" placeholder="Pojemnosc"><br>
224
225 <input class="col button button-small button-round button-fill" id="dodawanie" value="Dodaj do bazy" ><br>
226 <input class="col button button-small button-round button-fill" id="odswiezanie" value="Odśwież" ><br>
227 <input class="col button button-small button-round button-fill" id="usun" value="Usuń" ><br>
228
229 <input id="Id" type="text" placeholder="Id"><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 </template>
237 <script>
238 export default {};
239 </script>