Erstes Commit
This commit is contained in:
186
hugo/layouts/conversion/single.html
Normal file
186
hugo/layouts/conversion/single.html
Normal file
@@ -0,0 +1,186 @@
|
||||
{{ define "main" }}
|
||||
{{ $config := "" }}
|
||||
{{ if eq .Params.engine "linear" }}
|
||||
{{ $config = dict "fromFactor" .Params.from_factor
|
||||
"toFactor" .Params.to_factor | jsonify }}
|
||||
{{ else if eq .Params.engine "intermediate" }}
|
||||
{{ $config = dict "fromUnit" .Params.from_unit
|
||||
"toUnit" .Params.to_unit | jsonify }}
|
||||
{{ else if eq .Params.engine "runtime" }}
|
||||
{{ $config = dict "fromCurrency" .Params.from
|
||||
"toCurrency" .Params.to | jsonify }}
|
||||
{{ end }}
|
||||
|
||||
{{ $catData := index hugo.Data .Params.category }}
|
||||
{{ $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()">
|
||||
|
||||
<h1 id="headline"
|
||||
class="text-2xl font-bold mb-6 text-center">
|
||||
{{ .Params.from_name }} in {{ .Params.to_name }}
|
||||
umrechnen
|
||||
</h1>
|
||||
|
||||
<div>
|
||||
|
||||
{{ $action := .RelPermalink }}
|
||||
<a x-ref="navLink"
|
||||
:href="actionUrl"
|
||||
x-target.push="maincontent"
|
||||
class="hidden"></a>
|
||||
|
||||
<div>
|
||||
<label for="type"
|
||||
class="block text-sm font-medium opacity-75">
|
||||
Einheitentyp:
|
||||
</label>
|
||||
<select id="type" name="type"
|
||||
x-model="category"
|
||||
class="select mt-1 block w-full">
|
||||
{{ range $slug, $data := hugo.Data }}
|
||||
{{ if and $data.slug $data.name }}
|
||||
<option
|
||||
value="{{ $data.slug }}"
|
||||
{{ if eq $data.slug
|
||||
$.Params.category }}selected{{ end }}>
|
||||
{{ $data.name }}
|
||||
</option>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col sm:flex-row items-center gap-4
|
||||
mt-4">
|
||||
|
||||
<div class="flex-1 w-full">
|
||||
<label for="from"
|
||||
class="block text-sm font-medium opacity-75">
|
||||
Umrechnen von:
|
||||
</label>
|
||||
<select id="from" name="from"
|
||||
x-model="from"
|
||||
@change="$nextTick(() =>
|
||||
$refs.navLink.click())"
|
||||
class="select mt-1 block w-full">
|
||||
{{ range $unit, $unitData := $availableUnits }}
|
||||
{{ if ne $unit $.Params.to }}
|
||||
<option
|
||||
value="{{ $unit }}"
|
||||
{{ if eq $unit
|
||||
$.Params.from }}selected{{ end }}>
|
||||
{{ $unitData.name }}
|
||||
</option>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="text-center sm:pt-6">
|
||||
<button type="button"
|
||||
@click="swapWithResult()"
|
||||
class="inline-flex items-center text-sm
|
||||
font-medium text-primary
|
||||
dark:text-primary-light">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none" viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="w-6 h-6">
|
||||
<path stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M7.5 21 3 16.5m0 0L7.5 12M3
|
||||
16.5h13.5m0-13.5L21 7.5m0
|
||||
0L16.5 12M21 7.5H7.5" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 w-full">
|
||||
<label for="to"
|
||||
class="block text-sm font-medium opacity-75">
|
||||
Umrechnen in:
|
||||
</label>
|
||||
<select id="to" name="to"
|
||||
x-model="to"
|
||||
@change="$nextTick(() =>
|
||||
$refs.navLink.click())"
|
||||
class="select mt-1 block w-full">
|
||||
{{ range $unit, $unitData := $availableUnits }}
|
||||
{{ if ne $unit $.Params.from }}
|
||||
<option
|
||||
value="{{ $unit }}"
|
||||
{{ if eq $unit
|
||||
$.Params.to }}selected{{ end }}>
|
||||
{{ $unitData.name }}
|
||||
</option>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div x-data="createConverter('{{ .Params.engine }}',
|
||||
{{ $config | safeJS }})"
|
||||
x-init="init()">
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-4 mt-4">
|
||||
<div class="flex-1">
|
||||
<label for="value"
|
||||
class="block text-sm font-medium
|
||||
opacity-75">
|
||||
Wert in {{ .Params.from_name }}:
|
||||
</label>
|
||||
<input type="text" id="value"
|
||||
inputmode="decimal"
|
||||
x-model="inputValue"
|
||||
@input="calculate()"
|
||||
class="textinput mt-1 block w-full"
|
||||
placeholder="Wert eingeben">
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<label for="result"
|
||||
class="block text-sm font-medium
|
||||
opacity-75">
|
||||
Ergebnis in {{ .Params.to_name }}:
|
||||
</label>
|
||||
<input type="text" id="result"
|
||||
disabled
|
||||
:value="result"
|
||||
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"
|
||||
x-text="ratesError"></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="formula" class="mt-4">
|
||||
{{ partial "conversion-formula.html" . }}
|
||||
</div>
|
||||
<div id="info">
|
||||
{{ partial "conversion-seo-texts.html" . }}
|
||||
</div>
|
||||
|
||||
{{ end }}
|
||||
|
||||
{{ define "headscripts" }}
|
||||
<script src="/js/decimal.js-light.min.js"></script>
|
||||
<script src="/js/converter.js"></script>
|
||||
{{ end }}
|
||||
Reference in New Issue
Block a user