From 3a9b3a8e674af60a8c1c33d98c4ae814a281a955 Mon Sep 17 00:00:00 2001 From: BenjiG70 Date: Thu, 2 Jul 2026 20:57:11 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20added=20better=20looking=20ui?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- env.d.ts | 6 + public/assets/external.json | 5 + src/App.vue | 94 ++------ src/assets/about.css | 21 ++ src/assets/appCards.css | 35 +++ src/assets/base.css | 86 ------- src/assets/dashboard.css | 25 ++ src/assets/gantt.css | 230 ++++++++++++++++++ src/assets/logo.svg | 1 - src/assets/main.css | 35 --- src/assets/template.css | 83 +++++++ src/central_functions/openApp.ts | 31 +++ src/components/HelloWorld.vue | 41 ---- src/components/TheWelcome.vue | 95 -------- src/components/WelcomeItem.vue | 87 ------- src/components/appCard.vue | 12 + src/components/gantt/manageConfig.vue | 156 ++++++++++++ src/components/gantt/manageProject.vue | 222 ++++++++++++++++++ src/components/gantt/manageTopic.vue | 154 ++++++++++++ src/main.ts | 8 +- src/router/index.ts | 23 +- src/views/AboutView.vue | 38 ++- src/views/Dashboard.vue | 51 ++++ src/views/Gantt.vue | 313 +++++++++++++++++++++++++ src/views/HomeView.vue | 9 - src/views/Markdown.vue | 0 tsconfig.json | 21 +- 27 files changed, 1415 insertions(+), 467 deletions(-) create mode 100644 public/assets/external.json create mode 100644 src/assets/about.css create mode 100644 src/assets/appCards.css delete mode 100644 src/assets/base.css create mode 100644 src/assets/dashboard.css create mode 100644 src/assets/gantt.css delete mode 100644 src/assets/logo.svg delete mode 100644 src/assets/main.css create mode 100644 src/assets/template.css create mode 100644 src/central_functions/openApp.ts delete mode 100644 src/components/HelloWorld.vue delete mode 100644 src/components/TheWelcome.vue delete mode 100644 src/components/WelcomeItem.vue create mode 100644 src/components/appCard.vue create mode 100644 src/components/gantt/manageConfig.vue create mode 100644 src/components/gantt/manageProject.vue create mode 100644 src/components/gantt/manageTopic.vue create mode 100644 src/views/Dashboard.vue create mode 100644 src/views/Gantt.vue delete mode 100644 src/views/HomeView.vue create mode 100644 src/views/Markdown.vue diff --git a/env.d.ts b/env.d.ts index 11f02fe..37dae94 100644 --- a/env.d.ts +++ b/env.d.ts @@ -1 +1,7 @@ /// + +declare module '*.vue' { + import type { DefineComponent } from 'vue' + const component: DefineComponent<{}, {}, any> + export default component +} \ No newline at end of file diff --git a/public/assets/external.json b/public/assets/external.json new file mode 100644 index 0000000..d10d91e --- /dev/null +++ b/public/assets/external.json @@ -0,0 +1,5 @@ +{ + "ext-git": "https://github.com", + "ext-business-travel": "", + "ext-ipt":"" +} \ No newline at end of file diff --git a/src/App.vue b/src/App.vue index 7905b05..79f2eed 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,85 +1,21 @@ - - - + \ No newline at end of file diff --git a/src/assets/about.css b/src/assets/about.css new file mode 100644 index 0000000..5c30dea --- /dev/null +++ b/src/assets/about.css @@ -0,0 +1,21 @@ +.about-page { + max-width: 700px; + margin: 0 auto; + padding: 2rem; + font-family: sans-serif; + text-align: center; +} + +.about-page .navigation-back { + margin-top: 2rem; + font-weight: bold; +} + +.about-page a { + color: #0056b3; + text-decoration: none; +} + +.about-page a:hover { + text-decoration: underline; +} \ No newline at end of file diff --git a/src/assets/appCards.css b/src/assets/appCards.css new file mode 100644 index 0000000..b51a07a --- /dev/null +++ b/src/assets/appCards.css @@ -0,0 +1,35 @@ +.app-card { + width: 100px; + height: 100px; + background-color: var(--white); + border: 3px solid #1f2937; + border-radius: 10px; + + display: flex; + justify-content: center; + align-items: center; + text-align: center; + padding: 15px; + + cursor: pointer; + transition: all 0.2s ease; + background-clip: padding-box; +} + +.app-card:hover { + transform: translate(-2px, -2px); + box-shadow: 7px 7px 0px rgba(0,0,0,0.15); + background-color: var(--secondary-color); + +} + +.app-title { + font-size: 1.2rem; + font-weight: 600; + color: #1f2937; + pointer-events: none; /* Verhindert Probleme bei schnellen Klicks */ +} + +.app-card:hover .app-title{ + color: var(--white); +} \ No newline at end of file diff --git a/src/assets/base.css b/src/assets/base.css deleted file mode 100644 index 8816868..0000000 --- a/src/assets/base.css +++ /dev/null @@ -1,86 +0,0 @@ -/* color palette from */ -:root { - --vt-c-white: #ffffff; - --vt-c-white-soft: #f8f8f8; - --vt-c-white-mute: #f2f2f2; - - --vt-c-black: #181818; - --vt-c-black-soft: #222222; - --vt-c-black-mute: #282828; - - --vt-c-indigo: #2c3e50; - - --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); - --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); - --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); - --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); - - --vt-c-text-light-1: var(--vt-c-indigo); - --vt-c-text-light-2: rgba(60, 60, 60, 0.66); - --vt-c-text-dark-1: var(--vt-c-white); - --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); -} - -/* semantic color variables for this project */ -:root { - --color-background: var(--vt-c-white); - --color-background-soft: var(--vt-c-white-soft); - --color-background-mute: var(--vt-c-white-mute); - - --color-border: var(--vt-c-divider-light-2); - --color-border-hover: var(--vt-c-divider-light-1); - - --color-heading: var(--vt-c-text-light-1); - --color-text: var(--vt-c-text-light-1); - - --section-gap: 160px; -} - -@media (prefers-color-scheme: dark) { - :root { - --color-background: var(--vt-c-black); - --color-background-soft: var(--vt-c-black-soft); - --color-background-mute: var(--vt-c-black-mute); - - --color-border: var(--vt-c-divider-dark-2); - --color-border-hover: var(--vt-c-divider-dark-1); - - --color-heading: var(--vt-c-text-dark-1); - --color-text: var(--vt-c-text-dark-2); - } -} - -*, -*::before, -*::after { - box-sizing: border-box; - margin: 0; - font-weight: normal; -} - -body { - min-height: 100vh; - color: var(--color-text); - background: var(--color-background); - transition: - color 0.5s, - background-color 0.5s; - line-height: 1.6; - font-family: - Inter, - -apple-system, - BlinkMacSystemFont, - 'Segoe UI', - Roboto, - Oxygen, - Ubuntu, - Cantarell, - 'Fira Sans', - 'Droid Sans', - 'Helvetica Neue', - sans-serif; - font-size: 15px; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} diff --git a/src/assets/dashboard.css b/src/assets/dashboard.css new file mode 100644 index 0000000..aab74da --- /dev/null +++ b/src/assets/dashboard.css @@ -0,0 +1,25 @@ +.app-grid { + display: flex; /* Aktiviert das Flexbox-Layout */ + flex-direction: row; /* Sorgt für die Anordnung nebeneinander */ + gap: 20px; /* Abstand zwischen den Karten */ + align-items: center; /* Zentriert die Karten vertikal, falls sie unterschiedlich groß sind */ + padding: 10px; + overflow-x: auto; /* Erlaubt horizontales Scrollen, falls es zu viele Karten werden */ +} + +.collapsible-header { + height: 100%; + list-style: none; + cursor: pointer; + border-bottom: 2px solid #1f2937; + transition: border-color 0.2s; +} + +.collapsible-header:hover { + border-color: var(--secondary-color); +} + + +.collapsible-header::-webkit-details-marker { + display: none; +} \ No newline at end of file diff --git a/src/assets/gantt.css b/src/assets/gantt.css new file mode 100644 index 0000000..2ac5270 --- /dev/null +++ b/src/assets/gantt.css @@ -0,0 +1,230 @@ +.app-wrapper { + font-family: 'Inter', system-ui, sans-serif; + background-color: #ffffff; + min-height: 100vh; + padding: 40px 20px; +} +.main-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 25px; + max-width: 1400px; + margin-left: auto; + margin-right: auto; +} +.logo-area { + display: flex; + align-items: center; + gap: 25px; +} +.logo-area h1 { + font-size: 1.8rem; + color: #0f2d59; + font-weight: 800; + margin: 0; +} +.range-picker { + background: white; + padding: 6px 18px; + border-radius: 20px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); + font-weight: 600; +} +.range-picker select { + border: none; + font-weight: 700; + cursor: pointer; + background: transparent; + font-size: 0.9rem; +} +.actions { + display: flex; + align-items: center; +} +.btn { + padding: 10px 20px; + margin-left: 12px; + border: 2px solid #222; + border-radius: 10px; + background: white; + font-weight: 700; + cursor: pointer; +} +.btn-primary { + background: #0f2d59; + color: white; + border: none; +} +.btn-io { + background: #e3f2fd; + color: #0f2d59; +} +.divider-space { + margin: 0 15px; + font-weight: bold; + color: #ffffff; +} +.timeline-card { + background: #ffffff; + border: 2px solid #333; + border-radius: 16px; + overflow: hidden; + max-width: 1400px; + margin: 0 auto; +} +.timeline-header-row, +.project-row { + display: grid; + grid-template-columns: 300px 1fr; +} +.sidebar-label, +.project-info { + padding: 15px 20px; + border-right: 2px solid #333; + background: #f9f9f9; + display: flex; + align-items: center; +} +.sidebar-label.headline { + font-weight: 700; + font-size: 1.1rem; + background: #f3f3f3; + border-bottom: 2px solid #333; +} +.p-name { + font-weight: 700; + font-size: 1rem; + color: #000; +} +.topic-header { + background: #ffffff; + padding: 10px 20px; + font-weight: 800; + font-size: 0.9rem; + color: #333; + border-bottom: 2px solid #333; + border-top: 2px solid #333; +} +.time-scale { + display: flex; + flex-direction: column; + background: #ffffff; + border-bottom: 2px solid #333; +} +.years-grid { + display: grid; + border-bottom: 1px solid #333; + text-align: center; +} +.year-block { + font-weight: 800; + padding: 6px 0; + font-size: 0.95rem; + color: #0f2d59; + border-right: 2px solid #333; +} +.year-block:last-child { + border-right: none; +} +.months-grid { + display: grid; + text-align: center; +} +.month-label { + font-size: 0.75rem; + font-weight: 700; + padding: 8px 0; + color: #555; + border-right: 1px dashed #be9ba2; +} +.month-label.year-end { + border-right: 2px solid #333; +} +.project-timeline-track { + position: relative; + height: 75px; +} +.grid-overlay { + position: absolute; + inset: 0; + display: grid; +} +.grid-line { + border-right: 1px dashed rgba(51, 51, 51, 0.15); + height: 100%; +} +.grid-line.year-end { + border-right: 2px solid #333; +} +.phase-bar { + position: absolute; + top: 22px; + height: 32px; + border: 2px solid #222; + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; + color: white; + font-size: 0.85rem; + font-weight: 700; + z-index: 2; + padding: 0 10px; +} +.milestone { + position: absolute; + color: #ffd700; + font-size: 1.3rem; +} +.milestone.start { + left: -10px; +} +.milestone.end { + right: -10px; +} +.repeat-marker { + position: absolute; + top: 50%; + transform: translate(-50%, -50%); + width: 32px; + height: 32px; + background: #e91e63; + color: white; + border: 2px solid white; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 0.85rem; + font-weight: 800; + font-style: italic; + z-index: 3; +} +.badge { + font-size: 0.65rem; + background: #ffe8cc; + color: #d97706; + padding: 3px 8px; + border-radius: 12px; + margin-left: 10px; + font-weight: 700; +} +.no-data-notice { + padding: 40px; + text-align: center; + font-weight: bold; + color: #0f2d59; + font-size: 1.1rem; +} + +.timeline-card { + display: flex; + flex-direction: column; + height: 100%; + width: 100%; + overflow-x: auto; + border: 2px solid #1f2937; + border-radius: 10px; + background: white; +} diff --git a/src/assets/logo.svg b/src/assets/logo.svg deleted file mode 100644 index 7565660..0000000 --- a/src/assets/logo.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/assets/main.css b/src/assets/main.css deleted file mode 100644 index 36fb845..0000000 --- a/src/assets/main.css +++ /dev/null @@ -1,35 +0,0 @@ -@import './base.css'; - -#app { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - font-weight: normal; -} - -a, -.green { - text-decoration: none; - color: hsla(160, 100%, 37%, 1); - transition: 0.4s; - padding: 3px; -} - -@media (hover: hover) { - a:hover { - background-color: hsla(160, 100%, 37%, 0.2); - } -} - -@media (min-width: 1024px) { - body { - display: flex; - place-items: center; - } - - #app { - display: grid; - grid-template-columns: 1fr 1fr; - padding: 0 2rem; - } -} diff --git a/src/assets/template.css b/src/assets/template.css new file mode 100644 index 0000000..f5e99a3 --- /dev/null +++ b/src/assets/template.css @@ -0,0 +1,83 @@ +:root { + --primary-color: #143665; + --secondary-color: #143665; + + --white: #fff; + --transparency: 0.4; + --border-size: 4px; +} + +html, body { + margin: 0; + padding: 0; + height: 100%; +} + +body { + margin: 0px; + height: 100%; + display: flex; + flex-direction: column; + overflow: hidden; +} + +header { + background-color: var(--primary-color); + height: 10vh; + flex-shrink: 0; + + display: flex; + align-items: center; + padding-left: 1%; +} + + +header a { + height: 100%; + display: flex; + align-items: center; +} + +header a img { + height: 85%; + width: auto; + + max-height: 100%; + object-fit: contain; + + border: 2px solid #fff; + border-radius: 4px; +} + +header h1{ + padding-left: 1%; + color:#fff; +} + +main { + flex-grow: 1; + overflow-y: auto; + padding: 2%; + flex: 1; + display: flex; + flex-direction: column; + min-height: 100%; +} + +footer { + flex-shrink: 0; + padding: 1rem; + background: #f3f4f6; + text-align: center; +} + +footer a { + cursor: pointer; + transition: color 0.2s ease; +} + +footer a:hover { + color: var(--primary-color); + text-decoration: underline; +} + diff --git a/src/central_functions/openApp.ts b/src/central_functions/openApp.ts new file mode 100644 index 0000000..1d3d6d7 --- /dev/null +++ b/src/central_functions/openApp.ts @@ -0,0 +1,31 @@ +import { ref } from 'vue'; +import { useRouter } from 'vue-router'; + +const urlMap = ref>({}); +let isLoaded = false; + +export function useAppLauncher() { + const router = useRouter(); + + const loadConfig = async () => { + if (isLoaded) return; + try { + const response = await fetch('/assets/external.json'); + urlMap.value = await response.json(); + isLoaded = true; + } catch (error) { + console.error("Fehler beim Laden der URLs:", error); + } + }; + + const openApp = (appId: string) => { + if (appId.includes('ext')) { + const url = urlMap.value[appId] || 'https://www.google.com'; + window.open(url, '_blank'); + } else { + router.push(`/${appId}`); + } + }; + + return { openApp, loadConfig }; +} \ No newline at end of file diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue deleted file mode 100644 index d174cf8..0000000 --- a/src/components/HelloWorld.vue +++ /dev/null @@ -1,41 +0,0 @@ - - - - - diff --git a/src/components/TheWelcome.vue b/src/components/TheWelcome.vue deleted file mode 100644 index 8b731d9..0000000 --- a/src/components/TheWelcome.vue +++ /dev/null @@ -1,95 +0,0 @@ - - - diff --git a/src/components/WelcomeItem.vue b/src/components/WelcomeItem.vue deleted file mode 100644 index 6d7086a..0000000 --- a/src/components/WelcomeItem.vue +++ /dev/null @@ -1,87 +0,0 @@ - - - diff --git a/src/components/appCard.vue b/src/components/appCard.vue new file mode 100644 index 0000000..f0385be --- /dev/null +++ b/src/components/appCard.vue @@ -0,0 +1,12 @@ + + + \ No newline at end of file diff --git a/src/components/gantt/manageConfig.vue b/src/components/gantt/manageConfig.vue new file mode 100644 index 0000000..a921be5 --- /dev/null +++ b/src/components/gantt/manageConfig.vue @@ -0,0 +1,156 @@ + + + + + \ No newline at end of file diff --git a/src/components/gantt/manageProject.vue b/src/components/gantt/manageProject.vue new file mode 100644 index 0000000..0484ff9 --- /dev/null +++ b/src/components/gantt/manageProject.vue @@ -0,0 +1,222 @@ + + + + + \ No newline at end of file diff --git a/src/components/gantt/manageTopic.vue b/src/components/gantt/manageTopic.vue new file mode 100644 index 0000000..865bd4a --- /dev/null +++ b/src/components/gantt/manageTopic.vue @@ -0,0 +1,154 @@ + + + + + \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index 5dcad83..6e1aadc 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,11 +1,15 @@ -import './assets/main.css' - import { createApp } from 'vue' import { createPinia } from 'pinia' import App from './App.vue' import router from './router' +import '@/assets/appCards.css' +import '@/assets/dashboard.css' +import '@/assets/gantt.css' +import '@/assets/template.css' +import '@/assets/about.css' + const app = createApp(App) app.use(createPinia()) diff --git a/src/router/index.ts b/src/router/index.ts index 3e49915..480da2f 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -1,23 +1,30 @@ import { createRouter, createWebHistory } from 'vue-router' -import HomeView from '../views/HomeView.vue' +// Korrigierter Router-Code const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: '/', name: 'home', - component: HomeView, + component: () => import('@/views/Dashboard.vue'), + }, + { + path: '/gantt', + name: 'gantt', + component: () => import('@/views/Gantt.vue'), + }, + { + path: '/md-viewer', + name: 'md-viewer', + component: () => import('@/views/Markdown.vue'), }, { path: '/about', name: 'about', - // route level code-splitting - // this generates a separate chunk (About.[hash].js) for this route - // 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 \ No newline at end of file diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue index 756ad2a..7b1c194 100644 --- a/src/views/AboutView.vue +++ b/src/views/AboutView.vue @@ -1,15 +1,29 @@ +
+

