Bug/dave 406 filtereinstellungen (#258)

* set default color for vselect * update version * icons der checkbox angepasst * remove margin bottom * Zeilenabstand erhoeht * update version * update i18n * fix lint * fix build
it-at-m · Dec 18, 2024 · db5c377 · db5c377
1 parent 2f75112
commit db5c377
Show file tree

Hide file tree

Showing 9 changed files with 217 additions and 62 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -12,8 +12,8 @@
     "fix:eslint": "eslint . --fix"
   },
   "dependencies": {
-    "@fontsource/roboto": "^4.5.8",
-    "@mdi/font": "7.3.67",
+    "@fontsource/roboto": "5.1.0",
+    "@mdi/font": "7.4.47",
     "@vuepic/vue-datepicker": "^10.0.0",
     "moment": "^2.29.4",
     "pinia": "^2.1.7",
@@ -56,7 +56,7 @@
     "vite-plugin-vuetify": "^1.0.2",
     "vitest": "^0.34.6",
     "vue-echarts": "^6.6.1",
-    "vue-i18n": "^9.13.1",
+    "vue-i18n": "10.0.5",
     "vue-tsc": "^2.1.4"
   }
 }
diff --git a/...c/components/messstelle/optionsmenue/panels/content/FahrzeugPanelVerkehrsartenContent.vue b/...c/components/messstelle/optionsmenue/panels/content/FahrzeugPanelVerkehrsartenContent.vue
@@ -48,14 +48,24 @@
             <v-checkbox
               v-model="chosenOptionsCopyFahrzeuge.kraftfahrzeugverkehr"
               label="Kraftfahrzeugverkehr (KFZ)"
-              :prepend-icon="getIcon('KFZ')"
               :color="getCheckboxColor('KFZ')"
               :disabled="isTypeDisabled('KFZ')"
               hide-details
               density="compact"
               @mouseover="hoverKfz = true"
               @mouseleave="hoverKfz = false"
-            />
+            >
+              <template
+                v-if="getIcon('KFZ')"
+                #prepend
+              >
+                <v-icon
+                  :color="getCheckboxColor('KFZ')"
+                  :icon="getIcon('KFZ')"
+                  class="opacity-100"
+                />
+              </template>
+            </v-checkbox>
           </v-col>
           <v-spacer />
         </v-row>
@@ -69,27 +79,47 @@
             <v-checkbox
               v-model="chosenOptionsCopyFahrzeuge.schwerverkehr"
               label="Schwerverkehr (SV)"
-              :prepend-icon="getIcon('SV')"
               :color="getCheckboxColor('SV')"
               :disabled="isTypeDisabled('SV')"
               hide-details
               density="compact"
               @mouseover="hoverSv = true"
               @mouseleave="hoverSv = false"
-            />
+            >
+              <template
+                v-if="getIcon('SV')"
+                #prepend
+              >
+                <v-icon
+                  :color="getCheckboxColor('SV')"
+                  :icon="getIcon('SV')"
+                  class="opacity-100"
+                />
+              </template>
+            </v-checkbox>
           </v-col>
           <v-col cols="6">
             <v-checkbox
               v-model="chosenOptionsCopyFahrzeuge.schwerverkehrsanteilProzent"
               label="Schwerverkehrsanteil [%]"
-              :prepend-icon="getIcon('SV_P')"
               :color="getCheckboxColor('SV_P')"
               :disabled="isTypeDisabled('SV_P')"
               hide-details
               density="compact"
               @mouseover="hoverSv_p = true"
               @mouseleave="hoverSv_p = false"
-            />
+            >
+              <template
+                v-if="getIcon('SV_P')"
+                #prepend
+              >
+                <v-icon
+                  :color="getCheckboxColor('SV_P')"
+                  :icon="getIcon('SV_P')"
+                  class="opacity-100"
+                />
+              </template>
+            </v-checkbox>
           </v-col>
         </v-row>
         <v-row
@@ -102,27 +132,47 @@
             <v-checkbox
               v-model="chosenOptionsCopyFahrzeuge.gueterverkehr"
               label="Güterverkehr (GV)"
-              :prepend-icon="getIcon('GV')"
               :color="getCheckboxColor('GV')"
               :disabled="isTypeDisabled('GV')"
               hide-details
               density="compact"
               @mouseover="hoverGv = true"
               @mouseleave="hoverGv = false"
-            />
+            >
+              <template
+                v-if="getIcon('GV')"
+                #prepend
+              >
+                <v-icon
+                  :color="getCheckboxColor('GV')"
+                  :icon="getIcon('GV')"
+                  class="opacity-100"
+                />
+              </template>
+            </v-checkbox>
           </v-col>
           <v-col cols="6">
             <v-checkbox
               v-model="chosenOptionsCopyFahrzeuge.gueterverkehrsanteilProzent"
               label="Güterverkehrsanteil [%]"
