Added Features to Mobile Styling

pages/mobile/menu.vue

@@ -10,32 +10,58 @@ const profileStore = useProfileStore()
 
 <template>
   <UDashboardPanelContent>
-
+    <UDivider class="mb-3">Weiteres</UDivider>
+    <UButton
+        class="w-full my-1"
+        to="/times"
+        icon="i-heroicons-clock"
+    >
+      Zeiten
+    </UButton>
     <UButton
         class="w-full my-1"
         to="/standardEntity/absencerequests"
+        icon="i-heroicons-document-text"
     >
       Abwesenheiten
     </UButton>
+
     <UButton
+        class="w-full my-1"
+        to="/workingtimes"
+        icon="i-heroicons-clock"
+    >
+      Anwesenheiten
+    </UButton>
+<!--    <UButton
         class="w-full my-1">
       Kalender
-    </UButton>
+    </UButton>-->
     <UButton
         class="w-full my-1"
       to="/standardEntity/customers"
+        icon="i-heroicons-user-group"
     >
       Kunden
     </UButton>
     <UButton
         class="w-full my-1"
         to="/standardEntity/vendors"
+        icon="i-heroicons-truck"
     >
       Lieferanten
     </UButton>
+    <UButton
+        class="w-full my-1"
+        to="/standardEntity/contacts"
+        icon="i-heroicons-user-group"
+    >
+      Ansprechpartner
+    </UButton>
     <UButton
         class="w-full my-1"
         to="/standardEntity/plants"
+        icon="i-heroicons-clipboard-document"
     >
       Objekte
     </UButton>

pages/times/index.vue

@@ -2,6 +2,7 @@
 import dayjs from "dayjs";
 import VueDatePicker from '@vuepic/vue-datepicker'
 import '@vuepic/vue-datepicker/dist/main.css'
+import {setPageLayout} from "#app";
 
 
 definePageMeta({
@@ -32,9 +33,16 @@ const runningTimeInfo = ref({})
 const showConfigTimeModal = ref(false)
 const configTimeMode = ref("create")
 
+const platform = ref("default")
+
 const setup = async () => {
   times.value = await useSupabaseSelect("times","*, profile(*), project(id, name)")
 
+  if(await useCapacitor().getIsPhone()) {
+    platform.value = "mobile"
+    setPageLayout("mobile")
+  }
+
   runningTimeInfo.value = (await supabase
       .from("times")
       .select()
@@ -209,11 +217,23 @@ const setState = async (newState) => {
   await updateTime()
 }
 
+const getSecondInfo = (item) => {
+  let returnArray = []
+
+  if(item.type) returnArray.push(item.type)
+  if(item.project) returnArray.push(item.project.name)
+  if(item.notes) returnArray.push(item.notes)
+
+  return returnArray
+}
+
 </script>
 
 <template>
   <UDashboardNavbar title="Zeiterfassung">
-
+    <template #toggle>
+      <div v-if="platform === 'mobile'"></div>
+    </template>
   </UDashboardNavbar>
   <UDashboardToolbar>
     <template #left>
@@ -230,11 +250,13 @@ const setState = async (newState) => {
         Stop
       </UButton>
       <UButton
+          v-if="platform !== 'mobile'"
           @click="configTimeMode = 'create'; itemInfo = {start: new Date(), end: new Date(), user: user.id}; showConfigTimeModal = true"
       >
         Erstellen
       </UButton>
       <USelectMenu
+          v-if="platform !== 'mobile'"
           :options="profileStore.profiles"
           option-attribute="fullName"
           value-attribute="id"
@@ -412,7 +434,24 @@ const setState = async (newState) => {
     </UCard>
   </UModal>
 
+  <UDashboardPanelContent class="w-full" v-if="platform === 'mobile'">
+    <a
+        v-for="item in filteredRows"
+        class="my-1"
+    >
+      <p class="truncate text-left text-primary text-xl">{{dayjs(item.startDate).format("DD.MM.YYYY HH:mm")}} - {{dayjs(item.endDate).format("HH:mm")}}</p>
+      <p class="text-sm">
+        <span v-for="(i,index) in getSecondInfo(item)">
+          {{i}}{{index < getSecondInfo(item).length - 1 ? " - " : ""}}
+        </span>
+
+      </p>
+    </a>
+  </UDashboardPanelContent>
+
+
   <UTable
+      v-else
       class="mt-3"
       :columns="columns"
       :rows="filteredRows"