Über die Micro Solution Platform

+ +
+

Zweck der Plattform

+

Die MSP dient zur Sammlung von kleinstapplikationen für das Team des IT-BC Produktionssteuerung.

+
- +
+

Support & Kontakt

+

Bei Fehlern, Verbesserungsvorschlägen oder Fragen wende dich bitte an mich.

+

Diese Applikation wird nicht aktiv erweitert.

+ + Applikations-Owner: Markus Benjamin Tabler
+ + E-Mail an Markus schreiben + + +
+ +
+

© 2026 IT-BC Produktionssteuerung

+
+
+ \ No newline at end of file diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue new file mode 100644 index 0000000..517f212 --- /dev/null +++ b/src/views/Dashboard.vue @@ -0,0 +1,51 @@ + + \ No newline at end of file diff --git a/src/views/Gantt.vue b/src/views/Gantt.vue new file mode 100644 index 0000000..1dd6820 --- /dev/null +++ b/src/views/Gantt.vue @@ -0,0 +1,313 @@ + + + diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue deleted file mode 100644 index d5c0217..0000000 --- a/src/views/HomeView.vue +++ /dev/null @@ -1,9 +0,0 @@ - - - diff --git a/src/views/Markdown.vue b/src/views/Markdown.vue new file mode 100644 index 0000000..e69de29 diff --git a/tsconfig.json b/tsconfig.json index 100cf6a..3fb1fd6 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,14 +1,11 @@ { - "files": [], - "references": [ - { - "path": "./tsconfig.node.json" - }, - { - "path": "./tsconfig.app.json" - }, - { - "path": "./tsconfig.vitest.json" + "extends": "@vue/tsconfig/tsconfig.dom.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], + "exclude": ["src/**/__tests__/*"], + "compilerOptions": { + "composite": true, + "paths": { + "@/*": ["./src/*"] } - ] -} + } +} \ No newline at end of file