ionic-Material Design , Codecanyon
This commit is contained in:
Carsten Hilmer
@@ -0,0 +1,29 @@
|
||||
<!--View detail-->
|
||||
<!--View name : google AdMob-->
|
||||
<!--Controller name : googleAdmobCtrl-->
|
||||
<!--Controller path : www/templates/advertising-application/googleAdmob/js/controllers.js-->
|
||||
<!--State name : app.googleAdmob-->
|
||||
<!--URL : #app/googleAdmob-->
|
||||
|
||||
<ion-view title="Google AdMob">
|
||||
<!--google admob section-->
|
||||
<ion-content scroll="false">
|
||||
<!--icon section-->
|
||||
<div class="row">
|
||||
<div id="google-admob-icon" class="col">
|
||||
<i ng-class="{'google-admob-color' : isTurnOn}" class="ion-cash center-screen icon-google-admob"></i>
|
||||
</div>
|
||||
</div> <!--end icon section-->
|
||||
|
||||
<div class="row">
|
||||
<!--control section-->
|
||||
<div id="google-admob-control" class="col">
|
||||
<p>Google AdMob</p>
|
||||
<a ng-class="{'md-warn' : isTurnOn}" class="md-raised md-primary md-button md-default-theme"
|
||||
ng-click="adMob()">
|
||||
Turn {{isTurnOn == true ? 'OFF' : 'On'}}
|
||||
</a>
|
||||
</div> <!--end control section-->
|
||||
</div>
|
||||
</ion-content> <!--end google admob section-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,69 @@
|
||||
// For using adMob Pro you have to install AdMob pro plugin by running the following
|
||||
// command in your cmd.exe for windows or Terminal for mac:
|
||||
//
|
||||
// $ cd your_project_path
|
||||
// $ ionic platform remove ios
|
||||
// $ ionic platform remove android
|
||||
// $ ionic plugin remove cordova-plugin-admobpro
|
||||
// $ ionic plugin add cordova-plugin-admobpro
|
||||
// $ ionic platform add ios
|
||||
// $ ionic platform add android
|
||||
// $ ionic build ios
|
||||
// $ ionic build android
|
||||
//
|
||||
// Learn more about adMob Pro :
|
||||
// https://github.com/floatinghotpot/cordova-admob-pro#quick-start
|
||||
// Controller of google AdMob page.
|
||||
|
||||
appControllers.controller('googleAdmobCtrl', function ($scope) {
|
||||
|
||||
// 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.isTurnOn is AdMob status.
|
||||
$scope.isTurnOn = true;
|
||||
|
||||
//$scope.admob_key is from window.globalVariable.oAuth.adMob in www/js/app.js at globalVariable session.
|
||||
$scope.admob_key = window.globalVariable.adMob;
|
||||
|
||||
// Calling to initial AdMob.
|
||||
$scope.initAdMob();
|
||||
//If you start your application with google Admob feature.
|
||||
//You have to add timeout for 2 sec before run it.
|
||||
|
||||
};//End initialForm.
|
||||
|
||||
// initAdMob for initial AdMob
|
||||
$scope.initAdMob = function () {
|
||||
|
||||
if (! AdMob ) { alert( 'admob plugin not ready' ); return; }
|
||||
$scope.createAdMobBanner();
|
||||
|
||||
};//End initAdMob.
|
||||
|
||||
//createAdMobBanner is for create new adMob banner.
|
||||
$scope.createAdMobBanner = function () {
|
||||
AdMob.createBanner( {
|
||||
adId: $scope.admob_key,
|
||||
isTesting: false,
|
||||
position: AdMob.AD_POSITION.BOTTOM_CENTER // Set AdMob.AD_POSITION.TOP_CENTER for show banner at top section
|
||||
} );
|
||||
};//End createAdMobBanner
|
||||
|
||||
// Call adMob() for turn on and off AdMob.
|
||||
$scope.adMob = function () {
|
||||
// Turn off AdMob.
|
||||
if ($scope.isTurnOn) {
|
||||
AdMob.removeBanner();
|
||||
$scope.isTurnOn = false;
|
||||
}
|
||||
// Turn on AdMob.
|
||||
else {
|
||||
$scope.createAdMobBanner();
|
||||
$scope.isTurnOn = true;
|
||||
}
|
||||
};//End adMob.
|
||||
|
||||
$scope.initialForm();
|
||||
});// End of google Admob Controller.
|
||||
@@ -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.
|
||||
@@ -0,0 +1,78 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Device Information-->
|
||||
<!--Controller name : deviceInformationCtrl-->
|
||||
<!--Controller path : www/templates/hardware-connect/device-information/js/controllers.js-->
|
||||
<!--State name : app.deviceInformation-->
|
||||
<!--URL : #app/deviceInformation-->
|
||||
|
||||
<ion-view title="">
|
||||
|
||||
<ion-content scroll="false">
|
||||
<!--toolbar section-->
|
||||
<md-toolbar class="bar-subheader md-tall md-primary toolbar-medium toolbar-in-content">
|
||||
<div>
|
||||
<h1>
|
||||
<i class="fa fa-info-circle"></i>
|
||||
</h1>
|
||||
|
||||
<h3> Device Information </h3>
|
||||
</div>
|
||||
</md-toolbar> <!--end toolbar section-->
|
||||
|
||||
<!--device information section-->
|
||||
<!--lise section-->
|
||||
<md-list id="device-information-content" class="fade-in">
|
||||
<md-list-item class="row">
|
||||
<div class="col-50 title">
|
||||
Platform :
|
||||
</div>
|
||||
<div class="col-50">
|
||||
{{deviceInformation.platform}}
|
||||
</div>
|
||||
</md-list-item>
|
||||
<md-divider></md-divider>
|
||||
<md-list-item class="row">
|
||||
<div class="col-50 title">
|
||||
Model :
|
||||
</div>
|
||||
<div class="col-50">
|
||||
{{deviceInformation.model}}
|
||||
</div>
|
||||
</md-list-item>
|
||||
<md-divider></md-divider>
|
||||
<md-list-item class="row">
|
||||
<div class="col-50 title">
|
||||
Version :
|
||||
</div>
|
||||
<div class="col-50">
|
||||
{{deviceInformation.version}}
|
||||
</div>
|
||||
</md-list-item>
|
||||
<md-divider></md-divider>
|
||||
<md-list-item class="row">
|
||||
<div class="col-50 title">
|
||||
Manufacturer :
|
||||
</div>
|
||||
<div class="col-50">
|
||||
{{deviceInformation.manufacturer}}
|
||||
</div>
|
||||
</md-list-item>
|
||||
<md-divider></md-divider>
|
||||
<md-list-item>
|
||||
<div class="col">
|
||||
{{deviceInformation.uuid}}
|
||||
</div>
|
||||
</md-list-item>
|
||||
<md-divider></md-divider>
|
||||
</md-list>
|
||||
<!--end lise section-->
|
||||
<!--end device information section-->
|
||||
</ion-content>
|
||||
|
||||
<!--loading progress-->
|
||||
<div id="device-information-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,39 @@
|
||||
// Controller of device information page.
|
||||
// It use ionic.Platform.device() for getting device information. It will return object of current device.
|
||||
// Learn more about ionic.Platform.device():
|
||||
// http://ionicframework.com/docs/api/utility/ionic.Platform/
|
||||
|
||||
appControllers.controller('deviceInformationCtrl', function ($scope, $timeout) {
|
||||
|
||||
// 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.deviceInformation is store device information data.
|
||||
$scope.deviceInformation = {};
|
||||
|
||||
// Loading progress.
|
||||
$timeout(function () {
|
||||
if ($scope.isAndroid) {
|
||||
jQuery('#device-information-loading-progress').show();
|
||||
}
|
||||
else {
|
||||
jQuery('#device-information-loading-progress').fadeIn(700);
|
||||
}
|
||||
}, 400);
|
||||
|
||||
$timeout(function () {
|
||||
$scope.deviceInformation = ionic.Platform.device();
|
||||
jQuery('#device-information-loading-progress').hide();
|
||||
jQuery('#device-information-content').fadeIn();
|
||||
}, 1000);
|
||||
}; // End initialForm.
|
||||
|
||||
// getDeviceInformation is for get device information by calling ionic Platform device.
|
||||
$scope.getDeviceInformation = function () {
|
||||
$scope.deviceInformation = ionic.Platform.device();
|
||||
}; // End getDeviceInformation.
|
||||
|
||||
$scope.initialForm();
|
||||
|
||||
});// End of device information Controller.
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Device Flashlight-->
|
||||
<!--Controller name : flashLightCtrl-->
|
||||
<!--Controller path : www/templates/hardware-connect/flash-light/js/controllers.js-->
|
||||
<!--State name : app.flashLight-->
|
||||
<!--URL : #app/flashLight-->
|
||||
|
||||
<ion-view title="Flash Light">
|
||||
<!--flash light section-->
|
||||
<!--flash light icon section-->
|
||||
<ion-content id="flash-light-content" scroll="false">
|
||||
<div class="row">
|
||||
<div id="flash-light-icon" class="col">
|
||||
<i ng-class="{'flash-light-color' : isTurnOn}" class="fa fa-diamond center-screen icon-flash-light"></i>
|
||||
</div>
|
||||
</div><!--end flash light icon section-->
|
||||
|
||||
<div class="row">
|
||||
<!--flash light control section-->
|
||||
<div id="flash-light-control" class="col">
|
||||
<p>Devise Flash Light</p>
|
||||
<a ng-class="{'md-warn' : isTurnOn}" class="md-raised md-primary md-button md-default-theme"
|
||||
ng-click="flashLight()">
|
||||
Turn {{isTurnOn == true ? 'OFF' : 'On'}}
|
||||
</a>
|
||||
</div><!--end flash light control section-->
|
||||
</div>
|
||||
</ion-content><!--end flash light section-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,52 @@
|
||||
// For using flashlight you have to install $cordovaFlashlight by running the following
|
||||
// command in your cmd.exe for windows or terminal for mac:
|
||||
// $ cd your_project_path
|
||||
// $ ionic plugin remove nl.x-services.plugins.flashlight
|
||||
// $ ionic plugin add https://github.com/EddyVerbruggen/Flashlight-PhoneGap-Plugin.git
|
||||
//
|
||||
// Learn more about $cordovaFlashlight :
|
||||
// http://ngcordova.com/docs/plugins/flashlight/
|
||||
//
|
||||
// Controller of Flashlight page.
|
||||
appControllers.controller('flashLightCtrl', function ($scope, $cordovaFlashlight, $timeout) {
|
||||
|
||||
// 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.isTurnOn is Flashlight status.
|
||||
$scope.isTurnOn = false;
|
||||
|
||||
//$scope.deviceInformation is getting device platform.
|
||||
$scope.deviceInformation = ionic.Platform.device();
|
||||
//If you start your application with flash Light feature.
|
||||
//You have to add timeout for 2 sec before run it.
|
||||
}; // End initialForm.
|
||||
|
||||
// flashLight for turn on and off flashLight.
|
||||
$scope.flashLight = function () {
|
||||
// turn on flashLight
|
||||
if ($scope.isTurnOn == false) {
|
||||
// turn on flashLight for Android
|
||||
if ($scope.deviceInformation.platform == "Android") {
|
||||
$scope.isTurnOn = true;
|
||||
$timeout(function () {
|
||||
$cordovaFlashlight.switchOn();
|
||||
}, 50);
|
||||
}
|
||||
// turn on flashLight for IOS
|
||||
else {
|
||||
$scope.isTurnOn = true;
|
||||
$cordovaFlashlight.switchOn();
|
||||
}
|
||||
} // End turn on flashLight.
|
||||
|
||||
// turn off flashLight.
|
||||
else {
|
||||
$scope.isTurnOn = false;
|
||||
$cordovaFlashlight.switchOff();
|
||||
}// End turn off flashLight.
|
||||
};// End flashLight.
|
||||
|
||||
$scope.initialForm();
|
||||
|
||||
});// End of Flashlight Controller.
|
||||
@@ -0,0 +1,61 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Device Image Picker-->
|
||||
<!--Controller name : imagePickerCtrl-->
|
||||
<!--Controller path : www/templates/hardware-connect/image-picker/js/controllers.js-->
|
||||
<!--State name : app.imagePicker-->
|
||||
<!--URL : #app/imagePicker-->
|
||||
|
||||
<ion-view view-title="">
|
||||
<!--toolbar section-->
|
||||
<md-toolbar class="bar-subheader md-tall md-primary toolbar-medium">
|
||||
<div>
|
||||
<h1>Image Picker</h1>
|
||||
|
||||
<h2>Device Image Gallery</h2>
|
||||
</div>
|
||||
<a class="md-button md-accent md-fab fab-toolbar-medium"
|
||||
ng-click="showListBottomSheet($event)"
|
||||
aria-label="showListBottomSheet">
|
||||
<i class="fa fa-picture-o"></i>
|
||||
</a>
|
||||
</md-toolbar> <!--end toolbar section-->
|
||||
|
||||
<!--image picker section-->
|
||||
<ion-content id="image-picker-content">
|
||||
<!--list section-->
|
||||
<md-list>
|
||||
<md-card ng-repeat="image in imageList">
|
||||
<img ng-src="{{image}}" class="md-card-image" alt="image{{$index+1}}">
|
||||
<md-card-content>
|
||||
<h2 class="md-title">Image {{$index+1}}</h2>
|
||||
</md-card-content>
|
||||
</md-card>
|
||||
</md-list> <!--end list section-->
|
||||
</ion-content><!--end image picker section-->
|
||||
|
||||
<!--angular template section-->
|
||||
<script type="text/ng-template" id="image-picker-actions-template">
|
||||
<md-bottom-sheet class="md-list md-has-header">
|
||||
<h1 class="md-bottom-sheet-header">Image Picker Actions</h1>
|
||||
<!--list section-->
|
||||
<md-list>
|
||||
<md-list-item>
|
||||
<a class="md-default-theme md-bottom-sheet-list-item"
|
||||
ng-click="selectImage(1)">
|
||||
<i class="ion-image"></i>
|
||||
<span>Single Select</span>
|
||||
</a>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<a class="md-default-theme md-bottom-sheet-list-item"
|
||||
ng-click="selectImage(9999)">
|
||||
<i class="ion-images"></i>
|
||||
<span>Multiple Select</span>
|
||||
</a>
|
||||
</md-list-item>
|
||||
</md-list><!--end list section-->
|
||||
</md-bottom-sheet>
|
||||
</script><!--end angular template section-->
|
||||
|
||||
</ion-view>
|
||||
@@ -0,0 +1,61 @@
|
||||
// For using imagePicker you have to install $cordovaImagePicker by running the following
|
||||
// command in your cmd.exe for windows or terminal for mac:
|
||||
// $ cd your_project_path
|
||||
// $ ionic plugin remove com.synconset.imagepicker
|
||||
// $ ionic plugin add https://github.com/wymsee/cordova-imagePicker.git
|
||||
//
|
||||
// Learn more about $cordovaImagePicker :
|
||||
// http://ngcordova.com/docs/plugins/imagePicker/
|
||||
//
|
||||
// Controller of image picker page.
|
||||
appControllers.controller('imagePickerCtrl', function ($scope, $mdBottomSheet, $cordovaImagePicker) {
|
||||
|
||||
// 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.imageList is for store image data.
|
||||
$scope.imageList = [];
|
||||
};// End initialForm.
|
||||
|
||||
// selectImage is for select image from mobile gallery
|
||||
// Parameter :
|
||||
// limit = limit number that can select images.
|
||||
$scope.selectImage = function (limit) {
|
||||
//hide BottomSheet.
|
||||
$mdBottomSheet.hide();
|
||||
// Set options for select image from mobile gallery.
|
||||
var options = {
|
||||
maximumImagesCount: limit,
|
||||
width: 300,
|
||||
height: 300,
|
||||
quality: 100
|
||||
}; // End Set options.
|
||||
|
||||
// select image by calling $cordovaImagePicker.getPictures(options)
|
||||
// Parameter :
|
||||
// options = options of select image.
|
||||
$cordovaImagePicker.getPictures(options)
|
||||
|
||||
.then(function (results) {
|
||||
// store image data to imageList.
|
||||
$scope.imageList = [];
|
||||
for (var i = 0; i < results.length; i++) {
|
||||
$scope.imageList.push(results[i]);
|
||||
}
|
||||
}, function (error) {
|
||||
console.log(error);
|
||||
});
|
||||
};// End selectImage.
|
||||
|
||||
// showListBottomSheet for show BottomSheet.
|
||||
$scope.showListBottomSheet = function ($event) {
|
||||
$mdBottomSheet.show({
|
||||
templateUrl: 'image-picker-actions-template',
|
||||
targetEvent: $event,
|
||||
scope: $scope.$new(false),
|
||||
});
|
||||
}; // End showListBottomSheet.
|
||||
|
||||
$scope.initialForm();
|
||||
|
||||
});// End of image picker Controller.
|
||||
@@ -0,0 +1,132 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Device Mobile Contract Detail-->
|
||||
<!--Controller name : mobileContractDetailCtrl-->
|
||||
<!--Controller path : www/templates/hardware-connect/mobile-contract/js/controllers.js-->
|
||||
<!--State name : app.mobileContractDetail-->
|
||||
<!--URL : #app/mobileContractDetail-->
|
||||
|
||||
<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-->
|
||||
|
||||
<form name="noteForm">
|
||||
<ion-content class="header-in-content">
|
||||
<!--toolbar section-->
|
||||
<md-toolbar class="bar-subheader md-tall md-primary toolbar-medium toolbar-in-content">
|
||||
<div>
|
||||
<h1>
|
||||
<i class="ion-android-person"></i>
|
||||
</h1>
|
||||
|
||||
<h3> Contract Detail </h3>
|
||||
</div>
|
||||
<a class="md-button md-accent md-fab fab-toolbar-medium"
|
||||
ng-click="showListBottomSheet($event,contract)"
|
||||
aria-label="showListBottomSheet">
|
||||
<i class="ion-android-star"></i>
|
||||
</a>
|
||||
</md-toolbar> <!--end toolbar section-->
|
||||
|
||||
<!--mobile contract detail section-->
|
||||
<div id="mobile-contract-detail-content">
|
||||
<!--input section-->
|
||||
<md-input-container md-no-float>
|
||||
<i class="ion-android-person"></i>
|
||||
<input ng-model="contract.name.honorificPrefix" name="firstName" placeholder="Name Prefix">
|
||||
</md-input-container>
|
||||
|
||||
<md-input-container md-no-float>
|
||||
<i class="ion-android-person"></i>
|
||||
<input ng-model="contract.name.givenName" name="firstName" required
|
||||
placeholder="* First Name (required)">
|
||||
</md-input-container>
|
||||
|
||||
<md-input-container md-no-float>
|
||||
<i class="ion-android-person"></i>
|
||||
<input ng-model="contract.name.middleName" name="firstName" placeholder="Middle Name">
|
||||
</md-input-container>
|
||||
|
||||
<md-input-container md-no-float>
|
||||
<i class="ion-android-person"></i>
|
||||
<input ng-model="contract.name.familyName" name="firstName" placeholder="Last Name">
|
||||
</md-input-container>
|
||||
|
||||
<md-input-container md-no-float>
|
||||
<i class="ion-android-person"></i>
|
||||
<input ng-model="contract.name.honorificSuffix" name="firstName" placeholder="Name Suffix">
|
||||
</md-input-container>
|
||||
|
||||
<md-input-container ng-repeat="number in contract.phoneNumbers" md-no-float>
|
||||
<i class="ion-android-phone-portrait"></i>
|
||||
|
||||
<input ng-model="number.value" name="telephone" class="input-tel"
|
||||
placeholder="* Telephone" type="tel">
|
||||
|
||||
<i ng-show="number.value.length > 0"
|
||||
ng-click="callTo(number.value)"
|
||||
class="ion-android-call tel"></i>
|
||||
|
||||
<i ng-show="number.value.length > 0"
|
||||
ng-click="sentSms(number.value)"
|
||||
class="ion-android-textsms message"></i>
|
||||
|
||||
</md-input-container>
|
||||
|
||||
<md-input-container ng-repeat="email in contract.emails" md-no-float>
|
||||
<i class="ion-android-mail"></i>
|
||||
|
||||
<input ng-model="email.value" class="input-mail" name="email" placeholder="Email">
|
||||
|
||||
<i ng-show="email.value.length > 0"
|
||||
ng-click="sentEmail(email.value)"
|
||||
class="ion-android-send mail"></i>
|
||||
|
||||
</md-input-container>
|
||||
<!--end input section-->
|
||||
</div> <!--end mobile contract detail section-->
|
||||
</ion-content>
|
||||
</form>
|
||||
|
||||
<!--angular template section-->
|
||||
<script type="text/ng-template" id="mobile-contract-actions-template.html">
|
||||
<md-bottom-sheet class="md-list md-has-header">
|
||||
<h1 class="md-bottom-sheet-header">Contract Actions</h1>
|
||||
<!--list section-->
|
||||
<md-list>
|
||||
<md-list-item>
|
||||
<a class="md-default-theme md-bottom-sheet-list-item" ng-click="addNumber()">
|
||||
<i class="ion-android-call"></i>
|
||||
<span>New Number</span>
|
||||
</a>
|
||||
</md-list-item>
|
||||
<md-list-item>
|
||||
<a class="md-default-theme md-bottom-sheet-list-item" ng-click="addMail()">
|
||||
<i class="ion-android-mail"></i>
|
||||
<span>New Email</span>
|
||||
</a>
|
||||
</md-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</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</span>
|
||||
</a>
|
||||
</md-list-item>
|
||||
</md-list><!--end list section-->
|
||||
|
||||
</md-bottom-sheet>
|
||||
</script><!--end angular template section-->
|
||||
|
||||
</ion-view>
|
||||
@@ -0,0 +1,81 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Device Mobile Contract List-->
|
||||
<!--Controller name : mobileContractListCtrl-->
|
||||
<!--Controller path : www/templates/hardware-connect/mobile-contract/js/controllers.js-->
|
||||
<!--State name : app.mobileContractList-->
|
||||
<!--URL : #app/mobileContractList-->
|
||||
|
||||
<ion-view view-title="">
|
||||
|
||||
<!--toolbar section-->
|
||||
<md-toolbar class="bar-subheader md-tall md-primary toolbar-medium">
|
||||
<div>
|
||||
<h1>Mobile Contract</h1>
|
||||
|
||||
<md-input-container md-no-float="">
|
||||
<input ng-model="filterText" id="name_2" placeholder="Search for contacts.">
|
||||
</md-input-container>
|
||||
|
||||
</div>
|
||||
<a class="md-button md-accent md-fab fab-toolbar-medium"
|
||||
ng-click="navigateTo('app.mobileContractDetail')"
|
||||
aria-label="Add">
|
||||
<i class="icon ion-plus"></i>
|
||||
</a>
|
||||
</md-toolbar> <!--end toolbar section-->
|
||||
|
||||
<!--mobile contract list section-->
|
||||
<ion-content id="mobile-contract-list-content">
|
||||
<!--list section-->
|
||||
<md-list class="ng-hide" ng-show="!loading">
|
||||
|
||||
<md-list-item class="md-list-item-default" item-height="46px" item-width="100%"
|
||||
collection-repeat="contract in contracts | filter: filterText | orderBy: 'firstName'">
|
||||
|
||||
<span>
|
||||
<i class="ion-android-person"></i>
|
||||
</span>
|
||||
|
||||
<p>
|
||||
{{contract.name.formatted}}
|
||||
</p>
|
||||
|
||||
<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 ng-repeat="number in contract.phoneNumbers">
|
||||
<a class="md-button md-default-theme" ng-click="callTo(number.value)">
|
||||
<span class="menu-item-button" content="telephone=no">
|
||||
<i class="ion-android-call"></i> {{number.value}}
|
||||
</span>
|
||||
</a>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<a class="md-button md-default-theme"
|
||||
ng-click="navigateTo('app.mobileContractDetail',contract)">
|
||||
<span class="menu-item-button">View</span>
|
||||
</a>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<a class="md-button md-default-theme" ng-click="deleteContract(contract,$event)">
|
||||
<span class="menu-item-button">Remove</span>
|
||||
</a>
|
||||
</md-menu-item>
|
||||
</md-menu-content>
|
||||
</md-menu>
|
||||
|
||||
</md-list-item>
|
||||
|
||||
</md-list><!--end list section-->
|
||||
|
||||
</ion-content><!--end mobile contract list section-->
|
||||
|
||||
<!--loading progress-->
|
||||
<div id="mobile-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,486 @@
|
||||
// For get mobile contract you have to install $cordovaContacts by running the following
|
||||
// command in your cmd.exe for windows or terminal for mac:
|
||||
// $ cd your_project_path
|
||||
// $ ionic plugin remove cordova-plugin-contacts
|
||||
// $ ionic plugin add cordova-plugin-contacts
|
||||
//
|
||||
// Learn more about $cordovaContacts :
|
||||
// http://ngcordova.com/docs/plugins/contacts/
|
||||
//
|
||||
// For sent email you have to install $cordovaSocialSharing by running the following
|
||||
// command in your cmd.exe for windows or terminal for mac:
|
||||
// $ cd your_project_path
|
||||
// $ ionic plugin remove nl.x-services.plugins.socialsharing
|
||||
// $ ionic plugin add https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin.git
|
||||
//
|
||||
// Learn more about $cordovaSocialSharing :
|
||||
// http://ngcordova.com/docs/plugins/socialSharing/
|
||||
//
|
||||
// For sent message you have to install $cordovaSMS by running the following
|
||||
// command in your cmd.exe for windows or terminal for mac:
|
||||
// $ cd your_project_path
|
||||
// $ ionic plugin remove com.cordova.plugins.sms
|
||||
// $ ionic plugin add https://github.com/cordova-sms/cordova-sms-plugin.git
|
||||
//
|
||||
// Learn more about $cordovaSMS :
|
||||
// http://ngcordova.com/docs/plugins/sms/
|
||||
//
|
||||
// For using mobile calling you must go to yourProjectPath/config.xml
|
||||
// and put this following code in the access area.
|
||||
// <access origin="tel:*" launch-external="yes"/>
|
||||
//
|
||||
// Controller of contracts list page.
|
||||
appControllers.controller('mobileContractListCtrl', function ($scope, $filter, $mdDialog, $timeout, $mdToast, $ionicModal, $state, $mdBottomSheet, $cordovaContacts) {
|
||||
|
||||
// This function 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 for loading progress.
|
||||
$scope.loading = true;
|
||||
|
||||
// $scope.contracts is store contracts data.
|
||||
$scope.contracts = [];
|
||||
|
||||
// $scope.filterText is the variable that use for searching.
|
||||
$scope.filterText = "";
|
||||
|
||||
// To hide $mdBottomSheet
|
||||
$mdBottomSheet.cancel();
|
||||
// To hide $mdDialog
|
||||
$mdDialog.cancel();
|
||||
|
||||
// The function for show/hide loading progress.
|
||||
$timeout(function () {
|
||||
if ($scope.isAndroid) {
|
||||
jQuery('#mobile-contract-list-loading-progress').show();
|
||||
}
|
||||
else {
|
||||
jQuery('#mobile-contract-list-loading-progress').fadeIn(700);
|
||||
}
|
||||
}, 400);
|
||||
|
||||
$timeout(function () {
|
||||
// To get all contracts.
|
||||
$scope.getContractList(true);
|
||||
}, 2000);
|
||||
}; // End initialForm.
|
||||
|
||||
// callTo is for using mobile calling.
|
||||
// Parameter :
|
||||
// number = number that going to call.
|
||||
$scope.callTo = function (number) {
|
||||
window.open("tel:" + number);
|
||||
}// End callTo.
|
||||
|
||||
// getContractList is for get all contracts from mobile.
|
||||
// Parameter :
|
||||
// IsInit(bool) = for stop loading progress.
|
||||
$scope.getContractList = function (isInit) {
|
||||
|
||||
// options for get contracts.
|
||||
var options = {multiple: true};
|
||||
|
||||
// Calling $cordovaContacts.find to get all contracts.
|
||||
// Parameter :
|
||||
// options = options for get contracts.
|
||||
$cordovaContacts.find(options).then(
|
||||
function (contractList) {
|
||||
// Success retrieve data from mobile contract.
|
||||
// It will return all contracts then store it in to $scope.contracts
|
||||
$scope.contracts = contractList;
|
||||
|
||||
// To stop loading progress.
|
||||
if (isInit) {
|
||||
$timeout(function () {
|
||||
$scope.loading = false;
|
||||
jQuery('#mobile-contract-list-loading-progress').hide();
|
||||
}, 2000);
|
||||
}
|
||||
},
|
||||
function () {
|
||||
// Error retrieve data from mobile contract.
|
||||
console.log("mobile contract is error");
|
||||
});
|
||||
}; // End getContractList.
|
||||
|
||||
// deleteContract is for delete contract.
|
||||
// contract(object) = contract object that user want to delete.
|
||||
// $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 remove contract.
|
||||
$mdDialog.show({
|
||||
controller: 'DialogController',
|
||||
templateUrl: 'confirm-dialog.html',
|
||||
targetEvent: $event,
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: "Confirm to remove contract?",
|
||||
content: "Data will remove from Mobile Contract.",
|
||||
ok: "Confirm",
|
||||
cancel: "Close"
|
||||
}
|
||||
}
|
||||
}).then(function () {
|
||||
// For confirm button to remove all contract.
|
||||
// remove contract by calling $cordovaContacts.remove.
|
||||
try {
|
||||
$cordovaContacts.remove(contract).then(function (result) {
|
||||
}, function (error) {
|
||||
console.log(error);
|
||||
});
|
||||
|
||||
// set filterText to empty for searching contract.
|
||||
$scope.filterText = "";
|
||||
|
||||
// Refresh contract page.
|
||||
$scope.getContractList(false);
|
||||
|
||||
// Showing toast for Contract Removed !.
|
||||
$mdToast.show({
|
||||
controller: 'toastController',
|
||||
templateUrl: 'toast.html',
|
||||
hideDelay: 400,
|
||||
position: 'top',
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: "Contract Removed !"
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
catch (e) {
|
||||
// remove error.
|
||||
// Showing toast for unable to remove contract.
|
||||
$mdToast.show({
|
||||
controller: 'toastController',
|
||||
templateUrl: 'toast.html',
|
||||
hideDelay: 800,
|
||||
position: 'top',
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: window.globalVariable.message.errorMessage
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
, function () {
|
||||
// For cancel button to remove data.
|
||||
});
|
||||
};// End deleteContract.
|
||||
|
||||
// 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, {
|
||||
contractDetail: objectData,
|
||||
actionDelete: (objectData == null ? false : true)
|
||||
});
|
||||
}; // End navigateTo.
|
||||
|
||||
$scope.initialForm();
|
||||
|
||||
});// End of contract list controller.
|
||||
|
||||
// Controller of contracts detail page.
|
||||
appControllers.controller('mobileContractDetailCtrl', function ($mdBottomSheet, $timeout, $mdToast, $scope, $stateParams
|
||||
, $filter, $mdDialog, $ionicHistory, $cordovaContacts, $cordovaSms, $cordovaSocialSharing) {
|
||||
|
||||
// This function 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.actionDelete is the variable for allow or not allow to delete data.
|
||||
// It will allow to delete data when have data in the mobile contract.
|
||||
// $stateParams.actionDelete(bool) = status that pass from contract list page.
|
||||
$scope.actionDelete = $stateParams.actionDelete;
|
||||
|
||||
//$scope.contract is the variable that store contract data.
|
||||
// $stateParams.contractDetail = contract data that pass from contract list page.
|
||||
$scope.contract = $stateParams.contractDetail;
|
||||
|
||||
// For initial temp contract data in case of add new contract.
|
||||
if ($scope.actionDelete == false) {
|
||||
$scope.contract = {
|
||||
"name": {
|
||||
givenName: ""
|
||||
},
|
||||
"phoneNumbers": [{
|
||||
id: 0,
|
||||
pref: false,
|
||||
type: "mobile",
|
||||
value: ""
|
||||
}],
|
||||
"emails": [{
|
||||
id: 0,
|
||||
pref: false,
|
||||
type: "home",
|
||||
value: ""
|
||||
}]
|
||||
};
|
||||
}// End initial temp contract data.
|
||||
|
||||
// If contract don't have phone number it will create a blank array for text box
|
||||
// for user to input there number.
|
||||
if ($scope.contract.phoneNumbers == null) {
|
||||
$scope.addNumber();
|
||||
}
|
||||
|
||||
// If contract don't have email it will create a blank array of text box
|
||||
// for user to input there email.
|
||||
if ($scope.contract.emails == null) {
|
||||
$scope.addMail();
|
||||
}
|
||||
}; // End initialForm.
|
||||
|
||||
// addNumber for create a blank array of text box for user to input there number.
|
||||
$scope.addNumber = function () {
|
||||
|
||||
if ($scope.contract.phoneNumbers == null) {
|
||||
$scope.contract.phoneNumbers = [{value: ""}];
|
||||
}
|
||||
else {
|
||||
$scope.contract.phoneNumbers.push({value: ""});
|
||||
}
|
||||
$timeout(function () {
|
||||
// To hide $mdBottomSheet
|
||||
$mdBottomSheet.hide();
|
||||
// To hide $mdDialog
|
||||
$mdDialog.hide();
|
||||
|
||||
}, 400);
|
||||
|
||||
};// End addNumber.
|
||||
|
||||
// addMail for create a blank array of text box for user to input there email.
|
||||
$scope.addMail = function () {
|
||||
|
||||
if ($scope.contract.emails == null) {
|
||||
$scope.contract.emails = [{value: ""}];
|
||||
}
|
||||
else {
|
||||
$scope.contract.emails.push({value: ""});
|
||||
}
|
||||
|
||||
$timeout(function () {
|
||||
// To hide $mdBottomSheet
|
||||
$mdBottomSheet.hide();
|
||||
// To hide $mdDialog
|
||||
$mdDialog.hide();
|
||||
|
||||
}, 400);
|
||||
};// End addMail.
|
||||
|
||||
// saveContract for saving contract
|
||||
// Parameter :
|
||||
// contract(object) = contract object that presenting on the view.
|
||||
// $event(object) = position of control that user tap.
|
||||
$scope.saveContract = function (contract, $event) {
|
||||
// To hide $mdBottomSheet
|
||||
$mdBottomSheet.hide();
|
||||
// tempPhoneNumbers is array of temporary phone number.
|
||||
var tempPhoneNumbers = [];
|
||||
|
||||
// Create new object by cloning object that present on the view.
|
||||
// For prepare data to save.
|
||||
angular.copy($scope.contract.phoneNumbers, tempPhoneNumbers);
|
||||
|
||||
// To packing array of temporary phone number to save to contract.
|
||||
for (var index = (tempPhoneNumbers.length - 1); index > -1; index--) {
|
||||
|
||||
if (tempPhoneNumbers[index].value == "") {
|
||||
$scope.contract.phoneNumbers.splice(index, 1);
|
||||
}
|
||||
}
|
||||
// tempMail is temporary array of email.
|
||||
var tempMail = [];
|
||||
|
||||
// Create new object by cloning object that present on the view.
|
||||
// For prepare data to save.
|
||||
angular.copy($scope.contract.emails, tempMail);
|
||||
|
||||
// To packing array of temporary email to save to contract.
|
||||
for (var index = (tempMail.length - 1); index > -1; index--) {
|
||||
|
||||
if (tempMail[index].value == "") {
|
||||
$scope.contract.emails.splice(index, 1);
|
||||
}
|
||||
}
|
||||
|
||||
//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 contract?",
|
||||
content: "Data will save to mobile contract.",
|
||||
ok: "Confirm",
|
||||
cancel: "Close"
|
||||
}
|
||||
}
|
||||
}).then(function () {
|
||||
// For confirm button to save data.
|
||||
try {
|
||||
// Save contract to mobile contract by calling $cordovaContacts.save(contract)
|
||||
$cordovaContacts.save(contract).then(function (result) {
|
||||
}, function (error) {
|
||||
console.log(error);
|
||||
});
|
||||
// Showing toast for save data is success.
|
||||
$mdToast.show({
|
||||
controller: 'toastController',
|
||||
templateUrl: 'toast.html',
|
||||
hideDelay: 400,
|
||||
position: 'top',
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: "Contract Saved !"
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// After save success it will navigate back to contract list page.
|
||||
$timeout(function () {
|
||||
$ionicHistory.goBack();
|
||||
}, 800);
|
||||
}
|
||||
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
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}, function () {
|
||||
// For cancel button to save data.
|
||||
});// End alert box.
|
||||
};// End saveContract.
|
||||
|
||||
// deleteContract for delete 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 remove contract.
|
||||
$mdDialog.show({
|
||||
controller: 'DialogController',
|
||||
templateUrl: 'confirm-dialog.html',
|
||||
targetEvent: $event,
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: "Confirm to remove contract?",
|
||||
content: "Data will remove from Mobile Contract.",
|
||||
ok: "Confirm",
|
||||
cancel: "Close"
|
||||
}
|
||||
}
|
||||
}).then(function () {
|
||||
// For confirm button to remove contract.
|
||||
try {
|
||||
// remove contract by calling $cordovaContacts.remove.
|
||||
$cordovaContacts.remove(contract).then(function (result) {
|
||||
}, function (error) {
|
||||
console.log(error);
|
||||
});
|
||||
// After remove success it will navigate back to contract list.
|
||||
$ionicHistory.goBack();
|
||||
} 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 deleteContract.
|
||||
|
||||
// validateRequiredField is for validate the required field.
|
||||
// Parameter :
|
||||
// contractForm(object) = contract object that presenting on the view.
|
||||
$scope.validateRequiredField = function (contractForm) {
|
||||
|
||||
return ((typeof contractForm.name.givenName) == "undefined" ) || (contractForm.name.givenName.length == 0);
|
||||
};// 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: 'mobile-contract-actions-template.html',
|
||||
targetEvent: $event,
|
||||
scope: $scope.$new(false),
|
||||
});
|
||||
};// End showing the bottom sheet.
|
||||
|
||||
// callTo is for using mobile calling.
|
||||
// Parameter :
|
||||
// number = number that going to call
|
||||
$scope.callTo = function (number) {
|
||||
window.open("tel:" + number);
|
||||
}// End callTo.
|
||||
|
||||
// sentEmail is for send email by calling $cordovaSocialSharing.
|
||||
// Parameter :
|
||||
// email = email of receiver.
|
||||
$scope.sentEmail = function (email) {
|
||||
$cordovaSocialSharing.shareViaEmail(" ", " ", email, "", "", "");
|
||||
// format of sent email by using $cordovaSocialSharing is :
|
||||
//$cordovaSocialSharing.shareViaEmail(message, subject, toArr, ccArr, bccArr,file)
|
||||
// toArr, ccArr and bccArr must be an array, file can be either null, string or array.
|
||||
}; // End sentEmail.
|
||||
|
||||
// sentSms is for send message by calling $cordovaSms.
|
||||
// Parameter :
|
||||
// phoneNumber = number of sending message
|
||||
$scope.sentSms = function (numbers) {
|
||||
//config options to sent message
|
||||
var options = {
|
||||
replaceLineBreaks: false, // true to replace \n by a new line, false by default.
|
||||
android: {
|
||||
intent: 'INTENT' // send SMS with the native android SMS messaging
|
||||
//intent: '' // send SMS without open any other app.
|
||||
}
|
||||
};
|
||||
// calling $cordovaSms to sent message.
|
||||
$cordovaSms.send(numbers, " ", options);
|
||||
};// End sentSms.
|
||||
$scope.initialForm();
|
||||
|
||||
});// End of contract detail controller.
|
||||
@@ -0,0 +1,30 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Device Vibration-->
|
||||
<!--Controller name : vibrationCtrl-->
|
||||
<!--Controller path : www/templates/hardware-connect/vibration/js/controllers.js-->
|
||||
<!--State name : app.vibration-->
|
||||
<!--URL : #app/vibration-->
|
||||
|
||||
<ion-view title="Vibration">
|
||||
<!--vibration section-->
|
||||
<ion-content scroll="false">
|
||||
|
||||
<div class="row">
|
||||
<!--vibration icon section-->
|
||||
<div id="vibration-icon" class="col">
|
||||
<i ng-class="{'vibration-sad-color' : vibrateing}"
|
||||
class="ion-android-happy center-screen icon-vibration"></i>
|
||||
</div>
|
||||
<!--end vibration icon section-->
|
||||
</div>
|
||||
<div class="row">
|
||||
<!--vibration control section-->
|
||||
<div id="vibration-control" class="col">
|
||||
<p>Devise Vibration</p>
|
||||
<a class="md-raised md-warn md-button md-default-theme" ng-click="vibrate()">
|
||||
Vibrate
|
||||
</a>
|
||||
</div><!--end vibration control section-->
|
||||
</div>
|
||||
</ion-content><!--end vibration section-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,31 @@
|
||||
// For using vibration you have to install $cordovaVibration by running the following
|
||||
// command in your cmd.exe for windows or terminal for mac:
|
||||
// $ cd your_project_path
|
||||
// $ ionic plugin remove cordova-plugin-vibration
|
||||
// $ ionic plugin add cordova-plugin-vibration
|
||||
//
|
||||
// Learn more about $cordovaVibration :
|
||||
// http://ngcordova.com/docs/plugins/vibration/
|
||||
//
|
||||
// Controller of vibration page.
|
||||
appControllers.controller('vibrationCtrl', function ($scope, $timeout, $cordovaVibration) {
|
||||
|
||||
// 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.vibrateing is vibrateing status.
|
||||
$scope.vibrateing = false;
|
||||
};
|
||||
|
||||
// vibrate for vibrate by calling $cordovaVibration.vibrate(milliseconds of vibrateing)
|
||||
$scope.vibrate = function () {
|
||||
$scope.vibrateing = true;
|
||||
$cordovaVibration.vibrate(400);
|
||||
$timeout(function () {
|
||||
$scope.vibrateing = false;
|
||||
}, 400);
|
||||
};// End vibrate.
|
||||
|
||||
$scope.initialForm();
|
||||
|
||||
});// End of vibration Controller.
|
||||
@@ -0,0 +1,36 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Android Map Connect-->
|
||||
<!--Controller name : androidMapConnectCtrl-->
|
||||
<!--Controller path : www/templates/map-and-location/android-map-connect/js/controllers.js-->
|
||||
<!--State name : app.androidMapConnect-->
|
||||
<!--URL : #app/androidMapConnect-->
|
||||
|
||||
<ion-view title="Android Map Connect">
|
||||
<!--map and location section-->
|
||||
<ion-content id="map-and-location">
|
||||
<!--header section-->
|
||||
<form>
|
||||
<div>
|
||||
<i class="fa fa-map md-primary-color"></i>
|
||||
</div>
|
||||
<div class="sub-header">Map Connect for Android</div>
|
||||
<br/>
|
||||
</form><!--end header section-->
|
||||
|
||||
<!--map input option section-->
|
||||
<div class="map-input-option">
|
||||
<md-input-container md-no-float="">
|
||||
<input ng-model="destinationLocation" placeholder="Destination Location lat,long">
|
||||
</md-input-container>
|
||||
<a class="md-raised social-button md-button md-default-theme material-background"
|
||||
ng-click="openMap(destinationLocation)">
|
||||
Connect to Google Map
|
||||
</a>
|
||||
|
||||
<!--footer section-->
|
||||
<div class="footer">
|
||||
This feature can use on Android devise only.
|
||||
</div><!--end footer section-->
|
||||
</div><!--end map input option section-->
|
||||
</ion-content><!--map and location section-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,31 @@
|
||||
// Controller of google androidMapConnect page.
|
||||
// You can learn more about google map for Android at:
|
||||
// https://developers.google.com/maps/documentation/android-api/intents?hl=en#display_a_map
|
||||
// at Display a map section.
|
||||
appControllers.controller('androidMapConnectCtrl', function ($scope) {
|
||||
|
||||
// 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 () {
|
||||
//destinationLocation is latitude,longitude of the destination location.
|
||||
$scope.destinationLocation = "-37.817364,144.955464";
|
||||
};// End initialForm
|
||||
|
||||
// openMap is for open Google Map application.
|
||||
// Parameter :
|
||||
// targetDestinationLocation = latitude,longitude of the destination location.
|
||||
$scope.openMap = function (targetDestinationLocation) {
|
||||
|
||||
// window.open is to link to URL.
|
||||
// The format is geo:?q=targetDestinationLocation(latitude,longitude)&z=15(Specifies the zoom level of the map).
|
||||
// '_system' is for open map application
|
||||
window.open('geo:?q=' + targetDestinationLocation + '&z=15', '_system');
|
||||
// If you would like to custom map you can use this parameter below:
|
||||
// latitude and longitude set the center point of the map.
|
||||
// z optionally sets the initial zoom level of the map. Accepted values range from 0 (the whole world) to 21 (individual buildings).
|
||||
// The upper limit can vary depending on the map data available at the selected location.
|
||||
};// End openMap
|
||||
|
||||
$scope.initialForm();
|
||||
|
||||
});// End androidMapConnectCtrl controller.
|
||||
@@ -0,0 +1,41 @@
|
||||
<!--View Information-->
|
||||
<!--View name : IOS Map Connect-->
|
||||
<!--Controller name : iosMapConnectCtrl-->
|
||||
<!--Controller path : www/templates/map-and-location/ios-map-connect/js/controllers.js-->
|
||||
<!--State name : app.iosMapConnect-->
|
||||
<!--URL : #app/iosMapConnect-->
|
||||
|
||||
<ion-view title="IOS Map Connect">
|
||||
<!--map and location section-->
|
||||
<ion-content id="map-and-location">
|
||||
<!--header section-->
|
||||
<form>
|
||||
<div>
|
||||
<i class="fa fa-map-o md-primary-color"></i>
|
||||
</div>
|
||||
<div class="sub-header">Map Connect for IOS</div>
|
||||
<br/>
|
||||
</form><!--end header section-->
|
||||
|
||||
<!--map input option section-->
|
||||
<div class="map-input-option">
|
||||
|
||||
<md-input-container md-no-float="">
|
||||
<input ng-model="destinationLocation" placeholder="Destination Location lat,long">
|
||||
</md-input-container>
|
||||
<a class="md-raised social-button md-button md-default-theme material-background"
|
||||
ng-click="openIosMap(destinationLocation)">
|
||||
Connect to IOS Map
|
||||
</a>
|
||||
<a class="md-raised social-button md-button md-default-theme material-background"
|
||||
ng-click="openGoogleMap(destinationLocation)">
|
||||
Connect to Google Map
|
||||
</a>
|
||||
|
||||
<!--footer section-->
|
||||
<div class="footer">
|
||||
This feature can use on IOS devise only.
|
||||
</div><!--end footer section-->
|
||||
</div><!--end map input option section-->
|
||||
</ion-content><!--map and location section-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,56 @@
|
||||
// Controller of google iosMapConnect page.
|
||||
// You can learn more about ios map at:
|
||||
// https://developer.apple.com/library/iad/featuredarticles/iPhoneURLScheme_Reference/MapLinks/MapLinks.html
|
||||
// You can learn more about google map for ios at:
|
||||
// https://developers.google.com/maps/documentation/ios-sdk/urlscheme?hl=en#display_a_map
|
||||
// at Display a map section.
|
||||
appControllers.controller('iosMapConnectCtrl', function ($scope) {
|
||||
|
||||
// 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 () {
|
||||
//destinationLocation is latitude,longitude of the destination location.
|
||||
$scope.destinationLocation = "-37.817364,144.955464";
|
||||
};// End initialForm
|
||||
|
||||
// openIosMap is for open IOS Map application.
|
||||
// Parameter :
|
||||
// targetDestinationLocation = latitude,longitude of the destination location.
|
||||
$scope.openIosMap = function (targetDestinationLocation) {
|
||||
|
||||
// window.open is to link to URL.
|
||||
// The format is maps://?q=targetDestinationLocation(latitude,longitude).
|
||||
// '_system' is for open map application
|
||||
window.open('maps://?q=' + targetDestinationLocation, '_system');
|
||||
// If you would like to custom map you can use this parameter below:
|
||||
// q = The query parameter. This parameter is treated as if it had been typed into the query box by the user in the Maps app. q=* is not supported
|
||||
// near = The location part of the query.
|
||||
// ll = The latitude and longitude points (in decimal format, comma separated, and in that order) for the map center point.
|
||||
// sll = The latitude and longitude points from which a business search should be performed.
|
||||
// spn = The approximate latitude and longitude span.
|
||||
// sspn = A custom latitude and longitude span format used by Apple. The value of this parameter is the latitude and longitude separated by a comma. For example, to specify a latitudinal span of 20.4 degrees and a longitudinal span of 30.8 degrees, you would use the string “sspn=20.4,30.8”.
|
||||
// t = The type of map to display.
|
||||
// z = The zoom level.
|
||||
// saddr = The source address, which is used when generating driving directions
|
||||
// daddr = The destination address, which is used when generating driving directions.
|
||||
};// End openIosMap
|
||||
|
||||
// openGoogleMap is for open Google Map application.
|
||||
// Parameter :
|
||||
// targetDestinationLocation = latitude,longitude of the destination location.
|
||||
$scope.openGoogleMap = function (targetDestinationLocation) {
|
||||
|
||||
// window.open is to link to URL.
|
||||
// The format is comgooglemaps://?q=targetDestinationLocation(latitude,longitude)&zoom=15(Specifies the zoom level of the map).
|
||||
// '_system' is for open map application
|
||||
window.open('comgooglemaps://?q=' + targetDestinationLocation + '&zoom=15', '_system');
|
||||
// If you would like to custom map you can use this paramitor below:
|
||||
// center: This is the map viewport center point. Formatted as a comma separated string of latitude,longitude.
|
||||
// mapmode: Sets the kind of map shown. Can be set to: standard or streetview. If not specified, the current application settings will be used.
|
||||
// views: Turns specific views on/off. Can be set to: satellite, traffic, or transit. Multiple values can be set using a comma-separator. If the parameter is specified with no value, then it will clear all views.
|
||||
// zoom: Specifies the zoom level of the map.
|
||||
};// End openGoogleMap
|
||||
|
||||
$scope.initialForm();
|
||||
|
||||
});// End iosMapConnectCtrl controller.
|
||||
@@ -0,0 +1,32 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Dashboard Setting-->
|
||||
<!--Controller name : dashboardSettingCtrl-->
|
||||
<!--Controller path : www/templates/material-user-interface/dashboard/js/controllers.js-->
|
||||
<!--State name : app.dashboardSetting-->
|
||||
<!--URL : #app/dashboardSetting-->
|
||||
|
||||
<ion-view title="Dashboard 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 Dashboard View</md-subheader>
|
||||
<md-list-item class="md-list-item-default" ng-click="navigateTo('app.dashboard',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.dashboard',false)">
|
||||
<i class="fa fa-stop"></i>
|
||||
|
||||
<p>Disable Row Animation</p>
|
||||
</md-list-item>
|
||||
</md-list><!--end list section-->
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
@@ -0,0 +1,771 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Dashboard-->
|
||||
<!--Controller name : dashboardCtrl-->
|
||||
<!--Controller path : www/templates/material-user-interface/dashboard/js/controllers.js-->
|
||||
<!--State name : app.dashboard-->
|
||||
<!--URL : #app/dashboard-->
|
||||
|
||||
<ion-view view-title="">
|
||||
|
||||
<!--right button on navigation bar-->
|
||||
<ion-nav-buttons side="right">
|
||||
<md-button class="md-icon-button ion-nav-button-right" ng-click="goToSetting()"
|
||||
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>Material Design</h1>
|
||||
|
||||
<h2>Ionic Material Design</h2>
|
||||
</div>
|
||||
<a class="md-button md-accent md-fab fab-toolbar-medium"
|
||||
aria-label="Add">
|
||||
<i class="icon ion-plus"></i>
|
||||
</a>
|
||||
</md-toolbar><!--end toolbar section-->
|
||||
|
||||
<!--dashboard section-->
|
||||
<ion-content id="dashboard-content">
|
||||
|
||||
<!--list section-->
|
||||
|
||||
<!--Below code it will disable animation to better performance-->
|
||||
<div ng-if="!isAnimated" class="menu-list">
|
||||
<md-subheader class="md-warn">Application Storage</md-subheader>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.contractlist')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-database"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>SQLite DB</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.notelist')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-cube"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>Local Storage DB</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</div>
|
||||
<md-subheader class="md-warn">Social Network Connect</md-subheader>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.wordpressLogin')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-wordpress"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>WordPress</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.facebookLogin')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-facebook"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>Facebook</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.googlePlusLogin')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-google-plus"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>Google Plus</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.instagramLogin')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-instagram"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>Instagram</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.foursquareLogin')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-foursquare"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>Foursquare</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.dropboxLogin')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-dropbox"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>Dropbox</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</div>
|
||||
<md-subheader class="md-warn">Share Application Content</md-subheader>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.productList')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-share-alt"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>Social Share</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.contractUs')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-inbox"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>Email & Message</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</div>
|
||||
<md-subheader class="md-warn">Advertising Application</md-subheader>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.googleAdmob')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-money"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>Google AdMob</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</div>
|
||||
<md-subheader class="md-warn">Push Notification</md-subheader>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.singlePushNotification')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-sign-in fa-rotate-90"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>Single Push</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.schedulePushNotification')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-clock-o"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>Schedule Push</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</div>
|
||||
<md-subheader class="md-warn">Map API Connect</md-subheader>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.iosMapConnect')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-map-o"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>IOS Map</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.androidMapConnect')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-map"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>Android Map</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</div>
|
||||
<md-subheader class="md-warn">Hardware Connect</md-subheader>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.mobileContractList')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-users"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>Mobile Contract</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.imagePicker')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-picture-o"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>Image Picker</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.vibration')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-asterisk"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>Vibration</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.flashLight')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-bolt"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>Flashlight</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.deviceInformation')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-info"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>Device Information</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</div>
|
||||
<md-subheader class="md-warn">Material User Interface</md-subheader>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.defaultUI')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-bookmark-o"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>Default UI</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</div>
|
||||
<md-subheader class="md-warn">Themes</md-subheader>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.tryAppNoBackBtn')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-diamond"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>Try App</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.pricing')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-line-chart"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>Pricing</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.menuDashboard')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-th-large"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>Menu Dashboard</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.expense')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-suitcase"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>Expense</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.newsFeed')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-newspaper-o"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>News Feed</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.onlineCourse')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-graduation-cap"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>Online Course</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.locationFeed')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-flag"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>Location Feed</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.cubeFeed')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-cubes"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>Cube Feed</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.clothShop')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-heart"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>Cloth Shop</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.catalog')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-tags"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>Catalog</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.restaurant')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-cutlery"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>Restaurant</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Below code it will show animation when selecting row.-->
|
||||
<md-list ng-if="isAnimated">
|
||||
<md-subheader class="md-warn">Application Storage</md-subheader>
|
||||
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.contractlist')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-database"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<p>SQLite DB</p>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
|
||||
</md-list-item>
|
||||
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.notelist')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-cube"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<p>Local Storage DB</p>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<md-subheader class="md-warn">Social Network Connect</md-subheader>
|
||||
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.wordpressLogin')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-wordpress"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>WordPress</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
|
||||
</md-list-item>
|
||||
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.facebookLogin')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-facebook"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>Facebook</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.googlePlusLogin')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-google-plus"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>Google Plus</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.instagramLogin')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-instagram"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>Instagram</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.foursquareLogin')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-foursquare"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>Foursquare</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.dropboxLogin')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-dropbox"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>Dropbox</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<md-subheader class="md-warn">Share Application Content</md-subheader>
|
||||
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.productList')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-share-alt"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>Social Share</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.contractUs')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-inbox"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>Email & Message</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<md-subheader class="md-warn">Advertising Application</md-subheader>
|
||||
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.googleAdmob')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-money"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>Google AdMob</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<md-subheader class="md-warn">Push Notification</md-subheader>
|
||||
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.singlePushNotification')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-sign-in fa-rotate-90"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>Single Push</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.schedulePushNotification')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-clock-o"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>Schedule Push</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<md-subheader class="md-warn">Map API Connect</md-subheader>
|
||||
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.iosMapConnect')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-map-o"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>IOS Map</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.androidMapConnect')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-map"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>Android Map</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<md-subheader class="md-warn">Hardware Connect</md-subheader>
|
||||
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.mobileContractList')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-users"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>Mobile Contract</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
|
||||
|
||||
</md-list-item>
|
||||
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.imagePicker')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-picture-o"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>Image Picker</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.vibration')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-asterisk"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>Vibration</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.flashLight')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-bolt"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>Flashlight</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.deviceInformation')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-info"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>Device Info</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<md-subheader class="md-warn">Material User Interface</md-subheader>
|
||||
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.defaultUI')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-bookmark-o"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>Default UI</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<md-subheader class="md-warn">Themes</md-subheader>
|
||||
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.tryAppNoBackBtn')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-diamond"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>Try App</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.pricing')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-line-chart"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>Pricing</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.menuDashboard')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-th-large"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>Menu Dashboard</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.expense')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-suitcase"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>Expense</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.newsFeed')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-newspaper-o"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>News Feed</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.onlineCourse')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-graduation-cap"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>Online Course</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.locationFeed')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-flag"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>Location Feed</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.cubeFeed')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-cubes"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>Cube Feed</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.clothShop')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-heart"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>Cloth Shop</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.catalog')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-tags"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>Catalog</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.restaurant')">
|
||||
<div class="col-25">
|
||||
<i class="fa fa-cutlery"></i>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<span>Restaurant</span>
|
||||
</div>
|
||||
<div class="col-25 menu-more">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</div>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
<!--end list section-->
|
||||
</ion-content><!--end dashboard section-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,54 @@
|
||||
// Controller of dashboard.
|
||||
appControllers.controller('dashboardCtrl', function ($scope, $timeout, $state,$stateParams, $ionicHistory) {
|
||||
|
||||
//$scope.isAnimated is the variable that use for receive object data from state params.
|
||||
//For enable/disable row animation.
|
||||
$scope.isAnimated = $stateParams.isAnimated;
|
||||
|
||||
// navigateTo is for navigate to other page
|
||||
// by using targetPage to be the destination state.
|
||||
// Parameter :
|
||||
// stateNames = target state to go.
|
||||
$scope.navigateTo = function (stateName) {
|
||||
$timeout(function () {
|
||||
if ($ionicHistory.currentStateName() != stateName) {
|
||||
$ionicHistory.nextViewOptions({
|
||||
disableAnimate: false,
|
||||
disableBack: true
|
||||
});
|
||||
$state.go(stateName);
|
||||
}
|
||||
}, ($scope.isAnimated ? 300 : 0));
|
||||
}; // End of navigateTo.
|
||||
|
||||
// goToSetting is for navigate to Dashboard Setting page
|
||||
$scope.goToSetting = function () {
|
||||
$state.go("app.dashboardSetting");
|
||||
};// End goToSetting.
|
||||
|
||||
}); // End of dashboard controller.
|
||||
|
||||
// Controller of Dashboard Setting.
|
||||
appControllers.controller('dashboardSettingCtrl', function ($scope, $state,$ionicHistory,$ionicViewSwitcher) {
|
||||
|
||||
// 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.
|
||||
}); // End of Dashboard Setting controller.
|
||||
@@ -0,0 +1,433 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Default User Interface-->
|
||||
<!--Controller name : defaultUserInterfaceCtrl-->
|
||||
<!--Controller path : www/templates/material-user-interface/default-user-interface/js/controllers.js-->
|
||||
<!--State name : app.defaultUI-->
|
||||
<!--URL : #app/defaultUI-->
|
||||
|
||||
<ion-view title="User Interface">
|
||||
<!--user interface section-->
|
||||
<ion-slide-box id="user-interface-content" active-slide="0">
|
||||
<!--slide section-->
|
||||
<ion-slide class="slide-01">
|
||||
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<a class="md-button md-accent md-fab" aria-label="Add">
|
||||
<i class="icon ion-plus"></i>
|
||||
</a>
|
||||
<a class="md-button md-accent md-fab" aria-label="Edit">
|
||||
<i class="ion-android-create"></i>
|
||||
</a>
|
||||
<br/>
|
||||
|
||||
<a class="md-button md-accent md-fab" aria-label="Shop">
|
||||
<i class="fa fa-shopping-cart"></i>
|
||||
</a>
|
||||
<a class="md-button md-accent md-fab" aria-label="Call">
|
||||
<i class="ion-android-call"></i>
|
||||
</a>
|
||||
<br/>
|
||||
|
||||
<div class="button-icon-content">
|
||||
<i class="ion-android-mail button-icon"></i>
|
||||
<i class="ion-android-textsms button-icon"></i>
|
||||
</div>
|
||||
<a href="" class="md-raised md-button md-default-theme material-background">Button</a>
|
||||
<br/>
|
||||
<a href="" class="md-raised md-button md-default-theme"> Button</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ion-slide>
|
||||
<ion-slide class="slide-02">
|
||||
<form name="contractForm">
|
||||
<ion-content id="default-input-content">
|
||||
<md-input-container md-no-float="" class="md-list-item-full-width">
|
||||
<input placeholder=" Input Text">
|
||||
</md-input-container>
|
||||
<md-input-container class="icon-title" md-no-float>
|
||||
<i class="ion-android-mail"></i>
|
||||
<input name="email" placeholder="Input Text">
|
||||
</md-input-container>
|
||||
<md-input-container class="icon-title" md-no-float>
|
||||
<i class="fa fa-unlock-alt"></i>
|
||||
<input type="password" name="password" placeholder="Input Password">
|
||||
</md-input-container>
|
||||
<md-input-container class="icon-title" md-no-float>
|
||||
<i class="ion-android-favorite"></i>
|
||||
<input numbers-only name="age" ng-model="inputNumber" placeholder="Input Number" type="tel">
|
||||
</md-input-container>
|
||||
</ion-content>
|
||||
</form>
|
||||
</ion-slide>
|
||||
<ion-slide class="slide-03">
|
||||
|
||||
|
||||
<div class="radio-container">
|
||||
<md-radio-group ng-model="radioData.fruit">
|
||||
<md-radio-button value="Apple">Apple</md-radio-button>
|
||||
<md-radio-button value="Banana"> Banana</md-radio-button>
|
||||
<md-radio-button value="Mango">Mango</md-radio-button>
|
||||
</md-radio-group>
|
||||
</div>
|
||||
<div class="checkbox-container">
|
||||
<md-checkbox aria-label="Checkbox">
|
||||
Check Me.
|
||||
</md-checkbox>
|
||||
</div>
|
||||
<div class="switch-container">
|
||||
<md-switch ng-model="switchData.switchNormal" aria-label="Switch" ng-true-value="'You change to True'"
|
||||
ng-false-value="'You change to False'" class="md-warn">
|
||||
{{ switchData.switchNormal }}
|
||||
</md-switch>
|
||||
<md-switch class="md-primary" md-no-ink aria-label="Switch No Ink" ng-model="switchData.switchNoInk">
|
||||
Switch md no ink
|
||||
</md-switch>
|
||||
</div>
|
||||
|
||||
</ion-slide>
|
||||
<ion-slide class="slide-04">
|
||||
|
||||
<md-card>
|
||||
<img ng-src="{{'img/bg_cover_01.png'}}" class="md-card-image" alt="Card image">
|
||||
<md-card-content>
|
||||
<h2 class="md-title">MD-CARD</h2>
|
||||
|
||||
<p>
|
||||
card content ........................................
|
||||
</p>
|
||||
</md-card-content>
|
||||
<div class="md-actions" layout="row" layout-align="end center">
|
||||
<a href="" class="md-button md-default-theme">Action 1</a>
|
||||
<a href="" class="md-button md-default-theme">Action 2</a>
|
||||
</div>
|
||||
</md-card>
|
||||
|
||||
</ion-slide>
|
||||
|
||||
|
||||
<ion-slide class="slide-05">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<a href="" ng-click="showConfirmDialog($event)"
|
||||
class="md-raised md-button md-default-theme material-background">Confirm Dialog</a>
|
||||
<br/>
|
||||
<a href="" ng-click="showAlertDialog($event)"
|
||||
class="md-raised md-button md-default-theme material-background">Alert Dialog</a>
|
||||
<br/>
|
||||
|
||||
<p>
|
||||
{{dialogResult}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ion-slide>
|
||||
|
||||
<ion-slide class="slide-06">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<a href="" ng-click="showToast('top')"
|
||||
class="md-raised md-button md-default-theme material-background">Toast Top</a>
|
||||
<br/>
|
||||
<a href="" ng-click="showToast('bottom')"
|
||||
class="md-raised md-button md-default-theme material-background">Toast Bottom</a>
|
||||
</div>
|
||||
</div>
|
||||
</ion-slide>
|
||||
|
||||
<ion-slide class="slide-07">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<a href="" ng-click="showListBottomSheet($event)"
|
||||
class="md-raised md-button md-default-theme material-background">List Bottom Sheet</a>
|
||||
<br/>
|
||||
<a href="" ng-click="showGridBottomSheet($event)"
|
||||
class="md-raised md-button md-default-theme material-background">Grid Bottom Sheet</a>
|
||||
</div>
|
||||
</div>
|
||||
</ion-slide>
|
||||
<ion-slide class="slide-08">
|
||||
<md-menu md-position-mode="target-right target" class="md-list-item-md-menu-right">
|
||||
<p ng-click="$mdOpenMenu()">
|
||||
Menu Small
|
||||
<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="doSomeThing()">
|
||||
<span class="menu-item-button">Action 1</span>
|
||||
</a>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<a class="md-button md-default-theme" ng-click="doSomeThing()">
|
||||
<span class="menu-item-button">Action 2</span>
|
||||
</a>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<a class="md-button md-default-theme" ng-click="doSomeThing()">
|
||||
<span class="menu-item-button">Action 3</span>
|
||||
</a>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<a class="md-button md-default-theme" ng-click="doSomeThing()">
|
||||
<span class="menu-item-button">Action 4</span>
|
||||
</a>
|
||||
</md-menu-item>
|
||||
</md-menu-content>
|
||||
</md-menu>
|
||||
|
||||
<md-menu md-position-mode="target-right target" class="md-list-item-md-menu-right">
|
||||
<p ng-click="$mdOpenMenu()">
|
||||
Menu Medium
|
||||
<md-icon md-menu-origin md-svg-icon="more"></md-icon>
|
||||
</p>
|
||||
<md-menu-content width="2">
|
||||
<md-menu-item>
|
||||
<a class="md-button md-default-theme" ng-click="doSomeThing()">
|
||||
<span class="menu-item-button">Action 1</span>
|
||||
</a>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<a class="md-button md-default-theme" ng-click="doSomeThing()">
|
||||
<span class="menu-item-button">Action 2</span>
|
||||
</a>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<a class="md-button md-default-theme" ng-click="doSomeThing()">
|
||||
<span class="menu-item-button">Action 3</span>
|
||||
</a>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<a class="md-button md-default-theme" ng-click="doSomeThing()">
|
||||
<span class="menu-item-button">Action 4</span>
|
||||
</a>
|
||||
</md-menu-item>
|
||||
</md-menu-content>
|
||||
</md-menu>
|
||||
<md-menu md-position-mode="target-right target" class="md-list-item-md-menu-right">
|
||||
<p ng-click="$mdOpenMenu()">
|
||||
Menu Large
|
||||
<md-icon md-menu-origin md-svg-icon="more"></md-icon>
|
||||
</p>
|
||||
<md-menu-content width="3">
|
||||
<md-menu-item>
|
||||
<a class="md-button md-default-theme" ng-click="doSomeThing()">
|
||||
<span class="menu-item-button">Action 1</span>
|
||||
</a>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<a class="md-button md-default-theme" ng-click="doSomeThing()">
|
||||
<span class="menu-item-button">Action 2</span>
|
||||
</a>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<a class="md-button md-default-theme" ng-click="doSomeThing()">
|
||||
<span class="menu-item-button">Action 3</span>
|
||||
</a>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<a class="md-button md-default-theme" ng-click="doSomeThing()">
|
||||
<span class="menu-item-button">Action 4</span>
|
||||
</a>
|
||||
</md-menu-item>
|
||||
</md-menu-content>
|
||||
</md-menu>
|
||||
<md-menu md-position-mode="target-right target" class="md-list-item-md-menu-right">
|
||||
<p ng-click="$mdOpenMenu()">
|
||||
Menu Super Large
|
||||
<md-icon md-menu-origin md-svg-icon="more"></md-icon>
|
||||
</p>
|
||||
<md-menu-content width="4">
|
||||
<md-menu-item>
|
||||
<a class="md-button md-default-theme" ng-click="doSomeThing()">
|
||||
<span class="menu-item-button">Action 1</span>
|
||||
</a>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<a class="md-button md-default-theme" ng-click="doSomeThing()">
|
||||
<span class="menu-item-button">Action 2</span>
|
||||
</a>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<a class="md-button md-default-theme" ng-click="doSomeThing()">
|
||||
<span class="menu-item-button">Action 3</span>
|
||||
</a>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<a class="md-button md-default-theme" ng-click="doSomeThing()">
|
||||
<span class="menu-item-button">Action 4</span>
|
||||
</a>
|
||||
</md-menu-item>
|
||||
</md-menu-content>
|
||||
</md-menu>
|
||||
<div class="row">
|
||||
<div class="col-25">
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<md-select ng-model="mdSelectValue" aria-label="md-option">
|
||||
<md-option value="0">Option 1</md-option>
|
||||
<md-option value="1">Option 2</md-option>
|
||||
<md-option value="2">Option 3</md-option>
|
||||
<md-option value="3">Option 4</md-option>
|
||||
</md-select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ion-slide>
|
||||
<ion-slide class="slide-09">
|
||||
|
||||
<div class="ui-progress-circular">
|
||||
<ion-spinner ng-if="!isAndroid" class="progress-circular"></ion-spinner>
|
||||
<md-progress-circular ng-if="isAndroid" md-mode="indeterminate"></md-progress-circular>
|
||||
</div>
|
||||
<p class="ui-progress-circular-content">Progress Circular</p>
|
||||
</ion-slide>
|
||||
<ion-slide class="slide-10">
|
||||
<md-tabs md-dynamic-height md-border-bottom>
|
||||
<md-tab label="Tab 1">
|
||||
<md-content>
|
||||
Tab 1 Detail .......
|
||||
</md-content>
|
||||
</md-tab>
|
||||
<md-tab label="Tab 2">
|
||||
<md-content>
|
||||
Tab 2 Detail .......
|
||||
</md-content>
|
||||
</md-tab>
|
||||
</md-tabs>
|
||||
</ion-slide>
|
||||
|
||||
<ion-slide class="slide-11">
|
||||
|
||||
<md-list>
|
||||
<md-divider></md-divider>
|
||||
<md-subheader class="md-warn">Default List</md-subheader>
|
||||
<md-list-item class="md-list-item-default" ng-click="doSomeThing()">
|
||||
<i class="ion-android-pin"></i>
|
||||
|
||||
<p>Data Row 1</p>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-list-item-default" ng-click="doSomeThing()">
|
||||
<i class="ion-android-refresh"></i>
|
||||
|
||||
<p>Data Row 2</p>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-list-item-default" ng-click="doSomeThing()">
|
||||
<i class="ion-android-create"></i>
|
||||
|
||||
<p>Data Row 3</p>
|
||||
</md-list-item>
|
||||
<md-divider></md-divider>
|
||||
|
||||
<md-subheader>2 line item</md-subheader>
|
||||
<md-list-item class="md-2-line">
|
||||
<img ng-src="{{'img/app_icon.png'}}" class="md-avatar"/>
|
||||
|
||||
<div class="md-list-item-text">
|
||||
<h3>Hrader ...</h3>
|
||||
|
||||
<p>Detail ....</p>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<md-divider></md-divider>
|
||||
|
||||
</ion-slide>
|
||||
<ion-slide class="slide-12">
|
||||
<md-whiteframe class="md-whiteframe-z1" layout layout-align="center center">
|
||||
<span>.md-whiteframe-z1</span>
|
||||
</md-whiteframe>
|
||||
<md-whiteframe class="md-whiteframe-z2" layout layout-align="center center">
|
||||
<span>.md-whiteframe-z2</span>
|
||||
</md-whiteframe>
|
||||
<md-whiteframe class="md-whiteframe-z3" layout layout-align="center center">
|
||||
<span>.md-whiteframe-z3</span>
|
||||
</md-whiteframe>
|
||||
<md-whiteframe class="md-whiteframe-z4" layout layout-align="center center">
|
||||
<span>.md-whiteframe-z4</span>
|
||||
</md-whiteframe>
|
||||
<md-whiteframe class="md-whiteframe-z5" layout layout-align="center center">
|
||||
<span>.md-whiteframe-z5</span>
|
||||
</md-whiteframe>
|
||||
</ion-slide>
|
||||
<ion-slide class="slide-13">
|
||||
</ion-slide>
|
||||
<!--end slide section-->
|
||||
</ion-slide-box> <!--end user interface section-->
|
||||
|
||||
</ion-view>
|
||||
|
||||
<!--angular template section-->
|
||||
<script type="text/ng-template" id="ui-list-bottom-sheet-template">
|
||||
<md-bottom-sheet class="md-list md-has-header">
|
||||
<h1 class="md-bottom-sheet-header">List Bottom Sheet</h1>
|
||||
<!--list section-->
|
||||
<md-list>
|
||||
<md-list-item>
|
||||
<a class="md-default-theme md-bottom-sheet-list-item"
|
||||
ng-click="closeListBottomSheet()">
|
||||
<i class="ion-android-call"></i>
|
||||
<span>Actions 1</span>
|
||||
</a>
|
||||
</md-list-item>
|
||||
<md-list-item>
|
||||
<a class="md-default-theme md-bottom-sheet-list-item"
|
||||
ng-click="closeListBottomSheet()">
|
||||
<i class="ion-android-list"></i>
|
||||
<span>Actions 2</span>
|
||||
</a>
|
||||
</md-list-item>
|
||||
<md-list-item>
|
||||
<a class="md-default-theme md-bottom-sheet-list-item"
|
||||
ng-click="closeListBottomSheet()">
|
||||
<i class="ion-android-delete"></i>
|
||||
<span>Actions 3</span>
|
||||
</a>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
|
||||
<!--end list section-->
|
||||
</md-bottom-sheet>
|
||||
</script>
|
||||
|
||||
<script type="text/ng-template" id="ui-grid-bottom-sheet-template">
|
||||
<md-bottom-sheet class="md-grid">
|
||||
<!--list section-->
|
||||
<md-list id="bottom-sheet-grid-md-list">
|
||||
<md-list-item>
|
||||
<a class="md-grid-item-content" ng-click="closeListBottomSheet()">
|
||||
<md-icon md-svg-src="facebook"></md-icon>
|
||||
<div class="md-grid-text"> Facebook</div>
|
||||
</a>
|
||||
</md-list-item>
|
||||
<md-list-item>
|
||||
<a class="md-grid-item-content" ng-click="closeListBottomSheet()">
|
||||
<md-icon md-svg-src="twitter"></md-icon>
|
||||
<div class="md-grid-text"> Twitter</div>
|
||||
</a>
|
||||
</md-list-item>
|
||||
<md-list-item>
|
||||
<a class="md-grid-item-content" ng-click="closeListBottomSheet()">
|
||||
<md-icon md-svg-src="mail"></md-icon>
|
||||
<div class="md-grid-text"> Mail</div>
|
||||
</a>
|
||||
</md-list-item>
|
||||
<md-list-item>
|
||||
<a class="md-grid-item-content" ng-click="closeListBottomSheet()">
|
||||
<i class="ion-android-image"></i>
|
||||
|
||||
<div class="md-grid-text"> Save Image</div>
|
||||
</a>
|
||||
</md-list-item>
|
||||
<md-list-item>
|
||||
<a class="md-grid-item-content" ng-click="closeListBottomSheet()">
|
||||
<md-icon md-svg-src="share-arrow"></md-icon>
|
||||
<div class="md-grid-text"> More</div>
|
||||
</a>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
<!--end list section-->
|
||||
</md-bottom-sheet>
|
||||
</script>
|
||||
<!--end angular template section-->
|
||||
@@ -0,0 +1,99 @@
|
||||
// Controller of defaultUserInterface.
|
||||
appControllers.controller('defaultUserInterfaceCtrl', function ($scope, $mdBottomSheet, $mdToast, $mdDialog) {
|
||||
//Default value of input number.
|
||||
$scope.inputNumber = 0;
|
||||
//Default value of dialog.
|
||||
$scope.dialogResult = "";
|
||||
//Default value of Selection.
|
||||
$scope.mdSelectValue = "0";
|
||||
//Default value of switch.
|
||||
$scope.switchData = {
|
||||
switchNormal: "Please change me",
|
||||
switchNoInk: false
|
||||
};
|
||||
//Default value of radio data.
|
||||
$scope.radioData = {fruit: 0};
|
||||
|
||||
// For show show List Bottom Sheet.
|
||||
$scope.showListBottomSheet = function ($event) {
|
||||
$mdBottomSheet.show({
|
||||
templateUrl: 'ui-list-bottom-sheet-template',
|
||||
targetEvent: $event,
|
||||
scope: $scope.$new(false),
|
||||
});
|
||||
};// End of showListBottomSheet.
|
||||
|
||||
// For show Grid Bottom Sheet.
|
||||
$scope.showGridBottomSheet = function ($event) {
|
||||
$mdBottomSheet.show({
|
||||
templateUrl: 'ui-grid-bottom-sheet-template',
|
||||
targetEvent: $event,
|
||||
scope: $scope.$new(false),
|
||||
});
|
||||
};// End of showGridBottomSheet.
|
||||
|
||||
// For show toast.
|
||||
$scope.showToast = function (toastPosition) {
|
||||
$mdToast.show({
|
||||
controller: 'toastController',
|
||||
templateUrl: 'toast.html',
|
||||
hideDelay: 800,
|
||||
position: toastPosition,
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: 'Action Toast'
|
||||
}
|
||||
}
|
||||
});
|
||||
}; // End of showToast.
|
||||
|
||||
// For close list bottom sheet.
|
||||
$scope.closeListBottomSheet = function () {
|
||||
$mdBottomSheet.hide();
|
||||
} // End of closeListBottomSheet.
|
||||
|
||||
// For do something in this function.
|
||||
$scope.doSomeThing = function () {
|
||||
// you can put any function here.
|
||||
}// Emd of doSomeThing
|
||||
|
||||
// For show Confrim Dialog.
|
||||
$scope.showConfirmDialog = function ($event) {
|
||||
$mdDialog.show({
|
||||
controller: 'DialogController',
|
||||
templateUrl: 'confirm-dialog.html',
|
||||
targetEvent: $event,
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: "Confirm dialog ...?",
|
||||
content: "This is confirm dialog content.",
|
||||
ok: "Confirm",
|
||||
cancel: "Close"
|
||||
}
|
||||
}
|
||||
}).then(function () {
|
||||
$scope.dialogResult = "You choose Confirm!"
|
||||
}, function () {
|
||||
$scope.dialogResult = "You choose Close !!"
|
||||
});
|
||||
}// End showConfirmDialog.
|
||||
|
||||
// For show alert Dialog.
|
||||
$scope.showAlertDialog = function ($event) {
|
||||
$mdDialog.show({
|
||||
controller: 'DialogController',
|
||||
templateUrl: 'confirm-dialog.html',
|
||||
targetEvent: $event,
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: "Alert dialog !!",
|
||||
content: "This is alert dialog content.",
|
||||
ok: "Confirm"
|
||||
}
|
||||
}
|
||||
}).then(function () {
|
||||
$scope.dialogResult = "You choose Confirm!"
|
||||
});
|
||||
}// End showAlertDialog.
|
||||
|
||||
}); // End of defaultUserInterface controller.
|
||||
463
IonicMaterialDesign/www/templates/menu/html/menu.html
Normal file
463
IonicMaterialDesign/www/templates/menu/html/menu.html
Normal file
@@ -0,0 +1,463 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Menu-->
|
||||
<!--Controller name : menuCtrl-->
|
||||
<!--Controller path : www/templates/menu/js/controllers.js-->
|
||||
<!--State name : app-->
|
||||
<!--URL : #app-->
|
||||
|
||||
<ion-side-menus enable-menu-with-back-views="false">
|
||||
<ion-side-menu-content>
|
||||
<ion-nav-bar class="bar-balanced material-background-nav-bar">
|
||||
<ion-nav-buttons side="left">
|
||||
<a class="button button-icon button-clear ion-navicon" menu-toggle="left" ng-click="toggleLeft()"></a>
|
||||
</ion-nav-buttons>
|
||||
</ion-nav-bar>
|
||||
<ion-nav-view name="menuContent"></ion-nav-view>
|
||||
</ion-side-menu-content>
|
||||
<md-sidenav md-component-id="left" on-swipe-left="closeSideNav()" on-drag-left="closeSideNav()">
|
||||
<!--menu section-->
|
||||
<div class="material-background" id="toggle-menu-left-header">
|
||||
<!--menu header section-->
|
||||
<div class="menu-left-header">
|
||||
<img class="user-img" src="img/profileAvatar.jpg">
|
||||
|
||||
<p>
|
||||
<span class="title">Ionic Material</span>
|
||||
<br/>
|
||||
<span class="sub-title">Material Design Application</span>
|
||||
</p>
|
||||
</div><!--end menu header section-->
|
||||
</div> <!--menu content section-->
|
||||
<ion-content id="toggle-menu-left-content">
|
||||
|
||||
<!--If device is android application will present below code.-->
|
||||
<!--It will disable animation to better performance on android.-->
|
||||
<!--list section-->
|
||||
<div ng-if="isAndroid" class="menu-list">
|
||||
<md-subheader class="md-warn">Application Storage</md-subheader>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.contractlist')">
|
||||
<div class="col-33">
|
||||
<i class="fa fa-database"></i>
|
||||
</div>
|
||||
<div class="col-66">
|
||||
<span>SQLite DB</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.notelist')">
|
||||
<div class="col-33">
|
||||
<i class="fa fa-cube"></i>
|
||||
</div>
|
||||
<div class="col-66">
|
||||
<span>Local Storage DB</span>
|
||||
</div>
|
||||
</div>
|
||||
<md-subheader class="md-warn">Social Network Connect</md-subheader>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.wordpressLogin')">
|
||||
<div class="col-33">
|
||||
<i class="fa fa-wordpress"></i>
|
||||
</div>
|
||||
<div class="col-66">
|
||||
<span>WordPress</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.facebookLogin')">
|
||||
<div class="col-33">
|
||||
<i class="fa fa-facebook"></i>
|
||||
</div>
|
||||
<div class="col-66">
|
||||
<span>Facebook</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.googlePlusLogin')">
|
||||
<div class="col-33">
|
||||
<i class="fa fa-google-plus"></i>
|
||||
</div>
|
||||
<div class="col-66">
|
||||
<span>Google Plus</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.instagramLogin')">
|
||||
<div class="col-33">
|
||||
<i class="fa fa-instagram"></i>
|
||||
</div>
|
||||
<div class="col-66">
|
||||
<span>Instagram</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.foursquareLogin')">
|
||||
<div class="col-33">
|
||||
<i class="fa fa-foursquare"></i>
|
||||
</div>
|
||||
<div class="col-66">
|
||||
<span>Foursquare</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.dropboxLogin')">
|
||||
<div class="col-33">
|
||||
<i class="fa fa-dropbox"></i>
|
||||
</div>
|
||||
<div class="col-66">
|
||||
<span>Dropbox</span>
|
||||
</div>
|
||||
</div>
|
||||
<md-subheader class="md-warn">Share Application Content</md-subheader>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.productList')">
|
||||
<div class="col-33">
|
||||
<i class="fa fa-share-alt"></i>
|
||||
</div>
|
||||
<div class="col-66">
|
||||
<span>Social Share</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.contractUs')">
|
||||
<div class="col-33">
|
||||
<i class="fa fa-inbox"></i>
|
||||
</div>
|
||||
<div class="col-66">
|
||||
<span>Email & Message</span>
|
||||
</div>
|
||||
</div>
|
||||
<md-subheader class="md-warn">Advertising Application</md-subheader>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.googleAdmob')">
|
||||
<div class="col-33">
|
||||
<i class="fa fa-money"></i>
|
||||
</div>
|
||||
<div class="col-66">
|
||||
<span>Google AdMob</span>
|
||||
</div>
|
||||
</div>
|
||||
<md-subheader class="md-warn">Push Notification</md-subheader>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.singlePushNotification')">
|
||||
<div class="col-33">
|
||||
<i class="fa fa-sign-in fa-rotate-90"></i>
|
||||
</div>
|
||||
<div class="col-66">
|
||||
<span>Single Push</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.schedulePushNotification')">
|
||||
<div class="col-33">
|
||||
<i class="fa fa-clock-o"></i>
|
||||
</div>
|
||||
<div class="col-66">
|
||||
<span>Schedule Push</span>
|
||||
</div>
|
||||
</div>
|
||||
<md-subheader class="md-warn">Map API Connect</md-subheader>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.iosMapConnect')">
|
||||
<div class="col-33">
|
||||
<i class="fa fa-map-o"></i>
|
||||
</div>
|
||||
<div class="col-66">
|
||||
<span>IOS Map</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.androidMapConnect')">
|
||||
<div class="col-33">
|
||||
<i class="fa fa-map"></i>
|
||||
</div>
|
||||
<div class="col-66">
|
||||
<span>Android Map</span>
|
||||
</div>
|
||||
</div>
|
||||
<md-subheader class="md-warn">Hardware Connect</md-subheader>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.mobileContractList')">
|
||||
<div class="col-33">
|
||||
<i class="fa fa-users"></i>
|
||||
</div>
|
||||
<div class="col-66">
|
||||
<span>Mobile Contract</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.imagePicker')">
|
||||
<div class="col-33">
|
||||
<i class="fa fa-picture-o"></i>
|
||||
</div>
|
||||
<div class="col-66">
|
||||
<span>Image Picker</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.vibration')">
|
||||
<div class="col-33">
|
||||
<i class="fa fa-asterisk"></i>
|
||||
</div>
|
||||
<div class="col-66">
|
||||
<span>Vibration</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.flashLight')">
|
||||
<div class="col-33">
|
||||
<i class="fa fa-bolt"></i>
|
||||
</div>
|
||||
<div class="col-66">
|
||||
<span>Flashlight</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.deviceInformation')">
|
||||
<div class="col-33">
|
||||
<i class="fa fa-info"></i>
|
||||
</div>
|
||||
<div class="col-66">
|
||||
<span>Device Information</span>
|
||||
</div>
|
||||
</div>
|
||||
<md-subheader class="md-warn">Material User Interface</md-subheader>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.dashboard')">
|
||||
<div class="col-33">
|
||||
<i class="fa fa-th-list"></i>
|
||||
</div>
|
||||
<div class="col-66">
|
||||
<span>Dashboard</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.defaultUI')">
|
||||
<div class="col-33">
|
||||
<i class="fa fa-bookmark-o"></i>
|
||||
</div>
|
||||
<div class="col-66">
|
||||
<span>Default UI</span>
|
||||
</div>
|
||||
</div>
|
||||
<md-subheader class="md-warn">Themes</md-subheader>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.tryAppNoBackBtn')">
|
||||
<div class="col-33">
|
||||
<i class="fa fa-diamond"></i>
|
||||
</div>
|
||||
<div class="col-66">
|
||||
<span>Try App</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.pricing')">
|
||||
<div class="col-33">
|
||||
<i class="fa fa-line-chart"></i>
|
||||
</div>
|
||||
<div class="col-66">
|
||||
<span>Pricing</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.menuDashboard')">
|
||||
<div class="col-33">
|
||||
<i class="fa fa-th-large"></i>
|
||||
</div>
|
||||
<div class="col-66">
|
||||
<span>Menu Dashboard</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.expense')">
|
||||
<div class="col-33">
|
||||
<i class="fa fa-suitcase"></i>
|
||||
</div>
|
||||
<div class="col-66">
|
||||
<span>Expense</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.newsFeed')">
|
||||
<div class="col-33">
|
||||
<i class="fa fa-newspaper-o"></i>
|
||||
</div>
|
||||
<div class="col-66">
|
||||
<span>News Feed</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.onlineCourse')">
|
||||
<div class="col-33">
|
||||
<i class="fa fa-graduation-cap"></i>
|
||||
</div>
|
||||
<div class="col-66">
|
||||
<span>Online Course</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.locationFeed')">
|
||||
<div class="col-33">
|
||||
<i class="fa fa-flag"></i>
|
||||
</div>
|
||||
<div class="col-66">
|
||||
<span>Location Feed</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.cubeFeed')">
|
||||
<div class="col-33">
|
||||
<i class="fa fa-cubes"></i>
|
||||
</div>
|
||||
<div class="col-66">
|
||||
<span>Cube Feed</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.clothShop')">
|
||||
<div class="col-33">
|
||||
<i class="fa fa-heart"></i>
|
||||
</div>
|
||||
<div class="col-66">
|
||||
<span>Cloth Shop</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.catalog')">
|
||||
<div class="col-33">
|
||||
<i class="fa fa-tags"></i>
|
||||
</div>
|
||||
<div class="col-66">
|
||||
<span>Catalog</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row menu-item" ng-click="navigateTo('app.restaurant')">
|
||||
<div class="col-33">
|
||||
<i class="fa fa-cutlery"></i>
|
||||
</div>
|
||||
<div class="col-66">
|
||||
<span>Restaurant</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!--If device is not Android application will present below code.-->
|
||||
<!--It will show animation when selecting row.-->
|
||||
<md-list ng-if="!isAndroid">
|
||||
<md-subheader class="md-warn">Application Storage</md-subheader>
|
||||
<md-list-item class="menu-list-item" ng-click="navigateTo('app.contractlist')">
|
||||
<i class="fa fa-database"></i>
|
||||
<span>SQLite DB</span>
|
||||
</md-list-item>
|
||||
<md-list-item class="menu-list-item" ng-click="navigateTo('app.notelist')">
|
||||
<i class="fa fa-cube"></i>
|
||||
<span>Local Storage DB</span>
|
||||
</md-list-item>
|
||||
<md-subheader class="md-warn">Social Network Connect</md-subheader>
|
||||
<md-list-item class="menu-list-item" ng-click="navigateTo('app.wordpressLogin')">
|
||||
<i class="fa fa-wordpress"></i>
|
||||
<span>WordPress</span>
|
||||
</md-list-item>
|
||||
<md-list-item class="menu-list-item" ng-click="navigateTo('app.facebookLogin')">
|
||||
<i class="fa fa-facebook"></i>
|
||||
<span>Facebook</span>
|
||||
</md-list-item>
|
||||
<md-list-item class="menu-list-item" ng-click="navigateTo('app.googlePlusLogin')">
|
||||
<i class="fa fa-google-plus"></i>
|
||||
<span>Google Plus</span>
|
||||
</md-list-item>
|
||||
<md-list-item class="menu-list-item" ng-click="navigateTo('app.instagramLogin')">
|
||||
<i class="fa fa-instagram"></i>
|
||||
<span>Instagram</span>
|
||||
</md-list-item>
|
||||
<md-list-item class="menu-list-item" ng-click="navigateTo('app.foursquareLogin')">
|
||||
<i class="fa fa-foursquare"></i>
|
||||
<span>Foursquare</span>
|
||||
</md-list-item>
|
||||
<md-list-item class="menu-list-item" ng-click="navigateTo('app.dropboxLogin')">
|
||||
<i class="fa fa-dropbox"></i>
|
||||
<span>Dropbox</span>
|
||||
</md-list-item>
|
||||
<md-subheader class="md-warn">Share Application Content</md-subheader>
|
||||
<md-list-item class="menu-list-item" ng-click="navigateTo('app.productList')">
|
||||
<i class="fa fa-share-alt"></i>
|
||||
<span>Social Share</span>
|
||||
</md-list-item>
|
||||
<md-list-item class="menu-list-item" ng-click="navigateTo('app.contractUs')">
|
||||
<i class="fa fa-inbox"></i>
|
||||
<span>Email & Message</span>
|
||||
</md-list-item>
|
||||
<md-subheader class="md-warn">Advertising Application</md-subheader>
|
||||
<md-list-item class="menu-list-item" ng-click="navigateTo('app.googleAdmob')">
|
||||
<i class="fa fa-money"></i>
|
||||
<span>Google AdMob</span>
|
||||
</md-list-item>
|
||||
<md-subheader class="md-warn">Push Notification</md-subheader>
|
||||
<md-list-item class="menu-list-item" ng-click="navigateTo('app.singlePushNotification')">
|
||||
<i class="fa fa-sign-in fa-rotate-90"></i>
|
||||
<span>Single Push</span>
|
||||
</md-list-item>
|
||||
<md-list-item class="menu-list-item" ng-click="navigateTo('app.schedulePushNotification')">
|
||||
<i class="fa fa-clock-o"></i>
|
||||
<span>Schedule Push</span>
|
||||
</md-list-item>
|
||||
<md-subheader class="md-warn">Map API Connect</md-subheader>
|
||||
<md-list-item class="menu-list-item" ng-click="navigateTo('app.iosMapConnect')">
|
||||
<i class="fa fa-map-o"></i>
|
||||
<span>IOS Map</span>
|
||||
</md-list-item>
|
||||
<md-list-item class="menu-list-item" ng-click="navigateTo('app.androidMapConnect')">
|
||||
<i class="fa fa-map"></i>
|
||||
<span>Android Map</span>
|
||||
</md-list-item>
|
||||
<md-subheader class="md-warn">Hardware Connect</md-subheader>
|
||||
<md-list-item class="menu-list-item" ng-click="navigateTo('app.mobileContractList')">
|
||||
<i class="fa fa-users"></i>
|
||||
<span>Mobile Contract</span>
|
||||
</md-list-item>
|
||||
<md-list-item class="menu-list-item" ng-click="navigateTo('app.imagePicker')">
|
||||
<i class="fa fa-picture-o"></i>
|
||||
<span>Image Picker</span>
|
||||
</md-list-item>
|
||||
<md-list-item class="menu-list-item" ng-click="navigateTo('app.vibration')">
|
||||
<i class="fa fa-asterisk"></i>
|
||||
<span>Vibration</span>
|
||||
</md-list-item>
|
||||
<md-list-item class="menu-list-item" ng-click="navigateTo('app.flashLight')">
|
||||
<i class="fa fa-bolt"></i>
|
||||
<span>Flashlight</span>
|
||||
</md-list-item>
|
||||
<md-list-item class="menu-list-item" ng-click="navigateTo('app.deviceInformation')">
|
||||
<i class="fa fa-info"></i>
|
||||
<span>Device Information</span>
|
||||
</md-list-item>
|
||||
<md-subheader class="md-warn">Material User Interface</md-subheader>
|
||||
<md-list-item class="menu-list-item" ng-click="navigateTo('app.dashboard')">
|
||||
<i class="fa fa-th-list"></i>
|
||||
<span>Dashboard</span>
|
||||
</md-list-item>
|
||||
<md-list-item class="menu-list-item" ng-click="navigateTo('app.defaultUI')">
|
||||
<i class="fa fa-bookmark-o"></i>
|
||||
<span>Default UI</span>
|
||||
</md-list-item>
|
||||
<md-subheader class="md-warn">Themes</md-subheader>
|
||||
<md-list-item class="menu-list-item" ng-click="navigateTo('app.tryAppNoBackBtn')">
|
||||
<i class="fa fa-diamond"></i>
|
||||
<span>Try App</span>
|
||||
</md-list-item>
|
||||
<md-list-item class="menu-list-item" ng-click="navigateTo('app.pricing')">
|
||||
<i class="fa fa-line-chart"></i>
|
||||
<span>Pricing</span>
|
||||
</md-list-item>
|
||||
<md-list-item class="menu-list-item" ng-click="navigateTo('app.menuDashboard')">
|
||||
<i class="fa fa-th-large"></i>
|
||||
<span>Menu Dashboard</span>
|
||||
</md-list-item>
|
||||
<md-list-item class="menu-list-item" ng-click="navigateTo('app.expense')">
|
||||
<i class="fa fa-suitcase"></i>
|
||||
<span>Expense</span>
|
||||
</md-list-item>
|
||||
<md-list-item class="menu-list-item" ng-click="navigateTo('app.newsFeed')">
|
||||
<i class="fa fa-newspaper-o"></i>
|
||||
<span>News Feed</span>
|
||||
</md-list-item>
|
||||
<md-list-item class="menu-list-item" ng-click="navigateTo('app.onlineCourse')">
|
||||
<i class="fa fa-graduation-cap"></i>
|
||||
<span>Online Course</span>
|
||||
</md-list-item>
|
||||
<md-list-item class="menu-list-item" ng-click="navigateTo('app.locationFeed')">
|
||||
<i class="fa fa-flag"></i>
|
||||
<span>Location Feed</span>
|
||||
</md-list-item>
|
||||
<md-list-item class="menu-list-item" ng-click="navigateTo('app.cubeFeed')">
|
||||
<i class="fa fa-cubes"></i>
|
||||
<span>Cube Feed</span>
|
||||
</md-list-item>
|
||||
<md-list-item class="menu-list-item" ng-click="navigateTo('app.clothShop')">
|
||||
<i class="fa fa-heart"></i>
|
||||
<span>Cloth Shop</span>
|
||||
</md-list-item>
|
||||
<md-list-item class="menu-list-item" ng-click="navigateTo('app.catalog')">
|
||||
<i class="fa fa-tags"></i>
|
||||
<span>Catalog</span>
|
||||
</md-list-item>
|
||||
<md-list-item class="menu-list-item" ng-click="navigateTo('app.restaurant')">
|
||||
<i class="fa fa-cutlery"></i>
|
||||
<span>Restaurant</span>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
<!--end list section-->
|
||||
</ion-content><!--end menu content section-->
|
||||
<!--end menu section-->
|
||||
|
||||
</md-sidenav>
|
||||
</ion-side-menus>
|
||||
143
IonicMaterialDesign/www/templates/menu/js/controllers.js
Normal file
143
IonicMaterialDesign/www/templates/menu/js/controllers.js
Normal file
@@ -0,0 +1,143 @@
|
||||
// Controller of menu toggle.
|
||||
// Learn more about Sidenav directive of angular material
|
||||
// https://material.angularjs.org/latest/#/demo/material.components.sidenav
|
||||
appControllers.controller('menuCtrl', function ($scope, $timeout, $mdUtil, $mdSidenav, $log, $ionicHistory, $state, $ionicPlatform, $mdDialog, $mdBottomSheet, $mdMenu, $mdSelect) {
|
||||
|
||||
$scope.toggleLeft = buildToggler('left');
|
||||
|
||||
// buildToggler is for create menu toggle.
|
||||
// Parameter :
|
||||
// navID = id of navigation bar.
|
||||
function buildToggler(navID) {
|
||||
var debounceFn = $mdUtil.debounce(function () {
|
||||
$mdSidenav(navID).toggle();
|
||||
}, 0);
|
||||
return debounceFn;
|
||||
};// End buildToggler.
|
||||
|
||||
// navigateTo is for navigate to other page
|
||||
// by using targetPage to be the destination state.
|
||||
// Parameter :
|
||||
// stateNames = target state to go
|
||||
$scope.navigateTo = function (stateName) {
|
||||
$timeout(function () {
|
||||
$mdSidenav('left').close();
|
||||
if ($ionicHistory.currentStateName() != stateName) {
|
||||
$ionicHistory.nextViewOptions({
|
||||
disableAnimate: true,
|
||||
disableBack: true
|
||||
});
|
||||
$state.go(stateName);
|
||||
}
|
||||
}, ($scope.isAndroid == false ? 300 : 0));
|
||||
};// End navigateTo.
|
||||
|
||||
//closeSideNav is for close side navigation
|
||||
//It will use with event on-swipe-left="closeSideNav()" on-drag-left="closeSideNav()"
|
||||
//When user swipe or drag md-sidenav to left side
|
||||
$scope.closeSideNav = function(){
|
||||
$mdSidenav('left').close();
|
||||
};
|
||||
//End closeSideNav
|
||||
|
||||
// $ionicPlatform.registerBackButtonAction(callback, priority, [actionId])
|
||||
//
|
||||
// Register a hardware back button action. Only one action will execute
|
||||
// when the back button is clicked, so this method decides which of
|
||||
// the registered back button actions has the highest priority.
|
||||
//
|
||||
// For example, if an actionsheet is showing, the back button should
|
||||
// close the actionsheet, but it should not also go back a page view
|
||||
// or close a modal which may be open.
|
||||
//
|
||||
// The priorities for the existing back button hooks are as follows:
|
||||
// Return to previous view = 100
|
||||
// Close side menu = 150
|
||||
// Dismiss modal = 200
|
||||
// Close action sheet = 300
|
||||
// Dismiss popup = 400
|
||||
// Dismiss loading overlay = 500
|
||||
//
|
||||
// Your back button action will override each of the above actions
|
||||
// whose priority is less than the priority you provide. For example,
|
||||
// an action assigned a priority of 101 will override the ‘return to
|
||||
// previous view’ action, but not any of the other actions.
|
||||
//
|
||||
// Learn more at : http://ionicframework.com/docs/api/service/$ionicPlatform/#registerBackButtonAction
|
||||
|
||||
$ionicPlatform.registerBackButtonAction(function(){
|
||||
|
||||
if($mdSidenav("left").isOpen()){
|
||||
//If side navigation is open it will close and then return
|
||||
$mdSidenav('left').close();
|
||||
}
|
||||
else if(jQuery('md-bottom-sheet').length > 0 ) {
|
||||
//If bottom sheet is open it will close and then return
|
||||
$mdBottomSheet.cancel();
|
||||
}
|
||||
else if(jQuery('[id^=dialog]').length > 0 ){
|
||||
//If popup dialog is open it will close and then return
|
||||
$mdDialog.cancel();
|
||||
}
|
||||
else if(jQuery('md-menu-content').length > 0 ){
|
||||
//If md-menu is open it will close and then return
|
||||
$mdMenu.hide();
|
||||
}
|
||||
else if(jQuery('md-select-menu').length > 0 ){
|
||||
//If md-select is open it will close and then return
|
||||
$mdSelect.hide();
|
||||
}
|
||||
|
||||
else{
|
||||
|
||||
// If control :
|
||||
// side navigation,
|
||||
// bottom sheet,
|
||||
// popup dialog,
|
||||
// md-menu,
|
||||
// md-select
|
||||
// is not opening, It will show $mdDialog to ask for
|
||||
// Confirmation to close the application or go to the view of lasted state.
|
||||
|
||||
// Check for the current state that not have previous state.
|
||||
// It will show $mdDialog to ask for Confirmation to close the application.
|
||||
|
||||
if($ionicHistory.backView() == null){
|
||||
|
||||
//Check is popup dialog is not open.
|
||||
if(jQuery('[id^=dialog]').length == 0 ) {
|
||||
|
||||
// mdDialog for show $mdDialog to ask for
|
||||
// Confirmation to close the application.
|
||||
|
||||
$mdDialog.show({
|
||||
controller: 'DialogController',
|
||||
templateUrl: 'confirm-dialog.html',
|
||||
targetEvent: null,
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: "Confirmation",
|
||||
content: "Do you want to close the application?",
|
||||
ok: "Confirm",
|
||||
cancel: "Cancel"
|
||||
}
|
||||
}
|
||||
}).then(function () {
|
||||
//If user tap Confirm at the popup dialog.
|
||||
//Application will close.
|
||||
ionic.Platform.exitApp();
|
||||
}, function () {
|
||||
// For cancel button actions.
|
||||
}); //End mdDialog
|
||||
}
|
||||
}
|
||||
else{
|
||||
//Go to the view of lasted state.
|
||||
$ionicHistory.goBack();
|
||||
}
|
||||
}
|
||||
|
||||
},100);
|
||||
//End of $ionicPlatform.registerBackButtonAction
|
||||
|
||||
}); // End of menu toggle controller.
|
||||
@@ -0,0 +1,59 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Schedule Push Notification-->
|
||||
<!--Controller name : schedulePushNotificationCtrl-->
|
||||
<!--Controller path : www/templates/push-notification/schedule-push-notification/js/controllers.js-->
|
||||
<!--State name : app.schedulePushNotification-->
|
||||
<!--URL : #app/schedulePushNotification-->
|
||||
|
||||
<ion-view title="Schedule Push Notification">
|
||||
<!--push notification section-->
|
||||
<ion-content id="push-notification">
|
||||
<!--header section-->
|
||||
<form>
|
||||
<div>
|
||||
<i class="fa fa-clock-o md-primary-color"></i>
|
||||
</div>
|
||||
<div class="sub-header">Schedule Push Notification</div>
|
||||
<br/>
|
||||
</form><!--end header section-->
|
||||
|
||||
<!--notification option section-->
|
||||
<div class="notification-option">
|
||||
|
||||
<md-input-container md-no-float="">
|
||||
<input ng-model="notificationMessage" placeholder="Notification Message Here.">
|
||||
</md-input-container>
|
||||
|
||||
<md-input-container md-no-float="">
|
||||
<input ng-model="startNotificationIn" placeholder="How many second to start send? " numbers-only type="tel">
|
||||
</md-input-container>
|
||||
|
||||
<md-input-container md-no-float="">
|
||||
<md-select ng-model="mdSelectValue" aria-label="md-option">
|
||||
<md-option value="minute">Send Every Minute </md-option>
|
||||
<md-option value="hour">Send Every Hour </md-option>
|
||||
<md-option value="week">Send Every Week </md-option>
|
||||
<md-option value="month">Send Every Month </md-option>
|
||||
<md-option value="year">Send Every Year </md-option>
|
||||
<md-option value="day">Send Every Day </md-option>
|
||||
</md-select>
|
||||
</md-input-container>
|
||||
|
||||
<a class="md-raised social-button md-button md-default-theme material-background"
|
||||
ng-click="schedulePush(notificationMessage,startNotificationIn,mdSelectValue)">
|
||||
Send Push Notification
|
||||
</a>
|
||||
<br/>
|
||||
<a class="md-raised social-button md-button md-default-theme material-background"
|
||||
ng-click="clearAllNotification()">
|
||||
Clear All Push Notification
|
||||
</a>
|
||||
|
||||
<!--footer section-->
|
||||
<div class="footer">
|
||||
Push Notification will show at <br/> Notification center of your devise.
|
||||
</div><!--end footer section-->
|
||||
</div><!--end notification option section-->
|
||||
</ion-content><!--end push notification section-->
|
||||
</ion-view>
|
||||
|
||||
@@ -0,0 +1,152 @@
|
||||
// For using Local Push Notification you have to install cordova-plugin-local-notifications by running the following
|
||||
// command in your cmd.exe for windows or terminal for mac:
|
||||
// $ cd your_project_path
|
||||
// $ ionic plugin add https://github.com/katzer/cordova-plugin-local-notifications
|
||||
//
|
||||
// Push Notification will show at Notification center of your devise.
|
||||
// Controller of Schedule Push Notification page.
|
||||
appControllers.controller('schedulePushNotificationCtrl', function ($scope, $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 () {
|
||||
// mdSelectValue is variable for md-select.
|
||||
$scope.mdSelectValue = "minute";
|
||||
|
||||
// notificationMessage is variable for message that going to sent push notification.
|
||||
$scope.notificationMessage = "";
|
||||
|
||||
// startNotificationIn is variable that use for calculate for start time of send push notification.
|
||||
$scope.startNotificationIn = "";
|
||||
|
||||
$scope.setUpPushNotification();
|
||||
};// End initialForm.
|
||||
|
||||
// setUpPushNotification is for set up the mobile to allow push notification from application.
|
||||
$scope.setUpPushNotification = function(){
|
||||
document.addEventListener('deviceready', function() {
|
||||
|
||||
//To check that application have permission that allow push notification or not.
|
||||
cordova.plugins.notification.local.hasPermission(function(granted) {
|
||||
if (granted == false) {
|
||||
// To asking mobile for the permission to allow push notification.
|
||||
cordova.plugins.notification.local.registerPermission(function(granted) {
|
||||
console.log('registerPermission has been granted: ' + granted);
|
||||
});
|
||||
}
|
||||
});
|
||||
}, false);
|
||||
};// End setUpPushNotification.
|
||||
|
||||
|
||||
// schedulePush is for send schedule push notification.
|
||||
// Parameter :
|
||||
// message = message that going to sent push notification.
|
||||
// startNotificationIn = use for calculate for start time of send push notification.
|
||||
// processEvery :
|
||||
// value of process type that select from the view.
|
||||
// The possible value is only: "minute", "hour", "week", "month", "year","day".
|
||||
$scope.schedulePush = function(message,startNotificationIn,processEvery) {
|
||||
// Get current time.
|
||||
var now = new Date().getTime();
|
||||
// Get start process time of send a push notification.
|
||||
var startProcessTime = new Date(now + startNotificationIn * 1000);
|
||||
|
||||
try{
|
||||
// Send schedule push notification
|
||||
// When call a plugins.notification.local have to call in deviceready function.
|
||||
document.addEventListener('deviceready', function () {
|
||||
// Calling plugins.notification.local.schedule to send push notification.
|
||||
cordova.plugins.notification.local.schedule({
|
||||
id: 1,
|
||||
text: "Message: " + message,
|
||||
at: startProcessTime,
|
||||
every: processEvery
|
||||
});
|
||||
|
||||
// Showing toast for send schedule push notification success.
|
||||
$mdToast.show({
|
||||
controller: 'toastController',
|
||||
templateUrl: 'toast.html',
|
||||
hideDelay: 400,
|
||||
position: 'top',
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: "Message: " + message
|
||||
}
|
||||
}
|
||||
});//End showing toast.
|
||||
|
||||
}, false);// End Send schedule push notification
|
||||
}
|
||||
catch (e) {
|
||||
|
||||
// Showing toast for unable to send schedule push notification.
|
||||
$mdToast.show({
|
||||
controller: 'toastController',
|
||||
templateUrl: 'toast.html',
|
||||
hideDelay: 800,
|
||||
position: 'top',
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: window.globalVariable.message.errorMessage
|
||||
}
|
||||
}
|
||||
});// End showing toast.
|
||||
}
|
||||
|
||||
};// End schedulePush.
|
||||
|
||||
// callback is for get push notification ID that prepare for clear all push notification.
|
||||
$scope.callback = function() {
|
||||
// When call a plugins.notification.local have to call in deviceready function.
|
||||
document.addEventListener('deviceready', function() {
|
||||
// Calling plugins.notification.local.getIds to get push notification ids.
|
||||
cordova.plugins.notification.local.getIds(function(ids) {});
|
||||
}, false);
|
||||
};// End callback.
|
||||
|
||||
// clearAllNotification is for clear all push notification.
|
||||
$scope.clearAllNotification = function() {
|
||||
|
||||
try{
|
||||
// Clear All push Notification
|
||||
// When call a plugins.notification.cancelAll have to call in deviceready function.
|
||||
document.addEventListener('deviceready', function() {
|
||||
// Calling plugins.notification.local.cancelAll to clear all push notification.
|
||||
cordova.plugins.notification.local.cancelAll($scope.callback);
|
||||
|
||||
// Showing toast for clear all push notification success.
|
||||
$mdToast.show({
|
||||
controller: 'toastController',
|
||||
templateUrl: 'toast.html',
|
||||
hideDelay: 400,
|
||||
position: 'top',
|
||||
locals: {
|
||||
displayOption: {
|
||||
title:"Clear All Notification Success."
|
||||
}
|
||||
}
|
||||
});//End showing toast.
|
||||
|
||||
}, false);
|
||||
}
|
||||
catch (e) {
|
||||
|
||||
// Showing toast for unable to clear all push notification.
|
||||
$mdToast.show({
|
||||
controller: 'toastController',
|
||||
templateUrl: 'toast.html',
|
||||
hideDelay: 800,
|
||||
position: 'top',
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: window.globalVariable.message.errorMessage
|
||||
}
|
||||
}
|
||||
});// End showing toast.
|
||||
}
|
||||
};// End clearAllNotification.
|
||||
$scope.initialForm();
|
||||
|
||||
});// End of controller Schedule Push Notification.
|
||||
@@ -0,0 +1,42 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Single Push Notification-->
|
||||
<!--Controller name : singlePushNotificationCtrl-->
|
||||
<!--Controller path : www/templates/push-notification/single-push-notification/js/controllers.js-->
|
||||
<!--State name : app.singlePushNotification-->
|
||||
<!--URL : #app/singlePushNotification-->
|
||||
|
||||
<ion-view title="Single Push Notification">
|
||||
<!--push notification section-->
|
||||
<ion-content id="push-notification">
|
||||
<!--header section-->
|
||||
<form>
|
||||
<div>
|
||||
<i class="fa fa-sign-in fa-rotate-90 md-primary-color"></i>
|
||||
</div>
|
||||
<div class="sub-header">Single Push Notification</div>
|
||||
<br/>
|
||||
</form><!--end header section-->
|
||||
|
||||
<!--notification option section-->
|
||||
<div class="notification-option">
|
||||
|
||||
<md-input-container md-no-float="">
|
||||
<input ng-model="notificationMessage" placeholder="Notification Message Here.">
|
||||
</md-input-container>
|
||||
<a class="md-raised social-button md-button md-default-theme material-background"
|
||||
ng-click="singlePush(notificationMessage)">
|
||||
Send Push Notification
|
||||
</a>
|
||||
<br/>
|
||||
<a class="md-raised social-button md-button md-default-theme material-background"
|
||||
ng-click="clearAllNotification()">
|
||||
Clear All Push Notification
|
||||
</a>
|
||||
|
||||
<!--footer section-->
|
||||
<div class="footer">
|
||||
Push Notification will show at <br/> Notification center of your devise.
|
||||
</div><!--end footer section-->
|
||||
</div><!--end notification option section-->
|
||||
</ion-content><!--end push notification section-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,134 @@
|
||||
// For using Local Push Notification you have to install cordova-plugin-local-notifications by running the following
|
||||
// command in your cmd.exe for windows or terminal for mac:
|
||||
// $ cd your_project_path
|
||||
// $ ionic plugin add https://github.com/katzer/cordova-plugin-local-notifications
|
||||
//
|
||||
// Push Notification will show at Notification center of your devise.
|
||||
// Controller of Single Push Notification page.
|
||||
appControllers.controller('singlePushNotificationCtrl', function($scope, $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 () {
|
||||
// message is variable for message that going to sent push.
|
||||
$scope.notificationMessage = "";
|
||||
$scope.setUpPushNotification();
|
||||
};// End initialForm.
|
||||
|
||||
// setUpPushNotification is for set up the mobile to allow push notification from application.
|
||||
$scope.setUpPushNotification = function(){
|
||||
document.addEventListener('deviceready', function() {
|
||||
//To check that application have permission that allow push notification or not.
|
||||
cordova.plugins.notification.local.hasPermission(function(granted) {
|
||||
if (granted == false) {
|
||||
// To asking mobile for the permission to allow push notification.
|
||||
cordova.plugins.notification.local.registerPermission(function(granted) {
|
||||
console.log('registerPermission has been granted: ' + granted);
|
||||
});
|
||||
}
|
||||
});
|
||||
}, false);
|
||||
};// End setUpPushNotification.
|
||||
|
||||
// singlePush is for send single push notification.
|
||||
// Parameter :
|
||||
// message = message that going to sent push notification.
|
||||
$scope.singlePush = function(message) {
|
||||
|
||||
try{
|
||||
// Send push notification
|
||||
// When call a plugins.notification.local have to call in deviceready function.
|
||||
document.addEventListener('deviceready', function() {
|
||||
// Calling plugins.notification.local.schedule to send push.
|
||||
cordova.plugins.notification.local.schedule({
|
||||
text: "Message: " + message,
|
||||
icon: "img/icon.png"
|
||||
});
|
||||
|
||||
// Showing toast for send push notification success.
|
||||
$mdToast.show({
|
||||
controller: 'toastController',
|
||||
templateUrl: 'toast.html',
|
||||
hideDelay: 400,
|
||||
position: 'top',
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: "Message: " + message
|
||||
}
|
||||
}
|
||||
});//End showing toast.
|
||||
|
||||
}, false);// End Send push notification
|
||||
}
|
||||
catch (e) {
|
||||
|
||||
// Showing toast for unable to send push notification.
|
||||
$mdToast.show({
|
||||
controller: 'toastController',
|
||||
templateUrl: 'toast.html',
|
||||
hideDelay: 800,
|
||||
position: 'top',
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: window.globalVariable.message.errorMessage
|
||||
}
|
||||
}
|
||||
});// End showing toast.
|
||||
}
|
||||
|
||||
};// End schedulePush.
|
||||
|
||||
// callback is for get push ID that prepare for clear all push notification.
|
||||
$scope.callback = function() {
|
||||
// When call a plugins.notification.local have to call in deviceready function.
|
||||
document.addEventListener('deviceready', function() {
|
||||
// Calling plugins.notification.local.getIds to get push ids.
|
||||
cordova.plugins.notification.local.getIds(function(ids) {});
|
||||
}, false);
|
||||
};// End callback.
|
||||
|
||||
// clearAllNotification is for clear all push notification.
|
||||
$scope.clearAllNotification = function() {
|
||||
|
||||
try{
|
||||
// Clear All push Notification
|
||||
// When call a plugins.notification.cancelAll have to call in deviceready function.
|
||||
document.addEventListener('deviceready', function() {
|
||||
// Calling plugins.notification.local.cancelAll to clear all push notification.
|
||||
cordova.plugins.notification.local.cancelAll($scope.callback);
|
||||
|
||||
// Showing toast for clear all push notification success.
|
||||
$mdToast.show({
|
||||
controller: 'toastController',
|
||||
templateUrl: 'toast.html',
|
||||
hideDelay: 400,
|
||||
position: 'top',
|
||||
locals: {
|
||||
displayOption: {
|
||||
title:"Clear All Notification Success."
|
||||
}
|
||||
}
|
||||
});//End showing toast.
|
||||
|
||||
}, false);
|
||||
}
|
||||
catch (e) {
|
||||
|
||||
// Showing toast for unable to clear all push notification.
|
||||
$mdToast.show({
|
||||
controller: 'toastController',
|
||||
templateUrl: 'toast.html',
|
||||
hideDelay: 800,
|
||||
position: 'top',
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: window.globalVariable.message.errorMessage
|
||||
}
|
||||
}
|
||||
});// End showing toast.
|
||||
}
|
||||
|
||||
};// End clearAllNotification.
|
||||
|
||||
$scope.initialForm();
|
||||
|
||||
}); // End of controller Single Push Notification.
|
||||
@@ -0,0 +1,75 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Contract Us-->
|
||||
<!--Controller name : contractUsCtrl-->
|
||||
<!--Controller path : www/templates/share-application-content/email-message/js/controllers.js-->
|
||||
<!--State name : app.contractUs-->
|
||||
<!--URL : #app/contractUs-->
|
||||
|
||||
<ion-view view-title="">
|
||||
<!--toolbar section-->
|
||||
<md-toolbar class="md-tall md-primary toolbar-with-image">
|
||||
<div>
|
||||
<h1>Contract Us</h1>
|
||||
|
||||
<h2>We love Material Design</h2>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
<!--end toolbar section-->
|
||||
|
||||
<!--button section-->
|
||||
<a class="md-button md-accent md-fab fab-toolbar-medium"
|
||||
ng-click="callTo(contractInfo.telephone)"
|
||||
aria-label="Add">
|
||||
<i class="ion-android-call"></i>
|
||||
</a><!--end button section-->
|
||||
|
||||
<!--contract us section-->
|
||||
<ion-content id="contract-us-content">
|
||||
<!--header section-->
|
||||
<div class="row header">
|
||||
<div class="col">
|
||||
Contact Our Team:
|
||||
</div>
|
||||
|
||||
</div> <!--end header section-->
|
||||
|
||||
<!--content section-->
|
||||
<div class="row content">
|
||||
<div class="col-75">
|
||||
{{contractInfo.email}}
|
||||
</div>
|
||||
<div class="col-25">
|
||||
<i class="ion-android-mail" ng-click="sentEmail(contractInfo.email)"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row content">
|
||||
<div class="col-75">
|
||||
{{contractInfo.telephone}}
|
||||
</div>
|
||||
<div class="col-25">
|
||||
<i class="ion-android-textsms" ng-click="sentSms(contractInfo.telephone)"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row header">
|
||||
<div class="col">
|
||||
Address:
|
||||
</div>
|
||||
</div>
|
||||
<div class="row content">
|
||||
<div class="col-90">
|
||||
99 Sukhumvit Road
|
||||
<br/>
|
||||
Bangkok Thailand
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row content">
|
||||
<div class="col-90">
|
||||
Please contract us if you have any questions.
|
||||
</div>
|
||||
</div>
|
||||
<!--end content section-->
|
||||
</ion-content><!--end contract us section-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,72 @@
|
||||
// For sent email you have to install $cordovaSocialSharing by running the following
|
||||
// command in your cmd.exe for windows or terminal for mac:
|
||||
// $ cd your_project_path
|
||||
// $ ionic plugin remove nl.x-services.plugins.socialsharing
|
||||
// $ ionic plugin add https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin.git
|
||||
//
|
||||
// Learn more about $cordovaSocialSharing :
|
||||
// http://ngcordova.com/docs/plugins/socialSharing/
|
||||
//
|
||||
// For sent message you have to install $cordovaSMS by running the following
|
||||
// command in your cmd.exe for windows or terminal for mac:
|
||||
// $ cd your_project_path
|
||||
// $ ionic plugin remove com.cordova.plugins.sms
|
||||
// $ ionic plugin add https://github.com/cordova-sms/cordova-sms-plugin.git
|
||||
//
|
||||
// Learn more about $cordovaSMS :
|
||||
// http://ngcordova.com/docs/plugins/sms/
|
||||
//
|
||||
//
|
||||
// For using mobile calling you must go to yourProjectPath/config.xml
|
||||
// and put this following code in the access area.
|
||||
// <access origin="tel:*" launch-external="yes"/>
|
||||
//
|
||||
// Controller of contract us page.
|
||||
appControllers.controller('contractUsCtrl', function ($scope, $cordovaSocialSharing, $cordovaSms) {
|
||||
|
||||
// This function 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.contractInfo is store contract us data
|
||||
$scope.contractInfo = {
|
||||
telephone: "099-999-9999",
|
||||
email: "ionicmaterialdesign@gmail.com"
|
||||
};
|
||||
};// End initialForm.
|
||||
|
||||
// sentSms is for send message by calling $cordovaSms
|
||||
// Parameter :
|
||||
// phoneNumber = number of sending message
|
||||
$scope.sentSms = function (phoneNumber) {
|
||||
//config options to sent message
|
||||
var options = {
|
||||
replaceLineBreaks: false, // true to replace \n by a new line, false by default.
|
||||
android: {
|
||||
intent: 'INTENT' // send SMS with the native android SMS messaging.
|
||||
//intent: '' // send SMS without open any other app.
|
||||
}
|
||||
};
|
||||
// calling $cordovaSms to sent message
|
||||
$cordovaSms.send(phoneNumber, " ", options);
|
||||
} // End sentSms.
|
||||
|
||||
// sentEmail is for send email by calling $cordovaSocialSharing.
|
||||
// Parameter :
|
||||
// email = email of receiver
|
||||
$scope.sentEmail = function (email) {
|
||||
$cordovaSocialSharing.shareViaEmail("", "", email, "", "", "");
|
||||
// format of sent email by using $cordovaSocialSharing is :
|
||||
//$cordovaSocialSharing.shareViaEmail(message, subject, toArr, ccArr, bccArr,file)
|
||||
// toArr, ccArr and bccArr must be an array, file can be either null, string or array.
|
||||
} // End sentEmail.
|
||||
|
||||
// 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 us controller.
|
||||
@@ -0,0 +1,131 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Product Checkout-->
|
||||
<!--Controller name : productCheckoutCtrl-->
|
||||
<!--Controller path : www/templates/share-application-content/social-share/js/controllers.js-->
|
||||
<!--State name : app.productCheckout-->
|
||||
<!--URL : #app/productCheckout-->
|
||||
|
||||
<ion-view view-title="Basket">
|
||||
<!--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-->
|
||||
|
||||
<!--product checkout section-->
|
||||
<!--product checkout header section-->
|
||||
<ion-header-bar class="bar-subheader" id="product-checkout-sub-header">
|
||||
<ion-scroll direction="x" id="product-checkout-product-list">
|
||||
|
||||
<div class="pin">
|
||||
<img ng-src="{{'img/shirt_01.png'}}"/>
|
||||
|
||||
<h1>Plain Shirt</h1>
|
||||
|
||||
<p>
|
||||
A shite with pain design.
|
||||
</p>
|
||||
|
||||
<div class="pin-footer">
|
||||
<span class="pin-footer text-left font-sale">$900</span>
|
||||
<span class="pin-footer text-left font-hot-sale">$90</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pin">
|
||||
<img ng-src="{{'img/shirt_02.png'}}"/>
|
||||
|
||||
<h1>Spring Shirt</h1>
|
||||
|
||||
<p>
|
||||
Made by high quality silk.
|
||||
</p>
|
||||
|
||||
<div class="pin-footer">
|
||||
<span class="pin-footer text-left font-sale">$100</span>
|
||||
<span class="pin-footer text-left font-hot-sale">$10</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pin">
|
||||
<img ng-src="{{'img/shirt_06.png'}}"/>
|
||||
|
||||
<h1>Green Shirt</h1>
|
||||
|
||||
<p>
|
||||
A shite with pain design.
|
||||
</p>
|
||||
|
||||
<div class="pin-footer">
|
||||
<span class="pin-footer text-left font-sale">$190</span>
|
||||
<span class="pin-footer text-left font-hot-sale">$19</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pin">
|
||||
<img ng-src="{{'img/shirt_05.png'}}"/>
|
||||
|
||||
<h1>Plain Shirt</h1>
|
||||
|
||||
<p>
|
||||
A shite with pain design.
|
||||
</p>
|
||||
|
||||
<div class="pin-footer">
|
||||
<span class="pin-footer text-left font-sale">$999</span>
|
||||
<span class="pin-footer text-left font-hot-sale">$99</span>
|
||||
</div>
|
||||
</div>
|
||||
</ion-scroll>
|
||||
</ion-header-bar> <!--end product checkout header section-->
|
||||
<!--product checkout content section-->
|
||||
<ion-content id="product-checkout-content">
|
||||
<div class="row">
|
||||
<div class="col total-summary">
|
||||
TOTAL <span class="font-hot-sale">$218</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row credit-card">
|
||||
<div class="col-25 credit-card-icon">
|
||||
<i class="fa fa-credit-card"></i>
|
||||
</div>
|
||||
<div class="col-67 credit-card-number">
|
||||
<span class="card-number"> XXXX XXXX XXXX 9999</span>
|
||||
</div>
|
||||
<div class="col-20">
|
||||
<md-menu md-position-mode="target-right target" class="md-list-item-md-menu-right">
|
||||
|
||||
<md-icon md-menu-origin ng-click="$mdOpenMenu()" md-svg-icon="more"></md-icon>
|
||||
|
||||
<md-menu-content width="3">
|
||||
<md-menu-item>
|
||||
<a class="md-button md-default-theme"
|
||||
ng-click="doSomeThing()">
|
||||
<span class="menu-item-button"> <i class="fa fa-credit-card"></i> : XXXX XXXX XXXX 8888</span>
|
||||
</a>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<a class="md-button md-default-theme" ng-click="doSomeThing()">
|
||||
<span class="menu-item-button"> <i class="fa fa-credit-card"></i> : XXXX XXXX XXXX 7777</span>
|
||||
</a>
|
||||
</md-menu-item>
|
||||
</md-menu-content>
|
||||
</md-menu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row shipping-address">
|
||||
<div class="col-50 address-icon">
|
||||
Shipping Address :
|
||||
</div>
|
||||
<div class="col-50 selected-address">99/999 Ionic Building...</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col complete-order">
|
||||
<a ng-click="showConfirmDialog($event)"
|
||||
class="md-raised social-button md-button md-default-theme material-background">
|
||||
Complete Order
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</ion-content><!--end product checkout content section-->
|
||||
<!--end product checkout section-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,176 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Product Detail-->
|
||||
<!--Controller name : productDetailCtrl-->
|
||||
<!--Controller path : www/templates/share-application-content/social-share/js/controllers.js-->
|
||||
<!--State name : app.productDetail-->
|
||||
<!--URL : #app/productDetail-->
|
||||
|
||||
<ion-view view-title="{{product.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-->
|
||||
|
||||
<!--product detail section-->
|
||||
<ion-content id="product-detail-content" class="fade-in">
|
||||
<md-content>
|
||||
<!--product tabs section-->
|
||||
<md-tabs md-border-bottom md-selected="0" id="product-detail-tabs" class="no-border">
|
||||
<!--product tab detail section-->
|
||||
<md-tab label="Detail">
|
||||
<md-content id="product-detail-tab-detail">
|
||||
<div class="toolbar-image-cover product" style="background-image: url('{{product.img}}');">
|
||||
</div>
|
||||
<a class="md-button md-accent md-fab fab-toolbar-medium"
|
||||
ng-click="sharedProduct($event,product)"
|
||||
aria-label="showListBottomSheet">
|
||||
<i class="ion-android-share-alt"></i>
|
||||
</a>
|
||||
|
||||
<div class="detail-form">
|
||||
<div class="header">
|
||||
<h1>{{product.title}}</h1>
|
||||
|
||||
<p>{{product.fullDetail}}</p>
|
||||
</div>
|
||||
<!--product tab detail price section-->
|
||||
<div class="product-detail-price">
|
||||
<div class="left">
|
||||
$<span class="font-sale">{{product.price | number : 2}}</span>
|
||||
<br/><span
|
||||
class="font-hot-sale"> ${{product.promotionPrice | number : 2}} </span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<a class="md-raised md-warn md-button md-default-theme" ng-click="addToCart()">
|
||||
ADD TO CART
|
||||
</a>
|
||||
</div>
|
||||
</div><!--end product tab detail price section-->
|
||||
|
||||
<!--product tab detail review section-->
|
||||
<div class="product-detail-review">
|
||||
<p>Best Seller :
|
||||
<span>
|
||||
<i class="fa fa-star"></i>
|
||||
<i class="fa fa-star"></i>
|
||||
<i class="fa fa-star"></i>
|
||||
<i class="fa fa-star"></i>
|
||||
<i class="fa fa-star"></i>
|
||||
</span>
|
||||
</p>
|
||||
</div><!--end product tab detail review section-->
|
||||
|
||||
<!--product tab detail shipping section-->
|
||||
<div class="product-detail-shipping row">
|
||||
<div class="col-67">
|
||||
<p>Item : MT098541A</p>
|
||||
|
||||
<p>Coupon : PR34221</p>
|
||||
|
||||
<p>Shipping : Free</p>
|
||||
|
||||
<p>Money Back : 30 Day</p>
|
||||
|
||||
</div>
|
||||
<div class="col-33">
|
||||
<p>In Stock</p>
|
||||
|
||||
<p><i class="fa fa-cube"></i></p>
|
||||
</div>
|
||||
</div><!--end product tab detail shipping section-->
|
||||
<!--product tab detail note section-->
|
||||
<div class="product-detail-note">
|
||||
|
||||
<p>Sharing this get discount on top 20%</p>
|
||||
</div> <!--end product tab detail note section-->
|
||||
</div>
|
||||
</md-content>
|
||||
</md-tab><!--end product tab detail section-->
|
||||
|
||||
<!--product tab product section-->
|
||||
<md-tab label="Product">
|
||||
<md-content class="md-padding">
|
||||
<div id="product-detail-tab-product">
|
||||
<div>
|
||||
<h1>{{product.title}}</h1>
|
||||
|
||||
<p>{{product.fullDetail}}</p>
|
||||
</div>
|
||||
<!--pin section-->
|
||||
<div class="pin">
|
||||
<img ng-src="{{product.img}}"/>
|
||||
|
||||
<p>
|
||||
{{product.detail}}
|
||||
</p>
|
||||
|
||||
<div class="pin-footer">
|
||||
$<span class="pin-footer text-left font-sale">{{product.price}}</span>
|
||||
<span class="pin-footer text-left font-hot-sale">${{product.promotionPrice}}</span>
|
||||
</div>
|
||||
<a class="md-raised md-warn md-button md-default-theme"
|
||||
ng-click="addToCart()">
|
||||
ADD TO CART
|
||||
</a>
|
||||
</div> <!--end pin section-->
|
||||
|
||||
</div>
|
||||
</md-content>
|
||||
</md-tab> <!--product tab product section-->
|
||||
</md-tabs><!--end product tabs section-->
|
||||
</md-content>
|
||||
</ion-content>
|
||||
<!--end product detail section-->
|
||||
|
||||
<!--loading progress-->
|
||||
<div id="product-detail-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-->
|
||||
|
||||
<!--canvas for save image to local devise-->
|
||||
<canvas id="imgCanvas" class="display-none"></canvas>
|
||||
|
||||
<!--angular template section-->
|
||||
<script type="text/ng-template" id="bottom-sheet-shared.html">
|
||||
<md-bottom-sheet class="md-grid">
|
||||
<!--list section-->
|
||||
<md-list id="bottom-sheet-grid-md-list">
|
||||
<md-list-item>
|
||||
<a class="md-grid-item-content" ng-click="sharedFacebook()">
|
||||
<md-icon md-svg-src="facebook"></md-icon>
|
||||
<div class="md-grid-text"> Facebook</div>
|
||||
</a>
|
||||
</md-list-item>
|
||||
<md-list-item>
|
||||
<a class="md-grid-item-content" ng-click="sharedTwitter()">
|
||||
<md-icon md-svg-src="twitter"></md-icon>
|
||||
<div class="md-grid-text"> Twitter</div>
|
||||
</a>
|
||||
</md-list-item>
|
||||
<md-list-item>
|
||||
<a class="md-grid-item-content" ng-click="sharedMail()">
|
||||
<md-icon md-svg-src="mail"></md-icon>
|
||||
<div class="md-grid-text"> Mail</div>
|
||||
</a>
|
||||
</md-list-item>
|
||||
<md-list-item>
|
||||
<a class="md-grid-item-content" ng-click="saveImage()">
|
||||
<i class="ion-android-image"></i>
|
||||
|
||||
<div class="md-grid-text"> Save Image</div>
|
||||
</a>
|
||||
</md-list-item>
|
||||
<md-list-item>
|
||||
<a class="md-grid-item-content" ng-click="sharedMore()">
|
||||
<md-icon md-svg-src="share-arrow"></md-icon>
|
||||
<div class="md-grid-text"> More</div>
|
||||
</a>
|
||||
</md-list-item>
|
||||
</md-list> <!--end list section-->
|
||||
</md-bottom-sheet>
|
||||
</script>
|
||||
<!--end angular template section-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,86 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Product List-->
|
||||
<!--Controller name : productListCtrl-->
|
||||
<!--Controller path : www/templates/share-application-content/social-share/js/controllers.js-->
|
||||
<!--State name : app.productList-->
|
||||
<!--URL : #app/productList-->
|
||||
|
||||
<ion-view view-title="Material Shop">
|
||||
<!--product list section-->
|
||||
<ion-content id="product-list-content" class="fade-in">
|
||||
|
||||
<!--toolbar section-->
|
||||
<md-toolbar class="bar-subheader md-tall md-primary toolbar-medium toolbar-in-content">
|
||||
<div>
|
||||
<h1>SALE 90% OFF</h1>
|
||||
|
||||
<h2>Order Now !!</h2>
|
||||
|
||||
<h2>
|
||||
<i class="fa fa-diamond"></i>
|
||||
</h2>
|
||||
</div>
|
||||
</md-toolbar><!--end toolbar section-->
|
||||
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<!--pin section-->
|
||||
<div class="pin" ng-if="$even" ng-repeat="product in productList"
|
||||
ng-click="navigateTo('app.productDetail',product)">
|
||||
<img ng-src="{{product.img}}"/>
|
||||
|
||||
<h1>{{product.title}}</h1>
|
||||
|
||||
<p>
|
||||
{{product.detail}}
|
||||
</p>
|
||||
|
||||
<div class="pin-footer">
|
||||
$<span class="pin-footer text-left font-sale">{{product.price}}</span>
|
||||
<span class="pin-footer text-left font-hot-sale">${{product.promotionPrice}}</span>
|
||||
<span class="pin-footer text-right">+Add</span>
|
||||
</div>
|
||||
</div> <!--end pin section-->
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<!--pin section-->
|
||||
<div class="pin" ng-if="$odd" ng-repeat="product in productList"
|
||||
ng-click="navigateTo('app.productDetail',product)">
|
||||
<img ng-src="{{product.img}}"/>
|
||||
|
||||
<h1>{{product.title}}</h1>
|
||||
|
||||
<p>
|
||||
{{product.detail}}
|
||||
</p>
|
||||
|
||||
<div class="pin-footer">
|
||||
$<span class="pin-footer text-left font-sale">{{product.price}}</span>
|
||||
<span class="pin-footer text-left font-hot-sale">${{product.promotionPrice}}</span>
|
||||
<span class="pin-footer text-right">+Add</span>
|
||||
</div>
|
||||
</div> <!--end pin section-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ion-infinite-scroll on-infinite="loadMore()" distance="1%">
|
||||
</ion-infinite-scroll>
|
||||
</ion-content><!--end product list section-->
|
||||
|
||||
<!--button section-->
|
||||
<div class="footer-fab-bar">
|
||||
<a class="md-button md-accent md-fab fab-footer" ng-click="navigateTo('app.productCheckout')" aria-label="Add">
|
||||
<i class="fa fa-shopping-cart"></i>
|
||||
</a>
|
||||
</div>
|
||||
<!--end button section-->
|
||||
|
||||
<!--loading progress-->
|
||||
<div id="product-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,286 @@
|
||||
// For using social share you have to install $cordovaSocialSharing by running the following
|
||||
// command in your cmd.exe for windows or terminal for mac:
|
||||
// $ cd your_project_path
|
||||
// $ ionic plugin remove nl.x-services.plugins.socialsharing
|
||||
// $ ionic plugin add https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin.git
|
||||
//
|
||||
// Learn more about $cordovaSocialSharing :
|
||||
// http://ngcordova.com/docs/plugins/socialSharing/
|
||||
//
|
||||
// For using save image you have to install Canvas2ImagePlugin by running the following
|
||||
// command in your cmd.exe for windows or terminal for mac:
|
||||
// $ cd your_project_path
|
||||
// $ ionic plugin remove org.devgeeks.Canvas2ImagePlugin
|
||||
// $ ionic plugin add https://github.com/devgeeks/Canvas2ImagePlugin.git
|
||||
//
|
||||
// Learn more about Canvas2ImagePlugin :
|
||||
// https://github.com/devgeeks/Canvas2ImagePlugin
|
||||
//
|
||||
// Controller of product list Page.
|
||||
appControllers.controller('productListCtrl', function ($scope, $timeout, $state, $http) {
|
||||
|
||||
// This function 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.productList is the variable that store user product data.
|
||||
$scope.productList = [];
|
||||
|
||||
// Loading progress.
|
||||
$timeout(function () {
|
||||
if ($scope.isAndroid) {
|
||||
jQuery('#product-list-loading-progress').show();
|
||||
}
|
||||
else {
|
||||
jQuery('#product-list-loading-progress').fadeIn(700);
|
||||
}
|
||||
}, 400);
|
||||
$timeout(function () {
|
||||
jQuery('#product-list-loading-progress').hide();
|
||||
jQuery('#product-list-content').fadeIn();
|
||||
}, 4000);// End loading progress.
|
||||
};// End initialForm.
|
||||
|
||||
// navigateTo is for navigate to other page.
|
||||
// by using targetPage to be the destination page
|
||||
// and send object to the destination page.
|
||||
// Parameter :
|
||||
// targetPage = destination page.
|
||||
// objectData = object data that sent to destination page.
|
||||
$scope.navigateTo = function (targetPage, objectData) {
|
||||
$state.go(targetPage, {
|
||||
product: objectData
|
||||
});
|
||||
};// End navigateTo.
|
||||
|
||||
// loadMore is for loadMore product list.
|
||||
$scope.loadMore = function () {
|
||||
$timeout(function () {
|
||||
//get product list from json at paht: www/app-data/product-list.json
|
||||
$http.get('app-data/product-list.json')
|
||||
.success(function (productList) {
|
||||
// Success retrieve data.
|
||||
// Store user data to $scope.productList.
|
||||
for (var product = 0; product < productList.length; product++) {
|
||||
$scope.productList.push(productList[product]);
|
||||
}
|
||||
// To stop loading progress.
|
||||
$scope.$broadcast('scroll.infiniteScrollComplete');
|
||||
});
|
||||
}, 2000);
|
||||
};// End loadMore.
|
||||
|
||||
$scope.initialForm();
|
||||
|
||||
});// End of product list controller.
|
||||
|
||||
// Controller of product Detail Page.
|
||||
appControllers.controller('productDetailCtrl', function ($scope, $mdToast, $mdBottomSheet, $timeout, $stateParams) {
|
||||
|
||||
// This function 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.product is product detail
|
||||
// $stateParams.product is the object that pass from product list page.
|
||||
$scope.product = $stateParams.product;
|
||||
// Loading progress.
|
||||
$timeout(function () {
|
||||
if ($scope.isAndroid) {
|
||||
jQuery('#product-detail-loading-progress').show();
|
||||
}
|
||||
else {
|
||||
jQuery('#product-detail-loading-progress').fadeIn(700);
|
||||
}
|
||||
}, 400);
|
||||
$timeout(function () {
|
||||
jQuery('#product-detail-loading-progress').hide();
|
||||
jQuery('#product-detail-content').fadeIn();
|
||||
}, 3000);// End loading progress.
|
||||
};// End initialForm.
|
||||
|
||||
// addToCart for show Item Added ! toast.
|
||||
$scope.addToCart = function () {
|
||||
$mdToast.show({
|
||||
controller: 'toastController',
|
||||
templateUrl: 'toast.html',
|
||||
hideDelay: 800,
|
||||
position: 'top',
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: "Item Added !"
|
||||
}
|
||||
}
|
||||
});
|
||||
}; // End addToCart.
|
||||
|
||||
// sharedProduct fro show shared social bottom sheet by calling sharedSocialBottomSheetCtrl controller.
|
||||
$scope.sharedProduct = function ($event, product) {
|
||||
$mdBottomSheet.show({
|
||||
templateUrl: 'bottom-sheet-shared.html',
|
||||
controller: 'sharedSocialBottomSheetCtrl',
|
||||
targetEvent: $event,
|
||||
locals: {
|
||||
product: product
|
||||
}
|
||||
});
|
||||
};// End sharedProduct.
|
||||
|
||||
$scope.initialForm();
|
||||
});// End of product list controller.
|
||||
|
||||
// Controller of share social bottom sheet.
|
||||
appControllers.controller('sharedSocialBottomSheetCtrl', function ($scope, $mdBottomSheet, $timeout, product, $mdToast, $cordovaSocialSharing) {
|
||||
|
||||
// This function 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.setCanvasImage for set canvas image to save to your mobile gallery.
|
||||
$scope.setCanvasImage(product.img);
|
||||
//$scope.isSaving is image saving status.
|
||||
$scope.isSaving = false;
|
||||
};// End initialForm.
|
||||
|
||||
//setCanvasImage for set canvas image to save to your mobile gallery.
|
||||
$scope.setCanvasImage = function (imgPath) {
|
||||
// create canvas image.
|
||||
var canvas = document.getElementById('imgCanvas');
|
||||
var context = canvas.getContext('2d');
|
||||
var imageObj = new Image();
|
||||
|
||||
imageObj.onload = function () {
|
||||
canvas.height = this.height;
|
||||
canvas.width = this.width;
|
||||
context.drawImage(imageObj, 0, 0);
|
||||
};
|
||||
//image path.
|
||||
imageObj.src = imgPath;
|
||||
|
||||
return canvas.toDataURL();
|
||||
};// End setCanvasImage.
|
||||
|
||||
// getCanvasImageUrl for get canvas image path.
|
||||
$scope.getCanvasImageUrl = function () {
|
||||
var canvas = document.getElementById('imgCanvas');
|
||||
return canvas.toDataURL();
|
||||
};// End getCanvasImageUrl.
|
||||
|
||||
// sharedFacebook for share product picture to facebook by calling $cordovaSocialSharing.
|
||||
$scope.sharedFacebook = function () {
|
||||
$cordovaSocialSharing.shareViaFacebook(" ", $scope.getCanvasImageUrl());
|
||||
$mdBottomSheet.hide();
|
||||
}// End sharedFacebook.
|
||||
|
||||
// sharedTwitter for share product picture to twitter by calling $cordovaSocialSharing.
|
||||
$scope.sharedTwitter = function () {
|
||||
$cordovaSocialSharing.shareViaTwitter(" ", $scope.getCanvasImageUrl());
|
||||
$mdBottomSheet.hide();
|
||||
}// End sharedTwitter.
|
||||
|
||||
// sharedMail for share product picture to email by calling $cordovaSocialSharing.
|
||||
$scope.sharedMail = function () {
|
||||
$cordovaSocialSharing.shareViaEmail(" ", "Shopping with ionic meterial", "ionicmaterialdesign@gmail.com", "cc@IonicMeterial.com", "bcc@IonicMeterial.com", $scope.getCanvasImageUrl());
|
||||
$mdBottomSheet.hide();
|
||||
}// End sharedMail.
|
||||
|
||||
// saveImage for save product picture to mobile gallery.
|
||||
$scope.saveImage = function () {
|
||||
|
||||
if ($scope.isSaving == false) {
|
||||
try {
|
||||
// calling canvas2ImagePlugin to save image to gallery.
|
||||
window.canvas2ImagePlugin.saveImageDataToLibrary(
|
||||
function (msg) {
|
||||
|
||||
},
|
||||
function (err) {
|
||||
throw err;
|
||||
},
|
||||
document.getElementById('imgCanvas'));
|
||||
$scope.isSaving = true;
|
||||
|
||||
// show Image Saved ! toast when save image success.
|
||||
$mdToast.show({
|
||||
controller: 'toastController',
|
||||
templateUrl: 'toast.html',
|
||||
hideDelay: 800,
|
||||
position: 'top',
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: "Image Saved !"
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
catch (e) {
|
||||
console.log(e);
|
||||
// show Save Failed : Please try again! toast when save image is error.
|
||||
$mdToast.show({
|
||||
controller: 'toastController',
|
||||
templateUrl: 'toast.html',
|
||||
hideDelay: 800,
|
||||
position: 'top',
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: "Save Failed : Please try again!"
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
// Hide bottom sheet.
|
||||
$timeout(function () {
|
||||
$mdBottomSheet.hide();
|
||||
}, 1800);
|
||||
}// End saveImage.
|
||||
|
||||
// sharedMore for hide bottom sheet.
|
||||
$scope.sharedMore = function () {
|
||||
|
||||
$mdBottomSheet.hide();
|
||||
}// End sharedMore.
|
||||
|
||||
$scope.initialForm();
|
||||
});// End of share social bottom sheet controller.
|
||||
|
||||
// Controller of product check out page.
|
||||
appControllers.controller('productCheckoutCtrl', function ($scope, $mdToast, $mdDialog) {
|
||||
//You can do some thing hear when tap on a credit card button.
|
||||
$scope.doSomeThing = function () {
|
||||
|
||||
}// End doSomeThing.
|
||||
|
||||
// showConfirmDialog for show alert box.
|
||||
$scope.showConfirmDialog = function ($event) {
|
||||
//mdDialog.show use for show alert box for Confirm to complete order.
|
||||
$mdDialog.show({
|
||||
controller: 'DialogController',
|
||||
templateUrl: 'confirm-dialog.html',
|
||||
targetEvent: $event,
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: "Complete Order",
|
||||
content: "Confirm to complete Order.",
|
||||
ok: "Confirm",
|
||||
cancel: "Close"
|
||||
}
|
||||
}
|
||||
}).then(function () {
|
||||
// For confirm button to complete order.
|
||||
|
||||
//Showing Order Completed. Thank You ! toast.
|
||||
$mdToast.show({
|
||||
controller: 'toastController',
|
||||
templateUrl: 'toast.html',
|
||||
hideDelay: 1200,
|
||||
position: 'top',
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: "Order Completed. Thank You !"
|
||||
}
|
||||
}
|
||||
});
|
||||
}, function () {
|
||||
// For cancel button to complete order.
|
||||
});
|
||||
}// End showConfirmDialog.
|
||||
});// End of product check out controller.
|
||||
@@ -0,0 +1,33 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Dropbox Feed -->
|
||||
<!--Controller name : dropboxFeedCtrl-->
|
||||
<!--Controller path : www/templates/social-network-connect/dropbox/js/controllers.js-->
|
||||
<!--State name : app.dropboxFeed-->
|
||||
<!--URL : #app/dropboxFeed-->
|
||||
|
||||
<ion-view view-title="dropbox feed">
|
||||
<!--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>
|
||||
<ion-refresher pulling-text="Pull to refresh..." on-refresh="doRefresh()">
|
||||
</ion-refresher>
|
||||
<!--list section-->
|
||||
<md-list>
|
||||
<md-subheader class="dropbox-color">Dropbox Directory</md-subheader>
|
||||
<md-list-item class="md-list-item-default" ng-click="popUpFileName(item,$event)"
|
||||
ng-repeat="item in feedList">
|
||||
<i class=" {{ getIcon(item.icon)}} dropbox-color"></i>
|
||||
|
||||
<p>{{item.path}}</p>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
<!--end list section-->
|
||||
<ion-infinite-scroll ng-if="shouldLoadData" on-infinite="getFeedData(true)" distance="1%">
|
||||
</ion-infinite-scroll>
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
@@ -0,0 +1,41 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Dropbox Login -->
|
||||
<!--Controller name : dropboxLoginCtrl-->
|
||||
<!--Controller path : www/templates/social-network-connect/dropbox/js/controllers.js-->
|
||||
<!--State name : app.dropboxLogin-->
|
||||
<!--URL : #app/dropboxLogin-->
|
||||
|
||||
<ion-view title="Dropbox Connect">
|
||||
<!--login content section-->
|
||||
<ion-content scroll="false" id="social-login">
|
||||
<form>
|
||||
|
||||
<div>
|
||||
<i class="fa fa-dropbox dropbox-color"></i>
|
||||
</div>
|
||||
<div class="sub-header">Connect data with dropbox.</div>
|
||||
|
||||
<div class="ng-hide" ng-show="isLogin">
|
||||
<a class="md-raised social-button md-button md-default-theme dropbox-color-background"
|
||||
ng-click="goToUserProfile()">
|
||||
GO TO DROPBOX APP
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="ng-hide" ng-show="!isLogin">
|
||||
<a class="md-raised social-button md-button md-default-theme dropbox-color-background"
|
||||
ng-click="login()">
|
||||
LOG IN WITH DROPBOX
|
||||
</a>
|
||||
<br/>
|
||||
<a href="#/app/fakeSignUp" class="md-raised md-button md-default-theme social-default-button">SIGN
|
||||
UP</a>
|
||||
<a href="#/app/tryApp" class="md-raised md-button md-default-theme social-default-button">TRY APP</a>
|
||||
|
||||
<div class="footer">Already have an account? <a href="#/app/fakeLogin">Sign In</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</ion-content><!--end login content section-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,81 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Dropbox Profile -->
|
||||
<!--Controller name : dropboxProfileCtrl-->
|
||||
<!--Controller path : www/templates/social-network-connect/dropbox/js/controllers.js-->
|
||||
<!--State name : app.dropboxProfile-->
|
||||
<!--URL : #app/dropboxProfile-->
|
||||
|
||||
<ion-view title="Social">
|
||||
<!--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" class="fade-in" id="dropbox-profile-content">
|
||||
<md-tabs md-dynamic-height md-border-bottom>
|
||||
<md-tab label="Profile">
|
||||
<!--social profile content section-->
|
||||
<md-content id="social-profile-content" class="md-padding">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="ion-card"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.id}}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="ion-android-person"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.name}}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="ion-android-mail"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.email}}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="ion-link"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.link}}</div>
|
||||
</div>
|
||||
</md-content><!--end social profile content section-->
|
||||
|
||||
</md-tab>
|
||||
<md-tab label="More">
|
||||
<md-content class="md-padding">
|
||||
<!--list section-->
|
||||
<md-list>
|
||||
<md-subheader class="dropbox-color">More Dropbox APIs.</md-subheader>
|
||||
<md-list-item class="md-list-item-default"
|
||||
ng-click="navigateTo('app.dropboxFeed')">
|
||||
<i class="ion-android-list"></i>
|
||||
|
||||
<p>View Directory</p>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-list-item-default" ng-click="logOut($event)">
|
||||
<i class="ion-locked"></i>
|
||||
|
||||
<p>Log Out</p>
|
||||
</md-list-item>
|
||||
</md-list><!--end list section-->
|
||||
</md-content>
|
||||
</md-tab>
|
||||
</md-tabs>
|
||||
|
||||
</ion-content>
|
||||
|
||||
<!--loading progress-->
|
||||
<div id="dropbox-profile-loading-progress" class="loading-progress fade-in">
|
||||
<ion-spinner ng-if="!isAndroid" class="progress-circular"></ion-spinner>
|
||||
<md-progress-circular ng-if="isAndroid" class="md-warn md-progress-social-profile"
|
||||
md-mode="indeterminate"></md-progress-circular>
|
||||
</div><!--end loading progress-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,281 @@
|
||||
// For connecting with dropbox you have to install $cordovaOauth by running the following
|
||||
// command in your cmd.exe for windows or terminal for mac:
|
||||
// $ cd your_project_path
|
||||
// $ ionic plugin remove org.apache.cordova.inappbrowser
|
||||
// $ ionic plugin add org.apache.cordova.inappbrowser
|
||||
//
|
||||
// Learn more about $cordovaOauth :
|
||||
// http://ngcordova.com/docs/plugins/oauth/
|
||||
//
|
||||
// object schema of dropboxProfile that keep in localStorage is:
|
||||
// [{
|
||||
// name: dropbox name,
|
||||
// id: dropbox id,
|
||||
// email: email,
|
||||
// link: link,
|
||||
// access_token: access_token
|
||||
// }]
|
||||
//
|
||||
// Controller of dropbox login Page.
|
||||
appControllers.controller('dropboxLoginCtrl', function ($scope, $state, $cordovaOauth, $http, localStorage) {
|
||||
|
||||
// This function 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.isLogin is the variable for check that user is login or not.
|
||||
$scope.isLogin = false;
|
||||
|
||||
// $scope.isLoading is the variable for loading progress.
|
||||
$scope.isLoading = false;
|
||||
|
||||
// $scope.userInfo is the variable that store user information data.
|
||||
$scope.userInfo = {
|
||||
name: "",
|
||||
id: "",
|
||||
email: "",
|
||||
link: "",
|
||||
access_token: ""
|
||||
};
|
||||
|
||||
// Getting user information.
|
||||
$scope.userInfo = $scope.getUserProfile();
|
||||
};// End initialForm.
|
||||
|
||||
// navigateTo is for navigate to other page
|
||||
// by using targetPage to be the destination page.
|
||||
// Parameter :
|
||||
// targetPage = destination page.
|
||||
$scope.navigateTo = function (targetPage) {
|
||||
$state.go(targetPage);
|
||||
};// End navigateTo.
|
||||
|
||||
// goToUserProfile is for navigate to dropbox Profile page.
|
||||
$scope.goToUserProfile = function () {
|
||||
if ($scope.isLoading == false) {
|
||||
$scope.isLoading = true;
|
||||
$scope.navigateTo('app.dropboxProfile');
|
||||
$scope.isLoading = false;
|
||||
}
|
||||
};// End goToUserProfile.
|
||||
|
||||
//getUserProfile is for get user information form localStorage by calling localStorage.get service.
|
||||
$scope.getUserProfile = function () {
|
||||
$scope.userInfo = localStorage.get("Dropbox");
|
||||
if ($scope.userInfo != null) {
|
||||
$scope.isLogin = true;
|
||||
}
|
||||
|
||||
return $scope.userInfo;
|
||||
};// End getUserProfile.
|
||||
|
||||
// login for dropbox login.
|
||||
$scope.login = function () {
|
||||
if ($scope.isLoading == false) {
|
||||
$scope.isLoading = true;
|
||||
|
||||
// Calling $cordovaOauth.dropbox for login dropbox.
|
||||
// Format:
|
||||
// $cordovaOauth.dropbox(APP_KEY,[DROPBOX_PERMISION])
|
||||
// For APP_KEY is window.globalVariable.oAuth.dropbox from www/js/app.js at globalVariable session.
|
||||
$cordovaOauth.dropbox(window.globalVariable.oAuth.dropbox).then(function (result) {
|
||||
//After call cordovaOauth.dropbox it will return access_token for you to calling dropbox API.
|
||||
$scope.accessToken = result.access_token;
|
||||
// Calling http service for getting user profile from dropbox.
|
||||
$http.get("https://api.dropbox.com/1/account/info?access_token=" + result.access_token, {
|
||||
params: {}
|
||||
}).then(function (result) {
|
||||
// Success retrieve data by calling http service.
|
||||
// Store user profile information from dropbox API to userInfo variable.
|
||||
$scope.userInfo = {
|
||||
name: result.data.display_name,
|
||||
id: result.data.uid,
|
||||
email: result.data.email,
|
||||
link: result.data.referral_link,
|
||||
access_token: $scope.accessToken
|
||||
};
|
||||
// Store user profile information to localStorage service.
|
||||
localStorage.set("Dropbox", $scope.userInfo);
|
||||
// Navigate to dropbox profile page.
|
||||
$scope.navigateTo("app.dropboxProfile");
|
||||
});
|
||||
|
||||
}
|
||||
, function (error) {
|
||||
// Error retrieve data.
|
||||
console.log(error);
|
||||
});
|
||||
$scope.isLoading = false;
|
||||
}
|
||||
};// End login.
|
||||
$scope.initialForm();
|
||||
});// End of dropbox login controller.
|
||||
|
||||
// Controller of dropbox profile Page.
|
||||
appControllers.controller('dropboxProfileCtrl', function ($mdDialog, $scope, $state, $stateParams, $cordovaOauth, $ionicHistory, $http, localStorage, $timeout) {
|
||||
|
||||
// This function 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.userInfo is the variable for store user profile information
|
||||
// It get data from localStorage service.
|
||||
$scope.userInfo = localStorage.get("Dropbox");
|
||||
|
||||
// $scope.loading is the variable for loading progress.
|
||||
$scope.loading = true;
|
||||
|
||||
// The function for show/hide loading progress.
|
||||
$timeout(function () {
|
||||
if ($scope.isAndroid) {
|
||||
jQuery('#dropbox-profile-loading-progress').show();
|
||||
}
|
||||
else {
|
||||
jQuery('#dropbox-profile-loading-progress').fadeIn(700);
|
||||
}
|
||||
}, 400);
|
||||
|
||||
$timeout(function () {
|
||||
jQuery('#dropbox-profile-loading-progress').hide();
|
||||
jQuery('#dropbox-profile-content').fadeIn();
|
||||
}, 2000);
|
||||
};// End initialForm.
|
||||
|
||||
// navigateTo is for navigate to other page
|
||||
// by using targetPage to be the destination page.
|
||||
// Parameter :
|
||||
// targetPage = destination page.
|
||||
$scope.navigateTo = function (targetPage) {
|
||||
$state.go(targetPage);
|
||||
};// End navigateTo.
|
||||
|
||||
// logOut is for log out it will clear dropbox data in localStorage service.
|
||||
$scope.logOut = function ($event) {
|
||||
$mdDialog.show({
|
||||
//mdDialog.show use for show alert box for Confirm to log out.
|
||||
controller: 'DialogController',
|
||||
templateUrl: 'confirm-dialog.html',
|
||||
targetEvent: $event,
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: "Confirm to Logout",
|
||||
content: "Do you want to logout Dropbox?",
|
||||
ok: "Confirm",
|
||||
cancel: "Close"
|
||||
}
|
||||
}
|
||||
}).then(function () {
|
||||
// For confirm button to log out.
|
||||
// Clear dropbox data in localStorage service.
|
||||
localStorage.set("Dropbox", null);
|
||||
// Navigate to log in page.
|
||||
$state.go('app.dropboxLogin');
|
||||
$scope.userinfoData = localStorage.get("Dropbox");
|
||||
if ($scope.userinfoData == null) {
|
||||
$state.go('app.dropboxLogin');
|
||||
}
|
||||
|
||||
}, function () {
|
||||
// For cancel button to log out.
|
||||
});
|
||||
|
||||
};// End logOut.
|
||||
|
||||
$scope.initialForm();
|
||||
|
||||
});// End of dropbox profile controller.
|
||||
|
||||
// Controller of dropbox feed Page.
|
||||
appControllers.controller('dropboxFeedCtrl', function ($scope, $state, $ionicHistory, $stateParams, $mdDialog, $cordovaOauth, $http, $filter, localStorage) {
|
||||
|
||||
// This function 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.feedList is the variable that store feed data.
|
||||
$scope.feedList = [];
|
||||
|
||||
// $scope.feedList is the variable for loading status.
|
||||
$scope.shouldLoadData = true;
|
||||
|
||||
// $scope.userInfo is the variable for store user profile information
|
||||
// It get data from localStorage service.s
|
||||
$scope.userInfo = localStorage.get("Dropbox");
|
||||
}
|
||||
// popUpFileName for show pop up file name and detail.
|
||||
$scope.popUpFileName = function (fileData, $event) {
|
||||
var optionDropboxDialog = $mdDialog.alert()
|
||||
.parent(angular.element(document.body))
|
||||
.title(fileData.path + ' (' + fileData.size + ')')
|
||||
.content('Last Modified : ' + $filter('date')(new Date(fileData.modified), "MMM dd yyyy"))
|
||||
.ariaLabel('Alert Dialog filename')
|
||||
.ok('OK')
|
||||
.targetEvent($event)
|
||||
$mdDialog.show(optionDropboxDialog);
|
||||
};// End popUpFileName.
|
||||
|
||||
// getFeedData is for get feed by calling to dropbox API.
|
||||
// Parameter :
|
||||
// IsInit(bool) = for check that page are loading more data or refresh data.
|
||||
$scope.getFeedData = function (IsInit) {
|
||||
$scope.isLoading = true;
|
||||
// Call http service with this api to get dropbox feed data.
|
||||
// By send parameter access_token that get from dropbox user profile from localStorage.
|
||||
$http.get("https://api.dropbox.com/1/metadata/auto", {
|
||||
params: {
|
||||
access_token: $scope.userInfo.access_token
|
||||
}
|
||||
}).then(function (result) {
|
||||
// Success retrieve data by calling http service.
|
||||
|
||||
// store feed data to $scope.feedList variable to show in feed.
|
||||
$scope.feedList = result.data.contents;
|
||||
|
||||
// To stop loading progress.
|
||||
if (IsInit == true) {
|
||||
$scope.$broadcast('scroll.infiniteScrollComplete');
|
||||
|
||||
} else {
|
||||
$scope.$broadcast('scroll.refreshComplete');
|
||||
}
|
||||
$scope.shouldLoadData = false;
|
||||
},
|
||||
function (error) {
|
||||
// Error retrieve data it will log out.
|
||||
if (error.status = 401) {
|
||||
$scope.logout();
|
||||
}
|
||||
});
|
||||
};// End getFeedData.
|
||||
|
||||
//getIcon to get icon for file name.
|
||||
$scope.getIcon = function (icon) {
|
||||
var iconName = icon.substr(0, 6);
|
||||
if (iconName == "folder") {
|
||||
return "fa fa-folder-o";
|
||||
}
|
||||
else {
|
||||
return "fa fa-file-o";
|
||||
}
|
||||
};// End getIcon.
|
||||
|
||||
// logout for log out.
|
||||
$scope.logout = function () {
|
||||
// Clear dropbox data in localStorage service.
|
||||
localStorage.set("Dropbox", null);
|
||||
// Navigate to log in page.
|
||||
$ionicHistory.nextViewOptions({
|
||||
disableBack: true
|
||||
});
|
||||
$scope.userinfoData = localStorage.get("Dropbox");
|
||||
if ($scope.userinfoData == null) {
|
||||
$state.go('app.dropboxLogin');
|
||||
};
|
||||
};// End logout.
|
||||
|
||||
// doRefresh is for refresh feed.
|
||||
$scope.doRefresh = function () {
|
||||
$scope.shouldLoadData = true;
|
||||
$scope.getFeedData(false);
|
||||
};// End doRefresh.
|
||||
|
||||
$scope.initialForm();
|
||||
}); // End of dropbox feed controller.
|
||||
@@ -0,0 +1,65 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Facebook Feed -->
|
||||
<!--Controller name : facebookFeedCtrl-->
|
||||
<!--Controller path : www/templates/social-network-connect/facebook/js/controllers.js-->
|
||||
<!--State name : app.facebookFeed-->
|
||||
<!--URL : #app/facebookFeed-->
|
||||
|
||||
<ion-view title="Facebook feed">
|
||||
<!--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-->
|
||||
|
||||
<!--social feed content section-->
|
||||
<ion-content id="social-feed-content">
|
||||
|
||||
<ion-refresher pulling-text="Pull to refresh..." on-refresh="doRefresh()">
|
||||
</ion-refresher>
|
||||
|
||||
<!--social card section-->
|
||||
<md-card ng-repeat="item in feedList" class="social-card">
|
||||
<md-card-content>
|
||||
<md-list-item class="md-2-line md-no-proxy" role="listitem">
|
||||
<img ng-src="https://graph.facebook.com/{{ item.from.id }}/picture"
|
||||
class="md-avatar">
|
||||
|
||||
<div class="md-list-item-text">
|
||||
<h3>{{item.from.name}}</h3>
|
||||
|
||||
<p>{{item.created_time | date:"short" }}</p>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<p ng-show="item.message != null ? true : false">{{item.message}}</p>
|
||||
|
||||
<p ng-show="item.link != null && item.message == null ? true : false">was shared: {{item.link}}</p>
|
||||
</md-card-content>
|
||||
<!--social card image section-->
|
||||
<div class="social-card-image">
|
||||
<img ng-src="{{item.full_picture}}"
|
||||
ng-show="item.full_picture != null ? true : false"
|
||||
class="ng-hide">
|
||||
</div><!--end social card image section-->
|
||||
|
||||
<!--social card footer section-->
|
||||
<div class="social-card-footer">
|
||||
<div class="row-content" layout="row">
|
||||
<div class="col-33">
|
||||
{{item.likes.summary.total_count | numberSuffix}} <span>Likes</span>
|
||||
</div>
|
||||
<div class="col-33">
|
||||
{{item.comments.summary.total_count | numberSuffix}} <span>Comments</span>
|
||||
</div>
|
||||
<div class="col-33">
|
||||
{{ item.shares != null ? item.shares.count : 0 | numberSuffix }} <span>Shared</span>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--end social card footer section-->
|
||||
</md-card><!--end social card section-->
|
||||
|
||||
<ion-infinite-scroll ng-if="!paging.shouldLoadData" on-infinite="loadMore()" distance="1%">
|
||||
</ion-infinite-scroll>
|
||||
</ion-content><!--end social feed content section-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,32 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Facebook Friend List -->
|
||||
<!--Controller name : facebookFriendListCtrl-->
|
||||
<!--Controller path : www/templates/social-network-connect/facebook/js/controllers.js-->
|
||||
<!--State name : app.facebookFriendList-->
|
||||
<!--URL : #app/facebookFriendList-->
|
||||
|
||||
<ion-view view-title="Friend List">
|
||||
<!--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>
|
||||
<ion-refresher pulling-text="Pull to refresh..." on-refresh="doRefresh()">
|
||||
</ion-refresher>
|
||||
|
||||
<!--list section-->
|
||||
<md-list class="md-list-padding-left">
|
||||
<md-list-item ng-repeat="item in friendsList">
|
||||
<img alt="{{item.name}}" ng-src="{{ item.picture.data.url }}" class="md-avatar"/>
|
||||
|
||||
<p>{{ item.name }}</p>
|
||||
</md-list-item>
|
||||
</md-list><!--end list section-->
|
||||
|
||||
<ion-infinite-scroll ng-if="!paging.shouldLoadData" on-infinite="loadMore()" distance="1%">
|
||||
</ion-infinite-scroll>
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
@@ -0,0 +1,40 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Facebook Login-->
|
||||
<!--Controller name : facebookLoginCtrl-->
|
||||
<!--Controller path : www/templates/social-network-connect/facebook/js/controllers.js-->
|
||||
<!--State name : app.facebookLogin-->
|
||||
<!--URL : #app/facebookLogin-->
|
||||
|
||||
<ion-view title="Facebook Connect">
|
||||
<!--login content section-->
|
||||
<ion-content scroll="false" id="social-login">
|
||||
<form>
|
||||
|
||||
<div>
|
||||
<i class="fa fa-facebook facebook-color"></i>
|
||||
</div>
|
||||
<div class="sub-header">Connect data with facebook.</div>
|
||||
|
||||
<div class="ng-hide" ng-show="isLogin">
|
||||
<a class="md-raised social-button md-button md-default-theme facebook-background"
|
||||
ng-click="goToUserProfile()">
|
||||
GO TO FACEBOOK APP
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="ng-hide" ng-show="!isLogin">
|
||||
<a class="md-raised social-button md-button md-default-theme facebook-background" ng-click="login()">
|
||||
LOG IN WITH FACEBOOK
|
||||
</a>
|
||||
<br/>
|
||||
<a href="#/app/fakeSignUp" class="md-raised md-button md-default-theme social-default-button">SIGN
|
||||
UP</a>
|
||||
<a href="#/app/tryApp" class="md-raised md-button md-default-theme social-default-button">TRY APP</a>
|
||||
|
||||
<div class="footer">Already have an account? <a href="#/app/fakeLogin">Sign In</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</ion-content><!--end login content section-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,100 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Facebook Profile-->
|
||||
<!--Controller name : facebookProfileCtrl-->
|
||||
<!--Controller path : www/templates/social-network-connect/facebook/js/controllers.js-->
|
||||
<!--State name : app.facebookProfile-->
|
||||
<!--URL : #app/facebookProfile-->
|
||||
|
||||
<ion-view title="Social">
|
||||
<!--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>
|
||||
<div class="toolbar-image-cover" style="background-image: url('{{userInfo.pictureProfileUrl}}');"></div>
|
||||
|
||||
<md-tabs class="ng-hide" ng-show="!loading" md-dynamic-height md-border-bottom>
|
||||
<md-tab label="Profile">
|
||||
<!--social profile content section-->
|
||||
<md-content id="social-profile-content" class="md-padding">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="ion-card"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.id}}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="ion-android-person"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.name}}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="fa fa-circle-thin"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.gender}}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="fa fa-birthday-cake"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.birthday}}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="ion-android-mail"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.email}}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="ion-link"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.link}}</div>
|
||||
</div>
|
||||
|
||||
</md-content><!--end social profile content section-->
|
||||
|
||||
</md-tab>
|
||||
<md-tab label="More">
|
||||
<md-content class="md-padding">
|
||||
<!--list section-->
|
||||
<md-list>
|
||||
<md-subheader class="facebook-color">More Facebook APIs.</md-subheader>
|
||||
<md-list-item class="md-list-item-default"
|
||||
ng-click="navigateTo('app.facebookFeed')">
|
||||
<i class="ion-android-list"></i>
|
||||
|
||||
<p>View Timeline Feed</p>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-list-item-default"
|
||||
ng-click="navigateTo('app.facebookFriendList')">
|
||||
<i class="ion-person-stalker"></i>
|
||||
|
||||
<p>Friends List</p>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-list-item-default" ng-click="logOut($event)">
|
||||
<i class="ion-locked"></i>
|
||||
|
||||
<p>Log Out</p>
|
||||
</md-list-item>
|
||||
</md-list><!--end list section-->
|
||||
</md-content>
|
||||
</md-tab>
|
||||
</md-tabs>
|
||||
<!--social loading progress section-->
|
||||
<md-progress-circular ng-show="loading" class="md-warn md-progress-social-profile ng-hide"
|
||||
md-mode="indeterminate"></md-progress-circular><!--end social loading progress section-->
|
||||
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
@@ -0,0 +1,492 @@
|
||||
// For connecting with facebook you have to install $cordovaOauth by running the following
|
||||
// command in your cmd.exe for windows or terminal for mac:
|
||||
// $ cd your_project_path
|
||||
// $ ionic plugin remove org.apache.cordova.inappbrowser
|
||||
// $ ionic plugin add org.apache.cordova.inappbrowser
|
||||
//
|
||||
// Learn more about $cordovaOauth :
|
||||
// http://ngcordova.com/docs/plugins/oauth/
|
||||
//
|
||||
// object schema of facebookProfile that keep in localStorage is:
|
||||
// [{
|
||||
// name: facebook name,
|
||||
// first_name: facebook firstname,
|
||||
// last_name: facebook lastname,
|
||||
// email: email,
|
||||
// birthday: birthday,
|
||||
// link: facebook link,
|
||||
// cover: facebook cover,
|
||||
// pictureProfileUrl: facebook picture profile url,
|
||||
// gender: gender,
|
||||
// id: facebook id,
|
||||
// access_token: access_token
|
||||
// }]
|
||||
//
|
||||
// Controller of facebook login Page.
|
||||
appControllers.controller('facebookLoginCtrl', function ($scope, $state, $cordovaOauth, $http, localStorage) {
|
||||
|
||||
// This function 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.isLogin is the variable for check that user is login or not.
|
||||
$scope.isLogin = false;
|
||||
|
||||
// $scope.isLoading is the variable for loading progress.
|
||||
$scope.isLoading = false;
|
||||
|
||||
// $scope.userInfo is the variable that store user information data.
|
||||
$scope.userInfo = {
|
||||
name: "",
|
||||
first_name: "",
|
||||
last_name: "",
|
||||
email: "",
|
||||
birthday: "",
|
||||
link: "",
|
||||
cover: "",
|
||||
pictureProfileUrl: "",
|
||||
gender: "",
|
||||
id: "",
|
||||
access_token: ""
|
||||
};
|
||||
|
||||
// Getting user information.
|
||||
$scope.userInfo = $scope.getUserProfile();
|
||||
}; // End initialForm.
|
||||
|
||||
// navigateTo is for navigate to other page
|
||||
// by using targetPage to be the destination page.
|
||||
// Parameter :
|
||||
// targetPage = destination page.
|
||||
$scope.navigateTo = function (targetPage) {
|
||||
$state.go(targetPage);
|
||||
};// End navigateTo.
|
||||
|
||||
// goToUserProfile is for navigate to facebook Profile page.
|
||||
$scope.goToUserProfile = function () {
|
||||
if ($scope.isLoading == false) {
|
||||
$scope.isLoading = true;
|
||||
$scope.navigateTo('app.facebookProfile');
|
||||
$scope.isLoading = false;
|
||||
}
|
||||
};// End goToUserProfile.
|
||||
|
||||
//getUserProfile is for get user information form localStorage by calling localStorage.get service.
|
||||
$scope.getUserProfile = function () {
|
||||
$scope.userInfo = localStorage.get("Facebook");
|
||||
if ($scope.userInfo != null) {
|
||||
$scope.isLogin = true;
|
||||
}
|
||||
;
|
||||
return $scope.userInfo;
|
||||
};// End getUserProfile.
|
||||
|
||||
// login for facebook login
|
||||
$scope.login = function () {
|
||||
if ($scope.isLoading == false) {
|
||||
$scope.isLoading = true;
|
||||
|
||||
// Calling $cordovaOauth.facebook for login facebook.
|
||||
// Format:
|
||||
// $cordovaOauth.facebook(APP_ID,[FACEBOOK_PERMISION])
|
||||
// For APP_ID is window.globalVariable.oAuth.facebook from www/js/app.js at globalVariable session.
|
||||
$cordovaOauth.facebook(window.globalVariable.oAuth.facebook, ["publish_actions", "user_status", "user_birthday", "user_posts", "user_events"
|
||||
, "email", "user_actions.news", "user_friends", "public_profile"]).then(function (result) {
|
||||
//After call cordovaOauth.facebook it will return access_token for you to calling facebook API.
|
||||
|
||||
$scope.accessToken = result.access_token;
|
||||
// Calling http service for getting user profile from facebook.
|
||||
// By send parameter access_token , fields, format.
|
||||
$http.get("https://graph.facebook.com/v2.4/me", {
|
||||
params: {
|
||||
access_token: result.access_token,
|
||||
fields: "birthday,first_name,email,last_name,name,link,cover,gender,id",
|
||||
format: "json"
|
||||
}
|
||||
}).then(function (result) {
|
||||
// Success retrieve data by calling http service.
|
||||
// Store user profile information from facebook API to userInfo variable.
|
||||
$scope.userInfo = {
|
||||
name: result.data.name,
|
||||
first_name: result.data.first_name,
|
||||
last_name: result.data.last_name,
|
||||
email: result.data.email,
|
||||
birthday: result.data.birthday,
|
||||
link: result.data.link,
|
||||
cover: result.data.cover,
|
||||
pictureProfileUrl: "http://graph.facebook.com/" + result.data.id + "/picture?width=500&height=500",
|
||||
gender: result.data.gender,
|
||||
id: result.data.id,
|
||||
access_token: $scope.accessToken
|
||||
};
|
||||
// Store user profile information to localStorage service.
|
||||
localStorage.set("Facebook", $scope.userInfo);
|
||||
// Navigate to facebook profile page.
|
||||
$scope.navigateTo("app.facebookProfile");
|
||||
});
|
||||
}
|
||||
, function (error) {
|
||||
// Error retrieve data.
|
||||
console.log(error);
|
||||
});
|
||||
$scope.isLoading = false;
|
||||
}
|
||||
};// End login.
|
||||
|
||||
$scope.initialForm();
|
||||
|
||||
});// End of facebook login controller.
|
||||
|
||||
// Controller of facebook profile Page.
|
||||
appControllers.controller('facebookProfileCtrl', function ($mdDialog, $scope, $state, $stateParams, $cordovaOauth, $ionicHistory, $http, localStorage, $timeout) {
|
||||
|
||||
// This function 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.userInfo is the variable for store user profile information
|
||||
// It get data from localStorage service.
|
||||
$scope.userInfo = localStorage.get("Facebook");
|
||||
|
||||
// $scope.loading is the variable for loading progress.
|
||||
$scope.loading = true;
|
||||
|
||||
// The function for show/hide loading progress.
|
||||
$timeout(function () {
|
||||
$scope.loading = false;
|
||||
}, 2000);
|
||||
};// 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, {
|
||||
access_token: objectData
|
||||
});
|
||||
};// End navigateTo.
|
||||
|
||||
// logOut is for log out it will clear facebook data in localStorage service.
|
||||
$scope.logOut = function ($event) {
|
||||
//mdDialog.show use for show alert box for Confirm to log out.
|
||||
$mdDialog.show({
|
||||
controller: 'DialogController',
|
||||
templateUrl: 'confirm-dialog.html',
|
||||
targetEvent: $event,
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: "Confirm to Logout",
|
||||
content: "Do you want to logout Facebook?",
|
||||
ok: "Confirm",
|
||||
cancel: "Close"
|
||||
}
|
||||
}
|
||||
}).then(function () {
|
||||
// For confirm button to log out.
|
||||
// Clear facebook data in localStorage service.
|
||||
localStorage.set("Facebook", null);
|
||||
$scope.userinfoData = localStorage.get("Facebook");
|
||||
|
||||
// Navigate to log in page.
|
||||
if ($scope.userinfoData == null) {
|
||||
$state.go('app.facebookLogin');
|
||||
}
|
||||
|
||||
}, function () {
|
||||
// For cancel button to log out.
|
||||
});
|
||||
|
||||
|
||||
};// End logOut.
|
||||
|
||||
$scope.initialForm();
|
||||
|
||||
});// End of facebook profile controller.
|
||||
|
||||
// Controller of facebook feed Page.
|
||||
appControllers.controller('facebookFeedCtrl', function ($scope, $state, $ionicHistory, $stateParams, $cordovaOauth, $http, localStorage) {
|
||||
|
||||
// This function 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.paging is the variable that store page index of feed data.
|
||||
$scope.paging = {
|
||||
next: "",
|
||||
shouldLoadData: false
|
||||
};
|
||||
|
||||
// $scope.userInfo is the variable for store user profile information
|
||||
// It get data from localStorage service.
|
||||
$scope.userInfo = localStorage.get("Facebook");
|
||||
|
||||
// $scope.loading is the variable for loading progress.
|
||||
$scope.isLoading = false;
|
||||
|
||||
// $scope.feedList is the variable that store feed data.
|
||||
$scope.feedList = [];
|
||||
|
||||
}; // End initialForm.
|
||||
|
||||
// getFeedData is for get feed by calling to facebook API.
|
||||
// Parameter :
|
||||
// IsInit(bool) = for check that page are loading more data or refresh data.
|
||||
$scope.getFeedData = function (IsInit) {
|
||||
|
||||
// Call http service with this api to get facebook feed data.
|
||||
// By send parameter access_token that get from facebook user profile from localStorage.
|
||||
$http.get("https://graph.facebook.com/me/feed?fields=from,full_picture,message,created_time,icon,to,id,caption,link,picture,shares,likes.limit(1).summary(true),comments.limit(1).summary(true)", {
|
||||
params: {
|
||||
access_token: $scope.userInfo.access_token
|
||||
}
|
||||
}).then(function (result) {
|
||||
// Success retrieve data by calling http service.
|
||||
|
||||
// Store feed data to $scope.feedList variable to show in feed.
|
||||
$scope.feedList = result.data.data;
|
||||
|
||||
// If it don't have data. Loading progress will stop and appear empty feed.
|
||||
if ($scope.feedList == []) {
|
||||
$scope.paging.shouldLoadData = true;
|
||||
}
|
||||
// Checking for next page data
|
||||
if (result.data.paging.next == null) {
|
||||
$scope.paging.shouldLoadData = true;
|
||||
}
|
||||
else {
|
||||
$scope.paging.next = result.data.paging.next;
|
||||
}// End checking for next page data.
|
||||
|
||||
// To stop loading progress.
|
||||
if (IsInit == true) {
|
||||
$scope.$broadcast('scroll.infiniteScrollComplete');
|
||||
} else {
|
||||
$scope.$broadcast('scroll.refreshComplete');
|
||||
}
|
||||
|
||||
$scope.isLoading = false;
|
||||
}
|
||||
, function (error) {
|
||||
// Error retrieve data it will log out.
|
||||
if (error.data.error.code = 190) {
|
||||
$scope.logout();
|
||||
}
|
||||
|
||||
});
|
||||
}; // End getFeedData.
|
||||
|
||||
// logout for log out.
|
||||
$scope.logout = function () {
|
||||
|
||||
// Clear facebook data in localStorage service.
|
||||
localStorage.set("Facebook", null);
|
||||
|
||||
// Navigate to log in page.
|
||||
$ionicHistory.nextViewOptions({
|
||||
disableBack: true
|
||||
});
|
||||
$scope.userinfoData = localStorage.get("Facebook");
|
||||
if ($scope.userinfoData == null) {
|
||||
$state.go('app.facebookLogin');
|
||||
};
|
||||
}; // End logout.
|
||||
|
||||
// getNextFeedData for get next page of feed data.
|
||||
$scope.getNextFeedData = function () {
|
||||
$scope.isLoading = true;
|
||||
|
||||
// Call http service with $scope.paging.next url that get from the previous feed.
|
||||
$http.get($scope.paging.next, {
|
||||
params: {
|
||||
format: "json"
|
||||
}
|
||||
}).then(function (result) {
|
||||
// Success retrieve data by calling http service.
|
||||
|
||||
// If it don't have data. Loading progress will stop.
|
||||
if(result.data.data.length == 0){
|
||||
$scope.paging.shouldLoadData = true;
|
||||
}
|
||||
|
||||
// Storing feed data to $scope.feedList.
|
||||
for (var feedItem = 0; feedItem < result.data.data.length; feedItem++) {
|
||||
$scope.feedList.push(result.data.data[feedItem]);
|
||||
}
|
||||
|
||||
// Checking for next page data.
|
||||
if (result.data.paging.next == null) {
|
||||
$scope.paging.shouldLoadData = true;
|
||||
} else {
|
||||
$scope.paging.next = result.data.paging.next;
|
||||
}// End checking for next page data.
|
||||
|
||||
// To stop loading progress.
|
||||
$scope.$broadcast('scroll.infiniteScrollComplete');
|
||||
$scope.isLoading = false;
|
||||
});
|
||||
};// End getNextFeedData.
|
||||
|
||||
// doRefresh is for refresh feed.
|
||||
$scope.doRefresh = function () {
|
||||
$scope.paging.shouldLoadData = false;
|
||||
$scope.getFeedData(false);
|
||||
};// End doRefresh.
|
||||
|
||||
// loadMore is for loading more feed.
|
||||
$scope.loadMore = function () {
|
||||
if ($scope.isLoading == false) {
|
||||
$scope.isLoading = true;
|
||||
if ($scope.paging.next == "") {
|
||||
$scope.getFeedData(true);
|
||||
} else {
|
||||
$scope.getNextFeedData();
|
||||
}
|
||||
}
|
||||
};// End loadMore.
|
||||
|
||||
$scope.initialForm();
|
||||
|
||||
});// End of facebook feed controller.
|
||||
|
||||
// Controller of facebook friend list Page.
|
||||
appControllers.controller('facebookFriendListCtrl', function ($scope, $state, $ionicHistory, $stateParams, $cordovaOauth, $http, localStorage) {
|
||||
|
||||
// This function 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.paging is the variable that store page index of friends list data.
|
||||
$scope.paging = {
|
||||
next: "",
|
||||
shouldLoadData: false
|
||||
};
|
||||
|
||||
// $scope.userInfo is the variable for store user profile information
|
||||
// It get data from localStorage service.
|
||||
$scope.userInfo = localStorage.get("Facebook");
|
||||
|
||||
// $scope.loading is the variable for loading progress.
|
||||
$scope.isLoading = false;
|
||||
|
||||
// $scope.feedList is the variable that store friends list data.
|
||||
$scope.friendsList = [];
|
||||
|
||||
}; // End initialForm.
|
||||
|
||||
// getFriendsData is for get friend list by calling to facebook API.
|
||||
// Parameter :
|
||||
// IsInit(bool) = for check that page are loading more data or refresh data.
|
||||
$scope.getFriendsData = function (IsInit) {
|
||||
|
||||
// call http service with this api to get facebook friend list data.
|
||||
// By send parameter access_token that get from facebook user profile from localStorage.
|
||||
$http.get("https://graph.facebook.com/me/taggable_friends", {
|
||||
params: {
|
||||
access_token: $scope.userInfo.access_token
|
||||
|
||||
}
|
||||
}).then(function (result) {
|
||||
// Success retrieve data by calling http service.
|
||||
|
||||
// Store friend list data to $scope.feedList variable to show in page.
|
||||
$scope.friendsList = result.data.data;
|
||||
|
||||
// If it don't have data. Loading progress will stop and appear empty feed.
|
||||
if ($scope.friendsList == []) {
|
||||
$scope.paging.shouldLoadData = true;
|
||||
}
|
||||
|
||||
// Checking for next page data
|
||||
if (result.data.paging.next == null) {
|
||||
$scope.paging.shouldLoadData = true;
|
||||
}
|
||||
else {
|
||||
$scope.paging.next = result.data.paging.next;
|
||||
}// End checking for next page data.
|
||||
|
||||
// To stop loading progress.
|
||||
if (IsInit == true) {
|
||||
$scope.$broadcast('scroll.infiniteScrollComplete');
|
||||
} else {
|
||||
$scope.$broadcast('scroll.refreshComplete');
|
||||
}
|
||||
|
||||
$scope.isLoading = false;
|
||||
}
|
||||
, function (error) {
|
||||
// Error retrieve data it will log out.
|
||||
if (error.data.error.code = 190) {
|
||||
$scope.logout();
|
||||
}
|
||||
|
||||
});
|
||||
}; // End getFeedData.
|
||||
|
||||
// logout for log out.
|
||||
$scope.logout = function () {
|
||||
// Clear facebook data in localStorage service.
|
||||
localStorage.set("Facebook", null);
|
||||
// Navigate to log in page.
|
||||
$ionicHistory.nextViewOptions({
|
||||
disableBack: true
|
||||
});
|
||||
$scope.userinfoData = localStorage.get("Facebook");
|
||||
if ($scope.userinfoData == null) {
|
||||
$state.go('app.facebookLogin');
|
||||
}
|
||||
;
|
||||
}; // End logout.
|
||||
|
||||
// getNextFriendsData for get next page of friend list data.
|
||||
$scope.getNextFriendsData = function () {
|
||||
$scope.isLoading = true;
|
||||
|
||||
// Call http service with $scope.paging.next url that get from the previous friend list.
|
||||
$http.get($scope.paging.next, {
|
||||
params: {
|
||||
format: "json"
|
||||
}
|
||||
}).then(function (result) {
|
||||
// Success retrieve data by calling http service.
|
||||
|
||||
// Storing friend list data to $scope.friendsList.
|
||||
for (var friendsItem = 0; friendsItem < result.data.data.length; friendsItem++) {
|
||||
$scope.friendsList.push(result.data.data[friendsItem]);
|
||||
}
|
||||
|
||||
// Checking for next page data.
|
||||
if (result.data.paging.next == null) {
|
||||
$scope.paging.shouldLoadData = true;
|
||||
} else {
|
||||
$scope.paging.next = result.data.paging.next;
|
||||
}// End checking for next page data.
|
||||
|
||||
// To stop loading progress.
|
||||
$scope.$broadcast('scroll.infiniteScrollComplete');
|
||||
$scope.isLoading = false;
|
||||
});
|
||||
}; // End getNextFriendsData.
|
||||
|
||||
// doRefresh is for refresh friends list.
|
||||
$scope.doRefresh = function () {
|
||||
$scope.paging.shouldLoadData = false;
|
||||
$scope.getFriendsData(false);
|
||||
};// End doRefresh.
|
||||
|
||||
// loadMore is for loading more friends list.
|
||||
$scope.loadMore = function () {
|
||||
if ($scope.isLoading == false) {
|
||||
$scope.isLoading = true;
|
||||
if ($scope.paging.next == "") {
|
||||
$scope.getFriendsData(true);
|
||||
} else {
|
||||
$scope.getNextFriendsData();
|
||||
}
|
||||
}
|
||||
};// End loadMore.
|
||||
|
||||
$scope.initialForm();
|
||||
});// End of facebook friend list controller.
|
||||
@@ -0,0 +1,66 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Foursquare Feed-->
|
||||
<!--Controller name : foursquareFeedCtrl-->
|
||||
<!--Controller path : www/templates/social-network-connect/foursquare/js/controllers.js-->
|
||||
<!--State name : app.foursquareFeed-->
|
||||
<!--URL : #app/foursquareFeed-->
|
||||
|
||||
<ion-view view-title="foursquare feed">
|
||||
<!--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-->
|
||||
|
||||
<!--social feed content section-->
|
||||
<ion-content id="social-feed-content">
|
||||
|
||||
<ion-refresher pulling-text="Pull to refresh..." on-refresh="doRefresh()">
|
||||
</ion-refresher>
|
||||
|
||||
<ion-list>
|
||||
|
||||
<!--social card section-->
|
||||
<md-card ng-repeat="item in feedList" class="social-card">
|
||||
<md-card-content>
|
||||
<md-list-item class="md-2-line md-no-proxy" role="listitem">
|
||||
<img ng-src="{{ item.venue.photos.groups[0].items[0].prefix }}256x256{{item.venue.photos.groups[0].items[0].suffix }}"
|
||||
class="md-avatar">
|
||||
|
||||
<div class="md-list-item-text">
|
||||
<h3>{{item.venue.name}}</h3>
|
||||
|
||||
<p>{{item.createdAt |epochToDate | date:"short"}}</p>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<p>{{item.text}}</p>
|
||||
</md-card-content>
|
||||
<!--social card image section-->
|
||||
<div class="social-card-image">
|
||||
<img ng-src="{{item.photourl}}"
|
||||
ng-show="item.photourl != null ? true : false"
|
||||
class="ng-hide">
|
||||
</div><!--end social card image section-->
|
||||
|
||||
<!--social card footer section-->
|
||||
<div class="social-card-footer">
|
||||
<div class="row-content" layout="row">
|
||||
<div class="col-33">
|
||||
{{item.likes.count | numberSuffix}} <span>Likes</span>
|
||||
</div>
|
||||
<div class="col-33">
|
||||
{{item.todo.count | numberSuffix}} <span>Todo</span>
|
||||
</div>
|
||||
<div class="col-33">
|
||||
{{item.viewCount | numberSuffix}} <span>Views</span>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--end social card footer section-->
|
||||
</md-card><!--end social card section-->
|
||||
|
||||
<ion-infinite-scroll ng-if="shouldLoadData" on-infinite="getFeedData(true)" distance="1%">
|
||||
</ion-infinite-scroll>
|
||||
|
||||
</ion-content><!--end social feed content section-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,41 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Foursquare Login-->
|
||||
<!--Controller name : foursquareLoginCtrl-->
|
||||
<!--Controller path : www/templates/social-network-connect/foursquare/js/controllers.js-->
|
||||
<!--State name : app.foursquareLogin-->
|
||||
<!--URL : #app/foursquareLogin-->
|
||||
|
||||
<ion-view title="Foursquare Connect">
|
||||
<!--login content section-->
|
||||
<ion-content scroll="false" id="social-login">
|
||||
<form>
|
||||
|
||||
<div>
|
||||
<i class="fa fa-foursquare foursquare-color"></i>
|
||||
</div>
|
||||
<div class="sub-header">Connect data with foursquare</div>
|
||||
|
||||
<div class="ng-hide" ng-show="isLogin">
|
||||
<a class="md-raised social-button md-button md-default-theme foursquare-color-background"
|
||||
ng-click="goToUserProfile()">
|
||||
GO TO FOURSQUARE APP
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="ng-hide" ng-show="!isLogin">
|
||||
<a class="md-raised social-button md-button md-default-theme foursquare-color-background"
|
||||
ng-click="login()">
|
||||
LOG IN WITH FOURSQUARE
|
||||
</a>
|
||||
<br/>
|
||||
<a href="#/app/fakeSignUp" class="md-raised md-button md-default-theme social-default-button">SIGN
|
||||
UP</a>
|
||||
<a href="#/app/tryApp" class="md-raised md-button md-default-theme social-default-button">TRY APP</a>
|
||||
|
||||
<div class="footer">Already have an account? <a href="#/app/fakeLogin">Sign In</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</ion-content><!--end login content section-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,84 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Foursquare Profile-->
|
||||
<!--Controller name : foursquareProfileCtrl-->
|
||||
<!--Controller path : www/templates/social-network-connect/foursquare/js/controllers.js-->
|
||||
<!--State name : app.foursquareProfile-->
|
||||
<!--URL : #app/foursquareProfile-->
|
||||
|
||||
<ion-view title="Social">
|
||||
<!--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>
|
||||
<div class="toolbar-image-cover" style="background-image: url('{{userInfo.pictureProfileUrl}}');"></div>
|
||||
<md-tabs class="ng-hide" ng-show="!loading" md-dynamic-height md-border-bottom>
|
||||
<md-tab label="Profile">
|
||||
<!--social profile content section-->
|
||||
<md-content id="social-profile-content" class="md-padding">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="ion-card"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.id}}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="ion-android-person"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.name}}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="fa fa-circle-thin"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.gender}}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="ion-home"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.homeCity}}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="ion-android-mail"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.email}}</div>
|
||||
</div>
|
||||
|
||||
</md-content><!--end social profile content section-->
|
||||
</md-tab>
|
||||
<md-tab label="More">
|
||||
<md-content class="md-padding">
|
||||
<!--list section-->
|
||||
<md-list>
|
||||
<md-subheader class="foursquare-color">More Foursquare APIs.</md-subheader>
|
||||
<md-list-item class="md-list-item-default" ng-click="navigateTo('app.foursquareFeed')">
|
||||
<i class="ion-android-list"></i>
|
||||
|
||||
<p>View Feed</p>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-list-item-default" ng-click="logOut($event)">
|
||||
<i class="ion-locked"></i>
|
||||
|
||||
<p>Log Out</p>
|
||||
</md-list-item>
|
||||
</md-list><!--end list section-->
|
||||
</md-content>
|
||||
</md-tab>
|
||||
</md-tabs>
|
||||
<!--social loading progress section-->
|
||||
<md-progress-circular ng-show="loading" class="md-warn md-progress-social-profile ng-hide"
|
||||
md-mode="indeterminate"></md-progress-circular><!--end social loading progress section-->
|
||||
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
@@ -0,0 +1,262 @@
|
||||
// For connecting with foursquare you have to install $cordovaOauth by running the following
|
||||
// command in your cmd.exe for windows or terminal for mac:
|
||||
// $ cd your_project_path
|
||||
// $ ionic plugin remove org.apache.cordova.inappbrowser
|
||||
// $ ionic plugin add org.apache.cordova.inappbrowser
|
||||
//
|
||||
// Learn more about $cordovaOauth :
|
||||
// http://ngcordova.com/docs/plugins/oauth/
|
||||
//
|
||||
// object schema of foursquareProfile that keep in localStorage is:
|
||||
// [{
|
||||
// name: foursquare name,
|
||||
// gender: gender,
|
||||
// email: email,
|
||||
// pictureProfileUrl: foursquare picture profile url,
|
||||
// id: foursquare id,
|
||||
// homeCity: homeCity,
|
||||
// access_token: access_token
|
||||
// }]
|
||||
//
|
||||
// Controller of foursquare login Page.
|
||||
appControllers.controller('foursquareLoginCtrl', function ($scope, $filter, $state, $cordovaOauth, $http, localStorage) {
|
||||
|
||||
// This function 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.isLogin is the variable for check that user is login or not.
|
||||
$scope.isLogin = false;
|
||||
|
||||
// $scope.isLoading is the variable for loading progress.
|
||||
$scope.isLoading = false;
|
||||
|
||||
// $scope.userInfo is the variable that store user information data.
|
||||
$scope.userInfo = {
|
||||
name: "",
|
||||
gender: "",
|
||||
email: "",
|
||||
pictureProfileUrl: "",
|
||||
id: "",
|
||||
homeCity: "",
|
||||
access_token: ""
|
||||
};
|
||||
// Getting user information.
|
||||
$scope.userInfo = $scope.getUserProfile();
|
||||
// Getting current date.
|
||||
$scope.today = $filter('date')(new Date(), "yyyyMMdd");
|
||||
};// End initialForm.
|
||||
|
||||
// navigateTo is for navigate to other page
|
||||
// by using targetPage to be the destination page.
|
||||
// Parameter :
|
||||
// targetPage = destination page.
|
||||
$scope.navigateTo = function (targetPage) {
|
||||
$state.go(targetPage);
|
||||
};// End navigateTo.
|
||||
|
||||
// goToUserProfile is for navigate to foursquare Profile page.
|
||||
$scope.goToUserProfile = function () {
|
||||
if ($scope.isLoading == false) {
|
||||
$scope.isLoading = true;
|
||||
$scope.navigateTo('app.foursquareProfile');
|
||||
$scope.isLoading = false;
|
||||
}
|
||||
};// End goToUserProfile.
|
||||
|
||||
//getUserProfile is for get user information form localStorage by calling localStorage.get service.
|
||||
$scope.getUserProfile = function () {
|
||||
$scope.userInfo = localStorage.get("Foursquare");
|
||||
if ($scope.userInfo != null) {
|
||||
$scope.isLogin = true;
|
||||
}
|
||||
;
|
||||
return $scope.userInfo;
|
||||
};// End getUserProfile.
|
||||
|
||||
// login for foursquare login
|
||||
$scope.login = function () {
|
||||
if ($scope.isLoading == false) {
|
||||
$scope.isLoading = true;
|
||||
|
||||
// Calling $cordovaOauth.foursquare for login foursquare.
|
||||
// Format:
|
||||
// $cordovaOauth.foursquare(CLIENT_ID,[FOURSQUARE_PERMISION])
|
||||
// For CLIENT_ID is window.globalVariable.oAuth.foursquare from www/js/app.js at globalVariable session.
|
||||
$cordovaOauth.foursquare(window.globalVariable.oAuth.foursquare).then(function (result) {
|
||||
//After call cordovaOauth.foursquare it will return access_token for you to calling foursquare API.
|
||||
$scope.accessToken = result.access_token;
|
||||
// Calling http service for getting user profile from foursquare.
|
||||
// By send parameter access_token , v (v is current version date).
|
||||
$http.get("https://api.foursquare.com/v2/users/self", {
|
||||
params: {
|
||||
oauth_token: result.access_token,
|
||||
v: $scope.today
|
||||
}
|
||||
}).then(function (result) {
|
||||
// Success retrieve data by calling http service.
|
||||
// Store user profile information from foursquare API to userInfo variable.
|
||||
$scope.userInfo = {
|
||||
name: result.data.response.user.firstName + " " + result.data.response.user.lastName,
|
||||
gender: result.data.response.user.gender,
|
||||
email: result.data.response.user.contact.email,
|
||||
pictureProfileUrl: result.data.response.user.photo.prefix + "256x256" + result.data.response.user.photo.suffix,
|
||||
id: result.data.response.user.id,
|
||||
homeCity: result.data.response.user.homeCity,
|
||||
access_token: $scope.accessToken
|
||||
};
|
||||
// Store user profile information to localStorage service.
|
||||
localStorage.set("Foursquare", $scope.userInfo);
|
||||
// Navigate to foursquare profile page.
|
||||
$scope.navigateTo("app.foursquareProfile");
|
||||
});
|
||||
|
||||
}
|
||||
, function (error) {
|
||||
// Error retrieve data.
|
||||
console.log(error);
|
||||
});
|
||||
$scope.isLoading = false;
|
||||
}
|
||||
};// End login.
|
||||
$scope.initialForm();
|
||||
});// End of foursquare login controller.
|
||||
|
||||
// Controller of foursquare Profile Page.
|
||||
appControllers.controller('foursquareProfileCtrl', function ($scope, $timeout, $mdDialog, $state, $ionicHistory, $stateParams, $cordovaOauth, $http, localStorage) {
|
||||
|
||||
// This function 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.userInfo is the variable for store user profile information
|
||||
// It get data from localStorage service.
|
||||
$scope.userInfo = localStorage.get("Foursquare");
|
||||
|
||||
// $scope.loading is the variable for loading progress.
|
||||
$scope.loading = true;
|
||||
|
||||
// The function for show/hide loading progress.
|
||||
$timeout(function () {
|
||||
$scope.loading = false;
|
||||
}, 2000);
|
||||
};// End initialForm.
|
||||
|
||||
// navigateTo is for navigate to other page
|
||||
// by using targetPage to be the destination page.
|
||||
// Parameter :
|
||||
// targetPage = destination page.
|
||||
$scope.navigateTo = function (targetPage) {
|
||||
$state.go(targetPage);
|
||||
};// End navigateTo.
|
||||
|
||||
// logOut is for log out it will clear foursquare data in localStorage service.
|
||||
$scope.logOut = function ($event) {
|
||||
//mdDialog.show use for show alert box for Confirm to log out.
|
||||
$mdDialog.show({
|
||||
controller: 'DialogController',
|
||||
templateUrl: 'confirm-dialog.html',
|
||||
targetEvent: $event,
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: "Confirm to Logout",
|
||||
content: "Do you want to logout Foursquare?",
|
||||
ok: "Confirm",
|
||||
cancel: "Close"
|
||||
}
|
||||
}
|
||||
}).then(function () {
|
||||
// For confirm button to log out.
|
||||
// Clear foursquare data in localStorage service.
|
||||
localStorage.set("Foursquare", null);
|
||||
$scope.userinfoData = localStorage.get("Foursquare");
|
||||
// Navigate to log in page.
|
||||
if ($scope.userinfoData == null) {
|
||||
$state.go('app.foursquareLogin');
|
||||
}
|
||||
|
||||
}, function () {
|
||||
// For cancel button to log out.
|
||||
});
|
||||
};// End logOut.
|
||||
$scope.initialForm();
|
||||
|
||||
});// End of foursquare profile controller.
|
||||
|
||||
// Controller of foursquare feed Page.
|
||||
appControllers.controller('foursquareFeedCtrl', function ($scope, $filter, $state, $ionicHistory, $stateParams, $cordovaOauth, $http, localStorage) {
|
||||
|
||||
// This function 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.feedList is the variable that store feed data.
|
||||
$scope.feedList = [];
|
||||
|
||||
// $scope.today is current date
|
||||
$scope.today = $filter('date')(new Date(), "yyyyMMdd");
|
||||
|
||||
// $scope.feedList is the variable for loading status.
|
||||
$scope.shouldLoadData = true;
|
||||
|
||||
// $scope.userInfo is the variable for store user profile information
|
||||
// It get data from localStorage service.
|
||||
$scope.userInfo = localStorage.get("Foursquare");
|
||||
}// End initialForm.
|
||||
|
||||
// getFeedData is for get feed by calling to foursquare API.
|
||||
// Parameter :
|
||||
// IsInit(bool) = for check that page are loading more data or refresh data.
|
||||
$scope.getFeedData = function (IsInit) {
|
||||
|
||||
// Call http service with this api to get foursquare feed data.
|
||||
// By send parameter access_token that get from foursquare user profile from localStorage.
|
||||
// v for version date.
|
||||
$http.get("https://api.foursquare.com/v2/users/self/tips?sort=recent", {
|
||||
params: {
|
||||
oauth_token: $scope.userInfo.access_token,
|
||||
v: $scope.today
|
||||
}
|
||||
}).then(function (result) {
|
||||
// Success retrieve data by calling http service.
|
||||
|
||||
// Store feed data to $scope.feedList variable to show in feed.
|
||||
$scope.feedList = result.data.response.tips.items;
|
||||
|
||||
// To stop loading progress.
|
||||
if (IsInit == true) {
|
||||
$scope.$broadcast('scroll.infiniteScrollComplete');
|
||||
} else {
|
||||
$scope.$broadcast('scroll.refreshComplete');
|
||||
}
|
||||
$scope.shouldLoadData = false;
|
||||
},
|
||||
function (error) {
|
||||
// Error retrieve data it will log out.
|
||||
if (error.data.meta.code = 401) {
|
||||
$scope.logout();
|
||||
}
|
||||
});
|
||||
};// End getFeedData.
|
||||
|
||||
// logout for log out.
|
||||
$scope.logout = function () {
|
||||
// Clear foursquare data in localStorage service.
|
||||
localStorage.set("Foursquare", null);
|
||||
// Navigate to log in page.
|
||||
$ionicHistory.nextViewOptions({
|
||||
disableBack: true
|
||||
});
|
||||
$scope.userinfoData = localStorage.get("Foursquare");
|
||||
if ($scope.userinfoData == null) {
|
||||
$state.go('app.foursquareLogin');
|
||||
};
|
||||
};// End logout.
|
||||
|
||||
// doRefresh is for refresh feed.
|
||||
$scope.doRefresh = function () {
|
||||
$scope.shouldLoadData = true;
|
||||
$scope.getFeedData(false);
|
||||
};// End doRefresh.
|
||||
$scope.initialForm();
|
||||
|
||||
});// End of foursquare feed controller.
|
||||
@@ -0,0 +1,66 @@
|
||||
<!--View Information-->
|
||||
<!--View name : google Plus Feed-->
|
||||
<!--Controller name : googlePlusFeedCtrl-->
|
||||
<!--Controller path : www/templates/social-network-connect/google-plus/js/controllers.js-->
|
||||
<!--State name : app.googlePlusFeed-->
|
||||
<!--URL : #app/googlePlusFeed-->
|
||||
|
||||
<ion-view view-title="Google feed">
|
||||
<!--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-->
|
||||
|
||||
<!--social feed content section-->
|
||||
<ion-content id="social-feed-content">
|
||||
|
||||
<ion-refresher pulling-text="Pull to refresh..." on-refresh="doRefresh()">
|
||||
</ion-refresher>
|
||||
|
||||
<ion-list>
|
||||
|
||||
<!--social card section-->
|
||||
<md-card ng-repeat="item in feedList" class="social-card">
|
||||
<md-card-content>
|
||||
<md-list-item class="md-2-line md-no-proxy" role="listitem">
|
||||
<img ng-src="{{item.actor.image.url}}"
|
||||
class="md-avatar">
|
||||
|
||||
<div class="md-list-item-text">
|
||||
<h3>{{item.actor.displayName}}</h3>
|
||||
|
||||
<p>{{item.published | date:"short" }}</p>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<p>{{item.title}}</p>
|
||||
</md-card-content>
|
||||
<!--social card image section-->
|
||||
<div class="social-card-image">
|
||||
<img ng-src="{{item.object.attachments[0].image.url}}"
|
||||
ng-show="item.object.attachments[0].image.url != null ? true : false"
|
||||
class="ng-hide">
|
||||
</div><!--end social card image section-->
|
||||
|
||||
<!--social card footer section-->
|
||||
<div class="social-card-footer">
|
||||
<div class="row-content" layout="row">
|
||||
<div class="col-33">
|
||||
{{item.object.plusoners.totalItems | numberSuffix}} <span> Likes</span>
|
||||
</div>
|
||||
<div class="col-33">
|
||||
{{item.object.replies.totalItems | numberSuffix}} <span>Comments</span>
|
||||
</div>
|
||||
<div class="col-33">
|
||||
{{item.object.resharers.totalItems | numberSuffix}} <span>Shared</span>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--end social card footer section-->
|
||||
</md-card><!--end social card section-->
|
||||
|
||||
<ion-infinite-scroll ng-if="!paging.shouldLoadData" on-infinite="loadMore()" distance="1%">
|
||||
</ion-infinite-scroll>
|
||||
|
||||
</ion-content><!--end social feed content section-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,41 @@
|
||||
<!--View Information-->
|
||||
<!--View name : google Plus Login-->
|
||||
<!--Controller name : googlePlusLoginCtrl-->
|
||||
<!--Controller path : www/templates/social-network-connect/google-plus/js/controllers.js-->
|
||||
<!--State name : app.googlePlusLogin-->
|
||||
<!--URL : #app/googlePlusLogin-->
|
||||
|
||||
<ion-view title="Google Plus Connect">
|
||||
<!--login content section-->
|
||||
<ion-content scroll="false" id="social-login">
|
||||
<form>
|
||||
|
||||
<div>
|
||||
<i class="fa fa-google-plus google-plus-color"></i>
|
||||
</div>
|
||||
<div class="sub-header">Connect data with google plus.</div>
|
||||
|
||||
<div class="ng-hide" ng-show="isLogin">
|
||||
<a class="md-raised social-button md-button md-default-theme google-plus-color-background"
|
||||
ng-click="goToUserProfile()">
|
||||
GO TO GOOGLE PLUS APP
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="ng-hide" ng-show="!isLogin">
|
||||
<a class="md-raised social-button md-button md-default-theme google-plus-color-background"
|
||||
ng-click="login()">
|
||||
LOG IN WITH GOOGLE PLUS
|
||||
</a>
|
||||
<br/>
|
||||
<a href="#/app/fakeSignUp" class="md-raised md-button md-default-theme social-default-button">SIGN
|
||||
UP</a>
|
||||
<a href="#/app/tryApp" class="md-raised md-button md-default-theme social-default-button">TRY APP</a>
|
||||
|
||||
<div class="footer">Already have an account? <a href="#/app/fakeLogin">Sign In</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</ion-content><!--end login content section-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,85 @@
|
||||
<!--View Information-->
|
||||
<!--View name : google Plus Profile-->
|
||||
<!--Controller name : googlePlusProfileCtrl-->
|
||||
<!--Controller path : www/templates/social-network-connect/google-plus/js/controllers.js-->
|
||||
<!--State name : app.googlePlusProfile-->
|
||||
<!--URL : #app/googlePlusProfile-->
|
||||
|
||||
<ion-view title="Social">
|
||||
<!--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>
|
||||
<div class="toolbar-image-cover" style="background-image: url('{{userInfo.pictureProfileUrl}}');"></div>
|
||||
<md-tabs class="ng-hide" ng-show="!loading" md-dynamic-height md-border-bottom>
|
||||
<md-tab label="Profile">
|
||||
<!--social profile content section-->
|
||||
<md-content id="social-profile-content" class="md-padding">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="ion-card"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.id}}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="ion-android-person"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.name}}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="fa fa-circle-thin"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.gender}}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="ion-android-mail"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.email}}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="ion-link"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.link}}</div>
|
||||
</div>
|
||||
|
||||
</md-content><!--end social profile content section-->
|
||||
</md-tab>
|
||||
<md-tab label="More">
|
||||
<md-content class="md-padding">
|
||||
<!--list section-->
|
||||
<md-list>
|
||||
<md-subheader class="google-plus-color">More Google Plus APIs.</md-subheader>
|
||||
<md-list-item class="md-list-item-default"
|
||||
ng-click="navigateTo('app.googlePlusFeed')">
|
||||
<i class="ion-android-list"></i>
|
||||
|
||||
<p>View Feed</p>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-list-item-default" ng-click="logOut($event)">
|
||||
<i class="ion-locked"></i>
|
||||
|
||||
<p>Log Out</p>
|
||||
</md-list-item>
|
||||
</md-list><!--end list section-->
|
||||
</md-content>
|
||||
</md-tab>
|
||||
</md-tabs>
|
||||
<!--social loading progress section-->
|
||||
<md-progress-circular ng-show="loading" class="md-warn md-progress-social-profile ng-hide"
|
||||
md-mode="indeterminate"></md-progress-circular><!--end social loading progress section-->
|
||||
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
@@ -0,0 +1,326 @@
|
||||
// For connecting with google you have to install $cordovaOauth by running the following
|
||||
// command in your cmd.exe for windows or terminal for mac:
|
||||
// $ cd your_project_path
|
||||
// $ ionic plugin remove org.apache.cordova.inappbrowser
|
||||
// $ ionic plugin add org.apache.cordova.inappbrowser
|
||||
//
|
||||
// Learn more about $cordovaOauth :
|
||||
// http://ngcordova.com/docs/plugins/oauth/
|
||||
//
|
||||
// object schema of google plus profile that keep in localStorage is:
|
||||
// [{
|
||||
// name: google plus name,
|
||||
// email: email,
|
||||
// link: google plus link,
|
||||
// pictureProfileUrl: google plus profile url,
|
||||
// gender: gender,
|
||||
// id: google plus id,
|
||||
// access_token: access_token
|
||||
// }]
|
||||
//
|
||||
// Controller of google plus login Page.
|
||||
appControllers.controller('googlePlusLoginCtrl', function ($scope, $state, $cordovaOauth, $http, localStorage) {
|
||||
|
||||
// This function 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.isLogin is the variable for check that user is login or not.
|
||||
$scope.isLogin = false;
|
||||
|
||||
// $scope.isLoading is the variable for loading progress.
|
||||
$scope.isLoading = false;
|
||||
|
||||
// $scope.userInfo is the variable that store user information data.
|
||||
$scope.userInfo = {
|
||||
name: "",
|
||||
email: "",
|
||||
link: "",
|
||||
pictureProfileUrl: "",
|
||||
gender: "",
|
||||
id: "",
|
||||
access_token: ""
|
||||
};
|
||||
|
||||
// Getting user information.
|
||||
$scope.userInfo = $scope.getUserProfile();
|
||||
};// End initialForm.
|
||||
|
||||
// navigateTo is for navigate to other page
|
||||
// by using targetPage to be the destination page.
|
||||
// Parameter :
|
||||
// targetPage = destination page.
|
||||
$scope.navigateTo = function (targetPage) {
|
||||
$state.go(targetPage);
|
||||
};// End navigateTo.
|
||||
|
||||
// goToUserProfile is for navigate to Google Plus Profile page.
|
||||
$scope.goToUserProfile = function () {
|
||||
if ($scope.isLoading == false) {
|
||||
$scope.isLoading = true;
|
||||
$scope.navigateTo('app.googlePlusProfile');
|
||||
$scope.isLoading = false;
|
||||
}
|
||||
};// End goToUserProfile.
|
||||
|
||||
//getUserProfile is for get user information form localStorage by calling localStorage.get service.
|
||||
$scope.getUserProfile = function () {
|
||||
$scope.userInfo = localStorage.get("GooglePlus");
|
||||
if ($scope.userInfo != null) {
|
||||
$scope.isLogin = true;
|
||||
}
|
||||
;
|
||||
return $scope.userInfo;
|
||||
};// End getUserProfile.
|
||||
|
||||
// login for google login
|
||||
$scope.login = function () {
|
||||
if ($scope.isLoading == false) {
|
||||
$scope.isLoading = true;
|
||||
|
||||
// Calling $cordovaOauth.google for login google.
|
||||
// Format:
|
||||
// $cordovaOauth.google(CLIENT_ID,[GOOGLE_PERMISION])
|
||||
// For CLIENT_ID is window.globalVariable.oAuth.googlePlus from www/js/app.js at globalVariable session.
|
||||
$cordovaOauth.google(window.globalVariable.oAuth.googlePlus
|
||||
, ["https://www.googleapis.com/auth/urlshortener",
|
||||
"https://www.googleapis.com/auth/userinfo.email"]).then(function (result) {
|
||||
//After call cordovaOauth.google it will return access_token for you to calling google API.
|
||||
|
||||
$scope.accessToken = result.access_token;
|
||||
// Calling http service for getting user profile from google.
|
||||
// By send parameter access_token, format.
|
||||
$http.get("https://www.googleapis.com/oauth2/v1/userinfo", {
|
||||
params: {
|
||||
access_token: result.access_token,
|
||||
format: "json"
|
||||
}
|
||||
}).then(function (result) {
|
||||
// Success retrieve data by calling http service.
|
||||
// Store user profile information from google API to userInfo variable.
|
||||
$scope.userInfo = {
|
||||
name: result.data.name,
|
||||
email: result.data.email,
|
||||
link: result.data.link,
|
||||
pictureProfileUrl: result.data.picture,
|
||||
gender: result.data.gender,
|
||||
id: result.data.id,
|
||||
access_token: $scope.accessToken
|
||||
};
|
||||
// Store user profile information to localStorage service.
|
||||
localStorage.set("GooglePlus", $scope.userInfo);
|
||||
// Navigate to google plus profile page.
|
||||
$scope.navigateTo("app.googlePlusProfile");
|
||||
});
|
||||
|
||||
}
|
||||
, function (error) {
|
||||
// Error retrieve data.
|
||||
console.log(error);
|
||||
});
|
||||
$scope.isLoading = false;
|
||||
}
|
||||
};// End login.
|
||||
|
||||
$scope.initialForm();
|
||||
});// End of google plus login controller.
|
||||
|
||||
// Controller of google plus profile Page.
|
||||
appControllers.controller('googlePlusProfileCtrl', function ($mdDialog, $scope, $state, $stateParams, $cordovaOauth, $ionicHistory, $http, localStorage, $timeout) {
|
||||
|
||||
// This function 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.userInfo is the variable for store user profile information
|
||||
// It get data from localStorage service.
|
||||
$scope.userInfo = localStorage.get("GooglePlus");
|
||||
|
||||
// $scope.loading is the variable for loading progress.
|
||||
$scope.loading = true;
|
||||
|
||||
// The function for show/hide loading progress.
|
||||
$timeout(function () {
|
||||
$scope.loading = false;
|
||||
}, 2000);
|
||||
};// End initialForm.
|
||||
|
||||
// navigateTo is for navigate to other page
|
||||
// by using targetPage to be the destination page
|
||||
// Parameter :
|
||||
// targetPage = destination page.
|
||||
$scope.navigateTo = function (targetPage) {
|
||||
$state.go(targetPage);
|
||||
};// End navigateTo
|
||||
|
||||
// logOut is for log out it will clear google plus data in localStorage service.
|
||||
$scope.logOut = function ($event) {
|
||||
//mdDialog.show use for show alert box for confirm to log out.
|
||||
$mdDialog.show({
|
||||
controller: 'DialogController',
|
||||
templateUrl: 'confirm-dialog.html',
|
||||
targetEvent: $event,
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: "Confirm to Logout",
|
||||
content: "Do you want to logout Google Plus?",
|
||||
ok: "Confirm",
|
||||
cancel: "Close"
|
||||
}
|
||||
}
|
||||
}).then(function () {
|
||||
// For confirm button to log out.
|
||||
// Clear google plus data in localStorage service.
|
||||
localStorage.set("GooglePlus", null);
|
||||
// Navigate to log in page.
|
||||
$scope.userinfoData = localStorage.get("GooglePlus");
|
||||
if ($scope.userinfoData == null) {
|
||||
$state.go('app.googlePlusLogin');
|
||||
}
|
||||
|
||||
}, function () {
|
||||
// For cancel button to log out.
|
||||
});
|
||||
};// End logOut
|
||||
|
||||
$scope.initialForm();
|
||||
|
||||
});// End of google plus profile controller.
|
||||
|
||||
// Controller of google plus feed Page.
|
||||
appControllers.controller('googlePlusFeedCtrl', function ($scope, $state, $ionicHistory, $stateParams, $cordovaOauth, $http, localStorage) {
|
||||
|
||||
// This function 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.paging is the variable that store page index of feed data.
|
||||
$scope.paging = {
|
||||
next: "",
|
||||
shouldLoadData: false
|
||||
};
|
||||
// $scope.userInfo is the variable for store user profile information
|
||||
// It get data from localStorage service.
|
||||
$scope.userInfo = localStorage.get("GooglePlus");
|
||||
|
||||
// $scope.loading is the variable for loading progress.
|
||||
$scope.isLoading = false;
|
||||
|
||||
// $scope.feedList is the variable that store feed data.
|
||||
$scope.feedList = [];
|
||||
}// End initialForm.
|
||||
|
||||
// getFeedData is for get feed by calling to google API.
|
||||
// Parameter :
|
||||
// IsInit(bool) = for check that page are loading more data or refresh data.
|
||||
$scope.getFeedData = function (IsInit) {
|
||||
// Call http service with this api to get google plus feed data.
|
||||
// By send parameter access_token that get from google plus user profile from localStorage.
|
||||
$http.get("https://www.googleapis.com/plus/v1/people/me/activities/public", {
|
||||
params: {
|
||||
access_token: $scope.userInfo.access_token
|
||||
}
|
||||
})
|
||||
.then(function (result) {
|
||||
// Success retrieve data by calling http service.
|
||||
|
||||
// Store feed data to $scope.feedList variable to show in feed.
|
||||
$scope.feedList = result.data.items;
|
||||
|
||||
// If it don't have data. Loading progress will stop and appear empty feed.
|
||||
if ($scope.feedList == []) {
|
||||
$scope.paging.shouldLoadData = true;
|
||||
};
|
||||
|
||||
// Checking for next page data
|
||||
if (result.data.nextPageToken == null) {
|
||||
$scope.paging.shouldLoadData = true;
|
||||
}
|
||||
else {
|
||||
$scope.paging.next = result.data.nextPageToken;
|
||||
}// End checking for next page data.
|
||||
|
||||
// To stop loading progress.
|
||||
if (IsInit == true) {
|
||||
$scope.$broadcast('scroll.infiniteScrollComplete');
|
||||
} else {
|
||||
$scope.$broadcast('scroll.refreshComplete');
|
||||
}
|
||||
$scope.isLoading = false;
|
||||
}
|
||||
, function (error) {
|
||||
// Error retrieve data it will log out.
|
||||
if (error.code = 403) {
|
||||
$scope.logout();
|
||||
}
|
||||
$scope.paging.shouldLoadData = true;
|
||||
});
|
||||
|
||||
}; // End getFeedData.
|
||||
|
||||
// logout for log out.
|
||||
$scope.logout = function () {
|
||||
// Clear google plus data in localStorage service.
|
||||
localStorage.set("GooglePlus", null);
|
||||
// Navigate to log in page.
|
||||
$ionicHistory.nextViewOptions({
|
||||
disableBack: true
|
||||
});
|
||||
$scope.userinfoData = localStorage.get("GooglePlus");
|
||||
if ($scope.userinfoData == null) {
|
||||
$state.go('app.googlePlusLogin');
|
||||
};
|
||||
};// End logout.
|
||||
|
||||
// getNextFeedData for get next page of feed data.
|
||||
$scope.getNextFeedData = function () {
|
||||
$scope.isLoading = true;
|
||||
// Call http service with google API and send parameter pageToken that get from the previous feed.
|
||||
$http.get("https://www.googleapis.com/plus/v1/people/me/activities/public", {
|
||||
params: {
|
||||
access_token: $scope.userInfo.access_token,
|
||||
pageToken: $scope.paging.next
|
||||
}
|
||||
}).then(function (result) {
|
||||
// Success retrieve data by calling http service.
|
||||
|
||||
// storing feed data to $scope.feedList.
|
||||
for (var feedItem = 0; feedItem < result.data.items.length; feedItem++) {
|
||||
$scope.feedList.push(result.data.items[feedItem]);
|
||||
}
|
||||
// Checking for next page data.
|
||||
if (result.data.nextPageToken == null) {
|
||||
|
||||
$scope.paging.shouldLoadData = true;
|
||||
}
|
||||
else {
|
||||
|
||||
$scope.paging.next = result.data.nextPageToken;
|
||||
}// End checking for next page data.
|
||||
|
||||
// To stop loading progress.
|
||||
$scope.$broadcast('scroll.infiniteScrollComplete');
|
||||
$scope.isLoading = false;
|
||||
});
|
||||
};// End getNextFeedData.
|
||||
|
||||
// doRefresh is for refresh feed.
|
||||
$scope.doRefresh = function () {
|
||||
$scope.paging.shouldLoadData = false;
|
||||
$scope.getFeedData(false);
|
||||
};// End doRefresh.
|
||||
|
||||
// loadMore is for loading more feed.
|
||||
$scope.loadMore = function () {
|
||||
if ($scope.isLoading == false) {
|
||||
$scope.isLoading = true;
|
||||
if ($scope.paging.next == "") {
|
||||
$scope.getFeedData(true);
|
||||
} else {
|
||||
$scope.getNextFeedData();
|
||||
}
|
||||
}
|
||||
};// End loadMore.
|
||||
$scope.initialForm();
|
||||
|
||||
});// End of google plus feed controller.
|
||||
@@ -0,0 +1,64 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Instagram Feed-->
|
||||
<!--Controller name : instagramFeedCtrl-->
|
||||
<!--Controller path : www/templates/social-network-connect/instagram/js/controllers.js-->
|
||||
<!--State name : app.instagramFeed-->
|
||||
<!--URL : #app/instagramFeed-->
|
||||
|
||||
<ion-view view-title="Instagram feed">
|
||||
<!--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-->
|
||||
|
||||
<!--social feed content section-->
|
||||
<ion-content id="social-feed-content">
|
||||
|
||||
<ion-refresher pulling-text="Pull to refresh..." on-refresh="doRefresh()">
|
||||
</ion-refresher>
|
||||
|
||||
<ion-list>
|
||||
<!--social card section-->
|
||||
<md-card ng-repeat="item in feedList" class="social-card">
|
||||
|
||||
<md-card-content>
|
||||
<md-list-item class="md-2-line md-no-proxy" role="listitem">
|
||||
<img ng-src="{{item.user.profile_picture}}"
|
||||
class="md-avatar">
|
||||
|
||||
<div class="md-list-item-text">
|
||||
<h3>{{item.user.username}}</h3>
|
||||
|
||||
<p>{{item.created_time |epochToDate | date:"short"}}</p>
|
||||
|
||||
<p ng-show="item.location.name != null ? true : false"><i class="fa fa-location-arrow"></i>
|
||||
{{item.location.name}}</p>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<p>{{item.caption.text}}</p>
|
||||
</md-card-content>
|
||||
<!--social card image section-->
|
||||
<div class="social-card-image">
|
||||
<img ng-src="{{item.images.standard_resolution.url}}">
|
||||
</div><!--end social card image section-->
|
||||
|
||||
<!--social card footer section-->
|
||||
<div class="social-card-footer">
|
||||
<div class="row-content" layout="row">
|
||||
<div class="col-50">
|
||||
{{item.likes.count | numberSuffix}} <span> Likes</span>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
{{item.comments.count | numberSuffix}} <span>Comments</span>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--end social card footer section-->
|
||||
</md-card><!--end social card section-->
|
||||
|
||||
<ion-infinite-scroll ng-if="!paging.shouldLoadData" on-infinite="loadMore()" distance="1%">
|
||||
</ion-infinite-scroll>
|
||||
|
||||
</ion-content><!--end social feed content section-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,41 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Instagram Login-->
|
||||
<!--Controller name : instagramLoginCtrl-->
|
||||
<!--Controller path : www/templates/social-network-connect/instagram/js/controllers.js-->
|
||||
<!--State name : app.instagramLogin-->
|
||||
<!--URL : #app/instagramLogin-->
|
||||
|
||||
<ion-view title="Instagram Connect">
|
||||
<!--login content section-->
|
||||
<ion-content scroll="false" id="social-login">
|
||||
<form>
|
||||
|
||||
<div>
|
||||
<i class="fa fa-instagram instagram-color"></i>
|
||||
</div>
|
||||
<div class="sub-header">Connect data with instagram.</div>
|
||||
|
||||
<div class="ng-hide" ng-show="isLogin">
|
||||
<a class="md-raised social-button md-button md-default-theme instagram-color-background"
|
||||
ng-click="goToUserProfile()">
|
||||
GO TO INSTAGRAM APP
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="ng-hide" ng-show="!isLogin">
|
||||
<a class="md-raised social-button md-button md-default-theme instagram-color-background"
|
||||
ng-click="login()">
|
||||
LOG IN WITH INSTAGRAM
|
||||
</a>
|
||||
<br/>
|
||||
<a href="#/app/fakeSignUp" class="md-raised md-button md-default-theme social-default-button">SIGN
|
||||
UP</a>
|
||||
<a href="#/app/tryApp" class="md-raised md-button md-default-theme social-default-button">TRY APP</a>
|
||||
|
||||
<div class="footer">Already have an account? <a href="#/app/fakeLogin">Sign In</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</ion-content><!--end login content section-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,101 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Instagram Profile-->
|
||||
<!--Controller name : instagramProfileCtrl-->
|
||||
<!--Controller path : www/templates/social-network-connect/instagram/js/controllers.js-->
|
||||
<!--State name : app.instagramProfile-->
|
||||
<!--URL : #app/instagramProfile-->
|
||||
|
||||
<ion-view title="Social">
|
||||
<!--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>
|
||||
<div class="toolbar-image-cover material-background-nav-bar">
|
||||
<img ng-src="{{userInfo.pictureProfileUrl}}" class="user-img"/>
|
||||
</div>
|
||||
<md-tabs class="ng-hide" ng-show="!loading" md-dynamic-height md-border-bottom>
|
||||
<md-tab label="Profile">
|
||||
<!--social profile content section-->
|
||||
<md-content id="social-profile-content" class="md-padding">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="ion-card"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.id}}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="ion-android-person"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.name}}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="ion-information-circled"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.bio}}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="ion-android-desktop"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.website}}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="ion-images"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.post}}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="ion-android-people"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.followers}}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="ion-android-person-add"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.following}}</div>
|
||||
</div>
|
||||
|
||||
</md-content><!--end social profile content section-->
|
||||
</md-tab>
|
||||
<md-tab label="More">
|
||||
<md-content class="md-padding">
|
||||
<!--list section-->
|
||||
<md-list>
|
||||
<md-subheader class="instagram-color">More Instagram APIs.</md-subheader>
|
||||
<md-list-item class="md-list-item-default"
|
||||
ng-click="navigateTo('app.instagramFeed')">
|
||||
<i class="ion-android-list"></i>
|
||||
|
||||
<p>View Feed</p>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-list-item-default" ng-click="logOut($event)">
|
||||
<i class="ion-locked"></i>
|
||||
|
||||
<p>Log Out</p>
|
||||
</md-list-item>
|
||||
</md-list><!--end list section-->
|
||||
</md-content>
|
||||
</md-tab>
|
||||
</md-tabs>
|
||||
|
||||
<!--social loading progress section-->
|
||||
<md-progress-circular ng-show="loading" class="md-warn md-progress-social-profile ng-hide"
|
||||
md-mode="indeterminate"></md-progress-circular><!--end social loading progress section-->
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
@@ -0,0 +1,328 @@
|
||||
// For connecting with instagram you have to install $cordovaOauth by running the following
|
||||
// command in your cmd.exe for windows or terminal for mac:
|
||||
// $ cd your_project_path
|
||||
// $ ionic plugin remove org.apache.cordova.inappbrowser
|
||||
// $ ionic plugin add org.apache.cordova.inappbrowser
|
||||
//
|
||||
// Learn more about $cordovaOauth :
|
||||
// http://ngcordova.com/docs/plugins/oauth/
|
||||
//
|
||||
// object schema of instagramProfile that keep in localStorage is:
|
||||
// [{
|
||||
// name: instagram name,
|
||||
// bio: bio,
|
||||
// website: website,
|
||||
// pictureProfileUrl: instagram picture profile url,
|
||||
// id: instagram id,
|
||||
// post: post,
|
||||
// followers: followers,
|
||||
// following: following,
|
||||
// access_token: access_token
|
||||
// }]
|
||||
//
|
||||
// Controller of instagram login Page.
|
||||
appControllers.controller('instagramLoginCtrl', function ($scope, $state, $cordovaOauth, $http, localStorage) {
|
||||
|
||||
// This function 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.isLogin is the variable for check that user is login or not.
|
||||
$scope.isLogin = false;
|
||||
|
||||
// $scope.isLoading is the variable for loading progress.
|
||||
$scope.isLoading = false;
|
||||
|
||||
// $scope.userInfo is the variable that store user information data.
|
||||
$scope.userInfo = {
|
||||
name: "",
|
||||
bio: "",
|
||||
website: "",
|
||||
pictureProfileUrl: "",
|
||||
id: "",
|
||||
post: 0,
|
||||
followers: 0,
|
||||
following: 0,
|
||||
access_token: ""
|
||||
};
|
||||
|
||||
// Getting user information.
|
||||
$scope.userInfo = $scope.getUserProfile();
|
||||
};// End initialForm.
|
||||
|
||||
// navigateTo is for navigate to other page
|
||||
// by using targetPage to be the destination page.
|
||||
// Parameter :
|
||||
// targetPage = destination page.
|
||||
$scope.navigateTo = function (targetPage) {
|
||||
$state.go(targetPage);
|
||||
};// End navigateTo.
|
||||
|
||||
// goToUserProfile is for navigate to instagram Profile page.
|
||||
$scope.goToUserProfile = function () {
|
||||
if ($scope.isLoading == false) {
|
||||
$scope.isLoading = true;
|
||||
$scope.navigateTo('app.instagramProfile');
|
||||
$scope.isLoading = false;
|
||||
}
|
||||
};// End goToUserProfile.
|
||||
|
||||
//getUserProfile is for get user information form localStorage by calling localStorage.get service.
|
||||
$scope.getUserProfile = function () {
|
||||
$scope.userInfo = localStorage.get("Instagram");
|
||||
if ($scope.userInfo != null) {
|
||||
$scope.isLogin = true;
|
||||
}
|
||||
;
|
||||
return $scope.userInfo;
|
||||
};// End getUserProfile.
|
||||
|
||||
// login for instagram.
|
||||
$scope.login = function () {
|
||||
if ($scope.isLoading == false) {
|
||||
$scope.isLoading = true;
|
||||
|
||||
// Calling $cordovaOauth.instagram for login instagram.
|
||||
// Format:
|
||||
// $cordovaOauth.instagram(CLIENT_ID,[INSTAGRAM_PERMISION])
|
||||
// For CLIENT_ID is window.globalVariable.oAuth.instagram from www/js/app.js at globalVariable session.
|
||||
$cordovaOauth.instagram(window.globalVariable.oAuth.instagram, ["basic", "likes", "comments"]).then(function (result) {
|
||||
//After call cordovaOauth.instagram it will return access_token for you to calling instagram API.
|
||||
$scope.accessToken = result.access_token;
|
||||
// Calling http service for getting user profile from instagram.
|
||||
// By send parameter access_token , format.
|
||||
$http.get("https://api.instagram.com/v1/users/self", {
|
||||
params: {
|
||||
access_token: result.access_token,
|
||||
format: "json"
|
||||
}
|
||||
}).then(function (result) {
|
||||
// Success retrieve data by calling http service.
|
||||
// Store user profile information from instagram API to userInfo variable.
|
||||
$scope.userInfo = {
|
||||
name: result.data.data.username,
|
||||
bio: result.data.data.bio,
|
||||
website: result.data.data.website,
|
||||
pictureProfileUrl: result.data.data.profile_picture,
|
||||
id: result.data.data.id,
|
||||
post: result.data.data.counts.media,
|
||||
followers: result.data.data.counts.followed_by,
|
||||
following: result.data.data.counts.follows,
|
||||
access_token: $scope.accessToken
|
||||
};
|
||||
// Store user profile information to localStorage service.
|
||||
localStorage.set("Instagram", $scope.userInfo);
|
||||
// Navigate to instagram profile page.
|
||||
$scope.navigateTo("app.instagramProfile");
|
||||
|
||||
});
|
||||
}
|
||||
, function (error) {
|
||||
// Error retrieve data.
|
||||
console.log(error);
|
||||
});
|
||||
$scope.isLoading = false;
|
||||
}
|
||||
};// End login.
|
||||
$scope.initialForm();
|
||||
});// End of instagram login controller.
|
||||
|
||||
// Controller of instagram profile Page.
|
||||
appControllers.controller('instagramProfileCtrl', function ($mdDialog, $scope, $state, $stateParams, $cordovaOauth, $ionicHistory, $http, localStorage, $timeout) {
|
||||
|
||||
// This function 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.userInfo is the variable for store user profile information
|
||||
// It get data from localStorage service.
|
||||
$scope.userInfo = localStorage.get("Instagram");
|
||||
|
||||
// $scope.loading is the variable for loading progress.
|
||||
$scope.loading = true;
|
||||
|
||||
// The function for show/hide loading progress.
|
||||
$timeout(function () {
|
||||
$scope.loading = false;
|
||||
}, 2000);
|
||||
};// End initialForm.
|
||||
|
||||
// navigateTo is for navigate to other page
|
||||
// by using targetPage to be the destination page.
|
||||
// Parameter :
|
||||
// targetPage = destination page.
|
||||
$scope.navigateTo = function (targetPage) {
|
||||
$state.go(targetPage);
|
||||
};// End navigateTo.
|
||||
|
||||
// logOut is for log out it will clear instagram data in localStorage service.
|
||||
$scope.logOut = function ($event) {
|
||||
//mdDialog.show use for show alert box for Confirm to log out.
|
||||
$mdDialog.show({
|
||||
controller: 'DialogController',
|
||||
templateUrl: 'confirm-dialog.html',
|
||||
targetEvent: $event,
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: "Confirm to Logout",
|
||||
content: "Do you want to logout Instagram?",
|
||||
ok: "Confirm",
|
||||
cancel: "Close"
|
||||
}
|
||||
}
|
||||
}).then(function () {
|
||||
// For confirm button to log out.
|
||||
// Clear instagram data in localStorage service.
|
||||
localStorage.set("Instagram", null);
|
||||
$scope.userinfoData = localStorage.get("Instagram");
|
||||
// Navigate to log in page.
|
||||
if ($scope.userinfoData == null) {
|
||||
$state.go('app.instagramLogin');
|
||||
}
|
||||
|
||||
|
||||
}, function () {
|
||||
// For cancel button to log out.
|
||||
});
|
||||
|
||||
|
||||
};// End logOut.
|
||||
$scope.initialForm();
|
||||
});// End of instagram profile controller.
|
||||
|
||||
// Controller of instagram feed Page.
|
||||
appControllers.controller('instagramFeedCtrl', function ($scope, $state, $ionicHistory, $stateParams, $cordovaOauth, $http, localStorage) {
|
||||
|
||||
// This function 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.paging is the variable that store page index of feed data.
|
||||
$scope.paging = {
|
||||
next: "",
|
||||
shouldLoadData: false
|
||||
};
|
||||
// $scope.userInfo is the variable for store user profile information.
|
||||
// It get data from localStorage service.
|
||||
$scope.userInfo = localStorage.get("Instagram");
|
||||
|
||||
// $scope.loading is the variable for loading progress.
|
||||
$scope.isLoading = false;
|
||||
|
||||
// $scope.feedList is the variable that store feed data.
|
||||
$scope.feedList = [];
|
||||
}// End initialForm.
|
||||
|
||||
// getFeedData is for get feed by calling to instagram API.
|
||||
// Parameter :
|
||||
// IsInit(bool) = for check that page are loading more data or refresh data.
|
||||
$scope.getFeedData = function (IsInit) {
|
||||
|
||||
// Call http service with this api to get instagram feed data.
|
||||
// By send parameter access_token that get from instagram user profile from localStorage.
|
||||
$http.get("https://api.instagram.com/v1/users/self/feed", {
|
||||
params: {
|
||||
access_token: $scope.userInfo.access_token
|
||||
}
|
||||
})
|
||||
.then(function (result) {
|
||||
// Success retrieve data by calling http service.
|
||||
|
||||
// store feed data to $scope.feedList variable to show in feed.
|
||||
$scope.feedList = result.data.data;
|
||||
|
||||
// If it don't have data. Loading progress will stop and appear empty feed.
|
||||
if ($scope.feedList == []) {
|
||||
$scope.paging.shouldLoadData = true;
|
||||
}
|
||||
// Checking for next page data
|
||||
if (result.data.pagination.next_url == null) {
|
||||
|
||||
$scope.paging.shouldLoadData = true;
|
||||
}
|
||||
else {
|
||||
$scope.paging.next = result.data.pagination.next_url;
|
||||
}// End checking for next page data.
|
||||
|
||||
// To stop loading progress.
|
||||
if (IsInit == true) {
|
||||
$scope.$broadcast('scroll.infiniteScrollComplete');
|
||||
} else {
|
||||
$scope.$broadcast('scroll.refreshComplete');
|
||||
}
|
||||
|
||||
$scope.isLoading = false;
|
||||
}
|
||||
, function (error) {
|
||||
// Error retrieve data it will log out.
|
||||
if (error.data.meta.code = 400) {
|
||||
$scope.logout();
|
||||
}
|
||||
});
|
||||
};// End getFeedData.
|
||||
|
||||
// logout for log out.
|
||||
$scope.logout = function () {
|
||||
// Clear instagram data in localStorage service.
|
||||
localStorage.set("Instagram", null);
|
||||
|
||||
// Navigate to log in page.
|
||||
$ionicHistory.nextViewOptions({
|
||||
disableBack: true
|
||||
});
|
||||
$scope.userinfoData = localStorage.get("Instagram");
|
||||
if ($scope.userinfoData == null) {
|
||||
$state.go('app.instagramLogin');
|
||||
};
|
||||
}; // End logout.
|
||||
|
||||
// getNextFeedData for get next page of feed data.
|
||||
$scope.getNextFeedData = function () {
|
||||
$scope.isLoading = true;
|
||||
// Call http service with $scope.paging.next url that get from the previous feed.
|
||||
$http.get($scope.paging.next, {
|
||||
params: {
|
||||
format: "json"
|
||||
}
|
||||
}).then(function (result) {
|
||||
// Success retrieve data by calling http service.
|
||||
|
||||
// Storing feed data to $scope.feedList.
|
||||
for (var feedItem = 0; feedItem < result.data.data.length; feedItem++) {
|
||||
$scope.feedList.push(result.data.data[feedItem]);
|
||||
}
|
||||
|
||||
// Checking for next page data.
|
||||
if (result.data.pagination.next_url == null) {
|
||||
$scope.paging.shouldLoadData = true;
|
||||
} else {
|
||||
$scope.paging.next = result.data.pagination.next_url;
|
||||
}// End checking for next page data.
|
||||
|
||||
// To stop loading progress.
|
||||
$scope.$broadcast('scroll.infiniteScrollComplete');
|
||||
$scope.isLoading = false;
|
||||
});
|
||||
};// End getNextFeedData.
|
||||
|
||||
// doRefresh is for refresh feed.
|
||||
$scope.doRefresh = function () {
|
||||
$scope.paging.shouldLoadData = false;
|
||||
$scope.getFeedData(false);
|
||||
};// End doRefresh.
|
||||
|
||||
// loadMore is for loading more feed.
|
||||
$scope.loadMore = function () {
|
||||
if ($scope.isLoading == false) {
|
||||
$scope.isLoading = true;
|
||||
if ($scope.paging.next == "") {
|
||||
$scope.getFeedData(true);
|
||||
} else {
|
||||
$scope.getNextFeedData();
|
||||
}
|
||||
}
|
||||
};// End loadMore.
|
||||
|
||||
$scope.initialForm();
|
||||
|
||||
});// End of instagram feed controller.
|
||||
@@ -0,0 +1,71 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Wordpress Feed-->
|
||||
<!--Controller name : wordpressFeedCtrl-->
|
||||
<!--Controller path : www/templates/social-network-connect/wordpress/js/controllers.js-->
|
||||
<!--State name : app.wordpressFeed-->
|
||||
<!--URL : #app/wordpressFeed-->
|
||||
|
||||
<ion-view view-title="wordpress">
|
||||
<!--left button on navigation bar-->
|
||||
<ion-nav-buttons side="left">
|
||||
<a ng-click="goBack()" 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-->
|
||||
<!--social feed content section-->
|
||||
<ion-content id="social-feed-content">
|
||||
<ion-refresher pulling-text="Pull to refresh..." on-refresh="doRefresh()">
|
||||
</ion-refresher>
|
||||
|
||||
<!--social card section-->
|
||||
<md-card ng-repeat="item in feedList" ng-click="navigateTo('app.wordpressPost',item,wordpressUrl)"
|
||||
class="social-card">
|
||||
<md-card-content>
|
||||
<md-list-item class="md-2-line md-no-proxy" role="listitem">
|
||||
<img ng-src="{{item.author.avatar}}" class="md-avatar">
|
||||
|
||||
<div class="md-list-item-text">
|
||||
<h3>{{item.author.username}}</h3>
|
||||
|
||||
<p>{{item.date | date:"short" }}</p>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<p class="feed-name">{{item.title}}</p>
|
||||
|
||||
<div class="wp-content" data-ng-bind-html="item.content"></div>
|
||||
</md-card-content>
|
||||
|
||||
<!--social card wordpress footer section-->
|
||||
<div class="social-card-wp-footer row">
|
||||
<div class="col">
|
||||
<i class="ion-android-folder"></i>
|
||||
<span ng-repeat="category in item.terms.category">
|
||||
{{category.name}}{{($index != item.terms.category.length-1) ? ",":""}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="social-card-wp-footer row">
|
||||
<div class="col">
|
||||
<i class="ion-pricetags"></i>
|
||||
<span ng-repeat="tag in item.terms.post_tag">
|
||||
{{tag.name}}{{($index != item.terms.post_tag.length-1) ? ",":""}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="social-card-wp-footer row">
|
||||
<div class="col no-border-bottom">
|
||||
<i class="ion-android-chat"></i>
|
||||
<span> View comments </span>
|
||||
</div>
|
||||
</div>
|
||||
<!--social card wordpress footer section-->
|
||||
|
||||
</md-card> <!--end social card section-->
|
||||
|
||||
<ion-infinite-scroll ng-if="!paging.shouldLoadData" on-infinite="loadMore()" distance="1%">
|
||||
</ion-infinite-scroll>
|
||||
|
||||
</ion-content><!--social feed content section-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,36 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Wordpress Login-->
|
||||
<!--Controller name : wordpressLoginCtrl-->
|
||||
<!--Controller path : www/templates/social-network-connect/wordpress/js/controllers.js-->
|
||||
<!--State name : app.wordpressLogin-->
|
||||
<!--URL : #app/wordpressLogin-->
|
||||
|
||||
<ion-view title="Wordpress Connect">
|
||||
<!--login content section-->
|
||||
<ion-content scroll="false" id="social-login">
|
||||
<form>
|
||||
|
||||
<div>
|
||||
<i class="fa fa-wordpress wordpress-color"></i>
|
||||
</div>
|
||||
<div class="sub-header">Connect data with Wordpress.</div>
|
||||
|
||||
|
||||
<div class="wordpress-login">
|
||||
|
||||
<md-input-container md-no-float="">
|
||||
<input ng-model="wpUrl" placeholder="Wordpress address url.">
|
||||
</md-input-container>
|
||||
<a class="md-raised social-button md-button md-default-theme wordpress-background {{ wpUrl.length ==0 ? 'disabled-link' : ''}}"
|
||||
ng-click="login(wpUrl)">
|
||||
GO TO WORDPRESS
|
||||
</a>
|
||||
|
||||
|
||||
<div class="footer">
|
||||
Plugins json REST Api is required.
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</ion-content><!--end login content section-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,79 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Wordpress Post-->
|
||||
<!--Controller name : wordpressPostCtrl-->
|
||||
<!--Controller path : www/templates/social-network-connect/wordpress/js/controllers.js-->
|
||||
<!--State name : app.wordpressPost-->
|
||||
<!--URL : #app/wordpressPost-->
|
||||
|
||||
<ion-view view-title="Post Detail">
|
||||
<!--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-->
|
||||
<!--wordpress post content section-->
|
||||
<ion-content id="wordpress-post-content" class="fade-in">
|
||||
<md-card-content>
|
||||
|
||||
<p class="feed-name">{{post.title}}</p>
|
||||
<!--wordpress content section-->
|
||||
<div class="wp-content" data-ng-bind-html="post.content"></div><!--end wordpress content section-->
|
||||
<md-list-item class="md-2-line md-no-proxy" role="listitem">
|
||||
<img ng-src="{{post.author.avatar}}" class="md-avatar">
|
||||
|
||||
<div class="md-list-item-text">
|
||||
<h3>{{post.author.username}}</h3>
|
||||
|
||||
<p>{{post.date | date:"short" }}</p>
|
||||
</div>
|
||||
</md-list-item>
|
||||
|
||||
</md-card-content>
|
||||
<!--card footer section-->
|
||||
<div class="social-card-wp-footer row" ng-show="post.terms.category != null ? true : false">
|
||||
<div class="col">
|
||||
<i class="ion-android-folder"></i>
|
||||
<span ng-repeat="category in post.terms.category">
|
||||
{{category.name}}{{($index != post.terms.category.length-1) ? ",":""}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="social-card-wp-footer row" ng-show="post.terms.post_tag != null ? true : false">
|
||||
<div class="col">
|
||||
<i class="ion-pricetags"></i>
|
||||
<span ng-repeat="tag in post.terms.post_tag">
|
||||
{{tag.name}}{{($index != post.terms.post_tag.length-1) ? ",":""}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card footer section-->
|
||||
|
||||
<!--list comment section-->
|
||||
<md-list class="comment">
|
||||
<md-subheader>Comments</md-subheader>
|
||||
<md-list-item class="md-3-line" ng-repeat="comment in comments">
|
||||
<img ng-src="{{comment.author.avatar}}" class="md-avatar"/>
|
||||
|
||||
<div class="md-list-item-text">
|
||||
<h3>{{comment.author.name}}</h3>
|
||||
|
||||
<p data-ng-bind-html="comment.content"></p>
|
||||
</div>
|
||||
<md-divider></md-divider>
|
||||
</md-list-item>
|
||||
|
||||
</md-list><!--end list comment section-->
|
||||
|
||||
|
||||
</ion-content><!--end wordpress post content section-->
|
||||
|
||||
<!--loading progress-->
|
||||
<div id="wordpress-post-loading-progress" class="loading-progress fade-in">
|
||||
<ion-spinner ng-if="!isAndroid" class="progress-circular"></ion-spinner>
|
||||
<md-progress-circular ng-if="isAndroid" class="md-warn md-progress-social-profile"
|
||||
md-mode="indeterminate"></md-progress-circular>
|
||||
</div><!--end loading progress-->
|
||||
|
||||
</ion-view>
|
||||
@@ -0,0 +1,205 @@
|
||||
// Controller of WordPress feed Page.
|
||||
// To connect with WordPress feed you have to install WP REST API to your WordPress site.
|
||||
// by this link: https://wordpress.org/plugins/json-rest-api/
|
||||
// Add WP REST API plugin to your WordPress site.
|
||||
// Set website format to support with WP REST API.
|
||||
// You can find more information at project documentation.
|
||||
|
||||
appControllers.controller('wordpressFeedCtrl', function ($scope, $http, $state, $stateParams, $ionicHistory) {
|
||||
|
||||
// This function 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.feedList is the variable that store feed data from wordPress API.
|
||||
$scope.feedList = [];
|
||||
|
||||
// $scope.paging is the variable that store page index of feed data from wordPress API.
|
||||
$scope.paging = {
|
||||
page: 1,
|
||||
shouldLoadData: false
|
||||
};
|
||||
|
||||
// $scope.wordpressUrl is the variable that use to call wordPress API.
|
||||
// It get wordpressUrl from state parameter that pass from wordpressLogin page.
|
||||
$scope.wordpressUrl = $stateParams.wordpressUrl;
|
||||
|
||||
// $scope.isLoading is the variable use for loading.
|
||||
$scope.isLoading = false;
|
||||
};// End initialForm.
|
||||
|
||||
// getPostData is for get feed by calling to wordpress API.
|
||||
// Parameter :
|
||||
// IsInit(bool) = for check that page are loading more data or refresh data.
|
||||
$scope.getPostData = function (IsInit) {
|
||||
|
||||
// API format is YOUR_WORDPRESS_URL/wp-json/posts?_jsonp=JSON_CALLBACK&page=PAGE_NUMBER
|
||||
var dataURL = $scope.wordpressUrl + "/wp-json/posts?_jsonp=JSON_CALLBACK&page=" + $scope.paging.page;
|
||||
|
||||
// http will return feed data.
|
||||
$http.jsonp(dataURL).success(function (data, status, headers, config) {
|
||||
// Success retrieve data by calling http service.
|
||||
|
||||
// If it don't have data. Loading progress will stop and appear empty feed.
|
||||
if (data.length == 0) {
|
||||
$scope.paging.shouldLoadData = true;
|
||||
}
|
||||
|
||||
// If have data it will store feed data to $scope.feedList variable to show in feed.
|
||||
else {
|
||||
for (var postItem = 0; postItem < data.length; postItem++) {
|
||||
$scope.feedList.push(data[postItem]);
|
||||
}
|
||||
$scope.paging.page = $scope.paging.page + 1;
|
||||
}
|
||||
|
||||
// To stop loading progress.
|
||||
if (IsInit == true) {
|
||||
$scope.$broadcast('scroll.infiniteScrollComplete');
|
||||
} else {
|
||||
$scope.$broadcast('scroll.refreshComplete');
|
||||
}
|
||||
|
||||
$scope.isLoading = false;
|
||||
}).
|
||||
error(function (data, status, headers, config) {
|
||||
// Error retrieve data it will navigate back to wordpressLogin page.
|
||||
$scope.isLoading = false;
|
||||
|
||||
$ionicHistory.nextViewOptions({
|
||||
disableBack: true
|
||||
});
|
||||
|
||||
$state.go("app.wordpressLogin", {
|
||||
isShowError: true
|
||||
});
|
||||
|
||||
});
|
||||
};// End getPostData.
|
||||
|
||||
// navigateTo is for navigate to other page
|
||||
// by using targetPage to be the destination page.
|
||||
// Sending objectData and wordpress url to the destination page.
|
||||
// Parameter :
|
||||
// targetPage = destination page.
|
||||
// objectData = object that will sent to destination page.
|
||||
// wordpressUrl = wordpress url
|
||||
$scope.navigateTo = function (targetPage, objectData, wordpressUrl) {
|
||||
$state.go(targetPage, {
|
||||
postDetail: objectData,
|
||||
wordpressUrl: wordpressUrl
|
||||
});
|
||||
};// End navigateTo.
|
||||
|
||||
// goBack is for navigate back to wordpressLogin page
|
||||
$scope.goBack = function () {
|
||||
$ionicHistory.nextViewOptions({
|
||||
disableBack: true
|
||||
});
|
||||
$state.go("app.wordpressLogin", {
|
||||
isShowError: false
|
||||
});
|
||||
}// End goBack.
|
||||
|
||||
// doRefresh is for refresh feed and it will set page number to be 1 for refresh.
|
||||
$scope.doRefresh = function () {
|
||||
$scope.feedList = [];
|
||||
$scope.paging.page = 1;
|
||||
$scope.paging.shouldLoadData = false;
|
||||
$scope.getPostData(false);
|
||||
};// End doRefresh.
|
||||
|
||||
// loadMore is for loading more feed.
|
||||
$scope.loadMore = function () {
|
||||
if ($scope.isLoading == false) {
|
||||
$scope.isLoading = true;
|
||||
$scope.getPostData(true);
|
||||
}
|
||||
};// End loadMore.
|
||||
|
||||
$scope.initialForm();
|
||||
});// End of WordPress Feed Page Controller.
|
||||
|
||||
// Controller of WordPress Post Page.
|
||||
appControllers.controller('wordpressPostCtrl', function ($scope, $http, $timeout, $stateParams) {
|
||||
|
||||
// This function 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.post is post that pass from state parameter from WordPress Feed.
|
||||
$scope.post = $stateParams.postDetail;
|
||||
|
||||
// $scope.wordpressUrl is url that pass from state parameter from WordPress Feed.
|
||||
$scope.wordpressUrl = $stateParams.wordpressUrl;
|
||||
|
||||
// $scope.comments is the variable that store comments of post.
|
||||
$scope.comments = [];
|
||||
|
||||
//To get comment.
|
||||
$scope.getcomment();
|
||||
|
||||
// The function for show/hide loading progress.
|
||||
$timeout(function () {
|
||||
if ($scope.isAndroid) {
|
||||
jQuery('#wordpress-post-loading-progress').show();
|
||||
}
|
||||
else {
|
||||
jQuery('#wordpress-post-loading-progress').fadeIn(700);
|
||||
}
|
||||
}, 400);// End loading progress.
|
||||
}// End initialForm.
|
||||
|
||||
// get comment is for get comment by calling to wordpress API.
|
||||
$scope.getcomment = function () {
|
||||
// API format is YOUR_WORDPRESS_URL/wp-json/posts/POST_ID/comments
|
||||
$http.get($scope.wordpressUrl + "/wp-json/posts/" + $scope.post.ID + "/comments", {
|
||||
params: {}
|
||||
}).then(function (result) {
|
||||
//success retrieve data by calling http service. it will store comment data to $scope.comments.
|
||||
$scope.comments = result.data;
|
||||
$timeout(function () {
|
||||
jQuery('#wordpress-post-loading-progress').hide();
|
||||
jQuery('#wordpress-post-content').fadeIn();
|
||||
}, 1000);
|
||||
},
|
||||
function (error) {
|
||||
//Error retrieve data.
|
||||
});
|
||||
};// End get comment.
|
||||
$scope.initialForm();
|
||||
});// End of WordPress Post Page Controller.
|
||||
|
||||
// Controller of WordPress Login Page.
|
||||
appControllers.controller('wordpressLoginCtrl', function ($mdToast, $scope, $state, $stateParams) {
|
||||
|
||||
// This function 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.wpUrl is the variable that store wordPress url.
|
||||
$scope.wpUrl = "http://YOUR_WORDPRESS_URL";
|
||||
|
||||
// If wordPress url is error it will show that Can not connect to Url toast.
|
||||
if ($stateParams.isShowError) {
|
||||
$mdToast.show({
|
||||
controller: 'toastController',
|
||||
templateUrl: 'toast.html',
|
||||
hideDelay: 1200,
|
||||
position: 'top',
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: "Can not connect to Url."
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
};// End initialForm.
|
||||
|
||||
// login is for url login.
|
||||
$scope.login = function (wpUrl) {
|
||||
$state.go("app.wordpressFeed", {
|
||||
wordpressUrl: wpUrl
|
||||
});
|
||||
};// End login.
|
||||
|
||||
$scope.initialForm();
|
||||
});// End of WordPress Login Page Controller.
|
||||
@@ -0,0 +1,39 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Fake Login-->
|
||||
<!--State name : app.fakeLogin-->
|
||||
<!--URL : #app/fakeLogin-->
|
||||
|
||||
<ion-view title="Sign In">
|
||||
<!--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-->
|
||||
|
||||
<!--login content section-->
|
||||
<ion-content id="social-login" class="bg-white">
|
||||
<!--fake login form section-->
|
||||
<form class="fakeLogin-form">
|
||||
<div>
|
||||
<img src="img/app_icon.png"/>
|
||||
</div>
|
||||
<div class="sub-header">Sign in to application</div>
|
||||
|
||||
<div id="fakeLogin">
|
||||
<md-input-container md-no-float="">
|
||||
<input class="user-name" placeholder="Username">
|
||||
</md-input-container>
|
||||
<hr/>
|
||||
<md-input-container md-no-float="">
|
||||
<input class="user-password" type="password" placeholder="Password">
|
||||
</md-input-container>
|
||||
</div>
|
||||
<div>
|
||||
<a class="md-raised social-button md-button md-default-theme material-background">
|
||||
Sign In
|
||||
</a>
|
||||
</div>
|
||||
</form> <!--end fake login form section-->
|
||||
</ion-content><!--end login content section-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,49 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Fake Sign Up-->
|
||||
<!--State name : app.fakeSignUp-->
|
||||
<!--URL : #app/fakeSignUp-->
|
||||
|
||||
<ion-view title="Material Design">
|
||||
<!--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-->
|
||||
|
||||
<!--social sign up section-->
|
||||
<ion-content id="social-sign-up-content">
|
||||
<div class="app-icon">
|
||||
<img src="img/app_icon.png" class="md-card-image">
|
||||
</div>
|
||||
<!--input section-->
|
||||
<md-input-container md-no-float="">
|
||||
<div>
|
||||
<input class="user-name" placeholder="Username">
|
||||
</div>
|
||||
</md-input-container>
|
||||
<md-input-container md-no-float="">
|
||||
<div>
|
||||
<input type="password" class="user-name" placeholder="Password">
|
||||
</div>
|
||||
</md-input-container>
|
||||
<md-input-container md-no-float="">
|
||||
<div>
|
||||
<input type="password" class="user-name" placeholder="Confirm Password">
|
||||
</div>
|
||||
</md-input-container>
|
||||
<md-input-container md-no-float="">
|
||||
<div>
|
||||
<input class="user-name" placeholder="Mail">
|
||||
</div>
|
||||
</md-input-container>
|
||||
<md-checkbox aria-label="CheckboxTerms">
|
||||
I accept terms and conditions.
|
||||
</md-checkbox>
|
||||
<!--end input section-->
|
||||
<a class="md-raised social-button md-button md-default-theme material-background">
|
||||
Sign Up
|
||||
</a>
|
||||
|
||||
</ion-content><!--end social sign up section-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,117 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Catalog-->
|
||||
<!--Controller name : catalogCtrl-->
|
||||
<!--Controller path : www/templates/themes/catalog/js/controllers.js-->
|
||||
<!--State name : app.catalog-->
|
||||
<!--URL : #app/catalog-->
|
||||
|
||||
<ion-view title="Material Shop">
|
||||
<!--slide catalog section-->
|
||||
<ion-slide-box id="slide-catalog-content" active-slide="0">
|
||||
<!--slide section-->
|
||||
<ion-slide>
|
||||
<!--pin section-->
|
||||
<div class="pin" ng-click="showConfirmDialog($event)">
|
||||
<img ng-src="{{'img/shirt_01.png'}}"/>
|
||||
|
||||
<h1>Plain Shirt</h1>
|
||||
|
||||
<p>
|
||||
A shirt with plain design.
|
||||
</p>
|
||||
|
||||
<div class="pin-footer">
|
||||
$<span class="pin-footer text-left font-sale">590</span>
|
||||
<span class="pin-footer text-left font-hot-sale">$59</span>
|
||||
</div>
|
||||
</div><!--end pin section-->
|
||||
</ion-slide>
|
||||
<ion-slide>
|
||||
<!--pin section-->
|
||||
<div class="pin" ng-click="showConfirmDialog($event)">
|
||||
<img ng-src="{{'img/shirt_02.png'}}"/>
|
||||
|
||||
<h1>Spring Shirt</h1>
|
||||
|
||||
<p>
|
||||
A shirt with spring design.
|
||||
</p>
|
||||
|
||||
<div class="pin-footer">
|
||||
$<span class="pin-footer text-left font-sale">390</span>
|
||||
<span class="pin-footer text-left font-hot-sale">$39</span>
|
||||
</div>
|
||||
</div> <!--end pin section-->
|
||||
</ion-slide>
|
||||
<ion-slide>
|
||||
<!--pin section-->
|
||||
<div class="pin" ng-click="showConfirmDialog($event)">
|
||||
<img ng-src="{{'img/shirt_04.png'}}"/>
|
||||
|
||||
<h1>Plain Shirt</h1>
|
||||
|
||||
<p>
|
||||
A shirt with plain design.
|
||||
</p>
|
||||
|
||||
<div class="pin-footer">
|
||||
$<span class="pin-footer text-left font-sale">390</span>
|
||||
<span class="pin-footer text-left font-hot-sale">$39</span>
|
||||
</div>
|
||||
</div> <!--end pin section-->
|
||||
</ion-slide>
|
||||
<ion-slide>
|
||||
<!--pin section-->
|
||||
<div class="pin" ng-click="showConfirmDialog($event)">
|
||||
<img ng-src="{{'img/shirt_06.png'}}"/>
|
||||
|
||||
<h1>Spring Shirt</h1>
|
||||
|
||||
<p>
|
||||
A shirt with spring design.
|
||||
</p>
|
||||
|
||||
<div class="pin-footer">
|
||||
$<span class="pin-footer text-left font-sale">390</span>
|
||||
<span class="pin-footer text-left font-hot-sale">$39</span>
|
||||
</div>
|
||||
</div> <!--end pin section-->
|
||||
</ion-slide>
|
||||
<ion-slide>
|
||||
<!--pin section-->
|
||||
<div class="pin" ng-click="showConfirmDialog($event)">
|
||||
<img ng-src="{{'img/shirt_02.png'}}"/>
|
||||
|
||||
<h1>Plain Shirt</h1>
|
||||
|
||||
<p>
|
||||
A shirt with plain design.
|
||||
</p>
|
||||
|
||||
<div class="pin-footer">
|
||||
$<span class="pin-footer text-left font-sale">390</span>
|
||||
<span class="pin-footer text-left font-hot-sale">$39</span>
|
||||
</div>
|
||||
</div> <!--end pin section-->
|
||||
</ion-slide>
|
||||
<ion-slide>
|
||||
<!--pin section-->
|
||||
<div class="pin" ng-click="showConfirmDialog($event)">
|
||||
<img ng-src="{{'img/shirt_01.png'}}"/>
|
||||
|
||||
<h1>Spring Shirt</h1>
|
||||
|
||||
<p>
|
||||
A shirt with spring design.
|
||||
</p>
|
||||
|
||||
<div class="pin-footer">
|
||||
$<span class="pin-footer text-left font-sale">390</span>
|
||||
<span class="pin-footer text-left font-hot-sale">$39</span>
|
||||
</div>
|
||||
</div> <!--end pin section-->
|
||||
</ion-slide>
|
||||
<!--end slide section-->
|
||||
</ion-slide-box><!--end slide catalog section-->
|
||||
|
||||
</ion-view>
|
||||
@@ -0,0 +1,38 @@
|
||||
// Controller of catalog Page.
|
||||
appControllers.controller('catalogCtrl', function ($scope, $mdToast, $mdDialog) {
|
||||
|
||||
// showConfirmDialog for show alert box.
|
||||
$scope.showConfirmDialog = function ($event) {
|
||||
//mdDialog.show use for show alert box for Confirm Order.
|
||||
$mdDialog.show({
|
||||
controller: 'DialogController',
|
||||
templateUrl: 'confirm-dialog.html',
|
||||
targetEvent: $event,
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: "Confirm Order",
|
||||
content: "Confirm to add Order.",
|
||||
ok: "Confirm",
|
||||
cancel: "Close"
|
||||
}
|
||||
}
|
||||
}).then(function () {
|
||||
// For confirm button to Order.
|
||||
|
||||
// Showing Item added.! toast.
|
||||
$mdToast.show({
|
||||
controller: 'toastController',
|
||||
templateUrl: 'toast.html',
|
||||
hideDelay: 1200,
|
||||
position: 'top',
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: "Item added."
|
||||
}
|
||||
}
|
||||
}); // Ends showing toast.
|
||||
}, function () {
|
||||
// For cancel button to Order.
|
||||
});
|
||||
}// End showConfirmDialog.
|
||||
});// End of catalog controller.
|
||||
@@ -0,0 +1,146 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Cloth Shop-->
|
||||
<!--State name : app.clothShop-->
|
||||
<!--URL : #app/clothShop-->
|
||||
|
||||
<ion-view title="Material Store">
|
||||
<!--cloth shop section-->
|
||||
<ion-content id="cloth-shop-content">
|
||||
|
||||
<!--toolbar section-->
|
||||
<md-toolbar class="bar-subheader md-tall md-primary toolbar-medium toolbar-in-content">
|
||||
<div>
|
||||
<h1>SALE 40% OFF</h1>
|
||||
|
||||
<h2>Order Now !!</h2>
|
||||
|
||||
<h2>
|
||||
<i class="fa fa-star"></i>
|
||||
<i class="fa fa-star"></i>
|
||||
<i class="fa fa-star"></i>
|
||||
<i class="fa fa-star"></i>
|
||||
<i class="fa fa-star"></i>
|
||||
</h2>
|
||||
</div>
|
||||
</md-toolbar><!--end toolbar section-->
|
||||
|
||||
<!--product list content-->
|
||||
<div id="product-list" class="row">
|
||||
|
||||
<div class="col">
|
||||
<div class="cube-item" style="background-image: url(img/shirt_01.png);">
|
||||
<h1>
|
||||
Plain Shirt
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
A shirt with pain design.
|
||||
</p>
|
||||
</div>
|
||||
<div class="cube-item" style="background-image: url(img/shirt_03.png);">
|
||||
<h1>
|
||||
Spring Shirt
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
A shirt with Spring design.
|
||||
</p>
|
||||
</div>
|
||||
<div class="cube-item" style="background-image: url(img/shirt_05.png);">
|
||||
<h1>
|
||||
Plain Shirt
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
A shirt with pain design.
|
||||
</p>
|
||||
</div>
|
||||
<div class="cube-item" style="background-image: url(img/shirt_02.png);">
|
||||
<h1>
|
||||
Spring Shirt
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
A shirt with spring design.
|
||||
</p>
|
||||
</div>
|
||||
<div class="cube-item" style="background-image: url(img/shirt_04.png);">
|
||||
<h1>
|
||||
Spring Shirt
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
A shirt with spring design.
|
||||
</p>
|
||||
</div>
|
||||
<div class="cube-item" style="background-image: url(img/shirt_02.png);">
|
||||
<h1>
|
||||
Plain Shirt
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
A shirt with pain design.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<div class="cube-item" style="background-image: url(img/shirt_02.png);">
|
||||
<h1>
|
||||
Spring Shirt
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
A shirt with spring design.
|
||||
</p>
|
||||
</div>
|
||||
<div class="cube-item" style="background-image: url(img/shirt_04.png);">
|
||||
<h1>
|
||||
Spring Shirt
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
A shirt with spring design.
|
||||
</p>
|
||||
</div>
|
||||
<div class="cube-item" style="background-image: url(img/shirt_02.png);">
|
||||
<h1>
|
||||
Plain Shirt
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
A shirt with pain design.
|
||||
</p>
|
||||
</div>
|
||||
<div class="cube-item" style="background-image: url(img/shirt_01.png);">
|
||||
<h1>
|
||||
Plain Shirt
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
A shirt with pain design.
|
||||
</p>
|
||||
</div>
|
||||
<div class="cube-item" style="background-image: url(img/shirt_03.png);">
|
||||
<h1>
|
||||
Spring Shirt
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
A shirt with Spring design.
|
||||
</p>
|
||||
</div>
|
||||
<div class="cube-item" style="background-image: url(img/shirt_05.png);">
|
||||
<h1>
|
||||
Plain Shirt
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
A shirt with pain design.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--end product list content-->
|
||||
</ion-content><!--end cloth shop section-->
|
||||
|
||||
</ion-view>
|
||||
@@ -0,0 +1,131 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Cube Feed-->
|
||||
<!--State name : app.cubeFeed-->
|
||||
<!--URL : #app/cubeFeed-->
|
||||
|
||||
<ion-view title="Cube Feed">
|
||||
<!--cube feed section-->
|
||||
<ion-content id="cube-feed-content">
|
||||
<!--cube feed list section-->
|
||||
<div class="feed-list row">
|
||||
<div class="col">
|
||||
<!--cube feed item section-->
|
||||
<div class="feed-item">
|
||||
<div class="feed-img" style="background-image: url('img/cube_feed_03.png')"></div>
|
||||
<div class="feed-content row">
|
||||
<div class="col left">
|
||||
<i class="ion-android-camera"></i>
|
||||
18K
|
||||
</div>
|
||||
<div class="col right">
|
||||
<i class="ion-android-pin"></i>
|
||||
5K
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="feed-item">
|
||||
<div class="feed-img" style="background-image: url('img/cube_feed_01.png')"></div>
|
||||
<div class="feed-content row">
|
||||
<div class="col left">
|
||||
<i class="ion-android-camera"></i>
|
||||
18K
|
||||
</div>
|
||||
<div class="col right">
|
||||
<i class="ion-android-pin"></i>
|
||||
5K
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="feed-item">
|
||||
<div class="feed-img" style="background-image: url('img/cube_feed_02.png')"></div>
|
||||
<div class="feed-content row">
|
||||
<div class="col left">
|
||||
<i class="ion-android-camera"></i>
|
||||
18K
|
||||
</div>
|
||||
<div class="col right">
|
||||
<i class="ion-android-pin"></i>
|
||||
5K
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="feed-item">
|
||||
<div class="feed-img" style="background-image: url('img/cube_feed_03.png')"></div>
|
||||
<div class="feed-content row">
|
||||
<div class="col left">
|
||||
<i class="ion-android-camera"></i>
|
||||
18K
|
||||
</div>
|
||||
<div class="col right">
|
||||
<i class="ion-android-pin"></i>
|
||||
5K
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end cube feed item section-->
|
||||
</div>
|
||||
<div class="col">
|
||||
<!--cube feed item section-->
|
||||
<div class="feed-item">
|
||||
<div class="feed-img" style="background-image: url('img/cube_feed_02.png')"></div>
|
||||
<div class="feed-content row">
|
||||
<div class="col left">
|
||||
<i class="ion-android-camera"></i>
|
||||
18K
|
||||
</div>
|
||||
<div class="col right">
|
||||
<i class="ion-android-pin"></i>
|
||||
5K
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="feed-item">
|
||||
<div class="feed-img" style="background-image: url('img/cube_feed_03.png')"></div>
|
||||
<div class="feed-content row">
|
||||
<div class="col left">
|
||||
<i class="ion-android-camera"></i>
|
||||
18K
|
||||
</div>
|
||||
<div class="col right">
|
||||
<i class="ion-android-pin"></i>
|
||||
5K
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="feed-item">
|
||||
<div class="feed-img" style="background-image: url('img/cube_feed_04.png')"></div>
|
||||
<div class="feed-content row">
|
||||
<div class="col left">
|
||||
<i class="ion-android-camera"></i>
|
||||
18K
|
||||
</div>
|
||||
<div class="col right">
|
||||
<i class="ion-android-pin"></i>
|
||||
5K
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="feed-item">
|
||||
<div class="feed-img" style="background-image: url('img/cube_feed_01.png')"></div>
|
||||
<div class="feed-content row">
|
||||
<div class="col left">
|
||||
<i class="ion-android-camera"></i>
|
||||
18K
|
||||
</div>
|
||||
<div class="col right">
|
||||
<i class="ion-android-pin"></i>
|
||||
5K
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end cube feed item section-->
|
||||
</div>
|
||||
</div><!--end cube feed list section-->
|
||||
</ion-content><!--end cube feed section-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,32 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Expense Setting-->
|
||||
<!--Controller name : expenseDashboardSettingCtrl-->
|
||||
<!--Controller path : www/templates/themes/expense-dashboard/js/controllers.js-->
|
||||
<!--State name : app.expenseSetting-->
|
||||
<!--URL : #app/expenseSetting-->
|
||||
|
||||
<ion-view title="Expense 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 Expense View</md-subheader>
|
||||
<md-list-item class="md-list-item-default" ng-click="navigateTo('app.expense',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.expense',false)">
|
||||
<i class="fa fa-stop"></i>
|
||||
|
||||
<p>Disable Row Animation</p>
|
||||
</md-list-item>
|
||||
</md-list><!--end list section-->
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
@@ -0,0 +1,139 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Expense Dashboard-->
|
||||
<!--Controller name : expenseDashboardCtrl-->
|
||||
<!--Controller path : www/templates/themes/expense-dashboard/js/controllers.js-->
|
||||
<!--State name : app.expense-->
|
||||
<!--URL : #app/expense-->
|
||||
|
||||
<ion-view title="Expense" id="expense-dashboard">
|
||||
|
||||
<!--right button on navigation bar-->
|
||||
<ion-nav-buttons side="right">
|
||||
<md-button class="md-icon-button ion-nav-button-right" ng-click="goToSetting()"
|
||||
aria-label="Setting">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</md-button>
|
||||
</ion-nav-buttons> <!--end right button on navigation bar-->
|
||||
|
||||
<!--expense toolbar section-->
|
||||
<md-toolbar class="bar-subheader md-tall md-primary toolbar-expense">
|
||||
<div>
|
||||
<img src="img/profileAvatar.jpg" class="user-img"/>
|
||||
|
||||
<h1>John Able</h1>
|
||||
|
||||
<h2>Material Design</h2>
|
||||
</div>
|
||||
<a class="md-button md-accent md-fab fab-toolbar-medium" aria-label="Add">
|
||||
<i class="icon ion-plus"></i>
|
||||
</a>
|
||||
</md-toolbar><!--end expense toolbar section-->
|
||||
|
||||
<!--expense content section-->
|
||||
<ion-content id="expense-dashboard-content">
|
||||
|
||||
<!--Below code it will disable animation to better performance-->
|
||||
<div ng-if="!isAnimated" class="list-expense-menu">
|
||||
<div class="list-expense-menu-item" ng-click="doSomeThing()">
|
||||
<div class="row">
|
||||
<div class="col-20">
|
||||
<i class="fa fa-money"></i>
|
||||
</div>
|
||||
<div class="col-80 menu">
|
||||
<p class="header">Add Budget</p>
|
||||
|
||||
<p class="detail">Add your budget to start saving.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-expense-menu-item" ng-click="doSomeThing()">
|
||||
<div class="row">
|
||||
<div class="col-20">
|
||||
<i class="fa fa-sign-in"></i>
|
||||
</div>
|
||||
<div class="col-80 menu">
|
||||
<p class="header">Expense History</p>
|
||||
|
||||
<p class="detail">View expense history report</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-expense-menu-item" ng-click="doSomeThing()">
|
||||
<div class="row">
|
||||
<div class="col-20">
|
||||
<i class="fa fa-inbox"></i>
|
||||
</div>
|
||||
<div class="col-80 menu">
|
||||
<p class="header">Export to e-Mail</p>
|
||||
|
||||
<p class="detail">Export expense to e-Mail</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-expense-menu-item" ng-click="doSomeThing()">
|
||||
<div class="row">
|
||||
<div class="col-20">
|
||||
<i class="fa fa-line-chart"></i>
|
||||
</div>
|
||||
<div class="col-80 menu">
|
||||
<p class="header">Summary Report</p>
|
||||
|
||||
<p class="detail">View summary report.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Below code it will show animation when selecting row.-->
|
||||
<md-list ng-if="isAnimated">
|
||||
<md-list-item class="row" ng-click="doSomeThing()">
|
||||
<div class="col-20 icon">
|
||||
<i class="fa fa-money"></i>
|
||||
</div>
|
||||
<div class="col-80 menu">
|
||||
<p class="header">Add Budget</p>
|
||||
|
||||
<p class="detail">Add your budget to start saving.</p>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<md-divider></md-divider>
|
||||
|
||||
<md-list-item class="row" ng-click="doSomeThing()">
|
||||
<div class="col-20 icon">
|
||||
<i class="fa fa-sign-in"></i>
|
||||
</div>
|
||||
<div class="col-80 menu">
|
||||
<p class="header">Expense History</p>
|
||||
|
||||
<p class="detail">View expense history report</p>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<md-divider></md-divider>
|
||||
|
||||
<md-list-item class="row" ng-click="doSomeThing()">
|
||||
<div class="col-20 icon">
|
||||
<i class="fa fa-inbox"></i>
|
||||
</div>
|
||||
<div class="col-80 menu">
|
||||
<p class="header">Export to e-Mail</p>
|
||||
|
||||
<p class="detail">Export expense to e-Mail</p>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<md-divider></md-divider>
|
||||
|
||||
<md-list-item class="row" ng-click="doSomeThing()">
|
||||
<div class="col-20 icon">
|
||||
<i class="fa fa-line-chart"></i>
|
||||
</div>
|
||||
<div class="col-80 menu">
|
||||
<p class="header">Summary Report</p>
|
||||
|
||||
<p class="detail">View summary report.</p>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<md-divider></md-divider>
|
||||
|
||||
</md-list>
|
||||
</ion-content><!--end expense content section-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,43 @@
|
||||
// Controller of expense dashboard page.
|
||||
appControllers.controller('expenseDashboardCtrl', function ($scope,$state,$stateParams) {
|
||||
|
||||
//$scope.isAnimated is the variable that use for receive object data from state params.
|
||||
//For enable/disable row animation.
|
||||
$scope.isAnimated = $stateParams.isAnimated;
|
||||
|
||||
// doSomeThing is for do something when user click on a button
|
||||
$scope.doSomeThing = function () {
|
||||
// You can put any function here.
|
||||
} // End doSomeThing.
|
||||
|
||||
// goToSetting is for navigate to Dashboard Setting page
|
||||
$scope.goToSetting = function () {
|
||||
$state.go("app.expenseSetting");
|
||||
};// End goToSetting.
|
||||
|
||||
});// End of controller expense dashboard.
|
||||
|
||||
// Controller of expense dashboard setting.
|
||||
appControllers.controller('expenseDashboardSettingCtrl', function ($scope, $state,$ionicHistory,$ionicViewSwitcher) {
|
||||
|
||||
// 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.
|
||||
}); // End of controller expense dashboard setting.
|
||||
@@ -0,0 +1,118 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Location Feed-->
|
||||
<!--State name : app.locationFeed-->
|
||||
<!--URL : #app/locationFeed-->
|
||||
|
||||
<ion-view title="Location">
|
||||
<!--location feed section-->
|
||||
<ion-content id="location-feed-content">
|
||||
<!--list section-->
|
||||
<div class="location-list">
|
||||
<!--location item section-->
|
||||
<div class="location-item">
|
||||
<div class="location-img" style="background-image:url('img/location_feed_01.png')">
|
||||
|
||||
</div>
|
||||
<div class="location-content row">
|
||||
<div class="col-90">
|
||||
<h1>
|
||||
Stone Garden
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
<i class="fa fa-flag"></i> Bangkok Thailand
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-10">
|
||||
<span class="text-add">+Wishlist</span>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--end location item section-->
|
||||
|
||||
<!--location item section-->
|
||||
<div class="location-item">
|
||||
<div class="location-img" style="background-image:url('img/location_feed_02.png')">
|
||||
|
||||
</div>
|
||||
<div class="location-content row">
|
||||
<div class="col-90">
|
||||
<h1>
|
||||
Little Clock tower
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
<i class="fa fa-flag"></i> Bangkok Thailand
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-10">
|
||||
<span class="text-add">+Wishlist</span>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--end location item section-->
|
||||
|
||||
<!--location item section-->
|
||||
<div class="location-item">
|
||||
<div class="location-img" style="background-image:url('img/location_feed_03.png')">
|
||||
|
||||
</div>
|
||||
<div class="location-content row">
|
||||
<div class="col-90">
|
||||
<h1>
|
||||
Play ground
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
<i class="fa fa-flag"></i> Bangkok Thailand
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-10">
|
||||
<span class="text-add">+Wishlist</span>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--end location item section-->
|
||||
|
||||
<!--location item section-->
|
||||
<div class="location-item">
|
||||
<div class="location-img" style="background-image:url('img/location_feed_04.png')">
|
||||
|
||||
</div>
|
||||
<div class="location-content row">
|
||||
<div class="col-90">
|
||||
<h1>
|
||||
Green park
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
<i class="fa fa-flag"></i> Bangkok Thailand
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-10">
|
||||
<span class="text-add">+Wishlist</span>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--end location item section-->
|
||||
|
||||
<!--location item section-->
|
||||
<div class="location-item">
|
||||
<div class="location-img" style="background-image:url('img/location_feed_05.png')">
|
||||
|
||||
</div>
|
||||
<div class="location-content row">
|
||||
<div class="col-90">
|
||||
<h1>
|
||||
Woman Garden
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
<i class="fa fa-flag"></i> Bangkok Thailand
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-10">
|
||||
<span class="text-add">+Wishlist</span>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--end location item section-->
|
||||
|
||||
</div><!--end list section-->
|
||||
</ion-content><!--end location feed section-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,114 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Menu Dashboard-->
|
||||
<!--Controller name : menuDashboardCtrl-->
|
||||
<!--Controller path : www/templates/themes/menu-dashboard/js/controllers.js-->
|
||||
<!--State name : app.menuDashboard-->
|
||||
<!--URL : #app/menuDashboard-->
|
||||
|
||||
<ion-view title="Dashboard">
|
||||
<!--menu dashboard section-->
|
||||
<ion-content id="menu-dashboard-content">
|
||||
<!--panel section-->
|
||||
<div class="menu-panel">
|
||||
<div class="row">
|
||||
<div class="col-33" ng-click="showToast('Image')">
|
||||
<i class="fa fa-picture-o"></i>
|
||||
|
||||
<p>Image</p>
|
||||
</div>
|
||||
<div class="col-33" ng-click="showToast('Music')">
|
||||
<i class="fa fa fa-music"></i>
|
||||
|
||||
<p>Music</p>
|
||||
</div>
|
||||
<div class="col-33" ng-click="showToast('Camera')">
|
||||
<i class="fa fa fa-camera"></i>
|
||||
|
||||
<p>Camera</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33" ng-click="showToast('Video')">
|
||||
<i class="fa fa-video-camera"></i>
|
||||
|
||||
<p>Video</p>
|
||||
</div>
|
||||
<div class="col-33" ng-click="showToast('Setting')">
|
||||
<i class="fa fa-cog"></i>
|
||||
|
||||
<p>Setting</p>
|
||||
</div>
|
||||
<div class="col-33" ng-click="showToast('Contract')">
|
||||
<i class="fa fa-users"></i>
|
||||
|
||||
<p>Contract</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33" ng-click="showToast('Inbox')">
|
||||
<i class="fa fa-inbox"></i>
|
||||
|
||||
<p>Inbox</p>
|
||||
</div>
|
||||
<div class="col-33" ng-click="showToast('Card')">
|
||||
<i class="fa fa-credit-card"></i>
|
||||
|
||||
<p>Card</p>
|
||||
</div>
|
||||
<div class="col-33" ng-click="showToast('More')">
|
||||
<i class="fa fa-ellipsis-h"></i>
|
||||
|
||||
<p>More</p>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--end panel section-->
|
||||
|
||||
<!--panel footer section-->
|
||||
<div class="menu-dashboard-footer">
|
||||
<md-whiteframe class="md-whiteframe-z1" layout ng-click="showToast('Wordpress Blog')">
|
||||
<div class="row">
|
||||
<div class="col-10">
|
||||
<i class="fa fa-wordpress"></i>
|
||||
</div>
|
||||
<div class="col-80">
|
||||
Wordpress Blog
|
||||
</div>
|
||||
<div class="col-10">
|
||||
<i class="fa fa-angle-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</md-whiteframe>
|
||||
|
||||
<md-whiteframe class="md-whiteframe-z1" layout ng-click="showToast('Google Connect')">
|
||||
<div class="row">
|
||||
<div class="col-10">
|
||||
<i class="fa fa-google-plus"></i>
|
||||
</div>
|
||||
<div class="col-80">
|
||||
Google Connect
|
||||
</div>
|
||||
<div class="col-10">
|
||||
<i class="fa fa-angle-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</md-whiteframe>
|
||||
|
||||
<md-whiteframe class="md-whiteframe-z1" layout ng-click="showToast('Facebook Connect')">
|
||||
<div class="row">
|
||||
<div class="col-10">
|
||||
<i class="fa fa-facebook"></i>
|
||||
</div>
|
||||
<div class="col-80">
|
||||
Facebook Connect
|
||||
</div>
|
||||
<div class="col-10">
|
||||
<i class="fa fa-angle-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</md-whiteframe>
|
||||
|
||||
</div><!--end panel footer section-->
|
||||
</ion-content><!--Menu dashboard section-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,18 @@
|
||||
// Controller of menu dashboard page.
|
||||
appControllers.controller('menuDashboardCtrl', function ($scope, $mdToast) {
|
||||
//ShowToast for show toast when user press button.
|
||||
$scope.showToast = function (menuName) {
|
||||
//Calling $mdToast.show to show toast.
|
||||
$mdToast.show({
|
||||
controller: 'toastController',
|
||||
templateUrl: 'toast.html',
|
||||
hideDelay: 800,
|
||||
position: 'top',
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: 'Going to ' + menuName + " !!"
|
||||
}
|
||||
}
|
||||
});
|
||||
}// End showToast.
|
||||
});// End of controller menu dashboard.
|
||||
@@ -0,0 +1,360 @@
|
||||
<!--View Information-->
|
||||
<!--View name : NEWS Feed-->
|
||||
<!--State name : app.newsFeed-->
|
||||
<!--URL : #app/newsFeed-->
|
||||
|
||||
<ion-view title="NEWS">
|
||||
<!--news feed section-->
|
||||
<ion-content id="news-feed-content">
|
||||
|
||||
<div class="news-item">
|
||||
|
||||
<!--header section-->
|
||||
<div class="row header">
|
||||
<div class="col-20">
|
||||
<img src="img/profileAvatar.jpg" class="user-img"/>
|
||||
</div>
|
||||
<div class="col-80">
|
||||
<span class="name">
|
||||
John Smith
|
||||
</span>
|
||||
<br/>
|
||||
<span class="datetime">
|
||||
1 hours ago
|
||||
</span>
|
||||
</div>
|
||||
</div><!--end header section-->
|
||||
|
||||
<!--detail section-->
|
||||
<div class="row detail">
|
||||
<div class="col">
|
||||
<h1>
|
||||
Material is the metaphor
|
||||
</h1>
|
||||
|
||||
<p class="content">
|
||||
A material metaphor is the unifying theory of a rationalized space and a system of motion. The
|
||||
material is grounded in tactile reality, inspired by the study of paper and ink, yet
|
||||
technologically advanced and open to imagination and magic.
|
||||
</p>
|
||||
|
||||
<p class="content">
|
||||
http://google.com/design/spec/material-design/
|
||||
</p>
|
||||
|
||||
<p class="tags">
|
||||
<i class="fa fa-tags"></i> Material Design, Ionic
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--footer section-->
|
||||
<div class="row footer">
|
||||
<div class="col-33">
|
||||
<span class="number">10.9k</span> <span class="wording">Likes</span>
|
||||
</div>
|
||||
<div class="col-33">
|
||||
<span class="number">20k</span> <span class="wording">Comments</span>
|
||||
</div>
|
||||
<div class="col-33">
|
||||
<span class="number">1k</span> <span class="wording">Shared</span>
|
||||
</div>
|
||||
</div><!--end footer section-->
|
||||
|
||||
</div>
|
||||
|
||||
<div class="news-item">
|
||||
|
||||
<!--header section-->
|
||||
<div class="row header">
|
||||
<div class="col-20">
|
||||
<img src="img/app_icon.png" class="user-img"/>
|
||||
</div>
|
||||
<div class="col-80">
|
||||
<span class="name">
|
||||
Ionic Blog
|
||||
</span>
|
||||
<br/>
|
||||
<span class="datetime">
|
||||
3 hours ago
|
||||
</span>
|
||||
</div>
|
||||
</div><!--end header section-->
|
||||
|
||||
<!--detail section-->
|
||||
<div class="row detail">
|
||||
<div class="col">
|
||||
<h1>
|
||||
Pushing the Limits: New Push Features
|
||||
</h1>
|
||||
|
||||
<p class="content">
|
||||
When our Platform team last checked in with you, we’d sent a few hundred thousand push
|
||||
notifications during our alpha. Now, we’ve sent over a million! That’s a 200% increase each
|
||||
month! We’re getting real validation for the Ionic Platform, and the excitement among the team
|
||||
here at Ionic cannot be overstated. That said, we can’t take all the credit.
|
||||
</p>
|
||||
|
||||
<p class="content">
|
||||
http://blog.ionic.io/
|
||||
</p>
|
||||
|
||||
<p class="tags">
|
||||
<i class="fa fa-tags"></i> Material Design, Ionic
|
||||
</p>
|
||||
</div>
|
||||
</div><!--end detail section-->
|
||||
|
||||
<!--footer section-->
|
||||
<div class="row footer">
|
||||
<div class="col-33">
|
||||
<span class="number">10.9k</span> <span class="wording">Likes</span>
|
||||
</div>
|
||||
<div class="col-33">
|
||||
<span class="number">20k</span> <span class="wording">Comments</span>
|
||||
</div>
|
||||
<div class="col-33">
|
||||
<span class="number">1k</span> <span class="wording">Shared</span>
|
||||
</div>
|
||||
</div><!--end footer section-->
|
||||
|
||||
</div>
|
||||
|
||||
<div class="news-item">
|
||||
|
||||
<!--header section-->
|
||||
<div class="row header">
|
||||
<div class="col-20">
|
||||
<img src="img/profileAvatar.jpg" class="user-img"/>
|
||||
</div>
|
||||
<div class="col-80">
|
||||
<span class="name">
|
||||
John Smith
|
||||
</span>
|
||||
<br/>
|
||||
<span class="datetime">
|
||||
5 hours ago
|
||||
</span>
|
||||
</div>
|
||||
</div><!--end header section-->
|
||||
|
||||
<!--detail section-->
|
||||
<div class="row detail">
|
||||
<div class="col">
|
||||
<h1>
|
||||
Material design Goals
|
||||
</h1>
|
||||
|
||||
<p class="content">
|
||||
Create a visual language that synthesizes classic principles of good design with the innovation
|
||||
and possibility of technology and science.
|
||||
|
||||
Develop a single underlying system that allows for a unified experience across platforms and
|
||||
device sizes. Mobile precepts are fundamental, but touch, voice, mouse, and keyboard are all
|
||||
first-class input methods.
|
||||
</p>
|
||||
|
||||
<p class="content">
|
||||
http://google.com/design/spec/material-design/
|
||||
</p>
|
||||
|
||||
<p class="tags">
|
||||
<i class="fa fa-tags"></i> Material Design, Ionic
|
||||
</p>
|
||||
</div>
|
||||
</div><!--end detail section-->
|
||||
|
||||
<!--footer section-->
|
||||
<div class="row footer">
|
||||
<div class="col-33">
|
||||
<span class="number">10.9k</span> <span class="wording">Likes</span>
|
||||
</div>
|
||||
<div class="col-33">
|
||||
<span class="number">20k</span> <span class="wording">Comments</span>
|
||||
</div>
|
||||
<div class="col-33">
|
||||
<span class="number">1k</span> <span class="wording">Shared</span>
|
||||
</div>
|
||||
</div><!--end footer section-->
|
||||
|
||||
</div>
|
||||
|
||||
<div class="news-item">
|
||||
|
||||
<!--header section-->
|
||||
<div class="row header">
|
||||
<div class="col-20">
|
||||
<img src="img/app_icon.png" class="user-img"/>
|
||||
</div>
|
||||
<div class="col-80">
|
||||
<span class="name">
|
||||
Ionic Blog
|
||||
</span>
|
||||
<br/>
|
||||
<span class="datetime">
|
||||
9 hours ago
|
||||
</span>
|
||||
</div>
|
||||
</div><!--end header section-->
|
||||
|
||||
<!--detail section-->
|
||||
<div class="row detail">
|
||||
<div class="col">
|
||||
<h1>
|
||||
Ionic’s First Hack Day!
|
||||
</h1>
|
||||
|
||||
<p class="content">
|
||||
On Friday, we held our first-ever Ionic Hack Day. Everyone was encouraged to take the entire day
|
||||
to work on a project of interest that could be related, or not, to Ionic.
|
||||
</p>
|
||||
|
||||
<p class="content">
|
||||
http://blog.ionic.io/
|
||||
</p>
|
||||
|
||||
<p class="tags">
|
||||
<i class="fa fa-tags"></i> Material Design, Ionic
|
||||
</p>
|
||||
</div>
|
||||
</div><!--end detail section-->
|
||||
|
||||
<!--footer section-->
|
||||
<div class="row footer">
|
||||
<div class="col-33">
|
||||
<span class="number">10.9k</span> <span class="wording">Likes</span>
|
||||
</div>
|
||||
<div class="col-33">
|
||||
<span class="number">20k</span> <span class="wording">Comments</span>
|
||||
</div>
|
||||
<div class="col-33">
|
||||
<span class="number">1k</span> <span class="wording">Shared</span>
|
||||
</div>
|
||||
</div><!--end footer section-->
|
||||
|
||||
</div>
|
||||
|
||||
<div class="news-item">
|
||||
<!--header section-->
|
||||
<div class="row header">
|
||||
<div class="col-20">
|
||||
<img src="img/app_icon.png" class="user-img"/>
|
||||
</div>
|
||||
<div class="col-80">
|
||||
<span class="name">
|
||||
Ionic Blog
|
||||
</span>
|
||||
<br/>
|
||||
<span class="datetime">
|
||||
20 hours ago
|
||||
</span>
|
||||
</div>
|
||||
</div><!--end header section-->
|
||||
|
||||
<!--detail section-->
|
||||
<div class="row detail">
|
||||
<div class="col">
|
||||
<h1>
|
||||
Web Developers Will Rule The World
|
||||
</h1>
|
||||
|
||||
<p class="content">
|
||||
I’m a strong believer that companies truly hit their stride once they know exactly who their
|
||||
target user is, and how that user fits into the higher purpose of the company.
|
||||
|
||||
Recently, we’ve found and embraced ours: Ionic empowers web developers to build compelling
|
||||
mobile apps without having to change careers. That’s it. That’s why we exist.
|
||||
</p>
|
||||
|
||||
<p class="content">
|
||||
http://blog.ionic.io/
|
||||
</p>
|
||||
|
||||
<p class="tags">
|
||||
<i class="fa fa-tags"></i> Material Design, Ionic
|
||||
</p>
|
||||
</div>
|
||||
</div><!--end detail section-->
|
||||
|
||||
<!--footer section-->
|
||||
<div class="row footer">
|
||||
<div class="col-33">
|
||||
<span class="number">10.9k</span> <span class="wording">Likes</span>
|
||||
</div>
|
||||
<div class="col-33">
|
||||
<span class="number">20k</span> <span class="wording">Comments</span>
|
||||
</div>
|
||||
<div class="col-33">
|
||||
<span class="number">1k</span> <span class="wording">Shared</span>
|
||||
</div>
|
||||
</div><!--end footer section-->
|
||||
|
||||
</div>
|
||||
|
||||
<div class="news-item">
|
||||
|
||||
<!--header section-->
|
||||
<div class="row header">
|
||||
<div class="col-20">
|
||||
<img src="img/profileAvatar.jpg" class="user-img"/>
|
||||
</div>
|
||||
<div class="col-80">
|
||||
<span class="name">
|
||||
John Smith
|
||||
</span>
|
||||
<br/>
|
||||
<span class="datetime">
|
||||
1 day ago
|
||||
</span>
|
||||
</div>
|
||||
</div><!--end header section-->
|
||||
|
||||
<!--detail section-->
|
||||
<div class="row detail">
|
||||
<div class="col">
|
||||
<h1>
|
||||
Material design
|
||||
</h1>
|
||||
|
||||
<p class="content">
|
||||
We challenged ourselves to create a visual language for our users that synthesizes the classic
|
||||
principles of good design with the innovation and possibility of technology and science. This is
|
||||
material design. This spec is a living document that will be updated as we continue to develop
|
||||
the tenets and specifics of material design.
|
||||
</p>
|
||||
|
||||
<p class="content">
|
||||
http://google.com/design/spec/material-design/
|
||||
</p>
|
||||
|
||||
<p class="tags">
|
||||
<i class="fa fa-tags"></i> Material Design, Ionic
|
||||
</p>
|
||||
</div>
|
||||
</div><!--end detail section-->
|
||||
|
||||
<!--footer section-->
|
||||
<div class="row footer">
|
||||
<div class="col-33">
|
||||
<span class="number">10.9k</span> <span class="wording">Likes</span>
|
||||
</div>
|
||||
<div class="col-33">
|
||||
<span class="number">20k</span> <span class="wording">Comments</span>
|
||||
</div>
|
||||
<div class="col-33">
|
||||
<span class="number">1k</span> <span class="wording">Shared</span>
|
||||
</div>
|
||||
</div><!--end footer section-->
|
||||
|
||||
</div>
|
||||
|
||||
<div class="row"></div>
|
||||
</ion-content><!--end news feed section-->
|
||||
|
||||
<!--button section-->
|
||||
<div class="footer-fab-bar">
|
||||
<a class="md-button md-accent md-fab fab-footer" aria-label="Add">
|
||||
<i class="ion ion-plus"></i>
|
||||
</a>
|
||||
</div><!--end button section-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,122 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Online Course-->
|
||||
<!--State name : app.onlineCourse-->
|
||||
<!--URL : #app/onlineCourse-->
|
||||
|
||||
<!--Online course section-->
|
||||
<ion-view title="Material School" id="online-course">
|
||||
<ion-content id="online-course-content">
|
||||
<!--toolbar section-->
|
||||
<md-toolbar class="bar-subheader md-tall md-primary toolbar-online-course ">
|
||||
<div>
|
||||
<img src="img/profileAvatar.jpg" class="user-img"/>
|
||||
|
||||
<h1>John Able</h1>
|
||||
|
||||
<h2>johnable@material.com</h2>
|
||||
</div>
|
||||
|
||||
</md-toolbar> <!--end toolbar section-->
|
||||
<div class="course-list">
|
||||
|
||||
<!--content item section-->
|
||||
<div class="course-item">
|
||||
<div class="title angular-course-background">
|
||||
Javascript
|
||||
</div>
|
||||
<div class="content">
|
||||
<h1>
|
||||
AngularJs Basic
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
Getting started with Angularjs and Bootstrap. Awesome javascript framework
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="" class="md-raised md-button md-default-theme angular-course-background">
|
||||
<i class="fa fa-play"></i> 90 min</a>
|
||||
<a href="" class="md-raised md-button md-default-theme angular-course-background">
|
||||
<i class="fa fa-bookmark"></i>Save</a>
|
||||
</p>
|
||||
</div>
|
||||
</div> <!--end content item section-->
|
||||
|
||||
<!--content item section-->
|
||||
<div class="course-item">
|
||||
<div class="title ionic-course-background">
|
||||
Ionic Framework
|
||||
</div>
|
||||
<div class="content">
|
||||
<h1>
|
||||
Ionic Framework Basic
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
Getting started with Ionic Framework. You will know how to create a mobile app super fast.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="" class="md-raised md-button md-default-theme ionic-course-background">
|
||||
<i class="fa fa-play"></i> 120 min</a>
|
||||
<a href="" class="md-raised md-button md-default-theme ionic-course-background">
|
||||
<i class="fa fa-bookmark"></i>Save</a>
|
||||
</p>
|
||||
</div>
|
||||
</div><!--end content item section-->
|
||||
|
||||
<!--content item section-->
|
||||
<div class="course-item">
|
||||
<div class="title ios-course-background">
|
||||
IOS Development
|
||||
</div>
|
||||
<div class="content">
|
||||
<h1>
|
||||
IOS Basic
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
Getting started with IOS Development and start your first mobile app.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="" class="md-raised md-button md-default-theme ios-course-background">
|
||||
<i class="fa fa-play"></i> 180 min</a>
|
||||
<a href="" class="md-raised md-button md-default-theme ios-course-background">
|
||||
<i class="fa fa-bookmark"></i>Save</a>
|
||||
</p>
|
||||
</div>
|
||||
</div><!--end content item section-->
|
||||
|
||||
<!--content item section-->
|
||||
<div class="course-item">
|
||||
<div class="title android-course-background">
|
||||
Android Development
|
||||
</div>
|
||||
<div class="content">
|
||||
<h1>
|
||||
Android Basic
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
Getting started with Android Development and start your first mobile app.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="" class="md-raised md-button md-default-theme android-course-background">
|
||||
<i class="fa fa-play"></i> 124 min</a>
|
||||
<a href="" class="md-raised md-button md-default-theme android-course-background">
|
||||
<i class="fa fa-bookmark"></i>Save</a>
|
||||
</p>
|
||||
</div>
|
||||
</div><!--end content item section-->
|
||||
|
||||
</div>
|
||||
</ion-content>
|
||||
<div class="footer-fab-bar">
|
||||
<a class="md-button md-accent md-fab fab-footer" aria-label="Add">
|
||||
<i class="ion-android-star"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</ion-view><!--end online course section-->
|
||||
@@ -0,0 +1,155 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Pricing-->
|
||||
<!--State name : app.pricing-->
|
||||
<!--URL : #app/pricing-->
|
||||
|
||||
<ion-view title="Material Store">
|
||||
<!--pricing section-->
|
||||
<ion-content id="pricing-content">
|
||||
<!--header section-->
|
||||
<div class="row price-header">
|
||||
<div class="col header-name">
|
||||
Starter package
|
||||
</div>
|
||||
<div class="col header-more">
|
||||
View Details <i class="fa fa-angle-right"></i>
|
||||
</div>
|
||||
</div> <!--end header section-->
|
||||
|
||||
<!--price detail section-->
|
||||
<div class="row price-detail">
|
||||
<div class="col-33 package-name">
|
||||
1 Month
|
||||
</div>
|
||||
<div class="col-33 package-subscribe">
|
||||
subscribe
|
||||
</div>
|
||||
<div class="col-33 subscribe-button">
|
||||
<a class="md-raised md-button md-default-theme material-background">
|
||||
$4.99
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row price-detail">
|
||||
<div class="col-33 package-name">
|
||||
3 Month
|
||||
</div>
|
||||
<div class="col-33 package-subscribe">
|
||||
subscribe
|
||||
</div>
|
||||
<div class="col-33 subscribe-button">
|
||||
<a class="md-raised md-button md-default-theme material-background">
|
||||
$11.99
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row price-detail">
|
||||
<div class="col-33 package-name">
|
||||
1 Year
|
||||
</div>
|
||||
<div class="col-33 package-subscribe">
|
||||
subscribe
|
||||
</div>
|
||||
<div class="col-33 subscribe-button">
|
||||
<a class="md-raised md-button md-default-theme material-background">
|
||||
$39.99
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--end price detail section-->
|
||||
<hr/>
|
||||
|
||||
<!--header section-->
|
||||
<div class="row price-header">
|
||||
<div class="col header-name">
|
||||
Hot package
|
||||
</div>
|
||||
<div class="col header-more">
|
||||
View Details <i class="fa fa-angle-right"></i>
|
||||
</div>
|
||||
</div><!--end header section-->
|
||||
|
||||
<!--price detail section-->
|
||||
<div class="row price-detail">
|
||||
<div class="col-33 package-name">
|
||||
6 Month
|
||||
</div>
|
||||
<div class="col-33 package-subscribe">
|
||||
subscribe
|
||||
</div>
|
||||
<div class="col-33 subscribe-button">
|
||||
<a class="md-raised md-button md-default-theme md-warn">
|
||||
$49.99
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row price-detail">
|
||||
<div class="col-33 package-name">
|
||||
10 Month
|
||||
</div>
|
||||
<div class="col-33 package-subscribe">
|
||||
subscribe
|
||||
</div>
|
||||
<div class="col-33 subscribe-button">
|
||||
<a class="md-raised md-button md-default-theme md-warn">
|
||||
$79.99
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row price-detail">
|
||||
<div class="col-33 package-name">
|
||||
1 Year
|
||||
</div>
|
||||
<div class="col-33 package-subscribe">
|
||||
subscribe
|
||||
</div>
|
||||
<div class="col-33 subscribe-button">
|
||||
<a class="md-raised md-button md-default-theme md-warn">
|
||||
$89.99
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--end price detail section-->
|
||||
<hr/>
|
||||
|
||||
<!--header section-->
|
||||
<div class="row price-header">
|
||||
<div class="col header-name">
|
||||
Gold package
|
||||
</div>
|
||||
<div class="col header-more">
|
||||
View Details <i class="fa fa-angle-right"></i>
|
||||
</div>
|
||||
</div><!--end header section-->
|
||||
|
||||
<!--price detail section-->
|
||||
<div class="row price-detail">
|
||||
<div class="col-33 package-name">
|
||||
3 Month
|
||||
</div>
|
||||
<div class="col-33 package-subscribe">
|
||||
subscribe
|
||||
</div>
|
||||
<div class="col-33 subscribe-button">
|
||||
<a class="md-raised md-button md-default-theme gold-background">
|
||||
$39.99
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row price-detail">
|
||||
<div class="col-33 package-name">
|
||||
1 Year
|
||||
</div>
|
||||
<div class="col-33 package-subscribe">
|
||||
subscribe
|
||||
</div>
|
||||
<div class="col-33 subscribe-button">
|
||||
<a class="md-raised md-button md-default-theme gold-background">
|
||||
$149.99
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--end price detail section-->
|
||||
</ion-content><!--end pricing section-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,161 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Restaurant-->
|
||||
<!--State name : app.restaurant-->
|
||||
<!--URL : #app/restaurant-->
|
||||
|
||||
<ion-view title="Material Restaurant">
|
||||
<!--restaurant section-->
|
||||
<ion-content id="restaurant">
|
||||
<!--slider section-->
|
||||
<ion-slide-box id="restaurant-slide-box" show-pager="false" active-slide="0">
|
||||
<ion-slide class="slide-01">
|
||||
<div class="content">
|
||||
<h1>
|
||||
Bakery Day
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
40% Off Now!!
|
||||
</p>
|
||||
</div>
|
||||
</ion-slide>
|
||||
<ion-slide class="slide-02">
|
||||
<div class="content">
|
||||
<h1>
|
||||
Bread Hour
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
90% Off Now!!
|
||||
</p>
|
||||
</div>
|
||||
</ion-slide>
|
||||
<ion-slide class="slide-03">
|
||||
<div class="content">
|
||||
<h1>
|
||||
CupCake Festival
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
50% Off Friday
|
||||
</p>
|
||||
</div>
|
||||
</ion-slide>
|
||||
</ion-slide-box><!--end slider section-->
|
||||
|
||||
<!--restaurant content section-->
|
||||
<div id="restaurant-content">
|
||||
<div class="row ">
|
||||
<div class="col promotions-header">
|
||||
<h1>
|
||||
<i class="fa fa-bullhorn"></i> Promotions
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
<!--product slide section-->
|
||||
<ion-scroll direction="x" class="product-slide-list">
|
||||
<div class="feed-list">
|
||||
<div class="feed-item">
|
||||
<div class="img-header" style="background-image: url('img/food_02.png')">
|
||||
</div>
|
||||
<div class="content">
|
||||
SALE 50%
|
||||
</div>
|
||||
</div>
|
||||
<div class="feed-item">
|
||||
<div class="img-header" style="background-image: url('img/food_01.png')">
|
||||
</div>
|
||||
<div class="content">
|
||||
SALE 90%
|
||||
</div>
|
||||
</div>
|
||||
<div class="feed-item">
|
||||
<div class="img-header" style="background-image: url('img/food_03.png')">
|
||||
</div>
|
||||
<div class="content">
|
||||
SALE 70%
|
||||
</div>
|
||||
</div>
|
||||
<div class="feed-item">
|
||||
<div class="img-header" style="background-image: url('img/food_04.png')">
|
||||
</div>
|
||||
<div class="content">
|
||||
SALE 60%
|
||||
</div>
|
||||
</div>
|
||||
<div class="feed-item">
|
||||
<div class="img-header" style="background-image: url('img/food_05.png')">
|
||||
</div>
|
||||
<div class="content">
|
||||
SALE 30%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ion-scroll>
|
||||
<div class="row">
|
||||
<div class="col menu-header">
|
||||
<h1>
|
||||
<i class="fa fa-spoon"></i> More Menu
|
||||
</h1>
|
||||
</div>
|
||||
</div><!--end product slide section-->
|
||||
|
||||
<!--product slide section-->
|
||||
<ion-scroll direction="x" class="product-slide-list">
|
||||
<div class="feed-list">
|
||||
<div class="feed-item">
|
||||
<div class="img-header" style="background-image: url('img/food_07.png')">
|
||||
</div>
|
||||
<div class="content">
|
||||
SALE 60%
|
||||
</div>
|
||||
</div>
|
||||
<div class="feed-item">
|
||||
<div class="img-header" style="background-image: url('img/food_08.png')">
|
||||
</div>
|
||||
<div class="content">
|
||||
SALE 90%
|
||||
</div>
|
||||
</div>
|
||||
<div class="feed-item">
|
||||
<div class="img-header" style="background-image: url('img/food_09.png')">
|
||||
</div>
|
||||
<div class="content">
|
||||
SALE 40%
|
||||
</div>
|
||||
</div>
|
||||
<div class="feed-item">
|
||||
<div class="img-header" style="background-image: url('img/food_06.png')">
|
||||
</div>
|
||||
<div class="content">
|
||||
SALE 50%
|
||||
</div>
|
||||
</div>
|
||||
<div class="feed-item">
|
||||
<div class="img-header" style="background-image: url('img/food_10.png')">
|
||||
</div>
|
||||
<div class="content">
|
||||
SALE 50%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ion-scroll><!--end product slide section-->
|
||||
|
||||
<div class="row">
|
||||
<div class="col menu-header">
|
||||
<h1>
|
||||
<i class="fa fa-inbox"></i> Reservation
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col menu-content-detail">
|
||||
Reservation@material.com
|
||||
<br/>
|
||||
Thanks You.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div> <!--end restaurant content section-->
|
||||
</ion-content><!--end restaurant section-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,32 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Try App No Back Button-->
|
||||
<!--State name : app.tryAppNoBackBtn-->
|
||||
<!--URL : #app/tryAppNoBackBtn-->
|
||||
|
||||
<ion-view title="Try App">
|
||||
<!--try app section-->
|
||||
<ion-slide-box id="try-app-content" active-slide="0">
|
||||
<!--slider section-->
|
||||
<ion-slide class="slide-01">
|
||||
<div class="row try-app-footer-content">
|
||||
<div class="col-50">
|
||||
<a href="#/app/fakeSignUp" class="left md-raised md-button md-default-theme ">SIGN UP</a>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<a href="#/app/fakeLogin" class="right md-raised md-button md-default-theme">Log In</a>
|
||||
</div>
|
||||
</div>
|
||||
</ion-slide>
|
||||
<ion-slide class="slide-02"></ion-slide>
|
||||
<ion-slide class="slide-03"></ion-slide>
|
||||
<ion-slide class="slide-04"></ion-slide>
|
||||
<ion-slide class="slide-05"></ion-slide>
|
||||
<ion-slide class="slide-06"></ion-slide>
|
||||
<ion-slide class="slide-07"></ion-slide>
|
||||
<ion-slide class="slide-08">
|
||||
<a href="" class="sign-up-button md-raised md-button md-default-theme material-background">
|
||||
SIGN UP MATERIAL</a>
|
||||
</ion-slide>
|
||||
<!--end slider section-->
|
||||
</ion-slide-box><!--end try app section-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,40 @@
|
||||
<!--View Information-->
|
||||
<!--View name : TryApp-->
|
||||
<!--State name : app.tryApp-->
|
||||
<!--URL : #app/tryApp-->
|
||||
|
||||
<ion-view title="Try App">
|
||||
<!--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-->
|
||||
|
||||
<!--try app section-->
|
||||
<ion-slide-box id="try-app-content" active-slide="0">
|
||||
<!--slider section-->
|
||||
<ion-slide class="slide-01">
|
||||
<div class="row try-app-footer-content">
|
||||
<div class="col-50">
|
||||
<a href="#/app/fakeSignUp" class="left md-raised md-button md-default-theme ">SIGN UP</a>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<a href="#/app/fakeLogin" class="right md-raised md-button md-default-theme">Log In</a>
|
||||
</div>
|
||||
</div>
|
||||
</ion-slide>
|
||||
<ion-slide class="slide-02"></ion-slide>
|
||||
<ion-slide class="slide-03"></ion-slide>
|
||||
<ion-slide class="slide-04"></ion-slide>
|
||||
<ion-slide class="slide-05"></ion-slide>
|
||||
<ion-slide class="slide-06"></ion-slide>
|
||||
<ion-slide class="slide-07"></ion-slide>
|
||||
<ion-slide class="slide-08">
|
||||
<a href="" class="sign-up-button md-raised md-button md-default-theme material-background">
|
||||
SIGN UP MATERIAL</a>
|
||||
</ion-slide>
|
||||
<!--end slider section-->
|
||||
</ion-slide-box><!--end try app section-->
|
||||
|
||||
</ion-view>
|
||||
Reference in New Issue
Block a user