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

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({
-				category: '{{ .Params.category }}',
-				from: '{{ .Params.from }}',
-				to: '{{ .Params.to }}'
-			})"
-			x-init="init()">
+		x-data="navActions()">
 
 		<h1 id="headline"
 			class="text-2xl font-bold mb-6 text-center">
@@ -32,10 +28,9 @@
 
 		<div>
 
-			{{ $action := .RelPermalink }}
-			<a x-ref="navLink"
-				:href="actionUrl"
+			<a x-ref="ajaxLink"
 				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="$nextTick(() =>
-							$refs.navLink.click())"
+						@change="navigateWithValue($event.target.value)"
 						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="$nextTick(() =>
-							$refs.navLink.click())"
+						@change="navigateWithValue($event.target.value)"
 						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 src="/js/converter.js"></script>
+	<script defer src="/js/decimal.js-light.min.js"></script>
+	<script defer src="/js/converter.js"></script>
 {{ end }}