btclock/webui
3
0
Fork 2
Code Issues 1 Pull requests 3 Projects Releases 32 Packages Wiki Activity Actions

Merge pull request 'Configure Renovate' (#4) from renovate/configure into main
Some checks failed
/ check-changes (push) Successful in 6s
Details
/ build (push) Failing after 1m1s
Details

Browse source 
Reviewed-on: #4
This commit is contained in:
Djuri 2024-12-26 13:35:00 +00:00
commit 5cbddd1b39
69 changed files with 6961 additions and 3833 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
.eslintignore
View file

@ -1,13 +0,0 @@
.DS_Store
node_modules
/build
/.svelte-kit
/package
.env
.env.*
!.env.example
# Ignore files for PNPM, NPM and YARN
pnpm-lock.yaml
package-lock.json
yarn.lock

30
.eslintrc.cjs
View file

@ -1,30 +0,0 @@
module.exports = {
root: true,
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:svelte/recommended',
'prettier'
],
parser: '@typescript-eslint/parser',
plugins: ['@typescript-eslint'],
parserOptions: {
sourceType: 'module',
ecmaVersion: 2020,
extraFileExtensions: ['.svelte']
},
env: {
browser: true,
es2017: true,
node: true
},
overrides: [
{
files: ['*.svelte'],
parser: 'svelte-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser'
}
}
]
};

121
.forgejo/workflows/build.yaml Normal file
View file

@ -0,0 +1,121 @@
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

15
.github/dependabot.yml vendored Normal file
View file

@ -0,0 +1,15 @@
# To get started with Dependabot version updates, you'll need to specify which
# package ecosystems to update and where the package manifests are located.
# Please see the documentation for all configuration options:
# https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file
version: 2
updates:
- package-ecosystem: 'npm' # See documentation for possible values
directory: '/' # Location of package manifests
schedule:
interval: 'daily'
versioning-strategy: 'increase-if-necessary'
ignore:
- dependency-name: '*'
update-types: ['version-update:semver-major']

98
.github/workflows/workflow.yml vendored
View file

@ -3,35 +3,56 @@ name: BTClock WebUI CI
on: [push]
env:
PUBLIC_BASE_URL: ""
PUBLIC_BASE_URL: ''
jobs:
build:
check-changes:
runs-on: ubuntu-latest
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: ubuntu-latest
if: ${{ needs.check-changes.outputs.all_changed_and_modified_files_count >= 1 }}
permissions:
contents: write
steps:
- uses: actions/checkout@v3
- uses: actions/checkout@v4
with:
submodules: recursive
- uses: actions/setup-node@v3
- uses: actions/setup-node@v4
with:
node-version: lts/*
cache: yarn
cache-dependency-path: '**/yarn.lock'
- uses: actions/cache@v3
- uses: actions/cache@v4
with:
path: |
~/.cache/pip
~/node_modules
key: ${{ runner.os }}-pio
- uses: actions/setup-python@v4
- uses: actions/setup-python@v5
with:
python-version: '3.9'
- name: Get current date
id: dateAndTime
run: echo "dateAndTime=$(date +'%Y-%m-%d-%H-%M')" >> $GITHUB_OUTPUT
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 &&
@ -40,27 +61,76 @@ jobs:
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=409600
# 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: /tmp/mklittlefs/mklittlefs -c build_gz -s 409600 littlefs.bin
run: |
set -e
/tmp/mklittlefs/mklittlefs -c build_gz -s 409600 output/littlefs.bin
- name: Upload artifacts
uses: actions/upload-artifact@v3
uses: actions/upload-artifact@v4
with:
path: |
webui.tgz
littlefs.bin
output/littlefs.bin
- name: Create release
if: github.event_name == 'push' && github.ref == 'refs/heads/main'
uses: ncipollo/release-action@v1
with:
tag: main
tag: ${{ steps.getBlockHeight.outputs.blockHeight }}
commit: main
name: release-${{ steps.date.outputs.dateAndTime }}
artifacts: "littlefs.bin,webui.tgz"
name: release-${{ steps.getBlockHeight.outputs.blockHeight }}
artifacts: 'output/littlefs.bin,webui.tgz'
allowUpdates: true
removeArtifacts: true
makeLatest: true
makeLatest: true
- name: Pushes littlefs.bin to web flasher
if: github.event_name == 'push' && github.ref == 'refs/heads/main'
id: push_directory
uses: cpina/github-action-push-to-another-repository@main
env:
SSH_DEPLOY_KEY: ${{ secrets.SSH_DEPLOY_KEY }}
with:
source-directory: output/
target-directory: webui/
destination-github-username: 'btclock'
destination-repository-name: 'web-flasher'
target-branch: main
user-name: ${{github.actor}}
user-email: ${{github.actor}}@users.noreply.github.com

1
.gitignore vendored
View file

@ -12,3 +12,4 @@ dist
vite.config.js.timestamp-*
vite.config.ts.timestamp-*
yarn-error.log
test-results/

2
.prettierignore
View file

@ -8,7 +8,7 @@ node_modules
!.env.example
dist/
build_gz
dist/**
# Ignore files for PNPM, NPM and YARN
pnpm-lock.yaml

9
.vscode/settings.json vendored
View file

@ -1,6 +1,5 @@
{
"i18n-ally.localesPaths": [
"src/lib/locales"
],
"i18n-ally.keystyle": "nested"
}
"i18n-ally.localesPaths": ["src/lib/locales"],
"i18n-ally.keystyle": "nested",
"i18n-ally.sourceLanguage": "en"
}

45
README.md
View file

@ -1,38 +1,45 @@
# create-svelte
# BTClock WebUI
Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
[![BTClock CI](https://github.com/btclock/webui/actions/workflows/workflow.yml/badge.svg)](https://github.com/btclock/webui2/actions/workflows/workflow.yml)
## Creating a project
The web user-interface for the BTClock, based on Svelte-kit. It uses Bootstrap for the lay-out.
If you're seeing this, you've probably already done this step. Congrats!
```bash
# create a new project in the current directory
npm create svelte@latest
# create a new project in my-app
npm create svelte@latest my-app
```
![Screenshot](doc/screenshot.webp)
![Screenshot Dark](doc/screenshot-dark.webp)
## Developing
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
After installed dependencies with `yarn`, start a development server:
```bash
npm run dev
yarn dev
# or start the server and open the app in a new browser tab
npm run dev -- --open
yarn dev -- --open
```
## Building
To create a production version of your app:
To create a production version of the WebUI:
```bash
npm run build
yarn build
```
You can preview the production build with `npm run preview`.
Make sure the postinstall script is ran, because otherwise the filenames are to long for the LittleFS filesystem.
> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
## Deploying
To upload the firmware to the BTClock, you need to GZIP all the files. You can use the python script `gzip_build.py` for that:
```bash
python3 gzip_build.py
```
Then you can make a `LittleFS.bin` with mklittlefs:
```bash
mklittlefs -c build_gz -s 409600 littlefs.bin
```
You can preview the production build with `yarn preview`.

202
doc/LICENSE.txt Normal file
View file

@ -0,0 +1,202 @@
Apache License
Version 2.0, January 2004
http://www.apache.org/licenses/
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
1. Definitions.
"License" shall mean the terms and conditions for use, reproduction,
and distribution as defined by Sections 1 through 9 of this document.
"Licensor" shall mean the copyright owner or entity authorized by
the copyright owner that is granting the License.
"Legal Entity" shall mean the union of the acting entity and all
other entities that control, are controlled by, or are under common
control with that entity. For the purposes of this definition,
"control" means (i) the power, direct or indirect, to cause the
direction or management of such entity, whether by contract or
otherwise, or (ii) ownership of fifty percent (50%) or more of the
outstanding shares, or (iii) beneficial ownership of such entity.
"You" (or "Your") shall mean an individual or Legal Entity
exercising permissions granted by this License.
"Source" form shall mean the preferred form for making modifications,
including but not limited to software source code, documentation
source, and configuration files.
"Object" form shall mean any form resulting from mechanical
transformation or translation of a Source form, including but
not limited to compiled object code, generated documentation,
and conversions to other media types.
"Work" shall mean the work of authorship, whether in Source or
Object form, made available under the License, as indicated by a
copyright notice that is included in or attached to the work
(an example is provided in the Appendix below).
"Derivative Works" shall mean any work, whether in Source or Object
form, that is based on (or derived from) the Work and for which the
editorial revisions, annotations, elaborations, or other modifications
represent, as a whole, an original work of authorship. For the purposes
of this License, Derivative Works shall not include works that remain
separable from, or merely link (or bind by name) to the interfaces of,
the Work and Derivative Works thereof.
"Contribution" shall mean any work of authorship, including
the original version of the Work and any modifications or additions
to that Work or Derivative Works thereof, that is intentionally
submitted to Licensor for inclusion in the Work by the copyright owner
or by an individual or Legal Entity authorized to submit on behalf of
the copyright owner. For the purposes of this definition, "submitted"
means any form of electronic, verbal, or written communication sent
to the Licensor or its representatives, including but not limited to
communication on electronic mailing lists, source code control systems,
and issue tracking systems that are managed by, or on behalf of, the
Licensor for the purpose of discussing and improving the Work, but
excluding communication that is conspicuously marked or otherwise
designated in writing by the copyright owner as "Not a Contribution."
"Contributor" shall mean Licensor and any individual or Legal Entity
on behalf of whom a Contribution has been received by Licensor and
subsequently incorporated within the Work.
2. Grant of Copyright License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
copyright license to reproduce, prepare Derivative Works of,
publicly display, publicly perform, sublicense, and distribute the
Work and such Derivative Works in Source or Object form.
3. Grant of Patent License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
(except as stated in this section) patent license to make, have made,
use, offer to sell, sell, import, and otherwise transfer the Work,
where such license applies only to those patent claims licensable
by such Contributor that are necessarily infringed by their
Contribution(s) alone or by combination of their Contribution(s)
with the Work to which such Contribution(s) was submitted. If You
institute patent litigation against any entity (including a
cross-claim or counterclaim in a lawsuit) alleging that the Work
or a Contribution incorporated within the Work constitutes direct
or contributory patent infringement, then any patent licenses
granted to You under this License for that Work shall terminate
as of the date such litigation is filed.
4. Redistribution. You may reproduce and distribute copies of the
Work or Derivative Works thereof in any medium, with or without
modifications, and in Source or Object form, provided that You
meet the following conditions:
(a) You must give any other recipients of the Work or
Derivative Works a copy of this License; and
(b) You must cause any modified files to carry prominent notices
stating that You changed the files; and
(c) You must retain, in the Source form of any Derivative Works
that You distribute, all copyright, patent, trademark, and
attribution notices from the Source form of the Work,
excluding those notices that do not pertain to any part of
the Derivative Works; and
(d) If the Work includes a "NOTICE" text file as part of its
distribution, then any Derivative Works that You distribute must
include a readable copy of the attribution notices contained
within such NOTICE file, excluding those notices that do not
pertain to any part of the Derivative Works, in at least one
of the following places: within a NOTICE text file distributed
as part of the Derivative Works; within the Source form or
documentation, if provided along with the Derivative Works; or,
within a display generated by the Derivative Works, if and
wherever such third-party notices normally appear. The contents
of the NOTICE file are for informational purposes only and
do not modify the License. You may add Your own attribution
notices within Derivative Works that You distribute, alongside
or as an addendum to the NOTICE text from the Work, provided
that such additional attribution notices cannot be construed
as modifying the License.
You may add Your own copyright statement to Your modifications and
may provide additional or different license terms and conditions
for use, reproduction, or distribution of Your modifications, or
for any such Derivative Works as a whole, provided Your use,
reproduction, and distribution of the Work otherwise complies with
the conditions stated in this License.
5. Submission of Contributions. Unless You explicitly state otherwise,
any Contribution intentionally submitted for inclusion in the Work
by You to the Licensor shall be under the terms and conditions of
this License, without any additional terms or conditions.
Notwithstanding the above, nothing herein shall supersede or modify
the terms of any separate license agreement you may have executed
with Licensor regarding such Contributions.
6. Trademarks. This License does not grant permission to use the trade
names, trademarks, service marks, or product names of the Licensor,
except as required for reasonable and customary use in describing the
origin of the Work and reproducing the content of the NOTICE file.
7. Disclaimer of Warranty. Unless required by applicable law or
agreed to in writing, Licensor provides the Work (and each
Contributor provides its Contributions) on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
implied, including, without limitation, any warranties or conditions
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
PARTICULAR PURPOSE. You are solely responsible for determining the
appropriateness of using or redistributing the Work and assume any
risks associated with Your exercise of permissions under this License.
8. Limitation of Liability. In no event and under no legal theory,
whether in tort (including negligence), contract, or otherwise,
unless required by applicable law (such as deliberate and grossly
negligent acts) or agreed to in writing, shall any Contributor be
liable to You for damages, including any direct, indirect, special,
incidental, or consequential damages of any character arising as a
result of this License or out of the use or inability to use the
Work (including but not limited to damages for loss of goodwill,
work stoppage, computer failure or malfunction, or any and all
other commercial damages or losses), even if such Contributor
has been advised of the possibility of such damages.
9. Accepting Warranty or Additional Liability. While redistributing
the Work or Derivative Works thereof, You may choose to offer,
and charge a fee for, acceptance of support, warranty, indemnity,
or other liability obligations and/or rights consistent with this
License. However, in accepting such obligations, You may act only
on Your own behalf and on Your sole responsibility, not on behalf
of any other Contributor, and only if You agree to indemnify,
defend, and hold each Contributor harmless for any liability
incurred by, or claims asserted against, such Contributor by reason
of your accepting any such warranty or additional liability.
END OF TERMS AND CONDITIONS
APPENDIX: How to apply the Apache License to your work.
To apply the Apache License to your work, attach the following
boilerplate notice, with the fields enclosed by brackets "[]"
replaced with your own identifying information. (Don't include
the brackets!) The text should be enclosed in the appropriate
comment syntax for the file format. We also recommend that a
file or class name and description of purpose be included on the
same "printed page" as the copyright notice for easier
identification within third-party archives.
Copyright [yyyy] [name of copyright owner]
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

BIN
doc/screenshot-dark.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 51 KiB

BIN
doc/screenshot.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 53 KiB

33
eslint.config.js Normal file
View file

@ -0,0 +1,33 @@
import js from '@eslint/js';
import ts from 'typescript-eslint';
import svelte from 'eslint-plugin-svelte';
import prettier from 'eslint-config-prettier';
import globals from 'globals';
/** @type {import('eslint').Linter.Config[]} */
export default [
js.configs.recommended,
...ts.configs.recommended,
...svelte.configs['flat/recommended'],
prettier,
...svelte.configs['flat/prettier'],
{
languageOptions: {
globals: {
...globals.browser,
...globals.node
}
}
},
{
files: ['**/*.svelte'],
languageOptions: {
parserOptions: {
parser: ts.parser
}
}
},
{
ignores: ['build/', '.svelte-kit/', 'dist/']
}
];

1
extra/icons/flash.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7,2V13H10V22L17,10H13L17,2H7Z" /></svg>
Side by side

After

Width:  |  Height:  |  Size: 109 B

1
extra/icons/lightning-bolt.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11 15H6L13 1V9H18L11 23V15Z" /></svg>
Side by side

After

Width:  |  Height:  |  Size: 107 B

1
extra/icons/pickaxe.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14.79,10.62L3.5,21.9L2.1,20.5L13.38,9.21L14.79,10.62M19.27,7.73L19.86,7.14L19.07,6.35L19.71,5.71L18.29,4.29L17.65,4.93L16.86,4.14L16.27,4.73C14.53,3.31 12.57,2.17 10.47,1.37L9.64,3.16C11.39,4.08 13,5.19 14.5,6.5L14,7L17,10L17.5,9.5C18.81,11 19.92,12.61 20.84,14.36L22.63,13.53C21.83,11.43 20.69,9.47 19.27,7.73Z" /></svg>
Side by side

After

Width:  |  Height:  |  Size: 391 B

1
extra/icons/rocket.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 22L16.14 20.45C16.84 18.92 17.34 17.34 17.65 15.73L20 22M7.86 20.45L4 22L6.35 15.73C6.66 17.34 7.16 18.92 7.86 20.45M12 2C12 2 17 4 17 12C17 15.1 16.25 17.75 15.33 19.83C15 20.55 14.29 21 13.5 21H10.5C9.71 21 9 20.55 8.67 19.83C7.76 17.75 7 15.1 7 12C7 4 12 2 12 2M12 12C13.1 12 14 11.1 14 10C14 8.9 13.1 8 12 8C10.9 8 10 8.9 10 10C10 11.1 10.9 12 12 12Z" /></svg>
Side by side

After

Width:  |  Height:  |  Size: 437 B

78
package.json
View file

@ -10,37 +10,65 @@
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"lint": "prettier --check . && eslint .",
"format": "prettier --write .",
"postinstall": "patch-package"
"postinstall": "patch-package",
"test": "npm run test:integration && npm run test:unit",
"test:integration": "playwright test",
"test:screenshots": "playwright test -c playwright.screenshot.config.ts",
"test:unit": "vitest"
},
"devDependencies": {
"@rollup/plugin-json": "^6.0.1",
"@sveltejs/adapter-auto": "^2.0.0",
"@sveltejs/adapter-static": "^2.0.3",
"@sveltejs/kit": "^1.27.4",
"@sveltejs/adapter-auto": "^3.0.0",
"@sveltejs/adapter-static": "^3.0.0",
"@sveltejs/kit": "^2.0.0",
"@sveltejs/vite-plugin-svelte": "^3.0.1",
"@testing-library/svelte": "^5.2.1",
"@types/swagger-ui": "^3.52.4",
"@typescript-eslint/eslint-plugin": "^6.0.0",
"@typescript-eslint/parser": "^6.0.0",
"eslint": "^8.28.0",
"eslint-config-prettier": "^9.0.0",
"eslint-plugin-svelte": "^2.30.0",
"prettier": "^3.0.0",
"prettier-plugin-svelte": "^3.0.0",
"sass": "^1.69.5",
"svelte": "^4.0.5",
"svelte-check": "^3.6.0",
"tslib": "^2.4.1",
"typescript": "^5.0.0",
"vite": "^4.4.2"
"@typescript-eslint/eslint-plugin": "^8.7.0",
"@typescript-eslint/parser": "^8.7.0",
"@vitest/ui": "^2.0.5",
"eslint": "^9.11.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-svelte": "^2.36.0",
"jsdom": "^25.0.0",
"prettier": "^3.3.3",
"prettier-plugin-svelte": "^3.2.6",
"rollup-plugin-visualizer": "^5.12.0",
"sass": "^1.79.3",
"svelte": "^4.2.19",
"svelte-check": "^4.0.2",
"svelte-preprocess": "^6.0.2",
"tslib": "^2.7.0",
"typescript": "^5.5.4",
"typescript-eslint": "^8.7.0",
"vite": "^5.4.7",
"vitest": "^2.1.1",
"vitest-github-actions-reporter": "^0.11.0"
},
"type": "module",
"dependencies": {
"@fontsource/antonio": "^5.0.17",
"@fontsource/oswald": "^5.0.17",
"@fontsource/ubuntu": "^5.0.8",
"bootstrap": "^5.3.2",
"@fontsource/antonio": "^5.1.0",
"@fontsource/oswald": "^5.1.0",
"@fontsource/ubuntu": "^5.1.0",
"@noble/secp256k1": "^2.1.0",
"@playwright/test": "^1.46.0",
"@popperjs/core": "^2.11.8",
"@sveltestrap/sveltestrap": "^6.2.7",
"@testing-library/jest-dom": "^6.5.0",
"bootstrap": "^5.3.3",
"bootstrap-icons": "^1.11.3",
"msgpack-es": "^0.0.5",
"nostr-tools": "^2.7.1",
"patch-package": "^8.0.0",
"svelte-i18n": "^4.0.0",
"sveltestrap": "^5.11.2",
"swagger-ui": "^5.10.0"
}
"svelte-bootstrap-icons": "^3.1.1",
"svelte-i18n": "^4.0.0"
},
"resolutions": {
"es5-ext": ">=0.10.64",
"undici": ">=5.28.4",
"ws": ">=8.18.0",
"axios": ">=1.7.7",
"micromatch": ">=4.0.8"
},
"packageManager": "yarn@1.22.21+sha1.1959a18351b811cdeedbd484a8f86c3cc3bbaf72"
}

17
patches/@sveltejs+kit+1.27.6.patch
View file

@ -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 a7a886d..d3433b5 100644
--- a/node_modules/@sveltejs/kit/src/exports/vite/index.js
+++ b/node_modules/@sveltejs/kit/src/exports/vite/index.js
@@ -561,9 +561,9 @@ 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
},

30
patches/@sveltejs+kit+2.15.0+001+initial.patch Normal file
View file

@ -0,0 +1,30 @@
diff --git a/node_modules/@sveltejs/kit/src/exports/vite/index.js b/node_modules/@sveltejs/kit/src/exports/vite/index.js
index 21bc3d4..eef2db3 100644
--- a/node_modules/@sveltejs/kit/src/exports/vite/index.js
+++ b/node_modules/@sveltejs/kit/src/exports/vite/index.js
@@ -648,9 +648,9 @@ async function kit({ svelte_config }) {
output: {
format: inline ? 'iife' : 'esm',
name: `__sveltekit_${version_hash}.app`,
- 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,
manualChunks: split ? undefined : () => 'bundle',
@@ -665,9 +665,9 @@ async function kit({ svelte_config }) {
worker: {
rollupOptions: {
output: {
- entryFileNames: `${prefix}/workers/[name]-[hash].js`,
- chunkFileNames: `${prefix}/workers/chunks/[name]-[hash].js`,
- assetFileNames: `${prefix}/workers/assets/[name]-[hash][extname]`,
+ entryFileNames: `${prefix}/workers/[hash].js`,
+ chunkFileNames: `${prefix}/workers/chunks/[hash].js`,
+ assetFileNames: `${prefix}/workers/assets/[hash][extname]`,
hoistTransitiveImports: false
}
}

17
playwright.config.ts Normal file
View file

@ -0,0 +1,17 @@
import type { PlaywrightTestConfig } from '@playwright/test';
const config: PlaywrightTestConfig = {
use: {
locale: 'en-GB',
timezoneId: 'Europe/Amsterdam'
},
webServer: {
command: 'npm run build && npm run preview',
port: 4173
},
reporter: process.env.CI ? 'github' : 'list',
testDir: 'tests/playwright',
testMatch: /(.+\.)?(test|spec)\.[jt]s/
};
export default config;

59
playwright.screenshot.config.ts Normal file
View file

@ -0,0 +1,59 @@
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 NL locale',
use: {
viewport: { width: 1512, height: 982 },
locale: 'nl'
}
},
{
name: 'MacBook Pro 14 inch nl-NL locale',
use: {
viewport: { width: 1512, height: 982 },
locale: 'nl-NL'
}
},
{
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 } }
}
]
});

6
renovate.json Normal file
View file

@ -0,0 +1,6 @@
{
"$schema": "https://docs.renovatebot.com/renovate-schema.json",
"extends": [
"config:recommended"
]
}

12
src/hooks.server.ts
View file

