Recv/public/src/route/admin/CodeDetail.vue

<template>
  <div id="code">
    <div v-if="code !== null">
      <form class="pure-form pure-form-aligned">
        <fieldset>
          <div class="pure-control-group" v-if="code.id">
            <label for="codeId">{{ $t('admin.codes.detail.code') }}</label>
            <input id="codeId" type="text" readonly :value="code.id" class="pure-input-2-3">
          </div>
          <div class="pure-form-description" v-if="code.id">
            <div>{{ $t('admin.codes.detail.codeHint') }}</div>
            <a :href="getCodeUrl(code.id)" target="_blank">{{ getCodeUrl(code.id) }}</a>
          </div>

          <div class="pure-control-group" v-if="code.id">
            <label for="user">{{ $t('admin.codes.detail.owner') }}</label>
            <input id="user" type="text" readonly :value="code.username" class="pure-input-2-3">
          </div>

          <div class="pure-control-group" v-if="code.id">
            <label for="created">{{ $t('admin.codes.detail.created') }}</label>
            <input id="created" type="text" readonly :value="code.created | formatDateTime" class="pure-input-2-3">
          </div>

          <div class="pure-control-group">
            <label for="description">{{ $t('admin.codes.detail.description') }}</label>
            <input id="description" type="text" v-model="code.description" class="pure-input-2-3">
          </div>
          <div class="pure-form-description">
            {{ $t('admin.codes.detail.descriptionHint') }}
          </div>

          <!--
          <div class="pure-control-group">
            <label for="expiration">{{ $t('admin.codes.detail.expiration') }}</label>
            <input id="expiration" type="text" :value="code.expiration" class="pure-input-2-3">
          </div>
          -->

          <div class="pure-control-group">
            <label for="message">{{ $t('admin.codes.detail.message') }}</label>
            <textarea id="message" type="text" v-model="code.message" class="pure-input-2-3" rows="10"></textarea>
          </div>
          <div class="pure-form-description">
            {{ $t('admin.codes.detail.messageHint') }}
          </div>
          <div class="pure-form-description">
            <a href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet" target="_blank">Markdown Cheatsheet</a>
          </div>

          <div class="pure-controls">
            <button class="pure-button pure-button-primary" @click="save" :disabled="saving">{{ $t('admin.save') }} <fa icon="spinner" pulse v-if="saving"></fa></button>
            <router-link to="/admin/codes" class="pure-button">{{ $t('admin.cancel') }}</router-link>
          </div>
        </fieldset>
      </form>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import shared from '../../shared';

export default {
  data()
  {
    return {
      code: null,
      saving: false
    };
  },

  props: ['codeParam'],


  watch: {
    '$route' (to, from)
    {
      var self = this;
      self.checkCode();
    }
  },


  created()
  {
    var self = this;
    self.checkCode();
  },

  methods: {
    checkCode()
    {
      var self = this;

      if (self.codeParam)
      {
        axios.get('/admin/codes/' + encodeURIComponent(self.codeParam), {
          headers: {
            Authorization: 'Bearer ' + shared.adminToken
          }
        })
        .then((response) =>
        {
          self.code = response.data;
        })
        .catch((error) => { shared.$emit('apiError', error, this.$router) });
      }
      else
      {
        self.code = {
          expiration: null,
          message: null
        };
      }
    },

    getCodeUrl(code)
    {
      var port = ':' + window.location.port;

      if ((window.location.protocol == 'http:' && window.location.port == 80) ||
          (window.location.protocol == 'https:' && window.location.port == 443))
        port = '';

      return window.location.protocol + '//' +
             window.location.hostname + port + '/c/' +
             encodeURIComponent(code);
    },

    save()
    {
      var self = this;

      self.saving = true;

      axios.post('/admin/codes', {
        id: self.code.id,
        expiration: self.code.expiration,
        description: self.code.description,
        message: self.code.message
      }, {
        headers: {
          Authorization: 'Bearer ' + shared.adminToken
        }
      })
      .then((response) =>
      {
        if (self.code.id)
          this.$router.push('/admin/codes');
        else
          this.$router.push('/admin/codes/edit/' + response.data);
      })
      .catch((error) => { shared.$emit('apiError', error, this.$router) })
      .then(() =>
      {
        self.saving = false;
      });
    }
  }
}
</script>