From 5211e876f6ce8508f04496ecd1d75b137473c8f0 Mon Sep 17 00:00:00 2001 From: webfussel Date: Thu, 17 Jul 2025 19:07:51 +0200 Subject: [PATCH] add: history WIP Work in Progress of History, smaller design fixes --- src/components/HistoryItem.vue | 65 +++++++++++++++++++ src/components/Sections/Header.vue | 6 +- .../{Mood/Choice.vue => MoodChoice.vue} | 4 +- src/components/Sections/Navigation.vue | 12 ++-- src/components/Views/Current.vue | 10 +-- src/components/Views/History.vue | 60 +++++++++++++++++ src/components/Views/Year.vue | 16 +++++ src/main.ts | 6 +- src/utils/datetime.ts | 30 +++++++++ tsconfig.node.json | 11 +++- vite.config.ts | 14 +++- 11 files changed, 211 insertions(+), 23 deletions(-) create mode 100644 src/components/HistoryItem.vue rename src/components/Sections/{Mood/Choice.vue => MoodChoice.vue} (97%) create mode 100644 src/components/Views/History.vue create mode 100644 src/components/Views/Year.vue create mode 100644 src/utils/datetime.ts diff --git a/src/components/HistoryItem.vue b/src/components/HistoryItem.vue new file mode 100644 index 0000000..5fb6af9 --- /dev/null +++ b/src/components/HistoryItem.vue @@ -0,0 +1,65 @@ + + + + + \ No newline at end of file diff --git a/src/components/Sections/Header.vue b/src/components/Sections/Header.vue index d8164ff..425099e 100644 --- a/src/components/Sections/Header.vue +++ b/src/components/Sections/Header.vue @@ -11,9 +11,9 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' import { faBarsStaggered } from '@fortawesome/pro-duotone-svg-icons/faBarsStaggered' import { ref } from 'vue' -import { usePageStore } from '../../stores/page.ts' -import Button from '../Button.vue' -import { useNavigation } from '../../composables/navigation.ts' +import { usePageStore } from '~/page.ts' +import Button from '@/Button.vue' +import { useNavigation } from '#/navigation.ts' const currentPage = ref('Stimmung') const pageStore = usePageStore() diff --git a/src/components/Sections/Mood/Choice.vue b/src/components/Sections/MoodChoice.vue similarity index 97% rename from src/components/Sections/Mood/Choice.vue rename to src/components/Sections/MoodChoice.vue index 51fa0f8..bd9fd52 100644 --- a/src/components/Sections/Mood/Choice.vue +++ b/src/components/Sections/MoodChoice.vue @@ -42,10 +42,10 @@ + + \ No newline at end of file diff --git a/src/components/Views/Year.vue b/src/components/Views/Year.vue new file mode 100644 index 0000000..ac13acf --- /dev/null +++ b/src/components/Views/Year.vue @@ -0,0 +1,16 @@ + + + + + \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index c90625a..390b291 100644 --- a/src/main.ts +++ b/src/main.ts @@ -2,12 +2,14 @@ import { createApp } from 'vue' import { createPinia } from 'pinia' import App from './App.vue' import Current from './components/Views/Current.vue' +import History from './components/Views/History.vue' +import Year from './components/Views/Year.vue' import { createMemoryHistory, createRouter } from 'vue-router' const routes = [ { path: '/', component: Current }, - { path: '/history', component: Current }, - { path: '/year', component: Current }, + { path: '/history', component: History }, + { path: '/year', component: Year }, ] const router = createRouter({ diff --git a/src/utils/datetime.ts b/src/utils/datetime.ts new file mode 100644 index 0000000..c167c72 --- /dev/null +++ b/src/utils/datetime.ts @@ -0,0 +1,30 @@ +const rtf = new Intl.RelativeTimeFormat('de-DE', { numeric: 'auto' }) + +const timeFormat = Intl.DateTimeFormat('de-DE', { + hour: '2-digit', + minute: '2-digit', + second: '2-digit', + hour12: false, +}) + +const dateTimeFormat = Intl.DateTimeFormat('de-DE', { + year: 'numeric', + month: '2-digit', + day: '2-digit', + hour: '2-digit', + minute: '2-digit', + second: '2-digit', + hour12: false, +}) + +export const getRelativeOrAbsoluteDate = (date: Date): string => { + const now = new Date() + const diffInMs = date.getTime() - now.getTime() + const diffInDays = Math.floor(diffInMs / (1000 * 60 * 60 * 24)) + + if (diffInDays >= -7 && diffInDays <= 2) { + return `${rtf.format(diffInDays, 'day')}, ${timeFormat.format(date)}` + } + + return dateTimeFormat.format(date) +}; \ No newline at end of file diff --git a/tsconfig.node.json b/tsconfig.node.json index 42872c5..b186570 100644 --- a/tsconfig.node.json +++ b/tsconfig.node.json @@ -4,7 +4,14 @@ "skipLibCheck": true, "module": "ESNext", "moduleResolution": "bundler", - "allowSyntheticDefaultImports": true + "allowSyntheticDefaultImports": true, + "paths": { + "@": ["./src/components/"], + "~": ["./src/stores/"], + "#": ["./src/composables/"], + } }, - "include": ["vite.config.ts"] + "include": [ + "vite.config.ts", + ] } diff --git a/vite.config.ts b/vite.config.ts index 812e61c..55036d1 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,5 +1,6 @@ -import { defineConfig } from "vite"; -import vue from "@vitejs/plugin-vue"; +import { defineConfig } from "vite" +import vue from "@vitejs/plugin-vue" +import path from 'node:path' // @ts-expect-error process is a nodejs global const host = process.env.TAURI_DEV_HOST; @@ -7,6 +8,13 @@ const host = process.env.TAURI_DEV_HOST; // https://vite.dev/config/ export default defineConfig(async () => ({ plugins: [vue()], + resolve: { + alias: { + '@': path.resolve(__dirname, "./src/components/"), + '~': path.resolve(__dirname, "./src/stores/"), + '#': path.resolve(__dirname, "./src/composables/"), + }, + }, // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build` // @@ -29,4 +37,4 @@ export default defineConfig(async () => ({ ignored: ["**/src-tauri/**"], }, }, -})); +}))