cphipps/watchstate
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Trying to standardize on specific style and color codes.

Browse Source
This commit is contained in:
Abdulmhsen B. A. A
2024-05-17 21:26:25 +03:00
parent 7c5216055e
commit dafeb49465
9 changed files with 619 additions and 558 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
frontend/components/BackendAdd.vue
View File

@@ -1,28 +1,31 @@
<template>
<Message title="Important Information">
<div class="content">
<Message title="Important Information" message_class="has-background-warning-80 has-text-dark">
<div class="content is-bold">
<ul>
<li>
Please, Beware <code>WatchState</code> is single user tool. It doesn't support syncing multiple users
play state. Please read
<NuxtLink target="_blank" v-text="'this link'"
WatchState is single user tool. It doesn't support syncing multiple users play state.
<NuxtLink target="_blank" v-text="'Visit this link'"
href="https://github.com/arabcoders/watchstate/blob/master/FAQ.md#is-there-support-for-multi-user-setup"/>
for more information.
to learn more.
</li>
<li>
If you are adding new backend that is fresh and doesn't have your play state state, you should turn off import
and enable only metadata import at the start to prevent overriding your current play state. Please
If you are adding new backend that is fresh and doesn't have your current watch state, you should turn off
import and enable only metadata import at the start to prevent overriding your current play state.
<NuxtLink
href="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="'Read this link'"/>
for more information.
target="_blank" v-text="'Visit this link'"/>
to learn more.
</li>
</ul>
</div>
</Message>
<form id="backend_add_form" @submit.prevent="addBackend" @change="changeStage">
<div class="box">
<div class="card">
<div class="card-header">
<p class="card-header-title is-justify-center">Add Backend</p>
</div>
<div class="card-content">
<div class="field">
<label class="label">Type</label>
<div class="control has-icons-left">
@@ -37,7 +40,9 @@
<i class="fas fa-server"></i>
</div>
<p class="help">
Select the type of backend you want to add. Supported backends are: <code>{{ supported.join(', ') }}</code>.
Select the type of backend you want to add. Supported backends are: <code>{{
supported.join(', ')
}}</code>.
</p>
</div>
</div>
@@ -231,17 +236,17 @@
</div>
</div>
</template>
</div>
<div class="field has-text-right">
<div class="control">
<button class="button is-primary" type="submit">
<div class="card-footer">
<div class="card-footer-item">
<button class="button is-fullwidth is-primary" type="submit">
<span class="icon"><i class="fas fa-plus"></i></span>
<span>Add Backend</span>
</button>
</div>
</div>
</div>
</form>
</template>

4
frontend/components/Message.vue
View File

@@ -1,8 +1,8 @@
<template>
<div class="notification" :class="message_class">
<h1 class="title is-5" v-if="title">{{ title }}</h1>
<h2 class="title is-5" v-if="title">{{ title }}</h2>
<p v-if="message">{{ message }}</p>
<slot></slot>
<slot/>
</div>
</template>

38
frontend/layouts/default.vue
View File

