rdpds/sa4cps-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

general dashboard

Browse Source
This commit is contained in:
rafaeldpsilva
2025-09-02 14:19:05 +01:00
commit 0db018f939
41 changed files with 9025 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
.editorconfig Normal file
View File

@@ -0,0 +1,8 @@
[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue,css,scss,sass,less,styl}]
charset = utf-8
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true
end_of_line = lf
max_line_length = 100

1
.gitattributes vendored Normal file
View File

@@ -0,0 +1 @@
* text=auto eol=lf

30
.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

6
.prettierrc.json Normal file
View File

@@ -0,0 +1,6 @@
{
"$schema": "https://json.schemastore.org/prettierrc",
"semi": false,
"singleQuote": true,
"printWidth": 100
}

9
.vscode/extensions.json vendored Normal file
View File

@@ -0,0 +1,9 @@
{
"recommendations": [
"Vue.volar",
"vitest.explorer",
"dbaeumer.vscode-eslint",
"EditorConfig.EditorConfig",
"esbenp.prettier-vscode"
]
}

45
README.md Normal file
View File

@@ -0,0 +1,45 @@
# frontend
This template should help get you started developing with Vue 3 in Vite.
## Recommended IDE Setup
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
## Type Support for `.vue` Imports in TS
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
## Customize configuration
See [Vite Configuration Reference](https://vite.dev/config/).
## Project Setup
```sh
npm install
```
### Compile and Hot-Reload for Development
```sh
npm run dev
```
### Type-Check, Compile and Minify for Production
```sh
npm run build
```
### Run Unit Tests with [Vitest](https://vitest.dev/)
```sh
npm run test:unit
```
### Lint with [ESLint](https://eslint.org/)
```sh
npm run lint
```

4
docker.sh Normal file
View File

@@ -0,0 +1,4 @@
docker build -t rdpds/sa4cps-dashboard .
docker tag rdpds/sa4cps-dashboard rdpds/sa4cps-dashboard:latest
docker tag rdpds/sa4cps-dashboard rdpds/sa4cps-dashboard:v0.1.0
docker push --all-tags rdpds/sa4cps-dashboard

1
env.d.ts vendored Normal file
View File

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

28
eslint.config.ts Normal file
View File

@@ -0,0 +1,28 @@
import { globalIgnores } from 'eslint/config'
import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
import pluginVue from 'eslint-plugin-vue'
import pluginVitest from '@vitest/eslint-plugin'
import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
// To allow more languages other than `ts` in `.vue` files, uncomment the following lines:
// import { configureVueProject } from '@vue/eslint-config-typescript'
// configureVueProject({ scriptLangs: ['ts', 'tsx'] })
// More info at https://github.com/vuejs/eslint-config-typescript/#advanced-setup
export default defineConfigWithVueTs(
{
name: 'app/files-to-lint',
files: ['**/*.{ts,mts,tsx,vue}'],
},
globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']),
pluginVue.configs['flat/essential'],
vueTsConfigs.recommended,
{
...pluginVitest.configs.recommended,
files: ['src/**/__tests__/*'],
},
skipFormatting,
)

17
index.html Normal file
View File

@@ -0,0 +1,17 @@
<!doctype html>
<html lang="">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="icon"
href="https://www.gecad.isep.ipp.pt/wp-content/uploads/2023/06/cropped-GECAD_LOGO_ICON-192x192.png"
/>
<link rel="stylesheet" href="/src/assets/scss/base.scss">
<title>Sa4CPS Real-time Monitoring</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

7934
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

59
package.json Normal file
View File

@@ -0,0 +1,59 @@
{
"name": "frontend",
"version": "0.0.0",
"private": true,
"type": "module",
"engines": {
"node": "^20.19.0 || >=22.12.0"
},
"scripts": {
"dev": "vite",
"dev-server": "vite --host",
"build": "run-p type-check \"build-only {@}\" --",
"preview": "vite preview",
"test:unit": "vitest",
"build-only": "vite build",
"type-check": "vue-tsc --build",
"lint": "eslint . --fix",
"format": "prettier --write src/"
},
"dependencies": {
"@tailwindcss/postcss": "^4.1.12",
"@tailwindcss/vite": "^4.1.12",
"apexcharts": "^5.3.4",
"chart.js": "^4.5.0",
"echarts": "^5.6.0",
"pinia": "^3.0.3",
"vue": "^3.5.18",
"vue-chartjs": "^5.3.2",
"vue-echarts": "^7.0.3",
"vue-router": "^4.5.1",
"vue3-apexcharts": "^1.8.0"
},
"devDependencies": {
"@tsconfig/node22": "^22.0.2",
"@types/jsdom": "^21.1.7",
"@types/node": "^22.16.5",
"@vitejs/plugin-vue": "^6.0.1",
"@vitest/eslint-plugin": "^1.3.4",
"@vue/eslint-config-prettier": "^10.2.0",
"@vue/eslint-config-typescript": "^14.6.0",
"@vue/test-utils": "^2.4.6",
"@vue/tsconfig": "^0.7.0",
"autoprefixer": "^10.4.21",
"eslint": "^9.31.0",
"eslint-plugin-vue": "~10.3.0",
"jiti": "^2.4.2",
"jsdom": "^26.1.0",
"npm-run-all2": "^8.0.4",
"postcss": "^8.5.6",
"prettier": "3.6.2",
"sass": "^1.91.0",
"tailwindcss": "^4.1.12",
"typescript": "~5.8.0",
"vite": "^7.0.6",
"vite-plugin-vue-devtools": "^8.0.0",
"vitest": "^3.2.4",
"vue-tsc": "^3.0.4"
}
}

6
postcss.config.js Normal file
View File

@@ -0,0 +1,6 @@
export default {
plugins: {
'@tailwindcss/postcss': {},
autoprefixer: {},
},
}

BIN
public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

25
src/App.vue Normal file
View File

@@ -0,0 +1,25 @@
<template>
<div class="container mx-auto py-4 px-3">
<AppHeader />
<main class="flex-grow pb-20 md:pb-0">
<div class="container">
<div class="flex justify-center">
<div class="w-full">
<RouterView />
</div>
</div>
</div>
</main>
<bottom-nav />
<!-- <app-footer /> -->
</div>
</template>
<script setup lang="ts">
import AppHeader from './components/common/AppHeader.vue'
// import AppFooter from './components/common/AppFooter.vue'
import BottomNav from './components/common/BottomNav.vue'
import { RouterView } from 'vue-router'
</script>

12
src/assets/scss/_cards.scss Normal file
View File

@@ -0,0 +1,12 @@
/* Custom card styles for components that might still use these classes */
.card {
@apply rounded-2xl border-transparent bg-white h-full;
}
.card-body {
@apply h-full;
}
.card-text {
@apply pt-[25%] font-bold text-lg;
}

13
src/assets/scss/base.scss Normal file
View File

@@ -0,0 +1,13 @@
//
// Custom styles
//
@use './_cards.scss';
@use 'tailwindcss';
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
@apply p-6 bg-gray-100;
}

