55 lines
1.2 KiB
Vue
55 lines
1.2 KiB
Vue
<template>
|
|
<div v-if="wines.length > 0">
|
|
<h3>Viner</h3>
|
|
<ol>
|
|
<li v-for="wine in wines">
|
|
<span v-if="wine.vivinoLink == '' || wine.vivinoLink == null"
|
|
>{{ wine.name }} - sett {{ wine.occurences }} ganger,
|
|
{{ wine.rating }} i rating</span
|
|
>
|
|
<a
|
|
:href="wine.vivinoLink"
|
|
v-if="wine.vivinoLink != '' && wine.vivinoLink != null"
|
|
>{{ wine.name }} - sett {{ wine.occurences }} ganger,
|
|
{{ wine.rating }} i rating</a
|
|
>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return { wines: [] };
|
|
},
|
|
async mounted() {
|
|
let _response = await fetch("/api/wines/statistics");
|
|
let response = await _response.json();
|
|
|
|
response.sort();
|
|
response = response
|
|
.filter(wine => wine.name != null && wine.name != "")
|
|
.sort((a, b) => (a.occurences > b.occurences ? -1 : 1));
|
|
this.wines = response;
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
h3 {
|
|
text-align: center;
|
|
}
|
|
div {
|
|
margin: 15px 0 0 0;
|
|
font-family: "knowit";
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: orange;
|
|
}
|
|
</style>
|