Some Changes in TimeTracking and boosting Mobile View

spaces/pages/timetracking.vue

@@ -9,14 +9,15 @@ const toast = useToast()
 console.log(user)
 
 const {times, projects} = storeToRefs(useDataStore())
-const {fetchTimes} = useDataStore()
+const {fetchTimes, getTimeTypes} = useDataStore()
-
+const timeTypes = getTimeTypes
 const timeInfo = ref({
   user: "",
   start: "",
   end: null,
   notes: null,
-  projectId: null
+  projectId: null,
+  type: null
 })
 
 const runningTimeInfo = ref({
@@ -87,6 +88,7 @@ const selectStartedTime = () => {
       <UButton
           class="controlButton"
           @click="stopStartedTime"
+          :disabled="!runningTimeInfo.id"
       >
         Stop
       </UButton>
@@ -99,9 +101,16 @@ const selectStartedTime = () => {
 
 
       <div>
-        Aktuelle gestarteter Eintrag:
-        {{runningTimeInfo}}
 
+        <div class="mt-3">
+          Aktuelle gestarteter Eintrag:
+          {{runningTimeInfo.id ? runningTimeInfo : "Keine Zeit gewählt"}}
+
+
+
+        </div>
+
+        <div v-if="runningTimeInfo.id">
           <UFormGroup
               label="Notizen:"
           >
@@ -120,17 +129,37 @@ const selectStartedTime = () => {
                 v-model="runningTimeInfo.projectId"
             >
               <template #label>
-              <span>{{ projects.find(project => project.id === runningTimeInfo.projectId) ? projects.find(project => project.id === runningTimeInfo.projectId).name : "" }}</span>
+                <span v-if="runningTimeInfo.projectId">{{ projects.find(project => project.id === runningTimeInfo.projectId) ? projects.find(project => project.id === runningTimeInfo.projectId).name : "" }}</span>
+                <span v-else>Projekt auswählen</span>
               </template>
             </USelectMenu>
           </UFormGroup>
 
+          <UFormGroup
+              label="Kategorie:"
+          >
+            <USelectMenu
+                v-model="runningTimeInfo.type"
+                :options="timeTypes"
+                option-attribute="label"
+                value-attribute="label"
+            />
+          </UFormGroup>
         </div>
 
 
-      <UTable :rows="times"/>
 
-      {{timeInfo}}
+
+
+      </div>
+
+      <UDivider class="mt-3"/>
+
+      <UTable
+          class="mt-3"
+          v-if="times && user"
+          :rows="times.filter(time => time.user === user.id)"
+      />
 
     </div>
 </template>

spaces/stores/data.ts

@@ -11,6 +11,9 @@ export const useDataStore = defineStore('data', {
         ownTenant: {
             calendarConfig: {
                 eventTypes: [] as any[]
+            },
+            timeConfig: {
+                timeTypes: [] as any[]
             }
         },
         profiles: [] as any[],
@@ -150,6 +153,7 @@ export const useDataStore = defineStore('data', {
                 }),
             ]
         },
-        getEventTypes: (state) => state.ownTenant.calendarConfig.eventTypes
+        getEventTypes: (state) => state.ownTenant.calendarConfig.eventTypes,
+        getTimeTypes: (state) => state.ownTenant.timeConfig.timeTypes
     }
 })