first commit after refactor to vite

src/App.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+// This starter template is using Vue 3 <script setup> SFCs
+// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
+import HelloWorld from './components/HelloWorld.vue'
+</script>
+
+<template>
+  <img alt="Vue logo" src="./assets/logo.png" />
+  <v-app>
+    <v-main>
+      <div class="container">
+        <router-view></router-view>
+      </div>
+    </v-main>
+  </v-app>
+</template>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>

src/components/HelloWorld.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{ msg: string }>()
+
+const count = ref(0)
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <p>
+    Recommended IDE setup:
+    <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
+    +
+    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
+  </p>
+
+  <p>See <code>README.md</code> for more information.</p>
+
+  <p>
+    <a href="https://vitejs.dev/guide/features.html" target="_blank">
+      Vite Docs
+    </a>
+    |
+    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
+  </p>
+
+  <button type="button" @click="count++">count is: {{ count }}</button>
+  <p>
+    Edit
+    <code>components/HelloWorld.vue</code> to test hot module replacement.
+  </p>
+</template>
+
+<style scoped>
+a {
+  color: #42b983;
+}
+
+label {
+  margin: 0 0.5em;
+  font-weight: bold;
+}
+
+code {
+  background-color: #eee;
+  padding: 2px 4px;
+  border-radius: 4px;
+  color: #304455;
+}
+</style>

src/components/MonthPicker.vue

@@ -0,0 +1,105 @@
+<template>
+<div class="d-flex justify-content-center" >
+    <button type="button" class="btn btn-outline-primary" @click="openPicker" v-show="state === 'closed'">
+        {{months[selectedMonth]}} {{selectedYear}}
+    </button>
+
+    <table v-show="state === 'month'" class="table table-bordered table-sm">
+        <tbody>
+            <tr v-for="n in 3">
+                <td v-for="m in 4" @click="updateMonth(m+4*n-5)" :class="{selected: selectedMonth===(m+4*n-5)}">
+                    {{months[m+4*n-5]}}
+                </td>
+            </tr>
+        </tbody>
+    </table>
+
+    <table v-show="state === 'year'" class="table table-bordered table-sm">
+        <tbody>
+            <tr v-for="n in 3">
+                <td v-for="m in 3" @click="updateYear(years[m+3*n-4])" :class="{selected: selectedYear === years[m+3*n-4]}">
+                    {{years[m+3*n-4]}}
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+
+</template>
+
+<script setup lang="ts">
+    import { ref, computed, Ref, ComputedRef } from 'vue'
+
+    const props = defineProps<{
+        selectedMonth: number,
+        selectedYear: number,
+        state: ('closed'|'year'|'month')
+    }>()
+
+    const selectedMonth : Ref<number>= ref(props.selectedMonth)
+    const selectedYear : Ref<number> = ref(props.selectedYear)
+    const state : Ref<'closed'|'year'|'month'> = ref(props.state)
+
+    const months : string[] = [
+        'Jan', 'Feb', 'Mrz', 'Apr', 
+        'Mai', 'Jun', 'Jul', 'Aug',
+        'Sept', 'Okt', 'Nov', 'Dez'
+    ]
+
+    /**
+     * -4 -3 -2
+     * -1  0 +1
+     * +2 +3 +4
+     */
+
+    const years : ComputedRef<number[]> = computed(() => {
+        let arr : number[] = []
+        for (let i = 0; i < 9; i++) {
+            arr.push(selectedYear.value - 4 + i)
+        }
+        return arr
+    })
+
+    function updateMonth(monthId : number) {
+        selectedMonth.value = monthId
+        state.value = 'closed'
+
+    }
+
+    function updateYear(year : number) {
+        selectedYear.value = year
+        state.value = 'month'
+    }
+
+    function openPicker() {
+        state.value = 'year'
+    }
+
+    const emit = defineEmits<{
+        (e: 'getYear', year: number): number
+        (e: 'getMonth', month: number): number
+    }>()
+
+</script>
+
+<style scoped>
+    table {
+        width: 250px;
+        border-radius: 4px;
+    }
+    td, tr {
+        border: 1px solid #0d6efd ;
+        border-collapse: collapse;
+        color: #0D6EFD
+    }
+    td:hover {
+        background-color: #0D6EFD;
+        color: #fff;
+        cursor: pointer
+    }
+
+    .selected {
+        background-color: #0D6EFD;
+        color: #fff;
+    }
+</style>

