Merge pull request #2 from Spythere/development

v1.0.4

package.json

@@ -1,7 +1,7 @@
 {
   "name": "srjp-td2",
   "private": true,
-  "version": "1.0.3",
+  "version": "1.0.4",
   "type": "module",
   "scripts": {
     "dev": "vite --mode staging",

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/App/MainContainer.vue

@@ -1,9 +1,8 @@
 <template>
-  <main class="grid print:block p-3 mx-auto max-w-[800px] h-screen grid-rows-[auto_auto_1fr] gap-1">
+  <main class="grid print:block p-3 mx-auto max-w-[800px] h-[calc(100vh-40px)] min-h-[300px] grid-rows-[auto_auto_1fr] gap-1">
     <TimetableSelect />
     <TimetableWarnings />
     <TrainTimetable />
-    <!-- <MainBottom /> -->
   </main>
 </template>
 
@@ -11,5 +10,4 @@
 import TimetableSelect from '../Timetable/TimetableSelect.vue';
 import TimetableWarnings from "../Timetable/TimetableWarnings.vue";
 import TrainTimetable from '../Timetable/TrainTimetable.vue';
-// import MainBottom from './MainBottom.vue';
 </script>

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="{

src/components/Timetable/TrainTimetable.vue

@@ -89,8 +89,8 @@ const computedTimetableRows = computed(() => {
 
   for (const stop of stopList) {
     if (stop.arrivalLine && stop.arrivalLine == currentPath.arrivalLine) {
-      console.log('arrivalKm', arrivalKm);
-      console.log('stopDistance', stop.stopDistance);
+      // console.log('arrivalKm', arrivalKm);
+      // console.log('stopDistance', stop.stopDistance);
 
       if (arrivalKm >= stop.stopDistance) arrivalKm = (Number(stopRows[stopRows.length - 1].departureKm ?? '0') + stop.stopDistance) / 2;
 
@@ -191,13 +191,13 @@ const computedTimetableRows = computed(() => {
             stopRows[i].departureSpeed = currentPath.departureLineData.routeSpeed;
             stopRows[i].departureTracks = currentPath.departureLineData.routeTracks;
 
-            console.log(
-              stop.departureLine,
-              currentPath.sceneryName,
-              stop.stopDistance,
-              currentPath.departureLineData.routeLength,
-              currentPath.departureLineData.isRouteSBL
-            );
+            // console.log(
+            //   stop.departureLine,
+            //   currentPath.sceneryName,
+            //   stop.stopDistance,
+            //   currentPath.departureLineData.routeLength,
+            //   currentPath.departureLineData.isRouteSBL
+            // );
 
             /* 
             if (currentPath.departureLineData.isRouteSBL)