✨ let closed-beta users create manual trips (#2280)

Author: MrKrisKrisu

.idea/trwl.iml

@@ -30,7 +30,7 @@ class TripController extends Controller
      *       -> later solve the problem for non-existing stations
      */
     public function createTrip(Request $request): TripResource {
-        if (!auth()->user()?->hasRole('closed-beta')) {
+        if (!auth()->user()?->can('create-manual-trip')) {
             abort(403, 'this endpoint is currently only available for beta users');
         }
 

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

@@ -1,8 +1,8 @@
 /**
  * Here, we include all of our external dependencies
  */
-import { Notyf } from "notyf";
-import { createApp } from "vue";
+import {Notyf} from "notyf";
+import {createApp} from "vue";
 import NotificationBell from "../vue/components/NotificationBell.vue";
 import ActiveJourneyMap from "../vue/components/ActiveJourneyMap.vue";
 import Stationboard from "../vue/components/Stationboard.vue";
@@ -15,10 +15,11 @@ import "./components/maps";
 import CheckinSuccessHelper from "../vue/components/CheckinSuccessHelper.vue";
 import {i18nVue} from "laravel-vue-i18n";
 import TagHelper from "../vue/components/TagHelper.vue";
+import TripCreationForm from "../vue/components/TripCreation/TripCreationForm.vue";
 
 window.notyf = new Notyf({
     duration: 5000,
-    position: { x: "right", y: window.innerWidth > 480 ? "top" : "bottom" },
+    position: {x: "right", y: window.innerWidth > 480 ? "top" : "bottom"},
     dismissible: true,
     ripple: true,
     types: [
@@ -43,11 +44,11 @@ window.notyf = new Notyf({
     ],
 });
 
-document.addEventListener("DOMContentLoaded", function() {
+document.addEventListener("DOMContentLoaded", function () {
     // get language query parameter
     let fallbackLang = "en";
-    const urlParams = new URLSearchParams(window.location.search);
-    const lang = urlParams.get("language");
+    const urlParams  = new URLSearchParams(window.location.search);
+    const lang       = urlParams.get("language");
 
     if (lang && lang.startsWith("de_")) {
         fallbackLang = "de";
@@ -95,7 +96,9 @@ document.addEventListener("DOMContentLoaded", function() {
     });
     app5.mount("#tag-helper");
 
-
+    const app6 = createApp({});
+    app6.component("TripCreationForm", TripCreationForm);
+    app6.mount("#trip-creation-form");
 });
 
 /**

resources/js/app.js

@@ -3,15 +3,6 @@
 @section('title', 'Create new trip manually')
 
 @section('content')
-
-    <div class="alert alert-info">
-        This form is currently for testing purposes only.
-        Admins can create a trip with manually entered data.
-        Users can check in to this trip.
-        It should be tested if the trip is created correctly and all data required for the trip is present, so no (500)
-        errors occur.
-    </div>
-
     <div id="trip-creation-form">
         <trip-creation-form></trip-creation-form>
     </div>

resources/views/admin/trip/create.blade.php

@@ -0,0 +1,11 @@
+@extends('layouts.app')
+
+@section('title', 'Create trip manually')
+
+@section('content')
+    <div class="container">
+        <div id="trip-creation-form">
+            <trip-creation-form></trip-creation-form>
+        </div>
+    </div>
+@endsection

resources/views/closed-beta/trip-creation.blade.php

@@ -1,6 +1,5 @@
 <script>
 import StationRow from "./StationRow.vue";
-import {isNumber, random} from "lodash";
 import {DateTime} from "luxon";
 
 export default {
@@ -58,9 +57,9 @@ export default {
             this.form.destinationArrivalPlanned = DateTime.fromISO(time).setZone(this.destinationTimezone);
         },
         sendform() {
-            this.form.lineName      = this.trainTypeInput + " " + this.trainNumberInput;
+            this.form.lineName = this.trainTypeInput + " " + this.trainNumberInput;
 
-            let trainNumber = parseInt(this.trainNumberInput);
+            let trainNumber         = parseInt(this.trainNumberInput);
             this.form.journeyNumber = trainNumber || null;
 
             fetch("/api/v1/trains/trip", {
@@ -72,7 +71,7 @@ export default {
             }).then((data) => {
                 if (data.ok) {
                     data.json().then((result) => {
-                        result = result.data;
+                        result    = result.data;
                         let query = {
                             tripID: result.id,
                             lineName: result.lineName,
@@ -91,8 +90,25 @@ export default {
 
 <template>
     <div>
-        <h1>TripCreationForm</h1>
-        <form @submit.prevent="sendform">
+        <h1 class="fs-4">
+            <i class="fa fa-plus" aria-hidden="true"></i>
+            Create trip manually (closed-beta)
+        </h1>
+
+        <div class="alert alert-info">
+            <h2 class="fs-5">
+                <i class="fa fa-info-circle" aria-hidden="true"></i>
+                Beta users only
+            </h2>
+
+            This form is currently for testing purposes only.
+            Beta users can create a trip with manually entered data.
+            All Users can check in to this trip.
+            It should be tested if the trip is created correctly and all data required for the trip is present, so no
+            (500) errors occur or if features are missing which are not mentioned in the limitations section.
+        </div>
+
+        <form @submit.prevent="sendform" class="mb-3">
             <div class="row g-3 mb-3">
                 <StationRow
                     placeholder="Startbahnhof"
@@ -135,8 +151,20 @@ export default {
                     <button type="submit" class="btn btn-primary float-end">Speichern</button>
                 </div>
             </div>
-
         </form>
+
+        <div class="alert alert-warning">
+            <h2 class="fs-5">
+                <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
+                Current limitations
+            </h2>
+
+            <ul>
+                <li>Only stations available in DB-HAFAS are supported</li>
+                <li>Stopovers can't be created yet</li>
+                <li>Polyline is generated straight from origin to destination (Brouter generation will apply if the difference between air distance and distance by train isn't too big)</li>
+            </ul>
+        </div>
     </div>
 </template>
 

resources/vue/components/TripCreation/TripCreationForm.vue

@@ -123,6 +123,10 @@
  * All of these routes can only be used by fully registered users.
  */
 Route::middleware(['auth', 'privacy'])->group(function() {
+    Route::view('/beta/trip-creation', 'closed-beta.trip-creation')
+         ->can('create-manual-trip')
+         ->name('beta.trip-creation');
+
     Route::post('/ics/createToken', [IcsController::class, 'createIcsToken'])
          ->name('ics.createToken'); //TODO: Replace with API Endpoint
     Route::post('/ics/revokeToken', [IcsController::class, 'revokeIcsToken'])