Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
218 lines (199 sloc) 7.47 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-card>
<v-container>
<v-layout align-center justify-center>
<v-btn color="blue" dark large @click="getImages" >
<v-icon>refresh</v-icon> &nbsp; More Kitties
</v-btn>
</v-layout>
</v-container>
<v-container grid-list-sm fluid>
<v-layout row wrap>
<!-- for loop through the results from the API -->
<v-flex
v-for="n in images"
="n.id"
xs4
d-flex>
<v-layout>
<v-flex>
<v-card >
<v-img
:src="n.url"
lazy-src="https://picsum.photos/10/6"
height="400px"
contain
>
</v-img>
<v-card-actions>
<v-btn @click="favouriteImage(n.id)" flat dark color="green">Favourite </v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-flex>
</v-layout>
<v-alert v-show="error_message"
:value="true"
type="error"
>
{{error_message}}
</v-alert>
<v-card-title>
<h2>Demo Account Favourites</h2>
</v-card-title>
<v-layout row wrap>
<!-- for loop through the results from the API -->
<v-flex
v-for="n in favourites"
="n.id"
xs4
d-flex>
<v-layout>
<v-flex>
<v-card>
<v-img
:src="n.image.url"
height="200px"
contain
></v-img>
<v-card-title primary-title>
<div>
<div>Fav ID: {{ n.id }}</div>
<div>Image ID: {{n.image.id}}</div>
<div>sub_id: {{ n.sub_id }}</div>
<div>Created: {{ new Date(n.created_at).toLocaleString() }} </div><!-- convert timezone date/time to nice string-->
</div>
</v-card-title>
<v-card-actions>
<v-btn flat dark @click="deleteFavouriteImage(n.id)" color="red">Delete </v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-flex>
</v-layout>
<br>
<!-- Pagination control -->
<v-layout wrap align-center>
<v-flex xs11>
<v-card-title primary-title>
<div>Page</div>
</v-card-title>
<v-pagination xs9
v-model="page"
:length="getNumPages"
></v-pagination>
</v-flex>
</v-layout>
</v-container>
</v-card>
</v-content>
</v-app>
</div>
<script>
new Vue({
el: '#app',
data: {
images: [],
favourites:[],
page: 1,
error_message:null,
limit: 3,
pagination_count: 0, //default until we get a result with the 'Pagination-Count' header in the response
},
created(){
axios.defaults.headers.common['x-api-key'] = "DEMO-API-KEY" // Replace this with your API Key
this.getImages();
this.getFavourites()
} ,
watch: {
// if the user changes any of these values, then make a new request to the API
page: function()
{
this.getFavourites();
},
},
computed:{
getNumPages: function()
{
return Math.floor(this.pagination_count / this.limit) | 0;
}
},
methods:{
async getImages()
{
try{
let query_params = {
limit: this.limit
}
let response = await axios.get('https://api.thecatapi.com/v1/images/search', { params: query_params } )
this.images = response.data
}catch(err){
console.log(err)
}
},
async getFavourites()
{
try{
let query_params = {
limit: this.limit,
order: 'DESC',
page: this.page-1,
}
let response = await axios.get('https://api.thecatapi.com/v1/favourites', { params: query_params } )
this.favourites = response.data
this.pagination_count = response.headers['pagination-count'];
this.clearError();
}catch(err){
console.log(err)
}
},
async favouriteImage(image_id)
{
try{
let post_body = {
image_id: image_id,
sub_id:"User-123"
}
let response = await axios.post('https://api.thecatapi.com/v1/favourites', post_body )
this.page = 1;
this.getFavourites()
}catch(error){
console.log(error)
this.error_message = error.response.data.message
}
},
async deleteFavouriteImage(favourite_id)//this is not the image id
{
try{
let response = await axios.delete('https://api.thecatapi.com/v1/favourites/'+favourite_id )
this.favourites = response.data
this.page = 1;
this.getFavourites()
}catch(err){
console.log(err)
}
},
async clearError()
{
this.error_message = null
}
}
})
</script>
</body>
</html>
You can’t perform that action at this time.