Nicht mehr alle Umrechungsdaten in jeder Seite. Hoffentlich auch Fix für Ladereihenfolge der JS Dateien.

docker-compose.yml

@@ -1,7 +1,7 @@
 services:
   web:
     build: .
-    image: umrechner:v1.0.0
+    image: umrechner:v1.0.1
     restart: unless-stopped
     environment:
       - POCKETBASE_URL={$POCKETBASE_URL}

hugo/layouts/_default/baseof.html

@@ -15,7 +15,6 @@
 	<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
 	<link rel="manifest" href="/icons/site.webmanifest">
 	<link href="/css/main.min.css" rel="stylesheet">
-	{{ partial "units-data.html" . }}
 	{{ block "headscripts" . }}{{ end }}
 	<script defer src="/js/alpine-ajax-0.12.2.min.js"></script>
 	<script defer src="/js/alpine-3.14.9.min.js"></script>

hugo/layouts/conversion/single.html

@@ -12,17 +12,13 @@
 	{{ end }}
 
 	{{ $catData := index hugo.Data .Params.category }}
-	{{ $availableUnits := partial "available-units.html" (dict "category" .Params.category "units" $catData.units) }}
+	{{ $availableUnits := partial "available-units.html"
+		(dict "category" .Params.category "units" $catData.units) }}
 
 	<div id="conversionform"
 		class="bg-white p-8 rounded-lg shadow-md w-full
 			dark:bg-gray-700 dark:text-grey-200"
-		x-data="conversionForm({
+		x-data="navActions()">
-				category: '{{ .Params.category }}',
-				from: '{{ .Params.from }}',
-				to: '{{ .Params.to }}'
-			})"
-			x-init="init()">
 
 		<h1 id="headline"
 			class="text-2xl font-bold mb-6 text-center">
@@ -32,10 +28,9 @@
 
 		<div>
 
-			{{ $action := .RelPermalink }}
+			<a x-ref="ajaxLink"
-			<a x-ref="navLink"
-				:href="actionUrl"
 				x-target.push="maincontent"
+				href="/"
 				class="hidden"></a>
 
 			<div>
@@ -44,12 +39,15 @@
 					Einheitentyp:
 				</label>
 				<select id="type" name="type"
-					x-model="category"
+					@change="navigate($event.target.value)"
 					class="select mt-1 block w-full">
 				{{ range $slug, $data := hugo.Data }}
 				{{ if and $data.slug $data.name }}
+				{{ $catUrl := partial "category-url.html"
+					(dict "category" $data.slug
+						"units" $data.units) }}
 					<option
-						value="{{ $data.slug }}"
+						value="{{ $catUrl }}"
 						{{ if eq $data.slug
 							$.Params.category }}selected{{ end }}>
 						{{ $data.name }}
@@ -68,14 +66,12 @@
 						Umrechnen von:
 					</label>
 					<select id="from" name="from"
-						x-model="from"
+						@change="navigateWithValue($event.target.value)"
-						@change="$nextTick(() =>
-							$refs.navLink.click())"
 						class="select mt-1 block w-full">
 					{{ range $unit, $unitData := $availableUnits }}
 					{{ if ne $unit $.Params.to }}
 						<option
-							value="{{ $unit }}"
+							value="/{{ $unit }}-in-{{ $.Params.to }}/"
 							{{ if eq $unit
 								$.Params.from }}selected{{ end }}>
 							{{ $unitData.name }}
@@ -87,7 +83,9 @@
 
 				<div class="text-center sm:pt-6">
 					<button type="button"
-						@click="swapWithResult()"
+						@click="navigateWithResult(
+							$el.dataset.swapUrl)"
+						data-swap-url="/{{ .Params.to }}-in-{{ .Params.from }}/"
 						class="inline-flex items-center text-sm
 							font-medium text-primary
 							dark:text-primary-light">
@@ -111,14 +109,12 @@
 						Umrechnen in:
 					</label>
 					<select id="to" name="to"
-						x-model="to"
+						@change="navigateWithValue($event.target.value)"
-						@change="$nextTick(() =>
-							$refs.navLink.click())"
 						class="select mt-1 block w-full">
 					{{ range $unit, $unitData := $availableUnits }}
 					{{ if ne $unit $.Params.from }}
 						<option
-							value="{{ $unit }}"
+							value="/{{ $.Params.from }}-in-{{ $unit }}/"
 							{{ if eq $unit
 								$.Params.to }}selected{{ end }}>
 							{{ $unitData.name }}
@@ -162,7 +158,8 @@
 						class="textinput mt-1 block w-full">
 					<p x-show="ratesError"
 						x-cloak
-						class="text-sm text-red-600 mt-1 dark:text-red-400"
+						class="text-sm text-red-600 mt-1
+							dark:text-red-400"
 						x-text="ratesError"></p>
 				</div>
 			</div>
@@ -181,6 +178,6 @@
 {{ end }}
 
 {{ define "headscripts" }}
-	<script src="/js/decimal.js-light.min.js"></script>
+	<script defer src="/js/decimal.js-light.min.js"></script>
-	<script src="/js/converter.js"></script>
+	<script defer src="/js/converter.js"></script>
 {{ end }}

hugo/layouts/partials/units-data.html

