Aplikacja mobilna cordova z relacyjną bazą danych SQLite

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 database = {
  db: null,
  shortName: "BazaFX",
  version: "1.0",
  displayName: "BazaFX",
  maxSize: 65535,

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

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

  nullHandler: function () {},
 
  //Funkcja wywoływana po starcie apki
  init: function () {
    if (!window.openDatabase) {
      app.dialog.alert("Twoje urządzenie nie obsługuje SQLite!");
      return;
    }
    this.db = openDatabase(
      this.shortName,
      this.version,
      this.displayName,
      this.maxSize
    ); //tworzy połączenie z bazą
    this.db.transaction(
      function (tx) {
        tx.executeSql(
          "CREATE TABLE IF NOT EXISTS Cars(id INTEGER NOT NULL PRIMARY KEY, marka TEXT NOT NULL, model TEXT NOT NULL, kolor TEXT NOT NULL, rocznik INTEGER NOT NULL, cena INTEGER NOT NULL);",
          //"DROP TABLE Cars;",
          [],
          this.nullHandler,
          this.errorHandler
        );
      }.bind(this),
      this.errorHandler,
      this.successCallBack
    );
    this.db.transaction(
      function (tx) {
        tx.executeSql(
          "CREATE TABLE IF NOT EXISTS Drivers(id INTEGER NOT NULL PRIMARY KEY, pesel TEXT NOT NULL, imie TEXT NOT NULL, nazwisko TEXT NOT NULL, adres TEXT NOT NULL);",
          //"DROP TABLE Drivers;",
          [],
          this.nullHandler,
          this.errorHandler
        );
      }.bind(this),
      this.errorHandler,
      this.successCallBack
    );
    this.db.transaction(
      function (tx) {
        tx.executeSql(
          "CREATE TABLE IF NOT EXISTS Posiada(id INTEGER NOT NULL PRIMARY KEY, pesel TEXT NOT NULL, idCar INTEGER NOT NULL, FOREIGN KEY (pesel) REFERENCES Drivers(pesel), FOREIGN KEY (idCar) REFERENCES Cars(id));",
          //"DROP TABLE Posiada;",
          [],
          this.nullHandler,
          this.errorHandler
        );
      }.bind(this),
      this.errorHandler,
      this.successCallBack
    );
  },
 
  GetCars: function(callback) {
   if (!window.openDatabase) {
    alert('To urządzenie nie obsługuje SQLite!');
    return;
   }
   this.db.transaction(function(transaction) {
     transaction.executeSql('SELECT * FROM Cars;', [],
       function(transaction, result) {
         callback(result);
       }.bind(this),this.errorHandler);
   }.bind(this),this.errorHandler,this.nullHandler);
   return;
  },

  GetDrivers: function(callback) {
    if (!window.openDatabase) {
     alert('To urządzenie nie obsługuje SQLite!');
     return;
    }
    this.db.transaction(function(transaction) {
      transaction.executeSql('SELECT * FROM Drivers;', [],
        function(transaction, result) {
          callback(result);
        }.bind(this),this.errorHandler);
    }.bind(this),this.errorHandler,this.nullHandler);
    return;
   },
 
  AddCar: function(marka,model,kolor,rocznik,cena) {
   if (!window.openDatabase) {
     alert('To urządzenie nie obsługuje SQLite!');
     return;
   }
 
   this.db.transaction(function(transaction) {
     transaction.executeSql('INSERT INTO Cars(marka,model,kolor,rocznik,cena) VALUES (?,?,?,?,?)',[marka,model,kolor,rocznik,cena],
     this.nullHandler,this.errorHandler);
   }.bind(this));
 
   this.GetCars(function(){});
   return false;
  },

  AddDriver: function(pesel,imie,nazwisko,adres) {
    if (!window.openDatabase) {
      alert('To urządzenie nie obsługuje SQLite!');
      return;
    }
   
    this.db.transaction(function(transaction) {
      transaction.executeSql('INSERT INTO Drivers(pesel,imie,nazwisko,adres) VALUES (?,?,?,?)',[pesel,imie,nazwisko,adres],
      this.nullHandler,this.errorHandler);
    }.bind(this));
   
    this.GetDrivers(function(){});
    return false;
  },

  AddConnect: function(pesel, idCar) {
    if (!window.openDatabase) {
      alert('To urządzenie nie obsługuje SQLite!');
      return;
    }
   
    this.db.transaction(function(transaction) {
      transaction.executeSql('INSERT INTO Posiada(pesel,idCar) VALUES (?,?)',[pesel, idCar],
      this.nullHandler,this.errorHandler);
    }.bind(this));
   
    this.GetDrivers(function(){});
    return false;
  },

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

     this.db.transaction(function(transaction) {
      transaction.executeSql('SELECT * FROM Posiada;', [],
        function(transaction, result) {
          console.log(result);
        }.bind(this),this.errorHandler);
     }.bind(this),this.errorHandler,this.nullHandler);

     this.db.transaction(function(transaction) {
       transaction.executeSql('SELECT * FROM Posiada INNER JOIN cars ON Posiada.idCar = Cars.id INNER JOIN Drivers ON Posiada.pesel = Drivers.pesel;', [],
         function(transaction, result) {
           callback(result);
         }.bind(this),this.errorHandler);
     }.bind(this),this.errorHandler,this.nullHandler);
     return;
  }
}


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);
      }

      database.init();
    },
  },
});

