Compare commits
8 Commits
Author | SHA1 | Date |
---|---|---|
Garrett Mills | 4f433e7bf9 | 2 years ago |
Garrett Mills | 2fd0107197 | 2 years ago |
Thomas | 35d7cd817f | 2 years ago |
Thomas | af3d940cec | 2 years ago |
Thomas | 2c059a655e | 2 years ago |
Thomas | 59ce598023 | 2 years ago |
Thomas | 43e067d5f0 | 2 years ago |
Thomas | fc31598dbb | 2 years ago |
@ -1,53 +0,0 @@
|
|||||||
---
|
|
||||||
kind: pipeline
|
|
||||||
type: kubernetes
|
|
||||||
name: default
|
|
||||||
|
|
||||||
metadata:
|
|
||||||
labels:
|
|
||||||
pod-security.kubernetes.io/audit: privileged
|
|
||||||
|
|
||||||
services:
|
|
||||||
- name: docker daemon
|
|
||||||
image: docker:dind
|
|
||||||
privileged: true
|
|
||||||
environment:
|
|
||||||
DOCKER_TLS_CERTDIR: ""
|
|
||||||
when:
|
|
||||||
event:
|
|
||||||
- tag
|
|
||||||
- promote
|
|
||||||
|
|
||||||
steps:
|
|
||||||
- name: node.js build
|
|
||||||
image: node:18
|
|
||||||
commands:
|
|
||||||
- "npm add --global pnpm"
|
|
||||||
- pnpm i
|
|
||||||
- pnpm run build
|
|
||||||
|
|
||||||
- name: container build
|
|
||||||
image: docker:latest
|
|
||||||
privileged: true
|
|
||||||
commands:
|
|
||||||
- "while ! docker stats --no-stream; do sleep 1; done"
|
|
||||||
- "docker build -t $DOCKER_REGISTRY/glmdev/mathy ."
|
|
||||||
- "docker push $DOCKER_REGISTRY/glmdev/mathy"
|
|
||||||
environment:
|
|
||||||
DOCKER_HOST: tcp://localhost:2375
|
|
||||||
DOCKER_REGISTRY:
|
|
||||||
from_secret: DOCKER_REGISTRY
|
|
||||||
when:
|
|
||||||
event:
|
|
||||||
- tag
|
|
||||||
- promote
|
|
||||||
|
|
||||||
- name: k8s rollout
|
|
||||||
image: bitnami/kubectl
|
|
||||||
commands:
|
|
||||||
- cd deploy && kubectl apply -f .
|
|
||||||
- kubectl rollout -n mathy restart deployment/mathy
|
|
||||||
when:
|
|
||||||
event:
|
|
||||||
- tag
|
|
||||||
- promote
|
|
@ -0,0 +1,56 @@
|
|||||||
|
apiVersion: apps/v1
|
||||||
|
kind: Deployment
|
||||||
|
metadata:
|
||||||
|
name: mathy
|
||||||
|
spec:
|
||||||
|
selector:
|
||||||
|
matchLabels:
|
||||||
|
name: mathy
|
||||||
|
template:
|
||||||
|
metadata:
|
||||||
|
labels:
|
||||||
|
name: mathy
|
||||||
|
spec:
|
||||||
|
containers:
|
||||||
|
- name: mathy
|
||||||
|
image: glmdev/mathy:latest
|
||||||
|
imagePullPolicy: Always
|
||||||
|
ports:
|
||||||
|
- containerPort: 80
|
||||||
|
---
|
||||||
|
apiVersion: v1
|
||||||
|
kind: Service
|
||||||
|
metadata:
|
||||||
|
name: mathy-service
|
||||||
|
spec:
|
||||||
|
ports:
|
||||||
|
- name: http
|
||||||
|
port: 80
|
||||||
|
protocol: TCP
|
||||||
|
targetPort: 80
|
||||||
|
selector:
|
||||||
|
name: mathy
|
||||||
|
---
|
||||||
|
apiVersion: networking.k8s.io/v1
|
||||||
|
kind: Ingress
|
||||||
|
metadata:
|
||||||
|
name: mathy-ingress
|
||||||
|
annotations:
|
||||||
|
kubernetes.io/ingress.class: "nginx"
|
||||||
|
nginx.ingress.kubernetes.io/ssl-redirect: "true"
|
||||||
|
spec:
|
||||||
|
tls:
|
||||||
|
- hosts:
|
||||||
|
- mathy.glmdev.tech
|
||||||
|
secretName: mathy-tls
|
||||||
|
rules:
|
||||||
|
- host: "mathy.glmdev.tech"
|
||||||
|
http:
|
||||||
|
paths:
|
||||||
|
- pathType: Prefix
|
||||||
|
path: "/"
|
||||||
|
backend:
|
||||||
|
service:
|
||||||
|
name: mathy-service
|
||||||
|
port:
|
||||||
|
number: 80
|
@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
apiVersion: v1
|
|
||||||
kind: Namespace
|
|
||||||
metadata:
|
|
||||||
name: mathy
|
|
@ -1,12 +0,0 @@
|
|||||||
apiVersion: cert-manager.io/v1
|
|
||||||
kind: Certificate
|
|
||||||
metadata:
|
|
||||||
name: mathy-tls
|
|
||||||
namespace: mathy
|
|
||||||
spec:
|
|
||||||
secretName: mathy-tls
|
|
||||||
dnsNames:
|
|
||||||
- 'crystalmath.tech'
|
|
||||||
issuerRef:
|
|
||||||
name: letsencrypt-ca
|
|
||||||
kind: ClusterIssuer
|
|
@ -1,127 +0,0 @@
|
|||||||
---
|
|
||||||
apiVersion: apps/v1
|
|
||||||
kind: Deployment
|
|
||||||
metadata:
|
|
||||||
name: mathy
|
|
||||||
namespace: mathy
|
|
||||||
spec:
|
|
||||||
selector:
|
|
||||||
matchLabels:
|
|
||||||
name: mathy
|
|
||||||
template:
|
|
||||||
metadata:
|
|
||||||
labels:
|
|
||||||
name: mathy
|
|
||||||
spec:
|
|
||||||
containers:
|
|
||||||
- name: mathy
|
|
||||||
image: glmdev/mathy:latest
|
|
||||||
imagePullPolicy: Always
|
|
||||||
ports:
|
|
||||||
- containerPort: 80
|
|
||||||
---
|
|
||||||
apiVersion: apps/v1
|
|
||||||
kind: Deployment
|
|
||||||
metadata:
|
|
||||||
name: mathy-api
|
|
||||||
namespace: mathy
|
|
||||||
spec:
|
|
||||||
selector:
|
|
||||||
matchLabels:
|
|
||||||
name: mathy-api
|
|
||||||
template:
|
|
||||||
metadata:
|
|
||||||
labels:
|
|
||||||
name: mathy-api
|
|
||||||
spec:
|
|
||||||
containers:
|
|
||||||
- name: mathy
|
|
||||||
image: glmdev/mathy-api:latest
|
|
||||||
imagePullPolicy: Always
|
|
||||||
env:
|
|
||||||
- name: REDIS_HOST
|
|
||||||
value: localhost
|
|
||||||
- name: DATABASE_HOST
|
|
||||||
valueFrom:
|
|
||||||
secretKeyRef:
|
|
||||||
name: psql-conn
|
|
||||||
key: host
|
|
||||||
optional: false
|
|
||||||
- name: DATABASE_USERNAME
|
|
||||||
value: mathy
|
|
||||||
- name: DATABASE_PASSWORD
|
|
||||||
valueFrom:
|
|
||||||
secretKeyRef:
|
|
||||||
name: psql-conn
|
|
||||||
key: password
|
|
||||||
optional: false
|
|
||||||
- name: DATABASE_NAME
|
|
||||||
value: mathy
|
|
||||||
ports:
|
|
||||||
- containerPort: 8000
|
|
||||||
|
|
||||||
- name: redis
|
|
||||||
image: redis:latest
|
|
||||||
imagePullPolicy: Always
|
|
||||||
ports:
|
|
||||||
- containerPort: 6379
|
|
||||||
---
|
|
||||||
apiVersion: v1
|
|
||||||
kind: Service
|
|
||||||
metadata:
|
|
||||||
name: mathy-api-service
|
|
||||||
namespace: mathy
|
|
||||||
spec:
|
|
||||||
ports:
|
|
||||||
- name: http
|
|
||||||
port: 80
|
|
||||||
protocol: TCP
|
|
||||||
targetPort: 8000
|
|
||||||
selector:
|
|
||||||
name: mathy-api
|
|
||||||
---
|
|
||||||
apiVersion: v1
|
|
||||||
kind: Service
|
|
||||||
metadata:
|
|
||||||
name: mathy-service
|
|
||||||
namespace: mathy
|
|
||||||
spec:
|
|
||||||
ports:
|
|
||||||
- name: http
|
|
||||||
port: 80
|
|
||||||
protocol: TCP
|
|
||||||
targetPort: 80
|
|
||||||
selector:
|
|
||||||
name: mathy
|
|
||||||
---
|
|
||||||
apiVersion: networking.k8s.io/v1
|
|
||||||
kind: Ingress
|
|
||||||
metadata:
|
|
||||||
name: mathy-ingress
|
|
||||||
namespace: mathy
|
|
||||||
annotations:
|
|
||||||
kubernetes.io/ingress.class: "nginx"
|
|
||||||
nginx.ingress.kubernetes.io/ssl-redirect: "true"
|
|
||||||
spec:
|
|
||||||
tls:
|
|
||||||
- hosts:
|
|
||||||
- crystalmath.tech
|
|
||||||
secretName: mathy-tls
|
|
||||||
rules:
|
|
||||||
- host: "crystalmath.tech"
|
|
||||||
http:
|
|
||||||
paths:
|
|
||||||
- pathType: Prefix
|
|
||||||
path: "/api"
|
|
||||||
backend:
|
|
||||||
service:
|
|
||||||
name: mathy-api-service
|
|
||||||
port:
|
|
||||||
number: 80
|
|
||||||
- pathType: Prefix
|
|
||||||
path: "/"
|
|
||||||
backend:
|
|
||||||
service:
|
|
||||||
name: mathy-service
|
|
||||||
port:
|
|
||||||
number: 80
|
|
@ -0,0 +1,10 @@
|
|||||||
|
import 'vuetify/styles'
|
||||||
|
import { createVuetify } from 'vuetify'
|
||||||
|
|
||||||
|
export default createVuetify({
|
||||||
|
theme: {
|
||||||
|
defaultTheme: 'dark'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
)
|
@ -1,94 +1,41 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
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 { MathStatement } from "./support/parse";
|
import { MathStatement } from "./support/parse";
|
||||||
import { MathPage } from "./support/page";
|
import { MathPage } from "./support/page";
|
||||||
import { onMounted, ref } from "vue";
|
|
||||||
import { checkLoggedIn, loggedOut, loggedIn } from "./support/auth";
|
|
||||||
import router from "./router";
|
|
||||||
import { Dark } from "quasar";
|
|
||||||
|
|
||||||
(window as any).Stmt = MathStatement;
|
(window as any).Stmt = MathStatement;
|
||||||
(window as any).Pg = MathPage;
|
(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: "/" });
|
|
||||||
};
|
|
||||||
Dark.set(true)
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<q-layout view="hHr LpR fFf">
|
<v-app>
|
||||||
<q-header elevated class="bg-primary text-white">
|
<v-app-bar height="30" elevation="0">
|
||||||
<q-toolbar>
|
<div id="nav">
|
||||||
<q-toolbar-title>
|
<router-link class="links" to="/">Home</router-link> |
|
||||||
<q-avatar size="50px">
|
<router-link class="links" to="/scratch">Scratch Testing</router-link> |
|
||||||
<img src="./assets/l2.svg" />
|
<router-link class="links" to="/editor">Editor</router-link>
|
||||||
</q-avatar>
|
</div>
|
||||||
<span style="font-family: 'Cinzel Decorative', cursive;">Crystal Math Worktable</span>
|
</v-app-bar>
|
||||||
</q-toolbar-title>
|
|
||||||
<q-btn v-if="status" @click="logout()" label="Logout"></q-btn>
|
<div style="margin-top: 30px"> <!-- Account for the navbar height -->
|
||||||
</q-toolbar>
|
<router-view/>
|
||||||
|
</div>
|
||||||
<!-- <q-tabs>
|
</v-app>
|
||||||
<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>
|
|
||||||
|
|
||||||
<q-page-container style="display: flex;padding-top: 0px;">
|
|
||||||
<router-view />
|
|
||||||
</q-page-container>
|
|
||||||
</q-layout>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@import url("https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700&display=swap");
|
|
||||||
|
|
||||||
#app {
|
#app {
|
||||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: 60px;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
color: #fff;
|
||||||
}
|
}
|
||||||
.titleBar {
|
.links:visited {
|
||||||
font-family: "Cinzel Decorative";
|
color: #fff;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
Before Width: | Height: | Size: 679 B |
Before Width: | Height: | Size: 4.1 KiB |
Before Width: | Height: | Size: 2.7 MiB |
@ -0,0 +1,15 @@
|
|||||||
|
<script setup>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<v-navigation-drawer width="100" permanent>
|
||||||
|
|
||||||
|
</v-navigation-drawer>
|
||||||
|
|
||||||
|
<Draggable>
|
||||||
|
<div class="box">I use a wrapper</div>
|
||||||
|
</Draggable>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
@ -1,94 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import {defineEmits, onMounted, ref} from 'vue'
|
|
||||||
import {MathStatement} from '../support/parse'
|
|
||||||
import Katex from './Katex.vue'
|
|
||||||
import { v4 as uuidv4 } from 'uuid'
|
|
||||||
import {StatementID} from '../support/types'
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
statement?: MathStatement,
|
|
||||||
}>()
|
|
||||||
|
|
||||||
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 || stmt.isFunctionDeclaration() ) {
|
|
||||||
return 'Expressions cannot declare variables or functions'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const saveExpression = () => {
|
|
||||||
expressionError.value = validateExpression()
|
|
||||||
if ( expressionError.value ) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if ( props.statement ) {
|
|
||||||
props.statement.raw = expressionValue.value
|
|
||||||
emit('save', props.statement)
|
|
||||||
} else {
|
|
||||||
emit('save', new MathStatement(
|
|
||||||
uuidv4() as StatementID,
|
|
||||||
expressionValue.value
|
|
||||||
))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
if ( props.statement ) {
|
|
||||||
expressionValue.value = props.statement.raw
|
|
||||||
updateExpressionPreview()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<q-card>
|
|
||||||
<q-card-section v-if="expressionValue">
|
|
||||||
<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>
|
|
@ -1,97 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import {MathStatement} from '../support/parse'
|
|
||||||
import {onMounted, ref} from 'vue'
|
|
||||||
import {v4 as uuidv4} from 'uuid'
|
|
||||||
import {StatementID} from '../support/types'
|
|
||||||
import Katex from './Katex.vue'
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
statement?: MathStatement,
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
|
||||||
(eventName: 'save', statement: MathStatement): void,
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const functionPreview = ref(MathStatement.temp(''))
|
|
||||||
let functionPreviewKey = ref(uuidv4())
|
|
||||||
const functionError = ref<string|undefined>(undefined)
|
|
||||||
const functionValue = ref('')
|
|
||||||
|
|
||||||
const updateFunctionPreview = () => {
|
|
||||||
const previewStmt = MathStatement.temp(functionValue.value)
|
|
||||||
if ( previewStmt.isValid() ) {
|
|
||||||
functionPreview.value = MathStatement.temp(functionValue.value)
|
|
||||||
functionPreviewKey.value = uuidv4()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const validateFunction = () => {
|
|
||||||
if ( !functionValue.value ) {
|
|
||||||
return 'Missing function declaration'
|
|
||||||
}
|
|
||||||
|
|
||||||
const stmt = MathStatement.temp(functionValue.value)
|
|
||||||
if ( !stmt.isValid() || !stmt.isFunctionDeclaration() ) {
|
|
||||||
return 'Function definition is invalid'
|
|
||||||
}
|
|
||||||
|
|
||||||
if ( !stmt.isNotRecursive() ) {
|
|
||||||
return 'A function may not reference itself'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const saveFunction = () => {
|
|
||||||
functionError.value = validateFunction()
|
|
||||||
if ( functionError.value ) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if ( props.statement ) {
|
|
||||||
props.statement.raw = functionValue.value
|
|
||||||
emit('save', props.statement)
|
|
||||||
} else {
|
|
||||||
emit('save', new MathStatement(
|
|
||||||
uuidv4() as StatementID,
|
|
||||||
functionValue.value
|
|
||||||
))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
if ( props.statement ) {
|
|
||||||
functionValue.value = props.statement.raw
|
|
||||||
updateFunctionPreview()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<q-card>
|
|
||||||
<q-card-section>
|
|
||||||
<div v-if="functionValue" style="display: flex; justify-content: center">
|
|
||||||
<Katex
|
|
||||||
:key="functionPreviewKey"
|
|
||||||
:statement="functionPreview"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</q-card-section>
|
|
||||||
<q-card-section v-if="functionError">
|
|
||||||
<div style="color: darkred; font-weight: bold">{{ functionError }}</div>
|
|
||||||
</q-card-section>
|
|
||||||
<q-card-section>
|
|
||||||
<q-input
|
|
||||||
v-model="functionValue"
|
|
||||||
v-on:update:model-value="() => updateFunctionPreview()"
|
|
||||||
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="() => saveFunction()"></q-btn>
|
|
||||||
</q-card-actions>
|
|
||||||
</q-card>
|
|
||||||
</template>
|
|
@ -0,0 +1,33 @@
|
|||||||
|
<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,73 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { ref } from "vue";
|
|
||||||
import { ImageContainer } from "../support/types";
|
|
||||||
import { stepX, stepY } from "../support/const";
|
|
||||||
const props = defineProps<{ value: ImageContainer }>();
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
|
||||||
(eventName: 'move', x: number, y: number): void,
|
|
||||||
(eventName: 'edit',): void,
|
|
||||||
(eventName: 'remove',): void,
|
|
||||||
|
|
||||||
}>()
|
|
||||||
|
|
||||||
|
|
||||||
function onControlledDrag(e: { event: MouseEvent, data: { x: number, y: number } }) {
|
|
||||||
|
|
||||||
// const x = e.x;
|
|
||||||
// const y = e.y;
|
|
||||||
const { x, y } = e.data;
|
|
||||||
props.value.x = x;
|
|
||||||
props.value.y = y;
|
|
||||||
console.log(e)
|
|
||||||
}
|
|
||||||
function onControlledDragStop(e: { event: MouseEvent, data: { x: number, y: number } }) {
|
|
||||||
// console.log(typeof(e))
|
|
||||||
const { x, y } = e.data;
|
|
||||||
// const x = e.x;
|
|
||||||
// const y = e.y;
|
|
||||||
console.log(self)
|
|
||||||
emit('move', x, y);
|
|
||||||
onControlledDrag(e);
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<Draggable
|
|
||||||
:grid="[stepX, stepY]"
|
|
||||||
:default-position="{ x: props.value.x, y: props.value.y }"
|
|
||||||
:position="{ x: props.value.x, y: props.value.y }"
|
|
||||||
@stop="onControlledDragStop"
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<q-card flat bordered>
|
|
||||||
<q-card-section style="padding: 0">
|
|
||||||
<div class="row items-center no-wrap">
|
|
||||||
<q-card-section>
|
|
||||||
<q-img :src="props.value.url" style="min-width: 200px"></q-img>
|
|
||||||
</q-card-section>
|
|
||||||
<div class="col-auto">
|
|
||||||
<q-btn color="grey-7" round flat icon="more_vert">
|
|
||||||
<q-menu cover auto-close>
|
|
||||||
<q-list>
|
|
||||||
<q-item clickable>
|
|
||||||
<q-item-section @click="() => $emit('edit')">Edit</q-item-section>
|
|
||||||
</q-item>
|
|
||||||
<q-item clickable>
|
|
||||||
<q-item-section @click="() => $emit('remove')">Remove</q-item-section>
|
|
||||||
</q-item>
|
|
||||||
</q-list>
|
|
||||||
</q-menu>
|
|
||||||
</q-btn>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-card-section>
|
|
||||||
</q-card>
|
|
||||||
</div>
|
|
||||||
</Draggable>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="sass" scoped>
|
|
||||||
|
|
||||||
</style>
|
|
@ -1,126 +0,0 @@
|
|||||||
<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: '/Listings'})
|
|
||||||
}
|
|
||||||
|
|
||||||
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: '/Listings'})
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
if ( checkLoggedIn() ) {
|
|
||||||
router.push({ path: '/Listings'})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
</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 registered?' }}
|
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
@click="isRegistration = !isRegistration; checkForm()"
|
|
||||||
>{{ isRegistration ? 'Login' : 'Create an Account' }}</a>
|
|
||||||
</p>
|
|
||||||
</q-card-section>
|
|
||||||
</template>
|
|
||||||
<style>
|
|
||||||
.error {
|
|
||||||
color: red;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,160 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import * as math from 'mathjs'
|
|
||||||
import { v4 as uuidv4 } from 'uuid'
|
|
||||||
import { LineChart } from 'vue-chart-3'
|
|
||||||
import { computed, ref } from 'vue'
|
|
||||||
import { Chart, ChartData, registerables } from 'chart.js'
|
|
||||||
import { MathStatement } from '../support/parse'
|
|
||||||
import { ChartBox } from '../support/types'
|
|
||||||
import { stepX, stepY } from '../support/const'
|
|
||||||
import {MathPage} from '../support/page'
|
|
||||||
|
|
||||||
Chart.register(...registerables)
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
|
||||||
(eventName: 'move', x: number, y: number): void,
|
|
||||||
(eventName: 'edit'): void,
|
|
||||||
(eventName: 'remove'): void,
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
page: MathPage,
|
|
||||||
fn: MathStatement,
|
|
||||||
value: ChartBox,
|
|
||||||
}>()
|
|
||||||
const options = ref({
|
|
||||||
plugins: {
|
|
||||||
legend: {
|
|
||||||
labels: {
|
|
||||||
color: "white",
|
|
||||||
font: {
|
|
||||||
size: 18
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
scales: {
|
|
||||||
y: {
|
|
||||||
ticks: {
|
|
||||||
color: "white",
|
|
||||||
font: {
|
|
||||||
size: 15,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
color: '#ccc'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
x: {
|
|
||||||
ticks: {
|
|
||||||
color: "white",
|
|
||||||
font: {
|
|
||||||
size: 14
|
|
||||||
},
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
color: '#ccc'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const getChartData = (): ChartData<'line'> => {
|
|
||||||
const range = []
|
|
||||||
const min = Math.min(props.value.minX, props.value.maxX)
|
|
||||||
const max = Math.max(props.value.minX, props.value.maxX)
|
|
||||||
for (let i = min; i <= max; i += parseFloat(String(props.value.stepX)) || 1) {
|
|
||||||
range.push(i)
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!props.fn.isFunctionDeclaration()) {
|
|
||||||
throw new TypeError('Cannot chart node that is not a function.')
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const evaluationResult = props.page.evaluate()
|
|
||||||
const node = props.fn.parse() as math.FunctionAssignmentNode
|
|
||||||
const fn = node.compile().evaluate(evaluationResult.scope)
|
|
||||||
|
|
||||||
return {
|
|
||||||
labels: range.map(x => `${x}`),
|
|
||||||
datasets: [{
|
|
||||||
label: node.name,
|
|
||||||
backgroundColor: '#553564',
|
|
||||||
borderColor: '#ccc',
|
|
||||||
data: range.map(x => fn(x)),
|
|
||||||
pointRadius: 5
|
|
||||||
}],
|
|
||||||
}
|
|
||||||
} catch (_) {
|
|
||||||
return {
|
|
||||||
labels: [],
|
|
||||||
datasets: [{
|
|
||||||
label: '',
|
|
||||||
backgroundColor: '#553564',
|
|
||||||
borderColor: '#ccc',
|
|
||||||
data: [],
|
|
||||||
pointRadius: 5
|
|
||||||
}],
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const chartData = ref(getChartData())
|
|
||||||
const chartKey = ref(uuidv4())
|
|
||||||
computed(() => {
|
|
||||||
chartData.value = getChartData()
|
|
||||||
chartKey.value = uuidv4()
|
|
||||||
})
|
|
||||||
|
|
||||||
function onControlledDrag(e: { event: MouseEvent, data: { x: number, y: number } }) {
|
|
||||||
|
|
||||||
// const x = e.x;
|
|
||||||
// const y = e.y;
|
|
||||||
const { x, y } = e.data;
|
|
||||||
props.value.x = x;
|
|
||||||
props.value.y = y;
|
|
||||||
console.log(e)
|
|
||||||
}
|
|
||||||
function onControlledDragStop(e: { event: MouseEvent, data: { x: number, y: number } }) {
|
|
||||||
// console.log(typeof(e))
|
|
||||||
const { x, y } = e.data;
|
|
||||||
// const x = e.x;
|
|
||||||
// const y = e.y;
|
|
||||||
console.log(self)
|
|
||||||
emit('move', x, y);
|
|
||||||
onControlledDrag(e);
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<Draggable
|
|
||||||
:grid="[stepX, stepY]"
|
|
||||||
:default-position="{ x: props.value.x, y: props.value.y }"
|
|
||||||
:position="{ x: props.value.x, y: props.value.y }"
|
|
||||||
@stop="onControlledDragStop"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style="background: var(--q-dark); display: flex; flex-direction: row; border: 1px solid #ccc; border-radius: 3px;"
|
|
||||||
>
|
|
||||||
<LineChart :options="options" :chartData="chartData" :key="chartKey" class="inner-chart" />
|
|
||||||
<div class="sidebar">
|
|
||||||
<q-btn color="grey-7" round flat icon="more_vert">
|
|
||||||
<q-menu cover auto-close>
|
|
||||||
<q-list>
|
|
||||||
<q-item clickable>
|
|
||||||
<q-item-section @click="() => $emit('edit')">Edit</q-item-section>
|
|
||||||
</q-item>
|
|
||||||
<q-item clickable>
|
|
||||||
<q-item-section @click="() => $emit('remove')">Remove</q-item-section>
|
|
||||||
</q-item>
|
|
||||||
</q-list>
|
|
||||||
</q-menu>
|
|
||||||
</q-btn>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Draggable>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,118 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import * as math from 'mathjs'
|
|
||||||
import {onMounted, ref} from 'vue'
|
|
||||||
import {MathStatement} from '../support/parse'
|
|
||||||
import {v4 as uuidv4} from 'uuid'
|
|
||||||
import Katex from './Katex.vue'
|
|
||||||
import {ChartBox, StatementID} from '../support/types'
|
|
||||||
import {MathPage} from '../support/page'
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
page: MathPage,
|
|
||||||
chartBox?: ChartBox,
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
|
||||||
(eventName: 'save', statement: ChartBox): void,
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const chartBoxModalError = ref<string|undefined>(undefined)
|
|
||||||
const chartBoxFunctionName = ref('')
|
|
||||||
const chartBoxMinXValue = ref(0)
|
|
||||||
const chartBoxMaxXValue = ref(30)
|
|
||||||
const chartBoxStepXValue = ref(1)
|
|
||||||
|
|
||||||
const validateChartBox = () => {
|
|
||||||
if ( !chartBoxFunctionName.value ) {
|
|
||||||
return 'Missing function name'
|
|
||||||
}
|
|
||||||
|
|
||||||
if ( isNaN(parseFloat(String(chartBoxMinXValue.value))) ) {
|
|
||||||
return 'Invalid minimum X-value'
|
|
||||||
}
|
|
||||||
|
|
||||||
if ( isNaN(parseFloat(String(chartBoxMaxXValue.value))) ) {
|
|
||||||
return 'Invalid maximum X-value'
|
|
||||||
}
|
|
||||||
|
|
||||||
if ( isNaN(parseFloat(String(chartBoxStepXValue.value))) ) {
|
|
||||||
return 'Invalid X-value step size'
|
|
||||||
}
|
|
||||||
|
|
||||||
if ( !props.page.getFunctionByName(chartBoxFunctionName.value) ) {
|
|
||||||
return 'Invalid function name'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const saveChartBox = () => {
|
|
||||||
chartBoxModalError.value = validateChartBox()
|
|
||||||
if ( chartBoxModalError.value ) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if ( props.chartBox ) {
|
|
||||||
props.chartBox.fnName = chartBoxFunctionName.value
|
|
||||||
props.chartBox.minX = chartBoxMinXValue.value
|
|
||||||
props.chartBox.maxX = chartBoxMaxXValue.value
|
|
||||||
props.chartBox.stepX = chartBoxStepXValue.value
|
|
||||||
emit('save', props.chartBox)
|
|
||||||
} else {
|
|
||||||
emit('save', new ChartBox(
|
|
||||||
chartBoxFunctionName.value,
|
|
||||||
chartBoxMinXValue.value,
|
|
||||||
chartBoxMaxXValue.value,
|
|
||||||
chartBoxStepXValue.value,
|
|
||||||
))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
if ( props.chartBox ) {
|
|
||||||
chartBoxFunctionName.value = props.chartBox.fnName
|
|
||||||
chartBoxMinXValue.value = props.chartBox.minX
|
|
||||||
chartBoxMaxXValue.value = props.chartBox.maxX
|
|
||||||
chartBoxStepXValue.value = props.chartBox.stepX
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<q-card>
|
|
||||||
<q-card-section v-if="chartBoxModalError">
|
|
||||||
<div style="color: darkred; font-weight: bold">{{ chartBoxModalError }}</div>
|
|
||||||
</q-card-section>
|
|
||||||
<q-card-section>
|
|
||||||
<q-input
|
|
||||||
v-model="chartBoxFunctionName"
|
|
||||||
outlined
|
|
||||||
autofocus
|
|
||||||
label="Function name"
|
|
||||||
/>
|
|
||||||
<br>
|
|
||||||
<q-input
|
|
||||||
v-model="chartBoxMinXValue"
|
|
||||||
outlined
|
|
||||||
autofocus
|
|
||||||
label="Minimum X-value"
|
|
||||||
/>
|
|
||||||
<br>
|
|
||||||
<q-input
|
|
||||||
v-model="chartBoxMaxXValue"
|
|
||||||
outlined
|
|
||||||
autofocus
|
|
||||||
label="Maximum X-value"
|
|
||||||
/>
|
|
||||||
<br>
|
|
||||||
<q-input
|
|
||||||
v-model="chartBoxStepXValue"
|
|
||||||
outlined
|
|
||||||
autofocus
|
|
||||||
label="X-value step size"
|
|
||||||
/>
|
|
||||||
</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="() => saveChartBox()"></q-btn>
|
|
||||||
</q-card-actions>
|
|
||||||
</q-card>
|
|
||||||
</template>
|
|
@ -1,2 +0,0 @@
|
|||||||
|
|
||||||
|
|
@ -0,0 +1,21 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import {MathPage} from '../support/page'
|
||||||
|
import {v4 as uuidv4} from 'uuid'
|
||||||
|
import Statement from './Statement.vue'
|
||||||
|
import {MathStatement} from '../support/parse'
|
||||||
|
|
||||||
|
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 onEdit = (stmt: MathStatement) => () => console.log('edit', stmt)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<p>Scratch page for testing!</p>
|
||||||
|
<Statement v-if="stmt" :statement="stmt" :evaluation="evaluation"/>
|
||||||
|
</template>
|
@ -1,73 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { ref } from "vue";
|
|
||||||
import { RichTextBox } from "../support/types";
|
|
||||||
import { stepX, stepY } from "../support/const";
|
|
||||||
const props = defineProps<{ value: RichTextBox }>();
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
|
||||||
(eventName: 'move', x: number, y: number): void,
|
|
||||||
(eventName: 'edit',): void,
|
|
||||||
(eventName: 'remove',): void,
|
|
||||||
|
|
||||||
}>()
|
|
||||||
|
|
||||||
|
|
||||||
function onControlledDrag(e: { event: MouseEvent, data: { x: number, y: number } }) {
|
|
||||||
|
|
||||||
// const x = e.x;
|
|
||||||
// const y = e.y;
|
|
||||||
const { x, y } = e.data;
|
|
||||||
props.value.x = x;
|
|
||||||
props.value.y = y;
|
|
||||||
console.log(e)
|
|
||||||
}
|
|
||||||
function onControlledDragStop(e: { event: MouseEvent, data: { x: number, y: number } }) {
|
|
||||||
// console.log(typeof(e))
|
|
||||||
const { x, y } = e.data;
|
|
||||||
// const x = e.x;
|
|
||||||
// const y = e.y;
|
|
||||||
console.log(self)
|
|
||||||
emit('move', x, y);
|
|
||||||
onControlledDrag(e);
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<Draggable
|
|
||||||
:grid="[stepX, stepY]"
|
|
||||||
:default-position="{ x: props.value.x, y: props.value.y }"
|
|
||||||
:position="{ x: props.value.x, y: props.value.y }"
|
|
||||||
@stop="onControlledDragStop"
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<q-card flat bordered>
|
|
||||||
<q-card-section style="padding: 0">
|
|
||||||
<div class="row items-center no-wrap">
|
|
||||||
<q-card-section v-html="props.value.text" />
|
|
||||||
<div class="col-auto">
|
|
||||||
<q-btn color="grey-7" round flat icon="more_vert">
|
|
||||||
<q-menu cover auto-close>
|
|
||||||
<q-list>
|
|
||||||
<q-item clickable>
|
|
||||||
<q-item-section @click="() => $emit('edit')">
|
|
||||||
<q-item-label>Edit</q-item-label>
|
|
||||||
</q-item-section>
|
|
||||||
</q-item>
|
|
||||||
<q-item clickable>
|
|
||||||
<q-item-section @click="() => $emit('remove')">Remove</q-item-section>
|
|
||||||
</q-item>
|
|
||||||
</q-list>
|
|
||||||
</q-menu>
|
|
||||||
</q-btn>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-card-section>
|
|
||||||
</q-card>
|
|
||||||
</div>
|
|
||||||
</Draggable>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="sass" scoped>
|
|
||||||
|
|
||||||
</style>
|
|
@ -1,115 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import * as math from 'mathjs'
|
|
||||||
import {onMounted, ref} from 'vue'
|
|
||||||
import {MathStatement} from '../support/parse'
|
|
||||||
import {v4 as uuidv4} from 'uuid'
|
|
||||||
import Katex from './Katex.vue'
|
|
||||||
import {StatementID} from '../support/types'
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
statement?: MathStatement,
|
|
||||||
}>()
|
|
||||||
|
|
||||||
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
|
|
||||||
}
|
|
||||||
|
|
||||||
if ( props.statement ) {
|
|
||||||
props.statement.raw = `${newVariableName.value} = ${newVariableValue.value}`
|
|
||||||
emit('save', props.statement)
|
|
||||||
} else {
|
|
||||||
emit('save', new MathStatement(
|
|
||||||
uuidv4() as StatementID,
|
|
||||||
`${newVariableName.value} = ${newVariableValue.value}`
|
|
||||||
))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
if ( props.statement ) {
|
|
||||||
const [ define ] = props.statement.defines()
|
|
||||||
newVariableName.value = define.name
|
|
||||||
|
|
||||||
const [_, ...rest] = props.statement.raw.split('=')
|
|
||||||
newVariableValue.value = rest.join('=')
|
|
||||||
updateNewVariablePreview()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</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>
|
|
@ -1,27 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { ref } from "vue";
|
|
||||||
import { useQuasar } from "quasar";
|
|
||||||
|
|
||||||
const $q = useQuasar();
|
|
||||||
const count = ref(0);
|
|
||||||
function increment() {
|
|
||||||
count.value++
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<Draggable :grid="[25, 25]">
|
|
||||||
<div>
|
|
||||||
<div>Grid with component</div>
|
|
||||||
|
|
||||||
<q-btn @click="increment">Count is: {{ count }}</q-btn>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</Draggable>
|
|
||||||
</template>
|
|
||||||
<style lang="sass" scoped>
|
|
||||||
.my-card
|
|
||||||
width: 50%
|
|
||||||
max-width: 250px
|
|
||||||
</style>
|
|
@ -1,69 +1,37 @@
|
|||||||
/*
|
|
||||||
--------------------------------------------------
|
|
||||||
Vue Helpers
|
|
||||||
--------------------------------------------------
|
|
||||||
*/
|
|
||||||
import { createApp } from 'vue'
|
import { createApp } from 'vue'
|
||||||
|
import App from './App.vue'
|
||||||
import router from './router'
|
|
||||||
|
|
||||||
/*
|
|
||||||
--------------------------------------------------
|
|
||||||
App UI
|
|
||||||
--------------------------------------------------
|
|
||||||
*/
|
|
||||||
import { Dark, Quasar } from 'quasar'
|
|
||||||
|
|
||||||
// Import icon libraries
|
|
||||||
import '@quasar/extras/roboto-font-latin-ext/roboto-font-latin-ext.css'
|
|
||||||
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/fadeInUp.css'
|
|
||||||
import '@quasar/extras/animate/fadeOutUp.css'
|
|
||||||
|
|
||||||
// Import Quasar css
|
|
||||||
import 'quasar/src/css/index.sass'
|
|
||||||
|
|
||||||
/*
|
|
||||||
--------------------------------------------------
|
|
||||||
Plugins
|
|
||||||
--------------------------------------------------
|
|
||||||
*/
|
|
||||||
import { DraggablePlugin } from '@braks/revue-draggable'
|
import { DraggablePlugin } from '@braks/revue-draggable'
|
||||||
|
import { createAuth0 } from '@auth0/auth0-vue'
|
||||||
|
import router from './router'
|
||||||
|
|
||||||
|
import 'vuetify/styles' // Global CSS has to be imported
|
||||||
|
import { createVuetify } from 'vuetify'
|
||||||
|
import * as components from 'vuetify/components'
|
||||||
|
import * as directives from 'vuetify/directives'
|
||||||
import 'katex/dist/katex.min.css'
|
import 'katex/dist/katex.min.css'
|
||||||
import 'katex/dist/contrib/auto-render.min'
|
import 'katex/dist/contrib/auto-render.min'
|
||||||
|
|
||||||
/*
|
|
||||||
--------------------------------------------------
|
|
||||||
Components
|
|
||||||
--------------------------------------------------
|
|
||||||
*/
|
|
||||||
import App from './App.vue'
|
|
||||||
|
|
||||||
const app = createApp(App)
|
|
||||||
|
|
||||||
app.use(Quasar, {
|
|
||||||
plugins: {Dark}, // import Quasar plugins and add here
|
|
||||||
config: {
|
|
||||||
brand: {
|
|
||||||
primary: '#553564',
|
|
||||||
secondary: '#7da9b2',
|
|
||||||
accent: '#9C27B0',
|
|
||||||
|
|
||||||
dark: '#1d1d1d',
|
const app = createApp(App)
|
||||||
|
const vuetify = createVuetify({
|
||||||
positive: '#21BA45',
|
components,
|
||||||
negative: '#C10015',
|
directives,
|
||||||
info: '#31CCEC',
|
theme: {
|
||||||
warning: '#F2C037',
|
defaultTheme: 'dark',
|
||||||
},
|
|
||||||
},
|
},
|
||||||
})
|
}) // Replaces new Vuetify(...)
|
||||||
|
app.use(vuetify)
|
||||||
|
|
||||||
|
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(router)
|
||||||
|
|
||||||
app.use(DraggablePlugin)
|
app.use(DraggablePlugin);
|
||||||
app.mount('#app')
|
app.mount('#app')
|
||||||
|
@ -1,696 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { onMounted, ref } from 'vue'
|
|
||||||
import { v4 as uuidv4 } from 'uuid'
|
|
||||||
import { MathPage } from '../support/page'
|
|
||||||
import { MathStatement } from '../support/parse'
|
|
||||||
import { ChartBox, EvaluationResult, hasOwnProperty } from '../support/types'
|
|
||||||
import Statement from '../components/Statement.vue'
|
|
||||||
import VarDeclEditor from '../components/VarDeclEditor.vue'
|
|
||||||
import ExpressionEditor from '../components/ExpressionEditor.vue'
|
|
||||||
import TextBox from '../components/TextBox.vue'
|
|
||||||
import ImageBox from '../components/ImageBox.vue'
|
|
||||||
|
|
||||||
import FunctionEditor from '../components/FunctionEditor.vue'
|
|
||||||
import { RichTextBox, ImageContainer } from '../support/types'
|
|
||||||
import RangeChart from '../components/RangeChart.vue'
|
|
||||||
import RangeChartEditor from '../components/RangeChartEditor.vue'
|
|
||||||
import { stepX, stepY } from '../support/const'
|
|
||||||
import { checkLoggedIn, loggedOut } from '../support/auth'
|
|
||||||
import router from '../router'
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
pageId?: number,
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const math = ref(new MathPage(uuidv4()));
|
|
||||||
const pageTitle = ref('New Page');
|
|
||||||
const statements = ref<MathStatement[]>([]);
|
|
||||||
const evaluation = ref<EvaluationResult | undefined>();
|
|
||||||
const statementsKey = ref<string>(uuidv4());
|
|
||||||
const leftDrawerOpen = ref(false);
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const variableListingColumns = [
|
|
||||||
{
|
|
||||||
name: 'name',
|
|
||||||
field: 'name',
|
|
||||||
label: 'Variable',
|
|
||||||
sortable: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'value',
|
|
||||||
field: 'value',
|
|
||||||
label: 'Value',
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
|
|
||||||
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;
|
|
||||||
stmt.x = x;
|
|
||||||
stmt.y = y;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
const variableListingRows = ref<({ name: string, value: string })[]>([])
|
|
||||||
|
|
||||||
const functionListingColumns = [
|
|
||||||
{
|
|
||||||
name: 'value',
|
|
||||||
field: 'value',
|
|
||||||
label: 'Function',
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
const functionListingRows = ref<({ name: string, value: string })[]>([])
|
|
||||||
|
|
||||||
function toggleLeftDrawer() {
|
|
||||||
leftDrawerOpen.value = !leftDrawerOpen.value
|
|
||||||
}
|
|
||||||
|
|
||||||
const newVariableModalOpen = ref(false)
|
|
||||||
const openNewVariableDeclModal = () => {
|
|
||||||
newVariableModalOpen.value = true
|
|
||||||
};
|
|
||||||
|
|
||||||
const newExpressionModalOpen = ref(false)
|
|
||||||
const openNewExpressionModal = () => {
|
|
||||||
newExpressionModalOpen.value = true
|
|
||||||
};
|
|
||||||
|
|
||||||
const newFunctionModalOpen = ref(false)
|
|
||||||
const openNewFunctionModal = () => {
|
|
||||||
newFunctionModalOpen.value = true
|
|
||||||
}
|
|
||||||
|
|
||||||
const editingStatement = ref<MathStatement | undefined>()
|
|
||||||
const editExpressionModalOpen = ref(false)
|
|
||||||
const openEditExpressionModal = () => {
|
|
||||||
editExpressionModalOpen.value = true
|
|
||||||
}
|
|
||||||
|
|
||||||
const editVarDeclModalOpen = ref(false)
|
|
||||||
const openEditVarDeclModal = () => {
|
|
||||||
editVarDeclModalOpen.value = true
|
|
||||||
}
|
|
||||||
|
|
||||||
const editFunctionModalOpen = ref(false)
|
|
||||||
const openEditFunctionModal = () => {
|
|
||||||
editFunctionModalOpen.value = true
|
|
||||||
}
|
|
||||||
|
|
||||||
const chartBoxKey = ref(uuidv4())
|
|
||||||
const updateStatements = () => {
|
|
||||||
statements.value = math.value.getStatements();
|
|
||||||
try {
|
|
||||||
evaluation.value = math.value.evaluate()
|
|
||||||
const variableValues: ({ name: string, value: string })[] = []
|
|
||||||
|
|
||||||
for (const name in evaluation.value!.variables) {
|
|
||||||
if (!hasOwnProperty(evaluation.value!.variables, name)) {
|
|
||||||
continue
|
|
||||||
}
|
|
||||||
|
|
||||||
let value = String(evaluation.value!.variables[name] ?? '')
|
|
||||||
try {
|
|
||||||
const stmt = MathStatement.temp(value)
|
|
||||||
value = stmt.toHTMLString()
|
|
||||||
} catch (_) { }
|
|
||||||
|
|
||||||
variableValues.push({
|
|
||||||
name,
|
|
||||||
value,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
variableListingRows.value = variableValues
|
|
||||||
|
|
||||||
const functionValues: ({ name: string, value: string })[] = []
|
|
||||||
for (const stmt of math.value.functions()) {
|
|
||||||
const node = stmt.parse() as math.FunctionAssignmentNode
|
|
||||||
functionValues.push({
|
|
||||||
name: node.name,
|
|
||||||
value: stmt.toHTMLString(),
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
functionListingRows.value = functionValues
|
|
||||||
} catch (_) {
|
|
||||||
console.error(_)
|
|
||||||
evaluation.value = undefined
|
|
||||||
}
|
|
||||||
statementsKey.value = uuidv4()
|
|
||||||
};
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
updateStatements()
|
|
||||||
})
|
|
||||||
|
|
||||||
const saveNewVariable = (stmt: MathStatement) => {
|
|
||||||
math.value.addStatement(stmt)
|
|
||||||
newVariableModalOpen.value = false
|
|
||||||
updateStatements()
|
|
||||||
chartBoxKey.value = uuidv4()
|
|
||||||
};
|
|
||||||
|
|
||||||
const saveNewExpression = (stmt: MathStatement) => {
|
|
||||||
math.value.addStatement(stmt)
|
|
||||||
newExpressionModalOpen.value = false
|
|
||||||
updateStatements()
|
|
||||||
chartBoxKey.value = uuidv4()
|
|
||||||
};
|
|
||||||
|
|
||||||
const saveNewFunction = (stmt: MathStatement) => {
|
|
||||||
math.value.addStatement(stmt)
|
|
||||||
newFunctionModalOpen.value = false
|
|
||||||
updateStatements()
|
|
||||||
chartBoxKey.value = uuidv4()
|
|
||||||
}
|
|
||||||
|
|
||||||
const editStatement = (stmt: MathStatement) => {
|
|
||||||
editingStatement.value = stmt
|
|
||||||
console.log('editStatement', stmt)
|
|
||||||
if (stmt.isFunctionDeclaration()) {
|
|
||||||
openEditFunctionModal()
|
|
||||||
} else if (stmt.isDeclaration()) {
|
|
||||||
openEditVarDeclModal()
|
|
||||||
} else {
|
|
||||||
openEditExpressionModal()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const removeStatement = (stmt: MathStatement) => {
|
|
||||||
math.value.removeStatement(stmt.id)
|
|
||||||
updateStatements()
|
|
||||||
chartBoxKey.value = uuidv4()
|
|
||||||
}
|
|
||||||
|
|
||||||
const finishEditStatement = () => {
|
|
||||||
editExpressionModalOpen.value = false
|
|
||||||
editVarDeclModalOpen.value = false
|
|
||||||
editFunctionModalOpen.value = false
|
|
||||||
updateStatements()
|
|
||||||
chartBoxKey.value = uuidv4()
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Rich Text Stuff
|
|
||||||
*/
|
|
||||||
|
|
||||||
const makeNewRichTextBox = () => {
|
|
||||||
richTextStatements.value.push(new RichTextBox(''));
|
|
||||||
richEditID.value = richTextStatements.value.length - 1;
|
|
||||||
richEditExpression.value = richTextStatements.value[richEditID.value].text;
|
|
||||||
richEditModal.value = true;
|
|
||||||
};
|
|
||||||
|
|
||||||
const chartBoxes = ref<ChartBox[]>([])
|
|
||||||
|
|
||||||
const newChartModalOpen = ref(false)
|
|
||||||
const openNewChartModal = () => {
|
|
||||||
newChartModalOpen.value = true
|
|
||||||
}
|
|
||||||
|
|
||||||
const saveNewChartBox = (chartBox: ChartBox) => {
|
|
||||||
chartBoxes.value.push(chartBox)
|
|
||||||
newChartModalOpen.value = false
|
|
||||||
chartBoxKey.value = uuidv4()
|
|
||||||
}
|
|
||||||
|
|
||||||
const editingChartBox = ref<ChartBox | undefined>()
|
|
||||||
const chartEditModalOpen = ref(false)
|
|
||||||
const openChartEditModal = (box: ChartBox) => {
|
|
||||||
editingChartBox.value = box
|
|
||||||
chartEditModalOpen.value = true
|
|
||||||
}
|
|
||||||
|
|
||||||
const saveEditingChartBox = () => {
|
|
||||||
chartEditModalOpen.value = false
|
|
||||||
chartBoxKey.value = uuidv4()
|
|
||||||
}
|
|
||||||
|
|
||||||
const moveChartBox = (id: number, x: number, y: number) => {
|
|
||||||
chartBoxes.value[id].x = x
|
|
||||||
chartBoxes.value[id].y = y
|
|
||||||
}
|
|
||||||
const removeChartBox = (id: number) => {
|
|
||||||
chartBoxes.value.splice(id, 1);
|
|
||||||
};
|
|
||||||
|
|
||||||
const richTextStatements = ref<RichTextBox[]>([
|
|
||||||
new RichTextBox("Hello World"),
|
|
||||||
]);
|
|
||||||
const richEditModal = ref(false);
|
|
||||||
const richEditExpression = ref("");
|
|
||||||
const richEditID = ref(0);
|
|
||||||
|
|
||||||
const richEditStatement = (id: number) => {
|
|
||||||
richEditModal.value = true;
|
|
||||||
richEditID.value = id;
|
|
||||||
richEditExpression.value = richTextStatements.value[richEditID.value].text;
|
|
||||||
};
|
|
||||||
|
|
||||||
const moveRichTextBox = (id: number, x: number, y: number) => {
|
|
||||||
richEditID.value = id;
|
|
||||||
richTextStatements.value[richEditID.value].x = x;
|
|
||||||
richTextStatements.value[richEditID.value].y = y;
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
function richUpdateValue() {
|
|
||||||
richTextStatements.value[richEditID.value].text = richEditExpression.value;
|
|
||||||
}
|
|
||||||
const removeRichTextBox = (id: number) => {
|
|
||||||
console.log(richTextStatements.value[id]);
|
|
||||||
richTextStatements.value.splice(id, 1);
|
|
||||||
};
|
|
||||||
|
|
||||||
/*
|
|
||||||
Image box
|
|
||||||
*/
|
|
||||||
|
|
||||||
const makeNewImageBox = () => {
|
|
||||||
images.value.push(new ImageContainer(''));
|
|
||||||
imageID.value = images.value.length - 1;
|
|
||||||
imageURL.value = images.value[imageID.value].url;
|
|
||||||
imageModal.value = true;
|
|
||||||
};
|
|
||||||
|
|
||||||
const images = ref<ImageContainer[]>([]);
|
|
||||||
|
|
||||||
const imageModal = ref(false);
|
|
||||||
const imageURL = ref("");
|
|
||||||
const imageID = ref(0);
|
|
||||||
|
|
||||||
const imageEditStatement = (id: number) => {
|
|
||||||
imageModal.value = true;
|
|
||||||
imageID.value = id;
|
|
||||||
imageURL.value = images.value[imageID.value].url;
|
|
||||||
};
|
|
||||||
|
|
||||||
const moveImageBox = (id: number, x: number, y: number) => {
|
|
||||||
imageID.value = id;
|
|
||||||
images.value[imageID.value].x = x;
|
|
||||||
images.value[imageID.value].y = y;
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
function imageUpdateValue() {
|
|
||||||
images.value[imageID.value].url = imageURL.value;
|
|
||||||
}
|
|
||||||
const removeimageBox = (id: number) => {
|
|
||||||
console.log(images.value[id]);
|
|
||||||
images.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: '/' })
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const serialize = () => {
|
|
||||||
return {
|
|
||||||
title: pageTitle.value,
|
|
||||||
page: math.value.serialize(),
|
|
||||||
textBoxes: richTextStatements.value.map(x => x.serialize()),
|
|
||||||
chartBoxes: chartBoxes.value.map(x => x.serialize()),
|
|
||||||
imageBoxes: images.value.map(x => x.serialize()),
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const editorPageId = ref<number|undefined>()
|
|
||||||
const saveEditorPage = async (close = false) => {
|
|
||||||
const params = {
|
|
||||||
serialData: JSON.stringify(serialize()),
|
|
||||||
} as any
|
|
||||||
|
|
||||||
if ( editorPageId.value ) {
|
|
||||||
params.pageId = editorPageId.value
|
|
||||||
}
|
|
||||||
|
|
||||||
const response = await fetch('/api/editor/page', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'Accept': 'application/json',
|
|
||||||
'Content-Type': 'application/json'
|
|
||||||
},
|
|
||||||
body: JSON.stringify(params),
|
|
||||||
})
|
|
||||||
|
|
||||||
const result = (await response.json()) as unknown as any
|
|
||||||
if (!result.success) {
|
|
||||||
return alert('Failed to save page: ' + result.message)
|
|
||||||
}
|
|
||||||
|
|
||||||
const justCreated = !editorPageId.value
|
|
||||||
editorPageId.value = result.data.pageId
|
|
||||||
if ( close ) {
|
|
||||||
await router.push('/Listings')
|
|
||||||
} else if ( justCreated ) {
|
|
||||||
await router.push(`/Editor/${editorPageId.value}`)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const deleteEditorPage = async (close = false) => {
|
|
||||||
const params = {
|
|
||||||
serialData: JSON.stringify(serialize()),
|
|
||||||
} as any
|
|
||||||
|
|
||||||
if ( editorPageId.value ) {
|
|
||||||
params.pageId = editorPageId.value
|
|
||||||
}
|
|
||||||
|
|
||||||
const response = await fetch('/api/editor/page', {
|
|
||||||
method: 'DELETE',
|
|
||||||
headers: {
|
|
||||||
'Accept': 'application/json',
|
|
||||||
'Content-Type': 'application/json'
|
|
||||||
},
|
|
||||||
body: JSON.stringify(params),
|
|
||||||
})
|
|
||||||
await router.push('/Listings')
|
|
||||||
}
|
|
||||||
|
|
||||||
const loadEditorPage = async () => {
|
|
||||||
if ( !editorPageId.value ) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const pageId = editorPageId.value
|
|
||||||
const response = await fetch(`/api/editor/page?pageId=${pageId}`, {
|
|
||||||
method: 'GET',
|
|
||||||
headers: {
|
|
||||||
'Accept': 'application/json',
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
const result = (await response.json()) as unknown as any
|
|
||||||
if (!result.success) {
|
|
||||||
return alert('Failed to load page: ' + result.message)
|
|
||||||
}
|
|
||||||
|
|
||||||
const serialData = result.data.serialData
|
|
||||||
const serialized = JSON.parse(serialData) as any
|
|
||||||
math.value = MathPage.deserialize(serialized.page)
|
|
||||||
richTextStatements.value = serialized.textBoxes.map((box: any) => RichTextBox.deserialize(box))
|
|
||||||
chartBoxes.value = serialized.chartBoxes.map((box: any) => ChartBox.deserialize(box))
|
|
||||||
images.value = serialized.imageBoxes.map((box: any) => ImageContainer.deserialize(box))
|
|
||||||
pageTitle.value = serialized.title ?? 'New Page'
|
|
||||||
updateStatements()
|
|
||||||
chartBoxKey.value = uuidv4()
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
if ( props.pageId ) {
|
|
||||||
editorPageId.value = props.pageId
|
|
||||||
loadEditorPage()
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const paramPageId = router.currentRoute.value.params.pageId
|
|
||||||
if ( !Array.isArray(paramPageId) && !isNaN(parseInt(paramPageId, 10)) ) {
|
|
||||||
editorPageId.value = parseInt(paramPageId, 10)
|
|
||||||
loadEditorPage()
|
|
||||||
return
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<q-layout view="hHh Lpr fff">
|
|
||||||
<q-header reveal bordered class="bg-primary text-white" height-hint="98">
|
|
||||||
<q-toolbar>
|
|
||||||
<q-btn dense flat round icon="menu" @click="toggleLeftDrawer" />
|
|
||||||
|
|
||||||
<q-toolbar-title>
|
|
||||||
<q-avatar size="50px">
|
|
||||||
<img src="../assets/l2.svg" />
|
|
||||||
</q-avatar>
|
|
||||||
<span style="font-family: 'Cinzel Decorative', cursive;">
|
|
||||||
Crystal Math Worktable
|
|
||||||
</span>
|
|
||||||
</q-toolbar-title>
|
|
||||||
|
|
||||||
<q-btn v-if="status" @click="logout()" label="Logout"></q-btn>
|
|
||||||
</q-toolbar>
|
|
||||||
</q-header>
|
|
||||||
|
|
||||||
<q-drawer show-if-above v-model="leftDrawerOpen" side="left" bordered>
|
|
||||||
<div class="column" style="height: 100%">
|
|
||||||
<div>
|
|
||||||
<q-input
|
|
||||||
v-model="pageTitle"
|
|
||||||
label="Title"
|
|
||||||
style="padding: 10px"
|
|
||||||
></q-input>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<q-table
|
|
||||||
flat
|
|
||||||
title="Variables"
|
|
||||||
:rows="variableListingRows"
|
|
||||||
:columns="variableListingColumns"
|
|
||||||
row-key="name"
|
|
||||||
hide-no-data
|
|
||||||
hide-bottom
|
|
||||||
: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="value" :props="props">
|
|
||||||
<div v-html="props.row.value"></div>
|
|
||||||
</q-td>
|
|
||||||
</q-tr>
|
|
||||||
</template>
|
|
||||||
</q-table>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<!-- <q-separator />-->
|
|
||||||
<q-table
|
|
||||||
flat
|
|
||||||
title="Functions"
|
|
||||||
:rows="functionListingRows"
|
|
||||||
:columns="functionListingColumns"
|
|
||||||
row-key="name"
|
|
||||||
hide-no-data
|
|
||||||
hide-bottom
|
|
||||||
hide-header
|
|
||||||
:pagination="{ rowsPerPage: 10000 }"
|
|
||||||
style="height: 100%; border-top: 1px solid lightgrey; border-radius: 0"
|
|
||||||
>
|
|
||||||
<template v-slot:body="props">
|
|
||||||
<q-tr :props="props">
|
|
||||||
<q-td key="value" :props="props">
|
|
||||||
<div v-html="props.row.value"></div>
|
|
||||||
</q-td>
|
|
||||||
</q-tr>
|
|
||||||
</template>
|
|
||||||
</q-table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- drawer content -->
|
|
||||||
</q-drawer>
|
|
||||||
|
|
||||||
<q-page-container id="editor" style='padding: 0'>
|
|
||||||
<span v-for="(chartBox, index) in chartBoxes" style="display: flex">
|
|
||||||
<RangeChart
|
|
||||||
:page="math"
|
|
||||||
:fn="math.getFunctionByNameOrFail(chartBox.fnName)"
|
|
||||||
:key="chartBoxKey"
|
|
||||||
:value="chartBox"
|
|
||||||
v-on:move="(x, y) => moveChartBox(index, x, y)"
|
|
||||||
v-on:remove="() => removeChartBox(index)"
|
|
||||||
v-on:edit="() => openChartEditModal(chartBox)"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span v-for="statement in statements" style="display: flex">
|
|
||||||
<Draggable
|
|
||||||
: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)"
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<Statement
|
|
||||||
:key="statementsKey"
|
|
||||||
:statement="statement"
|
|
||||||
:evaluation="evaluation"
|
|
||||||
v-on:edit="() => editStatement(statement)"
|
|
||||||
v-on:remove="() => removeStatement(statement)"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</Draggable>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<q-dialog v-model="newVariableModalOpen">
|
|
||||||
<VarDeclEditor v-on:save="(s) => saveNewVariable(s)" />
|
|
||||||
</q-dialog>
|
|
||||||
|
|
||||||
<q-dialog v-model="newExpressionModalOpen">
|
|
||||||
<ExpressionEditor v-on:save="(s) => saveNewExpression(s)" />
|
|
||||||
</q-dialog>
|
|
||||||
|
|
||||||
<q-dialog v-model="editExpressionModalOpen">
|
|
||||||
<ExpressionEditor :statement="editingStatement" v-on:save="() => finishEditStatement()" />
|
|
||||||
</q-dialog>
|
|
||||||
|
|
||||||
<q-dialog v-model="editVarDeclModalOpen">
|
|
||||||
<VarDeclEditor :statement="editingStatement" v-on:save="() => finishEditStatement()" />
|
|
||||||
</q-dialog>
|
|
||||||
|
|
||||||
<q-dialog v-model="newFunctionModalOpen">
|
|
||||||
<FunctionEditor v-on:save="(s) => saveNewFunction(s)" />
|
|
||||||
</q-dialog>
|
|
||||||
|
|
||||||
<q-dialog v-model="editFunctionModalOpen">
|
|
||||||
<FunctionEditor :statement="editingStatement" v-on:save="() => finishEditStatement()" />
|
|
||||||
</q-dialog>
|
|
||||||
|
|
||||||
<q-dialog v-model="newChartModalOpen">
|
|
||||||
<!-- // @ts-ignore -->
|
|
||||||
<RangeChartEditor :page="math" v-on:save="c => saveNewChartBox(c)" />
|
|
||||||
</q-dialog>
|
|
||||||
|
|
||||||
<q-dialog v-model="chartEditModalOpen">
|
|
||||||
<RangeChartEditor
|
|
||||||
:page="math"
|
|
||||||
:chartBox="editingChartBox"
|
|
||||||
v-on:save="() => saveEditingChartBox()"
|
|
||||||
/>
|
|
||||||
</q-dialog>
|
|
||||||
|
|
||||||
<q-page-sticky position="top-right" :offset="[18, 18]">
|
|
||||||
<q-btn fab icon="save" title="Save" color="primary" @click="() => saveEditorPage()"/>
|
|
||||||
</q-page-sticky>
|
|
||||||
|
|
||||||
<q-page-sticky position="top-right" :offset="[18, 90]">
|
|
||||||
<q-btn fab icon="close" title="Save and close" color="primary" @click="() => saveEditorPage(true)"/>
|
|
||||||
</q-page-sticky>
|
|
||||||
<q-page-sticky position="top-right" :offset="[18, 162]">
|
|
||||||
<q-btn fab icon="delete_forever" title="Delete forever" color="primary" @click="() => deleteEditorPage()"/>
|
|
||||||
</q-page-sticky>
|
|
||||||
|
|
||||||
<q-page-sticky position="bottom-right" :offset="[32, 32]">
|
|
||||||
<q-fab color="primary" icon="add" direction="left">
|
|
||||||
<q-fab-action
|
|
||||||
color="secondary"
|
|
||||||
label="x"
|
|
||||||
label-style="font-family: serif; font-size: 1.4rem; padding: 0"
|
|
||||||
title="Add a variable declaration"
|
|
||||||
@click="() => openNewVariableDeclModal()"
|
|
||||||
/>
|
|
||||||
<q-fab-action
|
|
||||||
color="secondary"
|
|
||||||
icon="code"
|
|
||||||
title="Add an expression"
|
|
||||||
@click="() => openNewExpressionModal()"
|
|
||||||
/>
|
|
||||||
<q-fab-action
|
|
||||||
color="secondary"
|
|
||||||
icon="functions"
|
|
||||||
title="Add a new function"
|
|
||||||
@click="() => openNewFunctionModal()"
|
|
||||||
/>
|
|
||||||
<q-fab-action
|
|
||||||
color="secondary"
|
|
||||||
icon="format_quote"
|
|
||||||
title="Add a text box"
|
|
||||||
@click="() => makeNewRichTextBox()"
|
|
||||||
/>
|
|
||||||
<q-fab-action
|
|
||||||
color="secondary"
|
|
||||||
icon="image"
|
|
||||||
title="Add an image box"
|
|
||||||
@click="() => makeNewImageBox()"
|
|
||||||
/>
|
|
||||||
<q-fab-action
|
|
||||||
color="secondary"
|
|
||||||
icon="show_chart"
|
|
||||||
title="Add a new chart"
|
|
||||||
@click="() => openNewChartModal()"
|
|
||||||
/>
|
|
||||||
</q-fab>
|
|
||||||
</q-page-sticky>
|
|
||||||
|
|
||||||
<q-dialog v-model="richEditModal">
|
|
||||||
<q-card>
|
|
||||||
<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-card-actions>
|
|
||||||
</q-card>
|
|
||||||
</q-dialog>
|
|
||||||
|
|
||||||
<div v-for="(item, index) in richTextStatements" style="display: flex">
|
|
||||||
<TextBox
|
|
||||||
:value="item"
|
|
||||||
v-on:edit="() => (item.text ? richEditStatement(index) : {})"
|
|
||||||
v-on:remove="() => removeRichTextBox(index)"
|
|
||||||
v-on:move="(x, y) => moveRichTextBox(index, x, y)"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<q-dialog v-model="imageModal">
|
|
||||||
<q-card autogrow style="min-width: 25em;">
|
|
||||||
<q-input autogrow v-model="imageURL" />
|
|
||||||
<q-card-actions align="right" class="text-primary">
|
|
||||||
<q-btn flat label="Cancel" v-close-popup></q-btn>
|
|
||||||
<q-btn flat label="Save" @click="imageUpdateValue" v-close-popup></q-btn>
|
|
||||||
</q-card-actions>
|
|
||||||
</q-card>
|
|
||||||
</q-dialog>
|
|
||||||
|
|
||||||
<div v-for="(item, index) in images" style="display: flex">
|
|
||||||
<ImageBox
|
|
||||||
:value="item"
|
|
||||||
v-on:edit="() => (item.url ? imageEditStatement(index) : {})"
|
|
||||||
v-on:remove="() => removeimageBox(index)"
|
|
||||||
v-on:move="(x, y) => moveImageBox(index, x, y)"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</q-page-container>
|
|
||||||
</q-layout>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
@import url("https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700&display=swap");
|
|
||||||
|
|
||||||
#editor {
|
|
||||||
background-image: url(../assets/grid.svg);
|
|
||||||
background-repeat: repeat;
|
|
||||||
height: 100%;
|
|
||||||
padding-top: 0px;
|
|
||||||
}
|
|
||||||
</style>
|
|
@ -1,46 +0,0 @@
|
|||||||
<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,66 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import {onMounted, ref} from 'vue'
|
|
||||||
import router from '../router'
|
|
||||||
|
|
||||||
interface PageRecord {
|
|
||||||
pageId: number|string,
|
|
||||||
title: string,
|
|
||||||
}
|
|
||||||
|
|
||||||
const pages = ref<PageRecord[]>([])
|
|
||||||
const columns = ref([
|
|
||||||
{
|
|
||||||
name: 'title',
|
|
||||||
field: 'title',
|
|
||||||
label: 'Title',
|
|
||||||
},
|
|
||||||
])
|
|
||||||
|
|
||||||
const loadPages = async () => {
|
|
||||||
const response = await fetch(`/api/editor/pages`, {
|
|
||||||
method: 'GET',
|
|
||||||
headers: {
|
|
||||||
'Accept': 'application/json',
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
const result = (await response.json()) as unknown as any
|
|
||||||
if ( !result.success ) {
|
|
||||||
alert('Unable to load pages: ' + result?.message)
|
|
||||||
}
|
|
||||||
|
|
||||||
pages.value = result.data.records.map((row: any) => {
|
|
||||||
return {
|
|
||||||
pageId: row.pageId,
|
|
||||||
title: JSON.parse(row.serialData).title || 'New Page',
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(loadPages)
|
|
||||||
|
|
||||||
const onRowClick = (_: unknown, row: PageRecord) => {
|
|
||||||
router.push({ path: `/Editor/${row.pageId}` })
|
|
||||||
}
|
|
||||||
|
|
||||||
const onNewPageClick = () => {
|
|
||||||
router.push('/Editor')
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div style="width: 100%">
|
|
||||||
<q-btn icon="add" style="margin-bottom: 10px" @click="onNewPageClick">New Page</q-btn>
|
|
||||||
<q-table
|
|
||||||
style="width: 100%"
|
|
||||||
title="My Pages"
|
|
||||||
:columns="columns"
|
|
||||||
:rows="pages"
|
|
||||||
row-key="pageId"
|
|
||||||
hide-bottom
|
|
||||||
:pagination="{ rowsPerPage: 10000 }"
|
|
||||||
@row-click="onRowClick"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
@ -1,75 +0,0 @@
|
|||||||
<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 { 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 stmt = page.getStatement(stmt1Id)
|
|
||||||
console.log({ page, stmt1Id })
|
|
||||||
|
|
||||||
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
|
|
||||||
}
|
|
||||||
|
|
||||||
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>
|
|
||||||
<p>Scratch page for testing!</p>
|
|
||||||
<q-dialog ref="edit-modal" v-model="editModal">
|
|
||||||
<q-card>
|
|
||||||
<q-card-section>
|
|
||||||
<div style="display: flex; justify-content: center">
|
|
||||||
<Katex :statement="editPreview" :key="key" />
|
|
||||||
</div>
|
|
||||||
</q-card-section>
|
|
||||||
<q-card-section>
|
|
||||||
<q-input
|
|
||||||
v-model="editExpression"
|
|
||||||
v-on:update:model-value="() => updateEditRender()"
|
|
||||||
type="textarea"
|
|
||||||
outlined
|
|
||||||
label="Expression"
|
|
||||||
autogrow
|
|
||||||
autofocus
|
|
||||||
/>
|
|
||||||
</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" v-close-popup></q-btn>
|
|
||||||
</q-card-actions>
|
|
||||||
</q-card>
|
|
||||||
</q-dialog>
|
|
||||||
<Statement
|
|
||||||
v-if="stmt"
|
|
||||||
v-on:edit="() => stmt ? editStatement(stmt) : {}"
|
|
||||||
:statement="stmt"
|
|
||||||
:evaluation="evaluation"
|
|
||||||
/>
|
|
||||||
</template>
|
|
@ -1,12 +0,0 @@
|
|||||||
$primary : #553564
|
|
||||||
$secondary : #008e80
|
|
||||||
$accent : #9C27B0
|
|
||||||
|
|
||||||
$dark : #1D1D1D
|
|
||||||
// $dark-page: #333333;
|
|
||||||
|
|
||||||
|
|
||||||
$positive : #21BA45
|
|
||||||
$negative : #C10015
|
|
||||||
$info : #7da9b2
|
|
||||||
$warning : #F2C037
|
|
@ -1,10 +0,0 @@
|
|||||||
let isLoggedIn = false
|
|
||||||
export const checkLoggedIn = () => {
|
|
||||||
return isLoggedIn
|
|
||||||
}
|
|
||||||
export const loggedIn = () => {
|
|
||||||
isLoggedIn = true
|
|
||||||
}
|
|
||||||
export const loggedOut = () => {
|
|
||||||
isLoggedIn = false
|
|
||||||
}
|
|
@ -1,2 +0,0 @@
|
|||||||
export const stepX = 5
|
|
||||||
export const stepY = 5
|
|
@ -1,25 +1,10 @@
|
|||||||
import { defineConfig } from 'vite'
|
import { defineConfig } from 'vite'
|
||||||
import vue from '@vitejs/plugin-vue'
|
import vue from '@vitejs/plugin-vue'
|
||||||
import { quasar, transformAssetUrls } from '@quasar/vite-plugin'
|
import vuetify from '@vuetify/vite-plugin'
|
||||||
|
|
||||||
// https://vitejs.dev/config/
|
// https://vitejs.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
server: {
|
plugins: [vue(),
|
||||||
proxy: {
|
vuetify({ autoImport: true }), // Enabled by default
|
||||||
'/api': {
|
],
|
||||||
target: 'http://localhost:8000/',
|
|
||||||
},
|
|
||||||
'/auth': {
|
|
||||||
target: 'http://localhost:8000/',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
plugins: [
|
|
||||||
vue({
|
|
||||||
template: { transformAssetUrls },
|
|
||||||
}),
|
|
||||||
|
|
||||||
quasar({
|
|
||||||
sassVariables: 'src/quasar-variables.sass',
|
|
||||||
})],
|
|
||||||
})
|
})
|
||||||
|
Loading…
Reference in new issue