cc-backend/web/frontend/src/generic/filters/Energy.svelte

<!--
    @component Filter sub-component for selecting job energies

    Properties:
    - `isOpen Bool?`: Is this filter component opened [Default: false]
    - `energy Object?`: The currently selected total energy filter [Default: {from:null, to:null}]

    Events:
    - `set-filter, {Object}`: Set 'energy' filter in upstream component
 -->

<script>
  import {
    Button,
    Modal,
    ModalBody,
    ModalHeader,
    ModalFooter,
  } from "@sveltestrap/sveltestrap";
  import DoubleRangeSlider from "../select/DoubleRangeSlider.svelte";

  /* Svelte 5 Props */
  let {
    isOpen = $bindable(false),
    presetEnergy= {from: null, to: null},
    setFilter,
  } = $props();

  /* State Init */
  let energyState = $state(presetEnergy);

</script>

<Modal {isOpen} toggle={() => (isOpen = !isOpen)}>
  <ModalHeader>Filter based on energy</ModalHeader>
  <ModalBody>
    <div class="mb-3">
      <div class="mb-0"><b>Total Job Energy (kWh)</b></div>
      <DoubleRangeSlider
        changeRange={(detail) => {
          energyState.from = detail[0];
          energyState.to = detail[1];
        }}
        sliderMin={0.0}
        sliderMax={1000.0}
        fromPreset={energyState?.from? energyState.from : 0.0}
        toPreset={energyState?.to? energyState.to : 1000.0}
      />
    </div>
  </ModalBody>
  <ModalFooter>
    <Button
      color="primary"
      onclick={() => {
        isOpen = false;
        setFilter({ energy: energyState });
      }}>Close & Apply</Button
    >
    <Button
      color="danger"
      onclick={() => {
        isOpen = false;
        energyState = {from: null, to: null};
        setFilter({ energy: energyState });
      }}>Reset</Button
    >
    <Button onclick={() => (isOpen = false)}>Close</Button>
  </ModalFooter>
</Modal>