Merge branch 'qi'
This commit is contained in:
commit
7e07427238
@ -20,6 +20,7 @@
|
||||
"@quasar/extras": "^1.13.5",
|
||||
"@types/katex": "^0.14.0",
|
||||
"@types/uuid": "^8.3.4",
|
||||
"@types/validator": "^13.7.2",
|
||||
"@vuetify/vite-plugin": "1.0.0-alpha.10",
|
||||
"chart.js": "^3.7.1",
|
||||
"dependency-graph": "^0.11.0",
|
||||
@ -28,6 +29,7 @@
|
||||
"mathjs": "^10.4.3",
|
||||
"quasar": "^2.6.6",
|
||||
"uuid": "^8.3.2",
|
||||
"validator": "^13.7.0",
|
||||
"vue": "^3.2.25",
|
||||
"vue-chart-3": "^3.1.8",
|
||||
"vue-router": "^4.0.14",
|
||||
|
||||
@ -7,6 +7,7 @@ specifiers:
|
||||
'@quasar/vite-plugin': ^1.0.9
|
||||
'@types/katex': ^0.14.0
|
||||
'@types/uuid': ^8.3.4
|
||||
'@types/validator': ^13.7.2
|
||||
'@typescript-eslint/eslint-plugin': ^5.18.0
|
||||
'@typescript-eslint/parser': ^5.18.0
|
||||
'@vitejs/plugin-vue': ^2.3.1
|
||||
@ -22,6 +23,7 @@ specifiers:
|
||||
sass: 1.32.0
|
||||
typescript: ^4.5.4
|
||||
uuid: ^8.3.2
|
||||
validator: ^13.7.0
|
||||
vite: ^2.9.0
|
||||
vue: ^3.2.25
|
||||
vue-chart-3: ^3.1.8
|
||||
@ -34,6 +36,7 @@ dependencies:
|
||||
'@quasar/extras': 1.13.5
|
||||
'@types/katex': 0.14.0
|
||||
'@types/uuid': 8.3.4
|
||||
'@types/validator': 13.7.2
|
||||
'@vuetify/vite-plugin': 1.0.0-alpha.10_vite@2.9.1+vuetify@3.0.0-beta.0
|
||||
chart.js: 3.7.1
|
||||
dependency-graph: 0.11.0
|
||||
@ -42,6 +45,7 @@ dependencies:
|
||||
mathjs: 10.4.3
|
||||
quasar: 2.6.6
|
||||
uuid: 8.3.2
|
||||
validator: 13.7.0
|
||||
vue: 3.2.31
|
||||
vue-chart-3: 3.1.8_chart.js@3.7.1+vue@3.2.31
|
||||
vue-router: 4.0.14_vue@3.2.31
|
||||
@ -393,6 +397,10 @@ packages:
|
||||
resolution: {integrity: sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==}
|
||||
dev: false
|
||||
|
||||
/@types/validator/13.7.2:
|
||||
resolution: {integrity: sha512-KFcchQ3h0OPQgFirBRPZr5F/sVjxZsOrQHedj3zi8AH3Zv/hOLx2OLR4hxR5HcfoU+33n69ZuOfzthKVdMoTiw==}
|
||||
dev: false
|
||||
|
||||
/@types/vfile-message/2.0.0:
|
||||
resolution: {integrity: sha512-GpTIuDpb9u4zIO165fUy9+fXcULdD8HFRNli04GehoMVbeNq7D6OBnqSmg3lxZnC+UvgUhEWKxdKiwYUkGltIw==}
|
||||
deprecated: This is a stub types definition. vfile-message provides its own type definitions, so you do not need this installed.
|
||||
@ -3761,6 +3769,11 @@ packages:
|
||||
spdx-expression-parse: 3.0.1
|
||||
dev: true
|
||||
|
||||
/validator/13.7.0:
|
||||
resolution: {integrity: sha512-nYXQLCBkpJ8X6ltALua9dRrZDHVYxjJ1wgskNt1lH9fzGjs3tgojGSCBjmEPwkWS1y29+DrizMTW19Pr9uB2nw==}
|
||||
engines: {node: '>= 0.10'}
|
||||
dev: false
|
||||
|
||||
/vfile-message/1.1.1:
|
||||
resolution: {integrity: sha512-1WmsopSGhWt5laNir+633LszXvZ+Z/lxveBf6yhGsqnQIhlhzooZae7zV6YVM1Sdkw68dtAW3ow0pOdPANugvA==}
|
||||
dependencies:
|
||||
|
||||
60
src/App.vue
60
src/App.vue
@ -1,14 +1,54 @@
|
||||
<script setup lang="ts">
|
||||
import Home from "./pages/Login.vue";
|
||||
import Home from "./pages/Home.vue";
|
||||
// This starter template is using Vue 3 <script setup> SFCs
|
||||
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
|
||||
import HelloWorld from "./components/HelloWorld.vue";
|
||||
import { MathStatement } from "./support/parse";
|
||||
import { MathPage } from "./support/page";
|
||||
import { ref } from "vue";
|
||||
import { onMounted, ref } from "vue";
|
||||
import { checkLoggedIn, loggedOut, loggedIn } from "./support/auth";
|
||||
import router from "./router";
|
||||
|
||||
(window as any).Stmt = MathStatement;
|
||||
(window as any).Pg = MathPage;
|
||||
|
||||
const status = ref(checkLoggedIn())
|
||||
|
||||
; (async () => {
|
||||
const response = await fetch('/api/login/status/', {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
},
|
||||
})
|
||||
const res = (await response.json()) as unknown as any
|
||||
if (res.data.hasUser) {
|
||||
loggedIn()
|
||||
}
|
||||
status.value = checkLoggedIn()
|
||||
})()
|
||||
|
||||
onMounted(() => {
|
||||
status.value = checkLoggedIn()
|
||||
console.log(status.value)
|
||||
})
|
||||
|
||||
router.afterEach(() => {
|
||||
status.value = checkLoggedIn()
|
||||
console.log(status.value)
|
||||
})
|
||||
|
||||
const logout = async () => {
|
||||
const response = await fetch('/api/logout/', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
},
|
||||
})
|
||||
loggedOut()
|
||||
status.value = checkLoggedIn()
|
||||
router.push({path: '/'})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -18,15 +58,14 @@ import { ref } from "vue";
|
||||
<q-toolbar-title>
|
||||
<q-avatar>
|
||||
<img src="https://cdn.quasar.dev/logo-v2/svg/logo-mono-white.svg" />
|
||||
</q-avatar>
|
||||
Title
|
||||
</q-avatar>Title
|
||||
</q-toolbar-title>
|
||||
</q-toolbar>
|
||||
|
||||
<q-tabs align="left">
|
||||
<q-tabs>
|
||||
<q-route-tab to="/Scratch" label="Scratch" />
|
||||
<q-route-tab to="/Editor" label="Editor" />
|
||||
|
||||
<q-tab v-if="status" @click="logout()" label="Logout" />
|
||||
</q-tabs>
|
||||
</q-header>
|
||||
|
||||
@ -37,12 +76,17 @@ import { ref } from "vue";
|
||||
</template>
|
||||
|
||||
<style>
|
||||
body {
|
||||
margin-top: 0px;
|
||||
height: 100%;
|
||||
background: #1e2361;
|
||||
}
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
color: #4484c4;
|
||||
margin-top: 60px;
|
||||
}
|
||||
</style>
|
||||
|
||||
126
src/components/Login.vue
Normal file
126
src/components/Login.vue
Normal file
@ -0,0 +1,126 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue'
|
||||
import validator from 'validator'
|
||||
import { checkLoggedIn, loggedIn } from '../support/auth'
|
||||
import router from '../router'
|
||||
const name = ref<string>('')
|
||||
const email = ref<string>('')
|
||||
const password = ref<string>('')
|
||||
const passwordConfirm = ref<string>('')
|
||||
const btnDisabled = ref<boolean>(true)
|
||||
const isRegistration = ref<boolean>(false)
|
||||
const error = ref<string>('')
|
||||
|
||||
const checkForm = () => {
|
||||
btnDisabled.value =
|
||||
(isRegistration.value
|
||||
&& (password.value != passwordConfirm.value
|
||||
|| name.value.length == 0))
|
||||
|| password.value.length < 8
|
||||
|| email.value.length == 0
|
||||
|| !validator.isEmail(email.value);
|
||||
}
|
||||
|
||||
const submit = async () => {
|
||||
if (isRegistration.value == true) {
|
||||
error.value = await register()
|
||||
} else {
|
||||
error.value = await login()
|
||||
}
|
||||
}
|
||||
|
||||
const login = async () => {
|
||||
const response = await fetch('/api/login/', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ email: email.value, password: password.value })
|
||||
})
|
||||
|
||||
const user = (await response.json()) as unknown as any
|
||||
if (!user.success) {
|
||||
return user.message
|
||||
}
|
||||
loggedIn()
|
||||
router.push({ path: '/Editor'})
|
||||
}
|
||||
|
||||
const register = async () => {
|
||||
const response = await fetch('/api/register', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ name:name.value, email:email.value, password:password.value })
|
||||
})
|
||||
const user = (await response.json()) as unknown as any
|
||||
if (!user.success) {
|
||||
return user.message
|
||||
}
|
||||
loggedIn()
|
||||
router.push({ path: '/Editor'})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if ( checkLoggedIn() ) {
|
||||
router.push({ path: '/Editor'})
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-card-section v-if="!isRegistration">
|
||||
<q-form class="q-gutter-md">
|
||||
<q-input v-model="email" v-on:keyup="checkForm()" type="email" label="email" />
|
||||
<q-input v-model="password" v-on:keyup="checkForm()" type="password" label="password" />
|
||||
</q-form>
|
||||
</q-card-section>
|
||||
<q-card-section v-else>
|
||||
<q-form class="q-gutter-md">
|
||||
<q-input v-model="name" v-on:keyup="checkForm()" type="text" label="name" />
|
||||
<q-input v-model="email" v-on:keyup="checkForm()" type="email" label="email" />
|
||||
<q-input v-model="password" v-on:keyup="checkForm()" type="password" label="password" />
|
||||
<q-input
|
||||
v-model="passwordConfirm"
|
||||
v-on:keyup="checkForm()"
|
||||
type="password"
|
||||
label="password confirmation"
|
||||
/>
|
||||
</q-form>
|
||||
</q-card-section>
|
||||
<q-card-section v-if="error">
|
||||
<p class="error">
|
||||
<b>{{ error }}</b>
|
||||
</p>
|
||||
</q-card-section>
|
||||
<q-card-actions class="q-px-md">
|
||||
<q-btn
|
||||
unelevated
|
||||
color="primary"
|
||||
size="lg"
|
||||
:disable="btnDisabled"
|
||||
class="full-width"
|
||||
:label="isRegistration ? 'Register' : 'Login'"
|
||||
@click="submit()"
|
||||
/>
|
||||
</q-card-actions>
|
||||
<q-card-section class="text-center q-pa-none">
|
||||
<p class="text-grey-6">
|
||||
{{ isRegistration ? 'Have an account?' : 'Not reigistered?' }}
|
||||
<a
|
||||
href="#"
|
||||
@click="isRegistration = !isRegistration; checkForm()"
|
||||
>{{ isRegistration ? 'Login' : 'Created an Account' }}</a>
|
||||
</p>
|
||||
</q-card-section>
|
||||
</template>
|
||||
<style>
|
||||
.error {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
|
||||
13
src/main.ts
13
src/main.ts
@ -20,8 +20,8 @@ import '@quasar/extras/material-icons/material-icons.css'
|
||||
import '@quasar/extras/fontawesome-v6/fontawesome-v6.css'
|
||||
|
||||
// A few examples for animations from Animate.css:
|
||||
// import @quasar/extras/animate/fadeIn.css
|
||||
// import @quasar/extras/animate/fadeOut.css
|
||||
import '@quasar/extras/animate/fadeInUp.css'
|
||||
import '@quasar/extras/animate/fadeOutUp.css'
|
||||
|
||||
// Import Quasar css
|
||||
import 'quasar/src/css/index.sass'
|
||||
@ -32,7 +32,6 @@ import 'quasar/src/css/index.sass'
|
||||
--------------------------------------------------
|
||||
*/
|
||||
import { DraggablePlugin } from '@braks/revue-draggable'
|
||||
import { createAuth0 } from '@auth0/auth0-vue'
|
||||
|
||||
import 'katex/dist/katex.min.css'
|
||||
import 'katex/dist/contrib/auto-render.min'
|
||||
@ -50,14 +49,6 @@ app.use(Quasar, {
|
||||
plugins: {}, // import Quasar plugins and add here
|
||||
})
|
||||
|
||||
app.use(
|
||||
createAuth0({
|
||||
domain: 'dev-ge84r-eu.us.auth0.com',
|
||||
client_id: 'zHjZGg1uPws0DkQg5bRdKcDX8m6AuTZl', // eslint-disable-line camelcase
|
||||
redirect_uri: window.location.origin, // eslint-disable-line camelcase
|
||||
}),
|
||||
)
|
||||
|
||||
app.use(router)
|
||||
|
||||
app.use(DraggablePlugin)
|
||||
|
||||
@ -1,16 +1,19 @@
|
||||
<script setup lang="ts">
|
||||
import {onMounted, ref} from 'vue'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { v4 as uuidv4 } from 'uuid'
|
||||
import {MathPage} from '../support/page'
|
||||
import {MathStatement} from '../support/parse'
|
||||
import {EvaluationResult, hasOwnProperty} from '../support/types'
|
||||
import { MathPage } from '../support/page'
|
||||
import { MathStatement } from '../support/parse'
|
||||
import { EvaluationResult, hasOwnProperty } from '../support/types'
|
||||
import Statement from '../components/Statement.vue'
|
||||
import VarDeclEditor from './VarDeclEditor.vue'
|
||||
import ExpressionEditor from './ExpressionEditor.vue'
|
||||
import TextBox from '../components/TextBox.vue'
|
||||
import {RichTextBox} from '../support/types'
|
||||
import { stepX, stepY } from '../support/const'
|
||||
|
||||
import FunctionEditor from '../components/FunctionEditor.vue'
|
||||
import { RichTextBox } from '../support/types'
|
||||
import { stepX, stepY } from '../support/const'
|
||||
import { checkLoggedIn, loggedOut } from '../support/auth'
|
||||
import router from '../router'
|
||||
|
||||
const math = new MathPage(uuidv4());
|
||||
const statements = ref<MathStatement[]>([]);
|
||||
@ -32,16 +35,16 @@ const variableListingColumns = [
|
||||
},
|
||||
]
|
||||
|
||||
const stmOnControlledDragStop = (stmt: MathStatement) => (e: {event: MouseEvent, data: {x: number, y: number}}) => {
|
||||
const stmOnControlledDragStop = (stmt: MathStatement) => (e: { event: MouseEvent, data: { x: number, y: number } }) => {
|
||||
console.log(e)
|
||||
console.log("moved stm5", stmt)
|
||||
const { x, y } = e.data;
|
||||
const { x, y } = e.data;
|
||||
stmt.x = x;
|
||||
stmt.y = y;
|
||||
}
|
||||
|
||||
|
||||
const variableListingRows = ref<({name: string, value: string})[]>([])
|
||||
const variableListingRows = ref<({ name: string, value: string })[]>([])
|
||||
|
||||
const functionListingColumns = [
|
||||
{
|
||||
@ -51,7 +54,7 @@ const functionListingColumns = [
|
||||
},
|
||||
]
|
||||
|
||||
const functionListingRows = ref<({name: string, value: string})[]>([])
|
||||
const functionListingRows = ref<({ name: string, value: string })[]>([])
|
||||
|
||||
function toggleLeftDrawer() {
|
||||
leftDrawerOpen.value = !leftDrawerOpen.value
|
||||
@ -72,7 +75,7 @@ const openNewFunctionModal = () => {
|
||||
newFunctionModalOpen.value = true
|
||||
}
|
||||
|
||||
const editingStatement = ref<MathStatement|undefined>()
|
||||
const editingStatement = ref<MathStatement | undefined>()
|
||||
const editExpressionModalOpen = ref(false)
|
||||
const openEditExpressionModal = () => {
|
||||
editExpressionModalOpen.value = true
|
||||
@ -92,10 +95,10 @@ const updateStatements = () => {
|
||||
statements.value = math.getStatements();
|
||||
try {
|
||||
evaluation.value = math.evaluate()
|
||||
const variableValues: ({name: string, value: string})[] = []
|
||||
const variableValues: ({ name: string, value: string })[] = []
|
||||
|
||||
for ( const name in evaluation.value!.variables ) {
|
||||
if ( !hasOwnProperty(evaluation.value!.variables, name) ) {
|
||||
for (const name in evaluation.value!.variables) {
|
||||
if (!hasOwnProperty(evaluation.value!.variables, name)) {
|
||||
continue
|
||||
}
|
||||
|
||||
@ -103,7 +106,7 @@ const updateStatements = () => {
|
||||
try {
|
||||
const stmt = MathStatement.temp(value)
|
||||
value = stmt.toHTMLString()
|
||||
} catch (_) {}
|
||||
} catch (_) { }
|
||||
|
||||
variableValues.push({
|
||||
name,
|
||||
@ -113,8 +116,8 @@ const updateStatements = () => {
|
||||
|
||||
variableListingRows.value = variableValues
|
||||
|
||||
const functionValues: ({name: string, value: string})[] = []
|
||||
for ( const stmt of math.functions() ) {
|
||||
const functionValues: ({ name: string, value: string })[] = []
|
||||
for (const stmt of math.functions()) {
|
||||
const node = stmt.parse() as math.FunctionAssignmentNode
|
||||
functionValues.push({
|
||||
name: node.name,
|
||||
@ -130,7 +133,9 @@ const updateStatements = () => {
|
||||
statementsKey.value = uuidv4()
|
||||
};
|
||||
|
||||
onMounted(updateStatements)
|
||||
onMounted(() => {
|
||||
updateStatements()
|
||||
})
|
||||
|
||||
const saveNewVariable = (stmt: MathStatement) => {
|
||||
math.addStatement(stmt)
|
||||
@ -153,9 +158,9 @@ const saveNewFunction = (stmt: MathStatement) => {
|
||||
const editStatement = (stmt: MathStatement) => {
|
||||
editingStatement.value = stmt
|
||||
console.log('editStatement', stmt)
|
||||
if ( stmt.isFunctionDeclaration() ) {
|
||||
if (stmt.isFunctionDeclaration()) {
|
||||
openEditFunctionModal()
|
||||
} else if ( stmt.isDeclaration() ) {
|
||||
} else if (stmt.isDeclaration()) {
|
||||
openEditVarDeclModal()
|
||||
} else {
|
||||
openEditExpressionModal()
|
||||
@ -197,7 +202,7 @@ const richEditStatement = (id: number) => {
|
||||
richEditExpression.value = richTextStatements.value[richEditID.value].text;
|
||||
};
|
||||
|
||||
const moveRichTextBox = (id: number,x:number,y:number) => {
|
||||
const moveRichTextBox = (id: number, x: number, y: number) => {
|
||||
richEditID.value = id;
|
||||
richTextStatements.value[richEditID.value].x = x;
|
||||
richTextStatements.value[richEditID.value].y = y;
|
||||
@ -212,6 +217,31 @@ const removeRichTextBox = (id: number) => {
|
||||
console.log(richTextStatements.value[id]);
|
||||
richTextStatements.value.splice(id, 1);
|
||||
};
|
||||
|
||||
/*
|
||||
Auth
|
||||
*/
|
||||
const status = ref(checkLoggedIn())
|
||||
const logout = async () => {
|
||||
const response = await fetch('/api/logout/', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
},
|
||||
})
|
||||
loggedOut()
|
||||
status.value = checkLoggedIn()
|
||||
router.push('/')
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
status.value = checkLoggedIn()
|
||||
console.log(status.value)
|
||||
if (status.value == false) {
|
||||
router.push({ path: '/' })
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -223,13 +253,13 @@ const removeRichTextBox = (id: number) => {
|
||||
<q-toolbar-title>
|
||||
<q-avatar>
|
||||
<img src="https://cdn.quasar.dev/logo-v2/svg/logo-mono-white.svg" />
|
||||
</q-avatar>
|
||||
Title
|
||||
</q-avatar>Title
|
||||
</q-toolbar-title>
|
||||
</q-toolbar>
|
||||
<q-tabs align="left">
|
||||
<q-tabs>
|
||||
<q-route-tab to="/Scratch" label="Scratch" />
|
||||
<q-route-tab to="/Editor" label="Editor" />
|
||||
<q-tab v-if="status" @click="logout()" label="Logout" />
|
||||
</q-tabs>
|
||||
</q-header>
|
||||
|
||||
@ -244,14 +274,12 @@ const removeRichTextBox = (id: number) => {
|
||||
row-key="name"
|
||||
hide-no-data
|
||||
hide-bottom
|
||||
:pagination="{rowsPerPage: 10000}"
|
||||
:pagination="{ rowsPerPage: 10000 }"
|
||||
style="height: 100%; border-radius: 0"
|
||||
>
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props">
|
||||
<q-td key="name" :props="props">
|
||||
{{ props.row.name }}
|
||||
</q-td>
|
||||
<q-td key="name" :props="props">{{ props.row.name }}</q-td>
|
||||
<q-td key="value" :props="props">
|
||||
<div v-html="props.row.value"></div>
|
||||
</q-td>
|
||||
@ -260,7 +288,7 @@ const removeRichTextBox = (id: number) => {
|
||||
</q-table>
|
||||
</div>
|
||||
<div class="col">
|
||||
<!-- <q-separator />-->
|
||||
<!-- <q-separator />-->
|
||||
<q-table
|
||||
flat
|
||||
title="Functions"
|
||||
@ -270,7 +298,7 @@ const removeRichTextBox = (id: number) => {
|
||||
hide-no-data
|
||||
hide-bottom
|
||||
hide-header
|
||||
:pagination="{rowsPerPage: 10000}"
|
||||
:pagination="{ rowsPerPage: 10000 }"
|
||||
style="height: 100%; border-top: 1px solid lightgrey; border-radius: 0"
|
||||
>
|
||||
<template v-slot:body="props">
|
||||
@ -295,7 +323,7 @@ const removeRichTextBox = (id: number) => {
|
||||
:grid="[stepX, stepY]"
|
||||
:position="{ x: statement.x, y: statement.y }"
|
||||
:default-position="{ x: statement.x, y: statement.y }"
|
||||
@stop="(e: {event: MouseEvent, data: {x: number, y: number}}) => stmOnControlledDragStop(statement)(e)"
|
||||
@stop="(e: { event: MouseEvent, data: { x: number, y: number } }) => stmOnControlledDragStop(statement)(e)"
|
||||
>
|
||||
<div>
|
||||
<Statement
|
||||
@ -318,30 +346,19 @@ const removeRichTextBox = (id: number) => {
|
||||
</q-dialog>
|
||||
|
||||
<q-dialog v-model="editExpressionModalOpen">
|
||||
<ExpressionEditor
|
||||
:statement="editingStatement"
|
||||
v-on:save="() => finishEditStatement()"
|
||||
/>
|
||||
<ExpressionEditor :statement="editingStatement" v-on:save="() => finishEditStatement()" />
|
||||
</q-dialog>
|
||||
|
||||
<q-dialog v-model="editVarDeclModalOpen">
|
||||
<VarDeclEditor
|
||||
:statement="editingStatement"
|
||||
v-on:save="() => finishEditStatement()"
|
||||
/>
|
||||
<VarDeclEditor :statement="editingStatement" v-on:save="() => finishEditStatement()" />
|
||||
</q-dialog>
|
||||
|
||||
<q-dialog v-model="newFunctionModalOpen">
|
||||
<FunctionEditor
|
||||
v-on:save="(s) => saveNewFunction(s)"
|
||||
/>
|
||||
<FunctionEditor v-on:save="(s) => saveNewFunction(s)" />
|
||||
</q-dialog>
|
||||
|
||||
<q-dialog v-model="editFunctionModalOpen">
|
||||
<FunctionEditor
|
||||
:statement="editingStatement"
|
||||
v-on:save="() => finishEditStatement()"
|
||||
/>
|
||||
<FunctionEditor :statement="editingStatement" v-on:save="() => finishEditStatement()" />
|
||||
</q-dialog>
|
||||
|
||||
<q-page-sticky position="bottom-right" :offset="[32, 32]">
|
||||
@ -354,16 +371,16 @@ const removeRichTextBox = (id: number) => {
|
||||
@click="() => openNewVariableDeclModal()"
|
||||
/>
|
||||
<q-fab-action
|
||||
color="secondary"
|
||||
icon="code"
|
||||
title="Add an expression"
|
||||
@click="() => openNewExpressionModal()"
|
||||
color="secondary"
|
||||
icon="code"
|
||||
title="Add an expression"
|
||||
@click="() => openNewExpressionModal()"
|
||||
/>
|
||||
<q-fab-action
|
||||
color="secondary"
|
||||
icon="functions"
|
||||
title="Add a new function"
|
||||
@click="() => openNewFunctionModal()"
|
||||
color="secondary"
|
||||
icon="functions"
|
||||
title="Add a new function"
|
||||
@click="() => openNewFunctionModal()"
|
||||
/>
|
||||
<q-fab-action
|
||||
color="secondary"
|
||||
@ -379,12 +396,7 @@ const removeRichTextBox = (id: number) => {
|
||||
<q-editor v-model="richEditExpression" min-height="5rem" />
|
||||
<q-card-actions align="right" class="text-primary">
|
||||
<q-btn flat label="Cancel" v-close-popup></q-btn>
|
||||
<q-btn
|
||||
flat
|
||||
label="Save"
|
||||
@click="richUpdateValue"
|
||||
v-close-popup
|
||||
></q-btn>
|
||||
<q-btn flat label="Save" @click="richUpdateValue" v-close-popup></q-btn>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
|
||||
46
src/pages/Home.vue
Normal file
46
src/pages/Home.vue
Normal file
@ -0,0 +1,46 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import Login from '../components/Login.vue'
|
||||
|
||||
defineProps<{ msg: string }>()
|
||||
|
||||
const show = ref<boolean>(true)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-layout>
|
||||
<h1>{{ msg }}</h1>
|
||||
<transition
|
||||
appear
|
||||
enter-active-class="animated fadeInUp"
|
||||
leave-active-class="animated fadeOutUp"
|
||||
mode="out-in"
|
||||
>
|
||||
<q-btn color="primary" text-color="white" @click="show = !show" v-if="show">Start</q-btn>
|
||||
<div class="login" v-else>
|
||||
<q-card square bordered class="q-pa-lg shadow-1">
|
||||
<Login />
|
||||
</q-card>
|
||||
</div>
|
||||
</transition>
|
||||
</q-layout>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
button {
|
||||
background-color: #4484c4;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 15px 32px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 32px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.login {
|
||||
max-width: 30em;
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
@ -1,33 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useAuth0 } from '@auth0/auth0-vue';
|
||||
|
||||
defineProps<{ msg: string }>()
|
||||
|
||||
const { loginWithRedirect } = useAuth0();
|
||||
|
||||
const login = () => {
|
||||
loginWithRedirect();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>{{ msg }}</h1>
|
||||
|
||||
<button @click="login">Log in</button>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
button {
|
||||
background-color: #215b8a; /* Green */
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 15px 32px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 32px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
</style>
|
||||
@ -1,40 +1,43 @@
|
||||
<script setup lang="ts">
|
||||
import {MathPage} from '../support/page'
|
||||
import {v4 as uuidv4} from 'uuid'
|
||||
import Statement from '../components/Statement.vue'
|
||||
import {MathStatement} from '../support/parse'
|
||||
import {onMounted, ref} from 'vue'
|
||||
import Katex from '../components/Katex.vue'
|
||||
import { MathPage } from '../support/page'
|
||||
import { v4 as uuidv4 } from 'uuid'
|
||||
import Statement from '../components/Statement.vue'
|
||||
import { MathStatement } from '../support/parse'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import Katex from '../components/Katex.vue'
|
||||
import { checkLoggedIn, loggedOut } from '../support/auth'
|
||||
import router from '../router'
|
||||
|
||||
const page = new MathPage(uuidv4())
|
||||
const stmt1Id = page.addRaw('x = y+3/4')
|
||||
const stmt2Id = page.addRaw('y = 9')
|
||||
const evaluation = page.evaluate()
|
||||
const page = new MathPage(uuidv4())
|
||||
const stmt1Id = page.addRaw('x = y+3/4')
|
||||
const stmt2Id = page.addRaw('y = 9')
|
||||
const evaluation = page.evaluate()
|
||||
|
||||
const stmt = page.getStatement(stmt1Id)
|
||||
console.log({page, stmt1Id})
|
||||
const stmt = page.getStatement(stmt1Id)
|
||||
console.log({ page, stmt1Id })
|
||||
|
||||
let editModal = ref(false)
|
||||
let editExpression = ref('')
|
||||
let editPreview = ref(MathStatement.temp(''))
|
||||
let activeStatement!: MathStatement
|
||||
let editModal = ref(false)
|
||||
let editExpression = ref('')
|
||||
let editPreview = ref(MathStatement.temp(''))
|
||||
let activeStatement!: MathStatement
|
||||
|
||||
const editStatement = (stmt: MathStatement) => {
|
||||
console.log('editing statement', stmt, editModal)
|
||||
activeStatement = stmt
|
||||
editPreview.value = MathStatement.temp(stmt.raw)
|
||||
editModal.value = true
|
||||
editExpression.value = stmt.raw
|
||||
const editStatement = (stmt: MathStatement) => {
|
||||
console.log('editing statement', stmt, editModal)
|
||||
activeStatement = stmt
|
||||
editPreview.value = MathStatement.temp(stmt.raw)
|
||||
editModal.value = true
|
||||
editExpression.value = stmt.raw
|
||||
}
|
||||
|
||||
let key = ref(uuidv4())
|
||||
const updateEditRender = () => {
|
||||
const previewStmt = MathStatement.temp(editExpression.value)
|
||||
if (previewStmt.isValid()) {
|
||||
editPreview.value = MathStatement.temp(editExpression.value)
|
||||
key.value = uuidv4()
|
||||
}
|
||||
}
|
||||
|
||||
let key = ref(uuidv4())
|
||||
const updateEditRender = () => {
|
||||
const previewStmt = MathStatement.temp(editExpression.value)
|
||||
if ( previewStmt.isValid() ) {
|
||||
editPreview.value = MathStatement.temp(editExpression.value)
|
||||
key.value = uuidv4()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -43,7 +46,7 @@
|
||||
<q-card>
|
||||
<q-card-section>
|
||||
<div style="display: flex; justify-content: center">
|
||||
<Katex :statement="editPreview" :key="key"/>
|
||||
<Katex :statement="editPreview" :key="key" />
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import Home from './pages/Login.vue'
|
||||
import Home from './pages/Home.vue'
|
||||
|
||||
const routes = [
|
||||
{
|
||||
|
||||
10
src/support/auth.ts
Normal file
10
src/support/auth.ts
Normal file
@ -0,0 +1,10 @@
|
||||
let isLoggedIn = false
|
||||
export const checkLoggedIn = () => {
|
||||
return isLoggedIn
|
||||
}
|
||||
export const loggedIn = () => {
|
||||
isLoggedIn = true
|
||||
}
|
||||
export const loggedOut = () => {
|
||||
isLoggedIn = false
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user