@@ -1,20 +0,0 @@
-{{ $filteredData := dict }}
-{{ range $k, $v := hugo.Data }}
-	{{ $catData := $v }}
-	{{ if and (eq $v.slug "waehrungen") $v.units }}
-		{{ $units := partial "available-units.html"
-			(dict "category" "waehrungen" "units" $v.units) }}
-		{{ $catData = dict
-			"conversion_engine" $v.conversion_engine
-			"name" $v.name
-			"slug" $v.slug
-			"units" $units
-		}}
-	{{ end }}
-	{{ $filteredData = merge $filteredData (dict $k $catData) }}
-{{ end }}
-
-<script>
-// Globale Einheiten-Daten fuer Alpine.js Conversion-Formular
-const UNITS_DATA = {{ $filteredData | jsonify | safeJS }};
-</script>

hugo/static/js/converter.js

@@ -1,5 +1,34 @@
 'use strict';
 
+/**
+ * Alpine.js navigation helpers for conversion page.
+ * Handles navigation via hidden AJAX link.
+ */
+function navActions() {
+	return {
+		navigate(url) {
+			this.$refs.ajaxLink.href = url;
+			this.$nextTick(() => this.$refs.ajaxLink.click());
+		},
+		navigateWithValue(url) {
+			const el = document.getElementById('value');
+			const val = el ? el.value.replace(/,/g, '.') : '1';
+			this.$refs.ajaxLink.href = url + '?v=' + val;
+			this.$nextTick(() => this.$refs.ajaxLink.click());
+		},
+		navigateWithResult(url) {
+			const el = document.getElementById('result');
+			const val = el ? el.value.replace(/,/g, '.') : '';
+			if (val) {
+				this.$refs.ajaxLink.href = url + '?v=' + val;
+			} else {
+				this.$refs.ajaxLink.href = url;
+			}
+			this.$nextTick(() => this.$refs.ajaxLink.click());
+		}
+	};
+}
+
 /**
  * Factory function for Alpine.js converter components.
  * @param {string} engine - 'linear', 'intermediate' or 'runtime'
@@ -29,8 +58,9 @@ function createConverter(engine, config) {
 				this.calculate();
 			},
 			async loadRates() {
-				const pbUrl = document.querySelector('meta[name="pocketbase-url"]')?.content ||
+				const pbUrl = document.querySelector(
-					'https://www.alphabreed.com';
+					'meta[name="pocketbase-url"]')?.content
+					|| 'https://www.alphabreed.com';
 				try {
 					const response = await fetch(
 						`${pbUrl}/api/collections/currencies/records`);
@@ -77,7 +107,8 @@ function createConverter(engine, config) {
 					this.result = prettyNumber(rawResult);
 					const normalizedInputValue = this.inputValue
 						.replace(/,/g, '.');
-					if (normalizedInputValue && normalizedInputValue !== '0') {
+					if (normalizedInputValue
+						&& normalizedInputValue !== '0') {
 						history.replaceState(
 							null, '', '?v=' + normalizedInputValue);
 					}
@@ -133,8 +164,10 @@ function createConverter(engine, config) {
 					return;
 				}
 				this.result = prettyNumber(rawResult);
-				const normalizedInputValue = this.inputValue.replace(/,/g, '.');
+				const normalizedInputValue = this.inputValue
-				if (normalizedInputValue && normalizedInputValue !== '0') {
+					.replace(/,/g, '.');
+				if (normalizedInputValue
+					&& normalizedInputValue !== '0') {
 					history.replaceState(
 						null, '', '?v=' + normalizedInputValue);
 				}
@@ -145,60 +178,6 @@ function createConverter(engine, config) {
 	};
 }
 
-/**
- * Alpine.js component for the conversion form.
- * Handles category/from/to dropdowns and swap button.
- * @param {object} defaults - Initial values
- * @returns {object} Alpine component data
- */
-function conversionForm(defaults) {
-	return {
-		category: defaults.category,
-		from: defaults.from,
-		to: defaults.to,
-
-		get actionUrl() {
-			const search = window.location.search;
-			return '/' + this.from + '-in-' + this.to + '/'
-				+ (search || '');
-		},
-
-		swapWithResult() {
-			const resultEl = document.getElementById('result');
-			const resultVal = resultEl?.value || '';
-			if (resultVal) {
-				history.replaceState(
-					null, '', '?v=' + resultVal.replace(/,/g, '.'));
-			}
-			const temp = this.from;
-			this.from = this.to;
-			this.to = temp;
-			this.$nextTick(() => {
-				this.$refs.navLink.click();
-			});
-		},
-
-		onCategoryChange() {
-			const cat = UNITS_DATA[this.category];
-			if (!cat || !cat.units) return;
-			const units = Object.keys(cat.units);
-			this.from = units[0];
-			this.to = units[1] || units[0];
-			this.$nextTick(() => {
-				this.$refs.navLink.click();
-			});
-		},
-
-		init() {
-			this.$watch('category', (val, old) => {
-				if (val && old && val !== old) {
-					this.onCategoryChange();
-				}
-			});
-		}
-	};
-}
-
 /**
  * Temperature conversion via Celsius intermediate.
  * @param {Decimal} value