forked from enviPath/enviPy
Tobias O
dc18b73e08
Adds a way to input/display timeseries data to the additional information Reviewed-on: enviPath/enviPy#313 Reviewed-by: jebus <lorsbach@envipath.com> Co-authored-by: Tobias O <tobias.olenyi@envipath.com> Co-committed-by: Tobias O <tobias.olenyi@envipath.com>
90 lines
2.9 KiB
HTML
90 lines
2.9 KiB
HTML
{# Interval widget for range inputs - pure HTML template #}
|
|
<div class="form-control">
|
|
<div class="flex flex-col gap-2 sm:flex-row sm:items-baseline">
|
|
<!-- Label -->
|
|
<label class="label sm:w-48 sm:shrink-0">
|
|
<span
|
|
class="label-text"
|
|
:class="{
|
|
'text-error': hasValidationError || $store.validationErrors.hasError(fieldName, context),
|
|
'text-sm text-base-content/60': isViewMode
|
|
}"
|
|
x-text="label"
|
|
></span>
|
|
</label>
|
|
|
|
<!-- Input column -->
|
|
<div class="flex-1">
|
|
<!-- Help text -->
|
|
<template x-if="helpText">
|
|
<div class="label">
|
|
<span
|
|
class="label-text-alt text-base-content/60"
|
|
x-text="helpText"
|
|
></span>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- View mode: formatted range with unit -->
|
|
<template x-if="isViewMode">
|
|
<div class="mt-1">
|
|
<span class="text-base" x-text="start"></span>
|
|
<span class="text-base-content/60 text-xs" x-show="!isSameValue"
|
|
>to</span
|
|
>
|
|
<span class="text-base" x-text="end" x-show="!isSameValue"></span>
|
|
<template x-if="start && end && unit">
|
|
<span class="text-xs" x-text="unit"></span>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Edit mode: two inputs with shared unit badge -->
|
|
<template x-if="isEditMode">
|
|
<div class="flex items-center gap-2">
|
|
<input
|
|
type="number"
|
|
class="input input-bordered flex-1"
|
|
:class="{ 'input-error': hasValidationError || $store.validationErrors.hasError(fieldName, context) }"
|
|
placeholder="Min"
|
|
x-model="start"
|
|
/>
|
|
<span class="text-base-content/60">to</span>
|
|
<input
|
|
type="number"
|
|
class="input input-bordered flex-1"
|
|
:class="{ 'input-error': hasValidationError || $store.validationErrors.hasError(fieldName, context) }"
|
|
placeholder="Max"
|
|
x-model="end"
|
|
/>
|
|
<template x-if="unit">
|
|
<span class="badge badge-ghost badge-lg" x-text="unit"></span>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Errors -->
|
|
<template
|
|
x-if="hasValidationError || $store.validationErrors.hasError(fieldName, context)"
|
|
>
|
|
<div class="label">
|
|
<!-- Client-side validation error -->
|
|
<template x-if="hasValidationError">
|
|
<span class="label-text-alt text-error">
|
|
Start value must be less than or equal to end value
|
|
</span>
|
|
</template>
|
|
|
|
<!-- Server-side validation errors from store -->
|
|
<template
|
|
x-for="errMsg in $store.validationErrors.getErrors(fieldName, context)"
|
|
:key="errMsg"
|
|
>
|
|
<span class="label-text-alt text-error" x-text="errMsg"></span>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|