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

Minor WebUI design update to include random background

Browse Source
This commit is contained in:
ArabCoders
2025-03-24 02:29:32 +03:00
parent c4f79e12d5
commit 23ab782c25
8 changed files with 247 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
frontend/components/Connection.vue
View File

@@ -84,6 +84,26 @@
</div>
</div>
<div class="field">
<label class="label" for="random_bg">Backgrounds</label>
<div class="control">
<input id="random_bg" type="checkbox" class="switch is-success" v-model="bg_enable">
<label for="random_bg">Enable</label>
<p class="help">Use random background image from your media backends.</p>
</div>
</div>
<div class="field">
<label class="label" for="random_bg_opacity">
Background Visibility: (<code>{{ bg_opacity }}</code>)
</label>
<div class="control">
<input id="random_bg_opacity" style="width: 100%" type="range" v-model="bg_opacity" min="0.60"
max="1.00" step="0.05">
<p class="help">How visible the background image should be.</p>
</div>
</div>
<div class="field has-text-right">
<div class="control">
<button type="submit" class="button is-primary" :disabled="!api_url || !api_token">
@@ -148,13 +168,16 @@ const real_api_url = useStorage('api_url', window.location.origin)
const real_api_path = useStorage('api_path', '/v1/api')
const real_api_token = useStorage('api_token', '')
const api_url = ref(toRaw(real_api_url.value))
const api_path = ref(toRaw(real_api_path.value))
const api_user = ref(toRaw(real_api_user.value))
const api_token = ref(toRaw(real_api_token.value))
const exposeToken = ref(false)
const bg_enable = useStorage('bg_enable', true)
const bg_opacity = useStorage('bg_opacity', 0.95)
const testApi = async () => {
try {
const response = await fetch(`${api_url.value}${api_path.value}/system/version`, {

6
frontend/components/EventView.vue
View File

@@ -96,7 +96,7 @@
<span>{{ !toggleData ? 'Show' : 'Hide' }} attached data</span>
</h2>
<div v-if="toggleData" class="is-relative">
<code class="text-container is-block" :class="{ 'is-pre': !wrapLines, 'is-pre-wrap': wrapLines }">
<code class="text-container is-block p-4" :class="{ 'is-pre': !wrapLines, 'is-pre-wrap': wrapLines }">
{{ JSON.stringify(item.event_data, null, 2) }}
</code>
<button class="button m-4" v-tooltip="'Copy event data'"
@@ -115,7 +115,7 @@
<span>{{ !toggleLogs ? 'Show' : 'Hide' }} event logs</span>
</h2>
<div v-if="toggleLogs" class="is-relative">
<code class="is-block text-container" :class="{ 'is-pre': !wrapLines, 'is-pre-wrap': wrapLines }">
<code class="is-block text-container p-4" :class="{ 'is-pre': !wrapLines, 'is-pre-wrap': wrapLines }">
<span class="is-log-line is-block pt-1" v-for="(item, index) in filteredRows" :key="'log_line-' + index"
v-text="item"/>
</code>
@@ -134,7 +134,7 @@
<span>{{ !toggleOptions ? 'Show' : 'Hide' }} attached options</span>
</h2>
<div v-if="toggleOptions" class="is-relative">
<code class="is-block text-container" :class="{ 'is-pre': !wrapLines, 'is-pre-wrap': wrapLines }">
<code class="is-block text-container p-4" :class="{ 'is-pre': !wrapLines, 'is-pre-wrap': wrapLines }">
{{ JSON.stringify(item.options, null, 2) }}
</code>
<button class="button m-4" v-tooltip="'Copy options'"