create nuxt with pages

controlling/.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

controlling/README.md

@@ -0,0 +1,75 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm run dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

controlling/app.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <NuxtLayout />
+    <div>
+    <NuxtPage />
+    </div>
+  </div>
+</template>
+
+<style>
+body {
+ background-color: #F3F4F6;
+}
+</style>

controlling/components/BWAList.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+const { data:bwas } = await useFetch("/api/bwa");
+
+const monthMap: Record<string, number> = {
+  'Januar': 0, 
+  'Februar': 1,
+  'März': 2,
+  'April': 3,
+  'Mai': 4,
+  'Juni': 5,
+  'Juli': 6,
+  'August': 7,
+  'September': 8,
+  'Oktober': 9,
+  'November': 10,
+  'Dezember': 11
+};
+
+function convertToDate(fileName: string) {
+    const [day, month, year] = fileName.split('_');
+    return new Date(parseInt(year.replace('.xlsx', '')), monthMap[month], parseInt(day))
+}
+bwas.value?.sort((a, b) => convertToDate(a.replace(/ae/, "ä")).getTime() - convertToDate(b.replace(/ae/, "ä")).getTime())
+</script>
+
+<template>
+    <div class="flex flex-row gap-4 flex-wrap justify-center">
+        <div v-for="(bwa, i) in bwas" :key="i" class="hover: rounded-lg bg-white drop-shadow-lg w-[256px] h-[68px] hover:cursor-pointer hover:bg-gray-50 text-lg" @click="navigateTo(`/bwa/${ bwa }`)">
+            <p class=" truncate p-5">{{ 
+                bwa.replace(/^\d{2}_|\.xlsx/g, "")
+                .replace(/_/g, " ")
+                .replace(/ae/, "ä")
+                }}</p>
+        </div>
+    </div>
+</template>

controlling/components/BWATable.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+// nicht genutzt
+</script>
+
+<template>
+ <div>
+ <h1>aa</h1>
+ </div>
+</template>

controlling/components/DatePicker.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { format } from 'date-fns';
+import { de } from 'date-fns/locale';
+import { DatePicker as VCalendarDatePicker } from './../node_modules/v-calendar';
+import 'v-calendar/dist/style.css';
+
+const date = defineModel<Date>({ default: new Date() })
+
+const handleDateSelect = ({ close }: { close: () => void }) => {
+  close()
+}
+</script>
+
+<template>
+  <UPopover class="mt-4" :popper="{ placement: 'bottom-start' }">
+    <UButton 
+      icon="i-heroicons-calendar-days-20-solid" 
+      color="black" 
+      :label="format(date, 'MMM yyy', { locale: de })" 
+    />
+
+    <template #panel="{ close }">
+      <VCalendarDatePicker 
+        v-model="date" 
+        is-required 
+        color="gray" 
+        @update:model-value="handleDateSelect({ close })"
+      />
+    </template>
+  </UPopover>
+</template>

controlling/components/FileDropzone.vue

@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <div ref="dropRef" class="dropzone" />
+    <div v-if="errorMessage" class="text-red-600 font-bold">Error: {{ errorMessage }}</div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { Dropzone } from "@deltablot/dropzone";
+import { format } from "date-fns";
+import { de } from 'date-fns/locale';
+
+const props = defineProps({
+  paramName: {
+    type: String,
+    default: "file",
+  },
+  token: {
+    type: String,
+    default: "",
+  },
+  backendUrl: {
+    type: String,
+    default: "/api",
+  },
+  date: Date,
+});
+
+const dropRef = ref(null);
+const errorMessage = ref();
+
+const customPreview = ref(`
+        <div class="d-flex flex-wrap dz-processing">
+            <div class="dz-progress">
+              <span class="dz-upload" data-dz-uploadprogress></span>
+            </div>
+        </div>
+      `);
+
+onMounted(() => {
+  if (dropRef.value !== null) {
+    const dropzone = new Dropzone(dropRef.value, {
+      url: props.backendUrl,
+      method: "POST",
+      acceptedFiles: ".xlsx",
+      previewTemplate: customPreview.value,
+      renameFile: () => format(props.date, "dd MMMM yyyy", { locale: de }) + ".xlsx",
+    });
+    dropzone.on("error", (file, error) => {
+      errorMessage.value = error.message;
+    });
+    dropzone.on("success", () => {
+      navigateTo("/bwa/collection")
+    });
+  }
+});
+</script>

controlling/eslint.config.mjs

@@ -0,0 +1,6 @@
+// @ts-check
+import withNuxt from './.nuxt/eslint.config.mjs'
+
+export default withNuxt(
+  // Your custom configs here
+)

controlling/layouts/default.vue

@@ -0,0 +1,8 @@
+<template>
+    <header class="border-b-2 border-gray-300 bg-white">
+        <div class="flex gap-4 justify-center p-4">
+        <img src='C:\Users\belag\Documents\GitHub\controlling\controlling\images\20190128_geprog_logo 1.png'>
+        <h1 class="mt-7 text-lg">Controlling</h1>
+    </div>
+    </header>  
+</template>

controlling/nuxt.config.ts

@@ -0,0 +1,20 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  compatibilityDate: '2024-04-03',
+  devtools: { enabled: true },
+  modules: ['@nuxt/ui', '@nuxt/eslint'],
+  nitro: {
+    storage: {
+      redis: {
+        driver: 'redis',
+      },
+      db: {
+        driver: 'fs',
+        base: './data/db'
+      }
+    },
+    externals: {
+      inline: ['xlsx']
+    }
+  }
+})