luke/personal-tracker
1
1
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

WIP: Vue Frontend #3

Draft
luke wants to merge 5 commits from lukeh990/frontend into main
pull from: lukeh990/frontend
merge into: luke:main
Conversation 0 Commits 5 Files Changed 19 +1856
19 changed files with 1856 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
client/.vscode/extensions.json vendored Normal file
View File

@ -0,0 +1,3 @@
{
"recommendations": ["Vue.volar"]
}

4
client/README.md Normal file
View File

@ -0,0 +1,4 @@
# Personal Tracker Frontend
## Implementation Checklist
- [ ] WIP

35
client/eslint.config.js Normal file
View File

@ -0,0 +1,35 @@
import pluginVue from 'eslint-plugin-vue'
import path from 'node:path'
import { fileURLToPath } from 'node:url'
import { FlatCompat } from '@eslint/eslintrc'
import js from '@eslint/js'
const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)
const compat = new FlatCompat({
baseDirectory: __dirname,
recommendedConfig: js.configs.recommended
})
export default [
js.configs.recommended,
...pluginVue.configs["flat/essential"],
...compat.extends("@vue/eslint-config-typescript/recommended"),
{
files: [
"**/*.vue",
"**/*.js",
"**/*.jsx",
"**/*.cjs",
"**/*.mjs",
"**/*.ts",
"**/*.tsx",
"**/*.cts",
"**/*.mts",
],
languageOptions: {
ecmaVersion: "latest",
},
},
];

13
client/index.html Normal file
View File

@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Personal Tracker</title>
</head>
<body>
<noscript>Javascript is required for this website</noscript>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

29
client/package.json Normal file
View File

@ -0,0 +1,29 @@
{
"name": "personal-tracker-client",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vue-tsc && vite build",
"preview": "vite preview",
"lint": "eslint \"src/**/*.{js,vue}\" --fix"
},
"dependencies": {
"vue": "^3.4.21",
"vue-router": "^4.3.2"
},
"devDependencies": {
"@eslint/eslintrc": "^3.0.2",
"@eslint/js": "^9.2.0",
"@rushstack/eslint-patch": "^1.10.2",
"@vitejs/plugin-vue": "^5.0.4",
"@vue/eslint-config-typescript": "^13.0.0",
"eslint": "^9.2.0",
"eslint-plugin-vue": "^9.26.0",
"typescript": "^5.2.2",
"vite": "^5.2.0",
"vue-tsc": "^2.0.6"
},
"packageManager": "yarn@1.22.21+sha1.1959a18351b811cdeedbd484a8f86c3cc3bbaf72"
}

23
client/src/App.vue Normal file
View File

@ -0,0 +1,23 @@
<script setup lang="ts">
import Header from "./components/PageHeader.vue";
import Footer from "./components/PageFooter.vue";
</script>
<template>
<Header />
<main>
<RouterView />
</main>
<Footer />
</template>
<style scoped>
main {
flex: 1;
padding: 2ch;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>

5
client/src/authenticated.ts Normal file
View File

@ -0,0 +1,5 @@
import {reactive} from "vue";
export const authenticated = reactive({
authenticated: false
})

10
client/src/components/PageFooter.vue Normal file
View File

@ -0,0 +1,10 @@
<template>
<footer>Personal Tracker | v0.1.0</footer>
</template>
<style scoped>
footer {
text-align: center;
background-color: #f5f5f5;
}
</style>

83
client/src/components/PageHeader.vue Normal file
View File

@ -0,0 +1,83 @@
<template>
<header>
<h1>Personal Tracker</h1>
<nav>
<ul>
<li>
<RouterLink to="/">
Home
</RouterLink>
</li>
</ul>
</nav>
<span
class="auth"
:class="authenticated.authenticated ? 'green' : 'red'"
>Authenticated: {{ authenticated.authenticated }}</span>
</header>
</template>
<script setup lang="ts">
import {authenticated} from "../authenticated.ts";
</script>
<style scoped>
header {
background-color: #f5f5f5;
display: flex;
flex-direction: row;
align-items: center;
padding: 1ch;
border-bottom: 1px solid #ccc;
}
h1 {
text-align: center;
margin: 0;
padding-right: 2ch;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
padding: 1ch 1ch;
}
a {
color: #000;
text-decoration: none;
padding: 0.5ch;
font-size: 1.5rem;
}
a:hover {
background: #b3b6b8;
}
.auth {
padding-left: 2ch;
font-size: 1.5rem;
}
/*noinspection CssUnusedSymbol*/
.red {
color: #8f3d3d;
}
/*noinspection CssUnusedSymbol*/
.green {
color: #588f3d;
}
</style>

6
client/src/main.ts Normal file
View File

@ -0,0 +1,6 @@
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')

21
client/src/router.ts Normal file
View File

@ -0,0 +1,21 @@
import { createWebHistory, createRouter } from 'vue-router'
import {authenticated} from "./authenticated.ts";
import HomeView from './views/HomePage.vue'
import LoginView from './views/LoginPage.vue'
const routes = [
{ path: '/', component: HomeView },
{ path: '/login', name: 'Login', component: LoginView }
]
const router = createRouter({
history: createWebHistory(),
routes,
})
router.beforeEach((to) => {
if (!authenticated.authenticated && to.name !== 'Login') {return {name: 'Login'}}
})
export default router

14
client/src/style.css Normal file
View File

@ -0,0 +1,14 @@
:root {
}
html, body, #app {
margin: 0;
height: 100%;
font-family: monospace;
}
#app {
display: flex;
flex-direction: column;
}

