CrystalMath/ui
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Resolve conflicts

Browse Source
This commit is contained in:
Garrett Mills 2022-04-10 02:40:47 -05:00
commit b3108715b1
15 changed files with 54517 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -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",

13
pnpm-lock.yaml
View File

@ -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:

72
src/App.vue
View File

@ -1,14 +1,55 @@
<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";
import { Dark } from "quasar";
(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: "/" });
};
Dark.set(true)
</script>
<template>
@ -16,18 +57,22 @@ import { ref } from "vue";
<q-header elevated class="bg-primary text-white" height-hint="98">
<q-toolbar>
<q-toolbar-title>
<q-avatar>
<img src="https://cdn.quasar.dev/logo-v2/svg/logo-mono-white.svg" />
<q-avatar size="50px">
<img src="./assets/l2.svg" />
</q-avatar>
Title
<span style="font-family: 'Cinzel Decorative', cursive;">
Crystal Math Worktable
</span>
<q-tab v-if="status" @click="logout()" label="Logout" />
</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-tabs>
<q-tab v-if="status" @click="logout()" label="Logout" />
</q-tabs> -->
</q-header>
<q-page-container style="display: flex;padding-top: 20px;">
@ -37,12 +82,19 @@ import { ref } from "vue";
</template>
<style>
@import url("https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700&display=swap");
#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;
}
.titleBar {
font-family: "Cinzel Decorative";
}
</style>

78
src/assets/l2.svg Normal file
View File

@ -0,0 +1,78 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="210mm"
height="297mm"
viewBox="0 0 210 297"
version="1.1"
id="svg13372"
inkscape:version="1.2-beta (1b65182ce9, 2022-04-05)"
sodipodi:docname="l2.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview13374"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:pageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
inkscape:zoom="0.51843089"
inkscape:cx="-180.35191"
inkscape:cy="555.52245"
inkscape:window-width="1920"
inkscape:window-height="1001"
inkscape:window-x="-7"
inkscape:window-y="-7"
inkscape:window-maximized="1"
inkscape:current-layer="layer2">
<inkscape:grid
type="xygrid"
id="grid59924" />
</sodipodi:namedview>
<defs
id="defs13369" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<g
inkscape:groupmode="layer"
id="layer2"
inkscape:label="Text"
transform="matrix(0.26458333,0,0,0.26458333,10.166581,13.777983)"
style="fill:#550000">
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:969.291px;font-family:'Cinzel Decorative';-inkscape-font-specification:'Cinzel Decorative Bold';fill:#ffffff;stroke:#ffffff;stroke-width:0;stroke-miterlimit:4.8;stroke-dasharray:none;stroke-opacity:1"
x="-37.659836"
y="831.96069"
id="text6305"
transform="scale(0.96764101,1.0334411)"><tspan
sodipodi:role="line"
id="tspan6303"
x="-37.659836"
y="831.96069"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:969.291px;font-family:'Cinzel Decorative';-inkscape-font-specification:'Cinzel Decorative';fill:#ffffff;stroke-width:0;stroke:#ffffff;stroke-opacity:1;stroke-dasharray:none">C</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:463.256px;font-family:'Cinzel Decorative';-inkscape-font-specification:'Cinzel Decorative';fill:#ffffff;stroke:#ffffff;stroke-width:0;stroke-miterlimit:4.8;stroke-dasharray:none;stroke-opacity:1"
x="120.35316"
y="634.82605"
id="text6413"
transform="scale(0.97653789,1.0240258)"><tspan
sodipodi:role="line"
id="tspan6411"
x="120.35316"
y="634.82605"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'Cinzel Decorative';-inkscape-font-specification:'Cinzel Decorative Bold';fill:#ffffff;stroke-width:0;stroke:#ffffff;stroke-opacity:1;stroke-dasharray:none">M</tspan></text>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

54040
src/assets/logo.svg Normal file
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 2.7 MiB

126
src/components/Login.vue Normal file
View 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>

