Compare commits

..

29 commits

Author SHA1 Message Date
Djuri Baars
924be8fc2e Fix locale-related bugs and test it with screenshots 2024-12-20 18:57:36 +01:00
Djuri Baars
23529dbd4b Improve project layout 2024-12-20 18:19:01 +01:00
Djuri Baars
20c81628f1 More vite improvements 2024-12-20 17:59:52 +01:00
Djuri Baars
25258b43a7 Settings refactor 2024-12-20 17:56:10 +01:00
Djuri Baars
8a9c013f24 Remove old patches 2024-12-20 17:18:33 +01:00
Djuri Baars
cefa98148a Updates and cleanup 2024-12-20 17:16:50 +01:00
Djuri Baars
551d714cce Remove woff(1) assets, show something when mining pool logo is shown 2024-12-20 15:22:59 +01:00
Djuri Baars
fd328d4f05 Add more mining pools 2024-12-20 04:03:35 +01:00
Djuri Baars
dfe703d676 Fix capitalization 2024-12-20 01:23:45 +01:00
Djuri Baars
a00eb54573 Get available pools from device 2024-12-20 01:20:15 +01:00
711c625648 bugfix for long preferences key 2024-12-18 21:24:50 -06:00
f458417536 Add mining pool stats enable/disable toggle 2024-12-18 21:24:50 -06:00
0c70c74a1a still untested 2024-12-18 21:24:50 -06:00
2bea761d3c work-in-progress, untested 2024-12-18 21:24:50 -06:00
Djuri Baars
85b9b17506 Add alt tag to bitaxe logo 2024-12-18 01:28:17 +01:00
Djuri Baars
eff18ba0c3 Add bitaxe icon and modify tests for it 2024-12-18 01:24:21 +01:00
Djuri Baars
266a99be96 Add vertical screen description option 2024-12-18 00:45:26 +01:00
Djuri Baars
653a39d0a3 Improvements for xs screens 2024-12-12 23:04:13 +01:00
Djuri Baars
68c247f3cc Fix screen selector UI, add screenshot maker 2024-12-12 19:50:36 +01:00
Djuri Baars
25e91b2086 Dependencies update, add switch for frontlight off when dark 2024-12-10 14:49:44 +01:00
Djuri Baars
f0fa58b5ea Fix LittleFS image generation 2024-11-29 00:57:07 +01:00
Djuri Baars
b8ed628bf5 Fix formatting 2024-11-29 00:13:43 +01:00
Djuri Baars
00af5f6521 Dependency updates and small fixes 2024-11-29 00:10:33 +01:00
Djuri Baars
51cce2ee9f Add color mode switcher 2024-11-28 23:30:14 +01:00
Djuri Baars
de99a221d6 Fix tests 2024-11-28 17:49:38 +01:00
Djuri Baars
93482b3be2 Dependency updates, increase fs allowance, split up settings section and add settings 2024-11-28 17:40:10 +01:00
Djuri Baars
d74e9dab60 Add Mow suffix mode setting 2024-11-27 10:03:32 +01:00
Djuri Baars
da3c70285d Add Forgejo action
Fix forgejo workflow

Fix workflow

Fix workflow python version

Fix workflow container

Forgejo js image

use upload artifacts fork
2024-11-26 17:35:26 +01:00
Djuri Baars
5066032a55 Change release checker endpoint, update dependencies 2024-11-25 23:58:21 +01:00
37 changed files with 2057 additions and 1198 deletions

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

View file

@ -30,7 +30,11 @@ Make sure the postinstall script is ran, because otherwise the filenames are to
## 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.
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:

View file

