Add car details and meta pages

src/App.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { VaButton, VaLayout, VaNavbar } from 'vuestic-ui';
+import { VaButton, VaDivider, VaLayout, VaNavbar } from 'vuestic-ui';
 </script>
 
 <template>
-  <VaLayout :top="{ fixed: true, order: 2 }">
+  <VaLayout :top="{ fixed: true, order: 2 }" :bottom="{ fixed: true, order: 4 }">
     <template #top>
       <VaNavbar shadowed>
         <template #center>
@@ -15,6 +15,16 @@ import { VaButton, VaLayout, VaNavbar } from 'vuestic-ui';
       </VaNavbar>
     </template>
 
+    <template #bottom
+      ><VaDivider style="margin: 0" /><VaNavbar>
+        <template #center>
+          <VaButton preset="secondary" to="/abbreviations">Abkürzungen</VaButton>
+          <VaButton preset="secondary" to="/about">Über</VaButton>
+          <VaButton preset="secondary" to="/imprint">Impressum</VaButton>
+        </template>
+      </VaNavbar></template
+    >
+
     <template #content>
       <main>
         <RouterView />

src/components/CarDetail.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { trams } from '@/data/trams.ts';
+import { getType } from '@/stores/tram.ts';
+import { computed } from 'vue';
+import { VaChip } from 'vuestic-ui';
+
+const props = defineProps<{ car: ReturnType<typeof getType> }>();
+
+const details = computed(() => (props.car ? trams.find((t) => t.id === props.car!.id) : undefined));
+</script>
+
+<template>
+  <div class="grid grid-cols-2 gap-2">
+    <p>Lackierung</p>
+    <img v-if="details?.img" class="h-[30px]" :src="`/${details?.img}`" :alt="car?.type" />
+    <span v-else class="h-[30px]"></span>
+    <p>Fahrzeug-Nr.</p>
+    <p>{{ car?.id }}</p>
+    <p>Werbung</p>
+    <div v-if="details">
+      <p v-for="(ad, i) in details.ads" :key="i">
+        {{ ad }}
+        <VaChip v-if="details.types && details.types[i]" size="small" to="/abbreviations">{{
+          details.types[i]
+        }}</VaChip>
+      </p>
+    </div>
+    <p v-else>-</p>
+    <p>Baujahr</p>
+    <p>{{ details?.year ?? '-' }}</p>
+  </div>
+</template>
+
+<style scoped></style>

src/data/trams.csv

