Auto-fill origin; focus time fields on span-click

Author: HerrLevin

app/Http/Controllers/API/v1/StationController.php

@@ -96,7 +96,7 @@ public function update(Request $request, int $id): StationResource {
                                             'longitude'     => ['nullable', 'numeric', 'between:-180,180'],
                                             'time_offset'   => ['nullable', 'numeric'],
                                         ]);
-        
+
         if (array_key_exists('time_offset', $request->json()->all()) && $request->json('time_offset') === null) {
             $validated['time_offset'] = null;
         }
@@ -145,4 +145,38 @@ public function index(Request $request): JsonResponse {
         return $this->sendResponse($stations);
     }
 
+
+    /**
+     * @OA\Get(
+     *      path="/station/{id}",
+     *      operationId="showStation",
+     *      tags={"Checkin"},
+     *      summary="Show station",
+     *      description="This request returns a single station object",
+     * @OA\Parameter(
+     *          name="id",
+     *          in="path",
+     *          description="station id",
+     *          example="1337"
+     *     ),
+     * @OA\Response(
+     *          response=200,
+     *          description="successful operation",
+     *          @OA\JsonContent(
+     *              @OA\Property(property="data", type="object", ref="#/components/schemas/StationResource")
+     *          )
+     *       ),
+     * @OA\Response(response=401, description="Unauthorized"),
+     * @OA\Response(response=503, description="There has been an error with our data provider"),
+     *       security={
+     *          {"passport": {"create-statuses"}}, {"token": {}}
+     *
+     *       }
+     *     )
+     */
+    public function show(int $id): JsonResponse {
+        $station = Station::findOrFail($id);
+
+        return $this->sendResponse(new StationResource($station));
+    }
 }

resources/views/vuestationboard.blade.php

@@ -2,6 +2,13 @@
 
 @section('title', 'RIS')
 
+@php
+    $createTripQuery = '';
+    if (isset($station)) {
+        $createTripQuery = '?from=' . $station->id;
+    }
+@endphp
+
 @section('content')
     <div class="container">
         <div class="row justify-content-center">
@@ -15,7 +22,8 @@
                             <i class="fa-solid fa-plus"></i>
                             {{__('missing-journey')}}
                         </p>
-                        <a href="{{ route('trip.create') }}" class="btn btn-sm btn-outline-secondary">
+                        <a href="{{ route('trip.create') . $createTripQuery }}"
+                           class="btn btn-sm btn-outline-secondary">
                             <i class="fa-solid fa-plus"></i>
                             {{__('create-journey')}}
                         </a>

resources/vue/components/TripCreation/StationInput.vue

@@ -72,12 +72,22 @@ export default {
         this.$refs.stationInputField.focus();
       }, 100);
     },
+    showModalFocusTime(fieldB = true) {
+      this.$refs.modal.show();
+      // delay focus to make sure the modal is shown
+      setTimeout(() => {
+        if (fieldB) {
+          this.$refs.timeFieldB.focus();
+        } else {
+          this.$refs.timeFieldA.focus();
+        }
+      }, 100);
+    },
     setStation(item) {
       this.stationInput = item.name;
       this.$emit('update:station', item);
       this.autocompleteList = [];
       this.pauseAutoComplete = true;
-      //this.$refs.modal.hide();
     },
     timeFieldAChanged(event) {
       this.$emit('update:timeFieldA', event.target.value)
@@ -169,6 +179,7 @@ export default {
               :placeholder="timeFieldALabel"
               class="form-control mobile-input-fs-16"
               type="datetime-local"
+              ref="timeFieldA"
               @input="timeFieldAChanged"
           >
         </div>
@@ -185,6 +196,7 @@ export default {
               :placeholder="timeFieldBLabel"
               class="form-control mobile-input-fs-16"
               type="datetime-local"
+              ref="timeFieldB"
               @input="timeFieldBChanged"
           >
         </div>
@@ -198,10 +210,10 @@ export default {
            :aria-label="placeholder" aria-describedby="basic-addon1"
            v-model="stationInput" @focusin="showModal"
     >
-    <span class="input-group-text font-monospace" v-if="departure && arrival">
+    <span class="input-group-text font-monospace" v-if="departure && arrival" @click="showModalFocusTime(false)">
       {{ this.timeFieldA }}
     </span>
-    <span class="input-group-text font-monospace">
+    <span class="input-group-text font-monospace" @click="showModalFocusTime">
       {{ this.timeFieldB }}
     </span>
     <button class="btn btn-sm btn-outline-danger input-group-button py-1" type="button" @click="$emit('delete')">

resources/vue/components/TripCreation/TripCreationPage.vue

@@ -11,6 +11,7 @@ export default {
   mounted() {
     this.initForm();
     this.loadOperators();
+    this.getOriginFromQuery();
   },
   data() {
     return {
@@ -179,6 +180,32 @@ export default {
       // todo: guess mode of transport based on line input
       // e.g.: if line starts with ICE or TGV, set category to nationalExpress
     },
+    getOriginFromQuery() {
+      const urlParams = new URLSearchParams(window.location.search);
+      const stationId = urlParams.get("from");
+
+      if (stationId) {
+        fetch(`/api/v1/stations/${stationId}`, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        })
+            .then((response) => {
+              if (!response.ok) {
+                throw new Error(response.statusText);
+              }
+              return response.json();
+            })
+            .then((result) => {
+              console.log(result.data);
+              this.$refs.originInput.setStation(result.data);
+            })
+            .catch((error) => {
+              console.error(error);
+            });
+      }
+    },
     onLineInput() {
       this.checkDisallowed()
       this.guessModeOfTransport();
@@ -323,6 +350,7 @@ export default {
 
       <form @submit.prevent="sendForm" class="px-4 mt-4">
         <StationInput
+            ref="originInput"
             :placeholder="trans('trip_creation.form.origin')"
             :arrival="false"
             v-on:update:station="setOrigin"

routes/api.php

@@ -97,6 +97,7 @@
         Route::prefix('station')->middleware(['scope:write-statuses'])->group(static function() {
             Route::put('/{id}/home', [TransportController::class, 'setHome'])->whereNumber('id');
             Route::get('/{id}/departures', [TransportController::class, 'getDepartures'])->whereNumber('id');
+            Route::get('/{id}', [StationController::class, 'show'])->whereNumber('id');
         });
 
         Route::group(['prefix' => 'statistics', 'middleware' => 'scope:read-statistics'], static function() {

storage/api-docs/api-docs.json

@@ -1605,6 +1605,57 @@
                 ]
             }
         },
+        "/station/{id}": {
+            "get": {
+                "tags": [
+                    "Checkin"
+                ],
+                "summary": "Show station",
+                "description": "This request returns a single station object",
+                "operationId": "showStation",
+                "parameters": [
+                    {
+                        "name": "id",
+                        "in": "path",
+                        "description": "station id",
+                        "example": "1337"
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "successful operation",
+                        "content": {
+                            "application/json": {
+                                "schema": {
+                                    "properties": {
+                                        "data": {
+                                            "$ref": "#/components/schemas/StationResource"
+                                        }
+                                    },
+                                    "type": "object"
+                                }
+                            }
+                        }
+                    },
+                    "401": {
+                        "description": "Unauthorized"
+                    },
+                    "503": {
+                        "description": "There has been an error with our data provider"
+                    }
+                },
+                "security": [
+                    {
+                        "passport": [
+                            "create-statuses"
+                        ]
+                    },
+                    {
+                        "token": []
+                    }
+                ]
+            }
+        },
         "/leaderboard": {
             "get": {
                 "tags": [