chore: remove unnecessary python action

Reviewed-on: #48

.forgejo/workflows/build.yaml

@@ -39,6 +39,7 @@ jobs:
           submodules: recursive
       - uses: actions/setup-node@v4
         with:
+          token: ${{ secrets.GH_TOKEN }}
           node-version: lts/*
           cache: yarn
           cache-dependency-path: '**/yarn.lock'
@@ -49,9 +50,6 @@ jobs:
             ~/node_modules
             ~/.cache/ms-playwright
           key: ${{ runner.os }}-pio-playwright-${{ hashFiles('**/yarn.lock') }}
-      - 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
@@ -120,7 +118,7 @@ jobs:
             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.5.1
+        uses: https://code.forgejo.org/actions/forgejo-release@v2.5.3
         with:
           url: 'https://git.btclock.dev/'
           repo: '${{ github.repository }}'

README.md

@@ -1,10 +1,11 @@
 # BTClock WebUI
 
-[![BTClock CI](https://github.com/btclock/webui/actions/workflows/workflow.yml/badge.svg)](https://github.com/btclock/webui2/actions/workflows/workflow.yml)
+[![Latest release](https://git.btclock.dev/btclock/webui/badges/release.svg)](https://git.btclock.dev/btclock/webui/releases/latest)
+[![BTClock CI](https://git.btclock.dev/btclock/webui/badges/workflows/build.yaml/badge.svg)](https://git.btclock.dev/btclock/webui/actions?workflow=build.yaml&actor=0&status=0)
 
 The web user-interface for the BTClock, based on Svelte-kit. It uses Bootstrap for the lay-out.
 
-![Screenshot](doc/screenshot.webp)
+![Screenshot](doc/screenshot-light.webp)
 ![Screenshot Dark](doc/screenshot-dark.webp)
 
 ## Developing

package.json

@@ -5,15 +5,17 @@
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
+		"build:test": "vite build --config vite.config.test.ts",
 		"preview": "vite preview",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "prettier --check . && eslint .",
 		"format": "prettier --write .",
 		"postinstall": "patch-package",
-		"test": "npm run test:integration && npm run test:unit",
+		"test": "prettier --write . && eslint . && npm run test:integration && npm run test:unit",
 		"test:integration": "playwright test",
 		"test:screenshots": "playwright test -c playwright.screenshot.config.ts",
+		"doc:update-screenshots": "playwright test -c playwright.doc-screenshot.config.ts",
 		"test:unit": "vitest"
 	},
 	"devDependencies": {
@@ -35,6 +37,7 @@
 		"prettier-plugin-svelte": "^3.2.6",
 		"rollup-plugin-visualizer": "^5.12.0",
 		"sass": "^1.79.3",
+		"sharp": "^0.33.5",
 		"svelte": "^4.2.19",
 		"svelte-check": "^4.0.2",
 		"svelte-preprocess": "^6.0.2",
@@ -66,6 +69,5 @@
 		"es5-ext": ">=0.10.64",
 		"ws": ">=8.18.0",
 		"micromatch": ">=4.0.8"
-	},
-	"packageManager": "yarn@1.22.21+sha1.1959a18351b811cdeedbd484a8f86c3cc3bbaf72"
+	}
 }

patches/@sveltejs+kit+2.16.0+001+initial.patch

@@ -1,30 +1,17 @@
 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
+index ddbe746..1d926a4 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 }) {
+@@ -658,9 +658,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}`,
+-								chunkFileNames: ssr ? 'chunks/[name].js' : `${prefix}/chunks/[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]`,
++								chunkFileNames: ssr ? 'chunks/[name].js' : `${prefix}/c[hash].${ext}`,
++								assetFileNames: `${prefix}/a[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
- 							}
- 						}

playwright.config.ts

@@ -6,7 +6,7 @@ const config: PlaywrightTestConfig = {
 		timezoneId: 'Europe/Amsterdam'
 	},
 	webServer: {
-		command: 'npm run build && npm run preview',
+		command: 'npm run build:test && npm run preview',
 		port: 4173
 	},
 	reporter: process.env.CI ? 'github' : 'list',

