<script> import { createEventDispatcher } from "svelte"; const dispatch = createEventDispatcher(); export let name = ""; export let duration = ""; export let dependsOnNames = []; export let bufferDuration = NaN; export let earliestStartTime = NaN; export let earliestEndTime = NaN; export let latestStartTime = NaN; export let latestEndTime = NaN; let rawDependsOnNames = dependsOnNames.join(", "); $: dependsOnNames = rawDependsOnNames .split(",") .map((val) => val.trim()) .filter((val) => val.length !== 0); function handleRemove() { dispatch("remove", name); } </script> <tr> <td class="tg-0lax"> <input bind:value={name} /> </td> <td class="tg-0lax"> <input type="number" bind:value={duration} /> </td> <td class="tg-0lax"> <input bind:value={rawDependsOnNames} /> </td> <td class="tg-0lax">{earliestStartTime}</td> <td class="tg-0lax">{latestStartTime}</td> <td class="tg-0lax" class:redText={bufferDuration === 0}>{bufferDuration}</td> <td class="tg-0lax">{earliestEndTime}</td> <td class="tg-0lax">{latestEndTime}</td> <td class="tg-0lax"><button on:click={handleRemove}>x</button></td> </tr> <style> td.redText { color: red; } </style>