azrifared/app.js Secret

## app.js
// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
var todoApp = angular.module('starter', ['ionic', 'ngCordova']);
var db = null;

todoApp.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

      // Don't remove this line unless you know what you are doing. It stops the viewport
      // from snapping when text inputs are focused. Ionic handles this internally for
      // a much nicer keyboard experience.
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

todoApp.config(function($stateProvider, $urlRouterProvider){

  $stateProvider
    .state("config",{
      url: "/config",
      templateUrl:"templates/config.html",
      controller: "ConfigController"
    })
    .state("categories",{
      url: "/categories",
      templateUrl:"templates/categories.html",
      controller: "CategoriesController"
    })
    .state("lists",{
      url: "/lists:categoryId",
      templateUrl:"templates/lists.html",
      controller: "ListsController"
    })
    .state("items",{
      url: "/lists:listsId",
      templateUrl:"templates/items.html",
      controller: "ItemsController"
    });
  $urlRouterProvider.otherwise('/config');
});

todoApp.controller("ConfigController", function($scope, $ionicLoading, $cordovaSQLite, $ionicHistory, $ionicPlatform, $location){
  $ionicHistory.nextViewOptions({
    disableAnimate: true,
    disableBack: true
  });
  $ionicPlatform.ready(function(){
    $ionicLoading.show({ templates: "Loading..."});
    if(window.cordova){
      window.plugins.sqlDB.copy("populated.db", function(){
        db = $cordovaSQLite,openDB("populated.db");

        $location.path("/categories");
      }, function(error){
        db = $cordovaSQLite,openDB("populated.db");
        $ionicLoading.hide();
        $location.path("/categories");
      });
    }else{
      db = openDatabase("websql.db", "1.0", "My WebSQL Database", 2 * 1024 * 1024);
      db.transaction(function(tx){
        tx.executeSql("DROP TABLE IF EXISTS tblCategories");
        tx.executeSql("CREATE TABLE IF NOT EXISTS tblCategories (id integer primary key, category_name text)");
        tx.executeSql("CREATE TABLE IF NOT EXISTS tblTodoLists (id integer primary key, category_id integer, todo_list_name text)");
        tx.executeSql("CREATE TABLE IF NOT EXISTS tblTodoListsItem (id integer primary key, todo_list_id integer, todo_list_item_name text)");
        tx.executeSql("INSERT INTO tblCategories (category_name) VALUES (?)", ["Shopping"]);
        tx.executeSql("INSERT INTO tblCategories (category_name) VALUES (?)", ["Chores"]);
        tx.executeSql("INSERT INTO tblCategories (category_name) VALUES (?)", ["School"]);

      });
      $ionicLoading.hide();
      $location.path("/categories");
    }
  });
});

todoApp.controller("CategoriesController", function($scope, $ionicPlatform, $cordovaSQLite){
  $scope.categories = [];
  $ionicPlatform.ready(function(){
    var query = "SELECT id, category_name FROM tblCategories";
    $cordovaSQLite.execute(db, query, []).then(function(res){
      if(res.rows.length > 0){
        for(var i = 0; i < res.rows.length; i++){
            $scope.categories.push({id: res.rows.item(i).id, category_name: res.rows.item(i).category_name});
        }
      }
    },function(error){
      console.error(error);
    });
  });
});

