· 5 years ago · Feb 10, 2020, 09:58 AM
1<template>
2
3 <div class="page" data-name="about">
4 <div class="navbar">
5 <div class="navbar-bg"></div>
6 <div class="navbar-inner sliding">
7 <div class="subnavbar">
8 <form data-search-container=".virtual-list" data-search-item="li" data-search-in=".item-title" class="searchbar searchbar-init">
9 <div class="searchbar-inner">
10 <div class="searchbar-input-wrap">
11 <input type="search" placeholder="Search"/>
12 <i class="searchbar-icon"></i>
13 <span class="input-clear-button"></span>
14 </div>
15 <span class="searchbar-disable-button if-not-aurora">Cancel</span>
16 </div>
17 </form>
18 </div>
19 </div>
20 </div>
21 <div class="searchbar-backdrop"></div>
22 <div class="page-content">
23 <div class="list simple-list searchbar-not-found">
24 <ul>
25 <li>Nothing found</li>
26 </ul>
27 </div>
28 <div class="list virtual-list media-list searchbar-found"></div>
29 </div>
30 </div>
31</div>
32</template>
33<script>
34export default {};
35</script>
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53import $$ from 'dom7';
54import Framework7 from 'framework7/framework7.esm.bundle.js';
55
56// Import F7 Styles
57import 'framework7/css/framework7.bundle.css';
58
59// Import Icons and App Custom Styles
60import '../css/icons.css';
61import '../css/app.css';
62// Import Cordova APIs
63import cordovaApp from './cordova-app.js';
64// Import Routes
65import routes from './routes.js';
66
67
68var app = new Framework7({
69 root: '#app', // App root element
70 id: 'io.framework7.myapp', // App bundle ID
71 name: 'test', // App name
72 theme: 'auto', // Automatic theme detection
73 // App root data
74 data: function () {
75 return {
76 user: {
77 firstName: 'John',
78 lastName: 'Doe',
79 },
80
81 };
82 },
83 // App root methods
84 methods: {
85 helloWorld: function () {
86 app.dialog.alert('Hello World!');
87 },
88 },
89 // App routes
90 routes: routes,
91 // Enable panel left visibility breakpoint
92 panel: {
93 leftBreakpoint: 960,
94 },
95
96
97 // Input settings
98 input: {
99 scrollIntoViewOnFocus: Framework7.device.cordova && !Framework7.device.electron,
100 scrollIntoViewCentered: Framework7.device.cordova && !Framework7.device.electron,
101 },
102 // Cordova Statusbar settings
103 statusbar: {
104 overlay: Framework7.device.cordova && Framework7.device.ios || 'auto',
105 iosOverlaysWebView: true,
106 androidOverlaysWebView: false,
107 },
108 on: {
109 init: function () {
110 var f7 = this;
111
112 if (f7.device.cordova) {
113 // Init cordova APIs (see cordova-app.js)
114 cordovaApp.init(f7);
115 }
116 init();
117
118 },
119 },
120});
121
122// Login Screen Demo
123$$('#my-login-screen .login-button').on('click', function () {
124 console.log("LOGOWANIE!")
125
126 var Login = $$('#my-login-screen [name="Login"]').val();
127 var Password = $$('#my-login-screen [name="Password"]').val();
128 var ID = $$('#my-login-screen [name="ID"]').val();
129
130 // Close login screen
131 app.loginScreen.close('#my-login-screen');
132
133 // Alert username and password
134 app.dialog.alert('Login: ' + Login + '<br>Password: ' + Password+'<br>Twoje ID: ');
135});
136
137
138
139
140
141
142//sss
143var db2;
144var shortName = 'Bazaa';
145var version = '2.0';
146var displayName = 'Bazaa';
147var maxSize = 65535;
148
149
150
151
152 function errorHandler(transaction, error) {
153 alert('Błąd: ' + error.message + ' kod błędu: ' + error.code);
154}
155
156// Funkcja wywoływana po udanej transakcji z bazą
157function successCallBack() {
158 alert("Debuger: sukces!");
159}
160
161function nullHandler(){};
162
163//Funkcja wywoływana po starcie apki
164function init(){
165 if (!window.openDatabase) {
166 alert('Twoje urządzenie nie obsługuje SQLite!');
167 return;
168 }
169 db2 = openDatabase(shortName, version, displayName,maxSize); //tworzy połączenie z bazą
170 db2.transaction(function(tx){ //wykonuje SQL
171 //tx.executeSql( 'DROP TABLE Konta1',nullHandler,nullHandler);
172 tx.executeSql( 'CREATE TABLE IF NOT EXISTS Konta1(ID TEXT NOT NULL, Login TEXT NOT NULL,Password TEXT NOT NULL)',[],
173 db2.nullHandler,
174 db2.errorHandler
175 );
176 }.bind(db2),
177 db2.errorHandler,
178 db2.successCallBack
179 );
180
181}
182
183function ListDBValues() {
184 if (!window.openDatabase) {
185 alert('To urządzenie nie obsługuje SQLite!');
186 return;
187 }
188 $$('#Konta1').html(''); //wyczyszczenie wcześniejszej zawartości
189 db2.transaction(function(transaction) {
190 transaction.executeSql('SELECT * FROM Konta1 where ID=1;', [],
191 function(transaction, result) {
192 if (result != null && result.rows != null) {
193 for (var i = 0; i < result.rows.length; i++) {
194 var row = result.rows.item(i);
195 $$('#Konta').append('<br>' + row.ID + ' ' +row.Login + ' ' + row.Password+ ' ');
196 }
197 }
198 },errorHandler);
199 },errorHandler,nullHandler);
200
201 return
202}
203
204
205
206
207$$(document).on("page:init",'.page[data-name="Konta"]',function(e){
208 console.log("LOGIN");
209 $$('#pokaz').on('click', () => {
210 console.log("pokazane")
211 ListDBValues();
212
213
214
215 });
216
217 $$('#zapisz').on('click', () => {
218 DeleteFromDB();
219 console.log("zapisane")
220 AddValueToDB();
221
222
223
224 });
225});
226
227
228
229function DeleteFromDB(IDID,Login,Password){
230 if (!window.openDatabase) {
231 alert('To urządzenie nie obsługuje SQLite!');
232 return;
233 }
234 db2.transaction(function(transaction) {
235 transaction.executeSql('DELETE FROM Konta1;', [],
236 function(transaction, result) {
237 console.log("deleted");
238 ListDBValues();
239 },errorHandler);
240 },errorHandler,nullHandler);
241 return
242}
243
244
245
246function AddValueToDB(ID,Login,Password) {
247 if (!window.openDatabase) {
248 alert('To urządzenie nie obsługuje SQLite!');
249 return;
250 }
251
252 db2.transaction(function(transaction) {
253 transaction.executeSql('INSERT INTO Konta1(ID, Login, Password) VALUES (?,?,?)',[$$('#ID').val(),$$('#Login').val(),$$('#Password').val(),],
254 nullHandler,errorHandler);
255 app.dialog.alert('Login: ' + $$('#Login').val() + '<br>Password: ' + $$('#Password').val() + '<br>Twoje ID: ' +$$('#ID').val());
256 app.loginScreen.close('#my-login-screen');
257
258
259
260 });
261
262
263
264
265
266
267 return false;
268}
269
270
271
272
273
274
275
276
277// Dummy items array
278var items = [];
279for (var i = 1; i <= 10000; i++) {
280 items.push({
281 title: 'Osoba ' + i,
282 subtitle: 'Subtitle ' + i
283 });
284}
285$$(document).on("page:init",'.page[data-name="about"]',function(e){
286 console.log("tekst");
287
288var virtualList = app.virtualList.create({
289 // List Element
290 el: '.virtual-list',
291 // Pass array with items
292 items: items,
293 // Custom search function for searchbar
294 searchAll: function (query, items) {
295 var found = [];
296 for (var i = 0; i < items.length; i++) {
297 if (items[i].title.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === '') found.push(i);
298 }
299 return found; //return array with mathced indexes
300 },
301 // List item Template7 template
302 itemTemplate:
303 '<li>' +
304 '<a href="#" class="item-link item-content">' +
305 '<div class="item-inner">' +
306 '<div class="item-title-row">' +
307 '<div class="item-title">{{title}}</div>' +
308 '</div>' +
309 '<div class="item-subtitle">{{subtitle}}</div>' +
310 '</div>' +
311 '</a>' +
312 '</li>',
313 // Item height
314 height: app.theme === 'ios' ? 63 : (app.theme === 'md' ? 73 : 46),
315});
316});