@ -1,10 +1,10 @@
import type { Handle } from '@sveltejs/kit'
import { locale } from 'svelte-i18n'
import type { Handle } from '@sveltejs/kit';
import { locale } from 'svelte-i18n';
export const handle: Handle = async ({ event, resolve }) => {
const lang = event.request.headers.get('accept-language')?.split(',')[0]
const lang = event.request.headers.get('accept-language')?.split(',')[0];
if (lang) {
locale.set(lang)
locale.set(lang);
}
return resolve(event)
}
return resolve(event);
};

5
src/icons/PickaxeIcon.svelte Normal file
View file

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
><path
d="M14.79,10.62L3.5,21.9L2.1,20.5L13.38,9.21L14.79,10.62M19.27,7.73L19.86,7.14L19.07,6.35L19.71,5.71L18.29,4.29L17.65,4.93L16.86,4.14L16.27,4.73C14.53,3.31 12.57,2.17 10.47,1.37L9.64,3.16C11.39,4.08 13,5.19 14.5,6.5L14,7L17,10L17.5,9.5C18.81,11 19.92,12.61 20.84,14.36L22.63,13.53C21.83,11.43 20.69,9.47 19.27,7.73Z"
/></svg
>
Side by side

After

Width:  |  Height:  |  Size: 398 B

8
src/icons/RocketIcon.svelte Normal file
View file

@ -0,0 +1,8 @@
<script lang="ts">
</script>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
><title>rocket-launch</title><path
d="M13.13 22.19L11.5 18.36C13.07 17.78 14.54 17 15.9 16.09L13.13 22.19M5.64 12.5L1.81 10.87L7.91 8.1C7 9.46 6.22 10.93 5.64 12.5M21.61 2.39C21.61 2.39 16.66 .269 11 5.93C8.81 8.12 7.5 10.53 6.65 12.64C6.37 13.39 6.56 14.21 7.11 14.77L9.24 16.89C9.79 17.45 10.61 17.63 11.36 17.35C13.5 16.53 15.88 15.19 18.07 13C23.73 7.34 21.61 2.39 21.61 2.39M14.54 9.46C13.76 8.68 13.76 7.41 14.54 6.63S16.59 5.85 17.37 6.63C18.14 7.41 18.15 8.68 17.37 9.46C16.59 10.24 15.32 10.24 14.54 9.46M8.88 16.53L7.47 15.12L8.88 16.53M6.24 22L9.88 18.36C9.54 18.27 9.21 18.12 8.91 17.91L4.83 22H6.24M2 22H3.41L8.18 17.24L6.76 15.83L2 20.59V22M2 19.17L6.09 15.09C5.88 14.79 5.73 14.47 5.64 14.12L2 17.76V19.17Z"
/></svg
>

6
src/icons/ZapIcon.svelte Normal file
View file

@ -0,0 +1,6 @@
<script lang="ts">
</script>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
><title>flash</title><path d="M7,2V13H10V22L17,10H13L17,2H7Z" /></svg
>

53
src/lib/components/ColorSchemeSwitcher.svelte Normal file
View file

@ -0,0 +1,53 @@
<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>

65
src/lib/components/SettingsInput.svelte Normal file
View file

