jazzman/umrechner
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Stefan Mühlinghaus
2026-05-28 22:48:57 +02:00
parent e16e9e36fd
commit b92168399f
5 changed files with 60 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docker-compose.yml
View File

@@ -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}

1
hugo/layouts/_default/baseof.html
View File

@@ -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>

45
hugo/layouts/conversion/single.html
View File

@@ -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 }}

20
hugo/layouts/partials/units-data.html
View File

@@ -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>

97
hugo/static/js/converter.js
View File

@@ -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 ||
'https://www.alphabreed.com';
const pbUrl = document.querySelector(
'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, '.');
if (normalizedInputValue && normalizedInputValue !== '0') {
const normalizedInputValue = this.inputValue
.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