paltman

<template>
  <div class="version-update" v-if="versionUpdate">
    <p>There is a new version!</p>
    <button @click="getNewVersion">Get Update</button>
  </div>
  <div class="bookmark-list" v-else>
    <button @click="refresh">Refresh</button>
    <div v-for="(bookmark, index) in bookmarks" :key="index">
      <a :href="bookmark.url">{{ bookmark.title }}</a>
    </div>

paltman

<template>
  <div class="bookmark-list" v-if="authed">
    <button @click="refresh">Refresh</button>
    <div v-for="(bookmark, index) in bookmarks" :key="index">
      <a :href="bookmark.url">{{ bookmark.title }}</a>
    </div>
  </div>
  <div class="auth" v-else>
    <AuthForm />
  </div>

paltman

<template>
  <div class="bookmark-list">
    <button @click="refresh">Refresh</button>
    <div v-for="(bookmark, index) in bookmarks" :key="index">
      <a :href="bookmark.url">{{ bookmark.title }}</a>
    </div>
  </div>
</template>

<script>

paltman

{
    "workbench.iconTheme": "material-icon-theme",
    "workbench.editor.enablePreview": false,
    "editor.renderWhitespace": "boundary",
    "editor.renderLineHighlight": "all",
    "files.insertFinalNewline": true,
    "python.linting.pylintEnabled": false,
    "python.linting.flake8Enabled": true,
    "editor.selectionHighlight": false,
    "editor.scrollBeyondLastLine": false,

paltman

import Vue from 'vue';
import commonComponents from './components';

commonComponents.forEach(component => {
    Vue.component(component.name, component);
});

// now load Vue

paltman

import PrettyDate from './PrettyDate.vue';
import SystemMessages from './SystemMessages.vue';
import LoadingIndicator from './LoadingIndicator.vue';

export default [
    PrettyDate,
    SystemMessages,
    LoadingIndicator
];

paltman

<template>
    <div class="spinner">
        <div class="rect1"></div>
        <div class="rect2"></div>
        <div class="rect3"></div>
        <div class="rect4"></div>
        <div class="rect5"></div>
    </div>
</template>
<script>

paltman

<template>
    <div class="system-messages sticky-top">
        <error-message
            v-for="(error, index) in errors"
            :key="index"
            :error="error"
            @clearMessage="onClearError(index)">
        </error-message>
        <success-message
            v-for="(message, index) in messages"

paltman

<template>
    <div class="system-message alert alert-danger" role="alert">
        <button @click.stop="$emit('clearMessage')" class="close">&times;</button>
        <ul><li v-for="(message, index) in error.messages" :key="index">{{ message }}</li></ul>
    </div>
</template>
<script>
export default {
    name: 'error-message',
    props: ['error']

paltman

<template>
    <div class="system-message alert alert-success" role="alert">
        <button @click.stop="$emit('clearMessage')" class="close">&times;</button>
        <p>{{ message }}</p>
    </div>
</template>
<script>
export default {
    name: 'success-message',
    props: ['message']