Skip to content

Commit

Permalink
feat: add action command prompt dialog and panel buttons
Browse files Browse the repository at this point in the history
Signed-off-by: Stefan Dej <[email protected]>
  • Loading branch information
meteyou committed Oct 28, 2023
1 parent c9b7e58 commit 1f17ba6
Show file tree
Hide file tree
Showing 2 changed files with 109 additions and 39 deletions.
104 changes: 65 additions & 39 deletions src/components/dialogs/TheActionCommandPrompt.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
<v-dialog :value="showDialog" width="400" persistent :fullscreen="isMobile">
<panel
:title="headline"
:icon="mdiArrowCollapseDown"
card-class="manual_probe-dialog"
:icon="mdiInformation"
card-class="action_command_prompt-dialog"
:margin-bottom="false"
style="overflow: hidden"
:height="isMobile ? 0 : 548">
Expand All @@ -13,21 +13,19 @@
</v-btn>
</template>
<v-card-text>
<v-row>
<v-col>{{ activePrompt.length }}</v-col>
</v-row>
<template v-for="(event, index) in activePromptContent">
<v-row :key="index">
<v-col>{{ event.message }}</v-col>
</v-row>
</template>
</v-card-text>
<v-card-actions>
<v-card-actions v-if="buttonPrimary || buttonSecondary">
<v-spacer />
<v-btn text>
{{ $t('BedScrews.Abort') }}
</v-btn>
<v-btn color="primary" text>
{{ $t('BedScrews.Adjusted') }}
</v-btn>
<v-btn color="primary" text>
{{ $t('BedScrews.Accept') }}
</v-btn>
<the-action-command-prompt-action-button
v-if="buttonSecondary"
:event="buttonSecondary"
type="secondary" />
<the-action-command-prompt-action-button v-if="buttonPrimary" :event="buttonPrimary" type="primary" />
</v-card-actions>
</panel>
</v-dialog>
Expand All @@ -37,16 +35,14 @@
import { Component, Mixins } from 'vue-property-decorator'
import BaseMixin from '@/components/mixins/base'
import Panel from '@/components/ui/Panel.vue'
import Responsive from '@/components/ui/Responsive.vue'
import { mdiArrowCollapseDown, mdiInformation, mdiCloseThick } from '@mdi/js'
import ControlMixin from '@/components/mixins/control'
import { mdiCloseThick, mdiInformation } from '@mdi/js'
import { ServerStateEvent } from '@/store/server/types'
@Component({
components: { Panel, Responsive },
components: { Panel },
})
export default class TheActionCommandPrompt extends Mixins(BaseMixin, ControlMixin) {
mdiArrowCollapseDown = mdiArrowCollapseDown
export default class TheActionCommandPrompt extends Mixins(BaseMixin) {
mdiInformation = mdiInformation
mdiCloseThick = mdiCloseThick
Expand All @@ -58,52 +54,82 @@ export default class TheActionCommandPrompt extends Mixins(BaseMixin, ControlMix
return this.events.filter((event: ServerStateEvent) => event.type === 'action')
}
get lastPromptStartPos() {
get lastPromptBeginPos() {
if (this.lastPromptShowPos === -1) return -1
return this.actions.lastIndexOf(
(event: ServerStateEvent) => event.message.startsWith('action:prompt_start'),
return this.actions.findLastIndex(
(event: ServerStateEvent) => event.message.startsWith('// action:prompt_begin'),
this.lastPromptShowPos
)
}
get lastPromptShowPos() {
return this.actions.lastIndexOf((event: ServerStateEvent) => event.message.startsWith('action:prompt_show'))
return this.actions.findLastIndex((event: ServerStateEvent) =>
event.message.startsWith('// action:prompt_show')
)
}
get lastPromptClosePos() {
return this.actions.lastIndexOf((event: ServerStateEvent) => event.message.startsWith('action:prompt_close'))
return this.actions.findLastIndex((event: ServerStateEvent) =>
event.message.startsWith('// action:prompt_close')
)
}
get showDialog() {
if (this.lastPromptStartPos === -1) return false
if (this.lastPromptBeginPos === -1) return false
return this.lastPromptStartPos > this.lastPromptClosePos
return this.lastPromptBeginPos > this.lastPromptClosePos
}
get activePrompt() {
if (this.lastPromptShowPos === -1) return []
const events = this.actions.slice(this.lastPromptStartPos, this.lastPromptShowPos)
window.console.log(events)
return this.actions.slice(this.lastPromptBeginPos, this.lastPromptShowPos)
}
get activePromptContent() {
const allowedTypes = ['button', 'text']
return this.activePrompt.filter((event: ServerStateEvent) => {
let type = event.message.replace('// action:prompt_', '').split(' ')[0].trim()
return events
return allowedTypes.includes(type)
})
}
get headline() {
return 'Bla bla headline'
if (!this.showDialog || this.lastPromptBeginPos === -1) return ''
return (this.actions[this.lastPromptBeginPos].message ?? '')
.replace('// action:prompt_begin', '')
.replace(/"/g, '')
.trim()
}
closePrompt() {
const gcode = `RESPOND type="action" msg="action:prompt_close"`
this.$store.dispatch('server/addEvent', { message: gcode, type: 'command' })
this.$socket.emit('printer.gcode.script', { script: gcode })
get buttonPrimary() {
const index = this.activePrompt.findLastIndex((event: ServerStateEvent) =>
event.message.startsWith('// action:prompt_button_primary')
)
if (index === -1) return null
return this.activePrompt[index]
}
sendAdjusted() {
const gcode = `ADJUSTED`
get buttonSecondary() {
const index = this.activePrompt.findLastIndex((event: ServerStateEvent) =>
event.message.startsWith('// action:prompt_button_secondary')
)
if (index === -1) return null
return this.activePrompt[index]
}
closePrompt() {
const gcode = `RESPOND type="command" msg="action:prompt_close"`
this.$store.dispatch('server/addEvent', { message: gcode, type: 'command' })
this.$socket.emit('printer.gcode.script', { script: gcode }, { loading: 'manualProbeAccept' })
this.$socket.emit('printer.gcode.script', { script: gcode })
}
}
</script>
Expand Down
44 changes: 44 additions & 0 deletions src/components/dialogs/TheActionCommandPromptActionButton.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
<template>
<v-btn :color="color" text @click="clickButton">
{{ text }}
</v-btn>
</template>

<script lang="ts">
import { Component, Mixins, Prop } from 'vue-property-decorator'
import BaseMixin from '@/components/mixins/base'
import { ServerStateEvent } from '@/store/server/types'
@Component({})
export default class TheActionCommandPromptActionButton extends Mixins(BaseMixin) {
@Prop({ type: Object, required: true }) readonly event!: ServerStateEvent
@Prop({ type: String, required: true }) readonly type!: 'primary' | 'secondary'
get filtertedMessageSplits() {
return (this.event.message ?? '')
.replace(`// action:prompt_button_${this.type}`, '')
.replace(/"/g, '')
.trim()
.split('|')
}
get text() {
return this.filtertedMessageSplits[0]
}
get command() {
return this.filtertedMessageSplits[1] ?? this.text
}
get color() {
return this.type === 'primary' ? 'primary' : ''
}
clickButton() {
this.$store.dispatch('server/addEvent', { message: this.command, type: 'command' })
this.$socket.emit('printer.gcode.script', { script: this.command })
}
}
</script>

<style scoped></style>

0 comments on commit 1f17ba6

Please sign in to comment.