-              :prepend-icon="getIcon('GV_P')"
               :color="getCheckboxColor('GV_P')"
               :disabled="isTypeDisabled('GV_P')"
               hide-details
               density="compact"
               @mouseover="hoverGv_p = true"
               @mouseleave="hoverGv_p = false"
-            />
+            >
+              <template
+                v-if="getIcon('GV_P')"
+                #prepend
+              >
+                <v-icon
+                  :color="getCheckboxColor('GV_P')"
+                  :icon="getIcon('GV_P')"
+                  class="opacity-100"
+                />
+              </template>
+            </v-checkbox>
           </v-col>
         </v-row>
         <v-row
@@ -135,21 +185,30 @@
             <v-checkbox
               v-model="chosenOptionsCopyFahrzeuge.radverkehr"
               label="Radverkehr (Rad)"
-              :prepend-icon="getIcon('RAD')"
               :color="getCheckboxColor('RAD')"
               :disabled="isTypeDisabled('RAD')"
               hide-details
               density="compact"
               @mouseover="hoverRad = true"
               @mouseleave="hoverRad = false"
-            />
+            >
+              <template
+                v-if="getIcon('RAD')"
+                #prepend
+              >
+                <v-icon
+                  :color="getCheckboxColor('RAD')"
+                  :icon="getIcon('RAD')"
+                  class="opacity-100"
+                />
+              </template>
+            </v-checkbox>
           </v-col>
 
           <v-col cols="6">
             <v-checkbox
               v-model="chosenOptionsCopyFahrzeuge.fussverkehr"
               label="Fußgänger (Fuß)"
-              :prepend-icon="getIcon('FUSS')"
               :color="getCheckboxColor('FUSS')"
               :persistent-hint="
                 chosenOptionsCopyFahrzeuge.gueterverkehrsanteilProzent ||
@@ -160,7 +219,18 @@
               density="compact"
               @mouseover="hoverFuss = true"
               @mouseleave="hoverFuss = false"
-            />
+            >
+              <template
+                v-if="getIcon('FUSS')"
+                #prepend
+              >
+                <v-icon
+                  :color="getCheckboxColor('FUSS')"
+                  :icon="getIcon('FUSS')"
+                  class="opacity-100"
+                />
+              </template>
+            </v-checkbox>
           </v-col>
         </v-row>
       </v-col>

diff --git a/frontend/src/components/zaehlstelle/NichtAusgewaehlteZaehlung.vue b/frontend/src/components/zaehlstelle/NichtAusgewaehlteZaehlung.vue
@@ -27,7 +27,7 @@
         @click="openZaehlung"
       >
         <span class="text-body-2"
-          >{{ $d(date, "short", "de-DE") }} | {{ projektName }}</span
+          >{{ dateUtils.getShortVersionOfDate(date) }} | {{ projektName }}</span
         ><br />
         <zaehlart-icon
           :zaehlart="zaehlart"
@@ -59,6 +59,7 @@ import WetterIcon from "@/components/zaehlstelle/icons/WetterIcon.vue";
 import ZaehlartIcon from "@/components/zaehlstelle/icons/ZaehlartIcon.vue";
 import ZaehldauerIcon from "@/components/zaehlstelle/icons/ZaehldauerIcon.vue";
 import { useZaehlstelleStore } from "@/store/ZaehlstelleStore";
+import { useDateUtils } from "@/util/DateUtils";
 
 interface Props {
   id: string;
@@ -78,6 +79,7 @@ const props = defineProps<Props>();
 
 const zaehlstelleStore = useZaehlstelleStore();
 const display = useDisplay();
+const dateUtils = useDateUtils();
 
 const hover = ref(false);
 

diff --git a/frontend/src/components/zaehlstelle/ZaehlungInfo.vue b/frontend/src/components/zaehlstelle/ZaehlungInfo.vue
@@ -39,7 +39,7 @@
             >
               <v-row no-gutters
                 ><span class="pb-0 text-truncate"
-                  >{{ $d(datum, "short", "de-DE") }} |
+                  >{{ dateUtils.getShortVersionOfDate(datum) }} |
                   {{ zaehlung.projektName }}</span
                 >
               </v-row>
@@ -226,6 +226,7 @@ import Zaehldauer from "@/types/enum/Zaehldauer";
 import Zeitauswahl from "@/types/enum/Zeitauswahl";
 import Zeitblock, { zeitblockInfo } from "@/types/enum/Zeitblock";
 import { zeitblockStuendlichInfo } from "@/types/enum/ZeitblockStuendlich";
+import { useDateUtils } from "@/util/DateUtils";
 
 interface Props {
   kommentarZaehlstelle?: string;
@@ -237,6 +238,7 @@ withDefaults(defineProps<Props>(), {
 
 const zaehlstelleStore = useZaehlstelleStore();
 const display = useDisplay();
+const dateUtils = useDateUtils();
 
 const showSpitzenstundeInfo = ref(false);
 const startUhrzeitIntervalls = ref("");