Lucifer3/Server
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

trigger editor

Browse Source
This commit is contained in:
gisle
2023-10-12 23:27:04 +02:00
parent e06cf1ae34
commit 16e5726cbc
15 changed files with 410 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/HSplit.svelte
+1 -1
View File
@@ -13,6 +13,6 @@
&.reverse
flex-direction: row-reverse
@media screen and (max-width: 500px)
@media screen and (max-width: 700px)
display: block
</style>
frontend/src/lib/components/Modal.svelte
+4
View File
@@ -1,5 +1,6 @@
<script lang="ts">
import { getModalContext, type ModalSelection } from "$lib/contexts/ModalContext.svelte";
import { createEventDispatcher } from "svelte";
export let show: boolean = false;
export let titleText: string = "Edit Form";
@@ -204,6 +205,9 @@
resize: vertical;
padding: 0.5em 1ch;
}
div.modal :global(input[type="time"]:not(.custom)) {
padding: 0.333em 1ch;
}
div.modal :global(select:not(.custom)) {
padding-left: 0.5ch;
padding: 0.45em 1ch;
frontend/src/lib/contexts/ModalContext.svelte
+1
View File
@@ -11,6 +11,7 @@
| { kind: "closed" }
| { kind: "device.edit", op: DeviceEditOp }
| { kind: "script.edit" }
| { kind: "trigger.edit" }
export interface ModalContextState {
modal: Writable<ModalSelection>
frontend/src/lib/contexts/StateContext.svelte
+27 -5
View File
@@ -18,6 +18,7 @@
deviceList: Readable<Device[]>
assignmentList: Readable<Assignment[]>
roomList: Readable<{name: string, groups: {name: string, devices: Device[]}[], devices: Device[]}[]>
maskList: Readable<string[]>
}
export function getStateContext(): StateContextData {
@@ -30,6 +31,7 @@
assignments: {},
devices: {},
scripts: {},
triggers: {},
});
const error = writable<string | null>(null);
@@ -45,6 +47,13 @@
.sort((a,b) => a.name.localeCompare(b.name));
});
const maskList = derived(state, state => {
return Object.keys(state.devices)
.flatMap(k => state.devices[k].aliases.filter(a => ["tag", "room", "role", "name"].find(p => a.startsWith(`lucifer:${p}:`))))
.sort()
.filter((e, i, a) => a[i - 1] !== e)
});
const assignmentList = derived(state, state => {
if (state == null) {
return [];
@@ -55,7 +64,6 @@
.sort((a,b) => a.id.localeCompare(b.id));
});
const roomList = derived(state, state => {
const roomMap: Record<string, Device[]> = {};
const groupMap: Record<string, string> = {};
@@ -132,8 +140,8 @@
}
state.devices = {...state.devices}
if (patch.devices[deviceId] != null) {
state.devices[deviceId] = patch.devices[deviceId]
if (patch.devices[deviceId] !== null) {
state.devices[deviceId] = patch.devices[deviceId]!
} else {
delete state.devices[deviceId]
}
@@ -146,7 +154,7 @@
state.assignments = {...state.assignments}
if (patch.assignments[assignmentId] != null) {
state.assignments[assignmentId] = patch.assignments[assignmentId]
state.assignments[assignmentId] = patch.assignments[assignmentId]!
} else {
delete state.assignments[assignmentId]
}
@@ -159,12 +167,25 @@
state.scripts = {...state.scripts}
if (patch.scripts[scriptName] != null) {
state.scripts[scriptName] = patch.scripts[scriptName]
state.scripts[scriptName] = patch.scripts[scriptName]!
} else {
delete state.scripts[scriptName]
}
}
for (const triggerId in patch.triggers) {
if (!patch.triggers.hasOwnProperty(triggerId)) {
continue
}
state.triggers = {...state.triggers}
if (patch.triggers[triggerId] != null) {
state.triggers[triggerId] = patch.triggers[triggerId]!
} else {
delete state.triggers[triggerId]
}
}
return state;
})
}
@@ -214,6 +235,7 @@
deviceList,
assignmentList,
roomList,
maskList,
});
</script>
frontend/src/lib/modals/TriggerModal.svelte
+181
View File
@@ -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>
frontend/src/lib/models/command.ts
+9 -1
View File
@@ -1,5 +1,5 @@
import type { AssignmentInput } from "./assignment"
import type { ScriptLine } from "./script"
import type { ScriptLine, TriggerInput } from "./script"
export default interface CommandInput {
addAlias?: AddAliasCommand
@@ -7,6 +7,8 @@ export default interface CommandInput {
assign?: AssignmentInput
updateScript?: UpdateScriptCommand
executeScript?: ExecuteScriptCommand
updateTrigger?: UpdateTriggerCommand
deleteTrigger?: DeleteTriggerCommand
}
export interface UpdateScriptCommand {
@@ -27,4 +29,10 @@ export interface AddAliasCommand {
export interface RemoveAliasComamnd {
match: string
alias: string
}
export type UpdateTriggerCommand = TriggerInput
export interface DeleteTriggerCommand {
id: string
}
frontend/src/lib/models/script.ts
+81
View File
@@ -5,6 +5,35 @@ export default interface Script {
lines: ScriptLine[]
}
export interface Trigger {
id: string
name: string
event: "Button" | "Time"
deviceMatch: string
parameter: string
scriptTarget: string
scriptName: string
scriptPre: ScriptLine[]
scriptPost: ScriptLine[]
}
export interface TriggerInput extends Pick<Trigger, Exclude<keyof Trigger, "id">> {
id: string | undefined
}
export interface TriggerEditable {
id: string | null
name: string
event: "Button" | "Time"
deviceMatch: string
time: string
button: string
scriptTarget: string
scriptName: string
scriptPre: ScriptLineEditable[]
scriptPost: ScriptLineEditable[]
}
type ScriptLineEditableData = ScriptLineIf & ScriptLineAssign & ScriptLineSet & ScriptLineSelect
export interface ScriptLineEditable {
@@ -92,6 +121,14 @@ export function fromEditableScriptLine(line: ScriptLineEditable): ScriptLine {
}
}
export function newEditableScriptLine(): ScriptLineEditable {
return toEditableScriptLine({if: {
condition: { scope: "global", key: "", op: "eq" },
then: [],
else: [],
}})
}
export function toEditableScriptLine(line: ScriptLine): ScriptLineEditable {
const base = emptyEditable();
@@ -170,4 +207,48 @@ function emptyEditable(): ScriptLineEditable {
then: [],
else: [],
}
}
export function newEditableTrigger(deviceMatch: string, scriptName: string): TriggerEditable {
return {
id: null,
name: "",
event: "Button",
deviceMatch: deviceMatch,
button: "On",
time: "00:00",
scriptName: scriptName,
scriptTarget: deviceMatch,
scriptPre: [],
scriptPost: [],
}
}
export function toEditableTrigger(trigger: Trigger): TriggerEditable {
return {
id: trigger.id,
name: trigger.name,
event: trigger.event,
deviceMatch: trigger.deviceMatch,
button: trigger.event === "Button" ? trigger.parameter : "Up",
time: trigger.event === "Time" ? trigger.parameter : "00:00",
scriptName: trigger.scriptName,
scriptTarget: trigger.scriptTarget,
scriptPre: trigger.scriptPre.map(toEditableScriptLine),
scriptPost: trigger.scriptPost.map(toEditableScriptLine),
}
}
export function fromEditableTrigger(editable: TriggerEditable): TriggerInput {
return {
id: editable.id || undefined,
name: editable.name,
event: editable.event,
deviceMatch: editable.deviceMatch,
parameter: (editable.event === "Button") ? editable.button : editable.time,
scriptTarget: editable.scriptTarget,
scriptName: editable.scriptName,
scriptPre: editable.scriptPre.map(fromEditableScriptLine),
scriptPost: editable.scriptPost.map(fromEditableScriptLine),
}
}
frontend/src/lib/models/uistate.ts
+9 -3
View File
@@ -1,20 +1,26 @@
import type Assignment from "./assignment";
import type Device from "./device";
import type { ScriptLine } from "./script";
import type { ScriptLine, Trigger } from "./script";
import type Script from "./script";
export default interface UIState {
devices: {[id: string]: Device}
assignments: {[id: string]: Assignment}
scripts: {[id: string]: ScriptLine[]}
triggers: {[id: string]: Trigger}
}
export interface UIStatePatch {
device: Partial<Device> & { id: string, delete?: boolean, addAlias?: string, removeAlias?: string }
assignment: Partial<Assignment> & { id: string, delete?: boolean, addDeviceId?: string, removeDeviceId?: string }
script: Partial<Script> & { id: string, delete?: boolean }
trigger: Partial<Trigger> & { delete?: boolean }
}
export interface UIStatePatch2 extends UIState {
export interface UIStatePatch2 {
full?: UIState
}
devices: {[id: string]: Device | null}
assignments: {[id: string]: Assignment | null}
scripts: {[id: string]: ScriptLine[] | null}
triggers: {[id: string]: Trigger | null}
}
frontend/src/routes/+page.svelte
+6
View File
@@ -7,6 +7,7 @@
import { getStateContext } from "$lib/contexts/StateContext.svelte";
import DeviceModal from "$lib/modals/DeviceModal.svelte";
import ScriptModal from "$lib/modals/ScriptModal.svelte";
import TriggerModal from "$lib/modals/TriggerModal.svelte";
const {selectedList} = getSelectedContext();
const {roomList} = getStateContext();
@@ -25,6 +26,10 @@
modal.set({kind: "script.edit"});
e.preventDefault();
break;
case 't':
modal.set({kind: "trigger.edit"});
e.preventDefault();
break;
}
}
}
@@ -55,6 +60,7 @@
<DeviceModal />
<ScriptModal />
<TriggerModal />
<style>
div.page {