111
src/components/cards/GraphMetricCard.vue Normal file
View File

@@ -0,0 +1,111 @@
<template>
<div class="bg-white rounded-2xl shadow-sm flex flex-col aspect-square p-4">
<h6 class="text-sm font-bold text-gray-500 mb-2">{{ title }}</h6>
<div class="flex-grow flex items-center">
<p class="text-gray-900 font-bold text-2xl">
{{ content }} <span class="text-sm text-gray-500">{{ details }}</span>
</p>
</div>
<div class="h-16 mt-2">
<v-chart class="w-full h-full" :option="chartOption" :autoresize="true" />
</div>
</div>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart } from 'echarts/charts'
import { GridComponent } from 'echarts/components'
import * as echarts from 'echarts/core'
use([LineChart, CanvasRenderer, GridComponent])
const props = defineProps<{
title: string
content: string | number
details?: string | number
trendData?: number[]
trendDirection?: 'up' | 'down' | 'neutral'
}>()
// Default trend data if none provided
const defaultTrendData = [20, 25, 18, 30, 28, 35, 25, 40]
const trendData = computed(() => props.trendData || defaultTrendData)
const trendDir = computed(() => {
const dir = trendData.value[trendData.value.length - 1] - trendData.value[0]
console.log(dir)
if (dir > 0) return 'up'
if (dir < 0) return 'down'
return 'neutral'
})
// Determine trend color based on direction
const trendColor = computed(() => {
switch (trendDir.value) {
case 'up':
return '#22c55e' // green
case 'down':
return '#ef4444' // red
default:
return '#3b82f6' // blue
}
})
const areaColor = computed(() => {
switch (trendDir.value) {
case 'up':
return '#7ee6a4' // green
case 'down':
return '#f07373' // red
default:
return '#619dff' // blue
}
})
// ECharts configuration for mini trend chart
const chartOption = computed(() => ({
textStyle: {
fontFamily:
'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
},
grid: {
left: 0,
right: 0,
top: 0,
bottom: 0,
},
xAxis: {
type: 'category',
show: false,
data: trendData.value.map((_, index) => index),
},
yAxis: {
type: 'value',
show: false,
},
series: [
{
data: trendData.value,
type: 'line',
smooth: true,
showSymbol: false,
lineStyle: {
color: trendColor.value,
width: 2,
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
{
offset: 0,
color: areaColor.value,
},
{
offset: 1,
color: 'rgb(255, 255, 255)',
},
]),
},
animation: false, // Disable animation for better performance in small charts
},
],
}))
</script>

