Model.vue

<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>