Neues Initialrelease mit IonicMaterial
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,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>
|
||||
105
www/templates/application-storage/sqLite/html/contract-list.html
Normal file
105
www/templates/application-storage/sqLite/html/contract-list.html
Normal file
@@ -0,0 +1,105 @@
|
||||
<!--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>Pokedex Helper</h1>
|
||||
|
||||
<h2>Dein Trainertool deluxe</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="Finde Pokemon...">
|
||||
</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="pokemon in pokemons | filter: filterText | orderBy: 'pokemonname'">
|
||||
<div class="col-25 icon-user">
|
||||
<img ng-src="{{ pokemon.pokemonimage }}" class="image-list-thumb"/>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<h3>{{ pokemon.pokemonname }}</h3>
|
||||
<div ng-if="pokemon.pokemontypa > 0" class="chip">
|
||||
<img src="{{ pokemon.pokemonimage }}" alt="PokemonTyp" width="96" height="96">
|
||||
{{ pokemon.pokemontypaString }}
|
||||
</div>
|
||||
<div ng-if="pokemon.pokemontypb > 0" class="chip">
|
||||
<img src="{{ pokemon.pokemonimage }}" alt="PokemonTyp" width="96" height="96">
|
||||
{{ pokemon.pokemontypbString }}
|
||||
</div>
|
||||
</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 {{pokemon.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',pokemon)"
|
||||
ng-repeat="pokemon in pokemons | filter: filterText | orderBy: 'pokemonname'">
|
||||
|
||||
<img ng-src="{{ pokemon.pokemonimage }}" class="image-list-thumb"/>
|
||||
|
||||
<p>{{ pokemon.pokemonname }} {{ pokemon.pokemonimage }}</p>
|
||||
<md-switch class="md-secondary"
|
||||
ng-model="pokemon.isEnable"
|
||||
ng-change="updateContract(pokemon)">
|
||||
</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>
|
||||
383
www/templates/application-storage/sqLite/js/controllers.js
Normal file
383
www/templates/application-storage/sqLite/js/controllers.js
Normal file
@@ -0,0 +1,383 @@
|
||||
// Controller will call pokedexDB 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, pokedexDB) {
|
||||
|
||||
// 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.pokemons is the variable that store data from pokedexDB service.
|
||||
$scope.pokemons = [];
|
||||
|
||||
// $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.getPokemonList();
|
||||
|
||||
jQuery('#contract-list-loading-progress').hide();
|
||||
jQuery('#contract-list-content').fadeIn();
|
||||
$scope.isLoading = false;
|
||||
}, 3000);// End loading progress.
|
||||
|
||||
};// End initialForm.
|
||||
|
||||
// getPokemonList is for get all contracts.
|
||||
// By calling pokedexDB.all() service.
|
||||
$scope.getPokemonList = function () {
|
||||
$scope.pokemons = pokedexDB.all();
|
||||
};//End getPokemonList.
|
||||
|
||||
// updateContract is for update contracts.
|
||||
// By sending contract to pokedexDB.update(contract) service.
|
||||
// Parameter :
|
||||
// contract = contract that user select from view.
|
||||
$scope.updateContract = function (pokemon) {
|
||||
pokedexDB.update(pokemon);
|
||||
};// 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, pokedexDB, $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.pokemon 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.pokemon = $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 (pokemon, $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 pokedexDB.update(contract) service.
|
||||
if ($scope.actionDelete) {
|
||||
if ($scope.pokemon.id == null) {
|
||||
$scope.pokemon.id = $scope.pokemonList[$scope.pokemonList.length - 1].id;
|
||||
}
|
||||
pokedexDB.update(contract);
|
||||
} // End update data.
|
||||
|
||||
// To add new data by calling pokedexDB.add(contract) service.
|
||||
else {
|
||||
pokedexDB.add(pokemon);
|
||||
$scope.pokemonList = pokedexDB.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 (pokemon, $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 pokedexDB.remove(contract)service.
|
||||
if ($scope.pokemon.id == null) {
|
||||
$scope.pokemon.id = $scope.pokemonList[$scope.pokemonList.length - 1].id;
|
||||
}
|
||||
pokedexDB.remove(pokemon);
|
||||
$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, pokedexDB) {
|
||||
|
||||
// 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.pokemonsCount is the variable for get contracts count.
|
||||
$scope.pokemonsCount = [];
|
||||
|
||||
//To get contract count and stop loading progress.
|
||||
$timeout(function () {
|
||||
$scope.pokemonsCount = pokedexDB.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 pokedexDB.removeAll() service.
|
||||
pokedexDB.removeAll();
|
||||
$scope.pokemonsCount = [];
|
||||
//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.
|
||||
214
www/templates/application-storage/sqLite/js/services.js
Normal file
214
www/templates/application-storage/sqLite/js/services.js
Normal file
@@ -0,0 +1,214 @@
|
||||
// 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('pokedexDB', function ($cordovaSQLite)
|
||||
{
|
||||
// pokemonList variable use to store data from sqlite query
|
||||
var pokemonList = [];
|
||||
var pokemontypen = [];
|
||||
return {
|
||||
// Select all data from sqlite
|
||||
all: function ()
|
||||
{
|
||||
pokemonList = [];
|
||||
pokemontypen = [];
|
||||
|
||||
//Typen einlesen
|
||||
var query = "SELECT * FROM tblPokemonTyp order by ID ASC";
|
||||
$cordovaSQLite.execute(db, query).then(function (res)
|
||||
{
|
||||
if (res.rows.length > 0)
|
||||
{
|
||||
pokemontypen.push('');
|
||||
for (var i = 0; i < res.rows.length; i++)
|
||||
{
|
||||
pokemontypen.push(res.rows.item(i).TYP);
|
||||
}
|
||||
}
|
||||
});
|
||||
// Variable for prepare query statement to select all contracts.
|
||||
var query = "SELECT * FROM tblPokemon order by POKEDEXID ASC";
|
||||
|
||||
// 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 ,
|
||||
pokedexid : res.rows.item(i).POKEDEXID ,
|
||||
pokemonname : res.rows.item(i).POKEMONNAME ,
|
||||
pokemontypa : res.rows.item(i).POKEMONTYPA ,
|
||||
pokemontypb : res.rows.item(i).POKEMONTYPB ,
|
||||
pokemontypaString : pokemontypen[res.rows.item(i).POKEMONTYPA] ,
|
||||
pokemontypbString : pokemontypen[res.rows.item(i).POKEMONTYPB] ,
|
||||
pokemonimage : res.rows.item(i).POKEMONIMAGE
|
||||
};
|
||||
pokemonList.push(dataItem);
|
||||
}
|
||||
}
|
||||
});
|
||||
return pokemonList;
|
||||
},// 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
|
||||
};
|
||||
pokemonList.push(dataItem);
|
||||
});
|
||||
},// End add data to sqlite.
|
||||
setPokemonImage: function(pokemon)
|
||||
{
|
||||
// Variable for prepare query statement to update contracts by contracts id.
|
||||
var query = "UPDATE tblPokemon SET " +
|
||||
" POKEMONIMAGE = (?) " +
|
||||
" WHERE POKEDEXID = (?) " ;
|
||||
console.log(pokemon.image + " " + pokemon.pokedexid);
|
||||
// Execute query statement from query variable.
|
||||
$cordovaSQLite.execute(db, query, [
|
||||
pokemon.image ,
|
||||
pokemon.pokedexid]
|
||||
).then(function (result)
|
||||
{
|
||||
for (var i = 0; i < pokemonList.length; i++)
|
||||
{
|
||||
if (pokemonList[i].id === parseInt(pokemon.id))
|
||||
{
|
||||
pokemonList[i] = pokemon;
|
||||
}
|
||||
}
|
||||
}, function(error) {
|
||||
console.error(error);
|
||||
})
|
||||
},// End update 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 < pokemonList.length; i++)
|
||||
{
|
||||
if (pokemonList[i].id === parseInt(contract.id))
|
||||
{
|
||||
pokemonList[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)
|
||||
{
|
||||
pokemonList.splice(pokemonList.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)
|
||||
{
|
||||
pokemonList.length = 0;
|
||||
})
|
||||
},// End remove all data from sqlite.
|
||||
};
|
||||
}); //End ContractDB service.
|
||||
@@ -1,14 +0,0 @@
|
||||
<!--
|
||||
This template loads for the 'tab.friend-detail' state (app.js)
|
||||
'friend' is a $scope variable created in the FriendsCtrl controller (controllers.js)
|
||||
The FriendsCtrl pulls data from the Friends service (service.js)
|
||||
The Friends service returns an array of friend data
|
||||
-->
|
||||
<ion-view view-title="{{chat.name}}">
|
||||
<ion-content class="padding">
|
||||
<img ng-src="{{chat.face}}" style="width: 64px; height: 64px">
|
||||
<p>
|
||||
{{chat.lastText}}
|
||||
</p>
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
@@ -1,17 +0,0 @@
|
||||
<ion-view view-title="Pokedex Helper">
|
||||
<ion-content scroll="false">
|
||||
<ion-slides options="options" slider="data.slider">
|
||||
<ion-slide-page>
|
||||
<div class="box back1 font-robo400medium"><h1>BLUE</h1>Test</div>
|
||||
</ion-slide-page>
|
||||
<ion-slide-page>
|
||||
<div class="box back2"><h1>YELLOW</h1>Test</div>
|
||||
</ion-slide-page>
|
||||
<ion-slide-page>
|
||||
<div class="box back3"><h1>PINK</h1>
|
||||
<button class="button button-full button-energized font-robo500" ng-click="firstruncomplete()">Okay! Los gehts</button>
|
||||
</div>
|
||||
</ion-slide-page>
|
||||
</ion-slides>
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
@@ -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>
|
||||
52
www/templates/hardware-connect/flash-light/js/controllers.js
Normal file
52
www/templates/hardware-connect/flash-light/js/controllers.js
Normal file
@@ -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>
|
||||
486
www/templates/hardware-connect/mobile-contract/js/controllers.js
Normal file
486
www/templates/hardware-connect/mobile-contract/js/controllers.js
Normal file
@@ -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.
|
||||
30
www/templates/hardware-connect/vibration/html/vibration.html
Normal file
30
www/templates/hardware-connect/vibration/html/vibration.html
Normal file
@@ -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>
|
||||
31
www/templates/hardware-connect/vibration/js/controllers.js
Normal file
31
www/templates/hardware-connect/vibration/js/controllers.js
Normal file
@@ -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.
|
||||
139
www/templates/imagedownload/js/controllers.js
Normal file
139
www/templates/imagedownload/js/controllers.js
Normal file
@@ -0,0 +1,139 @@
|
||||
// Controller will call pokedexDB 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('imageDownloadCtrl', function ($scope, $stateParams, $mdBottomSheet, $timeout, $mdDialog, $cordovaFileTransfer, $cordovaFile, $state, pokedexDB) {
|
||||
|
||||
$scope.progressval = 0;
|
||||
$scope.currentfile = '';
|
||||
$scope.progressprozent = 0;
|
||||
$scope.DownloadisVisible=true;
|
||||
$scope.AbbrechenisVisible=false;
|
||||
$scope.startdownloadtimer=false;
|
||||
|
||||
// Open our new task modal
|
||||
$scope.downloadImages = function() {
|
||||
$scope.startdownloadtimer=true;
|
||||
|
||||
$scope.DownloadisVisible=false;
|
||||
$scope.AbbrechenisVisible=true;
|
||||
|
||||
//$ionicPlatform.ready(function() {
|
||||
//$scope.taskModal.show();
|
||||
var baseurl = "http://assets.pokemon.com/assets/cms2/img/pokedex/full/";
|
||||
var url="";
|
||||
var filename="";
|
||||
var targetPath = "";
|
||||
var downloadprogress = 0;
|
||||
var pokedexid=1;
|
||||
var downloadinprogress=false;
|
||||
|
||||
|
||||
//Ordner erstellen auf SD-Karte
|
||||
$cordovaFile.createDir(cordova.file.externalRootDirectory, "PokedexHelperBilder", false)
|
||||
.then(function (success) {
|
||||
// success
|
||||
console.log('Erfolg bei Ordnererstellung. ' + success);
|
||||
}, function (error) {
|
||||
// error
|
||||
console.log('Error bei Ordnererstellung. ' + error);
|
||||
});
|
||||
|
||||
function downloadimage(){
|
||||
downloadinprogress=true;
|
||||
filename=pokedexid + ".png";
|
||||
|
||||
if (filename.length==5){
|
||||
filename='00' + filename;
|
||||
}
|
||||
|
||||
if (filename.length==6){
|
||||
filename='0' + filename;
|
||||
}
|
||||
|
||||
url=baseurl;
|
||||
url=encodeURI(url + filename);
|
||||
targetPath = cordova.file.externalRootDirectory + "/PokedexHelperBilder/" + filename;
|
||||
var tempPokemon = {
|
||||
pokedexid: null,
|
||||
image: ''
|
||||
}
|
||||
|
||||
//Bild Download
|
||||
$cordovaFileTransfer.download(url, targetPath, {Connection: "close"}, true).then(function (result) {
|
||||
$scope.currentfile=filename;
|
||||
tempPokemon.image=targetPath;
|
||||
tempPokemon.pokedexid=pokedexid;
|
||||
|
||||
console.log(tempPokemon.image + " " + tempPokemon.pokedexid);
|
||||
pokedexDB.setPokemonImage(tempPokemon);
|
||||
|
||||
console.log(filename + ' heruntergeladen.' + result);
|
||||
pokedexid=pokedexid + 1;
|
||||
console.log(result);
|
||||
downloadinprogress=false;
|
||||
}, function (error) {
|
||||
console.log('Error. ' + error.code + ' ' + error.constant);
|
||||
}, function (progress) {
|
||||
//downloadprogress=(progress.loaded / progress.total) * 100;
|
||||
$scope.progressprozent = Math.round(pokedexid / 721 * 100);
|
||||
$scope.progressval = pokedexid;
|
||||
$scope.currentfile=filename; //+ downloadprogress;
|
||||
});
|
||||
console.log(pokedexid);
|
||||
|
||||
if (pokedexid<721){
|
||||
downloadtimer();
|
||||
}
|
||||
else{
|
||||
$scope.progressprozent = 'Download abgeschlossen! ' + $scope.progressprozent;
|
||||
$scope.DownloadisVisible=true;
|
||||
$scope.AbbrechenisVisible=false;
|
||||
}
|
||||
|
||||
if ( $scope.startdownloadtimer==false){
|
||||
$scope.progressprozent = 'Download Abgebrochen! ' + $scope.progressprozent;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
//});
|
||||
|
||||
function downloadtimer(){
|
||||
if ($scope.startdownloadtimer==true){
|
||||
|
||||
|
||||
$timeout(function(){
|
||||
if (downloadinprogress==false){
|
||||
downloadimage();
|
||||
console.log("downinprogress ist false");
|
||||
}else{
|
||||
console.log("downinprogress ist true");
|
||||
downloadtimer();
|
||||
}
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
downloadtimer();
|
||||
};
|
||||
|
||||
|
||||
$scope.downloadabbrechen = function() {
|
||||
$scope.DownloadisVisible=true;
|
||||
$scope.AbbrechenisVisible=false;
|
||||
$scope.startdownloadtimer=false;
|
||||
};
|
||||
|
||||
});// End of Contract List Page Controller.
|
||||
@@ -1,4 +0,0 @@
|
||||
<ion-view view-title="Pokedex Helper">
|
||||
<ion-content scroll="false">
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
@@ -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.
|
||||
241
www/templates/menu/html/menu.html
Normal file
241
www/templates/menu/html/menu.html
Normal file
@@ -0,0 +1,241 @@
|
||||
<!--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.imagedownload')">
|
||||
<div class="col-33">
|
||||
<i class="fa fa-database"></i>
|
||||
</div>
|
||||
<div class="col-66">
|
||||
<span>Bilder Herunterladen</span>
|
||||
</div>
|
||||
</div>
|
||||
<md-subheader class="md-warn">Share Application Content</md-subheader>
|
||||
<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">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>
|
||||
</ion-content><!--end menu content section-->
|
||||
<!--end menu section-->
|
||||
|
||||
</md-sidenav>
|
||||
</ion-side-menus>
|
||||
143
www/templates/menu/js/controllers.js
Normal file
143
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.
|
||||
@@ -1,9 +0,0 @@
|
||||
<ion-view view-title="Account">
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<ion-toggle ng-model="settings.enableFriends">
|
||||
Enable Friends
|
||||
</ion-toggle>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
@@ -1,30 +0,0 @@
|
||||
<ion-view view-title="Pokemon">
|
||||
|
||||
|
||||
<ion-nav-buttons side="secondary">
|
||||
<button class="button button-icon icon ion-ios-search-strong" ng-click="showFilterBar()">
|
||||
</button>
|
||||
</ion-nav-buttons>
|
||||
|
||||
<ion-content direction="y" scrollbar-y="false">
|
||||
|
||||
<ion-refresher pulling-icon="ion-arrow-down-b" on-refresh="refreshItems()">
|
||||
</ion-refresher>
|
||||
|
||||
<ion-list>
|
||||
<ion-item collection-repeat="item in items" ng-model="items">
|
||||
<a class="item item-thumbnail-left" href="#">
|
||||
<img ng-src="{{item.POKEMONIMAGE}}">
|
||||
<h2>{{item.POKEMONNAME}}</h2>
|
||||
<p>{{item.POKEMONIMAGE}}</p>
|
||||
</a>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
|
||||
<div ng-if="items !== undefined && !items.length" class="no-results">
|
||||
<p>No Results</p>
|
||||
</div>
|
||||
|
||||
</ion-content>
|
||||
|
||||
</ion-view>
|
||||
@@ -1,23 +0,0 @@
|
||||
<ion-view view-title="Dashboard">
|
||||
<ion-content class="padding">
|
||||
<h2>Welcome to Ionic</h2>
|
||||
<p>
|
||||
This is the Ionic starter for tabs-based apps. For other starters and ready-made templates, check out the <a href="http://market.ionic.io/starters" target="_blank">Ionic Market</a>.
|
||||
</p>
|
||||
<p>
|
||||
To edit the content of each tab, edit the corresponding template file in <code>www/templates/</code>. This template is <code>www/templates/tab-dash.html</code>
|
||||
</p>
|
||||
<p>
|
||||
If you need help with your app, join the Ionic Community on the <a href="http://forum.ionicframework.com" target="_blank">Ionic Forum</a>. Make sure to <a href="http://twitter.com/ionicframework" target="_blank">follow us</a> on Twitter to get important updates and announcements for Ionic developers.
|
||||
</p>
|
||||
<p>
|
||||
For help sending push notifications, join the <a href="https://apps.ionic.io/signup" target="_blank">Ionic Platform</a> and check out <a href="http://docs.ionic.io/docs/push-overview" target="_blank">Ionic Push</a>. We also have other services available.
|
||||
</p>
|
||||
<button class="button button-full" ng-click="downloadImages()">
|
||||
downlod Images
|
||||
</button>
|
||||
<button class="button button-full" ng-click="resetdb()">
|
||||
ResetDB
|
||||
</button>
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
@@ -1,24 +0,0 @@
|
||||
<!--
|
||||
Create tabs with an icon and label, using the tabs-positive style.
|
||||
Each tab's child <ion-nav-view> directive will have its own
|
||||
navigation history that also transitions its views in and out.
|
||||
-->
|
||||
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
|
||||
|
||||
<!-- Dashboard Tab -->
|
||||
<ion-tab title="Status" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/dash">
|
||||
<ion-nav-view name="tab-dash"></ion-nav-view>
|
||||
</ion-tab>
|
||||
|
||||
<!-- Chats Tab -->
|
||||
<ion-tab title="Chats" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/tab/chats">
|
||||
<ion-nav-view name="tab-chats"></ion-nav-view>
|
||||
</ion-tab>
|
||||
|
||||
<!-- Account Tab -->
|
||||
<ion-tab title="Account" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/account">
|
||||
<ion-nav-view name="tab-account"></ion-nav-view>
|
||||
</ion-tab>
|
||||
|
||||
|
||||
</ion-tabs>
|
||||
39
www/templates/themes/authentication/html/fake-login.html
Normal file
39
www/templates/themes/authentication/html/fake-login.html
Normal file
@@ -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>
|
||||
49
www/templates/themes/authentication/html/fake-sign-up.html
Normal file
49
www/templates/themes/authentication/html/fake-sign-up.html
Normal file
@@ -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>
|
||||
117
www/templates/themes/catalog/html/catalog.html
Normal file
117
www/templates/themes/catalog/html/catalog.html
Normal file
@@ -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>
|
||||
38
www/templates/themes/catalog/js/controllers.js
Normal file
38
www/templates/themes/catalog/js/controllers.js
Normal file
@@ -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.
|
||||
146
www/templates/themes/cloth-shop/html/cloth-shop.html
Normal file
146
www/templates/themes/cloth-shop/html/cloth-shop.html
Normal file
@@ -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>
|
||||
131
www/templates/themes/cube-feed/html/cube-feed.html
Normal file
131
www/templates/themes/cube-feed/html/cube-feed.html
Normal file
@@ -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>
|
||||
43
www/templates/themes/expense-dashboard/js/controllers.js
Normal file
43
www/templates/themes/expense-dashboard/js/controllers.js
Normal file
@@ -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.
|
||||
118
www/templates/themes/location-feed/html/location-feed.html
Normal file
118
www/templates/themes/location-feed/html/location-feed.html
Normal file
@@ -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>
|
||||
114
www/templates/themes/menu-dashboard/html/menu-dashboard.html
Normal file
114
www/templates/themes/menu-dashboard/html/menu-dashboard.html
Normal file
@@ -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>
|
||||
18
www/templates/themes/menu-dashboard/js/controllers.js
Normal file
18
www/templates/themes/menu-dashboard/js/controllers.js
Normal file
@@ -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.
|
||||
360
www/templates/themes/news-feed/html/news-feed.html
Normal file
360
www/templates/themes/news-feed/html/news-feed.html
Normal file
@@ -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>
|
||||
122
www/templates/themes/online-course/html/online-course.html
Normal file
122
www/templates/themes/online-course/html/online-course.html
Normal file
@@ -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-->
|
||||
155
www/templates/themes/pricing/html/pricing.html
Normal file
155
www/templates/themes/pricing/html/pricing.html
Normal file
@@ -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>
|
||||
161
www/templates/themes/restaurant/html/restaurant.html
Normal file
161
www/templates/themes/restaurant/html/restaurant.html
Normal file
@@ -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>
|
||||
32
www/templates/themes/try-app/html/try-app-no-back-btn.html
Normal file
32
www/templates/themes/try-app/html/try-app-no-back-btn.html
Normal file
@@ -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>
|
||||
40
www/templates/themes/try-app/html/try-app.html
Normal file
40
www/templates/themes/try-app/html/try-app.html
Normal file
@@ -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