@@ -0,0 +1,122 @@
+3101;GT8N1.jpg;keine;;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
+3106;GT8N1.jpg;Freie Kliniken Bremen;GG;2006
+3107;GT8N1.jpg;keine;;2006
+3108;GT8N1.jpg;Mammographie Screening Bremen;GG;2006
+3109;GT8N1.jpg;Fachhochschule für Ökonomie und Management (FOM);TG;2006
+3110;GT8N1.jpg;keine;;2006
+3111;GT8N1.jpg;125 Jahre Jacobs;GG;2006
+3112;GT8N1.jpg;Universität Bremen;GG;2006
+3114;GT8N1.jpg;ESF - Europäischer Sozialfonds;TP;2006
+3115;GT8N1.jpg;Made in Bremen Kaufhaus;TG;2006
+3116;GT8N1.jpg;Radio Bremen 1;GG;2006
+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
+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
+3126;GT8N1.jpg;Universität Bremen;GG;2008
+3127;GT8N1.jpg;100 Jahre Gewoba;GG;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
+3133;GT8N1.jpg;keine;;2009
+3134;GT8N1.jpg;Benergie;TP;2009
+3135;GT8N1.jpg;Bremer Krebsgesellschaft;TP;2010
+3136;GT8N1.jpg;Schweizer Viertel;TP;2012
+3137;GT8N1.jpg;Plasmaspenden;GG;2012
+3138;GT8N1.jpg;Gewoba;GG;2012
+3139;GT8N1.jpg;100 Jahre Gewoba;GG;2012
+3140;GT8N1.jpg;Möbel Zurbrüggen;TP;2012
+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 
+3203;Avenio-schw.gif;ArcelorMittal;TG;2020
+3204;Avenio-rot.gif;Ausbildung bei der BSAG;GG;2020
+3205;Avenio-schw.gif;keine;;2020
+3206;Avenio-rot.gif;keine;;2020
+3207;Avenio-rot.gif;keine;;2020
+3208;Avenio-schw.gif;Florian Wellmann Immobilien;GG;2020
+3209;Avenio-schw.gif;swb;TP;2021
+3210;Avenio-schw.gif;Klimabahn;GG;2020
+3211;Avenio-schw.gif;Oezgoeren Aesthetik;SG;2021
+3212;Avenio-schw.gif;keine;;2021
+3213;Avenio-schw.gif;keine;;2021
+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
+3218;Avenio-schw.gif;BERGFELD GMBH Umschulungen;SG;2021
+3219;Avenio-rot.gif;keine;;2021 
+3220;Avenio-schw.gif;Citipost;TG;2021
+3221;Avenio-rot.gif;CVS Alphaplan;GG;2021
+3222;Avenio-schw.gif;Klimabauzentrum Bremen;TP;2021
+3223;Avenio-schw.gif;keine;;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
+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
+3233;Avenio-schw.gif;Bremer Fensterdiscount;SG;2021
+3234;Avenio-schw.gif;keine;;2021
+3235;Avenio-schw.gif;Werder - offizielle Partner;GG;2021
+3236;Avenio-schw.gif;Binnenstadt;TP;2021
+3237;Avenio-schw.gif;keine;;2021
+3238;Avenio-schw.gif;Polizei Bremen;TG;2021
+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
+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 
+3402;Avenio-rot.gif;keine;;2021
+3403;Avenio-rot.gif;keine;;2021
+3404;Avenio-schw.gif;Benergie;SG;2021
+3405;Avenio-schw.gif;keine;;2021
+3406;Avenio-schw.gif;KUNK Optik;GG;2021
+3407;Avenio-schw.gif;keine;;2022
+3408;Avenio-schw.gif;keine;;2022
+3409;Avenio-rot.gif;keine;;2022
+3410;Avenio-schw.gif;keine;;2022
+3411;Avenio-schw.gif;Universum - Ausstellung Liebe;GG;2022
+3412;Avenio-schw.gif;Radio Bremen Buten & Binnen;GG;2022
+3413;Avenio-schw.gif;TNT Gerüstbau;SGL;2022
+3414;Avenio-schw.gif;keine;;2022
+3415;Avenio-schw.gif;keine;;2022
+3416;Avenio-schw.gif;keine;;2022
+3417;Avenio-schw.gif;GOP Varieté Theater;SGL;2022
+3418;Avenio-schw.gif;keine;;2022
+3419;Avenio-rot.gif;keine;;2022
+3420;Avenio-schw.gif;Cube Bike;SGL;2022
+3421;Avenio-rot.gif;DeutschlandTicket;GG;2022
+3422;Avenio-schw.gif;Smarteye Augen OP;SG;2022
+3423;Avenio-schw.gif;Jaffa kauft dein Auto;TP;2022
+3424;Avenio-rotu.gif;Clubdisco La Viva;TG;2022
+3425;Avenio-schw.gif;PSD Nord Bank;TP;2022
+3426;Avenio-schw.gif;keine;;2022
+3427;Avenio-rot.gif;Brebau;GG;2023
+3428;Avenio-schw.gif;Brebau;GG;2023
+3429;Avenio-schw.gif;Adler Solar;SG;2023
+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

src/data/trams.ts

@@ -0,0 +1,12 @@
+import trams_data from './trams.csv?raw';
+
+export const trams = trams_data.split('\n').map((line) => {
+  const [id, img, ads, types, year] = line.split(';');
+  return {
+    id: Number(id),
+    img,
+    year,
+    ads: ads.split(','),
+    types: types.length > 0 ? types.split(',') : null
+  };
+});

