revil-O/platypush
1
0
Fork 0
forked from platypush/platypush
Code Pull requests Activity

Merge pull request '[UI] Expose procedures as entities' (#428) from 341/procedure-entities-ui into master

Browse source 
Reviewed-on: platypush/platypush#428
This commit is contained in:
Fabio Manganiello 2024-09-23 03:50:14 +02:00
commit f42ed34f75
58 changed files with 8053 additions and 629 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
platypush/backend/http/webapp/src/App.vue
View file

@ -49,11 +49,14 @@ export default {
data() {
return {
config: {},
configDir: null,
configFile: null,
userAuthenticated: false,
connected: false,
pwaInstallEvent: null,
initialized: false,
initError: null,
stackedModals: 0,
}
},
@ -81,11 +84,15 @@ export default {
methods: {
onNotification(notification) {
this.$refs.notifications.create(notification)
this.$refs.notifications?.create(notification)
},
async initConfig() {
this.config = await this.request('config.get', {}, 60000, false)
this.config = await this.request('config.get', {}, 60000, false);
[this.configDir, this.configFile] = await Promise.all([
this.request('config.get_config_dir'),
this.request('config.get_config_file'),
])
this.userAuthenticated = true
},
@ -94,7 +101,15 @@ export default {
this.pwaInstallEvent.prompt()
this.$refs.pwaDialog.close()
}
},
onModalClose() {
this.stackedModals = Math.max(0, this.stackedModals - 1)
},
onModalOpen() {
this.stackedModals++
},
},
async created() {
@ -130,6 +145,8 @@ export default {
bus.onNotification(this.onNotification)
bus.on('connect', () => this.connected = true)
bus.on('disconnect', () => this.connected = false)
bus.on('modal-open', this.onModalOpen)
bus.on('modal-close', this.onModalClose)
},
}
</script>

3
platypush/backend/http/webapp/src/assets/icons.json
View file

@ -89,6 +89,9 @@
"ping": {
"class": "fas fa-server"
},
"procedures": {
"class": "fas fa-gears"
},
"torrent": {
"class": "fa fa-magnet"
},

71
platypush/backend/http/webapp/src/components/Action/ActionArgs.vue
View file

@ -1,18 +1,19 @@
<template>
<div class="args-body">
<div class="args-body" @keydown="onKeyDown">
<div class="args-list"
v-if="Object.keys(action.args).length || action.supportsExtraArgs">
<!-- Supported action arguments -->
<div class="arg" :key="name" v-for="name in Object.keys(action.args)">
<label>
<input type="text"
class="action-arg-value"
:class="{required: action.args[name].required}"
:disabled="running"
:placeholder="name"
:value="action.args[name].value"
@input="onArgEdit(name, $event)"
@focus="onSelect(name)">
<ContextAutocomplete :value="action.args[name].value"
:disabled="running"
:items="contextAutocompleteItems"
:placeholder="name"
:quote="true"
:select-on-tab="false"
@input="onArgEdit(name, $event)"
@blur="onSelect(name)"
@focus="onSelect(name)" />
<span class="required-flag" v-if="action.args[name].required">*</span>
</label>
@ -36,12 +37,13 @@
@input="onExtraArgNameEdit(i, $event.target.value)">
</label>
<label class="col-6">
<input type="text"
class="action-extra-arg-value"
placeholder="Value"
:disabled="running"
:value="arg.value"
@input="onExtraArgValueEdit(i, $event.target.value)">
<ContextAutocomplete :value="arg.value"
:disabled="running"
:items="contextAutocompleteItems"
:quote="true"
:select-on-tab="false"
placeholder="Value"
@input="onExtraArgValueEdit(i, $event.detail)" />
</label>
<label class="col-1 buttons">
<button type="button" class="action-extra-arg-del" title="Remove argument" @click="$emit('remove', i)">
@ -68,18 +70,26 @@
<script>
import Argdoc from "./Argdoc"
import ContextAutocomplete from "./ContextAutocomplete"
import Mixin from "./Mixin"
export default {
name: 'ActionArgs',
components: { Argdoc },
mixins: [Mixin],
components: {
Argdoc,
ContextAutocomplete,
},
emits: [
'add',
'arg-edit',
'extra-arg-name-edit',
'extra-arg-value-edit',
'input',
'remove',
'select',
],
props: {
action: Object,
loading: Boolean,
@ -88,6 +98,18 @@ export default {
selectedArgdoc: String,
},
computed: {
allArgs() {
return {
...this.action.args,
...this.action.extraArgs.reduce((acc, arg) => {
acc[arg.name] = arg
return acc
}, {}),
}
},
},
methods: {
onArgAdd() {
this.$emit('add')
@ -103,7 +125,7 @@ export default {
onArgEdit(name, event) {
this.$emit('arg-edit', {
name: name,
value: event.target.value,
value: event.target?.value || event.detail,
})
},
@ -124,6 +146,19 @@ export default {
onSelect(arg) {
this.$emit('select', arg)
},
onKeyDown(event) {
if (event.key === 'Enter' && !(event.shiftKey || event.ctrlKey || event.altKey || event.metaKey))
this.onEnter(event)
},
onEnter(event) {
if (!event.target.tagName.match(/input|textarea/i))
return
event.preventDefault()
this.$emit('input', this.allArgs)
},
},
}
</script>

51
platypush/backend/http/webapp/src/components/Action/ActionEditor.vue
View file

@ -77,11 +77,13 @@
</h2>
<ActionArgs :action="action"
:context="context"
:loading="loading"
:running="running"
:selected-arg="selectedArg"
:selected-argdoc="selectedArgdoc"
@add="addArg"
@input="emitInput({name: action.name, args: $event})"
@select="selectArgdoc"
@remove="removeArg"
@arg-edit="action.args[$event.name].value = $event.value"
@ -115,7 +117,7 @@
<script>
import 'highlight.js/lib/common'
import 'highlight.js/styles/stackoverflow-dark.min.css'
import 'highlight.js/styles/nord.min.css'
import hljs from "highlight.js"
import ActionArgs from "./ActionArgs"
import ActionDoc from "./ActionDoc"
@ -142,6 +144,11 @@ export default {
},
props: {
context: {
type: Object,
default: () => ({}),
},
value: {
type: Object,
},
@ -193,11 +200,26 @@ export default {
},
autocompleteItems() {
if (this.getPluginName(this.action.name) in this.plugins) {
return Object.keys(this.actions).sort()
let plugin = this.getPluginName(this.action.name)
let items = []
if (plugin in this.plugins) {
items = Object.keys(this.actions).sort()
} else {
plugin = undefined
items = Object.keys(this.plugins).sort().map((pluginName) => `${pluginName}.`)
}
return Object.keys(this.plugins).sort().map((pluginName) => `${pluginName}.`)
return items.map((item) => {
const iconName = plugin || item.replace(/\.+$/, '')
return {
prefix: `
<img src="https://static.platypush.tech/icons/${iconName}-64.png"
style="width: 1em; height: 1em; margin-right: 0.75em"
class="plugin-icon" />`,
text: item,
}
})
},
actionInput() {
@ -375,14 +397,14 @@ export default {
this.actionDocsCache[this.action.name].html = this.selectedDoc
this.setUrlArgs({action: this.action.name})
const firstArg = this.$el.querySelector('.action-arg-value')
if (firstArg) {
firstArg.focus()
} else {
this.$nextTick(() => {
this.$nextTick(() => {
const firstArg = this.$el.querySelector('.args-body input[type=text]')
if (firstArg) {
firstArg.focus()
} else {
this.actionInput.focus()
})
}
}
})
this.response = undefined
this.error = undefined
@ -547,7 +569,12 @@ export default {
async mounted() {
await this.refresh()
await this.onValueChanged()
this.onValueChanged()
},
unmounted() {
this.actionDocsCache = {}
this.setUrlArgs({action: undefined})
},
}
</script>

340
platypush/backend/http/webapp/src/components/Action/ActionTile.vue
View file

@ -1,55 +1,109 @@
<template>
<div class="action-tile"
:class="{drag: draggable && dragging}"
:draggable="draggable"
@dragstart="onDragStart"
@dragend="onDragEnd"
@click="$refs.actionEditor.show">
<div class="action-delete" title="Remove" v-if="withDelete" @click.stop="$emit('delete')">
<i class="icon fas fa-xmark" />
</div>
<div class="action-tile-container">
<div class="action-tile"
:class="{ new: isNew }"
ref="tile"
@click="$refs.actionEditor.show">
<div class="action-delete"
title="Remove"
v-if="withDelete && !readOnly"
@click.stop="$emit('delete')">
<i class="icon fas fa-xmark" />
</div>
<div class="action-name" v-if="name?.length">
{{ name }}
</div>
<div class="new-action" v-else>
<i class="icon fas fa-plus" />&nbsp; Add Action
</div>
<div class="action-args" v-if="Object.keys(value.args || {})?.length">
<div class="arg" v-for="(arg, name) in value.args" :key="name">
<div class="arg-name">
<div class="action-name" v-if="name?.length">
<span class="icon">
<ExtensionIcon :name="name.split('.')[0]" size="1.5em" />
</span>
<span class="name">
{{ name }}
</div>
</span>
</div>
<div class="arg-value">
{{ arg }}
<div class="new-action" v-else>
<i class="icon fas fa-plus" />&nbsp; Add Action
</div>
<div class="action-args" v-if="Object.keys(value.args || {})?.length">
<div class="arg" v-for="(arg, name) in value.args" :key="name">
<div class="arg-name">
{{ name }}
</div>
<div class="arg-value">
{{ arg }}
</div>
</div>
</div>
</div>
</div>
<div class="action-editor-container">
<Modal ref="actionEditor" title="Edit Action">
<ActionEditor :value="value" with-save @input="onInput"
v-if="this.$refs.actionEditor?.$data?.isVisible" />
</Modal>
<Draggable :element="tile"
:disabled="readOnly"
:value="value"
@drag="$emit('drag', $event)"
@dragend="$emit('dragend', $event)"
@drop="$emit('drop', $event)"
v-if="draggable" />
<Droppable :element="tile"
:disabled="readOnly"
@dragenter="$emit('dragenter', $event)"
@dragleave="$emit('dragleave', $event)"
@dragover="$emit('dragover', $event)"
@drop="$emit('drop', $event)"
v-if="draggable" />
<div class="action-editor-container">
<Modal ref="actionEditor" title="Edit Action">
<ActionEditor :value="value"
:context="context"
:with-save="!readOnly"
@input="onInput"
v-if="this.$refs.actionEditor?.$data?.isVisible" />
</Modal>
</div>
</div>
</template>
<script>
import ActionEditor from "@/components/Action/ActionEditor"
import Modal from "@/components/Modal";
import Draggable from "@/components/elements/Draggable"
import Droppable from "@/components/elements/Droppable"
import ExtensionIcon from "@/components/elements/ExtensionIcon"
import Mixin from "./Mixin"
import Modal from "@/components/Modal"
export default {
emits: ['input', 'delete', 'drag', 'drop'],
mixins: [Mixin],
emits: [
'delete',
'drag',
'dragenter',
'dragleave',
'dragover',
'drop',
'input',
],
components: {
ActionEditor,
Draggable,
Droppable,
ExtensionIcon,
Modal,
},
props: {
context: {
type: Object,
default: () => ({}),
},
draggable: {
type: Boolean,
default: true,
},
value: {
type: Object,
default: () => ({
@ -65,7 +119,7 @@ export default {
default: false,
},
draggable: {
readOnly: {
type: Boolean,
default: false,
},
@ -73,31 +127,26 @@ export default {
data() {
return {
dragging: false,
tile: null,
}
},
computed: {
isNew() {
return !this.readOnly && !this.name?.length
},
name() {
return this.value.name || this.value.action
},
},
methods: {
onDragStart(event) {
this.dragging = true
event.dataTransfer.dropEffect = 'move'
event.dataTransfer.effectAllowed = 'move'
event.dataTransfer.setData('application/json', JSON.stringify(this.value))
this.$emit('drag')
},
onDragEnd() {
this.dragging = false
this.$emit('drop')
},
onInput(value) {
if (!value || this.readOnly) {
return
}
this.$emit('input', {
...this.value,
name: value.action,
@ -109,118 +158,143 @@ export default {
this.$refs.actionEditor.close()
},
},
mounted() {
this.tile = this.$refs.tile
},
}
</script>
<style lang="scss" scoped>
@import "common";
.action-tile {
min-width: 20em;
background: $tile-bg;
color: $tile-fg;
display: flex;
flex-direction: column;
padding: 0.5em 1em;
overflow: hidden;
text-overflow: ellipsis;
content: "";
.action-tile-container {
position: relative;
border-radius: 1em;
cursor: pointer;
&:hover {
background: $tile-hover-bg;
}
&.drag {
opacity: 0.5;
}
.action-delete {
width: 1.5em;
height: 1.5em;
font-size: 1.25em;
position: absolute;
top: 0.25em;
right: 0;
opacity: 0.7;
transition: opacity 0.25s ease-in-out;
&:hover {
opacity: 1;
}
}
.action-name {
font-size: 1.1em;
font-weight: bold;
font-family: monospace;
}
.new-action {
font-style: italic;
}
.action-args {
.action-tile {
min-width: 20em;
background: $tile-bg;
color: $tile-fg;
display: flex;
flex-direction: column;
margin-top: 0.5em;
padding: 0.5em 1em;
overflow: hidden;
text-overflow: ellipsis;
content: "";
position: relative;
border-radius: 1em;
cursor: pointer;
.arg {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 0.5em;
&:hover {
background: $tile-hover-bg;
}
.arg-name {
font-weight: bold;
margin-right: 0.5em;
}
&.selected {
background: $tile-hover-bg;
}
.arg-value {
font-family: monospace;
font-size: 0.9em;
flex: 1;
&.new {
background: $tile-bg-3;
&:hover {
background: $tile-hover-bg-3;
}
}
}
}
.action-editor-container {
:deep(.modal-container) {
@include until($tablet) {
.modal {
width: calc(100vw - 1em);
.action-delete {
width: 1.5em;
height: 1.5em;
font-size: 1.25em;
position: absolute;
top: 0.25em;
right: 0;
opacity: 0.7;
transition: opacity 0.25s ease-in-out;
cursor: pointer;
.content {
width: 100%;
&:hover {
opacity: 1;
}
}
.body {
width: 100%;
}
.action-name {
display: inline-flex;
font-size: 1.1em;
font-weight: bold;
font-family: monospace;
align-items: center;
.icon {
width: 1.5em;
height: 1.5em;
margin-right: 0.75em;
}
}
.new-action {
font-style: italic;
}
.action-args {
display: flex;
flex-direction: column;
margin-top: 0.5em;
.arg {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 0.5em;
.arg-name {
font-weight: bold;
margin-right: 0.5em;
}
.arg-value {
font-family: monospace;
font-size: 0.9em;
flex: 1;
}
}
}
}
.content .body {
width: 80vw;
height: 80vh;
max-width: 800px;
padding: 0;
}
.action-editor-container {
:deep(.modal-container) {
@include until($tablet) {
.modal {
width: calc(100vw - 1em);
.tabs {
margin-top: 0;
}
.content {
width: 100%;
.action-editor {
height: 100%;
}
.body {
width: 100%;
}
}
}
}
form {
height: calc(100% - $tab-height);
overflow: auto;
.content .body {
width: 80vw;
height: 80vh;
max-width: 800px;
padding: 0;
}
.tabs {
margin-top: 0;
}
.action-editor {
height: 100%;
}
form {
height: calc(100% - $tab-height);
overflow: auto;
}
}
}
}

202
platypush/backend/http/webapp/src/components/Action/ActionsBlock.vue Normal file
View file

@ -0,0 +1,202 @@
<template>
<div class="actions-block" :class="{ hover }">
<slot name="before" />
<div class="actions-list-container" ref="actionsListContainer">
<button class="collapse-button"
@click="collapsed_ = !collapsed_"
v-if="isCollapsed">
<i class="fas fa-ellipsis-h" />
</button>
<div class="actions-list" :class="actionListClasses">
<ActionsList :value="value[key]"
:context="context"
:dragging="dragging"
:has-else="hasElse"
:indent="indent"
:is-inside-loop="isInsideLoop"
:parent="value"
:read-only="readOnly"
@add-else="$emit('add-else')"
@collapse="collapsed_ = !collapsed_"
@drag="$emit('drag', $event)"
@dragend="$emit('dragend', $event); hover = false"
@dragenter="$emit('dragenter', $event)"
@dragleave="$emit('dragleave', $event); hover = false"
@dragover="$emit('dragover', $event)"
@drop="$emit('drop', $event); hover = false"
@input="$emit('input', $event); hover = false" />
</div>
</div>
<slot name="after" />
<Droppable :element="$refs.actionsListContainer"
@dragenter="onDragEnter"
@dragleave="onDragLeave"
@drop="hover = false"
v-if="!readOnly" />
</div>
</template>
<script>
import { defineAsyncComponent } from "vue"
import Droppable from "@/components/elements/Droppable"
import Mixin from "./Mixin"
export default {
name: 'ActionsBlock',
mixins: [Mixin],
emits: [
'add-else',
'drag',
'dragend',
'dragenter',
'dragleave',
'dragover',
'drop',
'input',
],
components: {
// Handle indirect circular dependency
ActionsList: defineAsyncComponent(() => import('./ActionsList')),
Droppable,
},
props: {
value: {
type: Object,
required: true,
},
collapsed: {
type: Boolean,
default: false,
},
dragging: {
type: Boolean,
default: false,
},
indent: {
type: Number,
default: 0,
},
isInsideLoop: {
type: Boolean,
default: false,
},
readOnly: {
type: Boolean,
default: false,
},
hasElse: {
type: Boolean,
default: false,
},
},
computed: {
actionListClasses() {
return {
hidden: this.isCollapsed,
fold: this.folding,
unfold: this.unfolding,
}
},
condition() {
return this.getCondition(this.key)
},
isCollapsed() {
const transitioning = this.hover || this.folding || this.unfolding
if (transitioning) {
return false
}
if (this.collapsed_) {
return true
}
return this.collapsed
},
key() {
return this.getKey(this.value)
},
},
data() {
return {
collapsed_: false,
folding: false,
hover: false,
hoverTimeout: null,
unfolding: false,
}
},
watch: {
collapsed_(value) {
if (value) {
this.folding = true
setTimeout(() => {
this.folding = false
}, 300)
} else {
this.unfolding = true
setTimeout(() => {
this.unfolding = false
}, 300)
}
},
},
methods: {
onDragEnter() {
if (this.hoverTimeout) {
return
}
this.hoverTimeout = setTimeout(() => {
this.hover = true
}, 500)
},
onDragLeave() {
if (this.hoverTimeout) {
clearTimeout(this.hoverTimeout)
this.hoverTimeout = null
}
this.hover = false
},
},
}
</script>
<style lang="scss" scoped>
.actions-block {
.collapse-button {
width: 100%;
background: none !important;
margin-left: 1em;
font-size: 0.85em;
text-align: left;
border: none;
}
&.hover {
.collapse-button {
color: $default-hover-fg;
}
}
}
</style>

1007
platypush/backend/http/webapp/src/components/Action/ActionsList.vue Normal file
View file

File diff suppressed because it is too large Load diff

132
platypush/backend/http/webapp/src/components/Action/ActionsListItem.vue Normal file
View file

@ -0,0 +1,132 @@
<template>
<ListItem class="action"
:active="active"
:dragging="dragging"
:spacer-bottom="spacerBottom"
:spacer-top="spacerTop"
:value="value"
v-on="componentsData.on">
<ActionTile :value="value"
:context="context"
:draggable="!readOnly"
:read-only="readOnly"
:with-delete="!readOnly"
v-on="componentsData.on"
@contextmenu="$emit('contextmenu', $event)"
@drag.stop="onDragStart"
@delete="$emit('delete', $event)" />
</ListItem>
</template>
<script>
import ActionTile from "@/components/Action/ActionTile"
import ListItem from "@/components/Action/ListItem"
import Utils from "@/Utils"
export default {
mixins: [Utils],
emits: [
'contextmenu',
'delete',
'drag',
'dragend',
'dragenter',
'dragleave',
'dragover',
'drop',
'input',
],
components: {
ActionTile,
ListItem,
},
props: {
active: {
type: Boolean,
default: false,
},
context: {
type: Object,
default: () => ({}),
},
readOnly: {
type: Boolean,
default: false,
},
spacerBottom: {
type: Boolean,
default: false,
},
spacerTop: {
type: Boolean,
default: true,
},
value: {
type: Object,
required: true,
},
},
data() {
return {
dragging: false,
}
},
computed: {
componentsData() {
return {
on: {
dragend: this.onDragEnd,
dragover: this.onDragOver,
drop: this.onDrop,
input: this.onInput,
}
}
},
},
methods: {
onDragStart(event) {
if (this.readOnly) {
return
}
this.dragging = true
this.$emit('drag', event)
},
onDragEnd(event) {
event.stopPropagation()
this.dragging = false
this.$emit('dragend', event)
},
onDragOver(event) {
event.stopPropagation()
this.$emit('dragover', event)
},
onDrop(event) {
if (this.readOnly) {
return
}
event.stopPropagation()
this.dragging = false
this.$emit('drop', event)
},
onInput(value) {
this.$emit('input', value)
},
},
}
</script>

57
platypush/backend/http/webapp/src/components/Action/AddTile.vue Normal file
View file

@ -0,0 +1,57 @@
<template>
<div class="add-tile-container">
<Tile class="add"
:draggable="false"
:read-only="true"
@click="$emit('click')">
<div class="add-tile">
<span class="icon">
<i :class="icon" />
</span>
<span class="name">
{{ title }}
</span>
</div>
</Tile>
</div>
</template>
<script>
import Tile from "@/components/elements/Tile"
export default {
emits: ['click'],
components: { Tile },
props: {
icon: {
type: String,
default: 'fas fa-plus',
},
title: {
type: String,
required: true,
},
},
}
</script>
<style lang="scss" scoped>
@import "common";
.add-tile-container {
position: relative;
margin: 0.5em 0;
.icon {
width: 1.5em;
height: 1.5em;
margin-right: 0.75em;
}
.name {
font-style: italic;
}
}
</style>

66
platypush/backend/http/webapp/src/components/Action/BreakTile.vue Normal file
View file

@ -0,0 +1,66 @@
<template>
<ListItem class="break-tile"
value="break"
:active="active"
:read-only="readOnly"
:spacer-bottom="spacerBottom"
:spacer-top="spacerTop">
<Tile :value="value"
class="keyword"
:draggable="false"
:read-only="readOnly"
:with-delete="!readOnly"
@click.stop
@delete="$emit('delete')">
<div class="tile-name">
<span class="icon">
<i class="fas fa-hand" />
</span>
<span class="name">
<span class="keyword">break</span>
</span>
</div>
</Tile>
</ListItem>
</template>
<script>
import ListItem from "./ListItem"
import Tile from "@/components/elements/Tile"
export default {
emits: ['delete'],
components: {
ListItem,
Tile,
},
props: {
value: {
type: String,
default: 'break',
},
active: {
type: Boolean,
default: false,
},
readOnly: {
type: Boolean,
default: false,
},
spacerBottom: {
type: Boolean,
default: true,
},
spacerTop: {
type: Boolean,
default: true,
},
},
}
</script>

227
platypush/backend/http/webapp/src/components/Action/ConditionBlock.vue Normal file
View file

@ -0,0 +1,227 @@
<template>
<div class="condition-block">
<ActionsBlock :value="value"
:collapsed="collapsed"
:context="context"
:dragging="isDragging"
:has-else="hasElse"
:is-inside-loop="isInsideLoop"
:indent="indent"
:read-only="readOnly"
@input="onActionsChange"
@add-else="$emit('add-else')"
@drag="$emit('drag', $event)"
@dragend="$emit('dragend', $event)"
@dragenter="$emit('dragenter', $event)"
@dragleave="$emit('dragleave', $event)"
@dragover="$emit('dragover', $event)"
@drop="$emit('drop', $event)">
<template #before>
<ConditionTile :value="condition"
v-bind="conditionTileConf.props"
v-on="conditionTileConf.on"
@input.prevent.stop
:spacer-top="spacerTop"
:spacer-bottom="false"
v-if="condition && !isElse" />
<ConditionTile value="else"
v-bind="conditionTileConf.props"
v-on="conditionTileConf.on"
:is-else="true"
:spacer-top="spacerTop"
:spacer-bottom="false"
v-else-if="isElse" />
</template>
<template #after>
<EndBlockTile value="end if"
icon="fas fa-question"
:active="active"
:spacer-bottom="spacerBottom || dragging_"
@drop="onDrop"
v-if="isElse || !hasElse" />
</template>
</ActionsBlock>
</div>
</template>
<script>
import ActionsBlock from "./ActionsBlock"
import ConditionTile from "./ConditionTile"
import EndBlockTile from "./EndBlockTile"
import Mixin from "./Mixin"
export default {
name: 'ConditionBlock',
mixins: [Mixin],
emits: [
'add-else',
'delete',
'drag',
'dragend',
'dragenter',
'dragleave',
'dragover',
'drop',
'input',
],
components: {
ActionsBlock,
ConditionTile,
EndBlockTile,
},
props: {
value: {
type: Object,
required: true,
},
active: {
type: Boolean,
default: false,
},
collapsed: {
type: Boolean,
default: false,
},
dragging: {
type: Boolean,
default: false,
},
hasElse: {
type: Boolean,
default: false,
},
indent: {
type: Number,
default: 0,
},
isElse: {
type: Boolean,
default: false,
},
isInsideLoop: {
type: Boolean,
default: false,
},
readOnly: {
type: Boolean,
default: false,
},
spacerBottom: {
type: Boolean,
default: false,
},
spacerTop: {
type: Boolean,
default: false,
},
},
data() {
return {
dragging_: false,
}
},
computed: {
condition() {
return this.getCondition(this.key)
},
conditionTileConf() {
return {
props: {
active: this.active,
context: this.context,
readOnly: this.readOnly,
spacerBottom: this.spacerBottom,
spacerTop: this.spacerTop,
},
on: {
change: this.onConditionChange,
delete: (event) => this.$emit('delete', event),
drag: this.onDragStart,
dragend: this.onDragEnd,
dragenterspacer: (event) => this.$emit('dragenter', event),
dragleavespacer: (event) => this.$emit('dragleave', event),
dragover: (event) => this.$emit('dragover', event),
dragoverspacer: (event) => this.$emit('dragoverspacer', event),
drop: this.onDrop,
},
}
},
isDragging() {
return this.dragging_ || this.dragging
},
key() {
return this.getKey(this.value)
},
},
methods: {
onActionsChange(value) {
if (!this.key || this.readOnly) {
return
}
this.$emit('input', { [this.key]: value })
},
onConditionChange(condition) {
if (!this.key || this.readOnly || !condition?.length) {
return
}
condition = `if \${${condition.trim()}}`
this.$emit('input', { [condition]: this.value[this.key] })
},
onDragStart(event) {
if (this.readOnly) {
return
}
this.dragging_ = true
this.$emit('drag', event)
},
onDragEnd(event) {
this.dragging_ = false
this.$emit('dragend', event)
},
onDrop(event) {
if (this.readOnly) {
return
}
this.dragging_ = false
this.$emit('drop', event)
},
},
}
</script>
<style lang="scss" scoped>
:deep(.condition-block) {
.end-if-container {
margin-bottom: 1em;
}
}
</style>

228
platypush/backend/http/webapp/src/components/Action/ConditionTile.vue Normal file
View file

@ -0,0 +1,228 @@
<template>
<ListItem class="condition-tile"
:value="value"
:active="active"
:read-only="readOnly"
:spacer-bottom="spacerBottom"
:spacer-top="spacerTop"
v-on="dragListeners"
@input="$emit('input', $event)">
<div class="drag-spacer" v-if="dragging && !spacerTop">&nbsp;</div>
<Tile v-bind="tileConf.props"
v-on="tileConf.on"
:draggable="!readOnly"
@click.stop="showConditionEditor = true"
v-if="!isElse">
<div class="tile-name">
<span class="icon">
<i class="fas fa-question" />
</span>
<span class="name">
<span class="keyword">if</span> [
<span class="code" v-text="value" /> ]
</span>
</div>
</Tile>
<Tile v-bind="tileConf.props"
v-on="tileConf.on"
:draggable="false"
:read-only="true"
@click="$emit('click')"
v-else>
<div class="tile-name">
<span class="icon">
<i class="fas fa-question" />
</span>
<span class="name">
<span class="keyword">else</span>
</span>
</div>
</Tile>
<div class="condition-editor-container" v-if="showConditionEditor && !readOnly">
<Modal title="Edit Condition"
:visible="true"
@close="showConditionEditor = false">
<ExpressionEditor :value="value"
:context="context"
ref="conditionEditor"
@input.prevent.stop="onConditionChange"
v-if="showConditionEditor">
<div class="header">
Condition
</div>
</ExpressionEditor>
</Modal>
</div>
</ListItem>
</template>
<script>
import ExpressionEditor from "./ExpressionEditor"
import ListItem from "./ListItem"
import Mixin from "./Mixin"
import Modal from "@/components/Modal"
import Tile from "@/components/elements/Tile"
export default {
emits: [
'change',
'click',
'delete',
'drag',
'dragend',
'dragenter',
'dragleave',
'dragover',
'drop',
'input',
],
mixins: [Mixin],
components: {
ExpressionEditor,
ListItem,
Modal,
Tile,
},
props: {
value: {
type: String,
required: true,
},
active: {
type: Boolean,
default: false,
},
isElse: {
type: Boolean,
default: false,
},
readOnly: {
type: Boolean,
default: false,
},
spacerBottom: {
type: Boolean,
default: true,
},
spacerTop: {
type: Boolean,
default: true,
},
},
computed: {
dragListeners() {
return this.readOnly ? {} : {
drag: this.onDragStart,
dragend: this.onDragEnd,
dragenter: (event) => this.$emit('dragenter', event),
dragleave: (event) => this.$emit('dragleave', event),
dragover: (event) => this.$emit('dragover', event),
drop: this.onDrop,
}
},
tileConf() {
return {
props: {
value: this.value,
class: 'keyword',
readOnly: this.readOnly,
withDelete: !this.readOnly,
},
on: {
...this.dragListeners,
delete: () => this.$emit('delete'),
input: this.onInput,
},
}
},
},
data() {
return {
dragging: false,
showConditionEditor: false,
}
},
methods: {
onConditionChange(event) {
this.showConditionEditor = false
if (this.readOnly) {
return
}
const condition = event.target.value?.trim()
if (!condition?.length) {
return
}
event.target.value = condition
this.$emit('change', condition)
},
onInput(value) {
if (!value || this.readOnly) {
return
}
this.$emit('input', value)
},
onDragStart(event) {
if (this.readOnly) {
return
}
this.dragging = true
this.$emit('drag', event)
},
onDragEnd(event) {
this.dragging = false
this.$emit('dragend', event)
},
onDrop(event) {
this.dragging = false
if (this.readOnly) {
return
}
this.$emit('drop', event)
},
},
}
</script>
<style lang="scss" scoped>
@import "common";
.action-tile {
.condition {
font-style: italic;
}
.drag-spacer {
height: 0;
}
:deep(.expression-editor) {
.header {
display: block;
}
}
}
</style>

170
platypush/backend/http/webapp/src/components/Action/ContextAutocomplete.vue Normal file
View file

@ -0,0 +1,170 @@
<template>
<div class="autocomplete-with-context">
<Autocomplete
v-bind="autocompleteProps"
@blur="onBlur"
@focus="onFocus"
@input="onInput"
@select="onSelect"
ref="input" />
<div class="spacer" ref="spacer" />
</div>
</template>
<script>
import Autocomplete from "@/components/elements/Autocomplete"
import AutocompleteProps from "@/mixins/Autocomplete/Props"
export default {
emits: ["blur", "focus", "input"],
components: { Autocomplete },
mixins: [AutocompleteProps],
props: {
quote: {
type: Boolean,
default: false,
},
},
computed: {
autocompleteItemsElement() {
return this.$refs.input?.$el?.querySelector(".items")
},
autocompleteItemsHeight() {
return this.autocompleteItemsElement?.clientHeight || 0
},
autocompleteProps() {
return {
...Object.fromEntries(
Object.entries(this.$props).filter(([key]) => key !== "quote")
),
items: this.items,
value: this.value,
inputOnBlur: false,
inputOnSelect: false,
showAllItems: true,
showResultsWhenBlank: true,
}
},
textInput() {
return this.$refs.input?.$refs?.input
},
},
methods: {
emitInput(value) {
this.$emit(
"input",
new CustomEvent("input", {
detail: value,
bubbles: true,
cancelable: true,
})
)
},
isWithinQuote(selection) {
let ret = false
let value = '' + this.value
selection = [...selection]
while (selection[0] > 0) {
if (value[selection[0] - 1] === '$' && value[selection[0]] === '{') {
ret = true
break
}
selection[0]--
}
if (!ret)
return false
ret = false
while (selection[1] < value.length) {
if (value[selection[1]] === '}') {
ret = true
break
}
selection[1]++
}
return ret
},
onBlur(event) {
this.$emit("blur", event)
this.$refs.spacer.style.height = "0"
},
onFocus(event) {
this.$emit("focus", event)
setTimeout(() => {
this.$refs.spacer.style.height = `${this.autocompleteItemsHeight}px`
}, 10)
},
onInput(event) {
const selection = this.textSelection()
this.emitInput(event)
this.resetSelection(selection)
},
onSelect(value) {
this.$nextTick(() => {
const selection = this.textSelection()
value = this.quote && !this.isWithinQuote(selection) ? `\${${value}}` : value
const newValue = typeof this.value === 'string' ? (
this.value.slice(0, selection[0]) +
value +
this.value.slice(selection[1])
) : value
this.emitInput(newValue)
this.resetSelection([selection[0] + value.length, selection[0] + value.length])
})
},
resetSelection(selection) {
setTimeout(() => {
this.textInput?.focus()
this.textInput?.setSelectionRange(selection[0], selection[1])
}, 10)
},
textSelection() {
return [this.textInput?.selectionStart, this.textInput?.selectionEnd]
},
},
}
</script>
<style lang="scss">
.autocomplete-with-context {
.item {
width: 100%;
display: flex;
flex-direction: column;
@include from($tablet) {
flex-direction: row;
}
.suffix {
display: flex;
font-size: 0.9em;
color: $disabled-fg;
@include from($tablet) {
margin-left: auto;
}
}
}
}
</style>

66
platypush/backend/http/webapp/src/components/Action/ContinueTile.vue Normal file
View file

@ -0,0 +1,66 @@
<template>
<ListItem class="continue-tile"
value="continue"
:active="active"
:read-only="readOnly"
:spacer-bottom="spacerBottom"
:spacer-top="spacerTop">
<Tile :value="value"
class="keyword"
:draggable="false"
:read-only="readOnly"
:with-delete="!readOnly"
@click.stop
@delete="$emit('delete')">
<div class="tile-name">
<span class="icon">
<i class="fas fa-rotate" />
</span>
<span class="name">
<span class="keyword">continue</span>
</span>
</div>
</Tile>
</ListItem>
</template>
<script>
import ListItem from "./ListItem"
import Tile from "@/components/elements/Tile"
export default {
emits: ['delete'],
components: {
ListItem,
Tile,
},
props: {
value: {
type: String,
default: 'continue',
},
active: {
type: Boolean,
default: false,
},
readOnly: {
type: Boolean,
default: false,
},
spacerBottom: {
type: Boolean,
default: true,
},
spacerTop: {
type: Boolean,
default: true,
},
},
}
</script>

64
platypush/backend/http/webapp/src/components/Action/EndBlockTile.vue Normal file
View file

@ -0,0 +1,64 @@
<template>
<ListItem class="end-block-container"
:active="active"
:value="{}"
:read-only="false"
:spacer-bottom="spacerBottom"
:spacer-top="spacerTop"
@dragenter="$emit('dragenter', $event)"
@dragleave="$emit('dragleave', $event)"
@dragover="$emit('dragover', $event)"
@drop="$emit('drop', $event)">
<Tile class="keyword" :draggable="false" :read-only="true">
<div class="tile-name">
<span class="icon">
<i :class="icon" />
</span>
<span class="name">
<span class="keyword" v-text="value" />
</span>
</div>
</Tile>
</ListItem>
</template>
<script>
import ListItem from "./ListItem"
import Mixin from "./Mixin"
import Tile from "@/components/elements/Tile"
export default {
mixins: [Mixin],
components: {
ListItem,
Tile,
},
props: {
value: {
type: String,
required: true,
},
icon: {
type: String,
required: true,
},
active: {
type: Boolean,
default: false,
},
spacerTop: {
type: Boolean,
default: false,
},
spacerBottom: {
type: Boolean,
default: false,
},
},
}
</script>

131
platypush/backend/http/webapp/src/components/Action/ExpressionEditor.vue Normal file
View file

@ -0,0 +1,131 @@
<template>
<form class="expression-editor" @submit.prevent.stop="onSubmit">
<label for="expression">
<slot />
<ContextAutocomplete :value="newValue"
:items="contextAutocompleteItems"
:quote="quote"
@input.stop="onInput"
ref="input" />
</label>
<label>
<button type="submit" :disabled="!hasChanges">
<i class="fas fa-check" />&nbsp;Save
</button>
</label>
</form>
</template>
<script>
import ContextAutocomplete from "./ContextAutocomplete"
import Mixin from "./Mixin"
export default {
emits: ['input'],
mixins: [Mixin],
components: { ContextAutocomplete },
props: {
value: {
type: [String, Number, Boolean, Object, Array],
default: '',
},
allowEmpty: {
type: Boolean,
default: false,
},
placeholder: {
type: String,
default: '',
},
quote: {
type: Boolean,
default: false,
},
},
data() {
return {
hasChanges: false,
newValue: null,
}
},
methods: {
onSubmit(event) {
const value = this.newValue?.trim()
if (!value.length && !this.allowEmpty) {
return
}
event.target.value = value
this.$emit('input', event)
},
onInput(event) {
if (event?.detail == null)
return
const value = '' + event.detail
if (!value?.trim()?.length) {
this.hasChanges = this.allowEmpty
} else {
this.hasChanges = value !== this.value
}
this.$nextTick(() => {
this.newValue = value
})
},
},
watch: {
value() {
this.hasChanges = false
},
},
mounted() {
this.hasChanges = false
this.newValue = this.value
if (!this.value?.trim?.()?.length) {
this.hasChanges = this.allowEmpty
}
this.$nextTick(() => {
this.textInput?.focus()
})
},
}
</script>
<style lang="scss" scoped>
@import "common";
.expression-editor {
min-width: 40em;
max-width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
label {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
padding: 1em;
input[type="text"] {
width: 100%;
margin-left: 1em;
}
}
}
</style>

206
platypush/backend/http/webapp/src/components/Action/ListItem.vue Normal file
View file

@ -0,0 +1,206 @@
<template>
<div class="row item list-item" :class="itemClass">
<div class="spacer-wrapper" :class="{ hidden: !spacerTop }">
<div class="spacer top" :class="{ active }" ref="dropTargetTop">
<div class="droppable-wrapper">
<div class="droppable-container">
<div class="droppable-frame">
<div class="droppable" />
</div>
</div>
</div>
</div>
<Droppable :element="$refs.dropTargetTop" :disabled="readOnly" v-on="droppableData.top.on" />
</div>
<div class="spacer top" v-if="dragging" />
<slot />
<div class="spacer bottom" v-if="dragging" />
<div class="spacer-wrapper" :class="{ hidden: !spacerBottom }">
<div class="spacer bottom" :class="{ active }" ref="dropTargetBottom">
<div class="droppable-wrapper">
<div class="droppable-container">
<div class="droppable-frame">
<div class="droppable" />
</div>
</div>
</div>
</div>
<Droppable :element="$refs.dropTargetBottom" :disabled="readOnly" v-on="droppableData.bottom.on" />
</div>
</div>
</template>
<script>
import Droppable from "@/components/elements/Droppable"
import Utils from "@/Utils"
export default {
mixins: [Utils],
emits: [
'contextmenu',
'dragend',
'dragenter',
'dragleave',
'dragover',
'drop',
],
components: {
Droppable,
},
props: {
active: {
type: Boolean,
default: false,
},
className: {
type: [String, Object],
default: '',
},
dragging: {
type: Boolean,
default: false,
},
readOnly: {
type: Boolean,
default: false,
},
spacerBottom: {
type: Boolean,
default: false,
},
spacerTop: {
type: Boolean,
default: true,
},
value: {
type: [String, Number, Boolean, Object, Array],
required: true,
},
},
computed: {
droppableData() {
return ['bottom', 'top'].reduce((acc, key) => {
acc[key] = {
on: {
dragend: this.onDragEnd,
dragenter: this.onDragEnter,
dragleave: this.onDragLeave,
dragover: this.onDragOver,
drop: this.onDrop,
},
}
return acc
}, {})
},
itemClass() {
return {
dragging: this.dragging,
...(this.className?.trim ? { [this.className]: true } : (this.className || {})),
}
},
},
methods: {
onDragEnd(event) {
this.$emit('dragend', event)
},
onDragEnter(event) {
this.$emit('dragenter', event)
},
onDragLeave(event) {
this.$emit('dragleave', event)
},
onDragOver(event) {
this.$emit('dragover', event)
},
onDrop(event) {
this.$emit('drop', event)
},
},
}
</script>
<style lang="scss" scoped>
$spacer-height: 1em;
.list-item {
margin: 0;
.spacer {
height: $spacer-height;
&.active {
border-top: 1px dashed transparent;
border-bottom: 1px dashed transparent;
.droppable-frame {
border: 1px dashed $selected-fg;
border-radius: 0.5em;
}
}
&.selected {
height: 5em;
padding: 0.5em 0;
.droppable-frame {
height: 100%;
margin: 0.5em 0;
padding: 0.1em;
border: 2px dashed $ok-fg;
}
.droppable {
height: 100%;
background: $play-btn-fg;
border: none;
box-shadow: none;
border-radius: 1em;
opacity: 0.5;
}
}
}
.droppable-wrapper,
.droppable-container {
width: 100%;
height: 100%;
display: flex;
align-items: center;
}
.droppable-container {
.droppable-frame {
width: 100%;
height: 1px;
opacity: 0.5;
}
.droppable {
width: 100%;
opacity: 0.8;
}
}
}
</style>

254
platypush/backend/http/webapp/src/components/Action/LoopBlock.vue Normal file
View file

@ -0,0 +1,254 @@
<template>
<div class="loop-block">
<ActionsBlock :value="value"
:collapsed="collapsed"
:context="context_"
:dragging="isDragging"
:indent="indent"
:is-inside-loop="true"
:read-only="readOnly"
@input="onActionsChange"
@drag="$emit('drag', $event)"
@dragend="$emit('dragend', $event)"
@dragenter="$emit('dragenter', $event)"
@dragleave="$emit('dragleave', $event)"
@dragover="$emit('dragover', $event)"
@drop="$emit('drop', $event)">
<template #before>
<LoopTile v-bind="loopTileConf.props"
v-on="loopTileConf.on"
@input.prevent.stop
:spacer-top="spacerTop"
:spacer-bottom="false" />
</template>
<template #after>
<EndBlockTile :value="`end ${type}`"
icon="fas fa-arrow-rotate-right"
:active="active"
:spacer-bottom="spacerBottom || dragging"
@drop="onDrop" />
</template>
</ActionsBlock>
</div>
</template>
<script>
import ActionsBlock from "./ActionsBlock"
import EndBlockTile from "./EndBlockTile"
import LoopTile from "./LoopTile"
import Mixin from "./Mixin"
export default {
name: 'LoopBlock',
mixins: [Mixin],
emits: [
'delete',
'drag',
'dragend',
'dragenter',
'dragleave',
'dragover',
'drop',
'input',
],
components: {
ActionsBlock,
LoopTile,
EndBlockTile,
},
props: {
value: {
type: Object,
required: true,
},
type: {
type: String,
required: true,
},
active: {
type: Boolean,
default: false,
},
async: {
type: Boolean,
default: false,
},
collapsed: {
type: Boolean,
default: false,
},
dragging: {
type: Boolean,
default: false,
},
indent: {
type: Number,
default: 0,
},
isInsideLoop: {
type: Boolean,
default: true,
},
readOnly: {
type: Boolean,
default: false,
},
spacerBottom: {
type: Boolean,
default: false,
},
spacerTop: {
type: Boolean,
default: false,
},
},
data() {
return {
dragging_: false,
}
},
computed: {
changeHandler() {
if (this.type === 'for') {
return this.onForChange
}
if (this.type === 'while') {
return this.onWhileChange
}
return () => {}
},
context_() {
const ctx = {...this.context}
const iterator = this.loop?.iterator?.trim()
if (iterator?.length) {
ctx[iterator] = {
source: 'for',
}
}
return ctx
},
isDragging() {
return this.dragging_ || this.dragging
},
key() {
return this.getKey(this.value)
},
loop() {
if (this.type === 'for') {
return this.getFor(this.key)
}
if (this.type === 'while') {
return {condition: this.getWhile(this.key)}
}
return {}
},
loopTileConf() {
return {
props: {
...this.loop,
active: this.active,
context: this.context_,
readOnly: this.readOnly,
spacerBottom: this.spacerBottom,
spacerTop: this.spacerTop,
type: this.type,
},
on: {
change: this.changeHandler,
delete: (event) => this.$emit('delete', event),
drag: this.onDragStart,
dragend: this.onDragEnd,
dragenterspacer: (event) => this.$emit('dragenter', event),
dragleavespacer: (event) => this.$emit('dragleave', event),
dragover: (event) => this.$emit('dragover', event),
dragoverspacer: (event) => this.$emit('dragoverspacer', event),
drop: this.onDrop,
},
}
},
},
methods: {
onActionsChange(value) {
if (!this.key || this.readOnly) {
return
}
this.$emit('input', { [this.key]: value })
},
onForChange(loop) {
const iterable = loop?.iterable?.trim()
const iterator = loop?.iterator?.trim()
const async_ = loop?.async || false
if (!this.key || this.readOnly || !iterable?.length || !iterator?.length) {
return
}
const keyword = 'for' + (async_ ? 'k' : '')
loop = `${keyword} ${iterator} in \${${iterable}}`
this.$emit('input', { [loop]: this.value[this.key] })
},
onWhileChange(condition) {
condition = condition?.trim()
if (!this.key || this.readOnly || !condition?.length) {
return
}
const loop = `while \${${condition}}`
this.$emit('input', { [loop]: this.value[this.key] })
},
onDragStart(event) {
if (this.readOnly) {
return
}
this.dragging_ = true
this.$emit('drag', event)
},
onDragEnd(event) {
this.dragging_ = false
this.$emit('dragend', event)
},
onDrop(event) {
if (this.readOnly) {
return
}
this.dragging_ = false
this.$emit('drop', event)
},
},
}
</script>

183
platypush/backend/http/webapp/src/components/Action/LoopEditor.vue Normal file
View file

@ -0,0 +1,183 @@
<template>
<form class="loop-editor" @submit.prevent.stop="onSubmit">
for
<label for="iterator">
<input type="text"
name="iterator"
autocomplete="off"
:autofocus="true"
placeholder="Iterator"
:value="newValue.iterator"
ref="iterator"
@input.stop="onInput('iterator', $event)" />
</label>
in
<label for="iterable">
<ContextAutocomplete :value="newValue.iterable"
:items="contextAutocompleteItems"
placeholder="Iterable"
@input.stop="onInput('iterable', $event)"
ref="iterable" />
</label>
<label class="async">
<input class="checkbox"
type="checkbox"
name="async"
ref="async"
:checked="async"
@input.stop="onInput('async', $event)" />&nbsp;
Run in parallel
</label>
<label>
<button type="submit" :disabled="!hasChanges">
<i class="fas fa-check" />&nbsp;Save
</button>
</label>
</form>
</template>
<script>
import ContextAutocomplete from "./ContextAutocomplete"
import Mixin from "./Mixin"
export default {
emits: ['change', 'input'],
mixins: [Mixin],
components: { ContextAutocomplete },
props: {
async: {
type: Boolean,
default: false,
},
iterable: {
type: String,
default: '',
},
iterator: {
type: String,
default: '',
},
},
data() {
return {
hasChanges: true,
newValue: {
iterator: null,
iterable: null,
async: null,
},
}
},
methods: {
onSubmit() {
const iterator = this.$refs.iterator.value.trim()
const iterable = this.$refs.iterable.value.trim()
const async_ = this.$refs.async.checked
if (!iterator.length || !iterable.length) {
return
}
this.$emit('change', { iterator, iterable, async: async_ })
},
onInput(target, event) {
const value = '' + (event.target?.value || event.detail)
if (!value?.trim()?.length) {
this.hasChanges = false
} else {
if (target === 'iterator') {
this.hasChanges = value !== this.iterator
}
if (!this.hasChanges && target === 'iterable') {
this.hasChanges = value !== this.iterable
}
if (!this.hasChanges && target === 'async') {
this.hasChanges = value !== this.async
}
}
this.$nextTick(() => {
this.newValue[target] = value
})
},
},
watch: {
value() {
this.hasChanges = false
this.newValue = {
iterator: this.iterator,
iterable: this.iterable,
async: this.async,
}
},
},
mounted() {
this.newValue = {
iterator: this.iterator,
iterable: this.iterable,
async: this.async,
}
this.$nextTick(() => {
this.$refs.iterator.focus()
})
},
}
</script>
<style lang="scss" scoped>
@import "common";
@mixin label {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
input[type="text"] {
width: 100%;
margin-left: 1em;
}
&.async {
justify-content: flex-start;
padding-bottom: 0;
}
}
.loop-editor {
min-width: 40em;
max-width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
label {
@include label;
padding: 1em;
}
}
:deep(label) {
@include label;
.autocomplete-with-context,
.autocomplete {
width: 100%;
}
}
</style>

244
platypush/backend/http/webapp/src/components/Action/LoopTile.vue Normal file
View file

@ -0,0 +1,244 @@
<template>
<ListItem class="loop-tile"
:value="value"
:active="active"
:read-only="readOnly"
:spacer-bottom="spacerBottom"
:spacer-top="spacerTop"
v-on="dragListeners"
@input="$emit('input', $event)">
<div class="drag-spacer" v-if="dragging && !spacerTop">&nbsp;</div>
<Tile v-bind="tileConf.props"
v-on="tileConf.on"
:draggable="!readOnly"
@click.stop="showLoopEditor = true">
<div class="tile-name">
<span class="icon">
<i class="fas fa-arrow-rotate-left" />
</span>
<span class="name" v-if="type === 'for'">
<span class="keyword">for<span v-if="async">k</span></span> <span class="code" v-text="iterator" />
<span class="keyword"> in </span> [
<span class="code" v-text="iterable" /> ]
</span>
<span class="name" v-else-if="type === 'while'">
<span class="keyword">while</span> [
<span class="code" v-text="condition" /> ]
</span>
</div>
</Tile>
<div class="editor-container" v-if="showLoopEditor && !readOnly">
<Modal title="Edit Loop"
:visible="true"
@close="showLoopEditor = false">
<LoopEditor :iterator="iterator"
:iterable="iterable"
:async="async"
:context="context"
@change="onLoopChange"
v-if="showLoopEditor && type === 'for'">
Loop
</LoopEditor>
<ExpressionEditor :value="condition"
:context="context"
@input.prevent.stop="onConditionChange"
v-else-if="showLoopEditor && type === 'while'">
Loop Condition
</ExpressionEditor>
</Modal>
</div>
</ListItem>
</template>
<script>
import ExpressionEditor from "./ExpressionEditor"
import ListItem from "./ListItem"
import LoopEditor from "./LoopEditor"
import Mixin from "./Mixin"
import Modal from "@/components/Modal"
import Tile from "@/components/elements/Tile"
export default {
mixins: [Mixin],
emits: [
'change',
'click',
'delete',
'drag',
'dragend',
'dragenter',
'dragleave',
'dragover',
'drop',
'input',
],
components: {
ExpressionEditor,
LoopEditor,
ListItem,
Modal,
Tile,
},
props: {
active: {
type: Boolean,
default: false,
},
async: {
type: Boolean,
default: false,
},
condition: {
type: String,
},
iterator: {
type: String,
},
iterable: {
type: String,
},
readOnly: {
type: Boolean,
default: false,
},
spacerBottom: {
type: Boolean,
default: true,
},
spacerTop: {
type: Boolean,
default: true,
},
type: {
type: String,
required: true,
},
},
computed: {
dragListeners() {
return this.readOnly ? {} : {
drag: this.onDragStart,
dragend: this.onDragEnd,
dragenter: (event) => this.$emit('dragenter', event),
dragleave: (event) => this.$emit('dragleave', event),
dragover: (event) => this.$emit('dragover', event),
drop: this.onDrop,
}
},
tileConf() {
return {
props: {
value: this.value,
class: 'keyword',
readOnly: this.readOnly,
withDelete: !this.readOnly,
},
on: {
...this.dragListeners,
delete: () => this.$emit('delete'),
input: this.onInput,
},
}
},
value() {
return `for ${this.iterator} in ${this.iterable}`
},
},
data() {
return {
dragging: false,
showLoopEditor: false,
}
},
methods: {
onConditionChange(event) {
this.showLoopEditor = false
if (this.readOnly) {
return
}
const condition = event.target.value?.trim()
if (!condition?.length) {
return
}
event.target.value = condition
this.$emit('change', condition)
},
onLoopChange(event) {
this.showLoopEditor = false
if (this.readOnly) {
return
}
this.$emit('change', event)
},
onInput(value) {
if (!value || this.readOnly) {
return
}
this.$emit('input', value)
},
onDragStart(event) {
if (this.readOnly) {
return
}
this.dragging = true
this.$emit('drag', event)
},
onDragEnd(event) {
this.dragging = false
this.$emit('dragend', event)
},
onDrop(event) {
this.dragging = false
if (this.readOnly) {
return
}
this.$emit('drop', event)
},
},
}
</script>
<style lang="scss" scoped>
@import "common";
.action-tile {
.condition {
font-style: italic;
}
.drag-spacer {
height: 0;
}
}
</style>

112
platypush/backend/http/webapp/src/components/Action/Mixin.vue Normal file
View file

@ -0,0 +1,112 @@
<script>
export default {
props: {
context: {
type: Object,
default: () => ({}),
},
},
computed: {
contextAutocompleteItems() {
return Object.entries(this.context).reduce((acc, [key, value]) => {
let suffix = '<span class="source">from <b>' + (
value?.source === 'local'
? 'local context'
: value?.source
) + '</b>'
if (value?.source === 'action' && value?.action?.action)
suffix += ` (<i>${value?.action?.action}</i>)`
suffix += '</span>'
acc.push(
{
text: key,
suffix: suffix,
}
)
return acc
}, [])
},
textInput() {
return this.$refs.input?.$refs?.input?.$refs?.input
},
},
methods: {
getCondition(value) {
value = this.getKey(value) || value
return value?.trim?.()?.match(/^if\s*\$\{(.*)\}\s*$/i)?.[1]?.trim?.()
},
getFor(value) {
value = this.getKey(value) || value
let m = value?.trim?.()?.match(/^for(k?)\s*(.*)\s*in\s*\$\{(.*)\}\s*$/i)
if (!m)
return null
return {
async: m[1].length > 0,
iterator: m[2].trim(),
iterable: m[3].trim(),
}
},
getKey(value) {
return this.isKeyword(value) ? Object.keys(value)[0] : null
},
getWhile(value) {
value = this.getKey(value) || value
return value?.trim?.()?.match(/^while\s*\$\{(.*)\}\s*$/i)?.[1]?.trim?.()
},
isAction(value) {
return typeof value === 'object' && !Array.isArray(value) && (value.action || value.name)
},
isActionsBlock(value) {
return this.getCondition(value) || this.isElse(value) || this.getFor(value) || this.getWhile(value)
},
isBreak(value) {
return value?.toLowerCase?.()?.trim?.() === 'break'
},
isContinue(value) {
return value?.toLowerCase?.()?.trim?.() === 'continue'
},
isKeyword(value) {
return (
value &&
typeof value === 'object' &&
!Array.isArray(value) &&
Object.keys(value).length === 1 &&
!this.isAction(value)
)
},
isElse(value) {
return (this.getKey(value) || value)?.toLowerCase?.()?.trim?.() === 'else'
},
isReturn(value) {
if (!value)
return false
if (Array.isArray(value))
return value.length === 1 && value[0]?.length && value[0].match(/^return\s*$/i)
return this.getKey(value) === 'return'
},
isSet(value) {
return this.getKey(value) === 'set'
},
},
}
</script>

23
platypush/backend/http/webapp/src/components/Action/Response.vue
View file

@ -23,7 +23,7 @@
<script>
import 'highlight.js/lib/common'
import 'highlight.js/styles/stackoverflow-dark.min.css'
import 'highlight.js/styles/nord.min.css'
import hljs from "highlight.js"
import Utils from "@/Utils"
@ -31,8 +31,13 @@ export default {
name: 'Response',
mixins: [Utils],
props: {
response: String,
error: String,
response: {
type: [String, Object, Array, Number, Boolean],
},
error: {
type: [String, Object],
},
},
computed: {
@ -46,7 +51,7 @@ export default {
jsonResponse() {
if (this.isJSON) {
return hljs.highlight(this.response, {language: 'json'}).value
return hljs.highlight(this.response.toString(), {language: 'json'}).value
}
return null
@ -57,4 +62,14 @@ export default {
<style lang="scss" scoped>
@import "common";
.response {
.buttons {
button:hover {
color: $default-hover-fg;
background: none;
border: none;
}
}
}
</style>

137
platypush/backend/http/webapp/src/components/Action/ReturnTile.vue Normal file
View file

@ -0,0 +1,137 @@
<template>
<ListItem class="return-tile"
:value="value"
:active="active"
:read-only="readOnly"
:spacer-bottom="spacerBottom"
:spacer-top="spacerTop"
@input="$emit('input', $event)">
<Tile v-bind="tileConf.props"
v-on="tileConf.on"
@click.stop="showExprEditor = true">
<div class="tile-name">
<span class="icon">
<i class="fas fa-angle-right" />
</span>
<span class="name">
<span class="keyword">return</span> <span class="code" v-text="value" />
</span>
</div>
</Tile>
<div class="editor-container" v-if="showExprEditor && !readOnly">
<Modal title="Edit Return"
:visible="true"
@close="showExprEditor = false">
<ExpressionEditor :value="value"
:allow-empty="true"
:context="context"
:quote="true"
placeholder="Optional return value"
ref="exprEditor"
@input.prevent.stop="onExprChange"
v-if="showExprEditor">
Value or Expression
</ExpressionEditor>
</Modal>
</div>
</ListItem>
</template>
<script>
import ExpressionEditor from "./ExpressionEditor"
import ListItem from "./ListItem"
import Mixin from "./Mixin"
import Modal from "@/components/Modal"
import Tile from "@/components/elements/Tile"
export default {
mixins: [Mixin],
emits: [
'change',
'click',
'delete',
'input',
],
components: {
ExpressionEditor,
ListItem,
Modal,
Tile,
},
props: {
value: {
type: [String, Number, Boolean, Object, Array],
default: '',
},
active: {
type: Boolean,
default: false,
},
readOnly: {
type: Boolean,
default: false,
},
spacerBottom: {
type: Boolean,
default: true,
},
spacerTop: {
type: Boolean,
default: true,
},
},
computed: {
tileConf() {
return {
props: {
value: this.value,
class: 'keyword',
draggable: false,
readOnly: this.readOnly,
withDelete: !this.readOnly,
},
on: {
delete: () => this.$emit('delete'),
input: this.onInput,
},
}
},
},
data() {
return {
showExprEditor: false,
}
},
methods: {
onExprChange(event) {
this.showExprEditor = false
if (this.readOnly) {
return
}
const expr = event.target.value?.trim()
event.target.value = expr
this.$emit('change', expr)
},
onInput(value) {
if (!value || this.readOnly) {
return
}
this.$emit('input', value)
},
},
}
</script>

369
platypush/backend/http/webapp/src/components/Action/SetVariablesTile.vue Normal file
View file

@ -0,0 +1,369 @@
<template>
<ListItem class="set-variables-tile"
:class="{active}"
:dragging="dragging_"
:value="value"
:active="active"
:read-only="readOnly"
:spacer-bottom="spacerBottom"
:spacer-top="spacerTop"
v-on="dragListeners"
@input="$emit('input', $event)">
<Tile v-bind="tileConf.props"
v-on="tileConf.on"
:draggable="!readOnly"
@click.stop="showEditor = true">
<div class="tile-name">
<span class="icon">
<i class="fas fa-square-root-variable" />
</span>
<span class="name">
<div class="keyword">set</div>
</span>
</div>
<div class="variables">
<div class="variable" v-for="(value, name) in value" :key="name">
<span class="code name" v-text="name" />&nbsp;=
<span class="code value" v-text="value" />
</div>
</div>
</Tile>
<div class="editor-container" v-if="showEditor && !readOnly">
<Modal title="Set Variables"
:visible="true"
@close="showEditor = false">
<form class="editor" @submit.prevent="onChange">
<div class="variable" v-for="(v, i) in newValue" :key="i">
<span class="name">
<input type="text"
placeholder="Variable Name"
@blur="onBlur(i)"
@input.prevent.stop
v-model="newValue[i][0]">&nbsp;=
</span>
<span class="value">
<ContextAutocomplete :value="newValue[i][1]"
:items="contextAutocompleteItems"
:quote="true"
:select-on-tab="false"
placeholder="Value"
@input.prevent.stop="newValue[i][1] = $event.detail" />
</span>
</div>
<div class="variable">
<span class="name">
<input type="text"
placeholder="Variable Name"
ref="newVarName"
@input.prevent.stop
v-model="newVariable.name">&nbsp;=
</span>
<span class="value">
<ContextAutocomplete :value="newVariable.value"
:items="contextAutocompleteItems"
:quote="true"
:select-on-tab="false"
placeholder="Value"
@input.prevent.stop="newVariable.value = $event.detail"
@blur="onBlur(null)" />
</span>
</div>
<div class="buttons">
<button type="submit" class="btn btn-primary">
Save
</button>
</div>
</form>
</Modal>
</div>
</ListItem>
</template>
<script>
import ContextAutocomplete from "./ContextAutocomplete"
import ListItem from "./ListItem"
import Mixin from "./Mixin"
import Modal from "@/components/Modal"
import Tile from "@/components/elements/Tile"
export default {
mixins: [Mixin],
emits: [
'click',
'delete',
'drag',
'dragend',
'dragenter',
'dragleave',
'dragover',
'drop',
'input',
],
components: {
ContextAutocomplete,
ListItem,
Modal,
Tile,
},
props: {
active: {
type: Boolean,
default: false,
},
dragging: {
type: Boolean,
default: false,
},
readOnly: {
type: Boolean,
default: false,
},
spacerBottom: {
type: Boolean,
default: true,
},
spacerTop: {
type: Boolean,
default: true,
},
value: {
type: Object,
default: () => ({}),
},
},
computed: {
dragListeners() {
return this.readOnly ? {} : {
drag: this.onDragStart,
dragend: this.onDragEnd,
dragenter: (event) => this.$emit('dragenter', event),
dragleave: (event) => this.$emit('dragleave', event),
dragover: (event) => this.$emit('dragover', event),
drop: this.onDrop,
}
},
tileConf() {
return {
props: {
value: this.value,
class: 'keyword',
readOnly: this.readOnly,
withDelete: !this.readOnly,
},
on: {
...this.dragListeners,
delete: () => this.$emit('delete'),
input: this.onInput,
},
}
},
},
data() {
return {
dragging_: false,
newValue: [],
newVariable: {
name: '',
value: '',
},
showEditor: false,
}
},
methods: {
onChange() {
this.showEditor = false
if (this.readOnly) {
return
}
const variables = this.newValue
if (this.newVariable.name?.trim?.()?.length) {
variables.push([this.newVariable.name, this.newVariable.value])
}
const args = variables.map(([name, value]) => {
name = this.sanitizeName(name)
try {
value = JSON.parse(value)
} catch (e) {
value = value?.trim()
}
return [name, value]
})
.reduce((acc, [name, value]) => {
if (!name?.length) {
return acc
}
acc[name] = value
return acc
}, {})
if (!Object.keys(args).length) {
return
}
this.onInput(args)
},
onInput(value) {
if (!value || this.readOnly) {
return
}
this.$emit('input', {set: value})
},
onBlur(index) {
if (this.readOnly) {
return
}
if (index != null) {
const name = this.sanitizeName(this.newValue[index][0])
if (!name?.length) {
this.newValue.splice(index, 1)
} else {
this.newValue[index][0] = name
}
} else {
const name = this.sanitizeName(this.newVariable.name)
const value = this.newVariable.value
if (name?.length) {
this.newValue.push([name, value])
this.newVariable = {
name: '',
value: '',
}
this.$nextTick(() => {
this.$refs.newVarName?.focus()
})
}
}
},
onDragStart(event) {
if (this.readOnly) {
return
}
this.dragging_ = true
this.$emit('drag', event)
},
onDragEnd(event) {
this.dragging_ = false
this.$emit('dragend', event)
},
onDrop(event) {
this.dragging_ = false
if (this.readOnly) {
return
}
this.$emit('drop', event)
},
sanitizeName(name) {
return name?.trim()?.replace(/[^\w_]/g, '_')
},
syncValue() {
this.newValue = Object.entries(this.value)
},
},
watch: {
showEditor(value) {
if (!value) {
this.newVariable = {
name: '',
value: '',
}
} else {
this.$nextTick(() => {
this.$refs.newVarName?.focus()
})
}
},
value: {
immediate: true,
handler() {
this.syncValue()
},
},
},
mounted() {
this.syncValue()
this.$nextTick(() => {
this.$refs.newVarName?.focus()
})
},
}
</script>
<style lang="scss" scoped>
@import "common";
.set-variables-tile {
.variables {
margin-left: 2.5em;
}
.variable {
.value {
font-style: italic;
}
}
.drag-spacer {
height: 0;
}
.editor {
display: flex;
flex-direction: column;
padding: 1em;
.variable {
display: flex;
margin-bottom: 1em;
.value {
flex: 1;
input[type="text"] {
width: 100%;
}
}
}
.buttons {
margin: 1em;
}
}
}
</style>

61
platypush/backend/http/webapp/src/components/Action/common.scss
View file

@ -148,42 +148,51 @@ form {
}
}
.args-list {
padding-top: 0.5em;
overflow: auto;
:deep(.args-body) {
.args-list {
padding-top: 0.5em;
overflow: auto;
@include until($tablet) {
width: 100%;
}
@include from($tablet) {
width: $params-tablet-width;
margin-right: 1.5em;
}
@include from($desktop) {
width: $params-desktop-width;
}
.arg {
margin-bottom: .25em;
@include until($tablet) {
width: 100%;
}
.required-flag {
width: 1.25em;
font-weight: bold;
margin-left: 0.25em;
@include from($tablet) {
width: $params-tablet-width;
margin-right: 1.5em;
}
input {
@include from($desktop) {
width: $params-desktop-width;
}
label {
display: flex;
align-items: center;
}
.arg {
margin-bottom: .25em;
@include until($tablet) {
width: 100%;
}
.required-flag {
width: 1.25em;
display: inline-block;
font-weight: bold;
margin-left: 0.25em;
text-align: center;
}
}
.autocomplete-with-context {
width: calc(100% - 1.5em);
}
}
.action-arg-value {
width: 100%;
.action-arg-value {
width: 100%;
}
}
}

16
platypush/backend/http/webapp/src/components/Action/vars.scss
View file

@ -1,15 +1,7 @@
$section-shadow: 0 3px 3px 0 rgba(187,187,187,0.75), 0 3px 3px 0 rgba(187,187,187,0.75);
$title-bg: #eee;
$title-border: 1px solid #ddd;
$title-shadow: 0 3px 3px 0 rgba(187,187,187,0.75);
$extra-params-btn-bg: #eee;
$doc-shadow: 0 1px 3px 1px #d7d3c0, inset 0 1px 1px 0 #d7d3c9;
$output-bg: #151515;
$output-shadow: $doc-shadow;
$response-fg: white;
$error-fg: red;
$doc-bg: linear-gradient(#effbe3, #e0ecdb);
$procedure-submit-btn-bg: #ebffeb;
$extra-params-btn-bg: $title-bg;
$response-fg: $inverse-fg;
$error-fg: $error-fg-2;
$procedure-submit-btn-bg: $submit-btn-bg;
$section-title-bg: rgba(0, 0, 0, .04);
$params-desktop-width: 30em;
$params-tablet-width: 20em;

14
platypush/backend/http/webapp/src/components/File/Browser.vue
View file

@ -5,7 +5,7 @@
<div class="nav" ref="nav">
<div class="path-container">
<span class="path" v-if="hasHomepage">
<span class="token" @click="path = null">
<span class="token" @click.stop="path = null">
<i class="fa fa-home" />
</span>
@ -17,7 +17,7 @@
<span class="path"
v-for="(token, i) in pathTokens"
:key="i"
@click="path = pathTokens.slice(0, i + 1).join('/').slice(1)">
@click.stop="path = pathTokens.slice(0, i + 1).join('/').slice(1)">
<span class="token">
{{ token }}
</span>
@ -30,7 +30,7 @@
</div>
<div class="btn-container">
<Dropdown :style="{'min-width': '11em'}">
<Dropdown :style="{'min-width': '11em'}" @click.prevent>
<DropdownItem icon-class="fa fa-plus" text="New Folder" @input="showCreateDirectory = true" />
<DropdownItem icon-class="fa fa-file" text="Create File" @input="showCreateFile = true" />
<DropdownItem icon-class="fa fa-upload" text="Upload" @input="showUpload = true" />
@ -49,7 +49,7 @@
<div class="items" ref="items" v-else>
<div class="row item"
@click="onBack"
@click.stop="onBack"
v-if="(path?.length && path !== '/') || hasBack">
<div class="col-10 left side">
<i class="icon fa fa-folder" />
@ -59,7 +59,7 @@
<div class="row item"
ref="selectCurrent"
@click="onSelectCurrentDirectory"
@click.stop="onSelectCurrentDirectory"
v-if="hasSelectCurrentDirectory">
<div class="col-10 left side">
<i class="icon fa fa-hand-point-right" />
@ -67,7 +67,7 @@
</div>
</div>
<div class="row item" v-for="(file, i) in filteredFiles" :key="i" @click="onItemSelect(file)">
<div class="row item" v-for="(file, i) in filteredFiles" :key="i" @click.stop="onItemSelect(file)">
<div class="col-10">
<i class="icon fa" :class="fileIcons[file.path]" />
<span class="name">
@ -76,7 +76,7 @@
</div>
<div class="col-2 actions" v-if="Object.keys(fileActions[file.path] || {})?.length">
<Dropdown :style="{'min-width': '11em'}">
<Dropdown :style="{'min-width': '11em'}" @click.prevent>
<DropdownItem
v-for="(action, key) in fileActions[file.path]"
:key="key"

98
platypush/backend/http/webapp/src/components/File/Editor.vue
View file

@ -9,10 +9,15 @@
<div class="editor-body">
<div class="line-numbers" ref="lineNumbers">
<span class="line-number" v-for="n in lines" :key="n" v-text="n" />
<span class="line-number"
:class="{selected: selectedLine === n}"
v-for="n in lines"
:key="n"
@click="selectedLine = selectedLine === n ? null : n"
v-text="n" />
</div>
<pre ref="pre"><code ref="content" v-html="displayedContent" /></pre>
<pre ref="pre"><code ref="content" v-html="displayedContent" /><div class="selected-line" ref="selectedLine" v-if="selectedLine != null" /></pre>
<textarea ref="textarea" v-model="content" @scroll="syncScroll" @input.stop />
</div>
@ -28,7 +33,7 @@
<script>
import axios from 'axios';
import hljs from 'highlight.js';
import 'highlight.js/styles/github.css';
import 'highlight.js/styles/intellij-light.css';
import FloatingButton from "@/components/elements/FloatingButton";
import Highlighter from "./Highlighter";
@ -54,6 +59,11 @@ export default {
default: false,
},
line: {
type: [String, Number],
default: null,
},
withSave: {
type: Boolean,
default: true,
@ -71,6 +81,7 @@ export default {
initialContentHash: 0,
loading: false,
saving: false,
selectedLine: null,
type: null,
}
},
@ -139,6 +150,12 @@ export default {
} finally {
this.loading = false
}
if (this.selectedLine) {
setTimeout(() => {
this.scrollToLine(this.selectedLine)
}, 1000)
}
},
async saveFile() {
@ -190,6 +207,17 @@ export default {
})
},
scrollToLine(line) {
const offset = (line - 1) * parseFloat(getComputedStyle(this.$refs.pre).lineHeight)
this.$refs.textarea.scrollTo({
top: offset,
left: 0,
behavior: 'smooth',
})
return offset
},
highlightContent() {
this.highlighting = true
@ -243,7 +271,7 @@ export default {
},
reset() {
this.setUrlArgs({file: null})
this.setUrlArgs({file: null, line: null})
this.removeBeforeUnload()
this.removeKeyListener()
},
@ -276,9 +304,36 @@ export default {
this.highlightedContent = this.content
}
},
selectedLine(line) {
line = parseInt(line)
if (isNaN(line)) {
return
}
const textarea = this.$refs.textarea
const lines = this.content.split('\n')
const cursor = lines.slice(0, line - 1).join('\n').length + 1
textarea.setSelectionRange(cursor, cursor)
textarea.focus()
this.setUrlArgs({line})
this.$nextTick(() => {
const offset = this.scrollToLine(line)
this.$refs.selectedLine.style.top = `${offset}px`
})
},
},
mounted() {
const args = this.getUrlArgs()
const line = parseInt(this.line || args.line || 0)
if (line) {
if (!isNaN(line)) {
this.selectedLine = line
}
}
this.loadFile()
this.addBeforeUnload()
this.addKeyListener()
@ -332,8 +387,10 @@ $line-numbers-width: 2.5em;
}
.editor-body {
font-family: $monospace-font;
pre, textarea, code, .line-numbers {
font-family: 'Fira Code', 'Noto Sans Mono', 'Inconsolata', 'Courier New', monospace;
font-family: $monospace-font;
position: absolute;
top: 0;
height: 100%;
@ -341,6 +398,10 @@ $line-numbers-width: 2.5em;
white-space: pre;
}
pre, textarea, code {
background: transparent;
}
.line-numbers {
width: $line-numbers-width;
background: $tab-bg;
@ -356,6 +417,15 @@ $line-numbers-width: 2.5em;
width: 100%;
text-align: right;
padding-right: 0.25em;
cursor: pointer;
&:hover {
background: $hover-bg;
}
&.selected {
background: $selected-bg;
}
}
}
@ -372,16 +442,32 @@ $line-numbers-width: 2.5em;
background: transparent;
overflow-wrap: normal;
overflow-x: scroll;
z-index: 1;
z-index: 2;
color: rgba(0, 0, 0, 0);
caret-color: black;
border: none;
outline: none;
}
.selected-line {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1.5em;
background: rgba(110, 255, 160, 0.25);
}
}
:deep(.floating-btn) {
z-index: 5;
}
// Fix for some hljs styles that render white text on white background
:deep(code) {
.hljs-subst {
color: $selected-fg !important;
}
}
}
</style>

90
platypush/backend/http/webapp/src/components/File/EditorModal.vue
View file

@ -8,6 +8,7 @@
<FileEditor ref="fileEditor"
:file="file"
:is-new="isNew"
:line="line"
@save="$emit('save', $event)"
v-if="file" />
</div>
@ -26,10 +27,11 @@
import ConfirmDialog from "@/components/elements/ConfirmDialog";
import FileEditor from "./Editor";
import Modal from "@/components/Modal";
import Utils from '@/Utils'
export default {
emits: ['close', 'open', 'save'],
mixins: [Modal],
mixins: [Modal, Utils],
components: {
ConfirmDialog,
FileEditor,
@ -47,6 +49,11 @@ export default {
default: false,
},
line: {
type: [String, Number],
default: null,
},
withSave: {
type: Boolean,
default: true,
@ -113,15 +120,28 @@ export default {
onClose() {
this.$refs.fileEditor.reset()
this.setUrlArgs({ maximized: null })
this.$emit('close')
},
},
watch: {
maximized() {
this.setUrlArgs({ maximized: this.maximized })
},
},
mounted() {
this.maximized = !!this.getUrlArgs().maximized
},
}
</script>
<style lang="scss" scoped>
@import "src/style/items";
$maximized-modal-header-height: 2.75em;
.file-editor-root {
.file-editor-modal {
:deep(.modal) {
@ -133,45 +153,73 @@ export default {
.modal-body {
width: 100%;
height: 50em;
min-width: 30em;
max-height: calc(100vh - 2em);
}
.content {
@extend .expand;
}
}
&:not(.maximized) {
:deep(.body) {
@include until($tablet) {
width: calc(100vw - 2em);
}
:deep(.modal) {
.body {
@include until($tablet) {
width: calc(100vw - 2em);
}
@include from($tablet) {
width: 40em;
max-width: 100%;
}
@include from($tablet) {
width: 40em;
max-width: 100%;
}
@include from($desktop) {
width: 100%;
min-width: 50em;
@include from($desktop) {
width: 100%;
min-width: 50em;
}
.modal-body {
height: 50em;
}
}
}
}
&.maximized {
:deep(.body) {
width: 100vw;
height: 100vh;
:deep(.modal) {
width: calc(100vw - 2em);
height: calc(100vh - 2em);
.content, .modal-body {
width: 100%;
height: 100%;
max-height: 100%;
}
.header {
height: $maximized-modal-header-height;
}
.body {
height: calc(100% - #{$maximized-modal-header-height});
max-height: 100%;
}
}
}
}
.confirm-dialog-container {
:deep(.modal) {
.content {
.body {
min-width: 30em;
max-width: 100%;
}
width: 35em !important;
height: 9em !important;
max-width: 100%;
max-height: 100%;
.body {
width: 100% !important;
height: 100% !important;
justify-content: center;
}
}
}

107
platypush/backend/http/webapp/src/components/Modal.vue
View file

@ -1,7 +1,11 @@
<template>
<div class="modal-container fade-in" :id="id" :class="{hidden: !isVisible}"
:style="{'--z-index': zIndex}" @click="close">
<div class="modal" :class="$attrs.class">
<div class="modal-container fade-in"
:class="{hidden: !isVisible}"
:id="id"
:style="{'--z-index': zIndex}"
ref="container"
@click.stop="close">
<div class="modal" :class="$attrs.class" ref="modal">
<div class="content" :style="{'--width': width, '--height': height}" @click.stop>
<div class="header" :class="{uppercase: uppercase}" v-if="title">
<div class="title" v-text="title" v-if="title" />
@ -9,11 +13,11 @@
<button v-for="(button, index) in buttons"
:key="index"
:title="button.title"
@click="button.action">
@click.stop="button.action">
<i :class="button.icon" />
</button>
<button title="Close" alt="Close" @click="close">
<button title="Close" alt="Close" @click.stop="close">
<i class="fas fa-xmark" />
</button>
</div>
@ -27,6 +31,8 @@
</template>
<script>
import { bus } from "@/bus";
export default {
name: "Modal",
emits: ['close', 'open'],
@ -90,9 +96,9 @@ export default {
data() {
return {
timeoutId: undefined,
prevVisible: this.visible,
ignoreEscape: false,
isVisible: this.visible,
timeoutId: undefined,
}
},
@ -103,12 +109,18 @@ export default {
},
methods: {
close() {
close(event) {
if (this.beforeClose && !this.beforeClose())
return
this.prevVisible = this.isVisible
if (event)
event.preventDefault()
if (!this.isVisible)
return
this.isVisible = false
this.visibleHndl(false, true)
},
hide() {
@ -116,8 +128,11 @@ export default {
},
show() {
this.prevVisible = this.isVisible
if (this.isVisible)
return
this.isVisible = true
this.visibleHndl(true, false)
},
open() {
@ -131,28 +146,73 @@ export default {
this.show()
},
onEscape() {
if (!this.isVisible || this.ignoreEscape || !this.$refs.container)
return
const myZIndex = parseInt(getComputedStyle(this.$refs.container).zIndex)
const maxZIndex = Math.max(
...Array.from(
document.querySelectorAll('.modal-container:not(.hidden)')
).map((modal) =>
parseInt(getComputedStyle(modal).zIndex)
)
)
// Close only if it's the outermost modal
if (myZIndex === maxZIndex)
this.close()
},
onKeyUp(event) {
event.stopPropagation()
if (event.key === 'Escape') {
this.close()
this.onEscape()
}
},
onModalCloseMessage() {
if (!this.isVisible)
return
this.ignoreEscape = true
setTimeout(() => this.ignoreEscape = false, 100)
},
visibleHndl(visible, oldVisible) {
if (!this.$el?.classList?.contains('modal-container'))
return
if (!visible && oldVisible) {
this.$emit('close')
bus.emit('modal-close', this)
} else if (visible && !oldVisible) {
this.$emit('open')
bus.emit('modal-open', this)
}
},
},
watch: {
visible(value, oldValue) {
this.visibleHndl(value, oldValue)
this.$nextTick(() => this.isVisible = value)
},
isVisible(value, oldValue) {
oldValue = oldValue == null ? this.visible : oldValue
this.visibleHndl(value, oldValue)
},
},
mounted() {
const self = this
const visibleHndl = (visible) => {
if (!visible)
self.$emit('close')
else
self.$emit('open')
self.isVisible = visible
}
document.body.addEventListener('keyup', this.onKeyUp)
this.$watch(() => this.visible, visibleHndl)
this.$watch(() => this.isVisible, visibleHndl)
this.visibleHndl(this.isVisible, this.isVisible ? false : undefined)
},
unmouted() {
document.body.removeEventListener('keyup', this.onKeyUp)
this.visibleHndl(false, this.isVisible)
},
unmounted() {
@ -160,7 +220,6 @@ export default {
},
updated() {
this.prevVisible = this.isVisible
if (this.isVisible) {
// Make sure that a newly opened or visible+updated modal always comes to the front
let maxZIndex = parseInt(getComputedStyle(this.$el).zIndex)

5
platypush/backend/http/webapp/src/components/Nav.vue
View file

@ -117,7 +117,7 @@ export default {
computed: {
specialPlugins() {
return ['execute', 'entities', 'file']
return ['execute', 'entities', 'file', 'procedures']
},
panelNames() {
@ -131,6 +131,7 @@ export default {
let panelNames = Object.keys(this.panels).sort()
panelNames = prepend(panelNames, 'file')
panelNames = prepend(panelNames, 'procedures')
panelNames = prepend(panelNames, 'execute')
panelNames = prepend(panelNames, 'entities')
return panelNames
@ -156,6 +157,8 @@ export default {
return 'Execute'
if (name === 'file')
return 'Files'
if (name === 'procedures')
return 'Procedures'
return name
},

91
platypush/backend/http/webapp/src/components/Procedure/ProcedureDump.vue Normal file
View file

@ -0,0 +1,91 @@
<template>
<div class="procedure-dump">
<Loading v-if="loading" />
<div class="dump-container" v-else>
<CopyButton :text="yaml?.trim()" />
<pre><code v-html="highlightedYAML" /></pre>
</div>
</div>
</template>
<script>
import 'highlight.js/lib/common'
import 'highlight.js/styles/nord.min.css'
import hljs from "highlight.js"
import CopyButton from "@/components/elements/CopyButton"
import Loading from "@/components/Loading";
import Utils from "@/Utils"
export default {
mixins: [Utils],
components: {
CopyButton,
Loading
},
props: {
procedure: {
type: Object,
required: true
}
},
data() {
return {
loading: false,
yaml: null,
}
},
computed: {
highlightedYAML() {
return hljs.highlight(
'# You can copy this code in a YAML configuration file\n' +
'# if you prefer to store this procedure in a file.\n' +
this.yaml || '',
{language: 'yaml'}
).value
},
},
methods: {
async refresh() {
this.loading = true
try {
this.yaml = await this.request('procedures.to_yaml', {procedure: this.procedure})
} finally {
this.loading = false
}
}
},
mounted() {
this.refresh()
},
}
</script>
<style lang="scss" scoped>
.procedure-dump {
width: 100%;
height: 100%;
background: #181818;
.dump-container {
width: 100%;
height: 100%;
position: relative;
padding: 1em;
overflow: auto;
}
pre {
margin: 0;
padding: 0;
white-space: pre-wrap;
word-wrap: break-word;
}
}
</style>

874
platypush/backend/http/webapp/src/components/Procedure/ProcedureEditor.vue
View file

@ -1,73 +1,228 @@
<template>
<div class="procedure-editor-container"
:class="{dragging: dragItem != null}">
<div class="procedure-editor">
<form autocomplete="off" @submit.prevent="executeAction">
<div class="name-editor-container" v-if="withName">
<div class="row item">
<div class="name">
<label>
<i class="icon fas fa-pen-to-square" />
Name
</label>
</div>
<div class="procedure-editor-container">
<main>
<div class="procedure-editor">
<form class="procedure-edit-form" autocomplete="off" @submit.prevent="executeAction">
<input type="submit" style="display: none" />
<div class="value">
<input type="text" v-model="newValue.name" />
<div class="name-editor-container" v-if="withName">
<div class="row item">
<div class="name">
<label>
<i class="icon fas fa-pen-to-square" />
Name
</label>
</div>
<div class="value">
<input type="text"
v-model="newValue.name"
ref="nameInput"
:disabled="readOnly" />
</div>
</div>
</div>
<div class="icon-editor-container"
v-if="Object.keys(newValue?.meta?.icon || {}).length">
<IconEditor :entity="newValue"
@input="onIconChange"
@change="onIconChange" />
</div>
<div class="args-editor-container" v-if="showArgs">
<h3>
<i class="icon fas fa-code" />&nbsp;
Arguments
</h3>
<div class="args" ref="args">
<div class="row item" v-for="(arg, index) in newValue.args" :key="index">
<input type="text"
placeholder="Argument Name"
:value="arg"
:disabled="readOnly"
@input="onArgInput($event.target.value?.trim(), index)"
@blur="onArgEdit(arg, index)" />
</div>
<div class="row item new-arg" v-if="!readOnly">
<input type="text"
placeholder="New Argument"
ref="newArgInput"
v-model="newArg"
@blur="onNewArg" />
</div>
</div>
</div>
<div class="actions-container">
<h3 v-if="showArgs">
<i class="icon fas fa-play" />&nbsp;
Actions
</h3>
<ActionsList :value="newValue.actions"
:context="context"
:read-only="readOnly"
@input="onActionsEdit" />
</div>
<!-- Structured response container -->
<div class="response-container" v-if="response || error">
<Response :response="response" :error="error" />
</div>
</form>
</div>
<div class="args-modal-container" ref="argsModalContainer" v-if="showArgsModal">
<Modal title="Run Arguments"
:visible="true"
ref="argsModal"
@close="onRunArgsModalClose">
<form class="args" @submit.prevent="executeWithArgs">
<div class="row item" v-for="value, arg in runArgs" :key="arg">
<span class="arg-name">
<span v-if="newValue.args?.includes(arg)">
{{ arg }}
</span>
<span v-else>
<input type="text"
placeholder="New Argument"
:value="arg"
@input="onEditRunArgName($event, arg)">
</span>
<span class="mobile">
&nbsp;=&nbsp;
</span>
</span>
<span class="arg-value">
<span class="from tablet">
&nbsp;=&nbsp;
</span>
<input type="text"
placeholder="Argument Value"
:ref="`run-arg-value-${arg}`"
v-model="runArgs[arg]" />
</span>
</div>
<div class="row item new-arg">
<span class="arg-name">
<input type="text"
placeholder="New Argument"
ref="newRunArgName"
v-model="newRunArg[0]"
@blur="onNewRunArgName" />
<span class="mobile">
&nbsp;=&nbsp;
</span>
</span>
<span class="arg-value">
<span class="from tablet">
&nbsp;=&nbsp;
</span>
<input type="text"
placeholder="Argument Value"
v-model="newRunArg[1]" />
</span>
</div>
<input type="submit" style="display: none" />
<FloatingButton icon-class="fa fa-play"
title="Run Procedure"
:disabled="newValue.actions?.length === 0 || running"
@click="executeWithArgs" />
</form>
</Modal>
</div>
<div class="confirm-dialog-container">
<ConfirmDialog ref="confirmClose" @input="forceClose">
This procedure has unsaved changes. Are you sure you want to close it?
</ConfirmDialog>
</div>
<div class="confirm-dialog-container">
<ConfirmDialog ref="confirmOverwrite" @input="forceSave">
A procedure with the same name already exists. Do you want to overwrite it?
</ConfirmDialog>
</div>
<div class="spacer" />
<div class="floating-buttons">
<div class="buttons left">
<FloatingButtons direction="row">
<FloatingButton icon-class="fa fa-code"
left glow
title="Export to YAML"
@click="showYAML = true" />
<FloatingButton icon-class="fa fa-copy"
left glow
title="Duplicate Procedure"
@click="duplicate"
v-if="newValue.name?.length && newValue.actions?.length" />
</FloatingButtons>
</div>
<div class="actions">
<div class="row item" v-for="(action, index) in newValue.actions" :key="index">
<div class="drop-target-container"
:class="{active: dropIndex === index}"
v-if="dragItem != null && dragItem > index"
@dragover.prevent="dropIndex = index"
@dragenter.prevent="dropIndex = index"
@dragleave.prevent="dropIndex = undefined"
@dragend.prevent="dropIndex = undefined"
@drop="onDrop(index)">
<div class="drop-target" />
</div>
<div class="separator" v-else-if="dragItem != null && dragItem === index" />
<ActionTile :value="action"
draggable with-delete
@drag="dragItem = index"
@drop="dragItem = undefined"
@input="editAction($event, index)"
@delete="deleteAction(index)" />
<div class="drop-target-container"
:class="{active: dropIndex === index}"
@dragover.prevent="dropIndex = index"
@dragenter.prevent="dropIndex = index"
@dragleave.prevent="dropIndex = undefined"
@dragend.prevent="dropIndex = undefined"
@drop="onDrop(index)"
v-if="dragItem != null && dragItem < index">
<div class="drop-target" />
</div>
<div class="separator" v-else-if="dragItem != null && dragItem === index" />
</div>
<div class="row item">
<ActionTile :value="newAction" @input="addAction" />
</div>
<div class="buttons right">
<FloatingButtons direction="row">
<FloatingButton icon-class="fa fa-save"
right glow
title="Save Procedure"
:disabled="!canSave"
@click="save"
v-if="showSave" />
<FloatingButton icon-class="fa fa-play"
right glow
title="Run Procedure"
:disabled="newValue.actions?.length === 0 || running"
@click="executeAction" />
</FloatingButtons>
</div>
</div>
</main>
<!-- Structured response container -->
<Response :response="response" :error="error" />
</form>
<div class="duplicate-editor-container" v-if="duplicateValue != null">
<Modal title="Duplicate Procedure"
ref="duplicateModal"
:visible="true"
:before-close="(() => $refs.duplicateEditor?.checkCanClose())"
@close="duplicateValue = null">
<ProcedureEditor :value="duplicateValue"
:with-name="true"
:with-save="true"
:modal="() => $refs.duplicateModal"
ref="duplicateEditor"
@input="duplicateValue = null" />
</Modal>
</div>
<div class="dump-modal-container" v-if="showYAML">
<Modal title="Procedure Dump"
:visible="true"
@close="showYAML = false">
<ProcedureDump :procedure="newValue" />
</Modal>
</div>
</div>
</template>
<script>
import ActionTile from "@/components/Action/ActionTile"
import ActionsList from "@/components/Action/ActionsList"
import ConfirmDialog from "@/components/elements/ConfirmDialog";
import FloatingButton from "@/components/elements/FloatingButton";
import FloatingButtons from "@/components/elements/FloatingButtons";
import IconEditor from "@/components/panels/Entities/IconEditor";
import Modal from "@/components/Modal";
import ProcedureDump from "./ProcedureDump";
import Response from "@/components/Action/Response"
import Utils from "@/Utils"
@ -75,7 +230,13 @@ export default {
mixins: [Utils],
emits: ['input'],
components: {
ActionTile,
ActionsList,
ConfirmDialog,
FloatingButton,
FloatingButtons,
IconEditor,
Modal,
ProcedureDump,
Response,
},
@ -85,6 +246,11 @@ export default {
default: false,
},
withSave: {
type: Boolean,
default: false,
},
value: {
type: Object,
default: () => ({
@ -92,23 +258,154 @@ export default {
actions: [],
}),
},
readOnly: {
type: Boolean,
default: false,
},
modal: {
type: [Object, Function],
},
},
data() {
return {
loading: false,
running: false,
response: undefined,
confirmOverwrite: false,
duplicateValue: null,
error: undefined,
actions: [],
newValue: {...this.value},
loading: false,
newAction: {},
dragItem: undefined,
dropIndex: undefined,
newArg: null,
newRunArg: [null, null],
newValue: {},
response: undefined,
running: false,
runArgs: {},
shouldForceClose: false,
showArgsModal: false,
showYAML: false,
}
},
computed: {
floatingButtons() {
return this.$el.querySelector('.floating-btns')
},
canSave() {
if (
!this.withSave ||
this.readOnly ||
!this.newValue?.name?.length ||
!this.newValue?.actions?.length
)
return false
return this.valueString !== this.newValueString
},
valueString() {
return JSON.stringify(this.value)
},
newValueString() {
return JSON.stringify(this.newValue)
},
context() {
return this.newValue?.args?.reduce((acc, arg) => {
acc[arg] = {
source: 'args',
}
return acc
}, {})
},
modal_() {
if (this.readOnly)
return null
return typeof this.modal === 'function' ? this.modal() : this.modal
},
shouldConfirmClose() {
return this.canSave && !this.shouldForceClose
},
showArgs() {
return !this.readOnly || this.newValue.args?.length
},
showSave() {
return this.withSave && !this.readOnly
},
},
methods: {
async save() {
if (!this.canSave)
return
this.loading = true
try {
const overwriteOk = await this.overwriteOk()
if (!overwriteOk)
return
const actions = this.newValue.actions.map((action) => {
const a = {...action}
if ('name' in a) {
a.action = a.name
delete a.name
}
return a
})
const args = {...this.newValue, actions}
if (this.value?.name?.length && this.value.name !== this.newValue.name) {
args.old_name = this.value.name
}
await this.request('procedures.save', args)
this.$emit('input', this.newValue)
this.notify({
text: 'Procedure saved successfully',
image: {
icon: 'check',
}
})
} finally {
this.loading = false
}
},
async forceSave() {
this.confirmOverwrite = true
await this.save()
},
async overwriteOk() {
if (this.confirmOverwrite) {
this.confirmOverwrite = false
return true
}
const procedures = await this.request('procedures.status', {publish: false})
if (
this.value.name?.length &&
this.value.name !== this.newValue.name &&
procedures[this.newValue.name]
) {
this.$refs.confirmOverwrite?.open()
return false
}
return true
},
onResponse(response) {
this.response = (
typeof response === 'string' ? response : JSON.stringify(response, null, 2)
@ -118,50 +415,242 @@ export default {
},
onError(error) {
if (error.message)
error = error.message
this.response = undefined
this.error = error
},
onDone() {
this.running = false
this.runArgs = {}
},
emitInput() {
this.$emit('input', this.newValue)
},
async executeAction() {
if (!this.newValue.actions?.length) {
this.notify({
text: 'No actions to execute',
warning: true,
image: {
icon: 'exclamation-triangle',
}
})
onDrop(index) {
if (this.dragItem === undefined)
return
}
this.newValue.actions.splice(
index, 0, this.newValue.actions.splice(this.dragItem, 1)[0]
)
this.emitInput()
},
executeAction() {
if (!this.value.actions?.length)
if (this.newValue.args?.length && !Object.keys(this.runArgs).length) {
this.showArgsModal = true
return
}
this.running = true
this.execute(this.value.actions).then(this.onResponse).catch(this.onError).finally(this.onDone)
try {
const procedure = {
actions: this.newValue.actions.map((action) => {
const a = {...action}
if ('name' in a) {
a.action = a.name
delete a.name
}
return a
}),
args: this.runArgs,
}
const response = await this.request('procedures.exec', {procedure})
this.onResponse(response)
} catch (e) {
console.error(e)
this.onError(e)
} finally {
this.onDone()
}
},
editAction(action, index) {
this.newValue.actions[index] = action
this.emitInput()
async executeWithArgs() {
this.$refs.argsModal?.close()
Object.entries(this.runArgs).forEach(([arg, value]) => {
if (!value?.length)
this.runArgs[arg] = null
try {
this.runArgs[arg] = JSON.parse(value)
} catch (e) {
// ignore
}
})
await this.executeAction()
},
addAction(action) {
this.newValue.actions.push(action)
this.emitInput()
duplicate() {
const name = `${this.newValue.name || ''}__copy`
const duplicate = JSON.parse(JSON.stringify(this.newValue))
this.duplicateValue = {
...duplicate,
...{
meta: {
...(duplicate.meta || {}),
icon: {...(duplicate.meta?.icon || {})},
}
},
id: null,
external_id: name,
name: name,
}
},
deleteAction(index) {
this.newValue.actions.splice(index, 1)
this.emitInput()
onActionsEdit(actions) {
this.newValue.actions = actions
},
onArgInput(arg, index) {
this.newValue.args[index] = arg
},
onArgEdit(arg, index) {
arg = arg?.trim()
const isDuplicate = !!(
this.newValue.args?.filter(
(a, i) => a === arg && i !== index
).length
)
if (!arg?.length || isDuplicate) {
this.newValue.args.splice(index, 1)
if (index === this.newValue.args.length) {
setTimeout(() => this.$refs.newArgInput?.focus(), 50)
} else {
const nextInput = this.$refs.args.children[index]?.querySelector('input[type=text]')
setTimeout(() => {
nextInput?.focus()
nextInput?.select()
}, 50)
}
}
},
onNewArg(event) {
const value = event.target.value?.trim()
if (!value?.length) {
return
}
if (!this.newValue.args) {
this.newValue.args = []
}
if (!this.newValue.args.includes(value)) {
this.newValue.args.push(value)
}
this.newArg = null
setTimeout(() => this.$refs.newArgInput?.focus(), 50)
},
onNewRunArgName() {
const arg = this.newRunArg[0]?.trim()
const value = this.newRunArg[1]?.trim()
if (!arg?.length) {
return
}
this.runArgs[arg] = value
this.newRunArg = [null, null]
this.$nextTick(() => this.$refs[`run-arg-value-${arg}`]?.[0]?.focus())
},
onEditRunArgName(event, arg) {
const newArg = event.target.value?.trim()
if (newArg === arg) {
return
}
if (newArg?.length) {
this.runArgs[newArg] = this.runArgs[arg]
}
delete this.runArgs[arg]
this.$nextTick(
() => this.$el.querySelector(`.args-modal-container .args input[type=text][value="${newArg}"]`)?.focus()
)
},
onIconChange(icon) {
this.newValue.meta.icon = icon
},
onRunArgsModalClose() {
this.showArgsModal = false
this.$nextTick(() => {
this.runArgs = {}
})
},
checkCanClose() {
if (!this.shouldConfirmClose)
return true
this.$refs.confirmClose?.open()
return false
},
forceClose() {
this.shouldForceClose = true
this.$nextTick(() => {
if (!this.modal_)
return
let modal = this.modal_
if (typeof modal === 'function') {
modal = modal()
}
try {
modal?.close()
} catch (e) {
console.warn('Failed to close modal', e)
}
this.reset()
})
},
beforeUnload(e) {
if (this.shouldConfirmClose) {
e.preventDefault()
e.returnValue = ''
}
},
addBeforeUnload() {
window.addEventListener('beforeunload', this.beforeUnload)
},
removeBeforeUnload() {
window.removeEventListener('beforeunload', this.beforeUnload)
},
reset() {
this.removeBeforeUnload()
},
syncValue() {
if (!this.value)
return
const value = JSON.parse(JSON.stringify(this.value))
this.newValue = {
...value,
actions: value.actions?.map(a => ({...a})),
args: [...(value?.args || [])],
meta: {...(value?.meta || {})},
}
},
},
@ -169,66 +658,217 @@ export default {
value: {
immediate: true,
deep: true,
handler(value) {
this.newValue = {...value}
handler() {
this.syncValue()
},
},
newValue: {
deep: true,
handler(value) {
if (this.withSave)
return
this.$emit('input', value)
},
},
showArgsModal(value) {
if (value) {
this.runArgs = this.newValue.args?.reduce((acc, arg) => {
acc[arg] = null
return acc
}, {})
this.$nextTick(() => {
this.$el.querySelector('.args-modal-container .args input[type=text]')?.focus()
})
}
},
},
mounted() {
this.addBeforeUnload()
this.syncValue()
this.$nextTick(() => {
if (this.withName)
this.$refs.nameInput?.focus()
})
},
unmouted() {
this.reset()
},
}
</script>
<style lang="scss" scoped>
$floating-btns-height: 3em;
.procedure-editor-container {
display: flex;
flex-direction: column;
padding-top: 0.75em;
position: relative;
max-height: 75vh;
main {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
overflow: auto;
}
.procedure-editor {
width: 100%;
height: calc(100% - #{$floating-btns-height});
overflow: auto;
padding: 0 1em;
.procedure-edit-form {
padding-bottom: calc(#{$floating-btns-height} + 1em);
}
}
.actions {
.item {
margin-bottom: 0.75em;
}
h3 {
font-size: 1.2em;
}
.drop-target-container {
width: 100%;
height: 0.75em;
.name-editor-container {
.row {
display: flex;
border-bottom: 1px solid $default-shadow-color;
align-items: center;
justify-content: space-between;
padding-bottom: 0.5em;
margin-bottom: 0.5em;
&.active {
.drop-target {
height: 0.5em;
background: $tile-bg;
border: none;
opacity: 0.75;
@include until($tablet) {
flex-direction: column;
align-items: flex-start;
}
@include from($tablet) {
flex-direction: row;
}
.name {
margin-right: 0.5em;
}
.value {
flex: 1;
@include until($tablet) {
width: 100%;
}
input {
width: 100%;
}
}
}
}
.drop-target {
width: 100%;
height: 2px;
border: 1px solid $default-fg-2;
border-radius: 0.25em;
padding: 0 0.5em;
.icon-editor-container {
border-bottom: 1px solid $default-shadow-color;
margin-bottom: 0.5em;
}
.spacer {
width: 100%;
height: calc(#{$floating-btns-height} + 1em);
flex-grow: 1;
}
.args-editor-container {
.args {
margin-bottom: 1em;
.item {
padding-bottom: 0.5em;
}
}
}
&.dragging {
padding-top: 0;
:deep(.args-modal-container) {
.modal-container .modal {
width: 50em;
.actions {
.item {
margin-bottom: 0;
.body {
padding: 1em;
}
}
.separator {
height: 0.75em;
.args {
position: relative;
padding-bottom: calc(#{$floating-btn-size} + 2em);
.row {
display: flex;
align-items: center;
margin-bottom: 0.5em;
@include until($tablet) {
flex-direction: column;
align-items: flex-start;
border-bottom: 1px solid $default-shadow-color;
padding-bottom: 0.5em;
}
.arg-name {
@extend .col-s-12;
@extend .col-m-5;
font-weight: bold;
input {
width: 100%;
@include until($tablet) {
width: calc(100% - 2em);
}
}
}
.arg-value {
@extend .col-s-12;
@extend .col-m-7;
flex: 1;
input[type=text] {
width: 95%;
}
}
}
}
}
:deep(.floating-buttons) {
width: 100%;
height: $floating-btns-height;
position: absolute;
bottom: 0;
left: 0;
background: $default-bg-5;
box-shadow: $border-shadow-top;
display: flex;
justify-content: space-between;
.buttons {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
padding: 0 1em;
position: relative;
}
}
:deep(.dump-modal-container) {
.body {
max-width: 47em;
}
}
}
</style>

126
platypush/backend/http/webapp/src/components/Procedure/ProcedureEditorModal.vue Normal file
View file

@ -0,0 +1,126 @@
<template>
<div class="procedure-editor-modal-container">
<Modal :title="title || value.name"
:visible="visible"
:uppercase="!value.name"
:before-close="(() => $refs.editor?.checkCanClose())"
ref="editorModal"
@close="$emit('close')">
<ProcedureEditor :procedure="value"
:read-only="isReadOnly"
:with-name="!isReadOnly"
:with-save="!isReadOnly"
:value="value"
:modal="isReadOnly ? null : (() => $refs.editorModal)"
ref="editor"
@input="$emit('input', $event)" />
</Modal>
</div>
</template>
<script>
import Modal from "@/components/Modal";
import ProcedureEditor from "@/components/Procedure/ProcedureEditor"
export default {
mixins: [Modal, ProcedureEditor],
emits: ['close', 'input'],
components: {
Modal,
ProcedureEditor,
},
data: function() {
return {
args: {},
defaultIconClass: 'fas fa-cogs',
extraArgs: {},
collapsed_: true,
infoCollapsed: false,
lastError: null,
lastResponse: null,
newArgName: '',
newArgValue: '',
runCollapsed: false,
showConfirmDelete: false,
showFileEditor: false,
showProcedureEditor: false,
}
},
computed: {
isReadOnly() {
return this.value.procedure_type && this.value.procedure_type !== 'db'
},
},
methods: {
// Proxy and delegate the Modal's methods
open() {
this.$refs.editorModal.open()
},
close() {
this.$refs.editorModal.close()
},
show() {
this.$refs.editorModal.show()
},
hide() {
this.$refs.editorModal.hide()
},
toggle() {
this.$refs.editorModal.toggle()
},
},
watch: {
collapsed: {
immediate: true,
handler(value) {
this.collapsed_ = value
},
},
selected: {
immediate: true,
handler(value) {
this.collapsed_ = value
},
},
showProcedureEditor(value) {
if (!value) {
this.$refs.editor?.reset()
}
},
},
mounted() {
this.collapsed_ = !this.selected
},
}
</script>
<style lang="scss" scoped>
.procedure-editor-modal-container {
cursor: default;
:deep(.modal-container) {
.body {
padding: 0;
@include until($tablet) {
width: calc(100vw - 2em);
}
@include from($tablet) {
width: 50em;
}
}
}
}
</style>

226
platypush/backend/http/webapp/src/components/elements/Autocomplete.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="autocomplete">
<div class="autocomplete" :class="{ 'with-items': showItems }">
<label :text="label">
<input
type="text"
@ -8,78 +8,53 @@
:placeholder="placeholder"
:disabled="disabled"
:value="value"
@focus="onFocus"
@input="onInput"
@focus.stop="onFocus"
@input.stop="onInput"
@blur="onBlur"
@keydown="onInputKeyDown"
@keyup="onInputKeyUp"
>
</label>
<div class="items" v-if="showItems">
<div class="items" ref="items" v-if="showItems">
<div
class="item"
:class="{ active: i === curIndex }"
:key="item"
:data-item="item"
:key="getItemText(item)"
:data-item="getItemText(item)"
v-for="(item, i) in visibleItems"
@click="onItemSelect(item)">
<span class="matching" v-if="value?.length">{{ item.substr(0, value.length) }}</span>
<span class="normal">{{ item.substr(value?.length || 0) }}</span>
@click.stop="onItemSelect(item)">
<span class="prefix" v-html="item.prefix" v-if="item.prefix"></span>
<span class="matching" v-if="value?.length">{{ getItemText(item).substr(0, value.length) }}</span>
<span class="normal">{{ getItemText(item).substr(value?.length || 0) }}</span>
<span class="suffix" v-html="item.suffix" v-if="item.suffix"></span>
</div>
</div>
</div>
</template>
<script>
import Props from "@/mixins/Autocomplete/Props"
export default {
name: "Autocomplete",
emits: ["input"],
props: {
items: {
type: Array,
required: true,
},
value: {
type: String,
default: "",
},
disabled: {
type: Boolean,
default: false,
},
autofocus: {
type: Boolean,
default: false,
},
label: {
type: String,
},
placeholder: {
type: String,
},
showResultsWhenBlank: {
type: Boolean,
default: false,
},
},
emits: ["blur", "focus", "input", "select"],
mixins: [Props],
data() {
return {
visible: false,
curIndex: -1,
curIndex: null,
selectItemTimer: null,
}
},
computed: {
itemsText() {
return this.items.map((item) => this.getItemText(item))
},
visibleItems() {
if (!this.value?.length)
if (!this.value?.length || this.showAllItems)
return this.items
const val = this.value.toUpperCase()
@ -87,7 +62,7 @@ export default {
return this.showResultsWhenBlank ? this.items : []
return this.items.filter(
(item) => item.substr(0, val.length).toUpperCase() === val
(item) => this.getItemText(item).substr(0, val.length).toUpperCase() === val
)
},
@ -97,105 +72,141 @@ export default {
},
methods: {
selectNextItem() {
this.curIndex++
this.normalizeIndex()
},
selectPrevItem() {
this.curIndex--
this.normalizeIndex()
},
normalizeIndex() {
// Go to the beginning after reaching the end
if (this.curIndex >= this.visibleItems.length)
this.curIndex = 0
// Go to the end after moving back from the start
if (this.curIndex < 0)
this.curIndex = this.visibleItems.length - 1
// Scroll to the element
const el = this.$el.querySelector("[data-item='" + this.visibleItems[this.curIndex] + "']")
if (el)
el.scrollIntoView({
block: "start",
inline: "nearest",
behavior: "smooth",
})
getItemText(item) {
return item?.text || item
},
valueIsInItems() {
if (this.showAllItems)
return true
if (!this.value)
return false
return this.items.indexOf(this.value) >= 0
return this.itemsText.indexOf(this.value) >= 0
},
onFocus() {
onFocus(e) {
this.$emit("focus", e)
if (this.showResultsWhenBlank || this.value?.length)
this.visible = true
},
onInput(e) {
let val = e.target.value
let val = e.target?.value
if (val == null) {
e.stopPropagation?.()
return
}
if (this.valueIsInItems())
this.visible = false
e.stopPropagation()
this.$emit("input", val)
this.curIndex = -1
this.$emit("input", val.text || val)
this.curIndex = null
this.visible = true
},
onBlur(e) {
this.onInput(e)
this.$nextTick(() => {
if (this.valueIsInItems())
if (this.inputOnBlur) {
this.onInput(e)
this.$nextTick(() => {
if (this.valueIsInItems()) {
this.visible = false
}
})
return
}
e.stopPropagation()
this.$nextTick(() => this.$refs.input.focus())
setTimeout(() => {
if (this.selectItemTimer) {
this.$nextTick(() => this.$refs.input.focus())
return
}
this.$emit("blur", e)
if (this.valueIsInItems()) {
this.visible = false
})
}
}, 200)
},
onItemSelect(item) {
this.$emit("input", item)
if (this.selectItemTimer) {
clearTimeout(this.selectItemTimer)
this.selectItemTimer = null
}
this.selectItemTimer = setTimeout(() => {
this.selectItemTimer = null
}, 250)
const text = item.text || item
this.$emit("select", text)
if (this.inputOnSelect)
this.$emit("input", text)
this.$nextTick(() => {
if (this.valueIsInItems()) {
this.visible = false
if (this.inputOnSelect) {
this.visible = false
} else {
this.visible = true
this.curIndex = this.visibleItems.indexOf(item)
if (this.curIndex < 0)
this.curIndex = null
this.$refs.input.focus()
}
}
})
},
onInputKeyUp(e) {
if (["ArrowUp", "ArrowDown", "Tab", "Enter", "Escape"].indexOf(e.key) >= 0)
if (
["ArrowUp", "ArrowDown", "Escape"].indexOf(e.key) >= 0 ||
(e.key === "Tab" && this.selectOnTab) ||
(e.key === "Enter" && this.curIndex != null)
) {
e.stopPropagation()
}
if (e.key === "Enter" && this.valueIsInItems()) {
if (e.key === "Enter" && this.valueIsInItems() && this.curIndex != null) {
this.$refs.input.blur()
this.visible = false
}
},
onInputKeyDown(e) {
if (!this.showItems)
return
e.stopPropagation()
if (
e.key === 'ArrowDown' ||
(e.key === 'Tab' && !e.shiftKey) ||
(e.key === 'Tab' && !e.shiftKey && this.selectOnTab) ||
(e.key === 'j' && e.ctrlKey)
) {
this.selectNextItem()
this.curIndex = this.curIndex == null ? 0 : this.curIndex + 1
e.preventDefault()
} else if (
e.key === 'ArrowUp' ||
(e.key === 'Tab' && e.shiftKey) ||
(e.key === 'Tab' && e.shiftKey && this.selectOnTab) ||
(e.key === 'k' && e.ctrlKey)
) {
this.selectPrevItem()
this.curIndex = this.curIndex == null ? this.visibleItems.length - 1 : this.curIndex - 1
e.preventDefault()
} else if (e.key === 'Enter') {
if (this.curIndex > -1 && this.visible) {
if (this.curIndex != null && this.curIndex >= 0 && this.visible) {
e.preventDefault()
this.onItemSelect(this.visibleItems[this.curIndex])
this.$refs.input.focus()
this.$nextTick(() => this.$refs.input.focus())
}
} else if (e.key === 'Escape') {
this.visible = false
@ -210,6 +221,33 @@ export default {
},
},
watch: {
curIndex() {
// Do nothing if the index is not set
if (this.curIndex == null)
return
// Go to the beginning after reaching the end
if (this.curIndex >= this.visibleItems.length)
this.curIndex = 0
// Go to the end after moving back from the start
if (this.curIndex < 0)
this.curIndex = this.visibleItems.length - 1
// Scroll to the element
const curText = this.getItemText(this.visibleItems[this.curIndex])
const el = this.$el.querySelector(`[data-item='${curText}']`)
if (el) {
el.scrollIntoView({
block: "start",
inline: "nearest",
behavior: "smooth",
})
}
},
},
mounted() {
document.addEventListener("click", this.onDocumentClick)
if (this.autofocus)

408
platypush/backend/http/webapp/src/components/elements/Draggable.vue Normal file
View file

@ -0,0 +1,408 @@
<template>
<div class="dragged"
:class="{ hidden: !draggingVisible }"
:style="{ top: `${top}px`, left: `${left}px` }">
<div class="content"
v-html="element?.outerHTML || '...'"
v-if="draggingVisible" />
</div>
</template>
<script>
export default {
emits: [
'contextmenu',
'drag',
'dragend',
'drop',
],
props: {
disabled: {
type: Boolean,
default: false,
},
element: {
type: Object,
},
touchDragStartThreshold: {
type: Number,
default: 500,
},
touchDragMoveCancelDistance: {
type: Number,
default: 10,
},
value: {
type: [Object, String, Number, Boolean, Array],
default: () => ({}),
},
},
data() {
return {
dragging: false,
draggingHTML: null,
eventsHandlers: {
contextmenu: this.onContextMenu,
drag: this.onDrag,
dragend: this.onDragEnd,
dragstart: this.onDragStart,
drop: this.onDragEnd,
touchcancel: this.onDragEnd,
touchend: this.onTouchEnd,
touchmove: this.onTouchMove,
touchstart: this.onTouchStart,
},
initialCursorOffset: null,
left: 0,
top: 0,
touchDragStartTimer: null,
touchScrollDirection: [0, 0],
touchScrollSpeed: 10,
touchScrollTimer: null,
touchStart: null,
touchOverElement: null,
}
},
computed: {
draggingVisible() {
return this.dragging && this.touchStart
},
shouldScroll() {
return this.touchScrollDirection[0] || this.touchScrollDirection[1]
},
},
methods: {
onContextMenu(event) {
// If the element is disabled, or there's no touch start event, then we should
// emit the contextmenu event as usual.
if (this.disabled || !this.touchStart) {
this.$emit('contextmenu', event)
return
}
// Otherwise, if a touch start event was registered, then we should prevent the
// context menu event from being emitted, as it's most likely a long touch event
// that should trigger the drag event.
event.preventDefault()
event.stopPropagation()
this.onDragStart(event)
},
onDragStart(event) {
if (this.disabled) {
return
}
this.dragging = true
this.draggingHTML = this.$slots.default?.()?.el?.outerHTML
event.value = this.value
if (event.dataTransfer) {
event.dataTransfer.dropEffect = 'move'
event.dataTransfer.effectAllowed = 'move'
event.dataTransfer.setData('application/json', JSON.stringify(this.value))
}
this.cancelTouchDragStart()
this.$emit('drag', event)
},
onDragEnd(event) {
if (this.disabled) {
return
}
this.reset()
this.$emit('dragend', event)
},
onTouchStart(event) {
if (this.disabled) {
return
}
const touch = event.touches?.[0]
if (!touch) {
return
}
this.touchStart = [touch.clientX, touch.clientY]
this.cancelTouchDragStart()
this.touchDragStartTimer = setTimeout(() => {
this.onDragStart(event)
}, this.touchDragStartThreshold)
},
onTouchMove(event) {
if (this.disabled) {
return
}
const touch = event.touches?.[0]
if (!(touch && this.touchStart)) {
return
}
// If we received a touch move event, and there's a touch drag start timer,
// then most likely the user is not trying to drag the element, but just scrolling.
// In this case, we should cancel the drag start timer.
if (this.touchDragStartTimer) {
const distance = Math.hypot(
touch.clientX - this.touchStart[0],
touch.clientY - this.touchStart[1]
)
if (distance > this.touchDragMoveCancelDistance) {
this.reset()
return
}
this.onDragStart(event)
}
event.preventDefault()
const { clientX, clientY } = touch
this.left = clientX
this.top = clientY
this.left = clientX - this.touchStart[0]
this.top = clientY - this.touchStart[1]
this.touchScroll(event)
// Get droppable element under the touch, excluding the current dragged element
let droppable = document.elementsFromPoint(clientX, clientY).filter(
el => el.dataset?.droppable && !el.classList.contains('dragged')
)?.[0]
if (!droppable) {
this.touchOverElement = null
return
}
this.dispatchEvent('dragenter', droppable)
this.touchOverElement = droppable
},
touchScroll(event) {
if (this.disabled) {
return
}
const parent = this.getScrollableParent()
if (!parent) {
return
}
const touch = event.touches?.[0]
if (!touch) {
return
}
const { clientX, clientY } = touch
const rect = parent.getBoundingClientRect()
const touchOffset = [
(clientX - rect.left) / rect.width,
(clientY - rect.top) / rect.height
]
const scrollDirection = [0, 0]
if (touchOffset[0] < 0) {
scrollDirection[0] = -1
} else if (touchOffset[0] > 1) {
scrollDirection[0] = 1
}
if (touchOffset[1] < 0) {
scrollDirection[1] = -1
} else if (touchOffset[1] > 1) {
scrollDirection[1] = 1
}
this.handleTouchScroll(scrollDirection, parent)
},
onTouchEnd(event) {
if (this.disabled) {
return
}
const droppable = this.touchOverElement
if (droppable) {
this.dispatchEvent('drop', droppable)
}
this.onDragEnd(event)
},
handleTouchScroll(value, parent) {
this.touchScrollDirection = value
if (!(value[0] || value[1])) {
this.cancelScroll()
return
}
if (this.touchScrollTimer) {
return
}
this.touchScrollTimer = setInterval(() => {
if (!parent) {
return
}
const [x, y] = value
parent.scrollBy(x * this.touchScrollSpeed, y * this.touchScrollSpeed)
}, 1000 / 60)
},
getScrollableParent() {
let parent = this.element?.parentElement
while (parent) {
if (
parent.scrollHeight > parent.clientHeight ||
parent.scrollWidth > parent.clientWidth
) {
const style = window.getComputedStyle(parent)
if (['scroll', 'auto'].includes(style.overflowY) || ['scroll', 'auto'].includes(style.overflowX)) {
return parent
}
}
parent = parent.parentElement
}
return null
},
dispatchEvent(type, droppable) {
droppable.dispatchEvent(
new DragEvent(
type, {
target: {
...droppable,
value: this.value,
}
}
)
)
},
cancelScroll() {
this.touchScrollDirection = [0, 0]
if (this.touchScrollTimer) {
clearInterval(this.touchScrollTimer)
this.touchScrollTimer = null
}
},
cancelTouchDragStart() {
if (this.touchDragStartTimer) {
clearTimeout(this.touchDragStartTimer)
this.touchDragStartTimer = null
}
},
reset() {
this.cancelTouchDragStart()
this.cancelScroll()
this.dragging = false
this.touchStart = null
this.touchOverElement = null
this.left = 0
this.top = 0
this.initialCursorOffset = null
},
installHandlers() {
console.debug('Installing drag handlers on', this.element)
this.element?.setAttribute('draggable', true)
Object.entries(this.eventsHandlers).forEach(([event, handler]) => {
this.element?.addEventListener(event, handler)
})
},
uninstallHandlers() {
console.debug('Uninstalling drag handlers from', this.element)
this.element?.setAttribute('draggable', false)
Object.entries(this.eventsHandlers).forEach(([event, handler]) => {
this.element?.removeEventListener(event, handler)
})
},
},
watch: {
dragging() {
if (this.dragging) {
this.element?.classList.add('dragged')
this.$nextTick(() => {
if (!this.touchStart) {
return
}
this.initialCursorOffset = [
this.element?.offsetLeft - this.touchStart[0],
this.element?.offsetTop - this.touchStart[1]
]
})
} else {
this.element?.classList.remove('dragged')
}
},
disabled(value) {
if (value) {
this.reset()
this.uninstallHandlers()
} else {
this.installHandlers()
}
},
element() {
this.uninstallHandlers()
this.installHandlers()
},
touchOverElement(value, oldValue) {
if (value === oldValue) {
return
}
if (oldValue) {
this.dispatchEvent('dragleave', oldValue)
}
if (value) {
this.dispatchEvent('dragenter', value)
}
},
},
mounted() {
this.installHandlers()
},
unmounted() {
this.uninstallHandlers()
},
}
</script>
<style lang="scss" scoped>
.dragged {
position: absolute;
max-width: 100%;
max-height: 100%;
transform: scale(0.5);
z-index: 1000;
}
</style>

2
platypush/backend/http/webapp/src/components/elements/Dropdown.vue
View file

@ -176,7 +176,7 @@ export default {
toggle(event) {
event.stopPropagation()
this.$emit('click')
this.$emit('click', event)
this.visible ? this.close() : this.open()
},

174
platypush/backend/http/webapp/src/components/elements/Droppable.vue Normal file
View file

@ -0,0 +1,174 @@
<template>
<div class="droppable" />
</template>
<script>
export default {
emits: [
'dragenter',
'dragleave',
'dragover',
'drop',
],
props: {
element: {
type: Object,
},
active: {
type: Boolean,
default: false,
},
disabled: {
type: Boolean,
default: false,
},
},
data() {
return {
eventsHandlers: {
dragenter: this.onDragEnter,
dragleave: this.onDragLeave,
dragover: this.onDragOver,
drop: this.onDrop,
},
selected: false,
}
},
methods: {
onDragEnter(event) {
if (this.disabled || this.selected) {
return
}
this.selected = true
this.$emit('dragenter', event)
},
onDragLeave(event) {
if (this.disabled || !this.selected) {
return
}
const rect = this.element.getBoundingClientRect()
if (
event.clientX >= rect.left &&
event.clientX <= rect.right &&
event.clientY >= rect.top &&
event.clientY <= rect.bottom
) {
return
}
this.selected = false
this.$emit('dragleave', event)
},
onDragOver(event) {
if (this.disabled) {
return
}
event.preventDefault()
this.selected = true
this.$emit('dragover', event)
},
onDrop(event) {
if (this.disabled) {
return
}
this.selected = false
this.$emit('drop', event)
},
installHandlers() {
const el = this.element
if (!el) {
return
}
console.debug('Installing drop handlers on', this.element)
if (el.dataset) {
el.dataset.droppable = true;
}
if (el.addEventListener) {
Object.entries(this.eventsHandlers).forEach(([event, handler]) => {
el.addEventListener(event, handler)
})
}
},
uninstallHandlers() {
const el = this.element
if (!el) {
return
}
console.debug('Uninstalling drop handlers from', this.element)
if (el.dataset?.droppable) {
delete el.dataset.droppable;
}
if (el.removeEventListener) {
Object.entries(this.eventsHandlers).forEach(([event, handler]) => {
el.removeEventListener(event, handler)
})
}
},
},
watch: {
active() {
if (this.active) {
this.element?.classList.add('active')
} else {
this.element?.classList.remove('active')
}
},
disabled: {
handler() {
if (this.disabled) {
this.element?.classList.add('disabled')
} else {
this.element?.classList.remove('disabled')
}
},
},
element: {
handler() {
this.uninstallHandlers()
this.installHandlers()
},
},
selected: {
handler(value, oldValue) {
if (value && !oldValue) {
this.element?.classList.add('selected')
} else if (!value && oldValue) {
this.element?.classList.remove('selected')
}
},
},
},
mounted() {
this.$nextTick(() => {
this.installHandlers()
})
},
unmounted() {
this.uninstallHandlers()
},
}
</script>

17
platypush/backend/http/webapp/src/components/elements/EditButton.vue
View file

@ -1,7 +1,9 @@
<template>
<button class="edit-btn"
@click="proxy($event)" @touch="proxy($event)" @input="proxy($event)"
>
:title="title"
@click="proxy($event)"
@touch="proxy($event)"
@input="proxy($event)">
<i class="fas fa-pen-to-square" />
</button>
</template>
@ -9,6 +11,13 @@
<script>
export default {
emits: ['input', 'click', 'touch'],
props: {
title: {
type: String,
default: 'Edit',
},
},
methods: {
proxy(e) {
this.$emit(e.type, e)
@ -26,8 +35,8 @@ export default {
border: 1px solid rgba(0, 0, 0, 0);
&:hover {
background: $hover-bg;
border: 1px solid $selected-fg;
color: $default-hover-fg;
border: none;
}
}
</style>

87
platypush/backend/http/webapp/src/components/elements/FloatingButton.vue
View file

@ -1,7 +1,8 @@
<template>
<div class="floating-btn" :class="className">
<div class="floating-btn" :class="classes">
<button type="button"
class="btn btn-primary"
:class="glow ? 'with-glow' : ''"
:disabled="disabled"
:title="title"
@click="$emit('click', $event)">
@ -14,7 +15,6 @@
import Icon from "@/components/elements/Icon";
export default {
name: "FloatingButton",
components: {Icon},
emits: ["click"],
@ -35,11 +35,49 @@ export default {
title: {
type: String,
},
left: {
type: Boolean,
default: false,
},
right: {
type: Boolean,
default: true,
},
top: {
type: Boolean,
default: false,
},
bottom: {
type: Boolean,
default: true,
},
glow: {
type: Boolean,
default: false,
},
},
computed: {
className() {
return this.class
classes() {
const classes = {}
if (this.left) {
classes.left = true
} else {
classes.right = true
}
if (this.top) {
classes.top = true
} else {
classes.bottom = true
}
if (this.class?.length) {
classes[this.class] = true
}
return classes
}
}
}
@ -48,15 +86,32 @@ export default {
<style lang="scss" scoped>
.floating-btn {
position: absolute;
bottom: 0;
right: 0;
margin: auto 1em 1em auto;
&.left {
left: 0;
margin-left: 1em;
}
&.right {
right: 0;
margin-right: 1em;
}
&.top {
top: 0;
margin-top: 1em;
}
&.bottom {
bottom: 0;
margin-bottom: 1em;
}
button {
background: $tile-bg !important;
color: $tile-fg !important;
width: 4em;
height: 4em;
width: $floating-btn-size;
height: $floating-btn-size;
border-radius: 2em;
border: none !important;
padding: 0;
@ -72,6 +127,20 @@ export default {
color: $disabled-fg !important;
cursor: not-allowed;
}
&.with-glow {
&:not(:disabled) {
@extend .glow;
background: $default-bg-3 !important;
color: $ok-fg !important;
box-shadow: 0 0 1px 1px $selected-fg !important;
&:hover {
box-shadow: 0 0 1px 1px $active-glow-bg-2 !important;
color: $play-btn-fg !important;
}
}
}
}
:deep(button) {

50
platypush/backend/http/webapp/src/components/elements/FloatingButtons.vue Normal file
View file

@ -0,0 +1,50 @@
<template>
<div class="floating-btns" :class="{direction: direction}">
<slot />
</div>
</template>
<script>
export default {
emits: ["click"],
props: {
direction: {
type: String,
default: "row",
},
size: {
type: String,
default: "4em",
},
},
computed: {
buttons() {
return this.$el.querySelectorAll(".floating-btn")
},
},
mounted() {
const buttons = Array.from(this.buttons)
let offset = 0
buttons.forEach((button, index) => {
const size = button.offsetWidth
const styleOffset = `calc(${offset}px + (${index} * 1em))`
if (this.direction === "row") {
if (!parseFloat(getComputedStyle(button).left))
button.style.left = styleOffset
else
button.style.right = styleOffset
} else {
if (!parseFloat(getComputedStyle(button).top))
button.style.top = styleOffset
else
button.style.bottom = styleOffset
}
offset += size
})
},
}
</script>

11
platypush/backend/http/webapp/src/components/elements/NameEditor.vue
View file

@ -1,10 +1,15 @@
<template>
<form @submit.prevent="submit" class="name-editor">
<input type="text" v-model="text" :disabled="disabled" ref="input">
<input type="text"
:disabled="disabled"
v-model="text"
@keydown="proxy"
@keyup="proxy"
ref="input">
<button type="submit">
<i class="fas fa-circle-check" />
</button>
<button class="cancel" @click="$emit('cancel')" @touch="$emit('cancel')">
<button class="cancel" @click="$emit('cancel')">
<i class="fas fa-ban" />
</button>
<slot />
@ -13,7 +18,7 @@
<script>
export default {
emits: ['input', 'cancel'],
emits: ['input', 'cancel', 'keyup', 'keydown'],
props: {
value: {
type: String,

176
platypush/backend/http/webapp/src/components/elements/Tile.vue Normal file
View file

@ -0,0 +1,176 @@
<template>
<div class="tile-container" :class="className">
<div class="tile" ref="tile" @click="$emit('click', $event)">
<div class="delete"
title="Remove"
v-if="withDelete"
@click.stop="$emit('delete')">
<i class="icon fas fa-xmark" />
</div>
<slot />
</div>
<Draggable :element="tile"
:disabled="readOnly"
:value="value"
@drag="$emit('drag', $event)"
@dragend="$emit('dragend', $event)"
@drop="$emit('drop', $event)"
v-if="draggable" />
<Droppable :element="tile"
@dragenter="$emit('dragenter', $event)"
@dragleave="$emit('dragleave', $event)"
@dragover="$emit('dragover', $event)"
@drop="$emit('drop', $event)"
v-if="!readOnly" />
</div>
</template>
<script>
import Draggable from "@/components/elements/Draggable"
import Droppable from "@/components/elements/Droppable"
export default {
emits: [
'click',
'delete',
'drag',
'dragenter',
'dragleave',
'dragover',
'drop',
],
components: {
Draggable,
Droppable,
},
props: {
className: {
type: [String, Object],
default: '',
},
draggable: {
type: Boolean,
default: true,
},
readOnly: {
type: Boolean,
default: false,
},
value: {
type: [Object, String, Number, Boolean, Array],
},
withDelete: {
type: Boolean,
default: false,
},
},
data() {
return {
tile: undefined,
}
},
mounted() {
this.tile = this.$refs.tile
},
}
</script>
<style lang="scss" scoped>
.tile-container {
position: relative;
.tile {
min-width: 20em;
background: $tile-bg;
color: $tile-fg;
display: flex;
flex-direction: column;
padding: 0.5em 1em;
overflow: hidden;
text-overflow: ellipsis;
content: "";
position: relative;
border-radius: 1em;
cursor: pointer;
&:hover {
background: $tile-hover-bg;
}
&.selected {
background: $tile-hover-bg;
}
.delete {
width: 1.5em;
height: 1.5em;
font-size: 1.25em;
position: absolute;
top: 0.25em;
right: 0;
opacity: 0.7;
transition: opacity 0.25s ease-in-out;
cursor: pointer;
&:hover {
opacity: 1;
}
}
}
&.keyword {
.tile {
background: $tile-bg-2;
&:hover {
background: $tile-hover-bg-2;
}
}
}
&.add {
.tile {
background: $tile-bg-3;
&:hover {
background: $tile-hover-bg-3;
}
}
}
}
:deep(.tile) {
.tile-name {
display: inline-flex;
font-size: 1.1em;
font-weight: bold;
font-family: monospace;
align-items: center;
.icon {
width: 1.5em;
height: 1.5em;
margin-right: 0.75em;
}
}
.keyword {
color: $tile-keyword-fg;
}
.code {
color: $tile-code-fg;
}
}
</style>

9
platypush/backend/http/webapp/src/components/panels/Entities/Alarm.vue
View file

@ -370,16 +370,13 @@ $icon-width: 2em;
cursor: default;
.content {
width: 50em;
max-width: 90%;
.body {
width: 100%;
}
}
.alarm-running-modal {
width: 100%;
min-width: 90vw;
height: 100%;
display: flex;
flex-direction: column;
@ -387,6 +384,10 @@ $icon-width: 2em;
justify-content: center;
padding: 1em;
@include from($tablet) {
min-width: 40em;
}
.icon {
font-size: 3.5em;
color: $selected-fg;

38
platypush/backend/http/webapp/src/components/panels/Entities/Alarm/AlarmEditor.vue
View file

@ -85,7 +85,7 @@
</span>
</div>
<div class="value">
<div class="value file-selector">
<FileSelector :value="editForm.media" @input="editForm.media = $event" />
</div>
</div>
@ -127,7 +127,7 @@
<div class="value">
<ToggleSwitch :value="editForm.media_repeat"
@input="editForm.media_repeat = $event.target.checked" />
@input="editForm.media_repeat = !!$event.target.checked" />
</div>
</label>
</div>
@ -208,9 +208,7 @@
</div>
<div class="value">
<ProcedureEditor :value="procedure"
:with-name="false"
@input="onActionsInput($event)" />
<ActionsList :value="procedure" @update="onActionsUpdate($event)" />
</div>
</div>
</div>
@ -219,8 +217,8 @@
</template>
<script>
import Loading from "@/components/Loading";
import ProcedureEditor from "@/components/Procedure/ProcedureEditor"
import ActionsList from "@/components/Action/ActionsList"
import Loading from "@/components/Loading"
import Slider from "@/components/elements/Slider"
import CronEditor from "@/components/elements/CronEditor"
import FileSelector from "@/components/elements/FileSelector"
@ -232,10 +230,10 @@ export default {
emits: ['input'],
mixins: [Utils],
components: {
ActionsList,
CronEditor,
FileSelector,
Loading,
ProcedureEditor,
Slider,
TimeInterval,
ToggleSwitch,
@ -262,9 +260,7 @@ export default {
computed: {
procedure() {
return {
actions: [...(this.editForm.actions || [])],
}
return [...(this.editForm.actions || [])]
},
audioVolume() {
@ -338,8 +334,12 @@ export default {
this.editForm.condition_type = type
},
onActionsInput(procedure) {
this.editForm.actions = procedure.actions
onActionsUpdate(actions) {
actions = [...(actions ?? [])]
if (JSON.stringify(this.editForm.actions) === JSON.stringify(actions))
return
this.editForm.actions = actions
},
onVolumeChange(event) {
@ -498,5 +498,17 @@ $header-height: 3.5em;
input[type=text] {
min-height: 2em;
}
:deep(.file-selector) {
.modal {
.body {
min-width: 95vw;
@include from($tablet) {
min-width: 40em;
}
}
}
}
}
</style>

265
platypush/backend/http/webapp/src/components/panels/Entities/IconEditor.vue Normal file
View file

@ -0,0 +1,265 @@
<template>
<form class="icon-editor"
@submit="onIconEdit(newIcon, $event)"
@click.stop>
<div class="row item">
<div class="title">
Icon
<EditButton title="Edit Icon"
@click.stop="editIcon = true"
v-if="!editIcon" />
</div>
<div class="value icon-canvas">
<span class="icon-editor" v-if="editIcon">
<span class="icon-edit-form" v-if="newIcon != null">
<span class="icon-container">
<img :src="currentIcon.url" v-if="currentIcon?.url" />
<i :class="currentIcon.class" :style="{color: currentIcon.color}" v-else />
</span>
<NameEditor :value="currentIcon.url || currentIcon.class"
:disabled="loading"
@keyup="newIcon = $event.target.value?.trim()"
@input="onIconEdit(newIcon)"
@cancel="editIcon = false">
<button type="button"
title="Reset"
@click.stop="onIconEdit(null, $event)">
<i class="fas fa-rotate-left" />
</button>
</NameEditor>
</span>
<span class="help">
Supported: image URLs or
<a href="https://fontawesome.com/icons" target="_blank">FontAwesome icon classes</a>.
</span>
</span>
<Icon v-bind="currentIcon" v-else />
</div>
</div>
<div class="row item">
<div class="title">
Icon color
</div>
<div class="value icon-color-picker">
<input type="color"
:value="currentIcon.color"
@input.stop
@change.stop="onIconColorEdit">
<button type="button"
title="Reset"
@click.stop="onIconColorEdit(null)">
<i class="fas fa-rotate-left" />
</button>
</div>
</div>
</form>
</template>
<script>
import EditButton from "@/components/elements/EditButton";
import Icon from "@/components/elements/Icon";
import NameEditor from "@/components/elements/NameEditor";
import Utils from "@/Utils";
import meta from './meta.json';
export default {
components: {
EditButton,
Icon,
NameEditor,
},
mixins: [Utils],
emits: ['change', 'input'],
props: {
entity: {
type: Object,
required: true,
},
},
data() {
return {
editIcon: false,
loading: false,
newIcon: null,
newColor: null,
}
},
computed: {
currentIcon() {
return {
...((meta[this.entity.type] || {})?.icon || {}),
...(this.entity.meta?.icon || {}),
...(this.newIcon ? this.iconObj(this.newIcon) : {}),
...(this.newColor?.length ? {color: this.newColor} : {}),
}
},
},
methods: {
async edit(icon, event) {
const req = {
[this.entity.id]: {icon},
}
this.loading = true
if (event)
event.stopPropagation()
try {
const entity = (await this.request('entities.set_meta', req))[0]
icon = entity?.meta?.icon
if (icon) {
this.$emit('input', icon)
}
} finally {
this.loading = false
this.editIcon = false
}
},
async onIconEdit(newIcon, event) {
const icon = {
...this.currentIcon,
...(this.iconObj(newIcon) || {}),
}
await this.edit(icon, event)
},
async onIconColorEdit(event) {
const color = event?.target?.value
const icon = {
...this.currentIcon,
...(color?.length ? {color} : {color: null}),
}
this.newColor = color
await this.edit(icon, event)
},
iconObj(iconStr) {
if (!iconStr?.length)
return {
...this.currentIcon,
url: this.entity.meta?.icon?.url,
class: this.entity.meta?.icon?.class,
}
if (iconStr.startsWith('http'))
return {url: iconStr}
return {class: iconStr}
},
},
watch: {
editIcon() {
this.newIcon = (
this.entity.meta?.icon?.url ||
this.entity.meta?.icon?.['class'] ||
this.currentIcon.url ||
this.currentIcon.class
)?.trim()
},
newIcon() {
this.$emit('change', this.currentIcon)
},
newColor() {
this.$emit('change', this.currentIcon)
},
},
}
</script>
<style lang="scss" scoped>
@import "common";
.icon-editor {
width: 100%;
display: flex;
flex-direction: column;
.item {
display: flex;
align-items: center;
padding-bottom: 0.5em;
@include until($tablet) {
flex-direction: column;
justify-content: center;
}
.title {
width: 10em;
@include until($tablet) {
width: 100%;
}
}
.value {
display: inline-flex;
flex: 1;
justify-content: flex-end;
@include until($tablet) {
width: 100%;
justify-content: flex-start;
}
}
.icon-editor {
align-items: flex-end;
@include until($tablet) {
align-items: flex-start;
}
.icon-container {
margin-right: 0.5em;
}
img {
max-width: 2em;
max-height: 2em;
}
}
}
.icon-canvas {
display: inline-flex;
align-items: center;
@include until($tablet) {
.icon-container {
justify-content: left;
}
}
@include from($tablet) {
.icon-container {
justify-content: right;
margin-right: 0.5em;
}
}
}
button {
border: none;
background: none;
padding: 0 0.5em;
}
.help {
font-size: 0.75em;
}
}
</style>

32
platypush/backend/http/webapp/src/components/panels/Entities/Index.vue
View file

@ -28,7 +28,10 @@
<NoItems v-if="!Object.keys(displayGroups || {})?.length">No entities found</NoItems>
<div class="groups-container" v-else>
<div class="group fade-in" v-for="group in displayGroups" :key="group.name">
<div class="group fade-in"
v-for="group in displayGroups"
:key="group.name"
:ref="`group-${group.name}`">
<div class="frame">
<div class="header">
<span class="section left">
@ -386,6 +389,29 @@ export default {
}
},
onModalOpen(modal) {
const group = this.getParentGroup(modal.$el)
if (!group)
return
group.style.zIndex = '' + (parseInt(group.style.zIndex || 0) + 1)
},
onModalClose(modal) {
const group = this.getParentGroup(modal.$el)
if (!group)
return
group.style.zIndex = '' + Math.max(0, parseInt(group.style.zIndex || 0) - 1)
},
getParentGroup(element) {
let parent = element
while (parent && !parent.classList?.contains('group'))
parent = parent.parentElement
return parent
},
loadCachedEntities() {
const cachedEntities = window.localStorage.getItem('entities')
if (cachedEntities) {
@ -427,6 +453,9 @@ export default {
'platypush.message.event.entities.EntityDeleteEvent'
)
bus.on('modal-open', this.onModalOpen)
bus.on('modal-close', this.onModalClose)
const hasCachedEntities = this.loadCachedEntities()
await this.sync(!hasCachedEntities)
await this.refresh(null, !hasCachedEntities)
@ -535,6 +564,7 @@ export default {
max-height: calc(100vh - #{$header-height} - #{$main-margin});
}
width: 100%;
display: flex;
flex-direction: column;
flex-grow: 1;

122
platypush/backend/http/webapp/src/components/panels/Entities/Modal.vue
View file

@ -20,40 +20,7 @@
</div>
<div class="table-row">
<div class="title">
Icon
<EditButton @click="editIcon = true" v-if="!editIcon" />
</div>
<div class="value icon-canvas">
<span class="icon-editor" v-if="editIcon">
<NameEditor :value="entity.meta?.icon?.class || entity.meta?.icon?.url" @input="onIconEdit"
@cancel="editIcon = false" :disabled="loading">
<button type="button" title="Reset" @click="onIconEdit(null)"
@touch="onIconEdit(null)">
<i class="fas fa-rotate-left" />
</button>
</NameEditor>
<span class="help">
Supported: image URLs or
<a href="https://fontawesome.com/icons" target="_blank">FontAwesome icon classes</a>.
</span>
</span>
<Icon v-bind="entity?.meta?.icon || {}" v-else />
</div>
</div>
<div class="table-row">
<div class="title">
Icon color
</div>
<div class="value icon-color-picker">
<input type="color" :value="entity.meta?.icon?.color" @change="onIconColorEdit">
<button type="button" title="Reset" @click="onIconColorEdit(null)"
@touch="onIconColorEdit(null)">
<i class="fas fa-rotate-left" />
</button>
</div>
<IconEditor :entity="entity" @input="onIconEdit" />
</div>
<div class="table-row">
@ -206,14 +173,13 @@
<script>
import Modal from "@/components/Modal";
import Icon from "@/components/elements/Icon";
import IconEditor from "./IconEditor";
import ConfirmDialog from "@/components/elements/ConfirmDialog";
import EditButton from "@/components/elements/EditButton";
import EntityIcon from "./EntityIcon"
import NameEditor from "@/components/elements/NameEditor";
import Utils from "@/Utils";
import Entity from "./Entity";
import meta from './meta.json';
// These fields have a different rendering logic than the general-purpose one
const specialFields = [
@ -233,9 +199,14 @@ const specialFields = [
]
export default {
name: "EntityModal",
components: {
Entity, EntityIcon, Modal, EditButton, NameEditor, Icon, ConfirmDialog
ConfirmDialog,
EditButton,
Entity,
EntityIcon,
IconEditor,
Modal,
NameEditor,
},
mixins: [Utils],
emits: ['input', 'loading', 'entity-update'],
@ -276,7 +247,6 @@ export default {
return {
loading: false,
editName: false,
editIcon: false,
configCollapsed: true,
childrenCollapsed: true,
extraInfoCollapsed: true,
@ -308,47 +278,14 @@ export default {
}
},
async onIconEdit(newIcon) {
this.loading = true
try {
const icon = {url: null, class: null}
if (newIcon?.length) {
if (newIcon.startsWith('http'))
icon.url = newIcon
else
icon.class = newIcon
} else {
icon.url = (meta[this.entity.type] || {})?.icon?.url
icon.class = (meta[this.entity.type] || {})?.icon?.['class']
onIconEdit(icon) {
this.$emit(
'input',
{
...this.entity,
meta: {...this.entity.meta, icon},
}
const req = {}
req[this.entity.id] = {icon: icon}
await this.request('entities.set_meta', req)
} finally {
this.loading = false
this.editIcon = false
}
},
async onIconColorEdit(event) {
this.loading = true
try {
const icon = this.entity.meta?.icon || {}
if (event)
icon.color = event.target.value
else
icon.color = null
const req = {}
req[this.entity.id] = {icon: icon}
await this.request('entities.set_meta', req)
} finally {
this.loading = false
this.editIcon = false
}
)
},
stringify(value) {
@ -419,39 +356,12 @@ export default {
}
}
.icon-canvas {
display: inline-flex;
align-items: center;
@include until($tablet) {
.icon-container {
justify-content: left;
}
}
@include from($tablet) {
.icon-container {
justify-content: right;
margin-right: 0.5em;
}
}
}
.icon-editor {
display: flex;
flex-direction: column;
}
button {
border: none;
background: none;
padding: 0 0.5em;
}
.help {
font-size: 0.75em;
}
.delete-entity-container {
color: $error-fg;
cursor: pointer;

718
platypush/backend/http/webapp/src/components/panels/Entities/Procedure.vue Normal file
View file

@ -0,0 +1,718 @@
<template>
<div class="entity procedure-container">
<div class="head" :class="{collapsed: collapsed_}" @click="onHeaderClick">
<div class="icon">
<EntityIcon :entity="value" :icon="icon" :loading="loading" />
</div>
<div class="label">
<div class="name" v-text="value.name" />
</div>
<div class="value-and-toggler">
<div class="value">
<button class="btn btn-primary head-run-btn"
title="Run Procedure"
:disabled="loading"
@click.stop="run"
v-if="collapsed_">
<i class="fas fa-play" />
</button>
</div>
<div class="collapse-toggler" @click.stop="collapsed_ = !collapsed_">
<i class="fas" :class="{'fa-chevron-down': collapsed_, 'fa-chevron-up': !collapsed_}" />
</div>
</div>
</div>
<div class="body" v-if="!collapsed_" @click.stop>
<section class="run">
<header :class="{collapsed: runCollapsed}" @click="runCollapsed = !runCollapsed">
<span class="col-10">
<i class="fas fa-play" />&nbsp; Run
</span>
<span class="col-2 buttons">
<button type="button"
class="btn btn-primary"
:disabled="loading"
:title="runCollapsed ? 'Expand' : 'Collapse'">
<i class="fas" :class="{'fa-chevron-down': runCollapsed, 'fa-chevron-up': !runCollapsed}" />
</button>
</span>
</header>
<div class="run-body" v-if="!runCollapsed">
<form @submit.prevent="run">
<div class="args" v-if="value.args?.length">
Arguments
<div class="row arg" v-for="(arg, index) in value.args || []" :key="index">
<input type="text"
class="argname"
:value="arg"
:disabled="true" />&nbsp;=
<input type="text"
class="argvalue"
placeholder="Value"
:disabled="loading"
@input="updateArg(arg, $event)" />
</div>
</div>
<div class="extra args">
Extra Arguments
<div class="row arg" v-for="(value, name) in extraArgs" :key="name">
<input type="text"
class="argname"
placeholder="Name"
:value="name"
:disabled="loading"
@blur="updateExtraArgName(name, $event)" />&nbsp;=
<input type="text"
placeholder="Value"
class="argvalue"
:value="value"
:disabled="loading"
@input="updateExtraArgValue(arg, $event)" />
</div>
<div class="row add-arg">
<input type="text"
class="argname"
placeholder="Name"
v-model="newArgName"
:disabled="loading"
ref="newArgName"
@blur="addExtraArg" />&nbsp;=
<input type="text"
class="argvalue"
placeholder="Value"
v-model="newArgValue"
:disabled="loading"
@blur="addExtraArg" />
</div>
</div>
<div class="row run-container">
<button type="submit"
class="btn btn-primary"
:disabled="loading"
title="Run Procedure">
<i class="fas fa-play" />
</button>
</div>
</form>
<div class="response-container" v-if="lastResponse || lastError">
<Response :response="lastResponse" :error="lastError" />
</div>
</div>
</section>
<section class="info">
<header :class="{collapsed: infoCollapsed}" @click="infoCollapsed = !infoCollapsed">
<span class="col-10">
<i class="fas fa-info-circle" />&nbsp; Info
</span>
<span class="col-2 buttons">
<button type="button"
class="btn btn-primary"
:disabled="loading"
:title="infoCollapsed ? 'Expand' : 'Collapse'">
<i class="fas" :class="{'fa-chevron-down': infoCollapsed, 'fa-chevron-up': !infoCollapsed}" />
</button>
</span>
</header>
<div class="info-body" v-if="!infoCollapsed">
<div class="item">
<div class="label">Source</div>
<div class="value">
<i :class="procedureTypeIconClass" />&nbsp;
{{ value.procedure_type }}
</div>
</div>
<div class="item">
<IconEditor :entity="value" />
</div>
<div class="item actions" v-if="value?.actions?.length">
<div class="label">Actions</div>
<div class="value">
<div class="item">
<button type="button"
class="btn btn-primary"
title="Edit Actions"
:disabled="loading"
@click="showProcedureEditor = !showProcedureEditor">
<span v-if="isReadOnly && !showProcedureEditor">
<i class="fas fa-eye" />&nbsp; View
</span>
<span v-else-if="!isReadOnly && !showProcedureEditor">
<i class="fas fa-edit" />&nbsp; Edit
</span>
<span v-else>
<i class="fas fa-times" />&nbsp; Close
</span>
</button>
</div>
<div class="item delete" v-if="!isReadOnly">
<button type="button"
title="Delete Procedure"
:disabled="loading"
@click="showConfirmDelete = true">
<i class="fas fa-trash" />&nbsp; Delete
</button>
</div>
</div>
</div>
<div class="item" v-if="value.source">
<div class="label">Path</div>
<div class="value">
<a :href="$route.path" @click.prevent="showFileEditor = true">
{{ displayPath }}
</a>
</div>
</div>
</div>
</section>
</div>
<div class="file-editor-container" v-if="showFileEditor && value.source">
<FileEditor :file="value.source"
:line="value.line"
:visible="true"
:uppercase="false"
@close="showFileEditor = false" />
</div>
<ProcedureEditor :procedure="value"
:read-only="isReadOnly"
:with-name="!isReadOnly"
:with-save="!isReadOnly"
:value="value"
:visible="showProcedureEditor"
@input="onUpdate"
@close="showProcedureEditor = false"
ref="editor"
v-if="value?.actions?.length && showProcedureEditor" />
<div class="confirm-delete-container">
<ConfirmDialog :visible="true"
@input="remove"
@close="showConfirmDelete = false"
v-if="showConfirmDelete">
Are you sure you want to delete the procedure <b>{{ value.name }}</b>?
</ConfirmDialog>
</div>
</div>
</template>
<script>
import ConfirmDialog from "@/components/elements/ConfirmDialog";
import EntityMixin from "./EntityMixin"
import EntityIcon from "./EntityIcon"
import FileEditor from "@/components/File/EditorModal";
import IconEditor from "@/components/panels/Entities/IconEditor";
import ProcedureEditor from "@/components/Procedure/ProcedureEditorModal"
import Response from "@/components/Action/Response"
export default {
components: {
ConfirmDialog,
EntityIcon,
FileEditor,
IconEditor,
ProcedureEditor,
Response,
},
mixins: [EntityMixin],
emits: ['delete', 'input', 'loading'],
props: {
collapseOnHeaderClick: {
type: Boolean,
default: false,
},
selected: {
type: Boolean,
default: false,
},
},
data: function() {
return {
args: {},
defaultIconClass: 'fas fa-cogs',
extraArgs: {},
collapsed_: true,
infoCollapsed: false,
lastError: null,
lastResponse: null,
newArgName: '',
newArgValue: '',
runCollapsed: false,
showConfirmDelete: false,
showFileEditor: false,
showProcedureEditor: false,
}
},
computed: {
icon() {
const defaultClass = this.defaultIconClass
const currentClass = this.value.meta?.icon?.['class']
let iconClass = currentClass
if (!currentClass || currentClass === defaultClass) {
iconClass = this.procedureTypeIconClass || defaultClass
}
return {
...(this.value.meta?.icon || {}),
class: iconClass,
}
},
isReadOnly() {
return this.value.procedure_type !== 'db'
},
allArgs() {
return Object.entries({...this.args, ...this.extraArgs})
.map(([key, value]) => [key?.trim(), value])
.filter(
([key, value]) => (
key?.length
&& value != null
&& (
typeof value !== 'string'
|| value?.trim()?.length > 0
)
)
).reduce((acc, [key, value]) => {
acc[key] = value
return acc
}, {})
},
displayPath() {
let src = this.value.source
if (!src?.length) {
return null
}
const configDir = this.$root.configDir
if (configDir) {
src = src.replace(new RegExp(`^${configDir}/`), '')
}
const line = parseInt(this.value.line)
if (!isNaN(line)) {
src += `:${line}`
}
return src
},
procedureTypeIconClass() {
if (this.value.procedure_type === 'python')
return 'fab fa-python'
if (this.value.procedure_type === 'config')
return 'fas fa-file'
if (this.value.procedure_type === 'db')
return 'fas fa-database'
return this.defaultIconClass
},
},
methods: {
async run() {
this.$emit('loading', true)
try {
this.lastResponse = await this.request(`procedure.${this.value.name}`, this.allArgs)
this.lastError = null
this.notify({
text: 'Procedure executed successfully',
image: {
icon: 'play',
}
})
} catch (e) {
this.lastResponse = null
this.lastError = e
this.notify({
text: 'Failed to execute procedure',
error: true,
image: {
icon: 'exclamation-triangle',
}
})
} finally {
this.$emit('loading', false)
}
},
async remove() {
this.$emit('loading', true)
try {
await this.request('procedures.delete', {name: this.value.name})
this.$emit('loading', false)
this.$emit('delete')
this.notify({
text: 'Procedure deleted successfully',
image: {
icon: 'trash',
}
})
} finally {
this.$emit('loading', false)
}
},
onHeaderClick(event) {
if (this.collapseOnHeaderClick) {
event.stopPropagation()
this.collapsed_ = !this.collapsed_
}
},
onUpdate(value) {
if (!this.isReadOnly) {
this.$emit('input', value)
this.$nextTick(() => this.$refs.editor?.close())
}
},
updateArg(arg, event) {
let value = event.target.value
if (!value?.length) {
delete this.args[arg]
}
try {
value = JSON.parse(value)
} catch (e) {
// Do nothing
}
this.args[arg] = value
},
updateExtraArgName(oldName, event) {
let newName = event.target.value?.trim()
if (newName === oldName) {
return
}
if (newName?.length) {
if (oldName) {
this.extraArgs[newName] = this.extraArgs[oldName]
} else {
this.extraArgs[newName] = ''
}
} else {
this.focusNewArgName()
}
if (oldName) {
delete this.extraArgs[oldName]
}
},
updateExtraArgValue(arg, event) {
let value = event.target.value
if (!value?.length) {
delete this.extraArgs[arg]
return
}
this.extraArgs[arg] = this.deserializeValue(value)
},
addExtraArg() {
let name = this.newArgName?.trim()
let value = this.newArgValue
if (!name?.length || !value?.length) {
return
}
this.extraArgs[name] = this.deserializeValue(value)
this.newArgName = ''
this.newArgValue = ''
this.focusNewArgName()
},
deserializeValue(value) {
try {
return JSON.parse(value)
} catch (e) {
return value
}
},
focusNewArgName() {
this.$nextTick(() => this.$refs.newArgName.focus())
},
},
watch: {
collapsed: {
immediate: true,
handler(value) {
this.collapsed_ = value
},
},
selected: {
immediate: true,
handler(value) {
this.collapsed_ = value
},
},
showProcedureEditor(value) {
if (!value) {
this.$refs.editor?.reset()
}
},
},
mounted() {
this.collapsed_ = !this.selected
},
}
</script>
<style lang="scss" scoped>
@import "common";
$icon-width: 2em;
.procedure-container {
.body {
padding-bottom: 0;
cursor: default;
}
section {
header {
background: $tab-bg;
display: flex;
align-items: center;
font-size: 1.1em;
font-weight: bold;
margin: 1em -0.5em 0.5em -0.5em;
padding: 0.25em 1em 0.25em 0.5em;
border-top: 1px solid $default-shadow-color;
box-shadow: $border-shadow-bottom;
cursor: pointer;
&:hover {
background: $header-bg;
}
&.collapsed {
margin-bottom: -0.1em;
}
.buttons {
display: flex;
justify-content: flex-end;
}
button.btn {
background: none;
border: none;
color: initial;
&:hover {
color: $default-hover-fg;
}
}
}
&:first-of-type header {
margin-top: -0.5em;
&.collapsed {
margin-bottom: -1em;
}
}
}
.head {
&:not(.collapsed) {
background: $selected-bg;
border-bottom: 1px solid $default-shadow-color;
}
.icon, .collapse-toggler {
width: $icon-width;
}
.label, .value-and-toggler {
min-width: calc(((100% - (2 * $icon-width)) / 2) - 1em);
max-width: calc(((100% - (2 * $icon-width)) / 2) - 1em);
}
.label {
margin-left: 1em;
}
.value-and-toggler {
text-align: right;
}
}
form {
width: 100%;
.row {
width: 100%;
input[type=text] {
width: 100%;
}
}
.args {
.arg {
margin-bottom: 0.25em;
padding-bottom: 0.25em;
border-bottom: 1px solid $default-shadow-color;
}
.argname {
font-weight: bold;
}
@include until($tablet) {
.argname {
width: calc(100% - 2em) !important;
}
.argvalue {
width: 100% !important;
}
}
@include from($tablet) {
display: flex;
flex-wrap: wrap;
.argname {
width: calc(35% - 2em) !important;
}
.argvalue {
width: 65% !important;
}
}
}
.run-container {
display: flex;
justify-content: center;
font-size: 1.5em;
margin-top: 0.5em;
button {
padding: 0 1em;
text-align: center;
border-radius: 0.5em;
}
}
}
.info-body {
.item {
display: flex;
padding: 0.5em 0.25em;
@include until($tablet) {
border-bottom: 1px solid $default-shadow-color;
}
&.delete {
justify-content: center;
button {
width: 100%;
color: $error-fg;
padding: 0;
&:hover {
color: $default-hover-fg;
}
}
}
}
.label {
font-weight: bold;
@include until($tablet) {
width: 100%;
}
@include from($tablet) {
width: 33.3333%;
}
}
.value {
text-align: right;
@include until($tablet) {
width: 100%;
}
@include from($tablet) {
width: 66.6667%;
}
a {
width: 100%;
}
}
.actions {
@include until($tablet) {
flex-direction: column;
}
.item {
border-bottom: none;
}
button {
width: 100%;
height: 2.5em;
padding: 0;
border-radius: 1em;
&:hover {
color: $default-hover-fg;
}
}
}
}
.head-run-btn {
background: none;
border: none;
font-size: 1.25em;
&:hover {
background: none;
color: $default-hover-fg-2;
}
}
}
</style>

8
platypush/backend/http/webapp/src/components/panels/Entities/meta.json
View file

@ -287,6 +287,14 @@
}
},
"procedure": {
"name": "Procedure",
"name_plural": "Procedures",
"icon": {
"class": "fas fa-cogs"
}
},
"weight_sensor": {
"name": "Sensor",
"name_plural": "Sensors",

6
platypush/backend/http/webapp/src/components/panels/Extensions/Config.vue
View file

@ -13,7 +13,7 @@
<script>
import 'highlight.js/lib/common'
import 'highlight.js/styles/stackoverflow-dark.min.css'
import 'highlight.js/styles/night-owl.min.css'
import hljs from "highlight.js"
import CopyButton from "@/components/elements/CopyButton"
import Utils from "@/Utils";
@ -61,9 +61,9 @@ export default {
}
return hljs.highlight(
'yaml',
'# Currently loaded configuration\n' +
this.curYamlConfig
this.curYamlConfig,
{language: 'yaml'}
).value.trim()
},
},

2
platypush/backend/http/webapp/src/components/panels/Extensions/Install.vue
View file

@ -44,7 +44,7 @@
<script>
import 'highlight.js/lib/common'
import 'highlight.js/styles/stackoverflow-dark.min.css'
import 'highlight.js/styles/nord.min.css'
import hljs from "highlight.js"
import CopyButton from "@/components/elements/CopyButton"
import Loading from "@/components/Loading"

310
platypush/backend/http/webapp/src/components/panels/Procedures/Index.vue Normal file
View file

@ -0,0 +1,310 @@
<template>
<div class="procedures-container">
<header>
<input type="search"
class="filter"
title="Filter procedures"
placeholder="🔎"
v-model="filter" />
</header>
<main>
<Loading v-if="loading" />
<NoItems v-else-if="!Object.keys(procedures || {}).length">
No Procedures Configured
</NoItems>
<div class="procedures-list" v-else>
<div class="procedures items">
<div class="item" v-for="procedure in displayedProcedures" :key="procedure.name">
<Procedure :value="procedure"
:selected="selectedProcedure === procedure.name"
:collapseOnHeaderClick="true"
@click="toggleProcedure(procedure)"
@input="updateProcedure(procedure)"
@delete="() => delete procedures[procedure.name]" />
</div>
</div>
<ProcedureEditor :value="newProcedure"
title="Add Procedure"
:with-name="true"
:with-save="true"
:read-only="false"
:visible="showNewProcedureEditor"
@input="updateProcedure(newProcedure)"
@close="resetNewProcedure"
v-if="showNewProcedureEditor" />
</div>
<FloatingButton icon-class="fa fa-plus"
text="Add Procedure"
@click="showNewProcedureEditor = true" />
</main>
</div>
</template>
<script>
import Loading from "@/components/Loading";
import FloatingButton from "@/components/elements/FloatingButton";
import NoItems from "@/components/elements/NoItems";
import Procedure from "@/components/panels/Entities/Procedure"
import ProcedureEditor from "@/components/Procedure/ProcedureEditorModal"
import Utils from "@/Utils";
export default {
components: {
FloatingButton,
Loading,
NoItems,
Procedure,
ProcedureEditor,
},
mixins: [Utils],
props: {
pluginName: {
type: String,
},
config: {
type: Object,
default: () => {},
},
},
data() {
return {
filter: '',
loading: false,
newProcedure: null,
newProcedureTemplate: {
name: '',
actions: [],
meta: {
icon: {
class: 'fas fa-cogs',
url: null,
color: null,
},
},
},
procedures: {},
selectedProcedure: null,
showConfirmClose: false,
showNewProcedureEditor: false,
}
},
computed: {
displayedProcedures() {
return Object.values(this.procedures)
.filter(procedure => procedure.name.toLowerCase().includes(this.filter.toLowerCase()))
},
},
methods: {
mergeArgs(oldObj, newObj) {
return {
...Object.fromEntries(
Object.entries(oldObj || {}).map(([key, value]) => {
const newValue = newObj?.[key]
if (newValue != null) {
if (typeof value === 'object' && !Array.isArray(value))
return [key, this.mergeArgs(value, newValue)]
return [key, newValue]
}
return [key, value]
})
),
...Object.fromEntries(
Object.entries(newObj || {}).filter(([key]) => oldObj?.[key] == null)
),
}
},
updateProcedure(procedure) {
if (!procedure?.name?.length)
return
const curProcedure = this.procedures[procedure.name]
this.procedures[procedure.name] = {
...this.mergeArgs(curProcedure, procedure),
name: procedure?.meta?.name_override || procedure.name,
}
this.showNewProcedureEditor = false
},
async refresh() {
const args = this.getUrlArgs()
if (args.filter)
this.filter = args.filter
this.loading = true
try {
this.procedures = await this.request('procedures.status')
} finally {
this.loading = false
}
},
onEntityUpdate(msg) {
const entity = msg?.entity
if (entity?.plugin !== this.pluginName || !entity?.name?.length)
return
this.updateProcedure(entity)
},
onEntityDelete(msg) {
const entity = msg?.entity
if (entity?.plugin !== this.pluginName)
return
if (this.selectedProcedure === entity.name)
this.selectedProcedure = null
if (this.procedures[entity.name])
delete this.procedures[entity.name]
},
resetNewProcedure() {
this.showNewProcedureEditor = false
this.newProcedure = JSON.parse(JSON.stringify(this.newProcedureTemplate))
},
toggleProcedure(procedure) {
this.selectedProcedure =
this.selectedProcedure === procedure.name ?
null : procedure.name
},
},
watch: {
filter() {
if (!this.filter?.length)
this.setUrlArgs({ filter: null })
else
this.setUrlArgs({ filter: this.filter })
},
showNewProcedureEditor(val) {
if (!val)
this.resetNewProcedure()
},
},
async mounted() {
this.resetNewProcedure()
await this.refresh()
this.subscribe(
this.onEntityUpdate,
'on-procedure-entity-update',
'platypush.message.event.entities.EntityUpdateEvent'
)
this.subscribe(
this.onEntityDelete,
'on-procedure-entity-delete',
'platypush.message.event.entities.EntityDeleteEvent'
)
},
unmounted() {
this.unsubscribe('on-procedure-entity-update')
this.unsubscribe('on-procedure-entity-delete')
this.setUrlArgs({ filter: null })
},
}
</script>
<style lang="scss" scoped>
@import "src/style/items";
$header-height: 3em;
.procedures-container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
flex-grow: 1;
header {
width: 100%;
height: $header-height;
background: $tab-bg;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid $default-shadow-color;
input.filter {
max-width: 600px;
@include until($tablet) {
width: calc(100% - 2em);
}
@include from($tablet) {
width: 600px;
}
}
}
main {
width: 100%;
height: calc(100% - #{$header-height});
overflow: auto;
margin-bottom: 2em;
}
.procedures-list {
width: 100%;
height: 100%;
display: flex;
background: $default-bg-6;
flex-grow: 1;
justify-content: center;
}
.procedures {
@include until($tablet) {
width: 100%;
}
@include from($tablet) {
width: calc(100% - 2em);
margin-top: 1em;
border-radius: 1em;
}
max-width: 800px;
background: $default-bg-2;
display: flex;
flex-direction: column;
margin-bottom: auto;
box-shadow: $border-shadow-bottom-right;
.item {
padding: 0;
&:first-child {
border-top-left-radius: 1em;
border-top-right-radius: 1em;
}
&:last-child {
border-bottom-left-radius: 1em;
border-bottom-right-radius: 1em;
}
}
}
}
</style>

58
platypush/backend/http/webapp/src/mixins/Autocomplete/Props.vue Normal file
View file

@ -0,0 +1,58 @@
<script>
export default {
props: {
items: {
type: Array,
required: true,
},
value: {
type: [String, Number, Object, Array, Boolean],
default: "",
},
disabled: {
type: Boolean,
default: false,
},
autofocus: {
type: Boolean,
default: false,
},
label: {
type: String,
},
placeholder: {
type: String,
},
inputOnBlur: {
type: Boolean,
default: true,
},
inputOnSelect: {
type: Boolean,
default: true,
},
selectOnTab: {
type: Boolean,
default: true,
},
showAllItems: {
type: Boolean,
default: false,
},
showResultsWhenBlank: {
type: Boolean,
default: false,
},
},
}
</script>

52
platypush/backend/http/webapp/src/style/animations.scss
View file

@ -14,6 +14,38 @@
-webkit-animation-name: fadeOut;
}
.expand {
animation-duration: 0.5s;
-webkit-animation-duration: 0.5s;
animation-fill-mode: both;
animation-name: expand;
-webkit-animation-name: expand;
}
.shrink {
animation-duration: 0.5s;
-webkit-animation-duration: 0.5s;
animation-fill-mode: both;
animation-name: shrink;
-webkit-animation-name: shrink;
}
.fold {
animation-duration: 0.5s;
-webkit-animation-duration: 0.5s;
animation-fill-mode: both;
animation-name: fold;
-webkit-animation-name: fold;
}
.unfold {
animation-duration: 0.5s;
-webkit-animation-duration: 0.5s;
animation-fill-mode: both;
animation-name: unfold;
-webkit-animation-name: unfold;
}
@keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
@ -27,6 +59,26 @@
}
}
@keyframes expand {
0% {transform: scale(0);}
100% {transform: scale(1);}
}
@keyframes shrink {
0% {transform: scale(1);}
100% {transform: scale(0);}
}
@keyframes fold {
0% {transform: scale(1, 1);}
100% {transform: scale(1, 0);}
}
@keyframes unfold {
0% {transform: scale(1, 0);}
100% {transform: scale(1, 1);}
}
.glow {
animation-duration: 2s;
-webkit-animation-duration: 2s;

20
platypush/backend/http/webapp/src/style/components.scss
View file

@ -1,3 +1,6 @@
$floating-btn-size: 4em;
$monospace-font: 'Hack', 'Fira Code', 'Noto Sans Mono', 'Ubuntu Mono', 'Recursive', 'Inconsolata', 'Consolas', 'Courier New', monospace;
button, .btn, .btn-default {
border: $default-border-3;
cursor: pointer;
@ -11,8 +14,9 @@ button, .btn, .btn-default {
}
&:hover {
background: $hover-bg;
border: 1px solid $default-hover-fg;
color: $default-hover-fg;
// background: $hover-bg;
// border: 1px solid $default-hover-fg;
}
.icon {
@ -27,6 +31,14 @@ button, .btn, .btn-default {
}
}
[draggable] {
cursor: grab !important;
}
.dragged {
opacity: 0.5 !important;
}
input[type=text], input[type=password] {
border: $default-border-3;
border-radius: 1em;
@ -125,5 +137,9 @@ $nav-height: 2.5em;
}
}
code {
font-family: $monospace-font;
}
// Tabs
$tab-height: 3.5em;

33
platypush/backend/http/webapp/src/style/themes/light.scss
View file

@ -8,14 +8,13 @@ $default-bg-6: #e4eae8 !default;
$default-bg-7: #e4e4e4 !default;
$ok-fg: #17ad17 !default;
$error-fg: #ad1717 !default;
$error-fg-2: red !default;
$error-bg: #ffaaa2 !default;
$tile-bg: linear-gradient(90deg, rgba(9,174,128,1) 0%, rgba(71,226,179,1) 120%);
$tile-fg: white;
$tile-hover-bg: linear-gradient(90deg, rgba(41,216,159,1) 0%, rgba(9,188,138,1) 70%);
$default-fg: black !default;
$default-fg-2: #23513a !default;
$default-fg-3: #195331b3 !default;
$inverse-fg: white !default;
$header-bg: linear-gradient(0deg, #c0e8e4, #e4f8f4) !default;
$header-bg-2: linear-gradient(90deg, #f3f3f3, white) !default;
$no-items-color: #555555;
@ -67,9 +66,12 @@ $border-shadow-bottom-right: 2.5px 2.5px 3px 0 $default-shadow-color;
$border-shadow: 0 0 3px 3px #c0c0c0 !default;
$header-shadow: 0px 1px 3px 1px #bbb !default;
$group-shadow: 3px -2px 6px 1px #98b0a0;
$primary-btn-shadow: 1px 1px 0.5px 0.75px #32b64640 !default;
$search-bar-shadow: 1px 1px 1px 1px #ddd !default;
//// Buttons
$submit-btn-bg: #ebffeb;
$primary-btn-shadow: 1px 1px 0.5px 0.75px #32b64640 !default;
//// Modals
$modal-header-bg: #e0e0e0 !default;
$modal-header-border: 1px solid #ccc !default;
@ -180,3 +182,26 @@ $code-dark-bg: rgb(11, 11, 13) !default;
$code-dark-fg: rgb(243, 243, 250) !default;
$code-light-bg: #f2f0e9 !default;
$code-light-fg: #090909 !default;
//// Sections
$section-shadow: 0 3px 3px 0 rgba(187,187,187,0.75), 0 3px 3px 0 rgba(187,187,187,0.75);
$doc-bg: linear-gradient(#effbe3, #e0ecdb);
$doc-shadow: 0 1px 3px 1px #d7d3c0, inset 0 1px 1px 0 #d7d3c9;
$output-bg: #151515;
$output-shadow: $doc-shadow;
//// Titles
$title-bg: #eee;
$title-border: 1px solid #ddd;
$title-shadow: 0 3px 3px 0 rgba(187,187,187,0.75);
//// Tiles
$tile-bg: linear-gradient(90deg, rgba(9,174,128,1) 0%, rgba(71,226,179,1) 120%);
$tile-bg-2: linear-gradient(270deg, rgb(71, 226, 179) 0%, rgb(81, 186, 210) 120%);
$tile-bg-3: linear-gradient(90deg, rgb(9, 174, 43) 0%, rgb(71, 226, 179) 120%);
$tile-fg: white;
$tile-hover-bg: linear-gradient(90deg, rgba(41,216,159,1) 0%, rgba(9,188,138,1) 70%);
$tile-hover-bg-2: linear-gradient(90deg, rgb(71, 226, 179) 0%, rgb(81, 186, 210) 120%);
$tile-hover-bg-3: linear-gradient(90deg, rgb(41, 216, 63) 0%, rgb(9, 188, 138) 120%);
$tile-keyword-fg: #f8ff00;
$tile-code-fg: #2a5ab7;

10
platypush/backend/http/webapp/src/utils/Text.vue
View file

@ -37,6 +37,16 @@ export default {
formatNumber(number) {
return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
},
escapeHTML(value) {
return value
?.toString?.()
?.replace?.(/&/g, "&amp;")
?.replace?.(/</g, "&lt;")
?.replace?.(/>/g, "&gt;")
?.replace?.(/"/g, "&quot;")
?.replace?.(/'/g, "&#039;") || ''
},
},
}
</script>