import $$ from 'dom7';
import Framework7 from 'framework7/framework7.esm.bundle.js';

// Import F7 Styles
import 'framework7/css/framework7.bundle.css';

// Import Icons and App Custom Styles
import '../css/icons.css';
import '../css/app.css';
// Import Cordova APIs
import cordovaApp from './cordova-app.js';
// Import Routes
import routes from './routes.js';

var app = new Framework7({
  root: '#app', // App root element
  id: 'io.framework7.myapp', // App bundle ID
  name: 'test', // App name
  theme: 'auto', // Automatic theme detection
  // App root data
  data: function () {
    return {
      user: {
        firstName: 'John',
        lastName: 'Doe',
      },

    };
  },
  // App root methods
  methods: {
    helloWorld: function () {
      app.dialog.alert('Hello World!');
    },
  },
  // App routes
  routes: routes,
  // Enable panel left visibility breakpoint
  panel: {
    leftBreakpoint: 960,
  },


  // Input settings
  input: {
    scrollIntoViewOnFocus: Framework7.device.cordova && !Framework7.device.electron,
    scrollIntoViewCentered: Framework7.device.cordova && !Framework7.device.electron,
  },
  // Cordova Statusbar settings
  statusbar: {
    overlay: Framework7.device.cordova && Framework7.device.ios || 'auto',
    iosOverlaysWebView: true,
    androidOverlaysWebView: false,
  },
  on: {
    init: function () {
      var f7 = this;
      if (f7.device.cordova) {
        // Init cordova APIs (see cordova-app.js)
        cordovaApp.init(f7);
      }
        init();
    },
  },
});

// Login Screen Demo
$$('#my-login-screen .login-button').on('click', function () {
  var username = $$('#my-login-screen [name="username"]').val();
  var password = $$('#my-login-screen [name="password"]').val();

  // Close login screen
  app.loginScreen.close('#my-login-screen');

  // Alert username and password
  app.dialog.alert('Username: ' + username + '<br>Password: ' + password);
});

var db;
var shortName = 'BazaFX';
var version = '1.0';
var displayName = 'BazaFX';
var maxSize = 65535;

// wywoływana kiedy pojawi się błąd w połączeniu do bazy:
function errorHandler(transaction, error) {
   alert('Błąd: ' + error.message + ' kod błędu: ' + error.code);
}

// Funkcja wywoływana po udanej transakcji z bazą
function successCallBack() {
   alert("Debuger: sukces!");
}

function nullHandler(){};

//Funkcja wywoływana po starcie apki
function init(){
    if (!window.openDatabase) {
       alert('Twoje urządzenie nie obsługuje SQLite!');
       return;
    }
    db = openDatabase(shortName, version, displayName,maxSize); //tworzy połączenie z bazą
    db.transaction(function(tx){ //wykonuje SQL
    // tx.executeSql( 'DROP TABLE User',nullHandler,nullHandler);
    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);
};

function ListDBValues() {
 if (!window.openDatabase) {
  alert('To urządzenie nie obsługuje SQLite!');
  return;
 }
 $$('#lbUsers').html(''); //wyczyszczenie wcześniejszej zawartości
 db.transaction(function(transaction) {
   transaction.executeSql('SELECT * FROM User;', [],
     function(transaction, result) {
      if (result != null && result.rows != null) {
        for (var i = 0; i < result.rows.length; i++) {
          var row = result.rows.item(i);
          $$('#lbUsers').append('<br>' + row.UserId + '. ' +row.Marka+ ' ' + row.Rok +row.Przebieg+ ' ' +row.Pojemnosc+ ' ');
        }
       }
     },errorHandler);
 },errorHandler,nullHandler);
 return;
}

$$(document).on("page:init",'.page[data-name="about"]',function(e){
    $$('#odswiezanie').on('click', () => {
        console.log("KLIK")
      ListDBValues();
    });

    $$('#dodawanie').on('click', () => {
        console.log("KLIK")
      AddValueToDB();
    });

    $$('#usun').on('click', () => {
      console.log("click")
    DeleteFromDB($$("#Id").val());
    });

});



function AddValueToDB() {
 if (!window.openDatabase) {
   alert('To urządzenie nie obsługuje SQLite!');
   return;
 }

 db.transaction(function(transaction) {
   transaction.executeSql('INSERT INTO User(Marka, Rok, Przebieg, Pojemnosc) VALUES (?,?,?,?)',[$$('#Marka').val(), $$('#Rok').val(),$$('#Przebieg').val(),$$('#Pojemnosc').val()],
     nullHandler,errorHandler);
   });
 ListDBValues();
 return false;

}

function DeleteFromDB(Id){

  if (!window.openDatabase) {
   alert('To urządzenie nie obsługuje SQLite!');
   return;
  }
  db.transaction(function(transaction) {
    transaction.executeSql('DELETE FROM User where UserId=?;', [Id],
     function(transaction, result) {
         ListDBValues();
     },errorHandler);
  },errorHandler,nullHandler);
  return
 }















<template>
  <div class="page" data-name="about">
    <div class="navbar">
      <div class="navbar-inner sliding">
        <div class="left">
          <a href="#" class="link back">
            <i class="icon icon-back"></i>
            <span class="if-not-md">Back</span>
          </a>
        </div>
        <div class="title">Moja</div>
      </div>
    </div>
    <div class="page-content">

      <div class="block">
                  <meta name="viewport" content="width=default-width; user-scalable=no" />

                  <meta http-equiv="Content-type" content="text/html;charset=utf-8">
                  <title>Phonegap SQLite</title>

                  <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"
                  src="C:\f77\src\js\cordova.js"
                  charset="utf-8">

          </script>
          <h1> Samochód</h1>
  <input id="Marka" type="text" placeholder="Marka"><br>
  <input id="Rok" type="text" placeholder="Rok Produkcji"><br>
  <input id="Przebieg" type="text" placeholder="Paliwo"><br>
  <input id="Pojemnosc" type="text" placeholder="Pojemnosc"><br>

   <input class="col button button-small button-round button-fill" id="dodawanie" value="Dodaj do bazy" ><br>
   <input class="col button button-small button-round button-fill" id="odswiezanie" value="Odśwież" ><br>
   <input class="col button button-small button-round button-fill" id="usun" value="Usuń" ><br>

   <input id="Id" type="text" placeholder="Id"><br>

   <span style="font-weight:bold;">Wartości zapisane w bazie:</span>
   <span id="lbUsers"></span>
      </div>
    </div>
  </div>
  </template>
  <script>
  export default {};
  </script>