18
src/components/cards/MetricCard.vue Normal file
View File

@@ -0,0 +1,18 @@
<template>
<div class="bg-white rounded-2xl shadow-sm flex flex-col justify-between aspect-square p-4">
<h6 class="text-sm font-bold text-gray-500">{{ title }}</h6>
<div class="flex-grow flex items-center justify-start">
<p class="text-gray-900 font-bold text-2xl">
{{ content }} <span class="text-sm text-gray-500">{{ details }}</span>
</p>
</div>
</div>
</template>
<script setup lang="ts">
defineProps<{
title: string
content: string | number
details?: string | number
}>()
</script>

79
src/components/cards/RealtimeEnergyChartCard.vue Normal file
View File

@@ -0,0 +1,79 @@
<template>
<div class="bg-white rounded-2xl shadow-sm flex flex-col h-full min-h-[300px]">
<div class="p-4 h-full">
<h6 class="text-sm font-bold text-gray-500 mb-2">{{ title }}</h6>
<v-chart class="h-64 w-full" :option="option" autoresize />
</div>
</div>
</template>
<script setup lang="ts">
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart } from 'echarts/charts'
import {
TitleComponent,
TooltipComponent,
LegendComponent,
GridComponent,
} from 'echarts/components'
import { computed } from 'vue'
import { useEnergyStore } from '@/stores/energy'
use([TitleComponent, TooltipComponent, LegendComponent, LineChart, CanvasRenderer, GridComponent])
defineProps<{
title: string
}>()
const energyStore = useEnergyStore()
const option = computed(() => ({
grid: {
left: 35,
right: 30,
top: 40,
bottom: 40,
},
textStyle: {
fontFamily:
'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
},
tooltip: {
trigger: 'axis',
textStyle: {
fontFamily:
'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
},
},
xAxis: {
type: 'category',
data: energyStore.timeSeriesData.labels,
axisLabel: {
fontFamily:
'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
},
},
yAxis: {
type: 'value',
axisLabel: {
fontFamily:
'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
},
},
series: [
{
data: energyStore.timeSeriesData.datasets[0].data,
type: 'line',
showSymbol: false,
smooth: true,
itemStyle: {
color: '#3b82f6'
},
lineStyle: {
color: '#3b82f6'
}
},
],
}))
</script>

95
src/components/cards/SensorConsumptionTable.vue Normal file
View File

