<template> <div class="model container"> <div v-if="isError" class="error"> <h1 class="title is-1">Error</h1> <h2 class="subtitle">Cant find model</h2> </div> <div v-else> <div class="columns box"> <div class="column is-two-thirds"> <h1 class="title is-1">{{model.name}}</h1> <h2 class="subtitle">{{model.shortDescription}}</h2> <b-taglist> <b-tag v-for="tag in model.tags" v-bind:key="tag.name" type="is-info">{{tag.name}}</b-tag> </b-taglist> </div> <div class="column infoColumn"> <h1 class="title is-4">{{model.vote}} votes <b-button size="is-small" icon-left="heart-outline" style="top:-2px"/></h1> <small>Author: </small><strong>{{model.author.username}}</strong> <br> <small>Added: </small><strong>{{new Date(model.addedDate).toLocaleDateString()}}</strong> <br> <small>Last modification: </small><strong>{{new Date(model.modificationDate).toLocaleDateString()}}</strong> <br> <br> <b-button type="is-primary" size="is-medium" icon-left="download" @click="downloadModel(model.id)"> Download model </b-button> <hr> <strong>{{model.customLayers.length}} customs layers</strong> <br> <template v-for="layer in model.customLayers"> <b-button class="customLayer" type="is-primary" icon-left="download" v-bind:key="layer.name" @click="downloadLayer(layer.id)"> Download {{layer.name}} </b-button> </template> </div> </div> <div class="box"> <b-tabs> <b-tab-item label="Read me"> <div class="content" v-html="compiledLongDescription"></div> </b-tab-item> <b-tab-item label="Layers"> </b-tab-item> </b-tabs> </div> <div class="box"> <Comments v-bind:comments="model.comments"/> </div> </div> <b-loading :is-full-page="false" :active.sync="isLoading"/> </div> </template> <script> import Comments from '@/components/Comments.vue' import marked from 'marked' export default { name: 'Model', components: { Comments }, data () { return { model: '', isError: false, isLoading: true } }, computed: { compiledLongDescription: function () { return marked(this.model.longDescription) } }, async mounted () { const id = this.$route.query.id this.model = await this.getModel(id) if (this.model == null) this.isError = true this.isLoading = false }, methods: { async getModel (id) { const url = this.$serverurl + 'models' + '?id=' + id const response = await fetch(url) try { return await response.json() } catch (error) { return null } }, downloadModel (id) { }, downloadLayer (id) { } } } </script> <style scoped> .model { padding: 25px; } .error { margin-top: 50px; text-align: center; } .customLayer { margin-top: 8px; } .infoColumn { border-left: 2px solid whitesmoke; } </style>