Datenbank Update, detailseite angepasst, Standard Attacken eingebaut

This commit is contained in:
Carsten Hilmer 2016-09-08 02:18:36 +02:00
parent 25a5793f2f
commit 311130675f
5 changed files with 487 additions and 15 deletions

View File

@ -7,6 +7,38 @@ md-input-container {
height: 64px; height: 64px;
} }
.mycenter {
text-align: center;
}
.typnormal{
border-color: #0a9dc7;
background-color: #11c1f3;
color: #fff;
text-align: center;
}
.typnmittel{
border-color: #e6b500;
background-color: #ffc900;
color: #fff;
text-align: center;
}
.typschwach{
border-color: #28a54c;
background-color: #33cd5f;
color: #fff;
text-align: center;
}
.typstark{
border-color: #e42112;
background-color: #ef473a;
color: #fff;
text-align: center;
}
.pokemontyp1 { .pokemontyp1 {
display: inline-block; display: inline-block;
@ -692,3 +724,345 @@ md-input-container {
width: 16px; width: 16px;
border-radius: 50%; border-radius: 50%;
} }
.pokemontyp1sx {
display: inline-block;
padding: 0 25px;
height: 16px;
font-size: 8px;
line-height: 16px;
border-radius: 5px;
background-color: #D50000;
color: white;
}
.pokemontyp1sx img {
float: left;
margin: 0 10px 0 -25px;
height: 16px;
width: 16px;
border-radius: 50%;
}
.pokemontyp2sx {
display: inline-block;
padding: 0 25px;
height: 16px;
font-size: 8px;
line-height: 16px;
border-radius: 5px;
background-color: #C51162;
color: white;
}
.pokemontyp2sx img {
float: left;
margin: 0 10px 0 -25px;
height: 16px;
width: 16px;
border-radius: 50%;
}
.pokemontyp3sx {
display: inline-block;
padding: 0 25px;
height: 16px;
font-size: 8px;
line-height: 16px;
border-radius: 5px;
background-color: #AA00FF;
color: white;
}
.pokemontyp3sx img {
float: left;
margin: 0 10px 0 -25px;
height: 16px;
width: 16px;
border-radius: 50%;
}
.pokemontyp4sx {
display: inline-block;
padding: 0 25px;
height: 16px;
font-size: 8px;
line-height: 16px;
border-radius: 5px;
background-color: #6200EA;
color: white;
}
.pokemontyp4sx img {
float: left;
margin: 0 10px 0 -25px;
height: 16px;
width: 16px;
border-radius: 50%;
}
.pokemontyp5sx {
display: inline-block;
padding: 0 25px;
height: 16px;
font-size: 8px;
line-height: 16px;
border-radius: 5px;
background-color: #304FFE;
color: white;
}
.pokemontyp5sx img {
float: left;
margin: 0 10px 0 -25px;
height: 16px;
width: 16px;
border-radius: 50%;
}
.pokemontyp6sx {
display: inline-block;
padding: 0 25px;
height: 16px;
font-size: 8px;
line-height: 16px;
border-radius: 5px;
background-color: #2962FF;
color: white;
}
.pokemontyp6sx img {
float: left;
margin: 0 10px 0 -25px;
height: 16px;
width: 16px;
border-radius: 50%;
}
.pokemontyp7sx {
display: inline-block;
padding: 0 25px;
height: 16px;
font-size: 8px;
line-height: 16px;
border-radius: 5px;
background-color: #0091EA;
color: white;
}
.pokemontyp7sx img {
float: left;
margin: 0 10px 0 -25px;
height: 16px;
width: 16px;
border-radius: 50%;
}
.pokemontyp8sx {
display: inline-block;
padding: 0 25px;
height: 16px;
font-size: 8px;
line-height: 16px;
border-radius: 5px;
background-color: #00B8D4;
color: white;
}
.pokemontyp8sx img {
float: left;
margin: 0 10px 0 -25px;
height: 16px;
width: 16px;
border-radius: 50%;
}
.pokemontyp9sx {
display: inline-block;
padding: 0 25px;
height: 16px;
font-size: 8px;
line-height: 16px;
border-radius: 5px;
background-color: #00BFA5;
color: white;
}
.pokemontyp9sx img {
float: left;
margin: 0 10px 0 -25px;
height: 16px;
width: 16px;
border-radius: 50%;
}
.pokemontyp10sx {
display: inline-block;
padding: 0 25px;
height: 16px;
font-size: 8px;
line-height: 16px;
border-radius: 5px;
background-color: #1B5E20;
color: white;
}
.pokemontyp10sx img {
float: left;
margin: 0 10px 0 -25px;
height: 16px;
width: 16px;
border-radius: 50%;
}
.pokemontyp11sx {
display: inline-block;
padding: 0 25px;
height: 16px;
font-size: 8px;
line-height: 16px;
border-radius: 5px;
background-color: #33691E;
color: white;
}
.pokemontyp11sx img {
float: left;
margin: 0 10px 0 -25px;
height: 16px;
width: 16px;
border-radius: 50%;
}
.pokemontyp12sx {
display: inline-block;
padding: 0 25px;
height: 16px;
font-size: 8px;;
line-height: 16px;
border-radius: 5px;
background-color: #827717;
color: white;
}
.pokemontyp12sx img {
float: left;
margin: 0 10px 0 -25px;
height: 16px;
width: 16px;
border-radius: 50%;
}
.pokemontyp13sx {
display: inline-block;
padding: 0 25px;
height: 16px;
font-size: 8px;
line-height: 16px;
border-radius: 5px;
background-color: #F57F17;
color: white;
}
.pokemontyp13sx img {
float: left;
margin: 0 10px 0 -25px;
height: 16px;
width: 16px;
border-radius: 50%;
}
.pokemontyp14sx {
display: inline-block;
padding: 0 25px;
height: 16px;
font-size: 8px;
line-height: 16px;
border-radius: 5px;
background-color: #FF6F00;
color: white;
}
.pokemontyp14sx img {
float: left;
margin: 0 10px 0 -25px;
height: 16px;
width: 16px;
border-radius: 50%;
}
.pokemontyp15sx {
display: inline-block;
padding: 0 25px;
height: 16px;
font-size: 8px;
line-height: 16px;
border-radius: 5px;
background-color: #E65100;
color: white;
}
.pokemontyp15sx img {
float: left;
margin: 0 10px 0 -25px;
height: 16px;
width: 16px;
border-radius: 50%;
}
.pokemontyp16sx {
display: inline-block;
padding: 0 25px;
height: 16px;
font-size: 8px;
line-height: 16px;
border-radius: 5px;
background-color: #BF360C;
color: white;
}
.pokemontyp16sx img {
float: left;
margin: 0 10px 0 -25px;
height: 16px;
width: 16px;
border-radius: 50%;
}
.pokemontyp17sx {
display: inline-block;
padding: 0 25px;
height: 16px;
font-size: 8px;
line-height: 16px;
border-radius: 5px;
background-color: #3E2723;
color: white;
}
.pokemontyp17sx img {
float: left;
margin: 0 10px 0 -25px;
height: 16px;
width: 16px;
border-radius: 50%;
}
.pokemontyp18sx {
display: inline-block;
padding: 0 25px;
height: 16px;
font-size: 8px;
line-height: 16px;
border-radius: 5px;
background-color: #212121;
color: white;
}
.pokemontyp18sx img {
float: left;
margin: 0 10px 0 -25px;
height: 16px;
width: 16px;
border-radius: 50%;
}

Binary file not shown.

View File

@ -67,47 +67,108 @@
<div class="card"> <div class="card">
<div class="item item-divider"> <div class="item item-divider">
Schwächen Schaden durch Attacken-Typ
</div> </div>
<md-list> <md-list>
<div class="row" ng-repeat="pokemonschwaeche in pokemonschwaechenliste"> <div class="row" ng-repeat="pokemonschwaeche in pokemonschwaechenliste">
<div class="col"> <div class="col col-center" ng-class="pokemonschwaeche.pokemontyp1 == 1 ? 'typnmittel' : pokemonschwaeche.pokemontyp1 < 0.8 ? 'typschwach' : (pokemonschwaeche.pokemontyp1 == 0.8 ? 'typnormal' : 'typstark')">
<div class="pokemontyp{{ pokemonschwaeche.pokemontypid1}}sm"> <div class="pokemontyp{{ pokemonschwaeche.pokemontypid1}}sm" style="margin: 0 auto; width:100%">
<img src="img/typbilder/{{ pokemonschwaeche.pokemontypid1}}.png" alt="PokemonTyp" width="32" height="32"> <img src="img/typbilder/{{ pokemonschwaeche.pokemontypid1}}.png" alt="PokemonTyp" width="32" height="32">
{{ pokemonschwaeche.pokemontyptext1 }} {{ pokemonschwaeche.pokemontyptext1 }}
</div> </div>
{{ pokemonschwaeche.pokemontyp1 }} <h4>{{ pokemonschwaeche.pokemontyp1 }}</h4>
</div> </div>
<div class="col"> <div class="col col-center" ng-class="pokemonschwaeche.pokemontyp2 == 1 ? 'typnmittel' : pokemonschwaeche.pokemontyp2 < 0.8 ? 'typschwach' : (pokemonschwaeche.pokemontyp2 == 0.8 ? 'typnormal' : 'typstark')">
<div class="pokemontyp{{ pokemonschwaeche.pokemontypid2}}sm"> <div class="pokemontyp{{ pokemonschwaeche.pokemontypid2}}sm" style="margin: 0 auto; width:100%">
<img src="img/typbilder/{{ pokemonschwaeche.pokemontypid2}}.png" alt="PokemonTyp" width="32" height="32"> <img src="img/typbilder/{{ pokemonschwaeche.pokemontypid2}}.png" alt="PokemonTyp" width="32" height="32">
{{ pokemonschwaeche.pokemontyptext2 }} {{ pokemonschwaeche.pokemontyptext2 }}
</div> </div>
{{ pokemonschwaeche.pokemontyp2 }} <h4>{{ pokemonschwaeche.pokemontyp2 }}</h4>
</div> </div>
<div class="col"> <div class="col col-center" ng-class="pokemonschwaeche.pokemontyp3 == 1 ? 'typnmittel' : pokemonschwaeche.pokemontyp3 < 0.8 ? 'typschwach' : (pokemonschwaeche.pokemontyp3 == 0.8 ? 'typnormal' : 'typstark')">
<div class="pokemontyp{{ pokemonschwaeche.pokemontypid3}}sm"> <div class="pokemontyp{{ pokemonschwaeche.pokemontypid3}}sm" style="margin: 0 auto; width:100%">
<img src="img/typbilder/{{ pokemonschwaeche.pokemontypid3}}.png" alt="PokemonTyp" width="32" height="32"> <img src="img/typbilder/{{ pokemonschwaeche.pokemontypid3}}.png" alt="PokemonTyp" width="32" height="32">
{{ pokemonschwaeche.pokemontyptext3 }} {{ pokemonschwaeche.pokemontyptext3 }}
</div> </div>
{{ pokemonschwaeche.pokemontyp3 }} <h4>{{ pokemonschwaeche.pokemontyp3 }}</h4>
</div> </div>
</div> </div>
<div class="row" style="font-size: 10px;">
<div class="col">
Legende:
</div>
<div class="col mycenter">
Wenig <div style="height:5px;width:5px;display: inline-block;" class="typschwach"></div>
</div>
<div class="col mycenter">
Normal <div style="height:5px;width:5px;display: inline-block;" class="typnormal"></div>
</div>
<div class="col mycenter">
Mittel <div style="height:5px;width:5px;display: inline-block;" class="typnmittel"></div>
</div>
<div class="col mycenter">
Stark <div style="height:5px;width:5px;display: inline-block;" class="typstark"></div>
</div>
</div>
<div class="row" style="font-size: 10px;">
<div class="col mycenter">
Hinweis: Angriffe durch Starke Attacken (<div style="height:5px;width:5px;display: inline-block;" class="typstark"></div>) sollten vermieden werden.
</div>
</div>
</md-list> </md-list>
</div> </div>
<div class="card"> <div class="card">
<div class="item item-divider"> <div class="item item-divider">
Basiswerte Standard Attacken
</div> </div>
<div class="item item-text-wrap"> <div class="row" style="font-size: 10px;">
This is a basic Card with some text.
<div class="col-25 col-center">
<strong>Attacke</strong>
</div> </div>
<div class="col-25 col-center">
<strong>Typ</strong>
</div>
<div class="col-10 col-center mycenter">
<strong>Stärke</strong>
</div>
<div class="col-20 col-center mycenter">
<strong>Energie</strong>
</div>
<div class="col-20 col-center mycenter">
<strong>Dauer</strong>
</div>
</div>
<md-list>
<div class="row" ng-repeat="pokemonattacke in pokemonattackenliste" style="font-size: 10px;">
<div class="col-25 col-center">
{{ pokemonattacke.pokemonattacke }}
</div>
<div class="col-25 col-center">
<div class="pokemontyp{{ pokemonattacke.pokemonattacketyp}}sx" style="margin: 0 auto; width:97%;">
<img src="img/typbilder/{{ pokemonattacke.pokemonattacketyp}}.png" alt="PokemonTyp" width="32" height="32">
{{ pokemonattacke.pokemonattacketyptext }}
</div>
</div>
<div class="col-10 col-center mycenter">
{{ pokemonattacke.pokemonattackestaerke }}
</div>
<div class="col-20 col-center mycenter">
{{ pokemonattacke.pokemonattackeenergie }}%
</div>
<div class="col-20 col-center mycenter">
{{ pokemonattacke.pokemonattackedauer }} Sek.
</div>
</div>
</md-list>
</div> </div>
<div class="card"> <div class="card">

View File

@ -93,6 +93,7 @@ appControllers.controller('pokemonDetailCtrl', function ($mdBottomSheet, $mdToas
$scope.initialForm = function () { $scope.initialForm = function () {
$scope.pokemonschwaechenliste = []; $scope.pokemonschwaechenliste = [];
$scope.pokemonattackenliste = [];
// $scope.pokemon is the variable that store pokemon detail data that receive form pokemon list page. // $scope.pokemon is the variable that store pokemon detail data that receive form pokemon list page.
// Parameter : // Parameter :
// $stateParams.pokemondetail(object) = pokemon that user select from pokemon list page. // $stateParams.pokemondetail(object) = pokemon that user select from pokemon list page.
@ -102,6 +103,7 @@ appControllers.controller('pokemonDetailCtrl', function ($mdBottomSheet, $mdToas
// It will allow to delete data when have data in the database. // It will allow to delete data when have data in the database.
$timeout(function () { $timeout(function () {
$scope.getTypenEffekt($scope.pokemon.pokedexid); $scope.getTypenEffekt($scope.pokemon.pokedexid);
$scope.getStandardAttacken($scope.pokemon.pokedexid);
}, 1000); }, 1000);
}; //End initialForm. }; //End initialForm.
@ -118,6 +120,11 @@ appControllers.controller('pokemonDetailCtrl', function ($mdBottomSheet, $mdToas
$scope.pokemonschwaechenliste = pokedexDB.getTypenEffekte(pokedexid); $scope.pokemonschwaechenliste = pokedexDB.getTypenEffekte(pokedexid);
};//End getPokemonList. };//End getPokemonList.
// getPokemonList is for get all pokemons.
// By calling pokedexDB.all() service.
$scope.getStandardAttacken = function (pokedexid) {
$scope.pokemonattackenliste = pokedexDB.getStandardAttacken(pokedexid);
};//End getPokemonList.
// showListBottomSheet is for showing the bottom sheet. // showListBottomSheet is for showing the bottom sheet.
// Parameter : // Parameter :
// $event(object) = position of control that user tap. // $event(object) = position of control that user tap.

View File

@ -39,6 +39,7 @@ appServices.factory('pokedexDB', function ($cordovaSQLite)
var pokemonList = []; var pokemonList = [];
var pokemontypen = []; var pokemontypen = [];
var pokemoneffektlist = []; var pokemoneffektlist = [];
var pokemonstandardattackenliste= [];
return { return {
// Select all data from sqlite // Select all data from sqlite
@ -208,6 +209,35 @@ appServices.factory('pokedexDB', function ($cordovaSQLite)
return pokemoneffektlist; return pokemoneffektlist;
}, },
getStandardAttacken: function (pokedexid)
{
pokemonstandardattackenliste = [];
var query = "SELECT * FROM tblPokemonStandardAttacken WHERE POKEDEXID= ?";
// Execute query statement from query variable.
$cordovaSQLite.execute(db, query,[pokedexid]).then(function (res)
{
if (res.rows.length > 0)
{
for (var i = 0; i < res.rows.length; i++)
{
var dataItem = {
pokemonattacke : res.rows.item(i).ATTACKE ,
pokemonattacketyp : res.rows.item(i).TYP ,
pokemonattacketyptext : pokemontypen[res.rows.item(i).TYP] ,
pokemonattackestaerke : res.rows.item(i).STAERKE ,
pokemonattackeenergie : res.rows.item(i).ENERGIE ,
pokemonattackedauer : res.rows.item(i).DAUER
};
pokemonstandardattackenliste.push(dataItem);
}
}
});
return pokemonstandardattackenliste;
},
// To add data to sqlite. // To add data to sqlite.
// It will receive newContract from controller then insert it into sqlite. // It will receive newContract from controller then insert it into sqlite.
add: function (newContract) add: function (newContract)