src/pages/AbbreviationsView.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { VaCard, VaCardContent, VaCardTitle, VaChip } from 'vuestic-ui';
+</script>
+
+<template>
+  <article>
+    <h1 class="m-4 mb-6 text-3xl">Abkürzungen</h1>
+
+    <div class="grid grid-cols-1 gap-4 p-4 md:grid-cols-2">
+      <VaCard>
+        <VaCardTitle>Werbetypen</VaCardTitle>
+        <VaCardContent>
+          <div class="flex flex-col">
+            <h2><VaChip>TG</VaChip> Teilgestaltung</h2>
+            <p>Rumpffläche</p>
+            <h2><VaChip>TP</VaChip> Teilgestaltung Plus</h2>
+            <p>Rumpffläche</p>
+            <p>inklusive 20% Fensterausnutzung oder 1 TrafficBoard</p>
+            <h2>
+              <VaChip>TL</VaChip> Teilgestaltung halbe Strassenbahn - linke Fahrzeugseite
+              (Fahrbahnseite)
+            </h2>
+            <p>Rumpffläche</p>
+            <p>Werbung nur auf der Fahrbahnseite</p>
+            <p>nur auf GT8N und GT8N-1 möglich</p>
+            <h2>
+              <VaChip>TR</VaChip> Teilgestaltung halbe Strassenbahn - rechte Fahrzeugseite
+              (Einstiegsseite)
+            </h2>
+            <p>Rumpffläche</p>
+            <p>Werbung nur auf der Einstiegsseite</p>
+            <p>nur auf GT8N und GT8N-1 möglich</p>
+            <h2><VaChip>GG</VaChip> Ganzgestaltung</h2>
+            <p>inklusive 25% Fensterausnutzung</p>
+            <h2><VaChip>GL</VaChip> Ganzgestaltung - linke Fahrzeugseite (Fahrbahnseite)</h2>
+            <p>inklusive 25% Fensterausnutzung</p>
+            <p>Werbung nur auf der Fahrbahnseite</p>
+            <h2><VaChip>GR</VaChip> Ganzgestaltung - rechte Fahrzeugseite (Einstiegsseite)</h2>
+            <p>inklusive 25% Fensterausnutzung</p>
+            <p>Werbung nur auf der Einstiegsseite</p>
+            <h2><VaChip>SG</VaChip> Segmentgestaltung</h2>
+            <p>nur ein Fahrzeugteil</p>
+            <p>nur bei GT8N möglich</p>
+            <h2><VaChip>BK</VaChip> Traffic Board klein (4/1)</h2>
+            <p>nur bei Bussen möglich</p>
+            <h2><VaChip>BG</VaChip> Traffic Board gross (18/1)</h2>
+            <p>nur bei Bussen möglich</p>
+            <h2><VaChip>HK</VaChip> Heckflächenplakat</h2>
+            <p>Plakat unterhalb der Fenster</p>
+            <p>nur bei Bussen</p>
+            <h2><VaChip>HG</VaChip> Heckfläche XL</h2>
+            <p>Plakat über komplette Heckfläche</p>
+            <p>nur bei Bussen</p>
+          </div>
+        </VaCardContent>
+      </VaCard>
+    </div>
+  </article>
+</template>
+
+<style scoped>
+@reference "tailwindcss";
+h2 {
+  @apply mt-4 text-2xl;
+}
+</style>

src/pages/AboutView.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts"></script>
+
+<template>
+  <article class="p-4">
+    <h1 class="pb-4 text-2xl">About</h1>
+    <p>
+      Alle Informationen, Bilder und Fahrzeugtypen stammen aus dem
+      <a
+        class="underline"
+        href="https://wiki.bre-forum.de/index.php?title=Bremer_Nahverkehrs-Net(z)_-_Fahrzeugliste"
+        target="_blank"
+        >Bremer Verkehrsforum Wiki</a
+      >, vielen Dank für die Arbeit!
+    </p>
+  </article>
+</template>
+
+<style scoped></style>

src/pages/HomeView.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import CarDetail from '@/components/CarDetail.vue';
 import StatsBlock from '@/components/StatsBlock.vue';
 import { getType, useTramStore } from '@/stores/tram.ts';
 import { computed, ref } from 'vue';