31
src/main.ts
View File

@ -12,7 +12,7 @@ import router from './router'
App UI
--------------------------------------------------
*/
import { Quasar } from 'quasar'
import { Dark, Quasar } from 'quasar'
// Import icon libraries
import '@quasar/extras/roboto-font-latin-ext/roboto-font-latin-ext.css'
@ -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'
@ -47,16 +46,22 @@ import App from './App.vue'
const app = createApp(App)
app.use(Quasar, {
plugins: {}, // import Quasar plugins and add here
})
plugins: {Dark}, // import Quasar plugins and add here
config: {
brand: {
primary: '#553564',
secondary: '#c1eeff',
accent: '#9C27B0',
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
}),
)
dark: '#1d1d1d',
positive: '#21BA45',
negative: '#C10015',
info: '#31CCEC',
warning: '#F2C037',
},
},
})
app.use(router)

77
src/pages/Editor.vue
View File

@ -8,11 +8,13 @@ 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 RangeChart from '../components/RangeChart.vue'
import RangeChartEditor from './RangeChartEditor.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[]>([]);
@ -20,6 +22,9 @@ const evaluation = ref<EvaluationResult | undefined>();
const statementsKey = ref<string>(uuidv4());
const leftDrawerOpen = ref(false);
const variableListingColumns = [
{
name: 'name',
@ -34,6 +39,7 @@ const variableListingColumns = [
},
]
const stmOnControlledDragStop = (stmt: MathStatement) => (e: { event: MouseEvent, data: { x: number, y: number } }) => {
console.log(e)
console.log("moved stm5", stmt)
@ -132,7 +138,9 @@ const updateStatements = () => {
statementsKey.value = uuidv4()
};
onMounted(updateStatements)
onMounted(() => {
updateStatements()
})
const saveNewVariable = (stmt: MathStatement) => {
math.addStatement(stmt)
@ -247,6 +255,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>
@ -258,13 +291,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>
@ -284,9 +317,7 @@ const removeRichTextBox = (id: number) => {
>
<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>
@ -327,7 +358,7 @@ const removeRichTextBox = (id: number) => {
<span v-for="(chartBox, index) in chartBoxes" style="display: flex">
<RangeChart
:fn="math.getFunctionByName(chartBox.fnName)"
:fn="math.getFunctionByNameOrFail(chartBox.fnName)"
:key="chartBoxKey"
:value="chartBox"
v-on:move="(x, y) => moveChartBox(index, x, y)"
@ -364,30 +395,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-dialog v-model="newChartModalOpen">
@ -446,12 +466,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
View 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>

33
src/pages/Login.vue
View File

@ -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>

3
src/pages/Scratch.vue
View File

@ -5,6 +5,8 @@
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')
@ -35,6 +37,7 @@
key.value = uuidv4()
}
}
</script>
<template>

4
src/quasar-variables.sass
View File

@ -1,8 +1,10 @@
$primary : #1976D2
$primary : #553564
$secondary : #26A69A
$accent : #9C27B0
$dark : #1D1D1D
// $dark-page: #333333;
$positive : #21BA45
$negative : #C10015

2
src/router.ts
View File

@ -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
View File

@ -0,0 +1,10 @@
let isLoggedIn = false
export const checkLoggedIn = () => {
return isLoggedIn
}
export const loggedIn = () => {
isLoggedIn = true
}
export const loggedOut = () => {
isLoggedIn = false
}

9
src/support/page.ts
View File

@ -138,6 +138,15 @@ export class MathPage {
}
}
/** Look up a function statement by name, if it exists. */
getFunctionByNameOrFail(name: string): MathStatement {
const fn = this.getFunctionByName(name)
if ( !fn ) {
throw new Error('Unable to find function with name: ' + name)
}
return fn
}
/** Evaluate the current state of the page and get the result. */
evaluate(): EvaluationResult {
const evaluations: Record<StatementID, any> = {}