You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
86 lines
2.4 KiB
86 lines
2.4 KiB
<script lang="ts">
|
|
import {
|
|
Dropdown,
|
|
DropdownMenu,
|
|
DropdownItem,
|
|
DropdownToggle,
|
|
Form,
|
|
FormGroup,
|
|
InputGroup,
|
|
InputGroupAddon,
|
|
InputGroupText,
|
|
Label,
|
|
Input,
|
|
} from "sveltestrap";
|
|
import DatetimePicker from "./DatetimePicker.svelte";
|
|
|
|
let menuItem = [
|
|
{ label: "Domain Name", key: "domain" },
|
|
{ label: "Client IP", key: "clientIp" },
|
|
{ label: "Protocol", key: "protocol" },
|
|
{ label: "Status", key: "status" },
|
|
];
|
|
|
|
let selected = menuItem[0];
|
|
const selectItem = (selectedItem) => {
|
|
selected = selectedItem;
|
|
handleOnChange();
|
|
};
|
|
|
|
let searchFilter = "";
|
|
let startDate = new Date();
|
|
let endDate = new Date();
|
|
|
|
const handleOnChange = () => {
|
|
if (onChange) {
|
|
const event = {
|
|
terms: searchFilter,
|
|
start: startDate,
|
|
end: endDate,
|
|
key: selected.key,
|
|
};
|
|
|
|
onChange(event);
|
|
}
|
|
};
|
|
|
|
export let onChange = (evt) =>
|
|
console.log("no handler bound to SearchOptions.svelte: ", evt);
|
|
</script>
|
|
|
|
<div class="w-full flex flex-row">
|
|
<section class="w-full flex flex-row">
|
|
<FormGroup class="flex-grow flex flex-row mx-2">
|
|
<InputGroup>
|
|
<InputGroupAddon addonType="prepend">
|
|
<InputGroupText>Search</InputGroupText>
|
|
</InputGroupAddon>
|
|
<Input
|
|
id="search"
|
|
type="search"
|
|
on:change={handleOnChange}
|
|
bind:value={searchFilter}
|
|
/>
|
|
</InputGroup>
|
|
</FormGroup>
|
|
<FormGroup class="flex flex-row">
|
|
<DatetimePicker label="Start" />
|
|
<DatetimePicker label="End" />
|
|
</FormGroup>
|
|
<FormGroup class="mx-2">
|
|
<Dropdown>
|
|
<DropdownToggle caret>By {selected.label}</DropdownToggle>
|
|
<DropdownMenu>
|
|
{#each menuItem as item}
|
|
<DropdownItem active={selected.key === item.key}>
|
|
<span on:click={() => selectItem(item)}>
|
|
{item.label}
|
|
</span>
|
|
</DropdownItem>
|
|
{/each}
|
|
</DropdownMenu>
|
|
</Dropdown>
|
|
</FormGroup>
|
|
</section>
|
|
</div>
|