todoApp.controller("ListsController", function($scope, $ionicPlatform, $cordovaSQLite, $stateParams, $ionicPopup){
  $scope.lists = [];
  $ionicPlatform.read(function(){
    var query = "SELECT id, category_id, todo_list_name FROM tblTodoLists WHERE  category_id = ?";
    $cordovaSQLite.execute(db, query, [$stateParams.categoryId]).then(function(res){
      if(res.rows.length > 0){
        for(var i = 0; i < res.rows.length; i++){
            $scope.lists.push({id: res.rows.item(i).id, category_id: res.rows.item(i).category_id, todo_list_name: res.rows.items(i).todo_list_name});
        }
      }
    },function(error){
      console.error(error);
    });
  });
  $scope.insert = function(){
    $ionicPopup.prompt({
      title: "Enter a new todo list",
      inputType: "text"
    })
    .then(function(result){
      if(result !== undefined){
        var query = "INSERT INTO tblTodoLists (category_id, todo_list_name) VALUES(?,?)";
        $cordovaSQLite.execute(db, query, [$stateParams.categoryId, result]).then(function(res){
          $scope.lists.push({id: res.insertId, category_id: $stateParams.categoryId, todo_list_name:result});
        },function(error){
          console.error(error);
        });
      }else{
        console.log("Action not completed");
      }
    });
  }
});

todoApp.controller("ItemsController", function($scope, $ionicPlatform, $cordovaSQLite, $stateParams, $ionicPopup){
  $scope.items = [];
  $ionicPlatform.read(function(){
    var query = "SELECT id, todo_list_id, todo_list_item_name FROM tblTodoListsItem WHERE  todo_list_id = ?";
    $cordovaSQLite.execute(db, query, [$stateParams.listsId]).then(function(res){
      if(res.rows.length > 0){
        for(var i = 0; i < res.rows.length; i++){
            $scope.lists.push({id: res.rows.item(i).id, todo_list_id: res.rows.item(i).todo_list_id, todo_list_item_name: res.rows.items(i).todo_list_item_name});
        }
      }
    },function(error){
      console.error(error);
    });
  });
  $scope.insert = function(){
    $ionicPopup.prompt({
      title: "Enter a new todo list item",
      inputType: "text"
    })
    .then(function(result){
      if(result !== undefined){
        var query = "INSERT INTO tblTodoListsItem (todo_list_id, todo_list_item_name) VALUES(?,?)";
        $cordovaSQLite.execute(db, query, [$stateParams.listsId, result]).then(function(res){
          $scope.lists.push({id: res.insertId, todo_list_id: $stateParams.listsId, todo_list_item_name:result});
        },function(error){
          console.error(error);
        });
      }else{
        console.log("Action not completed");
      }
    });
  }
});

## categories.html
<ion-view title="Categories">
	<ion-content>
		<ion-list>
			<ion-item ng-repeat="category in categories" href="#/lists/{{category.id}}">
				{{category.category_name}}
			</ion-item>
		</ion-list>
	</ion-content>
</ion-view>

## config.html
<ion-view title="Setup">
	<ion-content></ion-content>
</ion-view>

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="js/ng-cordova.min.js"></script>
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
  </head>
  <body ng-app="starter">
    <ion-pane>
      <ion-nav-bar class="bar-stable">
      </ion-nav-bar>
      <ion-nav-view></ion-nav-view>
      <ion-view></ion-view>
    </ion-pane>
  </body>
</html>

## items.html
<ion-view title="Lists">
	<ion-nav-buttons side="right">
		<button class="right button button-icon icon ion-plus" ng-click="insert()"></button>
	</ion-nav-buttons>
	<ion-content>
		<ion-list>
			<ion-item ng-repeat="item in items">
				{{list.todo_list_name}}
			</ion-item>
		</ion-list>
	</ion-content>
</ion-view>

## lists.html
<ion-view title="Lists">
	<ion-nav-buttons side="right">
		<button class="right button button-icon icon ion-plus" ng-click="insert()"></button>
	</ion-nav-buttons>
	<ion-content>
		<ion-list>
			<ion-item ng-repeat="list in lists" href="#/items/{{list.id}}">
				{{list.todo_list_name}}
			</ion-item>
		</ion-list>
	</ion-content>