@@ -0,0 +1,95 @@
<template>
<div class="bg-white rounded-2xl shadow-sm p-4">
<h6 class="text-sm font-bold text-gray-500 mb-4">Sensor Consumption</h6>
<div class="overflow-x-auto">
<table class="min-w-full">
<thead>
<tr class="border-b border-gray-200">
<th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider py-3">
Sensor ID
</th>
<th class="text-right text-xs font-medium text-gray-500 uppercase tracking-wider py-3">
Current
</th>
<th class="text-right text-xs font-medium text-gray-500 uppercase tracking-wider py-3">
Total
</th>
<th class="text-right text-xs font-medium text-gray-500 uppercase tracking-wider py-3">
Average
</th>
<th class="text-right text-xs font-medium text-gray-500 uppercase tracking-wider py-3">
Last Updated
</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-100">
<tr v-if="sensorList.length === 0" class="py-4">
<td colspan="5" class="text-center text-gray-500 py-8">
No sensor data available. Waiting for WebSocket connection...
</td>
</tr>
<tr v-for="sensor in sensorList" :key="sensor.sensorId" class="hover:bg-gray-50">
<td class="py-3 text-sm font-medium text-gray-900">
{{ sensor.sensorId }}
</td>
<td class="py-3 text-sm text-gray-600 text-right">
{{ sensor.latestValue.toFixed(2) }} {{ sensor.unit }}
</td>
<td class="py-3 text-sm text-gray-600 text-right">
{{ sensor.totalConsumption.toFixed(2) }} {{ sensor.unit }}
</td>
<td class="py-3 text-sm text-gray-600 text-right">
{{ sensor.averageConsumption.toFixed(2) }} {{ sensor.unit }}
</td>
<td class="py-3 text-sm text-gray-500 text-right">
{{ formatTime(sensor.lastUpdated) }}
</td>
</tr>
</tbody>
</table>
</div>
<!-- Connection Status Indicator -->
<div class="mt-4 flex items-center justify-between text-xs text-gray-500">
<div class="flex items-center gap-2">
<div
class="w-2 h-2 rounded-full"
:class="energyStore.isConnected ? 'bg-green-500' : 'bg-red-500'"
></div>
<span>{{ energyStore.isConnected ? 'Connected' : 'Disconnected' }}</span>
</div>
<div>
{{ sensorList.length }} sensor{{ sensorList.length !== 1 ? 's' : '' }} active
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { useEnergyStore } from '@/stores/energy'
const energyStore = useEnergyStore()
const sensorList = computed(() => {
return Array.from(energyStore.sensorsData.values()).sort((a, b) =>
a.sensorId.localeCompare(b.sensorId)
)
})
const formatTime = (timestamp: number) => {
const date = new Date(timestamp * 1000)
const now = new Date()
const diffMs = now.getTime() - date.getTime()
const diffSecs = Math.floor(diffMs / 1000)
if (diffSecs < 60) {
return `${diffSecs}s ago`
} else if (diffSecs < 3600) {
return `${Math.floor(diffSecs / 60)}m ago`
} else {
return date.toLocaleTimeString()
}
}
</script>

31
src/components/common/AppFooter.vue Normal file
View File

@@ -0,0 +1,31 @@
<template>
<footer class="py-3 footer">
<div class="container-fluid">
<div class="row align-items-center justify-content-lg-between">
<div class="mb-4 col-lg-6 mb-lg-0">
<div class="text-sm text-center copyright text-muted text-lg-start">
©
{{ new Date().getFullYear() }}, made with <i class="fa fa-heart"></i> by
<a href="https://www.gecad.isep.ipp.pt" class="font-weight-bold" target="_blank"
>GECAD</a
>
</div>
</div>
<div class="col-lg-6">
<ul class="nav nav-footer justify-content-center justify-content-lg-end">
<li class="nav-item">
<a href="https://www.gecad.isep.ipp.pt" class="nav-link text-muted" target="_blank"
>GECAD</a
>
</li>
<li class="nav-item">
<a href="https://sa4cps.pt" class="nav-link text-muted" target="_blank">About Us</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
</template>
<script setup lang="ts"></script>