13
client/src/views/HomePage.vue Normal file
View File

@ -0,0 +1,13 @@
<script setup lang="ts">
import {authenticated} from "../authenticated.ts";
import {useRouter} from "vue-router";
const router = useRouter();
</script>
<template>
<h1>Home Page</h1>
<button @click="authenticated.authenticated = false; router.push('/login')">
Logout
</button>
</template>

125
client/src/views/LoginPage.vue Normal file
View File

@ -0,0 +1,125 @@
<script setup lang="ts">
import {ref} from "vue";
import {authenticated} from "../authenticated.ts";
import {useRouter} from "vue-router";
const router = useRouter();
const text = ref("");
const display = ref("");
function addToCode(input: string) {
if (input === "Backspace") {
text.value = text.value.slice(0, -1);
display.value = display.value.slice(0, -1);
} else {
if (text.value.length < 6) {
text.value += input;
display.value += "●";
}
}
}
function submit() {
if (text.value === "210791") {
display.value = "Success";
setTimeout(() => {
authenticated.authenticated = true;
router.push("/");
}, 1000)
} else {
display.value = "Error";
text.value = "";
setTimeout(() => {
display.value = "";
}, 1000)
}
}
window.addEventListener("keydown", function(event) {
const isNumber = isFinite(Number(event.key));
if (isNumber) {
addToCode(event.key);
}
if (event.key === "Backspace") {
addToCode(event.key);
}
if (event.key === "Enter") {
submit();
}
});
</script>
<template>
<h1>Enter PIN Code</h1>
<div class="keypad">
<div class="display">
{{ display }}
</div>
<div class="buttons">
<button @click="addToCode('1')">1</button>
<button @click="addToCode('2')">2</button>
<button @click="addToCode('3')">3</button>
<button @click="addToCode('4')">4</button>
<button @click="addToCode('5')">5</button>
<button @click="addToCode('6')">6</button>
<button @click="addToCode('7')">7</button>
<button @click="addToCode('8')">8</button>
<button @click="addToCode('9')">9</button>
<button @click="addToCode('Backspace')">⌫</button>
<button @click="addToCode('0')">0</button>
<button @click="submit">↵</button>
</div>
</div>
</template>
<style scoped>
h1 {
text-align: center;
}
.keypad {
border: 1px solid black;
padding: 1ch;
font-size: 3rem;
}
.keypad > .display {
border-bottom: 1px solid black;
text-align: center;
min-height: 2.3ch;
min-width: 7ch;
}
.keypad > .buttons {
display: grid;
margin-top: 1ch;
grid-template-columns: 1fr 1fr 1fr;
}
.keypad > .buttons button {
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
}
.keypad > .buttons button:hover {
background: #b3b6b8;
}
</style>

1
client/src/vite-env.d.ts vendored Normal file
View File

@ -0,0 +1 @@
/// <reference types="vite/client" />

25
client/tsconfig.json Normal file
View File

@ -0,0 +1,25 @@
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"module": "ESNext",
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "preserve",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
"references": [{ "path": "./tsconfig.node.json" }]
}

11
client/tsconfig.node.json Normal file
View File

@ -0,0 +1,11 @@
{
"compilerOptions": {
"composite": true,
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true,
"strict": true
},
"include": ["vite.config.ts"]
}

7
client/vite.config.ts Normal file
View File

@ -0,0 +1,7 @@
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
})

1428
client/yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff