Metrik/vc-stats
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages 1 Wiki Activity Actions

🔨 refactor: Switch formatter to prettier
All checks were successful
/ build-bot (push) Successful in 23s
Details

Browse source
This commit is contained in:
Marsn3 2025-03-28 06:07:54 +01:00
parent f250f86fac
commit 71b029b073
10 changed files with 169 additions and 118 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/frontend/eslint.config.ts
View file

@ -1,7 +1,7 @@
import pluginVue from 'eslint-plugin-vue'
import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
import oxlint from 'eslint-plugin-oxlint'
import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
import pluginVue from "eslint-plugin-vue";
import { defineConfigWithVueTs, vueTsConfigs } from "@vue/eslint-config-typescript";
import oxlint from "eslint-plugin-oxlint";
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'
@ -10,17 +10,17 @@ import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
export default defineConfigWithVueTs(
{
name: 'app/files-to-lint',
files: ['**/*.{ts,mts,tsx,vue}'],
name: "app/files-to-lint",
files: ["**/*.{ts,mts,tsx,vue}"],
},
{
name: 'app/files-to-ignore',
ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**'],
name: "app/files-to-ignore",
ignores: ["**/dist/**", "**/dist-ssr/**", "**/coverage/**"],
},
pluginVue.configs['flat/essential'],
pluginVue.configs["flat/essential"],
vueTsConfigs.recommended,
oxlint.configs['flat/recommended'],
oxlint.configs["flat/recommended"],
skipFormatting,
)
);

8
src/frontend/index.html
View file

@ -1,9 +1,9 @@
<!DOCTYPE html>
<!doctype html>
<html lang="">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>

10
src/frontend/package.json
View file

@ -20,6 +20,11 @@
"tailwindcss": "^4.0.9",
"vue": "^3.5.13"
},
"prettier": {
"plugins": [
"tailwindcss"
]
},
"devDependencies": {
"@tsconfig/node22": "^22.0.0",
"@types/node": "^22.10.7",
@ -28,13 +33,14 @@
"@vue/eslint-config-typescript": "^14.3.0",
"@vue/tsconfig": "^0.7.0",
"daisyui": "^5.0.6",
"eslint": "^9.18.0",
"eslint": "^9.20.1",
"eslint-plugin-oxlint": "^0.15.6",
"eslint-plugin-vue": "^9.32.0",
"jiti": "^2.4.2",
"npm-run-all2": "^7.0.2",
"oxlint": "^0.15.6",
"prettier": "^3.4.2",
"prettier": "^3.5.0",
"prettier-plugin-tailwindcss": "^0.6.11",
"typescript": "~5.7.3",
"vite": "^6.0.11",
"vite-plugin-vue-devtools": "^7.7.0",

66
src/frontend/pnpm-lock.yaml generated
View file

@ -43,7 +43,7 @@ importers:
specifier: ^5.0.6
version: 5.0.6
eslint:
specifier: ^9.18.0
specifier: ^9.20.1
version: 9.20.1(jiti@2.4.2)
eslint-plugin-oxlint:
specifier: ^0.15.6
@ -61,8 +61,11 @@ importers:
specifier: ^0.15.6
version: 0.15.10
prettier:
specifier: ^3.4.2
specifier: ^3.5.0
version: 3.5.0
prettier-plugin-tailwindcss:
specifier: ^0.6.11
version: 0.6.11(prettier@3.5.0)
typescript:
specifier: ~5.7.3
version: 5.7.3
@ -1555,6 +1558,61 @@ packages:
resolution: {integrity: sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==}
engines: {node: '>=6.0.0'}
prettier-plugin-tailwindcss@0.6.11:
resolution: {integrity: sha512-YxaYSIvZPAqhrrEpRtonnrXdghZg1irNg4qrjboCXrpybLWVs55cW2N3juhspVJiO0JBvYJT8SYsJpc8OQSnsA==}
engines: {node: '>=14.21.3'}
peerDependencies:
'@ianvs/prettier-plugin-sort-imports': '*'
'@prettier/plugin-pug': '*'
'@shopify/prettier-plugin-liquid': '*'
'@trivago/prettier-plugin-sort-imports': '*'
'@zackad/prettier-plugin-twig': '*'
prettier: ^3.0
prettier-plugin-astro: '*'
prettier-plugin-css-order: '*'
prettier-plugin-import-sort: '*'
prettier-plugin-jsdoc: '*'
prettier-plugin-marko: '*'
prettier-plugin-multiline-arrays: '*'
prettier-plugin-organize-attributes: '*'
prettier-plugin-organize-imports: '*'
prettier-plugin-sort-imports: '*'
prettier-plugin-style-order: '*'
prettier-plugin-svelte: '*'
peerDependenciesMeta:
'@ianvs/prettier-plugin-sort-imports':
optional: true
'@prettier/plugin-pug':
optional: true
'@shopify/prettier-plugin-liquid':
optional: true
'@trivago/prettier-plugin-sort-imports':
optional: true
'@zackad/prettier-plugin-twig':
optional: true
prettier-plugin-astro:
optional: true
prettier-plugin-css-order:
optional: true
prettier-plugin-import-sort:
optional: true
prettier-plugin-jsdoc:
optional: true
prettier-plugin-marko:
optional: true
prettier-plugin-multiline-arrays:
optional: true
prettier-plugin-organize-attributes:
optional: true
prettier-plugin-organize-imports:
optional: true
prettier-plugin-sort-imports:
optional: true
prettier-plugin-style-order:
optional: true
prettier-plugin-svelte:
optional: true
prettier@3.5.0:
resolution: {integrity: sha512-quyMrVt6svPS7CjQ9gKb3GLEX/rl3BCL2oa/QkNcXv4YNVBC9olt3s+H7ukto06q7B1Qz46PbrKLO34PR6vXcA==}
engines: {node: '>=14'}
@ -3265,6 +3323,10 @@ snapshots:
dependencies:
fast-diff: 1.3.0
prettier-plugin-tailwindcss@0.6.11(prettier@3.5.0):
dependencies:
prettier: 3.5.0
prettier@3.5.0: {}
pretty-ms@9.2.0:

44
src/frontend/src/App.vue
View file

@ -1,23 +1,21 @@
<script setup lang="ts">
import { ref, watchEffect, watch } from 'vue';
import { ref, watchEffect, watch } from "vue";
import PocketBase from "pocketbase";
import { guilds, type TypedPocketBase } from './types/global.ts';
import "./assets/main.css"
import Stats from './components/stats.vue';
import { guilds, type TypedPocketBase } from "./types/global.ts";
import "./assets/main.css";
import Stats from "./components/stats.vue";
function calculateUserTimes(response, selectedEvent) {
const userEvents = {};
const userTimes = {}; // Changed to object to store total time per user
// 1. Group events by user ID
response.forEach(item => {
response.forEach((item) => {
const userId = item.member.id;
if (!userEvents[userId]) {
userEvents[userId] = [];
}
userEvents[userId].push(item);
}
);
});
// 2. Calculate time differences for each user
for (const userId in userEvents) {
@ -32,7 +30,11 @@ function calculateUserTimes(response, selectedEvent) {
// Find the next 'leave' event for the same user and channel
for (let j = i + 1; j < events.length; j++) {
// if same event or leave event
if (events[j].event === selectedEvent[1] && events[j].channel.id === events[i].channel.id || events[j].event === "leave" && events[j].channel.id === events[i].channel.id) {
if (
(events[j].event === selectedEvent[1] &&
events[j].channel.id === events[i].channel.id) ||
(events[j].event === "leave" && events[j].channel.id === events[i].channel.id)
) {
// if (events[j].event === selectedEvent[1] && events[j].channel.id === events[i].channel.id) {
const joinTime = new Date(events[i].created).getTime();
const leaveTime = new Date(events[j].created).getTime();
@ -50,7 +52,7 @@ function calculateUserTimes(response, selectedEvent) {
userTimes[userId] = {
userId: userId,
userName: events[0].member.name, // Assuming all events have the same username
totalTimeMs: totalTimeMs
totalTimeMs: totalTimeMs,
};
}
const userTimesArray = Object.values(userTimes);
@ -59,25 +61,21 @@ function calculateUserTimes(response, selectedEvent) {
return userTimesArray;
}
const pb = new PocketBase("https://api.m3.fyi") as TypedPocketBase;
const events = ref([])
const userTimes = ref([])
const selectedEvent = ref([])
const guild = ref("756605475960914200")
const events = ref([]);
const userTimes = ref([]);
const selectedEvent = ref([]);
const guild = ref("756605475960914200");
watch(selectedEvent, async () => {
events.value = await pb.collection("vc_stats").getFullList({
filter: pb.filter(`guild.id ~ ${guild.value}`)
})
filter: pb.filter(`guild.id ~ ${guild.value}`),
});
let processedData = calculateUserTimes(events!.value, selectedEvent.value);
userTimes.value = processedData;
})
});
</script>
<template>
<main>
<select class="select" v-model="selectedEvent">
<option :value="['deafen', 'undeafen']">Deafen</option>
@ -89,9 +87,7 @@ watch(selectedEvent, async () => {
<!-- </div> -->
<div v-for="timeData in userTimes" :key="timeData.userid">
<p>
User: {{ timeData.userName }} ({{ timeData.userId }})
</p>
<p>User: {{ timeData.userName }} ({{ timeData.userId }})</p>
<p>Time in Channel: {{ timeData.totalTimeMs / 1000 / 60 / 60 }} hours</p>
</div>
</main>

4
src/frontend/src/components/stats.vue
View file

@ -1,9 +1,9 @@
<script setup lang="ts">
const props = defineProps({ event: Object })
const props = defineProps({ event: Object });
</script>
<template>
<div class="flex flex-row p-5">
<img class="w-10" :src=event!.member.avatar>
<img class="w-10" :src="event!.member.avatar" />
<p class="mr-3">
{{ event!.member.name }}
</p>

8
src/frontend/src/main.ts
View file

@ -1,6 +1,6 @@
import './assets/main.css'
import "./assets/main.css";
import { createApp } from 'vue'
import App from './App.vue'
import { createApp } from "vue";
import App from "./App.vue";
createApp(App).mount('#app')
createApp(App).mount("#app");

84
src/frontend/src/types/global.ts
View file

@ -2,32 +2,32 @@
* This file was @generated using pocketbase-typegen
*/
import type PocketBase from 'pocketbase'
import type { RecordService } from 'pocketbase'
import type PocketBase from "pocketbase";
import type { RecordService } from "pocketbase";
export enum Collections {
VcStats = "vc_stats",
}
// Alias types for improved usability
export type IsoDateString = string
export type RecordIdString = string
export type HTMLString = string
export type IsoDateString = string;
export type RecordIdString = string;
export type HTMLString = string;
// System fields
export type BaseSystemFields<T = never> = {
id: RecordIdString
collectionId: string
collectionName: Collections
expand?: T
}
id: RecordIdString;
collectionId: string;
collectionName: Collections;
expand?: T;
};
export type AuthSystemFields<T = never> = {
email: string
emailVisibility: boolean
username: string
verified: boolean
} & BaseSystemFields<T>
email: string;
emailVisibility: boolean;
username: string;
verified: boolean;
} & BaseSystemFields<T>;
// Record types for each collection
@ -42,49 +42,49 @@ export enum VcStatsEventOptions {
}
export enum guilds {
"kaffeeklatsch" = "756605475960914200",
"acns" = "1045094089198145500"
"acns" = "1045094089198145500",
}
export type channel = {
id: string
name: string
}
id: string;
name: string;
};
export type guild = {
icon: string
id: string
name: guilds
}
icon: string;
id: string;
name: guilds;
};
export type member = {
avatar: string
id: string
name: string
}
avatar: string;
id: string;
name: string;
};
export type VcStatsRecord = {
channel?: channel
created?: IsoDateString
event: VcStatsEventOptions
guild?: guild
id: string
member?: member
updated?: IsoDateString
}
channel?: channel;
created?: IsoDateString;
event: VcStatsEventOptions;
guild?: guild;
id: string;
member?: member;
updated?: IsoDateString;
};
// Response types include system fields and match responses from the PocketBase API
export type VcStatsResponse = Required<VcStatsRecord> & BaseSystemFields<Texpand>
export type VcStatsResponse = Required<VcStatsRecord> & BaseSystemFields<Texpand>;
// Types containing all Records and Responses, useful for creating typing helper functions
export type CollectionRecords = {
vc_stats: VcStatsRecord
}
vc_stats: VcStatsRecord;
};
export type CollectionResponses = {
vc_stats: VcStatsResponse
}
vc_stats: VcStatsResponse;
};
// Type for usage with type asserted PocketBase instance
// https://github.com/pocketbase/js-sdk#specify-typescript-definitions
export type TypedPocketBase = PocketBase & {
collection(idOrName: 'vc_stats'): RecordService<VcStatsResponse>
}
collection(idOrName: "vc_stats"): RecordService<VcStatsResponse>;
};
export {};

15
src/frontend/tsconfig.app.json
View file

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

20
src/frontend/vite.config.ts
View file

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