This commit is contained in:
@@ -1,84 +1,11 @@
|
||||
<template>
|
||||
<v-container>
|
||||
<v-layout
|
||||
text-xs-center
|
||||
wrap
|
||||
>
|
||||
<v-layout text-xs-center wrap="">
|
||||
<v-flex xs12>
|
||||
<v-img
|
||||
:src="require('../assets/logo.svg')"
|
||||
class="my-3"
|
||||
contain
|
||||
height="200"
|
||||
></v-img>
|
||||
<v-img :src="require('../assets/logo.svg')" class="my-3" contain height="200"></v-img>
|
||||
</v-flex>
|
||||
|
||||
<v-flex mb-4>
|
||||
<h1 class="display-2 font-weight-bold mb-3">
|
||||
Welcome to AyaNova
|
||||
</h1>
|
||||
<p class="subheading font-weight-regular">
|
||||
For help and collaboration with other Vuetify developers,
|
||||
<br>please join our online
|
||||
<a href="https://community.vuetifyjs.com" target="_blank">Discord Community</a>
|
||||
</p>
|
||||
</v-flex>
|
||||
|
||||
<v-flex
|
||||
mb-5
|
||||
xs12
|
||||
>
|
||||
<h2 class="headline font-weight-bold mb-3">What's next?</h2>
|
||||
|
||||
<v-layout justify-center>
|
||||
<a
|
||||
v-for="(next, i) in whatsNext"
|
||||
:key="i"
|
||||
:href="next.href"
|
||||
class="subheading mx-3"
|
||||
target="_blank"
|
||||
>
|
||||
{{ next.text }}
|
||||
</a>
|
||||
</v-layout>
|
||||
</v-flex>
|
||||
|
||||
<v-flex
|
||||
xs12
|
||||
mb-5
|
||||
>
|
||||
<h2 class="headline font-weight-bold mb-3">Important Links</h2>
|
||||
|
||||
<v-layout justify-center>
|
||||
<a
|
||||
v-for="(link, i) in importantLinks"
|
||||
:key="i"
|
||||
:href="link.href"
|
||||
class="subheading mx-3"
|
||||
target="_blank"
|
||||
>
|
||||
{{ link.text }}
|
||||
</a>
|
||||
</v-layout>
|
||||
</v-flex>
|
||||
|
||||
<v-flex
|
||||
xs12
|
||||
mb-5
|
||||
>
|
||||
<h2 class="headline font-weight-bold mb-3">Ecosystem</h2>
|
||||
|
||||
<v-layout justify-center>
|
||||
<a
|
||||
v-for="(eco, i) in ecosystem"
|
||||
:key="i"
|
||||
:href="eco.href"
|
||||
class="subheading mx-3"
|
||||
target="_blank"
|
||||
>
|
||||
{{ eco.text }}
|
||||
</a>
|
||||
</v-layout>
|
||||
<h1 class="display-2 font-weight-bold mb-3">Welcome to AyaNova</h1>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
@@ -86,58 +13,7 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
ecosystem: [
|
||||
{
|
||||
text: "vuetify-loader",
|
||||
href: "https://github.com/vuetifyjs/vuetify-loader"
|
||||
},
|
||||
{
|
||||
text: "github",
|
||||
href: "https://github.com/vuetifyjs/vuetify"
|
||||
},
|
||||
{
|
||||
text: "awesome-vuetify",
|
||||
href: "https://github.com/vuetifyjs/awesome-vuetify"
|
||||
}
|
||||
],
|
||||
importantLinks: [
|
||||
{
|
||||
text: "Documentation",
|
||||
href: "https://vuetifyjs.com"
|
||||
},
|
||||
{
|
||||
text: "Chat",
|
||||
href: "https://community.vuetifyjs.com"
|
||||
},
|
||||
{
|
||||
text: "Made with Vuetify",
|
||||
href: "https://madewithvuetifyjs.com"
|
||||
},
|
||||
{
|
||||
text: "Twitter",
|
||||
href: "https://twitter.com/vuetifyjs"
|
||||
},
|
||||
{
|
||||
text: "Articles",
|
||||
href: "https://medium.com/vuetify"
|
||||
}
|
||||
],
|
||||
whatsNext: [
|
||||
{
|
||||
text: "Explore components",
|
||||
href: "https://vuetifyjs.com/components/api-explorer"
|
||||
},
|
||||
{
|
||||
text: "Select a layout",
|
||||
href: "https://vuetifyjs.com/layout/pre-defined"
|
||||
},
|
||||
{
|
||||
text: "Frequently Asked Questions",
|
||||
href: "https://vuetifyjs.com/getting-started/frequently-asked-questions"
|
||||
}
|
||||
]
|
||||
})
|
||||
data: () => ({})
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
203
app/ayanova/src/components/desertlist.vue
Normal file
203
app/ayanova/src/components/desertlist.vue
Normal file
@@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="desserts"
|
||||
:pagination.sync="pagination"
|
||||
:total-items="totalDesserts"
|
||||
:loading="loading"
|
||||
class="elevation-1"
|
||||
>
|
||||
<template slot="items" slot-scope="props">
|
||||
<td>{{ props.item.name }}</td>
|
||||
<td class="text-xs-right">{{ props.item.calories }}</td>
|
||||
<td class="text-xs-right">{{ props.item.fat }}</td>
|
||||
<td class="text-xs-right">{{ props.item.carbs }}</td>
|
||||
<td class="text-xs-right">{{ props.item.protein }}</td>
|
||||
<td class="text-xs-right">{{ props.item.iron }}</td>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
totalDesserts: 0,
|
||||
desserts: [],
|
||||
loading: true,
|
||||
pagination: {},
|
||||
headers: [
|
||||
{
|
||||
text: "Dessert (100g serving)",
|
||||
align: "left",
|
||||
sortable: false,
|
||||
value: "name"
|
||||
},
|
||||
{ text: "Calories", value: "calories" },
|
||||
{ text: "Fat (g)", value: "fat" },
|
||||
{ text: "Carbs (g)", value: "carbs" },
|
||||
{ text: "Protein (g)", value: "protein" },
|
||||
{ text: "Iron (%)", value: "iron" }
|
||||
]
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
pagination: {
|
||||
handler() {
|
||||
this.getDataFromApi().then(data => {
|
||||
this.desserts = data.items;
|
||||
this.totalDesserts = data.total;
|
||||
});
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getDataFromApi().then(data => {
|
||||
this.desserts = data.items;
|
||||
this.totalDesserts = data.total;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
getDataFromApi() {
|
||||
this.loading = true;
|
||||
return new Promise((resolve, reject) => {
|
||||
const { sortBy, descending, page, rowsPerPage } = this.pagination;
|
||||
|
||||
let items = this.getDesserts();
|
||||
const total = items.length;
|
||||
|
||||
if (this.pagination.sortBy) {
|
||||
items = items.sort((a, b) => {
|
||||
const sortA = a[sortBy];
|
||||
const sortB = b[sortBy];
|
||||
|
||||
if (descending) {
|
||||
if (sortA < sortB) return 1;
|
||||
if (sortA > sortB) return -1;
|
||||
return 0;
|
||||
} else {
|
||||
if (sortA < sortB) return -1;
|
||||
if (sortA > sortB) return 1;
|
||||
return 0;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (rowsPerPage > 0) {
|
||||
items = items.slice((page - 1) * rowsPerPage, page * rowsPerPage);
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
resolve({
|
||||
items,
|
||||
total
|
||||
});
|
||||
}, 1000);
|
||||
});
|
||||
},
|
||||
getDesserts() {
|
||||
return [
|
||||
{
|
||||
value: false,
|
||||
name: "Frozen Yogurt",
|
||||
calories: 159,
|
||||
fat: 6.0,
|
||||
carbs: 24,
|
||||
protein: 4.0,
|
||||
iron: "1%"
|
||||
},
|
||||
{
|
||||
value: false,
|
||||
name: "Ice cream sandwich",
|
||||
calories: 237,
|
||||
fat: 9.0,
|
||||
carbs: 37,
|
||||
protein: 4.3,
|
||||
iron: "1%"
|
||||
},
|
||||
{
|
||||
value: false,
|
||||
name: "Eclair",
|
||||
calories: 262,
|
||||
fat: 16.0,
|
||||
carbs: 23,
|
||||
protein: 6.0,
|
||||
iron: "7%"
|
||||
},
|
||||
{
|
||||
value: false,
|
||||
name: "Cupcake",
|
||||
calories: 305,
|
||||
fat: 3.7,
|
||||
carbs: 67,
|
||||
protein: 4.3,
|
||||
iron: "8%"
|
||||
},
|
||||
{
|
||||
value: false,
|
||||
name: "Gingerbread",
|
||||
calories: 356,
|
||||
fat: 16.0,
|
||||
carbs: 49,
|
||||
protein: 3.9,
|
||||
iron: "16%"
|
||||
},
|
||||
{
|
||||
value: false,
|
||||
name: "Jelly bean",
|
||||
calories: 375,
|
||||
fat: 0.0,
|
||||
carbs: 94,
|
||||
protein: 0.0,
|
||||
iron: "0%"
|
||||
},
|
||||
{
|
||||
value: false,
|
||||
name: "Lollipop",
|
||||
calories: 392,
|
||||
fat: 0.2,
|
||||
carbs: 98,
|
||||
protein: 0,
|
||||
iron: "2%"
|
||||
},
|
||||
{
|
||||
value: false,
|
||||
name: "Honeycomb",
|
||||
calories: 408,
|
||||
fat: 3.2,
|
||||
carbs: 87,
|
||||
protein: 6.5,
|
||||
iron: "45%"
|
||||
},
|
||||
{
|
||||
value: false,
|
||||
name: "Donut",
|
||||
calories: 452,
|
||||
fat: 25.0,
|
||||
carbs: 51,
|
||||
protein: 4.9,
|
||||
iron: "22%"
|
||||
},
|
||||
{
|
||||
value: false,
|
||||
name: "KitKat",
|
||||
calories: 518,
|
||||
fat: 26.0,
|
||||
carbs: 65,
|
||||
protein: 7,
|
||||
iron: "6%"
|
||||
}
|
||||
];
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
</style>
|
||||
257
app/ayanova/src/components/widgetlist.vue
Normal file
257
app/ayanova/src/components/widgetlist.vue
Normal file
@@ -0,0 +1,257 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="desserts"
|
||||
:pagination.sync="pagination"
|
||||
:total-items="totalDesserts"
|
||||
:loading="loading"
|
||||
class="elevation-1"
|
||||
>
|
||||
<template slot="items" slot-scope="props">
|
||||
<td>{{ props.item.name }}</td>
|
||||
<td class="text-xs-right">{{ props.item.calories }}</td>
|
||||
<td class="text-xs-right">{{ props.item.fat }}</td>
|
||||
<td class="text-xs-right">{{ props.item.carbs }}</td>
|
||||
<td class="text-xs-right">{{ props.item.protein }}</td>
|
||||
<td class="text-xs-right">{{ props.item.iron }}</td>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
totalDesserts: 0,
|
||||
desserts: [],
|
||||
loading: true,
|
||||
pagination: {},
|
||||
headers: [
|
||||
{
|
||||
text: "Dessert (100g serving)",
|
||||
align: "left",
|
||||
sortable: false,
|
||||
value: "name"
|
||||
},
|
||||
{ text: "Calories", value: "calories" },
|
||||
{ text: "Fat (g)", value: "fat" },
|
||||
{ text: "Carbs (g)", value: "carbs" },
|
||||
{ text: "Protein (g)", value: "protein" },
|
||||
{ text: "Iron (%)", value: "iron" }
|
||||
]
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
pagination: {
|
||||
handler() {
|
||||
this.getDataFromApi().then(data => {
|
||||
this.desserts = data.items;
|
||||
this.totalDesserts = data.total;
|
||||
});
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getDataFromApi().then(data => {
|
||||
this.desserts = data.items;
|
||||
this.totalDesserts = data.total;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
getDataFromApi() {
|
||||
this.loading = true;
|
||||
return new Promise((resolve, reject) => {
|
||||
const { sortBy, descending, page, rowsPerPage } = this.pagination;
|
||||
|
||||
let items = this.getDesserts();
|
||||
const total = items.length;
|
||||
|
||||
if (this.pagination.sortBy) {
|
||||
items = items.sort((a, b) => {
|
||||
const sortA = a[sortBy];
|
||||
const sortB = b[sortBy];
|
||||
|
||||
if (descending) {
|
||||
if (sortA < sortB) return 1;
|
||||
if (sortA > sortB) return -1;
|
||||
return 0;
|
||||
} else {
|
||||
if (sortA < sortB) return -1;
|
||||
if (sortA > sortB) return 1;
|
||||
return 0;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (rowsPerPage > 0) {
|
||||
items = items.slice((page - 1) * rowsPerPage, page * rowsPerPage);
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
resolve({
|
||||
items,
|
||||
total
|
||||
});
|
||||
}, 1000);
|
||||
});
|
||||
},
|
||||
getDesserts() {
|
||||
return [
|
||||
{
|
||||
value: false,
|
||||
name: "Frozen Yogurt",
|
||||
calories: 159,
|
||||
fat: 6.0,
|
||||
carbs: 24,
|
||||
protein: 4.0,
|
||||
iron: "1%"
|
||||
},
|
||||
{
|
||||
value: false,
|
||||
name: "Ice cream sandwich",
|
||||
calories: 237,
|
||||
fat: 9.0,
|
||||
carbs: 37,
|
||||
protein: 4.3,
|
||||
iron: "1%"
|
||||
},
|
||||
{
|
||||
value: false,
|
||||
name: "Eclair",
|
||||
calories: 262,
|
||||
fat: 16.0,
|
||||
carbs: 23,
|
||||
protein: 6.0,
|
||||
iron: "7%"
|
||||
},
|
||||
{
|
||||
value: false,
|
||||
name: "Cupcake",
|
||||
calories: 305,
|
||||
fat: 3.7,
|
||||
carbs: 67,
|
||||
protein: 4.3,
|
||||
iron: "8%"
|
||||
},
|
||||
{
|
||||
value: false,
|
||||
name: "Gingerbread",
|
||||
calories: 356,
|
||||
fat: 16.0,
|
||||
carbs: 49,
|
||||
protein: 3.9,
|
||||
iron: "16%"
|
||||
},
|
||||
{
|
||||
value: false,
|
||||
name: "Jelly bean",
|
||||
calories: 375,
|
||||
fat: 0.0,
|
||||
carbs: 94,
|
||||
protein: 0.0,
|
||||
iron: "0%"
|
||||
},
|
||||
{
|
||||
value: false,
|
||||
name: "Lollipop",
|
||||
calories: 392,
|
||||
fat: 0.2,
|
||||
carbs: 98,
|
||||
protein: 0,
|
||||
iron: "2%"
|
||||
},
|
||||
{
|
||||
value: false,
|
||||
name: "Honeycomb",
|
||||
calories: 408,
|
||||
fat: 3.2,
|
||||
carbs: 87,
|
||||
protein: 6.5,
|
||||
iron: "45%"
|
||||
},
|
||||
{
|
||||
value: false,
|
||||
name: "Donut",
|
||||
calories: 452,
|
||||
fat: 25.0,
|
||||
carbs: 51,
|
||||
protein: 4.9,
|
||||
iron: "22%"
|
||||
},
|
||||
{
|
||||
value: false,
|
||||
name: "KitKat",
|
||||
calories: 518,
|
||||
fat: 26.0,
|
||||
carbs: 65,
|
||||
protein: 7,
|
||||
iron: "6%"
|
||||
}
|
||||
];
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
||||
//Example api response
|
||||
// {
|
||||
// "data": [
|
||||
// {
|
||||
// "id": 1,
|
||||
// "concurrencyToken": 2262471,
|
||||
// "ownerId": 1,
|
||||
// "name": "Handcrafted Wooden Bacon 23",
|
||||
// "serial": 1,
|
||||
// "dollarAmount": 25.42,
|
||||
// "active": true,
|
||||
// "roles": 8212,
|
||||
// "startDate": "2018-11-19T12:20:42.920058",
|
||||
// "endDate": "2018-11-19T15:37:47.053849",
|
||||
// "notes": "Voluptas assumenda laudantium nemo cupiditate. Quia voluptatem reiciendis et. Sit non error est. Tenetur provident nostrum. Voluptatem voluptatem et."
|
||||
// },
|
||||
// {
|
||||
// "id": 2,
|
||||
// "concurrencyToken": 2262494,
|
||||
// "ownerId": 1,
|
||||
// "name": "Ergonomic Soft Gloves 24",
|
||||
// "serial": 2,
|
||||
// "dollarAmount": 530.39,
|
||||
// "active": true,
|
||||
// "roles": 8212,
|
||||
// "startDate": "2018-11-19T12:17:32.488013",
|
||||
// "endDate": "2018-11-19T17:01:18.425666",
|
||||
// "notes": "Sed rerum minima blanditiis est. Praesentium consequatur numquam nostrum voluptatem libero dolores voluptatem et. Aut et nobis consectetur voluptatem minus. Ipsa nemo non in iste adipisci voluptatem. Minus consequatur in accusantium."
|
||||
// },
|
||||
// {
|
||||
// "id": 3,
|
||||
// "concurrencyToken": 2262518,
|
||||
// "ownerId": 1,
|
||||
// "name": "Fantastic Metal Computer 25",
|
||||
// "serial": 3,
|
||||
// "dollarAmount": 494.3,
|
||||
// "active": true,
|
||||
// "roles": 8212,
|
||||
// "startDate": "2018-11-19T13:06:47.437006",
|
||||
// "endDate": "2018-11-19T14:41:44.665721",
|
||||
// "notes": "Facere et ex. Ipsa aspernatur itaque maiores sint nulla esse incidunt. Architecto labore voluptatem dolore iusto ut."
|
||||
// }
|
||||
// ],
|
||||
// "paging": {
|
||||
// "count": 100,
|
||||
// "offset": 0,
|
||||
// "limit": 3,
|
||||
// "first": "http://localhost:7575/api/v8.0/Widget/ListWidgets?pageNo=1&pageSize=3",
|
||||
// "previous": null,
|
||||
// "next": "http://localhost:7575/api/v8.0/Widget/ListWidgets?pageNo=1&pageSize=3",
|
||||
// "last": "http://localhost:7575/api/v8.0/Widget/ListWidgets?pageNo=34&pageSize=3"
|
||||
// }
|
||||
// }
|
||||
Reference in New Issue
Block a user