parent
18252912a9
commit
4a3e92b910
@ -0,0 +1,78 @@
|
||||
<script setup lang="ts">
|
||||
import {defineEmits, ref} from 'vue'
|
||||
import {MathStatement} from '../support/parse'
|
||||
import Katex from '../components/Katex.vue'
|
||||
import { v4 as uuidv4 } from 'uuid'
|
||||
import {StatementID} from '../types'
|
||||
|
||||
const emit = defineEmits<{
|
||||
(eventName: 'save', statement: MathStatement): void
|
||||
}>()
|
||||
|
||||
const expressionPreview = ref(MathStatement.temp(''))
|
||||
const expressionPreviewKey = ref(uuidv4())
|
||||
const expressionError = ref<string|undefined>(undefined)
|
||||
const expressionValue = ref<string>('')
|
||||
|
||||
const updateExpressionPreview = () => {
|
||||
const previewStmt = MathStatement.temp(expressionValue.value)
|
||||
if ( previewStmt.isValid() ) {
|
||||
expressionPreview.value = MathStatement.temp(expressionValue.value)
|
||||
expressionPreviewKey.value = uuidv4()
|
||||
}
|
||||
}
|
||||
|
||||
const validateExpression = () => {
|
||||
const stmt = MathStatement.temp(expressionValue.value)
|
||||
if ( !stmt.isValid() ) {
|
||||
return 'The expression is invalid'
|
||||
}
|
||||
|
||||
if ( stmt.defines().length > 0 ) {
|
||||
return 'Expressions cannot declare variables'
|
||||
}
|
||||
}
|
||||
|
||||
const saveExpression = () => {
|
||||
expressionError.value = validateExpression()
|
||||
if ( expressionError.value ) {
|
||||
return
|
||||
}
|
||||
|
||||
emit('save', new MathStatement(
|
||||
uuidv4() as StatementID,
|
||||
expressionValue.value
|
||||
))
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-card>
|
||||
<q-card-section>
|
||||
<div style="display: flex; justify-content: center">
|
||||
<Katex
|
||||
:key="expressionPreviewKey"
|
||||
:statement="expressionPreview"
|
||||
/>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-card-section v-if="expressionError">
|
||||
<div style="color: darkred; font-weight: bold">{{ expressionError }}</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<q-input
|
||||
v-model="expressionValue"
|
||||
v-on:update:model-value="() => updateExpressionPreview()"
|
||||
outlined
|
||||
autogrow
|
||||
type="textarea"
|
||||
autofocus
|
||||
label="Expression"
|
||||
/>
|
||||
</q-card-section>
|
||||
<q-card-actions align="right" class="text-primary">
|
||||
<q-btn flat label="Cancel" v-close-popup></q-btn>
|
||||
<q-btn flat label="Save" @click="() => saveExpression()"></q-btn>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</template>
|
@ -0,0 +1,94 @@
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
import {MathStatement} from '../support/parse'
|
||||
import {v4 as uuidv4} from 'uuid'
|
||||
import Katex from '../components/Katex.vue'
|
||||
import {StatementID} from '../types'
|
||||
|
||||
const emit = defineEmits<{
|
||||
(eventName: 'save', statement: MathStatement): void,
|
||||
}>()
|
||||
|
||||
const newVariablePreview = ref(MathStatement.temp('? = ?'))
|
||||
let newVariablePreviewKey = ref(uuidv4())
|
||||
const newVariableModalError = ref<string|undefined>(undefined)
|
||||
const newVariableName = ref('')
|
||||
const newVariableValue = ref('')
|
||||
|
||||
const updateNewVariablePreview = () => {
|
||||
const previewStmt = MathStatement.temp(`${newVariableName.value} = ${newVariableValue.value}`)
|
||||
if ( previewStmt.isValid() ) {
|
||||
newVariablePreview.value = MathStatement.temp(`${newVariableName.value} = ${newVariableValue.value}`)
|
||||
newVariablePreviewKey.value = uuidv4()
|
||||
}
|
||||
}
|
||||
|
||||
const validateNewVariable = () => {
|
||||
if ( !newVariableName.value ) {
|
||||
return 'Missing variable name'
|
||||
}
|
||||
|
||||
if ( !newVariableValue.value ) {
|
||||
return 'Missing variable value'
|
||||
}
|
||||
|
||||
const stmt = MathStatement.temp(`${newVariableName.value} = ${newVariableValue.value}`)
|
||||
if ( !stmt.isValid() ) {
|
||||
return 'Assignment is invalid'
|
||||
}
|
||||
|
||||
if ( !stmt.isNotRecursive() ) {
|
||||
return 'A variable may not reference itself'
|
||||
}
|
||||
}
|
||||
|
||||
const saveNewVariable = () => {
|
||||
newVariableModalError.value = validateNewVariable()
|
||||
if ( newVariableModalError.value ) {
|
||||
return
|
||||
}
|
||||
|
||||
emit('save', new MathStatement(
|
||||
uuidv4() as StatementID,
|
||||
`${newVariableName.value} = ${newVariableValue.value}`
|
||||
))
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-card>
|
||||
<q-card-section>
|
||||
<div style="display: flex; justify-content: center">
|
||||
<Katex
|
||||
:key="newVariablePreviewKey"
|
||||
:statement="newVariablePreview"
|
||||
/>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-card-section v-if="newVariableModalError">
|
||||
<div style="color: darkred; font-weight: bold">{{ newVariableModalError }}</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<q-input
|
||||
v-model="newVariableName"
|
||||
v-on:update:model-value="() => updateNewVariablePreview()"
|
||||
outlined
|
||||
autofocus
|
||||
label="Variable name"
|
||||
/>
|
||||
<br>
|
||||
<q-input
|
||||
v-model="newVariableValue"
|
||||
v-on:update:model-value="() => updateNewVariablePreview()"
|
||||
outlined
|
||||
type="textarea"
|
||||
autogrow
|
||||
label="Value"
|
||||
/>
|
||||
</q-card-section>
|
||||
<q-card-actions align="right" class="text-primary">
|
||||
<q-btn flat label="Cancel" v-close-popup></q-btn>
|
||||
<q-btn flat label="Save" @click="() => saveNewVariable()"></q-btn>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</template>
|
Loading…
Reference in new issue