5
src/components/common/AppHeader.vue Normal file
View File

@@ -0,0 +1,5 @@
<template>
<header class="flex justify-center items-center pb-3 mb-5">
<h1 class="text-4xl font-bold">Sa4CPS</h1>
</header>
</template>

50
src/components/common/BottomNav.vue Normal file
View File

@@ -0,0 +1,50 @@
<template>
<div class="fixed bottom-0 left-0 right-0 h-16 group md:h-16">
<!-- Invisible hover trigger area for desktop -->
<div class="absolute inset-0 hidden md:block"></div>
<!-- Navigation bar -->
<nav class="absolute bottom-0 left-0 right-0 transform-none md:transform md:translate-y-full md:group-hover:translate-y-0 md:transition-transform md:duration-300 md:ease-in-out bg-white md:bg-transparent border-t md:border-t-0 border-gray-200 md:shadow-none shadow-lg">
<div class="flex justify-center md:pb-4 pb-2">
<ul class="flex space-x-8 md:bg-white md:rounded-lg md:shadow-md px-6 py-3 w-full md:w-auto justify-around md:justify-center">
<li>
<a class="flex flex-col items-center text-blue-600 font-medium" aria-current="page" href="#">
<svg class="w-6 h-6 mb-1" fill="currentColor" viewBox="0 0 24 24">
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
</svg>
<span class="text-xs">Home</span>
</a>
</li>
<li>
<a class="flex flex-col items-center text-gray-600 hover:text-blue-600" href="#">
<svg class="w-6 h-6 mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
</svg>
<span class="text-xs">Analytics</span>
</a>
</li>
<li>
<a class="flex flex-col items-center text-gray-600 hover:text-blue-600" href="#">
<svg class="w-6 h-6 mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
</svg>
<span class="text-xs">Users</span>
</a>
</li>
<li>
<a class="flex flex-col items-center text-gray-400 cursor-not-allowed" aria-disabled="true">
<svg class="w-6 h-6 mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
</svg>
<span class="text-xs">Settings</span>
</a>
</li>
</ul>
</div>
</nav>
</div>
</template>
<script setup lang="ts">
</script>

7
src/components/icons/IconCommunity.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
<path
d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
/>
</svg>
</template>

7
src/components/icons/IconDocumentation.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
<path
d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
/>
</svg>
</template>

7
src/components/icons/IconEcosystem.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
<path
d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
/>
</svg>
</template>

7
src/components/icons/IconSupport.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
<path
d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
/>
</svg>
</template>

19
src/components/icons/IconTooling.vue Normal file
View File

@@ -0,0 +1,19 @@
<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true"
role="img"
class="iconify iconify--mdi"
width="24"
height="24"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 24 24"
>
<path
d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
fill="currentColor"
></path>
</svg>
</template>

16
src/main.ts Normal file
View File

@@ -0,0 +1,16 @@
import './assets/scss/base.scss'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import ECharts from 'vue-echarts'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.component('v-chart', ECharts)
app.mount('#app')

15
src/router/index.ts Normal file
View File

@@ -0,0 +1,15 @@
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: HomeView,
},
],
})
export default router

12
src/stores/counter.ts 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 }
})

165
src/stores/energy.ts Normal file
View File