@ -13,6 +13,7 @@
"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": {
@ -32,6 +33,7 @@
"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",
@ -58,6 +60,7 @@
"msgpack-es": "^0.0.5",
"nostr-tools": "^2.7.1",
"patch-package": "^8.0.0",
"svelte-bootstrap-icons": "^3.1.1",
"svelte-i18n": "^4.0.0"
},
"resolutions": {

View file

@ -1,8 +1,8 @@
diff --git a/node_modules/@sveltejs/kit/src/exports/vite/index.js b/node_modules/@sveltejs/kit/src/exports/vite/index.js
index 40fa4c6..738cabf 100644
index ad519c9..bee1516 100644
--- a/node_modules/@sveltejs/kit/src/exports/vite/index.js
+++ b/node_modules/@sveltejs/kit/src/exports/vite/index.js
@@ -655,9 +655,9 @@ async function kit({ svelte_config }) {
@@ -644,9 +644,9 @@ async function kit({ svelte_config }) {
input,
output: {
format: 'esm',
@ -13,5 +13,18 @@ index 40fa4c6..738cabf 100644
+ chunkFileNames: ssr ? 'chunks/[name].js' : `${prefix}/chunks/[hash].${ext}`,
+ assetFileNames: `${prefix}/assets/[hash][extname]`,
hoistTransitiveImports: false,
sourcemapIgnoreList
},
sourcemapIgnoreList,
manualChunks:
@@ -661,9 +661,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
}
}

View file

@ -10,7 +10,7 @@ const config: PlaywrightTestConfig = {
port: 4173
},
reporter: process.env.CI ? 'github' : 'list',
testDir: 'tests',
testDir: 'tests/playwright',
testMatch: /(.+\.)?(test|spec)\.[jt]s/
};

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 } }
}
]
});

View file

@ -1,13 +0,0 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-eye"
viewBox="0 0 16 16"
>
<path
d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8M1.173 8a13 13 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172 8z"
/>
<path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0" />
</svg>

Before

Width:  |  Height:  |  Size: 530 B

View file

@ -1,18 +0,0 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-eye-slash"
viewBox="0 0 16 16"
>
<path
d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7 7 0 0 0-2.79.588l.77.771A6 6 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755q-.247.248-.517.486z"
/>
<path
d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829"
/>
<path
d="M3.35 5.47q-.27.24-.518.487A13 13 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7 7 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12z"
/>
</svg>

Before

Width:  |  Height:  |  Size: 814 B

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>

View file

@ -0,0 +1,58 @@
<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;
</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}
/>
{#if suffix}
<InputGroupText>{suffix}</InputGroupText>
{/if}
<slot />
</InputGroup>
{#if helpText}
<FormText>{helpText}</FormText>
{/if}
</Col>
</Row>

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>

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>

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>

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';

View file

@ -8,11 +8,23 @@ 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
? browser && localStorage.getItem('locale')
? localStorage.getItem('locale')
: window.navigator.language.slice(0, 2)
: defaultLocale
initialLocale: getInitialLocale()
});

View file

