ionic-Material Design , Codecanyon
This commit is contained in:
Carsten Hilmer
@@ -0,0 +1,80 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Note Detail-->
|
||||
<!--Controller name : noteDetailCtrl-->
|
||||
<!--Controller path : www/templates/application-storage/local-application-db/js/controllers.js-->
|
||||
<!--State name : app.notedetail-->
|
||||
<!--URL : #app/notedetail-->
|
||||
|
||||
<ion-view view-title="">
|
||||
<!--left button on navigation bar-->
|
||||
<ion-nav-buttons side="left">
|
||||
<a ng-click="$ionicGoBack()" class="button back-button buttons button-clear header-item nav-back-btn">
|
||||
<i class="ion-android-arrow-back"></i>
|
||||
</a>
|
||||
</ion-nav-buttons><!--end left button on navigation bar-->
|
||||
|
||||
<!--note detail section-->
|
||||
<form name="noteForm">
|
||||
<ion-content>
|
||||
<!--toolbar section-->
|
||||
<md-toolbar class="bar-subheader md-tall md-primary toolbar-medium toolbar-in-content">
|
||||
<div>
|
||||
<h1>
|
||||
<i class="ion-android-list"></i>
|
||||
</h1>
|
||||
|
||||
<h3>Note detail</h3>
|
||||
</div>
|
||||
<a class="md-button md-accent md-fab fab-toolbar-medium"
|
||||
ng-click="showListBottomSheet($event,noteForm)"
|
||||
aria-label="showListBottomSheet">
|
||||
<i class="ion-android-star"></i>
|
||||
</a>
|
||||
</md-toolbar><!--end toolbar section-->
|
||||
|
||||
<div id="note-detail-content">
|
||||
<!--content section-->
|
||||
<p>
|
||||
<i class="ion-android-calendar"></i> {{note.createDate}}
|
||||
</p>
|
||||
<md-input-container md-no-float>
|
||||
<input required name="noteTitle" placeholder="Note Title (Required)" ng-model="note.title">
|
||||
</md-input-container>
|
||||
<textarea rows="7" ng-model="note.detail" maxlength="250"
|
||||
placeholder="Write something here ...."></textarea>
|
||||
<span>
|
||||
{{(note.detail.length > 0 ? note.detail.length :0) | json}}/250
|
||||
</span>
|
||||
</div><!--end content section-->
|
||||
</ion-content>
|
||||
</form><!--end note detail section-->
|
||||
|
||||
|
||||
<!--angular template section-->
|
||||
<script type="text/ng-template" id="contract-actions-template">
|
||||
<md-bottom-sheet class="md-list md-has-header">
|
||||
<h1 class="md-bottom-sheet-header">Note Actions</h1>
|
||||
<!--list section-->
|
||||
<md-list>
|
||||
<md-list-item>
|
||||
<a class="md-default-theme md-bottom-sheet-list-item"
|
||||
ng-class="{ 'disabled-link': disableSaveBtn}"
|
||||
ng-click="saveNote(note,$event)">
|
||||
<i class="ion-android-list"></i>
|
||||
<span>Save Note</span>
|
||||
</a>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item ng-show="actionDelete">
|
||||
<a class="md-default-theme md-bottom-sheet-list-item"
|
||||
ng-click="deleteNote(note,$event)">
|
||||
<i class="ion-android-delete"></i>
|
||||
<span>Remove Note</span>
|
||||
</a>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
<!--end list section-->
|
||||
</md-bottom-sheet>
|
||||
</script><!--end angular template section-->
|
||||
|
||||
</ion-view>
|
||||
@@ -0,0 +1,83 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Note List-->
|
||||
<!--Controller name : noteListCtrl-->
|
||||
<!--Controller path : www/templates/application-storage/local-application-db/js/controllers.js-->
|
||||
<!--State name : app.notelist-->
|
||||
<!--URL : #app/notelist-->
|
||||
|
||||
<ion-view title="Note List">
|
||||
<!--right button on navigation bar-->
|
||||
<ion-nav-buttons side="right">
|
||||
<md-button ng-disabled="isLoading" class="md-icon-button ion-nav-button-right" ng-click="navigateTo('app.notesetting')"
|
||||
aria-label="Setting">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</md-button>
|
||||
</ion-nav-buttons><!--end right button on navigation bar-->
|
||||
|
||||
<!--note list section-->
|
||||
<ion-content id="note-list-content" class="fade-in">
|
||||
<!--list section-->
|
||||
<md-list>
|
||||
<!--list item section-->
|
||||
<md-list-item>
|
||||
<md-input-container md-no-float="" class="search-box">
|
||||
<i class="ion-android-search"></i>
|
||||
<input ng-model="filterText" placeholder="Search for notes.">
|
||||
</md-input-container>
|
||||
</md-list-item>
|
||||
|
||||
<!--Below code it will disable animation to better performance-->
|
||||
<md-card ng-if="!isAnimated" ng-click="navigateTo('app.notedetail' , note )" class="card-item"
|
||||
ng-repeat="note in noteList | filter: { title: filterText } | orderBy: 'title'">
|
||||
<md-card-content>
|
||||
<div class="card-content">
|
||||
<h1 class="md-title">
|
||||
<span>
|
||||
<i class="ion-android-list"></i>{{note.title}}
|
||||
</span>
|
||||
</h1>
|
||||
<div class="note-content-detail">
|
||||
{{note.createDate}} : {{note.detail}}
|
||||
</div>
|
||||
</div>
|
||||
</md-card-content>
|
||||
</md-card>
|
||||
|
||||
<!--Below code it will show animation when selecting row.-->
|
||||
<md-list-item ng-if="isAnimated" ng-repeat="note in noteList | filter: { title: filterText } | orderBy: 'title'">
|
||||
<md-card>
|
||||
<md-button ng-click="navigateTo('app.notedetail' , note )">
|
||||
<md-card-content>
|
||||
<div class="card-content">
|
||||
<h1 class="md-title">
|
||||
<span>
|
||||
<i class="ion-android-list"></i>{{note.title}}
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<div>
|
||||
{{note.createDate}} : {{note.detail}}
|
||||
</div>
|
||||
</div>
|
||||
</md-card-content>
|
||||
</md-button>
|
||||
</md-card>
|
||||
</md-list-item>
|
||||
<!--end list item section-->
|
||||
</md-list>
|
||||
<!--end list section-->
|
||||
</ion-content><!--end note list section-->
|
||||
|
||||
<!--footer fab bar-->
|
||||
<div class="footer-fab-bar">
|
||||
<a class="md-button md-accent md-fab fab-footer" ng-click="navigateTo('app.notedetail')" aria-label="Add">
|
||||
<i class="ion-android-create"></i>
|
||||
</a>
|
||||
</div><!--end footer fab bar-->
|
||||
|
||||
<!--loading progress-->
|
||||
<div id="note-list-loading-progress" class="loading-progress fade-in">
|
||||
<ion-spinner ng-if="!isAndroid" class="progress-circular"></ion-spinner>
|
||||
<md-progress-circular ng-if="isAndroid" md-mode="indeterminate"></md-progress-circular>
|
||||
</div><!--end loading progress-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,56 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Note Setting-->
|
||||
<!--Controller name : noteSettingCtrl-->
|
||||
<!--Controller path : www/templates/application-storage/local-application-db/js/controllers.js-->
|
||||
<!--State name : app.notesetting-->
|
||||
<!--URL : #app/notesetting-->
|
||||
|
||||
<ion-view title="Local Storage Setting">
|
||||
<!--left button on navigation bar-->
|
||||
<ion-nav-buttons side="left">
|
||||
<a ng-click="$ionicGoBack()" class="button back-button buttons button-clear header-item nav-back-btn">
|
||||
<i class="ion-android-arrow-back"></i>
|
||||
</a>
|
||||
</ion-nav-buttons><!--end left button on navigation bar-->
|
||||
|
||||
<ion-content scroll="false">
|
||||
<!--list section-->
|
||||
<md-list>
|
||||
<!--md list item default-->
|
||||
<md-subheader class="md-warn">The setting will change Local Storage data</md-subheader>
|
||||
|
||||
<md-list-item class="md-list-item-default" ng-click="navigateTo('app.notelist',true)">
|
||||
<i class="fa fa-play"></i>
|
||||
|
||||
<p>Enable Row Animation</p>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-list-item-default" ng-click="navigateTo('app.notelist',false)">
|
||||
<i class="fa fa-stop"></i>
|
||||
|
||||
<p>Disable Row Animation</p>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-list-item-default" ng-click="clearAllData($event)">
|
||||
<i class="ion-android-delete"></i>
|
||||
|
||||
<p>Clear All Data</p>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-list-item-default" ng-click="$ionicGoBack()">
|
||||
<i class="ion-android-refresh"></i>
|
||||
|
||||
<p>Refresh Data</p>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-list-item-default">
|
||||
<i class="ion-android-list"></i>
|
||||
|
||||
<p>Note Count</p>
|
||||
<span>{{noteLenght}}</span>
|
||||
|
||||
</md-list-item>
|
||||
<!--end md list item default-->
|
||||
</md-list>
|
||||
<!--end list section-->
|
||||
</ion-content>
|
||||
|
||||
</ion-view>
|
||||
@@ -0,0 +1,339 @@
|
||||
// Controller of Notes List Page.
|
||||
// It will call NoteDB Services to present data to html view.
|
||||
appControllers.controller('noteListCtrl', function ($scope,$stateParams, $timeout, NoteDB, $state) {
|
||||
|
||||
// initialForm is the first activity in the controller.
|
||||
// It will initial all variable data and let the function works when page load.
|
||||
$scope.initialForm = function () {
|
||||
|
||||
//$scope.isLoading is the variable that use for check statue of process.
|
||||
$scope.isLoading = true;
|
||||
|
||||
//$scope.isAnimated is the variable that use for receive object data from state params.
|
||||
//For enable/disable row animation.
|
||||
$scope.isAnimated = $stateParams.isAnimated;
|
||||
|
||||
// $scope.noteList is the variable that store data from NoteDB service.
|
||||
$scope.noteList = [];
|
||||
|
||||
// $scope.filterText is the variable that use for searching.
|
||||
$scope.filterText = "";
|
||||
|
||||
// The function for loading progress.
|
||||
$timeout(function () {
|
||||
if ($scope.isAndroid) {
|
||||
jQuery('#note-list-loading-progress').show();
|
||||
}
|
||||
else {
|
||||
jQuery('#note-list-loading-progress').fadeIn(700);
|
||||
}
|
||||
}, 400);
|
||||
$timeout(function () {
|
||||
|
||||
//Get all notes from NoteDB service.
|
||||
$scope.noteList = NoteDB.selectAll();
|
||||
|
||||
jQuery('#note-list-loading-progress').hide();
|
||||
jQuery('#note-list-content').fadeIn();
|
||||
$scope.isLoading = false;
|
||||
}, 3000);// End loading progress.
|
||||
|
||||
};//End initialForm.
|
||||
|
||||
// navigateTo is for navigate to other page
|
||||
// by using targetPage to be the destination page
|
||||
// and sending objectData to the destination page.
|
||||
// Parameter :
|
||||
// targetPage = destination page.
|
||||
// objectData = object that will sent to destination page.
|
||||
$scope.navigateTo = function (targetPage, objectData) {
|
||||
$state.go(targetPage, {
|
||||
noteDetail: objectData,
|
||||
actionDelete: (objectData == null ? false : true)
|
||||
});
|
||||
};// End navigateTo.
|
||||
|
||||
$scope.initialForm();
|
||||
});// End of Notes List Page Controller.
|
||||
|
||||
// Controller of Note Setting Page.
|
||||
appControllers.controller('noteSettingCtrl', function ($scope, NoteDB,$state, $ionicViewSwitcher,$stateParams, $ionicHistory, $mdBottomSheet, $mdDialog, $mdToast) {
|
||||
|
||||
// initialForm is the first activity in the controller.
|
||||
// It will initial all variable data and let the function works when page load.
|
||||
$scope.initialForm = function () {
|
||||
|
||||
//$scope.noteLenght is is the variable for get note count.
|
||||
$scope.noteLenght = NoteDB.count();
|
||||
};// End initialForm.
|
||||
|
||||
// clearAllData is for remove all notes data.
|
||||
// Parameter :
|
||||
// $event(object) = position of control that user tap.
|
||||
$scope.clearAllData = function ($event) {
|
||||
|
||||
//$mdBottomSheet.hide() use for hide bottom sheet.
|
||||
$mdBottomSheet.hide();
|
||||
|
||||
//mdDialog.show use for show alert box for Confirm to remove all data.
|
||||
$mdDialog.show({
|
||||
controller: 'DialogController',
|
||||
templateUrl: 'confirm-dialog.html',
|
||||
targetEvent: $event,
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: "Confirm to remove all data?",
|
||||
content: "All data will remove from local storage.",
|
||||
ok: "Confirm",
|
||||
cancel: "Close"
|
||||
}
|
||||
}
|
||||
}).then(function () {
|
||||
// For confirm button to remove all data.
|
||||
try {
|
||||
//To remove all notes data by calling NoteDB.clear() service.
|
||||
NoteDB.clear();
|
||||
$scope.initialForm();
|
||||
|
||||
// Showing toast for remove data is success.
|
||||
$mdToast.show({
|
||||
controller: 'toastController',
|
||||
templateUrl: 'toast.html',
|
||||
hideDelay: 400,
|
||||
position: 'top',
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: "All data removed !"
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
catch (e) {
|
||||
//Showing toast for unable to remove data.
|
||||
$mdToast.show({
|
||||
controller: 'toastController',
|
||||
templateUrl: 'toast.html',
|
||||
hideDelay: 800,
|
||||
position: 'top',
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: window.globalVariable.message.errorMessage
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}, function () {
|
||||
// For cancel button to remove all data.
|
||||
});
|
||||
}// End clearAllData.
|
||||
|
||||
// navigateTo is for navigate to other page
|
||||
// by using targetPage to be the destination state.
|
||||
// Parameter :
|
||||
// stateNames = target state to go.
|
||||
// objectData = Object data will send to destination state.
|
||||
$scope.navigateTo = function (stateName,objectData) {
|
||||
if ($ionicHistory.currentStateName() != stateName) {
|
||||
$ionicHistory.nextViewOptions({
|
||||
disableAnimate: false,
|
||||
disableBack: true
|
||||
});
|
||||
|
||||
//Next view animate will display in back direction
|
||||
$ionicViewSwitcher.nextDirection('back');
|
||||
|
||||
$state.go(stateName, {
|
||||
isAnimated: objectData,
|
||||
});
|
||||
}
|
||||
}; // End of navigateTo.
|
||||
|
||||
$scope.initialForm();
|
||||
});// End of Notes Setting Page Controller.
|
||||
|
||||
// Controller of Note Detail Page.
|
||||
appControllers.controller('noteDetailCtrl', function ($scope, NoteDB, $stateParams, $filter, $mdBottomSheet, $mdDialog, $mdToast, $ionicHistory) {
|
||||
|
||||
// initialForm is the first activity in the controller.
|
||||
// It will initial all variable data and let the function works when page load.
|
||||
$scope.initialForm = function () {
|
||||
|
||||
// $scope.actionDelete is the variable for allow or not allow to delete data.
|
||||
// It will allow to delete data when found data in the database.
|
||||
// $stateParams.actionDelete(bool) = status that pass from note list page.
|
||||
$scope.actionDelete = $stateParams.actionDelete;
|
||||
|
||||
// $scope.note is the variable that store note detail data that receive form note list page.
|
||||
// Parameter :
|
||||
// $scope.actionDelete = status that pass from note list page.
|
||||
// $stateParams.contractdetail(object) = note data that user select from note list page.
|
||||
$scope.note = $scope.getNoteData($scope.actionDelete, $stateParams.noteDetail);
|
||||
|
||||
// $scope.noteList is the variable that store data from NoteDB service.
|
||||
$scope.noteList = [];
|
||||
};// End initialForm.
|
||||
|
||||
//getNoteData is for get note detail data.
|
||||
$scope.getNoteData = function (actionDelete, noteDetail) {
|
||||
// tempNoteData is temporary note data detail.
|
||||
var tempNoteData = {
|
||||
id: null,
|
||||
title: '',
|
||||
detail: '',
|
||||
createDate: $filter('date')(new Date(), 'MMM dd yyyy'),
|
||||
};
|
||||
|
||||
// If actionDelete is true note Detail Page will show note detail that receive form note list page.
|
||||
// else it will show tempNoteData for user to add new data.
|
||||
return (actionDelete ? angular.copy(noteDetail) : tempNoteData);
|
||||
};// End getNoteData.
|
||||
|
||||
// showListBottomSheet is for showing the bottom sheet.
|
||||
// Parameter :
|
||||
// $event(object) = position of control that user tap.
|
||||
// noteForm(object) = note object that presenting on the view.
|
||||
$scope.showListBottomSheet = function ($event, noteForm) {
|
||||
|
||||
$scope.disableSaveBtn = $scope.validateRequiredField(noteForm);
|
||||
|
||||
$mdBottomSheet.show({
|
||||
templateUrl: 'contract-actions-template',
|
||||
targetEvent: $event,
|
||||
scope: $scope.$new(false),
|
||||
});
|
||||
};// End showing the bottom sheet.
|
||||
|
||||
// validateRequiredField is for validate the required field.
|
||||
// Parameter :
|
||||
// form(object) = note object that presenting on the view.
|
||||
$scope.validateRequiredField = function (form) {
|
||||
return !(form.noteTitle.$error.required == undefined);
|
||||
};// End validate the required field.
|
||||
|
||||
// saveNote is for save note.
|
||||
// Parameter :
|
||||
// note(object) = note object that presenting on the view.
|
||||
// $event(object) = position of control that user tap.
|
||||
$scope.saveNote = function (note, $event) {
|
||||
// $mdBottomSheet.hide() use for hide bottom sheet.
|
||||
$mdBottomSheet.hide();
|
||||
|
||||
// mdDialog.show use for show alert box for Confirm to save data.
|
||||
$mdDialog.show({
|
||||
controller: 'DialogController',
|
||||
templateUrl: 'confirm-dialog.html',
|
||||
targetEvent: $event,
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: "Confirm to save data?",
|
||||
content: "Data will save to Local Storage.",
|
||||
ok: "Confirm",
|
||||
cancel: "Close"
|
||||
}
|
||||
}
|
||||
}).then(function () {
|
||||
|
||||
// For confirm button to save data.
|
||||
try {
|
||||
// To update data by calling NoteDB.update($scope.note) service.
|
||||
if ($scope.actionDelete) {
|
||||
|
||||
if ($scope.note.id == null) {
|
||||
$scope.note.id = $scope.noteList[$scope.noteList.length - 1].id;
|
||||
}
|
||||
NoteDB.update($scope.note);
|
||||
} // End update data.
|
||||
|
||||
// To add new data by calling NoteDB.insert(note) service.
|
||||
else {
|
||||
NoteDB.insert(note);
|
||||
$scope.noteList = NoteDB.selectAll();
|
||||
$scope.actionDelete = true;
|
||||
}// End add new data.
|
||||
|
||||
// Showing toast for save data is success.
|
||||
$mdToast.show({
|
||||
controller: 'toastController',
|
||||
templateUrl: 'toast.html',
|
||||
hideDelay: 400,
|
||||
position: 'top',
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: "Data Saved !"
|
||||
}
|
||||
}
|
||||
});//End showing toast.
|
||||
}
|
||||
catch (e) {
|
||||
// Showing toast for unable to save data.
|
||||
$mdToast.show({
|
||||
controller: 'toastController',
|
||||
templateUrl: 'toast.html',
|
||||
hideDelay: 800,
|
||||
position: 'top',
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: window.globalVariable.message.errorMessage
|
||||
}
|
||||
}
|
||||
});// End showing toast.
|
||||
}
|
||||
|
||||
}, function () {
|
||||
// For cancel button to save data.
|
||||
});// End alert box.
|
||||
};// End save note.
|
||||
|
||||
// deleteNote is for remove note.
|
||||
// Parameter :
|
||||
// note(object) = note object that presenting on the view.
|
||||
// $event(object) = position of control that user tap.
|
||||
$scope.deleteNote = function (note, $event) {
|
||||
// $mdBottomSheet.hide() use for hide bottom sheet.
|
||||
$mdBottomSheet.hide();
|
||||
|
||||
// mdDialog.show use for show alert box for Confirm to delete data.
|
||||
$mdDialog.show({
|
||||
controller: 'DialogController',
|
||||
templateUrl: 'confirm-dialog.html',
|
||||
targetEvent: $event,
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: "Confirm to remove data?",
|
||||
content: "Data will remove from Local Storage.",
|
||||
ok: "Confirm",
|
||||
cancel: "Close"
|
||||
}
|
||||
}
|
||||
}).then(function () {
|
||||
// For confirm button to remove data.
|
||||
try {
|
||||
// Remove note by calling NoteDB.delete(note) service.
|
||||
if ($scope.note.id == null) {
|
||||
$scope.note.id = $scope.noteList[$scope.noteList.length - 1].id;
|
||||
}
|
||||
NoteDB.delete(note);
|
||||
$ionicHistory.goBack();
|
||||
}// End remove note.
|
||||
catch (e) {
|
||||
// Showing toast for unable to remove data.
|
||||
$mdToast.show({
|
||||
controller: 'toastController',
|
||||
templateUrl: 'toast.html',
|
||||
hideDelay: 800,
|
||||
position: 'top',
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: window.globalVariable.message.errorMessage
|
||||
}
|
||||
}
|
||||
});//End showing toast.
|
||||
}
|
||||
|
||||
}, function () {
|
||||
// For cancel button to remove data.
|
||||
});// End alert box.
|
||||
};// End remove note.
|
||||
|
||||
$scope.initialForm();
|
||||
});// End of Notes Detail Page Controller.
|
||||
@@ -0,0 +1,120 @@
|
||||
// LocalStorage service have ability to store data by HTML5 localStorage feature.
|
||||
//
|
||||
// The data will store in a json format.
|
||||
// object schema of note data is:
|
||||
// [{
|
||||
// id: id of note,
|
||||
// title: title of note,
|
||||
// detail: note detail,
|
||||
// createDate: note created date
|
||||
// }]
|
||||
appServices.factory('localStorage', function ($filter, $window) {
|
||||
return {
|
||||
// Get data from localStorage it will use data key for getting the data.
|
||||
// Parameter :
|
||||
// key = reference of object in localStorage.
|
||||
get: function (key) {
|
||||
return JSON.parse($window.localStorage[key] || "null");
|
||||
},
|
||||
|
||||
// Add data to localStorage it will use data key
|
||||
// by input data key and value for setting data to localStorage.
|
||||
// Parameter :
|
||||
// key = reference of object in localStorage.
|
||||
// value = data that will store in localStorage.
|
||||
set: function (key, value) {
|
||||
$window.localStorage[key] = JSON.stringify(value);
|
||||
},
|
||||
|
||||
//Remove all data from localStorage.
|
||||
removeAll: function () {
|
||||
$window.localStorage.clear();
|
||||
}
|
||||
|
||||
};
|
||||
});//End LocalStorage service.
|
||||
|
||||
// NoteDB service will call localStorage Services to present notes data to controller.
|
||||
appServices.factory('NoteDB', function (localStorage) {
|
||||
return {
|
||||
// Get all data from localStorage.
|
||||
selectAll: function () {
|
||||
//noteData is the key of object that store in localStorage.
|
||||
return localStorage.get("noteData");
|
||||
},
|
||||
|
||||
// Add new note data to localStorage.
|
||||
// It will receive note data from controller to store in localStorage.
|
||||
// Parameter :
|
||||
// note = data that will store in localStorage.
|
||||
insert: function (note) {
|
||||
var notesList = localStorage.get("noteData");
|
||||
if (notesList == null) {
|
||||
// For first value of data.
|
||||
var newNoteData = [{
|
||||
id: 1,
|
||||
title: note.title,
|
||||
detail: note.detail,
|
||||
createDate: note.createDate
|
||||
}];
|
||||
localStorage.set("noteData", newNoteData);
|
||||
}
|
||||
else {
|
||||
// For up to second value of data.
|
||||
var newNoteData = {
|
||||
id: (notesList.length + 1),
|
||||
title: note.title,
|
||||
detail: note.detail,
|
||||
createDate: note.createDate
|
||||
};
|
||||
notesList.push(newNoteData);
|
||||
localStorage.set("noteData", notesList);
|
||||
}
|
||||
},
|
||||
|
||||
// Update note data to localStorage.
|
||||
// It will receive note data from controller to store in localStorage.
|
||||
// Parameter :
|
||||
// note = data that will update to localStorage.
|
||||
update: function (note) {
|
||||
var notesList = localStorage.get("noteData");
|
||||
|
||||
for (var i = 0; i <= notesList.length; i++) {
|
||||
if (notesList[i].id == note.id) {
|
||||
notesList[i] = note;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
localStorage.set("noteData", notesList);
|
||||
},
|
||||
|
||||
// Remove data from localStorage it will receive note data
|
||||
// from controller to remove data from localStorage.
|
||||
// Parameter :
|
||||
// note = data that will delete from localStorage.
|
||||
delete: function (note) {
|
||||
var notesList = localStorage.get("noteData");
|
||||
|
||||
for (var i = 0; i <= notesList.length; i++) {
|
||||
if (notesList[i].id == note.id) {
|
||||
notesList.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
localStorage.set("noteData", notesList);
|
||||
},
|
||||
|
||||
// Remove All data from localStorage.
|
||||
clear: function () {
|
||||
localStorage.removeAll();
|
||||
},
|
||||
|
||||
// Get number of notes.
|
||||
count: function () {
|
||||
var notesList = localStorage.get("noteData");
|
||||
return (notesList == null ? 0 : notesList.length);
|
||||
}
|
||||
};
|
||||
});//End NoteDB service.
|
||||
@@ -0,0 +1,87 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Contract Detail-->
|
||||
<!--Controller name : contractDetailCtrl-->
|
||||
<!--Controller path : www/templates/application-storage/sqLite/js/controllers.js-->
|
||||
<!--State name : app.contractdetail-->
|
||||
<!--URL : #app/contractdetail-->
|
||||
|
||||
<ion-view title="Contract">
|
||||
<!--left button on navigation bar-->
|
||||
<ion-nav-buttons side="left">
|
||||
<a ng-click="$ionicGoBack()" class="button back-button buttons button-clear header-item nav-back-btn">
|
||||
<i class="ion-android-arrow-back"></i>
|
||||
</a>
|
||||
</ion-nav-buttons> <!--end left button on navigation bar-->
|
||||
|
||||
<!--contract detail section-->
|
||||
<form name="contractForm">
|
||||
<ion-content id="contract-details-content">
|
||||
<!--contract detail input section-->
|
||||
<md-input-container md-no-float>
|
||||
<i class="ion-android-person"></i>
|
||||
<input ng-model="contract.firstName" name="firstName" required placeholder="* First Name (required)">
|
||||
</md-input-container>
|
||||
<md-input-container md-no-float>
|
||||
<i class="ion-android-people"></i>
|
||||
<input ng-model="contract.lastName" name="lastName" required placeholder="* Last Name (required)">
|
||||
</md-input-container>
|
||||
<md-input-container md-no-float>
|
||||
<i class="ion-android-phone-portrait"></i>
|
||||
<input ng-model="contract.telephone" name="telephone" required placeholder="* Telephone (required)"
|
||||
type="tel">
|
||||
</md-input-container>
|
||||
<md-input-container md-no-float>
|
||||
<i class="ion-android-mail"></i>
|
||||
<input ng-model="contract.email" name="email" placeholder="Email">
|
||||
</md-input-container>
|
||||
<md-input-container md-no-float>
|
||||
<i class="ion-android-calendar"></i>
|
||||
<input ng-model="contract.createDate" disabled name="dateTime" placeholder="Date Time">
|
||||
</md-input-container>
|
||||
<md-input-container md-no-float>
|
||||
<i class="ion-android-favorite"></i>
|
||||
<input ng-model="contract.age" numbers-only name="age" placeholder="Age" type="tel">
|
||||
</md-input-container><!--end contract detail input section-->
|
||||
|
||||
<!--contract switch section-->
|
||||
<md-switch ng-model="contract.isEnable" ng-disabled="actionDelete">
|
||||
{{(contract.isEnable == true ? 'Enable' : 'Disabled' ) }} Contract
|
||||
</md-switch><!--end contract switch section-->
|
||||
|
||||
</ion-content>
|
||||
<div class="footer-fab-bar">
|
||||
<a class="md-button md-accent md-fab fab-footer" ng-click="showListBottomSheet($event,contractForm)"
|
||||
aria-label="Contract Form Actions">
|
||||
<i class="ion-android-star"></i>
|
||||
</a>
|
||||
</div>
|
||||
</form><!--end contract detail section-->
|
||||
|
||||
<!--angular template section-->
|
||||
<script type="text/ng-template" id="contract-actions-template">
|
||||
<md-bottom-sheet class="md-list md-has-header">
|
||||
<h1 class="md-bottom-sheet-header">Contract Actions</h1>
|
||||
<md-list>
|
||||
<!--md bottom sheet list item-->
|
||||
<md-list-item>
|
||||
<a class="md-default-theme md-bottom-sheet-list-item"
|
||||
ng-class="{ 'disabled-link': disableSaveBtn}"
|
||||
ng-click="saveContract(contract,$event)">
|
||||
<i class="ion-android-list"></i>
|
||||
<span>Save Contract</span>
|
||||
</a>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item ng-show="actionDelete">
|
||||
<a class="md-default-theme md-bottom-sheet-list-item"
|
||||
ng-click="deleteContract(contract,$event)">
|
||||
<i class="ion-android-delete"></i>
|
||||
<span>Remove Contract</span>
|
||||
</a>
|
||||
</md-list-item>
|
||||
<!--end md bottom sheet list item-->
|
||||
</md-list>
|
||||
</md-bottom-sheet>
|
||||
</script><!--end angular template section-->
|
||||
|
||||
</ion-view>
|
||||
@@ -0,0 +1,97 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Contract List-->
|
||||
<!--Controller name : contractListCtrl-->
|
||||
<!--Controller path : www/templates/application-storage/sqLite/js/controllers.js-->
|
||||
<!--State name : app.contractlist-->
|
||||
<!--URL : #app/contractlist-->
|
||||
|
||||
<ion-view view-title="">
|
||||
<!--right button on navigation bar-->
|
||||
<ion-nav-buttons side="right">
|
||||
<md-button ng-disabled="isLoading" class="md-icon-button ion-nav-button-right" ng-click="navigateTo('app.contractsetting')"
|
||||
aria-label="Setting">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</md-button>
|
||||
</ion-nav-buttons> <!--end right button on navigation bar-->
|
||||
|
||||
<!--toolbar section-->
|
||||
<md-toolbar class="bar-subheader md-tall md-primary toolbar-medium">
|
||||
<div>
|
||||
<h1>SQLite Database</h1>
|
||||
|
||||
<h2>Application Storage</h2>
|
||||
</div>
|
||||
<a class="md-button md-accent md-fab fab-toolbar-medium"
|
||||
ng-click="navigateTo('app.contractdetail',contract)"
|
||||
aria-label="Add">
|
||||
<i class="icon ion-plus"></i>
|
||||
</a>
|
||||
</md-toolbar><!--end toolbar section-->
|
||||
|
||||
<!--contract list section-->
|
||||
<ion-content id="contract-list-content" class="fade-in">
|
||||
<!--list section-->
|
||||
<md-list>
|
||||
|
||||
<md-list-item>
|
||||
<md-input-container md-no-float="" class="md-list-item-full-width">
|
||||
<input ng-model="filterText" placeholder="Search for contacts.">
|
||||
</md-input-container>
|
||||
</md-list-item>
|
||||
|
||||
<!--Below code it will disable animation to better performance-->
|
||||
<div ng-if="!isAnimated" class="row contract-list-item"
|
||||
ng-repeat="contract in contracts | filter: filterText | orderBy: 'firstName'">
|
||||
<div class="col-25 icon-user">
|
||||
<i class="fa fa-user"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
{{ contract.firstName }} {{ contract.lastName }}
|
||||
</div>
|
||||
<div class="col-25 status-button">
|
||||
<md-menu md-position-mode="target-right target" class="md-list-item-md-menu-right">
|
||||
<p ng-click="$mdOpenMenu()">
|
||||
<md-icon md-menu-origin md-svg-icon="more"></md-icon>
|
||||
</p>
|
||||
<md-menu-content width="1">
|
||||
<md-menu-item>
|
||||
<a class="md-button md-default-theme" ng-click="navigateTo('app.contractdetail',contract)">
|
||||
<span class="menu-item-button">Edit</span>
|
||||
</a>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<a class="md-button md-default-theme" ng-click="callTo(contract.telephone)">
|
||||
<span class="menu-item-button" >Call {{contract.telephone}}</span>
|
||||
</a>
|
||||
</md-menu-item>
|
||||
</md-menu-content>
|
||||
</md-menu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Below code it will show animation when selecting row.-->
|
||||
<md-list-item ng-if="isAnimated" class="md-list-item-default"
|
||||
ng-click="navigateTo('app.contractdetail',contract)"
|
||||
ng-repeat="contract in contracts | filter: filterText | orderBy: 'firstName'">
|
||||
|
||||
<i class="fa fa-user"></i>
|
||||
|
||||
<p>{{ contract.firstName }} {{ contract.lastName }}</p>
|
||||
<md-switch class="md-secondary"
|
||||
ng-model="contract.isEnable"
|
||||
ng-change="updateContract(contract)">
|
||||
</md-switch>
|
||||
</md-list-item>
|
||||
|
||||
</md-list>
|
||||
<!--end list section-->
|
||||
|
||||
</ion-content><!--end contract list section-->
|
||||
|
||||
<!--loading progress-->
|
||||
<div id="contract-list-loading-progress" class="loading-progress fade-in">
|
||||
<ion-spinner ng-if="!isAndroid" class="progress-circular"></ion-spinner>
|
||||
<md-progress-circular ng-if="isAndroid" md-mode="indeterminate"></md-progress-circular>
|
||||
</div><!--end loading progress-->
|
||||
|
||||
</ion-view>
|
||||
@@ -0,0 +1,54 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Contract Setting-->
|
||||
<!--Controller name : contractSettingCtrl-->
|
||||
<!--Controller path : www/templates/application-storage/sqLite/js/controllers.js-->
|
||||
<!--State name : app.contractsetting-->
|
||||
<!--URL : #app/contractsetting-->
|
||||
|
||||
<ion-view title="SQLite Setting">
|
||||
<!--left button on navigation bar-->
|
||||
<ion-nav-buttons side="left">
|
||||
<a ng-click="$ionicGoBack()" class="button back-button buttons button-clear header-item nav-back-btn">
|
||||
<i class="ion-android-arrow-back "></i>
|
||||
</a>
|
||||
</ion-nav-buttons><!--end left button on navigation bar-->
|
||||
|
||||
<ion-content scroll="false">
|
||||
<!--list section-->
|
||||
<md-list>
|
||||
<md-subheader class="md-warn">The setting will change SQLite data</md-subheader>
|
||||
|
||||
<md-list-item class="md-list-item-default" ng-click="navigateTo('app.contractlist',true)">
|
||||
<i class="fa fa-play"></i>
|
||||
|
||||
<p>Enable Row Animation</p>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-list-item-default" ng-click="navigateTo('app.contractlist',false)">
|
||||
<i class="fa fa-stop"></i>
|
||||
|
||||
<p>Disable Row Animation</p>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-list-item-default" ng-click="clearAllData($event)">
|
||||
<i class="ion-android-delete"></i>
|
||||
|
||||
<p> Clear All Data</p>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-list-item-default" ng-click="$ionicGoBack()">
|
||||
<i class="ion-android-refresh"></i>
|
||||
|
||||
<p>Refresh Data</p>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-list-item-default">
|
||||
<i class="fa fa-user"></i>
|
||||
|
||||
<p>Contract Count</p>
|
||||
<span ng-show="loading">...</span>
|
||||
<span ng-show="!loading">{{contractsCount.length}}</span>
|
||||
|
||||
</md-list-item>
|
||||
|
||||
</md-list><!--end list section-->
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
@@ -0,0 +1,383 @@
|
||||
// Controller will call ContractDB Services to present data to html view.
|
||||
//
|
||||
// For using sqlite you have to install $cordovaSQLite by running the following
|
||||
// command in your cmd.exe for windows or terminal for mac:
|
||||
// $ cd your_project_path
|
||||
// $ ionic plugin remove io.litehelpers.cordova.sqlite
|
||||
// $ ionic plugin add https://github.com/litehelpers/Cordova-sqlite-storage.git
|
||||
//
|
||||
// For install $cordovaSQLite plugin you also have to install this following plugin to get $cordovaSQLite work :
|
||||
// $ ionic plugin add com.ionic.keyboard
|
||||
//
|
||||
// Learn more about $cordovaSQLite :
|
||||
// http://ngcordova.com/docs/plugins/sqlite/
|
||||
//
|
||||
// Controller of Contract List Page.
|
||||
appControllers.controller('contractListCtrl', function ($scope, $stateParams,$filter, $mdDialog, $timeout, $ionicModal, $state, $mdBottomSheet, ContractDB) {
|
||||
|
||||
// initialForm is the first activity in the controller.
|
||||
// It will initial all variable data and let the function works when page load.
|
||||
$scope.initialForm = function () {
|
||||
|
||||
//$scope.isLoading is the variable that use for check statue of process.
|
||||
$scope.isLoading = true;
|
||||
|
||||
//$scope.isAnimated is the variable that use for receive object data from state params.
|
||||
//For enable/disable row animation.
|
||||
$scope.isAnimated = $stateParams.isAnimated;
|
||||
|
||||
// $scope.contracts is the variable that store data from ContractDB service.
|
||||
$scope.contracts = [];
|
||||
|
||||
// $scope.filterText is the variable that use for searching.
|
||||
$scope.filterText = "";
|
||||
|
||||
// The function for show/hide loading progress.
|
||||
$timeout(function () {
|
||||
if ($scope.isAndroid) {
|
||||
jQuery('#contract-list-loading-progress').show();
|
||||
}
|
||||
else {
|
||||
jQuery('#contract-list-loading-progress').fadeIn(700);
|
||||
}
|
||||
}, 400);
|
||||
$timeout(function () {
|
||||
|
||||
//Get all contracts.
|
||||
$scope.getContractList();
|
||||
|
||||
jQuery('#contract-list-loading-progress').hide();
|
||||
jQuery('#contract-list-content').fadeIn();
|
||||
$scope.isLoading = false;
|
||||
}, 3000);// End loading progress.
|
||||
|
||||
};// End initialForm.
|
||||
|
||||
// getContractList is for get all contracts.
|
||||
// By calling ContractDB.all() service.
|
||||
$scope.getContractList = function () {
|
||||
$scope.contracts = ContractDB.all();
|
||||
};//End getContractList.
|
||||
|
||||
// updateContract is for update contracts.
|
||||
// By sending contract to ContractDB.update(contract) service.
|
||||
// Parameter :
|
||||
// contract = contract that user select from view.
|
||||
$scope.updateContract = function (contract) {
|
||||
ContractDB.update(contract);
|
||||
};// End updateContract.
|
||||
|
||||
// navigateTo is for navigate to other page
|
||||
// by using targetPage to be the destination page
|
||||
// and sending objectData to the destination page.
|
||||
// Parameter :
|
||||
// targetPage = destination page.
|
||||
// objectData = object that will sent to destination page.
|
||||
$scope.navigateTo = function (targetPage, objectData) {
|
||||
$timeout(function(){
|
||||
$state.go(targetPage, {
|
||||
contractdetail: objectData,
|
||||
actionDelete: (objectData == null ? false : true)
|
||||
});
|
||||
},400);
|
||||
};// End navigateTo.
|
||||
|
||||
// callTo is for using mobile calling.
|
||||
// Parameter :
|
||||
// number = number that going to call.
|
||||
$scope.callTo = function (number) {
|
||||
window.open("tel:" + number);
|
||||
}// End callTo.
|
||||
|
||||
|
||||
$scope.initialForm();
|
||||
|
||||
});// End of Contract List Page Controller.
|
||||
|
||||
// Controller of Contract Detail Page.
|
||||
appControllers.controller('contractDetailCtrl', function ($mdBottomSheet, $mdToast, $scope, $stateParams, $filter, $mdDialog, $ionicHistory, ContractDB, $ionicHistory) {
|
||||
|
||||
// initialForm is the first activity in the controller.
|
||||
// It will initial all variable data and let the function works when page load.
|
||||
$scope.initialForm = function () {
|
||||
|
||||
// $scope.disableSaveBtn is the variable for setting disable or enable the save button.
|
||||
$scope.disableSaveBtn = false;
|
||||
|
||||
// $scope.contract is the variable that store contract detail data that receive form contract list page.
|
||||
// Parameter :
|
||||
// $stateParams.actionDelete(bool) = status that pass from contract list page.
|
||||
// $stateParams.contractdetail(object) = contract that user select from contract list page.
|
||||
$scope.contract = $scope.getContractData($stateParams.actionDelete, $stateParams.contractdetail);
|
||||
|
||||
//$scope.actionDelete is the variable for allow or not allow to delete data.
|
||||
// It will allow to delete data when have data in the database.
|
||||
$scope.actionDelete = $stateParams.actionDelete;
|
||||
}; //End initialForm.
|
||||
|
||||
// getContractData is for get contract detail data.
|
||||
$scope.getContractData = function (actionDelete, contractDetail) {
|
||||
// tempContract is temporary contract data detail.
|
||||
var tempContract = {
|
||||
id: null,
|
||||
firstName: '',
|
||||
lastName: '',
|
||||
telephone: '',
|
||||
email: '',
|
||||
createDate: $filter('date')(new Date(), 'MMM dd yyyy'),
|
||||
age: null,
|
||||
isEnable: false
|
||||
}
|
||||
// If actionDelete is true Contract Detail Page will show contract detail that receive form contract list page.
|
||||
// else it will show tempContract for user to add new data.
|
||||
return (actionDelete ? angular.copy(contractDetail) : tempContract);
|
||||
};//End get contract detail data.
|
||||
|
||||
// saveContract is for save contract.
|
||||
// Parameter :
|
||||
// contract(object) = contract object that presenting on the view.
|
||||
// $event(object) = position of control that user tap.
|
||||
$scope.saveContract = function (contract, $event) {
|
||||
//$mdBottomSheet.hide() use for hide bottom sheet.
|
||||
$mdBottomSheet.hide();
|
||||
//mdDialog.show use for show alert box for Confirm to save data.
|
||||
$mdDialog.show({
|
||||
controller: 'DialogController',
|
||||
templateUrl: 'confirm-dialog.html',
|
||||
targetEvent: $event,
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: "Confirm to save data?",
|
||||
content: "Data will save to SQLite.",
|
||||
ok: "Confirm",
|
||||
cancel: "Close"
|
||||
}
|
||||
}
|
||||
}).then(function () {
|
||||
|
||||
// For confirm button to save data.
|
||||
try {
|
||||
// To update data by calling ContractDB.update(contract) service.
|
||||
if ($scope.actionDelete) {
|
||||
if ($scope.contract.id == null) {
|
||||
$scope.contract.id = $scope.contractList[$scope.contractList.length - 1].id;
|
||||
}
|
||||
ContractDB.update(contract);
|
||||
} // End update data.
|
||||
|
||||
// To add new data by calling ContractDB.add(contract) service.
|
||||
else {
|
||||
ContractDB.add(contract);
|
||||
$scope.contractList = ContractDB.all();
|
||||
$scope.actionDelete = true;
|
||||
}// End add new data.
|
||||
|
||||
// Showing toast for save data is success.
|
||||
$mdToast.show({
|
||||
controller: 'toastController',
|
||||
templateUrl: 'toast.html',
|
||||
hideDelay: 400,
|
||||
position: 'top',
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: "Data Saved !"
|
||||
}
|
||||
}
|
||||
});//End showing toast.
|
||||
}
|
||||
catch (e) {
|
||||
// Showing toast for unable to save data.
|
||||
$mdToast.show({
|
||||
controller: 'toastController',
|
||||
templateUrl: 'toast.html',
|
||||
hideDelay: 800,
|
||||
position: 'top',
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: window.globalVariable.message.errorMessage
|
||||
}
|
||||
}
|
||||
});//End showing toast.
|
||||
}
|
||||
}, function () {
|
||||
// For cancel button to save data.
|
||||
});// End alert box.
|
||||
};// End save contract.
|
||||
|
||||
// deleteContract is for remove contract.
|
||||
// Parameter :
|
||||
// contract(object) = contract object that presenting on the view.
|
||||
// $event(object) = position of control that user tap.
|
||||
$scope.deleteContract = function (contract, $event) {
|
||||
//$mdBottomSheet.hide() use for hide bottom sheet.
|
||||
$mdBottomSheet.hide();
|
||||
//mdDialog.show use for show alert box for Confirm to delete data.
|
||||
$mdDialog.show({
|
||||
controller: 'DialogController',
|
||||
templateUrl: 'confirm-dialog.html',
|
||||
targetEvent: $event,
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: "Confirm to remove data?",
|
||||
content: "Data will remove form SQLite.",
|
||||
ok: "Confirm",
|
||||
cancel: "Close"
|
||||
}
|
||||
}
|
||||
}).then(function () {
|
||||
// For confirm button to remove data.
|
||||
try {
|
||||
// Remove contract by calling ContractDB.remove(contract)service.
|
||||
if ($scope.contract.id == null) {
|
||||
$scope.contract.id = $scope.contractList[$scope.contractList.length - 1].id;
|
||||
}
|
||||
ContractDB.remove(contract);
|
||||
$ionicHistory.goBack();
|
||||
}// End remove contract.
|
||||
catch (e) {
|
||||
// Showing toast for unable to remove data.
|
||||
$mdToast.show({
|
||||
controller: 'toastController',
|
||||
templateUrl: 'toast.html',
|
||||
hideDelay: 800,
|
||||
position: 'top',
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: window.globalVariable.message.errorMessage
|
||||
}
|
||||
}
|
||||
});// End showing toast.
|
||||
}
|
||||
}, function () {
|
||||
// For cancel button to remove data.
|
||||
});// End alert box.
|
||||
};// End remove contract.
|
||||
|
||||
// validateRequiredField is for validate the required field.
|
||||
// Parameter :
|
||||
// form(object) = contract object that presenting on the view.
|
||||
$scope.validateRequiredField = function (form) {
|
||||
return !( (form.firstName.$error.required == undefined)
|
||||
&& (form.lastName.$error.required == undefined)
|
||||
&& (form.telephone.$error.required == undefined));
|
||||
};// End validate the required field.
|
||||
|
||||
// showListBottomSheet is for showing the bottom sheet.
|
||||
// Parameter :
|
||||
// $event(object) = position of control that user tap.
|
||||
// contractForm(object) = contract object that presenting on the view.
|
||||
$scope.showListBottomSheet = function ($event, contractForm) {
|
||||
$scope.disableSaveBtn = $scope.validateRequiredField(contractForm);
|
||||
$mdBottomSheet.show({
|
||||
templateUrl: 'contract-actions-template',
|
||||
targetEvent: $event,
|
||||
scope: $scope.$new(false),
|
||||
});
|
||||
};// End showing the bottom sheet.
|
||||
|
||||
$scope.initialForm();
|
||||
|
||||
});// End Contract Detail page Controller.
|
||||
|
||||
// Controller of Contract Setting Page.
|
||||
appControllers.controller('contractSettingCtrl', function ($scope,$ionicViewSwitcher,$state, $timeout, $stateParams, $mdDialog, $mdBottomSheet, $mdToast, $ionicHistory, ContractDB) {
|
||||
|
||||
// initialForm is the first activity in the controller.
|
||||
// It will initial all variable data and let the function works when page load.
|
||||
$scope.initialForm = function () {
|
||||
|
||||
//$scope.loading is the variable for loading progress.
|
||||
$scope.loading = true;
|
||||
|
||||
//$scope.contractsCount is the variable for get contracts count.
|
||||
$scope.contractsCount = [];
|
||||
|
||||
//To get contract count and stop loading progress.
|
||||
$timeout(function () {
|
||||
$scope.contractsCount = ContractDB.all();
|
||||
$scope.loading = false;
|
||||
}, 1000);
|
||||
|
||||
}; // End initialForm.
|
||||
|
||||
// clearAllData is for clear all contract data.
|
||||
// Parameter :
|
||||
// $event(object) = position of control that user tap.
|
||||
$scope.clearAllData = function ($event) {
|
||||
//$mdBottomSheet.hide() use for hide bottom sheet.
|
||||
$mdBottomSheet.hide();
|
||||
//mdDialog.show use for show alert box for Confirm to remove all data.
|
||||
$mdDialog.show({
|
||||
controller: 'DialogController',
|
||||
templateUrl: 'confirm-dialog.html',
|
||||
targetEvent: $event,
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: "Confirm to remove all data?",
|
||||
content: "All data will remove from SQLite.",
|
||||
ok: "Confirm",
|
||||
cancel: "Close"
|
||||
}
|
||||
}
|
||||
}).then(function () {
|
||||
// For confirm button to remove all data.
|
||||
try {
|
||||
// Remove all data by calling ContractDB.removeAll() service.
|
||||
ContractDB.removeAll();
|
||||
$scope.contractsCount = [];
|
||||
//Showing toast for remove data is success.
|
||||
$mdToast.show({
|
||||
controller: 'toastController',
|
||||
templateUrl: 'toast.html',
|
||||
hideDelay: 400,
|
||||
position: 'top',
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: "All data removed !"
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
catch (e) {
|
||||
// Showing toast for unable to remove data.
|
||||
$mdToast.show({
|
||||
controller: 'toastController',
|
||||
templateUrl: 'toast.html',
|
||||
hideDelay: 800,
|
||||
position: 'top',
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: window.globalVariable.message.errorMessage
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}, function () {
|
||||
// For cancel button to remove all data.
|
||||
});// End alert box.
|
||||
|
||||
};// End clear all data from sqlite
|
||||
|
||||
// navigateTo is for navigate to other page
|
||||
// by using targetPage to be the destination state.
|
||||
// Parameter :
|
||||
// stateNames = target state to go.
|
||||
// objectData = Object data will send to destination state.
|
||||
$scope.navigateTo = function (stateName,objectData) {
|
||||
if ($ionicHistory.currentStateName() != stateName) {
|
||||
$ionicHistory.nextViewOptions({
|
||||
disableAnimate: false,
|
||||
disableBack: true
|
||||
});
|
||||
|
||||
//Next view animate will display in back direction
|
||||
$ionicViewSwitcher.nextDirection('back');
|
||||
|
||||
$state.go(stateName, {
|
||||
isAnimated: objectData,
|
||||
});
|
||||
}
|
||||
}; // End of navigateTo.
|
||||
|
||||
$scope.initialForm();
|
||||
});// End Contract Setting page Controller.
|
||||
@@ -0,0 +1,176 @@
|
||||
// The factory for connecting with SQLite database
|
||||
//
|
||||
// Advantage of SQLite have no limit ability to store data.
|
||||
// It will create the sqlite file that store in the application.
|
||||
// Also can store more complex data such as relation between tables.
|
||||
//
|
||||
// For using sqlite you have to install $cordovaSQLite by running the following
|
||||
// command in your cmd.exe for windows or terminal for mac:
|
||||
// $ cd your_project_path
|
||||
// $ ionic plugin remove io.litehelpers.cordova.sqlite
|
||||
// $ ionic plugin add https://github.com/litehelpers/Cordova-sqlite-storage.git
|
||||
//
|
||||
// For install $cordovaSQLite plugin you also have to install this following plugin to get $cordovaSQLite work :
|
||||
// $ ionic plugin add com.ionic.keyboard
|
||||
//
|
||||
// Learn more about $cordovaSQLite :
|
||||
// http://ngcordova.com/docs/plugins/sqlite/
|
||||
//
|
||||
// The database table of contract will be created in modules.run() method in www/js/app.js file
|
||||
//
|
||||
// Variable name db come from initialSQLite() in in www/js/app.js file because we need to initial it before we use.
|
||||
//
|
||||
// object schema of contract data is:
|
||||
// [{
|
||||
// id: id of contract,
|
||||
// firstName: first name,
|
||||
// lastName: last name,
|
||||
// telephone: telephone
|
||||
// email: email,
|
||||
// createDate: contract created date,
|
||||
// age: age,
|
||||
// isEnable: to enable and unable status of contract
|
||||
// }]
|
||||
|
||||
//ContractDB service
|
||||
appServices.factory('ContractDB', function ($cordovaSQLite)
|
||||
{
|
||||
// contractList variable use to store data from sqlite query
|
||||
var contractList = [];
|
||||
|
||||
return {
|
||||
// Select all data from sqlite
|
||||
all: function ()
|
||||
{
|
||||
contractList = [];
|
||||
|
||||
// Variable for prepare query statement to select all contracts.
|
||||
var query = "SELECT * FROM contracts";
|
||||
|
||||
// Execute query statement from query variable.
|
||||
$cordovaSQLite.execute(db, query).then(function (res)
|
||||
{
|
||||
if (res.rows.length > 0)
|
||||
{
|
||||
for (var i = 0; i < res.rows.length; i++)
|
||||
{
|
||||
var dataItem = {
|
||||
id : res.rows.item(i).id ,
|
||||
firstName : res.rows.item(i).firstName ,
|
||||
lastName : res.rows.item(i).lastName ,
|
||||
telephone : res.rows.item(i).telephone ,
|
||||
email : res.rows.item(i).email ,
|
||||
createDate : res.rows.item(i).createDate ,
|
||||
age : res.rows.item(i).age ,
|
||||
isEnable : (res.rows.item(i).isEnable == "true")
|
||||
};
|
||||
contractList.push(dataItem);
|
||||
}
|
||||
}
|
||||
});
|
||||
return contractList;
|
||||
},// End select all data.
|
||||
|
||||
// To add data to sqlite.
|
||||
// It will receive newContract from controller then insert it into sqlite.
|
||||
add: function (newContract)
|
||||
{
|
||||
|
||||
// Variable for prepare query statement to insert contracts.
|
||||
var query = "INSERT INTO contracts ( " +
|
||||
" firstName , " +
|
||||
" lastName , " +
|
||||
" telephone , " +
|
||||
" email , " +
|
||||
" createDate , " +
|
||||
" age , " +
|
||||
" isEnable) " +
|
||||
" VALUES (?,?,?,?,?,?,?) ";
|
||||
// Execute query statement from query variable.
|
||||
$cordovaSQLite.execute(db, query,
|
||||
[newContract.firstName ,
|
||||
newContract.lastName ,
|
||||
newContract.telephone ,
|
||||
newContract.email ,
|
||||
newContract.createDate ,
|
||||
parseInt(newContract.age) ,
|
||||
newContract.isEnable ,
|
||||
]).then(function (res)
|
||||
{
|
||||
var dataItem = {
|
||||
id : res.insertId ,
|
||||
firstName : newContract.firstName ,
|
||||
lastName : newContract.lastName ,
|
||||
telephone : newContract.telephone ,
|
||||
email : newContract.email ,
|
||||
createDate : newContract.createDate ,
|
||||
age : newContract.age ,
|
||||
isEnable : newContract.isEnable
|
||||
};
|
||||
contractList.push(dataItem);
|
||||
});
|
||||
},// End add data to sqlite.
|
||||
|
||||
// To update data to sqlite.
|
||||
// It will receive contract from controller then update it into sqlite.
|
||||
update: function (contract)
|
||||
{
|
||||
// Variable for prepare query statement to update contracts by contracts id.
|
||||
var query = "UPDATE contracts SET " +
|
||||
" firstName = (?) , " +
|
||||
" lastName = (?) , " +
|
||||
" telephone = (?) , " +
|
||||
" email = (?) , " +
|
||||
" age = (?) , " +
|
||||
" isEnable = (?) " +
|
||||
" WHERE id = (?) " ;
|
||||
|
||||
// Execute query statement from query variable.
|
||||
$cordovaSQLite.execute(db, query, [
|
||||
contract.firstName ,
|
||||
contract.lastName ,
|
||||
contract.telephone ,
|
||||
contract.email ,
|
||||
parseInt(contract.age) ,
|
||||
contract.isEnable ,
|
||||
contract.id]
|
||||
).then(function (result)
|
||||
{
|
||||
for (var i = 0; i < contractList.length; i++)
|
||||
{
|
||||
if (contractList[i].id === parseInt(contract.id))
|
||||
{
|
||||
contractList[i] = contract;
|
||||
}
|
||||
}
|
||||
})
|
||||
},// End update data to sqlite.
|
||||
|
||||
// To remove data from sqlite.
|
||||
// It will receive contract from controller then use contract.id to remove contract from sqlite.
|
||||
remove: function (contract)
|
||||
{
|
||||
// Variable for prepare query statement to remove contracts by contracts id.
|
||||
var query = "DELETE FROM contracts WHERE id = (?)";
|
||||
|
||||
// Execute query statement from query variable.
|
||||
$cordovaSQLite.execute(db, query, [contract.id]).then(function (result)
|
||||
{
|
||||
contractList.splice(contractList.indexOf(contract), 1);
|
||||
})
|
||||
},// End remove data from sqlite.
|
||||
|
||||
// To remove all data from sqlite.
|
||||
removeAll: function ()
|
||||
{
|
||||
// Variable for prepare query statement to remove all contracts.
|
||||
var query = "DELETE FROM contracts";
|
||||
|
||||
// Execute query statement from query variable.
|
||||
$cordovaSQLite.execute(db, query).then(function (result)
|
||||
{
|
||||
contractList.length = 0;
|
||||
})
|
||||
},// End remove all data from sqlite.
|
||||
};
|
||||
}); //End ContractDB service.
|
||||
Reference in New Issue
Block a user