//Dodaj samochód
$$(document).on('page:init', '.page[data-name="dodajS"]', function (e) {

  $$('#dodaj').on('click', () => {
    let marka = $$('#marka').val();
    let model = $$('#model').val();
    let kolor = $$('#kolor').val();
    let rocznik = $$('#rocznik').val();
    let cena = $$('#cena').val();
    database.AddCar(marka,model,kolor,rocznik,cena);
    app.dialog.alert('Dodano');
  });
});


//Dodaj kierowce
$$(document).on('page:init', '.page[data-name="dodajK"]', function (e) {

  $$('#dodajK').on('click', () => {
    let pesel = $$('#pesel').val();
    let imie = $$('#imie').val();
    let nazwisko = $$('#nazwisko').val();
    let adres = $$('#adres').val();
    database.AddDriver(pesel,imie,nazwisko,adres);
    app.dialog.alert('Dodano');
  });
});

//Dodaj połączenie
$$(document).on('page:init', '.page[data-name="connect"]', function (e) {

  let drivers = document.getElementById("drivers");
  let cars = document.getElementById("cars");

  database.GetDrivers(function(result) {
    console.log(result);
    let html = "";
    for(let i=0;i<result.rows.length;i++) {
      let row = result.rows.item(i);
      html += `<option value="${row.pesel}">${row.imie} ${row.nazwisko}</option>`;
    }

    drivers.innerHTML = html;
  });


  database.GetCars(function(result) {
    console.log(result);
    let html = "";
    for(let i=0;i<result.rows.length;i++) {
      let row = result.rows.item(i);
      html += `<option value="${row.id}">${row.marka} ${row.model}</option>`;
    }

    cars.innerHTML = html;
  });

  $$('#polacz').on('click', () => {
    let pesel = $$('#drivers').val();
    let idCar = $$('#cars').val();
    database.AddConnect(pesel, idCar);
    app.dialog.alert('Dodano');
  });
});

//Przeglądaj
$$(document).on('page:init', '.page[data-name="view"]', function (e) {
  console.log("PAGE = cars")
  database.GetCars(function(result) {
    console.log(result);
    let html = "";
    for (let i = 0; i < result.rows.length; i++) {
      let row = result.rows.item(i);
      html += `<li>Marka: ${row.marka}, model: ${row.model}, kolor: ${row.kolor}, rocznik: ${row.rocznik}, cena: ${row.cena} zł</li>`;
    }

    $$("#cars-list").html(html);
  });


  database.GetDrivers(function(result) {
    console.log(result);
    let html = "";
    for (let i = 0; i < result.rows.length; i++) {
      let row = result.rows.item(i);
      html += `<li>PESEL: ${row.pesel}, imię: ${row.imie}, nazwisko: ${row.nazwisko}, adres: ${row.adres}</li>`;
    }

    $$("#drivers-list").html(html);
  });


  database.GetConnects(function(result) {
    console.log(result);
    let html = "";
    for (let i = 0; i < result.rows.length; i++) {
      let row = result.rows.item(i);
      html += `<li>Osoba (pesel: ${row.pesel}) ${row.imie} ${row.nazwisko} posiada ${row.marka} ${row.model}</li>`;
    }

    $$("#connect-list").html(html);
  });
});