Copy

<script setup lang="ts">
import { formatDateForInput } from "utils/formatting";
import { icons } from "utils/icons";
import SyncButton from "./SyncButton.vue";

const props = defineProps<{
  timeStart: string;
  timeEnd: string;
  syncWithChart?: boolean;
  showSync?: boolean;
}>();

const emit = defineEmits<{
  (e: "update:timeStart", value: string): void;
  (e: "update:timeEnd", value: string): void;
  (e: "update:syncWithChart", value: boolean): void;
  (e: "change"): void;
}>();

function onTimeStartChange(e: Event) {
  emit("update:timeStart", (e.target as HTMLInputElement).value);
  emit("change");
}

function onTimeEndChange(e: Event) {
  emit("update:timeEnd", (e.target as HTMLInputElement).value);
  emit("change");
}
</script>

<template>
  <div class="flex flex-wrap items-center gap-2">
    <span class="filter-label">
      <component :is="icons.time" size="16" />
      Time Range:
    </span>
    <input
      type="datetime-local"
      :value="formatDateForInput(props.timeStart)"
      @change="onTimeStartChange"
    />
    <input
      type="datetime-local"
      :value="formatDateForInput(props.timeEnd)"
      @change="onTimeEndChange"
    />
    <SyncButton
      v-if="showSync"
      @click="emit('update:syncWithChart', !syncWithChart)"
      :sync-with-chart="syncWithChart"
    />
  </div>
</template>