playwright.doc-screenshot.config.ts

@@ -0,0 +1,27 @@
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+	use: {
+		locale: 'en-GB',
+		timezoneId: 'Europe/Amsterdam'
+	},
+	webServer: {
+		command: 'yarn build && yarn preview',
+		port: 4173
+	},
+	testDir: './tests/doc-screenshots',
+	outputDir: './test-results/screenshots',
+	projects: [
+		{
+			name: 'Light Mode',
+			use: {
+				viewport: { width: 1440, height: 900 },
+				colorScheme: 'light'
+			}
+		},
+		{
+			name: 'Dark Mode',
+			use: { viewport: { width: 1440, height: 900 }, colorScheme: 'dark' }
+		}
+	]
+});

playwright.screenshot.config.ts

@@ -54,6 +54,14 @@ export default defineConfig({
 		{
 			name: 'MacBook Pro 14 inch Safari',
 			use: { ...devices['Desktop Safari'], viewport: { width: 1512, height: 982 } }
+		},
+		{
+			name: 'MacBook Pro 14 inch Safari Dark Mode',
+			use: {
+				...devices['Desktop Safari'],
+				viewport: { width: 1512, height: 982 },
+				colorScheme: 'dark'
+			}
 		}
 	]
 });

src/lib/components/settings/DisplaySettings.svelte

@@ -20,14 +20,19 @@
 
 	const setTextColor = () => {
 		$settings.invertedColor = !$settings.invertedColor;
-		$settings.fgColor = $settings.invertedColor ? 65535 : 0;
-		$settings.bgColor = $settings.invertedColor ? 0 : 65535;
 	};
 
 	const textColorOptions: [string, boolean][] = [
 		[$_('colors.black') + ' on ' + $_('colors.white'), false],
 		[$_('colors.white') + ' on ' + $_('colors.black'), true]
 	];
+
+	const fontPreferenceOptions: [string, string][] = $settings.availableFonts?.map((font) => [
+		$_(`fonts.${font}`) !== `fonts.${font}`
+			? $_(`fonts.${font}`)
+			: font.charAt(0).toUpperCase() + font.slice(1),
+		font
+	]);
 </script>
 
 <Row>
@@ -45,6 +50,14 @@
 			on:change={setTextColor}
 		/>
 
+		<SettingsSelect
+			id="fontName"
+			label={$_('section.settings.fontName')}
+			bind:value={$settings.fontName}
+			options={fontPreferenceOptions}
+			size={$uiSettings.inputSize}
+		/>
+
 		<SettingsInput
 			id="timePerScreen"
 			label={$_('section.settings.timePerScreen')}
@@ -102,7 +115,7 @@
 				max={4095}
 				step={1}
 				size={$uiSettings.inputSize}
-				on:change={onFlBrightnessChange}
+				onChange={onFlBrightnessChange}
 			/>
 
 			<SettingsInput
@@ -177,12 +190,14 @@
 					size={$uiSettings.inputSize}
 				/>
 
