chore: code comments, print display

public/icons/arrow.svg

@@ -0,0 +1,3 @@
+<svg width="50" height="30" viewBox="0 0 50 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25 30L0 0H50L25 30Z" fill="white"/>
+</svg>

src/assets/vue.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

src/components/Timetable/TimetableBody.vue

@@ -1,6 +1,7 @@
 <template>
   <tbody>
     <tr v-for="(row, i) in computedTimetable">
+      <!-- Line no. -->
       <td
         class="text-center align-top border-l border-l-black dark:border-l-white"
         :class="{
@@ -11,6 +12,7 @@
         {{ i == 0 || computedTimetable[i - 1].realLine != row.realLine ? row.realLine : '&nbsp;' }}
       </td>
 
+      <!-- Km -->
       <td
         class="border border-black dark:border-white border-t-1 border-b-1 relative p-0"
         :class="{
@@ -25,6 +27,8 @@
         <div class="absolute top-0 left-0 w-full h-full">
           <table class="h-full w-full border-collapse">
             <tbody>
+
+              <!-- Arrival Km -->
               <tr
                 :class="`align-top ${
                   i == 0 ||
@@ -37,9 +41,11 @@
               >
                 <td>{{ row.arrivalKm }}</td>
               </tr>
+
+              <!-- Departure Km -->
               <tr
                 :class="{
-                  'border-black dark:border-white  border-t align-top':
+                  'border-black dark:border-white border-t align-top':
                     row.arrivalTracks != row.departureTracks || row.departureSpeed != row.arrivalSpeed,
                   hidden: row.arrivalTracks == row.departureTracks && row.departureSpeed == row.arrivalSpeed,
                 }"
@@ -51,6 +57,7 @@
         </div>
       </td>
     
+      <!--  Vp, Vl -->
       <td
         class="text-center align-top p-0 border-l-black dark:border-l-white relative"
         :class="{
@@ -72,6 +79,7 @@
                       : '&nbsp; '
                   }}
                 </td>
+                
                 <td v-if="row.arrivalTracks == 2" class="border-l border-l-black dark:border-l-white" width="35">
                   {{
                     i == 0 ||
@@ -82,6 +90,7 @@
                   }}
                 </td>
               </tr>
+
               <tr
                 :class="{
                   'border-t border-t-black dark:border-t-white align-top':
@@ -101,6 +110,7 @@
         </div>
       </td>
 
+      <!-- Station -->
       <td class="border border-black dark:border-white relative">
         <div class="absolute top-0 left-0 w-full h-full">
           <div class="flex flex-col h-full justify-between p-1">
@@ -117,6 +127,7 @@
         </div>
       </td>
 
+      <!-- Time -->
       <td class="p-0 border border-black dark:border-white relative">
         <div class="absolute top-0 left-0 w-full h-full">
           <table class="h-full w-full border-collapse">
@@ -142,6 +153,7 @@
         </div>
       </td>
 
+      <!-- Locos -->
       <td class="p-0 text-center border border-black dark:border-white relative h-24 text-sm" :class="{ 'text-stone-400 ': i > 0 }">
         <table class="h-full w-full border-collapse">
           <tbody>
@@ -158,6 +170,7 @@
         </table>
       </td>
 
+      <!-- Load / Length -->
       <td class="p-0 text-center border border-black dark:border-white relative" :class="{ 'text-stone-400 ': i > 0 }">
         <div class="absolute top-0 left-0 w-full h-full">
           <table class="h-full w-full border-collapse">
@@ -173,6 +186,7 @@
         </div>
       </td>
 
+      <!-- Vmax-->
       <td class="text-center border border-black dark:border-white" :class="{ 'text-stone-400 ': i > 0 }">{{ row.stockVmax }}</td>
     </tr>
   </tbody>

src/components/Timetable/TimetableSelect.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex gap-2 mb-2">
+  <div class="flex gap-2 mb-2 print:hidden">
     <button
       class="p-1 rounded-md"
       :class="{