testing something...

This commit is contained in:
Donald Zou
2024-01-08 12:23:57 -05:00
parent 0c0bce9755
commit f671c992e1
30 changed files with 1319 additions and 826 deletions

30
src/static/app/.gitignore vendored Normal file
View File

@@ -0,0 +1,30 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
.DS_Store
dist
dist-ssr
coverage
*.local
/cypress/videos/
/cypress/screenshots/
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
*.tsbuildinfo

13
src/static/app/index.html Normal file
View File

@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app" class="vw-100 vh-100"></div>
<!-- <script type="module" src="./src/main.js"></script> -->
</body>
</html>

View File

@@ -0,0 +1,8 @@
{
"compilerOptions": {
"paths": {
"@/*": ["./src/*"]
}
},
"exclude": ["node_modules", "dist"]
}

1036
src/static/app/package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,22 @@
{
"name": "app",
"version": "0.0.0",
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"bootstrap": "^5.3.2",
"bootstrap-icons": "^1.11.2",
"pinia": "^2.1.7",
"vue": "^3.3.11",
"vue-router": "^4.2.5"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.5.2",
"vite": "^5.0.10"
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

View File

@@ -0,0 +1,12 @@
<script setup>
import { RouterView } from 'vue-router'
</script>
<template>
<nav class="navbar bg-dark fixed-top" data-bs-theme="dark">
<div class="container-fluid">
<span class="navbar-brand mb-0 h1">WGDashboard</span>
</div>
</nav>
<RouterView></RouterView>
</template>

View File

@@ -0,0 +1,17 @@
import '../../css/dashboard.css'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap.js'
import 'bootstrap-icons/font/bootstrap-icons.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount('#app')

View File

@@ -0,0 +1,34 @@
import { createRouter, createWebHashHistory } from 'vue-router'
import {cookie} from "../utilities/cookie.js";
import Index from "@/views/index.vue"
import Signin from "@/views/signin.vue";
const router = createRouter({
history: createWebHashHistory(),
routes: [
{
path: '/',
component: Index,
meta: {
requiresAuth: true
}
},
{
path: '/signin', component: Signin
}
]
});
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth){
if (cookie.getCookie("auth")){
next()
}else{
next("/signin")
}
}else {
next();
}
});
export default router

View File

@@ -0,0 +1,12 @@
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
const doubleCount = computed(() => count.value * 2)
function increment() {
count.value++
}
return { count, doubleCount, increment }
})

View File

@@ -0,0 +1,9 @@
export const cookie = {
//https://stackoverflow.com/a/15724300
getCookie(name) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop().split(';').shift();
}
}

View File

@@ -0,0 +1,28 @@
export const fetchGet = async (url, params=undefined, callback=undefined) => {
const urlSearchParams = new URLSearchParams(params);
await fetch(`${url}?${urlSearchParams.toString()}}`, {
headers: {
"content-type": "application/json"
}
})
.then(x => x.json())
.then(x => callback ? callback(x) : undefined)
.catch(() => {
alert("Error occurred! Check console")
});
}
export const fetchPost = async (url, body, callback) => {
await fetch(`${url}`, {
headers: {
"content-type": "application/json"
},
method: "POST",
body: JSON.stringify(body)
})
.then(x => x.json())
.then(x => callback ? callback(x) : undefined)
// .catch(() => {
// alert("Error occurred! Check console")
// });
}

View File

@@ -0,0 +1,13 @@
<script>
export default {
name: "index"
}
</script>
<template>
</template>
<style scoped>
</style>

View File

@@ -0,0 +1,60 @@
<script>
import {fetchPost} from "../utilities/fetch.js";
export default {
name: "signin",
data(){
return {
username: "",
password: ""
}
},
methods: {
async auth(){
if (this.username && this.password){
await fetchPost("/auth", {
username: this.username,
password: this.password
}, (response) => {
console.log(response)
})
}else{
document.querySelectorAll("input[required]").forEach(x => {
if (x.value.length === 0){
x.classList.remove("is-valid")
x.classList.add("is-invalid")
}else{
x.classList.remove("is-invalid")
x.classList.add("is-valid")
}
})
}
}
}
}
</script>
<template>
<div class="container-fluid login-container-fluid h-100 d-flex">
<div class="login-box m-auto" style="width: 500px;">
<h1 class="text-center">Sign in</h1>
<h5 class="text-center">to WGDashboard</h5>
<div class="m-auto">
<div class="alert alert-danger d-none" role="alert" style="margin-top: 1rem; margin-bottom: 0rem;"></div>
<div class="form-group">
<label for="username" class="text-left" style="font-size: 1rem"><i class="bi bi-person-circle"></i></label>
<input type="text" v-model="username" class="form-control" id="username" name="username" placeholder="Username" required>
</div>
<div class="form-group">
<label for="password" class="text-left" style="font-size: 1rem"><i class="bi bi-key-fill"></i></label>
<input type="password" v-model="password" class="form-control" id="password" name="password" placeholder="Password" required>
</div>
<button class="btn btn-dark w-100 mt-4" @click="this.auth()">Sign In</button>
</div>
</div>
</div>
</template>
<style scoped>
</style>

View File

@@ -0,0 +1,21 @@
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
server:{
proxy: {
'/': 'http://178.128.231.4:10086/'
}
}
})

View File

@@ -48,4 +48,4 @@ router.beforeEach((to, from, next) => {
app.use(router);
app.use(pinia)
app.mount('#app');
app.mount('#app1');