</ion-view>
	// Ionic Starter App

	// angular.module is a global place for creating, registering and retrieving Angular modules
	// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
	// the 2nd parameter is an array of 'requires'
	var todoApp = angular.module('starter', ['ionic', 'ngCordova']);
	var db = null;

	todoApp.run(function($ionicPlatform) {
	$ionicPlatform.ready(function() {
	if(window.cordova && window.cordova.plugins.Keyboard) {
	// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
	// for form inputs)
	cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

	// Don't remove this line unless you know what you are doing. It stops the viewport
	// from snapping when text inputs are focused. Ionic handles this internally for
	// a much nicer keyboard experience.
	cordova.plugins.Keyboard.disableScroll(true);
	}
	if(window.StatusBar) {
	StatusBar.styleDefault();
	}
	});
	})

	todoApp.config(function($stateProvider, $urlRouterProvider){

	$stateProvider
	.state("config",{
	url: "/config",
	templateUrl:"templates/config.html",
	controller: "ConfigController"
	})
	.state("categories",{
	url: "/categories",
	templateUrl:"templates/categories.html",
	controller: "CategoriesController"
	})
	.state("lists",{
	url: "/lists:categoryId",
	templateUrl:"templates/lists.html",
	controller: "ListsController"
	})
	.state("items",{
	url: "/lists:listsId",
	templateUrl:"templates/items.html",
	controller: "ItemsController"
	});
	$urlRouterProvider.otherwise('/config');
	});

	todoApp.controller("ConfigController", function($scope, $ionicLoading, $cordovaSQLite, $ionicHistory, $ionicPlatform, $location){
	$ionicHistory.nextViewOptions({
	disableAnimate: true,
	disableBack: true
	});
	$ionicPlatform.ready(function(){
	$ionicLoading.show({ templates: "Loading..."});
	if(window.cordova){
	window.plugins.sqlDB.copy("populated.db", function(){
	db = $cordovaSQLite,openDB("populated.db");

	$location.path("/categories");
	}, function(error){
	db = $cordovaSQLite,openDB("populated.db");
	$ionicLoading.hide();
	$location.path("/categories");
	});
	}else{
	db = openDatabase("websql.db", "1.0", "My WebSQL Database", 2 * 1024 * 1024);
	db.transaction(function(tx){
	tx.executeSql("DROP TABLE IF EXISTS tblCategories");
	tx.executeSql("CREATE TABLE IF NOT EXISTS tblCategories (id integer primary key, category_name text)");
	tx.executeSql("CREATE TABLE IF NOT EXISTS tblTodoLists (id integer primary key, category_id integer, todo_list_name text)");
	tx.executeSql("CREATE TABLE IF NOT EXISTS tblTodoListsItem (id integer primary key, todo_list_id integer, todo_list_item_name text)");
	tx.executeSql("INSERT INTO tblCategories (category_name) VALUES (?)", ["Shopping"]);
	tx.executeSql("INSERT INTO tblCategories (category_name) VALUES (?)", ["Chores"]);
	tx.executeSql("INSERT INTO tblCategories (category_name) VALUES (?)", ["School"]);

	});
	$ionicLoading.hide();
	$location.path("/categories");
	}
	});
	});

	todoApp.controller("CategoriesController", function($scope, $ionicPlatform, $cordovaSQLite){
	$scope.categories = [];
	$ionicPlatform.ready(function(){
	var query = "SELECT id, category_name FROM tblCategories";
	$cordovaSQLite.execute(db, query, []).then(function(res){
	if(res.rows.length > 0){
	for(var i = 0; i < res.rows.length; i++){
	$scope.categories.push({id: res.rows.item(i).id, category_name: res.rows.item(i).category_name});
	}
	}
	},function(error){
	console.error(error);
	});
	});
	});

	todoApp.controller("ListsController", function($scope, $ionicPlatform, $cordovaSQLite, $stateParams, $ionicPopup){
	$scope.lists = [];
	$ionicPlatform.read(function(){
	var query = "SELECT id, category_id, todo_list_name FROM tblTodoLists WHERE category_id = ?";
	$cordovaSQLite.execute(db, query, [$stateParams.categoryId]).then(function(res){
	if(res.rows.length > 0){
	for(var i = 0; i < res.rows.length; i++){
	$scope.lists.push({id: res.rows.item(i).id, category_id: res.rows.item(i).category_id, todo_list_name: res.rows.items(i).todo_list_name});
	}
	}
	},function(error){
	console.error(error);
	});
	});
	$scope.insert = function(){
	$ionicPopup.prompt({
	title: "Enter a new todo list",
	inputType: "text"
	})
	.then(function(result){
	if(result !== undefined){
	var query = "INSERT INTO tblTodoLists (category_id, todo_list_name) VALUES(?,?)";
	$cordovaSQLite.execute(db, query, [$stateParams.categoryId, result]).then(function(res){
	$scope.lists.push({id: res.insertId, category_id: $stateParams.categoryId, todo_list_name:result});
	},function(error){
	console.error(error);
	});
	}else{
	console.log("Action not completed");
	}
	});
	}
	});

	todoApp.controller("ItemsController", function($scope, $ionicPlatform, $cordovaSQLite, $stateParams, $ionicPopup){
	$scope.items = [];
	$ionicPlatform.read(function(){
	var query = "SELECT id, todo_list_id, todo_list_item_name FROM tblTodoListsItem WHERE todo_list_id = ?";
	$cordovaSQLite.execute(db, query, [$stateParams.listsId]).then(function(res){
	if(res.rows.length > 0){
	for(var i = 0; i < res.rows.length; i++){
	$scope.lists.push({id: res.rows.item(i).id, todo_list_id: res.rows.item(i).todo_list_id, todo_list_item_name: res.rows.items(i).todo_list_item_name});
	}
	}
	},function(error){
	console.error(error);
	});
	});
	$scope.insert = function(){
	$ionicPopup.prompt({
	title: "Enter a new todo list item",
	inputType: "text"
	})
	.then(function(result){
	if(result !== undefined){
	var query = "INSERT INTO tblTodoListsItem (todo_list_id, todo_list_item_name) VALUES(?,?)";
	$cordovaSQLite.execute(db, query, [$stateParams.listsId, result]).then(function(res){
	$scope.lists.push({id: res.insertId, todo_list_id: $stateParams.listsId, todo_list_item_name:result});
	},function(error){
	console.error(error);
	});
	}else{
	console.log("Action not completed");
	}
	});
	}
	});
	<ion-view title="Categories">
	<ion-content>
	<ion-list>
	<ion-item ng-repeat="category in categories" href="#/lists/{{category.id}}">
	{{category.category_name}}
	</ion-item>
	</ion-list>
	</ion-content>
	</ion-view>
	<ion-view title="Setup">
	<ion-content></ion-content>
	</ion-view>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
	<title></title>

	<link href="lib/ionic/css/ionic.css" rel="stylesheet">
	<link href="css/style.css" rel="stylesheet">

	<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
	<link href="css/ionic.app.css" rel="stylesheet">
	-->

	<!-- ionic/angularjs js -->
	<script src="lib/ionic/js/ionic.bundle.js"></script>

	<!-- cordova script (this will be a 404 during development) -->
	<script src="js/ng-cordova.min.js"></script>
	<script src="cordova.js"></script>

	<!-- your app's js -->
	<script src="js/app.js"></script>
	</head>
	<body ng-app="starter">
	<ion-pane>
	<ion-nav-bar class="bar-stable">
	</ion-nav-bar>
	<ion-nav-view></ion-nav-view>
	<ion-view></ion-view>
	</ion-pane>
	</body>
	</html>
	<ion-view title="Lists">
	<ion-nav-buttons side="right">
	<button class="right button button-icon icon ion-plus" ng-click="insert()"></button>
	</ion-nav-buttons>
	<ion-content>
	<ion-list>
	<ion-item ng-repeat="item in items">
	{{list.todo_list_name}}
	</ion-item>
	</ion-list>
	</ion-content>
	</ion-view>