forked from enviPath/enviPy
[Feature] Adds timeseries display (#313)
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>
This commit is contained in:
234
templates/components/widgets/timeseries_table_widget.html
Normal file
234
templates/components/widgets/timeseries_table_widget.html
Normal file
@ -0,0 +1,234 @@
|
||||
{# TimeSeries table widget for measurement data #}
|
||||
<div class="form-control">
|
||||
<div class="flex flex-col gap-2">
|
||||
<!-- Label -->
|
||||
<label class="label">
|
||||
<span
|
||||
class="label-text"
|
||||
:class="{
|
||||
'text-error': $store.validationErrors.hasError(fieldName, context),
|
||||
'text-sm text-base-content/60': isViewMode
|
||||
}"
|
||||
x-text="label"
|
||||
></span>
|
||||
</label>
|
||||
|
||||
<!-- Help text -->
|
||||
<template x-if="helpText">
|
||||
<div class="label">
|
||||
<span
|
||||
class="label-text-alt text-base-content/60"
|
||||
x-text="helpText"
|
||||
></span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Form-level validation errors (root errors) for timeseries -->
|
||||
<template x-if="$store.validationErrors.hasError('root', context)">
|
||||
<div class="text-error">
|
||||
<template
|
||||
x-for="errMsg in $store.validationErrors.getErrors('root', context)"
|
||||
:key="errMsg"
|
||||
>
|
||||
<span x-text="errMsg"></span>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- View mode: display measurements as chart -->
|
||||
<template x-if="isViewMode">
|
||||
<div class="space-y-4">
|
||||
<!-- Chart container -->
|
||||
<template x-if="measurements.length > 0">
|
||||
<div class="w-full">
|
||||
<div class="h-64 w-full">
|
||||
<canvas x-ref="chartCanvas"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template x-if="measurements.length === 0">
|
||||
<div class="text-base-content/60 text-sm italic">No measurements</div>
|
||||
</template>
|
||||
|
||||
<!-- Description and Method metadata -->
|
||||
<template x-if="description || method">
|
||||
<div class="space-y-2 text-sm">
|
||||
<template x-if="description">
|
||||
<div>
|
||||
<span class="text-base-content/80 font-semibold"
|
||||
>Description:</span
|
||||
>
|
||||
<p
|
||||
class="text-base-content/70 mt-1 whitespace-pre-wrap"
|
||||
x-text="description"
|
||||
></p>
|
||||
</div>
|
||||
</template>
|
||||
<template x-if="method">
|
||||
<div>
|
||||
<span class="text-base-content/80 font-semibold">Method:</span>
|
||||
<span class="text-base-content/70 ml-2" x-text="method"></span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Edit mode: editable table with add/remove controls -->
|
||||
<template x-if="isEditMode">
|
||||
<div class="space-y-2">
|
||||
<!-- Measurements table -->
|
||||
<div class="overflow-x-auto">
|
||||
<template x-if="measurements.length > 0">
|
||||
<table class="table-zebra table-sm table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Timestamp</th>
|
||||
<th>Value</th>
|
||||
<th>Error</th>
|
||||
<th>Note</th>
|
||||
<th class="w-12"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<template
|
||||
x-for="(measurement, index) in measurements"
|
||||
:key="index"
|
||||
>
|
||||
<tr>
|
||||
<td>
|
||||
<input
|
||||
type="number"
|
||||
class="input input-bordered input-sm w-full"
|
||||
:class="{ 'input-error': $store.validationErrors.hasError(fieldName, context) }"
|
||||
:value="formatTimestamp(measurement.timestamp)"
|
||||
@input="updateMeasurement(index, 'timestamp', $event.target.value)"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
type="number"
|
||||
class="input input-bordered input-sm w-full"
|
||||
:class="{ 'input-error': $store.validationErrors.hasError(fieldName, context) }"
|
||||
placeholder="Value"
|
||||
:value="measurement.value"
|
||||
@input="updateMeasurement(index, 'value', $event.target.value)"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
type="number"
|
||||
class="input input-bordered input-sm w-full"
|
||||
placeholder="±"
|
||||
:value="measurement.error"
|
||||
@input="updateMeasurement(index, 'error', $event.target.value)"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
type="text"
|
||||
class="input input-bordered input-sm w-full"
|
||||
placeholder="Note"
|
||||
:value="measurement.note"
|
||||
@input="updateMeasurement(index, 'note', $event.target.value)"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-ghost btn-sm btn-circle"
|
||||
@click="removeMeasurement(index)"
|
||||
title="Remove measurement"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-4 w-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</template>
|
||||
<template x-if="measurements.length === 0">
|
||||
<div class="text-base-content/60 py-2 text-sm italic">
|
||||
No measurements yet. Click "Add Measurement" to start.
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Action buttons -->
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-primary"
|
||||
@click="addMeasurement()"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-4 w-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 4v16m8-8H4"
|
||||
/>
|
||||
</svg>
|
||||
Add Measurement
|
||||
</button>
|
||||
<template x-if="measurements.length > 1">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-ghost"
|
||||
@click="sortByTimestamp()"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-4 w-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"
|
||||
/>
|
||||
</svg>
|
||||
Sort by Timestamp
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Errors -->
|
||||
<template x-if="$store.validationErrors.hasError(fieldName, context)">
|
||||
<div class="label">
|
||||
<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>
|
||||
Reference in New Issue
Block a user