@ -0,0 +1,65 @@
<script lang="ts">
import {
Input,
InputGroup,
InputGroupText,
Label,
FormText,
Col,
Row
} from '@sveltestrap/sveltestrap';
export let id: string;
export let label: string;
export let value: string | number;
export let type: string = 'text';
export let size: string = 'sm';
export let required: boolean = false;
export let min: number | undefined = undefined;
export let max: number | undefined = undefined;
export let step: number | string | undefined = undefined;
export let suffix: string | undefined = undefined;
export let helpText: string | undefined = undefined;
export let disabled: boolean = false;
export let valid: boolean | undefined = undefined;
export let invalid: boolean | undefined = undefined;
export let minlength: string | undefined = undefined;
export let onChange: (() => void) | undefined = undefined;
export let onInput: (() => void) | undefined = undefined;
const onInputHandler = () => {
onInput?.();
};
</script>
<Row>
<Label md={6} for={id} {size}>{label}</Label>
<Col md="6">
<InputGroup {size}>
<Input
{id}
{type}
bind:value
{required}
{min}
{max}
{step}
{disabled}
{valid}
{invalid}
{minlength}
bsSize={size}
on:change={onChange}
on:input={onInputHandler}
spellcheck={type === 'text' ? 'false' : undefined}
/>
{#if suffix}
<InputGroupText>{suffix}</InputGroupText>
{/if}
<slot />
</InputGroup>
{#if helpText}
<FormText>{helpText}</FormText>
{/if}
</Col>
</Row>

34
src/lib/components/SettingsSelect.svelte Normal file
View file

@ -0,0 +1,34 @@
<script lang="ts">
import { Input, Label, FormText, Col, Row } from '@sveltestrap/sveltestrap';
export let id: string;
export let label: string;
export let value: string | number;
export let options: Array<[string, string | number]>;
export let size: string = 'sm';
export let helpText: string | undefined = undefined;
export let selectClass: string | undefined = undefined;
export let onChange: (() => void) | undefined = undefined;
</script>
<Row>
<Label md={6} for={id} {size}>{label}</Label>
<Col md="6">
<Input
{id}
type="select"
bind:value
name="select"
bsSize={size}
class={selectClass}
on:change={onChange}
>
{#each options as [key, val]}
<option value={val}>{key}</option>
{/each}
</Input>
{#if helpText}
<FormText>{helpText}</FormText>
{/if}
</Col>
</Row>

15
src/lib/components/SettingsSwitch.svelte Normal file
View file

@ -0,0 +1,15 @@
<script lang="ts">
import { Input, Col } from '@sveltestrap/sveltestrap';
// Props
export let id: string;
export let checked: boolean;
export let label: string;
export let size: string = 'sm';
export let disabled: boolean = false;
export let col: { [key: string]: string } = { md: '6', xl: '12', xxl: '6' };
</script>
<Col {...col}>
<Input {id} bind:checked type="switch" bsSize={size} {label} {disabled} />
</Col>

28
src/lib/components/ToggleHeader.svelte Normal file
View file

@ -0,0 +1,28 @@
<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>

5
src/lib/components/index.ts Normal file
View file

@ -0,0 +1,5 @@
export { default as SettingsSwitch } from './SettingsSwitch.svelte';
export { default as SettingsInput } from './SettingsInput.svelte';
export { default as SettingsSelect } from './SettingsSelect.svelte';
export { default as ToggleHeader } from './ToggleHeader.svelte';
export { default as ColorSchemeSwitcher } from './ColorSchemeSwitcher.svelte';

5
src/lib/config.ts Normal file
View file

@ -0,0 +1,5 @@
import * as publicEnv from '$env/static/public';
export const PUBLIC_BASE_URL: string = Object.hasOwn(publicEnv, 'PUBLIC_BASE_URL')
? publicEnv.PUBLIC_BASE_URL
: '';

33
src/lib/i18n/index.ts
View file

@ -1,13 +1,30 @@
import { browser } from '$app/environment'
import { init, register } from 'svelte-i18n'
import { browser } from '$app/environment';
import { init, register } from 'svelte-i18n';
const defaultLocale = 'en'
const defaultLocale = 'en';
register('en', () => import('../locales/en.json'))
register('nl', () => import('../locales/nl.json'))
register('es', () => import('../locales/es.json'))
register('en', () => import('../locales/en.json'));
register('nl', () => import('../locales/nl.json'));
register('es', () => import('../locales/es.json'));
register('de', () => import('../locales/de.json'));
const getInitialLocale = () => {
if (!browser) return defaultLocale;
// Check localStorage first
const storedLocale = localStorage.getItem('locale');
if (storedLocale) return storedLocale;
// Get browser locale and normalize it
const browserLocale = window.navigator.language;
const normalizedLocale = browserLocale.split('-')[0].toLowerCase();
// Check if we support this locale
const supportedLocales = ['en', 'nl', 'es', 'de'];
return supportedLocales.includes(normalizedLocale) ? normalizedLocale : defaultLocale;
};
init({
fallbackLocale: defaultLocale,
initialLocale: browser ? window.navigator.language : defaultLocale,
})
initialLocale: getInitialLocale()
});

82
src/lib/index.ts
View file

@ -1 +1,81 @@
// place files you want to import through the `$lib` alias in this folder.
import * as nip19 from 'nostr-tools/nip19';
import { Relay } from 'nostr-tools';
/**
* Validates if the given npub is a valid Nostr Public Key.
* @param npub - The npub (Nostr Public Key) to validate.
* @returns A boolean indicating if the npub is valid.
*/
const isValidNpub = (npub: string): boolean => {
try {
// Decode the npub using NIP-19
const { type, data } = nip19.decode(npub);
// Check if the type is 'npub' and the data length is 32 bytes
return type === 'npub' && data.length === 64;
} catch {
// If any error is thrown, the npub is not valid
return false;
}
};
/**
* Validates if the given URL is a valid Nostr relay.
* @param url - The URL of the Nostr relay to validate.
* @returns A Promise<boolean> indicating if the URL is a valid Nostr relay.
*/
const isValidNostrRelay = async (url: string): Promise<boolean> => {
try {
const relay: Relay = await Relay.connect(url);
// If the relay is successfully connected, it's a valid Nostr relay
if (relay.connected) {
// Close the connection to clean up
relay.close();
return true;
}
return false;
} catch {
// If any error is thrown, the URL is not a valid Nostr relay
return false;
}
};
/**
* Validates if the given parameter is a valid hex public key.
* @param pubkey - The public key to validate.
* @returns A boolean indicating if the public key is valid.
*/
const isValidHexPubKey = (pubkey: string): boolean => {
return /^[0-9a-f]{64}$/i.test(pubkey);
};
/**
* Checks if a parameter is a valid pubkey or npub and converts npub to pubkey.
* @param input - The input string to check and convert.
* @returns The pubkey if valid, otherwise null.
*/
const getPubKey = (input: string): string | null => {
try {
// If input is a valid hex public key
if (isValidHexPubKey(input)) {
return input;
}
// Try to decode the input as npub
const { type, data } = nip19.decode(input);
// Check if the decoded type is 'npub' and the data length is 64 characters (32 bytes in hex)
if (type === 'npub' && data.length === 64) {
return data;
}
return null;
} catch {
// If any error is thrown, the input is not valid
return null;
}
};
export { isValidNpub, isValidNostrRelay, isValidHexPubKey, getPubKey };

133
src/lib/locales/de.json Normal file
View file

@ -0,0 +1,133 @@
{
"section": {
"settings": {
"title": "Einstellungen",
"textColor": "Textfarbe",
"backgroundColor": "Hintergrundfarbe",
"ledPowerOnTest": "LED-Einschalttest",
"ledFlashOnBlock": "LED blinkt bei neuem Block",
"timePerScreen": "Zeit pro Bildschirm",
"ledBrightness": "LED-Helligkeit",
"flMaxBrightness": "Displaybeleuchtung Helligkeit",
"timezoneOffset": "Zeitzonenoffset",
"timeBetweenPriceUpdates": "Zeit zwischen Preisaktualisierungen",
"fullRefreshEvery": "Vollständige Aktualisierung alle",
"mempoolnstance": "Mempool Instance",
"hostnamePrefix": "Hostnamen-Präfix",
"StealFocusOnNewBlock": "Steal focus on new block",
"useBigCharsMcap": "Verwende große Zeichen für die Marktkapitalisierung",
"useBlkCountdown": "Blocks Countdown zur Halbierung",
"useSatsSymbol": "Sats-Symbol verwenden",
"suffixPrice": "Suffix-Preisformat",
"disableLeds": "Alle LED-Effekte deaktivieren",
"otaUpdates": "OTA updates",
"enableMdns": "mDNS",
"fetchEuroPrice": "€-Preis abrufen",
"shortAmountsWarning": "Geringe Beträge können die Lebensdauer der Displays verkürzen",
"tzOffsetHelpText": "Ein Neustart ist erforderlich, um den TZ-Offset anzuwenden.",
"screens": "Bildschirme",
"wifiTxPowerText": "In den meisten Fällen muss dies nicht eingestellt werden.",
"wifiTxPower": "WiFi-TX-Leistung",
"settingsSaved": "Einstellungen gespeichert",
"errorSavingSettings": "Fehler beim Speichern der Einstellungen",
"ownDataSource": "BTClock-Datenquelle verwenden",
"flAlwaysOn": "Displaybeleuchtung immer an",
"flEffectDelay": "Displaybeleuchtungeffekt Geschwindigkeit",
"flFlashOnUpd": "Displaybeleuchting bei neuem Block",
"mempoolInstanceHelpText": "Nur wirksam, wenn die BTClock-Datenquelle deaktiviert ist. \nZur Anwendung ist ein Neustart erforderlich.",
"luxLightToggle": "Automatisches Umschalten des Frontlichts bei Lux",
"wpTimeout": "WiFi-Konfigurationsportal timeout",
"useNostr": "Nostr-Datenquelle verwenden",
"flDisable": "Displaybeleuchtung deaktivieren",
"httpAuthUser": "WebUI-Benutzername",
"httpAuthPass": "WebUI-Passwort",
"httpAuthText": "Schützt nur die WebUI mit einem Passwort, nicht API-Aufrufe.",
"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": {
"systemInfo": "Systeminfo",
"version": "Version",
"buildTime": "Build time",
"ledColor": "LED-Farbe",
"turnOff": "Ausschalten",
"setColor": "Farbe festlegen",
"showText": "Text anzeigen",
"text": "Text",
"title": "Kontrolle",
"hostname": "Hostname",
"frontlight": "Displaybeleuchtung",
"turnOn": "Einschalten",
"flashFrontlight": "Blinken"
},
"status": {
"title": "Status",
"screenCycle": "Bildschirmzyklus",
"memoryFree": "Speicher frei",
"wsPriceConnection": "WS-Preisverbindung",
"wsMempoolConnection": "WS {instance}-Verbindung",
"fetchEuroNote": "If you use \"Fetch € price\" the WS Price connection will show ❌ since it uses another data source.",
"uptime": "Betriebszeit",
"wifiSignalStrength": "WiFi-Signalstärke",
"wsDataConnection": "BTClock-Datenquelle verbindung",
"lightSensor": "Lichtsensor",
"nostrConnection": "Nostr Relay-Verbindung"
},
"firmwareUpdater": {
"fileUploadSuccess": "Datei erfolgreich hochgeladen, Gerät neu gestartet. WebUI in {countdown} Sekunden neu geladen",
"fileUploadFailed": "Das Hochladen der Datei ist fehlgeschlagen. \nStellen Sie sicher, dass Sie die richtige Datei ausgewählt haben, und versuchen Sie es erneut.",
"uploading": "Hochladen",
"firmwareUpdateText": "Wenn Sie die Firmware-Upload-Funktion verwenden, stellen Sie sicher, dass Sie die richtigen Dateien verwenden. \nDas Hochladen der falschen Dateien kann dazu führen, dass das Gerät nicht mehr funktioniert. \nWenn es schief geht, können Sie die Firmware wiederherstellen, indem Sie das vollständige Image hochladen, nachdem Sie das Gerät in den BOOT-Modus versetzt haben.",
"swUpToDate": "Du hast die neueste Version.",
"swUpdateAvailable": "Eine neuere Version ist verfügbar!",
"latestVersion": "Letzte Version",
"releaseDate": "Veröffentlichungsdatum",
"viewRelease": "Veröffentlichung anzeigen",
"autoUpdate": "Update installieren (experimentell)"
}
},
"colors": {
"black": "Schwarz",
"white": "Weiss"
},
"time": {
"minutes": "Minuten",
"seconds": "Sekunden"
},
"restartRequired": "Neustart erforderlich",
"button": {
"save": "Speichern",
"reset": "Zurücksetzen",
"restart": "Neustart",
"forceFullRefresh": "Vollständige Aktualisierung erzwingen"
},
"timer": {
"running": "läuft",
"stopped": "gestoppt"
},
"sections": {
"control": {
"keepSameColor": "Gleiche Farbe beibehalten"
}
},
"rssiBar": {
"tooltip": "Werte > -67 dBm gelten als gut. > -30 dBm ist erstaunlich"
},
"warning": "Achtung",
"auto-detect": "Automatische Erkennung"
}

217
src/lib/locales/en.json
View file

@ -1,71 +1,150 @@
{
"section": {
"settings": {
"title": "Settings",
"textColor": "Text color",
"backgroundColor": "Background color",
"ledPowerOnTest": "LED power-on test",
"ledFlashOnBlock": "LED flash on new block",
"timePerScreen": "Time per screen",
"ledBrightness": "LED brightness",
"timezoneOffset": "Timezone offset",
"timeBetweenPriceUpdates": "Time between price updates",
"fullRefreshEvery": "Full refresh every",
"mempoolnstance": "Mempool Instance",
"hostnamePrefix": "Hostname prefix",
"StealFocusOnNewBlock": "Steal focus on new block",
"useBigCharsMcap": "Use big characters for market cap",
"otaUpdates": "OTA updates",
"enableMdns": "mDNS",
"fetchEuroPrice": "Fetch € price",
"shortAmountsWarning": "Short amounts might shorten lifespan.",
"tzOffsetHelpText": "A restart is required to apply TZ offset.",
"screens": "Screens"
},
"control": {
"systemInfo": "System info",
"version": "Version",
"buildTime": "Build time",
"ledColor": "LED color",
"turnOff": "Turn off",
"setColor": "Set color",
"showText": "Show text",
"text": "Text",
"title": "Control",
"hostname": "Hostname"
},
"status": {
"title": "Status",
"screenCycle": "Screen cycle",
"memoryFree": "Memory free",
"wsPriceConnection": "WS Price connection",
"wsMempoolConnection": "WS Mempool.space connection",
"fetchEuroNote": "If you use \"Fetch € price\" the WS Price connection will show ❌ since it uses another data source.",
"uptime": "Uptime"
}
},
"colors": {
"black": "Black",
"white": "White"
},
"time": {
"minutes": "minutes",
"seconds": "seconds"
},
"restartRequired": "restart required",
"button": {
"save": "Save",
"reset": "Reset",
"restart": "Restart",
"forceFullRefresh": "Force full refresh"
},
"timer": {
"running": "running",
"stopped": "stopped"
},
"sections": {
"control": {
"keepSameColor": "Keep same color"
}
}
"section": {
"settings": {
"title": "Settings",
"textColor": "Text color",
"backgroundColor": "Background color",
"ledPowerOnTest": "LED power-on test",
"ledFlashOnBlock": "LED flash on new block",
"timePerScreen": "Time per screen",
"ledBrightness": "LED brightness",
"timezoneOffset": "Timezone offset",
"timeBetweenPriceUpdates": "Time between price updates",
"fullRefreshEvery": "Full refresh every",
"mempoolnstance": "Mempool Instance",
"hostnamePrefix": "Hostname prefix",
"StealFocusOnNewBlock": "Steal focus on new block",
"useBigCharsMcap": "Use big characters for market cap",
"useBlkCountdown": "Blocks countdown for halving",
"useSatsSymbol": "Use sats symbol",
"suffixPrice": "Suffix price format",
"disableLeds": "Disable all LEDs effects",
"otaUpdates": "OTA updates",
"enableMdns": "mDNS",
"fetchEuroPrice": "Fetch € price",
"shortAmountsWarning": "Short amounts might shorten lifespan of the displays",
"tzOffsetHelpText": "A restart is required to apply TZ offset.",
"screens": "Screens",
"wifiTxPowerText": "In most cases this does not need to be set.",
"wifiTxPower": "WiFi TX power",
"settingsSaved": "Settings saved",
"errorSavingSettings": "Error saving settings",
"ownDataSource": "Use BTClock data source",
"flMaxBrightness": "Frontlight brightness",
"flAlwaysOn": "Frontlight always on",
"flEffectDelay": "Frontlight effect speed",
"flFlashOnUpd": "Frontlight flash on new block",
"mempoolInstanceHelpText": "Only effective when BTClock data-source is disabled. A restart is required to apply.",
"luxLightToggle": "Auto toggle frontlight at lux",
"wpTimeout": "WiFi-config portal timeout",
"nostrPubKey": "Nostr source pubkey",
"nostrZapKey": "Nostr zap pubkey",
"nostrRelay": "Nostr Relay",
"nostrZapNotify": "Nostr Zap Notifications",
"useNostr": "Use Nostr data source",
"bitaxeHostname": "BitAxe hostname or IP",
"bitaxeEnabled": "Enable BitAxe",
"miningPoolStats": "Enable Mining Pool Stats",
"miningPoolName": "Mining Pool",
"miningPoolUser": "Mining Pool username or api key",
"nostrZapPubkey": "Nostr Zap pubkey",
"invalidNostrPubkey": "Invalid Nostr pubkey, note that your pubkey does NOT start with npub.",
"convertingValidNpub": "Converting valid npub to pubkey",
"flDisable": "Disable frontlight",
"httpAuthEnabled": "Require authentication for WebUI",
"httpAuthUser": "WebUI Username",
"httpAuthPass": "WebUI Password",
"httpAuthText": "Only password-protects WebUI, not API-calls.",
"currencies": "Currencies",
"stagingSource": "Use Staging data source (for development)",
"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": {
"systemInfo": "System info",
"version": "Version",
"buildTime": "Build time",
"ledColor": "LED color",
"turnOff": "Turn off",
"setColor": "Set color",
"showText": "Show text",
"text": "Text",
"title": "Control",
"hostname": "Hostname",
"frontlight": "Frontlight",
"turnOn": "Turn on",
"flashFrontlight": "Flash",
"firmwareUpdate": "Firmware update",
"fwCommit": "Firmware commit"
},
"status": {
"title": "Status",
"screenCycle": "Screen cycle",
"memoryFree": "Memory free",
"wsPriceConnection": "WS Price connection",
"wsMempoolConnection": "WS {instance} connection",
"fetchEuroNote": "If you use \"Fetch € price\" the WS Price connection will show ❌ since it uses another data source.",
"uptime": "Uptime",
"wifiSignalStrength": "WiFi Signal strength",
"wsDataConnection": "BTClock data-source connection",
"lightSensor": "Light sensor",
"nostrConnection": "Nostr Relay connection"
},
"firmwareUpdater": {
"fileUploadFailed": "File upload failed. Make sure you have selected the correct file and try again.",
"fileUploadSuccess": "File uploaded successfully, restarting device and reloading WebUI in {countdown} seconds",
"uploading": "Uploading",
"firmwareUpdateText": "When you use the firmware upload functionality, make sure you use the correct files. Uploading the wrong files can result in a non-working device. If it goes wrong, you can restore firmware by uploading the full image after setting the device in BOOT-mode.",
"swUpdateAvailable": "A newer version is available!",
"swUpToDate": "You are up to date.",
"latestVersion": "Latest Version",
"releaseDate": "Release Date",
"viewRelease": "View Release",
"autoUpdate": "Install update (experimental)"
}
},
"colors": {
"black": "Black",
"white": "White"
},
"time": {
"minutes": "minutes",
"seconds": "seconds"
},
"restartRequired": "restart required",
"button": {
"save": "Save",
"reset": "Reset",
"restart": "Restart",
"forceFullRefresh": "Force full refresh"
},
"timer": {
"running": "running",
"stopped": "stopped"
},
"sections": {
"control": {
"keepSameColor": "Keep same color"
}
},
"rssiBar": {
"tooltip": "Values > -67 dBm are considered good. > -30 dBm is amazing"
},
"warning": "Warning",
"auto-detect": "Auto-detect"
}

199
src/lib/locales/es.json
View file

@ -1,71 +1,132 @@
{
"section": {
"settings": {
"title": "Configuración",
"textColor": "Color de texto",
"backgroundColor": "Color de fondo",
"ledBrightness": "Brillo LED",
"screens": "Pantallas",
"shortAmountsWarning": "Cantidades pequeñas pueden acortar la vida útil.",
"fullRefreshEvery": "Actualización completa cada",
"timePerScreen": "Tiempo por pantalla",
"tzOffsetHelpText": "Es necesario reiniciar para aplicar la compensación.",
"timezoneOffset": "Compensación de zona horaria",
"StealFocusOnNewBlock": "Presta atención al nuevo bloque",
"ledFlashOnBlock": "El LED parpadea con un bloque nuevo",
"useBigCharsMcap": "Utilice caracteres grandes para la market cap",
"fetchEuroPrice": "Obtener precio en €",
"timeBetweenPriceUpdates": "Tiempo entre actualizaciones de precios",
"ledPowerOnTest": "Prueba de encendido del LED",
"enableMdns": "mDNS",
"hostnamePrefix": "Prefijo de nombre de host",
"mempoolnstance": "Instancia de Mempool",
"otaUpdates": "Actualización por aire"
},
"control": {
"turnOff": "Apagar",
"setColor": "Establecer el color",
"version": "Versión",
"ledColor": "color del LED",
"systemInfo": "Info del sistema",
"showText": "Poner texto",
"text": "Texto",
"title": "Control",
"buildTime": "Tiempo de construcción",
"hostname": "Nombre de host"
},
"status": {
"memoryFree": "Memoria RAM libre",
"wsPriceConnection": "Conexión WebSocket Precio",
"wsMempoolConnection": "Conexión WebSocket Mempool.space",
"screenCycle": "Rotacion de pantalla",
"uptime": "Tiempo de funcionamiento",
"fetchEuroNote": "Si utiliza \"Obtener precio en €\", la conexión de Precio WS mostrará ❌ ya que utiliza otra fuente de datos.",
"title": "Estado"
}
},
"button": {
"save": "Guardar",
"reset": "Restaurar",
"restart": "Reiniciar",
"forceFullRefresh": "Forzar refresco"
},
"colors": {
"black": "Negro",
"white": "Blanco"
},
"restartRequired": "reinicio requerido",
"time": {
"minutes": "minutos",
"seconds": "segundos"
},
"timer": {
"running": "funcionando",
"stopped": "detenido"
},
"sections": {
"control": {
"keepSameColor": "Mantén el mismo color"
}
}
"section": {
"settings": {
"title": "Configuración",
"textColor": "Color de texto",
"backgroundColor": "Color de fondo",
"ledBrightness": "Brillo LED",
"screens": "Pantallas",
"shortAmountsWarning": "Pequeñas cantidades pueden acortar la vida útil de los displays",
"fullRefreshEvery": "Actualización completa cada",
"timePerScreen": "Tiempo por pantalla",
"tzOffsetHelpText": "Es necesario reiniciar para aplicar la compensación.",
"timezoneOffset": "Compensación de zona horaria",
"StealFocusOnNewBlock": "Presta atención al nuevo bloque",
"ledFlashOnBlock": "El LED parpadea con un bloque nuevo",
"useBigCharsMcap": "Utilice caracteres grandes para la market cap",
"useBlkCountdown": "Cuenta regresiva en bloques",
"useSatsSymbol": "Usar símbolo sats",
"fetchEuroPrice": "Obtener precio en €",
"timeBetweenPriceUpdates": "Tiempo entre actualizaciones de precios",
"ledPowerOnTest": "Prueba de encendido del LED",
"enableMdns": "mDNS",
"hostnamePrefix": "Prefijo de nombre de host",
"mempoolnstance": "Instancia de Mempool",
"suffixPrice": "Precio con sufijos",
"disableLeds": "Desactivar efectos de LED",
"otaUpdates": "Actualización por aire",
"wifiTxPowerText": "En la mayoría de los casos no es necesario configurar esto.",
"settingsSaved": "Configuración guardada",
"errorSavingSettings": "Error al guardar la configuración",
"ownDataSource": "Utilice la fuente de datos BTClock",
"flMaxBrightness": "Brillo de luz de la pantalla",
"flAlwaysOn": "Luz de la pantalla siempre encendida",
"flEffectDelay": "Velocidad del efecto de luz de la pantalla",
"flFlashOnUpd": "Luz de la pantalla parpadea con un nuevo bloque",
"mempoolInstanceHelpText": "Solo es efectivo cuando la fuente de datos BTClock está deshabilitada. \nEs necesario reiniciar para aplicar.",
"luxLightToggle": "Cambio automático de luz frontal en lux",
"wpTimeout": "Portal de configuración WiFi timeout",
"useNostr": "Utilice la fuente de datos Nostr",
"flDisable": "Desactivar luz de la pantalla",
"httpAuthUser": "Nombre de usuario WebUI",
"httpAuthPass": "Contraseña WebUI",
"httpAuthText": "Solo la WebUI está protegida con contraseña, no las llamadas API.",
"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": {
"turnOff": "Apagar",
"setColor": "Establecer el color",
"version": "Versión",
"ledColor": "color del LED",
"systemInfo": "Info del sistema",
"showText": "Mostrar texto",
"text": "Texto",
"title": "Control",
"buildTime": "Tiempo de compilación",
"hostname": "Nombre del host",
"turnOn": "Encender",
"frontlight": "Luz de la pantalla",
"flashFrontlight": "Luz intermitente"
},
"status": {
"memoryFree": "Memoria RAM libre",
"wsPriceConnection": "Conexión WebSocket Precio",
"wsMempoolConnection": "Conexión WebSocket {instance}",
"screenCycle": "Ciclo de pantalla",
"uptime": "Tiempo de funcionamiento",
"fetchEuroNote": "Si utiliza \"Obtener precio en €\", la conexión de Precio WS mostrará ❌ ya que utiliza otra fuente de datos.",
"title": "Estado",
"wifiSignalStrength": "Fuerza de la señal WiFi",
"wsDataConnection": "Conexión de fuente de datos BTClock",
"lightSensor": "Sensor de luz",
"nostrConnection": "Conexión de relé Nostr"
},
"firmwareUpdater": {
"fileUploadSuccess": "Archivo cargado exitosamente, reiniciando el dispositivo. Recargando WebUI en {countdown} segundos",
"fileUploadFailed": "Error al cargar el archivo. \nAsegúrese de haber seleccionado el archivo correcto e inténtelo nuevamente.",
"uploading": "Subiendo",
"firmwareUpdateText": "Cuando utilice la función de carga de firmware, asegúrese de utilizar los archivos correctos. \nCargar archivos incorrectos puede provocar que el dispositivo no funcione. \nSi sale mal, puede restaurar el firmware cargando la imagen completa después de configurar el dispositivo en modo BOOT.",
"swUpToDate": "Tienes la ultima version.",
"swUpdateAvailable": "¡Una nueva versión está disponible!",
"latestVersion": "Ultima versión",
"releaseDate": "Fecha de lanzamiento",
"viewRelease": "Ver lanzamiento",
"autoUpdate": "Instalar actualización (experimental)"
}
},
"button": {
"save": "Guardar",
"reset": "Restaurar",
"restart": "Reiniciar",
"forceFullRefresh": "Forzar refresco"
},
"colors": {
"black": "Negro",
"white": "Blanco"
},
"restartRequired": "reinicio requerido",
"time": {
"minutes": "minutos",
"seconds": "segundos"
},
"timer": {
"running": "funcionando",
"stopped": "detenido"
},
"sections": {
"control": {
"keepSameColor": "Mantén el mismo color"
}
},
"rssiBar": {
"tooltip": "Se consideran buenos valores > -67 dBm. > -30 dBm es increíble"
},
"warning": "Aviso",
"auto-detect": "Detección automática"
}

198
src/lib/locales/nl.json
View file

@ -1,70 +1,132 @@
{
"section": {
"settings": {
"title": "Instellingen",
"textColor": "Tekstkleur",
"backgroundColor": "Achtergrondkleur",
"timeBetweenPriceUpdates": "Tijd tussen prijs updates",
"timezoneOffset": "Tijdzone afwijking",
"ledBrightness": "LED helderheid",
"timePerScreen": "Tijd per scherm",
"fullRefreshEvery": "Volledig verversen elke",
"shortAmountsWarning": "Lage waardes verkorten levensduur",
"tzOffsetHelpText": "Herstart nodig voor toepassen afwijking.",
"enableMdns": "mDNS",
"ledPowerOnTest": "LED test bij aanzetten",
"StealFocusOnNewBlock": "Pak aandacht bij nieuw blok",
"ledFlashOnBlock": "Knipper led bij nieuw blok",
"useBigCharsMcap": "Gebruik grote tekens bij market cap",
"fetchEuroPrice": "Toon € prijs",
"screens": "Schermen",
"hostnamePrefix": "Hostnaam voorvoegsel",
"mempoolnstance": "Mempool instantie",
"otaUpdates": "OTA updates"
},
"control": {
"systemInfo": "Systeeminformatie",
"version": "Versie",
"buildTime": "Bouwtijd",
"setColor": "Kleur instellen",
"turnOff": "Uitzetten",
"ledColor": "LED kleur",
"showText": "Toon tekst",
"text": "Tekst",
"title": "Besturing"
},
"status": {
"title": "Status",
"memoryFree": "Geheugen vrij",
"screenCycle": "Scherm cyclus",
"wsPriceConnection": "WS Prijs verbinding",
"wsMempoolConnection": "WS Mempool.space verbinding",
"fetchEuroNote": "Wanneer je \"Toon € prijs\" aanzet, zal de prijsverbinding als ❌ verbroken getoond worden vanwege het gebruik van een andere bron.",
"uptime": "Uptime"
}
},
"colors": {
"black": "Zwart",
"white": "Wit"
},
"time": {
"minutes": "minuten",
"seconds": "seconden"
},
"restartRequired": "herstart nodig",
"button": {
"save": "Opslaan",
"reset": "Herstel",
"restart": "Herstart",
"forceFullRefresh": "Forceer scherm verversen"
},
"timer": {
"running": "actief",
"stopped": "gestopt"
},
"sections": {
"control": {
"keepSameColor": "Behoud zelfde kleur"
}
}
"section": {
"settings": {
"title": "Instellingen",
"textColor": "Tekstkleur",
"backgroundColor": "Achtergrondkleur",
"timeBetweenPriceUpdates": "Tijd tussen prijs updates",
"timezoneOffset": "Tijdzone afwijking",
"ledBrightness": "LED helderheid",
"timePerScreen": "Tijd per scherm",
"fullRefreshEvery": "Volledig verversen elke",
"shortAmountsWarning": "Lage waardes verkorten mogelijk levensduur schermen",
"tzOffsetHelpText": "Herstart nodig voor toepassen afwijking.",
"enableMdns": "mDNS",
"ledPowerOnTest": "LED test bij aanzetten",
"StealFocusOnNewBlock": "Pak aandacht bij nieuw blok",
"ledFlashOnBlock": "Knipper led bij nieuw blok",
"useBigCharsMcap": "Gebruik grote tekens bij market cap",
"useBlkCountdown": "Blocks aftellen voor halving",
"useSatsSymbol": "Gebruik sats symbol",
"fetchEuroPrice": "Toon € prijs",
"screens": "Schermen",
"hostnamePrefix": "Hostnaam voorvoegsel",
"mempoolnstance": "Mempool instantie",
"suffixPrice": "Achtervoegsel prijs formaat",
"disableLeds": "Alle LEDs effecten uit",
"otaUpdates": "OTA updates",
"wifiTxPower": "WiFi TX power",
"wifiTxPowerText": "Meestal hoeft dit niet aangepast te worden.",
"settingsSaved": "Instellingen opgeslagen",
"errorSavingSettings": "Fout bij opslaan instellingen",
"ownDataSource": "BTClock-gegevensbron gebruiken",
"flMaxBrightness": "Displaylicht helderheid",
"flAlwaysOn": "Displaylicht altijd aan",
"flEffectDelay": "Displaylicht effect snelheid",
"flFlashOnUpd": "Knipper displaylicht bij nieuw blok",
"mempoolInstanceHelpText": "Alleen effectief als de BTClock-gegevensbron is uitgeschakeld. \nOm toe te passen is een herstart nodig.",
"luxLightToggle": "Schakelen displaylicht op lux",
"wpTimeout": "WiFi-config-portal timeout",
"useNostr": "Gebruik Nostr-gegevensbron",
"flDisable": "Schakel Displaylicht uit",
"httpAuthUser": "WebUI-gebruikersnaam",
"httpAuthPass": "WebUI-wachtwoord",
"httpAuthText": "Beveiligd enkel WebUI, niet de API.",
"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": {
"systemInfo": "Systeeminformatie",
"version": "Versie",
"buildTime": "Bouwtijd",
"setColor": "Kleur instellen",
"turnOff": "Uitzetten",
"ledColor": "LED kleur",
"showText": "Toon tekst",
"text": "Tekst",
"title": "Besturing",
"frontlight": "Displaylicht",
"turnOn": "Aanzetten",
"flashFrontlight": "Knipper"
},
"status": {
"title": "Status",
"memoryFree": "Geheugen vrij",
"screenCycle": "Scherm cyclus",
"wsPriceConnection": "WS Prijs verbinding",
"wsMempoolConnection": "WS {instance} verbinding",
"fetchEuroNote": "Wanneer je \"Toon € prijs\" aanzet, zal de prijsverbinding als ❌ verbroken getoond worden vanwege het gebruik van een andere bron.",
"uptime": "Uptime",
"wifiSignalStrength": "WiFi signaalsterkte",
"wsDataConnection": "BTClock-gegevensbron verbinding",
"lightSensor": "Licht sensor",
"nostrConnection": "Nostr Relay-verbinding"
},
"firmwareUpdater": {
"fileUploadSuccess": "Bestand geüpload, apparaat herstart. WebUI opnieuw geladen over {countdown} seconden",
"fileUploadFailed": "Bestandsupload mislukt. \nZorg ervoor dat het juiste bestand is geselecteerd en probeer het opnieuw.",
"uploading": "Uploaden",
"firmwareUpdateText": "Zorg bij het gebruiken van de firmware upload dat de juiste bestanden gebruikt worden. \nHet uploaden van de verkeerde bestanden kan resulteren in een niet-werkend apparaat. \nAls het misgaat, kunt u de firmware herstellen door de volledige afbeelding te uploaden nadat u het apparaat in de BOOT-modus hebt gezet.",
"swUpToDate": "Je hebt de nieuwste versie.",
"swUpdateAvailable": "Een nieuwere versie is beschikbaar!",
"latestVersion": "Laatste versie",
"releaseDate": "Datum van publicatie",
"viewRelease": "Bekijk publicatie",
"autoUpdate": "Update installeren (experimenteel)"
}
},
"colors": {
"black": "Zwart",
"white": "Wit"
},
"time": {
"minutes": "minuten",
"seconds": "seconden"
},
"restartRequired": "herstart nodig",
"button": {
"save": "Opslaan",
"reset": "Herstel",
"restart": "Herstart",
"forceFullRefresh": "Forceer scherm verversen"
},
"timer": {
"running": "actief",
"stopped": "gestopt"
},
"sections": {
"control": {
"keepSameColor": "Behoud zelfde kleur"
}
},
"rssiBar": {
"tooltip": "Waarden > -67 dBm zijn goed. > -30 dBm is verbazingwekkend"
},
"warning": "Waarschuwing",
"auto-detect": "Automatische detectie"
}

18
src/lib/screen.ts Normal file
View file

@ -0,0 +1,18 @@
import { writable } from 'svelte/store';
// Check if window is available
let initialWidth: number = 0;
if (typeof window !== 'undefined') {
initialWidth = window.innerWidth;
}
// Create a writable store to track screen size
export const screenSize = writable<number>(initialWidth);
// Function to update the screen size
export const updateScreenSize = (): void => {
// Check if window is available before setting the screen size
if (typeof window !== 'undefined') {
screenSize.set(window.innerWidth);
}
};

439
src/lib/style/app.scss
View file

@ -1,188 +1,319 @@
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/variables-dark";
@use '@fontsource/ubuntu/scss/mixins' as Ubuntu;
@use '@fontsource/antonio/scss/mixins' as Antonio;
@import '../node_modules/bootstrap/scss/functions';
//@import "@fontsource/antonio/latin-400.css";
@import "@fontsource/ubuntu/latin-400.css";
@import "@fontsource/oswald/latin-400.css";
$form-range-track-bg: #fff;
$color-mode-type: media-query;
$font-family-base: "Ubuntu";
@include Ubuntu.faces(
$subsets: latin,
$weights: 400,
$formats: 'woff2',
$directory: '@fontsource/ubuntu/files'
);
@include Antonio.faces(
$subsets: latin,
$weights: 400,
$formats: 'woff2',
$directory: '@fontsource/antonio/files'
);
@import './satsymbol';
$color-mode-type: data;
$font-family-base: 'Ubuntu';
$font-size-base: 0.9rem;
//$font-size-sm: $font-size-base * .875 !default;
//$form-label-font-size: $font-size-base * .575 !default;
//$input-btn-font-size-sm: 0.4rem;
//$form-label-font-size: 0.4rem;
$input-font-size-sm: $font-size-base * .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;
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/utilities";
@import '../node_modules/bootstrap/scss/mixins';
@import '../node_modules/bootstrap/scss/maps';
@import '../node_modules/bootstrap/scss/utilities';
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/forms";
@import "../node_modules/bootstrap/scss/buttons";
@import "../node_modules/bootstrap/scss/button-group";
@import "../node_modules/bootstrap/scss/pagination";
@import '../node_modules/bootstrap/scss/root';
@import '../node_modules/bootstrap/scss/reboot';
@import '../node_modules/bootstrap/scss/type';
@import '../node_modules/bootstrap/scss/containers';
@import '../node_modules/bootstrap/scss/grid';
@import '../node_modules/bootstrap/scss/forms';
@import '../node_modules/bootstrap/scss/buttons';
@import '../node_modules/bootstrap/scss/button-group';
//@import '../node_modules/bootstrap/scss/pagination';
@import "../node_modules/bootstrap/scss/dropdown";
@import '../node_modules/bootstrap/scss/dropdown';
@import "../node_modules/bootstrap/scss/navbar";
@import "../node_modules/bootstrap/scss/nav";
@import "../node_modules/bootstrap/scss/card";
@import "../node_modules/bootstrap/scss/progress";
@import '../node_modules/bootstrap/scss/navbar';
@import '../node_modules/bootstrap/scss/nav';
@import '../node_modules/bootstrap/scss/card';
@import '../node_modules/bootstrap/scss/progress';
@import '../node_modules/bootstrap/scss/tooltip';
@import '../node_modules/bootstrap/scss/toasts';
@import '../node_modules/bootstrap/scss/alert';
@import "../node_modules/bootstrap/scss/helpers";
@import "../node_modules/bootstrap/scss/utilities/api";
@import '../node_modules/bootstrap/scss/helpers';
@import '../node_modules/bootstrap/scss/utilities/api';
@include media-breakpoint-down(xl) {
html {
font-size: 85%;
}
button.btn,
input[type="button"].btn,
input[type="submit"].btn,
input[type="reset"].btn {
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-border-radius-sm);
}
/* Default state (xs) - sticky */
.sticky-xs-top {
position: sticky;
top: 0;
z-index: 1020;
}
@include media-breakpoint-down(lg) {
html {
font-size: 75%;
}
@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 {
margin-bottom: 15px;
margin-bottom: 15px;
}
.splitText div:first-child::after {
display: block;
content: '';
margin-top: 0px;
border-bottom: 2px solid;
margin-bottom: 3px;
#btclock-wrapper {
margin: 0 auto;
}
#btcclock-wrapper {
margin: 0 auto;
.btn-group-sm .btn {
font-size: 0.8rem;
// text-overflow: ellipsis;
// white-space: nowrap;
// overflow: hidden;
// width: 4rem;
}
.btclock {
border: 1px solid darkgray;
background: #000;
border-radius: 5px;
padding: 10px;
max-width: 700px;
margin: 0 auto;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
align-content: stretch;
font-family: 'Oswald', sans-serif;
>div {
padding: 5px;
}
.digit,
.splitText,
.mediumText {
border: 2px solid gold;
border-radius: 8px;
@include media-breakpoint-up(sm) {
min-width: 10px;
}
@include media-breakpoint-up(xxl) {
min-width: 70px;
}
text-align: center;
color: #fff;
}
.btn-group-sm {
display: flex !important;
flex-wrap: wrap !important;
gap: 0.25rem !important;
}
.darkMode .btclock>div {
color: #fff;
border-color: #fff;
}
.lightMode .btclock>div {
background: #fff;
}
.lightMode .btclock>div {
color: #000;
}
.darkMode .btclock>div {
background: #000;
}
.splitText {
@include media-breakpoint-up(sm) {
font-size: 1.0rem;
padding-top: 8px !important;
padding-bottom: 9px !important;
}
@include media-breakpoint-up(xxl) {
font-size: 1.8rem;
padding-top: 19px !important;
padding-bottom: 20px !important;
}
text-align: center;
}
.mediumText {
font-size: 3rem;
padding-left: 5px;
padding-right: 5px;
padding-top: 20px !important;
padding-bottom: 20px !important;
}
.digit {
font-size: 5rem;
@include media-breakpoint-up(sm) {
font-size: 2.5rem;
}
@include media-breakpoint-up(xxl) {
font-size: 5rem;
}
padding-left: 10px;
padding-right: 10px;
}
.digit-blank {
content: "abc";
/* Remove the border radius override that Bootstrap applies */
.btn-group-sm > .btn {
border-radius: 0.25rem !important;
margin: 0 !important;
position: relative !important;
}
#customText {
text-transform: uppercase;
text-transform: uppercase;
}
.system_info {
padding: 0;
li {
list-style: none;
}
.btclock-wrapper {
.btclock {
background: #000;
display: flex;
font-size: calc(2vw + 2vh);
font-family: 'Antonio', sans-serif;
font-weight: 400;
padding: 10px;
gap: 10px;
.digit,
.splitText,
.mediumText {
border: 2px solid gold;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 10px 10px 15px 10px;
width: calc(12vw + 12vh); /* Set a dynamic width based on viewport */
aspect-ratio: 1 / 1.5; /* Maintain a 1:1 aspect ratio */
hr {
width: 75%; /* Line width relative to digit square */
border: 0;
border-top: 2px solid #fff;
margin: 0; /* Remove default margin */
padding: 0;
opacity: 1;
}
}
.digit.sats {
padding-top: 35px;
}
.mediumText {
font-size: calc(1.25vw + 1.25vh);
}
.splitText {
flex-direction: column; /* Stack the text and line vertically */
align-items: center;
justify-content: space-around; /* Distribute items with space between */
padding: 5px;
}
&.verticalDesc > .splitText:first-child {
.textcontainer {
transform: rotate(-90deg);
}
}
.splitText .textcontainer :first-child::after {
display: block;
content: '';
margin-top: 0px;
border-bottom: 2px solid;
// margin-bottom: 3px;
}
.splitText {
font-size: calc(0.3vw + 1vh);
.top-text,
.bottom-text {
margin: 0;
line-height: 1;
}
.top-text {
margin-bottom: -45px;
}
.bottom-text {
margin-top: -45px;
}
}
.digit-blank {
content: 'abc';
}
.digit.icon {
content: 'abc';
svg {
width: 100%;
}
}
}
.digit.sats {
font-family: 'Satoshi Symbol', sans-serif;
content: 'a';
}
@media (max-width: 576px) {
.btclock {
font-size: calc(2vw + 2vh); /* Adjust for small screens if necessary */
.digit,
.splitText,
.mediumText {
padding: 5px;
}
.splitText {
font-size: calc(1.2vw + 1.2vh);
.top-text,
.bottom-text {
margin: 0;
line-height: 1;
}
.top-text {
margin-bottom: -10px;
}
.bottom-text {
margin-top: -10px;
}
}
}
}
}
.darkMode .btclock > div {
color: #fff;
border-color: #fff;
}
.darkMode .btclock > div {
background: #000;
color: #fff;
}
.lightMode .btclock {
& > div {
background: #fff;
color: #000;
}
.splitText hr {
border-top: 2px solid #000;
}
}
.lightMode .btclock > div {
color: #000;
}
.system_info {
padding: 0;
li {
list-style: none;
}
}
.card-title {
margin-bottom: 0;
}
margin-bottom: 0;
}
.navbar-brand {
font-style: italic;
font-weight: 600;
}
.firmwareUploadStatusAlert,
#firmwareUploadProgress {
@extend .my-2;
}
.sats {
font-family: 'Satoshi Symbol';
}
.currencyCode {
width: 20%;
text-align: center;
display: inline-block;
}
input[type='number'] {
text-align: right;
}
.lightMode .bitaxelogo {
filter: brightness(0) saturate(100%);
}

7
src/lib/style/satsymbol.scss Normal file
View file

@ -0,0 +1,7 @@
@font-face {
font-family: 'Satoshi Symbol';
src: url('/fonts/Satoshi_Symbol.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}

7
src/lib/uiSettings.ts Normal file
View file

@ -0,0 +1,7 @@
import { writable } from 'svelte/store';
export const uiSettings = writable({
inputSize: 'sm',
selectClass: '',
btnSize: 'lg'
});

110
src/routes/+layout.svelte
View file

@ -1,21 +1,23 @@
<script lang="ts">
import {
Navbar,
NavbarBrand,
Collapse,
Dropdown,
DropdownItem,
DropdownMenu,
DropdownToggle,
Nav,
NavItem,
NavLink,
Collapse,
Dropdown,
DropdownMenu,
DropdownItem,
DropdownToggle
} from 'sveltestrap';
Navbar,
NavbarBrand,
NavbarToggler
} from '@sveltestrap/sveltestrap';
import { _ } from 'svelte-i18n';
import { locale, locales, waitLocale } from 'svelte-i18n';
import type { LayoutLoad } from './$types';
import { browser } from '$app/environment';
import { page } from '$app/stores';
import { locale, locales, isLoading } from 'svelte-i18n';
import { ColorSchemeSwitcher } from '$lib/components';
import { derived } from 'svelte/store';
export const setLocale = (lang: string) => () => {
locale.set(lang);
@ -26,57 +28,93 @@
const flagMap: { [key: string]: string } = {
en: '🇬🇧', // English flag emoji
nl: '🇳🇱', // Dutch flag emoji
es: '🇪🇸' // Spanish flag emoji
es: '🇪🇸', // Spanish flag emoji
de: '🇩🇪' // German flag emoji
};
// Convert the language code to lowercase for case-insensitive matching
const lowercaseCode = languageCode.toLowerCase();
// Check if the language code is in the flagMap
if (flagMap.hasOwnProperty(lowercaseCode)) {
if (Object.prototype.hasOwnProperty.call(flagMap, lowercaseCode)) {
return flagMap[lowercaseCode];
} else {
// Return null for unsupported language codes
return null;
return flagMap['en'];
}
};
export const getLanguageName = (languageCode: string): string | null => {
const languageNames: { [key: string]: { [key: string]: string } } = {
en: { en: 'English', nl: 'English', es: 'English' },
nl: { en: 'Nederlands', nl: 'Nederlands', es: 'Neerlandés' },
es: { en: 'Español', nl: 'Spaans', es: 'Español' }
};
let languageNames = {};
const lowercaseCode = languageCode.toLowerCase();
const currentLocale = derived(locale, ($locale) => $locale || 'en');
return languageNames.hasOwnProperty(lowercaseCode)
? languageNames[lowercaseCode][lowercaseCode]
: null;
locale.subscribe(() => {
const localeToUse = $locale || 'en';
let newLanguageNames = new Intl.DisplayNames([localeToUse], { type: 'language' });
for (let l of $locales) {
languageNames[l] = newLanguageNames.of(l) || l;
}
});
let isOpen = false;
const toggle = () => {
isOpen = !isOpen;
};
</script>
<Navbar expand="md">
<NavbarBrand>&#8383;TClock</NavbarBrand>
<Collapse navbar expand="md">
<Navbar expand="md" sticky="xs-top" theme="auto">
<NavbarBrand class="d-none d-sm-block">&#8383;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} />
<Collapse {isOpen} navbar expand="sm">
<Nav class="me-auto" navbar>
<NavItem>
<NavLink href="/" active={$page.url.pathname === '/'}>Home</NavLink>
</NavItem>
<NavItem>
<NavLink href="/convert" active={$page.url.pathname === '/convert'}>Convert</NavLink>
</NavItem>
<NavItem>
<NavLink href="/api" active={$page.url.pathname === '/api'}>API</NavLink>
</NavItem>
</Nav>
<Dropdown inNavbar>
<DropdownToggle nav caret>{getFlagEmoji($locale)} {getLanguageName($locale)}</DropdownToggle>
<DropdownMenu end>
{#each $locales as locale}
<DropdownItem on:click={setLocale(locale)}>{getFlagEmoji(locale)} {getLanguageName(locale)}</DropdownItem>
{/each}
</DropdownMenu>
</Dropdown>
{#if !$isLoading}
<Dropdown id="nav-language-dropdown" inNavbar class="me-3">
<DropdownToggle nav caret
>{getFlagEmoji($currentLocale)}
{languageNames[$currentLocale] || 'English'}</DropdownToggle
>
<DropdownMenu end>
{#each $locales as locale}
<DropdownItem on:click={setLocale(locale)}
>{getFlagEmoji(locale)} {languageNames[locale]}</DropdownItem
>
{/each}
</DropdownMenu>
</Dropdown>
{/if}
<ColorSchemeSwitcher></ColorSchemeSwitcher>
</Collapse>
</Navbar>
<!-- +layout.svelte -->
<slot />
<main>
<slot />
</main>

30
src/routes/+layout.ts
View file

@ -1,20 +1,24 @@
import "$lib/style/app.scss";
import '$lib/style/app.scss';
import { browser } from '$app/environment'
import '$lib/i18n' // Import to initialize. Important :)
import { locale, waitLocale } from 'svelte-i18n'
import type { LayoutLoad } from './$types'
import { browser } from '$app/environment';
import '$lib/i18n'; // Import to initialize. Important :)
import { locale, waitLocale } from 'svelte-i18n';
import type { LayoutLoad } from './$types';
export const load: LayoutLoad = async () => {
if (browser && localStorage.getItem('locale')) {
locale.set(localStorage.getItem('locale'));
} else if (browser) {
locale.set(window.navigator.language)
if (browser) {
if (localStorage.getItem('locale')) {
locale.set(localStorage.getItem('locale'));
} else {
// Normalize the browser locale
const browserLocale = window.navigator.language.split('-')[0].toLowerCase();
const supportedLocales = ['en', 'nl', 'es', 'de'];
locale.set(supportedLocales.includes(browserLocale) ? browserLocale : 'en');
}
}
await waitLocale();
}
await waitLocale();
};
export const prerender = true;
export const ssr = false;
export const csr = true;
export const csr = true;

203
src/routes/+page.svelte
View file

@ -1,71 +1,184 @@
<script lang="ts">
import { PUBLIC_BASE_URL } from '$env/static/public';
import { PUBLIC_BASE_URL } from '$lib/config';
import { screenSize, updateScreenSize } from '$lib/screen';
import { _ } from 'svelte-i18n';
import { Col, Container, Row } from 'sveltestrap';
import { Container, Row, Toast, ToastBody } from '@sveltestrap/sveltestrap';
import { replaceState } from '$app/navigation';
import Control from './Control.svelte';
import Status from './Status.svelte';
import Settings from './Settings.svelte';
import { writable } from 'svelte/store';
import { onMount } from 'svelte';
import { writable } from 'svelte/store';
import Control from './Control.svelte';
import Settings from './Settings.svelte';
import Status from './Status.svelte';
import { uiSettings } from '$lib/uiSettings';
let settings = writable({
fgColor: "0"
});
fgColor: '0',
bgColor: '0'
});
let status = writable({
data: ["L", "O", "A", "D", "I", "N", "G"],
espFreeHeap: 0,
espHeapSize: 0,
connectionStatus: {
"price": false,
"blocks": false
},
data: ['L', 'O', 'A', 'D', 'I', 'N', 'G'],
espFreeHeap: 0,
espHeapSize: 0,
connectionStatus: {
price: false,
blocks: false
},
leds: []
});
});
onMount(() => {
fetch( PUBLIC_BASE_URL + `/api/settings`)
.then((res) => res.json())
.then((data) => {
data.fgColor = String(data.fgColor);
data.bgColor = String(data.bgColor);
data.timePerScreen = data.timerSeconds / 60;
if (data.fgColor> 65535) {
data.fgColor = "65535";
}
if (data.bgColor> 65535) {
data.bgColor = "65535";
}
settings.set(data);
});
fetch(`${PUBLIC_BASE_URL}/api/status`)
const fetchStatusData = () => {
fetch(`${PUBLIC_BASE_URL}/api/status`, { credentials: 'same-origin' })
.then((res) => res.json())
.then((data) => {
status.set(data);
});
};
const evtSource = new EventSource(`${PUBLIC_BASE_URL}/events`);
const fetchSettingsData = () => {
fetch(PUBLIC_BASE_URL + `/api/settings`, { credentials: 'same-origin' })
.then((res) => res.json())
.then((data) => {
data.fgColor = String(data.fgColor);
data.bgColor = String(data.bgColor);
data.timePerScreen = data.timerSeconds / 60;
evtSource.addEventListener('status', (e) => {
let dataObj = (JSON.parse(e.data));
status.set(dataObj);
});
if (data.fgColor > 65535) {
data.fgColor = '65535';
}
if (data.bgColor > 65535) {
data.bgColor = '65535';
}
settings.set(data);
});
};
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(() => {
setupObserver();
fetchSettingsData();
fetchStatusData();
const evtSource = new EventSource(`${PUBLIC_BASE_URL}/events`);
evtSource.addEventListener('status', (e) => {
let dataObj = JSON.parse(e.data);
status.set(dataObj);
});
function handleResize() {
if (observer) {
observer.disconnect();
}
setupObserver();
updateScreenSize();
}
// Add an event listener to update the screen size when the window is resized
window.addEventListener('resize', handleResize);
// Call the function initially to set the initial screen size
updateScreenSize();
// Cleanup function to remove the event listener when the component is destroyed
return () => {
window.removeEventListener('resize', handleResize);
};
});
$: {
const lgBreakpoint = parseInt(
getComputedStyle(document.documentElement).getPropertyValue('--bs-breakpoint-lg')
);
if ($screenSize >= lgBreakpoint) {
uiSettings.set({
inputSize: 'sm',
selectClass: 'form-select-sm',
btnSize: 'sm'
});
} else {
uiSettings.set({
inputSize: 'lg',
selectClass: 'form-select-lg',
btnSize: 'xl'
});
}
}
let toastIsOpen = false;
let toastColor = 'success';
let toastBody = '';
export const showToast = (event) => {
toastIsOpen = true;
toastColor = event.detail.color;
toastBody = event.detail.text;
};
</script>
<svelte:head>
<title>&#8383;TClock</title>
<title>BTClock</title>
</svelte:head>
<Container fluid>
<Row>
<Control bind:settings bind:status></Control>
<Status bind:settings bind:status></Status>
<Settings bind:settings></Settings>
<Control bind:settings on:showToast={showToast} bind:status lg="3" xxl="4"></Control>
<Status bind:settings bind:status lg="6" xxl="4"></Status>
<Settings bind:settings on:showToast={showToast} on:formReset={fetchSettingsData} lg="3" xxl="4"
></Settings>
</Row>
</Container>
<div class="position-fixed bottom-0 end-0 p-2">
<div class="">
<Toast
isOpen={toastIsOpen}
class="me-1 bg-{toastColor} text-bg-{toastColor}"
autohide
on:close={() => (toastIsOpen = false)}
>
<ToastBody>
{toastBody}
</ToastBody>
</Toast>
</div>
</div>

30
src/routes/Control.spec.ts Normal file
View file

@ -0,0 +1,30 @@
import { writable } from 'svelte/store';
import Control from './Control.svelte';
import { render } from '@testing-library/svelte';
import { describe, test, expect, beforeEach } from 'vitest';
import { addMessages, init, locale } from 'svelte-i18n';
import '$lib/i18n/index.ts';
import en from '$lib/locales/en.json';
addMessages('en', en);
describe('Control Component', () => {
beforeEach(() => {
init({
fallbackLocale: 'en',
initialLocale: 'en'
});
locale.set('en');
});
test('should render the component', () => {
const host = document.createElement('div');
document.body.appendChild(host);
const instance = render(Control, {
target: host,
props: { status: writable([]), settings: writable([]) }
});
expect(instance).toBeTruthy();
expect(host.innerHTML).toContain('Control');
});
});

316
src/routes/Control.svelte
View file

@ -1,134 +1,246 @@
<script lang="ts">
import { PUBLIC_BASE_URL } from '$env/static/public';
import { PUBLIC_BASE_URL } from '$lib/config';
import { onDestroy } from 'svelte';
import { _ } from 'svelte-i18n';
import type { Subscriber, Unsubscriber } from 'svelte/motion';
import { _ } from 'svelte-i18n';
import type { Writable } from 'svelte/store';
import {
Button,
ButtonGroup,
Card,
CardTitle,
CardBody,
CardHeader,
Col,
Container,
Form,
Input,
Label,
Row
} from 'sveltestrap';
import {
Button,
Card,
CardBody,
CardHeader,
CardTitle,
Col,
Form,
Input,
Label,
Row
} from '@sveltestrap/sveltestrap';
import FirmwareUpdater from './FirmwareUpdater.svelte';
import { uiSettings } from '$lib/uiSettings';
export let settings = {};
export let customText:String;
export let ledColor:String = "#FFCC00";
export let status:Writable<{leds:[]}>;
let ledStatus = [];
let keepLedsSameColor = false;
export let settings = {};
const setCustomText = () => {
fetch(`${PUBLIC_BASE_URL}/api/show/text/${customText}`).catch(err => { });
};
export let customText: string;
export let status: Writable<{ leds: [] }>;
let ledStatus = [];
let keepLedsSameColor = false;
const checkSyncLeds = (e:Event) => {
console.log('checksyncleds', keepLedsSameColor);
if (keepLedsSameColor) {
console.log(e.target.value);
const setCustomText = () => {
fetch(`${PUBLIC_BASE_URL}/api/show/text/${customText}`).catch(() => {});
};
ledStatus.forEach((element, i) => {
if (ledStatus[i].hex != e.target_value) {
ledStatus[i].hex = e.target.value;
const checkSyncLeds = (e: Event) => {
console.log('checksyncleds', keepLedsSameColor);
if (keepLedsSameColor) {
console.log(e.target.value);
ledStatus.forEach((element, i) => {
if (ledStatus[i].hex != e.target_value) {
ledStatus[i].hex = e.target.value;
}
});
}
};
const setLEDcolor = () => {
fetch(`${PUBLIC_BASE_URL}/api/lights/set`, {
headers: {
'Content-Type': 'application/json'
},
method: 'PATCH',
body: JSON.stringify(ledStatus)
}).catch(() => {});
};
const turnOffLeds = () => {
fetch(`${PUBLIC_BASE_URL}/api/lights/off`).catch(() => {});
};
const turnOnFrontlight = () => {
fetch(`${PUBLIC_BASE_URL}/api/frontlight/on`).catch(() => {});
};
const flashFrontlight = () => {
fetch(`${PUBLIC_BASE_URL}/api/frontlight/flash`).catch(() => {});
};
const turnOffFrontlight = () => {
fetch(`${PUBLIC_BASE_URL}/api/frontlight/off`).catch(() => {});
};
const restartClock = () => {
fetch(`${PUBLIC_BASE_URL}/api/restart`).catch(() => {});
};
const forceFullRefresh = () => {
fetch(`${PUBLIC_BASE_URL}/api/full_refresh`).catch(() => {});
};
let firstLedDataSubscription = () => {};
firstLedDataSubscription = status.subscribe(async (val) => {
if (val && val.leds) {
ledStatus = val.leds.map((obj) => ({ ['hex']: obj['hex'] }));
for (let led of ledStatus) {
if (led['hex'] == '#000000') {
led['hex'] = `#${Math.floor(Math.random() * 16777215)
.toString(16)
.padStart(6, '0')}`;
}
}
});
}
}
const setLEDcolor = () => {
console.log(`${PUBLIC_BASE_URL}/api/lights/${ledColor}`);
fetch(`${PUBLIC_BASE_URL}/api/lights`, {
headers: {
'Content-Type': 'application/json'
},
method: 'PATCH',
body: JSON.stringify(ledStatus)
}
).catch(err => { });
};
firstLedDataSubscription();
}
});
const turnOffLeds = () => {
fetch(`${PUBLIC_BASE_URL}/api/lights/off`).catch(err => { });
};
onDestroy(firstLedDataSubscription);
const restartClock = () => {
fetch(`${PUBLIC_BASE_URL}/api/restart`).catch(err => { });
}
const forceFullRefresh = () => {
fetch(`${PUBLIC_BASE_URL}/api/full_refresh`).catch(err => { });
}
let firstLedDataSubscription = () => {};
firstLedDataSubscription = status.subscribe(async(val) => {
if (val && val.leds) {
ledStatus = val.leds.map((obj) => ({ ["hex"]: obj["hex"] }));
firstLedDataSubscription();
}
})
onDestroy(firstLedDataSubscription);
// You can also add more props if needed
export let xs = 12;
export let sm = xs;
export let md = sm;
export let lg = md;
export let xl = lg;
export let xxl = xl;
</script>
<Col>
<Card>
<Col {xs} {sm} {md} {lg} {xl} {xxl} class="mb-4 mb-xl-0">
<Card id="control">
<CardHeader>
<CardTitle>{$_('section.control.title', { default: 'Control' })}</CardTitle>
</CardHeader>
<CardBody>
<Form>
<Row>
<Label md={6} for="customText">{ $_('section.control.text') }</Label>
<Col md="6">
<Input type="text" id="customText" bind:value={customText} bsSize="sm" maxLength="{$settings.numScreens}" />
<Label md={4} for="customText" size={$uiSettings.inputSize}
>{$_('section.control.text')}</Label
>
<Col md="8">
<Input
type="text"
id="customText"
bind:value={customText}
bsSize="$uiSettings.inputSize"
maxLength={$settings.numScreens}
/>
</Col>
</Row>
<Button color="primary" on:click={setCustomText}>{ $_('section.control.showText') }</Button>
</Form>
<hr />
<h3>LEDs</h3>
<Form>
<Row>
<Label md={6} for="ledColorPicker" size="sm">{ $_('section.control.ledColor') }</Label>
<Col md="6">
<Row class="justify-content-between">
{#if ledStatus}
{#each ledStatus as led, i }
<Col>
<Input type="color" id="ledColorPicker[{i}]" bind:value="{led.hex}" class="mx-auto" on:change="{checkSyncLeds}" />
</Col>
{/each}
{/if}
<Col>
<Input bind:checked={keepLedsSameColor} type="switch" class="mx-auto" label="{ $_('sections.control.keepSameColor') }" />
</Col>
</Row>
<Col class="d-flex justify-content-end">
<Button color="primary" on:click={setCustomText} bsSize={$uiSettings.btnSize}
>{$_('section.control.showText')}</Button
>
</Col>
</Row>
<Button color="secondary" id="turnOffLedsBtn" on:click={turnOffLeds}>{ $_('section.control.turnOff') }</Button>
<Button color="primary" on:click={setLEDcolor}>{ $_('section.control.setColor') }</Button>
</Form>
<hr />
<h3>{ $_('section.control.systemInfo') }</h3>
{#if !$settings.disableLeds}
<h3>LEDs</h3>
<Form>
<Row>
<Label md={4} for="ledColorPicker" size={$uiSettings.inputSize}
>{$_('section.control.ledColor')}</Label
>
<Col md="8">
<Row class="justify-content-between">
{#if ledStatus}
{#each ledStatus as led, i}
<Col>
<Input
type="color"
id="ledColorPicker[{i}]"
bind:value={led.hex}
class="mx-auto"
on:change={checkSyncLeds}
/>
</Col>
{/each}
{/if}
</Row>
<Row>
<Col class="d-flex justify-content-end">
<Input
bind:checked={keepLedsSameColor}
type="switch"
label={$_('sections.control.keepSameColor')}
bsSize={$uiSettings.inputSize}
/>
</Col>
</Row>
</Col>
</Row>
<Row>
<Col class="d-flex justify-content-end">
<Button
color="secondary"
id="turnOffLedsBtn"
on:click={turnOffLeds}
bsSize={$uiSettings.inputSize}>{$_('section.control.turnOff')}</Button
>
<div class="mx-2"></div>
<Button color="primary" on:click={setLEDcolor} bsSize={$uiSettings.inputSize}
>{$_('section.control.setColor')}</Button
>
</Col>
</Row>
</Form>
<hr />
{/if}
{#if $settings.hasFrontlight && !$settings.flDisable}
<h3>{$_('section.control.frontlight')}</h3>
<Row class="d-flex justify-content-between justify-content-md-end">
<Col md="auto" class="">
<Button color="secondary" id="turnOffFrontlightBtn" on:click={turnOffFrontlight}
>{$_('section.control.turnOff')}</Button
>
</Col><Col md="auto" class="">
<Button color="primary" on:click={turnOnFrontlight}
>{$_('section.control.turnOn')}</Button
>
</Col><Col md="auto" class="">
<Button color="success" id="flashFrontlight" on:click={flashFrontlight}
>{$_('section.control.flashFrontlight')}</Button
>
</Col>
</Row>
<hr />
{/if}
<h3>{$_('section.control.systemInfo')}</h3>
<ul class="small system_info">
<li>{ $_('section.control.version') }: {$settings.gitRev}</li>
<li>{ $_('section.control.buildTime') }: {new Date(($settings.lastBuildTime * 1000)).toLocaleString()}</li>
{#if $settings.gitTag}
<li>
{$_('section.control.version')}: {$settings.gitTag}
</li>
{/if}
<li>
{$_('section.control.buildTime')}: {new Date(
$settings.lastBuildTime * 1000
).toLocaleString()}
</li>
<li>IP: {$settings.ip}</li>
<li>{ $_('section.control.hostname') }: {$settings.hostname}</li>
<li>HW revision: {$settings.hwRev}</li>
<li>{$_('section.control.fwCommit')}: {$settings.gitRev}</li>
<li>WebUI commit: {$settings.fsRev}</li>
<li>{$_('section.control.hostname')}: {$settings.hostname}</li>
</ul>
<Button color="danger" id="restartBtn" on:click="{restartClock}">{ $_('button.restart') }</Button>
<Button color="warning" id="forceFullRefresh" on:click="{forceFullRefresh}">{ $_('button.forceFullRefresh') }</Button>
<Row>
<Col class="d-flex justify-content-end">
<Button color="danger" id="restartBtn" on:click={restartClock}
>{$_('button.restart')}</Button
>
<div class="mx-2"></div>
<Button color="warning" id="forceFullRefresh" on:click={forceFullRefresh}
>{$_('button.forceFullRefresh')}</Button
>
</Col>
</Row>
{#if $settings.otaEnabled}
<hr />
<h3>{$_('section.control.firmwareUpdate')}</h3>
<FirmwareUpdater on:showToast bind:settings />
{/if}
</CardBody>
</Card>
</Col>

0
src/routes/Control.ts
View file

255
src/routes/FirmwareUpdater.svelte Normal file
View file

@ -0,0 +1,255 @@
<script lang="ts">
import { PUBLIC_BASE_URL } from '$lib/config';
import { createEventDispatcher, onMount } from 'svelte';
import { _ } from 'svelte-i18n';
import { writable } from 'svelte/store';
import { Progress, Alert, Button } from '@sveltestrap/sveltestrap';
const dispatch = createEventDispatcher();
export let settings = { hwRev: '' };
let currentVersion: string = $settings.gitTag; // Replace with your current version
let latestVersion: string = '';
let isNewerVersionAvailable: boolean = false;
let releaseDate: string = '';
let releaseUrl: string = '';
const countdown = writable(10);
let firmwareUploadFile: File | null = null;
let firmwareWebUiFile: File | null = null;
let firmwareUploadProgress = 0;
let firmwareUploadSuccess = false;
let firmwareUploadError = false;
const handleFileChange = (event: Event, setFile: (file: File) => void) => {
const target = event.target as HTMLInputElement;
if (target.files && target.files.length > 0) {
setFile(target.files[0]);
}
};
function startCountdownToReload(duration: number) {
let timeRemaining = duration;
const interval = setInterval(() => {
timeRemaining -= 1;
countdown.set(timeRemaining);
if (timeRemaining <= 0) {
clearInterval(interval);
location.reload();
}
}, 1000); // Update every second
}
const uploadFile = async (file: File | null, endpoint: string) => {
if (!file) return;
const formData = new FormData();
formData.append('file', file);
firmwareUploadSuccess = false;
firmwareUploadError = false;
try {
const xhr = new XMLHttpRequest();
xhr.open('POST', endpoint);
xhr.upload.onprogress = (event: ProgressEvent) => {
if (event.lengthComputable) {
firmwareUploadProgress = Math.round((event.loaded * 100) / event.total);
}
};
xhr.onload = () => {
if (xhr.status === 200 && xhr.responseText != 'FAIL') {
firmwareUploadSuccess = true;
startCountdownToReload(10);
} else {
firmwareUploadError = true;
}
};
xhr.onerror = () => {
firmwareUploadError = true;
};
xhr.send(formData);
} catch (error) {
firmwareUploadError = true;
console.error(error);
}
};
const uploadFirmwareFile = () => {
uploadFile(firmwareUploadFile, `${PUBLIC_BASE_URL}/upload/firmware`);
};
const uploadWebUiFile = () => {
uploadFile(firmwareWebUiFile, `${PUBLIC_BASE_URL}/upload/webui`);
};
const getFirmwareBinaryName = () => {
let binaryFilename = '';
switch ($settings.hwRev) {
case 'REV_V8_EPD_2_13':
binaryFilename = 'btclock_rev_v8_213epd_firmware.bin';
break;
case 'REV_B_EPD_2_13':
binaryFilename = 'btclock_rev_b_213epd_firmware.bin';
break;
case 'REV_A_EPD_2_13':
binaryFilename = 'lolin_s3_mini_213epd_firmware.bin';
break;
case 'REV_A_EPD_2_9':
binaryFilename = 'lolin_s3_mini_29epd_firmware.bin';
break;
default:
binaryFilename = 'Unsupported hardware, unable to determine firmware binary filename';
}
return binaryFilename;
};
const onAutoUpdate = async (e: Event) => {
e.preventDefault();
try {
const response = await fetch(`${PUBLIC_BASE_URL}/api/firmware/auto_update`);
if (!response.ok) {
let msg = (await response.json()).msg;
dispatch('showToast', {
color: 'danger',
text: msg
});
} else {
let msg = (await response.json()).msg;
dispatch('showToast', {
color: 'info',
text: msg
});
}
} catch (error) {
dispatch('showToast', {
color: 'danger',
text: error
});
console.error('Error fetching latest version:', error);
}
};
onMount(async () => {
try {
const response = await fetch(
'https://git.btclock.dev/api/v1/repos/btclock/btclock_v3/releases/latest'
);
if (!response.ok) {
latestVersion = 'error';
} else {
const data = await response.json();
latestVersion = data.tag_name;
releaseDate = new Date(data.created_at).toLocaleString();
releaseUrl = data.html_url;
isNewerVersionAvailable = compareVersions(latestVersion, currentVersion) === 1;
}
} catch (error) {
console.error('Error fetching latest version:', error);
}
});
function compareVersions(version1: string, version2: string): number {
if (!version2) return 0;
const parts1 = version1.split('.').map((part) => parseInt(part, 10));
const parts2 = version2.split('.').map((part) => parseInt(part, 10));
for (let i = 0; i < 3; i++) {
if (parts1[i] > parts2[i]) {
return 1;
} else if (parts1[i] < parts2[i]) {
return -1;
}
}
return 0;
}
</script>
{#if latestVersion && latestVersion != 'error'}
<p>
{$_('section.firmwareUpdater.latestVersion')}: {latestVersion} - {$_(
'section.firmwareUpdater.releaseDate'
)}: {releaseDate} -
<a href={releaseUrl} target="_blank">{$_('section.firmwareUpdater.viewRelease')}</a><br />
{#if isNewerVersionAvailable}
{$_('section.firmwareUpdater.swUpdateAvailable')} -
<a href="/" on:click={onAutoUpdate}>{$_('section.firmwareUpdater.autoUpdate')}</a>.
{:else}
{$_('section.firmwareUpdater.swUpToDate')}
{/if}
</p>
{:else if latestVersion == 'error'}
<p>Error loading version, try again later.</p>
{:else}
<p>Loading...</p>
{/if}
<section class="row row-cols-lg-auto align-items-end">
<div class="col flex-fill">
<label for="firmwareFile" class="form-label">Firmware file ({getFirmwareBinaryName()})</label>
<input
type="file"
id="firmwareFile"
on:change={(e) => handleFileChange(e, (file) => (firmwareUploadFile = file))}
name="update"
class="form-control"
accept=".bin"
/>
</div>
<div class="flex-fill">
<Button block on:click={uploadFirmwareFile} color="primary" disabled={!firmwareUploadFile}
>Update firmware</Button
>
</div>
<div class="col flex-fill">
<label for="webuiFile" class="form-label">WebUI file (littlefs.bin)</label>
<input
type="file"
id="webuiFile"
name="update"
class="form-control"
placeholder="littlefs.bin"
on:change={(e) => handleFileChange(e, (file) => (firmwareWebUiFile = file))}
accept=".bin"
/>
</div>
<div class="flex-fill">
<Button block on:click={uploadWebUiFile} color="secondary" disabled={!firmwareWebUiFile}
>Update WebUI</Button
>
</div>
</section>
{#if firmwareUploadProgress > 0}
<Progress striped value={firmwareUploadProgress} class="progress" id="firmwareUploadProgress"
>{$_('section.firmwareUpdater.uploading')}... {firmwareUploadProgress}%</Progress
>
{/if}
{#if firmwareUploadSuccess}
<Alert color="success" class="firmwareUploadStatusAlert"
>{$_('section.firmwareUpdater.fileUploadSuccess', { values: { countdown: $countdown } })}
</Alert>
{/if}
{#if firmwareUploadError}
<Alert color="danger" class="firmwareUploadStatusAlert"
>{$_('section.firmwareUpdater.fileUploadFailed')}</Alert
>
{/if}
<small
>⚠️ <strong>{$_('warning')}</strong>: {$_('section.firmwareUpdater.firmwareUpdateText')}</small
>

131
src/routes/Rendered.svelte
View file

@ -1,25 +1,114 @@
<script lang="ts">
export let status = {};
export let status = {};
import RocketIcon from '../icons/RocketIcon.svelte';
import PickaxeIcon from '../icons/PickaxeIcon.svelte';
import ZapIcon from '../icons/ZapIcon.svelte';
const isSplitText = (str:String) => {
return str.includes("/");
}
const isSplitText = (str: string) => {
return str.includes('/');
};
export let className = 'btclock-wrapper';
export let verticalDesc = false;
// Define the currency symbols as constants
const CURRENCY_USD = '$';
const CURRENCY_EUR = '[';
const CURRENCY_GBP = ']';
const CURRENCY_JPY = '^';
const CURRENCY_AUD = '_';
//const CURRENCY_CHF = '_';
const CURRENCY_CAD = '`';
function getCurrencySymbol(input: string): string {
// Split the string into an array of characters to process each one
return input
.split('')
.map((char) => {
switch (char) {
case CURRENCY_EUR:
return '€'; // Euro symbol
case CURRENCY_GBP:
return '£'; // Pound symbol
case CURRENCY_JPY:
return '¥'; // Yen symbol
case CURRENCY_AUD:
case CURRENCY_CAD:
case CURRENCY_USD:
return '$'; // Dollar symbol
default:
return char; // Return the original character if no match
}
})
.join(''); // Join the array back into a string
}
</script>
<div class="btcclock-wrapper" id="btcclock-wrapper">
<div class="btclock">
{#each status.data as char}
{#if isSplitText(char)}
<div class="splitText">
{#each char.split("/") as part}
<div class="flex-items">{part}</div>
{/each}
</div>
{:else if char.length === 0 || char === " "}
<div class="digit">&nbsp;&nbsp;</div>
{:else}
<div class="digit">{char}</div>
{/if}
{/each}
</div>
</div>
<div class={className} id={className}>
<div class={'btclock' + (verticalDesc ? ' verticalDesc' : '')}>
{#each status.data as char}
{#if isSplitText(char)}
<div class="splitText">
<div class="textcontainer">
{#if char.split('/').length}
<span class="top-text">{char.split('/')[0]}</span>
<span class="bottom-text">{char.split('/')[1]}</span>
{/if}
</div>
<!-- {#each char.split('/') as part}
<div class="flex-items">{part}</div>
{/each} -->
</div>
{:else if char.startsWith('mdi')}
<div class={'digit icon' + (char.endsWith('bitaxe') ? ' icon-img' : '')}>
{#if char.endsWith('rocket')}
<RocketIcon></RocketIcon>
{/if}
{#if char.endsWith('pickaxe')}
<PickaxeIcon></PickaxeIcon>
{/if}
{#if char.endsWith('bolt')}
<ZapIcon></ZapIcon>
{/if}
{#if char.endsWith('bitaxe')}
<img src="/bitaxe.webp" class="bitaxelogo" alt="BitAxe logo" />
{/if}
{#if char.endsWith('miningpool')}
<span class="pool-logo">Mining Pool Logo</span>
{/if}
</div>
{:else if char === 'STS'}
<div class="digit sats">S</div>
{:else if char.length >= 3}
<div class="mediumText">{char}</div>
{:else if char.length === 0 || char === ' '}
<div class="digit">&nbsp;&nbsp;</div>
{:else}
<div class="digit">{getCurrencySymbol(char)}</div>
{/if}
{/each}
</div>
</div>
<style lang="scss">
.icon {
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);
}
.pool-logo {
font-size: 0.75rem;
}
</style>

32
src/routes/Settings.spec.ts Normal file
View file

@ -0,0 +1,32 @@
import { writable } from 'svelte/store';
import Settings from './Settings.svelte';
import { render } from '@testing-library/svelte';
import { describe, test, expect, beforeEach } from 'vitest';
import { addMessages, init, locale } from 'svelte-i18n';
import '$lib/i18n/index.ts';
import en from '$lib/locales/en.json';
addMessages('en', en);
describe('Settings Component', () => {
beforeEach(() => {
init({
fallbackLocale: 'en',
initialLocale: 'en'
});
locale.set('en');
});
test('should render the component', () => {
locale.set('en');
const host = document.createElement('div');
document.body.appendChild(host);
const instance = render(Settings, {
target: host,
props: { settings: writable([]) }
});
expect(instance).toBeTruthy();
expect(host.innerHTML).toContain('Settings');
});
});

948
src/routes/Settings.svelte
View file

@ -1,208 +1,800 @@
<script lang="ts">
import { PUBLIC_BASE_URL } from '$env/static/public';
import { onMount } from 'svelte';
import { readonly, writable } from 'svelte/store';
import { isValidNostrRelay, getPubKey, isValidHexPubKey, isValidNpub } from '$lib';
import { PUBLIC_BASE_URL } from '$lib/config';
import { uiSettings } from '$lib/uiSettings';
import { createEventDispatcher } from 'svelte';
import { _ } from 'svelte-i18n';
import {
Col,
Container,
Row,
Button,
Card,
CardTitle,
CardHeader,
CardBody,
CardHeader,
CardTitle,
Col,
Form,
FormGroup,
FormText,
Label,
Input,
InputGroup,
InputGroupText,
Button
} from 'sveltestrap';
Row
} from '@sveltestrap/sveltestrap';
import EyeIcon from 'svelte-bootstrap-icons/lib/Eye.svelte';
import EyeSlashIcon from 'svelte-bootstrap-icons/lib/EyeSlash.svelte';
import { derived } from 'svelte/store';
import { SettingsSwitch, SettingsInput, SettingsSelect, ToggleHeader } from '$lib/components';
export let settings;
const onSave = async(e:Event) => {
e.preventDefault();
let formSettings = $settings;
const wifiTxPowerMap = new Map<string, number>([
['Default', 80],
['19.5dBm', 78], // 19.5dBm
['19dBm', 76], // 19dBm
['18.5dBm', 74], // 18.5dBm
['17dBm', 68], // 17dBm
['15dBm', 60], // 15dBm
['13dBm', 52], // 13dBm
['11dBm', 44], // 11dBm
['8.5dBm', 34], // 8.5dBm
['7dBm', 28], // 7dBm
['5dBm', 20] // 5dBm
]);
delete formSettings["gitRev"];
delete formSettings["ip"];
delete formSettings["lastBuildTime"];
const miningPoolMap = new Map<string, string>([
['noderunners', 'Noderunners.network'],
['braiins', 'Braiins Pool'],
['ocean', 'ocean.xyz'],
['satoshi_radio', 'Satoshi Radio pool'],
['public_pool', 'public-pool.io'],
['gobrrr_pool', 'Go Brrr pool']
]);
const res = await fetch(`${PUBLIC_BASE_URL}/api/json/settings`, {
const getMiningPoolName = (name: string) => {
if (miningPoolMap.has(name)) return miningPoolMap.get(name);
return name;
};
const dispatch = createEventDispatcher();
const handleReset = (e: Event) => {
e.preventDefault();
dispatch('formReset');
};
const getTzOffsetFromSystem = () => {
const dt = new Date();
let diffTZ = dt.getTimezoneOffset();
$settings.tzOffset = diffTZ * -1;
};
const onSave = async (e: Event) => {
e.preventDefault();
// const form = e.target as HTMLFormElement;
// const formData = new FormData(form);
let formSettings = $settings;
delete formSettings['gitRev'];
delete formSettings['ip'];
delete formSettings['lastBuildTime'];
let headers = new Headers({
'Content-Type': 'application/json'
});
//if ($settings.httpAuthEnabled) {
// headers.set('Authorization', 'Basic ' + btoa($settings.httpAuthUser + ":" + $settings.httpAuthPass));
//}
await fetch(`${PUBLIC_BASE_URL}/api/json/settings`, {
method: 'PATCH',
headers: {
"Content-Type": "application/json",
},
headers: headers,
credentials: 'same-origin',
body: JSON.stringify(formSettings)
})
}
})
.then((data) => {
if (data.status == 200) {
dispatch('showToast', {
color: 'success',
text: $_('section.settings.settingsSaved')
});
} else {
dispatch('showToast', {
color: 'danger',
text: `${data.status}: ${data.statusText}`
});
}
})
.catch(() => {
dispatch('showToast', {
color: 'danger',
text: $_('section.settings.errorSavingSettings')
});
});
};
let validNostrRelay = false;
const testNostrRelay = async () => {
validNostrRelay = await isValidNostrRelay($settings.nostrRelay);
};
let validBitaxe = false;
const testBitaxe = async () => {
try {
const response = await fetch(`http://${$settings.bitaxeHostname}/api/system/info`);
if (!response.ok) {
dispatch('showToast', {
color: 'danger',
text: `Failed to connect to BitAxe HTTP error! status: ${response.status}`
});
validBitaxe = false;
throw new Error();
}
const systemInfo = await response.json();
dispatch('showToast', {
color: 'success',
text: `Connected to BitAxe ${systemInfo.ASICModel} (Board version ${systemInfo.boardVersion}) running firmware ${systemInfo.version}.\r\nCurrent hashrate ${Math.round(systemInfo.hashRate)} GH/s`
});
validBitaxe = true;
} catch (error) {
if (error instanceof TypeError && error.message.includes('Failed to fetch')) {
dispatch('showToast', {
color: 'danger',
text: `Failed to connect to BitAxe, make sure you are connected to the same network.`
});
}
console.error('Failed to fetch Bitaxe system info:', error);
validBitaxe = false;
}
};
const checkValidNostrPubkey = (key: string) => {
$settings[key] = $settings[key].trim();
if (isValidNpub($settings[key])) {
dispatch('showToast', {
color: 'info',
text: $_('section.settings.convertingValidNpub')
});
}
let ret = getPubKey($settings[key]);
if (ret) $settings[key] = ret;
};
const onFlBrightnessChange = async () => {
await fetch(`${PUBLIC_BASE_URL}/api/frontlight/brightness/${$settings.flMaxBrightness}`, {
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
});
};
let showPassword = false;
let textColor = '0';
const colorStore = derived(settings, ($settings) => ({
fgColor: $settings.fgColor,
bgColor: $settings.bgColor
}));
// $: {
// if ($colorStore) {
// console.log('Settings model changed:', $colorStore);
// if ($colorStore.fgColor < $colorStore.bgColor)
// textColor = "0";
// else
// textColor = "1"; // 65535
// }
// }
colorStore.subscribe(() => {
if ($colorStore) {
if ($colorStore.fgColor < $colorStore.bgColor) textColor = '0';
else textColor = '1'; // 65535
}
});
const setTextColor = () => {
console.log(textColor);
if (textColor == '1') {
$settings.fgColor = 65535;
$settings.bgColor = 0;
} else {
$settings.fgColor = 0;
$settings.bgColor = 65535;
}
};
const showAll = (show: boolean) => {
screenSettingsIsOpen = show;
displaysAndLedIsOpen = show;
dataSourceIsOpen = show;
extraFeaturesIsOpen = show;
systemIsOpen = show;
};
export let xs = 12;
export let sm = xs;
export let md = sm;
export let lg = md;
export let xl = lg;
export let xxl = xl;
let screenSettingsIsOpen: boolean,
displaysAndLedIsOpen: boolean,
dataSourceIsOpen: boolean,
extraFeaturesIsOpen: boolean,
systemIsOpen: boolean;
</script>
<Col>
<Card>
<Col {xs} {sm} {md} {lg} {xl} {xxl} class="mb-4 mb-xl-0">
<Card id="settings">
<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>
</CardHeader>
<CardBody>
<Form on:submit={onSave}>
<Form on:submit={onSave} class="clearfix">
<Row>
<Label md={6} for="fgColor" size="sm">{$_('section.settings.textColor', { default: 'Text color' })}</Label>
<Col md="6">
<Input
type="select"
bind:value={$settings.fgColor}
name="select"
id="fgColor"
bsSize="sm"
class="form-select-sm"
>
<option value="0">{ $_('colors.black') }</option>
<option value="65535">{ $_('colors.white') }</option>
</Input>
</Col>
</Row>
<Row>
<Label md={6} for="bgColor" size="sm">{ $_('section.settings.backgroundColor') }</Label>
<Col md="6">
<Input
type="select"
bind:value={$settings.bgColor}
name="select"
id="bgColor"
bsSize="sm"
class="form-select-sm"
>
<option value="0">{ $_('colors.black') }</option>
<option value="65535">{ $_('colors.white') }</option>
</Input>
</Col>
</Row>
<Row>
<Label md={6} for="timePerScreen" size="sm">{ $_('section.settings.timePerScreen') }</Label>
<Col md="6">
<InputGroup size="sm">
<Input type="number" min={1} step="1" bind:value={$settings.timePerScreen} />
<InputGroupText>{ $_('time.minutes') }</InputGroupText>
</InputGroup>
</Col>
</Row>
<Row>
<Label md={6} for="fullRefreshMin" size="sm">{ $_('section.settings.fullRefreshEvery') }</Label>
<Col md="6">
<InputGroup size="sm">
<Input type="number" min={1} step="1" bind:value={$settings.fullRefreshMin} />
<InputGroupText>{ $_('time.minutes') }</InputGroupText>
</InputGroup>
</Col>
</Row>
<Row>
<Label md={6} for="minSecPriceUpd" size="sm">{ $_('section.settings.timeBetweenPriceUpdates') }</Label>
<Col md="6">
<InputGroup size="sm">
<Input type="number" min={1} step="1" bind:value={$settings.minSecPriceUpd} />
<InputGroupText>{ $_('time.seconds') }</InputGroupText>
</InputGroup>
<FormText>{ $_('section.settings.shortAmountsWarning') }</FormText>
</Col>
</Row>
<Row>
<Label md={6} for="tzOffset" size="sm">{ $_('section.settings.timezoneOffset') }</Label>
<Col md="6">
<InputGroup size="sm">
<Input
type="number"
min={1}
step="1"
name="tzOffset"
id="tzOffset"
bind:value={$settings.tzOffset}
<ToggleHeader
header={$_('section.settings.section.screenSettings')}
defaultOpen={true}
isOpen={screenSettingsIsOpen}
>
<Row>
<SettingsSwitch
id="stealFocus"
bind:checked={$settings.stealFocus}
label={$_('section.settings.StealFocusOnNewBlock')}
size={$uiSettings.inputSize}
col={{ md: '6', xl: '12', xxl: '6' }}
/>
<InputGroupText>{ $_('time.minutes') }</InputGroupText>
</InputGroup>
<FormText>{ $_('section.settings.tzOffsetHelpText') }</FormText>
</Col>
</Row>
<Row>
<Label md={6} for="ledBrightness" size="sm">{ $_('section.settings.ledBrightness') }</Label>
<Col md="6">
<Input
type="range"
name="ledBrightness"
<SettingsSwitch
id="mcapBigChar"
bind:checked={$settings.mcapBigChar}
label={$_('section.settings.useBigCharsMcap')}
size={$uiSettings.inputSize}
col={{ md: '6', xl: '12', xxl: '6' }}
/>
<SettingsSwitch
id="useBlkCountdown"
bind:checked={$settings.useBlkCountdown}
label={$_('section.settings.useBlkCountdown')}
size={$uiSettings.inputSize}
col={{ md: '6', xl: '12', xxl: '6' }}
/>
<SettingsSwitch
id="useSatsSymbol"
bind:checked={$settings.useSatsSymbol}
label={$_('section.settings.useSatsSymbol')}
size={$uiSettings.inputSize}
col={{ md: '6', xl: '12', xxl: '6' }}
/>
<SettingsSwitch
id="suffixPrice"
bind:checked={$settings.suffixPrice}
label={$_('section.settings.suffixPrice')}
size={$uiSettings.inputSize}
col={{ md: '6', xl: '12', xxl: '6' }}
/>
<SettingsSwitch
id="mowMode"
bind:checked={$settings.mowMode}
label={$_('section.settings.mowMode')}
size={$uiSettings.inputSize}
col={{ md: '6', xl: '12', xxl: '6' }}
disabled={!$settings.suffixPrice}
/>
<SettingsSwitch
id="suffixShareDot"
bind:checked={$settings.suffixShareDot}
label={$_('section.settings.suffixShareDot')}
size={$uiSettings.inputSize}
col={{ md: '6', xl: '12', xxl: '6' }}
disabled={!$settings.suffixPrice}
/>
<SettingsSwitch
id="verticalDesc"
bind:checked={$settings.verticalDesc}
label={$_('section.settings.verticalDesc')}
size={$uiSettings.inputSize}
col={{ md: '6', xl: '12', xxl: '6' }}
/>
{#if !$settings.actCurrencies}
<SettingsSwitch
id="fetchEurPrice"
bind:checked={$settings.fetchEurPrice}
label="{$_('section.settings.fetchEuroPrice')} ({$_('restartRequired')})"
size={$uiSettings.inputSize}
col={{ md: '6', xl: '12', xxl: '6' }}
/>
{/if}
</Row>
<Row>
<h5>{$_('section.settings.screens')}</h5>
{#if $settings.screens}
{#each $settings.screens as s}
<SettingsSwitch
id="screens_{s.id}"
bind:checked={s.enabled}
label={s.name}
size={$uiSettings.inputSize}
col={{ md: '6', xl: '12', xxl: '6' }}
/>
{/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}
>
<SettingsSelect
id="textColor"
label={$_('section.settings.textColor')}
bind:value={textColor}
options={[
[$_('colors.black') + ' on ' + $_('colors.white'), '0'],
[$_('colors.white') + ' on ' + $_('colors.black'), '1']
]}
size={$uiSettings.inputSize}
selectClass={$uiSettings.selectClass}
onChange={setTextColor}
/>
<SettingsInput
id="timePerScreen"
label={$_('section.settings.timePerScreen')}
bind:value={$settings.timePerScreen}
type="number"
min={1}
step="1"
required={true}
suffix={$_('time.minutes')}
size={$uiSettings.inputSize}
/>
<SettingsInput
id="fullRefreshMin"
label={$_('section.settings.fullRefreshEvery')}
bind:value={$settings.fullRefreshMin}
type="number"
min={1}
step="1"
required={true}
suffix={$_('time.minutes')}
size={$uiSettings.inputSize}
/>
<SettingsInput
id="minSecPriceUpd"
label={$_('section.settings.timeBetweenPriceUpdates')}
bind:value={$settings.minSecPriceUpd}
type="number"
min={1}
step="1"
suffix={$_('time.seconds')}
helpText={$_('section.settings.shortAmountsWarning')}
size={$uiSettings.inputSize}
/>
<SettingsInput
id="ledBrightness"
bind:value={$settings.ledBrightness}
label={$_('section.settings.ledBrightness')}
bind:value={$settings.ledBrightness}
type="range"
min={0}
max={255}
step={1}
size={$uiSettings.inputSize}
/>
</Col>
</Row>
<Row>
<Label md={6} for="mempoolInstance" size="sm">{ $_('section.settings.mempoolnstance') }</Label>
<Col md="6">
<Input
type="text"
bind:value={$settings.mempoolInstance}
name="mempoolInstance"
id="mempoolInstance"
bsSize="sm"
>
</Input>
</Col>
</Row>
<Row>
<Label md={6} for="hostnamePrefix" size="sm">{ $_('section.settings.hostnamePrefix') }</Label>
<Col md="6">
<Input
type="text"
bind:value={$settings.hostnamePrefix}
name="hostnamePrefix"
id="hostnamePrefix"
bsSize="sm"
>
</Input>
</Col>
</Row>
<Row>
<Col md="6">
<Input id="ledTestOnPower" bind:checked={$settings.ledTestOnPower} type="switch" bsSize="sm" label="{ $_('section.settings.ledPowerOnTest') }" />
</Col>
<Col md="6">
<Input id="ledFlashOnUpd" bind:checked={$settings.ledFlashOnUpd} type="switch" bsSize="sm" label="{ $_('section.settings.ledFlashOnBlock') }" />
</Col>
<Col md="6">
<Input id="stealFocus" bind:checked={$settings.stealFocus} type="switch" bsSize="sm" label="{ $_('section.settings.StealFocusOnNewBlock') }" />
</Col>
<Col md="6">
<Input id="mcapBigChar" bind:checked={$settings.mcapBigChar} type="switch" bsSize="sm" label="{ $_('section.settings.useBigCharsMcap') }" />
</Col>
<Col md="6">
<Input id="otaEnabled" bind:checked={$settings.otaEnabled} type="switch" bsSize="sm" label="{ $_('section.settings.otaUpdates') } ({ $_('restartRequired') })" />
</Col>
<Col md="6">
<Input id="mdnsEnabled" bind:checked={$settings.mdnsEnabled} type="switch" bsSize="sm" label="{ $_('section.settings.enableMdns') } ({ $_('restartRequired') })" />
</Col>
<Col md="6">
<Input id="fetchEurPrice" bind:checked={$settings.fetchEurPrice} type="switch" bsSize="sm" label="{ $_('section.settings.fetchEuroPrice') } ({ $_('restartRequired') })" />
</Col>
</Row>
<Row>
<h3>{ $_('section.settings.screens') }</h3>
{#if $settings.screens}
{#each $settings.screens as s}
<Col md="6">
<Input id="screens_{s.id}" bind:checked={s.enabled} type="switch" bsSize="sm" label="{s.name}" />
</Col>
{/each}
{/if}
</Row>
<Button type="reset" color="secondary">{ $_('button.reset') }</Button>
<Button color="primary">{ $_('button.save') }</Button>
{#if $settings.hasFrontlight && !$settings.flDisable}
<SettingsInput
id="flMaxBrightness"
label={$_('section.settings.flMaxBrightness')}
bind:value={$settings.flMaxBrightness}
type="range"
min={0}
max={4095}
step={1}
size={$uiSettings.inputSize}
onChange={onFlBrightnessChange}
/>
<SettingsInput
id="flEffectDelay"
label={$_('section.settings.flEffectDelay')}
bind:value={$settings.flEffectDelay}
type="range"
min={5}
max={300}
step={1}
size={$uiSettings.inputSize}
/>
{/if}
{#if !$settings.flDisable && $settings.hasLightLevel}
<SettingsInput
id="luxLightToggle"
label={`${$_('section.settings.luxLightToggle')} (${$settings.luxLightToggle})`}
bind:value={$settings.luxLightToggle}
type="range"
min={0}
max={1000}
step={1}
helpText={$_('section.settings.luxLightToggleText')}
size={$uiSettings.inputSize}
/>
{/if}
<Row>
<SettingsSwitch
id="ledTestOnPower"
bind:checked={$settings.ledTestOnPower}
label={$_('section.settings.ledPowerOnTest')}
size={$uiSettings.inputSize}
/>
<SettingsSwitch
id="ledFlashOnUpd"
bind:checked={$settings.ledFlashOnUpd}
label={$_('section.settings.ledFlashOnBlock')}
size={$uiSettings.inputSize}
/>
<SettingsSwitch
id="disableLeds"
bind:checked={$settings.disableLeds}
label={$_('section.settings.disableLeds')}
size={$uiSettings.inputSize}
/>
{#if $settings.hasFrontlight}
<SettingsSwitch
id="flDisable"
bind:checked={$settings.flDisable}
label={$_('section.settings.flDisable')}
size={$uiSettings.inputSize}
/>
{/if}
{#if $settings.hasFrontlight && !$settings.flDisable}
<SettingsSwitch
id="flAlwaysOn"
bind:checked={$settings.flAlwaysOn}
label={$_('section.settings.flAlwaysOn')}
size={$uiSettings.inputSize}
/>
<SettingsSwitch
id="flFlashOnUpd"
bind:checked={$settings.flFlashOnUpd}
label={$_('section.settings.flFlashOnUpd')}
size={$uiSettings.inputSize}
/>
<SettingsSwitch
id="flOffWhenDark"
bind:checked={$settings.flOffWhenDark}
label={$_('section.settings.flOffWhenDark')}
size={$uiSettings.inputSize}
/>
{/if}
</Row>
</ToggleHeader>
</Row><Row>
<ToggleHeader
header={$_('section.settings.section.dataSource')}
isOpen={dataSourceIsOpen}
>
<SettingsInput
id="mempoolInstance"
label={$_('section.settings.mempoolnstance')}
bind:value={$settings.mempoolInstance}
disabled={$settings.ownDataSource}
required={true}
helpText={$_('section.settings.mempoolInstanceHelpText')}
size={$uiSettings.inputSize}
/>
<Row>
<SettingsSwitch
id="ownDataSource"
bind:checked={$settings.ownDataSource}
label="{$_('section.settings.ownDataSource')} ({$_('restartRequired')})"
size={$uiSettings.inputSize}
/>
{#if $settings.nostrRelay}
<SettingsSwitch
id="useNostr"
bind:checked={$settings.useNostr}
label="{$_('section.settings.useNostr')} ({$_('restartRequired')})"
size={$uiSettings.inputSize}
/>
{/if}
{#if 'stagingSource' in $settings}
<SettingsSwitch
id="stagingSource"
bind:checked={$settings.stagingSource}
label="{$_('section.settings.stagingSource')} ({$_('restartRequired')})"
size={$uiSettings.inputSize}
/>
{/if}
</Row>
</ToggleHeader>
</Row><Row>
<ToggleHeader
header={$_('section.settings.section.extraFeatures')}
isOpen={extraFeaturesIsOpen}
>
{#if $settings.bitaxeEnabled}
<SettingsInput
id="bitaxeHostname"
label={$_('section.settings.bitaxeHostname')}
bind:value={$settings.bitaxeHostname}
required={true}
valid={validBitaxe}
size={$uiSettings.inputSize}
>
<Button type="button" color="success" on:click={testBitaxe}
>{$_('test', { default: 'Test' })}</Button
>
</SettingsInput>
{/if}
{#if $settings.miningPoolStats}
<SettingsSelect
id="miningPoolName"
label={$_('section.settings.miningPoolName')}
bind:value={$settings.miningPoolName}
options={$settings.availablePools.map((pool) => [getMiningPoolName(pool), pool])}
size={$uiSettings.inputSize}
selectClass={$uiSettings.selectClass}
/>
<SettingsInput
id="miningPoolUser"
label={$_('section.settings.miningPoolUser')}
bind:value={$settings.miningPoolUser}
required={true}
size={$uiSettings.inputSize}
/>
{/if}
{#if 'nostrZapNotify' in $settings && $settings['nostrZapNotify']}
<SettingsInput
id="nostrZapPubkey"
label={$_('section.settings.nostrZapPubkey')}
bind:value={$settings.nostrZapPubkey}
required={true}
minlength="64"
invalid={!isValidHexPubKey($settings.nostrZapPubkey)}
helpText={!isValidHexPubKey($settings.nostrZapPubkey)
? $_('section.settings.invalidNostrPubkey')
: undefined}
size={$uiSettings.inputSize}
onChange={() => checkValidNostrPubkey('nostrZapPubkey')}
onInput={() => checkValidNostrPubkey('nostrZapPubkey')}
/>
{/if}
{#if $settings.useNostr}
<SettingsInput
id="nostrPubKey"
label={$_('section.settings.nostrPubKey')}
bind:value={$settings.nostrPubKey}
invalid={!isValidHexPubKey($settings.nostrPubKey)}
helpText={!isValidHexPubKey($settings.nostrPubKey)
? $_('section.settings.invalidNostrPubkey')
: undefined}
size={$uiSettings.inputSize}
onChange={() => checkValidNostrPubkey('nostrPubKey')}
onInput={() => checkValidNostrPubkey('nostrPubKey')}
/>
{/if}
{#if 'nostrZapNotify' in $settings || $settings.useNostr}
<SettingsInput
id="nostrRelay"
label={$_('section.settings.nostrRelay')}
bind:value={$settings.nostrRelay}
required={true}
valid={validNostrRelay}
size={$uiSettings.inputSize}
>
<Button type="button" color="success" on:click={testNostrRelay}
>{$_('test', { default: 'Test' })}</Button
>
</SettingsInput>
{/if}
<Row>
{#if 'bitaxeEnabled' in $settings}
<SettingsSwitch
id="bitaxeEnabled"
bind:checked={$settings.bitaxeEnabled}
label="{$_('section.settings.bitaxeEnabled')} ({$_('restartRequired')})"
size={$uiSettings.inputSize}
/>
{/if}
{#if 'miningPoolStats' in $settings}
<SettingsSwitch
id="miningPoolStats"
bind:checked={$settings.miningPoolStats}
label="{$_('section.settings.miningPoolStats')} ({$_('restartRequired')})"
size={$uiSettings.inputSize}
/>
{/if}
{#if 'nostrZapNotify' in $settings}
<SettingsSwitch
id="nostrZapNotify"
bind:checked={$settings.nostrZapNotify}
label="{$_('section.settings.nostrZapNotify')} ({$_('restartRequired')})"
size={$uiSettings.inputSize}
/>
<SettingsSwitch
id="ledFlashOnZap"
bind:checked={$settings.ledFlashOnZap}
label={$_('section.settings.ledFlashOnZap')}
size={$uiSettings.inputSize}
/>
{#if $settings.hasFrontlight && !$settings.flDisable}
<SettingsSwitch
id="flFlashOnZap"
bind:checked={$settings.flFlashOnZap}
label={$_('section.settings.flFlashOnZap')}
size={$uiSettings.inputSize}
/>
{/if}
{/if}
</Row>
</ToggleHeader>
</Row><Row>
<ToggleHeader header={$_('section.settings.section.system')} isOpen={systemIsOpen}>
<SettingsInput
id="tzOffset"
label={$_('section.settings.timezoneOffset')}
bind:value={$settings.tzOffset}
type="number"
step="1"
required={true}
suffix={$_('time.minutes')}
helpText={$_('section.settings.tzOffsetHelpText')}
size={$uiSettings.inputSize}
>
<Button type="button" color="info" on:click={getTzOffsetFromSystem}
>{$_('auto-detect')}</Button
>
</SettingsInput>
{#if $settings.httpAuthEnabled}
<SettingsInput
id="httpAuthUser"
label={$_('section.settings.httpAuthUser')}
bind:value={$settings.httpAuthUser}
required={true}
size={$uiSettings.inputSize}
/>
<SettingsInput
id="httpAuthPass"
label={$_('section.settings.httpAuthPass')}
bind:value={$settings.httpAuthPass}
type={showPassword ? 'text' : 'password'}
required={true}
size={$uiSettings.inputSize}
>
<Button
type="button"
on:click={() => (showPassword = !showPassword)}
color={showPassword ? 'success' : 'danger'}
>
{#if !showPassword}<EyeIcon />{:else}<EyeSlashIcon />{/if}
</Button>
</SettingsInput>
{/if}
<SettingsInput
id="hostnamePrefix"
label={$_('section.settings.hostnamePrefix')}
bind:value={$settings.hostnamePrefix}
required={true}
minlength="1"
size={$uiSettings.inputSize}
/>
<SettingsSelect
id="wifiTxPower"
label={$_('section.settings.wifiTxPower', { default: 'WiFi Tx Power' })}
bind:value={$settings.txPower}
options={Array.from(wifiTxPowerMap.entries())}
size={$uiSettings.inputSize}
selectClass={$uiSettings.selectClass}
helpText={$_('section.settings.wifiTxPowerText')}
/>
<SettingsInput
id="wpTimeout"
label={$_('section.settings.wpTimeout')}
bind:value={$settings.wpTimeout}
type="number"
min={1}
step="1"
required={true}
suffix={$_('time.seconds')}
size={$uiSettings.inputSize}
/>
<Row>
<SettingsSwitch
id="otaEnabled"
bind:checked={$settings.otaEnabled}
label="{$_('section.settings.otaUpdates')} ({$_('restartRequired')})"
size={$uiSettings.inputSize}
/>
<SettingsSwitch
id="mdnsEnabled"
bind:checked={$settings.mdnsEnabled}
label="{$_('section.settings.enableMdns')} ({$_('restartRequired')})"
size={$uiSettings.inputSize}
/>
<SettingsSwitch
id="httpAuthEnabled"
bind:checked={$settings.httpAuthEnabled}
label="{$_('section.settings.httpAuthEnabled')} ({$_('restartRequired')})"
size={$uiSettings.inputSize}
/>
</Row>
</ToggleHeader>
</Row>
<Row>
<Col class="d-flex justify-content-end">
<Button on:click={handleReset} color="secondary">{$_('button.reset')}</Button>
<div class="mx-2"></div>
<Button color="primary">{$_('button.save')}</Button>
</Col>
</Row>
</Form>
</CardBody>
</Card>

30
src/routes/Status.spec.ts Normal file
View file

@ -0,0 +1,30 @@
import { writable } from 'svelte/store';
import Status from './Status.svelte';
import { render } from '@testing-library/svelte';
import { describe, test, expect, beforeEach } from 'vitest';
import { locale, init, addMessages } from 'svelte-i18n';
import '$lib/i18n/index.ts';
import en from '$lib/locales/en.json';
addMessages('en', en);
describe('Status Component', () => {
beforeEach(() => {
init({
fallbackLocale: 'en',
initialLocale: 'en'
});
locale.set('en');
});
test('should render the component', () => {
const host = document.createElement('div');
document.body.appendChild(host);
const instance = render(Status, {
target: host,
props: { status: writable([]), settings: writable([]) }
});
expect(instance).toBeTruthy();
expect(host.innerHTML).toContain('Status');
});
});

352
src/routes/Status.svelte
View file

@ -1,131 +1,269 @@
<script lang="ts">
import { PUBLIC_BASE_URL } from '$env/static/public';
import { PUBLIC_BASE_URL } from '$lib/config';
import { onMount } from 'svelte';
import { _ } from 'svelte-i18n';
import { writable, type Writable } from 'svelte/store';
import { Row, Input, Button, ButtonGroup, Card, CardBody, CardHeader, Col, Progress,CardTitle } from 'sveltestrap';
import { writable } from 'svelte/store';
import {
Button,
ButtonGroup,
Card,
CardBody,
CardHeader,
CardTitle,
Col,
Input,
Progress,
Tooltip,
Row
} from '@sveltestrap/sveltestrap';
import Rendered from './Rendered.svelte';
export let settings;
export let status:Writable<{}>;
const toTime = (secs:Number) => {
var hours = Math.floor(secs / (60 * 60));
export let settings;
export let status: writable<object>;
var divisor_for_minutes = secs % (60 * 60);
var minutes = Math.floor(divisor_for_minutes / 60);
// Function to split array into chunks
const chunkArray = (array, chunkSize) => {
const result = [];
for (let i = 0; i < array.length; i += chunkSize) {
result.push(array.slice(i, i + chunkSize));
}
return result;
};
let buttonChunks = chunkArray([], 6);
var divisor_for_seconds = divisor_for_minutes % 60;
var seconds = Math.ceil(divisor_for_seconds);
const toTime = (secs: number) => {
var hours = Math.floor(secs / (60 * 60));
var obj = {
"h": hours,
"m": minutes,
"s": seconds
};
return obj;
}
var divisor_for_minutes = secs % (60 * 60);
var minutes = Math.floor(divisor_for_minutes / 60);
const toUptimeString = (secs:Number):String => {
let time = toTime(secs);
var divisor_for_seconds = divisor_for_minutes % 60;
var seconds = Math.ceil(divisor_for_seconds);
return `${time.h}h ${time.m}m ${time.s}s`;
}
var obj = {
h: hours,
m: minutes,
s: seconds
};
return obj;
};
let memoryFreePercent:number = 50;
let lightMode:boolean = false;
const toUptimestring = (secs: number): string => {
let time = toTime(secs);
status.subscribe((value: {}) => {
memoryFreePercent = Math.round(value.espFreeHeap / value.espHeapSize * 100);
});
return `${time.h}h ${time.m}m ${time.s}s`;
};
settings.subscribe((value: {}) => {
lightMode = value.bgColor > value.fgColor;
});
let memoryFreePercent: number = 50;
let rssiPercent: number = 50;
let wifiStrengthColor: string = 'info';
let lightMode: boolean = false;
const setScreen = (id:number) => () => {
fetch(`${PUBLIC_BASE_URL}/api/show/screen/${id}`).catch(err => { });
}
status.subscribe((value: object) => {
memoryFreePercent = Math.round((value.espFreeHeap / value.espHeapSize) * 100);
const toggleTimer = (currentStatus:boolean) => () => {
if (currentStatus) {
fetch(`${PUBLIC_BASE_URL}/api/action/pause`);
} else {
fetch(`${PUBLIC_BASE_URL}/api/action/timer_restart`);
}
}
rssiPercent = Math.round(((value.rssi + 120) / (-30 + 120)) * 100);
const isLightMode = () => {
return $settings.bgColor > $settings.fgColor;
}
if (value.rssi > -55) {
wifiStrengthColor = 'success';
} else if (value.rssi < -87) {
wifiStrengthColor = 'warning';
} else {
wifiStrengthColor = 'info';
}
});
settings.subscribe((value: object) => {
lightMode = value.bgColor > value.fgColor;
if (value.screens) buttonChunks = chunkArray(value.screens, 5);
});
const setScreen = (id: number) => () => {
fetch(`${PUBLIC_BASE_URL}/api/show/screen/${id}`).catch(() => {});
};
const setCurrency = (c: string) => () => {
fetch(`${PUBLIC_BASE_URL}/api/show/currency/${c}`).catch(() => {});
};
const toggleTimer = (currentStatus: boolean) => (e: Event) => {
e.preventDefault();
if (currentStatus) {
fetch(`${PUBLIC_BASE_URL}/api/action/pause`);
} else {
fetch(`${PUBLIC_BASE_URL}/api/action/timer_restart`);
}
};
export let xs = 12;
export let sm = xs;
export let md = sm;
export let lg = md;
export let xl = lg;
export let xxl = xl;
</script>
<Col>
<Card>
<Col {xs} {sm} {md} {lg} {xl} {xxl} class="mb-4 mb-xl-0">
<Card id="status">
<CardHeader>
<CardTitle>{$_('section.status.title', { default: 'Status' })}</CardTitle>
</CardHeader>
<CardBody>
{#if $settings.screens}
<div class="d-flex justify-content-center">
<ButtonGroup size="sm">
{#each $settings.screens as s}
<Button color="outline-primary" active={$status.currentScreen == s.id} on:click={setScreen(s.id)}>{s.name}</Button>
{/each}
</ButtonGroup>
</div>
<hr>
{#if $status.data}
<section class={lightMode ? 'lightMode': ''}>
<Rendered status="{$status}"></Rendered>
</section>
{ $_('section.status.screenCycle') }: <a style="cursor: pointer" on:click="{toggleTimer($status.timerRunning)}">{#if $status.timerRunning}&#9205; { $_('timer.running') }{:else}&#9208; { $_('timer.stopped') }{/if}</a>
{/if}
{/if}
<hr>
<Row class="justify-content-evenly">
{#if $status.leds}
{#each $status.leds as led}
<Col>
<Input type="color" id="ledColorPicker" bind:value="{led.hex}" class="mx-auto" disabled />
</Col>
{/each}
{/if}
</Row>
<hr>
<Progress striped value={memoryFreePercent}>{ memoryFreePercent }%</Progress>
<div class="d-flex justify-content-between">
<div>{ $_('section.status.memoryFree') } </div>
<div>{ Math.round($status.espFreeHeap / 1024) } / { Math.round($status.espHeapSize / 1024) } KiB</div>
</div>
<hr>
{ $_('section.status.uptime') }: {toUptimeString($status.espUptime)}
<br>
<p>
{ $_('section.status.wsPriceConnection') }:
<span>
{#if $status.connectionStatus && $status.connectionStatus.price}
&#9989;
{:else}
&#10060;
{/if}
</span>
-
{ $_('section.status.wsMempoolConnection') }:
<span>
{#if $status.connectionStatus && $status.connectionStatus.blocks}
&#9989;
{:else}
&#10060;
{/if}
</span><br>
{#if $settings.fetchEurPrice}
<small>{ $_('section.status.fetchEuroNote') }</small>
{/if}
</p>
</CardBody>
</Card>
{#if $settings.screens}
<div class=" d-block d-sm-none mx-auto text-center">
{#each buttonChunks as chunk}
<ButtonGroup size="sm" class="mx-auto mb-1">
{#each chunk as s}
<Button
color="outline-primary"
active={$status.currentScreen == s.id}
on:click={setScreen(s.id)}>{s.name}</Button
>
{/each}
</ButtonGroup>
{/each}
</div>
<div class="d-flex justify-content-center d-none d-sm-flex">
<ButtonGroup size="sm">
{#each $settings.screens as s}
<Button
color="outline-primary"
active={$status.currentScreen == s.id}
on:click={setScreen(s.id)}>{s.name}</Button
>
{/each}
</ButtonGroup>
</div>
{#if $settings.actCurrencies && $settings.ownDataSource}
<div class="d-flex justify-content-center d-sm-flex mt-2">
<ButtonGroup size="sm">
{#each $settings.actCurrencies as c}
<Button
color="outline-success"
active={$status.currency == c}
on:click={setCurrency(c)}>{c}</Button
>
{/each}
</ButtonGroup>
</div>
{/if}
<hr />
{#if $status.data}
<section class={lightMode ? 'lightMode' : 'darkMode'}>
<Rendered
status={$status}
className="btclock-wrapper"
verticalDesc={$settings.verticalDesc}
></Rendered>
</section>
{$_('section.status.screenCycle')}:
<a
id="timerStatusText"
href={'#'}
style="cursor: pointer"
tabindex="0"
role="button"
aria-pressed="false"
on:click={toggleTimer($status.timerRunning)}
>{#if $status.timerRunning}&#9205; {$_('timer.running')}{:else}&#9208; {$_(
'timer.stopped'
)}{/if}</a
>
{/if}
{/if}
<hr />
{#if !$settings.disableLeds}
<Row class="justify-content-evenly">
{#if $status.leds}
{#each $status.leds as led}
<Col>
<Input
type="color"
id="ledColorPicker"
bind:value={led.hex}
class="mx-auto"
disabled
/>
</Col>
{/each}
{/if}
</Row>
<hr />
{/if}
<Progress striped value={memoryFreePercent}>{memoryFreePercent}%</Progress>
<div class="d-flex justify-content-between">
<div>{$_('section.status.memoryFree')}</div>
<div>
{Math.round($status.espFreeHeap / 1024)} / {Math.round($status.espHeapSize / 1024)} KiB
</div>
</div>
<hr />
{#if $settings.hasLightLevel}
{$_('section.status.lightSensor')}: {Number(Math.round($status.lightLevel))} lux
<hr />
{/if}
<Progress striped id="rssiBar" color={wifiStrengthColor} value={rssiPercent}
>{rssiPercent}%</Progress
>
<Tooltip target="rssiBar" placement="bottom">{$_('rssiBar.tooltip')}</Tooltip>
<div class="d-flex justify-content-between">
<div>{$_('section.status.wifiSignalStrength')}</div>
<div>
{$status.rssi} dBm
</div>
</div>
<hr />
{$_('section.status.uptime')}: {toUptimestring($status.espUptime)}
<br />
<p>
{#if $settings.useNostr || $settings.nostrZapNotify}
{$_('section.status.nostrConnection')}:
<span>
{#if $status.connectionStatus && $status.connectionStatus.nostr}
&#9989;
{:else}
&#10060;
{/if}
</span>
{/if}
{#if !$settings.useNostr}
{#if !$settings.ownDataSource}
{$_('section.status.wsPriceConnection')}:
<span>
{#if $status.connectionStatus && $status.connectionStatus.price}
&#9989;
{:else}
&#10060;
{/if}
</span>
-
{$_('section.status.wsMempoolConnection', {
values: { instance: $settings.mempoolInstance }
})}:
<span>
{#if $status.connectionStatus && $status.connectionStatus.blocks}
&#9989;
{:else}
&#10060;
{/if}
</span><br />
{:else}
{$_('section.status.wsDataConnection')}:
<span>
{#if $status.connectionStatus && $status.connectionStatus.V2}
&#9989;
{:else}
&#10060;
{/if}
</span>
{/if}
{/if}
{#if $settings.fetchEurPrice}
<small>{$_('section.status.fetchEuroNote')}</small>
{/if}
</p>
</CardBody>
</Card>
</Col>

55
src/routes/api/+page.svelte
View file

@ -1,64 +1,57 @@
<script lang="ts">
import { _ } from 'svelte-i18n';
import { Col, Container, Row, Button } from 'sveltestrap';
import { Button, Container } from '@sveltestrap/sveltestrap';
import { onMount } from 'svelte';
//import * as swaggerJson from '../../../static/swagger.json';
// import SwaggerUI from 'swagger-ui';
import 'swagger-ui/dist/swagger-ui.css';
let swaggerLoaded:boolean = false;
let swaggerLoaded: boolean = false;
onMount(async () => {
// @ts-ignore
loadSwagger();
});
const loadSwagger = () => {
if (!SwaggerUIBundle)
return;
// @ts-expect-error: SwaggerUIBundle is loaded from external script from CDN
if (!SwaggerUIBundle) return; // eslint-disable-line
swaggerLoaded = true;
// @ts-expect-error: SwaggerUIBundle is loaded from external script from CDN
// eslint-disable-next-line
window.ui = SwaggerUIBundle({
url: '/swagger.json',
dom_id: '#swagger-ui-container',
presets: [
// @ts-ignore
SwaggerUIBundle.presets.apis,
// @ts-ignore
SwaggerUIStandalonePreset
],
// layout: "StandaloneLayout",
});
}
url: '/swagger.json',
dom_id: '#swagger-ui-container',
presets: [
// @ts-expect-error: SwaggerUIBundle is loaded from external script from CDN
SwaggerUIBundle.presets.apis, // eslint-disable-line
// @ts-expect-error: SwaggerUIStandalonePreset is loaded from external script from CDN
SwaggerUIStandalonePreset // eslint-disable-line
]
// layout: "StandaloneLayout",
});
};
</script>
<svelte:head>
<title>API playground</title>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/5.10.0/swagger-ui-bundle.min.js"
integrity="sha512-Ckle4LZv9LhAfEdohBdUi+QCu0e7HkXHTeSPXfbDzbCsR87QNTUBylkBEPsBNn4Ph83yK1hJ6f2uH4QMtB0hTA=="
src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/5.17.14/swagger-ui-bundle.min.js"
integrity="sha512-7ihPQv5ibiTr0DW6onbl2MIKegdT6vjpPySyIb4Ftp68kER6Z7Yiub0tFoMmCHzZfQE9+M+KSjQndv6NhYxDgg=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/5.10.0/swagger-ui-standalone-preset.min.js"
integrity="sha512-qwGi7EG31HcylzamsmacHLZJrfUGRuuHEaCMcOojuNpMu+paR554VjaCZ9LdUVTrmF8xC03YVqTzuKx0SDdruA=="
src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/5.17.14/swagger-ui-standalone-preset.min.js"
integrity="sha512-UrYi+60Ci3WWWcoDXbMmzpoi1xpERbwjPGij6wTh8fXl81qNdioNNHExr9ttnBebKF0ZbVnPlTPlw+zECUK1Xw=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/5.10.0/swagger-ui.min.css"
integrity="sha512-Ck+X9SARG7WscOTG4a8Qod5Zgd1MZlz4VtyyucjMJ3PnZy2lUl7q/v/0055yIfGM/v+f+216ME0/dv0qqtm6+g=="
href="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/5.17.14/swagger-ui.min.css"
integrity="sha512-+9UD8YSD9GF7FzOH38L9S6y56aYNx3R4dYbOCgvTJ2ZHpJScsahNdaMQJU/8osUiz9FPu0YZ8wdKf4evUbsGSg=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
</svelte:head>
<Container fluid class="bg-light">
<section class:invisible={swaggerLoaded}><Button on:click="{loadSwagger}">Load</Button></section>
<section class:invisible={swaggerLoaded}><Button on:click={loadSwagger}>Load</Button></section>
<div id="swagger-ui-container" />
</Container>

143
src/routes/convert/+page.svelte Normal file
View file

@ -0,0 +1,143 @@
<script lang="ts">
import { Col, Container, Input, InputGroup, InputGroupText, Row } from '@sveltestrap/sveltestrap';
import { onDestroy, onMount } from 'svelte';
import { encode, decode } from 'msgpack-es';
let exchangeRates = {
USD: 57798,
GBP: 44236,
AUD: 86552,
JPY: 8221088,
EUR: 52347,
CAD: 78508
};
let socket: WebSocket;
let currencies = { ...exchangeRates };
let btcValue = 1;
let satsValue = 100000000;
let lastEditedField = 'BTC';
let inputValues = {
BTC: '1',
sats: '100000000',
...Object.fromEntries(
Object.keys(exchangeRates).map((cur) => [cur, exchangeRates[cur].toString()])
)
};
function updateValues(currency: string, value: string) {
lastEditedField = currency;
inputValues[currency] = value;
let numValue = value === '' ? 0 : parseFloat(value);
if (currency === 'BTC') {
btcValue = numValue;
satsValue = Math.round(numValue * 100000000);
} else if (currency === 'sats') {
satsValue = Math.round(numValue);
btcValue = satsValue / 100000000;
} else {
btcValue = numValue / exchangeRates[currency];
satsValue = Math.round(btcValue * 100000000);
}
// Update other currency values
for (let cur in currencies) {
if (cur !== currency) {
currencies[cur] = btcValue * exchangeRates[cur];
inputValues[cur] = formatValue(currencies[cur], cur);
}
}
inputValues.BTC = formatValue(btcValue, 'BTC');
inputValues.sats = formatValue(satsValue, 'sats');
}
function formatValue(value: number, currency: string): string {
if (currency === 'sats') {
return Math.round(value).toString();
} else if (currency === 'BTC') {
return value.toFixed(8).replace(/\.?0+$/, '');
} else {
return value.toFixed(2);
}
}
// async function fetchExchangeRates() {
// try {
// const response = await fetch('https://ws.btclock.dev/api/lastprice');
// const data = await response.json();
// exchangeRates = data;
// currencies = { ...data };
// updateValues(lastEditedField, inputValues[lastEditedField]);
// } catch (error) {
// console.error('Error fetching exchange rates:', error);
// }
// }
onMount(() => {
socket = new WebSocket('ws://ws.btclock.dev/api/v2/ws');
socket.binaryType = 'arraybuffer';
socket.addEventListener('open', () => {
socket.send(
encode({
type: 'subscribe',
eventType: 'price',
currencies: ['USD', 'EUR', 'GBP', 'CAD', 'AUD', 'JPY']
})
);
});
socket.addEventListener('message', (event) => {
let data = decode(event.data);
if ('price' in data) {
let currencyKey = Object.keys(data.price);
exchangeRates[currencyKey] = data.price[currencyKey];
updateValues(lastEditedField, inputValues[lastEditedField]);
}
});
});
onDestroy(() => {
socket.close();
});
</script>
<Container fluid>
<Row class="justify-content-center">
<Col class="col-md-3 col-sm-12">
<InputGroup size="lg" class="mb-2">
<InputGroupText class="currencyCode">BTC</InputGroupText>
<Input
placeholder="Amount"
type="number"
value={inputValues.BTC}
on:input={(e) => updateValues('BTC', e.target.value)}
/>
</InputGroup>
<InputGroup size="lg" class="mb-2">
<InputGroupText class="sats currencyCode">s</InputGroupText>
<Input
placeholder="Amount"
type="number"
value={inputValues.sats}
on:input={(e) => updateValues('sats', e.target.value)}
/>
</InputGroup>
{#each Object.entries(exchangeRates) as [cur]}
<InputGroup size="lg" class="mb-2">
<InputGroupText class="currencyCode">{cur}</InputGroupText>
<Input
placeholder="Amount"
type="number"
value={inputValues[cur]}
on:input={(e) => updateValues(cur, e.target.value)}
/>
</InputGroup>
{/each}
</Col>
</Row>
</Container>

BIN
static/bitaxe.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
static/fonts/Satoshi_Symbol.woff2 Normal file
View file

Binary file not shown.

935
static/swagger.json
View file

@ -1,480 +1,457 @@
{
"openapi": "3.0.3",
"info": {
"title": "BTClock API",
"version": "3.0",
"description": "BTClock V3 API"
},
"servers": [
{
"url": "/api/"
}
],
"paths": {
"/status": {
"get": {
"tags": [
"system"
],
"summary": "Get current status",
"responses": {
"200": {
"description": "successful operation"
}
}
}
},
"/system_status": {
"get": {
"tags": [
"system"
],
"summary": "Get system status",
"responses": {
"200": {
"description": "successful operation"
}
}
}
},
"/settings": {
"get": {
"tags": [
"system"
],
"summary": "Get current settings",
"responses": {
"200": {
"description": "successful operation",
"content": {
"application/json": {
"schema": {
"$ref": null
}
}
}
}
}
},
"post": {
"tags": [
"system"
],
"summary": "Save current settings",
"requestBody": {
"content": {
"application/json": {
"schema": {
"$ref": "#/components/schemas/Settings"
}
}
}
},
"responses": {
"200": {
"description": "successful operation"
}
}
},
"patch": {
"tags": [
"system"
],
"summary": "Save current settings",
"requestBody": {
"content": {
"application/json": {
"schema": {
"$ref": "#/components/schemas/Settings"
}
}
}
},
"responses": {
"200": {
"description": "successful operation"
}
}
}
},
"/action/pause": {
"get": {
"tags": [
"timer"
],
"summary": "Pause screen rotation",
"responses": {
"200": {
"description": "successful operation"
}
}
}
},
"/action/timer_restart": {
"get": {
"tags": [
"timer"
],
"summary": "Restart screen rotation",
"responses": {
"200": {
"description": "successful operation"
}
}
}
},
"/show/screen/{id}": {
"get": {
"tags": [
"screens"
],
"summary": "Set screen to show",
"parameters": [
{
"in": "path",
"name": "id",
"schema": {
"type": "integer",
"default": 1
},
"required": true,
"description": "ID of screen to show"
}
],
"responses": {
"200": {
"description": "successful operation"
}
}
}
},
"/show/text/{text}": {
"get": {
"tags": [
"screens"
],
"summary": "Set text to show",
"parameters": [
{
"in": "path",
"name": "text",
"schema": {
"type": "string",
"default": "text"
},
"required": true,
"description": "Text to show"
}
],
"responses": {
"200": {
"description": "successful operation"
}
}
}
},
"/show/custom": {
"post": {
"tags": [
"screens"
],
"summary": "Set text to show (advanced)",
"requestBody": {
"content": {
"application/json": {
"schema": {
"$ref": "#/components/schemas/CustomText"
}
}
}
},
"responses": {
"200": {
"description": "successful operation"
}
}
}
},
"/full_refresh": {
"get": {
"tags": [
"system"
],
"summary": "Force full refresh of all displays",
"responses": {
"200": {
"description": "successful operation"
}
}
}
},
"/lights": {
"get": {
"tags": [
"lights"
],
"summary": "Get LEDs status",
"responses": {
"200": {
"description": "successful operation",
"content": {
"application/json": {
"schema": {
"$ref": "#/components/schemas/ArrayOfLeds"
}
}
}
}
}
},
"patch": {
"tags": [
"lights"
],
"summary": "Set individual LEDs",
"requestBody": {
"content": {
"application/json": {
"schema": {
"$ref": "#/components/schemas/ArrayOfLedsInput"
}
}
}
},
"responses": {
"200": {
"description": "succesful operation"
},
"400": {
"description": "invalid colors or wrong amount of LEDs"
}
}
}
},
"/lights/{color}": {
"get": {
"tags": [
"lights"
],
"summary": "Turn on LEDs with specific color",
"parameters": [
{
"in": "path",
"name": "color",
"schema": {
"type": "string",
"default": "FFCC00"
},
"required": true,
"description": "Color in RGB hex"
}
],
"responses": {
"200": {
"description": "successful operation"
}
}
}
},
"/lights/off": {
"get": {
"tags": [
"lights"
],
"summary": "Turn LEDs off",
"responses": {
"200": {
"description": "successful operation"
}
}
}
},
"/restart": {
"get": {
"tags": [
"system"
],
"summary": "Restart BTClock",
"responses": {
"200": {
"description": "successful operation"
}
}
}
}
},
"components": {
"schemas": {
"RgbColorValues": {
"type": "object",
"properties": {
"red": {
"type": "integer",
"minimum": 0,
"maximum": 255,
"example": 255
},
"green": {
"type": "integer",
"minimum": 0,
"maximum": 255,
"example": 204
},
"blue": {
"type": "integer",
"minimum": 0,
"maximum": 255,
"example": 0
}
}
},
"RgbColorHex": {
"type": "object",
"properties": {
"hex": {
"type": "string",
"pattern": "^#(?:[0-9a-fA-F]{3}){1,2}$",
"example": "#FFCC00"
}
}
},
"RgbColorValueAndHex": {
"allOf": [
{
"$ref": "#/components/schemas/RgbColorValues"
},
{
"$ref": "#/components/schemas/RgbColorHex"
}
]
},
"RgbColorValueOrHex": {
"oneOf": [
{
"$ref": "#/components/schemas/RgbColorValues"
},
{
"$ref": "#/components/schemas/RgbColorHex"
}
]
},
"ArrayOfLeds": {
"type": "array",
"items": {
"$ref": "#/components/schemas/RgbColorValueAndHex"
}
},
"ArrayOfLedsInput": {
"type": "array",
"items": {
"$ref": "#/components/schemas/RgbColorValueOrHex"
}
},
"Settings": {
"type": "object",
"properties": {
"fetchEurPrice": {
"type": "boolean",
"description": "Fetch EUR price instead of USD"
},
"fgColor": {
"type": "string",
"default": 16777215,
"description": "ePaper foreground (text) color"
},
"bgColor": {
"type": "string",
"default": 0,
"description": "ePaper background color"
},
"ledTestOnPower": {
"type": "boolean",
"default": true,
"description": "Do LED test on power-on"
},
"ledFlashOnUpd": {
"type": "boolean",
"default": false,
"description": "Flash LEDs on new block"
},
"mdnsEnabled": {
"type": "boolean",
"default": true,
"description": "Enable mDNS"
},
"otaEnabled": {
"type": "boolean",
"default": true,
"description": "Enable over-the-air updates"
},
"stealFocus": {
"type": "boolean",
"default": false,
"description": "Steal focus on new block"
},
"mcapBigChar": {
"type": "boolean",
"default": false,
"description": "Use big characters for market cap screen"
},
"mempoolInstance": {
"type": "string",
"default": "mempool.space",
"description": "Mempool.space instance to connect to"
},
"ledBrightness": {
"type": "integer",
"default": 128,
"description": "Brightness of LEDs"
},
"fullRefreshMin": {
"type": "integer",
"default": 60,
"description": "Full refresh time of ePaper displays in minutes"
},
"screen[0]": {
"type": "boolean"
},
"screen[1]": {
"type": "boolean"
},
"screen[2]": {
"type": "boolean"
},
"screen[3]": {
"type": "boolean"
},
"screen[4]": {
"type": "boolean"
},
"screen[5]": {
"type": "boolean"
},
"tzOffset": {
"type": "integer",
"default": 60,
"description": "Timezone offset in minutes"
},
"minSecPriceUpd": {
"type": "integer",
"default": 30,
"description": "Minimum time between price updates in seconds"
},
"timePerScreen": {
"type": "integer",
"default": 30,
"description": "Time between screens when rotating in minutes"
}
}
},
"CustomText": {
"type": "array",
"items": {
"type": "string"
},
"minItems": 7,
"maxItems": 7
}
}
}
}
"openapi": "3.0.3",
"info": {
"title": "BTClock API",
"version": "3.0",
"description": "BTClock V3 API"
},
"servers": [
{
"url": "/api/"
}
],
"paths": {
"/status": {
"get": {
"tags": ["system"],
"summary": "Get current status",
"responses": {
"200": {
"description": "successful operation"
}
}
}
},
"/system_status": {
"get": {
"tags": ["system"],
"summary": "Get system status",
"responses": {
"200": {
"description": "successful operation"
}
}
}
},
"/settings": {
"get": {
"tags": ["system"],
"summary": "Get current settings",
"responses": {
"200": {
"description": "successful operation",
"content": {
"application/json": {
"schema": {
"$ref": "#/components/schemas/ArrayOfLeds"
}
}
}
}
}
},
"post": {
"tags": ["system"],
"summary": "Save current settings",
"requestBody": {
"content": {
"application/json": {
"schema": {
"$ref": "#/components/schemas/Settings"
}
}
}
},
"responses": {
"200": {
"description": "successful operation"
}
}
},
"patch": {
"tags": ["system"],
"summary": "Save current settings",
"requestBody": {
"content": {
"application/json": {
"schema": {
"$ref": "#/components/schemas/Settings"
}
}
}
},
"responses": {
"200": {
"description": "successful operation"
}
}
}
},
"/action/pause": {
"get": {
"tags": ["timer"],
"summary": "Pause screen rotation",
"responses": {
"200": {
"description": "successful operation"
}
}
}
},
"/action/timer_restart": {
"get": {
"tags": ["timer"],
"summary": "Restart screen rotation",
"responses": {
"200": {
"description": "successful operation"
}
}
}
},
"/show/screen/{id}": {
"get": {
"tags": ["screens"],
"summary": "Set screen to show",
"parameters": [
{
"in": "path",
"name": "id",
"schema": {
"type": "integer",
"default": 1
},
"required": true,
"description": "ID of screen to show"
}
],
"responses": {
"200": {
"description": "successful operation"
}
}
}
},
"/show/text/{text}": {
"get": {
"tags": ["screens"],
"summary": "Set text to show",
"parameters": [
{
"in": "path",
"name": "text",
"schema": {
"type": "string",
"default": "text"
},
"required": true,
"description": "Text to show"
}
],
"responses": {
"200": {
"description": "successful operation"
}
}
}
},
"/show/custom": {
"post": {
"tags": ["screens"],
"summary": "Set text to show (advanced)",
"requestBody": {
"content": {
"application/json": {
"schema": {
"$ref": "#/components/schemas/CustomText"
}
}
}
},
"responses": {
"200": {
"description": "successful operation"
}
}
}
},
"/full_refresh": {
"get": {
"tags": ["system"],
"summary": "Force full refresh of all displays",
"responses": {
"200": {
"description": "successful operation"
}
}
}
},
"/lights": {
"get": {
"tags": ["lights"],
"summary": "Get LEDs status",
"responses": {
"200": {
"description": "successful operation",
"content": {
"application/json": {
"schema": {
"$ref": "#/components/schemas/ArrayOfLeds"
}
}
}
}
}
}
},
"/lights/set": {
"patch": {
"tags": ["lights"],
"summary": "Set individual LEDs",
"requestBody": {
"content": {
"application/json": {
"schema": {
"$ref": "#/components/schemas/ArrayOfLedsInput"
}
}
}
},
"responses": {
"200": {
"description": "succesful operation"
},
"400": {
"description": "invalid colors or wrong amount of LEDs"
}
}
}
},
"/lights/color/{color}": {
"get": {
"tags": ["lights"],
"summary": "Turn on LEDs with specific color",
"parameters": [
{
"in": "path",
"name": "color",
"schema": {
"type": "string",
"default": "FFCC00"
},
"required": true,
"description": "Color in RGB hex"
}
],
"responses": {
"200": {
"description": "successful operation"
}
}
}
},
"/lights/off": {
"get": {
"tags": ["lights"],
"summary": "Turn LEDs off",
"responses": {
"200": {
"description": "successful operation"
}
}
}
},
"/restart": {
"get": {
"tags": ["system"],
"summary": "Restart BTClock",
"responses": {
"200": {
"description": "successful operation"
}
}
}
}
},
"components": {
"schemas": {
"RgbColorValues": {
"type": "object",
"properties": {
"red": {
"type": "integer",
"minimum": 0,
"maximum": 255,
"example": 255
},
"green": {
"type": "integer",
"minimum": 0,
"maximum": 255,
"example": 204
},
"blue": {
"type": "integer",
"minimum": 0,
"maximum": 255,
"example": 0
}
}
},
"RgbColorHex": {
"type": "object",
"properties": {
"hex": {
"type": "string",
"pattern": "^#(?:[0-9a-fA-F]{3}){1,2}$",
"example": "#FFCC00"
}
}
},
"RgbColorValueAndHex": {
"allOf": [
{
"$ref": "#/components/schemas/RgbColorValues"
},
{
"$ref": "#/components/schemas/RgbColorHex"
}
]
},
"RgbColorValueOrHex": {
"oneOf": [
{
"$ref": "#/components/schemas/RgbColorValues"
},
{
"$ref": "#/components/schemas/RgbColorHex"
}
]
},
"ArrayOfLeds": {
"type": "array",
"items": {
"$ref": "#/components/schemas/RgbColorValueAndHex"
}
},
"ArrayOfLedsInput": {
"type": "array",
"items": {
"$ref": "#/components/schemas/RgbColorValueOrHex"
}
},
"Settings": {
"type": "object",
"properties": {
"fetchEurPrice": {
"type": "boolean",
"description": "Fetch EUR price instead of USD"
},
"fgColor": {
"type": "string",
"default": 16777215,
"description": "ePaper foreground (text) color"
},
"bgColor": {
"type": "string",
"default": 0,
"description": "ePaper background color"
},
"ledTestOnPower": {
"type": "boolean",
"default": true,
"description": "Do LED test on power-on"
},
"ledFlashOnUpd": {
"type": "boolean",
"default": false,
"description": "Flash LEDs on new block"
},
"mdnsEnabled": {
"type": "boolean",
"default": true,
"description": "Enable mDNS"
},
"otaEnabled": {
"type": "boolean",
"default": true,
"description": "Enable over-the-air updates"
},
"stealFocus": {
"type": "boolean",
"default": false,
"description": "Steal focus on new block"
},
"mcapBigChar": {
"type": "boolean",
"default": false,
"description": "Use big characters for market cap screen"
},
"mempoolInstance": {
"type": "string",
"default": "mempool.space",
"description": "Mempool.space instance to connect to"
},
"ledBrightness": {
"type": "integer",
"default": 128,
"description": "Brightness of LEDs"
},
"fullRefreshMin": {
"type": "integer",
"default": 60,
"description": "Full refresh time of ePaper displays in minutes"
},
"screen[0]": {
"type": "boolean"
},
"screen[1]": {
"type": "boolean"
},
"screen[2]": {
"type": "boolean"
},
"screen[3]": {
"type": "boolean"
},
"screen[4]": {
"type": "boolean"
},
"screen[5]": {
"type": "boolean"
},
"screen[6]": {
"type": "boolean"
},
"tzOffset": {
"type": "integer",
"default": 60,
"description": "Timezone offset in minutes"
},
"minSecPriceUpd": {
"type": "integer",
"default": 30,
"description": "Minimum time between price updates in seconds"
},
"timePerScreen": {
"type": "integer",
"default": 30,
"description": "Time between screens when rotating in minutes"
},
"txPower": {
"type": "integer",
"description": "WiFi Tx Power"
}
}
},
"CustomText": {
"type": "array",
"items": {
"type": "string"
},
"minItems": 7,
"maxItems": 7
}
}
}
}

76
static/swagger.yml
View file

@ -31,9 +31,9 @@ paths:
'200':
description: successful operation
content:
application/json:
application/json:
schema:
$ref: #/components/schemas/ArrayOfLeds
$ref: '#/components/schemas/ArrayOfLeds'
post:
tags:
- system
@ -139,8 +139,9 @@ paths:
application/json:
schema:
$ref: '#/components/schemas/ArrayOfLeds'
/lights/set:
patch:
tags:
tags:
- lights
summary: Set individual LEDs
requestBody:
@ -149,11 +150,11 @@ paths:
schema:
$ref: '#/components/schemas/ArrayOfLedsInput'
responses:
"200":
'200':
description: succesful operation
"400":
'400':
description: invalid colors or wrong amount of LEDs
/lights/{color}:
/lights/color/{color}:
get:
tags:
- lights
@ -188,38 +189,38 @@ paths:
components:
schemas:
RgbColorValues:
type: object
properties:
red:
type: integer
minimum: 0
maximum: 255
example: 255
green:
type: integer
minimum: 0
maximum: 255
example: 204
blue:
type: integer
minimum: 0
maximum: 255
example: 0
type: object
properties:
red:
type: integer
minimum: 0
maximum: 255
example: 255
green:
type: integer
minimum: 0
maximum: 255
example: 204
blue:
type: integer
minimum: 0
maximum: 255
example: 0
RgbColorHex:
type: object
properties:
hex:
type: string
pattern: ^#(?:[0-9a-fA-F]{3}){1,2}$
example: "#FFCC00"
type: object
properties:
hex:
type: string
pattern: ^#(?:[0-9a-fA-F]{3}){1,2}$
example: '#FFCC00'
RgbColorValueAndHex:
allOf:
- $ref: '#/components/schemas/RgbColorValues'
- $ref: '#/components/schemas/RgbColorHex'
allOf:
- $ref: '#/components/schemas/RgbColorValues'
- $ref: '#/components/schemas/RgbColorHex'
RgbColorValueOrHex:
oneOf:
- $ref: '#/components/schemas/RgbColorValues'
- $ref: '#/components/schemas/RgbColorHex'
oneOf:
- $ref: '#/components/schemas/RgbColorValues'
- $ref: '#/components/schemas/RgbColorHex'
ArrayOfLeds:
type: array
items:
@ -290,6 +291,8 @@ components:
type: boolean
screen[5]:
type: boolean
screen[6]:
type: boolean
tzOffset:
type: integer
default: 60
@ -302,6 +305,9 @@ components:
type: integer
default: 30
description: Time between screens when rotating in minutes
txPower:
type: integer
description: WiFi Tx Power
CustomText:
type: array
items:

22
svelte.config.js
View file

@ -1,20 +1,18 @@
import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/kit/vite';
import { sveltePreprocess } from 'svelte-preprocess';
/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
// for more information about preprocessors
preprocess: vitePreprocess({
}),
build: {
rollupOptions: {
output: {
assetFilenames: '[hash]'
preprocess: sveltePreprocess({}),
build: {
rollupOptions: {
output: {
assetFilenames: '[hash]'
}
}
}
},
},
kit: {
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
// If your environment is not supported or you settled on a specific environment, switch out the adapter.
@ -24,11 +22,11 @@ build: {
// these options are set automatically — see below
pages: 'dist',
assets: 'dist',
fallback: "bundle.html",
fallback: 'bundle.html',
precompress: false,
strict: true
}),
appDir: "build",
appDir: 'build'
// inlineStyleThreshold: 9999999999
}
};

184
tests/playwright/test.ts Normal file
View file

@ -0,0 +1,184 @@
import { expect, test } from '@playwright/test';
import { initMock, settingsJson, statusJson } from '../shared';
test.beforeEach(initMock);
test('index page has expected columns control, status, settings', async ({ page }) => {
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();
});
test('index page has working language selector', async ({ page }) => {
await page.goto('/');
await expect(page.locator('//*[@id="nav-language-dropdown"]/a')).toBeVisible();
page.locator('//*[@id="nav-language-dropdown"]/a').click();
//*[@id="nav-language-dropdown"]/ul/li[1]/button
await expect(page.locator('//*[@id="nav-language-dropdown"]/ul/li[1]/button')).toBeVisible();
page.locator('//*[@id="nav-language-dropdown"]/ul/li[2]/button').click();
await expect(page.getByRole('heading', { name: 'Instellingen' })).toBeVisible();
page.locator('//*[@id="nav-language-dropdown"]/a').click();
page.locator('//*[@id="nav-language-dropdown"]/ul/li[3]/button').click();
await expect(page.getByRole('heading', { name: 'Configuración' })).toBeVisible();
});
test('api page has expected load button', async ({ page }) => {
await page.goto('/api');
await expect(page.getByRole('button', { name: 'Load' })).toBeVisible();
});
test('timezone can be negative, zero and positive', async ({ page }) => {
await page.goto('/');
await page.getByRole('button', { name: 'Show all' }).click();
const tzOffsetField = 'input#tzOffset';
for (const val of ['-10', '0', '42']) {
await page.fill(tzOffsetField, val);
const resultValue = await page.$eval(tzOffsetField, (input: HTMLInputElement) => input.value);
expect(resultValue).toBe(val);
await page.getByRole('button', { name: 'Save' }).click();
}
});
test('time values can not be zero or negative', async ({ page }) => {
await page.goto('/');
await page.getByRole('button', { name: 'Show all' }).click();
for (const field of ['#timePerScreen', '#fullRefreshMin', '#minSecPriceUpd']) {
for (const val of ['42', '210']) {
await page.fill(field, val);
const resultValue = await page.$eval(field, (input: HTMLInputElement) => input.value);
expect(resultValue).toBe(val);
await page.getByRole('button', { name: 'Save' }).click();
const validationMessage = await page.$eval(
field,
(input: HTMLInputElement) => input.validationMessage
);
expect(validationMessage).not.toContain('Value must be greater');
}
for (const val of ['-10', '0']) {
await page.fill(field, val);
const resultValue = await page.$eval(field, (input: HTMLInputElement) => input.value);
expect(resultValue).toBe(val);
await page.getByRole('button', { name: 'Save' }).click();
const validationMessage = await page.$eval(
field,
(input: HTMLInputElement) => input.validationMessage
);
expect(validationMessage).toContain('Value must be greater');
}
}
});
test('info message when fetch eur price is enabled', async ({ page }) => {
delete (settingsJson as { actCurrencies?: string[] }).actCurrencies;
await page.goto('/');
await page.getByRole('button', { name: 'Show all' }).click();
const inputField = 'input#fetchEurPrice';
const switchElement = await page.locator(inputField);
expect(switchElement).toBeTruthy();
const isSwitchEnabled = await switchElement.isChecked();
expect(isSwitchEnabled).toBe(false);
await expect(page.getByText('the WS Price connection will show')).toBeHidden();
await switchElement.click();
const isSwitchNowEnabled = await switchElement.isChecked();
expect(isSwitchNowEnabled).toBe(true);
await expect(page.getByText('the WS Price connection will show')).toBeVisible();
});
test('npub values will be converted to hex pubkeys', async ({ page }) => {
await page.goto('/');
await page.getByRole('button', { name: 'Show all' }).click();
for (const field of ['#nostrZapPubkey']) {
for (const val of ['npub1k5f85zx0xdskyayqpfpc0zq6n7vwqjuuxugkayk72fgynp34cs3qfcvqg2']) {
await page.fill(field, val);
await page.getByLabel('Nostr Relay').click();
const resultValue = await page.$eval(field, (input: HTMLInputElement) => input.value);
expect(resultValue).toBe('b5127a08cf33616274800a4387881a9f98e04b9c37116e92de5250498635c422');
}
}
});
test('empty nostr relay field is not accepted', async ({ page }) => {
await page.goto('/');
await page.getByRole('button', { name: 'Show all' }).click();
const nostrRelayField = page.getByLabel('Nostr Relay');
nostrRelayField.fill('');
await page.getByRole('button', { name: 'Save' }).click();
const validationMessage = await nostrRelayField.evaluate((el) => el.validationMessage);
expect(validationMessage).toContain('Please fill out this field');
});
test('screens should be able to change', async ({ page }) => {
await page.goto('/');
await expect(page.getByRole('button', { name: 'Sats per Dollar' })).toBeVisible();
const responsePromise = page.waitForRequest('*/**/api/show/screen/*');
await page.getByRole('button', { name: 'Sats per Dollar' }).click();
const response = await responsePromise;
expect(response.url()).toContain('api/show/screen/1');
});
test('parse all types of EPD content correctly', async ({ page }) => {
statusJson.data[2] = '123';
await page.route('**/events', (route) => {
const newStatus = statusJson;
newStatus.data = ['BLOCK/HEIGHT', '8', '123', '0', '8', '1', '5'];
// Respond with a custom SSE message
route.fulfill({
status: 200,
contentType: 'text/event-stream',
json: `${JSON.stringify(newStatus)}\n\n`
});
});
await page.goto('/');
await expect(page.getByRole('heading', { name: 'Status' })).toBeVisible();
await page.waitForSelector('#timerStatusText:has-text("running")');
await page.waitForSelector('#btclock-wrapper > div > div:nth-child(1)');
expect(statusJson.data[0]).toContain('/');
await expect(page.locator('#btclock-wrapper > div > div:nth-child(1)')).toBeTruthy();
await expect(page.locator('#btclock-wrapper > div > div:nth-child(1)')).toHaveClass('splitText');
expect(statusJson.data[1]).toHaveLength(1);
await expect(page.locator('#btclock-wrapper > div > div:nth-child(2)')).toHaveClass('digit');
expect(statusJson.data[2]).toHaveLength(3);
await expect(page.locator('#btclock-wrapper > div > div:nth-child(3)')).toHaveClass('mediumText');
});
test('should work with more than 7 screens', async ({ page }) => {
statusJson.data[2] = '1';
statusJson.numScreens = 9;
settingsJson.numScreens = 9;
statusJson.data.splice(1, 0, ' ', ' ');
await page.goto('/');
await expect(page.getByRole('heading', { name: 'Status' })).toBeVisible();
await page.waitForSelector('#timerStatusText:has-text("running")');
await expect(page.locator('#btclock-wrapper > div > div:nth-child(9)')).toBeTruthy();
await expect(page.locator('#customText')).toHaveAttribute(
'maxlength',
statusJson.numScreens.toString()
);
});

132
tests/screenshots/viewport-screenshots.spec.ts Normal file
View file

@ -0,0 +1,132 @@
import { test, expect } from '@playwright/test';
import { initMock, settingsJson, statusJson } from '../shared';
test.beforeEach(initMock);
// Define the translations for the headings
const headings = {
en: {
control: 'Control',
status: 'Status',
settings: 'Settings',
language: 'English'
},
de: {
control: 'Steuerung',
status: 'Status',
settings: 'Einstellungen',
language: 'Deutsch'
},
nl: {
control: 'Besturing',
status: 'Status',
settings: 'Instellingen',
language: 'Nederlands'
},
es: {
control: 'Control',
status: 'Estado',
settings: 'Ajustes',
language: 'Español'
}
};
test('capture screenshots across devices', async ({ page }, testInfo) => {
// Get the locale from the browser or default to 'en'
const locale = testInfo.project.use?.locale?.split('-')[0].toLowerCase() || 'en';
const translations = headings[locale] || headings.en;
await page.goto('/');
await expect(page.getByRole('heading', { name: translations.control })).toBeVisible();
await expect(page.getByRole('heading', { name: translations.status })).toBeVisible();
await expect(page.getByRole('heading', { name: translations.settings })).toBeVisible();
if (await page.locator('#nav-language-dropdown').isVisible()) {
await expect(page.getByRole('link', { name: translations.language })).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) => {
const locale = testInfo.project.use?.locale?.split('-')[0].toLowerCase() || 'en';
const translations = headings[locale] || headings.en;
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: translations.control })).toBeVisible();
await expect(page.getByRole('heading', { name: translations.status })).toBeVisible();
await expect(page.getByRole('heading', { name: translations.settings })).toBeVisible();
if (await page.locator('#nav-language-dropdown').isVisible()) {
await expect(page.getByRole('link', { name: translations.language })).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'
});
});

143
tests/shared.ts Normal file
View file

@ -0,0 +1,143 @@
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',
miningPoolStats: false,
miningPoolName: 'ocean',
miningPoolUser: '38Qkkei3SuF1Eo45BaYmRHUneRD54yyTFy',
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
tsconfig.json
View file

@ -9,6 +9,7 @@
"skipLibCheck": true,
"sourceMap": true,
"strict": true,
"verbatimModuleSyntax": true,
"moduleResolution": "bundler"
}
// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias

109
vite.config.ts
View file

@ -1,62 +1,109 @@
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import GithubActionsReporter from 'vitest-github-actions-reporter';
// import { visualizer } from 'rollup-plugin-visualizer';
import * as fs from 'fs'
import * as path from 'path'
import * as fs from 'fs';
import * as path from 'path';
const doRewrap = ({ cssClass }) => {
try {
if (fs.existsSync(path.resolve(__dirname, 'dist/bundle.js'))) {
return
return;
}
} catch(e) {}
console.log("\nStart re-wrapping...")
fs.readFile(path.resolve(__dirname, 'dist/bundle.html'), 'utf8', function(err, data){
} catch {
// do nothing
}
console.log('\nStart re-wrapping...');
fs.readFile(path.resolve(__dirname, 'dist/bundle.html'), 'utf8', function (err, data) {
if (!data) {
console.log(`[Error]: No bundle.html generated, check svelte.config.js -> config.kit.adapter -> fallback: "bundle.html"`)
return
console.log(
`[Error]: No bundle.html generated, check svelte.config.js -> config.kit.adapter -> fallback: "bundle.html"`
);
return;
}
let matchData = data.match(/(?<=<script\b[^>]*>)([\s\S]*?)(?=<\/script>)/gm)
const matchData = data.match(/(?<=<script\b[^>]*>)([\s\S]*?)(?=<\/script>)/gm);
if (matchData) {
let cleanData = matchData[0].trim()
.replace(`document.querySelector('[data-sveltekit-hydrate="45h"]').parentNode`, `document.querySelector(".${cssClass}")`)
const cleanData = matchData[0]
.trim()
.replace(
`document.querySelector('[data-sveltekit-hydrate="45h"]').parentNode`,
`document.querySelector(".${cssClass}")`
);
fs.writeFile(path.resolve(__dirname, 'dist/bundle.js'), cleanData, (err) => {
if (err)
console.log(err)
if (err) console.log(err);
else {
try {
fs.rename(path.resolve(__dirname,'dist/index.page'), path.resolve(__dirname, 'dist/index.html'), (err) => { })
} catch (e) { }
fs.rename(
path.resolve(__dirname, 'dist/index.page'),
path.resolve(__dirname, 'dist/index.html'),
() => {}
);
} catch {
// do nothing
}
try {
fs.unlinkSync(path.resolve(__dirname, 'dist/bundle.html'))
} catch (e) { }
console.log("Finished: bundle.js + index.html have been regenerated.\n")
fs.unlinkSync(path.resolve(__dirname, 'dist/bundle.html'));
} catch {
// do nothing
}
console.log('Finished: bundle.js + index.html have been regenerated.\n');
}
})
} else
console.log(`[Error]: No proper <script> tag found in bundle.html`)
})
}
});
} else console.log(`[Error]: No proper <script> tag found in bundle.html`);
});
};
export default defineConfig({
plugins: [sveltekit(), {
name: 'postbuild-command',
plugins: [
sveltekit(),
{
name: 'postbuild-command',
closeBundle: {
order: 'post',
handler() {
setTimeout(() => doRewrap({ cssClass: "overlay" }), Math.random()*500+500)
setTimeout(() => doRewrap({ cssClass: 'overlay' }), Math.random() * 500 + 500);
}
}
}],
}
// visualizer({
// emitFile: true,
// filename: "stats.html",
// })
],
build: {
minify: true,
minify: 'esbuild',
cssCodeSplit: false,
chunkSizeWarningLimit: 550,
rollupOptions: {
output: {
manualChunks: () => 'app',
assetFileNames: "[name][extname]"
// assetFileNames: '[hash][extname]',
entryFileNames: `[hash][extname]`,
chunkFileNames: `[hash][extname]`,
assetFileNames: `[hash][extname]`,
preserveModules: false,
manualChunks: () => {
return 'app';
}
}
}
},
css: {
preprocessorOptions: {
scss: {
quietDeps: true,
silenceDeprecations: ['import']
}
}
},
test: {
include: ['src/**/*.{test,spec}.{js,ts}'],
globals: true,
environment: 'jsdom',
reporters: process.env.GITHUB_ACTIONS ? ['default', new GithubActionsReporter()] : 'default'
},
define: {
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
}
});

4208
yarn.lock
View file

File diff suppressed because it is too large Load diff