HFJ
/
alarm-web-client
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request 'Jwitt' (#1) from Jwitt into main

Browse Source 
Reviewed-on: #1
main
jwitt 2 years ago
parent 70bb2259df efe9ae01dd
commit 52a911fdc9
16 changed files with 6426 additions and 6119 deletions
Show Stats Download Patch File Download Diff File

28
.eslintrc.cjs
Unescape Escape View File

@ -1,14 +1,14 @@
/* eslint-env node */ /* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution') require('@rushstack/eslint-patch/modern-module-resolution')
module.exports = { module.exports = {
root: true, root: true,
'extends': [ 'extends': [
'plugin:vue/vue3-essential', 'plugin:vue/vue3-essential',
'eslint:recommended', 'eslint:recommended',
'@vue/eslint-config-prettier/skip-formatting' '@vue/eslint-config-prettier/skip-formatting'
], ],
parserOptions: { parserOptions: {
ecmaVersion: 'latest' ecmaVersion: 'latest'
} }
} }

56
.gitignore vendored
Unescape Escape View File

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

14
.prettierrc.json
Unescape Escape View File

@ -1,8 +1,8 @@
{ {
"$schema": "https://json.schemastore.org/prettierrc", "$schema": "https://json.schemastore.org/prettierrc",
"semi": false, "semi": false,
"tabWidth": 2, "tabWidth": 2,
"singleQuote": true, "singleQuote": true,
"printWidth": 100, "printWidth": 100,
"trailingComma": "none" "trailingComma": "none"
} }

6
.vscode/extensions.json vendored
Unescape Escape View File

@ -1,3 +1,3 @@
{ {
"recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"] "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
} }

70
README.md
Unescape Escape View File

@ -1,35 +1,35 @@
# alarm-web-client # alarm-web-client
This template should help get you started developing with Vue 3 in Vite. This template should help get you started developing with Vue 3 in Vite.
## Recommended IDE Setup ## Recommended IDE Setup
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
## Customize configuration ## Customize configuration
See [Vite Configuration Reference](https://vitejs.dev/config/). See [Vite Configuration Reference](https://vitejs.dev/config/).
## Project Setup ## Project Setup
```sh ```sh
npm install npm install
``` ```
### Compile and Hot-Reload for Development ### Compile and Hot-Reload for Development
```sh ```sh
npm run dev npm run dev
``` ```
### Compile and Minify for Production ### Compile and Minify for Production
```sh ```sh
npm run build npm run build
``` ```
### Lint with [ESLint](https://eslint.org/) ### Lint with [ESLint](https://eslint.org/)
```sh ```sh
npm run lint npm run lint
``` ```

26
index.html
Unescape Escape View File

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

11918
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

55
package.json
Unescape Escape View File

@ -1,26 +1,29 @@
{ {
"name": "alarm-web-client", "name": "alarm-web-client",
"version": "0.0.0", "version": "0.0.0",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",
"build": "vite build", "build": "vite build",
"preview": "vite preview", "preview": "vite preview",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore", "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
"format": "prettier --write src/" "format": "prettier --write src/"
}, },
"dependencies": { "dependencies": {
"vue": "^3.3.4", "vue": "^3.3.4",
"vue-router": "^4.2.4" "vue-router": "^4.2.4"
}, },
"devDependencies": { "devDependencies": {
"@rushstack/eslint-patch": "^1.3.2", "@iconify/vue": "^4.1.1",
"@vitejs/plugin-vue": "^4.2.3", "@rushstack/eslint-patch": "^1.3.2",
"@vitejs/plugin-vue-jsx": "^3.0.1", "@vitejs/plugin-vue": "^4.2.3",
"@vue/eslint-config-prettier": "^8.0.0", "@vitejs/plugin-vue-jsx": "^3.0.1",
"eslint": "^8.45.0", "@vue/eslint-config-prettier": "^8.0.0",
"eslint-plugin-vue": "^9.15.1", "eslint": "^8.45.0",
"prettier": "^3.0.0", "eslint-plugin-vue": "^9.15.1",
"vite": "^4.4.6" "prettier": "^3.0.0",
} "sass": "^1.66.1",
} "uid": "^2.0.2",
"vite": "^4.4.6"
}
}

37
src/App.vue
Unescape Escape View File

@ -1,9 +1,28 @@
<script setup> <script setup>
</script> </script>
<template> <template>
<RouterView /> <RouterView />
</template> </template>
<style scoped> <style lang="scss">
</style> // None of this works, and at this point I don't really care.
body {
margin: auto;
width: 10%;
padding: 10px;
background-color: #1e6e6a;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
max-width: 1100px;
margin: 0 auto;
}
</style>

93
src/components/AlarmState.vue
Unescape Escape View File

@ -1,44 +1,49 @@
<script> <script>
export default { export default {
name: "AlarmState", name: "AlarmState",
data() { data() {
return { return {
status: "", status: "",
timerId: undefined timerId: undefined
} }
}, },
created() { created() {
// watch the params of the route to fetch the data again // watch the params of the route to fetch the data again
// this.$watch( // this.$watch(
// () => this.$route.params, // () => this.$route.params,
// () => { // () => {
// this.fetchData() // this.fetchData()
// }, // },
// // fetch the data when the view is created and the data is // // fetch the data when the view is created and the data is
// // already being observed // // already being observed
// { immediate: true } // { immediate: true }
// ) // )
this.fetchData(); this.fetchData();
this.timerId = setInterval(this.fetchData.bind(this), 2000); this.timerId = setInterval(this.fetchData.bind(this), 2000);
}, },
methods: { methods: {
async fetchData() { async fetchData() {
const res = await fetch(`${import.meta.env.VITE_BASE_API_URL}/alarm/state`); const res = await fetch(`${import.meta.env.VITE_BASE_API_URL}/alarm/state`);
const data = await res.json(); const data = await res.json();
this.status = data.status; this.status = data.status;
}, },
}, },
beforeDestroy() { beforeDestroy() {
clearInterval(this.timerId) clearInterval(this.timerId)
}, },
} }
</script> </script>
<template> <template>
<div> <div>
Current alarm state: {{ status }} Current alarm state: {{ status }}
</div> <br>
</template> <br>
</div>
<style scoped></style> </template>
<style scoped>
</style>

98
src/components/ChangeState.vue
Unescape Escape View File

@ -1,48 +1,50 @@
<script> <script>
import States from "../states" import States from "../states"
export default { export default {
name: "AlarmState", name: "AlarmState",
data() { data() {
return { return {
status: "", status: "",
timerId: undefined, timerId: undefined,
text: "" text: ""
} }
}, },
created() { created() {
this.fetchData(); this.fetchData();
this.timerId = setInterval(this.fetchData.bind(this), 2000); this.timerId = setInterval(this.fetchData.bind(this), 2000);
}, },
methods: { methods: {
async fetchData() { async fetchData() {
const res = await fetch(`${import.meta.env.VITE_BASE_API_URL}/alarm/state`); const res = await fetch(`${import.meta.env.VITE_BASE_API_URL}/alarm/state`);
const data = await res.json(); const data = await res.json();
this.status = data.status; this.status = data.status;
if (this.status === States.Disarmed) { if (this.status === States.Disarmed) {
this.text = "Arm"; this.text = "Arm";
} else { } else {
this.text = "Disarm"; this.text = "Disarm";
} }
}, },
async buttonPressed() { async buttonPressed() {
const res = await fetch(`${import.meta.env.VITE_BASE_API_URL}/alarm/${this.status === States.Disarmed ? "arm" : "disarm"}`, { const res = await fetch(`${import.meta.env.VITE_BASE_API_URL}/alarm/${this.status === States.Disarmed ? "arm" : "disarm"}`, {
method: "POST" method: "POST"
}); });
const data = await res.json(); const data = await res.json();
this.fetchData(); this.fetchData();
} }
}, },
beforeDestroy() { beforeDestroy() {
clearInterval(this.timerId) clearInterval(this.timerId)
}, },
} }
</script> </script>
<template> <template>
<button @click="buttonPressed"> <button @click="buttonPressed">
{{ text }} Alarm {{ text }} Alarm
</button> </button>
</template> </template>
<style scoped></style> <style scoped>
</style>

18
src/main.js
Unescape Escape View File

@ -1,9 +1,9 @@
import { createApp } from 'vue' import { createApp } from 'vue'
import App from './App.vue' import App from './App.vue'
import router from './router' import router from './router'
const app = createApp(App) const app = createApp(App)
app.use(router) app.use(router)
app.mount('#app') app.mount('#app')

46
src/router/index.js
Unescape Escape View File

@ -1,23 +1,23 @@
import { createRouter, createWebHistory } from 'vue-router' import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue' import HomeView from '../views/HomeView.vue'
const router = createRouter({ const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL), history: createWebHistory(import.meta.env.BASE_URL),
routes: [ routes: [
{ {
path: '/', path: '/',
name: 'home', name: 'home',
component: HomeView component: HomeView
}, },
// { // {
// path: '/about', // path: '/about',
// name: 'about', // name: 'about',
// // route level code-splitting // // route level code-splitting
// // this generates a separate chunk (About.[hash].js) for this route // // this generates a separate chunk (About.[hash].js) for this route
// // which is lazy-loaded when the route is visited. // // which is lazy-loaded when the route is visited.
// component: () => import('../views/AboutView.vue') // component: () => import('../views/AboutView.vue')
// } // }
] ]
}) })
export default router export default router

12
src/states.js
Unescape Escape View File

@ -1,7 +1,7 @@
export default { export default {
Armed: "Armed", Armed: "Armed",
Disarmed: "Disarmed", Disarmed: "Disarmed",
Triggered: "Triggered", Triggered: "Triggered",
Arming: "Arming", Arming: "Arming",
Disarming: "Disarming" Disarming: "Disarming"
}; };

32
src/views/HomeView.vue
Unescape Escape View File

@ -1,15 +1,17 @@
<script setup> <script setup>
import AlarmState from '../components/AlarmState.vue'; import AlarmState from '../components/AlarmState.vue';
import ChangeState from '../components/ChangeState.vue'; import ChangeState from '../components/ChangeState.vue';
</script> </script>
<template> <template>
<div id="Home"> <div id="Home" >
<AlarmState /> <AlarmState />
<ChangeState /> <ChangeState />
</div> </div>
</template> </template>
<style scoped> <style scoped>
</style>
</style>

36
vite.config.js
Unescape Escape View File

@ -1,18 +1,18 @@
import { fileURLToPath, URL } from 'node:url' import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite' import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue' import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx' import vueJsx from '@vitejs/plugin-vue-jsx'
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [ plugins: [
vue(), vue(),
vueJsx(), vueJsx(),
], ],
resolve: { resolve: {
alias: { alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)) '@': fileURLToPath(new URL('./src', import.meta.url))
} }
} }
}) })

Write Preview
Loading…
Cancel
Save