Mirrors/WGDashboard
1
0
Fork 0
mirror of https://github.com/donaldzou/WGDashboard.git synced 2025-09-06 11:41:16 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

testing something...

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

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

51
src/static/app/app.js
View File

@@ -1,51 +0,0 @@
const { createApp, ref } = Vue;
import Index from './index.js'
import Signin from './signin/signin.js'
const {createPinia} = Pinia
import {cookie} from "./cookie.js";
const app = createApp({
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>
`
});
const pinia = createPinia()
const routes = [
{
path: '/',
component: Index,
meta: {
requiresAuth: true
}
},
{
path: '/signin', component: Signin
}
]
const router = VueRouter.createRouter({
// 4. Provide the history implementation to use. We are using the hash history for simplicity here.
history: VueRouter.createWebHashHistory(),
routes, // short for `routes: routes`
});
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth){
if (cookie.getCookie("auth")){
next()
}else{
next("/signin")
}
}else {
next();
}
});
app.use(router);
app.use(pinia)
app.mount('#app');

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>

5
src/static/app/index.js
View File

@@ -1,5 +0,0 @@
export default {
template: `
this is idex
`
}

8
src/static/app/jsconfig.json Normal file
View File

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

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

File diff suppressed because it is too large Load Diff

22
src/static/app/package.json Normal file
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"
}
}

BIN
src/static/app/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

52
src/static/app/signin/signin.js
View File

@@ -1,52 +0,0 @@
import {fetchPost} from "./fetch.js";
export default {
data(){
return {
username: "",
password: ""
}
},
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>
`,
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")
}
})
}
}
}
}

12
src/static/app/src/App.vue Normal file
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>

17
src/static/app/src/main.js Normal file
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')

34
src/static/app/src/router/index.js Normal file
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

12
src/static/app/src/stores/counter.js Normal file
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 }
})

2
src/static/app/cookie.js → src/static/app/src/utilities/cookie.js
View File

@@ -1,5 +1,5 @@
export const cookie = {
//https://stackoverflow.com/a/15724300
getCookie(name) {
const value = `; ${document.cookie}`;

6
src/static/app/signin/fetch.js → src/static/app/src/utilities/fetch.js
View File

@@ -22,7 +22,7 @@ export const fetchPost = async (url, body, callback) => {
})
.then(x => x.json())
.then(x => callback ? callback(x) : undefined)
// .catch(() => {
// alert("Error occurred! Check console")
// });
// .catch(() => {
// alert("Error occurred! Check console")
// });
}

13
src/static/app/src/views/index.vue Normal file
View File

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

60
src/static/app/src/views/signin.vue Normal file
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>

5
src/static/app/store.js
View File

@@ -1,5 +0,0 @@
import { defineStore } from 'pinia'
export const wgdStore = defineStore('WGDashboardStore', {
})

21
src/static/app/vite.config.js Normal file
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/'
}
}
})