Some Changes

pages/workingtimes/index.vue

@@ -1,6 +1,9 @@
 <script setup>
 import dayjs from "dayjs";
 import customParseFormat from "dayjs/plugin/customParseFormat"
+import {useCapacitor} from "~/composables/useCapacitor.js";
+import {setPageLayout} from "#app";
+import FloatingActionButton from "~/components/mobile/FloatingActionButton.vue";
 
 dayjs.extend(customParseFormat)
 
@@ -14,11 +17,18 @@ const supabase = useSupabaseClient()
 const router = useRouter()
 const route = useRoute()
 
+const platform = useCapacitor().getIsPhone() ? "mobile" : "default"
+
+
 const filterUser = ref(profileStore.activeProfile.id || "")
 
 const workingtimes = ref([])
 
 const setupPage = async () => {
+  if(platform === "mobile") {
+    setPageLayout("mobile")
+  }
+
   if(route.query) {
     if(route.query.profile) filterUser.value = route.query.profile
   }
@@ -71,43 +81,35 @@ const itemInfo = ref({
 const columns = [
   {
     key:"state",
-    label: "Status",
-    sortable:true
+    label: "Status"
   },
   {
     key: "approved",
-    label: "Genehmigt",
-    sortable:true
+    label: "Genehmigt"
   },
   {
     key: "profile",
-    label: "Mitarbeiter",
-    sortable:true
+    label: "Mitarbeiter"
   },
   {
     key: "date",
-    label: "Datum",
-    sortable:true
+    label: "Datum"
   },
   {
     key:"startDate",
-    label:"Start",
-    sortable:true
+    label:"Start"
   },
   {
     key: "endDate",
-    label: "Ende",
-    sortable:true
+    label: "Ende"
   },
   {
     key: "duration",
-    label: "Dauer",
-    sortable:true
+    label: "Dauer"
   },
   {
     key: "notes",
-    label: "Notizen",
-    sortable:true
+    label: "Notizen"
   }
 ]
 
@@ -155,7 +157,21 @@ const setEndDate = (row) => {
 </script>
 
 <template>
-  <UDashboardNavbar title="Anwesenheiten">
+  <FloatingActionButton
+      :label="`+ Anwesenheit`"
+      variant="outline"
+      v-if="platform === 'mobile'"
+      @click="router.push(`/workingtimes/create`)"
+      :pos="0"
+  />
+  <FloatingActionButton
+      :label="`Auswertung`"
+      variant="outline"
+      v-if="platform === 'mobile'"
+      @click="router.push(`/workingtimes/evaluate/${profileStore.activeProfile.id}`)"
+      :pos="1"
+  />
+  <UDashboardNavbar title="Anwesenheiten" v-if="platform !== 'mobile'">
     <template #right>
       <UButton
           @click="router.push(`/workingtimes/edit?profile=${filterUser}`)"
@@ -164,7 +180,12 @@ const setEndDate = (row) => {
       </UButton>
     </template>
   </UDashboardNavbar>
-  <UDashboardToolbar>
+  <UDashboardNavbar title="Anwesenheiten" v-else>
+    <template #toggle>
+      <div></div>
+    </template>
+  </UDashboardNavbar>
+  <UDashboardToolbar v-if="platform !== 'mobile'">
     <template #left>
 
       <USelectMenu