· 6 years ago · Oct 28, 2019, 09:54 AM
1<template>
2<div class="page" data-name="about">
3 <div class="navbar">
4 <div class="navbar-inner sliding">
5 <div class="left">
6 <a href="#" class="link back">
7 <i class="icon icon-back"></i>
8 <span class="if-not-md">Back</span>
9 </a>
10 </div>
11 <div class="title">About</div>
12 </div>
13 </div>
14 <div class="page-content">
15 <div class="block-title">About My App</div>
16 <div class="block block-strong">
17 <div class="block">
18 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
19
20
21 <meta name="viewport" content="width=default-width; user-scalable=no" />
22
23 <meta http-equiv="Content-type" content="text/html;charset=utf-8">
24 <title>Phonegap SQLite</title>
25
26
27 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" src="C:\Users\egzamin\Desktop\wszystkie plik uczniow\Matyv2\f7\src\js\jquery.min.js"
28 src="C:\Users\egzamin\Desktop\wszystkie pliki uczniow\Matyv2\f7\src\js\cordova.js"
29 charset="utf-8">
30
31 </script>
32
33
34 <h1>SQLite przykład bazy danych</h1>
35 <input id="Marka" type="text" placeholder="Marka"><br>
36 <input id="Rok" type="text" placeholder="Rok Produkcji"><br>
37 <input id="Przebieg" type="text" placeholder="Przebieg"><br>
38 <input id="Pojemnosc" type="text" placeholder="Pojemnosc"><br>
39 <h1> Kierowca </h1>
40 <input id="imie" type="text" placeholder="Imie"><br>
41 <input id="Nazwisko" type="text" placeholder="Nazwisko"><br>
42 <input id="PESEL" type="text" placeholder="Pesel"><br>
43 <input id="adres" type="text" placeholder="dres"><br>
44 <input class="col button button-large button-fill button-raised color-green" id="dodawanie" value="Dodaj do bazy" ><br>
45 <input class="col button button-small button-round button-fill" id="odswiezanie" value="Odśwież" ><br>
46 <br>
47 <span style="font-weight:bold;">Wartości zapisane w bazie:</span>
48 <span id="lbUsers"></span>
49 </div>
50 </div>
51</div>
52</div>
53</template>
54<script>
55export default {};
56</script>
57
58
59
60
61
62
63
64
65
66
67
68
69
70import $$ from 'dom7';
71import Framework7 from 'framework7/framework7.esm.bundle.js';
72
73// Import F7 Styles
74import 'framework7/css/framework7.bundle.css';
75
76// Import Icons and App Custom Styles
77import '../css/icons.css';
78import '../css/app.css';
79// Import Cordova APIs
80import cordovaApp from './cordova-app.js';
81// Import Routes
82import routes from './routes.js';
83
84var app = new Framework7({
85 root: '#app', // App root element
86 id: 'io.framework7.myapp', // App bundle ID
87 name: 'test', // App name
88 theme: 'auto', // Automatic theme detection
89 // App root data
90 data: function () {
91 return {
92 user: {
93 firstName: 'John',
94 lastName: 'Doe',
95 },
96
97 };
98 },
99 // App root methods
100 methods: {
101 helloWorld: function () {
102 app.dialog.alert('Hello World!');
103 },
104 },
105 // App routes
106 routes: routes,
107 // Enable panel left visibility breakpoint
108 panel: {
109 leftBreakpoint: 960,
110 },
111
112
113 // Input settings
114 input: {
115 scrollIntoViewOnFocus: Framework7.device.cordova && !Framework7.device.electron,
116 scrollIntoViewCentered: Framework7.device.cordova && !Framework7.device.electron,
117 },
118 // Cordova Statusbar settings
119 statusbar: {
120 overlay: Framework7.device.cordova && Framework7.device.ios || 'auto',
121 iosOverlaysWebView: true,
122 androidOverlaysWebView: false,
123 },
124 on: {
125 init: function () {
126 var f7 = this;
127 if (f7.device.cordova) {
128 // Init cordova APIs (see cordova-app.js)
129 cordovaApp.init(f7);
130 }
131 init();
132 },
133 },
134});
135
136// Login Screen Demo
137$$('#my-login-screen .login-button').on('click', function () {
138 var username = $$('#my-login-screen [name="username"]').val();
139 var password = $$('#my-login-screen [name="password"]').val();
140
141 // Close login screen
142 app.loginScreen.close('#my-login-screen');
143
144 // Alert username and password
145 app.dialog.alert('Username: ' + username + '<br>Password: ' + password);
146});
147
148var db;
149var shortName = 'BazaFX';
150var version = '1.0';
151var displayName = 'BazaFX';
152var maxSize = 65535;
153
154// wywoływana kiedy pojawi się błąd w połączeniu do bazy:
155function errorHandler(transaction, error) {
156 alert('Błąd: ' + error.message + ' kod błędu: ' + error.code);
157}
158
159// Funkcja wywoływana po udanej transakcji z bazą
160function successCallBack() {
161 alert("Debuger: sukces!");
162}
163
164function nullHandler(){};
165
166//Funkcja wywoływana po starcie apki
167function init(){
168 if (!window.openDatabase) {
169 alert('Twoje urządzenie nie obsługuje SQLite!');
170 return;
171 }
172 db = openDatabase(shortName, version, displayName,maxSize); //tworzy połączenie z bazą
173 db.transaction(function(tx){ //wykonuje SQL
174 // tx.executeSql( 'DROP TABLE User',nullHandler,nullHandler);
175 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);
176};
177
178function ListDBValues() {
179 if (!window.openDatabase) {
180 alert('To urządzenie nie obsługuje SQLite!');
181 return;
182 }
183 $$('#lbUsers').html(''); //wyczyszczenie wcześniejszej zawartości
184 db.transaction(function(transaction) {
185 transaction.executeSql('SELECT * FROM User;', [],
186 function(transaction, result) {
187 if (result != null && result.rows != null) {
188 for (var i = 0; i < result.rows.length; i++) {
189 var row = result.rows.item(i);
190 $$('#lbUsers').append('<br>' + row.UserId + '. ' +row.Marka+ ' ' + row.Rok +row.Przebieg+ ' ' +row.Pojemnosc+ ' ');
191 }
192 }
193 },errorHandler);
194 },errorHandler,nullHandler);
195 return;
196}
197
198$$(document).on("page:init",'.page[data-name="about"]',function(e){
199 $$('#odswiezanie').on('click', () => {
200 console.log("KLIK")
201 ListDBValues();
202
203
204
205 });
206
207 $$('#dodawanie').on('click', () => {
208 console.log("KLIK")
209 AddValueToDB();
210
211
212
213 });
214});
215
216
217
218function AddValueToDB() {
219 if (!window.openDatabase) {
220 alert('To urządzenie nie obsługuje SQLite!');
221 return;
222 }
223
224 db.transaction(function(transaction) {
225 transaction.executeSql('INSERT INTO User(Marka, Rok, Przebieg, Pojemnosc) VALUES (?,?,?,?)',[$$('#Marka').val(), $$('#Rok').val(),$$('#Przebieg').val(),$$('#Pojemnosc').val()],
226 nullHandler,errorHandler);
227 });
228 ListDBValues();
229 return false;
230}