keksAccountGUI/src/views/ListApps.vue

71 lines
2.2 KiB
Vue

<template>
<div style="">
<v-container grid-list-md>
<v-layout row wrap>
<v-flex md12>
<h1>Apps</h1>
<br><br>
<p>Here you can Administrate your apps</p>
</v-flex>
</v-layout>
<v-layout row wrap>
<v-flex md4 xs12 text-xs-center v-for="(item, index) in apps">
<v-card>
<v-layout>
<v-flex xs5>
<v-img
:src="getImageUrl(item.id)"
height="125px"
contain
></v-img>
</v-flex>
<v-flex xs7>
<v-card-title primary-title>
<div>
<div class="headline">{{ item.name }}</div>
<div>{{ item.description }}</div>
</div>
</v-card-title>
</v-flex>
</v-layout>
<v-divider light></v-divider>
<v-card-actions class="pa-3">
<v-spacer></v-spacer>
<v-btn icon>
<v-icon @click="$router.push({name: 'appDetails', params: {id: item.id}})">settings</v-icon>
</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
</div>
</template>
<script>
import AppService from '../services/Apps'
export default {
data () {
return {
apps: []
}
},
methods: {
getImageUrl: function(id) {
return AppService.getAppImage(id); // "https://account.keks.cloud/gui/apps/"+id+"/icon";
}
},
mounted: function() {
AppService.listApps().then((res) => {
this.apps = res.data.data;
console.log(this.apps);
});
}
}
</script>