@@ -93,7 +93,6 @@
</div>
</nav>
<div :class="{'is-full-mask':maskAll}">
<div class="columns is-multiline" v-if="showConnection">
<div class="column is-12 mt-2">
<div class="card">
@@ -224,35 +223,16 @@
</template>
<div class="columns is-multiline mt-3">
<div class="column is-12 is-hidden-mobile">
<div class="content">
<Message v-if="show_page_info" title="Information">
<button class="delete" @click="show_page_info = false"></button>
If you have question, or want clarification on something, or just want to chat with other users, you are
welcome to join our
<NuxtLink href="https://discord.gg/haUXHJyj6Y" target="_blank">
<span class="icon-text is-underlined">
<span class="icon"><i class="fas fa-brands fa-discord"></i></span>
<span>Discord server</span>
</span>
</NuxtLink>
. For real bug reports, feature requests, or contributions, please visit the
<NuxtLink href="https://github.com/arabcoders/watchstate/issues/new/choose" target="_blank">
<span class="icon-text is-underlined">
<span class="icon"><i class="fas fa-brands fa-github"></i></span>
<span>GitHub repository</span>
</span>
</NuxtLink>
.
</Message>
</div>
</div>
<div class="column is-6 is-12-mobile has-text-left">
{{ api_version }} - <a href="https://github.com/arabcoders/watchstate" target="_blank">WatchState</a>
<template v-if="!show_page_info">
<span class="is-hidden-mobile">
- <a href="javascript:void(0)" @click="show_page_info=true">Show Info</a>
<template v-if="!show_page_tips">
-
<a href="javascript:void(0)" @click="show_page_tips=true">
<span class="icon-text">
<span class="icon"><i class="fas fa-lines-leaning"></i></span>
<span>Show hidden tips</span>
</span>
</a>
</template>
</div>
</div>
@@ -268,7 +248,7 @@ import 'assets/css/bulma.css'
import 'assets/css/style.css'
import 'assets/css/all.css'
import {useStorage} from '@vueuse/core'
import request from "~/utils/request.js";
import request from '~/utils/request.js'
const selectedTheme = useStorage('theme', (() => window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')())
const showConnection = ref(false)
@@ -276,8 +256,8 @@ const showConnection = ref(false)
const api_url = useStorage('api_url', window.location.origin)
const api_path = useStorage('api_path', '/v1/api')
const api_token = useStorage('api_token', '')
const show_page_info = useStorage('show_page_info', true)
const maskAll = useStorage('page_mask', false)
const show_page_tips = useStorage('show_page_tips', true)
const api_status = ref(false)
const api_response = ref('Status: Unknown')

26
frontend/pages/backend/[backend]/edit.vue
View File

@@ -18,10 +18,15 @@
<span>Loading backend settings, please wait...</span>
</Message>
</div>
<div v-else class="column is-12">
<form id="backend_edit_form" @submit.prevent="saveContent">
<div class="box">
<div class="card">
<header class="card-header">
<p class="card-header-title is-justify-center">Edit Backend - {{ backend.name }}</p>
</header>
<div class="card-content">
<div class="field">
<label class="label">Name</label>
<div class="control has-icons-left">
@@ -95,11 +100,13 @@
<p class="help">
<span v-if="'plex' === backend.type">
The backend unique ID is random string generated on server setup, In Plex case it used to inquiry
about the users associated with the server to generate limited <code>X-Plex-Token</code> for them. It
about the users associated with the server to generate limited <code>X-Plex-Token</code> for them.
It
used by webhooks as a filter to match the backend. in-case you are member of multiple servers.
</span>
<span v-else>
The backend unique ID is a random string generated on server setup. It is used to identify the backend
The backend unique ID is a random string generated on server setup. It is used to identify the
backend
uniquely. This is used for webhook matching and filtering.
</span>
<a href="javascript:void(0)" @click="getUUid">Get from the backend.</a>
@@ -231,18 +238,15 @@
</template>
</div>
</div>
<div class="field has-text-right">
<div class="control">
<button class="button is-primary" type="submit">
<span class="icon">
<i class="fas fa-save"></i>
</span>
</div>
<div class="card-footer">
<div class="card-footer-item">
<button class="button is-fullwidth is-primary" type="submit">
<span class="icon"><i class="fas fa-save"></i></span>
<span>Save Settings</span>
</button>
</div>
</div>
</div>
</form>
</div>

28
frontend/pages/backends/index.vue
View File

@@ -24,7 +24,7 @@
<div class="column is-12" v-if="toggleForm">
<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">
@@ -91,18 +91,37 @@
</footer>
</div>
</div>
</template>
<div class="column is-12" v-if="backends.length>0">
<div class="column is-12" v-if="show_page_tips">
<Message title="Tips" message_class="has-background-info-90 has-text-dark">
<button class="delete" @click="show_page_tips=false"></button>
<div class="content">
<ul>
<li>
Import In context of <code>WatchState</code> means pulling data from the backends into the local database.
<strong>Import</strong> means pulling data from the backends into the local database.
</li>
<li>
Export in context of <code>WatchState</code> means pushing data from the local database to the backends.
<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'"
href="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
href="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>
</ul>
</div>
</Message>
</div>
</div>
</template>
@@ -120,6 +139,7 @@ useHead({title: 'Backends'})
const backends = ref([])
const toggleForm = ref(false)
const api_url = useStorage('api_url', '')
const show_page_tips = useStorage('show_page_tips', true)
const loadContent = async () => {
backends.value = []

67
frontend/pages/console.vue
View File

@@ -2,11 +2,9 @@
<div class="columns is-multiline">
<div class="column is-12 is-clearfix">
<h1 class="title is-4">Console</h1>
<div class="subtitle is-6">
You can execute <strong>non-interactive</strong> commands here. The interface jailed to the <code>console</code>
command. You do not have to write <code>console</code> or <code>docker exec -ti watchstate console</code> here.
The majority of the commands will not show any output unless error has occurred or important information needs
to be communicated. To see all output, add <code>-vvv</code> to command.
<div class="subtitle">
You can execute <strong>non-interactive</strong> commands here. This interface is jailed to <code>console</code>
command.
</div>
</div>
@@ -24,7 +22,8 @@
</span>
</p>
<p class="control">
<button class="button is-primary" type="submit" :disabled="isLoading" :class="{'is-loading':isLoading}">
<button class="button is-primary" type="submit" :disabled="isLoading ||hasPrefix"
:class="{'is-loading':isLoading}">
<span class="icon-text">
<span class="icon">
<i class="fa fa-server"></i>
@@ -34,7 +33,8 @@
</button>
</p>
<p class="control">
<button class="button is-info" type="button" v-tooltip="'Clear output'" @click="response = []">
<button class="button is-info" type="button" v-tooltip="'Clear output'"
@click="response = []" :disabled="response.length < 1">
<span class="icon-text">
<span class="icon"><i class="fa fa-broom"></i></span>
<span>Clear</span>
@@ -51,11 +51,11 @@
</p>
</div>
</div>
<p class="help">
<p class="help" v-if="hasPrefix">
<span class="icon-text">
<span class="icon"><i class="fa fa-info"></i></span>
<span>Please beware, clicking close connection does not stop the command. It only stops the output from
being displayed. The command will continue to run until it finishes.</span>
<span class="icon has-text-danger"><i class="fas fa-exclamation-triangle"></i></span>
<span>Remove the <code>console</code> or <code>docker exec -ti watchstate console</code> from the
input. You should use the command directly, For example i.e <code>db:list --output yaml</code></span>
</span>
</p>
</div>
@@ -67,12 +67,40 @@
item
}}</span></code></pre>
</div>
<div class="column is-12" v-if="show_page_tips">
<Message title="Tips" message_class="has-background-info-90 has-text-dark">
<button class="delete" @click="show_page_tips=false"></button>
<div class="content">
<ul>
<li>
You can also run a command from the task page by clicking on the <strong>Run via console</strong>. The
command will be pre-filled for you.
</li>
<li>
Clicking close connection does not stop the command. It only stops the output from being displayed. The
command will continue to run until it finishes.
</li>
<li>
The majority of the commands will not show any output unless error has occurred or important information
needs to be communicated. To see all output, add the <code>-vvv</code> flag.
</li>
<li>
There is no need to write <code>console</code> or <code>docker exec -ti watchstate console</code> Using
this interface. Use the command followed by the options directly. For example, <code>db:list --output
yaml</code>.
</li>
</ul>
</div>
</Message>
</div>
</div>
</template>
<script setup>
import {useStorage} from "@vueuse/core";
import {notification} from "~/utils/index.js";
const fromTask = useRoute().query.task || '';
@@ -84,18 +112,27 @@ const response = ref([]);
const command = ref('');
const isLoading = ref(false);
const outputConsole = ref();
const hasPrefix = computed(() => command.value.startsWith('console') || command.value.startsWith('docker'));
const show_page_tips = useStorage('show_page_tips', true)
const RunCommand = async () => {
response.value = []
const api_path = useStorage('api_path', '/v1/api')
const api_url = useStorage('api_url', '')
const api_token = useStorage('api_token', '')
let userCommand = command.value
// -- check if the user command starts with console or docker exec -ti watchstate
if (userCommand.startsWith('console') || userCommand.startsWith('docker')) {
notification('error', 'Warning', 'Please remove the [console] or [docker exec -ti watchstate console] from the command.')
return
}
response.value = []
const searchParams = new URLSearchParams();
searchParams.append('apikey', api_token.value);
searchParams.append('json', btoa(JSON.stringify({command: command.value})));
searchParams.append('json', btoa(JSON.stringify({command: userCommand})));
sse = new EventSource(`${api_url.value}${api_path.value}/system/command/?${searchParams.toString()}`);

48
frontend/pages/env.vue
View File

@@ -31,11 +31,11 @@
<form id="env_add_form" @submit.prevent="addVariable">
<div class="card">
<header class="card-header">
<p class="card-header-title is-justify-center">Manage Environment Variable</p>
<p class="card-header-title is-unselectable is-justify-center">Manage Environment Variable</p>
</header>
<div class="card-content">
<div class="field">
<label class="label" for="form_key">Environment key</label>
<label class="label is-unselectable" for="form_key">Environment key</label>
<div class="control has-icons-left">
<div class="select is-fullwidth">
<select v-model="form_key" id="form_key" @change="keyChanged">
@@ -52,14 +52,12 @@
</div>
<div class="field">
<label class="label">
Environment value
</label>
<label class="label is-unselectable" for="form_value">Environment value</label>
<div class="control has-icons-left">
<template v-if="'bool' === form_type">
<input id="form_switch" type="checkbox" class="switch is-success"
<input id="form_value" type="checkbox" class="switch is-success"
:checked="fixBool(form_value)" @change="form_value = !fixBool(form_value)">
<label for="form_switch">
<label for="form_value">
<template v-if="fixBool(form_value)">On</template>
<template v-else>Off</template>
</label>
@@ -117,9 +115,7 @@
<td class="has-text-left">
{{ env.key }}
<div class="is-pulled-right" v-if="env.mask">
<span class="icon is-small has-tooltip" v-tooltip="'The value of this key is masked.'">
<i class="fas fa-lock"></i>
</span>
<span class="icon is-small"><i class="fas fa-lock"></i></span>
</div>
</td>
<td class="has-text-left" :class="{ 'is-masked': env.mask, 'is-unselectable': env.mask }">
@@ -138,23 +134,17 @@
<div class="field is-grouped" style="justify-content: center">
<div class="control">
<button class="button is-small is-primary" @click="editEnv(env)">
<span class="icon">
<i class="fas fa-edit"></i>
</span>
<span class="icon"><i class="fas fa-edit"></i></span>
</button>
</div>
<div class="control" v-if="copyAPI">
<button class="button is-small is-warning" @click="copyValue(env)">
<span class="icon">
<i class="fas fa-copy"></i>
</span>
<div class="control">
<button class="button is-small is-warning" @click="copyText(env.value)">
<span class="icon"><i class="fas fa-copy"></i></span>
</button>
</div>
<div class="control">
<button class="button is-small is-danger" @click="deleteEnv(env)">
<span class="icon">
<i class="fas fa-trash"></i>
</span>
<span class="icon"><i class="fas fa-trash"></i></span>
</button>
</div>
</div>
@@ -165,22 +155,26 @@
</div>
</div>
<div class="column is-12 is-hidden-mobile" v-if="envs">
<div class="column is-12 is-hidden-mobile" v-if="envs && show_page_tips">
<Message title="Tips" message_class="has-background-info-90 has-text-dark">
<button class="delete" @click="show_page_tips=false"></button>
<div class="content">
<ul>
<li>
Some variables values are masked for security reasons. If you need to see the value, click on edit.
Some variables values are masked for security reasons. You will see <i class="fa fa-lock"></i> next to
them. If you need to see the value, click on edit.
</li>
</ul>
</div>
</Message>
</div>
</div>
</template>
<script setup>
import request from '~/utils/request.js'
import {awaitElement, notification} from '~/utils/index.js'
import {awaitElement, copyText, notification} from '~/utils/index.js'
import {useStorage} from "@vueuse/core";
useHead({title: 'Environment Variables'})
@@ -189,9 +183,9 @@ const toggleForm = ref(false)
const form_key = ref()
const form_value = ref()
const form_type = ref()
const show_page_tips = useStorage('show_page_tips', true)
const file = ref('.env')
const copyAPI = navigator.clipboard
const loadContent = async () => {
envs.value = []
@@ -272,8 +266,6 @@ const cancelForm = () => {
toggleForm.value = false
}
const copyValue = (env) => navigator.clipboard.writeText(env.value)
watch(toggleForm, (value) => {
if (!value) {
form_key.value = null

21
frontend/pages/index.vue
View File

@@ -78,6 +78,27 @@
</code>
</div>
<div class="column is-12 is-hidden-mobile">
<div class="content">
<Message message_class="has-background-info-90 has-text-dark">
If you have question, or want clarification on something, or just want to chat with other users, you are
welcome to join our <span class="icon-text is-underlined">
<span class="icon"><i class="fas fa-brands fa-discord"></i></span>
<span>
<NuxtLink href="https://discord.gg/haUXHJyj6Y" target="_blank" v-text="'Discord server'"/>
</span>
</span>. For bug reports, feature requests, or contributions, please visit the
<span class="icon-text is-underlined">
<span class="icon"><i class="fas fa-brands fa-github"></i></span>
<span>
<NuxtLink href="https://github.com/arabcoders/watchstate/issues/new/choose" target="_blank"
v-text="'GitHub repository'"/>
</span>
</span>.
</Message>
</div>
</div>
</div>
</template>

16
frontend/pages/report.vue
View File

@@ -11,25 +11,27 @@
</p>
</div>
</div>
<div class="subtitle">This page shows basic information about the system.</div>
<div class="subtitle is-hidden-mobile">
This page shows basic information about the various components of the system.
</div>
</div>
<div class="column is-12">
<Message message_class="is-warning" title="Warning" v-if="show_report_warning">
<template v-if="show_report_warning">
<Message message_class="has-background-warning-80 has-text-dark" title="Warning">
<p>While we try to make sure no sensitive information is leaked via the report, it's possible that
something might be missed. Please review the report before posting it. If you notice
any sensitive information, please report it to the developers. so we can fix it.</p>
</Message>
<div class="mt-4">
<button class="button is-block is-fullwidth is-primary" @click="show_report_warning = false">
<span class="icon-text">
<span class="icon"><i class="fas fa-exclamation"></i></span>
<span>I Understand, show report.</span>
<span class="icon"><i class="fas fa-thumbs-up"></i></span>
<span>I Understand. Show me the report.</span>
</span>
</button>
</div>
</Message>
</template>
<Message message_class="is-info" v-if="!show_report_warning && data.length < 1">
<span class="icon"><i class="fas fa-spinner fa-pulse"></i></span>
<span>Generating the report. Please wait...</span>