@@ -0,0 +1,165 @@
import { defineStore } from 'pinia'
import { ref, reactive } from 'vue'
const MAX_DATA_POINTS = 100 // Keep the last 100 data points for the chart
interface SensorReading {
sensorId: string
room: string
timestamp: number
energy: {
value: number
unit: string
}
co2: {
value: number
unit: string
}
temperature?: {
value: number
unit: string
}
}
interface RoomMetrics {
room: string
sensors: string[]
energy: {
current: number
total: number
average: number
unit: string
}
co2: {
current: number
average: number
max: number
status: 'good' | 'moderate' | 'poor' | 'critical'
unit: string
}
occupancyEstimate: 'low' | 'medium' | 'high'
lastUpdated: number
}
interface LegacyEnergyData {
sensorId: string
timestamp: number
value: number
unit: string
}
export const useEnergyStore = defineStore('energy', () => {
// State
const isConnected = ref(false)
const latestMessage = ref<LegacyEnergyData | null>(null)
const timeSeriesData = reactive<{
labels: string[]
datasets: { data: number[] }[]
}>({
labels: [],
datasets: [{ data: [] }],
})
const sensorsData = reactive<Map<string, any>>(new Map()) // Legacy support
const roomsData = reactive<Map<string, RoomMetrics>>(new Map())
const latestReadings = reactive<Map<string, SensorReading>>(new Map())
let socket: WebSocket | null = null
const newDataBuffer: (LegacyEnergyData | SensorReading)[] = []
// Actions
function connect(url: string) {
if (isConnected.value) {
console.log('Already connected.')
return
}
console.log(`Connecting to WebSocket at ${url}`)
socket = new WebSocket(url)
socket.onopen = () => {
console.log('WebSocket connection established.')
isConnected.value = true
}
socket.onmessage = (event) => {
try {
const data = JSON.parse(event.data)
newDataBuffer.push(data)
} catch (error) {
console.error('Error parsing incoming data:', error)
}
}
socket.onclose = () => {
console.log('WebSocket connection closed.')
isConnected.value = false
socket = null
}
socket.onerror = (error) => {
console.error('WebSocket error:', error)
isConnected.value = false
socket = null
}
// Process the buffer at intervals
setInterval(() => {
if (newDataBuffer.length > 0) {
const data = newDataBuffer.shift() // Get the oldest data point
if (data) {
latestMessage.value = data
// Update sensor-specific data
updateSensorData(data)
// Update time series for chart (aggregate all sensors)
const newLabel = new Date(data.timestamp * 1000).toLocaleTimeString()
timeSeriesData.labels.push(newLabel)
timeSeriesData.datasets[0].data.push(data.value)
if (timeSeriesData.labels.length > MAX_DATA_POINTS) {
timeSeriesData.labels.shift()
timeSeriesData.datasets[0].data.shift()
}
}
}
}, 500) // Process every 500ms
}
function disconnect() {
if (socket) {
socket.close()
}
}
function updateSensorData(data: EnergyData) {
const existingSensor = sensorsData.get(data.sensorId)
if (existingSensor) {
// Update existing sensor
const newTotal = existingSensor.totalConsumption + data.value
const dataPoints = Math.floor((data.timestamp - existingSensor.lastUpdated) / 60) + 1 // Rough estimate
sensorsData.set(data.sensorId, {
...existingSensor,
latestValue: data.value,
totalConsumption: newTotal,
averageConsumption: newTotal / dataPoints,
lastUpdated: data.timestamp
})
} else {
// Create new sensor entry
sensorsData.set(data.sensorId, {
sensorId: data.sensorId,
latestValue: data.value,
totalConsumption: data.value,
averageConsumption: data.value,
lastUpdated: data.timestamp,
unit: data.unit
})
}
}
return { isConnected, latestMessage, timeSeriesData, sensorsData, connect, disconnect }
})

86
src/views/HomeView.vue Normal file
View File

