<script lang="ts">
    import { onMount } from "svelte";
    import Event from "./Event.svelte";

    const ENDPOINT = "/api/events";

    let events: { _id: string; timestamp: string; value: any }[] = [];

    onMount(() => {
        let int = setInterval(async () => {
            let r = await fetch(ENDPOINT);
            events = await r.json();
        }, 200);

        return () => {
            clearInterval(int);
        };
    });
</script>

<div class="events">
    {#each events as event (event._id)}
        <Event {...event} />
    {/each}
</div>

<style lang="scss">
    .events {
        display: flex;
        justify-content: center;
        flex-direction: column;
        width: 100%;
    }
</style>
