Standardized how we use the Message component.
This commit is contained in:
Abdulmhsen B. A. A.
@@ -1,16 +1,17 @@
|
||||
<template>
|
||||
<div class="columns is-multiline">
|
||||
<div class="column is-12 is-clearfix">
|
||||
<div class="column is-12 is-clearfix is-unselectable">
|
||||
<span class="title is-4">Backends</span>
|
||||
<div class="is-pulled-right">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<button class="button is-primary" v-tooltip="'Add New Backend'" @click="toggleForm = !toggleForm">
|
||||
<button class="button is-primary" v-tooltip.bottom="'Add New Backend'"
|
||||
@click="toggleForm = !toggleForm" :disabled="isLoading">
|
||||
<span class="icon"><i class="fas fa-add"></i></span>
|
||||
</button>
|
||||
</p>
|
||||
<p class="control">
|
||||
<button class="button is-info" @click.prevent="loadContent">
|
||||
<button class="button is-info" @click="loadContent" :disabled="isLoading" :class="{'is-loading':isLoading}">
|
||||
<span class="icon"><i class="fas fa-sync"></i></span>
|
||||
</button>
|
||||
</p>
|
||||
@@ -25,16 +26,15 @@
|
||||
<BackendAdd @addBackend="toggleForm = false; loadContent()" :backends="backends"/>
|
||||
</div>
|
||||
<template v-else>
|
||||
<div class="column is-12" v-if="backends.length<1 && !toggleForm">
|
||||
<Message message_class="is-warning" title="Warning">
|
||||
<span class="icon-text">
|
||||
<span class="icon"><i class="fas fa-exclamation"></i></span>
|
||||
<span>
|
||||
No backends found. Please add new backends to start using the tool. You can add new backend by
|
||||
<NuxtLink @click="toggleForm=true" v-text="'clicking here'"/>
|
||||
or by clicking the <span class="icon is-small"><i class="fas fa-add"></i></span> button above.
|
||||
</span>
|
||||
</span>
|
||||
<div class="column is-12" v-if="backends.length<1">
|
||||
<Message v-if="isLoading" message_class="has-background-info-90 has-text-dark" title="Loading"
|
||||
icon="fas fa-spinner fa-spin" message="Requesting active play sessions. Please wait..."/>
|
||||
<Message v-else message_class="is-background-warning-80 has-text-dark" title="Warning"
|
||||
icon="fas fa-exclamation-circle">
|
||||
No backends found. Please add new backends to start using the tool. You can add new backend by
|
||||
<NuxtLink @click="toggleForm=true" v-text="'clicking here'"/>
|
||||
or by clicking the <span class="icon is-clickable" @click="toggleForm=true"><i class="fas fa-add"></i></span>
|
||||
button above.
|
||||
</Message>
|
||||
</div>
|
||||
|
||||
@@ -94,58 +94,41 @@
|
||||
</template>
|
||||
|
||||
<div class="column is-12">
|
||||
<Message message_class="has-background-info-90 has-text-dark">
|
||||
<div class="is-pulled-right">
|
||||
<NuxtLink @click="show_page_tips=false" v-if="show_page_tips">
|
||||
<span class="icon"><i class="fas fa-arrow-up"></i></span>
|
||||
<span>Close</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink @click="show_page_tips=true" v-else>
|
||||
<span class="icon"><i class="fas fa-arrow-down"></i></span>
|
||||
<span>Open</span>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<h5 class="title is-5 is-unselectable">
|
||||
<span class="icon-text">
|
||||
<span class="icon"><i class="fas fa-info-circle"></i></span>
|
||||
<span>Tips</span>
|
||||
</span>
|
||||
</h5>
|
||||
<div class="content" v-if="show_page_tips">
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Import</strong> means pulling data from the backends into the local database.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Export</strong> means pushing data from the local database to the backends.
|
||||
</li>
|
||||
<li>
|
||||
WatchState is single user tool. It doesn't support syncing multiple users play state.
|
||||
<NuxtLink target="_blank" v-text="'Visit this link'"
|
||||
to="https://github.com/arabcoders/watchstate/blob/master/FAQ.md#is-there-support-for-multi-user-setup"/>
|
||||
to learn more.
|
||||
</li>
|
||||
<li>
|
||||
If you are adding new backend that is fresh and doesn't have your correct watch state, you should
|
||||
turn off import and enable only metadata import at the start to prevent overriding your current play
|
||||
state.
|
||||
<NuxtLink
|
||||
to="https://github.com/arabcoders/watchstate/blob/master/FAQ.md#my-new-backend-overriding-my-old-backend-state--my-watch-state-is-not-correct"
|
||||
target="_blank" v-text="'Visit this link'"/>
|
||||
to learn more.
|
||||
</li>
|
||||
<li>
|
||||
Deleting backend is not available via <code>WebUI</code> yet. You can do it via the
|
||||
<NuxtLink :to="makeConsoleCommand('config:delete -n -s backend_name')">
|
||||
<span class="icon-text">
|
||||
<span class="icon"><i class="fas fa-terminal"></i></span>
|
||||
<span>Console</span>
|
||||
</span>
|
||||
</NuxtLink>
|
||||
page, or using the the following command <code>config:delete -s backend_name</code> in shell.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<Message message_class="has-background-info-90 has-text-dark" :toggle="show_page_tips"
|
||||
@toggle="show_page_tips = !show_page_tips" :use-toggle="true" title="Tips" icon="fas fa-info-circle">
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Import</strong> means pulling data from the backends into the local database.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Export</strong> means pushing data from the local database to the backends.
|
||||
</li>
|
||||
<li>
|
||||
WatchState is single user tool. It doesn't support syncing multiple users play state.
|
||||
<NuxtLink target="_blank" v-text="'Visit this link'"
|
||||
to="https://github.com/arabcoders/watchstate/blob/master/FAQ.md#is-there-support-for-multi-user-setup"/>
|
||||
to learn more.
|
||||
</li>
|
||||
<li>
|
||||
If you are adding new backend that is fresh and doesn't have your correct watch state, you should
|
||||
turn off import and enable only metadata import at the start to prevent overriding your current play
|
||||
state.
|
||||
<NuxtLink
|
||||
to="https://github.com/arabcoders/watchstate/blob/master/FAQ.md#my-new-backend-overriding-my-old-backend-state--my-watch-state-is-not-correct"
|
||||
target="_blank" v-text="'Visit this link'"/>
|
||||
to learn more.
|
||||
</li>
|
||||
<li>
|
||||
Deleting backend is not available via <code>WebUI</code> yet. You can do it via the
|
||||
<NuxtLink :to="makeConsoleCommand('config:delete -n -s backend_name')">
|
||||
<span class="icon-text">
|
||||
<span class="icon"><i class="fas fa-terminal"></i></span>
|
||||
<span>Console</span>
|
||||
</span>
|
||||
</NuxtLink>
|
||||
page, or using the the following command <code>config:delete -s backend_name</code> in shell.
|
||||
</li>
|
||||
</ul>
|
||||
</Message>
|
||||
</div>
|
||||
</div>
|
||||
@@ -156,8 +139,9 @@ import 'assets/css/bulma-switch.css'
|
||||
import moment from 'moment'
|
||||
import request from '~/utils/request.js'
|
||||
import BackendAdd from '~/components/BackendAdd.vue'
|
||||
import {copyText, makeConsoleCommand} from '~/utils/index.js'
|
||||
import {copyText, makeConsoleCommand, notification} from '~/utils/index.js'
|
||||
import {useStorage} from "@vueuse/core";
|
||||
import Message from "~/components/Message.vue";
|
||||
|
||||
useHead({title: 'Backends'})
|
||||
|
||||
@@ -165,11 +149,19 @@ const backends = ref([])
|
||||
const toggleForm = ref(false)
|
||||
const api_url = useStorage('api_url', '')
|
||||
const show_page_tips = useStorage('show_page_tips', true)
|
||||
const isLoading = ref(false)
|
||||
|
||||
const loadContent = async () => {
|
||||
backends.value = []
|
||||
const response = await request('/backends')
|
||||
backends.value = await response.json()
|
||||
isLoading.value = true
|
||||
try {
|
||||
const response = await request('/backends')
|
||||
backends.value = await response.json()
|
||||
} catch (e) {
|
||||
notification('error', 'Error', `Failed to load backends. ${e.message}`)
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => loadContent())
|
||||
|
||||
Reference in New Issue
Block a user