Update trams

src/components/CarDetail.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import ClickableImage from '@/components/ClickableImage.vue';
 import { trams } from '@/data/trams.ts';
 import { getType } from '@/stores/tram.ts';
 import { computed } from 'vue';
@@ -14,7 +15,12 @@ const baseUrl = import.meta.env.BASE_URL;
 <template>
   <div class="grid grid-cols-2 gap-2">
     <p>Lackierung</p>
-    <img v-if="details?.img" class="h-[30px]" :src="`${baseUrl}${details?.img}`" :alt="car?.type" />
+    <ClickableImage
+      v-if="details?.img"
+      class="h-[30px]"
+      :src="`${baseUrl}${details?.img}`"
+      :alt="car?.type"
+    />
     <span v-else class="h-[30px]"></span>
     <p>Typ</p>
     <p>{{ car?.type ?? '-' }}</p>

src/components/ClickableImage.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { VaButton, VaImage, VaModal, VaProgressCircle } from 'vuestic-ui';
+
+const props = withDefaults(
+  defineProps<{
+    alt?: string;
+    src: string;
+    class?: string;
+  }>(),
+  {
+    alt: '',
+    class: 'h-32'
+  }
+);
+const isOpen = ref(false);
+</script>
+
+<template>
+  <div>
+    <VaImage
+      :src="src"
+      class="w-fit min-w-8 cursor-pointer"
+      :class="props.class"
+      :title="alt"
+      :alt="alt"
+      fit="contain"
+      lazy
+      @click.prevent="isOpen = true"
+    >
+      <template #loader>
+        <VaProgressCircle indeterminate />
+      </template>
+    </VaImage>
+    <VaModal v-model="isOpen" hide-default-actions close-button size="large">
+      <h1 class="mb-4 text-3xl">{{ alt }}</h1>
+      <VaImage
+        :src="src"
+        :alt="alt"
+        :title="alt || ''"
+        fit="contain"
+        lazy
+        class="h-[80dvh]"
+        :style="src.endsWith('.gif') ? 'image-rendering: pixelated' : ''"
+      >
+        <template #loader>
+          <VaProgressCircle indeterminate />
+        </template>
+      </VaImage>
+      <template #footer>
+        <VaButton @click="isOpen = false">Schließen</VaButton>
+      </template>
+    </VaModal>
+  </div>
+</template>

src/data/trams.csv

@@ -1,5 +1,5 @@
 3101;GT8N1.jpg;keine;;2005
-3102;GT8N1.jpg;Traffic Marketing ;GG;2005
+3102;GT8N1.jpg;Traffic Marketing;GG;2005
 3103;GT8N1.jpg;Freiraum Möbel;TL;2005
 3104;GT8N1.jpg;Opti Wohnwelt;TP;2006
 3105;GT8N1.jpg;BoConcept;TL;2006
@@ -16,19 +16,19 @@
 3117;GT8N1.jpg;Elektro Siemer;TG;2007
 3118;GT8N1.jpg;Bremen Next;GG;2007
 3119;GT8N1.jpg;Verlängerung Linie 1+8 Huchting;TG;2007
-3120;GT8N1.jpg;Aleco Süpermärkte,Hofmolkerei Dehlwes;TL,TR;2007
+3120;GT8N1.jpg;Aleco Süpermärkte,Hofmolkerei Dehlwes;TLTR;2007
 3121;GT8N1.jpg;Freiraum Möbel;TR;2008
 3122;GT8N1.jpg;keine;;2008
 3123;GT8N1.jpg;DLRG;TP;2008
-3124;GT8N1.jpg;keine;;2008
-3125;GT8N1.jpg;keine;;2008
+3124;GT8N1.jpg;Bremer Spielbank;GG;2008
+3125;GT8N1.jpg;Abschiedstournee Howard Carpendale;TR;2008
 3126;GT8N1.jpg;Universität Bremen;GG;2008
-3127;GT8N1.jpg;100 Jahre Gewoba;GG;2008
+3127;GT8N1.jpg;keine;;2008
 3128;GT8N1.jpg;Smarteye Augen OP;TP;2008
 3129;GT8N1.jpg;Weru Fenster Schwarmann;TL;2008
 3130;GT8N1.jpg;Musikfest Bremen;GG;2008
-3131;GT8N1.jpg;wohnen im Kaffeequartier,Hofmolkerei Dehlwes;TL,TR;2009
-3132;GT8N1.jpg;Bremer Fensterdiscount,Aleco Supermärkte;TL,TR;2009
+3131;GT8N1.jpg;wohnen im Kaffeequartier,Hofmolkerei Dehlwes;TLTR;2009
+3132;GT8N1.jpg;Bremer Fensterdiscount,Aleco Supermärkte;TLTR;2009
 3133;GT8N1.jpg;keine;;2009
 3134;GT8N1.jpg;Benergie;TP;2009
 3135;GT8N1.jpg;Bremer Krebsgesellschaft;TP;2010
@@ -40,8 +40,8 @@
 3141;GT8N1.jpg;KCS Medical GmbH;GG;2012
 3142;GT8N1.jpg;Ochtum Park;GG;2012
 3143;GT8N1.jpg;Dodenhof;GG;2012
-3201;Avenio-schw.gif;BSAG Nordlicht;TP;2020 
-3202;Avenio-schw.gif;keine;;2020 
+3201;Avenio-schw.gif;BSAG Nordlicht;TP;2020
+3202;Avenio-schw.gif;keine;;2020
 3203;Avenio-schw.gif;ArcelorMittal;TG;2020
 3204;Avenio-rot.gif;Ausbildung bei der BSAG;GG;2020
 3205;Avenio-schw.gif;keine;;2020