@ -42,7 +42,23 @@
"httpAuthUser": "WebUI-Benutzername",
"httpAuthPass": "WebUI-Passwort",
"httpAuthText": "Schützt nur die WebUI mit einem Passwort, nicht API-Aufrufe.",
"currencies": "Währungen"
"currencies": "Währungen",
"mowMode": "Mow suffixmodus",
"suffixShareDot": "Kompakte Suffix-Notation",
"section": {
"displaysAndLed": "Anzeigen und LEDs",
"screenSettings": "Infospezifisch",
"dataSource": "Datenquelle",
"extraFeatures": "Zusätzliche Funktionen",
"system": "System"
},
"ledFlashOnZap": "LED blinkt bei Nostr Zap",
"flFlashOnZap": "Displaybeleuchting bei Nostr Zap",
"showAll": "Alle anzeigen",
"hideAll": "Alles ausblenden",
"flOffWhenDark": "Displaybeleuchtung aus, wenn es dunkel ist",
"luxLightToggleText": "Zum Deaktivieren auf 0 setzen",
"verticalDesc": "Vrtikale Bildschirmbeschreibung"
},
"control": {
"systemInfo": "Systeminfo",

View file

@ -44,6 +44,9 @@
"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",
@ -54,7 +57,23 @@
"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."
"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",

View file

@ -41,7 +41,23 @@
"httpAuthUser": "Nombre de usuario WebUI",
"httpAuthPass": "Contraseña WebUI",
"httpAuthText": "Solo la WebUI está protegida con contraseña, no las llamadas API.",
"currencies": "Monedas"
"currencies": "Monedas",
"mowMode": "Modo de sufijo Mow",
"suffixShareDot": "Notación compacta de sufijo",
"section": {
"displaysAndLed": "Pantallas y LED",
"screenSettings": "Específico de la pantalla",
"dataSource": "fuente de datos",
"extraFeatures": "Funciones adicionales",
"system": "Sistema"
},
"ledFlashOnZap": "LED parpadeante con Nostr Zap",
"flFlashOnZap": "Flash de luz frontal con Nostr Zap",
"showAll": "Mostrar todo",
"hideAll": "Ocultar todo",
"flOffWhenDark": "Luz de la pantalla cuando está oscuro",
"luxLightToggleText": "Establecer en 0 para desactivar",
"verticalDesc": "Descripción de pantalla vertical"
},
"control": {
"turnOff": "Apagar",

View file

@ -42,7 +42,23 @@
"httpAuthUser": "WebUI-gebruikersnaam",
"httpAuthPass": "WebUI-wachtwoord",
"httpAuthText": "Beveiligd enkel WebUI, niet de API.",
"currencies": "Valuta's"
"currencies": "Valuta's",
"mowMode": "Mow achtervoegsel",
"suffixShareDot": "Achtervoegsel compacte notatie",
"section": {
"displaysAndLed": "Displays en LED's",
"screenSettings": "Schermspecifiek",
"dataSource": "Gegevensbron",
"extraFeatures": "Extra functies",
"system": "Systeem"
},
"ledFlashOnZap": "Knipper LED bij Nostr Zap",
"flFlashOnZap": "Knipper displaylicht bij Nostr Zap",
"showAll": "Toon alles",
"hideAll": "Alles verbergen",
"flOffWhenDark": "Displaylicht uit als het donker is",
"luxLightToggleText": "Stel in op 0 om uit te schakelen",
"verticalDesc": "Verticale schermbeschrijving"
},
"control": {
"systemInfo": "Systeeminformatie",

View file

@ -1,19 +1,33 @@
@use '@fontsource/ubuntu/scss/mixins' as Ubuntu;
@use '@fontsource/antonio/scss/mixins' as Antonio;
@import '../node_modules/bootstrap/scss/functions';
@import '../node_modules/bootstrap/scss/variables';
@import '../node_modules/bootstrap/scss/variables-dark';
//@import "@fontsource/antonio/latin-400.css";
@import '@fontsource/ubuntu/latin-400.css';
//@import '@fontsource/oswald/latin-400.css';
@import '@fontsource/antonio/latin-400.css';
@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: media-query;
$color-mode-type: data;
$font-family-base: 'Ubuntu';
$font-size-base: 0.9rem;
$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';
@ -43,6 +57,40 @@ $input-font-size-sm: $font-size-base * 0.875;
@import '../node_modules/bootstrap/scss/helpers';
@import '../node_modules/bootstrap/scss/utilities/api';
/* Default state (xs) - sticky */
.sticky-xs-top {
position: sticky;
top: 0;
z-index: 1020;
}
@media (max-width: 576px) {
main {
margin-top: 25px;
}
}
/* Remove sticky behavior for larger screens */
@media (min-width: 576px) {
.sticky-xs-top {
position: relative;
}
}
@include color-mode(dark) {
.navbar {
--bs-navbar-color: $light;
background-color: $dark;
}
}
@include color-mode(light) {
.navbar {
--bs-navbar-color: $dark;
background-color: $light;
}
}
nav {
margin-bottom: 15px;
}
@ -53,6 +101,23 @@ nav {
.btn-group-sm .btn {
font-size: 0.8rem;
// text-overflow: ellipsis;
// white-space: nowrap;
// overflow: hidden;
// width: 4rem;
}
.btn-group-sm {
display: flex !important;
flex-wrap: wrap !important;
gap: 0.25rem !important;
}
/* Remove the border radius override that Bootstrap applies */
.btn-group-sm > .btn {
border-radius: 0.25rem !important;
margin: 0 !important;
position: relative !important;
}
#customText {
@ -63,7 +128,7 @@ nav {
.btclock {
background: #000;
display: flex;
font-size: calc(3vw + 3vh);
font-size: calc(2vw + 2vh);
font-family: 'Antonio', sans-serif;
font-weight: 400;
padding: 10px;
@ -104,19 +169,25 @@ nav {
flex-direction: column; /* Stack the text and line vertically */
align-items: center;
justify-content: space-around; /* Distribute items with space between */
padding: 10px;
padding: 5px;
}
.splitText div:first-child::after {
&.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;
// margin-bottom: 3px;
}
.splitText {
font-size: calc(0.5vw + 1vh);
font-size: calc(0.3vw + 1vh);
.top-text,
.bottom-text {
@ -242,3 +313,7 @@ nav {
input[type='number'] {
text-align: right;
}
.lightMode .bitaxelogo {
filter: brightness(0) saturate(100%);
}

View file

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

View file

@ -12,9 +12,12 @@
NavbarBrand,
NavbarToggler
} from '@sveltestrap/sveltestrap';
import { _ } from 'svelte-i18n';
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);
@ -37,19 +40,20 @@
return flagMap[lowercaseCode];
} else {
// Return null for unsupported language codes
return null;
return flagMap['en'];
}
};
let languageNames = {};
const currentLocale = derived(locale, ($locale) => $locale || 'en');
locale.subscribe(() => {
if ($locale) {
let newLanguageNames = new Intl.DisplayNames([$locale], { type: 'language' });
const localeToUse = $locale || 'en';
let newLanguageNames = new Intl.DisplayNames([localeToUse], { type: 'language' });
for (let l of $locales) {
languageNames[l] = newLanguageNames.of(l);
}
languageNames[l] = newLanguageNames.of(l) || l;
}
});
@ -60,8 +64,23 @@
};
</script>
<Navbar expand="md">
<NavbarBrand>&#8383;TClock</NavbarBrand>
<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">
@ -77,8 +96,11 @@
</NavItem>
</Nav>
{#if !$isLoading}
<Dropdown id="nav-language-dropdown" inNavbar>
<DropdownToggle nav caret>{getFlagEmoji($locale)} {languageNames[$locale]}</DropdownToggle>
<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)}
@ -88,8 +110,11 @@
</DropdownMenu>
</Dropdown>
{/if}
<ColorSchemeSwitcher></ColorSchemeSwitcher>
</Collapse>
</Navbar>
<!-- +layout.svelte -->
<main>
<slot />
</main>

View file

@ -6,10 +6,15 @@ import { locale, waitLocale } from 'svelte-i18n';
import type { LayoutLoad } from './$types';
export const load: LayoutLoad = async () => {
if (browser && localStorage.getItem('locale')) {
if (browser) {
if (localStorage.getItem('locale')) {
locale.set(localStorage.getItem('locale'));
} else if (browser) {
locale.set(window.navigator.language);
} 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();
};

View file

@ -3,6 +3,7 @@
import { screenSize, updateScreenSize } from '$lib/screen';
import { Container, Row, Toast, ToastBody } from '@sveltestrap/sveltestrap';
import { replaceState } from '$app/navigation';
import { onMount } from 'svelte';
import { writable } from 'svelte/store';
@ -16,12 +17,6 @@
bgColor: '0'
});
// let uiSettings = writable({
// inputSize: 'sm',
// selectClass: '',
// btnSize: 'lg'
// });
let status = writable({
data: ['L', 'O', 'A', 'D', 'I', 'N', 'G'],
espFreeHeap: 0,
@ -60,7 +55,43 @@
});
};
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();
@ -72,6 +103,11 @@
});
function handleResize() {
if (observer) {
observer.disconnect();
}
setupObserver();
updateScreenSize();
}
@ -125,7 +161,9 @@
<Container fluid>
<Row>
<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>

