Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
1 contributor

Users who have contributed to this file

314 lines (260 sloc) 13.6 KB
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<v-app>
<v-content>
<v-container>
<v-layout align-center justify-center>
<v-flex xs6>
<v-select :items="breeds"
item-text="name"
v-model="selected_breed"
label="Breeds"
return-object
attach></v-select>
</v-flex>
</v-layout>
<v-layout>
<v-flex xs12 sm8 offset-sm2>
<v-card>
<v-carousel>
<v-carousel-item
v-for="(item,i) in images"
:key="i"
:src="item.url"
></v-carousel-item>
</v-carousel>
<v-card-title primary-title>
<div class="text-xs-center">
<v-chip>
<v-avatar>
<img :src="country_flag_url" :alt="selected_breed.country_code">
</v-avatar>
{{selected_breed.origin}}</v-chip>
<v-chip v-if="selected_breed.experimental==1">Experimental</v-chip>
<v-chip v-if="selected_breed.rex==1">Rex</v-chip>
<v-chip v-if="selected_breed.natural==1">Natural</v-chip>
<v-chip v-if="selected_breed.rare==1">Rare</v-chip>
<v-chip v-if="selected_breed.hairless==1">Hairless</v-chip>
<v-chip v-if="selected_breed.suppressed_tail==1">Suppressed Tail</v-chip>
<v-chip v-if="selected_breed.short_legs==1">Short Legs</v-chip>
<v-chip v-if="selected_breed.hypoallergenic==1">Hypoallergenic</v-chip>
</div>
<div>
<h3 class="headline mb-0">{{selected_breed.name}}</h3>
<div>{{selected_breed.description}}</div>
<div>---</div>
<div><i>{{selected_breed.temperament}}</i></div>
</div>
</v-card-title>
<v-list>
<v-list-tile @click="">
<v-list-tile-content>
Affection Level
</v-list-tile-content>
<v-list-tile-action>
<v-rating
v-model="selected_breed.affection_level "
readonly
size="18"
></v-rating>
</v-list-tile>
<v-list-tile>
<v-list-tile-content>
Adaptability
</v-list-tile-content>
<v-list-tile-action>
<v-rating
v-model="selected_breed.adaptability "
readonly
size="18"
></v-rating>
</v-list-tile>
<v-list-tile>
<v-list-tile-content>
Child Friendly
</v-list-tile-content>
<v-list-tile-action>
<v-rating
v-model="selected_breed.child_friendly "
readonly
size="18"
></v-rating>
</v-list-tile>
<v-list-tile>
<v-list-tile-content>
Dog Friendly
</v-list-tile-content>
<v-list-tile-action>
<v-rating
v-model="selected_breed.dog_friendly "
readonly
size="18"
></v-rating>
</v-list-tile>
<v-list-tile>
<v-list-tile-content>
Energy Level
</v-list-tile-content>
<v-list-tile-action>
<v-rating
v-model="selected_breed.energy_level "
readonly
size="18"
></v-rating>
</v-list-tile>
<v-list-tile>
<v-list-tile-content>
Grooming
</v-list-tile-content>
<v-list-tile-action>
<v-rating
v-model="selected_breed.grooming "
readonly
size="18"
></v-rating>
</v-list-tile>
<v-list-tile>
<v-list-tile-content>
Health Issues
</v-list-tile-content>
<v-list-tile-action>
<v-rating
v-model="selected_breed.health_issues "
readonly
size="18"
></v-rating>
</v-list-tile>
<v-list-tile>
<v-list-tile-content>
Intelligence
</v-list-tile-content>
<v-list-tile-action>
<v-rating
v-model="selected_breed.intelligence "
readonly
size="18"
></v-rating>
</v-list-tile>
<v-list-tile>
<v-list-tile-content>
Shedding Level
</v-list-tile-content>
<v-list-tile-action>
<v-rating
v-model="selected_breed.shedding_level "
readonly
size="18"
></v-rating>
</v-list-tile>
<v-list-tile>
<v-list-tile-content>
Social Needs
</v-list-tile-content>
<v-list-tile-action>
<v-rating
v-model="selected_breed.social_needs "
readonly
size="18"
></v-rating>
</v-list-tile>
<v-list-tile>
<v-list-tile-content>
Stranger Friendly
</v-list-tile-content>
<v-list-tile-action>
<v-rating
v-model="selected_breed.stranger_friendly "
readonly
size="18"
></v-rating>
</v-list-tile>
<v-list-tile>
<v-list-tile-content>
Vocalisation
</v-list-tile-content>
<v-list-tile-action>
<v-rating
v-model="selected_breed.vocalisation "
readonly
size="18"
></v-rating>
</v-list-tile>
</v-list>
<v-card-actions>
<v-btn :href="selected_breed.wikipedia_url" target="_blank" flat color="orange">Wikipedia</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-content>
</v-app>
</div>
<script>
new Vue({
el: '#app',
data: {
country_flag_url:"",
images: [],
breeds:[],
selected_breed: {},
current_image: {}
},
created(){
this.getBreeds();
} ,
watch: {
selected_breed: function()
{
console.log(this.selected_breed)
let country_code = this.selected_breed.country_code.toLowerCase();
this.country_flag_url = `https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.2.1/flags/1x1/${country_code}.svg`;
this.getImages();
}
},
methods:{
async getBreeds()
{
try{
axios.defaults.headers.common['x-api-key'] = "DEMO-API-KEY" // Replace this with your API Key, as it's set to defaults it will be used from now onwards
let response = await axios.get('https://api.thecatapi.com/v1/breeds/' )
this.breeds = response.data;
console.log("-- ("+this.breeds.length +") Breeds from TheCatAPI.com")
// pick one to display initially
this.selected_breed = this.breeds[10]
}catch(err){
console.log(err)
}
},
async getImages()
{
try{
let query_params = {
breed_ids: this.selected_breed.id,
limit:8
}
let response = await axios.get('https://api.thecatapi.com/v1/images/search', { params: query_params} )
this.pagination_count = response.headers['pagination-count'];
this.images = response.data
this.current_image = this.images[0]
console.log("-- ("+this.images.length +") Images from TheCatAPI.com")
console.log( this.pagination_count ,'images available for this query.')
}catch(err){
console.log(err)
}
}
}
})
</script>
</body>
</html>
You can’t perform that action at this time.