Icons, Splashscreen und Pokemonlst

This commit is contained in:
Carsten Hilmer
2016-08-26 01:22:24 +02:00
parent 60f1e835df
commit 6a0a74191e
35 changed files with 525 additions and 496 deletions

View File

@@ -34,8 +34,8 @@
<!--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')">
<md-subheader class="md-warn">Pokemon-Index</md-subheader>
<div class="row menu-item" ng-click="navigateTo('app.pokemonlist')">
<div class="col-33">
<i class="fa fa-database"></i>
</div>

View File

@@ -5,7 +5,7 @@
<!--State name : app.contractdetail-->
<!--URL : #app/contractdetail-->
<ion-view title="Contract">
<ion-view title="{{pokemon.pokemonname}}">
<!--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">

View File

@@ -1,14 +1,14 @@
<!--View Information-->
<!--View name : Contract List-->
<!--Controller name : contractListCtrl-->
<!--View name : Pokemon List-->
<!--Controller name : pokemonListCtrl-->
<!--Controller path : www/templates/application-storage/sqLite/js/controllers.js-->
<!--State name : app.contractlist-->
<!--URL : #app/contractlist-->
<!--State name : app.pokemonlist-->
<!--URL : #app/pokemonlist-->
<ion-view view-title="Pokedex Helper">
<!--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')"
<md-button ng-disabled="isLoading" class="md-icon-button ion-nav-button-right" ng-click="navigateTo('app.pokemonsetting')"
aria-label="Setting">
<i class="ion-android-more-vertical"></i>
</md-button>
@@ -25,69 +25,69 @@
</div>
</md-toolbar><!--end toolbar section-->
<!--contract list section-->
<ion-content id="contract-list-content" class="fade-in">
<!--pokemon list section-->
<ion-content id="pokemon-list-content" class="fade-in">
<!--list section-->
<md-list>
<!--Below code it will disable animation to better performance-->
<div ng-if="!isAnimated" class="row contract-list-item"
<div ng-if="!isAnimated" class="row pokemon-list-item"
ng-repeat="pokemon in pokemons | filter: filterText | orderBy: 'pokemonname' | limitTo: numberOfItemsToDisplay">
<div class="col-25 icon-user">
<img ng-src="{{ pokemon.pokemonimage }}" class="image-list-thumb"/>
<md-menu md-position-mode="target-right target" class="md-list-item-md-menu-right">
<md-menu md-position-mode="target-right target">
<p ng-click="$mdOpenMenu()">
<md-icon md-menu-origin md-svg-icon="pokemenu"></md-icon>
<img ng-src="img/icons/action1.png"/>
</p>
<md-menu-content width="1">
<md-menu-item>
<a class="md-button md-default-theme" ng-click="navigateTo('app.contractdetail',contract)">
<a class="md-button md-default-theme" ng-click="navigateTo('app.pokemondetail',pokemon)">
<span class="menu-item-button">Details anzeigen</span>
</a>
</md-menu-item>
<md-menu-item>
<a class="md-button md-default-theme" ng-click="callTo(contract.pokemonname)">
<a class="md-button md-default-theme" ng-click="callTo(pokemon.pokemonname)">
<span class="menu-item-button" >{{pokemon.pokemonname}} zu deinen Lesezeichen hinzufügen</span>
</a>
</md-menu-item>
<md-menu-item>
<a class="md-button md-default-theme" ng-click="navigateTo('app.contractdetail',contract)">
<a class="md-button md-default-theme" ng-click="navigateTo('app.pokemondetail',pokemon)">
<span class="menu-item-button">{{pokemon.pokemonname}} zu deinen Favoriten hinzufügen</span>
</a>
</md-menu-item>
<md-menu-item>
<a class="md-button md-default-theme" ng-click="navigateTo('app.contractdetail',contract)">
<a class="md-button md-default-theme" ng-click="navigateTo('app.pokemondetail',pokemon)">
<span class="menu-item-button">{{pokemon.pokemonname}} mit anderem Pokemon vergleichen</span>
</a>
</md-menu-item>
<md-menu-item>
<a class="md-button md-default-theme" ng-click="navigateTo('app.contractdetail',contract)">
<a class="md-button md-default-theme" ng-click="navigateTo('app.pokemondetail',pokemon)">
<span class="menu-item-button">Pokemon vom gleichen Typ anzeigen</span>
</a>
</md-menu-item>
<md-menu-item>
<a class="md-button md-default-theme" ng-click="navigateTo('app.contractdetail',contract)">
<a class="md-button md-default-theme" ng-click="navigateTo('app.pokemondetail',pokemon)">
<span class="menu-item-button">Pokemon vom gleichen Typ {{ pokemon.pokemontypaString }} anzeigen</span>
</a>
</md-menu-item>
<md-menu-item ng-if="pokemon.pokemontypb > 0">
<a class="md-button md-default-theme" ng-click="navigateTo('app.contractdetail',contract)">
<a class="md-button md-default-theme" ng-click="navigateTo('app.pokemondetail',pokemon)">
<span class="menu-item-button">Pokemon vom gleichen Typ {{ pokemon.pokemontypbString }} anzeigen</span>
</a>
</md-menu-item>
<md-menu-item>
<a class="md-button md-default-theme" ng-click="navigateTo('app.contractdetail',contract)">
<a class="md-button md-default-theme" ng-click="navigateTo('app.pokemondetail',pokemon)">
<span class="menu-item-button">Welche Pokemon sind stärker als {{pokemon.pokemonname}}</span>
</a>
</md-menu-item>
<md-menu-item>
<a class="md-button md-default-theme" ng-click="navigateTo('app.contractdetail',contract)">
<a class="md-button md-default-theme" ng-click="navigateTo('app.pokemondetail',pokemon)">
<span class="menu-item-button">Welche Pokemon sind schwächer als {{pokemon.pokemonname}}</span>
</a>
</md-menu-item>
@@ -113,7 +113,7 @@
<!--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-click="navigateTo('app.pokemondetaildetail',pokemon)"
ng-repeat="pokemon in pokemons | filter: filterText | orderBy: 'pokemonname'">
<img ng-src="{{ pokemon.pokemonimage }}" class="image-list-thumb"/>
@@ -121,7 +121,7 @@
<p>{{ pokemon.pokemonname }} {{ pokemon.pokemonimage }}</p>
<md-switch class="md-secondary"
ng-model="pokemon.isEnable"
ng-change="updateContract(pokemon)">
ng-change="updatePokemon(pokemon)">
</md-switch>
</md-list-item>
@@ -131,10 +131,10 @@
<ion-infinite-scroll on-infinite="addMoreItem()" ng-if="pokemons.length > numberOfItemsToDisplay"></ion-infinite-scroll>
</ion-content><!--end contract list section-->
</ion-content><!--end pokemon list section-->
<!--loading progress-->
<div id="contract-list-loading-progress" class="loading-progress fade-in">
<div id="pokemon-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-->