src/components/Schedule.vue

@@ -0,0 +1,84 @@
+<template lang="pug">
+
+h1(v-if="isValid(startDate)") {{format(startDate, "MMMM y", {locale: de})}}
+
+table(class='table' v-for="(row, rIndex) in dates" :key="rIndex")
+    thead
+        tr
+            td(v-for="(day, index) in weekdays" :key="index") {{ day }}
+        tr
+            td(v-for="(date, dIndex) in row" :key="dIndex") 
+                template(v-if="date !== null") {{ format(date, "dd.MM.")}}
+    tbody 
+        tr
+            td(v-for="(date, dIndex) in row" :key="dIndex") &nbsp;
+</template>
+
+<script setup lang="ts">
+    import { toRef, computed } from 'vue'
+    import { addMonths, subDays, addDays, format, getISODay, isValid, eachDayOfInterval } from 'date-fns'
+    import { de } from 'date-fns/locale'
+
+    /*
+    *   Props / Refs
+    */
+    const props = defineProps<{
+        startDate: Date,
+        initialOffset: number
+    }>()
+
+    const startDate = toRef(props, 'startDate')
+    const endDate = computed(():Date => subDays(addMonths(startDate.value, 1), 1))
+
+    /*
+    *   Local variables
+    */
+    const weekdays : string[] = doubleWeekdays()
+    const employees : string[] = ['Pascal', 'Karin', 'Sandra']
+    
+    const daysInMonth : Date[] = eachDayOfInterval({
+        start: startDate.value,
+        end: endDate.value
+    })
+    const offset : number = getISODay(startDate.value) - 1 + props.initialOffset
+    
+
+    const dates = computed( () => {
+        let arr = []
+        let row = []
+        let start = startDate.value
+        let end = endDate.value
+        let i
+
+        for (i = 0; i < offset ; i++) {
+            row.push(null)
+        }
+
+        while (start <= end){
+            while (i < 14 && start <= end){
+                row.push(start)
+                start = addDays(start, 1)
+                i++
+            }
+            arr.push(row)
+            row = []
+            i = 0
+        }
+
+        return arr
+    })
+
+    function doubleWeekdays() : string[] {
+        let arr = ['Mo.', 'Di.', 'Mi.', 'Do.', 'Fr.', 'Sa.', 'So.']
+        return arr.concat(arr)
+    }
+
+
+
+</script>
+
+<style scoped>
+    table {
+        table-layout: fixed
+    }
+</style>

src/env.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

src/main.ts

@@ -0,0 +1,9 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+import "bootstrap"
+import "bootstrap/dist/css/bootstrap.min.css"
+
+createApp(App)
+.use(router)
+.mount('#app')

src/router/index.ts

@@ -0,0 +1,17 @@
+import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
+import Home from '../views/Home.vue'
+
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/',
+    name: 'Home',
+    component: Home
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes
+})
+
+export default router

src/views/Home.vue

@@ -0,0 +1,40 @@
+<template lang="pug">
+
+p SelectedMonth: {{selectedMonth}}, SelectedYear: {{selectedYear}}
+
+MonthPicker(:selectedMonth="selectedMonth" :selectedYear="selectedYear" state="closed")
+
+div(class="mt-5" v-for="(month, index) in months" :key="index") 
+  Schedule(  :startDate="month" :initialOffset="iOffsets[index]")
+
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed } from 'vue'
+  import { getYear, getMonth, eachMonthOfInterval, getDaysInMonth, getISODay } from 'date-fns'
+  import Schedule from '/src/components/Schedule.vue'
+  import MonthPicker from '/src/components/MonthPicker.vue'
+
+  const selectedMonth = ref(getMonth(new Date()))
+  const selectedYear = ref(getYear(new Date()))
+
+  const months = computed(() => {
+    return eachMonthOfInterval({
+      start: new Date(selectedYear.value, selectedMonth.value - 1),
+      end : new Date(selectedYear.value, selectedMonth.value + 1)
+    })
+  })
+
+  const iOffsets = computed(() => {
+    let arr : number[] = []
+    arr.push(0)
+
+    months.value.forEach(month => {
+      if ( getDaysInMonth(month) + getISODay(month) - 1 + arr[arr.length - 1] > 34) {
+        arr.push(7)
+      } 
+      else arr.push(0)
+    })
+    return arr
+  })
+</script>