trigger editor
This commit is contained in:
@@ -0,0 +1,181 @@
|
||||
<script lang="ts">
|
||||
import { runCommand } from "$lib/client/lucifer";
|
||||
import HSplit from "$lib/components/HSplit.svelte";
|
||||
import HSplitPart from "$lib/components/HSplitPart.svelte";
|
||||
import Modal from "$lib/components/Modal.svelte";
|
||||
import ModalBody from "$lib/components/ModalBody.svelte";
|
||||
import ModalSection from "$lib/components/ModalSection.svelte";
|
||||
import ScriptLineBlock from "$lib/components/scripting/ScriptLineBlock.svelte";
|
||||
import { getModalContext } from "$lib/contexts/ModalContext.svelte";
|
||||
import { getStateContext } from "$lib/contexts/StateContext.svelte";
|
||||
import { fromEditableTrigger, newEditableScriptLine, newEditableTrigger, toEditableScriptLine, toEditableTrigger, type TriggerEditable } from "$lib/models/script";
|
||||
|
||||
const { state, deviceList, maskList } = getStateContext();
|
||||
const { modal } = getModalContext();
|
||||
|
||||
let show = false;
|
||||
let disabled = false;
|
||||
let selectedTrigger = "";
|
||||
let deleteCount = 3;
|
||||
|
||||
let current: TriggerEditable = newEditableTrigger("*", "");
|
||||
|
||||
async function submitForm() {
|
||||
disabled = true;
|
||||
|
||||
try {
|
||||
const before = Object.keys($state.triggers);
|
||||
await runCommand({updateTrigger: fromEditableTrigger(current)});
|
||||
|
||||
if (current.id === null) {
|
||||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
const after = Object.keys($state.triggers);
|
||||
selectedTrigger = after.find(id => !before.includes(id)) || triggerList[0].id;
|
||||
}
|
||||
} catch(_) {}
|
||||
|
||||
deleteCount = 3;
|
||||
disabled = false;
|
||||
}
|
||||
|
||||
async function deleteTrigger() {
|
||||
deleteCount -= 1;
|
||||
if (deleteCount <= 0) {
|
||||
try {
|
||||
await runCommand({deleteTrigger: {id: selectedTrigger}});
|
||||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
selectedTrigger = triggerList[0]?.id || "";
|
||||
} catch(_) {}
|
||||
}
|
||||
}
|
||||
|
||||
function loadTrigger(id: string) {
|
||||
deleteCount = 3;
|
||||
|
||||
if (id !== "") {
|
||||
current = toEditableTrigger($state.triggers[id]);
|
||||
} else {
|
||||
current = newEditableTrigger($maskList[0], scriptList?.[0] || "");
|
||||
}
|
||||
}
|
||||
|
||||
function addPreLine() {
|
||||
current.scriptPre = [...current.scriptPre, newEditableScriptLine()]
|
||||
}
|
||||
|
||||
function addPostLine() {
|
||||
current.scriptPost = [...current.scriptPost, newEditableScriptLine()]
|
||||
}
|
||||
|
||||
function ensureButton(buttonList: string[]) {
|
||||
if (!buttonList.includes(current.button)) {
|
||||
current.button = buttonList[0];
|
||||
}
|
||||
}
|
||||
|
||||
$: loadTrigger(selectedTrigger);
|
||||
$: triggerList = Object.keys($state.triggers).map(k => $state.triggers[k]).sort((a, b) => (
|
||||
a.event.localeCompare(b.event)
|
||||
|| a.deviceMatch.localeCompare(b.deviceMatch)
|
||||
|| a.parameter.localeCompare(b.parameter)
|
||||
));
|
||||
$: buttonList = $deviceList.filter(d => d.aliases.includes(current.deviceMatch))
|
||||
.flatMap(d => d.hwState?.buttons||[])
|
||||
.sort()
|
||||
.filter((e,i,a) => a[i-1] !== e);
|
||||
$: scriptList = Object.keys($state.scripts).sort();
|
||||
$: maskGroups = $maskList.map(s => s.split(":")[1]).filter((e, i, a) => a[i-1] !== e).sort().reverse();
|
||||
$: show = ($modal.kind === "trigger.edit");
|
||||
$: if (scriptList.length > 0 && current.scriptName === "") { current.scriptName = scriptList[0]; };
|
||||
$: ensureButton(buttonList);
|
||||
</script>
|
||||
|
||||
<form novalidate on:submit|preventDefault={submitForm}>
|
||||
<Modal
|
||||
ultrawide closable show={show}
|
||||
titleText="Trigger Editor"
|
||||
disabled={disabled}
|
||||
submitText="Save Trigger"
|
||||
>
|
||||
<ModalBody>
|
||||
<HSplit>
|
||||
<HSplitPart weight={1}>
|
||||
<label for="mask">Trigger</label>
|
||||
<select bind:value={selectedTrigger}>
|
||||
{#each triggerList as trigger (trigger.id)}
|
||||
<option value={trigger.id}>{trigger.name || `${trigger.deviceMatch} – ${trigger.event} ${trigger.parameter}`}</option>
|
||||
{/each}
|
||||
<option value="">New Trigger</option>
|
||||
</select>
|
||||
</HSplitPart>
|
||||
<HSplitPart weight={2}>
|
||||
</HSplitPart>
|
||||
</HSplit>
|
||||
<HSplit>
|
||||
<HSplitPart weight={1}>
|
||||
<label for="mask">Event</label>
|
||||
<select bind:value={current.event}>
|
||||
<option value="Button">Button Pressed</option>
|
||||
<option value="Time">Time Changed</option>
|
||||
</select>
|
||||
</HSplitPart>
|
||||
<HSplitPart weight={1}>
|
||||
{#if current.event === "Button"}
|
||||
<label for="mask">Button</label>
|
||||
<select bind:value={current.button}>
|
||||
{#each buttonList as buttonOption}
|
||||
<option value={buttonOption}>{buttonOption}</option>
|
||||
{/each}
|
||||
</select>
|
||||
{:else}
|
||||
<label for="mask">Time</label>
|
||||
<input type="time" bind:value={current.time} />
|
||||
{/if}
|
||||
</HSplitPart>
|
||||
<HSplitPart weight={1}>
|
||||
{#if current.event === "Button"}
|
||||
<label for="mask">Device</label>
|
||||
<select bind:value={current.deviceMatch}>
|
||||
{#each maskGroups as g}
|
||||
<optgroup label="{g.slice(0, 1).toUpperCase() + g.slice(1)}">
|
||||
{#each $maskList.filter(m => m.split(":")[1] === g) as mask}
|
||||
<option value={mask}>{mask}</option>
|
||||
{/each}
|
||||
</optgroup>
|
||||
{/each}
|
||||
</select>
|
||||
{/if}
|
||||
</HSplitPart>
|
||||
</HSplit>
|
||||
<HSplit>
|
||||
<HSplitPart weight={1}>
|
||||
<label for="mask">Run Script</label>
|
||||
<select bind:value={current.scriptName}>
|
||||
{#each scriptList as script}
|
||||
<option value={script}>{script}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</HSplitPart>
|
||||
<HSplitPart weight={1}>
|
||||
<label for="mask">Script Target</label>
|
||||
<select bind:value={current.scriptTarget}>
|
||||
{#each maskGroups as g}
|
||||
<optgroup label="{g.slice(0, 1).toUpperCase() + g.slice(1)}">
|
||||
{#each $maskList.filter(m => m.split(":")[1] === g) as mask}
|
||||
<option value={mask}>{mask}</option>
|
||||
{/each}
|
||||
</optgroup>
|
||||
{/each}
|
||||
</select>
|
||||
</HSplitPart>
|
||||
<HSplitPart weight={1}>
|
||||
</HSplitPart>
|
||||
</HSplit>
|
||||
<ModalSection expanded disableExpandToggle title="Trigger-Specific Scripting">
|
||||
<ScriptLineBlock add on:add={addPreLine} label="Before Script" bind:value={current.scriptPre} />
|
||||
<ScriptLineBlock add on:add={addPostLine} label="After Script" bind:value={current.scriptPost} />
|
||||
</ModalSection>
|
||||
</ModalBody>
|
||||
<button slot="secondary-button-1" disabled={disabled || selectedTrigger === ""} on:click|preventDefault={deleteTrigger}>Delete ({deleteCount})</button>
|
||||
</Modal>
|
||||
</form>
|
||||
Reference in New Issue
Block a user