forked from btclock/webui
Compare commits
1 commit
main
...
dependabot
| Author | SHA1 | Date | |
|---|---|---|---|
|
41376caecb |
28 changed files with 1196 additions and 1886 deletions
|
|
@ -1,121 +0,0 @@
|
||||||
on: [push]
|
|
||||||
jobs:
|
|
||||||
check-changes:
|
|
||||||
runs-on: docker
|
|
||||||
outputs:
|
|
||||||
all_changed_and_modified_files_count: ${{ steps.changed-files.outputs.all_changed_and_modified_files_count }}
|
|
||||||
steps:
|
|
||||||
- name: Checkout code
|
|
||||||
uses: actions/checkout@v4
|
|
||||||
|
|
||||||
- name: Get changed files count
|
|
||||||
id: changed-files
|
|
||||||
uses: tj-actions/changed-files@v45
|
|
||||||
with:
|
|
||||||
files_ignore: 'doc/**,README.md,Dockerfile,.*'
|
|
||||||
files_ignore_separator: ','
|
|
||||||
- name: Print changed files count
|
|
||||||
run: >
|
|
||||||
echo "Changed files count: ${{
|
|
||||||
steps.changed-files.outputs.all_changed_and_modified_files_count }}"
|
|
||||||
|
|
||||||
build:
|
|
||||||
needs: check-changes
|
|
||||||
runs-on: docker
|
|
||||||
container:
|
|
||||||
image: ghcr.io/catthehacker/ubuntu:js-22.04
|
|
||||||
if: ${{ needs.check-changes.outputs.all_changed_and_modified_files_count >= 1 }}
|
|
||||||
permissions:
|
|
||||||
contents: write
|
|
||||||
|
|
||||||
steps:
|
|
||||||
- uses: actions/checkout@v4
|
|
||||||
with:
|
|
||||||
submodules: recursive
|
|
||||||
- uses: actions/setup-node@v4
|
|
||||||
with:
|
|
||||||
node-version: lts/*
|
|
||||||
cache: yarn
|
|
||||||
cache-dependency-path: '**/yarn.lock'
|
|
||||||
- uses: actions/cache@v4
|
|
||||||
with:
|
|
||||||
path: |
|
|
||||||
~/.cache/pip
|
|
||||||
~/node_modules
|
|
||||||
key: ${{ runner.os }}-pio
|
|
||||||
- uses: actions/setup-python@v5
|
|
||||||
with:
|
|
||||||
python-version: '>=3.10'
|
|
||||||
- name: Get current date
|
|
||||||
id: dateAndTime
|
|
||||||
run: echo "dateAndTime=$(date +'%Y-%m-%d-%H:%M')" >> $GITHUB_OUTPUT
|
|
||||||
- name: Install mklittlefs
|
|
||||||
run: >
|
|
||||||
git clone https://github.com/earlephilhower/mklittlefs.git /tmp/mklittlefs &&
|
|
||||||
cd /tmp/mklittlefs &&
|
|
||||||
git submodule update --init &&
|
|
||||||
make dist
|
|
||||||
- name: Install yarn
|
|
||||||
run: yarn && yarn postinstall
|
|
||||||
- name: Run linter
|
|
||||||
run: yarn lint
|
|
||||||
- name: Run vitest tests
|
|
||||||
run: yarn vitest run
|
|
||||||
- name: Install Playwright Browsers
|
|
||||||
run: npx playwright install --with-deps
|
|
||||||
- name: Run Playwright tests
|
|
||||||
run: npx playwright test
|
|
||||||
- name: Build WebUI
|
|
||||||
run: yarn build
|
|
||||||
- name: Get current block
|
|
||||||
id: getBlockHeight
|
|
||||||
run: echo "blockHeight=$(curl -s https://mempool.space/api/blocks/tip/height)" >> $GITHUB_OUTPUT
|
|
||||||
- name: Write block height to file
|
|
||||||
env:
|
|
||||||
BLOCK_HEIGHT: ${{ steps.getBlockHeight.outputs.blockHeight }}
|
|
||||||
run: mkdir -p output && echo "$BLOCK_HEIGHT" > output/version.txt
|
|
||||||
- name: gzip build for LittleFS
|
|
||||||
run: find dist -type f ! -name ".*" -exec sh -c 'mkdir -p "build_gz/$(dirname "${1#dist/}")" && gzip -k "$1" -c > "build_gz/${1#dist/}".gz' _ {} \;
|
|
||||||
- name: Write git rev to file
|
|
||||||
run: echo "$GITHUB_SHA" > build_gz/fs_hash.txt && echo "$GITHUB_SHA" > output/commit.txt
|
|
||||||
- name: Check GZipped directory size
|
|
||||||
run: |
|
|
||||||
# Set the threshold size in bytes
|
|
||||||
THRESHOLD=410000
|
|
||||||
|
|
||||||
# Calculate the total size of files in the directory
|
|
||||||
DIRECTORY_SIZE=$(du -b -s build_gz | awk '{print $1}')
|
|
||||||
|
|
||||||
# Fail the workflow if the size exceeds the threshold
|
|
||||||
if [ "$DIRECTORY_SIZE" -gt "$THRESHOLD" ]; then
|
|
||||||
echo "Directory size exceeds the threshold of $THRESHOLD bytes"
|
|
||||||
exit 1
|
|
||||||
else
|
|
||||||
echo "Directory size is within the threshold $DIRECTORY_SIZE"
|
|
||||||
fi
|
|
||||||
- name: Create tarball
|
|
||||||
run: tar czf webui.tgz --strip-components=1 dist
|
|
||||||
- name: Build LittleFS
|
|
||||||
run: |
|
|
||||||
set -e
|
|
||||||
/tmp/mklittlefs/mklittlefs -c build_gz -s 410000 output/littlefs.bin
|
|
||||||
- name: Upload artifacts
|
|
||||||
uses: https://code.forgejo.org/forgejo/upload-artifact@v4
|
|
||||||
with:
|
|
||||||
path: |
|
|
||||||
webui.tgz
|
|
||||||
output/littlefs.bin
|
|
||||||
- name: Create release
|
|
||||||
if: github.event_name == 'push' && github.ref == 'refs/heads/main'
|
|
||||||
uses: https://code.forgejo.org/actions/forgejo-release@v2.4.0
|
|
||||||
with:
|
|
||||||
url: 'https://git.btclock.dev/'
|
|
||||||
repo: '${{ github.repository }}'
|
|
||||||
direction: upload
|
|
||||||
tag: ${{ steps.getBlockHeight.outputs.blockHeight }}
|
|
||||||
sha: '${{ github.sha }}'
|
|
||||||
release-dir: output
|
|
||||||
token: ${{ secrets.TOKEN }}
|
|
||||||
override: false
|
|
||||||
verbose: false
|
|
||||||
release-notes-assistant: false
|
|
||||||
|
|
@ -13,7 +13,6 @@
|
||||||
"postinstall": "patch-package",
|
"postinstall": "patch-package",
|
||||||
"test": "npm run test:integration && npm run test:unit",
|
"test": "npm run test:integration && npm run test:unit",
|
||||||
"test:integration": "playwright test",
|
"test:integration": "playwright test",
|
||||||
"test:screenshots": "playwright test -c playwright.screenshot.config.ts",
|
|
||||||
"test:unit": "vitest"
|
"test:unit": "vitest"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|
@ -59,7 +58,6 @@
|
||||||
"msgpack-es": "^0.0.5",
|
"msgpack-es": "^0.0.5",
|
||||||
"nostr-tools": "^2.7.1",
|
"nostr-tools": "^2.7.1",
|
||||||
"patch-package": "^8.0.0",
|
"patch-package": "^8.0.0",
|
||||||
"svelte-bootstrap-icons": "^3.1.1",
|
|
||||||
"svelte-i18n": "^4.0.0"
|
"svelte-i18n": "^4.0.0"
|
||||||
},
|
},
|
||||||
"resolutions": {
|
"resolutions": {
|
||||||
|
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
diff --git a/node_modules/@sveltejs/kit/src/exports/vite/index.js b/node_modules/@sveltejs/kit/src/exports/vite/index.js
|
|
||||||
index e6521e9..f31c28b 100644
|
|
||||||
--- a/node_modules/@sveltejs/kit/src/exports/vite/index.js
|
|
||||||
+++ b/node_modules/@sveltejs/kit/src/exports/vite/index.js
|
|
||||||
@@ -639,9 +639,9 @@ async function kit({ svelte_config }) {
|
|
||||||
input,
|
|
||||||
output: {
|
|
||||||
format: 'esm',
|
|
||||||
- entryFileNames: ssr ? '[name].js' : `${prefix}/[name].[hash].${ext}`,
|
|
||||||
- chunkFileNames: ssr ? 'chunks/[name].js' : `${prefix}/chunks/[name].[hash].${ext}`,
|
|
||||||
- assetFileNames: `${prefix}/assets/[name].[hash][extname]`,
|
|
||||||
+ entryFileNames: ssr ? '[name].js' : `${prefix}/[hash].${ext}`,
|
|
||||||
+ chunkFileNames: ssr ? 'chunks/[name].js' : `${prefix}/chunks/[hash].${ext}`,
|
|
||||||
+ assetFileNames: `${prefix}/assets/[hash][extname]`,
|
|
||||||
hoistTransitiveImports: false,
|
|
||||||
sourcemapIgnoreList
|
|
||||||
},
|
|
||||||
|
|
@ -10,7 +10,7 @@ const config: PlaywrightTestConfig = {
|
||||||
port: 4173
|
port: 4173
|
||||||
},
|
},
|
||||||
reporter: process.env.CI ? 'github' : 'list',
|
reporter: process.env.CI ? 'github' : 'list',
|
||||||
testDir: 'tests/playwright',
|
testDir: 'tests',
|
||||||
testMatch: /(.+\.)?(test|spec)\.[jt]s/
|
testMatch: /(.+\.)?(test|spec)\.[jt]s/
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,51 +0,0 @@
|
||||||
import { defineConfig, devices } from '@playwright/test';
|
|
||||||
|
|
||||||
export default defineConfig({
|
|
||||||
reporter: 'html',
|
|
||||||
use: {
|
|
||||||
locale: 'en-GB',
|
|
||||||
timezoneId: 'Europe/Amsterdam'
|
|
||||||
},
|
|
||||||
webServer: {
|
|
||||||
command: 'npm run build && npm run preview',
|
|
||||||
port: 4173
|
|
||||||
},
|
|
||||||
testDir: './tests/screenshots',
|
|
||||||
outputDir: './test-results/screenshots',
|
|
||||||
projects: [
|
|
||||||
{
|
|
||||||
name: 'MacBook Air 13 inch',
|
|
||||||
use: {
|
|
||||||
viewport: { width: 1440, height: 900 }
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'iPhone 14 Pro',
|
|
||||||
use: { ...devices['iPhone 14 Pro'] }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'iPhone 15 Pro Landscape',
|
|
||||||
use: { ...devices['iPhone 15 Pro Landscape'] }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'MacBook Pro 14 inch',
|
|
||||||
use: {
|
|
||||||
viewport: { width: 1512, height: 982 }
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'MacBook Pro 14 inch',
|
|
||||||
use: {
|
|
||||||
viewport: { width: 1512, height: 982 }
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'MacBook Pro 14 inch Firefox HiDPI',
|
|
||||||
use: { ...devices['Desktop Firefox HiDPI'], viewport: { width: 1512, height: 982 } }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'MacBook Pro 14 inch Safari',
|
|
||||||
use: { ...devices['Desktop Safari'], viewport: { width: 1512, height: 982 } }
|
|
||||||
}
|
|
||||||
]
|
|
||||||
});
|
|
||||||
|
|
@ -1,53 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import { onMount } from 'svelte';
|
|
||||||
import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from '@sveltestrap/sveltestrap';
|
|
||||||
|
|
||||||
type Theme = 'light' | 'dark' | 'auto';
|
|
||||||
|
|
||||||
let theme: Theme = 'auto';
|
|
||||||
|
|
||||||
// Set the theme based on user selection and store it in localStorage
|
|
||||||
function setTheme(newTheme: Theme) {
|
|
||||||
theme = newTheme;
|
|
||||||
localStorage.setItem('theme', newTheme);
|
|
||||||
applyTheme(newTheme);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Apply the selected theme to the document
|
|
||||||
function applyTheme(selectedTheme: Theme) {
|
|
||||||
if (selectedTheme === 'auto') {
|
|
||||||
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
||||||
document.documentElement.setAttribute('data-bs-theme', prefersDark ? 'dark' : 'light');
|
|
||||||
} else {
|
|
||||||
document.documentElement.setAttribute('data-bs-theme', selectedTheme);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// On component mount, check localStorage and apply the saved theme
|
|
||||||
onMount(() => {
|
|
||||||
const savedTheme = (localStorage.getItem('theme') as Theme) || 'auto';
|
|
||||||
applyTheme(savedTheme);
|
|
||||||
theme = savedTheme;
|
|
||||||
|
|
||||||
// Listen for changes in the system color scheme preference
|
|
||||||
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
|
||||||
mediaQuery.addEventListener('change', () => {
|
|
||||||
if (theme === 'auto') {
|
|
||||||
applyTheme('auto');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<Dropdown inNavbar>
|
|
||||||
<DropdownToggle nav caret>
|
|
||||||
{theme === 'auto' ? '🌗' : theme === 'dark' ? '🌙' : '☀️'}
|
|
||||||
</DropdownToggle>
|
|
||||||
<DropdownMenu end>
|
|
||||||
<DropdownItem active={theme === 'light'} on:click={() => setTheme('light')}
|
|
||||||
>☀️ Light</DropdownItem
|
|
||||||
>
|
|
||||||
<DropdownItem active={theme === 'dark'} on:click={() => setTheme('dark')}>🌙 Dark</DropdownItem>
|
|
||||||
<DropdownItem active={theme === 'auto'} on:click={() => setTheme('auto')}>🌗 Auto</DropdownItem>
|
|
||||||
</DropdownMenu>
|
|
||||||
</Dropdown>
|
|
||||||
|
|
@ -1,28 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import { Fade } from '@sveltestrap/sveltestrap';
|
|
||||||
import CaretRightFill from 'svelte-bootstrap-icons/lib/CaretRightFill.svelte';
|
|
||||||
import CaretDownFill from 'svelte-bootstrap-icons/lib/CaretDownFill.svelte';
|
|
||||||
|
|
||||||
export let header;
|
|
||||||
export let defaultOpen = false;
|
|
||||||
export let isOpen = defaultOpen;
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<h4 style="cursor: pointer">
|
|
||||||
<span
|
|
||||||
role="link"
|
|
||||||
on:click={() => (isOpen = !isOpen)}
|
|
||||||
tabindex="0"
|
|
||||||
on:keypress={() => (isOpen = !isOpen)}
|
|
||||||
>
|
|
||||||
{#if isOpen}
|
|
||||||
<CaretDownFill></CaretDownFill>
|
|
||||||
{:else}
|
|
||||||
<CaretRightFill></CaretRightFill>
|
|
||||||
{/if}
|
|
||||||
{header}
|
|
||||||
</span>
|
|
||||||
</h4>
|
|
||||||
<Fade {isOpen}>
|
|
||||||
<slot></slot>
|
|
||||||
</Fade>
|
|
||||||
13
src/icons/EyeIcon.svelte
Normal file
13
src/icons/EyeIcon.svelte
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
fill="currentColor"
|
||||||
|
class="bi bi-eye"
|
||||||
|
viewBox="0 0 16 16"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8M1.173 8a13 13 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172 8z"
|
||||||
|
/>
|
||||||
|
<path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 530 B |
18
src/icons/EyeSlashIcon.svelte
Normal file
18
src/icons/EyeSlashIcon.svelte
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
fill="currentColor"
|
||||||
|
class="bi bi-eye-slash"
|
||||||
|
viewBox="0 0 16 16"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7 7 0 0 0-2.79.588l.77.771A6 6 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755q-.247.248-.517.486z"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M3.35 5.47q-.27.24-.518.487A13 13 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7 7 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 814 B |
|
|
@ -42,23 +42,7 @@
|
||||||
"httpAuthUser": "WebUI-Benutzername",
|
"httpAuthUser": "WebUI-Benutzername",
|
||||||
"httpAuthPass": "WebUI-Passwort",
|
"httpAuthPass": "WebUI-Passwort",
|
||||||
"httpAuthText": "Schützt nur die WebUI mit einem Passwort, nicht API-Aufrufe.",
|
"httpAuthText": "Schützt nur die WebUI mit einem Passwort, nicht API-Aufrufe.",
|
||||||
"currencies": "Währungen",
|
"currencies": "Währungen"
|
||||||
"mowMode": "Mow suffixmodus",
|
|
||||||
"suffixShareDot": "Kompakte Suffix-Notation",
|
|
||||||
"section": {
|
|
||||||
"displaysAndLed": "Anzeigen und LEDs",
|
|
||||||
"screenSettings": "Infospezifisch",
|
|
||||||
"dataSource": "Datenquelle",
|
|
||||||
"extraFeatures": "Zusätzliche Funktionen",
|
|
||||||
"system": "System"
|
|
||||||
},
|
|
||||||
"ledFlashOnZap": "LED blinkt bei Nostr Zap",
|
|
||||||
"flFlashOnZap": "Displaybeleuchting bei Nostr Zap",
|
|
||||||
"showAll": "Alle anzeigen",
|
|
||||||
"hideAll": "Alles ausblenden",
|
|
||||||
"flOffWhenDark": "Displaybeleuchtung aus, wenn es dunkel ist",
|
|
||||||
"luxLightToggleText": "Zum Deaktivieren auf 0 setzen",
|
|
||||||
"verticalDesc": "Vrtikale Bildschirmbeschreibung"
|
|
||||||
},
|
},
|
||||||
"control": {
|
"control": {
|
||||||
"systemInfo": "Systeminfo",
|
"systemInfo": "Systeminfo",
|
||||||
|
|
|
||||||
|
|
@ -54,23 +54,7 @@
|
||||||
"httpAuthText": "Only password-protects WebUI, not API-calls.",
|
"httpAuthText": "Only password-protects WebUI, not API-calls.",
|
||||||
"currencies": "Currencies",
|
"currencies": "Currencies",
|
||||||
"stagingSource": "Use Staging datasource (for development)",
|
"stagingSource": "Use Staging datasource (for development)",
|
||||||
"useNostrTooltip": "Very experimental and unstable. Nostr data source is not required for Nostr Zap notifications.",
|
"useNostrTooltip": "Very experimental and unstable. Nostr data source is not required for Nostr Zap notifications."
|
||||||
"mowMode": "Mow Suffix Mode",
|
|
||||||
"suffixShareDot": "Suffix compact notation",
|
|
||||||
"section": {
|
|
||||||
"displaysAndLed": "Displays and LEDs",
|
|
||||||
"screenSettings": "Screen specific",
|
|
||||||
"dataSource": "Data source",
|
|
||||||
"extraFeatures": "Extra features",
|
|
||||||
"system": "System"
|
|
||||||
},
|
|
||||||
"ledFlashOnZap": "LED flash on Nostr Zap",
|
|
||||||
"flFlashOnZap": "Frontlight flash on Nostr Zap",
|
|
||||||
"showAll": "Show all",
|
|
||||||
"hideAll": "Hide all",
|
|
||||||
"flOffWhenDark": "Frontlight off when dark",
|
|
||||||
"luxLightToggleText": "Set to 0 to disable",
|
|
||||||
"verticalDesc": "Use vertical screen description"
|
|
||||||
},
|
},
|
||||||
"control": {
|
"control": {
|
||||||
"systemInfo": "System info",
|
"systemInfo": "System info",
|
||||||
|
|
|
||||||
|
|
@ -41,23 +41,7 @@
|
||||||
"httpAuthUser": "Nombre de usuario WebUI",
|
"httpAuthUser": "Nombre de usuario WebUI",
|
||||||
"httpAuthPass": "Contraseña WebUI",
|
"httpAuthPass": "Contraseña WebUI",
|
||||||
"httpAuthText": "Solo la WebUI está protegida con contraseña, no las llamadas API.",
|
"httpAuthText": "Solo la WebUI está protegida con contraseña, no las llamadas API.",
|
||||||
"currencies": "Monedas",
|
"currencies": "Monedas"
|
||||||
"mowMode": "Modo de sufijo Mow",
|
|
||||||
"suffixShareDot": "Notación compacta de sufijo",
|
|
||||||
"section": {
|
|
||||||
"displaysAndLed": "Pantallas y LED",
|
|
||||||
"screenSettings": "Específico de la pantalla",
|
|
||||||
"dataSource": "fuente de datos",
|
|
||||||
"extraFeatures": "Funciones adicionales",
|
|
||||||
"system": "Sistema"
|
|
||||||
},
|
|
||||||
"ledFlashOnZap": "LED parpadeante con Nostr Zap",
|
|
||||||
"flFlashOnZap": "Flash de luz frontal con Nostr Zap",
|
|
||||||
"showAll": "Mostrar todo",
|
|
||||||
"hideAll": "Ocultar todo",
|
|
||||||
"flOffWhenDark": "Luz de la pantalla cuando está oscuro",
|
|
||||||
"luxLightToggleText": "Establecer en 0 para desactivar",
|
|
||||||
"verticalDesc": "Descripción de pantalla vertical"
|
|
||||||
},
|
},
|
||||||
"control": {
|
"control": {
|
||||||
"turnOff": "Apagar",
|
"turnOff": "Apagar",
|
||||||
|
|
|
||||||
|
|
@ -42,23 +42,7 @@
|
||||||
"httpAuthUser": "WebUI-gebruikersnaam",
|
"httpAuthUser": "WebUI-gebruikersnaam",
|
||||||
"httpAuthPass": "WebUI-wachtwoord",
|
"httpAuthPass": "WebUI-wachtwoord",
|
||||||
"httpAuthText": "Beveiligd enkel WebUI, niet de API.",
|
"httpAuthText": "Beveiligd enkel WebUI, niet de API.",
|
||||||
"currencies": "Valuta's",
|
"currencies": "Valuta's"
|
||||||
"mowMode": "Mow achtervoegsel",
|
|
||||||
"suffixShareDot": "Achtervoegsel compacte notatie",
|
|
||||||
"section": {
|
|
||||||
"displaysAndLed": "Displays en LED's",
|
|
||||||
"screenSettings": "Schermspecifiek",
|
|
||||||
"dataSource": "Gegevensbron",
|
|
||||||
"extraFeatures": "Extra functies",
|
|
||||||
"system": "Systeem"
|
|
||||||
},
|
|
||||||
"ledFlashOnZap": "Knipper LED bij Nostr Zap",
|
|
||||||
"flFlashOnZap": "Knipper displaylicht bij Nostr Zap",
|
|
||||||
"showAll": "Toon alles",
|
|
||||||
"hideAll": "Alles verbergen",
|
|
||||||
"flOffWhenDark": "Displaylicht uit als het donker is",
|
|
||||||
"luxLightToggleText": "Stel in op 0 om uit te schakelen",
|
|
||||||
"verticalDesc": "Verticale schermbeschrijving"
|
|
||||||
},
|
},
|
||||||
"control": {
|
"control": {
|
||||||
"systemInfo": "Systeeminformatie",
|
"systemInfo": "Systeeminformatie",
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,6 @@
|
||||||
@import '../node_modules/bootstrap/scss/functions';
|
@import '../node_modules/bootstrap/scss/functions';
|
||||||
|
@import '../node_modules/bootstrap/scss/variables';
|
||||||
|
@import '../node_modules/bootstrap/scss/variables-dark';
|
||||||
|
|
||||||
//@import "@fontsource/antonio/latin-400.css";
|
//@import "@fontsource/antonio/latin-400.css";
|
||||||
@import '@fontsource/ubuntu/latin-400.css';
|
@import '@fontsource/ubuntu/latin-400.css';
|
||||||
|
|
@ -7,13 +9,11 @@
|
||||||
|
|
||||||
@import './satsymbol';
|
@import './satsymbol';
|
||||||
|
|
||||||
$color-mode-type: data;
|
$color-mode-type: media-query;
|
||||||
$font-family-base: 'Ubuntu';
|
$font-family-base: 'Ubuntu';
|
||||||
$font-size-base: 0.9rem;
|
$font-size-base: 0.9rem;
|
||||||
$input-font-size-sm: $font-size-base * 0.875;
|
$input-font-size-sm: $font-size-base * 0.875;
|
||||||
|
|
||||||
@import '../node_modules/bootstrap/scss/variables';
|
|
||||||
@import '../node_modules/bootstrap/scss/variables-dark';
|
|
||||||
// $border-radius: .675rem;
|
// $border-radius: .675rem;
|
||||||
|
|
||||||
@import '../node_modules/bootstrap/scss/mixins';
|
@import '../node_modules/bootstrap/scss/mixins';
|
||||||
|
|
@ -43,40 +43,6 @@ $input-font-size-sm: $font-size-base * 0.875;
|
||||||
@import '../node_modules/bootstrap/scss/helpers';
|
@import '../node_modules/bootstrap/scss/helpers';
|
||||||
@import '../node_modules/bootstrap/scss/utilities/api';
|
@import '../node_modules/bootstrap/scss/utilities/api';
|
||||||
|
|
||||||
/* Default state (xs) - sticky */
|
|
||||||
.sticky-xs-top {
|
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
z-index: 1020;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 576px) {
|
|
||||||
main {
|
|
||||||
margin-top: 25px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Remove sticky behavior for larger screens */
|
|
||||||
@media (min-width: 576px) {
|
|
||||||
.sticky-xs-top {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include color-mode(dark) {
|
|
||||||
.navbar {
|
|
||||||
--bs-navbar-color: $light;
|
|
||||||
background-color: $dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include color-mode(light) {
|
|
||||||
.navbar {
|
|
||||||
--bs-navbar-color: $dark;
|
|
||||||
background-color: $light;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
nav {
|
nav {
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
}
|
}
|
||||||
|
|
@ -87,23 +53,6 @@ nav {
|
||||||
|
|
||||||
.btn-group-sm .btn {
|
.btn-group-sm .btn {
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
// text-overflow: ellipsis;
|
|
||||||
// white-space: nowrap;
|
|
||||||
// overflow: hidden;
|
|
||||||
// width: 4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-group-sm {
|
|
||||||
display: flex !important;
|
|
||||||
flex-wrap: wrap !important;
|
|
||||||
gap: 0.25rem !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Remove the border radius override that Bootstrap applies */
|
|
||||||
.btn-group-sm > .btn {
|
|
||||||
border-radius: 0.25rem !important;
|
|
||||||
margin: 0 !important;
|
|
||||||
position: relative !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#customText {
|
#customText {
|
||||||
|
|
@ -114,7 +63,7 @@ nav {
|
||||||
.btclock {
|
.btclock {
|
||||||
background: #000;
|
background: #000;
|
||||||
display: flex;
|
display: flex;
|
||||||
font-size: calc(2vw + 2vh);
|
font-size: calc(3vw + 3vh);
|
||||||
font-family: 'Antonio', sans-serif;
|
font-family: 'Antonio', sans-serif;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
|
@ -155,25 +104,19 @@ nav {
|
||||||
flex-direction: column; /* Stack the text and line vertically */
|
flex-direction: column; /* Stack the text and line vertically */
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-around; /* Distribute items with space between */
|
justify-content: space-around; /* Distribute items with space between */
|
||||||
padding: 5px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.verticalDesc > .splitText:first-child {
|
.splitText div:first-child::after {
|
||||||
.textcontainer {
|
|
||||||
transform: rotate(-90deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.splitText .textcontainer :first-child::after {
|
|
||||||
display: block;
|
display: block;
|
||||||
content: '';
|
content: '';
|
||||||
margin-top: 0px;
|
margin-top: 0px;
|
||||||
border-bottom: 2px solid;
|
border-bottom: 2px solid;
|
||||||
// margin-bottom: 3px;
|
margin-bottom: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.splitText {
|
.splitText {
|
||||||
font-size: calc(0.3vw + 1vh);
|
font-size: calc(0.5vw + 1vh);
|
||||||
|
|
||||||
.top-text,
|
.top-text,
|
||||||
.bottom-text {
|
.bottom-text {
|
||||||
|
|
@ -299,7 +242,3 @@ nav {
|
||||||
input[type='number'] {
|
input[type='number'] {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.lightMode .bitaxelogo {
|
|
||||||
filter: brightness(0) saturate(100%);
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -12,11 +12,9 @@
|
||||||
NavbarBrand,
|
NavbarBrand,
|
||||||
NavbarToggler
|
NavbarToggler
|
||||||
} from '@sveltestrap/sveltestrap';
|
} from '@sveltestrap/sveltestrap';
|
||||||
import { _ } from 'svelte-i18n';
|
|
||||||
|
|
||||||
import { page } from '$app/stores';
|
import { page } from '$app/stores';
|
||||||
import { locale, locales, isLoading } from 'svelte-i18n';
|
import { locale, locales, isLoading } from 'svelte-i18n';
|
||||||
import ColorSchemeSwitcher from '../components/ColorSchemeSwitcher.svelte';
|
|
||||||
|
|
||||||
export const setLocale = (lang: string) => () => {
|
export const setLocale = (lang: string) => () => {
|
||||||
locale.set(lang);
|
locale.set(lang);
|
||||||
|
|
@ -39,7 +37,7 @@
|
||||||
return flagMap[lowercaseCode];
|
return flagMap[lowercaseCode];
|
||||||
} else {
|
} else {
|
||||||
// Return null for unsupported language codes
|
// Return null for unsupported language codes
|
||||||
return flagMap['en'];
|
return null;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -62,23 +60,8 @@
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Navbar expand="md" sticky="xs-top" theme="auto">
|
<Navbar expand="md">
|
||||||
<NavbarBrand class="d-none d-sm-block">₿TClock</NavbarBrand>
|
<NavbarBrand>₿TClock</NavbarBrand>
|
||||||
<Nav class="d-md-none" pills>
|
|
||||||
<NavItem>
|
|
||||||
<NavLink href="#control" active>{$_('section.control.title', { default: 'Control' })}</NavLink
|
|
||||||
>
|
|
||||||
</NavItem>
|
|
||||||
<NavItem>
|
|
||||||
<NavLink href="#status">{$_('section.status.title', { default: 'Status' })}</NavLink>
|
|
||||||
</NavItem>
|
|
||||||
<NavItem>
|
|
||||||
<NavLink class="nav-link" href="#settings"
|
|
||||||
>{$_('section.settings.title', { default: 'Settings' })}</NavLink
|
|
||||||
>
|
|
||||||
</NavItem>
|
|
||||||
</Nav>
|
|
||||||
|
|
||||||
<NavbarToggler on:click={toggle} />
|
<NavbarToggler on:click={toggle} />
|
||||||
|
|
||||||
<Collapse {isOpen} navbar expand="sm">
|
<Collapse {isOpen} navbar expand="sm">
|
||||||
|
|
@ -94,7 +77,7 @@
|
||||||
</NavItem>
|
</NavItem>
|
||||||
</Nav>
|
</Nav>
|
||||||
{#if !$isLoading}
|
{#if !$isLoading}
|
||||||
<Dropdown id="nav-language-dropdown" inNavbar class="me-3">
|
<Dropdown id="nav-language-dropdown" inNavbar>
|
||||||
<DropdownToggle nav caret>{getFlagEmoji($locale)} {languageNames[$locale]}</DropdownToggle>
|
<DropdownToggle nav caret>{getFlagEmoji($locale)} {languageNames[$locale]}</DropdownToggle>
|
||||||
<DropdownMenu end>
|
<DropdownMenu end>
|
||||||
{#each $locales as locale}
|
{#each $locales as locale}
|
||||||
|
|
@ -105,11 +88,8 @@
|
||||||
</DropdownMenu>
|
</DropdownMenu>
|
||||||
</Dropdown>
|
</Dropdown>
|
||||||
{/if}
|
{/if}
|
||||||
<ColorSchemeSwitcher></ColorSchemeSwitcher>
|
|
||||||
</Collapse>
|
</Collapse>
|
||||||
</Navbar>
|
</Navbar>
|
||||||
|
|
||||||
<!-- +layout.svelte -->
|
<!-- +layout.svelte -->
|
||||||
<main>
|
|
||||||
<slot />
|
<slot />
|
||||||
</main>
|
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,6 @@
|
||||||
import { screenSize, updateScreenSize } from '$lib/screen';
|
import { screenSize, updateScreenSize } from '$lib/screen';
|
||||||
|
|
||||||
import { Container, Row, Toast, ToastBody } from '@sveltestrap/sveltestrap';
|
import { Container, Row, Toast, ToastBody } from '@sveltestrap/sveltestrap';
|
||||||
import { replaceState } from '$app/navigation';
|
|
||||||
|
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
import { writable } from 'svelte/store';
|
import { writable } from 'svelte/store';
|
||||||
|
|
@ -17,6 +16,12 @@
|
||||||
bgColor: '0'
|
bgColor: '0'
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// let uiSettings = writable({
|
||||||
|
// inputSize: 'sm',
|
||||||
|
// selectClass: '',
|
||||||
|
// btnSize: 'lg'
|
||||||
|
// });
|
||||||
|
|
||||||
let status = writable({
|
let status = writable({
|
||||||
data: ['L', 'O', 'A', 'D', 'I', 'N', 'G'],
|
data: ['L', 'O', 'A', 'D', 'I', 'N', 'G'],
|
||||||
espFreeHeap: 0,
|
espFreeHeap: 0,
|
||||||
|
|
@ -55,43 +60,7 @@
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
let sections: (HTMLElement | null)[];
|
|
||||||
let observer: IntersectionObserver;
|
|
||||||
const SM_BREAKPOINT = 576;
|
|
||||||
|
|
||||||
const setupObserver = () => {
|
|
||||||
if (window.innerWidth < SM_BREAKPOINT) {
|
|
||||||
observer = new IntersectionObserver(
|
|
||||||
(entries) => {
|
|
||||||
entries.forEach((entry) => {
|
|
||||||
if (entry.isIntersecting) {
|
|
||||||
const id = entry.target.id;
|
|
||||||
replaceState(`#${id}`);
|
|
||||||
|
|
||||||
// Update nav pills
|
|
||||||
document.querySelectorAll('.nav-link').forEach((link) => {
|
|
||||||
link.classList.remove('active');
|
|
||||||
if (link.getAttribute('href') === `#${id}`) {
|
|
||||||
link.classList.add('active');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
{
|
|
||||||
threshold: 0.25 // Trigger when section is 50% visible
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
sections = ['control', 'status', 'settings'].map((id) => document.getElementById(id));
|
|
||||||
|
|
||||||
sections.forEach((section) => observer.observe(section!));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
setupObserver();
|
|
||||||
|
|
||||||
fetchSettingsData();
|
fetchSettingsData();
|
||||||
fetchStatusData();
|
fetchStatusData();
|
||||||
|
|
||||||
|
|
@ -103,11 +72,6 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
function handleResize() {
|
function handleResize() {
|
||||||
if (observer) {
|
|
||||||
observer.disconnect();
|
|
||||||
}
|
|
||||||
setupObserver();
|
|
||||||
|
|
||||||
updateScreenSize();
|
updateScreenSize();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -161,9 +125,7 @@
|
||||||
<Container fluid>
|
<Container fluid>
|
||||||
<Row>
|
<Row>
|
||||||
<Control bind:settings on:showToast={showToast} bind:status lg="3" xxl="4"></Control>
|
<Control bind:settings on:showToast={showToast} bind:status lg="3" xxl="4"></Control>
|
||||||
|
|
||||||
<Status bind:settings bind:status lg="6" xxl="4"></Status>
|
<Status bind:settings bind:status lg="6" xxl="4"></Status>
|
||||||
|
|
||||||
<Settings bind:settings on:showToast={showToast} on:formReset={fetchSettingsData} lg="3" xxl="4"
|
<Settings bind:settings on:showToast={showToast} on:formReset={fetchSettingsData} lg="3" xxl="4"
|
||||||
></Settings>
|
></Settings>
|
||||||
</Row>
|
</Row>
|
||||||
|
|
|
||||||
|
|
@ -105,8 +105,8 @@
|
||||||
export let xxl = xl;
|
export let xxl = xl;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Col {xs} {sm} {md} {lg} {xl} {xxl} class="mb-4 mb-xl-0">
|
<Col {xs} {sm} {md} {lg} {xl} {xxl}>
|
||||||
<Card id="control">
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<CardTitle>{$_('section.control.title', { default: 'Control' })}</CardTitle>
|
<CardTitle>{$_('section.control.title', { default: 'Control' })}</CardTitle>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
|
|
|
||||||
|
|
@ -145,7 +145,7 @@
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
try {
|
try {
|
||||||
const response = await fetch(
|
const response = await fetch(
|
||||||
'https://git.btclock.dev/api/v1/repos/btclock/btclock_v3/releases/latest'
|
'https://api.github.com/repos/btclock/btclock_v3/releases/latest'
|
||||||
);
|
);
|
||||||
|
|
||||||
if (!response.ok) {
|
if (!response.ok) {
|
||||||
|
|
@ -200,7 +200,7 @@
|
||||||
<p>Loading...</p>
|
<p>Loading...</p>
|
||||||
{/if}
|
{/if}
|
||||||
<section class="row row-cols-lg-auto align-items-end">
|
<section class="row row-cols-lg-auto align-items-end">
|
||||||
<div class="col flex-fill">
|
<div class="col-12">
|
||||||
<label for="firmwareFile" class="form-label">Firmware file ({getFirmwareBinaryName()})</label>
|
<label for="firmwareFile" class="form-label">Firmware file ({getFirmwareBinaryName()})</label>
|
||||||
<input
|
<input
|
||||||
type="file"
|
type="file"
|
||||||
|
|
@ -216,7 +216,7 @@
|
||||||
>Update firmware</Button
|
>Update firmware</Button
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
<div class="col flex-fill">
|
<div class="col mt-2">
|
||||||
<label for="webuiFile" class="form-label">WebUI file (littlefs.bin)</label>
|
<label for="webuiFile" class="form-label">WebUI file (littlefs.bin)</label>
|
||||||
<input
|
<input
|
||||||
type="file"
|
type="file"
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
};
|
};
|
||||||
|
|
||||||
export let className = 'btclock-wrapper';
|
export let className = 'btclock-wrapper';
|
||||||
export let verticalDesc = false;
|
|
||||||
// Define the currency symbols as constants
|
// Define the currency symbols as constants
|
||||||
const CURRENCY_USD = '$';
|
const CURRENCY_USD = '$';
|
||||||
const CURRENCY_EUR = '[';
|
const CURRENCY_EUR = '[';
|
||||||
|
|
@ -44,22 +44,21 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class={className} id={className}>
|
<div class={className} id={className}>
|
||||||
<div class={'btclock' + (verticalDesc ? ' verticalDesc' : '')}>
|
<div class="btclock">
|
||||||
{#each status.data as char}
|
{#each status.data as char}
|
||||||
{#if isSplitText(char)}
|
{#if isSplitText(char)}
|
||||||
<div class="splitText">
|
<div class="splitText">
|
||||||
<div class="textcontainer">
|
|
||||||
{#if char.split('/').length}
|
{#if char.split('/').length}
|
||||||
<span class="top-text">{char.split('/')[0]}</span>
|
<span class="top-text">{char.split('/')[0]}</span>
|
||||||
|
<hr />
|
||||||
<span class="bottom-text">{char.split('/')[1]}</span>
|
<span class="bottom-text">{char.split('/')[1]}</span>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
|
||||||
<!-- {#each char.split('/') as part}
|
<!-- {#each char.split('/') as part}
|
||||||
<div class="flex-items">{part}</div>
|
<div class="flex-items">{part}</div>
|
||||||
{/each} -->
|
{/each} -->
|
||||||
</div>
|
</div>
|
||||||
{:else if char.startsWith('mdi')}
|
{:else if char.startsWith('mdi')}
|
||||||
<div class={'digit icon' + (char.endsWith('bitaxe') ? ' icon-img' : '')}>
|
<div class="digit icon">
|
||||||
{#if char.endsWith('rocket')}
|
{#if char.endsWith('rocket')}
|
||||||
<RocketIcon></RocketIcon>
|
<RocketIcon></RocketIcon>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
@ -69,9 +68,6 @@
|
||||||
{#if char.endsWith('bolt')}
|
{#if char.endsWith('bolt')}
|
||||||
<ZapIcon></ZapIcon>
|
<ZapIcon></ZapIcon>
|
||||||
{/if}
|
{/if}
|
||||||
{#if char.endsWith('bitaxe')}
|
|
||||||
<img src="/bitaxe.webp" class="bitaxelogo" alt="BitAxe logo" />
|
|
||||||
{/if}
|
|
||||||
</div>
|
</div>
|
||||||
{:else if char === 'STS'}
|
{:else if char === 'STS'}
|
||||||
<div class="digit sats">S</div>
|
<div class="digit sats">S</div>
|
||||||
|
|
@ -86,22 +82,8 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style lang="scss">
|
<style>
|
||||||
.icon {
|
.icon {
|
||||||
fill: currentColor;
|
fill: currentColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btclock-wrapper .btclock .icon.icon-img {
|
|
||||||
// padding: 0 15px;
|
|
||||||
aspect-ratio: 1;
|
|
||||||
width: calc(100 / 7);
|
|
||||||
|
|
||||||
img {
|
|
||||||
max-width: 95%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bitaxelogo {
|
|
||||||
transform: rotate(-90deg);
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -21,12 +21,9 @@
|
||||||
Tooltip,
|
Tooltip,
|
||||||
Row
|
Row
|
||||||
} from '@sveltestrap/sveltestrap';
|
} from '@sveltestrap/sveltestrap';
|
||||||
|
import EyeIcon from '../icons/EyeIcon.svelte';
|
||||||
import EyeIcon from 'svelte-bootstrap-icons/lib/Eye.svelte';
|
import EyeSlashIcon from '../icons/EyeSlashIcon.svelte';
|
||||||
import EyeSlashIcon from 'svelte-bootstrap-icons/lib/EyeSlash.svelte';
|
|
||||||
|
|
||||||
import { derived } from 'svelte/store';
|
import { derived } from 'svelte/store';
|
||||||
import ToggleHeader from '../components/ToggleHeader.svelte';
|
|
||||||
|
|
||||||
export let settings;
|
export let settings;
|
||||||
|
|
||||||
|
|
@ -199,193 +196,21 @@
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const showAll = (show: boolean) => {
|
|
||||||
screenSettingsIsOpen = show;
|
|
||||||
displaysAndLedIsOpen = show;
|
|
||||||
dataSourceIsOpen = show;
|
|
||||||
extraFeaturesIsOpen = show;
|
|
||||||
systemIsOpen = show;
|
|
||||||
};
|
|
||||||
|
|
||||||
export let xs = 12;
|
export let xs = 12;
|
||||||
export let sm = xs;
|
export let sm = xs;
|
||||||
export let md = sm;
|
export let md = sm;
|
||||||
export let lg = md;
|
export let lg = md;
|
||||||
export let xl = lg;
|
export let xl = lg;
|
||||||
export let xxl = xl;
|
export let xxl = xl;
|
||||||
|
|
||||||
let screenSettingsIsOpen: boolean,
|
|
||||||
displaysAndLedIsOpen: boolean,
|
|
||||||
dataSourceIsOpen: boolean,
|
|
||||||
extraFeaturesIsOpen: boolean,
|
|
||||||
systemIsOpen: boolean;
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Col {xs} {sm} {md} {lg} {xl} {xxl} class="mb-4 mb-xl-0">
|
<Col {xs} {sm} {md} {lg} {xl} {xxl}>
|
||||||
<Card id="settings">
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<div class="float-end">
|
|
||||||
<small
|
|
||||||
><button
|
|
||||||
on:click={() => {
|
|
||||||
showAll(true);
|
|
||||||
}}
|
|
||||||
type="button">{$_('section.settings.showAll')}</button
|
|
||||||
>
|
|
||||||
|
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
on:click={() => {
|
|
||||||
showAll(false);
|
|
||||||
}}>{$_('section.settings.hideAll')}</button
|
|
||||||
></small
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<CardTitle>{$_('section.settings.title', { default: 'Settings' })}</CardTitle>
|
<CardTitle>{$_('section.settings.title', { default: 'Settings' })}</CardTitle>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBody>
|
<CardBody>
|
||||||
<Form on:submit={onSave} class="clearfix">
|
<Form on:submit={onSave}>
|
||||||
<Row>
|
|
||||||
<ToggleHeader
|
|
||||||
header={$_('section.settings.section.screenSettings')}
|
|
||||||
defaultOpen={true}
|
|
||||||
isOpen={screenSettingsIsOpen}
|
|
||||||
>
|
|
||||||
<Row>
|
|
||||||
<Col md="6" xl="12" xxl="6">
|
|
||||||
<Input
|
|
||||||
id="stealFocus"
|
|
||||||
bind:checked={$settings.stealFocus}
|
|
||||||
type="switch"
|
|
||||||
bsSize={$uiSettings.inputSize}
|
|
||||||
label={$_('section.settings.StealFocusOnNewBlock')}
|
|
||||||
/>
|
|
||||||
</Col>
|
|
||||||
<Col md="6" xl="12" xxl="6">
|
|
||||||
<Input
|
|
||||||
id="mcapBigChar"
|
|
||||||
bind:checked={$settings.mcapBigChar}
|
|
||||||
type="switch"
|
|
||||||
bsSize={$uiSettings.inputSize}
|
|
||||||
label={$_('section.settings.useBigCharsMcap')}
|
|
||||||
/>
|
|
||||||
</Col>
|
|
||||||
|
|
||||||
<Col md="6" xl="12" xxl="6">
|
|
||||||
<Input
|
|
||||||
id="useBlkCountdown"
|
|
||||||
bind:checked={$settings.useBlkCountdown}
|
|
||||||
type="switch"
|
|
||||||
bsSize={$uiSettings.inputSize}
|
|
||||||
label={$_('section.settings.useBlkCountdown')}
|
|
||||||
/>
|
|
||||||
</Col>
|
|
||||||
<Col md="6" xl="12" xxl="6">
|
|
||||||
<Input
|
|
||||||
id="useSatsSymbol"
|
|
||||||
bind:checked={$settings.useSatsSymbol}
|
|
||||||
type="switch"
|
|
||||||
bsSize={$uiSettings.inputSize}
|
|
||||||
label={$_('section.settings.useSatsSymbol')}
|
|
||||||
/>
|
|
||||||
</Col>
|
|
||||||
<Col md="6" xl="12" xxl="6">
|
|
||||||
<Input
|
|
||||||
id="suffixPrice"
|
|
||||||
bind:checked={$settings.suffixPrice}
|
|
||||||
type="switch"
|
|
||||||
bsSize={$uiSettings.inputSize}
|
|
||||||
label={$_('section.settings.suffixPrice')}
|
|
||||||
/>
|
|
||||||
</Col>
|
|
||||||
<Col md="6" xl="12" xxl="6">
|
|
||||||
<Input
|
|
||||||
disabled={!$settings.suffixPrice}
|
|
||||||
id="mowMode"
|
|
||||||
bind:checked={$settings.mowMode}
|
|
||||||
type="switch"
|
|
||||||
bsSize={$uiSettings.inputSize}
|
|
||||||
label={$_('section.settings.mowMode')}
|
|
||||||
/>
|
|
||||||
</Col>
|
|
||||||
<Col md="6" xl="12" xxl="6">
|
|
||||||
<Input
|
|
||||||
disabled={!$settings.suffixPrice}
|
|
||||||
id="suffixShareDot"
|
|
||||||
bind:checked={$settings.suffixShareDot}
|
|
||||||
type="switch"
|
|
||||||
bsSize={$uiSettings.inputSize}
|
|
||||||
label={$_('section.settings.suffixShareDot')}
|
|
||||||
/>
|
|
||||||
</Col>
|
|
||||||
<Col md="6" xl="12" xxl="6">
|
|
||||||
<Input
|
|
||||||
id="verticalDesc"
|
|
||||||
bind:checked={$settings.verticalDesc}
|
|
||||||
type="switch"
|
|
||||||
bsSize={$uiSettings.inputSize}
|
|
||||||
label={$_('section.settings.verticalDesc')}
|
|
||||||
/>
|
|
||||||
</Col>
|
|
||||||
|
|
||||||
{#if !$settings.actCurrencies}
|
|
||||||
<Col md="6" xl="12" xxl="6">
|
|
||||||
<Input
|
|
||||||
id="fetchEurPrice"
|
|
||||||
bind:checked={$settings.fetchEurPrice}
|
|
||||||
type="switch"
|
|
||||||
bsSize={$uiSettings.inputSize}
|
|
||||||
label="{$_('section.settings.fetchEuroPrice')} ({$_('restartRequired')})"
|
|
||||||
/>
|
|
||||||
</Col>
|
|
||||||
{/if}
|
|
||||||
</Row>
|
|
||||||
<Row>
|
|
||||||
<h5>{$_('section.settings.screens')}</h5>
|
|
||||||
{#if $settings.screens}
|
|
||||||
{#each $settings.screens as s}
|
|
||||||
<Col md="6" xl="12" xxl="6">
|
|
||||||
<Input
|
|
||||||
id="screens_{s.id}"
|
|
||||||
bind:checked={s.enabled}
|
|
||||||
type="switch"
|
|
||||||
bsSize={$uiSettings.inputSize}
|
|
||||||
label={s.name}
|
|
||||||
/>
|
|
||||||
</Col>
|
|
||||||
{/each}
|
|
||||||
{/if}
|
|
||||||
</Row>
|
|
||||||
{#if $settings.actCurrencies && $settings.useNostr !== true}
|
|
||||||
<Row>
|
|
||||||
<h5>{$_('section.settings.currencies')}</h5>
|
|
||||||
<small>{$_('restartRequired')}</small>
|
|
||||||
{#if $settings.availableCurrencies}
|
|
||||||
{#each $settings.availableCurrencies as c}
|
|
||||||
<Col md="6" xl="12" xxl="6">
|
|
||||||
<div class="form-check form-control-{$uiSettings.inputSize}">
|
|
||||||
<input
|
|
||||||
id="currency_{c}"
|
|
||||||
bind:group={$settings.actCurrencies}
|
|
||||||
value={c}
|
|
||||||
type="checkbox"
|
|
||||||
class="form-check-input"
|
|
||||||
bsSize={$uiSettings.inputSize}
|
|
||||||
label={c}
|
|
||||||
/>
|
|
||||||
<label class="form-check-label" for="currency_{c}">{c}</label>
|
|
||||||
</div>
|
|
||||||
</Col>
|
|
||||||
{/each}
|
|
||||||
{/if}
|
|
||||||
</Row>
|
|
||||||
{/if}
|
|
||||||
</ToggleHeader>
|
|
||||||
</Row><Row>
|
|
||||||
<ToggleHeader
|
|
||||||
header={$_('section.settings.section.displaysAndLed')}
|
|
||||||
isOpen={displaysAndLedIsOpen}
|
|
||||||
>
|
|
||||||
<Row>
|
<Row>
|
||||||
<Label md={6} for="textColor" size={$uiSettings.inputSize}
|
<Label md={6} for="textColor" size={$uiSettings.inputSize}
|
||||||
>{$_('section.settings.textColor', { default: 'Text color' })}</Label
|
>{$_('section.settings.textColor', { default: 'Text color' })}</Label
|
||||||
|
|
@ -460,6 +285,28 @@
|
||||||
<FormText>{$_('section.settings.shortAmountsWarning')}</FormText>
|
<FormText>{$_('section.settings.shortAmountsWarning')}</FormText>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
|
<Row>
|
||||||
|
<Label md={6} for="tzOffset" size={$uiSettings.inputSize}
|
||||||
|
>{$_('section.settings.timezoneOffset')}</Label
|
||||||
|
>
|
||||||
|
<Col md="6">
|
||||||
|
<InputGroup size={$uiSettings.inputSize}>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
step="1"
|
||||||
|
name="tzOffset"
|
||||||
|
id="tzOffset"
|
||||||
|
required
|
||||||
|
bind:value={$settings.tzOffset}
|
||||||
|
/>
|
||||||
|
<InputGroupText>{$_('time.minutes')}</InputGroupText>
|
||||||
|
<Button type="button" color="info" on:click={getTzOffsetFromSystem}
|
||||||
|
>{$_('auto-detect')}</Button
|
||||||
|
>
|
||||||
|
</InputGroup>
|
||||||
|
<FormText>{$_('section.settings.tzOffsetHelpText')}</FormText>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
<Row>
|
<Row>
|
||||||
<Label md={6} for="ledBrightness" size={$uiSettings.inputSize}
|
<Label md={6} for="ledBrightness" size={$uiSettings.inputSize}
|
||||||
>{$_('section.settings.ledBrightness')}</Label
|
>{$_('section.settings.ledBrightness')}</Label
|
||||||
|
|
@ -526,156 +373,9 @@
|
||||||
max={1000}
|
max={1000}
|
||||||
step={1}
|
step={1}
|
||||||
/>
|
/>
|
||||||
<FormText>{$_('section.settings.luxLightToggleText')}</FormText>
|
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
{/if}
|
{/if}
|
||||||
<Row>
|
|
||||||
<Col md="6" xl="12" xxl="6">
|
|
||||||
<Input
|
|
||||||
id="ledTestOnPower"
|
|
||||||
bind:checked={$settings.ledTestOnPower}
|
|
||||||
type="switch"
|
|
||||||
bsSize={$uiSettings.inputSize}
|
|
||||||
label={$_('section.settings.ledPowerOnTest')}
|
|
||||||
/>
|
|
||||||
</Col>
|
|
||||||
<Col md="6" xl="12" xxl="6">
|
|
||||||
<Input
|
|
||||||
id="ledFlashOnUpd"
|
|
||||||
bind:checked={$settings.ledFlashOnUpd}
|
|
||||||
type="switch"
|
|
||||||
bsSize={$uiSettings.inputSize}
|
|
||||||
label={$_('section.settings.ledFlashOnBlock')}
|
|
||||||
/>
|
|
||||||
</Col>
|
|
||||||
<Col md="6" xl="12" xxl="6">
|
|
||||||
<Input
|
|
||||||
id="disableLeds"
|
|
||||||
bind:checked={$settings.disableLeds}
|
|
||||||
type="switch"
|
|
||||||
bsSize={$uiSettings.inputSize}
|
|
||||||
label={$_('section.settings.disableLeds')}
|
|
||||||
/>
|
|
||||||
</Col>
|
|
||||||
{#if $settings.hasFrontlight}
|
|
||||||
<Col md="6" xl="12" xxl="6">
|
|
||||||
<Input
|
|
||||||
id="flDisable"
|
|
||||||
bind:checked={$settings.flDisable}
|
|
||||||
type="switch"
|
|
||||||
bsSize={$uiSettings.inputSize}
|
|
||||||
label={$_('section.settings.flDisable')}
|
|
||||||
/>
|
|
||||||
</Col>
|
|
||||||
{/if}
|
|
||||||
{#if $settings.hasFrontlight && !$settings.flDisable}
|
|
||||||
<Col md="6" xl="12" xxl="6">
|
|
||||||
<Input
|
|
||||||
id="flAlwaysOn"
|
|
||||||
bind:checked={$settings.flAlwaysOn}
|
|
||||||
type="switch"
|
|
||||||
bsSize={$uiSettings.inputSize}
|
|
||||||
label={$_('section.settings.flAlwaysOn')}
|
|
||||||
/>
|
|
||||||
</Col>
|
|
||||||
<Col md="6" xl="12" xxl="6">
|
|
||||||
<Input
|
|
||||||
id="flFlashOnUpd"
|
|
||||||
bind:checked={$settings.flFlashOnUpd}
|
|
||||||
type="switch"
|
|
||||||
bsSize={$uiSettings.inputSize}
|
|
||||||
label={$_('section.settings.flFlashOnUpd')}
|
|
||||||
/>
|
|
||||||
</Col>
|
|
||||||
<Col md="6" xl="12" xxl="6">
|
|
||||||
<Input
|
|
||||||
id="flOffWhenDark"
|
|
||||||
bind:checked={$settings.flOffWhenDark}
|
|
||||||
type="switch"
|
|
||||||
bsSize={$uiSettings.inputSize}
|
|
||||||
label={$_('section.settings.flOffWhenDark')}
|
|
||||||
/>
|
|
||||||
</Col>
|
|
||||||
{/if}
|
|
||||||
</Row>
|
|
||||||
</ToggleHeader>
|
|
||||||
</Row><Row>
|
|
||||||
<ToggleHeader
|
|
||||||
header={$_('section.settings.section.dataSource')}
|
|
||||||
isOpen={dataSourceIsOpen}
|
|
||||||
>
|
|
||||||
<Row>
|
|
||||||
<Label md={6} for="mempoolInstance" size="sm"
|
|
||||||
>{$_('section.settings.mempoolnstance')}</Label
|
|
||||||
>
|
|
||||||
<Col md="6">
|
|
||||||
<InputGroup size={$uiSettings.inputSize}>
|
|
||||||
<Input
|
|
||||||
type="text"
|
|
||||||
bind:value={$settings.mempoolInstance}
|
|
||||||
name="mempoolInstance"
|
|
||||||
id="mempoolInstance"
|
|
||||||
disabled={$settings.ownDataSource}
|
|
||||||
bsSize="sm"
|
|
||||||
required
|
|
||||||
></Input>
|
|
||||||
<InputGroupText>
|
|
||||||
<Input
|
|
||||||
addon
|
|
||||||
type="checkbox"
|
|
||||||
bind:checked={$settings.mempoolSecure}
|
|
||||||
disabled={$settings.ownDataSource}
|
|
||||||
bsSize={$uiSettings.inputSize}
|
|
||||||
/>
|
|
||||||
HTTPS
|
|
||||||
</InputGroupText>
|
|
||||||
</InputGroup>
|
|
||||||
<FormText>{$_('section.settings.mempoolInstanceHelpText')}</FormText>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
<Row>
|
|
||||||
<Col md="6" xl="12" xxl="6">
|
|
||||||
<Input
|
|
||||||
id="ownDataSource"
|
|
||||||
bind:checked={$settings.ownDataSource}
|
|
||||||
type="switch"
|
|
||||||
bsSize={$uiSettings.inputSize}
|
|
||||||
label="{$_('section.settings.ownDataSource')} ({$_('restartRequired')})"
|
|
||||||
/>
|
|
||||||
</Col>
|
|
||||||
{#if $settings.nostrRelay}
|
|
||||||
<Col md="6" xl="12" xxl="6">
|
|
||||||
<Input
|
|
||||||
id="useNostr"
|
|
||||||
bind:checked={$settings.useNostr}
|
|
||||||
type="switch"
|
|
||||||
bsSize={$uiSettings.inputSize}
|
|
||||||
label="{$_('section.settings.useNostr')} ({$_('restartRequired')})"
|
|
||||||
></Input>
|
|
||||||
<Tooltip target="useNostr" placement="left">
|
|
||||||
{$_('section.settings.useNostrTooltip')}
|
|
||||||
</Tooltip>
|
|
||||||
</Col>
|
|
||||||
{/if}
|
|
||||||
{#if 'stagingSource' in $settings}
|
|
||||||
<Col md="6" xl="12" xxl="6">
|
|
||||||
<Input
|
|
||||||
id="stagingSource"
|
|
||||||
bind:checked={$settings.stagingSource}
|
|
||||||
type="switch"
|
|
||||||
bsSize={$uiSettings.inputSize}
|
|
||||||
label="{$_('section.settings.stagingSource')} ({$_('restartRequired')})"
|
|
||||||
/>
|
|
||||||
</Col>
|
|
||||||
{/if}
|
|
||||||
</Row>
|
|
||||||
</ToggleHeader>
|
|
||||||
</Row><Row>
|
|
||||||
<ToggleHeader
|
|
||||||
header={$_('section.settings.section.extraFeatures')}
|
|
||||||
isOpen={extraFeaturesIsOpen}
|
|
||||||
>
|
|
||||||
{#if $settings.bitaxeEnabled}
|
{#if $settings.bitaxeEnabled}
|
||||||
<Row>
|
<Row>
|
||||||
<Label md={6} for="bitaxeHostname" size={$uiSettings.inputSize}
|
<Label md={6} for="bitaxeHostname" size={$uiSettings.inputSize}
|
||||||
|
|
@ -766,79 +466,37 @@
|
||||||
</Row>
|
</Row>
|
||||||
{/if}
|
{/if}
|
||||||
<Row>
|
<Row>
|
||||||
{#if 'bitaxeEnabled' in $settings}
|
<Label md={6} for="mempoolInstance" size="sm"
|
||||||
<Col md="6" xl="12" xxl="6">
|
>{$_('section.settings.mempoolnstance')}</Label
|
||||||
<Input
|
|
||||||
id="bitaxeEnabled"
|
|
||||||
bind:checked={$settings.bitaxeEnabled}
|
|
||||||
type="switch"
|
|
||||||
bsSize={$uiSettings.inputSize}
|
|
||||||
label="{$_('section.settings.bitaxeEnabled')} ({$_('restartRequired')})"
|
|
||||||
/>
|
|
||||||
</Col>
|
|
||||||
{/if}
|
|
||||||
{#if 'nostrZapNotify' in $settings}
|
|
||||||
<Col md="6" xl="12" xxl="6">
|
|
||||||
<Input
|
|
||||||
id="nostrZapNotify"
|
|
||||||
bind:checked={$settings.nostrZapNotify}
|
|
||||||
type="switch"
|
|
||||||
bsSize={$uiSettings.inputSize}
|
|
||||||
label="{$_('section.settings.nostrZapNotify')} ({$_('restartRequired')})"
|
|
||||||
/>
|
|
||||||
</Col>
|
|
||||||
<Col md="6" xl="12" xxl="6">
|
|
||||||
<Input
|
|
||||||
id="ledFlashOnZap"
|
|
||||||
bind:checked={$settings.ledFlashOnZap}
|
|
||||||
type="switch"
|
|
||||||
bsSize={$uiSettings.inputSize}
|
|
||||||
label={$_('section.settings.ledFlashOnZap')}
|
|
||||||
/>
|
|
||||||
</Col>
|
|
||||||
{#if $settings.hasFrontlight && !$settings.flDisable}
|
|
||||||
<Col md="6" xl="12" xxl="6">
|
|
||||||
<Input
|
|
||||||
id="flFlashOnZap"
|
|
||||||
bind:checked={$settings.flFlashOnZap}
|
|
||||||
type="switch"
|
|
||||||
bsSize={$uiSettings.inputSize}
|
|
||||||
label={$_('section.settings.flFlashOnZap')}
|
|
||||||
/>
|
|
||||||
</Col>
|
|
||||||
{/if}
|
|
||||||
{/if}
|
|
||||||
</Row>
|
|
||||||
</ToggleHeader>
|
|
||||||
</Row><Row>
|
|
||||||
<ToggleHeader header={$_('section.settings.section.system')} isOpen={systemIsOpen}>
|
|
||||||
<Row>
|
|
||||||
<Label md={6} for="tzOffset" size={$uiSettings.inputSize}
|
|
||||||
>{$_('section.settings.timezoneOffset')}</Label
|
|
||||||
>
|
>
|
||||||
<Col md="6">
|
<Col md="6">
|
||||||
<InputGroup size={$uiSettings.inputSize}>
|
<InputGroup size={$uiSettings.inputSize}>
|
||||||
<Input
|
<Input
|
||||||
type="number"
|
type="text"
|
||||||
step="1"
|
bind:value={$settings.mempoolInstance}
|
||||||
name="tzOffset"
|
name="mempoolInstance"
|
||||||
id="tzOffset"
|
id="mempoolInstance"
|
||||||
|
disabled={$settings.ownDataSource}
|
||||||
|
bsSize="sm"
|
||||||
required
|
required
|
||||||
bind:value={$settings.tzOffset}
|
></Input>
|
||||||
|
<InputGroupText>
|
||||||
|
<Input
|
||||||
|
addon
|
||||||
|
type="checkbox"
|
||||||
|
bind:checked={$settings.mempoolSecure}
|
||||||
|
disabled={$settings.ownDataSource}
|
||||||
|
bsSize={$uiSettings.inputSize}
|
||||||
/>
|
/>
|
||||||
<InputGroupText>{$_('time.minutes')}</InputGroupText>
|
HTTPS
|
||||||
<Button type="button" color="info" on:click={getTzOffsetFromSystem}
|
</InputGroupText>
|
||||||
>{$_('auto-detect')}</Button
|
|
||||||
>
|
|
||||||
</InputGroup>
|
</InputGroup>
|
||||||
<FormText>{$_('section.settings.tzOffsetHelpText')}</FormText>
|
<FormText>{$_('section.settings.mempoolInstanceHelpText')}</FormText>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
{#if $settings.httpAuthEnabled}
|
{#if $settings.httpAuthEnabled}
|
||||||
<Row>
|
<Row>
|
||||||
<Label md={6} for="httpAuthUser" size="sm"
|
<Label md={6} for="httpAuthUser" size="sm">{$_('section.settings.httpAuthUser')}</Label>
|
||||||
>{$_('section.settings.httpAuthUser')}</Label
|
|
||||||
>
|
|
||||||
<Col md="6">
|
<Col md="6">
|
||||||
<Input
|
<Input
|
||||||
type="text"
|
type="text"
|
||||||
|
|
@ -851,9 +509,7 @@
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
<Row>
|
<Row>
|
||||||
<Label md={6} for="httpAuthPass" size="sm"
|
<Label md={6} for="httpAuthPass" size="sm">{$_('section.settings.httpAuthPass')}</Label>
|
||||||
>{$_('section.settings.httpAuthPass')}</Label
|
|
||||||
>
|
|
||||||
<Col md="6">
|
<Col md="6">
|
||||||
<InputGroup size={$uiSettings.inputSize}>
|
<InputGroup size={$uiSettings.inputSize}>
|
||||||
<Input
|
<Input
|
||||||
|
|
@ -931,6 +587,166 @@
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
<Row>
|
<Row>
|
||||||
|
<Col md="6" xl="12" xxl="6">
|
||||||
|
<Input
|
||||||
|
id="ledTestOnPower"
|
||||||
|
bind:checked={$settings.ledTestOnPower}
|
||||||
|
type="switch"
|
||||||
|
bsSize={$uiSettings.inputSize}
|
||||||
|
label={$_('section.settings.ledPowerOnTest')}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
<Col md="6" xl="12" xxl="6">
|
||||||
|
<Input
|
||||||
|
id="ledFlashOnUpd"
|
||||||
|
bind:checked={$settings.ledFlashOnUpd}
|
||||||
|
type="switch"
|
||||||
|
bsSize={$uiSettings.inputSize}
|
||||||
|
label={$_('section.settings.ledFlashOnBlock')}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
<Col md="6" xl="12" xxl="6">
|
||||||
|
<Input
|
||||||
|
id="stealFocus"
|
||||||
|
bind:checked={$settings.stealFocus}
|
||||||
|
type="switch"
|
||||||
|
bsSize={$uiSettings.inputSize}
|
||||||
|
label={$_('section.settings.StealFocusOnNewBlock')}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
<Col md="6" xl="12" xxl="6">
|
||||||
|
<Input
|
||||||
|
id="mcapBigChar"
|
||||||
|
bind:checked={$settings.mcapBigChar}
|
||||||
|
type="switch"
|
||||||
|
bsSize={$uiSettings.inputSize}
|
||||||
|
label={$_('section.settings.useBigCharsMcap')}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
<Col md="6" xl="12" xxl="6">
|
||||||
|
<Input
|
||||||
|
id="useBlkCountdown"
|
||||||
|
bind:checked={$settings.useBlkCountdown}
|
||||||
|
type="switch"
|
||||||
|
bsSize={$uiSettings.inputSize}
|
||||||
|
label={$_('section.settings.useBlkCountdown')}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
<Col md="6" xl="12" xxl="6">
|
||||||
|
<Input
|
||||||
|
id="useSatsSymbol"
|
||||||
|
bind:checked={$settings.useSatsSymbol}
|
||||||
|
type="switch"
|
||||||
|
bsSize={$uiSettings.inputSize}
|
||||||
|
label={$_('section.settings.useSatsSymbol')}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
<Col md="6" xl="12" xxl="6">
|
||||||
|
<Input
|
||||||
|
id="suffixPrice"
|
||||||
|
bind:checked={$settings.suffixPrice}
|
||||||
|
type="switch"
|
||||||
|
bsSize={$uiSettings.inputSize}
|
||||||
|
label={$_('section.settings.suffixPrice')}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
<Col md="6" xl="12" xxl="6">
|
||||||
|
<Input
|
||||||
|
id="disableLeds"
|
||||||
|
bind:checked={$settings.disableLeds}
|
||||||
|
type="switch"
|
||||||
|
bsSize={$uiSettings.inputSize}
|
||||||
|
label={$_('section.settings.disableLeds')}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
{#if $settings.hasFrontlight}
|
||||||
|
<Col md="6" xl="12" xxl="6">
|
||||||
|
<Input
|
||||||
|
id="flDisable"
|
||||||
|
bind:checked={$settings.flDisable}
|
||||||
|
type="switch"
|
||||||
|
bsSize={$uiSettings.inputSize}
|
||||||
|
label={$_('section.settings.flDisable')}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
{/if}
|
||||||
|
{#if $settings.hasFrontlight && !$settings.flDisable}
|
||||||
|
<Col md="6" xl="12" xxl="6">
|
||||||
|
<Input
|
||||||
|
id="flAlwaysOn"
|
||||||
|
bind:checked={$settings.flAlwaysOn}
|
||||||
|
type="switch"
|
||||||
|
bsSize={$uiSettings.inputSize}
|
||||||
|
label={$_('section.settings.flAlwaysOn')}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
<Col md="6" xl="12" xxl="6">
|
||||||
|
<Input
|
||||||
|
id="flFlashOnUpd"
|
||||||
|
bind:checked={$settings.flFlashOnUpd}
|
||||||
|
type="switch"
|
||||||
|
bsSize={$uiSettings.inputSize}
|
||||||
|
label={$_('section.settings.flFlashOnUpd')}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
{/if}
|
||||||
|
{#if !$settings.actCurrencies}
|
||||||
|
<Col md="6" xl="12" xxl="6">
|
||||||
|
<Input
|
||||||
|
id="fetchEurPrice"
|
||||||
|
bind:checked={$settings.fetchEurPrice}
|
||||||
|
type="switch"
|
||||||
|
bsSize={$uiSettings.inputSize}
|
||||||
|
label="{$_('section.settings.fetchEuroPrice')} ({$_('restartRequired')})"
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
{/if}
|
||||||
|
<Col md="6" xl="12" xxl="6">
|
||||||
|
<Input
|
||||||
|
id="ownDataSource"
|
||||||
|
bind:checked={$settings.ownDataSource}
|
||||||
|
type="switch"
|
||||||
|
bsSize={$uiSettings.inputSize}
|
||||||
|
label="{$_('section.settings.ownDataSource')} ({$_('restartRequired')})"
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
{#if $settings.nostrRelay}
|
||||||
|
<Col md="6" xl="12" xxl="6">
|
||||||
|
<Input
|
||||||
|
id="useNostr"
|
||||||
|
bind:checked={$settings.useNostr}
|
||||||
|
type="switch"
|
||||||
|
bsSize={$uiSettings.inputSize}
|
||||||
|
label="{$_('section.settings.useNostr')} ({$_('restartRequired')})"
|
||||||
|
></Input>
|
||||||
|
<Tooltip target="useNostr" placement="left">
|
||||||
|
{$_('section.settings.useNostrTooltip')}
|
||||||
|
</Tooltip>
|
||||||
|
</Col>
|
||||||
|
{/if}
|
||||||
|
{#if 'nostrZapNotify' in $settings}
|
||||||
|
<Col md="6" xl="12" xxl="6">
|
||||||
|
<Input
|
||||||
|
id="nostrZapNotify"
|
||||||
|
bind:checked={$settings.nostrZapNotify}
|
||||||
|
type="switch"
|
||||||
|
bsSize={$uiSettings.inputSize}
|
||||||
|
label="{$_('section.settings.nostrZapNotify')} ({$_('restartRequired')})"
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
{/if}
|
||||||
|
{#if 'bitaxeEnabled' in $settings}
|
||||||
|
<Col md="6" xl="12" xxl="6">
|
||||||
|
<Input
|
||||||
|
id="bitaxeEnabled"
|
||||||
|
bind:checked={$settings.bitaxeEnabled}
|
||||||
|
type="switch"
|
||||||
|
bsSize={$uiSettings.inputSize}
|
||||||
|
label="{$_('section.settings.bitaxeEnabled')} ({$_('restartRequired')})"
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
{/if}
|
||||||
<Col md="6" xl="12" xxl="6">
|
<Col md="6" xl="12" xxl="6">
|
||||||
<Input
|
<Input
|
||||||
id="otaEnabled"
|
id="otaEnabled"
|
||||||
|
|
@ -958,10 +774,59 @@
|
||||||
label="{$_('section.settings.httpAuthEnabled')} ({$_('restartRequired')})"
|
label="{$_('section.settings.httpAuthEnabled')} ({$_('restartRequired')})"
|
||||||
/>
|
/>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
{#if 'stagingSource' in $settings}
|
||||||
</ToggleHeader>
|
<Col md="6" xl="12" xxl="6">
|
||||||
|
<Input
|
||||||
|
id="stagingSource"
|
||||||
|
bind:checked={$settings.stagingSource}
|
||||||
|
type="switch"
|
||||||
|
bsSize={$uiSettings.inputSize}
|
||||||
|
label="{$_('section.settings.stagingSource')} ({$_('restartRequired')})"
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
{/if}
|
||||||
</Row>
|
</Row>
|
||||||
|
|
||||||
|
<Row>
|
||||||
|
<h3>{$_('section.settings.screens')}</h3>
|
||||||
|
{#if $settings.screens}
|
||||||
|
{#each $settings.screens as s}
|
||||||
|
<Col md="6" xl="12" xxl="6">
|
||||||
|
<Input
|
||||||
|
id="screens_{s.id}"
|
||||||
|
bind:checked={s.enabled}
|
||||||
|
type="switch"
|
||||||
|
bsSize={$uiSettings.inputSize}
|
||||||
|
label={s.name}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
{/each}
|
||||||
|
{/if}
|
||||||
|
</Row>
|
||||||
|
{#if $settings.actCurrencies && $settings.useNostr !== true}
|
||||||
|
<Row>
|
||||||
|
<h3>{$_('section.settings.currencies')}</h3>
|
||||||
|
<small>{$_('restartRequired')}</small>
|
||||||
|
{#if $settings.availableCurrencies}
|
||||||
|
{#each $settings.availableCurrencies as c}
|
||||||
|
<Col md="6" xl="12" xxl="6">
|
||||||
|
<div class="form-check form-control-{$uiSettings.inputSize}">
|
||||||
|
<input
|
||||||
|
id="currency_{c}"
|
||||||
|
bind:group={$settings.actCurrencies}
|
||||||
|
value={c}
|
||||||
|
type="checkbox"
|
||||||
|
class="form-check-input"
|
||||||
|
bsSize={$uiSettings.inputSize}
|
||||||
|
label={c}
|
||||||
|
/>
|
||||||
|
<label class="form-check-label" for="currency_{c}">{c}</label>
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
{/each}
|
||||||
|
{/if}
|
||||||
|
</Row>
|
||||||
|
{/if}
|
||||||
<Row>
|
<Row>
|
||||||
<Col class="d-flex justify-content-end">
|
<Col class="d-flex justify-content-end">
|
||||||
<Button on:click={handleReset} color="secondary">{$_('button.reset')}</Button>
|
<Button on:click={handleReset} color="secondary">{$_('button.reset')}</Button>
|
||||||
|
|
|
||||||
|
|
@ -104,8 +104,8 @@
|
||||||
export let xxl = xl;
|
export let xxl = xl;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Col {xs} {sm} {md} {lg} {xl} {xxl} class="mb-4 mb-xl-0">
|
<Col {xs} {sm} {md} {lg} {xl} {xxl}>
|
||||||
<Card id="status">
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<CardTitle>{$_('section.status.title', { default: 'Status' })}</CardTitle>
|
<CardTitle>{$_('section.status.title', { default: 'Status' })}</CardTitle>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
|
|
@ -136,7 +136,7 @@
|
||||||
</ButtonGroup>
|
</ButtonGroup>
|
||||||
</div>
|
</div>
|
||||||
{#if $settings.actCurrencies && $settings.ownDataSource}
|
{#if $settings.actCurrencies && $settings.ownDataSource}
|
||||||
<div class="d-flex justify-content-center d-sm-flex mt-2">
|
<div class="d-flex justify-content-center d-none d-sm-flex mt-2">
|
||||||
<ButtonGroup size="sm">
|
<ButtonGroup size="sm">
|
||||||
{#each $settings.actCurrencies as c}
|
{#each $settings.actCurrencies as c}
|
||||||
<Button
|
<Button
|
||||||
|
|
@ -151,11 +151,7 @@
|
||||||
<hr />
|
<hr />
|
||||||
{#if $status.data}
|
{#if $status.data}
|
||||||
<section class={lightMode ? 'lightMode' : 'darkMode'}>
|
<section class={lightMode ? 'lightMode' : 'darkMode'}>
|
||||||
<Rendered
|
<Rendered status={$status} className="btclock-wrapper"></Rendered>
|
||||||
status={$status}
|
|
||||||
className="btclock-wrapper"
|
|
||||||
verticalDesc={$settings.verticalDesc}
|
|
||||||
></Rendered>
|
|
||||||
</section>
|
</section>
|
||||||
{$_('section.status.screenCycle')}:
|
{$_('section.status.screenCycle')}:
|
||||||
<a
|
<a
|
||||||
|
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB |
|
|
@ -1,11 +1,11 @@
|
||||||
import adapter from '@sveltejs/adapter-static';
|
import adapter from '@sveltejs/adapter-static';
|
||||||
import { sveltePreprocess } from 'svelte-preprocess';
|
import preprocess from 'svelte-preprocess';
|
||||||
|
|
||||||
/** @type {import('@sveltejs/kit').Config} */
|
/** @type {import('@sveltejs/kit').Config} */
|
||||||
const config = {
|
const config = {
|
||||||
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
|
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
|
||||||
// for more information about preprocessors
|
// for more information about preprocessors
|
||||||
preprocess: sveltePreprocess({}),
|
preprocess: preprocess({}),
|
||||||
build: {
|
build: {
|
||||||
rollupOptions: {
|
rollupOptions: {
|
||||||
output: {
|
output: {
|
||||||
|
|
|
||||||
|
|
@ -1,88 +0,0 @@
|
||||||
import { test, expect } from '@playwright/test';
|
|
||||||
|
|
||||||
import { initMock, settingsJson, statusJson } from '../shared';
|
|
||||||
|
|
||||||
test.beforeEach(initMock);
|
|
||||||
|
|
||||||
test('capture screenshots across devices', async ({ page }, testInfo) => {
|
|
||||||
await page.goto('/');
|
|
||||||
await expect(page.getByRole('heading', { name: 'Control' })).toBeVisible();
|
|
||||||
await expect(page.getByRole('heading', { name: 'Status' })).toBeVisible();
|
|
||||||
await expect(page.getByRole('heading', { name: 'Settings' })).toBeVisible();
|
|
||||||
|
|
||||||
const screenshot = await page.screenshot({
|
|
||||||
path: `./test-results/screenshots/default-${test.info().project.name.toLowerCase().replace(' ', '_')}.png`
|
|
||||||
});
|
|
||||||
|
|
||||||
await testInfo.attach(`default`, {
|
|
||||||
body: screenshot,
|
|
||||||
contentType: 'image/png'
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
test('capture screenshots across devices with bitaxe screens', async ({ page }, testInfo) => {
|
|
||||||
settingsJson.screens = [
|
|
||||||
{
|
|
||||||
id: 0,
|
|
||||||
name: 'Block Height',
|
|
||||||
enabled: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
name: 'Time',
|
|
||||||
enabled: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
name: 'Halving countdown',
|
|
||||||
enabled: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 6,
|
|
||||||
name: 'Block Fee Rate',
|
|
||||||
enabled: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 10,
|
|
||||||
name: 'Sats per dollar',
|
|
||||||
enabled: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 20,
|
|
||||||
name: 'Ticker',
|
|
||||||
enabled: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 30,
|
|
||||||
name: 'Market Cap',
|
|
||||||
enabled: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 80,
|
|
||||||
name: 'BitAxe Hashrate',
|
|
||||||
enabled: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 81,
|
|
||||||
name: 'BitAxe Best Difficulty',
|
|
||||||
enabled: true
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
statusJson.data = ['mdi:bitaxe', '', 'mdi:pickaxe', '6', '3', '7', 'GH/S'];
|
|
||||||
statusJson.rendered = ['mdi:bitaxe', '', 'mdi:pickaxe', '6', '3', '7', 'GH/S'];
|
|
||||||
|
|
||||||
await page.goto('/');
|
|
||||||
await expect(page.getByRole('heading', { name: 'Control' })).toBeVisible();
|
|
||||||
await expect(page.getByRole('heading', { name: 'Status' })).toBeVisible();
|
|
||||||
await expect(page.getByRole('heading', { name: 'Settings' })).toBeVisible();
|
|
||||||
|
|
||||||
await page.screenshot({
|
|
||||||
path: `./test-results/screenshots/bitaxe-${test.info().project.name.toLowerCase().replace(' ', '_')}.png`
|
|
||||||
});
|
|
||||||
|
|
||||||
await testInfo.attach(`bitaxe`, {
|
|
||||||
path: `./test-results/screenshots/bitaxe-${test.info().project.name.toLowerCase().replace(' ', '_')}.png`,
|
|
||||||
contentType: 'image/png'
|
|
||||||
});
|
|
||||||
});
|
|
||||||
140
tests/shared.ts
140
tests/shared.ts
|
|
@ -1,140 +0,0 @@
|
||||||
export const statusJson = {
|
|
||||||
currentScreen: 0,
|
|
||||||
numScreens: 7,
|
|
||||||
timerRunning: true,
|
|
||||||
espUptime: 4479,
|
|
||||||
espFreeHeap: 58508,
|
|
||||||
espHeapSize: 342108,
|
|
||||||
connectionStatus: { price: true, blocks: true },
|
|
||||||
rssi: -66,
|
|
||||||
data: ['BLOCK/HEIGHT', '8', '1', '8', '0', '2', '6'],
|
|
||||||
rendered: ['BLOCK/HEIGHT', '8', '1', '8', '0', '2', '6'],
|
|
||||||
leds: [
|
|
||||||
{ red: 0, green: 0, blue: 0, hex: '#000000' },
|
|
||||||
{ red: 0, green: 0, blue: 0, hex: '#000000' },
|
|
||||||
{ red: 0, green: 0, blue: 0, hex: '#000000' },
|
|
||||||
{ red: 0, green: 0, blue: 0, hex: '#000000' }
|
|
||||||
]
|
|
||||||
};
|
|
||||||
|
|
||||||
export const settingsJson = {
|
|
||||||
numScreens: 7,
|
|
||||||
fgColor: 415029,
|
|
||||||
bgColor: 0,
|
|
||||||
timerSeconds: 1800,
|
|
||||||
timerRunning: true,
|
|
||||||
minSecPriceUpd: 30,
|
|
||||||
fullRefreshMin: 60,
|
|
||||||
wpTimeout: 600,
|
|
||||||
tzOffset: 0,
|
|
||||||
useBitcoinNode: false,
|
|
||||||
mempoolInstance: 'mempool.space',
|
|
||||||
ledTestOnPower: true,
|
|
||||||
ledFlashOnUpd: true,
|
|
||||||
ledBrightness: 128,
|
|
||||||
stealFocus: true,
|
|
||||||
mcapBigChar: true,
|
|
||||||
mdnsEnabled: true,
|
|
||||||
otaEnabled: true,
|
|
||||||
fetchEurPrice: false,
|
|
||||||
hostnamePrefix: 'btclock',
|
|
||||||
hostname: 'btclock-d60b14',
|
|
||||||
ip: '192.168.20.231',
|
|
||||||
txPower: 78,
|
|
||||||
gitRev: '25d8b92bcbc8938417c140355ea3ba99ff9eb4b7',
|
|
||||||
gitTag: '3.1.9',
|
|
||||||
bitaxeEnabled: false,
|
|
||||||
bitaxeHostname: 'bitaxe1',
|
|
||||||
nostrZapNotify: true,
|
|
||||||
hwRev: 'REV_A_EPD_2_13',
|
|
||||||
fsRev: '4c5d9616212b27e3f05c35370f0befcf2c5a04b2',
|
|
||||||
nostrZapPubkey: 'b5127a08cf33616274800a4387881a9f98e04b9c37116e92de5250498635c422',
|
|
||||||
lastBuildTime: '1700666677',
|
|
||||||
screens: [
|
|
||||||
{
|
|
||||||
id: 0,
|
|
||||||
name: 'Block Height',
|
|
||||||
enabled: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
name: 'Time',
|
|
||||||
enabled: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
name: 'Halving countdown',
|
|
||||||
enabled: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 6,
|
|
||||||
name: 'Block Fee Rate',
|
|
||||||
enabled: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 10,
|
|
||||||
name: 'Sats per dollar',
|
|
||||||
enabled: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 20,
|
|
||||||
name: 'Ticker',
|
|
||||||
enabled: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 30,
|
|
||||||
name: 'Market Cap',
|
|
||||||
enabled: true
|
|
||||||
}
|
|
||||||
],
|
|
||||||
actCurrencies: ['USD', 'EUR'],
|
|
||||||
availableCurrencies: ['USD', 'EUR', 'GBP', 'JPY', 'AUD', 'CAD']
|
|
||||||
};
|
|
||||||
|
|
||||||
export const initMock = async ({ page }) => {
|
|
||||||
await page.route('*/**/api/status', async (route) => {
|
|
||||||
await route.fulfill({ json: statusJson });
|
|
||||||
});
|
|
||||||
|
|
||||||
await page.route('*/**/api/show/screen/1', async (route) => {
|
|
||||||
//if (route.request().url().includes('*/**/api/show/screen/1')) {
|
|
||||||
statusJson.currentScreen = 1;
|
|
||||||
statusJson.data = ['MSCW/TIME', ' ', ' ', '2', '6', '4', '4'];
|
|
||||||
statusJson.rendered = statusJson.data;
|
|
||||||
//}
|
|
||||||
|
|
||||||
await route.fulfill({ json: statusJson });
|
|
||||||
});
|
|
||||||
|
|
||||||
await page.route('*/**/api/show/screen/2', async (route) => {
|
|
||||||
statusJson.currentScreen = 2;
|
|
||||||
statusJson.data = ['BTC/USD', '$', '3', '7', '8', '2', '4'];
|
|
||||||
statusJson.rendered = statusJson.data;
|
|
||||||
|
|
||||||
await route.fulfill({ json: statusJson });
|
|
||||||
});
|
|
||||||
|
|
||||||
await page.route('*/**/api/show/screen/4', async (route) => {
|
|
||||||
statusJson.currentScreen = 4;
|
|
||||||
statusJson.data = ['BIT/COIN', 'HALV/ING', '0/YRS', '149/DAYS', '8/HRS', '30/MINS', 'TO/GO'];
|
|
||||||
statusJson.rendered = statusJson.data;
|
|
||||||
|
|
||||||
await route.fulfill({ json: statusJson });
|
|
||||||
});
|
|
||||||
|
|
||||||
await page.route('*/**/api/settings', async (route) => {
|
|
||||||
await route.fulfill({ json: settingsJson });
|
|
||||||
});
|
|
||||||
|
|
||||||
await page.route('**/events', (route) => {
|
|
||||||
const newStatus = statusJson;
|
|
||||||
newStatus.data = ['BLOCK/HEIGHT', '8', '0', '0', '8', '1', '5'];
|
|
||||||
|
|
||||||
// Respond with a custom SSE message
|
|
||||||
route.fulfill({
|
|
||||||
status: 200,
|
|
||||||
contentType: 'text/event-stream',
|
|
||||||
json: `${JSON.stringify(newStatus)}\n\n`
|
|
||||||
});
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
@ -1,7 +1,114 @@
|
||||||
import { expect, test } from '@playwright/test';
|
import { expect, test } from '@playwright/test';
|
||||||
import { initMock, settingsJson, statusJson } from '../shared';
|
|
||||||
|
|
||||||
test.beforeEach(initMock);
|
const statusJson = {
|
||||||
|
currentScreen: 0,
|
||||||
|
numScreens: 7,
|
||||||
|
timerRunning: true,
|
||||||
|
espUptime: 4479,
|
||||||
|
espFreeHeap: 58508,
|
||||||
|
espHeapSize: 342108,
|
||||||
|
connectionStatus: { price: true, blocks: true },
|
||||||
|
rssi: -66,
|
||||||
|
data: ['BLOCK/HEIGHT', '8', '1', '8', '0', '2', '6'],
|
||||||
|
rendered: ['BLOCK/HEIGHT', '8', '1', '8', '0', '2', '6'],
|
||||||
|
leds: [
|
||||||
|
{ red: 0, green: 0, blue: 0, hex: '#000000' },
|
||||||
|
{ red: 0, green: 0, blue: 0, hex: '#000000' },
|
||||||
|
{ red: 0, green: 0, blue: 0, hex: '#000000' },
|
||||||
|
{ red: 0, green: 0, blue: 0, hex: '#000000' }
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
const settingsJson = {
|
||||||
|
numScreens: 7,
|
||||||
|
fgColor: 415029,
|
||||||
|
bgColor: 0,
|
||||||
|
timerSeconds: 1800,
|
||||||
|
timerRunning: true,
|
||||||
|
minSecPriceUpd: 30,
|
||||||
|
fullRefreshMin: 60,
|
||||||
|
wpTimeout: 600,
|
||||||
|
tzOffset: 0,
|
||||||
|
useBitcoinNode: false,
|
||||||
|
mempoolInstance: 'mempool.space',
|
||||||
|
ledTestOnPower: true,
|
||||||
|
ledFlashOnUpd: true,
|
||||||
|
ledBrightness: 128,
|
||||||
|
stealFocus: true,
|
||||||
|
mcapBigChar: true,
|
||||||
|
mdnsEnabled: true,
|
||||||
|
otaEnabled: true,
|
||||||
|
fetchEurPrice: false,
|
||||||
|
hostnamePrefix: 'btclock',
|
||||||
|
hostname: 'btclock-d60b14',
|
||||||
|
ip: '192.168.20.231',
|
||||||
|
txPower: 78,
|
||||||
|
gitRev: '25d8b92bcbc8938417c140355ea3ba99ff9eb4b7',
|
||||||
|
gitTag: '3.1.9',
|
||||||
|
bitaxeEnabled: false,
|
||||||
|
bitaxeHostname: 'bitaxe1',
|
||||||
|
nostrZapNotify: true,
|
||||||
|
hwRev: 'REV_A_EPD_2_13',
|
||||||
|
fsRev: '4c5d9616212b27e3f05c35370f0befcf2c5a04b2',
|
||||||
|
nostrZapPubkey: 'b5127a08cf33616274800a4387881a9f98e04b9c37116e92de5250498635c422',
|
||||||
|
lastBuildTime: '1700666677',
|
||||||
|
screens: [
|
||||||
|
{ id: 0, name: 'Block Height', enabled: true },
|
||||||
|
{ id: 1, name: 'Sats per dollar', enabled: true },
|
||||||
|
{ id: 2, name: 'Ticker', enabled: true },
|
||||||
|
{ id: 3, name: 'Time', enabled: true },
|
||||||
|
{ id: 4, name: 'Halving countdown', enabled: true },
|
||||||
|
{ id: 5, name: 'Market Cap', enabled: true }
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
test.beforeEach(async ({ page }) => {
|
||||||
|
await page.route('*/**/api/status', async (route) => {
|
||||||
|
await route.fulfill({ json: statusJson });
|
||||||
|
});
|
||||||
|
|
||||||
|
await page.route('*/**/api/show/screen/1', async (route) => {
|
||||||
|
//if (route.request().url().includes('*/**/api/show/screen/1')) {
|
||||||
|
statusJson.currentScreen = 1;
|
||||||
|
statusJson.data = ['MSCW/TIME', ' ', ' ', '2', '6', '4', '4'];
|
||||||
|
statusJson.rendered = statusJson.data;
|
||||||
|
//}
|
||||||
|
|
||||||
|
await route.fulfill({ json: statusJson });
|
||||||
|
});
|
||||||
|
|
||||||
|
await page.route('*/**/api/show/screen/2', async (route) => {
|
||||||
|
statusJson.currentScreen = 2;
|
||||||
|
statusJson.data = ['BTC/USD', '$', '3', '7', '8', '2', '4'];
|
||||||
|
statusJson.rendered = statusJson.data;
|
||||||
|
|
||||||
|
await route.fulfill({ json: statusJson });
|
||||||
|
});
|
||||||
|
|
||||||
|
await page.route('*/**/api/show/screen/4', async (route) => {
|
||||||
|
statusJson.currentScreen = 4;
|
||||||
|
statusJson.data = ['BIT/COIN', 'HALV/ING', '0/YRS', '149/DAYS', '8/HRS', '30/MINS', 'TO/GO'];
|
||||||
|
statusJson.rendered = statusJson.data;
|
||||||
|
|
||||||
|
await route.fulfill({ json: statusJson });
|
||||||
|
});
|
||||||
|
|
||||||
|
await page.route('*/**/api/settings', async (route) => {
|
||||||
|
await route.fulfill({ json: settingsJson });
|
||||||
|
});
|
||||||
|
|
||||||
|
await page.route('**/events', (route) => {
|
||||||
|
const newStatus = statusJson;
|
||||||
|
newStatus.data = ['BLOCK/HEIGHT', '8', '0', '0', '8', '1', '5'];
|
||||||
|
|
||||||
|
// Respond with a custom SSE message
|
||||||
|
route.fulfill({
|
||||||
|
status: 200,
|
||||||
|
contentType: 'text/event-stream',
|
||||||
|
json: `${JSON.stringify(newStatus)}\n\n`
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
test('index page has expected columns control, status, settings', async ({ page }) => {
|
test('index page has expected columns control, status, settings', async ({ page }) => {
|
||||||
await page.goto('/');
|
await page.goto('/');
|
||||||
|
|
@ -30,8 +137,6 @@ test('api page has expected load button', async ({ page }) => {
|
||||||
|
|
||||||
test('timezone can be negative, zero and positive', async ({ page }) => {
|
test('timezone can be negative, zero and positive', async ({ page }) => {
|
||||||
await page.goto('/');
|
await page.goto('/');
|
||||||
await page.getByRole('button', { name: 'Show all' }).click();
|
|
||||||
|
|
||||||
const tzOffsetField = 'input#tzOffset';
|
const tzOffsetField = 'input#tzOffset';
|
||||||
|
|
||||||
for (const val of ['-10', '0', '42']) {
|
for (const val of ['-10', '0', '42']) {
|
||||||
|
|
@ -44,7 +149,6 @@ test('timezone can be negative, zero and positive', async ({ page }) => {
|
||||||
|
|
||||||
test('time values can not be zero or negative', async ({ page }) => {
|
test('time values can not be zero or negative', async ({ page }) => {
|
||||||
await page.goto('/');
|
await page.goto('/');
|
||||||
await page.getByRole('button', { name: 'Show all' }).click();
|
|
||||||
|
|
||||||
for (const field of ['#timePerScreen', '#fullRefreshMin', '#minSecPriceUpd']) {
|
for (const field of ['#timePerScreen', '#fullRefreshMin', '#minSecPriceUpd']) {
|
||||||
for (const val of ['42', '210']) {
|
for (const val of ['42', '210']) {
|
||||||
|
|
@ -74,11 +178,7 @@ test('time values can not be zero or negative', async ({ page }) => {
|
||||||
});
|
});
|
||||||
|
|
||||||
test('info message when fetch eur price is enabled', async ({ page }) => {
|
test('info message when fetch eur price is enabled', async ({ page }) => {
|
||||||
delete (settingsJson as { actCurrencies?: string[] }).actCurrencies;
|
|
||||||
|
|
||||||
await page.goto('/');
|
await page.goto('/');
|
||||||
await page.getByRole('button', { name: 'Show all' }).click();
|
|
||||||
|
|
||||||
const inputField = 'input#fetchEurPrice';
|
const inputField = 'input#fetchEurPrice';
|
||||||
const switchElement = await page.locator(inputField);
|
const switchElement = await page.locator(inputField);
|
||||||
|
|
||||||
|
|
@ -97,7 +197,6 @@ test('info message when fetch eur price is enabled', async ({ page }) => {
|
||||||
|
|
||||||
test('npub values will be converted to hex pubkeys', async ({ page }) => {
|
test('npub values will be converted to hex pubkeys', async ({ page }) => {
|
||||||
await page.goto('/');
|
await page.goto('/');
|
||||||
await page.getByRole('button', { name: 'Show all' }).click();
|
|
||||||
|
|
||||||
for (const field of ['#nostrZapPubkey']) {
|
for (const field of ['#nostrZapPubkey']) {
|
||||||
for (const val of ['npub1k5f85zx0xdskyayqpfpc0zq6n7vwqjuuxugkayk72fgynp34cs3qfcvqg2']) {
|
for (const val of ['npub1k5f85zx0xdskyayqpfpc0zq6n7vwqjuuxugkayk72fgynp34cs3qfcvqg2']) {
|
||||||
|
|
@ -113,7 +212,6 @@ test('npub values will be converted to hex pubkeys', async ({ page }) => {
|
||||||
|
|
||||||
test('empty nostr relay field is not accepted', async ({ page }) => {
|
test('empty nostr relay field is not accepted', async ({ page }) => {
|
||||||
await page.goto('/');
|
await page.goto('/');
|
||||||
await page.getByRole('button', { name: 'Show all' }).click();
|
|
||||||
|
|
||||||
const nostrRelayField = page.getByLabel('Nostr Relay');
|
const nostrRelayField = page.getByLabel('Nostr Relay');
|
||||||
|
|
||||||
|
|
@ -76,14 +76,6 @@ export default defineConfig({
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
css: {
|
|
||||||
preprocessorOptions: {
|
|
||||||
scss: {
|
|
||||||
quietDeps: true,
|
|
||||||
silenceDeprecations: ['import']
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
test: {
|
test: {
|
||||||
include: ['src/**/*.{test,spec}.{js,ts}'],
|
include: ['src/**/*.{test,spec}.{js,ts}'],
|
||||||
globals: true,
|
globals: true,
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue