enviPy-bayer/templates/components/widgets/timeseries_table_widget.html

{# 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>