@@ -56,21 +56,22 @@
 3214;Avenio-schw.gif;Jacobs Kaffee;GG;2021
 3215;Avenio-schw.gif;NBI Sicherheit;TP;2021
 3216;Avenio-schw.gif;Bremer City;GG;2021
-3217;Avenio-schw.gif;Filmfest Bremen,Sparkasse Bremen;GL,GR;2021
+3217;Avenio-schw.gif;Filmfest Bremen,Sparkasse Bremen;GLGR;2021
 3218;Avenio-schw.gif;BERGFELD GMBH Umschulungen;SG;2021
-3219;Avenio-rot.gif;keine;;2021 
+3219;Avenio-rot.gif;keine;;2021
 3220;Avenio-schw.gif;Citipost;TG;2021
-3221;Avenio-rot.gif;CVS Alphaplan;GG;2021
+3221;Avenio-roto.gif;CVS Alphaplan;GG;2021
 3222;Avenio-schw.gif;Klimabauzentrum Bremen;TP;2021
-3223;Avenio-schw.gif;keine;;2021
+3223;Avenio-schw.gif;Hilfe bei Glücksspielsucht;SG;2021
 3224;Avenio-rotu.gif;Karriere Bremen;SGL;2021
 3225;Avenio-schw.gif;Bremerhaven Tourismus;GG;2021
 3226;Avenio-rot.gif;Bremen hebt ab - City of aerospace;GG;2021
 3227;Avenio-rot.gif;keine;;2021
+3228;Avenio-schw.gif;keine;;2021
 3229;Avenio-schw.gif;Sparkasse Bremen;GG;2021
 3230;Avenio-schw.gif;GraftTherme;GG;2020
 3231;Avenio-schw.gif;keine;;2021
-3232;Avenio-roto.gif;keine;;2021
+3232;Avenio-rot.gif;keine;;2021
 3233;Avenio-schw.gif;Bremer Fensterdiscount;SG;2021
 3234;Avenio-schw.gif;keine;;2021
 3235;Avenio-schw.gif;Werder - offizielle Partner;GG;2021
@@ -80,13 +81,15 @@
 3239;Avenio-schw.gif;keine;;2021
 3240;Avenio-schw.gif;Bremer Fensterdiscount;SG;2021
 3241;Avenio-schw.gif;Jaffa kauft dein Auto;TP;2021
-3242;Avenio-schw.gif;keine;;2021
+3242;Avenio-schw.gif;Universum - Ausstellung Liebe;GG;2021
 3243;Avenio-schw.gif;keine;;2023
 3244;Avenio-schw.gif;TurnUp BRMN - Das Deutschrap Festival;TP;2024
 3245;Avenio-schw.gif;keine;;2024
 3246;Avenio-schw.gif;keine;;2025
-3247;Avenio-schw.gif;keine;;2025
-3401;Avenio-schw.gif;keine;;2020 
+3247;Avenio-schw.gif;Die Bremer Philharmoniker;TP;2025
+3248;Avenio-schw.gif;keine;;2025
+3249;Avenio-schw.gif;keine;;2025
+3401;Avenio-schw.gif;keine;;2020
 3402;Avenio-rot.gif;keine;;2021
 3403;Avenio-rot.gif;keine;;2021
 3404;Avenio-schw.gif;Benergie;SG;2021
@@ -118,5 +121,9 @@
 3430;Avenio-schw.gif;keine;;2023
 3431;Avenio-schw.gif;Toyota Weller;SG;2023
 3432;Avenio-schw.gif;keine;;2023
-3434;Avenio-schw.gif;keine;;2023 
-3435;Avenio-rot.gif;Airport Bremen;GG;2023
+3433;Avenio-schw.gif;keine;;2023
+3434;Avenio-schw.gif;keine;;2023
+3435;Avenio-schw.gif;Airport Bremen;GG;2023
+3017;HB-2019-0011.JPG;AEG GT8N Fahrschulwagen;;1994
+3055;HB-2024-0825.JPG;AEG GT8N Weihnachtsbahn;;1995
+3113;IMG_20250708_124617.jpg;Bombardier GT8N-1 Fahrschulwagen;;2006

src/stores/tram.ts

@@ -4,9 +4,13 @@ import { computed, reactive } from 'vue';
 
 export type CarType = [number, number, boolean, string];
 export const type: CarType[] = [
-  [3101, 3143, true, 'GT8N-1 - Bombardier Flexity Classic'],
+  [3101, 3112, true, 'GT8N-1 - Bombardier Flexity Classic'],
+  [3114, 3143, true, 'GT8N-1 - Bombardier Flexity Classic'],
   [3201, 3249, true, 'GT8N-2 - Siemens Avenio'],
   [3401, 3435, true, 'GT8N-2 - Siemens Avenio'],
+  [3055, 3055, true, 'GT8N Weihnachtsbahn'],
+  [3017, 3017, true, 'Fahrschulwagen'],
+  [3113, 3113, true, 'Fahrschulwagen'],
   [4001, 4020, false, 'Solobus Mercedes eCitaro O 530 C2'],
   [4061, 4075, false, 'Solobus Mercedes Citaro O 530 C2'],
   [4076, 4090, false, 'Solobus Mercedes Citaro O 530 C2 hybrid'],