View file

@ -105,8 +105,8 @@
export let xxl = xl;
</script>
<Col {xs} {sm} {md} {lg} {xl} {xxl}>
<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>

View file

@ -145,7 +145,7 @@
onMount(async () => {
try {
const response = await fetch(
'https://api.github.com/repos/btclock/btclock_v3/releases/latest'
'https://git.btclock.dev/api/v1/repos/btclock/btclock_v3/releases/latest'
);
if (!response.ok) {
@ -200,7 +200,7 @@
<p>Loading...</p>
{/if}
<section class="row row-cols-lg-auto align-items-end">
<div class="col-12">
<div class="col flex-fill">
<label for="firmwareFile" class="form-label">Firmware file ({getFirmwareBinaryName()})</label>
<input
type="file"
@ -216,7 +216,7 @@
>Update firmware</Button
>
</div>
<div class="col mt-2">
<div class="col flex-fill">
<label for="webuiFile" class="form-label">WebUI file (littlefs.bin)</label>
<input
type="file"

View file

@ -9,7 +9,7 @@
};
export let className = 'btclock-wrapper';
export let verticalDesc = false;
// Define the currency symbols as constants
const CURRENCY_USD = '$';
const CURRENCY_EUR = '[';
@ -44,21 +44,22 @@
</script>
<div class={className} id={className}>
<div class="btclock">
<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>
<hr />
<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">
<div class={'digit icon' + (char.endsWith('bitaxe') ? ' icon-img' : '')}>
{#if char.endsWith('rocket')}
<RocketIcon></RocketIcon>
{/if}
@ -68,6 +69,12 @@
{#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>
@ -82,8 +89,26 @@
</div>
</div>
<style>
<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>

File diff suppressed because it is too large Load diff

View file

@ -104,8 +104,8 @@
export let xxl = xl;
</script>
<Col {xs} {sm} {md} {lg} {xl} {xxl}>
<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>
@ -136,7 +136,7 @@
</ButtonGroup>
</div>
{#if $settings.actCurrencies && $settings.ownDataSource}
<div class="d-flex justify-content-center d-none d-sm-flex mt-2">
<div class="d-flex justify-content-center d-sm-flex mt-2">
<ButtonGroup size="sm">
{#each $settings.actCurrencies as c}
<Button
@ -151,7 +151,11 @@
<hr />
{#if $status.data}
<section class={lightMode ? 'lightMode' : 'darkMode'}>
<Rendered status={$status} className="btclock-wrapper"></Rendered>
<Rendered
status={$status}
className="btclock-wrapper"
verticalDesc={$settings.verticalDesc}
></Rendered>
</section>
{$_('section.status.screenCycle')}:
<a

BIN
static/bitaxe.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

View file

@ -1,11 +1,11 @@
import adapter from '@sveltejs/adapter-static';
import preprocess from 'svelte-preprocess';
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: preprocess({}),
preprocess: sveltePreprocess({}),
build: {
rollupOptions: {
output: {

View file

@ -1,114 +1,7 @@
import { expect, test } from '@playwright/test';
import { initMock, settingsJson, statusJson } from '../shared';
const statusJson = {
currentScreen: 0,
numScreens: 7,
timerRunning: true,
espUptime: 4479,
espFreeHeap: 58508,
espHeapSize: 342108,
connectionStatus: { price: true, blocks: true },
rssi: -66,
data: ['BLOCK/HEIGHT', '8', '1', '8', '0', '2', '6'],
rendered: ['BLOCK/HEIGHT', '8', '1', '8', '0', '2', '6'],
leds: [
{ red: 0, green: 0, blue: 0, hex: '#000000' },
{ red: 0, green: 0, blue: 0, hex: '#000000' },
{ red: 0, green: 0, blue: 0, hex: '#000000' },
{ red: 0, green: 0, blue: 0, hex: '#000000' }
]
};
const settingsJson = {
numScreens: 7,
fgColor: 415029,
bgColor: 0,
timerSeconds: 1800,
timerRunning: true,
minSecPriceUpd: 30,
fullRefreshMin: 60,
wpTimeout: 600,
tzOffset: 0,
useBitcoinNode: false,
mempoolInstance: 'mempool.space',
ledTestOnPower: true,
ledFlashOnUpd: true,
ledBrightness: 128,
stealFocus: true,
mcapBigChar: true,
mdnsEnabled: true,
otaEnabled: true,
fetchEurPrice: false,
hostnamePrefix: 'btclock',
hostname: 'btclock-d60b14',
ip: '192.168.20.231',
txPower: 78,
gitRev: '25d8b92bcbc8938417c140355ea3ba99ff9eb4b7',
gitTag: '3.1.9',
bitaxeEnabled: false,
bitaxeHostname: 'bitaxe1',
nostrZapNotify: true,
hwRev: 'REV_A_EPD_2_13',
fsRev: '4c5d9616212b27e3f05c35370f0befcf2c5a04b2',
nostrZapPubkey: 'b5127a08cf33616274800a4387881a9f98e04b9c37116e92de5250498635c422',
lastBuildTime: '1700666677',
screens: [
{ id: 0, name: 'Block Height', enabled: true },
{ id: 1, name: 'Sats per dollar', enabled: true },
{ id: 2, name: 'Ticker', enabled: true },
{ id: 3, name: 'Time', enabled: true },
{ id: 4, name: 'Halving countdown', enabled: true },
{ id: 5, name: 'Market Cap', enabled: true }
]
};
test.beforeEach(async ({ page }) => {
await page.route('*/**/api/status', async (route) => {
await route.fulfill({ json: statusJson });
});
await page.route('*/**/api/show/screen/1', async (route) => {
//if (route.request().url().includes('*/**/api/show/screen/1')) {
statusJson.currentScreen = 1;
statusJson.data = ['MSCW/TIME', ' ', ' ', '2', '6', '4', '4'];
statusJson.rendered = statusJson.data;
//}
await route.fulfill({ json: statusJson });
});
await page.route('*/**/api/show/screen/2', async (route) => {
statusJson.currentScreen = 2;
statusJson.data = ['BTC/USD', '$', '3', '7', '8', '2', '4'];
statusJson.rendered = statusJson.data;
await route.fulfill({ json: statusJson });
});
await page.route('*/**/api/show/screen/4', async (route) => {
statusJson.currentScreen = 4;
statusJson.data = ['BIT/COIN', 'HALV/ING', '0/YRS', '149/DAYS', '8/HRS', '30/MINS', 'TO/GO'];
statusJson.rendered = statusJson.data;
await route.fulfill({ json: statusJson });
});
await page.route('*/**/api/settings', async (route) => {
await route.fulfill({ json: settingsJson });
});
await page.route('**/events', (route) => {
const newStatus = statusJson;
newStatus.data = ['BLOCK/HEIGHT', '8', '0', '0', '8', '1', '5'];
// Respond with a custom SSE message
route.fulfill({
status: 200,
contentType: 'text/event-stream',
json: `${JSON.stringify(newStatus)}\n\n`
});
});
});
test.beforeEach(initMock);
test('index page has expected columns control, status, settings', async ({ page }) => {
await page.goto('/');
@ -137,6 +30,8 @@ test('api page has expected load button', async ({ page }) => {
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']) {
@ -149,6 +44,7 @@ test('timezone can be negative, zero and positive', async ({ page }) => {
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']) {
@ -178,7 +74,11 @@ test('time values can not be zero or negative', async ({ page }) => {
});
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);
@ -197,6 +97,7 @@ test('info message when fetch eur price is enabled', async ({ page }) => {
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']) {
@ -212,6 +113,7 @@ test('npub values will be converted to hex pubkeys', async ({ page }) => {
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');

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`
});
});
};

View file

@ -1,6 +1,7 @@
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vitest/config';
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';
@ -65,14 +66,34 @@ export default defineConfig({
}
}
}
// 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']
}
}
},
@ -81,5 +102,8 @@ export default defineConfig({
globals: true,
environment: 'jsdom',
reporters: process.env.GITHUB_ACTIONS ? ['default', new GithubActionsReporter()] : 'default'
},
define: {
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
}
});

891
yarn.lock

File diff suppressed because it is too large Load diff