@@ -0,0 +1,86 @@
<template>
<div class="space-y-6">
<!-- Filter Controls Row -->
<!--div class="flex flex-col sm:flex-row gap-4 mb-6">
<select class="px-4 py-2 border border-gray-200 rounded-lg bg-white">
<option>Timeframe: All-time</option>
</select>
<select class="px-4 py-2 border border-gray-200 rounded-lg bg-white">
<option>People: All</option>
</select>
<select class="px-4 py-2 border border-gray-200 rounded-lg bg-white">
<option>Topic: All</option>
</select>
</div-->
<!-- Top Metric Cards Row -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 min-h-96">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-4 gap-y-3">
<MetricCard title="Current Energy" :content="currentEnergyValue" details="kWh" />
<MetricCard title="Connection Status" :content="connectionStatus" />
<MetricCard title="Average Usage" :content="averageEnergyUsage" details="kWh" />
<GraphMetricCard
title="Real-time Energy"
:content="currentEnergyValue"
details="kWh"
:trend-data="energyStore.timeSeriesData.datasets[0].data.slice(-8)"
trend-direction="neutral"
/>
<GraphMetricCard
title="Current Knowledge"
content="86%"
:trend-data="[203, 78, 80, 82, 142, 85, 85, 86]"
trend-direction="down"
/>
<GraphMetricCard
title="Knowledge Gain"
content="+34%"
:trend-data="[20, 25, 28, 30, 32, 33, 34, 34]"
trend-direction="neutral"
/>
</div>
<div>
<RealtimeEnergyChartCard title="Month" />
</div>
</div>
<!-- Charts and Knowledge Cards Row -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
<SensorConsumptionTable />
</div>
</div>
</template>
<script setup lang="ts">
import RealtimeEnergyChartCard from '@/components/cards/RealtimeEnergyChartCard.vue'
import MetricCard from '@/components/cards/MetricCard.vue'
import GraphMetricCard from '@/components/cards/GraphMetricCard.vue'
import SensorConsumptionTable from '@/components/cards/SensorConsumptionTable.vue'
import { useEnergyStore } from '@/stores/energy'
import { computed, onMounted, onUnmounted } from 'vue'
const energyStore = useEnergyStore()
const currentEnergyValue = computed(() => {
return energyStore.latestMessage?.value?.toFixed(2) || '0.00'
})
const connectionStatus = computed(() => {
return energyStore.isConnected ? 'Connected' : 'Disconnected'
})
const averageEnergyUsage = computed(() => {
const data = energyStore.timeSeriesData.datasets[0].data
if (data.length === 0) return '0.00'
const sum = data.reduce((acc, val) => acc + val, 0)
return (sum / data.length).toFixed(2)
})
onMounted(() => {
energyStore.connect('ws://192.168.1.73:8000/ws')
})
onUnmounted(() => {
energyStore.disconnect()
})
</script>

11
tailwind.config.js Normal file
View File

@@ -0,0 +1,11 @@
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}

12
tsconfig.app.json Normal file
View File

@@ -0,0 +1,12 @@
{
"extends": "@vue/tsconfig/tsconfig.dom.json",
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
"exclude": ["src/**/__tests__/*"],
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"paths": {
"@/*": ["./src/*"]
}
}
}

14
tsconfig.json Normal file
View File

@@ -0,0 +1,14 @@
{
"files": [],
"references": [
{
"path": "./tsconfig.node.json"
},
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.vitest.json"
}
]
}

19
tsconfig.node.json Normal file
View File

@@ -0,0 +1,19 @@
{
"extends": "@tsconfig/node22/tsconfig.json",
"include": [
"vite.config.*",
"vitest.config.*",
"cypress.config.*",
"nightwatch.conf.*",
"playwright.config.*",
"eslint.config.*"
],
"compilerOptions": {
"noEmit": true,
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"module": "ESNext",
"moduleResolution": "Bundler",
"types": ["node"]
}
}

11
tsconfig.vitest.json Normal file
View File

@@ -0,0 +1,11 @@
{
"extends": "./tsconfig.app.json",
"include": ["src/**/__tests__/*", "env.d.ts"],
"exclude": [],
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.vitest.tsbuildinfo",
"lib": [],
"types": ["node", "jsdom"]
}
}

16
vite.config.ts Normal file
View File

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

14
vitest.config.ts Normal file
View File

@@ -0,0 +1,14 @@
import { fileURLToPath } from 'node:url'
import { mergeConfig, defineConfig, configDefaults } from 'vitest/config'
import viteConfig from './vite.config'
export default mergeConfig(
viteConfig,
defineConfig({
test: {
environment: 'jsdom',
exclude: [...configDefaults.exclude, 'e2e/**'],
root: fileURLToPath(new URL('./', import.meta.url)),
},
}),
)