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.
84 lines
2.6 KiB
84 lines
2.6 KiB
<script lang="ts">
|
|
import sub from "date-fns/sub";
|
|
|
|
import {
|
|
Dropdown,
|
|
DropdownMenu,
|
|
DropdownItem,
|
|
DropdownToggle,
|
|
FormGroup,
|
|
InputGroup,
|
|
InputGroupAddon,
|
|
InputGroupText,
|
|
Input,
|
|
} from "sveltestrap";
|
|
import { StatSearchKey } from "../api";
|
|
import DatetimePicker from "./DatetimePicker.svelte";
|
|
|
|
export let start: Date = sub(new Date(), { hours: 24 });
|
|
export let end: Date = new Date();
|
|
export let key: StatSearchKey = StatSearchKey.Domain;
|
|
export let filter: string = "";
|
|
|
|
$: rawFilter = filter;
|
|
|
|
let menuItem = [
|
|
{ label: "Domain Name", key: StatSearchKey.Domain },
|
|
{ label: "Client IP", key: StatSearchKey.ClientIp },
|
|
{ label: "Protocol", key: StatSearchKey.Protocol },
|
|
{ label: "Status", key: StatSearchKey.Status },
|
|
];
|
|
|
|
$: selected = !!key ? menuItem.find((v) => v.key === key) : menuItem[0];
|
|
|
|
const selectItem = (selectedItem) => (key = selectedItem.key);
|
|
|
|
const onFilterChanged = ({ target: { value } }) => {
|
|
console.log(value);
|
|
filter = value;
|
|
};
|
|
</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={onFilterChanged} />
|
|
</InputGroup>
|
|
</FormGroup>
|
|
<FormGroup class="flex flex-row">
|
|
<section class="px-1">
|
|
<DatetimePicker
|
|
label="Start"
|
|
defaultValue={start}
|
|
bind:value={start}
|
|
/>
|
|
</section>
|
|
<section class="px-1">
|
|
<DatetimePicker
|
|
label="End"
|
|
defaultValue={end}
|
|
bind:value={end}
|
|
/>
|
|
</section>
|
|
</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>
|