@@ -58,7 +59,7 @@ function add() {
     <VaCard class="md:col-2">
       <VaCardTitle>Neues Fahrzeug gefunden?</VaCardTitle>
       <VaCardContent>
-        <VaForm ref="form" class="grid grid-cols-1 gap-2 sm:grid-cols-2">
+        <VaForm ref="form" class="mb-4 grid grid-cols-1 gap-2 sm:grid-cols-2">
           <VaInput
             v-model="number"
             class="text-xl"
@@ -87,6 +88,7 @@ function add() {
             >Gesehen</VaButton
           >
         </VaForm>
+        <CarDetail :car="enteredType" />
       </VaCardContent>
     </VaCard>
 

src/pages/ImprintView.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts"></script>
+
+<template>
+  <article class="p-4">
+    <h1 class="mb-4 text-3xl">Impressum</h1>
+
+    <h2>Angaben gemäß § 5 TMG:</h2>
+    <p>Pascal Syma</p>
+    <p>Duckwitzstraße 50</p>
+    <p>28199 Bremen</p>
+    <p>Email: tramtrack@syma.dev</p>
+
+    <h2>Verantwortlich für redaktionellen Inhalt:</h2>
+    <p>Pascal Syma</p>
+    <p>Duckwitzstraße 50</p>
+    <p>28199 Bremen</p>
+    <p>Email: tramtrack@syma.dev</p>
+
+    <h2>Haftung für Inhalte</h2>
+    <p>
+      Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach den
+      allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch
+      nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder
+      nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen.
+    </p>
+    <p>
+      Verpflichtungen zur Entfernung oder Sperrung der Nutzung von Informationen nach den
+      allgemeinen Gesetzen bleiben hiervon unberührt. Eine diesbezügliche Haftung ist jedoch erst ab
+      dem Zeitpunkt der Kenntnis einer konkreten Rechtsverletzung möglich. Bei Bekanntwerden von
+      entsprechenden Rechtsverletzungen werden wir diese Inhalte umgehend entfernen.
+    </p>
+
+    <h2>Haftung für Links</h2>
+    <p>
+      Unser Angebot enthält Links zu externen Webseiten Dritter, auf deren Inhalte wir keinen
+      Einfluss haben. Deshalb können wir für diese fremden Inhalte auch keine Gewähr übernehmen. Für
+      die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der Seiten
+      verantwortlich. Die verlinkten Seiten wurden zum Zeitpunkt der Verlinkung auf mögliche
+      Rechtsverstöße überprüft. Rechtswidrige Inhalte waren zum Zeitpunkt der Verlinkung nicht
+      erkennbar.
+    </p>
+    <p>
+      Eine permanente inhaltliche Kontrolle der verlinkten Seiten ist jedoch ohne konkrete
+      Anhaltspunkte einer Rechtsverletzung nicht zumutbar. Bei Bekanntwerden von Rechtsverletzungen
+      werden wir derartige Links umgehend entfernen.
+    </p>
+
+    <h2>Urheberrecht</h2>
+    <p>
+      Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem
+      deutschen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der
+      Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung des
+      jeweiligen Autors bzw. Erstellers. Downloads und Kopien dieser Seite sind nur für den
+      privaten, nicht kommerziellen Gebrauch gestattet.
+    </p>
+    <p>
+      Soweit die Inhalte auf dieser Seite nicht vom Betreiber erstellt wurden, werden die
+      Urheberrechte Dritter beachtet. Insbesondere werden Inhalte Dritter als solche gekennzeichnet.
+      Sollten Sie trotzdem auf eine Urheberrechtsverletzung aufmerksam werden, bitten wir um einen
+      entsprechenden Hinweis. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Inhalte
+      umgehend entfernen.
+    </p>
+
+    <p class="mt-4">
+      Quelle:
+      <a href="https://www.erecht24.de" class="underline" target="_blank" rel="noopener noreferrer"
+        >https://www.e-recht24.de</a
+      >
+    </p>
+  </article>
+</template>
+
+<style scoped>
+@reference "tailwindcss";
+h2 {
+  @apply mt-8 mb-4 text-2xl;
+}
+</style>

src/router/index.ts

@@ -15,6 +15,18 @@ const router = createRouter({
     {
       path: '/stats',
       component: () => import('../pages/StatsView.vue')
+    },
+    {
+      path: '/abbreviations',
+      component: () => import('../pages/AbbreviationsView.vue')
+    },
+    {
+      path: '/about',
+      component: () => import('../pages/AboutView.vue')
+    },
+    {
+      path: '/imprint',
+      component: () => import('../pages/ImprintView.vue')
     }
   ]
 });