-				<SettingsSwitch
-					id="flOffWhenDark"
-					bind:checked={$settings.flOffWhenDark}
-					label={$_('section.settings.flOffWhenDark')}
-					size={$uiSettings.inputSize}
-				/>
+				{#if $settings.hasLightLevel}
+					<SettingsSwitch
+						id="flOffWhenDark"
+						bind:checked={$settings.flOffWhenDark}
+						label={$_('section.settings.flOffWhenDark')}
+						size={$uiSettings.inputSize}
+					/>
+				{/if}
 			{/if}
 		</Row>
 	</ToggleHeader>

src/lib/components/settings/ExtraFeaturesSettings.svelte

@@ -13,6 +13,7 @@
 	export let miningPoolMap: Map<string, string>;
 
 	let validBitaxe = false;
+	let validLocalPool = false;
 	const testBitaxe = async () => {
 		try {
 			const response = await fetch(`http://${$settings.bitaxeHostname}/api/system/info`);
@@ -61,6 +62,49 @@
 		miningPoolMap.get(pool) || pool,
 		pool
 	]);
+
+	const testLocalPool = async () => {
+		try {
+			const controller = new AbortController();
+			const timeoutId = setTimeout(() => controller.abort(), 1000);
+
+			const response = await fetch(
+				`http://${$settings.localPoolEndpoint}/api/client/${$settings.miningPoolUser}`,
+				{ signal: controller.signal }
+			);
+			clearTimeout(timeoutId);
+
+			if (!response.ok) {
+				dispatch('showToast', {
+					color: 'danger',
+					text: `Failed to connect to local pool! status: ${response.status}`
+				});
+				validLocalPool = false;
+				throw new Error();
+			}
+
+			const poolInfo = await response.json();
+			dispatch('showToast', {
+				color: 'success',
+				text: `Can connect to local public pool, ${poolInfo.workersCount} workers`
+			});
+			validLocalPool = true;
+		} catch (error) {
+			if (error.name === 'AbortError') {
+				dispatch('showToast', {
+					color: 'danger',
+					text: `Connection to local pool timed out after 1 second`
+				});
+			} else {
+				dispatch('showToast', {
+					color: 'danger',
+					text: `Failed to connect to local pool, check the endpoint and make sure you are connected to the same network.`
+				});
+			}
+			console.error('Failed to fetch local pool info:', error);
+			validLocalPool = false;
+		}
+	};
 </script>
 
 <Row>
@@ -69,6 +113,64 @@
 		bind:isOpen
 		defaultOpen={false}
 	>
+		<!--- Time based do not disturb settings -->
+		<SettingsSwitch
+			id="timeBasedDnd"
+			label={$_('section.settings.timeBasedDnd')}
+			bind:checked={$settings.dnd.timeBasedEnabled}
+			size={$uiSettings.inputSize}
+		/>
+		{#if $settings.dnd.timeBasedEnabled}
+			<Row>
+				<Col>
+					<SettingsInput
+						id="dndStartHour"
+						type="number"
+						min="0"
+						max="23"
+						label={$_('section.settings.dndStartHour')}
+						bind:value={$settings.dnd.startHour}
+						size={$uiSettings.inputSize}
+					/>
+				</Col>
+				<Col>
+					<SettingsInput
+						id="dndStartMinute"
+						type="number"
+						min="0"
+						max="59"
+						label={$_('section.settings.dndStartMinute')}
+						bind:value={$settings.dnd.startMinute}
+						size={$uiSettings.inputSize}
+					/>
+				</Col>
+			</Row>
+			<Row>
+				<Col>
+					<SettingsInput
+						id="dndEndHour"
+						type="number"
+						min="0"
+						max="23"
+						label={$_('section.settings.dndEndHour')}
+						bind:value={$settings.dnd.endHour}
+						size={$uiSettings.inputSize}
+					/>
+				</Col>
+				<Col>
+					<SettingsInput
+						id="dndEndMinute"
+						type="number"
+						min="0"
+						max="59"
+						label={$_('section.settings.dndEndMinute')}
+						bind:value={$settings.dnd.endMinute}
+						size={$uiSettings.inputSize}
+					/>
+				</Col>
+			</Row>
+		{/if}
+
 		<!-- BitAxe Settings -->
 		{#if 'bitaxeEnabled' in $settings}
 			<Row class="mb-3">
@@ -120,6 +222,21 @@
 							size={$uiSettings.inputSize}
 							selectClass={$uiSettings.selectClass}
 						/>
+						{#if $settings.miningPoolName === 'local_public_pool'}
+							<SettingsInput
+								id="localPoolEndpoint"
+								label={$_('section.settings.localPoolEndpoint', { default: 'Local Pool Endpoint' })}
+								bind:value={$settings.localPoolEndpoint}
+								placeholder="umbrel.local:2019"
+								required={true}
+								valid={validLocalPool}
+								size={$uiSettings.inputSize}
+							>
+								<Button type="button" color="success" on:click={testLocalPool}>
+									{$_('test', { default: 'Test' })}
+								</Button>
+							</SettingsInput>
+						{/if}
 						<SettingsInput
 							id="miningPoolUser"
 							label={$_('section.settings.miningPoolUser')}

src/lib/components/settings/ScreenSpecificSettings.svelte

@@ -4,6 +4,7 @@
 	import { Row, Col } from '@sveltestrap/sveltestrap';
 	import ToggleHeader from '../ToggleHeader.svelte';
 	import { uiSettings } from '$lib/uiSettings';
+	import { DataSourceType } from '$lib/types/dataSource';
 
 	export let settings;
 	export let isOpen = false;
@@ -99,7 +100,7 @@
 				{/each}
 			{/if}
 		</Row>
-		{#if $settings.actCurrencies && $settings.useNostr !== true}
+		{#if $settings.actCurrencies && $settings.dataSource == DataSourceType.BTCLOCK_SOURCE}
 			<Row>
 				<h5>{$_('section.settings.currencies')}</h5>
 				<small>{$_('restartRequired')}</small>

src/lib/locales/de.json

@@ -67,7 +67,13 @@
 			"dataSource": {
 				"nostr": "Nostr-Verlag",
 				"custom": "Benutzerdefinierter dataquelle"
-			}
+			},
+			"fontName": "Schriftart",
+			"timeBasedDnd": "Aktivieren Sie den Zeitplan „Bitte nicht stören“.",
+			"dndStartHour": "Startstunde",
+			"dndStartMinute": "Startminute",
+			"dndEndHour": "Endstunde",
+			"dndEndMinute": "Schlussminute"
 		},
 		"control": {
 			"systemInfo": "Systeminfo",
@@ -95,7 +101,9 @@
 			"wifiSignalStrength": "WiFi-Signalstärke",
 			"wsDataConnection": "BTClock-Datenquelle verbindung",
 			"lightSensor": "Lichtsensor",
-			"nostrConnection": "Nostr Relay-Verbindung"
+			"nostrConnection": "Nostr Relay-Verbindung",
+			"doNotDisturb": "Bitte nicht stören",
+			"timeBasedDnd": "Zeitbasierter Zeitplan"
 		},
 		"firmwareUpdater": {
 			"fileUploadSuccess": "Datei erfolgreich hochgeladen, Gerät neu gestartet. WebUI in {countdown} Sekunden neu geladen",

src/lib/locales/en.json

@@ -84,7 +84,13 @@
 			},
 			"thirdPartySource": "Use mempool.space/coincap.io",
 			"ceDisableSSL": "Disable SSL",
-			"ceEndpoint": "Endpoint hostname"
+			"ceEndpoint": "Endpoint hostname",
+			"fontName": "Font",
+			"timeBasedDnd": "Enable Do Not Disturb time schedule",
+			"dndStartHour": "Start hour",
+			"dndStartMinute": "Start minute",
+			"dndEndHour": "End hour",
+			"dndEndMinute": "End minute"
 		},
 		"control": {
 			"systemInfo": "System info",
@@ -114,7 +120,9 @@
 			"wifiSignalStrength": "WiFi Signal strength",
 			"wsDataConnection": "BTClock data-source connection",
 			"lightSensor": "Light sensor",
-			"nostrConnection": "Nostr Relay connection"
+			"nostrConnection": "Nostr Relay connection",
+			"doNotDisturb": "Do not disturb",
+			"timeBasedDnd": "Time-based schedule"
 		},
 		"firmwareUpdater": {
 			"fileUploadFailed": "File upload failed. Make sure you have selected the correct file and try again.",

src/lib/locales/es.json

@@ -66,7 +66,13 @@
 			"dataSource": {
 				"nostr": "editorial nostr",
 				"custom": "Punto final personalizado"
-			}
+			},
+			"fontName": "Fuente",
+			"timeBasedDnd": "Habilitar el horario de No molestar",
+			"dndStartHour": "Hora de inicio",
+			"dndStartMinute": "Minuto de inicio",
+			"dndEndHour": "Hora final",
+			"dndEndMinute": "Minuto final"
 		},
 		"control": {
 			"turnOff": "Apagar",
@@ -94,7 +100,9 @@
 			"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"
+			"nostrConnection": "Conexión de relé Nostr",
+			"doNotDisturb": "No molestar",
+			"timeBasedDnd": "Horario basado en el tiempo"
 		},
 		"firmwareUpdater": {
 			"fileUploadSuccess": "Archivo cargado exitosamente, reiniciando el dispositivo. Recargando WebUI en {countdown} segundos",

src/lib/locales/nl.json

@@ -58,7 +58,13 @@
 			"hideAll": "Alles verbergen",
 			"flOffWhenDark": "Displaylicht uit als het donker is",
 			"luxLightToggleText": "Stel in op 0 om uit te schakelen",
-			"verticalDesc": "Verticale schermbeschrijving"
+			"verticalDesc": "Verticale schermbeschrijving",
+			"fontName": "Lettertype",
+			"timeBasedDnd": "Schakel het tijdschema Niet storen in",
+			"dndStartHour": "Begin uur",
+			"dndStartMinute": "Beginminuut",
+			"dndEndHour": "Eind uur",
+			"dndEndMinute": "Einde minuut"
 		},
 		"control": {
 			"systemInfo": "Systeeminformatie",
@@ -85,7 +91,9 @@
 			"wifiSignalStrength": "WiFi signaalsterkte",
 			"wsDataConnection": "BTClock-gegevensbron verbinding",
 			"lightSensor": "Licht sensor",
-			"nostrConnection": "Nostr Relay-verbinding"
+			"nostrConnection": "Nostr Relay-verbinding",
+			"doNotDisturb": "Niet storen",
+			"timeBasedDnd": "Op tijd gebaseerd schema"
 		},
 		"firmwareUpdater": {
 			"fileUploadSuccess": "Bestand geüpload, apparaat herstart. WebUI opnieuw geladen over {countdown} seconden",

src/routes/+page.svelte

@@ -105,7 +105,6 @@
 		setupObserver();
 
 		const connectEventSource = () => {
-			console.log('Connecting to EventSource');
 			const evtSource = new EventSource(`${PUBLIC_BASE_URL}/events`);
 
 			evtSource.addEventListener('status', (e) => {

src/routes/Settings.svelte

@@ -30,7 +30,8 @@
 		['public_pool', 'public-pool.io'],
 		['gobrrr_pool', 'Go Brrr pool'],
 		['ckpool', 'CKPool'],
-		['eu_ckpool', 'EU CKPool']
+		['eu_ckpool', 'EU CKPool'],
+		['local_public_pool', 'Public Pool (local)']
 	]);
 
 	const dispatch = createEventDispatcher();
@@ -114,9 +115,13 @@
 		<CardHeader>
 			<div class="float-end">
 				<small>
-					<button type="button" on:click={showAll}>{$_('section.settings.showAll')}</button>
+					<button type="button" on:click={showAll} id="showAllBtn"
+						>{$_('section.settings.showAll')}</button
+					>
 					|
-					<button type="button" on:click={hideAll}>{$_('section.settings.hideAll')}</button>
+					<button type="button" on:click={hideAll} id="hideAllBtn"
+						>{$_('section.settings.hideAll')}</button
+					>
 				</small>
 			</div>
 			<CardTitle>{$_('section.settings.title')}</CardTitle>

src/routes/Status.svelte

@@ -97,6 +97,16 @@
 		}
 	};
 
+	const toggleDoNotDisturb = (currentStatus: boolean) => (e: Event) => {
+		e.preventDefault();
+		console.log(currentStatus);
+		if (!currentStatus) {
+			fetch(`${PUBLIC_BASE_URL}/api/dnd/enable`);
+		} else {
+			fetch(`${PUBLIC_BASE_URL}/api/dnd/disable`);
+		}
+	};
+
 	export let xs = 12;
 	export let sm = xs;
 	export let md = sm;
@@ -142,7 +152,7 @@
 							{/each}
 						</ButtonGroup>
 					</div>
-					{#if $settings.actCurrencies && $settings.ownDataSource}
+					{#if $settings.actCurrencies && ($settings.dataSource == DataSourceType.BTCLOCK_SOURCE || $settings.dataSource == DataSourceType.CUSTOM_SOURCE)}
 						<div class="d-flex justify-content-center d-sm-flex mt-2">
 							<ButtonGroup size="sm">
 								{#each $settings.actCurrencies as c}
@@ -158,7 +168,7 @@
 					<hr />
 					{#if $status.data}
 						<section class={lightMode ? 'lightMode' : 'darkMode'} style="position: relative;">
-							{#if $status.isUpdating === false}
+							{#if $status.isUpdating === false && ($status.isFake ?? false) === false}
 								<div class="connection-lost-overlay">
 									<div class="overlay-content">
 										<i class="bi bi-wifi-off"></i>
@@ -185,7 +195,27 @@
 							>{#if $status.timerRunning}&#9205; {$_('timer.running')}{:else}&#9208; {$_(
 									'timer.stopped'
 								)}{/if}</a
+						><br />
+
+						{$_('section.status.doNotDisturb')}:
+						<a
+							id="dndStatusText"
+							href={'#'}
+							style="cursor: pointer"
+							tabindex="0"
+							role="button"
+							aria-pressed="false"
+							on:click={toggleDoNotDisturb($status.dnd?.enabled)}
 						>
+							{#if $status.dnd?.active}&#9205; {$_('on')}{:else}&#9208; {$_('off')}{/if}</a
+						>
+						<small>
+							{#if $status.dnd?.timeBasedEnabled}
+								{$_('section.status.timeBasedDnd')} ( {$settings.dnd
+									.startHour}:{$settings.dnd.startMinute.toString().padStart(2, '0')} - {$settings
+									.dnd.endHour}:{$settings.dnd.endMinute.toString().padStart(2, '0')} )
+							{/if}
+						</small>
 					{/if}
 				{/if}
 				<hr />

tests/doc-screenshots/viewport-screenshots.spec.ts

@@ -0,0 +1,70 @@
+import { test, expect } from '@playwright/test';
+
+import { initMock, settingsJson, statusJson } from '../shared';
+import sharp from 'sharp';
+
+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;
+
+	statusJson.isUpdating = true;
+	// Set the color scheme
+	if (testInfo.project.use?.colorScheme === 'dark') {
+		settingsJson.invertedColor = true;
+	} else {
+		settingsJson.invertedColor = false;
+	}
+
+	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({
+		fullPage: true
+	});
+
+	await sharp(screenshot)
+		.toFormat('webp', {
+			quality: 95,
+			nearLossless: true
+		})
+		.toFile(
+			`./doc/screenshot-${test.info().project.use.colorScheme?.toLowerCase().replace(' ', '_')}.webp`
+		);
+});

tests/playwright/test.ts

@@ -132,7 +132,7 @@ test('screens should be able to change', async ({ page }) => {
 
 	await page.getByRole('button', { name: 'Sats per Dollar' }).click();
 	const response = await responsePromise;
-	expect(response.url()).toContain('api/show/screen/1');
+	expect(response.url()).toContain('api/show/screen/10');
 });
 
 test('parse all types of EPD content correctly', async ({ page }) => {

tests/shared.ts

@@ -1,33 +1,81 @@
+interface Page {
+	route: (url: string, handler: (route: Route) => Promise<void>) => Promise<void>;
+}
+
+interface Route {
+	fulfill: (response: {
+		json?: typeof statusJson | typeof settingsJson | typeof latestReleaseFake;
+		status?: number;
+		headers?: Record<string, string>;
+		body?: ReadableStream;
+	}) => Promise<void>;
+}
+
+export const fetchLatestBlockHeight = async () => {
+	const response = await fetch('https://ws.btclock.dev/api/lastblock');
+	const blockHeight = await response.text();
+	return ['BLOCK/HEIGHT', ...blockHeight.trim().split('')];
+};
+
+export const fetchLatestRelease = async () => {
+	try {
+		const response = await fetch(
+			'https://git.btclock.dev/api/v1/repos/btclock/btclock_v3/releases/latest'
+		);
+		if (!response.ok) throw new Error('Failed to fetch latest release');
+		const data = await response.json();
+		settingsJson.gitTag = data.tag_name;
+		return data;
+	} catch (error) {
+		console.warn('Failed to fetch latest release, using fallback:', error);
+		settingsJson.gitTag = latestReleaseFake.tag_name;
+		return latestReleaseFake;
+	}
+};
+
 export const statusJson = {
-	currentScreen: 0,
+	currentScreen: 20,
 	numScreens: 7,
 	timerRunning: true,
+	isOTAUpdating: false,
 	espUptime: 4479,
 	espFreeHeap: 58508,
 	espHeapSize: 342108,
-	connectionStatus: { price: true, blocks: true },
+	connectionStatus: {
+		price: false,
+		blocks: false,
+		V2: true,
+		nostr: true
+	},
 	rssi: -66,
-	data: ['BLOCK/HEIGHT', '8', '1', '8', '0', '2', '6'],
-	rendered: ['BLOCK/HEIGHT', '8', '1', '8', '0', '2', '6'],
+	data: ['BLOCK/HEIGHT', '0', '0', '0', '0', '0', '0'],
+	currency: 'USD',
 	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' }
-	]
+	],
+	isUpdating: true,
+	isFake: true,
+	dnd: {
+		enabled: true,
+		timeBasedEnabled: true,
+		startTime: '23:00',
+		endTime: '7:00',
+		active: true
+	}
 };
 
 export const settingsJson = {
 	numScreens: 7,
-	fgColor: 415029,
-	bgColor: 0,
 	timerSeconds: 1800,
 	timerRunning: true,
 	minSecPriceUpd: 30,
 	fullRefreshMin: 60,
 	wpTimeout: 600,
 	tzOffset: 0,
-	useBitcoinNode: false,
+	dataSource: 0,
 	mempoolInstance: 'mempool.space',
 	ledTestOnPower: true,
 	ledFlashOnUpd: true,
@@ -42,7 +90,7 @@ export const settingsJson = {
 	ip: '192.168.20.231',
 	txPower: 78,
 	gitRev: '25d8b92bcbc8938417c140355ea3ba99ff9eb4b7',
-	gitTag: '3.1.9',
+	gitTag: '3.2.27',
 	bitaxeEnabled: false,
 	bitaxeHostname: 'bitaxe1',
 	miningPoolStats: false,
@@ -50,9 +98,9 @@ export const settingsJson = {
 	miningPoolUser: '38Qkkei3SuF1Eo45BaYmRHUneRD54yyTFy',
 	nostrZapNotify: true,
 	hwRev: 'REV_A_EPD_2_13',
-	fsRev: '4c5d9616212b27e3f05c35370f0befcf2c5a04b2',
+	fsRev: '64e518bf58f89749753167a8b6826e10bb6455c5',
 	nostrZapPubkey: 'b5127a08cf33616274800a4387881a9f98e04b9c37116e92de5250498635c422',
-	lastBuildTime: '1700666677',
+	lastBuildTime: Math.round(new Date().getTime() / 1000),
 	screens: [
 		{
 			id: 0,
@@ -62,17 +110,17 @@ export const settingsJson = {
 		{
 			id: 3,
 			name: 'Time',
-			enabled: true
+			enabled: false
 		},
 		{
 			id: 4,
 			name: 'Halving countdown',
-			enabled: true
+			enabled: false
 		},
 		{
 			id: 6,
 			name: 'Block Fee Rate',
-			enabled: true
+			enabled: false
 		},
 		{
 			id: 10,
@@ -87,32 +135,79 @@ export const settingsJson = {
 		{
 			id: 30,
 			name: 'Market Cap',
-			enabled: true
+			enabled: false
 		}
 	],
 	actCurrencies: ['USD', 'EUR'],
-	availableCurrencies: ['USD', 'EUR', 'GBP', 'JPY', 'AUD', 'CAD']
+	availableCurrencies: ['USD', 'EUR', 'GBP', 'JPY', 'AUD', 'CAD'],
+	availablePools: [
+		'ocean',
+		'noderunners',
+		'satoshi_radio',
+		'braiins',
+		'public_pool',
+		'gobrrr_pool',
+		'ckpool',
+		'eu_ckpool'
+	],
+	dnd: {
+		enabled: false,
+		timeBasedEnabled: true,
+		startHour: 23,
+		startMinute: 0,
+		endHour: 7,
+		endMinute: 0
+	},
+	availableFonts: ['antonio', 'oswald'],
+	invertedColor: false,
+	isLoaded: true,
+	isFake: true
 };
 
-export const initMock = async ({ page }) => {
+export const latestReleaseFake = {
+	id: 782,
+	tag_name: '3.2.24',
+	target_commitish: '',
+	name: '3.2.24',
+	body: '',
+	url: 'https://git.btclock.dev/api/v1/repos/btclock/btclock_v3/releases/782',
+	html_url: 'https://git.btclock.dev/btclock/btclock_v3/releases/tag/3.2.24',
+	tarball_url: 'https://git.btclock.dev/btclock/btclock_v3/archive/3.2.24.tar.gz',
+	zipball_url: 'https://git.btclock.dev/btclock/btclock_v3/archive/3.2.24.zip',
+	hide_archive_links: false,
+	upload_url: 'https://git.btclock.dev/api/v1/repos/btclock/btclock_v3/releases/782/assets',
+	draft: false,
+	prerelease: false,
+	created_at: '2024-12-28T17:48:05Z',
+	published_at: '2024-12-28T17:48:05Z',
+	author: {},
+	assets: [],
+	archive_download_count: {
+		zip: 0,
+		tar_gz: 0
+	}
+};
+
+export const initMock = async ({ page }: { page: Page }) => {
+	// Update status with latest block height
+	statusJson.data = await fetchLatestBlockHeight();
+	const latestRelease = await fetchLatestRelease();
+
 	await page.route('*/**/api/status', async (route) => {
 		await route.fulfill({ json: statusJson });
 	});
 
-	await page.route('*/**/api/show/screen/1', async (route) => {
+	await page.route('*/**/api/show/screen/10', 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) => {
+	await page.route('*/**/api/show/screen/20', async (route) => {
 		statusJson.currentScreen = 2;
 		statusJson.data = ['BTC/USD', '$', '3', '7', '8', '2', '4'];
-		statusJson.rendered = statusJson.data;
 
 		await route.fulfill({ json: statusJson });
 	});
@@ -120,7 +215,6 @@ export const initMock = async ({ page }) => {
 	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 });
 	});
@@ -129,15 +223,35 @@ export const initMock = async ({ page }) => {
 		await route.fulfill({ json: settingsJson });
 	});
 
-	await page.route('**/events', (route) => {
+	await page.route('**/events', async (route) => {
 		const newStatus = statusJson;
 		newStatus.data = ['BLOCK/HEIGHT', '8', '0', '0', '8', '1', '5'];
+		newStatus.isUpdating = true;
 
-		// Respond with a custom SSE message
-		route.fulfill({
+		// Format the SSE message correctly
+		const sseMessage = `data: ${JSON.stringify(newStatus)}\n\n`;
+
+		// Create a readable stream for SSE
+		const stream = new ReadableStream({
+			start(controller) {
+				controller.enqueue(new TextEncoder().encode(sseMessage));
+				// Keep the connection open
+				// controller.close(); // Don't close if you want to send more events
+			}
+		});
+
+		await route.fulfill({
 			status: 200,
-			contentType: 'text/event-stream',
-			json: `${JSON.stringify(newStatus)}\n\n`
+			headers: {
+				'Content-Type': 'text/event-stream',
+				'Cache-Control': 'no-cache',
+				Connection: 'keep-alive'
+			},
+			body: stream
 		});
 	});
+
+	await page.route('**/api/v1/repos/btclock/btclock_v3/releases/latest', async (route) => {
+		await route.fulfill({ json: latestRelease });
+	});
 };

vite.config.test.ts

@@ -0,0 +1,18 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [sveltekit()],
+	build: {
+		sourcemap: true,
+		minify: false,
+		rollupOptions: {
+			output: {
+				manualChunks: undefined // Disable code splitting
+			}
+		}
+	},
+	test: {
+		include: ['tests/**/*.{test,spec}.{js,ts}']
+	}
+});