FRMDP · agilesrivas · Nov 28, 2018
diff --git a/gilesrivasfinal/README.md b/gilesrivasfinal/README.md
@@ -0,0 +1,26 @@
+# gilesrivasfinal
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Run your tests
+```
+npm run test
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
diff --git a/gilesrivasfinal/babel.config.js b/gilesrivasfinal/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/app'
+  ]
+}
diff --git a/gilesrivasfinal/package-lock.json b/gilesrivasfinal/package-lock.json
diff --git a/gilesrivasfinal/package.json b/gilesrivasfinal/package.json
@@ -0,0 +1,57 @@
+{
+  "name": "gilesrivasfinal",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "axios": "^0.18.0",
+    "bootstrap-vue": "^2.0.0-rc.11",
+    "element-ui": "^2.4.10",
+    "material-design-icons-iconfont": "^4.0.2",
+    "vue": "^2.5.17",
+    "vue-router": "^3.0.1",
+    "vuetify": "^1.3.8",
+    "vuex": "^3.0.1"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^3.0.4",
+    "@vue/cli-plugin-eslint": "^3.0.4",
+    "@vue/cli-service": "^3.0.4",
+    "babel-eslint": "^10.0.1",
+    "eslint": "^5.8.0",
+    "eslint-plugin-vue": "^5.0.0-0",
+    "stylus": "^0.54.5",
+    "stylus-loader": "^3.0.1",
+    "vue-cli-plugin-vuetify": "^0.4.6",
+    "vue-template-compiler": "^2.5.17",
+    "vuetify-loader": "^1.0.5"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "rules": {},
+    "parserOptions": {
+      "parser": "babel-eslint"
+    }
+  },
+  "postcss": {
+    "plugins": {
+      "autoprefixer": {}
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}
diff --git a/gilesrivasfinal/public/favicon.ico b/gilesrivasfinal/public/favicon.ico
diff --git a/gilesrivasfinal/public/index.html b/gilesrivasfinal/public/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>logo.jpg">
+    <style>
+      .body-poke{
+        margin: 0;
+        padding: 0;
+        background-color:#0d0630;
+
+      }
+    </style>
+    <title>PokeProg</title>
+    <link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Indie+Flower" rel="stylesheet">     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
+  </head>
+  <body class="body-poke">
+    <noscript>
+      <strong>We're sorry but gilesrivasfinal doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+  <div id="app" ></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/gilesrivasfinal/public/logo.jpg b/gilesrivasfinal/public/logo.jpg
diff --git a/gilesrivasfinal/src/App.vue b/gilesrivasfinal/src/App.vue
@@ -0,0 +1,18 @@
+<template>
+  <div id="app">
+         <router-view></router-view>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'app',
+  components: {
+  }
+}
+</script>
+
+<style scoped>
+
+
+</style>
diff --git a/gilesrivasfinal/src/assets/images/1.jpg b/gilesrivasfinal/src/assets/images/1.jpg
diff --git a/gilesrivasfinal/src/assets/images/Pokebola-pokeball.png b/gilesrivasfinal/src/assets/images/Pokebola-pokeball.png
diff --git a/gilesrivasfinal/src/assets/images/Pokemon.jpg b/gilesrivasfinal/src/assets/images/Pokemon.jpg
diff --git a/gilesrivasfinal/src/assets/images/Pokemon.png b/gilesrivasfinal/src/assets/images/Pokemon.png
diff --git a/gilesrivasfinal/src/assets/images/Ruta_3_Unova.png b/gilesrivasfinal/src/assets/images/Ruta_3_Unova.png
diff --git a/gilesrivasfinal/src/assets/images/ash.png b/gilesrivasfinal/src/assets/images/ash.png
diff --git a/gilesrivasfinal/src/assets/images/indice.jpg b/gilesrivasfinal/src/assets/images/indice.jpg
diff --git a/gilesrivasfinal/src/assets/images/logo.jpg b/gilesrivasfinal/src/assets/images/logo.jpg
diff --git a/gilesrivasfinal/src/assets/images/pikapika.png b/gilesrivasfinal/src/assets/images/pikapika.png
diff --git a/gilesrivasfinal/src/assets/logo.png b/gilesrivasfinal/src/assets/logo.png
diff --git a/gilesrivasfinal/src/assets/logo.svg b/gilesrivasfinal/src/assets/logo.svg
diff --git a/gilesrivasfinal/src/assets/pikachu.jpg b/gilesrivasfinal/src/assets/pikachu.jpg
diff --git a/gilesrivasfinal/src/assets/pokemon.jpg b/gilesrivasfinal/src/assets/pokemon.jpg
diff --git a/gilesrivasfinal/src/components/Header_Poke.vue b/gilesrivasfinal/src/components/Header_Poke.vue
@@ -0,0 +1,48 @@
+<template>
+    <el-row>
+        <el-col :span="24">
+        <header>
+            <img id="headerPoke" src="../assets/images/Pokemon.png" alt="">
+        </header> 
+        <el-menu  class="el-menu-demo el-menu-poke" mode="horizontal"  >
+        <el-menu-item index="0" @click="$router.push({name:'home'})">Home</el-menu-item>
+        <el-submenu index="1" @click="$router.push({name:'market'})">
+            <template slot="title">Market</template>
+            <el-menu-item index="2" @click="$router.push({name:'berries'})">Berries</el-menu-item>
+            <el-menu-item index="3" @click="$router.push({name:'items'})">Items</el-menu-item>
+        </el-submenu>
+        <el-menu-item index="4" @click="$router.push({name:'habitats'})" >Habitat</el-menu-item>
+        <el-menu-item index="/perfil" disabled >Perfil</el-menu-item>
+        <el-menu-item index="5" @click="$router.push({name:'games'})" >Games</el-menu-item>
+        <el-menu-item index="/newGame" disabled >New Game</el-menu-item>
+        <el-menu-item index="6" @click="$router.push({name:'backpack'})" >BackPack</el-menu-item>
+        <el-menu-item index="8"><a href="https://pokeapi.co/docs/v2.html/" target="_blank">PokeApi</a></el-menu-item>
+        </el-menu>
+    </el-col>
+    </el-row>
+
+</template>
+
+<script>
+    export default {
+        data(){
+            return {
+                activeIndex:true
+            }
+        },
+        methods:{
+
+
+        }
+    }
+</script>
+
+<style scoped>
+#headerPoke{
+  width: 100%;
+  height:180px;
+}
+.el-menu-poke{
+    background:black;
+}
+</style>
diff --git a/gilesrivasfinal/src/components/Login_Poke.vue b/gilesrivasfinal/src/components/Login_Poke.vue
@@ -0,0 +1,88 @@
+<template>
+      <el-card class="box-card">
+            <div slot="header" class="clearfix header-poke-image">
+                <img src="../assets/images/logo.jpg" height="120" width="200" alt="">
+            </div>
+           <el-form  :model="user" :label-position="positionLabel" label-width="100px">
+            <el-form-item   label="Username">
+                <el-input type="text" v-model="user.username" placeholder="Enter your Username" autocomplete="off"></el-input>
+            </el-form-item>
+            <el-form-item  label="Password">
+                <el-input  type="password" v-model="user.password" placeholder="Enter your Password"  autocomplete="off"></el-input>
+            </el-form-item>
+            <el-form-item>
+                <el-button class="button-poke" type="primary" :loading="loading" @click="login()">Login</el-button>
+            </el-form-item>
+        </el-form>
+      </el-card>
+</template>
+
+<script>
+import AuthService from '../services/AuthService';
+    export default {
+        name:'LoginPoke',
+        data(){
+            return{
+               user:{
+                   username:'',
+                    password:''
+               },
+               loading:false,
+               positionLabel:'top'
+
+            }
+        },
+        computed:{
+
+        },
+        methods:{
+            login(){
+                this.loading=true;
+                AuthService.login(this.user.username,this.user.password)
+                .then((token)=>{
+
+                    this.$store.commit('setToken', token);
+                    this.loading=false;
+                    this.$router.push({name:'home'});
+                })
+                .catch((error)=>{
+                    console.log(error);
+
+                })
+
+
+            }
+        },
+
+    }
+</script>
+
+<style scoped>
+.button-poke{
+    width: 80%;
+    margin-left: 10%;
+}
+.text {
+        font-family: 'Abril Fatface', cursive;
+
+  }
+
+  .header-poke-image{
+      text-align: center;
+  }
+
+  .clearfix:before,
+  .clearfix:after {
+    display: table;
+    content: "";
+  }
+  .clearfix:after {
+    clear: both
+  }
+ .box-card {
+    height: auto;
+    width: 500px;
+    margin-left: 28%;
+    margin-top: 3%;
+  }
+</style>
diff --git a/gilesrivasfinal/src/components/cards/Card_Poke.vue b/gilesrivasfinal/src/components/cards/Card_Poke.vue
@@ -0,0 +1,77 @@
+<template>  
+<el-col :span="6" class="col-rancho-card">
+  <el-card v-if="active">
+    <div slot="header">
+      <span class="text-poke">{{poke.name}}</span>
+        <el-button @click="capture(poke)" style="float: right; padding: 1px 0" ><img src="../../assets/images/Pokebola-pokeball.png" class="image-poke-button"></el-button>
+    </div>
+      <el-card>
+        <img :src="poke.sprites.front_default" class="image">
+        <div style="padding: 14px;">
+          <span>Experiencia: {{poke.experience}}</span>
+          <br>
+          <span>Tipos</span>
+          <div class="bottom clearfix" v-for="(i,type) in poke.types" :key="type">
+            <span>{{i.type.name}}</span>
+          </div>
+        </div>
+      </el-card>
+    </el-card>
+    <el-button v-else @click="changeCard" class="poke-card">
+      <img src="../../assets/images/indice.jpg" class="image">
+    </el-button>
+  </el-col>
+</template>
+
+<script>
+import ApplicationPokemon from "../../services/ApplicationServiceStorage.js";
+export default {
+  name: "CardPoke",
+  props: ["poke"],
+  data() {
+    return {
+      active: false
+    };
+  },
+  methods: {
+    changeCard() {
+      this.active = true;
+    },
+    capture(poke) {
+      ApplicationPokemon.create(poke)
+        .then(response => {
+          console.log(response);
+        })
+        .catch(error => {});
+    }
+  },
+  mounted() {
+
+  }
+};
+</script>
+
+<style>
+
+.back-poke{
+  background:tan;
+}
+.text-poke {
+  text-align: center;
+}
+.poke-card {
+  padding: 0;
+  width:80%;
+  justify-content:center;
+  height: 80%;
+  margin-top:10px;
+}
+.image {
+  width: 100%;
+  height: 100%;
+}
+.image-poke-button {
+  width: 25px;
+  height: 25px;
+}
+</style>