View File

@@ -12,8 +12,8 @@
// 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) {
// Controller of Pokemon List Page.
appControllers.controller('pokemonListCtrl', 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.
@@ -35,20 +35,20 @@ appControllers.controller('contractListCtrl', function ($scope, $stateParams,$fi
// The function for show/hide loading progress.
$timeout(function () {
if ($scope.isAndroid) {
jQuery('#contract-list-loading-progress').show();
jQuery('#pokemon-list-loading-progress').show();
}
else {
jQuery('#contract-list-loading-progress').fadeIn(700);
jQuery('#pokemon-list-loading-progress').fadeIn(700);
}
}, 400);
$timeout(function () {
//Get all contracts.
//Get all pokemns.
$scope.getPokemonList();
jQuery('#contract-list-loading-progress').hide();
jQuery('#contract-list-content').fadeIn();
jQuery('#pokemon-list-loading-progress').hide();
jQuery('#pokemon-list-content').fadeIn();
$scope.isLoading = false;
}, 3000);// End loading progress.
@@ -61,19 +61,19 @@ appControllers.controller('contractListCtrl', function ($scope, $stateParams,$fi
$scope.numberOfItemsToDisplay += 20; // load number of more items
$scope.$broadcast('scroll.infiniteScrollComplete')
}
// getPokemonList is for get all contracts.
// getPokemonList is for get all pokemons.
// 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.
// updatePokemon is for update pokemons.
// By sending pokemon to pokedexDB.update(pokemon) service.
// Parameter :
// contract = contract that user select from view.
$scope.updateContract = function (pokemon) {
// pokemon = pokemon that user select from view.
$scope.updatePokemon = function (pokemon) {
pokedexDB.update(pokemon);
};// End updateContract.
};// End updatePokemon.
// navigateTo is for navigate to other page
// by using targetPage to be the destination page
@@ -84,7 +84,7 @@ appControllers.controller('contractListCtrl', function ($scope, $stateParams,$fi
$scope.navigateTo = function (targetPage, objectData) {
$timeout(function(){
$state.go(targetPage, {
contractdetail: objectData,
pokemondetail: objectData,
actionDelete: (objectData == null ? false : true)
});
},400);
@@ -100,10 +100,10 @@ appControllers.controller('contractListCtrl', function ($scope, $stateParams,$fi
$scope.initialForm();
});// End of Contract List Page Controller.
});// End of Pokemon List Page Controller.
// Controller of Contract Detail Page.
appControllers.controller('contractDetailCtrl', function ($mdBottomSheet, $mdToast, $scope, $stateParams, $filter, $mdDialog, $ionicHistory, pokedexDB, $ionicHistory) {
// Controller of pokemon Detail Page.
appControllers.controller('pokemonDetailCtrl', 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.
@@ -112,38 +112,40 @@ appControllers.controller('contractDetailCtrl', function ($mdBottomSheet, $mdToa
// $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.
// $scope.pokemon is the variable that store pokemon detail data that receive form pokemon 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);
// $stateParams.actionDelete(bool) = status that pass from pokemon list page.
// $stateParams.pokemondetail(object) = pokemon that user select from pokemon list page.
$scope.pokemon = $scope.getPokemonData($stateParams.actionDelete, $stateParams.pokemondetail);
//$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 = {
// getPokemonData is for get pokemon detail data.
$scope.getPokemonData = function (actionDelete, pokemonDetail) {
// tempPokemon is temporary pokemon data detail.
var tempPokemon = {
id: null,
firstName: '',
lastName: '',
telephone: '',
email: '',
createDate: $filter('date')(new Date(), 'MMM dd yyyy'),
age: null,
isEnable: false
pokedexid: '',
pokedexidString: '',
pokemonname: '',
pokemontypa: '',
pokemontypb: '',
pokemontypaString: '',
pokemontypbString: '',
pokemonimage: ''
}
// 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.
// If actionDelete is true pokemon Detail Page will show pokemon detail that receive form pokemon list page.
// else it will show pokemon for user to add new data.
return (actionDelete ? angular.copy(pokemonDetail) : tempPokemon);
};//End get pokemon detail data.
// savePokemon is for save pokemon.
// Parameter :
// contract(object) = contract object that presenting on the view.
// pokemon(object) = pokemon 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.
@@ -165,15 +167,15 @@ appControllers.controller('contractDetailCtrl', function ($mdBottomSheet, $mdToa
// For confirm button to save data.
try {
// To update data by calling pokedexDB.update(contract) service.
// To update data by calling pokedexDB.update(pokemon) service.
if ($scope.actionDelete) {
if ($scope.pokemon.id == null) {
$scope.pokemon.id = $scope.pokemonList[$scope.pokemonList.length - 1].id;
}
pokedexDB.update(contract);
pokedexDB.update(pokemon);
} // End update data.
// To add new data by calling pokedexDB.add(contract) service.
// To add new data by calling pokedexDB.add(pokemon) service.
else {
pokedexDB.add(pokemon);
$scope.pokemonList = pokedexDB.all();
@@ -210,13 +212,13 @@ appControllers.controller('contractDetailCtrl', function ($mdBottomSheet, $mdToa
}, function () {
// For cancel button to save data.
});// End alert box.
};// End save contract.
};// End save pokemon.
// deleteContract is for remove contract.
// deletePokemon is for remove pokemon.
// Parameter :
// contract(object) = contract object that presenting on the view.
// pokemon(object) = pokemon object that presenting on the view.
// $event(object) = position of control that user tap.
$scope.deleteContract = function (pokemon, $event) {
$scope.deletePokemon= function (pokemon, $event) {
//$mdBottomSheet.hide() use for hide bottom sheet.
$mdBottomSheet.hide();
//mdDialog.show use for show alert box for Confirm to delete data.
@@ -288,7 +290,7 @@ appControllers.controller('contractDetailCtrl', function ($mdBottomSheet, $mdToa
});// End Contract Detail page Controller.
// Controller of Contract Setting Page.
appControllers.controller('contractSettingCtrl', function ($scope,$ionicViewSwitcher,$state, $timeout, $stateParams, $mdDialog, $mdBottomSheet, $mdToast, $ionicHistory, pokedexDB) {
appControllers.controller('pokemonSettingCtrl', 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.