111 lines
2.4 KiB
Svelte
111 lines
2.4 KiB
Svelte
<script>
|
|
import IconButton from "../common/IconButton.svelte";
|
|
import StateBindingControl from "./StateBindingControl.svelte";
|
|
import {
|
|
find, map, keys, reduce, keyBy
|
|
} from "lodash/fp";
|
|
import { pipe, userWithFullAccess } from "../common/core";
|
|
import { EVENT_TYPE_MEMBER_NAME, allHandlers } from "../common/eventHandlers";
|
|
import { store } from "../builderStore";
|
|
|
|
export let event;
|
|
export let onChanged;
|
|
export let onRemoved;
|
|
|
|
let events;
|
|
let eventType;
|
|
let parameters = [];
|
|
|
|
store.subscribe(s => {
|
|
events = allHandlers(
|
|
{hierarchy: s.hierarchy},
|
|
userWithFullAccess({
|
|
hierarchy: s.hierarchy,
|
|
actions: keyBy("name")(s.actions)
|
|
})
|
|
);
|
|
});
|
|
|
|
$: {
|
|
if(event) {
|
|
eventType = event[EVENT_TYPE_MEMBER_NAME];
|
|
parameters = pipe(event.parameters, [
|
|
keys,
|
|
map(k => ({name:k, value:event.parameters[k]}))
|
|
]);
|
|
} else {
|
|
eventType = "";
|
|
parameters = [];
|
|
}
|
|
}
|
|
|
|
const eventChanged = (type, parameters) => {
|
|
const paramsAsObject = reduce(
|
|
(obj, p) => {
|
|
obj[p.name] = p.value;
|
|
return obj;
|
|
}
|
|
, {}
|
|
)(parameters)
|
|
|
|
const ev = {};
|
|
ev[EVENT_TYPE_MEMBER_NAME]=type;
|
|
ev.parameters = paramsAsObject;
|
|
|
|
onChanged(ev);
|
|
}
|
|
|
|
const eventTypeChanged = (ev) => {
|
|
const eType = find(e => e.name === ev.target.value)(events);
|
|
const emptyParameters = map(p => ({name:p, value:""}))(eType.parameters);
|
|
eventChanged(eType.name, emptyParameters);
|
|
}
|
|
|
|
const onParameterChanged = index => val => {
|
|
const newparameters = [...parameters];
|
|
newparameters[index].value = val;
|
|
eventChanged(eventType, newparameters);
|
|
}
|
|
|
|
</script>
|
|
|
|
<div class="type-selector-container">
|
|
<select class="type-selector uk-select uk-form-small " value={eventType} on:change={eventTypeChanged}>
|
|
<option></option>
|
|
{#each events as ev}
|
|
<option value={ev.name}>{ev.name}</option>
|
|
{/each}
|
|
</select>
|
|
|
|
<IconButton icon="trash"
|
|
size="12"
|
|
on:click={onRemoved}/>
|
|
|
|
</div>
|
|
|
|
{#if parameters}
|
|
{#each parameters as p, index}
|
|
|
|
<div>
|
|
{p.name}
|
|
</div>
|
|
<StateBindingControl onChanged={onParameterChanged(index)}
|
|
value={p.value} />
|
|
|
|
{/each}
|
|
{/if}
|
|
|
|
<style>
|
|
|
|
.type-selector-container {
|
|
display: flex;
|
|
}
|
|
|
|
.type-selector {
|
|
border-color: var(--primary50);
|
|
border-radius: 2px;
|
|
width: 50px;
|
|
flex: 1 0 auto;
|
|
}
|
|
|
|
</style> |